/* =========================================================================
   Ace & Whim — Product Page Module
   Scoped under body.aws-pdp so it only touches products using this module,
   and so it reliably wins against Showit's `.d`/`.m` global type rules.

   v2.0.1 fixes (from the Oct-16 live test):
    - Woo core's frontend.css sets `.images, .summary { width:48%; float }`,
      which shrank both grid columns to ~48% of their grid-area width on
      top of the grid sizing. Reset to width:auto; float:none so the grid
      itself is the only thing sizing them.
    - Mobile stayed two columns because `.summary` kept grid-column:2 under
      the single-column mobile breakpoint, pushing it into an
      auto-generated second track. Reset grid-column to auto on mobile.
    - H1 lost to Showit's `.d .se-wpt h1` at equal specificity, loading
      later in source order. Selector below is deliberately longer/more
      specific so it wins outright instead of relying on load order.

   v2.0.4: sticky buy box dropped entirely at the time — Showit wraps the
   page in `div.sp` with `overflow: hidden`, and ANY ancestor that isn't
   `overflow: visible` disqualifies it as a scroll container for native
   `position: sticky`. That constraint hasn't changed; v2.2.0 asks for a
   sticky GALLERY instead (not the buy box) and ships the real CSS for it
   below, but the same Showit-level ceiling may still apply — if it
   doesn't visibly stick on retest, that's this known constraint, not a
   bug in this rule.

   v2.2.0 — Tonic-style layout: ~55/45 two-column grid in a 1200px
   container, sticky gallery, description/tabs/bundle moved into the right
   column (now rendered inside .summary by class-aws-pdp.php), FAQ stays
   full width below the whole section. See class-aws-pdp.php's class
   docblock for the hook-level explanation.
   ========================================================================= */

body.aws-pdp .product {
	display: grid;
	grid-template-columns: 11fr 9fr; /* ~55% / 45% */
	gap: clamp(48px, 4vw, 64px);
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}

/* v2.0.2 fix: WooCommerce core's own woocommerce.css has
   `.woocommerce div.product div.images { width: 48% }` at specificity
   (0,3,2), which beat the plain `.images` rule below it — the summary
   column only escaped this because its selector already carried an extra
   class (.summary.entry-summary). Matching Woo's own selector shape
   (adding the .woocommerce and div qualifiers) pushes this past (0,3,2)
   reliably instead of hoping load order favors us. */
body.aws-pdp.woocommerce div.product div.images,
body.aws-pdp.woocommerce div.product div.summary,
body.aws-pdp .product > .images,
body.aws-pdp .product > .summary.entry-summary {
	width: auto;
	float: none;
}
body.aws-pdp .product > .images .woocommerce-product-gallery,
body.aws-pdp .product > .images .flex-viewport,
body.aws-pdp .product > .images img {
	width: 100%;
	max-width: 100%;
}

