/* ============================================================
   Freaura — SINGLE PRODUCT (WooCommerce restyle → wireframe)
   Gallery left (main + 4-col thumbs), info right (breadcrumb /
   name / meta / price / desc / size / qty / add-to-bag +
   wishlist / accordion). Reviews are a separate section after
   related products. Woo gallery + variation swatches +
   add-to-cart kept functional; only styling changes.
   ============================================================ */

/* ---- Gift Card form (Woo Gift Cards Lite plugin) ----
   Plugin's own CSS sets background:transparent on both the resting AND
   :focus state of its text/textarea fields, so "transparent" (i.e. showing
   the page's own cream background through) IS the intended look — but the
   Price field (input[type=number], not covered by the plugin's
   input[type=text] selector) was picking up a different default background,
   which is why it looked different from From/Message/Email at rest. Force
   the same transparent look across every field type here with !important
   so all of them match, resting or focused. */
.wps_wgm_section input,
.wps_wgm_section textarea,
.wps_wgm_section select,
.wps_wgm_section input:focus,
.wps_wgm_section textarea:focus,
.wps_wgm_section select:focus {
	background: transparent !important;
}
/* Preview button — match the site's Add to Bag hover/focus color
   (var(--emerald)) instead of the plugin's default green preset. */
a#mwg_wgm_preview_email,
a#mwg_wgm_preview_email:focus,
a#mwg_wgm_preview_email:hover {
	background: var(--emerald) !important;
}

.single-product .site-content { background: var(--cream); }
/* full-bleed the Astra content container + kill top spacing */
.single-product #content .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; }
.single-product #primary, .single-product #main.site-main { padding-top: 0 !important; margin-top: 0 !important; }
.single-product article.product { margin: 0 !important; padding: 0 !important; }

/* ---- 2-column layout (wireframe .product-detail: 1.1fr 1fr) ---- */
.single-product div.product {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px;
	max-width: 1500px; margin: 0 auto; padding: 50px 50px 100px; align-items: start;
}
.single-product div.product > .woocommerce-product-gallery { width: 100% !important; margin: 0; float: none; }
.single-product div.product > .summary { width: 100% !important; margin: 0; float: none; padding: 30px 0 0 20px; }
/* full-width rows span both columns */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .frx-product-reviews { grid-column: 1 / -1; }

/* ---- GALLERY ---- */
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product .woocommerce-product-gallery__image { aspect-ratio: 3/4; overflow: hidden; background: var(--cream-deep); }
.single-product .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; }
/* thumbnails: 4-across, larger (wireframe .product-gallery-thumbs) */
.single-product .flex-control-thumbs {
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 14px;
	margin: 14px 0 0; padding: 0; list-style: none; float: none; width: 100%;
}
.single-product .flex-control-thumbs li { margin: 0 !important; list-style: none; width: 100% !important; }
.single-product .flex-control-thumbs img {
	width: 100% !important; aspect-ratio: 1; object-fit: cover; opacity: 0.55;
	border: 0.5px solid transparent; transition: opacity 0.3s, border-color 0.3s; display: block;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--brass); }
.single-product .woocommerce-product-gallery__trigger { display: none; }
/* hide badge overlays on the gallery (organic-cotton badge, on-sale, etc.) */
.single-product .woocommerce-product-gallery .cpb-product-badge,
.single-product .woocommerce-product-gallery [class*="product-badge"],
.single-product .woocommerce-product-gallery [class*="badge"],
.single-product .woocommerce-product-gallery img[src*="NATURAL" i],
.single-product .woocommerce-product-gallery img[alt*="badge" i],
.single-product .woocommerce-product-gallery .onsale,
.single-product span.onsale { display: none !important; }

/* ---- INFO column ---- */
/* (info column padding: 30px top / 20px left — set on div.product > .summary) */
/* Breadcrumb at top of the info column (right side, wireframe) */
.single-product .summary .frx-product-breadcrumb { margin: 0 0 15px; }
.single-product .frx-product-breadcrumb .breadcrumb {
	font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.32em;
	text-transform: uppercase; color: var(--ink-soft);
}
.single-product .frx-product-breadcrumb .breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.single-product .frx-product-breadcrumb .breadcrumb a:hover { color: var(--brass); }
.single-product .frx-product-breadcrumb .breadcrumb .sep { margin: 0 10px; color: var(--brass); }

