/* ==========================================================
   GLOWUP ONLINE — PRODUCT DETAIL PAGE CUSTOM CSS

   IMPORTANT: all live-site rules MUST live inside the body
   guard wrapper below (specificity 0,3,1 + selector). Rules
   added outside it — or in another file with a weaker
   selector — will silently lose the cascade to rules in here.
   Companion JS: product.js (relocation, gallery counter,
   --glowup-header-h, grid normalization, .glowup-pinned).
========================================================== */

body:not(.sqs-edit-mode-active):not(.glowup-product-active-editing),
body.glowup-product-previewing:not(.glowup-product-active-editing) {

  /* ==========================================================
     1. PRODUCT LAYOUT — Remove gaps, zero out padding
  ========================================================== */
  .product-detail>[data-product-detail-layout=simple] {
    padding: 0 !important;
    margin-top: -1px;
  }

  .product-detail>[data-product-detail-layout=simple] .product-content-wrapper {
    gap: 0 !important;
  }


  /* ==========================================================
     2. PRODUCT META — Left side (scrollable details)
  ========================================================== */
  .product-meta {
    /* Single source of truth: the action-stack scroll cover derives its
       width from this var — change padding here, cover follows */
    --meta-pad-x: 3vw;
    padding: 4vw var(--meta-pad-x);
    /* Breathing room under the action pill at its final rest position */
    padding-bottom: 40px !important;
  }


  /* ==========================================================
     3. PRODUCT GALLERY — Right side (sticky dark panel)
     Generous breathing room around the mockup, subtle radial
     gradient, and the native carousel controls restyled into a
     bottom-center pill: [ ‹  1/4  › ]
  ========================================================== */
  .product-gallery {
    --gallery-pad-x: clamp(90px, 10vw, 160px);
    --gallery-pad-top: clamp(60px, 7vw, 110px);
    --gallery-pad-bottom: 150px;
    position: sticky !important;
    /* --glowup-header-h published by product.js (header is 52px on
       tablet, 66px on desktop — hardcoding left a dead strip) */
    top: var(--glowup-header-h, 66px) !important;
    align-self: flex-start !important;
    height: calc(100vh - var(--glowup-header-h, 66px) - 1px) !important;
    background: radial-gradient(120% 90% at 50% 38%, #2e2e2e 0%, #1a1a1a 55%, #101010 100%) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--gallery-pad-top) var(--gallery-pad-x) var(--gallery-pad-bottom) !important;
  }

  /* Hide the native thumbnail strip */
  .product-gallery-scroll {
    display: none !important;
  }

  .product-gallery-slides {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Clip parked/transitioning slides at the sides but let the pill
       pager (a child of this box) hang below into the padding zone.
       Budget derived from the padding var: the pill's lowest edge is
       always (--gallery-pad-bottom - 36px) below this box. */
    overflow: visible !important;
    clip-path: inset(0 0 calc(-1 * var(--gallery-pad-bottom, 160px)) 0);
  }

  .product-gallery-slides-item {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-gallery-slides-item-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* --- Pill pager: prev / counter / next, bottom center --- */
  .product-gallery-carousel-controls {
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    bottom: calc(-1 * var(--gallery-pad-bottom) + 36px) !important;
    transform: translateX(-50%);
    width: fit-content !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 4px !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    z-index: 5;
  }

  .product-gallery-carousel-control {
    position: static !important;
    width: 52px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 100px;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transition: background-color 0.2s ease;
  }

  .product-gallery-carousel-control:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* Hide the native icon, draw our chevron via mask (matches the
     summary-block pager chevrons) */
  .product-gallery-carousel-control * {
    display: none !important;
  }

  .product-gallery-carousel-control::before {
    content: none !important;
  }

  .product-gallery-carousel-control::after {
    content: "" !important;
    display: block !important;
    width: 9px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  /* Squarespace rotates its native ::after arrow 45deg — neutralize */
  .product-gallery-next::after {
    transform: none !important;
  }

  .product-gallery-prev::after {
    transform: rotate(180deg) !important;
  }

  /* Native "1 / 4" counter — hidden by Squarespace on desktop.
     product.js moves it between the prev/next buttons so flexbox
     centers it inside the pill. The absolute rules below are the
     no-JS fallback (element still in its native spot). */
  .product-gallery-current-slide-indicator {
    display: block !important;
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    bottom: calc(-1 * var(--gallery-pad-bottom) + 36px + 20px) !important;
    transform: translateX(-50%);
    width: auto !important;
    color: #ffffff !important;
    font-family: var(--body-font-font-family);
    font-size: 0.85rem !important;
    letter-spacing: 0.05em;
    line-height: 1 !important;
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
  }

  /* In-pill counter (after product.js moves it) — static flex child,
     no offset math to drift out of alignment */
  .product-gallery-carousel-controls .product-gallery-current-slide-indicator {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    min-width: 48px;
    text-align: center;
  }

  /* --- Mobile: gallery becomes a static full-width panel above the
     meta (sticky 100vh overlapped the stacked column layout) --- */
  @media screen and (max-width: 767px) {
    .product-gallery {
      position: relative !important;
      top: auto !important;
      height: min(74vh, 600px) !important;
      --gallery-pad-x: 28px;
      --gallery-pad-top: 40px;
      --gallery-pad-bottom: 118px;
    }

    .product-gallery-carousel-controls {
      bottom: calc(-1 * var(--gallery-pad-bottom) + 28px) !important;
      gap: 4px;
    }

    .product-gallery-carousel-control {
      width: 46px !important;
      height: 42px !important;
    }

    .product-gallery-current-slide-indicator {
      bottom: calc(-1 * var(--gallery-pad-bottom) + 28px + 18px) !important;
      font-size: 0.8rem !important;
    }

    .product-meta {
      --meta-pad-x: 24px;
      padding: 40px var(--meta-pad-x) !important;
      padding-bottom: 24px !important;
    }

    /* Static pill on mobile (matches the old desktop-only FE pin) */
    .product-add-to-cart.glowup-action-pill {
      position: static;
    }

    .product-add-to-cart.glowup-action-pill::before {
      content: none !important;
    }

    /* Mobile FE grid uses fixed 24px rows sized for the editor's
       mobile layout, leaving a large dead zone between the end of
       the description content and the action stack. Auto rows size
       to content; empty rows collapse to zero. */
    .relocated-description .fluid-engine {
      grid-template-rows: none !important;
      grid-auto-rows: auto !important;
    }
  }


  /* ==========================================================
     4. HIDE & RELOCATE #my-description
  ========================================================== */
  #my-description {
    display: none !important;
  }

  .relocated-description {
    display: block !important;
    margin-top: 24px;
    width: 100%;
  }

  .relocated-description .content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }

  .relocated-description .content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  @media screen and (min-width: 768px) {
    .relocated-description .content {
      margin-inline: -11px !important;
      width: calc(100% + 22px) !important;
    }
  }

  /* Outer gutter columns are collapsed by product.js (inline style,
     derived from the native track count) — no hardcoded 8/24 here */
  .relocated-description .fluid-engine {
    --grid-gutter: 0px !important;
  }



  .relocated-description p {
    font-size: 0.9rem !important;
  }

  .relocated-description {
    .sqs-block.html-block:has(p.sqsrte-small strong) {
      border-bottom: 1px dotted var(--black) !important;
    }
  }


  /* ==========================================================
     4b. CUSTOM BULLET POINTS — Page icon (2nd list)
  ========================================================== */
  /* .glowup-product-list-child--* classes are injected by product.js
     (index over ul-bearing children — survives editor reordering).
     nth-child fallbacks removed: .relocated-description only exists
     when the same JS ran, so they could never fire independently. */
  .relocated-description .glowup-product-list-child--pages ul[data-rte-list] li > *:first-child::before {
    content: "" !important;
    display: inline-block !important;
    height: 14px !important;
    width: 40px !important;
    margin-left: -40px !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%205.25C12.2505%205.06515%2012.2143%204.88204%2012.1436%204.71123C12.0729%204.54043%2011.9691%204.38531%2011.8382%204.25484L9.74517%202.16184C9.61469%202.03089%209.45958%201.92708%209.28877%201.85639C9.11797%201.78571%208.93485%201.74955%208.75%201.75H2.91667C2.60725%201.75%202.3105%201.87292%202.09171%202.09171C1.87292%202.31051%201.75%202.60725%201.75%202.91667V11.0833C1.75%2011.3928%201.87292%2011.6895%202.09171%2011.9083C2.3105%2012.1271%202.60725%2012.25%202.91667%2012.25H11.0833C11.3928%2012.25%2011.6895%2012.1271%2011.9083%2011.9083C12.1271%2011.6895%2012.25%2011.3928%2012.25%2011.0833V5.25Z%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.75%201.75V4.66667C8.75%204.82138%208.81146%204.96975%208.92085%205.07915C9.03025%205.18854%209.17862%205.25%209.33333%205.25H12.25%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%205.25C12.2505%205.06515%2012.2143%204.88204%2012.1436%204.71123C12.0729%204.54043%2011.9691%204.38531%2011.8382%204.25484L9.74517%202.16184C9.61469%202.03089%209.45958%201.92708%209.28877%201.85639C9.11797%201.78571%208.93485%201.74955%208.75%201.75H2.91667C2.60725%201.75%202.3105%201.87292%202.09171%202.09171C1.87292%202.31051%201.75%202.60725%201.75%202.91667V11.0833C1.75%2011.3928%201.87292%2011.6895%202.09171%2011.9083C2.3105%2012.1271%202.60725%2012.25%202.91667%2012.25H11.0833C11.3928%2012.25%2011.6895%2012.1271%2011.9083%2011.9083C12.1271%2011.6895%2012.25%2011.3928%2012.25%2011.0833V5.25Z%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.75%201.75V4.66667C8.75%204.82138%208.81146%204.96975%208.92085%205.07915C9.03025%205.18854%209.17862%205.25%209.33333%205.25H12.25%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: right 10px center !important;
    mask-position: right 10px center !important;
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
    vertical-align: middle !important;
    margin-top: -2px !important;
  }


  /* ==========================================================
     4c. CHECKMARK BULLET POINTS (3rd list)
  ========================================================== */
  .relocated-description .glowup-product-list-child--checks ul[data-rte-list] li > *:first-child::before {
    content: "" !important;
    display: inline-block !important;
    height: 14px !important;
    width: 40px !important;
    margin-left: -40px !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.99984%2012.8337C10.2215%2012.8337%2012.8332%2010.222%2012.8332%207.00033C12.8332%203.77866%2010.2215%201.16699%206.99984%201.16699C3.77818%201.16699%201.1665%203.77866%201.1665%207.00033C1.1665%2010.222%203.77818%2012.8337%206.99984%2012.8337Z%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.25%206.99967L6.41667%208.16634L8.75%205.83301%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.99984%2012.8337C10.2215%2012.8337%2012.8332%2010.222%2012.8332%207.00033C12.8332%203.77866%2010.2215%201.16699%206.99984%201.16699C3.77818%201.16699%201.1665%203.77866%201.1665%207.00033C1.1665%2010.222%203.77818%2012.8337%206.99984%2012.8337Z%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.25%206.99967L6.41667%208.16634L8.75%205.83301%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: right 10px center !important;
    mask-position: right 10px center !important;
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
    vertical-align: middle !important;
    margin-top: -2px !important;
  }


  /* ==========================================================
     5. ACTION PILL (native Add to Cart + View Demo)
     The NATIVE .product-add-to-cart element ITSELF is the pill:
     product.js adds .glowup-action-pill to it and appends the
     View Demo anchor inside. The cart element is never reparented
     — Squarespace's commerce controller binds its click handler
     AFTER our DOMContentLoaded code runs, so any reparenting
     before that point silently kills add-to-cart.
     Sticky-bottom via CSS replaces the old FE pin.
  ========================================================== */

  /* Hidden until product.js upgrades it to the pill (rendered, not
     display:none, so the commerce controller can always bind) */
  .product-meta > .product-add-to-cart:not(.glowup-action-pill) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PAINT ORDER (why the capsule lives on ::after, and why every
     layer is POSITIVE):
     1) inside a stacking context, negative z-index children paint OVER
        the root's own background/border — so a full-box cover on
        ::before would erase a background painted on the root.
     2) negative-z pseudos on a sticky element ALSO lose to the
        transformed FE blocks Squarespace generates (fe-blocks carry
        transforms + z-index:10), letting description text paint over
        the cover — a compositing quirk that ignores the pill's higher
        context z-index. Positive layers are immune.
     Layering: root (transparent, layout only) → ::before cover (z:0,
     masks text scrolling under the pill incl. around the rounded
     corners) → ::after capsule visual (z:1, border + cream bg) →
     button wrappers (z:2). */
  .product-add-to-cart.glowup-action-pill {
    display: flex !important;
    /* Squarespace styles .product-add-to-cart as a COLUMN flex —
       force row (must be !important) */
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    border: 1.5px solid transparent; /* layout space; visual on ::after */
    border-radius: 100px;
    padding: 3px !important;
    background-color: transparent;
    box-sizing: border-box;
    width: 100%;
    margin: 24px 0 0 0 !important;
    position: sticky;
    bottom: 24px;
    z-index: 20;
    isolation: isolate;
  }

  /* Scroll cover: spans the pill's full box (masking bleed-through at
     the rounded corners) plus the sticky gap below, and the meta's
     horizontal padding via --meta-pad-x */
  .product-add-to-cart.glowup-action-pill::before {
    content: "" !important;
    position: absolute !important;
    top: -4px !important;
    left: calc(-1 * var(--meta-pad-x, 24px)) !important;
    right: calc(-1 * var(--meta-pad-x, 24px)) !important;
    bottom: -24px !important;
    background-color: var(--backgroundOverlayColor, #f5f4ef) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Capsule visual — painted above the cover, below the buttons */
  .product-add-to-cart.glowup-action-pill::after {
    content: "" !important;
    position: absolute !important;
    inset: -1.5px !important;
    border: 1.5px solid #000000 !important;
    border-radius: 100px !important;
    background-color: #ebe7e4 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* The View Demo fe-block is emptied when its button container moves
     into the pill — remove it from the grid so it leaves no dead space
     (trailing rows are trimmed by product.js syncRelocatedGrids) */
  .relocated-description .fe-block:has(.sqs-block-button):not(:has(.sqs-block-button-container)) {
    display: none !important;
  }

  /* Width split: cart ~60% / demo ~40%. z-index 2 lifts the buttons
     above the cover (0) and capsule (1) — see PAINT ORDER above. */
  .glowup-action-pill > .product-add-to-cart-layout-wrapper {
    flex: 1.6;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .glowup-action-pill .sqs-add-to-cart-button-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .glowup-action-pill > .sqs-block-button-container {
    flex: 1;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Left button: native Add to Cart (solid black) */
  .glowup-action-pill .sqs-add-to-cart-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 100px !important;
    border: none !important;
    width: 100% !important;
    height: 53px !important;
    min-height: 53px !important;
    max-height: 53px !important;
    block-size: 53px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    padding: 0 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
  }

  .glowup-action-pill .sqs-add-to-cart-button:hover {
    background-color: #333333 !important;
  }

  .glowup-action-pill .sqs-add-to-cart-button .sqs-add-to-cart-button-inner {
    color: #ffffff !important;
    font-size: 1.2rem !important; /* matches the View Demo button */
    white-space: nowrap !important;
  }

  /* Right button: View Demo (outline) */
  .glowup-action-pill .sqs-block-button-element {
    background-color: transparent !important;
    color: #000000 !important;
    border-radius: 100px !important;
    border: 1px solid #000000 !important;
    width: 100% !important;
    height: 53px !important;
    min-height: 53px !important;
    max-height: 53px !important;
    block-size: 53px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    padding: 0 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
  }

  .glowup-action-pill .sqs-block-button-element:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  @media screen and (max-width: 767px) {
    .product-add-to-cart.glowup-action-pill {
      /* relative, NOT static: the ::after capsule is position:absolute
         and needs the pill as its containing block — on a static pill
         it anchors to .content-wrapper and blankets the whole column */
      position: relative !important;
      align-items: stretch !important;
    }

    .product-add-to-cart.glowup-action-pill::before {
      content: none !important;
    }

    /* Cart label ("Purchase for $375") is longer than "View Demo" —
       give it the larger share so it never wraps on small phones */
    .glowup-action-pill > .product-add-to-cart-layout-wrapper {
      flex: 1.3 1 0 !important;
      min-width: 0 !important;
    }

    .glowup-action-pill > .sqs-block-button-container {
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }

    .glowup-action-pill .sqs-add-to-cart-button,
    .glowup-action-pill .sqs-block-button-element {
      padding: 0 clamp(12px, 3.5vw, 18px) !important;
      font-size: clamp(1rem, 4vw, 1.2rem) !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }

    .glowup-action-pill .sqs-add-to-cart-button .sqs-add-to-cart-button-inner {
      font-size: clamp(1rem, 4vw, 1.2rem) !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }
  }


  /* ==========================================================
     6. SHOP GALLERY CAROUSEL — Full Bleed
  ========================================================== */
  #shop-gallery .user-items-list-carousel__gutter {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #shop-gallery .user-items-list-carousel__slides {
    grid-auto-columns: 50% !important;
    grid-template-columns: repeat(2, 50%) !important;
    border-bottom: 1px solid var(--black);
  }

  #shop-gallery .user-items-list-carousel__slide {
    width: 100% !important;
  }

  @media screen and (max-width: 767px) {
    #shop-gallery .user-items-list-carousel__slides {
      grid-auto-columns: 100% !important;
      grid-template-columns: repeat(1, 100%) !important;
    }
    #shop-gallery .user-items-list-carousel__slide {
      width: 100% !important;
    }
  }

  #shop-gallery.page-section,
  #shop-gallery .content-wrapper,
  #shop-gallery .user-items-list-item-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #shop-gallery .list-item-content {
    display: none !important;
  }

  #shop-gallery .user-items-list-carousel__space-below {
    display: none !important;
  }

  #shop-gallery .user-items-list-carousel__media-container {
    margin-bottom: 0 !important;
  }

  /* --- Prev/next arrows (mobile + desktop): replace Squarespace's
     native icon (a chevron head fused to a long horizontal shaft —
     not a clean chevron) with the same chevron mask used for the
     product-gallery pager, so both carousels share one arrow style.
     No counter — this carousel's native "N of M" text is a
     visually-hidden aria-live string, not rendered UI. Mobile and
     desktop markup use different class prefixes but share the
     "arrow-icon-background" / "arrow-icon-foreground" classes on the
     native background/paths, which is what lets one rule hide both. */
  #shop-gallery .mobile-arrows,
  #shop-gallery .desktop-arrows {
    margin-top: 0 !important;
  }

  #shop-gallery .mobile-arrow-button,
  #shop-gallery .user-items-list-carousel__arrow-button {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #shop-gallery .user-items-list-carousel__arrow-icon-background,
  #shop-gallery .mobile-arrow-icon,
  #shop-gallery .user-items-list-carousel__arrow-icon {
    display: none !important;
  }

  #shop-gallery .mobile-arrow-button::after,
  #shop-gallery .user-items-list-carousel__arrow-button::after {
    content: "" !important;
    display: block !important;
    width: 9px;
    height: 15px;
    background-color: var(--black);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity 0.2s ease;
  }

  /* Base mask chevron points right (next); rotate for prev/left */
  #shop-gallery .mobile-arrow-button--left::after,
  #shop-gallery .user-items-list-carousel__arrow-button--left::after {
    transform: rotate(180deg);
  }

  #shop-gallery .mobile-arrow-button:hover::after,
  #shop-gallery .user-items-list-carousel__arrow-button:hover::after {
    opacity: 0.5;
  }



  /* ==========================================================
     7. PRODUCT DETAIL MISC
  ========================================================== */
  /* Hide the native description everywhere — desktop AND the mobile
     variant (.hidden-up-md). It stays in the DOM for crawlers, and
     the description also ships in the Product JSON-LD + meta tags. */
  #main-product-price,
  .product-description {
    display: none !important;
  }



}

