/* Product archives */
.woocommerce .woocommerce-breadcrumb { max-width: var(--fk-container); margin: 22px auto; padding-inline: 16px; color: var(--fk-muted); font-size: 13px; }
.woocommerce-products-header, .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering, .woocommerce nav.woocommerce-pagination { width: min(100% - 32px, var(--fk-container)); margin-inline: auto; }
.woocommerce .woocommerce-result-count { margin-bottom: 22px; color: var(--fk-muted); }
.woocommerce .woocommerce-ordering select { min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: #fff; }
.woocommerce ul.products { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 20px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto!important; margin: 0!important; float: none!important; }
.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 4/5; object-fit: contain; margin: 0 0 14px; background: var(--fk-light-grey); border-radius: 2px; padding: 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 3px 0 5px; padding: 0; font-size: 15px; line-height: 1.35; font-weight: 600; }
.fk-product-brand { color: var(--fk-muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.woocommerce ul.products li.product .price { color: var(--fk-text); font-size: 14px; font-weight: 650; }
.woocommerce ul.products li.product .price del { color: var(--fk-muted); font-weight: 400; }
.woocommerce span.onsale { min-width: 0; min-height: 0; left: 10px; top: 10px; margin: 0; padding: 6px 9px; background: var(--fk-near-black); border-radius: 2px; line-height: 1; font-size: 11px; font-weight: 700; color: #fff; }
.woocommerce ul.products li.product .price ins, .single-product div.product p.price ins { color: var(--fk-near-black); text-decoration: none; font-weight: 700; }
.woocommerce ul.products li.product .button { display: none; }

/* Buttons and fields */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) { min-height: 48px; padding: 12px 20px; border: 1px solid var(--fk-text); border-radius: var(--fk-radius); background: var(--fk-text); color: #fff; font-weight: 700; line-height: 1.2; transition: opacity .2s ease; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .wc-block-components-button:not(.is-link):hover { background: var(--fk-text); color: #fff; opacity: .82; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input { min-height: 48px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: #fff; }

/* Cart and checkout */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce { width: min(100% - 32px, 1160px); margin: 42px auto; }
.woocommerce table.shop_table { border-color: var(--fk-border); border-radius: var(--fk-radius); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 16px; }
.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { margin-top: 20px; }
.wc-block-cart, .wc-block-checkout { margin-block: 36px 64px; }
.wc-block-components-order-summary { border-color: var(--fk-border)!important; }

@media (max-width: 480px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
}

/* =========================================================================
 * Phase 5 — Archives (Shop, Men, Women, Unisex + shared archive system)
 * ====================================================================== */

.fk-breadcrumb { width: min(100% - 32px, var(--fk-container)); margin: 22px auto 0; }
.fk-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--fk-muted); font-size: 13px; }
.fk-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--fk-border); }
.fk-breadcrumb a { color: var(--fk-muted); text-decoration: none; }
.fk-breadcrumb a:hover { color: var(--fk-text); }
.fk-breadcrumb [aria-current="page"] { color: var(--fk-text); }

.fk-archive-header { width: min(100% - 32px, var(--fk-container)); margin: 14px auto 0; }
.fk-archive-header h1 { margin: 0 0 10px; font-size: clamp(26px,3.4vw,38px); letter-spacing: -.03em; line-height: 1.1; }
.fk-archive-intro { max-width: 68ch; margin: 0; color: var(--fk-muted); }

.fk-archive-banner { width: min(100% - 32px, var(--fk-container)); margin: 20px auto 0; border-radius: var(--fk-radius); overflow: hidden; max-height: 300px; }
.fk-archive-banner img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
@media (max-width: 600px) { .fk-archive-banner, .fk-archive-banner img { max-height: 180px; } }

.fk-subcat-chips { width: min(100% - 32px, var(--fk-container)); margin: 20px auto 0; }
.fk-subcat-chips .fk-pill-list { margin-bottom: 0; }
.fk-pill[aria-current="true"] { background: var(--fk-text); color: #fff; border-color: var(--fk-text); }

.fk-archive-controls { width: min(100% - 32px, var(--fk-container)); margin: 26px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--fk-border); }
.fk-archive-controls__count { margin: 0; color: var(--fk-muted); font-size: 14px; }
.fk-archive-controls__right { display: flex; align-items: center; gap: 10px; }
.fk-archive-controls select#orderby { min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: #fff; }
.fk-filter-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--fk-text); border-radius: var(--fk-radius); background: #fff; color: var(--fk-text); font-weight: 700; cursor: pointer; }
.fk-filter-toggle__count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--fk-charcoal); color: #fff; font-size: 11px; }

