/* =========================================================
   TEMPUS — Single Product Page Styling

   WHERE THIS GOES: save as
       kadence-child/assets/css/product-page.css
   and enqueue it from the child theme's functions.php:

       add_action( 'wp_enqueue_scripts', function() {
           if ( function_exists( 'is_product' ) && is_product() ) {
               wp_enqueue_style(
                   'tempus-product-page',
                   get_stylesheet_directory_uri() . '/assets/css/product-page.css',
                   array( 'tempus-tokens' ),   // <- your tokens.css handle
                   '1.0'
               );
           }
       }, 20 );

   Change 'tempus-tokens' to whatever handle you registered tokens.css
   under. That dependency is what guarantees tokens.css loads first.

   ---------------------------------------------------------
   MAPPING LAYER
   Every value below reads from your existing tokens.css first and only
   falls back to the hex if that token doesn't exist. Open tokens.css,
   check the variable names, and correct any that don't match — then the
   product page tracks the homepage automatically forever after.
   ========================================================= */

:root {
	--t-bg:        var(--bg-page,           #0F0A07);  /* near-black brown   */
	--t-panel:     var(--surface-card,      #1A120C);  /* cards, ritual box  */
	--t-line:      var(--outline-variant,   rgba(200, 151, 63, .16));
	--t-gold:      var(--accent,            #C8973F);  /* buttons, price     */
	--t-gold-soft: var(--accent-hover,      #E0B45F);  /* hover              */
	--t-cream:     var(--text-primary,      #F3EADC);  /* headings, body     */
	--t-muted:     var(--text-faint,        #A2907A);  /* labels, old price  */
	--t-green:     var(--success,           #6FA96B);  /* in-stock dot       */

	/* Licensed brand faces — self-hosted, no substitution.
	   Serif carries the product name and tasting prose; the condensed
	   sans carries every uppercase label, spec, and button. */
	--t-serif: "Cormorant Garamond", Georgia, serif;
	--t-sans:  "Proxima Nova Condensed", "Proxima Nova", system-ui, sans-serif;
}


/* ---------------------------------------------------------
   PAGE SHELL
   --------------------------------------------------------- */
.single-product .site-content,
.single-product .content-area,
.single-product .entry-content {
	background: var(--t-bg);
	color: var(--t-cream);
}

.single-product .entry-hero-container-inner,
.single-product .woocommerce-breadcrumb,
.single-product .woocommerce-product-rating {
	display: none;
}

/* The wrapper div is now a plain block — no grid, no float games.
   All layout happens inside .tempus-hero-inner. */
.tempus-product {
	display: block;
}


/* ---------------------------------------------------------
   HERO
   Background bleeds full width; content is capped and centred.
   --------------------------------------------------------- */
.tempus-hero {
	background-color: #120C08;
	background-image:
		linear-gradient(105deg, rgba(15, 10, 7, .94) 35%, rgba(15, 10, 7, .55) 100%),
		var(--tempus-hero-image, none);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--t-line);
}

.tempus-hero-inner {
	max-width: var(--t-max, 1400px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 4vw, 4rem);
}


/* ---------------------------------------------------------
   HERO — IMAGE COLUMN
   --------------------------------------------------------- */
.tempus-hero-media {
	position: relative;
}

.tempus-hero-figure {
	margin: 0;
	max-width: 440px;
}

.tempus-hero-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: #000;
	border: 1px solid var(--t-line);
	border-radius: 2px;
}

.tempus-hero-thumbs {
	display: flex;
	gap: .6rem;
	list-style: none;
	margin: .85rem 0 0;
	padding: 0;
	max-width: 440px;
}

.tempus-hero-thumbs li {
	flex: 0 0 68px;
	margin: 0;
}

.tempus-hero-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--t-line);
	border-radius: 2px;
	opacity: .65;
	cursor: pointer;
	transition: opacity .2s ease, border-color .2s ease;
}

.tempus-hero-thumbs img:hover {
	opacity: 1;
	border-color: var(--t-gold);
}

/* Woo's round green "Sale!" bubble — the Save badge replaces it */
.tempus-hero .onsale {
	display: none;
}


/* ---------------------------------------------------------
   HERO — DETAIL COLUMN
   --------------------------------------------------------- */
.tempus-hero-detail {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.tempus-eyebrow {
	font-family: var(--t-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--t-gold);
	margin: 0 0 .9rem;
}

.tempus-hero-detail .product_title {
	font-family: var(--t-serif);
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 500;
	line-height: .95;
	letter-spacing: -.01em;
	color: var(--t-cream);
	margin: 0 0 1.5rem;
	max-width: 12em;
}

.tempus-hero-detail .woocommerce-product-details__short-description {
	font-family: var(--t-serif);
	font-size: 1.2rem;          /* Cormorant runs small — sized up to compensate */
	line-height: 1.65;
	color: rgba(243, 234, 220, .78);
	max-width: 32em;
	margin-bottom: 2rem;
}


/* --- Price row --- */
.tempus-hero-detail > .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .85rem;
	margin: 0 0 2rem;
	font-family: var(--t-serif);
}

.tempus-hero-detail > .price ins {
	order: 1;
	text-decoration: none;
	font-size: 2.6rem;
	color: var(--t-gold);
	background: transparent;
}

.tempus-hero-detail > .price del {
	order: 2;
	font-size: 1.15rem;
	color: var(--t-muted);
	opacity: 1;
}

.tempus-hero-detail > .price > .amount {   /* products not on sale */
	font-size: 2.6rem;
	color: var(--t-gold);
}

.tempus-save {
	order: 3;
	font-family: var(--t-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 2px;
	padding: .35rem .6rem;

	color: #9BD08F;                                            /* fallback */
	color: color-mix(in srgb, var(--t-green) 82%, white);
	background: rgba(111, 169, 107, .14);                      /* fallback */
	background: color-mix(in srgb, var(--t-green) 14%, transparent);
	border: 1px solid rgba(111, 169, 107, .35);                /* fallback */
	border: 1px solid color-mix(in srgb, var(--t-green) 38%, transparent);
}


/* --- Quantity + Add to cart --- */
.tempus-hero-detail form.cart {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	margin: 0 0 1rem;
}

.tempus-hero-detail form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--t-line);
	border-radius: 2px;
	background: rgba(0, 0, 0, .3);
	min-width: 150px;
}

.tempus-hero-detail form.cart .quantity input[type="number"],
.tempus-hero-detail form.cart .quantity .qty {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--t-cream);
	text-align: center;
	font-family: var(--t-sans);
	font-size: 1rem;
	width: 100%;
}

.tempus-hero-detail form.cart .kadence-quantity-button,
.tempus-hero-detail form.cart .quantity .minus,
.tempus-hero-detail form.cart .quantity .plus {
	background: transparent;
	border: 0;
	color: var(--t-muted);
	font-size: 1.2rem;
	padding: 0 1rem;
	cursor: pointer;
	transition: color .2s ease;
}

.tempus-hero-detail form.cart .kadence-quantity-button:hover,
.tempus-hero-detail form.cart .quantity .minus:hover,
.tempus-hero-detail form.cart .quantity .plus:hover {
	background: transparent;
	color: var(--t-gold);
}

.tempus-hero-detail form.cart button.single_add_to_cart_button {
	flex: 1;
	min-width: 220px;
	background: var(--t-gold);
	color: #191007;
	font-family: var(--t-sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	border: 0;
	border-radius: 2px;
	padding: 1.15rem 2rem;
	transition: background .25s ease, transform .25s ease;
}

.tempus-hero-detail form.cart button.single_add_to_cart_button:hover {
	background: var(--t-gold-soft);
	transform: translateY(-1px);
}


/* --- Stock line --- */
.tempus-stock {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--t-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--t-muted);
	margin: 0;
}

.tempus-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--t-green);
	box-shadow: 0 0 8px color-mix(in srgb, var(--t-green) 70%, transparent);
}

