/** Shopify CDN: Minification failed

Line 946:16 Expected identifier but found whitespace
Line 946:18 Unexpected "{"
Line 946:27 Expected ":"
Line 946:53 Expected ":"
Line 947:19 Expected identifier but found whitespace
Line 947:21 Unexpected "{"
Line 947:30 Expected ":"
Line 947:59 Expected ":"

**/
/* START_SECTION:main-product-editorial (INDEX:45) */
.lv-product {
      --lv-header-h: 80px;
      --lv-ink: #141414;
      --lv-line: rgba(20, 20, 20, 0.12);
      background: #fff;
      color: var(--lv-ink);
      /* Defensive: forces this section visible no matter what — some
         WebKit builds have been seen leaving custom-element content
         unpainted (DOM/text present, nothing rendered) with no CSS rule
         anywhere responsible for it. This closes that off outright
         rather than relying on nothing else ever hiding it by accident. */
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* Mobile only: this section is full-bleed (no .page-width wrapper),
       so it loses Dawn's usual page-width overflow containment. Dawn's
       own media slider intentionally bleeds its slides slightly past its
       own container for the swipe "peek" effect; normally the
       surrounding .page-width padding absorbs that. Without it here, the
       bleed was reaching the document edge and forcing mobile browsers
       to widen the whole page's layout viewport (visible as being able
       to pinch zoom out / the page rendering "shrunk"). Clip it at the
       section boundary instead.
       Scoped to mobile only (not a plain .lv-product rule) because
       overflow-x: hidden on an element with no explicit overflow-y
       computes overflow-y to auto per spec — that makes this element the
       nearest "scrolling ancestor" for any position: sticky descendant
       (the info column), so it sticks relative to this box instead of
       the viewport. Since this box never actually scrolls internally
       (its height always matches its content exactly), sticky then has
       no real scroll range to work with and the info column just moves
       with the page instead of staying pinned. Desktop no longer has a
       horizontally-bleeding slider (photos stack vertically — see the
       min-width: 990px rules below), so it doesn't need this at all. */
    @media screen and (max-width: 989px) {
      .lv-product {
        overflow-x: hidden;
      }
    }

    .lv-product * { box-sizing: border-box; }

    .lv-product__layout {
      display: grid;
      grid-template-columns: 1fr;
    }

    @media screen and (min-width: 990px) {
      .lv-product__layout {
        grid-template-columns: 50vw 1fr;
        align-items: stretch;
      }
    }

    /* Direct grid children default to min-width: auto, which lets their
       content (the media slider, the info column) force them wider than
       the 1fr track instead of shrinking to fit it. min-width: 0 is the
       standard fix so they actually respect the grid column. */
    .lv-product__media-pin,
    .lv-product__info-wrapper {
      min-width: 0;
      width: 100%;
    }

    .lv-product__media-pin {
      position: relative;
    }

    .lv-product__media {
      /* Empirically this box was rendering ~15px wider than its own
         375px-wide parent despite width:auto and zero margin/padding/
         border — a mismatch that showed up as a small extra gap on the
         image's left edge (the excess simply got clipped off the right
         by overflow:hidden below, instead of being distributed evenly).
         Forcing width:100% makes it match its parent exactly regardless
         of whatever was driving the auto-width miscalculation. */
      width: 100%;
      min-width: 0;
      position: relative;
      background: #fff;
      overflow: hidden;
    }

    /* Zoom (magnifying glass) icon — removed per spec; the image should
       just fill the frame with no extra controls over it. Only the icon
       itself is hidden, not its wrapping <modal-opener>, which is also
       the actual image's own parent — hiding that wrapper hid the image
       too. */
    .lv-product__media .product__media-icon {
      display: none !important;
    }

    .lv-product__media .media {
      padding-bottom: 0 !important;
    }

    @media screen and (max-width: 989px) {
      .lv-product__media media-gallery,
      .lv-product__media slider-component {
        height: 100% !important;
      }

      .lv-product__media .product__media-item {
        height: auto !important;
        aspect-ratio: 4 / 5;
      }

      .lv-product__media .product__media-item .product-media-container,
      .lv-product__media .product__media-item modal-opener,
      .lv-product__media .product__media-item .media {
        height: 100% !important;
      }

      /* Horizontal swipe gallery — one image at a time, scroll/swipe right
         for the next. Scroll-snap (not JS-driven paging) so native touch
         momentum works. The tracker below reflects whichever image the
         snap has settled on rather than driving the scroll itself.
         Mobile only — desktop replaces this with a plain scrolling stack
         below, matching the Louis Vuitton PDP reference the client asked
         to match: no per-image pinning/snapping on desktop, just a sticky
         info column beside a normally-flowing column of photos. */
      .lv-product__media .product__media-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        height: 100% !important;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Dawn's .slider--mobile sets scroll-padding-left: 1.5rem (so a
           snapped slide stops 15px in from the edge, leaving a sliver of
           the previous photo showing) and the grid adds a gap between
           slides. Every slide must land flush at the very edge. */
        scroll-padding: 0 !important;
        gap: 0 !important;
        column-gap: 0 !important;
      }

      .lv-product__media .product__media-list::-webkit-scrollbar { display: none; }

      .lv-product__media .product__media-item {
        /* Dawn's own .grid--peek class (stock markup, part of the gallery
           snippet) gives the active slide a margin-left to hint at the
           previous slide peeking in from the edge — not relevant here
           since we show one full-width image at a time, and it was the
           actual source of the image sitting ~15px off-center instead of
           flush against the container's left edge. */
        margin-left: 0 !important;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .lv-product__media .product__media-item img,
      .lv-product__media .product__media-item video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center;
        position: absolute;
        inset: 0;
      }
    }

    /* Dawn's own .slider-mobile-gutter class (stock markup on the
       <slider-component> wrapper, part of the gallery snippet) pads that
       wrapper on each side to deliberately let the neighbouring slide
       peek in at the edges — the opposite of what's wanted on mobile,
       where each photo should fill the screen edge to edge with zero
       visible sliver of the next/previous one. */
    .lv-product__media slider-component.slider-mobile-gutter {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Desktop: a plain vertically-stacked column of photos at their own
       natural (width-constrained) height — no pinning, no snapping, no
       JS-driven scroll math. Matches how louisvuitton.com's product page
       actually works: the only thing that's sticky is the info column
       (see .lv-product__info-wrapper below); the photos just scroll by
       underneath it like ordinary page content, and the sticky info
       column releases naturally once this stack of photos ends. */
    @media screen and (min-width: 990px) {
      .lv-product__media media-gallery,
      .lv-product__media slider-component {
        height: auto !important;
      }

      .lv-product__media .product__media-list {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        margin: 0;
        padding: 0;
        overflow: visible !important;
      }

      .lv-product__media .product__media-item {
        height: auto !important;
        margin-left: 0 !important;
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
      }

      .lv-product__media .product__media-item .product-media-container,
      .lv-product__media .product__media-item modal-opener,
      .lv-product__media .product__media-item .media {
        height: auto !important;
      }

      .lv-product__media .product__media-item img,
      .lv-product__media .product__media-item video {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: initial !important;
        display: block;
      }
    }

    /* A product video (e.g. the Caviar coming-soon clip) plays by itself,
       muted and looping, framed 4:5 like the photos around it — no poster,
       no play button, nothing to tap. */
    .lv-product__media .product__media-item .op-autoplay-video { background: #0a0a0a; }
    .lv-product__media .product__media-item .op-autoplay-video video {
      display: block;
      width: 100% !important;
      aspect-ratio: 4 / 5;
      object-fit: cover !important;
      pointer-events: none;
    }
    @media screen and (min-width: 990px) {
      .lv-product__media .product__media-item .op-autoplay-video video {
        position: static !important;
        height: auto !important;
      }
    }

    /* Touch devices get the segmented tracker below (swipe to move
       through images, same pattern as the By Opulence grid tiles);
       devices with a real pointer + hover get prev/next arrow buttons
       instead, since there's no swipe gesture to rely on there. Dawn's
       own <slider-component> already wires up .slider-button clicks via
       global.js, so no extra JS is needed here — just show/hide the
       right controls per input type. The hover/pointer override lives
       after the tracker's own rule below so it actually wins the
       cascade (equal specificity, so source order decides). */
    .lv-product__media .slider-buttons { display: none; }

    /* Bottom tracker — a segmented bar (one segment per image), the
       active segment filled in, matching the same swipe-progress
       pattern used on the By Opulence grid tiles elsewhere in the
       theme. Touch only — see the hover/pointer media query below. */
    .lv-product__media-tracker {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 3;
      display: flex;
      gap: 5px;
      pointer-events: none;
    }
    .lv-product__media-tracker-seg {
      flex: 1 1 0;
      height: 2px;
      border-radius: 1px;
      background: rgba(20, 20, 20, 0.2);
      overflow: hidden;
    }
    .lv-product__media-tracker-seg::after {
      content: "";
      display: block;
      height: 100%;
      width: 0%;
      background: #0a0a0a;
      transition: width 0.2s ease;
    }
    .lv-product__media-tracker-seg.is-active::after { width: 100%; }

    /* Desktop has no arrows and no tracker — the photo column is now a
       plain scrolling stack (see the min-width: 990px block above), so
       there's no single "current slide" for a tracker to represent and
       no slide to jump to with an arrow. Matches the Louis Vuitton PDP
       reference: the only desktop navigation is the page scroll itself. */
    @media screen and (min-width: 990px) {
      .lv-product__media .slider-buttons { display: none !important; }
      .lv-product__media-tracker { display: none !important; }
    }

    .lv-product__info-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6vh 6vw 18vh;
    }

    @media screen and (min-width: 990px) {
      .lv-product__info-wrapper {
        /* Not height: 100% — that would make this box exactly as tall as
           the row next to it (the stacked photo column), leaving nothing
           for position: sticky to visibly do. Left at its own natural
           (much shorter) content height, sticky keeps it at the top of
           the viewport for as long as the taller photo column is still
           scrolling past, and it releases on its own, scrolling away
           normally, right as the photos run out — no JS scroll-locking
           involved, same mechanism as louisvuitton.com's PDP. */
        padding: max(4vh, 28px) 4vw 6vh;
        position: sticky;
        top: var(--lv-header-h, 0px);
        max-height: calc(100vh - var(--lv-header-h, 0px));
        overflow-y: auto;
        /* Not vertically centred with align-items: center. In a scrollable
           flex box, centring content taller than the box pushes the top of
           it out of reach — on a short laptop screen that clipped the top
           of the title. Auto margins on .lv-product__info below centre it
           when there is room and top-align it (fully scrollable) when
           there isn't. */
        align-items: flex-start;
      }
      .lv-product__info { margin-top: auto; margin-bottom: auto; }
    }

    .lv-product__info {
      width: 100%;
      max-width: 380px;
    }

    .lv-product__title {
      margin: 0 0 0.5em;
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      font-size: clamp(20px, 2.6vw, 30px);
      letter-spacing: 0.01em;
      text-transform: uppercase;
      /* Anton's capitals are tall; a tight line box can shave the tops off
         the letters when a fallback font or a different engine measures it
         slightly differently. A little headroom means they never clip. */
      line-height: 1.25;
      padding-top: 0.1em;
      color: var(--lv-ink);
    }

    /* Price — clean, slim, small: a light-weight sans instead of the
       theme's default price styling, sized down to read as a quiet
       detail rather than a headline. */
    .lv-product__price {
      margin-bottom: 2em;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 300;
      font-size: 13px;
      letter-spacing: 0.02em;
      color: rgba(20, 20, 20, 0.75);
    }
    .lv-product__price .price { font-size: inherit; font-weight: inherit; }
    .lv-product__price .price__container { display: block; }
    .lv-product__price .price-item { font-weight: inherit; }

    .lv-product__variants { margin-bottom: 0; }

    /* Colour swatches — small square images, one per colour, sitting
       above the size selector. Purely presentational buttons; the real
       colour input inside .lv-product__variants (hidden) is what Dawn's
       own variant-switching JS reads, so these just relay clicks to it. */
    .lv-product__color-select { margin-bottom: 1.4em; }
    .lv-product__color-label {
      margin: 0 0 0.7em;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: capitalize;
      color: var(--lv-ink);
    }
    .lv-product__color-value {
      margin-left: 0.4em;
      color: rgba(20, 20, 20, 0.55);
      text-transform: none;
    }
    .lv-product__color-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .lv-product__color-swatch {
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 2px;
      overflow: hidden;
      background: #f0f0f0;
      cursor: pointer;
      transition: border-color 0.15s ease;
    }
    .lv-product__color-swatch img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .lv-product__color-swatch.is-selected { border-color: var(--lv-ink); }

    .lv-product__size-select { margin-bottom: 0.4em; }
    .lv-product__size-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.9em 0;
      background: none;
      border: none;
      border-top: 1px solid var(--lv-line);
      border-bottom: 1px solid var(--lv-line);
      font-size: 13px;
      color: var(--lv-ink);
      cursor: pointer;
      text-align: left;
    }
    .lv-product__size-trigger-chevron {
      width: 7px;
      height: 7px;
      border-right: 1px solid var(--lv-ink);
      border-bottom: 1px solid var(--lv-ink);
      transform: rotate(45deg);
      margin-top: -4px;
      flex: 0 0 auto;
    }
    .lv-product__size-error {
      margin: 0.5em 0 0;
      font-size: 11px;
      letter-spacing: 0.02em;
      color: #c0392b;
    }
    .lv-product__size-sheet-fit-note {
      margin: -0.6em 0 1.2em;
      font-size: 11px;
      letter-spacing: 0.03em;
      color: rgba(20, 20, 20, 0.55);
    }

    .lv-product__size-sheet {
      position: fixed;
      inset: 0;
      z-index: 60;
      visibility: hidden;
      pointer-events: none;
    }
    .lv-product__size-sheet.is-open { visibility: visible; pointer-events: auto; }
    .lv-product__size-sheet-backdrop {
      position: absolute;
      inset: 0;
      /* Fades the rest of the screen to a solid grey so only the size
         sheet itself reads as interactive. Plain solid colour, no blur —
         backdrop-filter is a known trigger for WebKit compositing/paint
         glitches, not worth it for a scrim that's this dark anyway.
         NOTE: this div must never end up empty — Dawn's base.css has a
         global "div:empty { display: none }" rule that will silently
         cancel this entire scrim (regardless of opacity/is-open state)
         if it has no child nodes, which is why it always carries a
         hidden inner <span>. */
      display: block;
      background: rgba(24, 24, 24, 0.88);
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .lv-product__size-sheet.is-open .lv-product__size-sheet-backdrop { opacity: 1; }
    .lv-product__size-sheet-panel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 12px 12px 0 0;
      padding: 1.4em 1.4em 2.2em;
      max-height: 70vh;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    .lv-product__size-sheet.is-open .lv-product__size-sheet-panel { transform: translateY(0); }
    .lv-product__size-sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.2em;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .lv-product__size-sheet-close {
      background: none;
      border: none;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      color: var(--lv-ink);
    }
    .lv-size-sheet-group-title {
      margin: 0 0 0.8em;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(20, 20, 20, 0.5);
    }
    .lv-size-sheet-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.2em; }
    .lv-size-pill {
      min-width: 52px;
      height: 40px;
      padding: 0 1em;
      border: none;
      border-radius: 999px;
      background: #f0f0f0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 400;
      font-size: 13px;
      color: var(--lv-ink);
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .lv-size-pill.is-selected { background: var(--lv-ink); color: #fff; }
    .lv-size-pill.is-disabled {
      color: rgba(20, 20, 20, 0.3);
      text-decoration: line-through;
      cursor: not-allowed;
    }

    /* ---------------- Rico 360 sizing reference ----------------
       A flipbook: 8 frames (one per 45 degrees of a full turn) stacked
       in the same box, one visible at a time, swapped fast enough to read
       as a looping turn-around video. Same component is used as the last
       gallery slide and inside the size sheet. */
    .lv-sizing { position: relative; width: 100%; background: #fff; overflow: hidden; }
    .lv-product__media .lv-sizing .lv-sizing__frame,
    .lv-sizing .lv-sizing__frame {
      position: absolute !important;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      opacity: 0;
    }
    /* Hard cuts between poses on purpose: a cross-fade blends two different
       poses into a ghosted double exposure. Smoothness comes from every
       frame being fully decoded before the turn starts (see createFlip). */
    .lv-product__media .lv-sizing .lv-sizing__frame.is-on,
    .lv-sizing .lv-sizing__frame.is-on {
      opacity: 1;
      z-index: 1;
    }

    .lv-sizing__label {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 1px;
      /* Same face as .lv-product__title. */
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      font-size: 11px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      line-height: 1.3;
      /* White + difference blend = dark text over the white backdrop and
         light text over the dark garment, so it stays readable even where
         the label overlaps the model on narrow screens. */
      color: #fff;
      mix-blend-mode: difference;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.9s ease, transform 0.9s ease;
      pointer-events: none;
    }
    .lv-sizing__name { font-size: 13px; letter-spacing: 0.04em; }
    .lv-sizing.is-labelled .lv-sizing__label { opacity: 1; transform: none; }

    .lv-product__media .lv-sizing-item { position: relative; background: #fff; }
    @media screen and (max-width: 989px) {
      .lv-product__media .lv-sizing-item .lv-sizing { position: absolute; inset: 0; height: 100%; }
    }
    @media screen and (min-width: 990px) {
      .lv-product__media .lv-sizing-item .lv-sizing { height: calc(100vh - var(--lv-header-h, 0px)); }
      .lv-product__media .lv-sizing-item .lv-sizing__label { top: 28px; left: 28px; font-size: 13px; }
      .lv-product__media .lv-sizing-item .lv-sizing__name { font-size: 16px; }
    }

    .lv-product__size-sheet-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .lv-product__size-sheet-main { flex: 1 1 auto; min-width: 0; }
    .lv-product__size-sheet-ref { flex: 0 0 auto; width: 112px; cursor: pointer; text-align: center; }
    .lv-product__size-sheet-ref[hidden] { display: none; }
    .lv-product__size-sheet-ref-frame {
      position: relative;
      width: 112px;
      aspect-ratio: 9 / 16;
      background: #fff;
      border: 1px solid var(--lv-line);
      border-radius: 6px;
      overflow: hidden;
    }
    .lv-product__size-sheet-ref .lv-sizing { position: absolute; inset: 0; height: 100%; }
    /* No height/weight text inside the size sheet — just the turning model
       and a tiny grey pointer to the full reference. */
    .lv-product__size-sheet-ref .lv-sizing__label { display: none; }
    .lv-product__size-sheet-ref-hint {
      display: block;
      margin-top: 6px;
      font-size: 9px;
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: rgba(20, 20, 20, 0.4);
    }
    @media screen and (min-width: 990px) {
      /* The sheet spans the whole viewport on desktop — keep the sizes and
         the reference together on the left instead of at opposite edges. */
      .lv-product__size-sheet-body { justify-content: flex-start; gap: 56px; }
      .lv-product__size-sheet-main { flex: 0 1 auto; }
      .lv-product__size-sheet-ref { width: 132px; }
      .lv-product__size-sheet-ref-frame { width: 132px; }
    }

    .lv-product__sticky-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      overflow: hidden;
      z-index: 35;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1em;
      padding: 0.8em 1.2em;
      background: #fff;
      border-bottom: 1px solid var(--lv-line);
      transform: translateY(-100%);
      transition: transform 0.25s ease;
      box-sizing: border-box;
    }
    .lv-product__sticky-bar.is-visible { transform: translateY(0); }

    /* Desktop: the sticky bar only spans the info column's own half of
       the screen — full-width made it read as sitting on top of the
       product image itself, since the image occupies the left 50vw.
       right/width must be overridden too, not just left — otherwise the
       original "right: 0; width: 100%" still wins and the bar's box
       extends a full extra viewport-width past the actual right edge. */
    /* Desktop: full width across the screen, like on mobile (it used to
       stop at the middle so it wouldn't sit over the photo column, but a
       bar tucked into one corner looked odd). */
    @media screen and (min-width: 990px) {
      .lv-product__sticky-bar {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        padding: 0.9em 4vw;
      }
    }

    /* Desktop: the Recommended / Recently Viewed rows (a separate section,
       styled here because this stylesheet loads on the same page). Wider
       container so the sides aren't a big empty gutter, bigger tiles with
       more air between them, and more room above the first row. Mobile is
       untouched. */
    /* A modest step up, scaled to the screen so a smaller device never
       gets overdone: laptops barely change, big monitors get a little
       more. Under 990px (tablets, phones) nothing is changed at all. */
    @media screen and (min-width: 990px) {
      .lv-recs-wrap { margin-top: 8vh; }
      .lv-recs-wrap .page-width {
        max-width: 1320px;
        padding-left: 3vw;
        padding-right: 3vw;
      }
      .lv-recs-wrap .lv-recs__grid { gap: 12px; }
      .lv-recs-wrap [data-recs-block] + [data-recs-block] { margin-top: 4em; }
      .lv-recs-wrap .lv-recs-heading { margin-bottom: 1.8em; }
    }
    @media screen and (min-width: 1600px) {
      .lv-recs-wrap .page-width { max-width: 1480px; }
      .lv-recs-wrap .lv-recs__grid { gap: 16px; }
    }

    .lv-product__sticky-bar-title {
      min-width: 0;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lv-product__sticky-bar-price { min-width: 0; font-size: 12px; flex: 0 0 auto; }
    .lv-product__sticky-bar-price .price { font-size: inherit; }
    .lv-product__sticky-bar-cta {
      flex: 0 0 auto;
      background: var(--lv-ink);
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 0.6em 1.4em;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .lv-product__buy .button {
      border-radius: 999px;
    }

    /* "Coming soon" sign-up (products tagged Coming_Soon): replaces the size
       picker and Add to cart. Same pill shapes as the real buy button. */
    .lv-product__soon { margin-top: 1.4em; }
    .lv-product__soon-title {
      margin: 0 0 0.3em;
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      font-size: 15px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--lv-ink);
    }
    .lv-product__soon-copy {
      margin: 0 0 1.1em;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(20, 20, 20, 0.6);
    }
    .lv-product__soon-form { display: flex; flex-direction: column; gap: 10px; }
    .lv-product__soon-input {
      width: 100%;
      padding: 0.95em 1.2em;
      border: 1px solid rgba(20, 20, 20, 0.25);
      border-radius: 999px;
      background: #fff;
      color: var(--lv-ink);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 13px;
      box-sizing: border-box;
    }
    .lv-product__soon-input:focus { outline: none; border-color: var(--lv-ink); }
    .lv-product__soon-button {
      width: 100%;
      padding: 1em;
      border: 0;
      border-radius: 999px;
      background: var(--lv-ink);
      color: #fff;
      font-family: 'Anton', sans-serif;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .lv-product__soon-ok { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lv-ink); }
    .lv-product__soon-err { margin: 0; font-size: 12px; color: #c0392b; }
    @media screen and (max-width: 749px) {
      /* 16px keeps iOS from zooming the page when the field is focused. */
      .lv-product__soon-input { font-size: 16px; }
    }

    /* Dawn draws each button's visible border via a ::after pseudo-element
       with its own border-radius (the theme's global "buttons radius"
       setting) rather than inheriting the button's own radius — left as
       the default square corners, that ::after sat inset within this
       pill-shaped button as a visible square ring. Rounding it to match
       removes that ring/outline artifact. */
    .lv-product__buy .button::after {
      border-radius: 999px !important;
    }

    /* Dawn draws a white 3px ring (the "white background" around the
       button) and a soft drop shadow via these two pseudo-elements, in
       every state including hover. Plain solid pill, nothing around it. */
    .lv-product__buy .button::before,
    .lv-product__buy .button::after,
    .lv-product__buy .button:hover::before,
    .lv-product__buy .button:hover::after {
      box-shadow: none !important;
    }

    .lv-product__buy .shopify-payment-button { margin-top: 0.6em; }
    .lv-product__buy .shopify-payment-button__button {
      border-radius: 999px !important;
    }
    .lv-product__buy .shopify-payment-button__button::after {
      border-radius: 999px !important;
    }

    .lv-product__buy #trust-badge-content-div,
    .lv-product__buy .trust-badge-preview {
      display: none !important;
    }

    .lv-product__delivery-note { margin-top: 1em; text-align: center; }
    .lv-product__delivery-summary {
      margin: 0;
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.02em;
      color: rgba(20, 20, 20, 0.55);
    }
    .lv-product__delivery-summary + .lv-product__delivery-summary {
      margin-top: 0.3em;
    }
    /* Plain underlined text link — not an accordion row like the others below it. */
    .lv-product__readmore-link {
      display: inline-block;
      margin-top: 0.4em;
      padding: 0;
      background: none;
      border: none;
      font-size: 11px;
      letter-spacing: 0.02em;
      text-decoration: underline;
      color: var(--lv-ink);
      cursor: pointer;
    }
    .lv-product__delivery-more {
      margin-top: 0.6em;
      font-size: 11px;
      line-height: 1.6;
      color: rgba(20, 20, 20, 0.6);
    }

    /* Accordion-style triggers — used for both "Read more" (delivery
       note) and the description toggle, so they read as the exact same
       control as the Find in Store accordion row below them: same
       font, same plus/lines icon, same rhythm. */
    .lv-product__accordion-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 0.6em;
      padding: 1em 0;
      background: none;
      border: none;
      border-top: 1px solid var(--lv-line);
      cursor: pointer;
      text-align: left;
    }
    .lv-product__accordion-trigger-title {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--lv-ink);
    }
    .lv-product__description {
      padding: 0 0 1.4em;
      font-size: 13px;
      line-height: 1.65;
      color: rgba(20, 20, 20, 0.85);
    }

    /* Border comes from the row itself (summary here, .lv-product__accordion-trigger
       for the other rows) rather than the wrapping .lv-product__accordion div too —
       having both doubled up the line between "Read more" and "Description". Dawn's
       own component-accordion.css also puts a border-top *and* border-bottom directly
       on ".accordion" (a class this wrapper keeps for Dawn's JS/other styling to keep
       working) — both get cancelled here, or a second faint line shows up a few
       pixels below each row's own bottom edge (the exact "two lines between the two
       dropdowns" doubling), and only the intentional last-child rule below re-adds
       the single closing line under the final row. */
    .lv-product__accordion.accordion { border-top: none; border-bottom: none; }
    .lv-product__accordion:last-child { border-bottom: 1px solid var(--lv-line); }
    .lv-product__accordion summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      list-style: none;
      cursor: pointer;
      padding: 1em 0;
      margin-top: 0.6em;
      border-top: 1px solid var(--lv-line);
    }
    .lv-product__accordion summary::-webkit-details-marker { display: none; }
    .lv-product__accordion-title {
      margin: 0;
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .lv-product__accordion-icon {
      position: relative;
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
    }
    .lv-product__accordion-icon::before,
    .lv-product__accordion-icon::after {
      content: "";
      position: absolute;
      background: var(--lv-ink);
    }
    .lv-product__accordion-icon::before {
      top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%);
    }
    .lv-product__accordion-icon::after {
      left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%);
      transition: opacity 0.15s ease;
    }
    details[open] .lv-product__accordion-icon::after { opacity: 0; }
    [aria-expanded="true"] .lv-product__accordion-icon::after { opacity: 0; }
    .lv-product__accordion .accordion__content {
      padding-bottom: 1.4em;
      font-size: 13px;
      line-height: 1.65;
      color: rgba(20, 20, 20, 0.8);
    }

    @media screen and (max-width: 989px) {
      /* min-height as a fallback in case aspect-ratio ever fails to
         resolve a real height on some engine/build — an empty 0-height
         box would otherwise collapse this (and drag the info column
         beside it in the same grid row) to nothing. */
      .lv-product__media { aspect-ratio: 4 / 5; min-height: 60vh; }
    }
/* END_SECTION:main-product-editorial */
/* START_SECTION:main-product-recommendations (INDEX:46) */
.lv-recs-wrap {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  [data-recs-block] + [data-recs-block] {
    margin-top: 3em;
  }

  .lv-recs-heading {
    margin: 0 0 1.4em;
    text-align: center;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.8vw, 18px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #141414;
  }

  /* 2x2 on mobile, one horizontal row of 4 on desktop. */
  .lv-recs__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .lv-recs__grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  }

  .lv-recs__link { display: block; text-decoration: none; color: inherit; }

  .lv-recs__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f0ece6;
  }

  .lv-recs__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .lv-recs__img--alt { opacity: 0; transition: opacity 0.25s ease; }

  @media (hover: hover) and (pointer: fine) {
    .lv-recs__media:hover .lv-recs__img--alt { opacity: 1; }
  }

  .lv-recs__title {
    display: block;
    margin-top: 10px;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(11px, 1.2vw, 13px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .lv-recs__price {
    display: block;
    margin-top: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(20, 20, 20, 0.55);
  }

  .lv-product__customer-service {
    --lv-ink: #141414;
    --lv-line: rgba(20, 20, 20, 0.12);
    max-width: 380px;
    margin: 0 auto;
    padding: 4vh 6vw 8vh;
  }
  @media screen and (min-width: 990px) {
    .lv-product__customer-service { max-width: 480px; padding: 6vh 4vw 10vh; }
  }
  .lv-product__customer-service-heading {
    margin: 0 0 0.4em;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lv-ink);
  }
  .lv-product__helplinks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9em 0;
    border-top: 1px solid var(--lv-line);
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lv-ink);
    text-decoration: none;
  }
  .lv-product__helplinks a:last-child { border-bottom: 1px solid var(--lv-line); }
  .lv-product__helplinks-icon { position: relative; width: 10px; height: 10px; flex: 0 0 auto; }
  .lv-product__helplinks-icon::before,
  .lv-product__helplinks-icon::after {
    content: "";
    position: absolute;
    background: var(--lv-ink);
  }
  .lv-product__helplinks-icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
  .lv-product__helplinks-icon::after { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
/* END_SECTION:main-product-recommendations */