.fk-active-filters { width: min(100% - 32px, var(--fk-container)); margin: 16px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fk-active-filters:empty { display: none; }
.fk-active-filter { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 14px; border: 0; border-radius: 999px; background: var(--fk-charcoal); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.fk-active-filter:hover { background: var(--fk-near-black); }
.fk-active-filter svg { width: 14px; height: 14px; }
.fk-active-filters__clear { border: 0; background: transparent; color: var(--fk-muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 7px 4px; }

.fk-archive-layout { width: min(100% - 32px, var(--fk-container)); margin: 24px auto 0; display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.fk-filters-sidebar { position: sticky; top: 96px; }
.fk-filter-group { padding: 18px 0; border-bottom: 1px solid var(--fk-border); }
.fk-filter-group:first-child { padding-top: 0; }
.fk-filter-group__title { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.fk-filter-group__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fk-filter-checkbox { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.fk-filter-checkbox input { width: 17px; height: 17px; accent-color: var(--fk-near-black); }
.fk-filter-price { display: flex; align-items: center; gap: 8px; }
.fk-filter-price input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); font: inherit; }

.fk-archive-grid-col ul.products { margin: 0; }

.fk-archive-pagination { width: 100%; margin-top: 40px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 8px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0!important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 40px; min-height: 40px; display: grid; place-items: center; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); padding: 0 10px; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--fk-text); color: #fff; border-color: var(--fk-text); }

/* Product card */
.fk-product-card { position: relative; }
.fk-product-card__media { position: relative; }
.fk-product-card__link { display: block; }
.fk-badge { position: absolute; left: 10px; z-index: 2; padding: 6px 9px; border-radius: 2px; line-height: 1; font-size: 11px; font-weight: 700; color: #fff; }
.fk-badge--new { top: 10px; background: var(--fk-text); }
.woocommerce span.onsale ~ .fk-badge--new, .fk-product-card__media:has(.onsale) .fk-badge--new { top: 44px; }
.fk-wishlist-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--fk-text); cursor: pointer; }
.fk-wishlist-btn:hover { background: #fff; }
.fk-wishlist-btn[aria-pressed="true"] { color: var(--fk-near-black); }
.fk-wishlist-btn[aria-pressed="true"] svg path { fill: currentColor; }
.fk-swatches { display: flex; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.fk-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--fk-border); }
.fk-swatch--more { width: auto; height: auto; border-radius: 0; font-size: 11px; color: var(--fk-muted); border: 0; }
.fk-gender-label { display: block; margin: 3px 0 0; font-size: 11px; color: var(--fk-muted); font-weight: 500; }
.fk-stock { margin: 6px 0 0; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.fk-stock--low { color: var(--fk-charcoal); font-weight: 700; }
.fk-stock--low svg { width: 12px; height: 12px; flex-shrink: 0; }
.fk-stock--out { color: var(--fk-muted); font-weight: 650; }

/* No-results state reuses .fk-error-page / .fk-pill-list / .fk-error-actions from base.css */
.fk-archive-empty { width: min(100% - 32px, var(--fk-container)); margin: 0 auto; }

/* Mobile filter drawer (mirrors header mobile menu pattern) */
.fk-filters-drawer { position: fixed; inset: 0; z-index: 2000; }
.fk-filters-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.fk-filters-drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(92vw, 400px); display: flex; flex-direction: column; background: #fff; box-shadow: var(--fk-shadow); }
.fk-filters-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--fk-border); }
.fk-filters-drawer__body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; }
.fk-filters-drawer__footer { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--fk-border); background: #fff; }
.fk-filters-drawer__footer .fk-button { flex: 1; }
body.fk-filters-open { overflow: hidden; }

