/* MFS Variations — swatch styling. Native selects stay functional but hidden. */
.variations td.value select { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mfs-swatches { display: flex; flex-wrap: wrap; gap: 13px; margin: 4px 0 2px; }

.mfs-swatch { cursor: pointer; border: 1px solid #d0d0d0; background: #fff; padding: 0; line-height: 1; transition: border-color .15s, box-shadow .15s; }
.mfs-swatch:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* colour circles */
/* Clickable area hugs the visible dot (no large invisible ring) so clicks land on the
   colour you see, not a neighbour. Selection ring is box-shadow only — visual, NOT clickable. */
.mfs-swatch-color { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mfs-swatch-color .mfs-swatch-chip { width: 26px; height: 26px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.12); }
/* flag / camo / pattern image swatches: fill the circle with the swatch image */
.mfs-swatch-color .mfs-swatch-chip--img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.mfs-swatch-color.mfs-selected { border: 2px solid #111; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111 !important; }

/* size / text buttons */
.mfs-swatch-button { min-width: 42px; padding: 8px 12px; font-size: 14px; border-radius: 4px; }
.mfs-swatch-button.mfs-selected { border-color: #111; background: #111; color: #fff; }

/* sold-out greying */
.mfs-swatch.mfs-disabled { opacity: .35; cursor: not-allowed; position: relative; }
.mfs-swatch-button.mfs-disabled { text-decoration: line-through; }
.mfs-swatch-color.mfs-disabled::after { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: rgba(0,0,0,.55); transform: rotate(-45deg); }

/* ---------- custom per-colour gallery: swipeable main image + thumbnail carousel under it ----------
   Main image is a horizontal scroll-snap slider (swipe / trackpad scroll, plus chevrons).
   Thumbnails sit underneath in a single horizontal row with a chevron each side that scrolls
   the strip when there are more thumbs than fit. Scrollbars are hidden (chevrons are the
   affordance). Same layout on all widths — mobile-friendly out of the box. */
.woocommerce-product-gallery .mfs-hidden { display:none !important; }
/* timing-independent: whenever our gallery is present, hide Blocksy's flexy slider
   (it's built by Blocksy JS after our DOMReady handler, so addClass can miss it) */
.woocommerce-product-gallery:has(.mfs-gallery) .ct-product-gallery-container { display:none !important; }

/* First paint (before our gallery is built): Blocksy's server-rendered gallery framed the square
   product photo in a 3:4 object-fit:cover box, so it appeared CUT OFF then "reloaded" when our
   1:1 contain gallery replaced it. Match the final geometry so the swap is invisible. */
.woocommerce-product-gallery .ct-media-container img { aspect-ratio:1/1 !important; object-fit:contain !important; }
.woocommerce-product-gallery .ct-media-container { aspect-ratio:auto !important; background:#f6f7f8; }

/* Height parity for the swap: Blocksy's pre-JS pill strip is a 2-row grid of 119px tiles (239px)
   while our finished gallery has a 72px thumb strip (+10px margin) — content below the gallery
   jumped up ~157px when we replaced it. Hide the pills and reserve exactly the strip we'll render.
   :has(.flexy-pills) = multi-image product (single-image galleries get no thumb strip either). */
.woocommerce-product-gallery .ct-product-gallery-container .flexy-pills { display:none !important; }
.woocommerce-product-gallery .ct-product-gallery-container:has(.flexy-pills)::after { content:""; display:block; height:82px; }

.mfs-gallery { position:relative; }

/* --- main image: horizontal swipe/scroll slider --- */
.mfs-gallery-main { position:relative; background:#f6f7f8; border:1px solid #e9eaec; }
.mfs-gallery-stage {
    display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;          /* mandatory snap conflicts with CSS smooth -> JS uses instant */
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
}
.mfs-gallery-stage::-webkit-scrollbar { width:0; height:0; display:none; }
.mfs-gallery-slide { flex:0 0 100%; scroll-snap-align:center; }
.mfs-gallery-slide img { width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:contain; }

/* main prev/next chevrons (hidden at the ends / when only one image) */
.mfs-gallery-nav {
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:40px; height:40px; border-radius:50%; border:1px solid #e6e6ea;
    background:rgba(255,255,255,.92); color:#111214; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.10); transition:opacity .15s, background .15s;
}
.mfs-gallery-nav:hover { background:#fff; }
.mfs-gallery-nav--prev { left:10px; }
.mfs-gallery-nav--next { right:10px; }
.mfs-gallery-nav.is-hidden { opacity:0; pointer-events:none; }
.mfs-gallery--single .mfs-gallery-nav { display:none; }

/* --- thumbnail carousel under the image --- */
.mfs-gallery-thumbs-wrap { display:flex; align-items:center; gap:6px; margin-top:10px; }
.mfs-gallery--single .mfs-gallery-thumbs-wrap { display:none; }
.mfs-gallery-thumbs {
    flex:1 1 auto; min-width:0;
    display:flex; flex-wrap:nowrap; gap:8px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
}
.mfs-gallery-thumbs::-webkit-scrollbar { width:0; height:0; display:none; }
.mfs-gallery-thumbs .mfs-thumb {
    flex:0 0 auto; width:72px; height:72px; padding:0; border:1px solid #e9eaec;
    background:#fff; cursor:pointer; overflow:hidden; border-radius:0; scroll-snap-align:start;
}
.mfs-gallery-thumbs .mfs-thumb img { width:100%; height:100%; object-fit:contain; }
.mfs-gallery-thumbs .mfs-thumb.active { border-color:#111214; box-shadow:0 0 0 1px #111214; }

/* thumb-strip chevrons (only shown by JS when the strip overflows / not at an end) */
.mfs-thumbs-nav {
    flex:0 0 auto; width:30px; height:72px; padding:0; border:1px solid #e6e6ea;
    background:#fff; color:#111214; cursor:pointer; border-radius:4px;
    display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.mfs-thumbs-nav:hover { background:#f3f4f6; }
.mfs-thumbs-nav.is-hidden { display:none; }

/* ---------- single-product summary: tighten vertical rhythm ----------
   Reclaim near-empty space above the buy controls so "Add to bag" lands above the
   fold on a normal laptop. Biggest lever is the divider's 35px top+bottom margins.
   Blocksy sets these via later-loading dynamic CSS of equal specificity, so the
   overrides need !important to win. Scoped to product pages (this stylesheet only
   loads on is_product()), under .single-product. */
.single-product .summary .ct-product-divider { margin-top: 14px !important; margin-bottom: 14px !important; }
.single-product .summary .price { margin-top: 0 !important; margin-bottom: 10px !important; }
.single-product .summary .product_title { margin-bottom: 6px !important; }
.single-product .summary .mfs-qa-jump { margin-top: 0 !important; margin-bottom: 8px !important; }
.single-product .summary .woocommerce-product-details__short-descr:empty { margin: 0 !important; }

/* Trim the dead space above the breadcrumbs — Blocksy's content wrapper has a 60px top
   pad; pull it up so the breadcrumb + product sit closer under the header. (!important:
   Blocksy sets the pad via later dynamic CSS.) */
.single-product .ct-container-full { padding-top: 24px !important; }