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

/* START_SECTION:product-section-1 (INDEX:104) */
/* 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; }
  .product-content-box .w-commerce-commerceaddtocartoptionpill:not(.product-color-swatch) {
    min-width: 60px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-content-box .product-color-swatch { width: 36px !important; height: 36px !important; }
  .product-content-box .quantity-btn { width: 46px !important; height: 46px !important; font-size: 22px !important; }
  .product-content-box .quantity-input { height: 46px !important; font-size: 16px !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; }
@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;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 16px;
  }
  .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. */
  .nesw-pcg__slide { flex: 0 0 100%; min-width: 100%; aspect-ratio: var(--pcg-ratio, 3 / 4); overflow: hidden; }
  .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; }
}

/* ===================================================================
   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; }
.product-content-box .nesw-price-row { margin-top: 7px !important; }
.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 */