/* eyebrow (product tag) under the breadcrumb — wireframe .product-info-eyebrow */
.single-product .summary .frx-product-eyebrow {
	font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.5em;
	text-transform: uppercase; color: var(--brass); margin: 0 0 18px;
}
.single-product .summary .product_title,
.woocommerce-js div.product .product_title {
	font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 56px); font-weight: 400;
	line-height: 1.1; margin: 0 0 0.3em 0; color: var(--ink); text-transform: none;
}
/* wireframe: the collection name (Damier/Ruban/Cherubin) is italic + emerald */
.single-product .summary .product_title .it { font-style: italic; color: var(--emerald); }
/* meta line = "Color · Organic cotton" */
.single-product .frx-product-meta {
	font-family: var(--font-serif); font-style: italic; font-size: 18px; font-weight: 400;
	color: var(--ink-soft); margin-bottom: 24px;
}
/* PRICE — wireframe .product-info-price: --sans, 18px, letter-spacing 0.04em,
   NO explicit weight → inherits body font-weight:300 (light). WooCommerce forces
   `.woocommerce-js div.product p.price/span.price { font-weight:700 }` (bold) on
   the .price WRAPPER at high specificity, so we match that exact selector to bring
   it back to the wireframe's light weight. */
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount,
.single-product .summary .price .amount,
.single-product .summary .price bdi,
.woocommerce-js div.product .summary p.price,
.woocommerce-js div.product .summary span.price {
	font-family: var(--font-sans) !important; font-size: 24px !important; color: var(--ink);
	letter-spacing: 0.04em; font-weight: 300 !important; font-style: normal;
}
.single-product .summary .price { margin: 0 0 30px !important; display: block; }
.single-product .summary .price del { color: var(--ink-soft); opacity: 0.6; margin-right: 8px; }
/* short description — clear gap ABOVE (from price) + below (to size options) */
.single-product .woocommerce-product-details__short-description {
	margin-top: 30px; /* wireframe space between price and description */
}
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p {
	font-family: var(--font-serif); font-size: 16px; color: var(--ink-soft);
	line-height: 1.8; margin-bottom: 36px;
}

/* ---- Option labels (Size / Quantity) ---- */
.single-product .frx-opt-label {
	display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.4em;
	text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px;
}
/* Size label row: left-aligned, straight from the short description; tighter
   gap to the size values below.
   The info column has padding-left:20px; the wireframe Size label sits ~5px in,
   so a small negative left margin pulls it flush. Negative bottom margin tightens
   the gap to the swatches. Both are reset on mobile (see responsive block) to
   avoid overlap/overflow on narrow screens. */
.single-product .frx-size-label-row {
	display: flex; align-items: baseline; justify-content: flex-start;
	margin: 0 0 -20px -15px;
}
.single-product .frx-size-label-row .frx-opt-label { margin: 0 0 10px; }
/* remove the Size Guide link entirely (per request) */
.single-product .summary a[href*="size" i],
.single-product .wcpsg-size-guide-btn,
.single-product .wcpsg-size-guide-link,
.single-product [class*="size-guide" i] { display: none !important; }

/* ---- Variation swatches ---- */
/* remove the horizontal line under the size row (the swatch plugin adds a
   bottom border on .variations.cfvsw-variation-disable-logic) */
