/* ===== mm-featured.css — TOP SELLING BRACELETS THIS WEEK (verbatim from the storefront asset) ===== */
.mm-featured-products{background:var(--mm-bg);padding-top:var(--mm-padding-top);padding-bottom:var(--mm-padding-bottom);overflow:hidden}.mm-featured-products .mm-wrap{max-width:1400px;margin:auto;padding-inline:20px}.mm-featured-products .mm-subtitle{margin:0 0 10px;text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-subtext)}.mm-featured-products .mm-heading{margin:0 0 60px;text-align:center;color:var(--mm-text);font-size:var(--mm-heading-size);line-height:1.1;font-weight:800}.mm-featured-products .mm-grid{display:grid;grid-template-columns:repeat(var(--mm-desktop-cols),minmax(0,1fr));gap:14px;align-items:start}.mm-featured-products .mm-card{display:flex;flex-direction:column;height:100%;content-visibility:auto;contain-intrinsic-size:auto 420px;border-radius:var(--mm-radius);overflow:hidden;background:var(--mm-card-bg);box-shadow:0 10px 26px rgba(0,0,0,.1)}.mm-featured-products .mm-price-strip{display:flex;align-items:baseline;gap:8px;background:#241f1c;color:#ffffff;padding:8px 12px}.mm-featured-products .mm-discount{background:var(--mm-accent);color:#ffffff;font-size:9px;font-weight:800;letter-spacing:.02em;padding:3px 7px;border-radius:4px;white-space:nowrap}.mm-featured-products .mm-price{font-size:var(--mm-price-size);font-weight:800;color:#fbf3e2}.mm-featured-products .mm-old-price{font-size:calc(var(--mm-price-size) - 8px);text-decoration:line-through;color:#8a827a}.mm-featured-products .mm-price-strip.mm-no-discount{background:#241f1c}.mm-featured-products .mm-image-wrap{position:relative;display:block;overflow:hidden;aspect-ratio:1/1.1;background:var(--mm-card-bg);text-decoration:none}.mm-featured-products .mm-image{position:relative;width:100%;height:100%}.mm-featured-products .mm-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;transform:translateZ(0)}.mm-featured-products .mm-img-primary{opacity:1;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.6,.2,1)}.mm-featured-products .mm-img-secondary{opacity:0;transform:scale(1.04);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.6,.2,1)}@media (hover:hover){.mm-featured-products .mm-card:hover .mm-img-primary{opacity:0;transform:scale(1.02)}.mm-featured-products .mm-card:hover .mm-img-secondary{opacity:1;transform:scale(1)}}.mm-featured-products .mm-badge{position:absolute;top:12px;left:12px;z-index:3;padding:6px 12px;border-radius:99px;background:#241f1c;color:#ffffff;font-size:10px;font-weight:800;letter-spacing:.08em}.mm-featured-products .mm-content{display:flex;flex-direction:column;flex:1;padding:10px 12px}.mm-featured-products .mm-rating{margin-bottom:8px;color:#1c1917;font-size:14px}.mm-featured-products .mm-product-title{margin:0-12px 8px -12px;padding:8px 12px;background:#241f1c;font-size:calc(var(--mm-product-size)*.7);line-height:1.3;font-weight:800;box-sizing:border-box}.mm-featured-products .mm-product-title a{color:#fbf3e2;text-decoration:none}.mm-featured-products .mm-benefits-wrap{margin-bottom:8px}.mm-featured-products .mm-benefits{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}.mm-featured-products .mm-benefits span{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-featured-products .mm-benefits span::before{content:"✓";font-size:10px;font-weight:800;flex-shrink:0}.mm-featured-products .mm-benefits span:nth-child(1){color:#c0603c}.mm-featured-products .mm-benefits span:nth-child(2){color:#c0603c}.mm-featured-products .mm-benefits span:nth-child(3){color:#4f8a63}.mm-featured-products .mm-benefits span:nth-child(4){color:#1c1917}.mm-featured-products .mm-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:auto;border-radius:10px;background:var(--mm-accent);color:var(--mm-btn-text);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.02em;transition:filter .25s ease}@media (hover:hover){.mm-featured-products .mm-btn:hover{background:var(--mm-btn-hover);filter:none}}.mm-featured-products .mm-footer-actions{display:flex;align-items:center;justify-content:center;margin-top:48px}.mm-featured-products .mm-view-all{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 36px;border-radius:50px;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;background:0 0;color:var(--mm-text);border:2px solid var(--mm-border);box-shadow:0 4px 12px rgba(0,0,0,.02);transition:all .3s cubic-bezier(.4,0,.2,1)}.mm-featured-products .mm-view-all svg{width:18px;height:18px;transition:transform .3s cubic-bezier(.4,0,.2,1)}@media (hover:hover){.mm-featured-products .mm-view-all:hover{background:var(--mm-accent);color:#ffffff;border-color:var(--mm-accent);transform:translateY(-2px);box-shadow:0 8px 20px rgba(28, 25, 23,.12)}.mm-featured-products .mm-view-all:hover svg{transform:translateX(4px)}}@media screen and (max-width:768px){.mm-featured-products .mm-wrap{padding-inline:14px}.mm-featured-products .mm-heading{margin-bottom:34px}.mm-featured-products .mm-mobile-slider{display:flex!important;flex-wrap:nowrap!important;gap:14px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:10px;padding-inline:14px!important;margin-inline:-14px!important}.mm-featured-products .mm-mobile-slider::-webkit-scrollbar{display:none}.mm-featured-products .mm-mobile-slider .mm-card{min-width:unset!important;flex:0 0 78%!important;scroll-snap-align:center!important;box-sizing:border-box!important}.mm-featured-products .mm-img-secondary{display:none}.mm-featured-products .mm-footer-actions{flex-direction:column;gap:12px;margin-top:32px;width:100%;padding:0 16px;box-sizing:border-box}.mm-featured-products .mm-view-all{width:100%;min-height:50px;font-size:14px;border-radius:50px}}

/* ---------------------------------------------------------------------------
   Merged from the inline <style> block in sections/mm-product-collection.liquid.
   Kept AFTER the original rules because the inline block used to sit after the
   <link>, so these declarations won for the 15 selectors defined in both.
   --------------------------------------------------------------------------- */
/* ==========================================================================
       STYLE 32: FULL-BLEED LOOKBOOK REVEAL + MOBILE M5 SPLIT SHOWCASE
       ========================================================================== */
    .mm-featured-products .mm-grid {
      display: grid;
      grid-template-columns: repeat(var(--mm-desktop-cols), minmax(0, 1fr));
      gap: var(--mm-gap);
    }

    /* Desktop & Mobile Lookbook Card Base */
    .mm-featured-products .mm-card {
      position: relative;
      aspect-ratio: 4 / 5;
      border-radius: var(--mm-radius);
      overflow: hidden;
      background: #241f1c;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .mm-featured-products .mm-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    }

    /* Full-Bleed Images */
    .mm-featured-products .mm-image-wrap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: block;
      cursor: pointer;
    }

    .mm-featured-products .mm-image {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .mm-featured-products .mm-img-primary,
    .mm-featured-products .mm-img-secondary {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    }

    .mm-featured-products .mm-img-secondary {
      opacity: 0;
    }

    .mm-featured-products .mm-card:hover .mm-img-primary {
      transform: scale(1.06);
    }

    .mm-featured-products .mm-card:hover .mm-img-secondary {
      opacity: 1;
      transform: scale(1.06);
    }

    /* Badges & Single-Shape Discount Pill */
    .mm-featured-products .mm-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 15;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 6px 12px !important;
      border-radius: 999px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .mm-featured-products .mm-price-strip {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 15;
      background: transparent !important;
      padding: 0 !important;
      border: none !important;
      box-shadow: none !important;
    }

    .mm-featured-products .mm-price-strip span,
    .mm-featured-products .mm-discount {
      background: #241f1c !important;
      color: #ffffff !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      padding: 6px 14px !important;
      border-radius: 999px !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
      display: inline-block !important;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: none !important;
    }

    /* Cinematic Dark Vignette Overlay */
    .mm-featured-products .mm-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 45%, transparent 100%);
      z-index: 2;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    /* Default Front Lookbook Content — Thin, Delicate & Elegant */
    .mm-featured-products .mm-front-summary {
      position: relative;
      z-index: 10;
      padding: 22px !important;
      background: transparent !important;
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }

    .mm-featured-products .mm-card:hover .mm-front-summary {
      opacity: 0;
      transform: translateY(10px);
    }

    .mm-featured-products .mm-product-title {
      margin: 0 !important;
      padding: 0 !important;
      font-size: 16px !important;
      font-weight: 400 !important;
      line-height: 1.35 !important;
      background: transparent !important;
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .mm-featured-products .mm-product-title a {
      color: #ffffff !important;
      text-decoration: none;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
      background: transparent !important;
      background-color: transparent !important;
      padding: 0 !important;
      display: block;
      font-weight: 400 !important;
    }

    .mm-featured-products .mm-front-price {
      margin-top: 6px !important;
      padding: 0 !important;
      font-size: 18px !important;
      font-weight: 700;
      color: #fbf3e2 !important;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
      display: flex;
      align-items: baseline;
      gap: 8px;
      background: transparent !important;
    }

    .mm-featured-products .mm-old-price {
      font-size: 0.75em;
      color: rgba(255, 255, 255, 0.65) !important;
      text-decoration: line-through;
      font-weight: 500;
    }

    /* SLIDE-UP LOOKBOOK DRAWER OVERLAY (DESKTOP) */
    .mm-featured-products .mm-lookbook-drawer {
      position: absolute;
      inset: 0;
      z-index: 20;
      background: rgba(255, 255, 255, 0.96) !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      opacity: 0;
      transform: translateY(102%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
      pointer-events: none;
      cursor: pointer;
    }

    .mm-featured-products .mm-card:hover .mm-lookbook-drawer {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .mm-featured-products .mm-drawer-header {
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding-bottom: 10px;
      background: transparent !important;
    }

    .mm-featured-products .mm-drawer-title {
      font-size: 15px !important;
      font-weight: 600 !important;
      color: #1c1917 !important;
      line-height: 1.35;
      margin: 0;
      background: transparent !important;
    }

    .mm-featured-products .mm-drawer-title a {
      color: #1c1917 !important;
      text-decoration: none;
      background: transparent !important;
      font-weight: 600 !important;
    }

    /* Desktop only (below 768px, mobile's own !important block further down completely
       replaces all of this, so nothing here reaches mobile).
       Was flex:1 + justify-content:center — that's what stretched a plain checklist to fill
       the whole middle of the drawer. Pills only need the height their own content takes,
       so removing the stretch/centering is what actually frees the middle for the image grid. */
    .mm-featured-products .mm-benefits-wrap {
      margin: 10px 0 0;
      background: transparent !important;
    }

    .mm-featured-products .mm-benefits {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 6px;
    }

    /* Pills, not a checkmark list — cycles the 3 chevron shades so multiple pills read as
       one family rather than one flat colour repeated. */
    .mm-featured-products .mm-benefits span {
      font-size: 10px;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      font-weight: 700;
      line-height: 1.3;
      padding: 4px 9px;
      border-radius: 20px;
      white-space: nowrap;
      background: #241f1c;
    }
    /* Chakra spectrum (2026-07-23): per-pill background, cycling by position. The color:#ffffff is
       REPEATED on each nth-child on purpose: the original stylesheet block sets per-position text
       colours (span:nth-child(1){color:#c0603c} etc.) at (0,3,1) specificity, which out-ranks the
       base `.mm-benefits span{color:#ffffff}` (0,2,1) and was rendering the labels dark/unreadable. */
    .mm-featured-products .mm-benefits span:nth-child(1) { color: #ffffff; }
    .mm-featured-products .mm-benefits span:nth-child(2) { background: #b8892b; color: #ffffff; }
    .mm-featured-products .mm-benefits span:nth-child(3) { background: #4f8a63; color: #ffffff; }
    .mm-featured-products .mm-benefits span:nth-child(4) { background: #241f1c; color: #ffffff; }

    /* Four large secondary photos in a 2x2 that fills whatever height the drawer has left,
       replacing the six ~45px thumbs this used to be. The dock-squeeze hover that lived here
       is gone with them: it scaled a thumb to 1.95, which only reads as a zoom when the
       thumb is tiny — at this size it would just overflow and be cut off by overflow:hidden.
       grid-auto-rows:1fr rather than a fixed 2-row template so a product with only 2 or 3
       spare photos still fills the area instead of leaving a half-empty second row. */
    .mm-featured-products .mm-drawer-images {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-content: center;
      gap: 6px;
      margin: 10px 0;
    }

    .mm-featured-products .mm-thumb {
      /* Explicit reset rather than `all: unset`, which would also drop the box model
         these rules depend on. */
      appearance: none;
      -webkit-appearance: none;
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      color: inherit;
      display: block;
      position: relative;
      /* Square, sized off the column width — with four pills restored, width is now the
         binding dimension, and one row of four fits more photo per side than a 2x2 does in
         the ~110px of height that is left. Driving the square off width (rather than height,
         as the 2x2 did) is what stops four height-sized squares running off the card's edge.
         Kept square on purpose: object-fit:cover in a non-square cell slices the middle out
         of square jewellery shots. */
      aspect-ratio: 1 / 1;
      width: 100%;
      height: auto;
      min-width: 0;
      min-height: 0;
      border-radius: 8px;
      overflow: hidden;
      background: #f6e7e0;
      cursor: zoom-in;
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .mm-featured-products .mm-thumb picture,
    .mm-featured-products .mm-thumb img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .mm-featured-products .mm-thumb img {
      object-fit: cover;
    }

    .mm-featured-products .mm-thumb:hover,
    .mm-featured-products .mm-thumb:focus-visible {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
      z-index: 5;
    }

    .mm-featured-products .mm-thumb:focus-visible {
      outline: 2px solid #d6cec2;
      outline-offset: 2px;
    }

    /* Full-resolution overlay. Deliberately NOT scoped under .mm-featured-products: the JS
       appends it to <body>, because .mm-card sets overflow:hidden and would clip it. */
    .mm-lightbox {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      padding: 4vmin;
      background: rgba(8, 10, 14, 0.92);
      cursor: zoom-out;
    }

    .mm-lightbox[hidden] {
      display: none;
    }

    .mm-lightbox-img {
      max-width: 100%;
      max-height: 92vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 6px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
      cursor: default;
    }

    .mm-lightbox.is-loading::after {
      content: '';
      width: 34px;
      height: 34px;
      border: 3px solid rgba(255, 255, 255, 0.25);
      border-top-color: #e7e1d8;
      border-radius: 50%;
      position: absolute;
      animation: mmSpin 0.8s linear infinite;
    }

    @keyframes mmSpin {
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .mm-lightbox.is-loading::after { animation: none; }
      .mm-featured-products .mm-thumb { transition: none; }
    }

    .mm-lightbox-close {
      position: absolute;
      top: max(12px, 2vmin);
      right: max(12px, 2vmin);
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      font-size: 28px;
      line-height: 1;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      cursor: pointer;
    }

    .mm-lightbox-close:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    .mm-lightbox-close:focus-visible {
      outline: 2px solid #e7e1d8;
      outline-offset: 2px;
    }

    /* Price block now stacks current + compare-at price vertically; ATC stays beside it
       via the footer's own align-items (unchanged). */
    .mm-featured-products .mm-drawer-footer {
      margin-top: auto;
      flex: 0 0 auto;
      padding-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: transparent !important;
    }

    .mm-featured-products .mm-drawer-price-block {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .mm-featured-products .mm-drawer-price {
      font-size: 17px;
      font-weight: 800;
      color: #1c1917 !important;
      white-space: nowrap;
    }

    .mm-featured-products .mm-drawer-compare-price {
      font-size: 12px;
      font-weight: 600;
      color: #c0603c !important;
      text-decoration: line-through;
      white-space: nowrap;
    }

    /* Add to Cart Form & Button */
    .mm-featured-products .mm-atc-form {
      margin: 0;
      padding: 0;
      position: relative;
      z-index: 35;
    }

    /* Full pill + thicker black border + hard offset shadow — matches the reference
       button treatment (rounded-stadium shape, black outline, flat drop shadow) rather
       than the soft rounded-rect this started as. */
    .mm-featured-products .mm-btn {
      background: #241f1c !important;
      color: #ffffff !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      text-transform: uppercase;
      letter-spacing: 0.05em !important;
      padding: 7px 14px !important;
      min-height: 34px !important;
      border-radius: 8px !important;
      text-decoration: none;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      transition: all 0.2s ease;
      border: 2px solid #d6cec2 !important;
      box-shadow: 2px 2px 0 #1c1917 !important;
      cursor: pointer;
    }

    .mm-featured-products .mm-btn:hover {
      background: #241f1c !important;
      transform: translateY(-2px);
      box-shadow: 2px 4px 0 #1c1917 !important;
    }

    /* ATC never clips (desktop only, 2026-07-23): on narrow cards the price + button don't fit
       on one row, so with justify-content:space-between the button overflowed the card's right
       edge and got clipped. Here the footer may WRAP the content-sized button onto its own line,
       right-aligned (margin-left:auto), so it is always fully visible. Mobile is scoped out by the
       min-width and keeps its own footer/button rules untouched. */
    @media (min-width: 769px) {
      /* Layout 3 "Centered wrap" (2026-07-23): centre the benefit pills in the drawer (desktop). */
      .mm-featured-products .mm-benefits { justify-content: center; }

      /* All four pills stay, at their original size — the photos give up the height instead.
         Four pills means four rows here (each runs 140-162px inside a ~251px drawer, so no
         two ever share a row), which leaves the photo grid roughly 110px. The thumbs are
         sized to fit that rather than the other way round. */
      .mm-featured-products .mm-drawer-footer { flex-wrap: wrap; }
      .mm-featured-products .mm-atc-form { margin-left: auto; }
      .mm-featured-products .mm-btn { width: auto !important; max-width: 100%; }
    }

    /* ==========================================================================
       MOBILE M5: SPLIT LOOKBOOK SHOWCASE (NO CLIPPING + FULL CARD TAP SUPPORT)
       ========================================================================== */
    @media screen and (max-width: 768px) {
      /* The slider row inherits align-items:start from elsewhere in the theme, which lets
         each card size to its own content — a longer title or a wrapped pill row makes
         that one card taller than its neighbours. Stretch makes every card match the
         tallest one in the row instead, so heights are uniform without hardcoding a
         height that could clip a card with more content than usual. */
      .mm-featured-products .mm-mobile-slider {
        align-items: stretch !important;
      }

      .mm-featured-products .mm-card {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 480px !important;
        display: flex !important;
        flex-direction: column !important;
        background: #241f1c !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        cursor: pointer !important;
      }

      /* Hide Desktop Front Summary Vignette on Mobile */
      .mm-featured-products .mm-card::after {
        display: none !important;
      }
      .mm-featured-products .mm-front-summary {
        display: none !important;
      }

      /* Top Image Area — Fixed proportion uncropped */
      .mm-featured-products .mm-image-wrap {
        position: relative !important;
        height: 260px !important;
        width: 100% !important;
        flex: 0 0 260px !important;
        overflow: hidden;
        cursor: pointer !important;
      }

      /* Bottom Specs Sheet — Auto height so nothing is ever clipped */
      .mm-featured-products .mm-lookbook-drawer {
        position: relative !important;
        height: auto !important;
        flex: 1 1 auto !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        background: #241f1cff !important;
        color: #ffffff !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        cursor: pointer !important;
      }

      .mm-featured-products .mm-drawer-header {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }

      .mm-featured-products .mm-drawer-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
      }

      .mm-featured-products .mm-drawer-title a {
        color: #ffffff !important;
        font-weight: 600 !important;
      }

      /* Pill-Shaped Rounded Rectangular Benefits on Mobile */
      .mm-featured-products .mm-benefits-wrap {
        margin: 12px 0 !important;
      }

      .mm-featured-products .mm-benefits {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
      }

      .mm-featured-products .mm-benefits span {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #f6e7e0 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        line-height: 1.25;
      }

      .mm-featured-products .mm-benefits span::before {
        content: '✓';
        color: #4f8a63 !important;
        font-weight: 900;
      }

      .mm-featured-products .mm-drawer-footer {
        padding-top: 12px !important;
        margin-top: 4px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
      }

      .mm-featured-products .mm-drawer-price {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #fbf3e2 !important;
      }

      .mm-featured-products .mm-btn {
        min-height: 38px !important;
        font-size: 11px !important;
        padding: 8px 14px !important;
      }

      /* Desktop-only feature — mobile's bottom sheet has no spare height budgeted for a
         4-photo grid, so keep this hidden below 769px per the original "desktop view" scope. */
      .mm-featured-products .mm-drawer-images {
        display: none !important;
      }

      .mm-slider-dots {
        display: flex;
        justify-content: center;
        gap: 0;
        margin-top: 12px;
      }
      .mm-slider-dot {
        width: 24px;
        height: 24px;
        background: none;
        cursor: pointer;
        border: none;
        padding: 0;
        display: grid;
        place-items: center;
      }
      .mm-slider-dot::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #f3efe9;
        transition: all 0.3s ease;
      }
      .mm-slider-dot.active::before {
        background-color: #241f1c;
        width: 16px;
        border-radius: 4px;
      }
    }

    @media screen and (min-width: 769px) {
      .mm-slider-dots {
        display: none !important;
      }
    }

    /* =========================================================================
       SPLIT-CARD DESKTOP TREATMENT — 2026-07-27

       At rest : photo, with a frosted glass panel over its lower edge holding
                 title, Judge.me stars and price.
       On hover: the photo cross-fades to image 2 (already wired further up), the
                 glass panel STAYS PUT and swaps its contents for four benefit
                 lines, and a diagonal split Add-to-cart / Buy-now rises above it.

       MOBILE IS UNTOUCHED. Everything below sits inside min-width:769px, and the
       one new element living outside .mm-front-summary — .mm-split — is
       display:none at base. .mm-front-summary is already display:none !important
       under max-width:768px, so its new children can never reach a phone.
       ========================================================================= */

    /* Base: inert until the desktop query switches them on. */
    .mm-featured-products .mm-split { display: none; }
    .mm-featured-products .mm-bloom { display: none; }

    @media screen and (min-width: 769px) {

      /* ---- two stacked blocks, not an overlay ----
         The card was built full-bleed: .mm-image-wrap is position:absolute inset:0 and
         the text rode on top of the photo. The approved design is a photo block with a
         separate panel beneath it, so on desktop the image returns to normal flow and
         the card sizes to its content instead of a fixed 4/5 box. Mobile keeps the
         full-bleed treatment untouched. */
      .mm-featured-products .mm-card {
        aspect-ratio: auto;
        /* auto, not 100%: the grid is align-items:start, so a percentage height
           resolves against a content-sized track and can end up shorter than the
           content — which .mm-card's overflow:hidden then clips. */
        height: auto;
        justify-content: flex-start;
        background: #ffffff;
        border: 1px solid #e7e1d8;
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 6px 18px rgba(28, 25, 23, 0.07);
      }
      .mm-featured-products .mm-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(28, 25, 23, 0.14);
      }

      .mm-featured-products .mm-image-wrap {
        position: relative;
        inset: auto;
        z-index: 1; /* above .mm-bloom, or the blur haze spills onto the photo's lower edge */
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        flex: none;
        border-radius: 10px;
        overflow: hidden;
      }

      /* The discount now rides in the price row, so the corner pill comes off the photo.
         NOTE: this strip also carried the "AUTHENTIC" label for products with no
         compare-at price — that label goes with it on desktop. Mobile keeps both. */
      .mm-featured-products .mm-price-strip { display: none !important; }

      /* ---- kill the cinematic vignette on desktop ----
         .mm-card::after is a full-card scrim (inset:0, black 0.85 at the bottom) that
         existed to make white text legible over the full-bleed photo. As a generated
         last child at z-index:2 it paints ABOVE .mm-front-summary, so once the text
         moved onto its own panel the scrim was simply tinting the entire card black.
         The mobile copy of this rule (inside max-width:768px) is left alone — mobile
         still overlays its content on the photo and still needs it. */
      .mm-featured-products .mm-card::after { display: none !important; }

      /* ---- the drawer stops being the desktop hover state ----
         NOTE: this also retires the desktop 2x2 thumbnail grid and its lightbox.
         Mobile still renders the drawer as its static spec panel. */
      .mm-featured-products .mm-lookbook-drawer { display: none !important; }

      /* ---- bloom: what the glass actually blurs ----
         The panel no longer sits on the photo, so backdrop-filter would have nothing
         behind it. A blurred copy of the shot fills the text zone instead, giving each
         card its own colour under the frost. */
      .mm-featured-products .mm-bloom {
        display: block;
        position: absolute;
        left: -10%;
        right: -10%;
        bottom: -14%;
        height: 48%;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        filter: blur(30px) saturate(1.6);
        opacity: 0.5;
      }
      .mm-featured-products .mm-bloom img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* ---- panel: flat at rest, glass on hover ----
         At rest it is a plain opaque surface — no translucency, no backdrop-filter, so
         the bloom behind it is completely hidden and the card reads clean. The frost is
         reserved for hover, where it arrives with the benefit lines. */
      .mm-featured-products .mm-front-summary {
        position: relative;
        z-index: 2;
        margin: 12px 0 0;
        padding: 14px 15px 15px !important;
        border-radius: 12px;
        background: #faf8f5 !important;
        background-color: #faf8f5 !important;
        border: 1px solid #e7e1d8 !important;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        transition: background-color 0.28s ease, border-color 0.28s ease;
      }

      .mm-featured-products .mm-card:hover .mm-front-summary {
        opacity: 1;
        transform: none;
        background: rgba(250, 248, 245, 0.72) !important;
        background-color: rgba(250, 248, 245, 0.72) !important;
        border-color: rgba(255, 255, 255, 0.55) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
                backdrop-filter: blur(16px) saturate(1.4);
      }

      /* No backdrop-filter support: stay on the opaque surface in both states rather
         than going translucent over the bloom with nothing blurring it. */
      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .mm-featured-products .mm-card:hover .mm-front-summary {
          background: #faf8f5 !important;
          background-color: #faf8f5 !important;
        }
      }

      /* Dark type on the light panel, replacing the white-on-photo treatment. */
      .mm-featured-products .mm-product-title a {
        color: #1c1917 !important;
        text-shadow: none !important;
        font-weight: 500 !important;
      }

      /* Two lines, not three. Every extra line adds ~22px to the panel, and at three
         lines the panel reached 176px on a 349px card — half the card, leaving the
         product photo squeezed into a letterbox. Clamping hands that height back to
         the image. The "| MantraMani" suffix is what gets cut first. */
      .mm-featured-products .mm-product-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .mm-featured-products .mm-front-price {
        position: relative;
        margin-top: 8px !important;
        padding-top: 9px !important;
        border-top: 1px solid #d6cec2;
        color: #c0603c !important;
        text-shadow: none !important;
        font-size: 17px !important;
        gap: 6px;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      /* Without flex:none these shrink to fit and their text wraps internally, which
         silently doubles the row height and pushes the panel past the card's clip.
         The compare-at price is the one element allowed to give: it shrinks and
         ellipsises rather than wrapping, so the row stays one line at any card width.
         The four section instances run different column counts, so card width varies —
         a fixed reserved lane held for the wide ones and collided on the narrow ones. */
      .mm-featured-products .mm-front-price > span { flex: none; white-space: nowrap; }
      .mm-featured-products .mm-front-price .mm-old-price {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .mm-featured-products .mm-old-price {
        color: #57534e !important;
        font-size: 0.66em;
      }

      /* Discount chip, pinned to the right end of the price row. Absolute on purpose:
         as a flex item it competed for width, shrank its siblings and made their text
         wrap — which grew the row and the card. Out of flow it can never do that.
         Sage because a saving is a semantic signal, not the brand accent; clay stays
         on the price itself. */
      .mm-featured-products .mm-off {
        flex: none;
        align-self: center;
        margin-left: auto; /* pushes the chip to the right end of the row */
        padding: 2px 7px;
        border-radius: 40px;
        background: rgba(79, 138, 99, 0.14);
        color: #3f7050;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.6;
        white-space: nowrap;
      }

      /* ---- two faces sharing one box ----
         The info face stays in flow so it keeps setting the panel height; the
         benefits face is absolute so it adds none. Swapping with display:none
         would collapse the panel for a frame and make the card jump. */
      .mm-featured-products .mm-face { transition: opacity 0.28s ease; }
      .mm-featured-products .mm-face-info { display: flex; flex-direction: column; }
      .mm-featured-products .mm-face-benefits {
        position: absolute;
        inset: 14px 15px 15px;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0;
      }
      .mm-featured-products .mm-face-benefits li {
        position: relative;
        padding: 6px 0 6px 16px;
        font-size: 11.5px;
        line-height: 1.3;
        color: #1c1917;
        border-top: 1px solid #d6cec2;
      }
      .mm-featured-products .mm-face-benefits li:first-child { border-top: 0; }
      .mm-featured-products .mm-face-benefits li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 11px;
        width: 5px;
        height: 5px;
        background: #4f8a63;
      }
      .mm-featured-products .mm-card:hover .mm-face-info { opacity: 0; }
      .mm-featured-products .mm-card:hover .mm-face-benefits { opacity: 1; }

      /* ---- Judge.me star meter ----
         .mm-rating is flex, which blockifies its children: an inline-block wrapper
         silently computes to block and the absolute fill then drifts off the inline
         track. Both layers are therefore explicit blocks. line-height must clear the
         glyph ink box (a 13px star needs ~19px) or the fill overflow clips it. */
      .mm-featured-products .mm-rating {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        font-size: 12px;
        color: #57534e;
      }
      .mm-featured-products .mm-stars {
        position: relative;
        display: block;
        flex: none;
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0;
        white-space: nowrap;
      }
      .mm-featured-products .mm-stars-track,
      .mm-featured-products .mm-stars-fill { display: block; line-height: inherit; }
      .mm-featured-products .mm-stars-track { color: #d6cec2; }
      .mm-featured-products .mm-stars-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--mm-star-pct, 0%);
        overflow: hidden;
        color: #c0603c;
      }
      .mm-featured-products .mm-rating-num {
        font-weight: 600;
        color: #1c1917;
        font-variant-numeric: tabular-nums;
      }
      .mm-featured-products .mm-rating-count {
        color: #57534e;
        font-variant-numeric: tabular-nums;
      }

      /* ---- diagonal split ----
         --mm-seam is the diagonal lean, --mm-seam-gap half the transparent channel
         between the halves; the photo shows through it, so the seam is the image
         rather than a drawn line. */
      .mm-featured-products .mm-split {
        --mm-seam: 9%;
        --mm-seam-gap: 2px;
        display: block;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 12;
        height: 44px;
        transform: translateY(calc(100% + 12px));
        opacity: 0;
        transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.26s ease;
      }
      .mm-featured-products .mm-card:hover .mm-split,
      .mm-featured-products .mm-card:focus-within .mm-split {
        transform: translateY(0);
        opacity: 1;
      }

      /* Both form wrappers fill the split so their buttons can be positioned, but they
         are unclipped rectangles — and .mm-atc-form already carries z-index:35 from the
         theme (it was lifted above the old drawer). Left interactive, the top form
         covered the other half entirely and ate its clicks. pointer-events:none makes
         the wrappers transparent to the pointer; only the clip-path'd buttons take hits,
         so each half is clickable exactly where it is visible, whatever the z-order. */
      .mm-featured-products .mm-split-form,
      .mm-featured-products .mm-buy-form {
        position: absolute;
        inset: 0;
        margin: 0;
        pointer-events: none;
      }
      .mm-featured-products .mm-half { pointer-events: auto; }

      .mm-featured-products .mm-half {
        position: absolute;
        inset: 0;
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.18s ease;
      }
      .mm-featured-products .mm-half span { pointer-events: none; }

      /* Two overlapping full-size boxes, each clipped to one side of the seam.
         clip-path also clips hit-testing, so neither half steals the other clicks. */
      .mm-featured-products .mm-half-cart {
        background: #c0603c;
        padding-right: 50%;
        clip-path: polygon(0 0,
                           calc(50% + var(--mm-seam) - var(--mm-seam-gap)) 0,
                           calc(50% - var(--mm-seam) - var(--mm-seam-gap)) 100%,
                           0 100%);
      }
      .mm-featured-products .mm-half-cart:hover { background: #a44f30; }

      .mm-featured-products .mm-half-buy {
        background: #4f8a63;
        padding-left: 50%;
        clip-path: polygon(calc(50% + var(--mm-seam) + var(--mm-seam-gap)) 0,
                           100% 0,
                           100% 100%,
                           calc(50% - var(--mm-seam) + var(--mm-seam-gap)) 100%);
      }
      .mm-featured-products .mm-half-buy:hover { background: #3f7050; }

      .mm-featured-products .mm-half:focus-visible {
        outline: 2px solid #c0603c;
        outline-offset: -3px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .mm-featured-products .mm-split { transition: none; }
    }


/* ---- mmfeat-stacking: layer the section above the hero's pinned fly-out ----
   .mmhero__full is position:fixed z-index:4 and never leaves the viewport, so
   anything that scrolls past it has to out-stack it rather than out-flow it.
   The Only On MantraMani wrapper already carries position:relative z-index:5
   for exactly this reason; a static section cannot beat a fixed one at any
   depth, so the hero was painting straight over these cards.

   5, matching that section: equal z-index resolves on DOM order and this one
   comes later, so the two never fight. Safe to add position:relative here -
   every absolutely-positioned descendant (.mm-image-wrap, .mm-split,
   .mm-face-benefits) already resolves against a nearer positioned ancestor
   (.mm-card, .mm-front-summary), so no containing block changes. ---- */
.mm-featured-products {
  position: relative;
  z-index: 5;
}

/* ===== grey-squid homepage (owner 2026-09-14): heading in the homepage's own type, no ground of its own ===== */
.mm-bs-slot{position:relative;z-index:2;padding-top:max(24px,1.6vw);padding-bottom:max(90px,6.5vw)}
#mm-featured-template--mmfeat-bracelets{background:transparent;overflow:visible}
#mm-featured-template--mmfeat-bracelets .mm-wrap{max-width:1560px;padding-inline:max(20px,2.6vw)}
#mm-featured-template--mmfeat-bracelets .mm-grid{gap:max(14px,1.25vw)}
/* room for main.js's heading tilt: every .-h3 enters pushed down up to 170px (100px on phones) and rotated, settling as the section scrolls */
.mm-bs-head{position:relative;z-index:3;margin:0 auto calc(max(40px,3.4vw) + 110px);text-align:center;color:#462617}
#mm-featured-template--mmfeat-bracelets [class^="mm-slider-container-"]{position:relative;z-index:1}
.mm-bs-kicker{display:inline-block;margin:0 0 1.1em;padding:.5em 1.1em .45em;border:1.5px solid rgb(70 38 23/.35);border-radius:99px;font-family:"vista-med",sans-serif;font-size:clamp(12px,.85vw,15px);line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#462617}
html body .mm-bs-title.-h3{margin:0;padding:0;font-family:"vista-black",sans-serif;font-size:clamp(42px,5.4vw,104px);line-height:.9;letter-spacing:-.06em;text-transform:uppercase;color:#462617;white-space:normal}
.mm-bs-title__line{display:block}
.mm-bs-pill{display:inline-block;margin-left:.06em;padding:.04em .3em .1em;border-radius:34px 12px 30px 14px;background:#ff5f00;color:#fff;letter-spacing:-.03em;transform:rotate(-3deg) translateY(-.03em);box-shadow:0 8px 22px rgb(0 0 0/.16)}
#mm-featured-template--mmfeat-bracelets .mm-card{box-shadow:0 14px 34px rgb(70 38 23/.16)}
#mm-featured-template--mmfeat-bracelets .mm-view-all{font-family:"vista-med",sans-serif;letter-spacing:-.01em;color:#462617;border-color:rgb(70 38 23/.4);background:rgb(255 255 255/.28)}
@media (hover:hover){#mm-featured-template--mmfeat-bracelets .mm-view-all:hover{background:#ff5f00;border-color:#ff5f00;color:#fff}}
#mm-featured-template--mmfeat-bracelets .mm-slider-dot::before{background:rgb(70 38 23/.28)}
#mm-featured-template--mmfeat-bracelets .mm-slider-dot.active::before{background:#ff5f00}
@media screen and (max-width:768px){
  #mm-featured-template--mmfeat-bracelets .mm-card.mm-extra{display:none!important}
  #mm-featured-template--mmfeat-bracelets .mm-slider-dot:nth-child(n+9){display:none}
  .mm-bs-slot{padding-top:16px;padding-bottom:72px}
  .mm-bs-head{margin-bottom:96px}
}
/* owner 2026-09-14: the category paragraph above the 3 cards was removed - the cards ride ~165px up over their row by
   design, so the row needs the room the paragraph used to give (~120px clear of View all) */
@media screen and (min-width:750px){html body .-concept.mm-concept-b .row.cards{margin-top:100px!important}}
/* the section's last child is now grey-squid's .image-wrapper.upper, which carries margin-bottom:-565px (it was meant to
   tuck under the rows that used to follow it). As the last child that margin collapsed through the section and pulled
   the orange -security block 565px up underneath it (owner: "what happened to the rest of this orange thing"). 1px of
   padding keeps the margin inside the section. */
html body .-concept.mm-concept-b{padding-bottom:1px}
/* owner 2026-09-14: the 3 cards show the square promo tiles (mantra / promise / packaging) - square frames so the text in
   the tiles is never cropped */
html body .mm-concept-b .card .mm-card-media{height:auto!important;aspect-ratio:1/1;background:#fff}
html body .mm-concept-b .card .mm-card-media img.mm-card-promo{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
html body .mm-concept-b .card .text-wrapper .-subtitle{color:#462617}
html body .mm-concept-b .card .text-wrapper .-body{color:#462617;opacity:.78}
/* product tab showcase (owner 2026-09-14 "make the tab size bigger"): bigger pills; the extra category panels from
   inc/gs-tabs.php show a still photo where the Shopify panels have a video */
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK .bsv2-tabs-list{gap:12px}
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK .bsv2-tabs-list .bsv2-tab-btn{padding:15px 30px;font-size:16px;letter-spacing:.02em}
@media screen and (max-width:749px){html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK .bsv2-tabs-list .bsv2-tab-btn{padding:12px 20px;font-size:14px}}
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK .bsv2-video-wrap.mm-tab-still img.mm-tab-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* owner 2026-09-14: no tapes on the product cards; "Shop All ..." is a real button, not a thin link */
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK .bsv2-card::before{content:none!important;display:none!important}
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK div > a.bsv2-shop-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:17px 38px;border-radius:999px;background:#c96a3a;color:#fff;font-size:17px;font-weight:800;letter-spacing:.02em;line-height:1;text-decoration:none;box-shadow:0 12px 28px rgb(201 106 58/.35);transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK div > a.bsv2-shop-link:hover{background:#a4552f;color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 16px 32px rgb(164 85 47/.4)}
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK div > a.bsv2-shop-link svg{width:18px;height:18px;color:#fff;stroke:currentColor}
html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK div > a.bsv2-shop-link span{color:#fff}
@media screen and (max-width:749px){html body #shopify-section-template--21795029876876__product_tab_video_cQjhaK div > a.bsv2-shop-link{padding:15px 30px;font-size:15px}}