.fk-archive-supporting { width: min(100% - 32px, var(--fk-container)); margin: 64px auto 0; padding-top: 48px; border-top: 1px solid var(--fk-border); color: var(--fk-muted); }
.fk-archive-supporting h2 { color: var(--fk-text); font-size: 20px; margin: 0 0 12px; }
.fk-archive-related-guides { width: min(100% - 32px, var(--fk-container)); margin: 40px auto 0; }
.fk-archive-links { width: min(100% - 32px, var(--fk-container)); margin: 24px auto 64px; font-size: 14px; }
.fk-archive-links a { color: var(--fk-muted); }

@media (max-width: 1279px) {
  .woocommerce ul.products { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1023px) {
  .fk-archive-layout { grid-template-columns: 1fr; }
  .fk-filters-sidebar { display: none; }
  .fk-filter-toggle { display: inline-flex; }
}

@media (max-width: 767px) {
  .woocommerce ul.products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 10px; }
  .fk-archive-controls { margin-top: 18px; }
}

/* =========================================================================
 * Phase 7 — Cart and checkout.
 *
 * WooCommerce's own Cart/Checkout blocks already implement the required
 * 65%/35% desktop split and the single-column mobile stack natively, via
 * CSS container queries on .wc-block-components-sidebar-layout (stacks
 * under a ~700px container width) — nothing here fights that, it only
 * layers the brand's visual language on top and adds what WooCommerce
 * doesn't ship by default: a sticky order-summary column on both pages,
 * brand-styled cards/thumbnails, and the order summary surfacing before
 * the (long) checkout form on mobile.
 *
 * A true click-to-expand/collapse mobile order summary was deliberately
 * NOT built: the summary is React-rendered and re-renders on every
 * shipping/address change, so wrapping it in an externally-added
 * <details> (like the single-product accordion) would fight React's own
 * DOM diffing and risk breaking mid-checkout. Logged as a deferred
 * micro-interaction in docs/known-issues.md, not an oversight — moving
 * the summary to the top of the mobile stack (below) already surfaces it
 * before the form, which covers the actual need.
 * ====================================================================== */

.wc-block-cart, .wc-block-checkout { width: min(100% - 32px, var(--fk-container)); margin-inline: auto; }
.wc-block-components-sidebar-layout { gap: 40px; }

/* Order summary: bordered card matching the rest of the site's panels */
.wc-block-components-sidebar { border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: var(--fk-off-white); padding: 20px; align-self: flex-start; }
.wc-block-components-sidebar .wc-block-components-totals-coupon,
.wc-block-components-sidebar .wc-block-components-panel { padding-left: 0; padding-right: 0; }
.wc-block-components-sidebar .wc-block-components-order-summary__button-text,
.wc-block-components-sidebar h2.wc-block-components-title { font-size: 16px; font-weight: 700; }

/* Sticky order summary on desktop, matching the sticky header's real
   height (72px row + 1px border) — same top offset used on the single-
   product page's sticky summary column, for one consistent sticky rule
   across the site. Off entirely on short viewports for the same reason. */
@media (min-width: 700px) {
  .wc-block-cart .wc-block-components-sidebar { position: sticky; top: 84px; }
  .wc-block-checkout__sidebar.is-sticky { top: 84px; }
}
@media (max-height: 750px) {
  .wc-block-cart .wc-block-components-sidebar,
  .wc-block-checkout__sidebar.is-sticky { position: static; }
}

/* Checkout only: order summary appears before the form on mobile, so the
   total/delivery cost is visible before a shopper starts a long form
   rather than only after scrolling past it. */
@container (max-width: 699px) {
  .wc-block-checkout .wc-block-components-sidebar { order: -1; margin-bottom: 24px; }
}

/* Cart line items: product photo follows the same 4:5 contain treatment
   as every other product image on the site (never crop/stretch). */
.wc-block-cart-item__image { max-width: 88px; }
.wc-block-cart-item__image img { aspect-ratio: 4/5; object-fit: contain; background: var(--fk-light-grey); border-radius: var(--fk-radius); }

/* Full-width primary CTA on mobile, both pages */
@media (max-width: 699px) {
  .wc-block-cart__submit-container .wc-block-components-button,
  .wc-block-checkout__actions .wc-block-components-checkout-place-order-button { width: 100%; }
}

/* Checkout form fields: match the rest of the site's input styling
   (already covered generically above) plus tighter section spacing. */