.single-product .variations,
.single-product table.variations,
.single-product .variations.cfvsw-variation-disable-logic {
	border: none !important; border-bottom: 0 !important; margin: 0; width: 100%;
}
.single-product .variations tr { display: block; margin-bottom: 8px; }
.single-product .variations td, .single-product .variations th { display: block; padding: 0; border: none; }
/* hide the default attribute <th> labels (we render our own "Size"/"Color") */
.single-product .variations th.label { display: none; }
/* Color row keeps a small inline label */
.single-product .variations .label label {
	font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
	color: var(--ink-soft); margin-bottom: 10px; display: block;
}
.single-product .cfvsw-swatches-container { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.single-product .cfvsw-swatches-container .cfvsw-swatches-option,
.single-product .cfvsw-swatches-option {
	min-width: 48px !important; width: auto !important; height: 48px !important;
	border: 0.5px solid var(--line) !important; border-radius: 0 !important; background: transparent;
	font-family: var(--font-sans); font-size: 14px; font-weight: 400; letter-spacing: 0.1em; color: var(--ink);
	box-shadow: none !important; transition: all 0.3s; display: inline-flex; align-items: center;
	justify-content: center; padding: 0 8px; outline: none !important;
}
.single-product .cfvsw-swatches-option:hover { border-color: var(--ink) !important; }
.single-product .cfvsw-swatches-option.cfvsw-selected-swatch,
.single-product .cfvsw-swatches-option[aria-checked="true"] {
	background: var(--midnight) !important; color: var(--cream) !important;
	border-color: var(--midnight) !important; box-shadow: none !important;
}
/* COLOR variation row — the wireframe has NO color selector (each product is a
   single colour, already shown in the meta line "Off-white · Organic cotton").
   Hide the whole Color row; the single colour stays auto-selected (JS) so
   add-to-cart still works. Swatch plugin uses swatches-attr="attribute_pa_color". */
.single-product .variations tr:has(.cfvsw-swatches-container[swatches-attr*="color" i]),
.single-product .variations tr:has(.cfvsw-swatches-container[swatches-attr*="colour" i]),
.single-product .cfvsw-swatches-container[swatches-attr*="color" i],
.single-product .cfvsw-swatches-container[swatches-attr*="colour" i] { display: none !important; }
/* remove the CLEAR row's border/underline (wireframe has none) */
.single-product .reset_variations {
	font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--ink-soft); text-decoration: none; border: none !important;
}
.single-product .woocommerce-variation-add-to-cart,
.single-product .single_variation_wrap .woocommerce-variation { border: none !important; }
/* the horizontal rule Woo puts under the swatches/clear — remove */
.single-product .variations_form .single_variation_wrap::before,
.single-product .variations tbody, .single-product .variations::after { border: none !important; content: none !important; }
.single-product .summary hr, .single-product .woocommerce-variation-price { border: none; }

/* ---- Quantity + Add to Bag + Wishlist (parallel) ---- */
/* Layout (wireframe): Quantity label + stepper on their own row, then
   Add to Bag + Wishlist together on the row below, both full-width & larger.

   NOTE: on VARIABLE products WooCommerce nests the qty stepper, add-to-cart
   button and (our) wishlist button inside `.woocommerce-variation-add-to-cart`
   — NOT as direct children of `form.cart`. On SIMPLE products they sit directly
   in `form.cart`. We make BOTH containers the flex row so the wireframe layout
   holds in either case. `.single_variation_wrap` (which wraps the variation
   container) must not clip its own width. */
.single-product form.cart,
.single-product form.cart .woocommerce-variation-add-to-cart {
	display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-top: 6px;
}
/* variable-product wrapper: full width, no leftover block spacing */
.single-product .single_variation_wrap { width: 100%; }
.single-product form.cart .woocommerce-variation-add-to-cart {
	width: 100%; margin: 0; padding: 0;
}
.single-product .frx-qty-label { order: 1; flex-basis: 100%; margin: 6px 0 -3px; }
/* UK-only shipping note — own full-width row, directly above the
   Add to Bag / Wishlist row (order 4 below). */
.single-product .frx-shipping-note {
	order: 3; flex-basis: 100%; margin: 6px 0 0;
	display: flex; align-items: flex-start; gap: 8px;
	padding: 12px 14px; background: var(--cream-deep);
	border-left: 2px solid var(--brass);
	font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 500; line-height: 1.5;
	color: var(--ink-soft);
}
.single-product .frx-shipping-note::before {
	content: '\24D8'; /* circled "i" */
	font-style: normal; font-family: var(--font-sans); font-size: 12px; line-height: 1.7;
	color: var(--brass); flex: 0 0 auto;
}
.single-product form.cart .quantity {
	/* Compact inline-flex stepper (wireframe ~138px: 44+50+44), left-aligned. */
	order: 2; flex: 0 0 auto;
	display: inline-flex; align-self: flex-start; align-items: center;
	border: 0.5px solid var(--line); background: transparent; overflow: hidden; width: max-content;
}
/* Zero-height full-width break: keeps qty alone on its row, wraps the two
   buttons (order 3/4) onto the row below — deterministic regardless of width. */
