/** Shopify CDN: Minification failed

Line 14:21 Expected identifier but found whitespace
Line 14:23 Unexpected "{"
Line 14:33 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:footer (INDEX:23) */
footer {
    background-color: {{ settings.footer_background_color }};
  }
/* END_SECTION:footer */

/* START_SECTION:product-section-1 (INDEX:56) */
/* Show carousel buttons only on desktop */
@media screen and (min-width: 768px) {
  .carousel-btn-2 {
    display: block !important;
  }
}

/* Swipe affordance — touch-primary devices only. The hint sits at the
   bottom-right of the main image and gently wiggles to signal that
   horizontal swipe is available. Auto-hides after the shopper has
   swiped at least once (handled in JS via the .nesw-swipe-seen class
   on .product-carousel-container-2). */
.nesw-swipe-hint {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .nesw-swipe-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border-radius: 14px;
    font-family: 'JetBrains Mono', 'Inconsolata', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 10;
    pointer-events: none;
    animation: neswSwipeHintWiggle 2.4s ease-in-out infinite,
               neswSwipeHintFadeIn 0.4s ease-out both;
  }
  .nesw-swipe-hint svg {
    width: 22px;
    height: 10px;
  }
  /* Hide once the user has swiped through the carousel at least once. */
  .product-carousel-container-2.nesw-swipe-seen .nesw-swipe-hint {
    animation: neswSwipeHintFadeOut 0.4s ease-out forwards;
  }
}
@keyframes neswSwipeHintWiggle {
  0%, 100% { transform: translateX(0); }
  40%      { transform: translateX(-5px); }
  60%      { transform: translateX(-5px); }
}
@keyframes neswSwipeHintFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes neswSwipeHintFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* ===================================================================
   NESW PDP gallery redesign (2026-06-24)
   - Desktop: clean 2-column grid of big images (no arrows/thumbnails)
   - Mobile: one continuous horizontal row, fluid free-scroll (no snap),
     thumbnails removed
   - Bigger desktop buy controls
   Implemented as scoped overrides; the old step-carousel transform is
   neutralized rather than ripped out, so the fullscreen lightbox (which
   reads imgs from the DOM) keeps working.
   =================================================================== */

/* Hide the thumbnail/preview grids on all viewports. The fullscreen
   lightbox still reads their <img>s from the DOM (display:none keeps refs). */
.grid-container-mobile,
.product-box .grid-container { display: none !important; }

/* Kill the JS step-carousel transform + transition everywhere. */
.product-carousel-images-2 { transform: none !important; transition: none !important; }

/* Arrows + counter no longer used (grid on desktop, fluid scroll on mobile). */
.carousel-btn-2, .carousel-counter-2 { display: none !important; }