/* Left column — sticky gallery. */
body.aws-pdp .product > .images {
	grid-column: 1;
	position: sticky;
	top: 24px;
	align-self: start;
}
body.aws-pdp .product > .images .woocommerce-product-gallery {
	position: relative;
}
body.aws-pdp .product > .images .woocommerce-product-gallery__wrapper,
body.aws-pdp .product > .images .flex-viewport {
	border-radius: 8px;
	overflow: hidden;
	background: var(--aws-cream, #F6F6F2);
}
body.aws-pdp .product > .images .woocommerce-product-gallery__image img,
body.aws-pdp .product > .images img {
	border-radius: 8px;
}

/* Prev/next arrows — flexslider's own markup (.flex-direction-nav >
   .flex-prev / .flex-next), only present once "wc-product-gallery-slider"
   theme support is declared (see maybe_add_gallery_theme_support()).
   Drawn as plain round white buttons with a CSS-only chevron, same
   technique as the FAQ accordion icon below, rather than depending on
   flexslider's own icon font. */
body.aws-pdp .product > .images .flex-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.aws-pdp .product > .images .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	opacity: 1;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	z-index: 2;
}
body.aws-pdp .product > .images .flex-direction-nav a:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -5px 0 0 -5px;
	border-right: 2px solid var(--aws-olive, #42432E);
	border-bottom: 2px solid var(--aws-olive, #42432E);
	text-indent: 0;
}
body.aws-pdp .product > .images .flex-direction-nav .flex-prev { left: 12px; }
body.aws-pdp .product > .images .flex-direction-nav .flex-next { right: 12px; }
body.aws-pdp .product > .images .flex-direction-nav .flex-prev:before { transform: rotate(135deg); margin-left: -7px; }
body.aws-pdp .product > .images .flex-direction-nav .flex-next:before { transform: rotate(-45deg); margin-left: -3px; }

/* Thumbnail strip — flexslider's .flex-control-thumbs, only present once
   "wc-product-gallery-thumbnails" theme support is declared. */
body.aws-pdp .product > .images ol.flex-control-thumbs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
body.aws-pdp .product > .images ol.flex-control-thumbs li {
	width: 64px;
	flex: none;
}
body.aws-pdp .product > .images ol.flex-control-thumbs img {
	display: block;
	width: 100%;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid transparent;
	opacity: .65;
	transition: opacity .15s ease;
}
body.aws-pdp .product > .images ol.flex-control-thumbs img:hover {
	opacity: .9;
}
body.aws-pdp .product > .images ol.flex-control-thumbs img.flex-active {
	border-color: var(--aws-olive, #42432E);
	opacity: 1;
}

/* "Disable image zoom" — the zoom_enabled filter + script dequeue (PHP)
   are what actually stop it; this is only a safety net in case a cached
   page still has the zoomed-image markup from before the setting was
   turned on. */
body.aws-pdp .product > .images .zoomImg {
	display: none !important;
}

/* Right column. */
body.aws-pdp .product > .summary.entry-summary {
	grid-column: 2;
	align-self: start;
}

/* FAQ (and, v2.3.0, Showcase) render as siblings of .images/.summary
   (both still hooked on woocommerce_after_single_product_summary, inside
   the same .product grid) — span both tracks so they sit full width below
   the two-column section instead of becoming extra grid cells under
   column 1. */
body.aws-pdp .product > .aws-pdp-faq,
body.aws-pdp .product > .aws-pdp-showcase {
	grid-column: 1 / -1;
}

@media (max-width: 1023px) {
	/* v2.0.4 fix: plain `1fr` was computing to 290px while both children
	   rendered 353px wide — a track-sizing mismatch, not an overflow (the
	   page itself didn't scroll horizontally, but the grid track WordPress
	   was handing out was wrong). `minmax(0,1fr)` removes the implicit
	   minimum-content floor that was fighting the 1fr track. */
	body.aws-pdp .product {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	body.aws-pdp .product > .images,
	body.aws-pdp .product > .summary.entry-summary,
	body.aws-pdp .product > .aws-pdp-faq,
	body.aws-pdp .product > .aws-pdp-showcase {
		grid-column: auto;
	}
	/* Below 1024px: stack gallery → right column → FAQ, gallery not sticky. */
	body.aws-pdp .product > .images {
		position: static;
		top: auto;
	}
}

body.aws-pdp .aws-pdp-title-block { margin-bottom: 8px; }
body.aws-pdp .aws-pdp-eyebrow {
	font-family: 'Josefin Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 13px;
	color: var(--aws-sage, #999A8A);
	margin: 0 0 6px;
}

/* Deliberately higher specificity than Showit's `.d .se-wpt h1` so this
   wins without depending on stylesheet load order. */
body.aws-pdp .product .aws-pdp-title-block h1.aws-pdp-title {
	font-family: 'Gilda Display', Georgia, serif;
	color: var(--aws-olive, #42432E);
	font-size: clamp(24px, 4vw, 42px);
	line-height: 1.15;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* v2.2.0 — "price as plain text, not a pill": same .aws-pdp-price-pill
   class name as before (so no PHP markup change was needed), but the
   pill chrome (background/padding/radius) is gone — it's just text now. */
body.aws-pdp .aws-pdp-price-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 20px;
	flex-wrap: wrap;
}
body.aws-pdp .aws-pdp-price-pill {
	display: inline-flex;
	align-items: center;
	background: none;
	color: var(--aws-olive, #42432E);
	font-family: 'Josefin Sans', sans-serif;
	font-size: 20px;
	padding: 0;
	border-radius: 0;
}
body.aws-pdp .aws-pdp-price-note {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14px;
	color: var(--aws-sage, #999A8A);
}

/* B4 / A-13 — native Woo add-to-cart form, restyled into a full-width
   pill. v2.2.0: fixed 48px height (was padding-driven, which let it drift
   out of sync with the demo button below it). */
body.aws-pdp .cart .single_add_to_cart_button,
body.aws-pdp form.cart .button {
	display: flex;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	background: var(--aws-olive, #42432E) !important;
	color: var(--aws-cream, #F6F6F2) !important;
	text-transform: uppercase;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	letter-spacing: .05em;
	border: none;
	border-radius: 40px;
	padding: 0 28px;
	font-size: 15px;
	cursor: pointer;
	transition: opacity .15s ease;
}
body.aws-pdp .cart .single_add_to_cart_button:hover { opacity: .88; }
body.aws-pdp .cart .single_add_to_cart_button[aria-busy="true"],
body.aws-pdp .cart .single_add_to_cart_button.aws-is-adding { opacity: .6; cursor: progress; }
body.aws-pdp .quantity { display: none; } /* sold-individually: no stepper to show */

/* v2.2.0 — "View Live Demo" now matches Add to cart's width/height
   exactly (full width, 48px), with an 8–12px gap above it (margin-top:
   12px, same box that already separated it from the add-to-cart button). */
body.aws-pdp .aws-pdp-pill {
	display: flex;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 40px;
	font-family: 'Josefin Sans', sans-serif;
	letter-spacing: .03em;
	text-decoration: none;
	padding: 0 26px;
	margin-top: 12px;
	transition: opacity .15s ease;
}
body.aws-pdp .aws-pdp-pill:hover { opacity: .85; }
body.aws-pdp .aws-pdp-pill--secondary {
	background: transparent;
	color: var(--aws-olive, #42432E);
	border: 1.5px solid var(--aws-olive, #42432E);
}

/* F10 polish — View Live Demo matches the other pills' type treatment and
   gets real breathing room below it before whatever comes next. v2.2.0:
   adds the external-link arrow the spec calls for. */
body.aws-pdp .aws-pdp-pill--secondary.aws-pdp-demo-link {
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: .05em;
	margin-bottom: 32px;
}
body.aws-pdp .aws-pdp-pill--secondary.aws-pdp-demo-link:after {
	content: '↗';
	font-size: 15px;
	line-height: 1;
}
@media (max-width: 767px) {
	body.aws-pdp .aws-pdp-pill--secondary.aws-pdp-demo-link {
		margin-bottom: 24px;
	}
}

/* v2.2.0 — "Hide express-pay buttons (e.g. WooPay) on product pages"
   setting. Best-effort: these are the common wrapper classes/IDs
   WooPayments and WooCommerce Blocks' express-checkout button use, but
   none of this could be confirmed against the live DOM, so it's gated
   behind an opt-in toggle (default off) rather than applied unconditionally. */
body.aws-pdp-hide-woopay .wcpay-payment-request-wrapper,
body.aws-pdp-hide-woopay #wcpay-express-checkout-wrapper,
body.aws-pdp-hide-woopay .wc-block-components-express-payment,
body.aws-pdp-hide-woopay .woocommerce-checkout-express-pay,
body.aws-pdp-hide-woopay .wc-proceed-to-checkout .express-checkout,
body.aws-pdp-hide-woopay [class*="express-checkout"],
body.aws-pdp-hide-woopay [id*="express-checkout"] {
	display: none !important;
}

/* F10 polish — eyebrow, H1, price row and demo button all follow one
   alignment under 768px (default: center). The body class comes from the
   "Mobile title alignment" setting (AWS_Settings). */
@media (max-width: 767px) {
	body.aws-pdp .aws-pdp-eyebrow,
	body.aws-pdp .product .aws-pdp-title-block h1.aws-pdp-title,
	body.aws-pdp .aws-pdp-price-row,
	body.aws-pdp .aws-pdp-pill--secondary.aws-pdp-demo-link {
		text-align: center;
	}
	body.aws-pdp .aws-pdp-price-row {
		justify-content: center;
	}
	body.aws-pdp.aws-pdp-align-left .aws-pdp-eyebrow,
	body.aws-pdp.aws-pdp-align-left .product .aws-pdp-title-block h1.aws-pdp-title,
	body.aws-pdp.aws-pdp-align-left .aws-pdp-price-row,
	body.aws-pdp.aws-pdp-align-left .aws-pdp-pill--secondary.aws-pdp-demo-link {
		text-align: left;
	}
	body.aws-pdp.aws-pdp-align-left .aws-pdp-price-row {
		justify-content: flex-start;
	}
}

/* v2.1.1 — reported: an empty colored bar between Add to cart and View
   Live Demo. The two things WooCommerce prints in that exact spot that we
   don't otherwise style are the stock-status paragraph (only shown for
   low-stock/backorder — irrelevant noise for a sold-individually digital
   template anyway) and a sale-price <ins> highlight. Neutralized
   defensively; if this isn't the actual element, it's a harmless no-op. */
body.aws-pdp .product > .summary.entry-summary > .stock {
	display: none;
}
body.aws-pdp .aws-pdp-price-pill ins,
body.aws-pdp .aws-pdp-price-pill del {
	background: none;
	text-decoration: none;
}
body.aws-pdp .aws-pdp-price-pill del {
	text-decoration: line-through;
	opacity: .6;
}

/* =========================================================================
   F2 — Tabs
   v2.2.0: now inside the right column (narrower than before), directly
   after the description, so the margin-top is tightened to match the
   description's 24px rather than the old full-width block's 48px. The
   underline-on-active-tab the spec asks for was already how the aria-
   selected state is styled (border-bottom-color) — unchanged.
   ========================================================================= */

body.aws-pdp .aws-pdp-tabs {
	margin-top: 24px;
	max-width: 70ch;
}
body.aws-pdp .aws-pdp-tabs-single-heading {
	font-family: 'Gilda Display', Georgia, serif;
	color: var(--aws-olive, #42432E);
	font-size: 22px;
	margin: 0 0 16px;
}
body.aws-pdp .aws-pdp-tabs-list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--aws-sage, #999A8A);
	margin-bottom: 20px;
}
body.aws-pdp .aws-pdp-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 4px;
	margin-bottom: -1px;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 15px;
	color: var(--aws-sage, #999A8A);
	cursor: pointer;
}
body.aws-pdp .aws-pdp-tab[aria-selected="true"] {
	color: var(--aws-olive, #42432E);
	border-bottom-color: var(--aws-olive, #42432E);
}
body.aws-pdp .aws-pdp-tabs-panel,
body.aws-pdp .aws-pdp-tabs--single .aws-pdp-tabs-panel {
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-ink, #050A02);
	font-size: 16px;
	line-height: 1.7;
}
@media (max-width: 767px) {
	body.aws-pdp .aws-pdp-tabs-list {
		flex-direction: column;
		border-bottom: none;
		gap: 0;
	}
	body.aws-pdp .aws-pdp-tab {
		text-align: left;
		border-bottom: 1px solid var(--aws-sage, #999A8A);
		padding: 14px 4px;
	}
}

/* =========================================================================
   F3 — FAQ accordion (full width, below the two-column section — see the
   grid-column: 1 / -1 rule above).
   ========================================================================= */

body.aws-pdp .aws-pdp-faq {
	margin-top: 48px;
	max-width: 70ch;
}
body.aws-pdp .aws-pdp-faq-heading {
	font-family: 'Gilda Display', Georgia, serif;
	color: var(--aws-olive, #42432E);
	font-size: 22px;
	margin: 0 0 16px;
}
body.aws-pdp .aws-pdp-faq-item {
	border-bottom: 1px solid var(--aws-sage, #999A8A);
}
body.aws-pdp .aws-pdp-faq-item-heading {
	margin: 0;
	font-size: inherit;
	font-weight: normal;
}
body.aws-pdp .aws-pdp-faq-question {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	text-align: left;
	padding: 16px 0;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 16px;
	color: var(--aws-ink, #050A02);
	cursor: pointer;
}
body.aws-pdp .aws-pdp-faq-icon {
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid var(--aws-olive, #42432E);
	border-bottom: 1.5px solid var(--aws-olive, #42432E);
	transform: rotate(45deg);
	transition: transform .15s ease;
}
body.aws-pdp .aws-pdp-faq-question[aria-expanded="true"] .aws-pdp-faq-icon {
	transform: rotate(-135deg);
}
body.aws-pdp .aws-pdp-faq-answer {
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-ink, #050A02);
	font-size: 15px;
	line-height: 1.7;
	padding: 0 0 16px;
}

/* =========================================================================
   F6 — "Complete the Collection" bundle card
   v2.2.0: redrawn as a light-neutral panel with rounded corners holding a
   vertical list of rows (thumb, category pill, name, price, round + add
   button) per spec, replacing the earlier card-grid. The + button links
   through WC_Product::add_to_cart_url() — a plain (non-AJAX) native
   WooCommerce add, correctly falling back to the product page for
   variable/grouped products. This is still NOT the "Add all" bulk action
   or the bundle-discount-at-checkout pricing — both of those stay
   deferred (see readme.txt); the discount note here is text only.
   ========================================================================= */

body.aws-pdp .aws-pdp-bundle {
	margin-top: 24px;
}
body.aws-pdp .aws-pdp-bundle-panel {
	background: var(--aws-cream, #F6F6F2);
	border-radius: 12px;
	padding: 24px;
}
body.aws-pdp .aws-pdp-bundle-heading {
	font-family: 'Gilda Display', Georgia, serif;
	color: var(--aws-olive, #42432E);
	font-size: 22px;
	margin: 0 0 8px;
}
body.aws-pdp .aws-pdp-bundle-discount-note {
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-sage, #999A8A);
	font-size: 14px;
	margin: 0 0 16px;
}
body.aws-pdp .aws-pdp-bundle-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.aws-pdp .aws-pdp-bundle-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid rgba(66, 67, 46, .12);
}
body.aws-pdp .aws-pdp-bundle-row:first-child {
	border-top: none;
}
body.aws-pdp .aws-pdp-bundle-row-link {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
body.aws-pdp .aws-pdp-bundle-thumb {
	flex: none;
	width: 48px;
	height: 48px;
	display: block;
}
body.aws-pdp .aws-pdp-bundle-thumb img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
body.aws-pdp .aws-pdp-bundle-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
body.aws-pdp .aws-pdp-bundle-cat {
	align-self: flex-start;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--aws-olive, #42432E);
	background: #fff;
	border-radius: 20px;
	padding: 2px 10px;
}
body.aws-pdp .aws-pdp-bundle-name {
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-ink, #050A02);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body.aws-pdp .aws-pdp-bundle-price {
	flex: none;
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-olive, #42432E);
	font-size: 14px;
	margin: 0 4px;
}
body.aws-pdp .aws-pdp-bundle-add {
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--aws-olive, #42432E);
	color: var(--aws-cream, #F6F6F2);
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
	transition: opacity .15s ease;
}
body.aws-pdp .aws-pdp-bundle-add:hover {
	opacity: .85;
}

body.aws-pdp .aws-pdp-description {
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-ink, #050A02);
	font-size: 16px;
	line-height: 1.7;
	max-width: 70ch;
	margin-top: 24px;
}

/* =========================================================================
   v2.3.0 — Showcase: auto-scrolling 3-column gallery + "What's Included"
   panel. Full width, spans the grid (see grid-column: 1 / -1 above).

   Text in the panel is fixed to the cream/light treatment seen in the
   reference screenshot — it assumes a dark-to-mid-toned background (the
   brand's sage/olive, or a product's own background image), same as the
   bundle panel's light-on-dark pairing elsewhere on this page. There's no
   separate "text color" field this round (not asked for) — if a very
   light custom background color is ever wanted, that's a small follow-up
   (a per-product light/dark toggle), not something this CSS can infer on
   its own.
   ========================================================================= */

body.aws-pdp .aws-pdp-showcase {
	margin-top: 48px;
}

/* --- Gallery ----------------------------------------------------------- */

body.aws-pdp .aws-pdp-showcase-gallery {
	display: flex;
	gap: 16px;
	height: 480px;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 48px;
}
body.aws-pdp .aws-pdp-showcase-col {
	flex: 1 1 0;
	overflow: hidden;
	min-width: 0;
}
body.aws-pdp .aws-pdp-showcase-col-track {
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: aws-showcase-scroll linear infinite;
	animation-duration: 42s;
	will-change: transform;
}
/* Different durations/directions per column so the three don't scroll in
   lockstep — a small visual trick, not a functional requirement. Each
   column's image list is printed twice (PHP) and this animates exactly
   one set's height (-50%) before looping, so the seam is invisible. */
body.aws-pdp .aws-pdp-showcase-col-2 .aws-pdp-showcase-col-track {
	animation-duration: 55s;
	animation-direction: reverse;
}
body.aws-pdp .aws-pdp-showcase-col-3 .aws-pdp-showcase-col-track {
	animation-duration: 48s;
}
body.aws-pdp .aws-pdp-showcase-col-track img {
	display: block;
	width: 100%;
	border-radius: 8px;
}
@keyframes aws-showcase-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	body.aws-pdp .aws-pdp-showcase-col-track {
		animation: none;
	}
}
@media (max-width: 899px) {
	body.aws-pdp .aws-pdp-showcase-gallery {
		height: 360px;
	}
	body.aws-pdp .aws-pdp-showcase-col-3 {
		display: none; /* two columns on tablet */
	}
}
@media (max-width: 599px) {
	body.aws-pdp .aws-pdp-showcase-gallery {
		height: 280px;
	}
	body.aws-pdp .aws-pdp-showcase-col-2 {
		display: none; /* one column on phones */
	}
}

/* --- "What's Included" panel -------------------------------------------- */

body.aws-pdp .aws-pdp-showcase-panel {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--aws-sage, #999A8A);
	background-size: cover;
	background-position: center;
	padding: clamp(32px, 5vw, 64px);
}
body.aws-pdp .aws-pdp-showcase-overlay {
	position: absolute;
	inset: 0;
}
body.aws-pdp .aws-pdp-showcase-content {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}
body.aws-pdp .aws-pdp-showcase-text {
	flex: 1 1 auto;
	min-width: 0;
}
body.aws-pdp .aws-pdp-showcase-heading {
	font-family: 'Gilda Display', Georgia, serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--aws-cream, #F6F6F2);
	font-size: clamp(26px, 3.5vw, 38px);
	margin: 0 0 12px;
}
body.aws-pdp .aws-pdp-showcase-subheading {
	font-family: 'Gilda Display', Georgia, serif;
	font-style: italic;
	color: var(--aws-cream, #F6F6F2);
	font-size: 18px;
	margin: 0 0 12px;
}
body.aws-pdp .aws-pdp-showcase-body {
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-cream, #F6F6F2);
	opacity: .9;
	font-size: 15px;
	line-height: 1.7;
	max-width: 50ch;
	margin-bottom: 20px;
}
body.aws-pdp .aws-pdp-showcase-links {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 32px;
	margin: 0 0 28px;
	padding: 0;
	max-width: 420px;
}
body.aws-pdp .aws-pdp-showcase-links a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: 'Josefin Sans', sans-serif;
	color: var(--aws-cream, #F6F6F2);
	font-size: 15px;
	text-decoration: none;
}
body.aws-pdp .aws-pdp-showcase-links a:hover {
	text-decoration: underline;
}
body.aws-pdp .aws-pdp-showcase-link-plus {
	opacity: .7;
}
body.aws-pdp .aws-pdp-showcase-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aws-cream, #F6F6F2);
	color: var(--aws-olive, #42432E);
	font-family: 'Josefin Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 14px;
	border-radius: 40px;
	padding: 14px 32px;
	text-decoration: none;
	transition: opacity .15s ease;
}
body.aws-pdp .aws-pdp-showcase-cta:hover {
	opacity: .85;
}
body.aws-pdp .aws-pdp-showcase-mockup {
	flex: none;
	width: min(320px, 38%);
}
body.aws-pdp .aws-pdp-showcase-mockup img {
	display: block;
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}

@media (max-width: 767px) {
	body.aws-pdp .aws-pdp-showcase-content {
		flex-direction: column;
		align-items: stretch;
	}
	body.aws-pdp .aws-pdp-showcase-mockup {
		width: 70%;
		max-width: 280px;
		margin: 0 auto;
	}
	body.aws-pdp .aws-pdp-showcase-links {
		grid-template-columns: 1fr;
		max-width: none;
	}
}

/* #6 — Woo core's own wc-add-to-cart.js appends this "View cart" link next
   to the button once it sees the jQuery `added_to_cart` event, which we
   now correctly fire for analytics (bug #3). The drawer already shows the
   cart, so this redundant link is hidden rather than removed at the JS
   level (removing it there would also strip it for anyone with JS off). */
body.aws-pdp .product a.added_to_cart.wc-forward { display: none; }