.tempus-stock.is-out .tempus-dot {
	background: #9A6B4F;
	box-shadow: none;
}


/* ---------------------------------------------------------
   HERO — MOBILE
   (section 5 of product-page.css still handles the rest)
   --------------------------------------------------------- */
@media (max-width: 900px) {
	.tempus-hero-inner {
		grid-template-columns: 1fr;
	}

	.tempus-hero-figure,
	.tempus-hero-thumbs {
		max-width: 360px;
		margin-inline: auto;
	}

	.tempus-hero-detail .product_title {
		max-width: none;
	}

	.tempus-hero-detail form.cart {
		flex-wrap: wrap;
	}

	.tempus-hero-detail form.cart button.single_add_to_cart_button {
		width: 100%;
	}
}


/* ---------------------------------------------------------
   2. SPEC BAR
   --------------------------------------------------------- */
.tempus-specbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border-top: 1px solid var(--t-line);
	border-bottom: 1px solid var(--t-line);
	background: rgba(0, 0, 0, .25);
}

.tempus-spec {
	padding: 1.6rem clamp(1rem, 2.5vw, 2.25rem);
	border-right: 1px solid var(--t-line);
}
.tempus-spec:last-child {
	border-right: 0;
}

.tempus-spec-label {
	display: block;
	font-family: var(--t-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--t-muted);
	margin-bottom: .5rem;
}

