/* Product detail page — repo/README.md "3. Product detail".
   Hand-authored: content-single-product.php overrides the template markup;
   this stylesheet skins both our own bkc-* classes and WooCommerce's native
   variation-form markup (select/qty/button) per woo-bridge.css's documented
   "point the skin at Woo's existing selectors" strategy — the native form is
   kept (real AJAX variations, real stock/price updates) rather than
   reimplemented as swatch buttons. Page-specific; enqueued only on is_product(). */

/* ===== breadcrumb ===== */

.bkc-breadcrumb{max-width:var(--container-max);margin:0 auto;padding:var(--space-7) var(--gutter-page-lg) 0;font:var(--type-stencil);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);display:flex;gap:var(--space-3)}
.bkc-breadcrumb a{color:var(--text-muted);text-decoration:none}
.bkc-breadcrumb a:hover{color:var(--text-link-hover)}
.bkc-breadcrumb__current{color:var(--text-strong)}

/* ===== layout ===== */

.bkc-product-page{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-page-lg) var(--space-13)}
/* minmax(0, ...) is load-bearing here, same gotcha repo/README.md calls out
   for the product grid: a bare "1.05fr 1fr" lets the product photo's own
   intrinsic size force its track wider than its fair share, squeezing the
   summary column down to whatever's left over — corrected 2026-08-30, this
   had been making the right column render far too narrow. */
.bkc-product-page__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;border:var(--border-hair) solid var(--line-hairline);margin-top:var(--space-7)}

@media (max-width: 900px){
	.bkc-product-page{padding:0 var(--gutter-page) var(--space-11)}
	.bkc-product-page__grid{grid-template-columns:1fr}
}

/* ===== gallery — product photography is exempt from grime, stays clean ===== */

.bkc-product-page__gallery{background:#F2EFE9;padding:var(--space-8);min-height:600px;display:flex;align-items:center;border-right:var(--border-hair) solid var(--line-hairline)}
.bkc-product-page__gallery .woocommerce-product-gallery{width:100%}
.bkc-product-page__gallery .woocommerce-product-gallery__image img{width:100%;height:auto;display:block}
.bkc-product-page__gallery .flex-control-thumbs{display:flex;gap:var(--space-3);margin-top:var(--space-5);padding:0;list-style:none}
.bkc-product-page__gallery .flex-control-thumbs li{width:64px}
.bkc-product-page__gallery .flex-control-thumbs img{border:var(--border-hair) solid var(--line-hairline);cursor:pointer;opacity:.65}
.bkc-product-page__gallery .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--rust-500)}

@media (max-width: 900px){
	.bkc-product-page__gallery{border-right:0;border-bottom:var(--border-hair) solid var(--line-hairline);min-height:0}
}

/* ===== summary ===== */

.bkc-product-page__summary{background:var(--surface-panel);padding:var(--space-10) var(--space-10) var(--space-11)}

.bkc-eyebrow{display:inline-block;font:var(--type-stencil);letter-spacing:var(--ls-wider);text-transform:uppercase}
.bkc-eyebrow--accent{color:var(--rust-500)}

.bkc-product-page__title{font:var(--type-h1);text-transform:uppercase;color:var(--text-strong);margin:var(--space-5) 0 0}

.bkc-product-page__price-row{display:flex;align-items:baseline;gap:var(--space-6);margin-top:var(--space-6);flex-wrap:wrap}
.bkc-price--lg .woocommerce-Price-amount{font:var(--fw-bold) var(--fs-800)/1 var(--font-mono)}
.bkc-product-page__sku{font:var(--type-label);color:var(--text-muted)}

.bkc-product-page__description{font:var(--type-body);color:var(--text-body);max-width:var(--measure-prose);margin-top:var(--space-7)}
.bkc-product-page__description p{margin:0 0 var(--space-5)}
.bkc-product-page__description p:last-child{margin-bottom:0}

/* ===== variation form — Woo's native markup, skinned ===== */