.wc-block-checkout__form .wc-block-components-checkout-step { margin-bottom: 8px; }
.wc-block-checkout__form h2.wc-block-components-checkout-step__title { font-size: 17px; }

/* Brands directory */
.fk-brand-grid { width: min(100% - 32px, var(--fk-container)); margin: 32px auto 64px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; list-style: none; padding: 0; }
.fk-brand-tile { display: grid; place-items: center; min-height: 96px; padding: 20px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: #fff; color: var(--fk-text); text-decoration: none; font-weight: 700; text-align: center; }
.fk-brand-tile:hover { border-color: var(--fk-text); background: var(--fk-light-grey); }
@media (max-width: 900px) {
  .fk-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* =========================================================================
 * Single product page.
 *
 * Layout: two-column CSS Grid, gallery ~62% / info column ~38% on desktop.
 * align-items: start means neither column stretches to fill the other's
 * height, so the sticky info column's containing block is bounded by its
 * own grid row — set by whichever column is taller. That's what makes
 * position: sticky stop on its own at the right point with no max-height/
 * overflow math: it can never extend past its row, so it can never overlap
 * whatever comes after div.product. The sticky top offset matches the
 * sticky header's real height (72px row + 1px border) — the announcement
 * bar above it is NOT sticky, so it isn't part of this. On short viewports
 * (common laptops, not just phones) sticky switches off entirely rather
 * than trying to compress its own content into a shorter space.
 * ====================================================================== */

.single-product div.product {
  width: min(100% - 32px, var(--fk-container));
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: minmax(0,1.8fr) minmax(0,1fr);
  gap: 40px;
  align-items: start;
}
.single-product .fk-breadcrumb { margin-top: 14px; }
.single-product div.product .woocommerce-product-gallery { grid-column: 1; }
.single-product div.product .summary {
  grid-column: 2;
  position: sticky;
  top: 84px;
}

@media (max-height: 750px) {
  .single-product div.product .summary { position: static; }
}

@media (max-width: 900px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 0; }
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary { grid-column: 1; }
  .single-product div.product .summary { position: static; margin-top: 24px; }
}

/* 1-3: brand, title, price, short description (product highlights) */
.fk-product-brand--single { margin-bottom: 4px; }
.single-product div.product .product_title { margin: 2px 0 8px; font-size: clamp(26px,3vw,40px); line-height: 1.1; letter-spacing: -.03em; }
.single-product div.product p.price { color: var(--fk-text); font-size: 18px; font-weight: 700; }
.single-product div.product p.price ins { color: var(--fk-near-black); text-decoration: none; font-weight: 700; }
.single-product div.product .woocommerce-product-details__short-description { margin-top: 10px; color: var(--fk-muted); }
.single-product div.product .woocommerce-product-details__short-description ul,
.single-product div.product .woocommerce-product-details__short-description ol { margin: 0; padding-left: 20px; }
.single-product div.product .woocommerce-product-details__short-description li + li { margin-top: 4px; }

/* 4-5: trust badges + divider (hooked at priority 12 in functions.php,
   directly under the price and above colour/size). */
.fk-trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--fk-border); }
.fk-trust-badge { display: flex; align-items: center; gap: 8px; flex: 1 1 170px; padding: 10px 12px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: var(--fk-off-white); color: var(--fk-text); font-size: 13px; font-weight: 600; }
.fk-trust-badge svg { flex-shrink: 0; color: var(--fk-charcoal); }

/* Gallery: every image shown at once, stacked vertically and full size
   (Nike-style), rather than one image + a carousel/thumbnail strip.
   flexslider is switched off entirely (functions.php) — its whole job is
   hiding every image but one — so .woocommerce-product-gallery__wrapper
   never gets rebuilt into a .flex-viewport/.flex-control-nav carousel;
   these are its own real children, styled directly as a simple column.
   The gallery column being taller than the info column (once there's more
   than one image) is exactly what gives the sticky info column room to
   travel as the shopper scrolls past the stacked photos. */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { display: flex; flex-direction: column; gap: 12px; }
.woocommerce-product-gallery__image { border-radius: var(--fk-radius); overflow: hidden; background: var(--fk-light-grey); }
.woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 4/5; object-fit: contain; background: var(--fk-light-grey); display: block; cursor: zoom-in; }
.woocommerce-product-gallery__image--placeholder img { object-fit: contain; padding: 40px; cursor: default; }
/* With flexslider off there's no "active slide" for this trigger to open
   the lightbox at, and every image is already directly clickable to open
   it — so the standalone trigger icon is both redundant and broken here. */