.tempus-spec-value {
	display: block;
	font-family: var(--t-sans);
	font-size: 1rem;
	color: var(--t-cream);
}


/* ---------------------------------------------------------
   3. TASTING NOTES + RITUAL
   --------------------------------------------------------- */
.tempus-story {
	padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 4rem);
}

.tempus-story-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.tempus-notes-title {
	font-family: var(--t-serif);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 500;
	color: var(--t-cream);
	margin: 0 0 1.5rem;
}

.tempus-notes-body p {
	font-family: var(--t-serif);
	font-size: 1.18rem;         /* Cormorant runs small — sized up to compensate */
	line-height: 1.8;
	color: rgba(243, 234, 220, .74);
	max-width: 40em;
}

.tempus-trust {
	display: flex;
	gap: 2.25rem;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 2rem 0 0;
	border-top: 1px solid var(--t-line);
}
.tempus-trust li {
	font-family: var(--t-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--t-muted);
}
.tempus-trust li::before {
	margin-right: .5rem;
	color: var(--t-gold);
}
.tempus-trust-lock::before  { content: "\1F512"; }
.tempus-trust-check::before { content: "\2713"; }

/* --- Ritual card --- */
.tempus-ritual {
	background: var(--t-panel);
	border: 1px solid var(--t-line);
	border-radius: 3px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.tempus-ritual-items {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.tempus-ritual-item {
	flex: 1;
	margin: 0;
	text-align: center;
}
.tempus-ritual-item img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--t-line);
	border-radius: 2px;
	display: block;
}
.tempus-ritual-item figcaption {
	font-family: var(--t-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-muted);
	margin-top: .75rem;
}

.tempus-plus {
	color: var(--t-gold);
	font-size: 1.15rem;
	flex: 0 0 auto;
}

.tempus-ritual-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.tempus-ritual-price,
.tempus-ritual-price .amount {
	font-family: var(--t-serif);
	font-size: 1.85rem;
	color: var(--t-gold);
}

.tempus-ritual-btn {
	font-family: var(--t-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-gold);
	border: 1px solid var(--t-gold);
	border-radius: 2px;
	padding: .8rem 1.5rem;
	text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
.tempus-ritual-btn:hover {
	background: var(--t-gold);
	color: #191007;
}


/* ---------------------------------------------------------
   4. RELATED PRODUCTS — "You May Also Savor"
   --------------------------------------------------------- */
.tempus-related {
	position: relative;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 4rem) clamp(4rem, 8vw, 6rem);
}

.tempus-related .related > h2,
.tempus-related .up-sells > h2 {
	font-family: var(--t-serif);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 500;
	color: var(--t-cream);
	margin: 0 0 2.5rem;
}

.tempus-viewall {
	position: absolute;
	top: clamp(2.6rem, 5.6vw, 4.6rem);
	right: clamp(1.25rem, 4vw, 4rem);
	font-family: var(--t-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-gold);
	text-decoration: none;
}
.tempus-viewall:hover { color: var(--t-gold-soft); }

/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kadence and Woo both ship float/width rules for the old markup */
.woocommerce ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
}


/* ---------------------------------------------------------
   CARD — the frame
   --------------------------------------------------------- */
.tempus-card {
	display: flex;
	flex-direction: column;
	background: var(--t-panel);
	border: 1px solid var(--t-line);
	border-radius: 6px;
	overflow: hidden;
	text-align: left;
	transition: transform .3s ease, border-color .3s ease;
	container-type: inline-size; /* query container for the @container rule below */
}

.tempus-card:hover {
	transform: translateY(-4px);
	border-color: var(--t-gold);
}


/* ---------------------------------------------------------
   CARD — the photo panel (the "mount board")
   Near-black, darker than the card body, with breathing room
   around the bottle.
   --------------------------------------------------------- */
.tempus-card-frame {
	position: relative;
	background: linear-gradient(360deg, #000000, #150500);
	padding: 26px;
}

.tempus-card-media {
	display: block;
}

.woocommerce ul.products li.product .tempus-card-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	margin: 0;
	border-radius: 2px;
}

