/* ============================================================================
   gryphon-replica — product.css : the PDP.
   Every number is measured on the source at 1440 (RECON-DESIGN.md §7.1 / §7.3,
   probe pdp-anatomy-1440.json, cross-checked against _shots/1440/pdp-instrument.png).
   ========================================================================= */

.gr-pdp { padding: 18px 0 64px; }
.gr-pdp-breadcrumb { margin: 0 0 22px; }

/* gallery 683 / summary 428 within a 1200 container -> 7/12 and 5/12, Bootstrap-3 style */
.gr-pdp-row {
	display: grid;
	grid-template-columns: 683fr 428fr;
	gap: 30px;
	align-items: start;
}

/* ---- gallery ---- */
.gr-pdp-gallery { min-width: 0; }
.gr-gallery-main { position: relative; background: #fff; }
.gr-gallery-main img {
	display: block;
	width: 100%;
	height: auto;
}
.gr-pdp-badge {
	position: absolute; top: 12px; left: 12px;
	padding: 3px 10px;
	background: var(--color-bg-nav);
	color: #fff;
	font-family: var(--font-family);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* thumbnail rail — measured 653 x 145 */
.gr-gallery-rail {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	margin: 16px 0 0;
	padding: 0 0 6px;
	min-height: 145px;
}
.gr-gallery-thumb {
	flex: 0 0 auto;
	width: 120px;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
}
.gr-gallery-thumb img { display: block; width: 100%; height: auto; }
.gr-gallery-thumb.is-active { border-color: var(--color-heading); }

/* ⚠ measured at y 1147, INSIDE the gallery column, BELOW the rail — not above the title.
   innerText order put it near the top and would have placed it wrongly. */
.gr-share { display: flex; gap: 16px; margin: 20px 0 0; }
.gr-share-link {
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-body);
}
.gr-share-link:hover { color: var(--color-primary); }

/* ---- summary ---- */
.gr-pdp-summary { min-width: 0; }

/* measured: Vollkorn 300 60px/84px, rgb(99,88,76). The theme's base h1 rule says 400/72px and
   is OVERRIDDEN here by .product-item-caption-title.-product-page on the source — measure per
   component, never trust the stylesheet or the token alone. */
.gr-pdp-title {
	font-family: Vollkorn, serif;
	font-weight: 300;
	font-size: 60px;
	line-height: 84px;
	color: rgb(99, 88, 76);
	text-align: start;
	margin: 0 0 14px;
}

/* measured: Montserrat 400 26px/37.14px, rgb(102,101,101) */
.gr-pdp-price {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 26px;
	line-height: 37.14px;
	color: rgb(102, 101, 101);
}
.gr-pdp-price del { opacity: .55; margin-right: 8px; }
.gr-pdp-price ins { text-decoration: none; }

/* ---- qty stepper: measured 99 x 43, 1px solid rgb(237,237,237), radius 6px ---- */
.gr-pdp-summary form.cart { margin: 0 0 18px; }
.gr-pdp-summary .quantity {
	display: inline-flex;
	align-items: center;
	width: 99px; height: 43px;
	border: 1px solid rgb(237, 237, 237);
	border-radius: 6px;
	overflow: hidden;
	margin: 0 0 16px;
}
.gr-pdp-summary .quantity input.qty {
	width: 100%; height: 100%;
	border: 0;
	text-align: center;
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-heading);
	background: #fff;
	-moz-appearance: textfield;
}
.gr-pdp-summary .quantity input.qty::-webkit-outer-spin-button,
.gr-pdp-summary .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gr-qty-btn {
	flex: 0 0 auto;
	width: 30px; height: 100%;
	border: 0; background: #fff;
	font-family: var(--font-family);
	font-size: 16px; font-weight: 700;
	color: var(--color-heading);
	cursor: pointer;
	line-height: 1;
}

/* ---- ADD TO CART ----
   ⚠ MEASURED: a TRANSPARENT OUTLINED PILL in grey. background rgba(0,0,0,0),
   color rgb(89,89,89), border 1px solid rgb(89,89,89), radius 45px, padding 15px 20px,
   max-width 250px (renders 210), height 46, Montserrat 700 14px/14px, uppercase,
   letter-spacing 1.5px.

   `btn-primary` appears in the source's own class list and is a LIE — the computed background
   is transparent. Woo's purple .button.alt and the instinct to paint the CTA brand-orange are
   both wrong here. Woo's selector `.woocommerce :where(body:not(...)) a.button` computes at
   (0,2,1), so these overrides are written to beat it on specificity, not with !important. */
.woocommerce .gr-pdp-summary button.single_add_to_cart_button,
.gr-pdp-summary button.single_add_to_cart_button {
	display: block;
	width: 100%;
	max-width: 250px;
	min-height: 46px;
	padding: 15px 20px;
	background: rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	color: rgb(89, 89, 89);
	border: 1px solid rgb(89, 89, 89);
	border-radius: 45px;
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}
.woocommerce .gr-pdp-summary button.single_add_to_cart_button:hover,
.gr-pdp-summary button.single_add_to_cart_button:hover {
	background: rgb(89, 89, 89);
	background-color: rgb(89, 89, 89);
	color: #fff;
}

