/** 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:45) */
/* 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. */
  .product-box {
    max-width: 100% !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    margin: 0 auto !important;
    align-items: flex-start !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }
  .product-image-box {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
  .product-content-box {
    /* 560px (was 440): Comfrt runs a 570px buy column at the same viewport
       and ours read undersized next to the enlarged gallery (Jay 2026-08-24).
       🔴 sizeGallery()'s cartW MUST match this number. */
    flex: 0 0 560px !important;
    width: 560px !important;
    box-sizing: border-box !important;
    padding: 0 36px 0 28px !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). */
  .product-content-box .w-commerce-commerceaddtocartoptionpill:not(.product-color-swatch) {
    min-width: 56px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-content-box .product-color-swatch { width: 38px !important; height: 38px !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. */
  .nesw-pcg {
    display: grid;
    grid-template-columns: repeat(3, var(--pcg-col, 320px));   /* default: 3-across (3, 5, 6, 7…) */
    justify-content: center;
    gap: 8px;
    margin: 0 0 30px;
  }
  .nesw-pcg[data-visible="1"] { grid-template-columns: var(--pcg-col, 450px); }
  .nesw-pcg[data-visible="2"],
  .nesw-pcg[data-visible="4"] { grid-template-columns: var(--pcg-col, 450px) var(--pcg-col, 450px); }
  /* 3 images too wide for one row at a good size → 2 on top + 1 centered below. */
  .nesw-pcg[data-pcg-layout="stack3"] { grid-template-columns: var(--pcg-col, 450px) var(--pcg-col, 450px); }
  /* Centered orphan: the stack3 third image AND the last image of any
     multi-row grid whose final row holds one image (7, 10, ...). */
  .nesw-pcg .nesw-pcg__slide.is-pcg-stacked {
    grid-column: 1 / -1; justify-self: center; width: var(--pcg-col, 450px);
  }
  .nesw-pcg__slide { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; cursor: zoom-in; }
  .nesw-pcg__slide img { width: 100%; height: 100%; object-fit: cover; }
  .nesw-pcg__slide.is-off { display: none !important; }
}

@media (max-width: 768px) {
  .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; }
}

/* ===================================================================
   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;
  justify-content: space-between;
  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: 10px 0 2px;
  font-family: 'JetBrains Mono', 'Inconsolata', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a6a6a;
}
.nesw-spec-bar__spec { flex: none; }
.nesw-spec-bar__spec b { color: #1b1b1b; font-weight: 700; }
.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;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #6a6a6a;
}
.nesw-atc-note svg { width: 16px; height: 16px; flex: none; color: #1b1b1b; }
.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 */