.woocommerce-product-gallery__trigger { display: none; }

/* Variation table: no-JS fallback keeps a real, styled <select>; the JS
   swatch/button UI (assets/js/product.js) hides it once built. */
.fk-variations { width: 100%; margin-bottom: 4px; border-collapse: collapse; }
.fk-variation-row th.label { padding: 10px 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fk-variation-row th.label label { font-size: 13px; font-weight: 700; }
.fk-variation-row td.value { padding: 0 0 2px; }
.fk-variation-select { min-height: 42px; width: 100%; padding: 0 36px 0 12px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: #fff; }
.fk-variation-select--visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.reset_variations { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--fk-muted); text-decoration: underline; }

/* 7: Size guide trigger, next to the "Size" label */
.fk-size-guide-trigger { border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 650; text-decoration: underline; color: var(--fk-text); cursor: pointer; }
.fk-size-guide-trigger:hover { opacity: .7; }

/* The label + "Size guide" trigger row and the option-buttons row stack
   at every screen size, desktop included — not just a mobile fix. Left as
   native <th>/<td> table cells, the browser's table auto-layout gives the
   label cell (a flex child of its own: label text + trigger button) an
   unpredictable, often oversized intrinsic width, squeezing the adjacent
   buttons cell down and forcing the option buttons to wrap one or two per
   row instead of flowing freely. Block-level, full-width rows sidestep
   that entirely and match the reference pattern regardless of viewport. */
.fk-variations, .fk-variations tbody { display: block; width: 100%; }
.fk-variation-row { display: block; width: 100%; }
.fk-variation-row th.label { display: flex; width: 100%; }
.fk-variation-row td.value { display: block; width: 100%; margin-top: 10px; }

/* 6: Colour — small round monochrome swatches (shape signals "this is a
   colour picker"; no colour fill, since the site is strictly
   black/white/grey — the swatch's accessible name and the visible label
   below the row carry the actual colour name). */
.fk-swatch-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 4px; }
.fk-swatch-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fk-border); background: var(--fk-off-white); cursor: pointer; }
.fk-swatch-btn:hover { border-color: var(--fk-charcoal); }
.fk-swatch-btn.fk-is-selected { background: var(--fk-near-black); border-color: var(--fk-near-black); box-shadow: 0 0 0 2px #fff inset; }
.fk-swatch-btn.fk-is-disabled { opacity: .35; cursor: not-allowed; }
.fk-swatch-group__label { margin: 4px 0 0; font-size: 13px; color: var(--fk-muted); }

/* 7: Size (and any other non-colour attribute) — compact rectangular text
   buttons flowing left to right and wrapping, never one-per-row. Standard
   e-commerce touch-target sizing (40-44px), not a large tile. */
.fk-option-group { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.fk-option-btn { min-width: 42px; min-height: 42px; padding: 0 12px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: var(--fk-off-white); color: var(--fk-text); font-size: 14px; font-weight: 650; cursor: pointer; }
.fk-option-btn:hover { border-color: var(--fk-charcoal); }
.fk-option-btn.fk-is-selected { background: var(--fk-near-black); border-color: var(--fk-near-black); color: #fff; }
.fk-option-btn.fk-is-disabled { border-color: var(--fk-border); color: var(--fk-border); text-decoration: line-through; cursor: not-allowed; background: var(--fk-off-white); }

.fk-variation-error { margin: 6px 0 0; color: var(--fk-near-black); font-size: 13px; font-weight: 650; }

/* Dynamic per-variation price/availability, populated by WooCommerce's own JS */
.woocommerce-variation-price { margin: 8px 0 0; font-size: 18px; font-weight: 700; }
.woocommerce-variation-availability .stock,
.single-product div.product .stock { margin: 8px 0 0; font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.woocommerce-variation-availability .stock.in-stock,
.single-product div.product .stock.in-stock { color: var(--fk-text); }
.woocommerce-variation-availability .stock.in-stock::before,
.single-product div.product .stock.in-stock::before { content: "✓"; font-weight: 800; }
.woocommerce-variation-availability .stock.out-of-stock,
.single-product div.product .stock.out-of-stock { color: var(--fk-muted); }
.woocommerce-variation-availability .stock.available-on-backorder,
.single-product div.product .stock.available-on-backorder { color: var(--fk-charcoal); }
.woocommerce-variation-availability .stock.fk-stock--low,
.single-product div.product .stock.fk-stock--low { color: var(--fk-charcoal); font-weight: 800; }
.woocommerce-variation-availability .stock.fk-stock--low::before,
.single-product div.product .stock.fk-stock--low::before { content: "⚠"; }

/* 8-9: quantity stepper grouped tightly with Add to Cart, as one connected
   control. Scoped by WooCommerce's own product-type body class for simple
   products (form.cart holds only quantity + button there); variable
   products get the same treatment via WooCommerce's own
   .woocommerce-variation-add-to-cart wrapper instead, since form.cart
   there also holds the variations table and can't become a flex row
   itself without breaking that layout. */
.single-product div.product form.cart { margin-top: 16px; }
.single-product div.product .quantity .qty { min-height: 50px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); }
.product-type-simple.single-product div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.product-type-simple.single-product div.product form.cart .quantity { margin: 0; }
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.woocommerce-variation-add-to-cart .quantity { margin: 0; }
.single-product div.product form.cart .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; width: auto; min-width: 160px; min-height: 50px; }

/* 10: delivery estimate, right after the cart form */
.fk-delivery-estimate { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--fk-muted); font-size: 13px; }
.fk-delivery-estimate svg { flex-shrink: 0; }

.single-product .product_meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fk-border); color: var(--fk-muted); font-size: 13px; }