/* ---------- DESKTOP (>=769px): clean 2-column grid + bigger controls ---------- */
@media (min-width: 769px) {
  /* ONE CENTERED block: images + cart sit together (no gap between them
     beyond the cart's own padding), and leftover width splits EVENLY to the
     page edges. Jay 2026-08-24: space-between pinned the cart to the right
     edge and pooled every leftover pixel into a huge void in the MIDDLE on
     2-image pages at wide viewports - whitespace belongs at the edges, where
     every other section of the site puts it. Image size stays uniform across
     1-3-image pages (sizeGallery), so this centers, never shrinks. */
  /* V5 (Jay 2026-09-21): "the single product picture on the left needs to be
     substantially bigger on desktop and scale with the browser". Measured on
     representclo.com: the image is exactly half the viewport and grows with it
     (720x900 at 1440, 960x1200 at 1920); the buy column sits in the other half,
     its content about 480-620 wide, and follows the scroll. Ours was a fixed 560
     at every width. Now: the gallery column is half the browser minus the site's
     40px gutter (680 at 1440, 920 at 1920, 4:5 tall), the buy column takes the
     rest up to 720px wide, and the block starts at the gutter every band uses.
     The centered fit-content block of 2026-08-24 is gone with the fixed size. */
  .product-box {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
  }
  .product-image-box {
    width: calc(50vw - 40px) !important;
    flex: 0 0 calc(50vw - 40px) !important;
    padding: 0 !important;
  }
  .product-content-box {
    /* The buy column: fills what is left of the row, capped so the ladder and
       the button never stretch past a hand's width on a wide monitor. */
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 720px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 40px 0 56px !important;
    /* Buy column pinning lives in JS (buy-column follow script below), NOT
       position:sticky: this theme's <body> is a non-scrolling scrollport
       (body{overflow-y:scroll} in __default-head + overflow-x:hidden inline),
       which scopes sticky to a box that never scrolls — the header stack hit
       the same wall and went position:fixed (see theme.liquid). */
  }

  .product-carousel-container-2 { overflow: visible !important; }
  .featured-product-image { margin: 0 !important; justify-content: stretch !important; }
  .product-carousel-images-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }
  .product-carousel-images-2 > .carousel-image-2,
  .product-carousel-images-2 > div {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    border-radius: 4px;
    cursor: pointer;
  }

  /* Bigger buy controls (match the reference). Scoped under
     .product-content-box so these win over the section's inline
     <style> `.nesw-atc-pill{height:52px!important}` rule, which sits
     LATER in the document and would otherwise beat an equal-specificity
     !important rule on source order. */
  .product-content-box .nesw-atc-pill,
  .product-content-box .nesw-atc-pill > .add-to-cart-button,
  .product-content-box .nesw-atc-pill > .nesw-bookmark--pdp { height: 62px !important; }
  .product-content-box .nesw-atc-pill > .add-to-cart-button { font-size: 15px !important; }
  /* Size pills scaled with the 560px column (Jay 2026-08-24; Comfrt runs
     16px pill text at this viewport). */
  /* V5 (Jay 2026-09-22, "our size buttons are too big on desktop... compare them to
     Haus"): measured Haus at 1440 = 67x30 pills, 12px text, 4px gaps; ours were 104x42 at
     14px. Now 66x34 at 13px with a 6px gap, and the swatches 32px (were 38). */
  .product-content-box .w-commerce-commerceaddtocartoptionpill:not(.product-color-swatch) {
    min-width: 66px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-content-box .product-color-swatch { width: 32px !important; height: 32px !important; }

  /* Buy-column type scaled with the wider column (Comfrt: 28px title,
     16px button text at the same viewport - we land just under). */
  .product-content-box .product-title { font-size: 25px !important; }
  .product-content-box .nesw-atc-rich__main { font-size: 15px !important; }
  .product-content-box .product-accordions-fixed { font-size: 15px !important; }
  .product-content-box .nesw-spec-bar { font-size: 11.5px !important; }
  .product-content-box .product-color-selected,
  .product-content-box .product-color-label { font-size: 15px !important; }
}

/* ---------- MOBILE (<=768px): fluid free-scroll row, no snap ---------- */
@media (max-width: 768px) {
  .product-carousel-container-2 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .product-carousel-container-2::-webkit-scrollbar { display: none; }
  .product-carousel-images-2 > .carousel-image-2 { scroll-snap-align: none !important; }
}

/* ===================================================================
   NESW custom product gallery (.nesw-pcg) — replaces the Webflow gallery,
   which collapses to a single image on variant change. Desktop = per-color
   2-col grid; mobile = one fluid horizontal scroll of ALL images.
   =================================================================== */
/* Hide the legacy Webflow gallery + the duplicate thumbnail grids. */
.product-image-box .featured-product-image,
.product-image-box .grid-container-mobile,
.product-box .grid-container { display: none !important; }

.nesw-pcg { width: 100%; transition: opacity 0.12s ease; }
.nesw-pcg__slide img { display: block; width: 100%; }
/* Hide until JS has applied the initial per-color filter (prevents an
   all-images-then-filter flash on desktop). Failsafe animation reveals it
   even if the script never runs. */
.nesw-pcg:not(.is-ready) { opacity: 0; animation: nesw-pcg-reveal 0s linear 1.2s forwards; }
@keyframes nesw-pcg-reveal { to { opacity: 1; } }

.nesw-pcg-wrap { position: relative; width: 100%; }

/* Model spec chip + line (nesw-model-info). The chip renders in the wrap and
   is CSS-hidden until placeModelChip() seats it on the first visible slide;
   bottom-LEFT because the mobile image counter owns bottom-right. */
.nesw-pcg__slide { position: relative; }
.nesw-pcg-wrap > .nesw-model-chip { display: none; }
.nesw-model-chip {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 12px;
  z-index: 4; pointer-events: none; white-space: nowrap;
}
/* (The buy-column text line was removed 2026-08-24 at Jay's request - the
   photo chip is the only model-info surface. The snippet still supports
   mode: line if it ever comes back.) */