.single-product form.cart .frx-flex-break {
	order: 2; flex-basis: 100%; height: 0; margin: 0; padding: 0;
}
.single-product form.cart .quantity input.qty {
	/* wireframe .qty input: width:50px, font-size:14px, NO fixed height
	   (it centers within the 56px-tall buttons via the flex container) */
	width: 50px; height: auto; padding: 0; background: transparent; border: none; text-align: center;
	font-family: var(--font-sans); font-size: 16px; color: var(--ink); outline: none; -moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus,
.single-product form.cart .quantity .qty-btn,
.single-product form.cart .quantity button {
	/* wireframe .qty button: 44 x 56, font-size 16px */
	width: 44px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
	background: transparent !important; border: none !important; box-shadow: none !important;
	border-radius: 0 !important; cursor: pointer; color: var(--ink); font-size: 16px;
	text-decoration: none; line-height: 1; padding: 0;
}
.single-product form.cart .quantity .minus:hover,
.single-product form.cart .quantity .plus:hover { color: var(--brass); background: transparent !important; }
/* Add to Bag + Wishlist share row 2 (below qty), equal width, larger.
   Higher-specificity selectors (form.cart AND the variation container) so the
   filled-midnight style wins over WooCommerce/Astra's default outlined button
   on variable products. */
/* Match Astra/Woo's own high-specificity selector
   (.button.single_add_to_cart_button) so our padding wins — Astra forces
   `padding:10px 20px` there, which was overriding ours and making Add to Bag
   shorter than Wishlist. */
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .button.single_add_to_cart_button,
.single-product form.cart .woocommerce-variation-add-to-cart .button.single_add_to_cart_button {
	order: 4; flex: 1 1 0; min-width: 0; justify-content: center;
	display: inline-flex; align-items: center; gap: 16px; float: none;
	background: var(--midnight) !important; color: var(--cream) !important; font-family: var(--font-sans);
	font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase;
	border: 0.5px solid var(--midnight) !important; border-radius: 0;
	/* wireframe .btn: padding 18px 44px + body line-height 1.65 → ~62px tall.
	   Fixed height keeps Add to Bag & Wishlist identical (Astra's inner line-box
	   quirks otherwise diverge them). 62px = 18+18 padding + 11*1.65 line + 1 border. */
	box-sizing: border-box; height: 62px; line-height: 1.65; padding: 0 44px !important;
	cursor: pointer; transition: background 0.4s, color 0.4s; margin-top: 8px;
	position: relative; overflow: hidden;
}
/* wireframe arrow "→" that slides right on hover */
.single-product form.cart .single_add_to_cart_button::after {
	content: '\2192'; font-size: 16px; line-height: 1; letter-spacing: 0; margin-left: 2px;
	transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.single-product form.cart .single_add_to_cart_button:hover::after { transform: translateX(6px); }
.single-product form.cart .single_add_to_cart_button:hover,
.single-product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
	background: var(--emerald) !important; border-color: var(--emerald) !important; color: var(--cream) !important;
}
/* WooCommerce disables the button until a variation is chosen — keep it looking
   like the wireframe (dimmed, not outlined) rather than Astra's grey outline. */
.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: 0.45; cursor: not-allowed;
}
.single-product .frx-wishlist-btn {
	order: 5; flex: 1 1 0; min-width: 0;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: transparent; color: var(--ink); border: 0.5px solid var(--ink); border-radius: 0;
	font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase;
	box-sizing: border-box; height: 62px; line-height: 1.65; padding: 0 44px; cursor: pointer; position: relative; overflow: hidden;
	isolation: isolate; transition: color 0.4s; margin-top: 8px;
}
.single-product .frx-wishlist-btn::before {
	content: ''; position: absolute; inset: 0; background: var(--ink);
	transform: translateY(101%); transition: transform 0.5s cubic-bezier(.76,0,.24,1); z-index: -1;
}
.single-product .frx-wishlist-btn:hover { color: var(--cream); }
.single-product .frx-wishlist-btn:hover::before { transform: translateY(0); }
.single-product .frx-wishlist-btn span { position: relative; z-index: 1; }

/* ---- hide SKU/category meta + rating + Astra payments badge (not in wireframe) ---- */
.single-product .summary .product_meta,
.single-product .summary .woocommerce-product-rating,
.single-product .ast-single-product-payments,
.single-product .wc-trust-badge,
.single-product .trust-badge { display: none !important; }