/* Size guide drawer (mirrors the mobile filter drawer pattern) */
.fk-size-guide { position: fixed; inset: 0; z-index: 2100; }
.fk-size-guide__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.fk-size-guide__panel { position: absolute; inset: 0 0 0 auto; width: min(94vw, 520px); display: flex; flex-direction: column; background: #fff; box-shadow: var(--fk-shadow); }
.fk-size-guide__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--fk-border); }
.fk-size-guide__body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.fk-size-guide__note { margin: 0 0 20px; color: var(--fk-muted); font-size: 13px; }
.fk-size-guide__table-wrap { overflow-x: auto; margin-bottom: 28px; }
.fk-size-guide__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fk-size-guide__table th, .fk-size-guide__table td { padding: 10px 12px; border-bottom: 1px solid var(--fk-border); text-align: left; white-space: nowrap; }
.fk-size-guide__table th { font-weight: 700; }
.fk-size-guide__how-to h3 { margin: 0 0 10px; font-size: 15px; }
.fk-size-guide__how-to ol { margin: 0; padding-left: 20px; color: var(--fk-muted); font-size: 13px; line-height: 1.7; }
body.fk-size-guide-open { overflow: hidden; }

/* 11: below-the-fold accordion — Description, Additional information,
   Reviews. Native <details>/<summary> (see woocommerce/single-product/
   tabs/tabs.php) — collapsed by default, keyboard-operable, zero JS. */
.fk-accordion { width: min(100% - 32px, var(--fk-container)); margin: 56px auto 64px; }
.fk-accordion-item { border-top: 1px solid var(--fk-border); }
.fk-accordion-item:last-child { border-bottom: 1px solid var(--fk-border); }
.fk-accordion-item__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 2px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.fk-accordion-item__summary::-webkit-details-marker { display: none; }
.fk-accordion-item__icon { flex-shrink: 0; color: var(--fk-charcoal); transition: transform .2s ease; }
.fk-accordion-item[open] .fk-accordion-item__icon { transform: rotate(180deg); }
.fk-accordion-item__panel { padding: 0 2px 24px; color: var(--fk-muted); }
.fk-accordion-item__panel h2 { display: none; } /* the tab title already shows in the <summary> */
.fk-accordion-item__panel table.shop_attributes { width: 100%; border-collapse: collapse; }
.fk-accordion-item__panel table.shop_attributes th, .fk-accordion-item__panel table.shop_attributes td { padding: 10px 0; border-bottom: 1px solid var(--fk-border); text-align: left; }
.fk-accordion-item__panel table.shop_attributes th { width: 220px; color: var(--fk-text); font-weight: 700; }