/*
 * Single product page.
 *
 * The structure is an Elementor layout (design/product-page/build_layout.py);
 * this file is its look. It keys on the `rb-pdp*` classes that layout sets, so
 * an Elementor edit that moves a widget keeps its styling.
 *
 * Colour comes from the theme's own tokens: cocoa for text, gold for the one
 * action on the page. Gold on cream is too pale to read as text, so text that
 * is gold uses the deeper #a9803a already used for prices on the home page.
 */

.rb-pdp-crumbs,
.rb-pdp,
.rb-pdp-details,
.rb-pdp-related {
	--rb-ink: var(--rb-cocoa, #2a1c0f);
	--rb-ink-soft: rgba(42, 28, 15, 0.7);
	--rb-gold-text: #a9803a;
	--rb-line: rgba(169, 128, 58, 0.22);
}

/* --- breadcrumb ---------------------------------------------------------- */

.rb-pdp-crumbs {
	margin-block: 1rem 1.1rem;
}

.rb-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.55rem;
	font-size: 0.85rem;
	color: var(--rb-ink-soft);
}

.rb-crumbs a {
	color: inherit;
	text-decoration: none;
}

.rb-crumbs a:hover,
.rb-crumbs a:focus-visible {
	color: var(--rb-gold-text);
}

/* Woodmart prints an empty delimiter span and draws it from its own icon font,
   which this page does not load; a plain chevron is all it needs. */
.rb-crumbs .wd-delimiter {
	display: inline-flex;
	margin: 0;
}

.rb-crumbs .wd-delimiter::before {
	content: '\2039';
	font-size: 1.2em;
	line-height: 1;
	opacity: 0.55;
}

.rb-crumbs .wd-delimiter::after {
	content: none;
}

.rb-crumbs .wd-last {
	color: var(--rb-ink);
	font-weight: 600;
}

/* --- the product: photos, then everything about buying it ----------------- */

.rb-pdp {
	margin-block-end: var(--rb-gap, 2.5rem);
}

.rb-pdp > .elementor-container {
	align-items: stretch;
}

/*
 * Proportions. The photo took 56% of the row and stayed square, so on a 1440px
 * screen it stood 757px tall in a 900px window: the photo, its thumbnails and
 * the buy button never fitted on one screen.
 *
 * Now the photo gets 44% of the row (half on tablets), and its height is also
 * capped by the window, so on any screen the photo and the thumbnails under it
 * are seen together. Phones stack, full width, as before.
 */
@media (min-width: 768px) {
	.rb-pdp .elementor-container > .rb-pdp__media.elementor-column {
		width: 50%;
	}

	.rb-pdp .elementor-container > .rb-pdp__summary.elementor-column {
		width: 50%;
	}
}

@media (min-width: 1024px) {
	.rb-pdp .elementor-container > .rb-pdp__media.elementor-column {
		width: 44%;
	}

	.rb-pdp .elementor-container > .rb-pdp__summary.elementor-column {
		width: 56%;
	}
}

.rb-pdp__gallery {
	max-width: min(100%, max(58vh, 24rem));
	margin-inline: auto;
}

.rb-pdp__media,
.rb-pdp__summary {
	min-width: 0;
}

.rb-pdp__summary > .elementor-widget-wrap {
	padding-inline-start: clamp(1.25rem, 3.4vw, 3.5rem);
	padding-block-start: clamp(0rem, 1vw, 0.75rem);
	align-content: flex-start;
}

/* The photos are taller than the buying column; keep the buying column in view
   while they scroll past, so the price and the button never leave the screen. */
@media (min-width: 1025px) {
	.rb-pdp__summary > .elementor-widget-wrap {
		position: sticky;
		top: 7rem;
		height: fit-content;
	}
}

/* Woodmart separates widgets with its own bottom margin, which stacked on top
   of Elementor's left the column loose and uneven. One rhythm instead. */
.rb-pdp__summary .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.rb-pdp__summary .elementor-widget + .elementor-widget {
	margin-block-start: 0.9rem;
}

/* Gallery: a framed square stage, so a tall photo cannot stretch the row. */
.rb-pdp__gallery .wd-gallery-images {
	overflow: hidden;
	border-radius: var(--rb-radius, 20px);
	background: #fff;
	box-shadow: 0 0 0 1px rgba(169, 128, 58, 0.18);
}

.rb-pdp__gallery .wd-gallery-images .woocommerce-product-gallery__image {
	aspect-ratio: 1;
}

.rb-pdp__gallery .wd-gallery-images .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.rb-pdp__gallery .wd-gallery-images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rb-pdp__gallery .wd-gallery-thumb {
	margin-block-start: 0.75rem;
}

.rb-pdp__gallery .wd-gallery-thumb img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0.7rem;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(169, 128, 58, 0.18);
}

/* --- summary --------------------------------------------------------------- */

.rb-pdp__eyebrow {
	display: inline-block;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--rb-gold-text);
	text-decoration: none;
}