.nesw-pcg__hint { display: none; }
/* V3 — Mobile "N / M" image counter chip, bottom-right of the gallery. */
.nesw-pcg__count { display: none; }
@media (max-width: 768px) {
  .nesw-pcg__count {
    display: block;
    position: absolute;
    /* V3 — slides are 86% wide with a 14% peek strip on the right: the chip
       must pin inside the MAIN photo's corner, not the peek's. */
    right: calc(14% + 8px);
    bottom: 26px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 12px;
    z-index: 4;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
  }
  .nesw-pcg-wrap.pcg-count-off .nesw-pcg__count { display: none; }
}
@media (max-width: 768px) {
  .nesw-pcg__hint {
    display: flex; align-items: center;
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    color: #000;
    pointer-events: none; z-index: 4;
    transition: opacity 0.4s ease;
    /* No backdrop; a faint light halo keeps the black arrows legible on
       darker product shots. */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.45));
  }
  /* Three black chevrons that light left→right in sequence like a turn signal,
     then pause, repeating every ~2.2s. */
  .nesw-pcg__hint svg { width: 13px; height: 21px; display: block; margin: 0 -3px; opacity: 0.18; }
  .nesw-pcg__hint svg:nth-child(1) { animation: nesw-pcg-arrow 1.5s ease-in-out infinite; }
  .nesw-pcg__hint svg:nth-child(2) { animation: nesw-pcg-arrow 1.5s ease-in-out infinite 0.15s; }
  .nesw-pcg__hint svg:nth-child(3) { animation: nesw-pcg-arrow 1.5s ease-in-out infinite 0.3s; }
  .nesw-pcg-wrap.hint-dismissed .nesw-pcg__hint { opacity: 0; }
  @keyframes nesw-pcg-arrow {
    0%, 100% { opacity: 0.18; }
    9%       { opacity: 0.6; }
    24%      { opacity: 0.18; }
  }
}