/* ==========================================================
   7b. PRODUCT DETAIL MISC — Product page only
    (Outside body:not — safe, scoped to code block marker ID)
========================================================== */

body.view-item.collection-type-products .product-detail-section {
    border-bottom: 1px solid var(--black);
  }

/* ==========================================================
   8. PRODUCT ITEM BENEFITS — Homepage product overview bar
   (Outside body:not — safe, scoped to code block marker ID)
========================================================== */

#product-item-benefits {
  .user-items-list-item-container {
    grid-gap: 0 !important;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    /* Always 4-up on desktop/tablet — overrides Squarespace's responsive
       column drop (confirmed 3-col at ~900px, orphaning item 4 onto its
       own row). 4 items = one clean row, matching #platforms-supported. */
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .list-item {
    border-right: 1px solid var(--black);
    padding: 12% 14% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    &:last-child {
      border-right: 0;
    }
  }

  .user-items-list-simple[data-layout-width="full"] {
    padding-left: 0vw;
    padding-right: 0vw;
  }

  /* Mobile: 2x2 grid (4 items, no orphans) */
  @media screen and (max-width: 767px) {
    .user-items-list-item-container {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .list-item {
      /* row ends: no right border on items 2 and 4 */
      &:nth-child(2n) {
        border-right: 0;
      }

      /* divider between the two rows */
      &:nth-child(-n+2) {
        border-bottom: 1px solid var(--black);
      }
    }
  }
}

/* ==========================================================
   9. PRODUCT DETAIL — Setup Packages (Product page only)
========================================================== */

#setup-packages {

  /* ==========================================================
     1. CUSTOM BULLET POINTS (Checkmark Circle SVG)
     Overrides Squarespace's pseudo-element on list items
  ========================================================== */
  ul[data-rte-list] li > *:first-child::before {
    content: "" !important; /* Clear the native bullet character */
    display: inline-block !important;
    height: 14px !important; /* Force height so the browser doesn't collapse it to 0px */
    width: 40px !important;  /* Keep native Squarespace box width */
    margin-left: -40px !important; /* Offset it back into the gutter */
    
    /* Inherit the text color dynamically using currentColor */
    background-color: currentColor !important;
    
    /* Use CSS Masking to clip the color to the SVG checkmark shapes */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.99984%2012.8337C10.2215%2012.8337%2012.8332%2010.222%2012.8332%207.00033C12.8332%203.77866%2010.2215%201.16699%206.99984%201.16699C3.77818%201.16699%201.1665%203.77866%201.1665%207.00033C1.1665%2010.222%203.77818%2012.8337%206.99984%2012.8337Z%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.25%206.99967L6.41667%208.16634L8.75%205.83301%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.99984%2012.8337C10.2215%2012.8337%2012.8332%2010.222%2012.8332%207.00033C12.8332%203.77866%2010.2215%201.16699%206.99984%201.16699C3.77818%201.16699%201.1665%203.77866%201.1665%207.00033C1.1665%2010.222%203.77818%2012.8337%206.99984%2012.8337Z%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.25%206.99967L6.41667%208.16634L8.75%205.83301%22%20stroke%3D%22black%22%20stroke-width%3D%221.16667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
    
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    
    /* Position the checkmark close to the text (10px spacing) */
    -webkit-mask-position: right 10px center !important;
    mask-position: right 10px center !important;
    
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
    
    /* Vertically align the checkmark icon nicely with the text */
    vertical-align: middle !important;
    margin-top: -2px !important;
  }

  /* ==========================================================
     2. INVERTED BUTTON — Package card with a dark background
     The "Done-for-you" package has its stack background enabled
     (black), but its Learn More button keeps the site's default
     black-on-transparent outline style — invisible on black.
     Targeted via data-background-enabled-system_desktop="true"
     (the actual marker Squarespace sets on the stack, confirmed
     live), not by position, so it still works if the packages
     are reordered or a plan is added/removed in the editor.
  ========================================================== */
  .sqs-stack-container[data-background-enabled-system_desktop="true"] .sqs-block-button-element {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .sqs-stack-container[data-background-enabled-system_desktop="true"] .sqs-block-button-element:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }

    h3:first-of-type::after {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0;
    vertical-align: middle;
    transform: translateY(-60%);
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='58' height='58' viewBox='0 0 58 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.138 28.7445L0 18.9921L0.507258 17.7383L24.7953 27.5513L6.29761 9.05441L7.25379 8.09823L25.4692 26.3141L15.8198 2.43112L17.0743 1.92387L26.9854 26.4546V0H28.3381V25.586L37.9216 1.8657L39.1762 2.37296L29.3767 26.6259L47.8965 8.10583L48.8532 9.06252L30.3759 27.5401L54.6366 17.7383L55.1438 18.9921L31.0049 28.7445H57.0714V30.0972H31.0963L55.2101 39.84L54.7029 41.0938L30.4492 31.2945L48.9722 49.8174L48.016 50.7736L29.2137 31.9712L39.1757 56.6284L37.9212 57.1357L28.3378 33.4138L24.138 28.7445Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='58' height='58' viewBox='0 0 58 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.138 28.7445L0 18.9921L0.507258 17.7383L24.7953 27.5513L6.29761 9.05441L7.25379 8.09823L25.4692 26.3141L15.8198 2.43112L17.0743 1.92387L26.9854 26.4546V0H28.3381V25.586L37.9216 1.8657L39.1762 2.37296L29.3767 26.6259L47.8965 8.10583L48.8532 9.06252L30.3759 27.5401L54.6366 17.7383L55.1438 18.9921L31.0049 28.7445H57.0714V30.0972H31.0963L55.2101 39.84L54.7029 41.0938L30.4492 31.2945L48.9722 49.8174L48.016 50.7736L29.2137 31.9712L39.1757 56.6284L37.9212 57.1357L28.3378 33.4138L24.138 28.7445Z' fill='%23000000'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }

}