.tempus-limited {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	font-family: var(--t-sans);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #191007;
	background: var(--t-gold);
	padding: .35rem .65rem;
	border-radius: 2px;
}

/* Woo's round "Sale!" bubble — not part of the design */
.woocommerce ul.products li.product .onsale {
	display: none;
}


/* ---------------------------------------------------------
   CARD — the body (the "caption plate")
   --------------------------------------------------------- */
.tempus-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.tempus-card-eyebrow {
	font-family: var(--t-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	margin: 0 0 .5rem;
}

.tempus-card-title {
	font-family: var(--t-serif);
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 .4rem;
	padding: 0;
}

.tempus-card-title a {
	color: var(--t-cream);
	text-decoration: none;
}

.tempus-card-title a:hover {
	color: var(--t-gold);
}

.tempus-card-meta {
	font-family: var(--t-sans);
	font-size: .8rem;
	color: var(--t-muted);
	margin: 0 0 1.25rem;
}


/* ---------------------------------------------------------
   CARD — price and button on one row
   margin-top:auto pins this to the bottom so cards with
   shorter names still line their buttons up.
   --------------------------------------------------------- */
.tempus-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
}

.woocommerce ul.products li.product .tempus-card-foot .price {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0;
	font-family: var(--t-serif);
	font-size: 1.45rem;
	color: var(--t-gold);
}

/* Sale price first, original struck through after — matches the hero */
.woocommerce ul.products li.product .tempus-card-foot .price ins {
	order: 1;
	text-decoration: none;
	background: transparent;
	color: var(--t-gold);
}

.woocommerce ul.products li.product .tempus-card-foot .price del {
	order: 2;
	font-size: .85rem;
	color: var(--t-muted);
	opacity: 1;
}

.woocommerce ul.products li.product .tempus-card-foot .button,
.woocommerce ul.products li.product .tempus-card-foot .add_to_cart_button {
	flex: 0 0 auto;
	display: inline-block;
	font-family: var(--t-sans);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--t-gold);
	background: transparent;
	border: 1px solid var(--t-gold);
	border-radius: 2px;
	padding: .75rem 1.35rem;
	margin: 0;
	transition: background .25s ease, color .25s ease;
}

.woocommerce ul.products li.product .tempus-card-foot .button:hover,
.woocommerce ul.products li.product .tempus-card-foot .added_to_cart:hover {
	background: var(--t-gold);
	color: #191007;
}

/* "View cart" link Woo appends after an ajax add */
.woocommerce ul.products li.product .tempus-card-foot .added_to_cart {
	flex: 0 0 100%;
	font-family: var(--t-sans);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--t-muted);
	margin-top: .5rem;
}


/* ---------------------------------------------------------
   NARROW CARDS
   Below ~320px of card width the foot row runs out of space,
   so let it stack rather than squash the button.
   --------------------------------------------------------- */
@container (max-width: 320px) {
	.tempus-card-foot {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.tempus-card-frame {
		padding: 18px;
	}

	.tempus-card-body {
		padding: 16px;
	}
}


/* ---------------------------------------------------------
   5. MOBILE
   --------------------------------------------------------- */
@media (max-width: 900px) {
	.tempus-story-inner {
		grid-template-columns: 1fr;
	}

	.tempus-spec {
		border-right: 0;
		border-bottom: 1px solid var(--t-line);
	}

	.tempus-viewall {
		position: static;
		display: inline-block;
		margin-bottom: 2rem;
	}
}


/* ---------------------------------------------------------
   6. ACCESSIBILITY
   --------------------------------------------------------- */
.single-product a:focus-visible,
.single-product button:focus-visible {
	outline: 2px solid var(--t-gold-soft);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.single-product form.cart button.single_add_to_cart_button {
		transition: none;
	}
}

/* ---------------------------------------------------------
   7. CONTENT WIDTH
   Backgrounds bleed edge to edge; content stays centred.
   Tune --t-max and everything follows.
   --------------------------------------------------------- */
:root {
	--t-max: 1400px;
}

.single-product div.product,
.tempus-specbar,
.tempus-story,
.tempus-related {
	max-width: var(--t-max);
	margin-inline: auto;
}

/* Stop the bottle photo inflating on very wide screens */
.single-product .woocommerce-product-gallery {
	max-width: 620px;
}

/* Keep prose at a readable measure regardless of container width */
.single-product .woocommerce-product-details__short-description,
.tempus-notes-body p {
	max-width: 32em;
}