/* remove the horizontal rule Woo/Astra draws under the variations (between
   Size swatches and Quantity) */
.single-product .variations_form,
.single-product .single_variation_wrap,
.single-product .woocommerce-variation-add-to-cart { border: none !important; }
.single-product .variations_form::after,
.single-product .single_variation_wrap::after,
.single-product .single_variation_wrap::before,
.single-product .woocommerce-variation { border: none !important; }
.single-product .single_variation_wrap .woocommerce-variation-price { margin: 0; }
/* pull up the empty space WooCommerce leaves for the variation description/price
   block (wireframe has none). Reset on mobile in the responsive block. */
.single-product .woocommerce-variation.single_variation { margin-top: -25px; }

/* ---- ACCORDION (right column, under buttons) ---- */
.single-product .woocommerce-tabs { display: none !important; }
.single-product .summary .frx-product-accordion {
	margin: 40px 0 0; border-top: 0.5px solid var(--line);
}
.single-product .frx-product-accordion details { border-bottom: 0.5px solid var(--line); }
.single-product .frx-product-accordion summary {
	padding: 22px 0; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.32em;
	text-transform: uppercase; cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; transition: color 0.3s; color: var(--ink);
}
.single-product .frx-product-accordion summary::-webkit-details-marker { display: none; }
.single-product .frx-product-accordion summary:hover { color: var(--brass); }
.single-product .frx-product-accordion summary::after {
	content: '+'; font-size: 18px; font-weight: 300; transition: transform 0.3s; color: var(--ink-soft);
}
.single-product .frx-product-accordion details[open] summary::after { transform: rotate(45deg); }
.single-product .frx-accordion-body {
	font-family: var(--font-serif); font-size: 17px; color: var(--ink-soft); line-height: 1.8;
}
.single-product .frx-accordion-body ul { margin: 8px 0 0 18px; padding: 0; }
.single-product .frx-accordion-body li { margin-bottom: 6px; }
.single-product .frx-accordion-body strong { color: var(--ink); }
.single-product .frx-accordion-body a { color: var(--emerald); }
/* wireframe "Read full policy →" link: brass, underlined */
.single-product .frx-accordion-body a.frx-accordion-link {
	color: var(--brass); text-decoration: underline; text-underline-offset: 2px;
	white-space: nowrap;
}
.single-product .frx-accordion-body a.frx-accordion-link:hover { color: var(--ink); }

/* ---- Related products ---- */
.single-product .related.products {
	max-width: 1500px; margin: 40px auto 0; padding: 60px 50px 0; border-top: 0.5px solid var(--line);
}
.single-product .related.products > h2 {
	font-family: var(--font-display); font-weight: 400; text-transform: none;
	text-align: center; font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 40px; color: var(--ink);
}

/* ---- Customer reviews — wireframe .reviews design ----
   Wireframe: a centered 900px column ON THE PAGE CREAM (no ivory band),
   with a thin top divider. The full-width ivory band + 70px top gap were the
   mismatch — the wireframe .reviews is just:
     max-width:900px; margin:0 auto; padding:100px 50px; border-top:0.5px line.
   We keep the divider full-bleed (via padding on the wrapper) but the content
   column stays 900px and centered, on cream. */
.single-product .frx-product-reviews {
	margin: 0; padding: 100px 50px; background: transparent; border-top: 0.5px solid var(--line);
}
/* title: Playfair italic 32px, left-aligned, emerald accent (wireframe) */
.single-product .frx-reviews-title {
	max-width: 900px; margin: 0 auto 40px;
	font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 32px;
	text-align: left; color: var(--ink); text-transform: none;
}
.single-product .frx-reviews-title .it { font-style: italic; color: var(--emerald); }
.single-product .frx-product-reviews #reviews,
.single-product .frx-product-reviews #comments { max-width: 900px; margin: 0 auto; }

/* hide Woo's own "Reviews" heading + avatar images (wireframe has neither) */
.single-product .frx-product-reviews #reviews > h2:first-child,
.single-product .frx-product-reviews .comment-reply-title,
.single-product .frx-product-reviews .avatar { display: none; }