@media (min-width: 769px) {
  /* Image size is set by JS (sizeGallery) via --pcg-col: 1/2/3-image setups fill
     the width beside the cart (820px clamp), so a 2-image page spreads like the
     3-across page; the buy column follows via JS while tall galleries scroll.
     The whole block is centered.
     Layout by count:
       1 -> single image, 2 -> a row of two, 3 -> a horizontal row of three,
       4 -> a 2×2 block, 5+ -> rows of three. */
  /* V4 (Jay 2026-09-21): ONE image at a time with arrows, the phone's scroller
     at desktop size. The 1/2/3-across grid survives under [data-pcg-grid]. */
  .nesw-pcg {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 30px;
    gap: 0;
  }
  .nesw-pcg-wrap:has(+ .nesw-collage[data-on="true"]) .nesw-pcg { margin-bottom: 8px; }
  .nesw-pcg::-webkit-scrollbar { display: none; }
  .nesw-pcg__slide { flex: 0 0 100%; min-width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; scroll-snap-align: start; cursor: zoom-in; }
  .nesw-pcg__slide img { width: 100%; height: 100%; object-fit: cover; }
  .nesw-pcg__slide.is-off { display: none !important; }
  .nesw-pcg-wrap { width: 100%; max-width: 100%; margin: 0; }
  /* V5: the scroller and the collage below it take the capped width (set by sizeGallery
     on .product-image-box), so the arrows stay on the image when it is narrower than
     the column. */
  .product-image-box .nesw-pcg-wrap:not([data-pcg-grid]) { width: var(--pcg-col, 100%); }
  .nesw-collage { width: var(--pcg-col, 100%); max-width: 100%; display: none; }
  .nesw-collage[data-on="true"] { display: block; }
  .nesw-collage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nesw-collage__grid:empty { display: none; }
  .nesw-collage__cell { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: #f2f2f0; }
  .nesw-collage__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .nesw-collage__life { margin-top: 8px; overflow: hidden; border-radius: 6px; }
  .nesw-collage__life:empty { display: none; }
  .nesw-collage__life img { width: 100%; height: auto; display: block; }
  .nesw-pcg__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.92); color: #1b1b1b; border: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5; opacity: 0.92; transition: opacity 0.15s ease, transform 0.06s ease;
  }
  .nesw-pcg__nav:hover { opacity: 1; }
  .nesw-pcg__nav:active { transform: translateY(-50%) scale(0.96); }
  .nesw-pcg__nav svg { width: 18px; height: 18px; }
  .nesw-pcg__nav--prev { left: 12px; }
  .nesw-pcg__nav--next { right: 12px; }
  .nesw-pcg-wrap.pcg-count-off .nesw-pcg__nav { display: none; }
  .nesw-pcg__count {
    display: block; position: absolute; right: 14px; bottom: 14px;
    background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; padding: 3px 9px; border-radius: 12px; z-index: 4;
    pointer-events: none; font-variant-numeric: tabular-nums;
  }
  .nesw-pcg-wrap.pcg-count-off .nesw-pcg__count { display: none; }
  /* V7 (Jay 2026-09-24): TWO ACROSS, the Represent / Comfrt picture column. Every
     photo and video in media order, two per row, scrolling with the page while the
     buy column follows. The picture column is 60% of the block, the block is
     capped at 1760px and centred, so an ultra-wide monitor gets whitespace at both
     edges instead of ever-wider pictures. Three across was too small per picture
     and surfaced a detail shot in the first row. */
  .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) { max-width: 1760px !important; margin: 0 auto !important; }
  .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) .product-image-box { width: 60% !important; flex: 0 0 60% !important; }
  .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) .product-content-box { max-width: 640px !important; }
  /* The buy column sticks under the fixed header while the two-across gallery scrolls past
     (a real sticky, not the scroll-driven transform: see the follow script). A column TALLER
     than the viewport pins its bottom instead (top goes negative), so Pair it with and the offer
     bar stay reachable: measured 2026-09-24 at 1280x720 on the 4-pack, the column was 1196px and
     its bottom sat 590px below the fold for the first 1700px of scroll. --col-h is written by
     the follow script's ResizeObserver; without it the fallback is the old 114px. */
  @media (min-width: 769px) {
    .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) .product-content-box { position: sticky; top: min(114px, calc(100vh - var(--col-h, 0px) - 16px)); align-self: flex-start; transform: none !important; }
  }
  /* Big screens (Jay 2026-09-24: the two-across photos read small and sat left on a 2000px
     monitor): the box runs to the gutters and the photos take everything the buy column
     does not. */
  @media (min-width: 1600px) {
    .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) { max-width: none !important; width: calc(100% - 80px) !important; margin: 0 40px !important; }
    .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) .product-content-box { flex: 0 0 640px !important; max-width: 640px !important; }
    .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) .product-image-box { width: auto !important; flex: 1 1 auto !important; min-width: 0; }
  }
  @media (min-width: 1900px) {
    /* The buy column gives up outer padding, not inner width, so the photos grow (≈+30%). */
    .product-box:has(.nesw-pcg-wrap[data-pcg-mode="grid2"]) .product-content-box { flex: 0 0 540px !important; max-width: 540px !important; padding-left: 40px !important; padding-right: 24px !important; }
  }
  .product-image-box .nesw-pcg-wrap[data-pcg-mode="grid2"] { width: 100%; }
  .nesw-pcg-wrap[data-pcg-mode="grid2"] .nesw-pcg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; width: 100%; margin: 0 0 30px; scroll-snap-type: none; }
  .nesw-pcg-wrap[data-pcg-mode="grid2"] .nesw-pcg__slide { flex: none; min-width: 0; width: auto; aspect-ratio: 3 / 4; }
  .nesw-pcg-wrap[data-pcg-mode="grid2"][data-pcg-ratio="4-5"] .nesw-pcg__slide { aspect-ratio: 4 / 5; }
  .nesw-pcg-wrap[data-pcg-mode="grid2"] .nesw-pcg__nav,
  .nesw-pcg-wrap[data-pcg-mode="grid2"] .nesw-pcg__count { display: none !important; }
  .nesw-pcg__video { width: 100%; height: 100%; background: #f2f2f0; }
  /* Row one always above the fold (Jay 2026-09-25: "5% too big, a little out of the fold" on a
     big monitor): two tiles are never wider than the viewport height allows (header ~104px + a
     36px margin) and take 95% of the picture column at most, centred in it. */
  @media (min-width: 769px) {
    .nesw-pcg-wrap[data-pcg-mode="grid2"] .nesw-pcg { max-width: min(95%, calc((100vh - 140px) * 1.5 + 10px)); margin-left: auto; margin-right: auto; }
    .nesw-pcg-wrap[data-pcg-mode="grid2"][data-pcg-ratio="4-5"] .nesw-pcg { max-width: min(95%, calc((100vh - 140px) * 1.6 + 10px)); }
  }
  /* The details tile: third in the grid, beside the video (or the next photo). Filled only by
     nesw-product-features' script; is-filled is set only when the details fit the tile height. */
  /* Until nesw-product-features decides whether the details join the grid (it runs ~30ms after the
     grid paints), everything past the first two photos is laid out but invisible: row two changing
     then is not a visible shift (CLS 0.078 on a 1440x900 laptop, 2026-09-25). is-decided is set by
     that script, or at DOMContentLoaded when the template has no features section. */
  @media (min-width: 769px) {
    .nesw-pcg-wrap[data-details-in][data-pcg-mode="grid2"]:not(.is-decided) .nesw-pcg > :not(.pcg-lead) { visibility: hidden; }
  }
  .nesw-pcg-wrap[data-pcg-mode="grid2"] .nesw-pcg__details.is-filled { display: flex; flex-direction: column; justify-content: center; align-self: stretch; min-width: 0; padding: clamp(20px, 2vw, 36px) clamp(22px, 2.4vw, 44px); background: #f7f6f2; border-radius: 6px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1b1b1b; cursor: default; }
  .nesw-pcg__details .nesw-band__title { font-size: clamp(30px, 2.3vw, 44px); margin-bottom: 14px; }
  .nesw-pcg__details .nesw-pf__body { flex: 0 0 auto; }
  .nesw-pcg__details .nesw-pf__list { grid-template-columns: 1fr !important; column-gap: 0; }
  .nesw-pcg__details .nesw-pf__item { padding: 11px 0; }
  .nesw-pcg__details .nesw-pf__ic { background: #fff; }
  .nesw-pcg__details .nesw-pf__promise { background: #fff; margin-top: 16px; padding: 16px 18px 18px; }
  /* Tighter versions for laptop-sized tiles, chosen by nesw-product-features' fit check. */
  .nesw-pcg-wrap[data-pcg-mode="grid2"] .nesw-pcg__details.is-filled.pf-c1 { padding: 18px 20px; }
  .nesw-pcg__details.pf-c1 .nesw-band__eyebrow { margin-bottom: 4px; }
  .nesw-pcg__details.pf-c1 .nesw-band__title { font-size: clamp(24px, 1.9vw, 34px); margin-bottom: 8px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__item { padding: 7px 0; gap: 12px; grid-template-columns: 32px 1fr; }
  .nesw-pcg__details.pf-c1 .nesw-pf__ic { width: 32px; height: 32px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__ic svg { width: 17px; height: 17px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__title { font-size: 14px; margin: 0 0 1px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__text { font-size: 12.5px; line-height: 1.4; }
  .nesw-pcg__details.pf-c1 .nesw-pf__promise { margin-top: 12px; padding: 12px 14px 13px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__ptitle { font-size: 15px; margin: 4px 0 8px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__plines { gap: 8px 14px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__pline b { font-size: 13px; }
  .nesw-pcg__details.pf-c1 .nesw-pf__pline span span { font-size: 12px; }
  .nesw-pcg__details .nesw-pf__body, .nesw-pcg__details .nesw-pf__list, .nesw-pcg__details .nesw-pf__item > span:last-child { min-width: 0; max-width: 100%; }
  .nesw-pcg__details.pf-c2 .nesw-pf__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nesw-pcg__details.pf-c2 .nesw-pf__pline span span { display: none; }
  .nesw-pcg__details.pf-c2 .nesw-pf__pline { align-items: center; }
  /* pf-c3 (laptop tiles): the guarantee keeps its label and headline; its two lines live in the size guide. */
  .nesw-pcg__details.pf-c3 .nesw-pf__plines { display: none; }
  .nesw-pcg__details.pf-c3 .nesw-pf__ptitle { margin-bottom: 0; }
  .nesw-pcg__details.pf-c3 .nesw-pf__item { padding: 5px 0; }
  .nesw-pcg__details .nesw-pf__ptitle { margin-bottom: 10px; }
  .nesw-pcg__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* The grid, opt-in per product via the wrap attribute. */
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg {
    display: grid; overflow: visible; width: auto; gap: 8px;
    grid-template-columns: repeat(3, var(--pcg-col, 320px)); justify-content: center;
  }
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg__slide { flex: none; min-width: 0; }
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg[data-visible="1"] { grid-template-columns: var(--pcg-col, 450px); }
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg[data-visible="2"],
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg[data-visible="4"] { grid-template-columns: var(--pcg-col, 450px) var(--pcg-col, 450px); }
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg[data-pcg-layout="stack3"] { grid-template-columns: var(--pcg-col, 450px) var(--pcg-col, 450px); }
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg .nesw-pcg__slide.is-pcg-stacked { grid-column: 1 / -1; justify-self: center; width: var(--pcg-col, 450px); }
  .nesw-pcg-wrap[data-pcg-grid] .nesw-pcg__nav { display: none; }
}
@media (max-width: 768px) { .nesw-pcg__nav { display: none; } }

@media (max-width: 768px) {
  .nesw-pcg__video { width: 100%; height: 100%; }
  .nesw-pcg__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .nesw-pcg {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* V3 — snap to slides now that the next image peeks (Comfrt-style). */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 16px;
    gap: 5px;
  }
  .nesw-pcg::-webkit-scrollbar { display: none; }
  /* All slides share the main image's aspect ratio (set by JS via --pcg-ratio)
     with object-fit:cover, so an odd-sized image (e.g. a 1080x1440 among
     1529x2048) fills to the exact same height as the rest instead of rendering
     a few px short. */
  /* V3 — Slides are 86% wide so the NEXT image peeks in from the right edge:
     the peek is the "you can swipe" signal, and the shorter gallery (width
     drives height via the aspect ratio) pulls stars/title/price into the
     first fold (Jay 2026-07-19, Comfrt reference). */
  .nesw-pcg__slide { flex: 0 0 86%; min-width: 86%; aspect-ratio: var(--pcg-ratio, 3 / 4); overflow: hidden; scroll-snap-align: start; }
  .nesw-pcg__slide img { width: 100%; height: 100%; object-fit: cover; }
  /* In mobile "all" mode the JS never sets is-off, so every image shows. In
     mobile "variant" mode the JS marks non-matching slides is-off → hide them. */
  .nesw-pcg__slide.is-off { display: none !important; }
}

/* V3 — Slim breadcrumb above the title. Single line, quiet gray, truncates the
   product name if long. On mobile it rides in the former dead gap between the
   gallery and the title (title margin tightened below = fold-neutral). */
.nesw-crumbs {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #8a8a8a;
  margin: 2px 0 0;
}
.nesw-crumbs a { color: #6a6a6a; text-decoration: none; flex: none; }
.nesw-crumbs a:hover { text-decoration: underline; }
.nesw-crumbs__sep { color: #c4c4c0; flex: none; }
.nesw-crumbs__here { color: #9a9a95; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) {
  .nesw-crumbs { margin-top: 0; }
  .product-content-box .nesw-title-row { margin-top: 4px !important; }
}
/* Desktop: shift a few px of the crumb->title gap to above the crumbs (Jay
   2026-09-03: no air above, too much below). Mobile rides the gallery gap
   and stays untouched. */
@media (min-width: 769px) {
  .nesw-crumbs { margin-top: 6px; }
  .product-content-box .nesw-title-row { margin-top: 10px !important; }
  /* Breathing room between the header's gray rule and the gallery — same 8px
     as the gap between the gallery images (Jay 2026-09-03: images sat flush
     against the header line). */
  .nesw-pcg { margin-top: 8px; }
}

/* ===================================================================
   Tighten the vertical rhythm in the buy column (title → price → cotton
   → swatches → size → qty → ATC). It read a touch too airy.
   =================================================================== */
.product-content-box .product-title { margin-top: 10px !important; }
/* V3 — Price row rebalanced (Jay): less air above, more below, so the price
   sits with the title group and breathes before the cotton chip. */
.product-content-box .nesw-price-row { margin-top: 3px !important; margin-bottom: 12px !important; }

/* V3 — Spec bar (replaces the red cotton chip): hairline row, fabric left in
   ink, brand line right in quiet gray. Single line, truncates gracefully. */
.nesw-spec-bar {
  display: flex;
  /* Centered + even vertical margins (Jay 2026-09-03: was space-between with
     10px above / 2px below — read left-stacked and bottom-cramped). */
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-top: 1px solid #ececea;
  border-bottom: 1px solid #ececea;
  padding: 6px 0;
  margin: 6px 0 6px;
  font-family: 'JetBrains Mono', 'Inconsolata', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a6a6a;
}
/* 🔴 SOLO — one claim, not two (Jay 2026-09-19). The band's hairlines exist to
   hold a two-part row together; around a single short claim they read as a
   section divider for two words and cost 42px of a phone fold that is already
   tight. Rules and padding go, the claim stays, the rhythm below it is kept by
   the one remaining margin. */
.nesw-spec-bar--solo {
  border-top: 0;
  border-bottom: 0;
  padding: 0;
  margin: 0 0 12px;
}
/* Fabric badge, far right of the price row (Jay 2026-09-19). `margin-left:auto`
   on the LAST flex item takes all the slack, which both pushes it right and
   gives it the distance from the price Jay asked for. The pill itself is the
   shared snippet; only its colour changes here, the same way the collection
   rows re-colour it, so there is still ONE badge in the theme. */
.nesw-price-row__cotton { margin-left: auto; display: inline-flex; flex: none; }
.nesw-price-row__cotton .nesw-cotton-pill {
  border-color: rgba(27, 27, 27, 0.10);
  background: #f5f4f2;
  color: #55504c;
  border-radius: 3px;
}
.nesw-spec-bar__spec { flex: none; }
.nesw-spec-bar__spec b { color: #1b1b1b; font-weight: 700; }
.nesw-spec-bar__sep { flex: none; color: #c4c4c0; }
.nesw-spec-bar__brand { overflow: hidden; text-overflow: ellipsis; }

/* V3 — Free-shipping line under the buy button (House of Blanks inspo). */
.nesw-atc-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  /* 11px -> 12px (Jay 2026-09-10): these two lines carry the shipping cost and
     the delivery date, which is a lot of weight for the smallest type on the
     page. */
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #333333; /* was #6a6a6a; Jay 2026-09-25: "a little bit more dark text, more readable" */
}
.nesw-atc-note svg { width: 16px; height: 16px; flex: none; color: #1b1b1b; }
.nesw-sg__promise { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(27,27,27,0.14); border-radius: 8px; font-size: 13px; font-weight: 600; color: #1b1b1b; }
.nesw-sg__promise svg { width: 16px; height: 16px; flex: none; }
.nesw-atc-note--eta strong { color: #1b1b1b; font-weight: 600; }
/* Whichever note comes first keeps the 9px under the buy button; the one after
   it tucks in close, so the pair reads as one block rather than two stray lines. */
.nesw-atc-note + .nesw-atc-note { margin-top: 5px; }
/* And a little air under the pair before the bundle pairing block starts (Jay,
   2026-09-10). That block sets its own 16px top margin, which read as tight
   against the delivery line; 6px here takes it to 22. Scoped to `.add-to-cart`
   so the drawer's standalone copy of these notes is untouched. */
.add-to-cart .nesw-atc-note:last-child { margin-bottom: 6px; }
/* FAQ spacing lives on the item, not an inline margin on the next question, so
   a question hidden on a non-clothing product leaves no stray gap. */
.nesw-pdp-faq .nesw-faq-item + .nesw-faq-item { margin-top: 14px; }
/* The buy-form-less template (product.pack) gets the same pair of notes the buy
   form renders, centred under the pack builder exactly as they sit under the
   add-to-cart button everywhere else. */
/* The pack builder card carries 20px of its own bottom margin and the first note
   carries its own 9px, which stacked to 29px and still read as detached (Jay,
   2026-09-10). The card's margin belongs to the Ignis block, so it is not ours
   to change; the cluster pulls itself up instead, leaving about 12px, the same
   breathing room the notes get under the add-to-cart button. */
.nesw-atc-notes--standalone { margin-top: -8px; }
.nesw-atc-notes--standalone .nesw-atc-note:first-child { margin-top: 0; }
.product-content-box .add-to-cart-section fieldset { margin-bottom: 4px !important; }
.product-content-box .add-to-cart-section .w-commerce-commerceaddtocartoptionpillgroup { margin-bottom: 6px !important; }
.product-content-box .product-color-selected { margin-bottom: 3px !important; }
.product-content-box .quantity-selector { margin-top: 4px !important; margin-bottom: 8px !important; }
/* END_SECTION:product-section-1 */