.bkc-product-page__summary .variations{width:100%;border-collapse:collapse;margin-top:var(--space-9)}
.bkc-product-page__summary .variations tr{display:block;margin-bottom:var(--space-5)}
.bkc-product-page__summary .variations td{display:block;padding:0}
.bkc-product-page__summary .variations label{display:block;font:var(--type-stencil);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4)}
.bkc-product-page__summary .variations select{width:100%;max-width:280px;height:var(--control-h-lg);padding:0 var(--space-6);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-2);background:var(--surface-sunken);box-shadow:var(--shadow-inset-well);font:var(--type-code);color:var(--text-strong);appearance:auto}
.bkc-product-page__summary .variations select:focus-visible{outline:none;box-shadow:var(--shadow-inset-well),var(--ring-focus)}
.bkc-product-page__summary .reset_variations{display:inline-block;margin-top:var(--space-3);font:var(--type-label);color:var(--text-link);text-decoration:none}

/* Swatch buttons (product.js) replace the visible <select> per real
   prototype (repo/design/Bankrupt & Co Site.dc.html: unselected swatch
   #D2CDC4 bg / #33352F text / #8E8A80 border, selected inverts to soot
   #221E19 bg / #E7E3DC text). The <select> itself stays in the DOM and
   stays the real control WooCommerce's variation JS reads — only visually
   hidden (not display:none) so it's still a working control for anyone
   using assistive tech or a keyboard, not just removed. */
.bkc-product-page__summary .variations tr.bkc-variation-row--enhanced{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.bkc-swatch-group{margin-top:var(--space-9)}
.bkc-swatch-group + .bkc-swatch-group{margin-top:var(--space-7)}
.bkc-swatch-group__label{font:var(--type-stencil);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4)}
.bkc-swatch-list{display:flex;gap:var(--space-3);flex-wrap:wrap}
.bkc-swatch{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:36px;padding:0 var(--space-6);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-2);background:var(--surface-sunken);color:var(--text-body);font:var(--type-code);font-size:var(--fs-200);letter-spacing:.05em;white-space:nowrap;cursor:pointer;transition:var(--transition-control)}
.bkc-swatch:hover{border-color:var(--text-muted)}
.bkc-swatch.is-selected{background:var(--soot-900);color:var(--surface-panel);border-color:var(--soot-900)}
.bkc-swatch:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.bkc-product-page__summary .woocommerce-variation-price .woocommerce-Price-amount{font:var(--fw-bold) var(--fs-700)/1 var(--font-mono);color:var(--text-strong)}
.bkc-product-page__summary .woocommerce-variation-availability{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-3)}
.bkc-product-page__summary .woocommerce-variation{margin-top:var(--space-6)}

/* Blocksy's own quantity +/- feature (.ct-increase/.ct-decrease, injected
   automatically by the parent theme's WooCommerce integration via
   data-type="type-2" - nothing this theme built or enqueues). It's a real
   component, driven by CSS custom properties (--quantity-height/-width,
   --quantity-*-color) that scale the input's own padding and the buttons'
   absolute position together - the misalignment Dave saw 2026-08-30 was this
   theme never setting those variables, so the buttons rendered at Blocksy's
   55px default scale against our much smaller input. Setting them below
   makes the two buttons and the field read as one control. See
   handoffs/storefront-visual-fixes.md item 2 - the earlier "no stepper"
   decision was a misattribution (mixed up with the separate, correct removal
   of the "run of 120" stock counter) and is retired. */
.bkc-product-page__summary .quantity{
	--quantity-height:var(--control-h-lg);
	--quantity-width:110px;
	--theme-form-field-border-radius:var(--radius-2);
	--quantity-initial-color:transparent;
	--quantity-hover-color:var(--line-hairline);
	--quantity-arrows-initial-color:var(--text-strong);
	--quantity-arrows-hover-color:var(--rust-500);
	display:inline-block;margin:var(--space-8) var(--space-5) 0 0;
}
.bkc-product-page__summary .quantity .qty{width:100%;height:var(--control-h-lg);border:var(--border-hair) solid var(--line-strong);background:var(--surface-sunken);box-shadow:var(--shadow-inset-well);font:var(--type-code);color:var(--text-strong);text-align:center}