/* review list → wireframe .review rows */
.single-product .frx-product-reviews .commentlist { list-style: none; margin: 0; padding: 0; }
.single-product .frx-product-reviews .commentlist li.review,
.single-product .frx-product-reviews .commentlist li.comment {
	padding: 32px 0; border-bottom: 0.5px solid var(--line-light); list-style: none;
}
.single-product .frx-product-reviews .comment_container { display: block; }
/* wireframe review order: STARS first, then author/date, then text.
   WooCommerce's default visual order puts meta above rating, so we enforce
   the wireframe order with a flex column.
   NOTE: WooCommerce core indents .comment-text with margin-left:50px +
   padding:0 1.5em (its high-specificity selector
   `#reviews #comments ol.commentlist li .comment-text`). That pushed the review
   content ~71px right of the "Customer Reviews" title. We match that selector
   to reset it so the content aligns flush-left with the title. */
.single-product .frx-product-reviews .comment-text,
.single-product .frx-product-reviews #reviews #comments ol.commentlist li .comment-text {
	margin: 0; padding: 0; border: none;
	display: flex; flex-direction: column;
}
.single-product .frx-product-reviews .comment-text .review-rating { order: 1; }
.single-product .frx-product-reviews .comment-text .meta { order: 2; }
.single-product .frx-product-reviews .comment-text .description { order: 3; }
/* stars → wireframe .review-stars: literal ★ characters, brass, 13px, 0.1em.
   WooCommerce renders stars with its own glyph font ("star") which looks
   thinner/smaller than the wireframe. We suppress that glyph output and draw
   five real ★ characters at the wireframe size instead. */
.single-product .frx-product-reviews .star-rating {
	position: relative; display: inline-block; overflow: visible;
	width: auto !important; height: auto; margin-bottom: 10px; float: none;
	font-size: 0; letter-spacing: normal; line-height: 1;
}
/* hide Woo's glyph stars (both the empty ::before track and the filled span) */
.single-product .frx-product-reviews .star-rating::before { content: none; }
.single-product .frx-product-reviews .star-rating span { display: none; }
/* draw the wireframe stars */
.single-product .frx-product-reviews .star-rating::after {
	/* wireframe markup is "★ ★ ★ ★ ★" — literal spaces between each star */
	content: '\2605 \2605 \2605 \2605 \2605';
	white-space: pre; font-family: var(--font-serif); color: var(--brass);
	font-size: 15px; letter-spacing: 0.1em; line-height: 1;
}
/* author line container (wireframe .review-author baseline = Inter 11px) so the
   name + date sit on a consistent line, not Astra's default Cormorant 16.8px. */
.single-product .frx-product-reviews .meta {
	font-family: var(--font-sans); font-size: 11px; line-height: 1.4;
}
/* author name: Inter caps (wireframe .review-author). WooCommerce core sets
   `#reviews #comments ol.commentlist li .comment-text p.meta
   .woocommerce-review__author { font-weight:500 }` at very high specificity —
   we match that chain so the wireframe's light (300) weight wins. */
.single-product .frx-product-reviews .woocommerce-review__author,
.single-product #reviews #comments ol.commentlist li .comment-text .meta .woocommerce-review__author,
.single-product #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author {
	font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--ink); font-weight: 300; font-style: normal;
}
/* Published-date, matched against WooCommerce core's own high-specificity
   selector chain so it reliably wins there too. */
.woocommerce-js #reviews #comments ol.commentlist li .comment-text meta .woocommerce-review__published-date,
.woocommerce-js #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__published-date {
	font-size: 18px;
	font-weight: 500;
}
/* hide Woo's default dash; we render the wireframe em-dash before the date */
.single-product .frx-product-reviews .woocommerce-review__dash { display: none; }
.single-product .frx-product-reviews .woocommerce-review__published-date {
	/* wireframe .review-author em: serif italic brass 13px, "— Month Year" */
	font-family: var(--font-serif); font-style: italic; color: var(--brass);
	text-transform: none; letter-spacing: 0.05em; margin-left: 10px; font-size: 13px;
}
.single-product .frx-product-reviews .woocommerce-review__published-date::before {
	content: '\2014\00a0'; /* em-dash + nbsp, matches wireframe "— April 2026" */
}
.single-product .frx-product-reviews .meta { margin-bottom: 14px; }
.single-product .frx-product-reviews .description p,
.single-product .frx-product-reviews .comment-text > p {
	font-family: var(--font-serif); font-size: 18px; color: var(--ink-soft); line-height: 1.7; margin: 0;
}
/* "Only logged in customers who have purchased this product may leave a
   review." — Woo's own <p>, was inheriting Astra's default body font
   instead of the site's serif body copy. Match the review description text. */