/* ---- pickup ---- */
.gr-pdp-pickup {
	margin: 22px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid #eee;
	font-size: 14px;
	line-height: 1.5;
}
.gr-pdp-pickup strong { display: block; color: var(--color-heading); }

/* ---- tabs ---- */
.gr-tabs { margin: 28px 0 0; }
.gr-tablist {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gr-tab {
	padding: 9px 20px;
	border: 1px solid rgb(193, 193, 193);
	border-bottom: 0;
	background: rgb(245, 245, 245);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-body);
	cursor: pointer;
}
.gr-tab + .gr-tab { border-left: 0; }
.gr-tab.is-active { background: #fff; color: var(--color-heading); }

.gr-tabpanels { border: 1px solid rgb(193, 193, 193); padding: 18px 20px; }
.gr-tabpanel { display: none; font-size: 15px; line-height: 1.6; }
.gr-tabpanel.is-active { display: block; }
.gr-tabpanel p { margin: 0 0 12px; }

/* ---- spec rows: <li><strong data-specname="x">Label</strong> Value</li> ---- */
.gr-specs { list-style: none; margin: 0; padding: 0; }
.gr-specs li {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid #f0efec;
	font-size: 14px;
}
.gr-specs li:last-child { border-bottom: 0; }
.gr-specs strong { color: var(--color-heading); font-weight: 700; }

/* ---- availability + tags ---- */
.gr-pdp-availability { margin: 20px 0 6px; font-size: 14px; color: var(--color-body); }

/* ⚠ The source prints its internal taxonomy here verbatim, "Level 1:" prefixes and all.
   Owner's decision 2026-10-01: reproduce it. */
.gr-pdp-tags { margin: 0; font-size: 13px; color: #8c8a88; line-height: 1.8; }
.gr-pdp-tags-label { font-weight: 700; margin-right: 6px; color: var(--color-body); }
.gr-pdp-tag + .gr-pdp-tag::before { content: "\00a0\00a0"; }

/* ---- related products: measured 1200px wide, x 120 ---- */
.gr-pdp .related.products { margin: 56px 0 0; }
.gr-pdp .related.products > h2 {
	font-family: Vollkorn, serif;
	font-weight: 500;
	font-size: 38px;
	color: var(--color-heading);
	text-align: center;
	margin: 0 0 26px;
}

/* ============================================================================
   RESPONSIVE — full selectors repeated; media queries add no specificity.
   ========================================================================= */
@media (max-width: 991px) {
	.gr-pdp .gr-pdp-row { grid-template-columns: 1fr; gap: 24px; }
	.gr-pdp .gr-pdp-title { font-size: 40px; line-height: 1.2; }
	.gr-pdp .gr-specs li { grid-template-columns: 140px 1fr; }
}

@media (max-width: 767px) {
	.gr-pdp .gr-pdp-title { font-size: 28px; line-height: 1.25; }
	.gr-pdp .gr-pdp-price { font-size: 22px; line-height: 1.4; }
	.gr-pdp .gr-specs li { grid-template-columns: 1fr; gap: 2px; }
	.gr-pdp .gr-gallery-thumb { width: 84px; }
	.gr-pdp .related.products > h2 { font-size: 26px; }
	.woocommerce .gr-pdp-summary button.single_add_to_cart_button,
	.gr-pdp-summary button.single_add_to_cart_button { max-width: none; }
}

/* Related row uses Woo's ul.products, so it gets the sitewide reset in layout.css plus this
   6-up override (source renders 19 related cards; we show 6 to keep the row one line). */
.gr-pdp .related.products ul.products { grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 991px) { .gr-pdp .related.products ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .gr-pdp .related.products ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ============================================================================
   WOOCOMMERCE CSS THAT BEATS A NATURAL OVERRIDE — measured, not guessed.
   Both of these produced a page that passed every structural check and every
   style-diff row, because a diff compares the components in its map and cannot
   see that a COLUMN is the wrong width. Measured with getBoundingClientRect.
   ========================================================================= */

/* 1. `.woocommerce div.product div.summary { float:right; width:48% }` is (0,3,2).
      Our summary div carries the `summary` class (it is the conventional hook), so Woo squeezed
      a 439px grid track to 211px — 48% of it — and floated it. A float is ignored inside grid
      but the PERCENTAGE is not. Measured: summary 211px, title 211px, tabs 211px, so the h1
      wrapped to eight lines and the Details panel was ~10 characters wide.
      This selector is (0,4,2) and wins on specificity, without !important. */
.woocommerce div.product .gr-pdp-summary.summary {
	width: auto;
	float: none;
}

/* 2. `.woocommerce ul.products.columns-6 li.product { width:13.6% }` is (0,4,2) and beat the
      (0,3,2) reset in layout.css, so each related card computed to 24px wide — a column of
      thumbnails about the size of a favicon. This selector is (0,5,2). */
.gr-pdp .related.products ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
}