/** 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:57) */
footer {
    background-color: {{ settings.footer_background_color }};
  }
/* END_SECTION:footer */

/* START_SECTION:product-section-1 (INDEX:105) */
/* 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) {
  /* CENTERED product block (all variants, every image count): the image grid sits
     on the left and the cart on the right, and the WHOLE [images + cart] block is
     centered on the page with even whitespace on both sides. The container shrinks
     to its content (images + cart) and `margin:auto` centers it. */
  .product-box {
    max-width: 100% !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    margin: 0 auto !important;
    align-items: flex-start !important;
  }
  .product-image-box {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
  .product-content-box {
    flex: 0 0 440px !important;
    width: 440px !important;
    box-sizing: border-box !important;
    padding: 0 36px 0 28px !important;
  }

  .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; }
  /* Compact size pills (2026-07-19: the 48px pills read oversized next to
     the slimmed-down buy area — reference stores run ~36-38px). */
  .product-content-box .w-commerce-commerceaddtocartoptionpill:not(.product-color-swatch) {
    min-width: 52px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-content-box .product-color-swatch { width: 34px !important; height: 34px !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%; }
.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 so the pictures are as TALL
     as the buy column (down to the closed Shipping & Returns accordion) on 1/2/3-
     image setups, capped to fit the viewport width. 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); }
  .nesw-pcg[data-pcg-layout="stack3"] .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 */