/* Text itself is now removed via a gettext filter in functions.php (kept
   as a real "hide this specific string" fix rather than CSS, per request) —
   this just collapses the now-empty <p> so it doesn't leave stray blank
   spacing where the message used to sit. */
.single-product .frx-product-reviews .woocommerce-verification-required:empty {
	display: none;
}
/* review form fields */
.single-product .frx-product-reviews #review_form_wrapper { margin-top: 40px; }
.single-product .frx-product-reviews .comment-form-comment textarea,
.single-product .frx-product-reviews input[type=text],
.single-product .frx-product-reviews input[type=email] {
	background: transparent; border: none; border-bottom: 0.5px solid var(--line); border-radius: 0;
	padding: 12px 0; font-family: var(--font-serif); font-size: 16px; color: var(--ink); outline: none; width: 100%;
}
.single-product .frx-product-reviews .submit,
.single-product .frx-product-reviews button[type=submit] {
	background: var(--midnight); color: var(--cream); font-family: var(--font-sans);
	font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; border: none; border-radius: 0;
	padding: 16px 40px; cursor: pointer; transition: background 0.4s;
}
.single-product .frx-product-reviews .submit:hover { background: var(--emerald); }

/* ---- Responsive ---- */
@media (max-width: 921px) {
	.single-product div.product { grid-template-columns: 1fr; gap: 40px; padding: 30px 24px; }
	/* the info column drops its desktop 20px left inset on mobile */
	.single-product div.product > .summary { padding: 20px 0 0; }
	.single-product .related.products { padding: 40px 24px 0; }
	.single-product .frx-product-reviews { padding: 50px 24px 70px; }
	.single-product form.cart .single_add_to_cart_button,
	.single-product .frx-wishlist-btn { min-width: 0; }
	/* Reset the desktop fine-tuning negative margins so nothing overlaps or
	   overflows on narrow screens. */
	.single-product .frx-size-label-row { margin: 0 0 6px 0; }
	.single-product .frx-qty-label { margin: 6px 0 6px; }
	.single-product .woocommerce-variation.single_variation { margin-top: 0; }
}
@media (min-width: 922px) and (max-width: 1150px) {
	/* Add to Bag / Wishlist at ~1024px: still the 2-column desktop grid here
	   (stacks to 1-column only at <=921px), so the summary column is much
	   narrower per-button than it looks — the desktop button (44px padding,
	   0.4em tracking, 16px gap) was wrapping "ADD TO BAG" onto 3 lines and
	   "WISHLIST" onto 2. Shrink just these two buttons and force one line. */
	.single-product form.cart .single_add_to_cart_button,
	.single-product form.cart .button.single_add_to_cart_button,
	.single-product form.cart .woocommerce-variation-add-to-cart .button.single_add_to_cart_button,
	.single-product .frx-wishlist-btn {
		height: 56px; padding: 0 20px !important; font-size: 11px; letter-spacing: 0.22em;
		gap: 8px; white-space: nowrap;
	}
	.single-product form.cart .single_add_to_cart_button::after { font-size: 14px; }
}
@media (max-width: 480px) {
	/* Add to Bag / Wishlist: the desktop button (44px padding, 0.4em tracking,
	   16px gap) is too wide for a 2-up row at 320px — "ADD TO BAG" was
	   wrapping onto 3 lines. Shrink just these two buttons and force one line. */
	.single-product form.cart .single_add_to_cart_button,
	.single-product form.cart .button.single_add_to_cart_button,
	.single-product form.cart .woocommerce-variation-add-to-cart .button.single_add_to_cart_button,
	.single-product .frx-wishlist-btn {
		height: 52px; padding: 0 16px !important; font-size: 10px; letter-spacing: 0.15em;
		gap: 6px; white-space: nowrap;
	}
	.single-product form.cart .single_add_to_cart_button::after { font-size: 13px; }
}