/* appearance:none is load-bearing, not decorative — without it a <button>
   keeps native OS chrome (macOS/Safari paints a rounded blue push-button)
   regardless of background/border/clip-path overrides. Every other custom-
   styled control in this codebase resets it (.bkc-select select, .bkc-tab);
   this one didn't, which is why it rendered as a default blue button even
   though this whole rule was already loading correctly. See
   handoffs/storefront-visual-fixes.md item 4. */
.bkc-product-page__summary .single_add_to_cart_button{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:var(--control-h-lg);padding:0 var(--space-10);margin-top:var(--space-8);border:0;clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));background:var(--action-accent-bg);color:var(--action-accent-fg);font:var(--type-label);font-size:var(--fs-300);letter-spacing:var(--ls-wide);text-transform:uppercase;cursor:pointer;transition:var(--transition-control)}
.bkc-product-page__summary .single_add_to_cart_button:hover{background:var(--action-accent-bg-hover)}
.bkc-product-page__summary .single_add_to_cart_button.disabled{background:var(--action-disabled-bg);color:var(--action-disabled-fg);cursor:not-allowed}

/* "View cart" — Woo's post-AJAX .added_to_cart.wc-forward link, appended as
   a sibling after the button once an item is added. Had no rule anywhere in
   this theme (hence rendering as a bare default link/box). Mirrors the
   design system's secondary/ghost button recipe (.bkc-btn--secondary in
   components.css) rather than the primary accent treatment, since this is a
   secondary action next to the real one. components.css itself is generated
   from design/system and not hand-edited, so this is a parallel rule here
   rather than applying those classes to Woo's fixed markup. */
.bkc-product-page__summary .added_to_cart.wc-forward{display:inline-flex;align-items:center;justify-content:center;height:var(--control-h-lg);margin-top:var(--space-8);margin-left:var(--space-5);padding:0 var(--space-9);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-2);background:transparent;color:var(--action-secondary-fg);font:var(--type-label);font-size:var(--fs-300);letter-spacing:var(--ls-wide);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.bkc-product-page__summary .added_to_cart.wc-forward:hover{background:rgba(34,30,25,var(--opacity-hover-veil));border-color:var(--text-strong)}

.bkc-product-page__cart-row{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6)}
/* Out of the flex row's layout flow on purpose (position:absolute) — it's a
   prompt, shown only while no variation is selected and hidden via JS on
   Woo's own show_variation/hide_variation/reset_data events (product.js).
   Positioned below the row so its own show/hide, and the row's own growth
   when Woo reveals the quantity/add-to-cart controls, never move each other. */
.bkc-product-page__choose-size{position:absolute;left:0;top:100%;margin-top:var(--space-3);font:var(--type-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--rust-500)}

.bkc-product-page__summary .woocommerce-variation-add-to-cart{display:flex;align-items:flex-start;flex-wrap:wrap}

/* ===== made-to-order well ===== */

.bkc-made-to-order{background:var(--surface-sunken);box-shadow:var(--shadow-inset-well);padding:var(--space-6) var(--space-7);margin-top:var(--space-9);border-radius:var(--radius-2)}
.bkc-made-to-order p{font:var(--type-body-sm);color:var(--text-body);margin:0}

/* ===== fabric & specs (bullet lines pulled from post_content) ===== */

.bkc-additional-info{margin-top:var(--space-10);border-top:var(--border-hair) solid var(--line-hairline);padding-top:var(--space-7)}
.bkc-additional-info ul{font:var(--type-body);color:var(--text-body);max-width:var(--measure-prose);margin:var(--space-5) 0 0;padding-left:1.2em}
.bkc-additional-info li{margin:0 0 var(--space-2)}
.bkc-additional-info li:last-child{margin-bottom:0}

/* ===== related products ===== */

.related.products{max-width:var(--container-max);margin:var(--space-12) auto 0;padding:0 var(--gutter-page-lg)}
.related.products > h2{font:var(--type-h2);text-transform:uppercase;color:var(--text-strong);border-bottom:var(--border-hair) solid var(--line-hairline);padding-bottom:var(--space-6);margin:0 0 var(--space-7)}

@media (max-width: 900px){
	.related.products{padding:0 var(--gutter-page)}
}