.rb-pdp__eyebrow:hover,
.rb-pdp__eyebrow:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.rb-pdp .rb-pdp__title .product_title,
.rb-pdp .rb-pdp__title h1 {
	margin: 0;
	font-size: clamp(1.55rem, 2.5vw, 2.3rem);
	font-weight: 800;
	line-height: 1.4;
	color: var(--rb-ink);
}

.rb-pdp .rb-pdp__price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.75rem;
	margin: 0;
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 800;
	line-height: 1.4;
	color: var(--rb-gold-text);
}

.rb-pdp .rb-pdp__price .price ins {
	text-decoration: none;
	color: inherit;
}

.rb-pdp .rb-pdp__price .price del {
	font-size: 0.62em;
	font-weight: 500;
	color: var(--rb-ink);
	opacity: 0.5;
}

.rb-pdp .rb-pdp__lead,
.rb-pdp .rb-pdp__lead p {
	font-size: 1rem;
	line-height: 2;
	color: var(--rb-ink-soft);
}

.rb-pdp .rb-pdp__lead p {
	margin: 0;
}

/* Buying: stock line, quantity and the one gold button. */
.rb-pdp__buy {
	padding-block-start: 1.1rem;
	border-block-start: 1px solid var(--rb-line);
}

.rb-pdp__buy .stock {
	margin: 0 0 0.85rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: #4f7a3f;
}

.rb-pdp__buy .stock.out-of-stock {
	color: #a33a2c;
}

.rb-pdp__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0;
}

.rb-pdp__buy .quantity {
	min-height: 3.25rem;
}

.rb-pdp .rb-pdp__buy .single_add_to_cart_button {
	flex: 1 1 11rem;
	min-height: 3.25rem;
	padding-inline: 1.9em;
	border: 0;
	border-radius: 999px;
	background: #d2ac67;
	color: #241704;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 10px 30px rgba(210, 172, 103, 0.28);
	transition: transform 220ms ease, background-color 220ms ease;
}

.rb-pdp .rb-pdp__buy .single_add_to_cart_button:hover,
.rb-pdp .rb-pdp__buy .single_add_to_cart_button:focus-visible {
	background: #e2c188;
	color: #241704;
	transform: translateY(-2px);
}

.rb-pdp .rb-pdp__buy .single_add_to_cart_button:focus-visible {
	outline: 3px solid #e2c188;
	outline-offset: 3px;
}

/* Three promises the shop already makes elsewhere on the site. */
.rb-pdp .rb-pdp__summary .rb-pdp__trust {
	margin-block-start: 1.5rem;
}

.rb-pdp__trust .elementor-icon-list-items {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 1rem 0;
	list-style: none;
	border-block: 1px solid var(--rb-line);
}

.rb-pdp__trust .elementor-icon-list-item {
	margin: 0;
}

.rb-pdp__trust .elementor-icon-list-icon {
	color: var(--rb-gold-text);
}

.rb-pdp__trust .elementor-icon-list-text {
	font-size: 0.92rem;
	color: var(--rb-ink-soft);
}

.rb-pdp__meta .product_meta {
	display: grid;
	gap: 0.3rem;
	font-size: 0.85rem;
	color: var(--rb-ink-soft);
}

.rb-pdp__meta .meta-label {
	font-weight: 600;
	color: var(--rb-ink);
}

.rb-pdp__meta a {
	color: inherit;
}

/* --- description, specifications, reviews ------------------------------------ */

.rb-pdp-details {
	margin-block: var(--rb-gap, 2.5rem);
}

.rb-pdp__tabs {
	padding: clamp(1rem, 2.4vw, 2rem);
	border-radius: var(--rb-radius, 20px);
	background: #fff;
	box-shadow: 0 0 0 1px rgba(169, 128, 58, 0.18);
}

.rb-pdp__tabs .woocommerce-Tabs-panel,
.rb-pdp__tabs .wd-accordion-content {
	line-height: 2;
	color: var(--rb-ink-soft);
}

.rb-pdp__tabs .woocommerce-Tabs-panel p {
	margin-block-end: 1rem;
}

/* --- related ------------------------------------------------------------------- */

.rb-pdp-related {
	margin-block: var(--rb-gap, 2.5rem) calc(var(--rb-gap, 2.5rem) * 1.4);
}

.rb-pdp-related .rb-pdp-related__title .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	font-weight: 800;
	color: var(--rb-ink);
}

.rb-pdp-related .rb-pdp-related__title .elementor-heading-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--rb-line);
}

/* --- phones ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.rb-pdp__summary > .elementor-widget-wrap {
		padding-inline: 0;
		padding-block-start: 1.25rem;
	}

	.rb-pdp .rb-pdp__buy .single_add_to_cart_button {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rb-pdp .rb-pdp__buy .single_add_to_cart_button {
		transition: none;
	}

	.rb-pdp .rb-pdp__buy .single_add_to_cart_button:hover {
		transform: none;
	}
}