/** Shopify CDN: Minification failed

Line 15716:20 Unexpected "("
Line 15719:63 Unterminated string token
Line 15720:6 Expected identifier but found "%"
Line 15720:40 Unexpected "@media"
Line 15886:0 Unexpected "<"
Line 15888:1 Expected identifier but found "%"
Line 15889:54 Unexpected "<"
Line 15890:75 Unterminated string token
Line 15897:1 Expected identifier but found "%"
Line 15898:0 Unexpected "<"
... and 1 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:adl-landing (INDEX:0) */
.adl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 8rem;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
  }

  .adl__header {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    padding-bottom: 2rem;
  }

  .adl__cover {
    width: 280px;
    height: 280px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  }

  .adl__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .adl__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .adl__type {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .adl__title {
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0;
  }

  .adl__artist-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }

  .adl__artist-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .adl__artist-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .adl__artist-name { font-weight: 700; }
  .adl__dot { opacity: 0.6; font-size: 0.6rem; }
  .adl__year, .adl__track-count, .adl__mixed-by { opacity: 0.7; }
  .adl__mixed-by { font-style: italic; }

  /* ── VoxBox logo ── */
  .adl__voxbox-logo {
    height: 24px;
    width: auto;
    opacity: 0.6;
    transition: opacity 0.2s;
    vertical-align: middle;
  }
  .adl__voxbox-logo:hover { opacity: 0.9; }

  /* ── Buy Hero ── */
  .adl__buy-hero {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: stretch;
    padding: 1.5rem;
    margin: 0.5rem 0 1.5rem;
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.12) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(29, 185, 84, 0.08) 100%);
    border: 1px solid rgba(29, 185, 84, 0.25);
    border-radius: 16px;
    overflow: visible;
  }
  .adl__buy-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(29, 185, 84, 0.1) 0%, transparent 70%);
    pointer-events: none;
  }
  .adl__buy-hero-folder {
    flex-shrink: 0;
    width: 160px;
    position: relative;
    cursor: pointer;
  }
  .adl__hero-peek {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 100px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    z-index: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
  .adl__hero-peek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .adl__buy-hero-folder:hover .adl__hero-peek {
    opacity: 1;
    transform: translateX(-50%) translateY(-110px);
  }
  .adl__hero-folder-front {
    position: relative;
    z-index: 1;
  }
  .adl__hero-folder-tab {
    width: 55px;
    height: 14px;
    background: #1DB954;
    border-radius: 5px 5px 0 0;
    margin-left: 8px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom left;
  }
  .adl__buy-hero-folder:hover .adl__hero-folder-tab {
    transform: rotate(-8deg) translateY(-2px);
  }
  .adl__hero-folder-body {
    width: 100%;
    height: 120px;
    background: linear-gradient(160deg, #2ad864 0%, #1DB954 50%, #17a347 100%);
    border-radius: 2px 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(29, 185, 84, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
  }
  .adl__buy-hero-folder:hover .adl__hero-folder-body {
    box-shadow: 0 14px 36px rgba(29, 185, 84, 0.3), 0 6px 14px rgba(0, 0, 0, 0.4);
  }
  .adl__hero-folder-label {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    text-align: center;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .adl__buy-hero-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 1;
  }

  .adl__buy-hero-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.3rem 1rem;
    z-index: 2;
    background: #1DB954;
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 2rem;
  }

  .adl__buy-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
  }
  .adl__buy-hero-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.02em;
  }

  .adl__buy-hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .adl__buy-hero-pricing {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .adl__buy-hero-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .adl__buy-hero-timer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
  }

  .adl__buy-hero-timer svg {
    color: #1DB954;
    flex-shrink: 0;
  }

  .adl__buy-hero-timer strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .adl__buy-hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .adl__buy-hero-label {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .adl__buy-hero-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
  }

  .adl__buy-hero-compare {
    font-size: 0.95rem;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.35);
  }

  .adl__buy-hero-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
  }

  .adl__buy-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 3rem;
    background: #1DB954;
    color: #000;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
  }

  .adl__buy-hero-cta:hover {
    transform: scale(1.04);
    background: #1ed760;
    color: #fff !important;
  }

  /* ── Track list ── */
  .adl__list { margin-top: 0.5rem; }

  .adl__list-header {
    display: grid;
    grid-template-columns: 48px 1fr 80px 190px;
    align-items: center;
    gap: 0 5rem;
    padding: 0 1rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
  }

  .adl__track {
    display: grid;
    grid-template-columns: 48px 1fr 80px 190px;
    column-gap: 5rem;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    transition: background 0.15s ease;
    cursor: pointer;
  }

  .adl__track:hover { background: rgba(255, 255, 255, 0.08); }
  .adl__track.is-active { background: rgba(29, 185, 84, 0.1); }

  .adl__track-num {
    position: relative;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .adl__track-play-btn {
    position: absolute;
    inset: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .adl__track-play-btn svg { width: 18px; height: 18px; }
  .adl__track-play-btn .adl__icon-pause { display: none; }
  .adl__track.is-playing .adl__track-play-btn .adl__icon-play { display: none; }
  .adl__track.is-playing .adl__track-play-btn .adl__icon-pause { display: block; }

  .adl__track:hover .adl__track-idx,
  .adl__track.is-active .adl__track-idx { display: none; }
  .adl__track:hover .adl__track-play-btn,
  .adl__track.is-active .adl__track-play-btn { display: flex; }

  .adl__track.is-active .adl__track-name { color: #1DB954; }

  .adl__track-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .adl__track-name {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
  }

  .adl__track-artists {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .adl__listen-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #1DB954;
    background: rgba(29, 185, 84, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    width: fit-content;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 0.15rem;
    transition: opacity 0.15s ease;
  }
  

  .adl__col-price {
    text-align: right;
  }
  .adl__track-price {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
  }

  .adl__track-action { display: flex; justify-content: flex-end; }

  .adl__buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  .adl__buy-btn--included {
    cursor: default;
    pointer-events: none;
    border-color: rgba(29, 185, 84, 0.4);
    color: #1DB954;
    background: rgba(29, 185, 84, 0.08);
  }

  .adl__btn-short { display: none; }
  .adl__btn-full { display: inline; }

  .adl__buy-btn:hover {
    background: #fff;
    color: #000 !important;
    border-color: #fff;
    transform: scale(1.04);
  }


  .adl__footer {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
  }
  .adl__footer-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
  .adl__footer-folder {
    flex-shrink: 0;
    width: 160px;
    position: relative;
    cursor: pointer;
  }
  .adl__folder-peek {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 100px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    z-index: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
  .adl__folder-peek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .adl__footer-folder:hover .adl__folder-peek {
    opacity: 1;
    transform: translateX(-50%) translateY(-75px);
  }
  .adl__folder-front {
    position: relative;
    z-index: 1;
  }
  .adl__folder-tab {
    width: 55px;
    height: 14px;
    background: #1DB954;
    border-radius: 5px 5px 0 0;
    margin-left: 8px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom left;
  }
  .adl__footer-folder:hover .adl__folder-tab {
    transform: rotate(-8deg) translateY(-2px);
  }
  .adl__folder-body {
    width: 100%;
    height: 120px;
    background: linear-gradient(160deg, #2ad864 0%, #1DB954 50%, #17a347 100%);
    border-radius: 2px 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(29, 185, 84, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
  }
  .adl__footer-folder:hover .adl__folder-body {
    box-shadow: 0 14px 36px rgba(29, 185, 84, 0.3), 0 6px 14px rgba(0, 0, 0, 0.4);
  }
  .adl__folder-label {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    text-align: center;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .adl__footer-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .adl__footer-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1DB954;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .adl__footer-card-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
  }
  .adl__footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background: #1DB954;
    color: #000;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.15s ease, background 0.15s ease;
    width: fit-content;
  }
  .adl__footer-cta:hover {
    transform: scale(1.03);
    background: #1ed760;
    color: #000 !important;
  }
  .adl__footer-cta-compare {
    text-decoration: line-through;
    opacity: 0.5;
    font-weight: 600;
  }
  .adl__footer-timer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
  }
  .adl__footer-timer strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  /* ── Drag & Drop ── */
  .adl__dragdrop {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .adl__dragdrop-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
  }
  .adl__dragdrop-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .adl__dragdrop-label {
    display: inline-block;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1DB954;
    background: rgba(29, 185, 84, 0.18);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .adl__dragdrop-heading {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .adl__dragdrop-sub {
    font-size: clamp(0.9rem, 1.5vw, 1.0625rem);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
  }
  .adl__dragdrop-video-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 480px;
    margin-left: auto;
  }
  .adl__dragdrop-video {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ── Instagram Videos ── */
  .adl__ig-videos {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
  }
  .adl__ig-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: #fff;
  }
  .adl__ig-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 1rem;
  }
  .adl__ig-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.875rem;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .adl__ig-badge:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #1DB954;
    transform: translateY(-2px);
    color: #fff !important;
  }
  .adl__ig-carousel-wrap {
    position: relative;
    overflow: visible;
    padding: 3rem 0 1rem;
    perspective: 1000px;
  }
  .adl__ig-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 500px;
  }
  .adl__ig-card {
    position: absolute;
    width: 270px;
    height: 480px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: #121212;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transform-style: preserve-3d;
  }
  .adl__ig-card:hover {
    box-shadow: 0 0 30px rgba(29, 185, 84, 0.15), 0 30px 80px rgba(0, 0, 0, 0.8);
    border-color: #1DB954;
  }
  .adl__ig-card-0 { z-index: 1; transform: translateX(-350px) scale(0.85) rotateY(15deg); opacity: 0.5; }
  .adl__ig-card-1 { z-index: 2; transform: translateX(-175px) scale(0.92) rotateY(8deg); opacity: 0.7; }
  .adl__ig-card-2 { z-index: 10; transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; box-shadow: 0 30px 80px rgba(29, 185, 84, 0.15), 0 20px 60px rgba(0, 0, 0, 0.8); }
  .adl__ig-card-3 { z-index: 2; transform: translateX(175px) scale(0.92) rotateY(-8deg); opacity: 0.7; }
  .adl__ig-card-4 { z-index: 1; transform: translateX(350px) scale(0.85) rotateY(-15deg); opacity: 0.5; }
  .adl__ig-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .adl__ig-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(29, 185, 84, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 5;
  }
  .adl__ig-play-icon svg { margin-left: 3px; color: #000; }
  .adl__ig-play-icon.hidden { opacity: 0; }
  .adl__ig-card:hover .adl__ig-play-icon:not(.hidden) {
    transform: translate(-50%, -50%) scale(1.1);
    background: #1DB954;
  }
  .adl__ig-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
  }
  .adl__ig-btn {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .adl__ig-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
  .adl__ig-dots {
    display: none;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
  }
  .adl__ig-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .adl__ig-dot.active {
    background: #1DB954;
    width: 24px;
    border-radius: 4px;
  }

  /* ── FAQ ── */
  .adl__faq {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    max-width: 100%;
  }
  .adl__faq-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 1.25rem;
  }
  .adl__faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    min-width: 0;
  }
  .adl__faq-question {
    padding: 1rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: #fff;
  }
  .adl__faq-question::-webkit-details-marker { display: none; }
  .adl__faq-question::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    opacity: 0.5;
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .adl__faq-item[open] .adl__faq-question::after {
    content: '−';
  }
  .adl__faq-answer {
    padding: 0 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .adl__faq-answer p { margin: 0 0 0.5rem; }
  .adl__faq-answer p:last-child { margin-bottom: 0; }
  .adl__faq-answer a {
    color: #1DB954;
    text-decoration: underline;
  }
  .adl__faq-answer a:hover {
    color: #1ed760 !important;
  }

  /* ── Bottom player ── */
  .adl-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9000;
    background: #181818;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.5rem 0;
    transform: translateY(0);
    transition: transform 0.3s ease;
  }

  .adl-player__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
  }

  .adl-player__track-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }

  .adl-player__cover-mini {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .adl-player__cover-mini img { width: 100%; height: 100%; object-fit: cover; }

  .adl-player__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .adl-player__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .adl-player__artist {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .adl-player__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .adl-player__btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
  }

  .adl-player__btn:hover { color: #fff; }

  .adl-player__btn--main {
    width: 36px;
    height: 36px;
    background: #fff;
    color: #000;
    border-radius: 50%;
  }

  .adl-player__btn--main:hover { transform: scale(1.06); color: #000; }

  .adl-player__pp-pause { display: none; }
  .adl-player.is-playing .adl-player__pp-play { display: none; }
  .adl-player.is-playing .adl-player__pp-pause { display: block; }

  .adl-player__progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
    width: 100%;
    max-width: 280px;
  }

  .adl-player__time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: center;
  }

  .adl-player__progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
  }

  .adl-player__progress:hover { height: 6px; }

  .adl-player__progress-fill {
    height: 100%;
    background: #1DB954;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
  }

  .adl-player__progress:hover .adl-player__progress-fill { background: #1ed760; }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .adl { padding: 1.5rem 1rem 7rem; }

    .adl__header {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.25rem;
    }
    .adl__cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
    .adl__title { font-size: 2.5rem; }
    .adl__artist-row { justify-content: center; flex-wrap: wrap; }

    .adl__buy-hero {
      display: none;
    }

    .adl__list-header {
      grid-template-columns: 32px 1fr;
      padding: 0 0.5rem 0.5rem;
      font-size: 0.65rem;
      gap: 0;
    }
    .adl__col-price { display: none; }
    .adl__col-action { display: none; }
    .adl__track {
      grid-template-columns: 32px 1fr auto;
      padding: 0.5rem 0.5rem;
      column-gap: 0.5rem;
    }
    .adl__track-price { display: none; }
    .adl__track-name { font-size: 0.85rem; }
    .adl__track-artists { font-size: 0.7rem; }
    .adl__listen-badge { font-size: 0.55rem; padding: 0.1rem 0.4rem; }
    .adl__buy-btn { padding: 0.3rem 0.5rem; font-size: 0.5rem; white-space: nowrap; }
    .adl__btn-full { display: none; }
    .adl__btn-short { display: inline; }

    .adl-player { padding: 0.35rem 0; }
    .adl-player__inner {
      grid-template-columns: 1fr auto;
      gap: 0.5rem;
      padding: 0 1rem;
    }
    .adl-player__progress-wrap { display: none; }
    .adl-player__cover-mini { width: 44px; height: 44px; }
    .adl-player__title { font-size: 0.8rem; }
    .adl-player__artist { font-size: 0.65rem; }
    .adl-player__controls { gap: 0.5rem; }
    .adl-player__btn--main { width: 32px; height: 32px; }

    .adl__ig-carousel { height: 400px; }
    .adl__ig-card { width: 220px; height: 390px; }
    .adl__ig-card-0, .adl__ig-card-4 { display: none; }
    .adl__ig-card-1 { transform: translateX(-120px) scale(0.9); }
    .adl__ig-card-3 { transform: translateX(120px) scale(0.9); }
    .adl__ig-nav { display: none; }
    .adl__ig-dots { display: flex; }
    .adl__ig-play-icon { width: 56px; height: 56px; }
    .adl__ig-play-icon svg { width: 28px; height: 28px; }

    .adl__dragdrop { margin-top: 2rem; }
    .adl__dragdrop-container {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    .adl__dragdrop-text { text-align: center; align-items: center; }
    .adl__dragdrop-video-wrap { border-radius: 12px; }

    .adl__footer { padding-top: 2rem; }
    .adl__footer-card {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.25rem;
    }
    .adl__footer-folder { width: 130px; }
    .adl__folder-body { height: 100px; }
    .adl__folder-label { font-size: 0.95rem; }
    .adl__footer-card-body { align-items: center; }
    .adl__footer-cta {
      width: 100%;
      font-size: 1rem;
      padding: 0.9rem 2rem;
    }
    .adl__footer-timer { justify-content: center; }
  }
/* END_SECTION:adl-landing */

/* START_SECTION:announcement-bar (INDEX:1) */
.announcement {
    background: var(--color-bg);
    color: var(--color-fg);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    overflow: hidden;
    padding: 0.625rem 0;
  }
  .announcement__track {
    display: flex;
    width: max-content;
    animation: announcement-scroll 35s linear infinite;
  }
  .announcement__group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-right: 1.5rem;
    white-space: nowrap;
  }
  .announcement__dot { opacity: 0.5; color: var(--color-accent); }
  @keyframes announcement-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .announcement__track { animation: none; justify-content: center; width: 100%; }
    .announcement__group:nth-child(2) { display: none; }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:artists-using-presets (INDEX:2) */
.aup {
    padding-top: var(--pad-top);
    padding-bottom: var(--pad-bottom);
    background: var(--bg);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .aup__container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  .aup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .aup__title-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    min-width: 0;
  }

  .aup__heading {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--color-text, #fff);
    line-height: 1.1;
  }

  .aup__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    border-radius: 9999px;
    background: rgba(var(--aup-accent-rgb), 0.10);
    border: 1px solid rgba(var(--aup-accent-rgb), 0.22);
    color: rgba(var(--aup-accent-rgb), 0.95);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .aup__cta {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  .aup__cta:hover {
    color: #fff;
  }

  .aup__scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .aup__scroller-wrap {
    position: relative;
  }

  /* Invisible column so the first card isn’t flush to the edge (mobile uses wider gutter) */
  .aup__scroller-gutter {
    display: none;
    width: 0;
    min-width: 0;
    flex-shrink: 0;
    pointer-events: none;
  }

  /* Right-edge fade only (no left fade) */
  .aup__scroller {
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 97%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 97%,
      transparent 100%
    );
  }

  .aup__scroller::-webkit-scrollbar {
    height: 10px;
  }
  .aup__scroller::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
  }

  .aup-card {
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    min-height: 420px;
  }

  .aup-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    background: radial-gradient(120% 120% at 50% 0%, rgba(var(--aup-accent-rgb), 0.18) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.65) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }

  .aup-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    filter: saturate(1.05) contrast(1.05);
  }

  .aup-card__thumb-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(1.05) contrast(1.05);
    transform: scale(1.001);
    transition: opacity 240ms ease;
  }

  .aup-card__thumb-video.is-ready {
    opacity: 0.85;
  }

  .aup-card__thumb--fallback {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(168, 85, 247, 0.16) 0%, rgba(var(--aup-accent-rgb), 0.10) 45%, rgba(0, 0, 0, 0.55) 100%);
  }

  .aup-card__inline-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  .aup-card.is-playing .aup-card__inline-video {
    opacity: 1;
    pointer-events: auto;
  }

  .aup-card.is-playing .aup-card__thumb,
  .aup-card.is-playing .aup-card__thumb-video,
  .aup-card.is-playing .aup-card__thumb--fallback,
  .aup-card.is-playing .aup-card__tags,
  .aup-card.is-playing .aup-card__play {
    opacity: 0;
    pointer-events: none;
  }

  .aup-card__inline-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    z-index: 5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s ease, transform 0.15s ease;
  }

  .aup-card__inline-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
  }

  .aup-card__inline-close svg {
    width: 16px;
    height: 16px;
  }

  .aup-card__tags {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    z-index: 2;
    pointer-events: none;
  }

  .aup-card__tag {
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--aup-accent-rgb), 0.28);
    color: rgba(var(--aup-accent-rgb), 0.95);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .aup-card__duration {
    padding: 0.32rem 0.55rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .aup-card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 3;
  }

  .aup-card__play-icon {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: rgba(var(--aup-accent-rgb), 0.92);
    color: #101010;
    box-shadow: 0 18px 50px rgba(var(--aup-accent-rgb), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .aup-card__play:hover .aup-card__play-icon {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 22px 60px rgba(var(--aup-accent-rgb), 0.45);
  }

  .aup-card__play-icon svg {
    width: 22px;
    height: 22px;
  }

  .aup-card__body {
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
  }

  .aup-card__user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
  }

  .aup-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: var(--avatar, #7c3aed);
    color: #fff;
    font-weight: 900;
    font-size: 0.85rem;
    flex: 0 0 auto;
  }

  .aup-card__avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .aup-card__handle {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 800;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .aup-card__quote {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
    font-size: 0.9rem;
    flex: 1;
  }

  .aup-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
  }

  .aup-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    letter-spacing: -0.05em;
  }

  .aup-card__star {
    color: rgba(255, 255, 255, 0.18);
    font-size: 0.9rem;
    line-height: 1;
  }
  .aup-card__star.is-on {
    color: rgba(255, 199, 80, 0.95);
  }

  .aup-card__daw {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 800;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .aup-modal[hidden] {
    display: none;
  }

  .aup-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
  }

  .aup-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
  }

  .aup-modal__dialog {
    position: relative;
    width: min(980px, calc(100% - 2rem));
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #0b0d10;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    max-height: calc(100vh - 2.5rem);
    display: flex;
    flex-direction: column;
  }

  .aup-modal__close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
  }

  .aup-modal__close svg {
    width: 18px;
    height: 18px;
  }

  .aup-modal__video-wrap {
    aspect-ratio: 16 / 9;
    background: #000;
    flex: 1 1 auto;
    min-height: 0;
  }

  .aup-modal__video {
    width: 100%;
    height: 100%;
  }

  @media (max-width: 768px) {
    .aup__header {
      flex-direction: column;
      align-items: flex-start;
    }

    /* Carousel flush to viewport edges; hard clip (no fade) */
    .aup__scroller-wrap {
      margin-left: calc(-1 * var(--pad-x));
      width: calc(100% + 2 * var(--pad-x));
    }

    .aup__scroller {
      grid-auto-columns: minmax(240px, 80vw);
      -webkit-mask-image: none;
      mask-image: none;
      padding-left: 0;
      padding-right: 0;
      scroll-padding-left: calc(var(--pad-x) + 1rem + env(safe-area-inset-left, 0px));
    }

    .aup__scroller-gutter {
      display: block;
      width: calc(var(--pad-x) + 1rem + env(safe-area-inset-left, 0px));
      min-width: calc(var(--pad-x) + 1rem + env(safe-area-inset-left, 0px));
      height: 1px;
      align-self: stretch;
    }

    .aup-modal {
      padding: 0.9rem;
    }

    .aup-modal__dialog {
      width: min(980px, 100%);
      max-height: calc(100vh - 1.8rem);
    }
  }
/* END_SECTION:artists-using-presets */

/* START_SECTION:benefits (INDEX:3) */
.benefits__header {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 3rem;
  }
  .benefits__header h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -0.025em;
  }
  .benefits__header p {
    color: var(--color-muted);
    margin: 0;
    font-size: 1.0625rem;
  }
  .benefits__grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(4, 1fr);
  }
  .benefit {
    padding: 2rem 1.75rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .benefit:hover {
    border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
    transform: translateY(-4px);
  }
  .benefit__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    margin-bottom: 1.25rem;
  }
  .benefit__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.01em;
  }
  .benefit__text {
    margin: 0 0 1rem;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .benefit__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.875rem;
  }
  .benefit__link:hover { gap: 0.5rem; }

  @media (max-width: 989px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .benefits__grid { grid-template-columns: 1fr; } }
/* END_SECTION:benefits */

/* START_SECTION:blog-posts (INDEX:4) */
.blog-posts__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
  }
  .blog-posts__header h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -0.025em;
  }
  .blog-posts__header p {
    color: var(--color-muted);
    margin: 0;
    font-size: 1.0625rem;
  }

  .blog-posts__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  .blog-row {
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--color-fg);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .blog-row:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
    color: var(--color-fg);
  }
  .blog-row__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg);
  }
  .blog-row__img { width: 100%; height: 100%; object-fit: cover; }
  .blog-row__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 15%, var(--color-card)), var(--color-card));
  }
  .blog-row__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
  }
  .blog-row__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .blog-row__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
  }
  .blog-row__tag {
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .blog-posts__footer {
    text-align: center;
    margin-top: 2.75rem;
  }

  @media (max-width: 989px) {
    .blog-posts__grid { grid-template-columns: repeat(2, 1fr); }
    .blog-posts__header { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 520px) {
    .blog-posts__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:blog-posts */

/* START_SECTION:bundles (INDEX:5) */
.bundles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  .bundle-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--color-fg);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .bundle-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
    color: var(--color-fg);
  }
  .bundle-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg);
  }
  .bundle-card__img { width: 100%; height: 100%; object-fit: cover; }
  .bundle-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--color-bg), color-mix(in srgb, var(--color-accent) 20%, var(--color-card)));
  }
  .bundle-card__tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .bundle-card__body {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    gap: 0.5rem;
  }
  .bundle-card__title {
    font-size: 1.125rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .bundle-card__text {
    color: var(--color-muted);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    flex: 1;
  }
  .bundle-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    gap: 1rem;
  }
  .bundle-card__price { font-weight: 700; display: flex; gap: 0.5rem; align-items: baseline; }
  .bundle-card__sale { color: var(--color-accent); }
  .bundle-card__compare { color: var(--color-muted); text-decoration: line-through; font-size: 0.875rem; font-weight: 500; }
  .bundle-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-muted);
  }
  .bundle-card:hover .bundle-card__cta { color: var(--color-accent); }

  @media (max-width: 989px) {
    .bundles__grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .bundle-card { grid-template-columns: 1fr; }
    .bundle-card__media { aspect-ratio: 16 / 10; }
  }
/* END_SECTION:bundles */

/* START_SECTION:conversion-logo (INDEX:7) */
.conv-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    background: #fbf7f4;
  }

  .conv-logo__link {
    display: block;
    transition: opacity 0.2s ease;
  }

  .conv-logo__link:hover {
    opacity: 0.8;
  }

  .conv-logo__img {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
  }

  @media (max-width: 768px) {
    .conv-logo__img {
      height: 44px;
    }
  }
/* END_SECTION:conversion-logo */

/* START_SECTION:cta-banner (INDEX:8) */
.cta-banner__card {
    position: relative;
    padding: clamp(2rem, 5vw, 4rem);
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 55%),
      var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 1.5);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    overflow: hidden;
  }
  .cta-banner__copy h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
  }
  .cta-banner__copy p {
    margin: 0;
    color: var(--color-muted);
    max-width: 40ch;
  }
  .cta-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

  @media (max-width: 749px) {
    .cta-banner__card { grid-template-columns: 1fr; }
  }
/* END_SECTION:cta-banner */

/* START_SECTION:custom-presets-hero (INDEX:9) */
.cph-apple {
    padding-top: var(--padding-top, 56px);
    padding-bottom: var(--padding-bottom, 40px);
    text-align: center;
    background: #fbf7f4;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .cph-apple__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .cph-apple__eyebrow {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: #1d1d1f;
    margin: 0 0 0.5rem;
    line-height: 1.25;
  }

  .cph-apple__title {
    font-size: clamp(3.25rem, 9vw, 6.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #1d1d1f;
    margin: 0 0 1.6rem;
    text-wrap: balance;
  }

  .cph-apple__title--typing {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1em;
  }

  .cph-apple__typing {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
  }

  .cph-apple__typing-text {
    display: inline-block;
    white-space: nowrap;
  }

  .cph-apple__typing-caret {
    display: inline-block;
    width: 0.06em;
    height: 0.92em;
    background: currentColor;
    border-radius: 1px;
    margin-left: 0.06em;
    vertical-align: middle;
    animation: cph-caret-blink 1s steps(1) infinite;
  }

  @keyframes cph-caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cph-apple__typing-caret { animation: none; opacity: 1; }
  }

  .cph-apple__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1f;
    color: #fff;
    border-radius: 9999px;
    padding: 0.95rem 2.1rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    border: none;
    transition: background 0.18s ease, transform 0.15s ease;
    line-height: 1.2;
  }

  .cph-apple__cta:hover {
    background: #2a2a2c;
    color: #fff;
    transform: translateY(-1px);
  }

  .cph-apple__price {
    font-size: 0.825rem;
    font-weight: 400;
    color: #1d1d1f;
    margin: 0.85rem 0 0;
    letter-spacing: -0.005em;
    line-height: 1.35;
  }

  /* Clean rounded video container (no frame) */
  .cph-video {
    width: 100%;
    max-width: 900px;
    margin: 2.5rem auto 0;
    position: relative;
  }

  .cph-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 900 / 585;
    overflow: hidden;
    border-radius: 22px;
    background: #000;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.16);
  }

  .cph-apple__video,
  .cph-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    background: #000;
    display: block;
  }

  .cph-apple__unmute {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem 0.55rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font: 500 0.82rem/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.005em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.15s ease;
    z-index: 5;
    border: none;
    white-space: nowrap;
  }

  .cph-apple__unmute:hover {
    background: rgba(0, 0, 0, 0.82);
    transform: translate(-50%, -1px);
  }

  .cph-apple__unmute-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .cph-apple__unmute-icon svg {
    width: 13px;
    height: 13px;
  }

  .cph-apple__unmute-icon--unmuted {
    display: none;
  }

  .cph-video.is-unmuted .cph-apple__unmute-icon--muted {
    display: none;
  }

  .cph-video.is-unmuted .cph-apple__unmute-icon--unmuted {
    display: inline-flex;
  }

  .cph-apple__unmute-label {
    white-space: nowrap;
  }

  /* Scroll indicator (mobile only) */
  .cph-scroll {
    display: none;
  }

  @media (max-width: 768px) {
    .cph-scroll {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin: 1.6rem auto 0;
      padding: 0.4rem 0.6rem 0.6rem;
      background: transparent;
      border: none;
      color: #1d1d1f;
      cursor: pointer;
      animation: cph-scroll-bob 1.8s ease-in-out infinite;
      opacity: 0.85;
      -webkit-tap-highlight-color: transparent;
    }

    .cph-scroll:active {
      opacity: 1;
    }

    .cph-scroll__mouse {
      width: 22px;
      height: 36px;
      border: 2px solid currentColor;
      border-radius: 12px;
      position: relative;
      display: block;
    }

    .cph-scroll__wheel {
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 7px;
      background: currentColor;
      border-radius: 2px;
      animation: cph-scroll-wheel 1.6s ease-in-out infinite;
    }

    .cph-scroll__chevron {
      display: block;
      opacity: 0.85;
    }
  }

  @keyframes cph-scroll-wheel {
    0% { transform: translate(-50%, 0); opacity: 1; }
    60% { transform: translate(-50%, 10px); opacity: 0; }
    61% { transform: translate(-50%, 0); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
  }

  @keyframes cph-scroll-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cph-scroll,
    .cph-scroll__wheel { animation: none !important; }
  }

  @media (max-width: 768px) {
    .cph-apple {
      padding-top: calc(var(--padding-top, 56px) * 0.7);
      padding-bottom: clamp(140px, 26vh, 280px);
    }

    .cph-apple__container {
      padding: 0 0.5rem;
    }

    .cph-apple__eyebrow {
      font-size: 0.875rem;
    }

    .cph-apple__title {
      font-size: clamp(2.6rem, 13.5vw, 4.6rem);
      line-height: 1;
      letter-spacing: -0.05em;
      margin-bottom: 1.05rem;
    }

    .cph-apple__cta {
      padding: 0.8rem 1.7rem;
      font-size: 0.95rem;
    }

    .cph-apple__price {
      font-size: 0.78rem;
      margin-top: 0.6rem;
    }

    .cph-video {
      max-width: 96vw;
      margin-top: 1.75rem;
    }

    .cph-video__frame {
      border-radius: 16px;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
    }

    .cph-apple__unmute {
      bottom: 12px;
      padding: 0.45rem 0.85rem 0.45rem 0.6rem;
      font-size: 0.74rem;
      gap: 0.4rem;
    }

    .cph-apple__unmute-icon {
      width: 20px;
      height: 20px;
    }

    .cph-apple__unmute-icon svg {
      width: 11px;
      height: 11px;
    }
  }
/* END_SECTION:custom-presets-hero */

/* START_SECTION:custom-presets-pricing (INDEX:10) */
.cpp-apple {
    padding-top: var(--padding-top, 56px);
    padding-bottom: var(--padding-bottom, 80px);
    background: #fbf7f4;
    color: #1d1d1f;
  }

  .cpp-apple__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .cpp-apple__heading {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-align: center;
    margin: 0 0 1.65rem;
    color: #1d1d1f;
  }

  .cpp-apple__heading + .cpp-apple__sub {
    margin-top: -1.1rem;
  }

  .cpp-apple__sub {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: #6e6e73;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.75rem;
    line-height: 1.5;
  }

  .cpp-apple__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }

  .cpp-apple__card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 8px 24px rgba(15, 17, 22, 0.08);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    position: relative;
  }

  .cpp-apple__card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.05),
      0 18px 40px rgba(15, 17, 22, 0.14);
  }

  .cpp-apple__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #ececef;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }

  .cpp-apple__media-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cpp-apple__media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, 0.85) 0%, transparent 60%),
      linear-gradient(135deg, var(--card-accent, #a78bfa) 0%, #f5a623 100%);
  }

  .cpp-apple__media-placeholder-emoji {
    font-size: clamp(3rem, 9vw, 5.5rem);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.18));
  }

  .cpp-apple__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #1d1d1f;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.32rem 0.7rem;
    border-radius: 9999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    z-index: 2;
  }

  .cpp-apple__body {
    padding: 1.2rem 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
  }

  .cpp-apple__title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.2;
  }

  .cpp-apple__desc {
    font-size: 0.9rem;
    color: #424245;
    line-height: 1.5;
    margin: 0;
  }

  .cpp-apple__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0.35rem 0 0.15rem;
  }

  .cpp-apple__price {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
  }

  .cpp-apple__compare {
    font-size: 1rem;
    color: #86868b;
    text-decoration: line-through;
  }

  .cpp-apple__feats {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .cpp-apple__feat {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.825rem;
    color: #424245;
    line-height: 1.45;
  }

  .cpp-apple__feat svg {
    color: #1d1d1f;
    flex-shrink: 0;
    margin-top: 0.18rem;
  }

  .cpp-apple__cta-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding-top: 0.4rem;
  }

  .cpp-apple__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #1d1d1f;
    color: #fff;
    border-radius: 9999px;
    padding: 0.55rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
  }

  .cpp-apple__cta:hover {
    background: #2a2a2c;
    color: #fff;
    transform: translateY(-1px);
  }

  .cpp-apple__cta svg {
    transition: transform 0.18s ease;
  }

  .cpp-apple__cta:hover svg {
    transform: translateX(2px);
  }

  .cpp-apple__note {
    font-size: 0.75rem;
    color: #86868b;
    line-height: 1.45;
    margin: 0 0 0.6rem;
  }

  .cpp-apple__footer {
    text-align: center;
    font-size: 0.85rem;
    color: #6e6e73;
    margin: 2.5rem auto 0;
    max-width: 760px;
    line-height: 1.55;
  }

  @media (max-width: 992px) {
    .cpp-apple__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 749px) {
    .cpp-apple {
      padding-top: calc(var(--padding-top, 56px) * 0.65);
      padding-bottom: calc(var(--padding-bottom, 80px) * 0.65);
    }

    .cpp-apple__container {
      padding: 0 1rem;
    }

    .cpp-apple__heading {
      font-size: clamp(2.1rem, 8vw, 2.7rem);
      letter-spacing: -0.03em;
      margin-bottom: 1.5rem;
    }

    .cpp-apple__heading + .cpp-apple__sub {
      margin-top: -0.85rem;
    }

    .cpp-apple__sub {
      margin-bottom: 1.5rem;
    }

    /* Horizontal-swipe carousel on mobile */
    .cpp-apple__grid {
      display: flex;
      flex-direction: row;
      grid-template-columns: none;
      gap: 0.85rem;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      padding: 0.4rem 1rem 0.75rem;
      margin: 0 -1rem;
      scroll-padding-left: 1rem;
    }

    .cpp-apple__grid::-webkit-scrollbar {
      display: none;
    }

    .cpp-apple__card {
      flex: 0 0 78%;
      min-width: 78%;
      max-width: 78%;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      border-radius: 18px;
    }

    .cpp-apple__card:hover {
      transform: none;
    }

    .cpp-apple__media {
      aspect-ratio: 16 / 9;
    }

    .cpp-apple__body {
      padding: 0.95rem 1.05rem 1.1rem;
      gap: 0.35rem;
    }

    .cpp-apple__title {
      font-size: 1.1rem;
    }

    .cpp-apple__desc {
      display: none;
    }

    .cpp-apple__price-row {
      margin: 0.2rem 0 0.05rem;
    }

    .cpp-apple__price {
      font-size: 1.2rem;
    }

    .cpp-apple__compare {
      font-size: 0.85rem;
    }

    .cpp-apple__feats {
      gap: 0.3rem;
      margin: 0.25rem 0 0.4rem;
    }

    .cpp-apple__feat {
      font-size: 0.78rem;
      gap: 0.4rem;
    }

    .cpp-apple__cta-wrap {
      padding-top: 0.4rem;
      gap: 0.4rem;
    }

    .cpp-apple__cta {
      padding: 0.78rem 1.4rem;
      font-size: 0.98rem;
      font-weight: 600;
      width: 100%;
      justify-content: center;
    }

    .cpp-apple__cta svg {
      width: 12px;
      height: 12px;
    }

    .cpp-apple__note {
      font-size: 0.7rem;
      margin-bottom: 0.45rem;
    }

    .cpp-apple__badge {
      font-size: 0.66rem;
      padding: 0.28rem 0.6rem;
      top: 10px;
      left: 10px;
    }

    .cpp-apple__footer {
      margin-top: 1.6rem;
      font-size: 0.78rem;
    }
  }
/* END_SECTION:custom-presets-pricing */

/* START_SECTION:featured-products (INDEX:13) */
.featured-products {
    background: var(--color-bg);
    overflow: hidden;
  }
  .featured-products__wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .featured-products__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    padding-left: clamp(2rem, 22vw, 22rem);
    padding-right: clamp(2rem, 5vw, 5rem);
  }
  .featured-products__heading h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    font-weight: 600;
  }
  .featured-products__heading p {
    color: rgba(255, 255, 255, 0.55);
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
  }

  .featured-products__nav {
    display: inline-flex;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .featured-products__nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .featured-products__nav-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .featured-products__nav-btn[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .featured-products__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem clamp(2rem, 5vw, 5rem) 0.5rem clamp(2rem, 22vw, 22rem);
    scroll-padding-left: clamp(2rem, 22vw, 22rem);
    scrollbar-width: none;
  }
  .featured-products__track::-webkit-scrollbar { display: none; }

  .featured-products__item {
    scroll-snap-align: start;
    min-width: 0;
  }
  .featured-products__item .product-card {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* "All Packs" tile */
  .featured-products__item--all {
    display: flex;
  }
  .featured-products__all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 300px;
    border: 0;
    border-radius: 22px;
    background: #151516;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .featured-products__all:hover {
    background: #1d1d1f;
  }
  .featured-products__all-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .featured-products__all:hover .featured-products__all-pill {
    border-color: rgba(255, 255, 255, 0.35);
  }

  @media (min-width: 1200px) {
    .featured-products__track {
      grid-auto-columns: 340px;
    }
  }
  @media (min-width: 1600px) {
    .featured-products__track {
      grid-auto-columns: 360px;
    }
  }

  @media (max-width: 749px) {
    .featured-products__header {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .featured-products__track {
      grid-auto-columns: 86%;
      gap: 0.75rem;
      padding-left: 1rem;
      padding-right: 1rem;
      scroll-padding-left: 1rem;
    }
    .featured-products__item .product-card {
      aspect-ratio: 4 / 5;
      height: auto;
    }
    .featured-products__all {
      aspect-ratio: 4 / 5;
      min-height: 0;
      height: auto;
    }
    .featured-products__header {
      margin-bottom: 1.25rem;
    }
  }
/* END_SECTION:featured-products */

/* START_SECTION:footer (INDEX:14) */
.site-footer {
    --footer-bg: #17191d;
    --footer-fg: #e9eef5;
    --footer-muted: #8a93a6;
    --footer-border: rgba(255, 255, 255, 0.08);
    --footer-accent: var(--color-accent, #0764E8);

    background: var(--footer-bg);
    color: var(--footer-fg);
    padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
    margin-top: 0;
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif);
  }

  /* White footer on the cart page only */
  body.template-cart .site-footer {
    --footer-bg: #f2f3f5;
    --footer-fg: #0f1115;
    --footer-muted: #6b7280;
    --footer-border: #d8dce2;
  }
  body.template-cart .site-footer__logo {
    filter: invert(1) brightness(0.08);
  }
  .site-footer__wrap {
    max-width: var(--max-page-width, 1360px);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  }

  /* Top row ------------------------------------------------------------- */
  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(0, 3fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: flex-start;
    padding-bottom: clamp(2rem, 4vw, 3rem);
  }
  .site-footer__brand { display: flex; flex-direction: column; gap: 0.875rem; }
  .site-footer__logo {
    height: auto;
    width: clamp(56px, 5vw, 72px);
    display: block;
  }
  .site-footer__wordmark {
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
  }
  .site-footer__tagline {
    color: var(--footer-muted);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    max-width: 22ch;
  }
  .site-footer__copy {
    color: var(--footer-muted);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
  }

  .site-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 3rem);
  }
  .site-footer__col { min-width: 0; }
  .site-footer__heading {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1.125rem;
    color: var(--footer-fg);
  }
  .site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.875rem;
  }
  .site-footer__links a {
    color: var(--footer-fg);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-footer__links a:hover { opacity: 0.55; color: var(--footer-fg); }

  .site-footer__col--yt .site-footer__links a {
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.875rem;
  }
  .site-footer__col--yt .site-footer__links li { opacity: 0.9; }
  .site-footer__col--yt .site-footer__links.is-loading a { opacity: 0.35; pointer-events: none; }

  /* Middle row (legal + social) ---------------------------------------- */
  .site-footer__mid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--footer-border);
  }
  .site-footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
  }
  .site-footer__legal li {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--footer-muted);
    font-size: 0.8125rem;
  }
  .site-footer__legal li:not(:last-child)::after {
    content: '|';
    color: var(--footer-border);
  }
  .site-footer__legal a {
    color: var(--footer-muted);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .site-footer__legal a:hover { color: var(--footer-fg); }

  .site-footer__club {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--footer-muted);
    font-size: 0.8125rem;
  }
  .site-footer__club-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .site-footer__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
  }
  .site-footer__social li { position: relative; }
  .site-footer__social li:not(:last-child)::after {
    content: '|';
    color: var(--footer-border);
    margin: 0 0.625rem;
  }
  .site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--footer-fg);
    transition: opacity 0.2s ease;
  }
  .site-footer__social a:hover { opacity: 0.5; color: var(--footer-fg); }

  /* Base row (currency + payment) -------------------------------------- */
  .site-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--footer-border);
  }
  .site-footer__vat {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--footer-muted);
    font-size: 0.8125rem;
    flex-wrap: wrap;
    position: relative;
  }
  .site-footer__vat-sep { color: var(--footer-border); }
  .site-footer__curr {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--footer-border);
    border-radius: 999px;
    background: transparent;
    color: var(--footer-fg);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
  }
  .site-footer__curr:hover { background: rgba(15, 17, 21, 0.05); }
  .site-footer__curr--static { cursor: default; }
  .site-footer__curr--static:hover { background: transparent; }
  .site-footer__curr-flag { font-weight: 700; }

  .site-footer__curr-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid var(--footer-border);
    border-radius: 12px;
    padding: 0.375rem;
    max-height: 280px;
    overflow-y: auto;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(15, 17, 21, 0.12);
  }
  .site-footer__curr-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--footer-fg);
    font-size: 0.8125rem;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
  }
  .site-footer__curr-opt:hover { background: rgba(15, 17, 21, 0.06); }
  .site-footer__curr-opt.is-current { background: rgba(7, 100, 232, 0.08); color: var(--footer-accent); }
  .site-footer__curr-sym { color: var(--footer-muted); }
  .site-footer__curr-name {
    color: var(--footer-muted);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .site-footer__pay {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
  }
  .site-footer__pay li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
  }
  .site-footer__pay-icon,
  .site-footer__pay svg {
    height: 22px;
    width: auto;
    max-width: 38px;
    border-radius: 4px;
  }

  /* Responsive --------------------------------------------------------- */
  @media (max-width: 989px) {
    .site-footer__top {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    .site-footer__cols {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
    }
  }
  @media (max-width: 749px) {
    .site-footer { padding: 2.5rem 0 2rem; }
    .site-footer__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.75rem;
    }
    .site-footer__mid,
    .site-footer__base {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.875rem;
    }
  }
  @media (max-width: 479px) {
    .site-footer__cols { grid-template-columns: 1fr; }
    .site-footer__legal { gap: 0 0.75rem; }
    .site-footer__legal li { font-size: 0.75rem; }
    .site-footer__legal li:not(:last-child)::after { display: none; }
  }
/* END_SECTION:footer */

/* START_SECTION:free-preset-hero (INDEX:15) */
.free-hero {
    position: relative;
    width: 100%;
    padding: clamp(1.5rem, 4vh, 3.25rem) 1.5rem 8rem;
    background: var(--color-bg, #000);
    color: #fff;
    overflow: hidden;
  }

  .free-hero__stage {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
  }

  .free-hero__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .free-hero__dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.35);
    opacity: 0.35;
    animation: free-hero-twinkle 6s ease-in-out infinite, free-hero-drift 22s linear infinite;
  }
  @keyframes free-hero-twinkle {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.45; }
  }
  @keyframes free-hero-drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0, -10px, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  .free-hero__dot--1  { top:  6%; left:  4%; animation-delay: -1.2s, 0s; }
  .free-hero__dot--2  { top: 12%; left: 18%; animation-delay: -3.1s, -2s; }
  .free-hero__dot--3  { top: 22%; left:  9%; animation-delay: -0.7s, -5s; }
  .free-hero__dot--4  { top: 30%; left: 44%; animation-delay: -2.4s, -1s; }
  .free-hero__dot--5  { top: 42%; left: 22%; animation-delay: -4.8s, -8s; }
  .free-hero__dot--6  { top: 14%; left: 70%; animation-delay: -1.9s, -3s; }
  .free-hero__dot--7  { top: 26%; left: 86%; animation-delay: -3.6s, -6s; }
  .free-hero__dot--8  { top:  8%; left: 54%; animation-delay: -0.3s, -10s; }
  .free-hero__dot--9  { top: 48%; left: 72%; animation-delay: -2.1s, -4s; }
  .free-hero__dot--10 { top: 56%; left:  5%; animation-delay: -5.2s, -7s; }
  .free-hero__dot--11 { top: 62%; left: 34%; animation-delay: -1.0s, -9s; }
  .free-hero__dot--12 { top: 70%; left: 62%; animation-delay: -3.9s, -2s; }
  .free-hero__dot--13 { top: 80%; left: 18%; animation-delay: -4.4s, -11s; }
  .free-hero__dot--14 { top: 88%; left: 48%; animation-delay: -2.7s, -4s; }
  .free-hero__dot--15 { top: 92%; left: 82%; animation-delay: -1.6s, -6s; }
  .free-hero__dot--16 { top: 18%; left: 38%; animation-delay: -5.5s, -1s; }
  .free-hero__dot--17 { top: 38%; left: 96%; animation-delay: -0.9s, -12s; }
  .free-hero__dot--18 { top: 52%; left: 88%; animation-delay: -4.2s, -3s; }
  .free-hero__dot--19 { top: 72%; left:  2%; animation-delay: -3.3s, -9s; }
  .free-hero__dot--20 { top: 84%; left: 72%; animation-delay: -1.4s, -5s; }

  @media (prefers-reduced-motion: reduce) {
    .free-hero__dot { animation: none; opacity: 0.3; }
  }

  .free-hero__title {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5.5vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 55%, #5a5a5a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 1;
    pointer-events: none;
    user-select: none;
  }

  .free-hero__media {
    position: relative;
    z-index: 2;
    width: min(88%, 620px, 56vh);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(-2rem, -2.5vw, -1rem);
  }
  .free-hero__media::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 70%;
    height: 18%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0) 70%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 1;
  }
  .free-hero__img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Image ships with a baked-in black background. Blend it away against the dark page. */
    mix-blend-mode: lighten;
  }

  .free-hero__subtitle {
    position: relative;
    z-index: 3;
    margin: clamp(1rem, 2vw, 1.5rem) auto 0;
    max-width: 680px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.55;
  }

  @media (max-width: 749px) {
    .free-hero {
      /* No horizontal padding so the title can stretch edge-to-edge. */
      padding: clamp(1rem, 3vh, 2rem) 0 9rem;
    }
    .free-hero__stage { width: 100%; }
    .free-hero__media {
      width: min(70%, 320px);
      margin-top: -1.5vw;
    }
    .free-hero__title {
      /* JS sets the precise size; this is just a sensible fallback while
         the script runs (or if it fails). */
      font-size: clamp(1.5rem, 9vw, 4rem);
      letter-spacing: -0.045em;
      padding: 0 0.25rem;
    }
    .free-hero__subtitle { padding: 0 1.25rem; }
    /* Inline buy pill sits inside the no-padding stage — give it side breathing room. */
    .buy-pill--inline { margin-left: 1rem; margin-right: 1rem; }
  }

  /* Modal */
  .free-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
  }
  .free-modal[hidden] { display: none; }
  .free-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    animation: free-modal-fade 0.2s ease;
  }
  .free-modal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: #0E1116;
    border-radius: 24px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    color: #fff;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    animation: free-modal-pop 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes free-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes free-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }

  .free-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .free-modal__close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  .free-modal__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 1.5rem;
  }
  .free-modal__hero-img {
    width: clamp(220px, 70%, 360px);
    height: auto;
    object-fit: contain;
    display: block;
    /* Image ships with a baked-in black background. Blend it away against the dark modal panel. */
    mix-blend-mode: lighten;
  }

  .free-modal__title {
    margin: 0;
    text-align: center;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
  }

  .free-modal__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 1.25rem 0;
  }

  .free-modal__form {
    min-height: 80px;
  }
  .free-modal__form > div { width: 100%; }

  /* Buy pill — mirrored locally so the page works without the product hero CSS */
  .buy-pill {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    background: rgba(14, 17, 22, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
  }
  .buy-pill--inline {
    position: relative;
    z-index: 3;
    width: fit-content;
    max-width: calc(100% - 1rem);
    margin: clamp(2rem, 4vh, 3rem) auto 0;
  }
  .buy-pill__media {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
  }
  .buy-pill__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .buy-pill__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .buy-pill__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .buy-pill__price {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }
  .buy-pill__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    background: var(--color-accent, #0764E8);
    color: #fff;
    border: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-accent, #0764E8) 70%, transparent);
  }
  .buy-pill__cta:hover {
    background: color-mix(in srgb, var(--color-accent, #0764E8) 85%, #fff);
    transform: translateY(-1px);
  }

  .buy-pill--dock[data-free-buy-pill-dock] {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translate(-50%, calc(100% + 2rem));
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    width: min(640px, calc(100% - 2rem));
  }
  .buy-pill--dock[data-free-buy-pill-dock].is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }

  /* Hide docked bar when mobile mega menu is open */
  body.is-mega-locked .buy-pill--dock[data-free-buy-pill-dock] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, calc(100% + 2rem)) !important;
  }

  /* Mobile: edge-to-edge sticky bar matching the product-page styling. */
  @media (max-width: 749px) {
    .buy-pill--dock[data-free-buy-pill-dock] {
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: none;
      margin: 0;
      transform: translateY(calc(100% + 2rem));
      padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)) 1rem;
      gap: 0.75rem;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      background: rgba(14, 17, 22, 0.96);
      box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, 0.8);
    }
    .buy-pill--dock[data-free-buy-pill-dock].is-visible {
      transform: translateY(0);
    }
    body.is-mega-locked .buy-pill--dock[data-free-buy-pill-dock] {
      transform: translateY(calc(100% + 2rem)) !important;
    }
    /* Match the product page sticky bar layout: hide the small media circle,
       price first / title underneath, full-width Download button. */
    .buy-pill--dock[data-free-buy-pill-dock] .buy-pill__media { display: none; }
    .buy-pill--dock[data-free-buy-pill-dock] .buy-pill__copy {
      flex: 1;
      min-width: 0;
      padding-right: 0.5rem;
      gap: 0.125rem;
    }
    .buy-pill--dock[data-free-buy-pill-dock] .buy-pill__title {
      font-size: 0.9375rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.65);
      white-space: normal;
      line-height: 1.25;
      order: 2;
      text-transform: none;
      letter-spacing: 0;
    }
    .buy-pill--dock[data-free-buy-pill-dock] .buy-pill__price {
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      text-transform: none;
      letter-spacing: 0;
      order: 1;
    }
    .buy-pill--dock[data-free-buy-pill-dock] .buy-pill__cta {
      padding: 0.75rem 1.5rem;
      font-size: 0.9375rem;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 600;
    }
    .buy-pill--dock[data-free-buy-pill-dock] .buy-pill__cta svg { display: none; }
  }
/* END_SECTION:free-preset-hero */

/* START_SECTION:header (INDEX:22) */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    padding-top: 1rem;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.6) 45%,
      rgba(0, 0, 0, 0.3) 80%,
      rgba(0, 0, 0, 0) 100%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
    transform: translateY(0);
    will-change: transform;
  }
  .site-header.is-hidden {
    transform: translateY(-110%);
  }
  .site-header.is-mega-open {
    background: transparent;
    transform: translateY(0) !important;
  }
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .site-header__left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-self: start;
  }
  .site-header__logo { display: inline-flex; justify-self: center; }
  .site-header__logo-img { height: auto; }
  .site-header__logo-text {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
  .site-header__nav-link {
    position: relative;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-fg);
    opacity: 0.95;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
  }
  .site-header__nav-link:hover { opacity: 1; color: var(--color-fg); }
  .site-header__mega-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }
  .site-header__mega-trigger[aria-expanded="true"] { opacity: 1; }
  .site-header__nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
  }
  .site-header__mega-wrap { display: inline-flex; position: relative; }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-self: end;
  }
  .site-header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--color-fg);
    transition: background 0.15s ease;
  }
  .site-header__action:hover { background: var(--color-card); color: var(--color-fg); }
  .site-header__cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-header__menu-toggle {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--color-fg);
  }
  .site-header__menu-toggle:hover { background: var(--color-card); }
  .site-header__menu-toggle-open,
  .site-header__menu-toggle-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-header__menu-toggle .site-header__menu-toggle-close { display: none; }
  .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-open { display: none; }
  .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-close { display: inline-flex; }

  /* Mega menu panel */
  .site-mega-backdrop {
    position: fixed;
    inset: 0;
    z-index: 48;
    background: rgba(10, 12, 16, 0.32);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .site-mega-backdrop[hidden] { display: none; }
  .site-mega-backdrop.is-open {
    opacity: 1;
  }

  .site-mega {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--header-height, 112px) + 0.5rem);
    z-index: 49;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .site-mega[hidden] { display: none; }
  .site-mega.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-mega__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
  }

  .site-mega__col { min-width: 0; display: flex; flex-direction: column; }

  .site-mega__heading {
    margin: 0 0 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.01em;
  }
  .site-mega__heading--accent { color: #fff; font-weight: 600; }
  .site-mega__heading-emoji {
    font-size: 1em;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
  }

  /* Compact bundle card (used in the Bundles column) */
  .site-mega__bundle {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 1rem;
    max-width: 260px;
  }
  .site-mega__bundle:last-child { margin-bottom: 0; }
  .site-mega__bundle-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    isolation: isolate;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }
  .site-mega__bundle:hover .site-mega__bundle-media {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .site-mega__bundle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-mega__bundle:hover .site-mega__bundle-img { transform: scale(1.04); }
  .site-mega__bundle-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    transition: opacity 0.2s ease;
  }
  .site-mega__bundle:hover .site-mega__bundle-title { opacity: 0.85; }

  .site-mega__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    margin-bottom: 1rem;
    max-width: 260px;
  }

  .site-mega__hero {
    position: relative;
    display: block;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    isolation: isolate;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }
  .site-mega__hero:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.16);
  }
  .site-mega__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-mega__hero:hover .site-mega__hero-img { transform: scale(1.04); }
  .site-mega__hero-img--ph {
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
      linear-gradient(135deg, #3b82f6 0%, #7c3aed 50%, #ec4899 100%);
  }
  .site-mega__tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.2s ease;
  }
  .site-mega__tile:hover { transform: translateY(-1px); }
  .site-mega__tile-img { width: 100%; height: 100%; object-fit: cover; }
  .site-mega__tile--ph {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.35) 100%),
      var(--ph-color, #555);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }
  .site-mega__tile-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    padding: 0.25rem 0.375rem;
  }

  .site-mega__all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    padding-bottom: 0.875rem;
    margin-bottom: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 260px;
  }
  .site-mega__all svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
  .site-mega__all:hover svg { transform: translateX(3px); }

  .site-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    max-width: 260px;
  }
  .site-mega__link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: opacity 0.2s ease;
  }
  .site-mega__link:hover { opacity: 0.8; }
  .site-mega__link-title {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
  }
  .site-mega__link-desc {
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.01em;
  }

  .site-mega__col--feature {
    max-width: 280px;
  }

  .site-mega__feature {
    display: grid;
    grid-template-columns: 1fr 82px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 0.875rem;
    transition: border-color 0.2s ease, background 0.2s ease;
    color: inherit;
    text-decoration: none;
  }
  .site-mega__feature:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
  }
  .site-mega__feature-img {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .site-mega__feature-img--ph {
    display: block;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.4) 100%),
      linear-gradient(45deg, #3b82f6, #a855f7);
  }
  .site-mega__feature-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }
  .site-mega__feature-title {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
  }
  .site-mega__feature-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
  }
  .site-mega__feature-footer {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .site-mega__feature-footer:hover { opacity: 0.8; color: #fff; }

  /* Collapsible column head (desktop: no chevron, not clickable) */
  .site-mega__col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.5rem;
  }
  .site-mega__col-head .site-mega__heading { margin-bottom: 0; }
  .site-mega__chevron {
    display: none;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-mega__col-body { display: contents; }

  /* Mobile-only Shop sublist toggle (Categories dropdown) */
  .site-mega__sublist { display: contents; }
  .site-mega__sublist-head { display: none; }
  .site-mega__sublist-chev {
    display: inline-flex;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    color: rgba(255, 255, 255, 0.9);
  }

  @media (max-width: 989px) {
    .site-mega__inner { grid-template-columns: 1fr; gap: 2rem; }
    .site-mega__strip, .site-mega__hero, .site-mega__all, .site-mega__list, .site-mega__col--feature, .site-mega__bundle { max-width: none; }

    .site-mega__sublist {
      display: block;
      margin-top: 0.5rem;
    }
    .site-mega__sublist-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.75rem 0;
      background: transparent;
      border: 0;
      color: #fff;
      font-family: inherit;
      font-size: 1.0625rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .site-mega__sublist-body {
      display: none;
      animation: site-mega-col-expand 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
      margin-top: 0.5rem;
    }
    .site-mega__sublist.is-open .site-mega__sublist-body {
      display: block;
    }
    .site-mega__sublist.is-open .site-mega__sublist-chev {
      transform: rotate(180deg);
    }
  }

  .mobile-nav { display: none; }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  @media (max-width: 989px) {
    .site-header__mega-wrap { display: none; }
  }
  @media (max-width: 749px) {
    .site-header__nav { display: none; }
  }

  /* ---------- Mobile mega menu drawer ---------- */
  @media (max-width: 989px) {
    .site-header__logo-img { max-width: 60px; }

    /* Keep header color identical when the mega menu is open */
    .site-header.is-mega-open {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.6) 45%,
        rgba(0, 0, 0, 0.3) 80%,
        rgba(0, 0, 0, 0) 100%
      );
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .site-mega-backdrop {
      background: rgba(10, 12, 16, 0.6);
      backdrop-filter: saturate(180%) blur(32px);
      -webkit-backdrop-filter: saturate(180%) blur(32px);
    }

    .site-mega {
      position: fixed;
      top: var(--header-height, 88px);
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transform: translateY(12px);
    }
    .site-mega.is-open { transform: translateY(0); }

    .site-mega__inner {
      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      gap: 0;
      padding: 0.25rem 1.25rem 3rem;
      max-width: none;
    }

    .site-mega__col {
      padding: 0.75rem 0;
      border-bottom: 0;
    }
    .site-mega__col:first-child {
      padding-top: 0;
    }
    .site-mega__col:last-child { border-bottom: 0; }

    /* Collapsible head on mobile */
    .site-mega__col-head {
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      padding: 0.5rem 0;
      padding-bottom: 0.5rem;
    }
    .site-mega__chevron {
      display: inline-flex;
      width: 28px !important;
      height: 28px !important;
      color: rgba(255, 255, 255, 0.9);
    }
    .site-mega__col-body {
      display: none;
      margin-top: 1rem;
      animation: site-mega-col-expand 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .site-mega__col.is-expanded .site-mega__col-body {
      display: block;
    }
    /* Columns without a collapse head (e.g. Shop) stay open on mobile */
    .site-mega__col--no-head .site-mega__col-body {
      display: block;
      margin-top: 0;
      animation: none;
    }
    .site-mega__col.is-expanded .site-mega__chevron {
      transform: rotate(180deg);
    }
    .site-mega__col-head[aria-expanded="true"] .site-mega__heading {
      color: rgba(255, 255, 255, 0.92);
    }
    @keyframes site-mega-col-expand {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .site-mega__heading {
      margin-bottom: 0;
      font-size: 1.125rem;
      letter-spacing: -0.01em;
      text-transform: none;
      font-weight: 700;
      color: #fff;
      transition: color 0.2s ease;
    }
    .site-mega__heading--accent { font-weight: 700; color: #fff; }

    .site-mega__hero {
      aspect-ratio: 16 / 9;
      margin-bottom: 1rem;
      border-radius: 14px;
      overflow: hidden;
    }
    .site-mega__hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .site-mega__all {
      font-size: 1rem;
      padding: 0.625rem 0 0.875rem;
      margin-bottom: 0.5rem;
    }
    .site-mega__all span { font-weight: 600; }

    .site-mega__list { margin: 0; padding: 0; }
    .site-mega__list li { padding: 0; }
    .site-mega__link {
      padding: 0.875rem 0;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      border-top: 0;
    }
    .site-mega__link-title {
      display: block;
      font-size: 1rem;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    .site-mega__link-desc {
      display: block;
      font-size: 0.8125rem;
      color: rgba(255, 255, 255, 0.55);
      margin-top: 0;
    }

    .site-mega__strip {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    /* When mobile mega is open, hide page scroll underneath */
    html.is-mega-locked, body.is-mega-locked { overflow: hidden; }
  }

  /* ---------- Header search ---------- */
  .site-header__search {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .site-header__search-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .site-header__search-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(420px, 85vw);
    background: rgba(14, 16, 20, 0.96);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
    padding: 0.625rem;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 60;
  }
  .site-header__search.is-open .site-header__search-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .site-header__search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .site-header__search-form:focus-within {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.07);
  }
  .site-header__search-ico {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
  }
  .site-header__search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: inherit;
    font-size: 0.9375rem;
    padding: 0.125rem 0;
    letter-spacing: 0.005em;
  }
  .site-header__search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: opacity 0.28s ease;
  }
  .site-header__search-input.is-placeholder-swap::placeholder { opacity: 0; }
  .site-header__search-clear {
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .site-header__search-clear:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

  .site-header__search-results {
    margin-top: 0.5rem;
    padding: 0.25rem;
    max-height: 60vh;
    overflow: auto;
  }
  .site-header__search-hint {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.5rem 0.75rem 0.375rem;
  }
  .site-header__search-empty {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.75rem;
    text-align: center;
  }
  .site-header__search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .site-header__search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease;
  }
  .site-header__search-item:hover,
  .site-header__search-item.is-active {
    background: rgba(255, 255, 255, 0.08);
  }
  .site-header__search-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
  }
  .site-header__search-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .site-header__search-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header__search-title mark {
    background: transparent;
    color: var(--color-accent, #0764E8);
    font-weight: 700;
  }
  .site-header__search-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header__search-price {
    margin-left: auto;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
    padding-left: 0.5rem;
  }

  @media (max-width: 749px) {
    .site-header__search-panel {
      position: fixed;
      top: calc(var(--header-bottom, 80px));
      right: 12px;
      left: 12px;
      width: auto;
      max-width: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:23) */
.hero-fx {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(3rem, 8vh, 6rem);
    padding-bottom: clamp(8rem, 16vh, 12rem);
    isolation: isolate;
  }

  .hero-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        ellipse 55% 50% at 50% 52%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 35%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 120% 35% at 50% 0%,
        rgba(7, 100, 232, 0.14) 0%,
        rgba(255, 255, 255, 0.04) 35%,
        transparent 75%
      );
    pointer-events: none;
    z-index: 0;
  }

  .hero-fx__floating {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
  }

  .hero-fx__el {
    position: absolute;
    pointer-events: auto;
    will-change: transform, filter;
  }

  /* Inner element receives JS-driven parallax so it can compose with the
     outer ambient-float animation. */
  .hero-fx__el-inner {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  /* Depth blur — all background tiles get a base softness;
     the dedicated blur classes go heavier for depth layering. */
  .hero-fx__el           { filter: blur(0.6px); }
  .hero-fx__el--blur-sm  { filter: blur(3.5px); }
  .hero-fx__el--blur-md  { filter: blur(7px); }
  @media (min-width: 768px) {
    .hero-fx__el           { filter: blur(1px); }
    .hero-fx__el--blur-sm  { filter: blur(5px); }
    .hero-fx__el--blur-md  { filter: blur(10px); }
  }

  /* Ambient floating motion — three variants with different paths so tiles
     drift independently. */
  @keyframes hero-fx-float-a {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25%      { transform: translate(6px, -8px) rotate(0.4deg); }
    50%      { transform: translate(-4px, -4px) rotate(-0.3deg); }
    75%      { transform: translate(-6px, 6px) rotate(0.2deg); }
  }
  @keyframes hero-fx-float-b {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    33%      { transform: translate(-7px, 5px) rotate(-0.35deg); }
    66%      { transform: translate(5px, 7px) rotate(0.25deg); }
  }
  @keyframes hero-fx-float-c {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    20%      { transform: translate(4px, 6px) rotate(0.3deg); }
    45%      { transform: translate(-5px, -3px) rotate(-0.25deg); }
    70%      { transform: translate(7px, -5px) rotate(0.35deg); }
  }
  .hero-fx__el--float-a { animation: hero-fx-float-a 12s ease-in-out infinite; }
  .hero-fx__el--float-b { animation: hero-fx-float-b 14s ease-in-out infinite; }
  .hero-fx__el--float-c { animation: hero-fx-float-c 13s ease-in-out infinite; }

  .hero-fx__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  .hero-fx__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    animation: hero-fx-fade 0.5s ease forwards;
    transition: transform 0.2s ease;
    cursor: pointer;
    border-radius: 10px;
  }
  .hero-fx__link--static .hero-fx__img { cursor: default; }
  .hero-fx__link:hover .hero-fx__img { transform: scale(1.05); }

  @keyframes hero-fx-fade {
    to { opacity: 1; }
  }

  /* Uniform 1:1 aspect ratio across all tiles; only size varies. */
  .hero-fx__el { aspect-ratio: 1 / 1; }
  .hero-fx__el--md  { width: 72px; }
  .hero-fx__el--lg  { width: 88px; }
  .hero-fx__el--xl  { width: 108px; }
  .hero-fx__el--xxl { width: 128px; }

  @media (min-width: 768px) {
    .hero-fx__el--md  { width: 150px; }
    .hero-fx__el--lg  { width: 190px; }
    .hero-fx__el--xl  { width: 240px; }
    .hero-fx__el--xxl { width: 300px; }
  }

  .hero-fx__content {
    position: relative;
    z-index: 50;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
  }

  .hero-fx__badge,
  .hero-fx__title,
  .hero-fx__subtitle,
  .hero-fx__cta-wrap {
    opacity: 0;
    transform: translateY(12px);
    animation: hero-fx-intro 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-fx__badge    { animation-delay: 1.2s; margin-bottom: 0.25rem; display: inline-flex; }
  .hero-fx__title    { animation-delay: 1.55s; }
  .hero-fx__subtitle { animation-delay: 1.9s; }
  .hero-fx__cta-wrap { animation-delay: 2.15s; display: inline-flex; }

  @keyframes hero-fx-intro {
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-fx__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 8vw, 7rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
    margin: 0;
    padding: 0.1em 0.05em 0.18em;
    white-space: nowrap;
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 60%, #bdbdbd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.45));
  }

  .hero-fx__subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1.125rem, 2.25vw, 2rem);
    font-weight: 400;
    max-width: 40rem;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .hero-fx__subtitle strong,
  .hero-fx__subtitle b {
    font-weight: 800;
    color: #fff;
    letter-spacing: 0;
  }

  .hero-fx__cta-wrap { margin-top: 0.5rem; }
  .hero-fx__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 999px;
    background: rgba(10, 12, 16, 0.72);
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease,
      padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
  }
  .hero-fx__cta-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }
  .hero-fx__cta-label {
    transition: color 0.25s ease;
  }
  .hero-fx__cta-arrow {
    width: 0;
    margin-left: 0;
    opacity: 0;
    transform: translateX(-6px);
    transition:
      width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      margin-left 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
  }
  .hero-fx__cta:hover {
    transform: translateY(-1px);
    background: #ffffff;
    color: #0a0c10;
    border-color: #ffffff;
    padding-right: 2rem;
    box-shadow: 0 14px 38px -12px rgba(255, 255, 255, 0.25);
  }
  .hero-fx__cta:hover .hero-fx__cta-dot {
    background: #0a0c10;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  .hero-fx__cta:hover .hero-fx__cta-arrow {
    width: 16px;
    margin-left: 0.25rem;
    opacity: 1;
    transform: translateX(0);
  }

  /* Scroll indicator — mouse + chevron, matched to the custom-preset
     landing hero so styling is consistent across landing pages. The
     button is clickable and triggers a slow ease-in-out scroll. */
  .hero-fx__scroll {
    margin-top: clamp(2.25rem, 5vh, 3.5rem);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem 0.6rem;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    opacity: 0;
    -webkit-tap-highlight-color: transparent;
    animation:
      hero-fx-intro 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.4s forwards,
      hero-fx-bob 2.2s ease-in-out 3.2s infinite;
  }
  .hero-fx__scroll:hover,
  .hero-fx__scroll:active { color: rgba(255, 255, 255, 0.95); }
  .hero-fx__scroll:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
    border-radius: 8px;
  }

  .hero-fx__scroll-mouse {
    width: 22px;
    height: 36px;
    border: 2px solid currentColor;
    border-radius: 12px;
    position: relative;
    display: block;
  }
  .hero-fx__scroll-wheel {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 7px;
    background: currentColor;
    border-radius: 2px;
    animation: hero-fx-scroll-wheel 1.6s ease-in-out infinite;
  }
  .hero-fx__scroll-chevron {
    display: block;
    opacity: 0.9;
  }

  @keyframes hero-fx-scroll-wheel {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    60%  { transform: translate(-50%, 10px); opacity: 0; }
    61%  { transform: translate(-50%, 0); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
  }

  @keyframes hero-fx-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-fx__scroll-wheel { animation: none !important; }
  }

  .hero-fx__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  .hero-fx__dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.35);
    opacity: 0.35;
    animation: hero-fx-twinkle 6s ease-in-out infinite, hero-fx-drift 22s linear infinite;
  }
  @keyframes hero-fx-twinkle {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.45; }
  }
  @keyframes hero-fx-drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0, -10px, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }

  /* Scattered star positions */
  .hero-fx__dot--1  { top:  6%; left:  4%; animation-delay: -1.2s, 0s; }
  .hero-fx__dot--2  { top: 12%; left: 18%; animation-delay: -3.1s, -2s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--3  { top: 22%; left:  9%; animation-delay: -0.7s, -5s; }
  .hero-fx__dot--4  { top: 30%; left: 44%; animation-delay: -2.4s, -1s; }
  .hero-fx__dot--5  { top: 42%; left: 22%; animation-delay: -4.8s, -8s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--6  { top: 14%; left: 70%; animation-delay: -1.9s, -3s; }
  .hero-fx__dot--7  { top: 26%; left: 86%; animation-delay: -3.6s, -6s; }
  .hero-fx__dot--8  { top:  8%; left: 54%; animation-delay: -0.3s, -10s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--9  { top: 48%; left: 72%; animation-delay: -2.1s, -4s; }
  .hero-fx__dot--10 { top: 56%; left:  5%; animation-delay: -5.2s, -7s; }
  .hero-fx__dot--11 { top: 62%; left: 34%; animation-delay: -1.0s, -9s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--12 { top: 70%; left: 62%; animation-delay: -3.9s, -2s; }
  .hero-fx__dot--13 { top: 80%; left: 18%; animation-delay: -4.4s, -11s; }
  .hero-fx__dot--14 { top: 88%; left: 48%; animation-delay: -2.7s, -4s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--15 { top: 92%; left: 82%; animation-delay: -1.6s, -6s; }
  .hero-fx__dot--16 { top: 18%; left: 38%; animation-delay: -5.5s, -1s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--17 { top: 38%; left: 96%; animation-delay: -0.9s, -12s; }
  .hero-fx__dot--18 { top: 52%; left: 88%; animation-delay: -4.2s, -3s; }
  .hero-fx__dot--19 { top: 72%; left:  2%; animation-delay: -3.3s, -9s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--20 { top: 84%; left: 72%; animation-delay: -1.4s, -5s; }
  .hero-fx__dot--21 { top:  4%; left: 32%; animation-delay: -2.8s, -7s; }
  .hero-fx__dot--22 { top: 36%; left: 60%; animation-delay: -5.8s, -10s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--23 { top: 58%; left: 44%; animation-delay: -0.5s, -2s; }
  .hero-fx__dot--24 { top: 76%; left: 90%; animation-delay: -2.2s, -8s; }
  .hero-fx__dot--25 { top: 16%; left: 92%; animation-delay: -4.6s, -4s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--26 { top: 46%; left: 14%; animation-delay: -1.8s, -11s; }
  .hero-fx__dot--27 { top: 68%; left: 26%; animation-delay: -3.5s, -6s; }
  .hero-fx__dot--28 { top: 94%; left: 30%; animation-delay: -0.2s, -1s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--29 { top: 24%; left: 50%; animation-delay: -4.9s, -13s; }
  .hero-fx__dot--30 { top: 34%; left: 28%; animation-delay: -2.5s, -3s; }
  .hero-fx__dot--31 { top: 10%; left: 84%; animation-delay: -5.1s, -9s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--32 { top: 64%; left: 96%; animation-delay: -1.3s, -2s; }
  .hero-fx__dot--33 { top: 78%; left: 52%; animation-delay: -3.8s, -12s; }
  .hero-fx__dot--34 { top: 86%; left:  8%; animation-delay: -0.6s, -7s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--35 { top: 20%; left: 78%; animation-delay: -2.9s, -4s; }
  .hero-fx__dot--36 { top: 54%; left: 58%; animation-delay: -4.3s, -10s; }
  .hero-fx__dot--37 { top: 40%; left:  6%; animation-delay: -1.7s, -6s; width: 1.5px; height: 1.5px; }
  .hero-fx__dot--38 { top: 60%; left: 20%; animation-delay: -5.4s, -1s; }
  .hero-fx__dot--39 { top: 28%; left: 66%; animation-delay: -3.0s, -14s; }
  .hero-fx__dot--40 { top: 50%; left: 36%; animation-delay: -0.8s, -5s; width: 1.5px; height: 1.5px; }

  @media (prefers-reduced-motion: reduce) {
    .hero-fx__img,
    .hero-fx__badge,
    .hero-fx__title,
    .hero-fx__subtitle,
    .hero-fx__cta-wrap,
    .hero-fx__scroll,
    .hero-fx__dot {
      animation: none;
      opacity: 1;
      transform: none;
    }
    .hero-fx__dot { opacity: 0.3; }
  }

  @media (max-width: 749px) {
    .hero-fx {
      min-height: 85vh;
      min-height: 85svh;
      /* Balance the asymmetric desktop padding (3rem top vs 12rem bottom)
         on mobile so the content sits in the actual visual center of the
         section instead of being pushed up by the heavy bottom padding.
         The slight top > bottom skew nudges the badge / button / scroll
         indicator down a touch from a hard center. */
      padding-top: clamp(5rem, 14vh, 8rem);
      padding-bottom: clamp(4rem, 10vh, 6rem);
    }

    .hero-fx__content {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .hero-fx__title {
      font-size: clamp(3rem, 16vw, 7rem);
      white-space: nowrap;
      line-height: 0.98;
      letter-spacing: -0.05em;
      padding: 0.05em 0 0.12em;
      margin-left: -1rem;
      margin-right: -1rem;
    }

    .hero-fx__subtitle {
      font-size: clamp(1.25rem, 5.5vw, 1.75rem);
      line-height: 1.15;
      max-width: 100%;
    }

    .hero-fx__cta {
      padding: 1.1rem 1.75rem;
      font-size: 1.0625rem;
      gap: 0.75rem;
    }
    .hero-fx__cta-dot { width: 9px; height: 9px; }

    .hero-fx__scroll {
      margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
    }
  }
/* END_SECTION:hero */

/* START_SECTION:home-faq (INDEX:24) */
.hfaq {
    background: #0a0b0e;
    padding: 5rem 1.25rem 6rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .hfaq__inner {
    max-width: 720px;
    margin: 0 auto;
  }
  .hfaq__intro {
    margin-bottom: 2.5rem;
  }
  .hfaq__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f4dff;
    margin: 0 0 0.85rem;
  }
  .hfaq__title {
    font-size: clamp(1.75rem, 5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 0.75rem;
  }
  .hfaq__subtitle {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.45);
    margin: 0;
  }
  .hfaq__list {
    display: flex;
    flex-direction: column;
  }
  .hfaq__item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .hfaq__item:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .hfaq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .hfaq__summary::-webkit-details-marker { display: none; }
  .hfaq__emoji {
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1;
    width: 2.2rem;
    text-align: center;
    user-select: none;
  }
  .hfaq__q {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }
  .hfaq__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    transition: background 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
  }
  .hfaq__item[open] .hfaq__icon {
    transform: rotate(180deg);
    background: rgba(111,77,255,0.18);
    color: #a78bfa;
  }
  .hfaq__body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hfaq__item[open] .hfaq__body {
    max-height: 500px;
  }
  .hfaq__a {
    padding: 0 0 1.35rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.55);
  }
  .hfaq__a p { margin: 0 0 0.6rem; }
  .hfaq__a p:last-child { margin-bottom: 0; }
  .hfaq__a a {
    color: #a78bfa;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .hfaq__summary:hover .hfaq__icon {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
  }
  .hfaq__item[open] .hfaq__summary:hover .hfaq__icon {
    background: rgba(111,77,255,0.25);
  }
/* END_SECTION:home-faq */

/* START_SECTION:legal-page (INDEX:25) */
.legal-page {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    color: var(--color-fg, #0f1115);
  }
  .legal-page__wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
  }
  .legal-page__header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  }
  .legal-page__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent, #0764E8);
    margin: 0 0 0.75rem;
  }
  .legal-page__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
  }
  .legal-page__updated {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: color-mix(in srgb, currentColor 60%, transparent);
  }
  .legal-page__body.rte {
    line-height: 1.7;
    font-size: 1rem;
    color: color-mix(in srgb, currentColor 88%, transparent);
  }
  .legal-page__body.rte h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
    color: var(--color-fg, #0f1115);
  }
  .legal-page__body.rte h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
  }
  .legal-page__body.rte p,
  .legal-page__body.rte ul,
  .legal-page__body.rte ol {
    margin: 0 0 1rem;
  }
  .legal-page__body.rte ul,
  .legal-page__body.rte ol {
    padding-left: 1.25rem;
  }
  .legal-page__body.rte li { margin-bottom: 0.375rem; }
  .legal-page__body.rte a {
    color: var(--color-accent, #0764E8);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .legal-page__body.rte strong { color: var(--color-fg, #0f1115); font-weight: 700; }

  .legal-page__contact {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, currentColor 4%, transparent);
    text-align: center;
  }
  .legal-page__contact-label {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    color: color-mix(in srgb, currentColor 65%, transparent);
  }
  .legal-page__contact-email {
    display: inline-block;
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-accent, #0764E8);
    text-decoration: none;
    word-break: break-all;
  }
  .legal-page__contact-email:hover { text-decoration: underline; }
/* END_SECTION:legal-page */

/* START_SECTION:logo-list (INDEX:26) */
.logo-list__title {
    text-align: center;
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0 0 1.5rem;
  }
  .logo-list__items {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    align-items: center;
  }
  .logo-list__item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
  }
  .logo-list__item:hover { opacity: 1; }
  .logo-list__img { max-height: 32px; width: auto; filter: grayscale(1) brightness(1.4); }
  .logo-list__wordmark {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  @media (max-width: 749px) {
    .logo-list__items { grid-template-columns: repeat(3, 1fr); }
  }
/* END_SECTION:logo-list */

/* START_SECTION:main-article (INDEX:28) */
.article__wrap { max-width: 780px; }
  .article__header { margin-bottom: 2rem; text-align: center; }
  .article__meta { color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
  .article__author { color: var(--color-muted); }
  .article__media {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-bottom: 2rem;
    background: var(--color-card);
  }
  .article__img { width: 100%; height: 100%; object-fit: cover; }
/* END_SECTION:main-article */

/* START_SECTION:main-cart (INDEX:30) */
:root {
    --cart-bg: #f2f3f5;
    --cart-fg: #0f1115;
    --cart-muted: #6b7280;
    --cart-border: #e5e7eb;
    --cart-card: #ffffff;
    --cart-accent: var(--color-accent, #0764E8);
  }

  /* Light page fill only below the drawer breakpoint — desktop blurs the live page. */
  @media (max-width: 749px) {
    body.template-cart,
    body.template-cart main { background: var(--cart-bg); }
  }

  /* Invert header on cart page (desktop only — mobile uses the dark drawer overlay) */
  @media (min-width: 900px) {
    body.template-cart .site-header,
    body.template-cart .site-header.is-mega-open {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    body.template-cart .site-header__logo-img {
      filter: invert(1) brightness(0.08);
    }
    body.template-cart .site-header__menu-toggle,
    body.template-cart .site-header__nav-link,
    body.template-cart .site-header__logo-text,
    body.template-cart .site-header__action {
      color: var(--cart-fg);
    }
    body.template-cart .site-header__menu-toggle:hover,
    body.template-cart .site-header__action:hover {
      background: rgba(15, 17, 21, 0.08);
    }
  }

  .cart-page {
    color: var(--cart-fg);
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif);
    padding: clamp(1.5rem, 4vw, 3.5rem) 0 4rem;
    min-height: calc(100vh - var(--header-height, 112px));
  }

  .cart-page__sheet { position: relative; }

  .cart-page__mobile-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--cart-card);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .cart-page__mobile-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cart-page__count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #0f1115;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
  }
  .cart-page__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(15, 17, 21, 0.08);
    border: 0;
    color: #0f1115;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .cart-page__close:hover { background: rgba(15, 17, 21, 0.14); }

  /* Empty state */
  .cart-page__empty {
    max-width: 480px;
    margin: 4rem auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--cart-card);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  }
  .cart-page__empty h2 { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
  .cart-page__empty p { color: var(--cart-muted); margin: 0 0 1.5rem; }
  .cart-page__empty-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.875rem 1.5rem; border-radius: 999px;
    background: var(--cart-accent); color: #fff; font-weight: 600;
    text-decoration: none; transition: filter 0.2s ease, transform 0.2s ease;
  }
  .cart-page__empty-btn:hover { filter: brightness(1.05); transform: translateY(-1px); color: #fff; }

  /* Layout */
  .cart-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
  }
  @media (min-width: 900px) {
    .cart-page__grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); align-items: start; }
  }

  .cart-page__intro--desktop {
    max-width: 1120px;
    margin: 0 auto 1.5rem;
    padding: 0 clamp(1rem, 3vw, 2rem);
  }
  .cart-page__title {
    margin: 0 0 0.375rem;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .cart-page__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--cart-muted);
  }
  .cart-page__subtitle svg { color: var(--cart-muted); flex-shrink: 0; }

  /* Cart items */
  .cart-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cart-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: var(--cart-card);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  }
  /* Always float the free gift to the top of the cart, regardless of the
     order Shopify returns the line items in. .cart-items is a flex column
     so a negative order value pulls .cart-item--gift above every other
     line. data-line attributes (used by /cart/change.js) are unaffected. */
  .cart-item--gift { order: -1; }
  .cart-item__image {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
  }
  .cart-item__img, .cart-item__img--ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cart-item__img--ph {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  }
  .cart-item__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
  .cart-item__title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cart-fg);
    text-decoration: none;
    line-height: 1.25;
  }
  .cart-item__title:hover { color: var(--cart-fg); text-decoration: underline; text-underline-offset: 3px; }
  .cart-item__subtitle, .cart-item__variant {
    font-size: 0.8125rem;
    color: var(--cart-muted);
    line-height: 1.35;
  }
  .cart-item__variant--editable {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    padding: 0.125rem 0.5rem 0.125rem 0;
    border: 0;
    background: transparent;
    color: var(--cart-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.2;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
    width: fit-content;
    max-width: 100%;
  }
  .cart-item__variant--editable:hover,
  .cart-item__variant--editable:focus-visible {
    color: var(--cart-fg);
    outline: none;
  }
  .cart-item__variant--editable .cart-item__variant-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cart-item__variant--editable .cart-item__variant-caret {
    flex-shrink: 0;
    transition: transform 0.18s ease;
    color: currentColor;
    opacity: 0.7;
  }
  .cart-item__variant--editable[aria-expanded="true"] .cart-item__variant-caret {
    transform: rotate(180deg);
  }
  .cart-item__variant-hint {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2563eb;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .cart-item__variant--editable:hover .cart-item__variant-hint,
  .cart-item__variant--editable:focus-visible .cart-item__variant-hint,
  .cart-item__variant--editable[aria-expanded="true"] .cart-item__variant-hint {
    opacity: 1;
    transform: translateX(0);
  }
  .cart-item__variant--editable[disabled] {
    opacity: 0.6;
    cursor: progress;
  }
  /* On mobile, hide the "change" hint so the variant title can use the
     full width without truncating. The caret keeps the affordance clear. */
  @media (max-width: 749px) {
    .cart-item__variant-hint { display: none; }
  }
  /* Variant swap popover */
  .cart-variant-popover {
    position: fixed;
    z-index: 9050;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 18px 40px -16px rgba(15, 17, 21, 0.28), 0 6px 18px -10px rgba(15, 17, 21, 0.18);
    padding: 0.625rem;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(360px, 60vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cart-variant-popover[hidden] { display: none !important; }
  .cart-variant-popover__head {
    padding: 0.125rem 0.375rem 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
  }
  .cart-variant-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .cart-variant-popover__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f9fafb;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: #0f1115;
    font-family: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .cart-variant-popover__btn-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .cart-variant-popover__btn-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .cart-variant-popover__btn-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .cart-variant-popover__btn:hover:not([disabled]) {
    background: #eff6ff;
    border-color: #c7dbff;
  }
  .cart-variant-popover__btn[aria-current="true"] {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1e3a8a;
  }
  .cart-variant-popover__btn[disabled] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
  }
  .cart-variant-popover__btn-meta {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
  }
  .cart-variant-popover__btn[aria-current="true"] .cart-variant-popover__btn-meta { color: #2563eb; }
  .cart-variant-popover__loading {
    padding: 0.875rem 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #6b7280;
  }
  .cart-item__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    text-align: right;
  }
  .cart-item__price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cart-fg);
    white-space: nowrap;
  }
  .cart-item__remove {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cart-muted);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .cart-item__remove:hover { color: #ef4444; }

  .cart-item__qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(15, 17, 21, 0.04);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 999px;
    padding: 0.125rem;
    user-select: none;
  }
  .cart-item__qty-btn {
    appearance: none;
    border: 0;
    background: transparent;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--cart-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cart-item__qty-btn:hover:not(:disabled) {
    background: rgba(15, 17, 21, 0.08);
  }
  .cart-item__qty-btn:active:not(:disabled) { transform: scale(0.92); }
  .cart-item__qty-btn:disabled {
    color: var(--cart-muted);
    cursor: not-allowed;
    opacity: 0.55;
  }
  .cart-item__qty-value {
    min-width: 1.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cart-fg);
  }
  .cart-item--qty.is-updating .cart-item__qty {
    opacity: 0.6;
    pointer-events: none;
  }

  /* Bundle picker — two render slots, one visible per viewport.
     - cart-builder-slot--in-main     : default location inside .cart-page__main
                                        (visible on mobile/tablet)
     - cart-builder-slot--in-summary  : nested inside .cart-page__summary aside
                                        (visible on desktop only, under the
                                        summary card and sticky with it) */
  .cart-builder-slot--in-summary { display: none !important; }
  @media (min-width: 900px) {
    .cart-builder-slot--in-main { display: none !important; }
    .cart-builder-slot--in-summary { display: block !important; }
    /* Inside the summary aside the bundle picker stacks directly under
       the summary card. The .cart-builder already supplies its own
       margin-top so no extra spacing is needed here. On the narrower
       sidebar we also dial the inner padding & slot min-height down so
       3 preset slots fit comfortably in column 2. */
    .cart-builder-slot--in-summary .cart-builder {
      padding: 0.85rem 0.85rem 0.95rem;
    }
    .cart-builder-slot--in-summary .cart-builder__slots { gap: 0.5rem; }
    .cart-builder-slot--in-summary .cart-builder__slot { min-height: 96px; padding: 0.6rem 0.35rem 0.65rem; }
    .cart-builder-slot--in-summary .cart-builder__slot-label { font-size: 0.7rem; }
  }

  /* Summary — desktop only sticky sidebar.
     CRITICAL: this MUST be wrapped in @media (min-width: 900px). If left
     unscoped, the `top: calc(...)` value leaks into the mobile fixed-bar
     rule (which only overrides position/left/right/bottom) and the bar
     ends up stretched from top:132px down to bottom:0, putting the visible
     card at the top of the viewport instead of pinned to the bottom. */
  @media (min-width: 900px) {
    .cart-page__summary { position: sticky; top: calc(var(--header-height, 112px) + 1.25rem); }
  }
  .cart-summary {
    background: var(--cart-card);
    border-radius: 18px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  }
  .cart-summary__title {
    margin: 0 0 1.125rem;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
  }
  .cart-summary__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cart-fg);
  }
  .cart-summary__label--muted { color: var(--cart-muted); }
  .cart-summary__value--muted { color: var(--cart-muted); }
  .cart-summary__row--discount {
    padding-top: 0;
    font-size: 0.8125rem;
  }
  .cart-summary__row--discount .cart-summary__label {
    color: var(--cart-muted);
    font-weight: 600;
  }
  .cart-summary__value--discount {
    color: #16a34a;
    font-weight: 700;
  }
  .cart-summary__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 17, 21, 0.06);
    color: var(--cart-fg);
    font-size: 0.75rem;
    font-weight: 600;
  }
  /* Promo flag on the Bundle savings row — green so it reads as a deal. */
  .cart-summary__pill--bundle {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.5rem;
  }
  .cart-summary__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cart-muted);
    cursor: help;
  }

  .cart-summary__divider {
    height: 1px;
    background: var(--cart-border);
    margin: 0.375rem 0;
  }

  .cart-summary__total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0 1rem;
  }
  .cart-summary__total-label {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .cart-summary__total-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .cart-summary__currency {
    color: var(--cart-muted);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .cart-summary__total-value strong {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .cart-summary__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.9375rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--cart-accent);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
  }
  .cart-summary__checkout:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
  }

  .cart-summary__urgency {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0 0 0.875rem;
    padding: 0.375rem 0.625rem 0.375rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #b91c1c;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    animation: cartUrgencyPulse 2.4s ease-in-out infinite;
  }
  .cart-summary__urgency-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: cartUrgencyDot 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes cartUrgencyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.06); }
  }
  @keyframes cartUrgencyDot {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  }


  /* FAQ section */
  .cart-faq {
    margin: clamp(8rem, 18vw, 14rem) auto 0;
    max-width: 1120px;
    padding: 0 clamp(1rem, 3vw, 2rem);
  }
  @media (max-width: 749px) {
    .cart-faq {
      margin-top: 1rem;
      padding: 0 1rem;
    }
    .cart-faq__intro {
      margin-bottom: 0.75rem;
    }
    .cart-faq__title {
      font-size: 1.2rem;
      letter-spacing: -0.02em;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
    .cart-faq__subtitle {
      font-size: 0.825rem;
      line-height: 1.45;
    }
    .cart-faq__item > summary {
      padding: 0.85rem 0.25rem;
      font-size: 0.9rem;
    }
    .cart-faq__a {
      padding: 0.05rem 0.25rem 0.95rem;
      font-size: 0.875rem;
      line-height: 1.5;
    }
    .cart-faq__list {
      padding: 0.1rem 1rem;
    }
  }
  .cart-faq__intro { margin-bottom: 2rem; }
  .cart-faq__intro {
    margin-bottom: 1.5rem;
    max-width: 640px;
  }
  .cart-faq__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
  }
  .cart-faq__subtitle {
    margin: 0;
    color: var(--cart-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .cart-faq__list {
    background: var(--cart-card);
    border-radius: 18px;
    padding: 0.25rem 1.25rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  }
  .cart-faq__item {
    border-bottom: 1px solid var(--cart-border);
  }
  .cart-faq__item:last-child { border-bottom: 0; }
  .cart-faq__item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 0.25rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cart-fg);
  }
  .cart-faq__item > summary::-webkit-details-marker { display: none; }
  .cart-faq__item > summary svg {
    color: var(--cart-muted);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
  }
  .cart-faq__item[open] > summary svg { transform: rotate(180deg); }

  /* Animated open/close: wrap the answer in a collapsible box */
  .cart-faq__body {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition:
      height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s ease;
  }
  .cart-faq__item[open] .cart-faq__body { opacity: 1; }
  .cart-faq__a {
    padding: 0.125rem 0.25rem 1.25rem;
    color: var(--cart-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    transform: translateY(-4px);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cart-faq__item[open] .cart-faq__a { transform: translateY(0); }
  .cart-faq__a p { margin: 0 0 0.75rem; }
  .cart-faq__a p:last-child { margin-bottom: 0; }
  .cart-faq__a a { color: var(--cart-accent); text-decoration: underline; text-underline-offset: 3px; }

  /* Mobile ------------------------------------------------------------- */
  @media (max-width: 899px) {
    /* HARD RULE: .cart-page MUST NEVER have a `transform` (or filter,
       perspective, will-change: transform, contain: paint, etc.) applied
       to it on mobile. Any of those turn it into a containing block for
       position:fixed descendants — which would re-anchor the checkout
       bar to .cart-page (which extends past the FAQ) instead of the
       viewport, stranding the bar in the middle of the screen.
       The previous slide-up animation used transform: translateY(...) and
       was the source of multiple regressions; it's intentionally gone.
       If you bring back any kind of slide animation, animate something
       other than transform (clip-path, height, opacity), or move .cart-page__summary out of .cart-page first. */
    @keyframes cartDrawerSlide {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    body.template-cart,
    body.template-cart main { background: #0b0d10; }
    body.template-cart { overflow-x: hidden; }

    .cart-page {
      padding: 0;
      background: var(--cart-card);
      min-height: 100vh;
      position: relative;
      z-index: 1;
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
      margin-top: 56px;
      box-shadow: 0 -18px 40px rgba(10, 12, 16, 0.28);
      animation: cartDrawerSlide 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .cart-page__sheet {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 44px);
    }
    .cart-page__mobile-head {
      display: flex;
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--cart-card);
      padding: 1rem 1.25rem;
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
      border-bottom: 1px solid var(--cart-border);
    }
    .cart-page__mobile-head::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: rgba(15, 17, 21, 0.15);
    }
    .cart-page__intro--desktop { display: none; }

    .cart-page__grid {
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
      padding: 2rem 1rem 1.25rem;
    }
    .cart-page__main { margin-top: 0.375rem; }
    .cart-item {
      grid-template-columns: 80px minmax(0, 1fr) auto;
      padding: 1rem;
      background: #fafbfc;
      box-shadow: none;
      border: 1px solid var(--cart-border);
    }
    .cart-item__image { width: 80px; height: 80px; }
    /* Always-visible checkout bar on mobile. Uses position:fixed so it
       stays pinned regardless of scroll context (works in both the
       standalone /cart page and inside the cart drawer's transformed
       panel — the transform makes "fixed" anchor to the panel, which
       itself sits at the viewport bottom, so the result is the same:
       a bottom-anchored bar). The !important flags here are intentional
       — they guard against any drawer/section CSS or accelerated-checkout
       stylesheets that try to reset positioning back to static/sticky. */
    .cart-page__summary {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      top: auto !important;
      z-index: 50 !important;
      margin: 0 !important;
    }
    .cart-summary {
      padding: 0.9rem 1rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
      border-radius: 18px 18px 0 0;
      background: #ffffff;
      box-shadow:
        0 -10px 24px rgba(15, 17, 22, 0.10),
        0 -1px 0 rgba(15, 17, 22, 0.06);
      border: none;
    }
    /* Bar is just Total + Checkout — title, subtotal row, divider hidden.
       The Bundle savings row (.cart-summary__row--discount) is kept
       visible so the customer can see the "Buy 2 Get 1 Free" pricing in
       the mobile checkout bar too. */
    .cart-summary__title,
    .cart-summary__row:not(.cart-summary__row--discount),
    .cart-summary__divider { display: none; }
    .cart-summary__row--discount {
      padding: 0 0 0.35rem;
      font-size: 0.78rem;
      line-height: 1.2;
      flex-wrap: wrap;
    }
    .cart-summary__row--discount .cart-summary__label { gap: 0.4rem; }
    .cart-summary__total-row {
      margin-top: 0;
      padding: 0 0 0.5rem;
      border-top: none;
    }
    .cart-summary__checkout { margin-top: 0; }
    /* Reserve space at the bottom of the cart content so the last
       items / bundle / gift don't sit behind the fixed checkout bar. */
    .cart-page__grid {
      padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    }

    .cart-faq {
      padding: 0.85rem 1rem 1.25rem;
      margin-top: 0.85rem;
      background: var(--cart-bg);
    }
    .cart-faq__intro { padding-top: 0.25rem; }
    .cart-faq__list {
      background: var(--cart-card);
      border: 1px solid var(--cart-border);
      box-shadow: none;
    }
  }

  /* Bundle slot picker (under cart items) — buy 2, get 1 free */
  .cart-builder {
    --bb-bonus: #8cc52f;
    --bb-bonus-soft: #f4f9e5;
    --bb-bonus-fill: #eaf5cd;
    margin: 1rem 0 0;
    padding: 0.95rem 1rem 1.05rem;
    background: var(--cart-card, #ffffff);
    border: 1px solid var(--cart-border, #e6e7ea);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 17, 22, 0.04);
  }
  .cart-builder__head {
    text-align: center;
    margin-bottom: 0.8rem;
  }
  .cart-builder__title {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--cart-fg, #0f1115);
  }
  .cart-builder__sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cart-muted, #4b5562);
    line-height: 1.45;
  }
  .cart-builder__sub strong {
    color: var(--cart-fg, #0f1115);
    font-weight: 700;
  }
  .cart-builder__slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
  .cart-builder__slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.45rem 0.75rem;
    background: #fafbfc;
    border: 1px solid #e6e7ea;
    border-radius: 12px;
    min-height: 108px;
    text-align: center;
  }
  .cart-builder__slot.is-filled {
    background: #ffffff;
    border-color: #d6d8dd;
  }
  .cart-builder__slot-media {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #ececef;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-builder__slot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cart-builder__slot-ph {
    font-size: 1.4rem;
  }
  .cart-builder__slot-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cart-fg, #0f1115);
    line-height: 1.2;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    padding: 0 2px;
  }
  .cart-builder__slot-placeholder {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6b7280;
  }
  .cart-builder__slot--pickable {
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .cart-builder__slot--pickable:hover {
    background: #ffffff;
    border-color: var(--cart-accent, #0764E8);
  }
  .cart-builder__slot--pickable:hover .cart-builder__slot-placeholder { color: var(--cart-accent, #0764E8); }
  .cart-builder__slot--pickable:hover .cart-builder__slot-plus { background: var(--cart-accent, #0764E8); color: #fff; border-color: var(--cart-accent, #0764E8); }
  .cart-builder__slot-plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #cdd1d8;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: inherit;
  }
  .cart-builder__slot-plus svg { display: block; }
  /* Hidden compatibility stub for the legacy bundle modal opener. */
  .cart-bundle-stub { display: none; }
  .cart-builder__remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 17, 22, 0.06);
    border: none;
    color: #4b5562;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cart-builder__remove:hover {
    background: rgba(15, 17, 22, 0.14);
    color: #0f1115;
  }
  .cart-builder__remove svg { display: block; }
  .cart-builder__slot--bonus {
    border: 1.5px dashed #b9d56b;
    background: var(--bb-bonus-soft);
  }
  .cart-builder__slot--bonus .cart-builder__slot-label,
  .cart-builder__slot--bonus .cart-builder__slot-placeholder {
    color: #4d5e2a;
  }
  .cart-builder__slot--bonus.is-filled {
    border-style: solid;
    border-color: var(--bb-bonus);
    background: var(--bb-bonus-fill);
  }
  .cart-builder__slot--bonus-cta {
    cursor: pointer;
  }
  .cart-builder__slot--bonus-cta:hover {
    border-style: solid;
    border-color: var(--bb-bonus);
    background: var(--bb-bonus-fill);
    animation: none;
  }
  .cart-builder__slot--bonus-cta:hover .cart-builder__slot-plus {
    background: var(--bb-bonus);
    color: #fff;
    border-color: var(--bb-bonus);
  }
  .cart-builder__slot--bonus-cta:hover .cart-builder__slot-placeholder { color: #4d5e2a; }
  @keyframes cart-builder-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(140, 197, 47, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(140, 197, 47, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-builder__slot--bonus-cta { animation: none; }
  }
  .cart-builder__slot--bonus .cart-builder__slot-icon {
    color: #4d5e2a;
    display: inline-flex;
  }
  .cart-builder__bonus-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--bb-bonus);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
  }
  @media (max-width: 749px) {
    .cart-builder {
      margin: 0.85rem 0 0;
      padding: 0.85rem 0.85rem 0.95rem;
      border-radius: 16px;
    }
    .cart-builder__title { font-size: 0.98rem; }
    .cart-builder__sub { font-size: 0.8rem; }
    .cart-builder__slots { gap: 0.45rem; }
    .cart-builder__slot {
      min-height: 96px;
      padding: 0.55rem 0.35rem 0.65rem;
      border-radius: 10px;
    }
    .cart-builder__slot-media { width: 42px; height: 42px; }
    .cart-builder__slot-label { font-size: 0.68rem; }
    .cart-builder__slot-placeholder { font-size: 0.7rem; letter-spacing: 0.06em; }
    .cart-builder__bonus-flag { font-size: 0.55rem; padding: 2px 5px; }
  }

  /* Bundle upsell */
  .cart-bundle {
    --bundle-accent: var(--cart-accent, #0764E8);
    --bundle-accent-soft: rgba(7, 100, 232, 0.08);
    margin: 0 auto 1.25rem;
    padding-top: 6rem;
    max-width: 1200px;
  }
  .cart-bundle__timer {
    margin: 1.5rem auto 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(90deg, rgba(7, 100, 232, 0.08), rgba(7, 100, 232, 0.16));
    border: 1px solid rgba(7, 100, 232, 0.25);
    border-radius: 999px;
    color: var(--cart-fg);
    font-size: 0.9375rem;
    font-weight: 600;
    width: max-content;
    max-width: 100%;
  }
  .cart-bundle__timer-icon { font-size: 1rem; }
  .cart-bundle__timer-label { color: var(--cart-muted); font-weight: 600; }
  .cart-bundle__timer-value {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-weight: 800;
    color: var(--bundle-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  /* center the timer block */
  .cart-bundle { text-align: center; }
  .cart-bundle__intro { text-align: center; }
  .cart-bundle__tier { text-align: left; }
  @media (max-width: 749px) {
    .cart-bundle__timer { font-size: 0.8125rem; padding: 0.625rem 1rem; }
  }
  .cart-bundle__intro {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .cart-bundle__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cart-fg);
    margin: 0 0 0.5rem;
  }
  .cart-bundle__subtitle {
    color: var(--cart-muted);
    font-size: 0.9375rem;
    max-width: 540px;
    margin: 0 auto;
  }

  .cart-bundle__tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .cart-bundle__tier {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: var(--cart-card);
    border: 1.5px solid var(--cart-border);
    border-radius: 18px;
    padding: 1.25rem;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    color: inherit;
    font: inherit;
    cursor: default;
  }
  .cart-bundle__tier--clickable {
    cursor: pointer;
    width: 100%;
  }
  .cart-bundle__tier--clickable:hover {
    border-color: var(--bundle-accent);
    box-shadow: 0 6px 20px rgba(7, 100, 232, 0.10);
    transform: translateY(-2px);
  }
  .cart-bundle__tier.is-active {
    border-color: var(--bundle-accent);
    background: var(--bundle-accent-soft);
    box-shadow: 0 0 0 2px rgba(7, 100, 232, 0.10);
  }
  .cart-bundle__tier.is-faded {
    opacity: 0.55;
    filter: grayscale(0.6);
    pointer-events: none;
  }
  .cart-bundle__tier.is-faded.cart-bundle__tier--clickable { cursor: not-allowed; }
  .cart-bundle__tier-savings {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--bundle-accent);
    margin: 0 0 0.4rem;
    line-height: 1.25;
  }
  .cart-bundle__tier[data-tier="0"] .cart-bundle__tier-savings { color: #9ca3af; }
  .cart-bundle__radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
    transition: border-color 0.2s ease;
  }
  .cart-bundle__radio-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bundle-accent);
    transform: scale(0);
    transition: transform 0.2s ease;
  }
  .cart-bundle__tier.is-active .cart-bundle__radio { border-color: var(--bundle-accent); }
  .cart-bundle__tier.is-active .cart-bundle__radio-dot { transform: scale(1); }

  .cart-bundle__tier-body {
    flex: 1;
    min-width: 0;
  }
  .cart-bundle__tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }
  .cart-bundle__tier-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cart-fg);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .cart-bundle__tier-emoji {
    font-size: 1.125rem;
    line-height: 1;
  }
  .cart-bundle__tier-percent {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--bundle-accent);
    letter-spacing: -0.01em;
  }
  .cart-bundle__tier[data-tier="0"] .cart-bundle__tier-percent { color: #9ca3af; }
  .cart-bundle__tier-meta {
    color: var(--cart-muted);
    font-size: 0.8125rem;
    margin: 0 0 0.625rem;
    line-height: 1.35;
  }
  .cart-bundle__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .cart-bundle__badge--blue {
    background: var(--bundle-accent);
    color: #fff;
  }
  .cart-bundle__badge--muted {
    background: #e5e7eb;
    color: #6b7280;
  }

  @media (max-width: 749px) {
    .cart-bundle { margin: 0 1rem 1rem; padding-top: 4rem; }
    .cart-bundle__tiers { grid-template-columns: 1fr; }
    .cart-bundle__tier { padding: 1rem; }
    .cart-bundle__title { font-size: 1.5rem; }
  }

  /* Bundle picker modal */
  .cart-bundle-modal {
    --bundle-accent: var(--cart-accent, #0764E8);
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-bundle-modal[hidden] { display: none; }
  .cart-bundle-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .cart-bundle-modal.is-open .cart-bundle-modal__backdrop { opacity: 1; }
  .cart-bundle-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 22px;
    width: min(720px, calc(100vw - 2rem));
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
  }
  .cart-bundle-modal.is-open .cart-bundle-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .cart-bundle-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--cart-border);
  }
  .cart-bundle-modal__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cart-fg);
    margin: 0 0 0.25rem;
  }
  .cart-bundle-modal__subtitle {
    color: var(--cart-muted);
    font-size: 0.875rem;
    margin: 0;
  }
  /* Title + eligibility pill sit on the same row, with the pill wrapping
     to a second line on cramped widths instead of pushing the title
     off-screen. */
  .cart-bundle-modal__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
    min-width: 0;
  }
  .cart-bundle-modal__title-row .cart-bundle-modal__title { margin: 0; }
  /* "Vocal presets only" eligibility pill, inline with the modal title. */
  .cart-bundle-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem 0.15rem 0.4rem;
    border-radius: 999px;
    background: rgba(7, 100, 232, 0.10);
    color: #1d4ed8;
    border: 1px solid rgba(7, 100, 232, 0.28);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .cart-bundle-modal__eyebrow svg { flex: none; }
  /* Visually-hidden helper for the back-compat subtitle node. */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .cart-bundle-modal__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #f1f3f5;
    color: var(--cart-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .cart-bundle-modal__close:hover { background: #e5e7eb; }
  .cart-bundle-modal__counter {
    padding: 0.75rem 1.5rem 0;
    color: var(--cart-fg);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .cart-bundle-modal__counter strong {
    color: var(--bundle-accent);
    font-weight: 800;
  }
  /* Search bar — slim, neutral, sits between the counter and the grid.
     The leading magnifier icon is absolutely positioned; the input adds
     left-padding so the text doesn't sit under the icon. The clear (×)
     button is shown only when the input has a value. */
  .cart-bundle-modal__search {
    position: relative;
    margin: 0.625rem 1.5rem 0;
  }
  .cart-bundle-modal__search-icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--cart-muted);
    pointer-events: none;
    display: inline-flex;
  }
  .cart-bundle-modal__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 2.25rem 0.55rem 2.25rem;
    border: 1.5px solid var(--cart-border);
    border-radius: 999px;
    background: #fff;
    color: var(--cart-fg);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .cart-bundle-modal__search-input::placeholder { color: var(--cart-muted); }
  .cart-bundle-modal__search-input:focus {
    border-color: var(--bundle-accent);
    box-shadow: 0 0 0 3px rgba(7, 100, 232, 0.12);
  }
  /* Remove the native clear button on iOS / IE so we can render our own
     consistent one. */
  .cart-bundle-modal__search-input::-webkit-search-decoration,
  .cart-bundle-modal__search-input::-webkit-search-cancel-button,
  .cart-bundle-modal__search-input::-webkit-search-results-button,
  .cart-bundle-modal__search-input::-webkit-search-results-decoration { display: none; }
  .cart-bundle-modal__search-clear {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 0;
    background: rgba(15, 17, 21, 0.08);
    color: #4b5562;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cart-bundle-modal__search-clear[hidden] { display: none; }
  .cart-bundle-modal__search-clear:hover { background: rgba(15, 17, 21, 0.18); color: #0f1115; }
  .cart-bundle-modal__grid {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
    align-content: start;
  }
  .cart-bundle-modal__loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--cart-muted);
    padding: 3rem 1rem;
    font-size: 0.9375rem;
  }
  .cart-bundle-modal__card {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--cart-border);
    border-radius: 14px;
    padding: 0.75rem 0.75rem 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: inherit;
    font: inherit;
  }
  .cart-bundle-modal__card:hover {
    border-color: var(--bundle-accent);
    transform: translateY(-2px);
  }
  .cart-bundle-modal__card.is-selected {
    border-color: var(--bundle-accent);
    box-shadow: 0 0 0 2px var(--bundle-accent), 0 8px 22px rgba(7, 100, 232, 0.18);
  }
  .cart-bundle-modal__card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-bundle-modal__card-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  }
  .cart-bundle-modal__card-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bundle-accent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .cart-bundle-modal__card.is-selected .cart-bundle-modal__card-check {
    opacity: 1;
    transform: scale(1);
  }
  .cart-bundle-modal__card-title {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cart-fg);
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cart-bundle-modal__card-price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bundle-accent);
  }
  .cart-bundle-modal__foot {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--cart-border);
    background: #fafafa;
  }
  .cart-bundle-modal__add {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--bundle-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
  }
  .cart-bundle-modal__add:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .cart-bundle-modal__add:not(:disabled):hover {
    transform: translateY(-1px);
  }
  body.cart-bundle-modal-open { overflow: hidden; }

  /* In-place updates — no whole-page dim (loading strip only). */
  .cart-page.is-cart-updating {
    opacity: 1;
  }

  @media (max-width: 749px) {
    .cart-bundle-modal__panel { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; align-self: flex-end; }
    .cart-bundle-modal { align-items: flex-end; }
    .cart-bundle-modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.75rem 1rem 1rem; }
    .cart-bundle-modal__head { padding: 1rem 1rem 0.5rem; }
    .cart-bundle-modal__counter { padding: 0.625rem 1rem 0; }
    .cart-bundle-modal__search { margin: 0.5rem 1rem 0; }
    .cart-bundle-modal__foot { padding: 0.875rem 1rem 1rem; }
  }

  /* ==============================================================
     UNIVERSAL CART DRAWER — Cursor Dev v8
     Single cart UI on both mobile and desktop. Renders as a sheet
     layered over a blurred copy of the storefront, with a locked
     hero at the top, scrollable items in the middle, a sticky
     "Complete your bundle" carousel pinned above the checkout bar,
     and the fixed checkout bar at the bottom. The legacy two-column
     desktop layout is hidden everywhere.
     ============================================================== */
  /* Default — the drawer system is visible on every viewport. */
  .cart-page__backdrop { display: block; }

  @media (min-width: 0px) {

    /* Cart-mobile color tokens — light theme, even though the site
       runs dark. Keeps the cart clean/legible like Shopify defaults. */
    .cart-mobile,
    .cart-mobile__bar {
      --mc-bg:        #ffffff;
      --mc-page-bg:   #f5f6f8;
      --mc-card:      #ffffff;
      --mc-text:      #0f1115;
      --mc-muted:     #6b7280;
      --mc-border:    #e6e7ea;
      --mc-accent:    var(--color-accent, #0764E8);
    }

    /* Hide desktop layout on mobile */
    .cart-page__intro--desktop,
    .cart-page__grid {
      display: none !important;
    }
    /* Hide the legacy "Cart 1 / X" mobile header so the new layout
       goes flush to the top. */
    .cart-page__mobile-head {
      display: none !important;
    }
    /* Drawer mode — on mobile the cart reads as a bottom sheet
       layered over the rest of the site, so the long-form FAQ and
       the site footer are intentionally hidden here. They remain
       visible on every other template + on desktop. */
    body.template-cart .cart-faq,
    body.template-cart #shopify-section-group-footer-group,
    body.template-cart .shopify-section-group-footer-group,
    body.template-cart > [class*="shopify-section-group-footer"],
    body.template-cart .site-footer,
    body.template-cart .vb-footer,
    body.template-cart footer {
      display: none !important;
    }
    /* Drawer backdrop — keep the body transparent so the fixed
       iframe (loaded with the storefront) shows through, then gets
       heavily blurred by the iframe's own filter rule below. */
    body.template-cart,
    body.template-cart main {
      background: transparent !important;
    }
    /* Lock scroll on /cart only. Never use a bare `html` selector here —
       {% stylesheet %} CSS is bundled globally and would lock every page. */
    html:has(body.template-cart) {
      overflow: hidden !important;
      height: 100dvh !important;
      height: 100vh; /* fallback */
    }
    body.template-cart {
      overflow: hidden !important;
      height: 100dvh !important;
      height: 100vh; /* fallback */
      position: relative;
    }
    body.template-cart main {
      padding-top: 0 !important;
      height: 100dvh !important;
      height: 100vh; /* fallback */
      overflow: hidden !important;
      box-sizing: border-box;
      background: transparent !important;
    }
    /* Shopify wraps sections in a div with the section ID + custom
       classes. Keep it transparent + flow-neutral so it never adds
       a "container" feeling around the drawer. */
    body.template-cart .shopify-section {
      background: transparent !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* Backdrop — pure blur only, no colour tint.
       The page behind stays dark and visible; only focus is removed. */
    .cart-page__backdrop {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: transparent;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 1;
    }
    /* A subtle dark tint between the blurred page and the sheet,
       so the sheet's edges feel elevated even if the iframe is slow
       to paint. */
    .cart-page::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(15,17,21,0.012) 0%, rgba(15,17,21,0.036) 100%);
    }
    /* Ensure the sheet sits ABOVE the backdrop + tint.
       NOTE: we deliberately avoid `will-change: transform` here
       because it would create a containing block, which in turn
       would re-anchor the position:fixed checkout bar to the
       sheet (and clip it under the sheet's overflow:hidden). */
    body.template-cart .cart-page__sheet {
      position: relative;
      z-index: 2;
      transition:
        transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.2s ease;
    }
    /* Smooth dismissal animation — applied by JS when the user
       hits the X (or swipes the bottom sheet down on mobile).
       The sheet slides off-screen + fades. */
    .cart-page.is-closing .cart-page__sheet {
      transform: translateY(40px);
      opacity: 0;
    }
    .cart-page.is-closing .cart-page__backdrop,
    .cart-page.is-closing::after {
      opacity: 0;
      transition: opacity 0.22s ease;
    }
    /* While a section refresh is in flight, the ONLY visual signal
       is a thin progress bar sliding across the top of the sheet —
       no dimming, no pulse, no opacity drops on the content. The
       drawer stays fully readable, the change just lands. */
    .cart-page.is-cart-updating .cart-page__sheet {
      pointer-events: auto;
    }
    .cart-page__sheet::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      border-radius: 22px 22px 0 0;
      background: linear-gradient(90deg,
        transparent 0%,
        var(--color-accent, #0764E8) 30%,
        #4f3bff 50%,
        var(--color-accent, #0764E8) 70%,
        transparent 100%);
      background-size: 200% 100%;
      background-position: 100% 0;
      opacity: 0;
      transition: opacity 0.18s ease;
      pointer-events: none;
      z-index: 8;
    }
    .cart-page.is-cart-updating .cart-page__sheet::after {
      opacity: 1;
      animation: mcLoadingStrip 1.1s linear infinite;
    }
    @keyframes mcLoadingStrip {
      from { background-position: 100% 0; }
      to   { background-position: -100% 0; }
    }

    /* Item entrance — when a new line appears in the cart (either
       via the carousel "+ Add" button or a DAW swap), the LI fades
       up + scales in from the right so the change feels alive. */
    @keyframes mcItemEnter {
      0% {
        opacity: 0;
        transform: translateX(16px) scale(0.96);
      }
      70% {
        opacity: 1;
        transform: translateX(-2px) scale(1.01);
      }
      100% {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }
    .cart-mobile__item { animation: mcItemEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .cart-page.is-cart-updating .cart-mobile__item { animation: none; }

    /* Item exit — when the user hits the circle X, we animate the
       row out (collapse height + slide left + fade) BEFORE the
       network refresh comes back, so deletion feels instant. */
    .cart-mobile__item.is-removing {
      pointer-events: none;
      overflow: hidden;
      margin-bottom: 0 !important;
      border-color: transparent !important;
      box-shadow: none !important;
      animation: mcItemExit 0.34s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
    }
    .cart-mobile__item.is-removing .cart-mobile__item-trash,
    .cart-mobile__item.is-removing .cart-mobile__item-close {
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .cart-mobile__item.is-removing .cart-mobile__item-card {
      --mc-swipe-x: 0px;
      transform: translateX(0) scale(1);
      animation: mcItemCardExit 0.34s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
    }
    @keyframes mcItemExit {
      0%   { max-height: 200px; opacity: 1; }
      100% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
    }
    @keyframes mcItemCardExit {
      0%   { opacity: 1; transform: translateX(0) scale(1); }
      100% { opacity: 0; transform: translateX(-28px) scale(0.94); }
    }

    /* Sticky bar — smooth bump-in when the savings or total changes. */
    .cart-mobile__bar-now,
    .cart-mobile__bar-was,
    .cart-mobile__bar-savings {
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.32s ease;
    }
    .cart-mobile__bar.has-value-bump .cart-mobile__bar-now,
    .cart-mobile__bar.has-value-bump .cart-mobile__bar-savings {
      animation: mcValueBump 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes mcValueBump {
      0%   { transform: scale(1); }
      45%  { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .cart-mobile__item,
      .cart-mobile__item.is-removing .cart-mobile__item-card,
      .cart-mobile__hero.is-tier-activate,
      .cart-mobile__hero.is-progress-surge,
      .cart-mobile__hero.is-max-reward,
      .cart-mobile__hero.is-tier-activate::before,
      .cart-mobile__hero.is-max-reward::before,
      .cart-mobile__bar.has-value-bump .cart-mobile__bar-now,
      .cart-mobile__bar.has-value-bump .cart-mobile__bar-savings,
      .cart-page.is-cart-updating .cart-page__sheet::after {
        animation: none !important;
      }
    }
    /* Hide the floating "Free gift" sticker on the cart — its bottom-
       right slot conflicts with the sticky checkout button. */
    body.template-cart .gift-sticker { display: none !important; }
    .cart-page {
      background: transparent;
      padding: 0 !important;
      min-height: auto !important;
      height: 100dvh;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .cart-page__sheet {
      position: relative;
      --mc-bar-h: calc(78px + env(safe-area-inset-bottom, 0px));
      padding: 0;
      background: #f5f6f8;
      border-radius: 22px 22px 0 0;
      box-shadow:
        0 -1px 0 rgba(255,255,255,0.6) inset,
        0 -8px 24px -16px rgba(15,17,21,0.18);
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }
    /* Bar positioning on mobile is handled by the inline <style> above —
       no extra rules needed here (avoids specificity conflicts). */
    /* No drag tab on mobile — drawer uses cart-drawer__close; /cart is full-screen. */
    .cart-page__sheet::before {
      display: none;
    }

    /* Close control lives in cart-drawer on other pages; hidden on /cart mobile. */
    .cart-page__sheet-close {
      display: none;
    }

    .cart-mobile__hero {
      margin-top: max(0.75rem, env(safe-area-inset-top, 0px));
    }

    /* cart-mobile owns the vertical layout:
         hero        — locked at top (outside the scroll body)
         body        — scrolls: "Your bag" + line items + carousel together
         bar         — flex footer on the sheet (sibling), always visible */
    .cart-mobile {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      color: #0f1115;
    }

    /* =========================================================
       1. BUNDLE HERO  — Apple-inspired, premium, conversion-focused
       ========================================================= */
    .cart-mobile__hero {
      position: relative;
      margin: 0 1rem 1rem;
      padding: 0.9rem 1.05rem 1rem;
      border-radius: 20px;
      overflow: hidden;
      isolation: isolate;
      background: #ffffff;
      border: 1px solid rgba(15,17,21,0.07);
      transition: border-color 0.5s ease, box-shadow 0.5s ease;
      box-shadow:
        0 1px 2px rgba(15,17,21,0.04),
        0 8px 28px -20px rgba(7,100,232,0.16);
      /* Locked at the top — stays above the scrolling body. */
      flex: 0 0 auto;
      position: sticky;
      top: 0;
      z-index: 5;
    }
    .cart-mobile__hero-inner { position: relative; z-index: 2; }
    .cart-mobile__hero-glow {
      position: absolute;
      inset: -50%;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(45% 55% at 100% 0%, rgba(7,100,232,0.10) 0%, transparent 60%);
      transition: background 0.6s ease;
    }
    .cart-mobile__hero--tier-1 .cart-mobile__hero-glow {
      background:
        radial-gradient(45% 55% at 100% 0%, rgba(7,100,232,0.16) 0%, transparent 60%),
        radial-gradient(45% 55% at 0% 100%, rgba(7,100,232,0.06) 0%, transparent 60%);
    }
    .cart-mobile__hero--tier-2 .cart-mobile__hero-glow,
    .cart-mobile__hero--tier-3 .cart-mobile__hero-glow {
      background:
        radial-gradient(50% 60% at 100% 0%, rgba(7,100,232,0.22) 0%, transparent 60%),
        radial-gradient(45% 55% at 0% 100%, rgba(96,64,240,0.10) 0%, transparent 60%);
    }
    .cart-mobile__hero--tier-4 .cart-mobile__hero-glow {
      background:
        radial-gradient(50% 60% at 100% 0%, rgba(34,197,110,0.20) 0%, transparent 60%),
        radial-gradient(45% 55% at 0% 100%, rgba(34,197,110,0.08) 0%, transparent 60%);
    }
    .cart-mobile__hero--tier-1 { border-color: rgba(7,100,232,0.18); }
    .cart-mobile__hero--tier-2,
    .cart-mobile__hero--tier-3 { border-color: rgba(7,100,232,0.24); }
    .cart-mobile__hero--tier-4 { border-color: rgba(34,197,110,0.28); }

    /* Top row: eyebrow + pill */
    .cart-mobile__hero-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }
    .cart-mobile__hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #6b7280;
      line-height: 1;
    }
    .cart-mobile__hero-eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--color-accent, #0764E8);
      box-shadow: 0 0 0 3px rgba(7,100,232,0.16);
      animation: mcHeroDotPulse 1.8s ease-in-out infinite;
    }
    .cart-mobile__hero-eyebrow-icon {
      display: inline-grid;
      place-items: center;
      width: 14px; height: 14px;
      font-size: 11px;
      line-height: 1;
    }
    .cart-mobile__hero-eyebrow-check {
      display: inline-grid;
      place-items: center;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--color-accent, #0764E8);
      color: #ffffff;
    }
    .cart-mobile__hero--tier-2 .cart-mobile__hero-eyebrow,
    .cart-mobile__hero--tier-3 .cart-mobile__hero-eyebrow { color: #0764E8; }
    .cart-mobile__hero--tier-4 .cart-mobile__hero-eyebrow-check { background: #1ea25a; }
    .cart-mobile__hero--tier-4 .cart-mobile__hero-eyebrow { color: #1ea25a; }
    @keyframes mcHeroDotPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(7,100,232,0.16); }
      50%      { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(7,100,232,0.10); }
    }

    /* Discount pill (top-right) */
    .cart-mobile__hero-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.28rem 0.6rem;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: -0.005em;
      background: rgba(7,100,232,0.08);
      color: #0764E8;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .cart-mobile__hero-pill--ghost {
      background: rgba(15,17,21,0.05);
      color: #4b5563;
    }
    .cart-mobile__hero--tier-4 .cart-mobile__hero-pill {
      background: rgba(34,197,110,0.10);
      color: #1ea25a;
    }

    /* Title — bold, premium, primary element at the top of the cart. */
    .cart-mobile__hero-emoji {
      display: inline-block;
      font-size: 1em;
      line-height: 1;
      margin-left: 0.3em;
      vertical-align: middle;
      user-select: none;
    }
    .cart-mobile__hero.is-tier-activate  .cart-mobile__hero-emoji,
    .cart-mobile__hero.is-max-reward     .cart-mobile__hero-emoji,
    .cart-mobile__hero.is-progress-surge .cart-mobile__hero-emoji {
      animation: mcEmojiPop 0.55s cubic-bezier(0.22, 1.5, 0.36, 1);
    }
    @keyframes mcEmojiPop {
      0%   { transform: scale(1) rotate(0deg); }
      35%  { transform: scale(1.55) rotate(-8deg); }
      65%  { transform: scale(0.9)  rotate(4deg); }
      100% { transform: scale(1)  rotate(0deg); }
    }

    .cart-mobile__hero-title {
      margin: 0 0 0.3rem;
      font-size: clamp(1.3rem, 5.2vw, 1.55rem);
      line-height: 1.15;
      letter-spacing: -0.024em;
      font-weight: 700;
      color: #0f1115;
    }
    .cart-mobile__hero-title em {
      font-style: normal;
      font-weight: 700;
      background: linear-gradient(95deg, #0764E8 0%, #6f4dff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .cart-mobile__hero--tier-4 .cart-mobile__hero-title em {
      background: linear-gradient(95deg, #1ea25a 0%, #0764E8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Sub-line */
    .cart-mobile__hero-sub {
      margin: 0 0 0.75rem;
      font-size: 0.78rem;
      line-height: 1.4;
      color: #6b7280;
      letter-spacing: -0.005em;
    }

    /* Progress bar — refined: thinner track, smaller dots, softer states */
    .cart-mobile__hero-bar { display: block; }
    .cart-mobile__hero-bar-track {
      position: relative;
      height: 4px;
      background: rgba(15,17,21,0.05);
      border-radius: 999px;
      overflow: visible;
      margin: 0 0 0.55rem;
    }
    .cart-mobile__hero-bar-fill {
      position: absolute;
      top: 0; bottom: 0;
      left: 0;
      width: var(--mc-fill, 0%);
      border-radius: 999px;
      background: linear-gradient(90deg, #0764E8 0%, #6f4dff 100%);
      box-shadow: 0 0 10px rgba(7,100,232,0.25);
      transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
    }
    .cart-mobile__hero--tier-4 .cart-mobile__hero-bar-fill {
      background: linear-gradient(90deg, #0764E8 0%, #1ea25a 100%);
      box-shadow: 0 0 10px rgba(34,197,110,0.25);
    }
    /* Stops — smaller, glass-like in inactive state */
    .cart-mobile__hero-bar-stop {
      position: absolute;
      top: 50%;
      width: 9px; height: 9px;
      border-radius: 50%;
      background: #ffffff;
      border: 1.5px solid rgba(15,17,21,0.10);
      transition: background 0.35s ease, border-color 0.35s ease,
                  transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow 0.45s ease, width 0.25s ease, height 0.25s ease;
      z-index: 1;
    }
    .cart-mobile__hero-bar-stop--s1 { left: 33.333%; --mc-stop-transform: translate(-50%, -50%); transform: var(--mc-stop-transform); }
    .cart-mobile__hero-bar-stop--s2 { left: 66.667%; --mc-stop-transform: translate(-50%, -50%); transform: var(--mc-stop-transform); }
    .cart-mobile__hero-bar-stop--s3 { left: 100%;    --mc-stop-transform: translate(-100%, -50%); transform: var(--mc-stop-transform); }
    .cart-mobile__hero-bar-stop.is-hit {
      background: var(--color-accent, #0764E8);
      border-color: var(--color-accent, #0764E8);
      width: 10px; height: 10px;
    }
    /* Current (next-to-unlock) milestone — subtle pulsing glow */
    .cart-mobile__hero-bar-stop.is-current {
      background: #ffffff;
      border-color: var(--color-accent, #0764E8);
      width: 12px; height: 12px;
      box-shadow:
        0 0 0 3px rgba(7,100,232,0.14),
        0 0 10px rgba(7,100,232,0.35);
      animation: mcHeroStopPulse 1.9s ease-in-out infinite;
    }
    @keyframes mcHeroStopPulse {
      0%, 100% {
        box-shadow: 0 0 0 3px rgba(7,100,232,0.12), 0 0 8px rgba(7,100,232,0.28);
      }
      50% {
        box-shadow: 0 0 0 6px rgba(7,100,232,0.05), 0 0 14px rgba(7,100,232,0.48);
      }
    }
    /* Milestone celebrate — one-shot pop when a stop transitions to hit */
    .cart-mobile__hero-bar-stop.is-celebrate {
      animation: mcStopPop 0.7s cubic-bezier(0.22, 1.5, 0.36, 1);
    }
    @keyframes mcStopPop {
      0%   { transform: var(--mc-stop-transform, translate(-50%, -50%)) scale(1); }
      30%  { transform: var(--mc-stop-transform, translate(-50%, -50%)) scale(2.0);
             box-shadow: 0 0 0 10px rgba(7,100,232,0.22), 0 0 24px rgba(7,100,232,0.65); }
      65%  { transform: var(--mc-stop-transform, translate(-50%, -50%)) scale(0.88); }
      100% { transform: var(--mc-stop-transform, translate(-50%, -50%)) scale(1);
             box-shadow: 0 0 0 3px rgba(7,100,232,0.12), 0 0 10px rgba(7,100,232,0.3); }
    }
    /* Expanding ring emitted from each milestone stop on unlock */
    .cart-mobile__hero-bar-stop.is-celebrate::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(7,100,232,0.75);
      pointer-events: none;
      animation: mcStopRing 0.7s cubic-bezier(0.2, 1, 0.4, 1) forwards;
      opacity: 0;
    }
    @keyframes mcStopRing {
      0%   { transform: scale(0.6); opacity: 1; }
      100% { transform: scale(3.2); opacity: 0; }
    }
    .cart-mobile__hero--tier-4 .cart-mobile__hero-bar-stop.is-hit {
      background: #1ea25a;
      border-color: #1ea25a;
    }

    /* Labels */
    .cart-mobile__hero-bar-labels {
      position: relative;
      height: 0.85rem;
      font-size: 0.6875rem;
      font-weight: 700;
      color: rgba(15,17,21,0.32);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.005em;
    }
    .cart-mobile__hero-bar-label {
      position: absolute;
      white-space: nowrap;
      transition: color 0.35s ease, transform 0.35s ease;
    }
    .cart-mobile__hero-bar-label--s1 { left: 33.333%; transform: translateX(-50%); }
    .cart-mobile__hero-bar-label--s2 { left: 66.667%; transform: translateX(-50%); }
    .cart-mobile__hero-bar-label--s3 { left: 100%;    transform: translateX(-100%); }
    .cart-mobile__hero-bar-label.is-hit { color: #0f1115; }
    .cart-mobile__hero-bar-label.is-current {
      color: var(--color-accent, #0764E8);
      font-weight: 800;
    }

    /* Tier unlock — visible “activated” surge when discount tier jumps. */
    .cart-mobile__hero.is-tier-activate {
      animation: mcTierActivate 1.1s cubic-bezier(0.22, 1.35, 0.36, 1);
      border-color: rgba(7, 100, 232, 0.45) !important;
      box-shadow:
        0 0 0 1px rgba(7, 100, 232, 0.2),
        0 0 40px rgba(7, 100, 232, 0.35),
        0 12px 32px -12px rgba(7, 100, 232, 0.4) !important;
    }
    .cart-mobile__hero.is-tier-activate .cart-mobile__hero-glow {
      animation: mcTierActivateGlow 1.1s ease-out;
    }
    .cart-mobile__hero.is-tier-activate .cart-mobile__hero-pill {
      animation: mcTierActivatePill 0.85s cubic-bezier(0.22, 1.45, 0.36, 1);
    }
    .cart-mobile__hero.is-tier-activate .cart-mobile__hero-title {
      animation: mcTierActivateTitle 0.9s cubic-bezier(0.22, 1.3, 0.36, 1);
    }
    .cart-mobile__hero.is-tier-activate::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 24px;
      pointer-events: none;
      z-index: 3;
      animation: mcTierActivateRing 1s ease-out forwards;
      border: 2px solid rgba(7, 100, 232, 0.55);
      opacity: 0;
    }
    @keyframes mcTierActivate {
      0%   { transform: scale(1); }
      22%  { transform: scale(1.035); }
      48%  { transform: scale(0.985); }
      72%  { transform: scale(1.02); }
      100% { transform: scale(1); }
    }
    @keyframes mcTierActivateRing {
      0%   { opacity: 0.85; transform: scale(0.96); }
      100% { opacity: 0; transform: scale(1.12); }
    }
    @keyframes mcTierActivateGlow {
      0%   { opacity: 0.35; filter: brightness(1); }
      35%  { opacity: 1; filter: brightness(1.4); }
      100% { opacity: 1; filter: brightness(1); }
    }
    @keyframes mcTierActivatePill {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.22); }
      100% { transform: scale(1); }
    }
    @keyframes mcTierActivateTitle {
      0%   { transform: translateY(0); }
      35%  { transform: translateY(-3px); }
      100% { transform: translateY(0); }
    }
    /* Smaller pulse when count rises but tier unchanged. */
    .cart-mobile__hero.is-progress-surge {
      animation: mcProgressSurge 0.75s cubic-bezier(0.22, 1.2, 0.36, 1);
    }
    .cart-mobile__hero.is-progress-surge .cart-mobile__hero-bar-fill,
    .cart-mobile__hero.is-tier-activate  .cart-mobile__hero-bar-fill {
      animation: mcFillSurge 1s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes mcProgressSurge {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.018); }
      100% { transform: scale(1); }
    }
    @keyframes mcFillSurge {
      0%   { filter: brightness(1);    box-shadow: 0 0 10px rgba(7,100,232,0.25); }
      30%  { filter: brightness(1.55); box-shadow: 0 0 30px rgba(7,100,232,0.8), 0 0 6px rgba(111,77,255,0.6); }
      100% { filter: brightness(1);    box-shadow: 0 0 10px rgba(7,100,232,0.25); }
    }
    /* Max discount (30%) — high-dopamine reward burst */
    .cart-mobile__hero.is-max-reward {
      animation: mcMaxRewardPop 1.35s cubic-bezier(0.22, 1.35, 0.36, 1);
      border-color: rgba(34, 197, 110, 0.65) !important;
      box-shadow:
        0 0 0 2px rgba(34, 197, 110, 0.28),
        0 0 56px rgba(34, 197, 110, 0.45),
        0 18px 40px -12px rgba(34, 197, 110, 0.5) !important;
    }
    .cart-mobile__hero.is-max-reward .cart-mobile__hero-glow {
      animation: mcMaxRewardGlow 1.35s ease-out;
    }
    .cart-mobile__hero.is-max-reward .cart-mobile__hero-pill {
      animation: mcMaxRewardPill 1s cubic-bezier(0.22, 1.5, 0.36, 1);
    }
    .cart-mobile__hero.is-max-reward .cart-mobile__hero-title {
      animation: mcTierActivateTitle 1s cubic-bezier(0.22, 1.3, 0.36, 1);
    }
    .cart-mobile__hero.is-max-reward .cart-mobile__hero-bar-fill {
      animation: mcFillSurgeGreen 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes mcFillSurgeGreen {
      0%   { filter: brightness(1);    box-shadow: 0 0 10px rgba(34,197,110,0.25); }
      30%  { filter: brightness(1.55); box-shadow: 0 0 32px rgba(34,197,110,0.85), 0 0 8px rgba(30,162,90,0.7); }
      100% { filter: brightness(1);    box-shadow: 0 0 10px rgba(34,197,110,0.25); }
    }
    .cart-mobile__hero.is-max-reward::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 26px;
      pointer-events: none;
      z-index: 3;
      animation: mcMaxRewardRing 1.2s ease-out forwards;
      border: 2px solid rgba(34, 197, 110, 0.7);
      opacity: 0;
    }
    @keyframes mcMaxRewardPop {
      0%   { transform: scale(1); }
      28%  { transform: scale(1.05); }
      55%  { transform: scale(0.98); }
      78%  { transform: scale(1.02); }
      100% { transform: scale(1); }
    }
    @keyframes mcMaxRewardRing {
      0%   { opacity: 1; transform: scale(0.94); }
      100% { opacity: 0; transform: scale(1.15); }
    }
    @keyframes mcMaxRewardGlow {
      0%   { opacity: 0.35; filter: brightness(1); }
      40%  { opacity: 1; filter: brightness(1.5); }
      100% { opacity: 1; filter: brightness(1); }
    }
    @keyframes mcMaxRewardPill {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.28); }
      100% { transform: scale(1); }
    }
    /* Legacy alias — still used by milestone stops */
    .cart-mobile__hero.is-celebrate { animation: mcProgressSurge 0.75s cubic-bezier(0.22, 1.2, 0.36, 1); }
    /* Sweeping light shimmer that races across the fill bar on progress */
    .cart-mobile__hero-bar-fill::after {
      content: '';
      position: absolute;
      top: -1px; bottom: -1px;
      left: -40%;
      width: 40%;
      background: linear-gradient(90deg,
        rgba(255,255,255,0)    0%,
        rgba(255,255,255,0.62) 50%,
        rgba(255,255,255,0)    100%);
      border-radius: 999px;
      opacity: 0;
      pointer-events: none;
    }
    .cart-mobile__hero.is-celebrate    .cart-mobile__hero-bar-fill::after,
    .cart-mobile__hero.is-tier-activate .cart-mobile__hero-bar-fill::after,
    .cart-mobile__hero.is-max-reward   .cart-mobile__hero-bar-fill::after,
    .cart-mobile__hero.is-progress-surge .cart-mobile__hero-bar-fill::after {
      animation: mcFillShimmer 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes mcFillShimmer {
      0%   { opacity: 0;   left: -40%; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { opacity: 0;   left: 120%; }
    }

    /* Scroll surface: "Your bag" + items + "Complete your bundle" carousel. */
    .cart-mobile__body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(15,17,21,0.18) transparent;
    }
    .cart-mobile__body::-webkit-scrollbar { width: 4px; }
    .cart-mobile__body::-webkit-scrollbar-thumb {
      background: rgba(15,17,21,0.18);
      border-radius: 999px;
    }
    .cart-mobile__body::-webkit-scrollbar-track { background: transparent; }

    /* =========================================================
       2. CART LINE ITEMS — scroll with the carousel below.
       ========================================================= */
    .cart-mobile__items {
      padding: 0 1rem;
      margin-bottom: 0.5rem;
    }
    .cart-mobile__section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.4rem 0.25rem 0.6rem;
      position: static;
    }
    .cart-mobile__section-title {
      margin: 0;
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #0f1115;
    }
    .cart-mobile__section-meta {
      font-size: 0.75rem;
      color: #6b7280;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .cart-mobile__section-link {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--color-accent, #0764E8);
      text-decoration: none;
    }
    .cart-mobile__section-link:hover { color: var(--color-accent, #0764E8); filter: brightness(1.15); }

    .cart-mobile__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .cart-mobile__item {
      position: relative;
      border-radius: 16px;
      isolation: isolate;
      /* Shell only — visual card lives on .cart-mobile__item-card so we
         never get a "double container" when the card slides on remove. */
      background: transparent;
      border: none;
      box-shadow: none;
      transition: none;
      overflow: visible;
    }
    .cart-mobile__item--gift { order: -1; }

    /* Floating circle X button overhanging the top-right corner */
    .cart-mobile__item-close {
      position: absolute;
      top: -6px;
      right: -6px;
      z-index: 5;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ffffff;
      color: #9ca3af;
      border: 1px solid rgba(15,17,21,0.08);
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow:
        0 1px 2px rgba(15,17,21,0.06),
        0 4px 10px -4px rgba(15,17,21,0.14);
      transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      padding: 0;
    }
    .cart-mobile__item-close:hover,
    .cart-mobile__item-close:focus-visible {
      background: #0f1115;
      color: #ffffff;
      border-color: #0f1115;
    }
    .cart-mobile__item-close:active { transform: scale(0.88); }

    /* The red delete chip behind the row, revealed on swipe */
    .cart-mobile__item-trash {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      background: linear-gradient(135deg, #e23838 0%, #b3211d 100%);
      color: #fff;
      border: 0;
      cursor: pointer;
      z-index: 1;
      font-size: 0;
      opacity: 0;
      border-radius: 0 16px 16px 0;
      transition: opacity 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .cart-mobile__item.is-swiping .cart-mobile__item-trash,
    .cart-mobile__item.is-swiped  .cart-mobile__item-trash { opacity: 1; }
    .cart-mobile__item-trash:active { filter: brightness(0.92); }

    /* The visible product row (single surface — border + shadow here only). */
    .cart-mobile__item-card {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.85rem;
      padding: 0.85rem 0.95rem;
      background: #ffffff;
      border: 1px solid rgba(15,17,21,0.06);
      border-radius: 16px;
      box-shadow:
        0 1px 1px rgba(15,17,21,0.02),
        0 4px 14px -10px rgba(15,17,21,0.10);
      transform: translateX(var(--mc-swipe-x, 0px));
      transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease,
        box-shadow 0.25s ease;
      touch-action: pan-y;
      -webkit-user-select: none;
              user-select: none;
    }
    .cart-mobile__item.is-dropdown-open .cart-mobile__item-card {
      border-color: rgba(7,100,232,0.30);
      box-shadow:
        0 1px 1px rgba(15,17,21,0.02),
        0 8px 22px -12px rgba(7,100,232,0.22);
    }
    .cart-mobile__item.is-swiping .cart-mobile__item-card { transition: none; }
    .cart-mobile__item.is-swiped  .cart-mobile__item-card { --mc-swipe-x: -78px; }

    .cart-mobile__item-img {
      width: 44px; height: 44px;
      border-radius: 11px;
      overflow: hidden;
      background: #f3f4f7;
      flex-shrink: 0;
      display: block;
      position: relative;
      box-shadow: 0 0 0 1px rgba(15,17,21,0.04) inset;
    }
    .cart-mobile__item-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .cart-mobile__item-img-ph {
      width: 100%; height: 100%;
      display: grid; place-items: center;
      font-size: 1.1rem;
    }
    .cart-mobile__item-meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 4px;
    }
    .cart-mobile__item-name {
      color: #0f1115;
      font-size: 0.9125rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      text-decoration: none;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .cart-mobile__item-gift-label {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: #1a7d4a;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1;
    }

    /* DAW row — sits BELOW the title and doubles as the dropdown
       trigger. Logo first, name next, caret last. Subtle by default
       so it doesn't compete with the title, lights up on hover and
       when the dropdown is open. */
    .cart-mobile__item-daw-row {
      appearance: none;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.32rem;
      color: #6b7280;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: -0.005em;
      line-height: 1;
      cursor: pointer;
      border-radius: 6px;
      transition: color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      max-width: 100%;
    }
    .cart-mobile__item-daw-row:hover { color: #0f1115; }
    .cart-mobile__item-daw-row-logo {
      width: 14px;
      height: 14px;
      border-radius: 4px;
      display: block;
      object-fit: cover;
      flex-shrink: 0;
    }
    .cart-mobile__item-daw-row-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cart-mobile__item-daw-row-caret {
      flex-shrink: 0;
      opacity: 0.55;
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
    }
    .cart-mobile__item.is-dropdown-open .cart-mobile__item-daw-row {
      color: var(--color-accent, #0764E8);
    }
    .cart-mobile__item.is-dropdown-open .cart-mobile__item-daw-row-caret {
      transform: rotate(180deg);
      opacity: 1;
    }

    /* Right-side price column — crossed-out compare-at on top, bold
       current price below. Tight stacking so a 2-line price column
       reads as one unit. */
    .cart-mobile__item-prices {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 1px;
      text-align: right;
      font-variant-numeric: tabular-nums;
      line-height: 1.05;
      flex-shrink: 0;
    }
    .cart-mobile__item-was {
      font-size: 0.72rem;
      color: #9ca3af;
      text-decoration: line-through;
      text-decoration-thickness: 1px;
      font-weight: 500;
      letter-spacing: -0.005em;
    }
    .cart-mobile__item-price {
      font-size: 0.95rem;
      color: #0f1115;
      font-weight: 700;
      letter-spacing: -0.018em;
    }
    .cart-mobile__item-price--free {
      color: #1a7d4a;
      font-weight: 800;
      letter-spacing: -0.005em;
      text-transform: uppercase;
      font-size: 0.78rem;
    }

    /* Inline accordion dropdown */
    .cart-mobile__item-dropdown {
      position: relative;
      z-index: 2;
      background: #f8f9fb;
      border-top: 1px solid rgba(15,17,21,0.06);
      border-radius: 0 0 16px 16px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* When the dropdown is open, square off the card's bottom corners
       so the seam disappears into the dropdown. */
    .cart-mobile__item.is-dropdown-open .cart-mobile__item-card {
      border-radius: 16px 16px 0 0;
    }
    .cart-mobile__item-dropdown[hidden] { display: block; } /* don't fully hide; the height animates */
    .cart-mobile__item.is-dropdown-open .cart-mobile__item-dropdown { max-height: 340px; }
    .cart-mobile__item-dropdown-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
      padding: 0.85rem 0.95rem 1rem;
    }
    .cart-mobile__item-dropdown-btn {
      appearance: none;
      border: 1px solid rgba(15,17,21,0.06);
      background: #ffffff;
      color: #0f1115;
      padding: 0.5rem 0.6rem;
      border-radius: 11px;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      cursor: pointer;
      text-align: left;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      min-height: 44px;
      box-shadow: 0 1px 1px rgba(15,17,21,0.02);
    }
    .cart-mobile__item-dropdown-btn:active { transform: scale(0.97); }
    .cart-mobile__item-dropdown-btn img {
      width: 24px; height: 24px;
      border-radius: 6px;
      flex-shrink: 0;
      object-fit: cover;
      background: #f3f4f7;
    }
    .cart-mobile__item-dropdown-btn span {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cart-mobile__item-dropdown-btn.is-current {
      background: rgba(7,100,232,0.08);
      border-color: var(--color-accent, #0764E8);
    }
    .cart-mobile__item-dropdown-btn.is-loading {
      pointer-events: none;
      opacity: 0.55;
    }
    .cart-mobile__item-dropdown-check { flex-shrink: 0; }

    /* =========================================================
       3. "COMPLETE YOUR BUNDLE" CAROUSEL — scrolls with Your bag.
       ========================================================= */
    .cart-mobile__cf {
      padding: 0.6rem 1rem 1rem;
      margin: 0;
      position: static;
      background: transparent;
    }
    .cart-mobile__cf::before {
      display: none;
    }
    .cart-mobile__cf-head {
      padding: 0 0.25rem 0.55rem;
    }
    .cart-mobile__cf-eyebrow {
      display: inline-block;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #6b7280;
    }
    .cart-mobile__cf-viewport {
      position: relative;
      margin: 0 -1rem;
    }
    .cart-mobile__cf-track {
      display: flex;
      gap: 0.55rem;
      overflow-x: auto;
      overflow-y: visible;
      padding: 0.2rem 1rem 0.7rem;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 1rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .cart-mobile__cf-track::-webkit-scrollbar { display: none; }
    .cart-mobile__cf-empty {
      padding: 1.25rem 0.5rem;
      text-align: center;
      color: #6b7280;
      font-size: 0.85rem;
      width: 100%;
    }

    /* Side navigation arrows — clean Apple-style circles. Centered
       on the image area of the 3-across cards. */
    .cart-mobile__cf-nav {
      position: absolute;
      top: 32%;
      transform: translateY(-50%);
      z-index: 4;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.96);
      color: #0f1115;
      border: 1px solid rgba(15,17,21,0.08);
      box-shadow:
        0 1px 2px rgba(15,17,21,0.06),
        0 6px 14px -8px rgba(15,17,21,0.18);
      display: grid;
      place-items: center;
      cursor: pointer;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform 0.18s ease, background 0.18s ease, opacity 0.25s ease;
      -webkit-tap-highlight-color: transparent;
      padding: 0;
    }
    .cart-mobile__cf-nav[hidden] { opacity: 0; pointer-events: none; display: grid; }
    .cart-mobile__cf-nav--prev { left: 4px; }
    .cart-mobile__cf-nav--next { right: 4px; }
    .cart-mobile__cf-nav:active { transform: translateY(-50%) scale(0.9); }
    .cart-mobile__cf-nav svg { width: 16px; height: 16px; }
    @media (hover: hover) {
      .cart-mobile__cf-nav:hover { background: #ffffff; }
    }

    .cart-mobile__cf-card {
      /* 3-across on mobile: card = (track width − 2 × gap) ÷ 3.
         Inner track width is viewport − 2rem horizontal padding,
         and the gap is 0.55rem → 1.1rem total gap for 2 gaps. */
      flex: 0 0 calc((100% - 1.1rem) / 3);
      scroll-snap-align: start;
      border-radius: 16px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid rgba(15,17,21,0.06);
      position: relative;
      padding: 0.5rem 0.5rem 0.55rem;
      display: flex;
      flex-direction: column;
      transform: translateZ(0);
      transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        border-color 0.25s ease;
      box-shadow:
        0 1px 1px rgba(15,17,21,0.02),
        0 6px 18px -10px rgba(15,17,21,0.12);
    }
    @media (hover: hover) {
      .cart-mobile__cf-card:hover {
        transform: translateY(-2px);
        box-shadow:
          0 1px 2px rgba(15,17,21,0.04),
          0 12px 26px -12px rgba(15,17,21,0.18);
        border-color: rgba(15,17,21,0.10);
      }
    }
    .cart-mobile__cf-card:active {
      transform: translateY(0) scale(0.985);
      transition-duration: 0.12s;
    }

    .cart-mobile__cf-media {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 11px;
      overflow: hidden;
      background: #f3f4f7;
      margin-bottom: 0.5rem;
    }
    .cart-mobile__cf-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .cart-mobile__cf-card:hover .cart-mobile__cf-media img,
    .cart-mobile__cf-card:active .cart-mobile__cf-media img {
      transform: scale(1.04);
    }
    .cart-mobile__cf-media-ph {
      position: absolute; inset: 0;
      display: grid; place-items: center;
      font-size: 1.6rem;
    }

    .cart-mobile__cf-name {
      display: block;
      margin: 0 0.1rem 0.1rem;
      font-size: 0.83rem;
      font-weight: 700;
      letter-spacing: -0.018em;
      color: #0f1115;
      line-height: 1.2;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cart-mobile__cf-prices {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0 0.1rem 0.45rem;
      line-height: 1;
      gap: 1px;
    }
    .cart-mobile__cf-was {
      font-size: 0.62rem;
      color: #b7bbc4;
      font-weight: 600;
      text-decoration: line-through;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.005em;
    }
    .cart-mobile__cf-price {
      font-size: 0.78rem;
      color: #0f1115;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.008em;
    }

    /* Full-width BLACK pill "+ Add" button. */
    .cart-mobile__cf-add {
      appearance: none;
      border: 0;
      background: #0f1115;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.26rem;
      width: 100%;
      padding: 0.58rem 0.4rem;
      border-radius: 999px;
      text-align: center;
      cursor: pointer;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: -0.005em;
      line-height: 1;
      transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 1px 2px rgba(15,17,21,0.08),
        0 5px 12px -7px rgba(15,17,21,0.30);
    }
    .cart-mobile__cf-add-icon {
      flex-shrink: 0;
      transform: translateY(0);
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .cart-mobile__cf-add:active { transform: scale(0.96); }
    .cart-mobile__cf-add:active .cart-mobile__cf-add-icon { transform: rotate(90deg); }
    .cart-mobile__cf-add.is-loading { opacity: 0.7; pointer-events: none; }
    .cart-mobile__cf-add.is-loading .cart-mobile__cf-add-icon { display: none; }
    .cart-mobile__cf-add.is-added {
      background: #1ea25a;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 1px 2px rgba(15,17,21,0.08),
        0 6px 14px -8px rgba(34,197,110,0.45);
    }

    /* =========================================================
       4. CHECKOUT BAR — flex footer on the sheet (always visible).
       ========================================================= */
    .cart-mobile__bar {
      position: relative;
      flex: 0 0 auto;
      flex-shrink: 0;
      width: 100%;
      z-index: 60;
      padding: 0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
      background: rgba(255,255,255,0.92);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-top: 1px solid rgba(15,17,21,0.06);
      box-shadow:
        0 -1px 0 rgba(15,17,21,0.02),
        0 -16px 40px -24px rgba(15,17,21,0.18);
      display: flex;
      align-items: center;
      gap: 0.7rem;
      transform: translateY(0);
      transition: transform 0.3s ease, opacity 0.3s ease;
      /* Mobile-friendly hit area for the bottom safe area. */
      min-height: 64px;
      box-sizing: border-box;
    }
    .cart-mobile__bar.is-hidden {
      transform: translateY(120%);
      opacity: 0;
      pointer-events: none;
    }
    /* Totals column — savings badge on top, prominent price below.
       Tight vertical stacking + matching baseline so the column
       reads as one intentional unit beside the CTA. */
    .cart-mobile__bar-totals {
      flex: 0 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0.32rem;
      padding-left: 0.4rem;
    }
    /* Savings/nudge "badge" — small pill shape, distinct from the
       price so the eye reads "context line + price" not "two prices". */
    .cart-mobile__bar-savings {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.22rem 0.55rem 0.22rem 0.45rem;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.005em;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      background: rgba(30,162,90,0.10);
      color: #167a43;
    }
    .cart-mobile__bar-savings[hidden] { display: none; }
    .cart-mobile__bar-savings strong {
      font-variant-numeric: tabular-nums;
      font-weight: 800;
    }
    /* Status dot — green when saving, blue when nudging. */
    .cart-mobile__bar-savings-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #1ea25a;
      box-shadow: 0 0 0 3px rgba(30,162,90,0.18);
    }
    .cart-mobile__bar-savings--nudge {
      background: rgba(7,100,232,0.08);
      color: #0764E8;
    }
    .cart-mobile__bar-savings--nudge .cart-mobile__bar-savings-dot {
      background: #0764E8;
      box-shadow: 0 0 0 3px rgba(7,100,232,0.18);
    }
    /* Price row — crossed-out compare-at sitting next to the bold
       final price. Tabular numerics + tight letter spacing keep the
       two values aligned and feel intentional. */
    .cart-mobile__bar-price {
      display: inline-flex;
      align-items: baseline;
      gap: 0.45rem;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.022em;
      white-space: nowrap;
    }
    .cart-mobile__bar-was {
      font-size: 0.78rem;
      font-weight: 500;
      color: #9ca3af;
      text-decoration: line-through;
      text-decoration-thickness: 1px;
    }
    .cart-mobile__bar-was[hidden] { display: none; }
    .cart-mobile__bar-now {
      font-size: 1.32rem;
      font-weight: 800;
      color: #0f1115;
    }
    .cart-mobile__bar-btn {
      appearance: none;
      border: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 50%),
        linear-gradient(110deg, #0764E8 0%, #4f3bff 50%, #0764E8 100%);
      background-size: 100% 100%, 220% 100%;
      background-position: 0% 0%, 0% 50%;
      color: #fff;
      font-size: 0.95rem;
      font-weight: 700;
      padding: 0.95rem 1.25rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      cursor: pointer;
      letter-spacing: -0.015em;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 0 0 1px rgba(7,100,232,0.16),
        0 8px 19px -8px rgba(7,100,232,0.44),
        0 3px 8px -4px rgba(79,59,255,0.22);
      transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.25s ease;
      -webkit-tap-highlight-color: transparent;
      flex: 1 1 auto;
      min-width: 0;
      animation: mcBarBtnShimmer 7s ease-in-out infinite;
    }
    @keyframes mcBarBtnShimmer {
      0%, 100% { background-position: 0% 0%, 0%   50%; }
      50%      { background-position: 0% 0%, 100% 50%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cart-mobile__bar-btn { animation: none; }
    }
    .cart-mobile__bar-btn:active { transform: scale(0.98); }
    .cart-mobile__bar-btn:hover  {
      color: #fff;
      filter: brightness(1.04);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 0 0 1px rgba(7,100,232,0.18),
        0 12px 24px -8px rgba(7,100,232,0.52),
        0 4px 12px -4px rgba(79,59,255,0.32);
    }
    .cart-mobile__bar-btn-arrow { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
    .cart-mobile__bar-btn:hover .cart-mobile__bar-btn-arrow,
    .cart-mobile__bar-btn:active .cart-mobile__bar-btn-arrow { transform: translateX(2px); }
  }

  /* ==============================================================
     DESKTOP OVERRIDES — wider centered drawer with a floating X
     close button and compact carousel chips. All drawer mechanics
     (sticky hero, items scroll, locked carousel, blurred backdrop,
     checkout bar) are inherited from the universal rules.
     ============================================================== */
  @media (min-width: 750px) {
    /* Legacy mobile drawer must never show on desktop /cart — only this
       centered modal is the cart experience. */
    body.template-cart .cart-drawer {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    /* The drawer covers the FULL viewport on desktop — including
       over the site header — so it reads as a true modal popup.
       The page itself is locked behind the modal (no scroll). */
    html:has(body.template-cart) {
      /* Keep the theme's dark canvas so the browser never flashes white. */
      background: #0a0b0e !important;
    }
    body.template-cart {
      background: transparent !important;
    }
    body.template-cart main {
      padding-top: 0 !important;
      margin: 0 !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      overflow: hidden !important;
      background: transparent !important;
    }
    body.template-cart .shopify-section {
      background: transparent !important;
    }
    /* Keep the header visible so the overlay can blur the real page.
       Hide footer + widgets only — avoids a tall scrollable page behind. */
    body.template-cart > [class*="shopify-section-group-footer"],
    body.template-cart > footer,
    body.template-cart .site-footer,
    body.template-cart .vb-footer,
    body.template-cart .footer-group,
    body.template-cart .gift-sticker,
    /* Hide site footer (payment icons, links) — not the header/backdrop. */
    body.template-cart #shopify-section-group-footer-group,
    body.template-cart .shopify-section-group-footer-group,
    body.template-cart > [class*="shopify-section-group-footer"] {
      display: none !important;
    }
    /* Pin the drawer to the viewport — no scroll, no layout flow,
       no "weird container" around it from parent elements. The X,
       backdrop, and sheet all anchor to the full viewport. */
    .cart-page {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      height: 100vh; /* fallback */
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden;
      background: transparent !important;
    }
    /* Desktop: pure blur backdrop — no tint, no dimming.
       The homepage stays dark and visible, just softly out of focus. */
    .cart-page__backdrop {
      display: block !important;
      opacity: 1 !important;
      background: transparent !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      filter: none !important;
      -webkit-filter: none !important;
      transform: none !important;
    }
    .cart-page::after {
      display: none !important;
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    /* Centered modal sheet — sized for a focused, premium feel
       (~30% narrower than the previous 960px). Sits above the site
       header (z-index inheritance from .cart-page). */
    .cart-page__sheet {
      max-width: 680px;
      width: 100%;
      margin: 0 auto;
      align-self: center;
      max-height: min(820px, calc(100dvh - 80px));
      border-radius: 22px;
      padding: 1.15rem 0 0;
      box-shadow:
        0 -1px 0 rgba(255,255,255,0.6) inset,
        0 24px 60px -20px rgba(15,17,21,0.32),
        0 8px 24px -8px rgba(15,17,21,0.18);
    }
    /* Desktop close animation — fade + scale down (not slide). */
    .cart-page.is-closing .cart-page__sheet {
      transform: scale(0.97) translateY(8px);
      opacity: 0;
    }
    /* Hide the iOS-style drag handle on desktop — the X button
       below replaces it. */
    .cart-page__sheet::before { display: none; }

    /* Floating X close — sits ON the sheet's top-right corner
       (half-inside, half-outside). The sheet maxes out at
       680×820 centered inside the full-viewport .cart-page,
       so the X is anchored to that bounding box via calc().
       For small viewports we fall back to a fixed inset so the
       button never escapes the screen. */
    .cart-page__sheet-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: max(12px, calc(50% - 410px - 17px));
      right: max(12px, calc(50% - 340px - 17px));
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(15,17,21,0.08);
      background: #ffffff;
      color: #0f1115;
      cursor: pointer;
      padding: 0;
      z-index: 1100;
      box-shadow:
        0 1px 2px rgba(15,17,21,0.06),
        0 10px 22px -8px rgba(15,17,21,0.24);
      transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.18s ease,
        border-color 0.18s ease;
    }
    .cart-page__sheet-close:hover {
      background: #ffffff;
      border-color: rgba(15,17,21,0.16);
      transform: scale(1.04);
    }
    .cart-page__sheet-close:active { transform: scale(0.96); }
    .cart-page__sheet-close svg { display: block; }

    /* Checkout bar lives inside the modal — never viewport-fixed on desktop. */
    .cart-page__sheet {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }
    .cart-page__sheet > .cart-mobile {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .cart-page__sheet > .cart-mobile__bar {
      position: relative !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
      flex: 0 0 auto !important;
      flex-shrink: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      z-index: 5 !important;
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      border-radius: 0 0 22px 22px;
      box-shadow:
        0 -1px 0 rgba(15,17,21,0.05) inset,
        0 -12px 24px -16px rgba(15,17,21,0.12);
    }
    .cart-mobile__body {
      padding-bottom: 0 !important;
    }
    /* Comfortable side padding for the wider drawer. */
    .cart-mobile__hero {
      margin: 0 1.5rem 1.25rem;
      padding: 1rem 1.5rem 1.15rem;
    }
    .cart-mobile__items,
    .cart-mobile__cf {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    /* Carousel: 5 across at the narrower drawer width, keeping the
       chips readable without dominating the layout. */
    .cart-mobile__cf-viewport { margin: 0 -1.5rem; }
    .cart-mobile__cf-track {
      gap: 0.5rem;
      padding: 0.15rem 1.5rem 0.55rem;
    }
    .cart-mobile__cf-card {
      flex: 0 0 calc((100% - 2rem) / 5);
      padding: 0.4rem 0.4rem 0.45rem;
      border-radius: 13px;
    }
    .cart-mobile__cf-media {
      border-radius: 10px;
      margin-bottom: 0.4rem;
    }
    .cart-mobile__cf-name {
      font-size: 0.74rem;
      line-height: 1.18;
      margin: 0 0.1rem 0.2rem;
    }
    .cart-mobile__cf-prices {
      margin: 0 0.1rem 0.35rem;
      gap: 0;
    }
    .cart-mobile__cf-was   { font-size: 0.6rem; }
    .cart-mobile__cf-price { font-size: 0.72rem; }
    .cart-mobile__cf-add {
      padding: 0.45rem 0.35rem;
      font-size: 0.7rem;
      gap: 0.22rem;
      border-radius: 9px;
    }
    .cart-mobile__cf-add-icon { width: 11px; height: 11px; }

    /* Nav arrows sized to the new chip proportions. */
    .cart-mobile__cf-nav {
      width: 28px;
      height: 28px;
      top: 30%;
    }
    .cart-mobile__cf-nav svg { width: 14px; height: 14px; }

    /* Desktop: circle X only — no swipe trash layer behind the row. */
    .cart-mobile__item-trash {
      display: none !important;
    }
    .cart-mobile__item-card {
      --mc-swipe-x: 0px;
      transform: none !important;
    }
    .cart-mobile__item.is-swiped .cart-mobile__item-card,
    .cart-mobile__item.is-swiping .cart-mobile__item-card {
      transform: none !important;
    }
    .cart-mobile__cf {
      padding-bottom: 1.25rem;
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:31) */
.collection.section { padding-top: 2.5rem; }

  .collection__rows-header {
    padding-top: 0.5rem;
    padding-bottom: 1.75rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  .collection__rows-title {
    margin: 0;
    font-family: var(--font-heading, inherit);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
  }
  .collection__rows-sub {
    margin: 0.625rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    max-width: 60ch;
  }

  .collection__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 0 0 2rem;
  }
  .collection__title-wrap { flex: 1 1 320px; min-width: 0; }
  .collection__title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    font-weight: 600;
  }
  .collection__title-tag {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
  }
  .collection__desc {
    color: rgba(255, 255, 255, 0.55);
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
  }

  .collection__filters {
    display: inline-flex;
    gap: 0.625rem;
    flex-wrap: wrap;
  }
  .collection__filter {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
  }
  .collection__filter-label {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
  }
  .collection__filter-select-wrap {
    position: relative;
    display: inline-block;
  }
  .collection__filter select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .collection__filter select:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
  }
  .collection__filter select:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
  }
  .collection__filter select option {
    background: #0E1116;
    color: #fff;
  }
  .collection__filter-chev {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.55);
  }

  .collection__empty {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 3rem 0;
  }

  .pagination { text-align: center; margin-top: 2.5rem; }
  .pagination a, .pagination span {
    display: inline-block; padding: 0.5rem 0.75rem; color: var(--color-muted);
  }
  .pagination .page.current { color: var(--color-accent); font-weight: 800; }

  /* Shop-all rows (mimic featured-products carousels) */
  .collection--shop-all { padding-top: 1.5rem; }
  .shop-all-row {
    margin: 3rem 0 1rem;
    overflow: hidden;
  }
  .shop-all-row:first-child { margin-top: 0; }
  .shop-all-row__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    padding-left: clamp(2rem, 22vw, 22rem);
    padding-right: clamp(2rem, 5vw, 5rem);
  }
  .shop-all-row__heading h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    letter-spacing: -0.02em;
    font-weight: 600;
  }
  .shop-all-row__heading p {
    color: rgba(255, 255, 255, 0.55);
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
  }
  .shop-all-row__nav {
    display: inline-flex;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .shop-all-row__nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .shop-all-row__nav-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .shop-all-row__nav-btn[disabled] { opacity: 0.35; cursor: default; }

  .shop-all-row__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem clamp(2rem, 5vw, 5rem) 0.5rem clamp(2rem, 22vw, 22rem);
    scroll-padding-left: clamp(2rem, 22vw, 22rem);
    scrollbar-width: none;
  }
  .shop-all-row__track::-webkit-scrollbar { display: none; }
  .shop-all-row__item { scroll-snap-align: start; min-width: 0; }
  .shop-all-row__item .product-card { height: auto; aspect-ratio: 4 / 5; }

  .shop-all-row__item--all { display: flex; }
  .shop-all-row__all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 300px;
    border: 0;
    border-radius: 22px;
    background: #151516;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .shop-all-row__all:hover { background: #1d1d1f; }
  .shop-all-row__all-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .shop-all-row__all:hover .shop-all-row__all-pill {
    border-color: rgba(255, 255, 255, 0.35);
  }

  @media (min-width: 1200px) {
    .shop-all-row__track {
      grid-auto-columns: 340px;
    }
  }
  @media (min-width: 1600px) {
    .shop-all-row__track {
      grid-auto-columns: 360px;
    }
  }

  @media (max-width: 749px) {
    .collection.section { padding: 1.5rem 0 3rem; }
    .collection__header {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }
    .collection__title-wrap { flex: 0 0 auto; }
    .collection__title { font-size: 1.75rem; }
    .collection__filters { width: 100%; gap: 0.5rem; }
    .collection__filter {
      flex: 1 1 calc(50% - 0.25rem);
      min-width: 0;
    }
    .collection .product-grid { gap: 0.75rem; }

    .shop-all-row { margin: 2rem 0 0.5rem; }
    .shop-all-row__header {
      padding-left: 1rem;
      padding-right: 1rem;
      margin-bottom: 1rem;
    }
    .shop-all-row__track {
      grid-auto-columns: 86%;
      gap: 0.75rem;
      padding-left: 1rem;
      padding-right: 1rem;
      scroll-padding-left: 1rem;
    }
    .shop-all-row__item .product-card {
      aspect-ratio: 4 / 5;
      height: auto;
    }
    .shop-all-row__all {
      aspect-ratio: 4 / 5;
      min-height: 0;
      height: auto;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-list-collections (INDEX:32) */
.collections-grid { grid-template-columns: repeat(3, 1fr); }
  .collection-card { color: var(--color-fg); }
  .collection-card__media {
    aspect-ratio: 4 / 3;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
  }
  .collection-card__img { width: 100%; height: 100%; object-fit: cover; }
  .collection-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 3rem; font-weight: 800; color: var(--color-muted);
  }
  .collection-card__title { margin: 0; font-size: 1.0625rem; }
  .collection-card__meta { margin: 0.25rem 0 0; color: var(--color-muted); font-size: 0.875rem; }
  @media (max-width: 749px) { .collections-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .collections-grid { grid-template-columns: 1fr; } }
/* END_SECTION:main-list-collections */

/* START_SECTION:main-page (INDEX:33) */
.page__wrap { max-width: 780px; }
  .page__header { margin-bottom: 2rem; }
  .rte { line-height: 1.65; color: color-mix(in srgb, var(--color-fg) 90%, transparent); }
  .rte h2, .rte h3 { margin-top: 2rem; }
  .rte a { color: var(--color-accent); }
  .rte p, .rte ul, .rte ol { margin: 0 0 1rem; }
/* END_SECTION:main-page */

/* START_SECTION:main-product (INDEX:34) */
.product-hero {
    position: relative;
    width: 100%;
    padding: clamp(1.5rem, 4vh, 3.25rem) 1.5rem 2rem;
    background: var(--color-bg, #000);
    color: #fff;
    overflow: hidden;
  }

  .product-hero__stage {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 2;
  }

  /* Floating stars — same pattern as the homepage hero */
  .product-hero__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .product-hero__dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.35);
    opacity: 0.35;
    animation: product-hero-twinkle 6s ease-in-out infinite, product-hero-drift 22s linear infinite;
  }
  @keyframes product-hero-twinkle {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.45; }
  }
  @keyframes product-hero-drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0, -10px, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }

  .product-hero__dot--1  { top:  6%; left:  4%; animation-delay: -1.2s, 0s; }
  .product-hero__dot--2  { top: 12%; left: 18%; animation-delay: -3.1s, -2s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--3  { top: 22%; left:  9%; animation-delay: -0.7s, -5s; }
  .product-hero__dot--4  { top: 30%; left: 44%; animation-delay: -2.4s, -1s; }
  .product-hero__dot--5  { top: 42%; left: 22%; animation-delay: -4.8s, -8s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--6  { top: 14%; left: 70%; animation-delay: -1.9s, -3s; }
  .product-hero__dot--7  { top: 26%; left: 86%; animation-delay: -3.6s, -6s; }
  .product-hero__dot--8  { top:  8%; left: 54%; animation-delay: -0.3s, -10s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--9  { top: 48%; left: 72%; animation-delay: -2.1s, -4s; }
  .product-hero__dot--10 { top: 56%; left:  5%; animation-delay: -5.2s, -7s; }
  .product-hero__dot--11 { top: 62%; left: 34%; animation-delay: -1.0s, -9s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--12 { top: 70%; left: 62%; animation-delay: -3.9s, -2s; }
  .product-hero__dot--13 { top: 80%; left: 18%; animation-delay: -4.4s, -11s; }
  .product-hero__dot--14 { top: 88%; left: 48%; animation-delay: -2.7s, -4s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--15 { top: 92%; left: 82%; animation-delay: -1.6s, -6s; }
  .product-hero__dot--16 { top: 18%; left: 38%; animation-delay: -5.5s, -1s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--17 { top: 38%; left: 96%; animation-delay: -0.9s, -12s; }
  .product-hero__dot--18 { top: 52%; left: 88%; animation-delay: -4.2s, -3s; }
  .product-hero__dot--19 { top: 72%; left:  2%; animation-delay: -3.3s, -9s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--20 { top: 84%; left: 72%; animation-delay: -1.4s, -5s; }
  .product-hero__dot--21 { top:  4%; left: 32%; animation-delay: -2.8s, -7s; }
  .product-hero__dot--22 { top: 36%; left: 60%; animation-delay: -5.8s, -10s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--23 { top: 58%; left: 44%; animation-delay: -0.5s, -2s; }
  .product-hero__dot--24 { top: 76%; left: 90%; animation-delay: -2.2s, -8s; }
  .product-hero__dot--25 { top: 16%; left: 92%; animation-delay: -4.6s, -4s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--26 { top: 46%; left: 14%; animation-delay: -1.8s, -11s; }
  .product-hero__dot--27 { top: 68%; left: 26%; animation-delay: -3.5s, -6s; }
  .product-hero__dot--28 { top: 94%; left: 30%; animation-delay: -0.2s, -1s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--29 { top: 24%; left: 50%; animation-delay: -4.9s, -13s; }
  .product-hero__dot--30 { top: 34%; left: 28%; animation-delay: -2.5s, -3s; }
  .product-hero__dot--31 { top: 10%; left: 84%; animation-delay: -5.1s, -9s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--32 { top: 64%; left: 96%; animation-delay: -1.3s, -2s; }
  .product-hero__dot--33 { top: 78%; left: 52%; animation-delay: -3.8s, -12s; }
  .product-hero__dot--34 { top: 86%; left:  8%; animation-delay: -0.6s, -7s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--35 { top: 20%; left: 78%; animation-delay: -2.9s, -4s; }
  .product-hero__dot--36 { top: 54%; left: 58%; animation-delay: -4.3s, -10s; }
  .product-hero__dot--37 { top: 40%; left:  6%; animation-delay: -1.7s, -6s; width: 1.5px; height: 1.5px; }
  .product-hero__dot--38 { top: 60%; left: 20%; animation-delay: -5.4s, -1s; }
  .product-hero__dot--39 { top: 28%; left: 66%; animation-delay: -3.0s, -14s; }
  .product-hero__dot--40 { top: 50%; left: 36%; animation-delay: -0.8s, -5s; width: 1.5px; height: 1.5px; }

  @media (prefers-reduced-motion: reduce) {
    .product-hero__dot { animation: none; opacity: 0.3; }
  }

  .product-hero__title {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5.5vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 55%, #5a5a5a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    transform: translate3d(var(--hero-title-mx, 0px), var(--hero-title-my, 0px), 0);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .product-hero__media {
    position: relative;
    z-index: 2;
    width: min(88%, 620px, 56vh);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(-2rem, -2.5vw, -1rem);
    transform: translate3d(var(--hero-media-mx, 0px), var(--hero-media-my, 0px), 0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .product-hero__play {
    position: absolute;
    right: -4%;
    bottom: 4%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(10, 12, 18, 0.55);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    animation: product-hero-play-in 0.5s 0.5s ease-out forwards;
  }
  .product-hero__play:hover {
    color: #fff;
    background: rgba(16, 20, 30, 0.78);
    border-color: rgba(255, 255, 255, 0.22);
  }
  .product-hero__play:focus-visible {
    outline: 2px solid var(--color-accent, #0764E8);
    outline-offset: 3px;
  }
  @keyframes product-hero-play-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-hero__play { animation: none; opacity: 1; }
  }
  /* Two play-button instances are rendered: one inside the image
     container for desktop (overlay corner of the artwork), and one as a
     sibling AFTER the DAW row for mobile (sits in normal flow below
     the logos and scrolls with the page). CSS hides whichever isn't
     relevant for the current viewport. */
  .product-hero__play--mobile { display: none; }

  @media (max-width: 749px) {
    .product-hero__play--desktop { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-hero__media,
    .product-hero__title { transform: none; transition: none; }
  }
  .product-hero__media::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 70%;
    height: 18%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0) 70%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 1;
  }

  /* ---------- DAW logo row (under hero image) ---------- */
  .product-hero__daws {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    /* Tucked tight under the album art. The hero media has a soft glow
       underneath via ::after; a small negative margin nudges the logos
       past it without colliding with the image edge. */
    margin: clamp(-0.25rem, -0.4vw, 0rem) auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .product-hero__daw {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, opacity 0.18s ease;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    /* Each logo runs a small bounce on page load and then again on a
       5s loop. The --daw-i custom prop on the button (set inline by
       Liquid) staggers the start so they ripple left → right. The
       active bounce takes ~0.7s; the remainder of the 5s cycle is
       just rest. */
    animation: product-hero-daw-bounce 5s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
    animation-delay: calc(var(--daw-i, 0) * 90ms + 200ms);
  }
  @keyframes product-hero-daw-bounce {
    0%   { transform: translateY(0);    }
    5%   { transform: translateY(-10px) scale(1.04); }
    10%  { transform: translateY(0);    }
    13%  { transform: translateY(-3px); }
    16%  { transform: translateY(0);    }
    100% { transform: translateY(0);    }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-hero__daw { animation: none; }
  }
  .product-hero__daw:focus-visible {
    outline: 2px solid var(--color-accent, #0764E8);
    outline-offset: 4px;
    border-radius: 10px;
  }
  .product-hero__daw img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  }
  /* Hover/active scale lives on the <img> instead of the button so it
     doesn't fight the looping bounce animation, which is on the button's
     transform. */
  .product-hero__daw:hover img {
    transform: scale(1.14);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  }
  .product-hero__daw:active img {
    transform: scale(1.04);
    transition-duration: 0.08s;
  }
  @media (max-width: 749px) {
    .product-hero__daws {
      /* Sits just under the album art's reflection glow so the logos
         feel attached to the image without overlapping it. */
      margin-top: 0.125rem;
      gap: 0.375rem;
    }
    .product-hero__daw img { width: 32px; height: 32px; border-radius: 8px; }
  }

  .product-hero__img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Single soft drop-shadow only. The previous double drop-shadow stacked
       a 0.45-alpha 0/0/20 blur on top of a 0.65-alpha shadow which traced
       the album-art's square edge and looked like a black box around the
       image, especially on mobile. */
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.32));
  }

  .product-hero__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  }

  /* Shared buy pill used inline in hero AND as the sticky/docked bar */
  .buy-pill {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    background: rgba(14, 17, 22, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
  }

  .buy-pill--inline {
    position: relative;
    z-index: 3;
    width: fit-content;
    max-width: calc(100% - 1rem);
    margin: clamp(2rem, 4vh, 3rem) auto 0;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .buy-pill--inline.is-morphing {
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
  }

  .buy-pill__media {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
  }
  .buy-pill__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .buy-pill__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .buy-pill__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .buy-pill__price {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }

  .buy-pill__form { margin: 0; display: inline-flex; }
  .buy-pill__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    background: var(--color-accent);
    color: #fff;
    border: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-accent) 70%, transparent);
  }
  .buy-pill__btn:hover:not([disabled]) {
    background: color-mix(in srgb, var(--color-accent) 85%, #fff);
    transform: translateY(-1px);
  }
  .buy-pill__btn[disabled] { opacity: 0.45; cursor: not-allowed; }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }

  /* Mobile-only scroll indicator (mouse + chevron), matched to custom-presets hero.
     Hidden on desktop; auto-hides once the user scrolls. */
  .product-hero__scroll-hint {
    display: none;
  }

  @keyframes productHeroScrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
  }

  @keyframes productHeroScrollWheel {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    60%  { transform: translate(-50%, 10px); opacity: 0; }
    61%  { transform: translate(-50%, 0); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
  }

  @media (max-width: 749px) {
    .product-hero {
      padding: clamp(2.5rem, 7vh, 5rem) 0 140px;
      min-height: calc(100svh - var(--header-height, 112px) - 120px);
      min-height: calc(100dvh - var(--header-height, 112px) - 120px);
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
    .product-hero__stage {
      width: 100%;
      max-width: none;
      justify-content: center;
      padding: 0;
    }
    .product-hero__title {
      font-size: 22vw;
      line-height: 0.88;
      letter-spacing: -0.05em;
      padding: 0;
      margin: 0;
      width: 100%;
      white-space: nowrap;
      overflow: visible;
    }
    .product-hero__media {
      width: min(56%, 280px);
      margin-top: -1.5vw;
    }
    .product-hero__img {
      filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22));
    }
    .product-hero__media::after {
      left: 50%;
      bottom: -10%;
      width: 85%;
      height: 22%;
      background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.14) 40%,
        rgba(255, 255, 255, 0) 75%
      );
      filter: blur(18px);
    }
    .product-hero__card-row { flex-direction: column; align-items: stretch; }
    .product-hero__buy { justify-content: center; width: 100%; }
    .buy-pill--inline { display: none; }

    .product-hero__scroll-hint {
      position: absolute;
      left: 50%;
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      top: auto;
      z-index: 6;
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: auto;
      height: auto;
      padding: 0.4rem 0.6rem;
      color: rgba(255, 255, 255, 0.85);
      pointer-events: none;
      transform: translateX(-50%);
      opacity: 0.85;
      transition: opacity 0.3s ease;
    }
    .product-hero__scroll-hint.is-hidden {
      opacity: 0;
    }
    .product-hero__scroll-mouse { display: none; }
    .product-hero__scroll-chevron {
      display: block;
      opacity: 0.9;
    }
  }

  @media (max-width: 749px) and (prefers-reduced-motion: reduce) {
    .product-hero__scroll-hint,
    .product-hero__scroll-wheel {
      animation: none !important;
    }
  }

  /* =====================================================================
     Audio compare (Raw / Mixed) — replaces the DAW logo row on products
     that have 3+ media items. Sits directly on the dark hero, no card.
     ===================================================================== */
  .audio-compare {
    --ac-track: rgba(255, 255, 255, 0.22);
    --ac-fill: var(--color-accent, #0764E8);
    --ac-playhead: #ffffff;
    --ac-progress: 0;
    position: relative;
    z-index: 6;
    width: min(100%, 560px);
    margin: clamp(0.35rem, 1vw, 0.75rem) auto 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    user-select: none;
  }

  /* ---- Waveform ---- */
  .audio-compare__wave {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3px;
    height: clamp(44px, 5.5vw, 56px);
    padding: 0;
    overflow: hidden;
  }
  .audio-compare__bar {
    flex: 1 1 0;
    height: var(--h, 60%);
    min-height: 4px;
    border-radius: 999px;
    background: var(--ac-track);
  }
  .audio-compare__bar--fill { background: var(--ac-fill); }

  .audio-compare__progress {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    clip-path: inset(0 calc(100% - var(--ac-progress, 0) * 1%) 0 0);
    -webkit-clip-path: inset(0 calc(100% - var(--ac-progress, 0) * 1%) 0 0);
  }

  /* left % is relative to the wave container (not the playhead width). */
  .audio-compare__playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 999px;
    background: var(--ac-playhead);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
    left: calc(var(--ac-progress, 0) * 1%);
    transform: translateX(-50%);
    pointer-events: none;
    will-change: left;
  }

  .audio-compare__scrub {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .audio-compare__scrub:focus-visible {
    outline: 2px solid var(--ac-fill);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .audio-compare__bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(0.65rem, 1.5vw, 1rem);
    margin-top: clamp(0.55rem, 1.2vw, 0.85rem);
  }

  .audio-compare__toggle {
    display: inline-flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .audio-compare__toggle-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
    letter-spacing: -0.005em;
    padding: 0.4rem 1rem;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease, background 0.2s ease;
    line-height: 1;
  }
  .audio-compare__toggle-btn:hover:not(.is-active) { color: rgba(255, 255, 255, 0.85); }
  .audio-compare__toggle-btn.is-active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
  .audio-compare__toggle-btn:focus-visible {
    outline: 2px solid var(--ac-fill);
    outline-offset: 2px;
  }
  .audio-compare__toggle-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .audio-compare__toggle-dot--raw   { background: rgba(255, 255, 255, 0.45); }
  .audio-compare__toggle-dot--mixed { background: var(--ac-fill); }

  .audio-compare__controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .audio-compare__ctrl {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .audio-compare__ctrl:hover { transform: scale(1.06); }
  .audio-compare__ctrl:active { transform: scale(0.96); }
  .audio-compare__ctrl:focus-visible {
    outline: 2px solid var(--ac-fill);
    outline-offset: 4px;
    border-radius: 999px;
  }
  .audio-compare__ctrl--play {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--ac-fill);
    color: #fff;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--ac-fill) 65%, transparent);
  }
  .audio-compare__ctrl--play:hover {
    background: color-mix(in srgb, var(--ac-fill) 85%, #fff);
    transform: scale(1.05);
  }

  .audio-compare__icon { display: block; }
  .audio-compare__icon--play { transform: translateX(1px); }
  .audio-compare__icon--pause { display: none; }
  .audio-compare.is-playing .audio-compare__icon--play  { display: none; }
  .audio-compare.is-playing .audio-compare__icon--pause { display: block; }

  @media (max-width: 749px) {
    .audio-compare { width: min(90vw, 380px); }
    .audio-compare__wave {
      height: 44px;
      gap: 2px;
    }
    .audio-compare__progress { gap: 2px; }
    .audio-compare__bottom {
      margin-top: 1.35rem;
      gap: 0.9rem;
    }
    .audio-compare__toggle-btn {
      padding: 0.5rem 1.05rem;
      font-size: 0.95rem;
    }
    .audio-compare__toggle-dot {
      width: 8px;
      height: 8px;
    }
    .audio-compare__ctrl--play { width: 46px; height: 46px; }
    .audio-compare__icon--play,
    .audio-compare__icon--pause {
      width: 24px;
      height: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .audio-compare__ctrl,
    .audio-compare__toggle-btn { transition: none; }
  }
/* END_SECTION:main-product */

/* START_SECTION:main-search (INDEX:35) */
.search__form { display: flex; gap: 0.5rem; max-width: 640px; margin: 0 auto 2rem; }
  .search__input {
    flex: 1; padding: 0.9rem 1.1rem; background: var(--color-card); color: var(--color-fg);
    border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit;
  }
  .search__input:focus { border-color: var(--color-accent); outline: none; }
  .search__summary { text-align: center; color: var(--color-muted); margin-bottom: 2rem; }
/* END_SECTION:main-search */

/* START_SECTION:presets-included (INDEX:36) */
.presets-included {
    position: relative;
    isolation: isolate;
    color: var(--pi-text, #0a0a0a);
    padding: 3.5rem 1.25rem;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* Full-bleed white background that ignores the Shopify section grid */
  .presets-included::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--pi-bg, #fff);
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Close the visual gap created by the dark section's padding-bottom above */
  .shopify-section:has(> .presets-included) {
    margin-top: -3rem;
  }

  @media (max-width: 768px) {
    .shopify-section:has(> .presets-included) {
      margin-top: -2rem;
    }
  }

  .presets-included__inner {
    max-width: 820px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .presets-included__heading {
    font-size: clamp(1.85rem, 5.5vw, 2.6rem);
    font-weight: 800;
    text-align: center;
    margin: 0 0 2.25rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--pi-text, #0a0a0a);
  }

  .presets-included__list {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .preset-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.1rem;
    width: 100% !important;
    max-width: 540px;
    margin: 0 auto 2rem auto !important;
    padding-left: 2.75rem;
    box-sizing: border-box;
  }

  @media (max-width: 768px) {
    .preset-row {
      padding-left: 0;
    }
  }

  .preset-row:last-child {
    margin-bottom: 0 !important;
  }

  .preset-row__thumb {
    flex: 0 0 110px !important;
    width: 110px !important;
    height: 110px !important;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #1a1a1a;
  }

  .preset-row__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .preset-row__body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .preset-row__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--pi-text, #0a0a0a);
  }

  .preset-row__subtitle {
    font-size: 0.78rem;
    color: var(--pi-subtitle, #6b6b6b);
    margin: 0 0 0.7rem;
    line-height: 1.45;
    font-weight: 400;
  }

  .preset-row__player {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    width: 100% !important;
  }

  .preset-row__play {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pi-accent, #0a0a0a);
    color: #fff;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
  }

  .preset-row__play:hover {
    transform: scale(1.06);
  }

  .preset-row__play:focus-visible {
    outline: 2px solid var(--pi-accent, #0a0a0a);
    outline-offset: 2px;
  }

  .preset-row__icon {
    width: 14px;
    height: 14px;
  }

  .preset-row__icon--play {
    margin-left: 2px;
  }

  .preset-row__icon--pause {
    display: none;
  }

  .preset-row__play.is-playing .preset-row__icon--play {
    display: none;
  }

  .preset-row__play.is-playing .preset-row__icon--pause {
    display: block;
  }

  .preset-row__wave {
    display: flex !important;
    align-items: center;
    gap: 3px;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 28px;
  }

  .preset-row__bar {
    display: block;
    width: 3px;
    background: var(--pi-text, #0a0a0a);
    border-radius: 2px;
    height: var(--h, 50%);
    transition: transform 0.2s ease;
    transform-origin: center;
  }

  .preset-row.is-playing .preset-row__bar {
    animation: preset-row-bar-pulse 0.9s ease-in-out infinite;
  }

  .preset-row.is-playing .preset-row__bar:nth-child(2n) {
    animation-delay: 0.1s;
  }

  .preset-row.is-playing .preset-row__bar:nth-child(3n) {
    animation-delay: 0.2s;
  }

  .preset-row.is-playing .preset-row__bar:nth-child(4n) {
    animation-delay: 0.3s;
  }

  @keyframes preset-row-bar-pulse {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.55); }
  }

  @media (max-width: 480px) {
    .presets-included {
      padding: 2.75rem 1rem;
    }

    .preset-row {
      gap: 0.9rem;
    }

    .preset-row__thumb {
      flex: 0 0 92px !important;
      width: 92px !important;
      height: 92px !important;
      border-radius: 12px;
    }

    .preset-row__title {
      font-size: 1.05rem;
    }

    .preset-row__subtitle {
      font-size: 0.72rem;
    }

    .preset-row__wave {
      height: 24px;
      gap: 2px;
    }

    .preset-row__bar {
      width: 2.5px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .preset-row.is-playing .preset-row__bar {
      animation: none;
    }
  }
/* END_SECTION:presets-included */

/* START_SECTION:product-audio-preview (INDEX:37) */
.product-audio {
    background: var(--color-bg);
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
  }
  .product-audio__header {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  .product-audio__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-audio__title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .product-audio__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
  }

  .product-audio__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 760px;
    margin: 0 auto;
  }
  .product-audio__track {
    display: grid;
    grid-template-columns: auto 1fr 2fr;
    gap: 1rem;
    align-items: center;
    padding: 0.875rem 1.125rem;
    background: #0E1116;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
  }

  .product-audio__play {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    background: var(--color-accent, #0764E8);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex-shrink: 0;
  }
  .product-audio__play:hover { transform: scale(1.05); }
  .product-audio__icon--pause { display: none; }
  .product-audio__track.is-playing .product-audio__icon--play { display: none; }
  .product-audio__track.is-playing .product-audio__icon--pause { display: block; }

  .product-audio__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .product-audio__name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product-audio__sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .product-audio__wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    overflow: hidden;
  }
  .product-audio__bar {
    flex: 1;
    height: calc(var(--h, 3) * 3px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.5px;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .product-audio__track.is-playing .product-audio__bar {
    background: var(--color-accent, #0764E8);
    animation: product-audio-bar 0.9s ease-in-out infinite alternate;
  }
  @keyframes product-audio-bar {
    from { transform: scaleY(0.4); }
    to   { transform: scaleY(1);   }
  }

  @media (max-width: 749px) {
    .product-audio__track { grid-template-columns: auto 1fr; grid-auto-rows: auto; }
    .product-audio__wave { grid-column: 1 / -1; }
  }
/* END_SECTION:product-audio-preview */

/* START_SECTION:product-before-after (INDEX:38) */
.product-ba {
    background: var(--ba-bg, var(--color-bg, #0a0a0a));
    color: #fff;
    /* Falls back to --section-py if defined (main theme layout), then 80px,
       so the section never has 0 padding even on layouts that don't define
       the spacing variable (e.g. theme.conversion / landing pages). */
    padding-top: var(--ba-pt, var(--section-py, 80px));
    padding-bottom: var(--ba-pb, var(--section-py, 80px));
  }
  @media (max-width: 749px) {
    .product-ba {
      /* Mobile padding scales down to 60% of the desktop value so the player
         doesn't feel cramped but also doesn't eat the screen. */
      padding-top: calc(var(--ba-pt, var(--section-py, 80px)) * 0.7);
      padding-bottom: calc(var(--ba-pb, var(--section-py, 80px)) * 0.7);
    }
  }

  .product-ba__header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  .product-ba__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
  }
  .product-ba__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .product-ba__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    max-width: 560px;
  }

  /* ---------- Panel ---------- */
  .product-ba__panel {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
    text-align: center;
  }

  /* ---------- Album art ---------- */
  .product-ba__art {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    --ba-pos: 0;
    user-select: none;
  }

  .product-ba__art-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    transition: filter 0.18s ease;
    /* --ba-pos is 0 (BEFORE) -> 100 (AFTER). Filter morphs accordingly. */
    filter:
      grayscale(calc((100 - var(--ba-pos)) * 0.008))
      brightness(calc(0.62 + var(--ba-pos) * 0.0048))
      saturate(calc(0.45 + var(--ba-pos) * 0.0095))
      contrast(calc(0.92 + var(--ba-pos) * 0.0023));
  }

  /* ---------- Waveform (decorative; reacts to play state) ---------- */
  .product-ba__wave {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 28px;
    margin: clamp(1rem, 2.2vw, 1.4rem) auto 0;
    padding: 0 0.25rem;
    max-width: 220px;
    pointer-events: none;
    user-select: none;
  }
  .product-ba__wave-bar {
    flex: 0 0 3px;
    height: 30%;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    transform-origin: 50% 100%;
    animation: product-ba-wave 1.1s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -80ms);
    animation-play-state: paused;
    transition: background 0.25s ease, height 0.25s ease;
  }
  .product-ba.is-playing .product-ba__wave-bar {
    animation-play-state: running;
    background: #fff;
  }
  @keyframes product-ba-wave {
    0%, 100% { transform: scaleY(0.35); }
    20%      { transform: scaleY(0.85); }
    40%      { transform: scaleY(0.55); }
    60%      { transform: scaleY(1);    }
    80%      { transform: scaleY(0.6);  }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-ba__wave-bar { animation: none !important; }
  }

  /* ---------- Controls row (play + before/after toggle) ---------- */
  .product-ba__controls {
    margin: clamp(0.75rem, 1.6vw, 1rem) auto 0;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
  }

  .product-ba__play {
    appearance: none;
    border: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #0d0d0d;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }
  .product-ba__play:hover {
    transform: translateY(-1px);
    background: #1a1a1a;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
  .product-ba__play:active { transform: translateY(0); }
  .product-ba__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  .product-ba__icon { display: block; }
  .product-ba__icon--play { padding-left: 3px; }
  .product-ba__icon--pause { display: none; }
  .product-ba.is-playing .product-ba__icon--play { display: none; }
  .product-ba.is-playing .product-ba__icon--pause { display: block; }

  /* Before / After toggle pill */
  .product-ba__toggle {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border-radius: 999px;
    padding: 0.5rem 0.625rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
  .product-ba__toggle-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(13, 13, 13, 0.42);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    letter-spacing: -0.005em;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
    line-height: 1;
  }
  .product-ba__toggle-btn:hover:not(.is-active) {
    color: rgba(13, 13, 13, 0.7);
  }
  .product-ba__toggle-btn.is-active {
    color: #0d0d0d;
  }
  .product-ba__toggle-btn:focus-visible {
    outline: 2px solid #0d0d0d;
    outline-offset: 2px;
  }
  .product-ba__toggle-divider {
    width: 1px;
    align-self: center;
    height: 1.25rem;
    background: rgba(13, 13, 13, 0.14);
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-ba__art-img,
    .product-ba__play,
    .product-ba__toggle-btn { transition: none; }
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 749px) {
    .product-ba__panel {
      padding: 0;
    }
    .product-ba__art {
      max-width: min(82vw, 320px);
      border-radius: 12px;
    }
    .product-ba__controls {
      gap: 0.625rem;
      width: 100%;
      justify-content: center;
    }
    .product-ba__play {
      width: 48px;
      height: 48px;
    }
    .product-ba__play .product-ba__icon { width: 20px; height: 20px; }
    .product-ba__toggle {
      padding: 0.4375rem 0.5rem;
    }
    .product-ba__toggle-btn {
      font-size: 0.9375rem;
      padding: 0.4375rem 1.125rem;
    }
    .product-ba__wave {
      height: 22px;
      max-width: 180px;
      gap: 2px;
    }
    .product-ba__wave-bar { flex-basis: 2.5px; }
  }
/* END_SECTION:product-before-after */

/* START_SECTION:product-cta (INDEX:39) */
.product-cta {
    background: var(--color-bg, #000);
    padding: var(--section-py) var(--section-px);
  }
  .product-cta__inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    color: #fff;
  }
  .product-cta__media {
    width: clamp(260px, 38vw, 460px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.25rem 0 0.25rem;
  }
  .product-cta__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 32px 48px rgba(0, 0, 0, 0.65));
  }

  /* ---------- Compatible With (bottom of section, under CTA) ---------- */
  .product-cta__compat {
    width: 100%;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
  }
  .product-cta__compat-head {
    text-align: center;
    margin-top: 0.125rem;
  }
  .product-cta__compat-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-cta__compat-sub {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
  }
  .product-cta__daws {
    display: grid;
    grid-template-columns: repeat(4, 110px);
    gap: 0.75rem;
    justify-content: center;
  }
  .product-cta__daw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .product-cta__daw:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
  }
  .product-cta__daw-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
  }
  .product-cta__daw-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
  }
  .product-cta__daw-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.005em;
  }

  /* ---------- 30-Day Guarantee ---------- */
  .product-cta__guarantee {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.5rem 1.5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
  }
  .product-cta__guarantee-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 6px 16px rgba(180, 130, 0, 0.35));
  }
  .product-cta__guarantee-badge svg { display: block; }
  .product-cta__guarantee-copy {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
  }
  .product-cta__guarantee-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
  }
  .product-cta__guarantee-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
  }

  /* ---------- Headline + rating + CTA ---------- */
  .product-cta__eyebrow {
    margin-top: 1.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-cta__title {
    margin: 1.75rem 0 0;
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 60%, #7d7d7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .product-cta__subtitle {
    margin: 0.625rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    max-width: 40rem;
  }

  .product-cta__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .product-cta__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }
  .product-cta__rating-text strong {
    font-weight: 700;
    color: #fff;
    margin-right: 0.25rem;
  }

  .product-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 1.125rem 2rem;
    min-width: clamp(280px, 50vw, 480px);
    border: 0;
    border-radius: 12px;
    background: var(--color-accent, #0764E8);
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 14px 32px -10px rgba(7, 100, 232, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }
  .product-cta__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 18px 36px -10px rgba(7, 100, 232, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  .product-cta__btn:active { transform: translateY(0); }

  .product-cta__trust-row {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
  }
  .product-cta__trust-row-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .product-cta__trust-row-item svg { color: rgba(255, 255, 255, 0.65); }
  .product-cta__trust-row-dot { color: rgba(255, 255, 255, 0.4); }

  /* ---------- Payment icons ---------- */
  .product-cta__pay {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .product-cta__pay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 0.625rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .product-cta__pay-icon svg {
    height: 16px;
    width: auto;
    display: block;
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 749px) {
    .product-cta__daws {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.5rem;
    }
    .product-cta__daw {
      padding: 0.75rem 0.25rem;
      gap: 0.375rem;
    }
    .product-cta__daw-logo {
      width: 44px;
      height: 44px;
    }
    .product-cta__daw-logo img {
      width: 30px;
      height: 30px;
    }
    .product-cta__daw-name {
      font-size: 0.6875rem;
    }
    .product-cta__guarantee {
      padding: 1.125rem;
      gap: 0.875rem;
    }
    .product-cta__guarantee-badge {
      width: 64px;
      height: 64px;
    }
    .product-cta__guarantee-badge svg {
      width: 64px;
      height: 64px;
    }
    .product-cta__guarantee-title { font-size: 1rem; }
    .product-cta__guarantee-text { font-size: 0.8125rem; }
    .product-cta__title {
      font-size: clamp(1.5rem, 6.5vw, 2rem);
    }
    .product-cta__btn {
      width: 100%;
      min-width: 0;
      padding: 1rem 1rem;
    }
  }

  @media (max-width: 380px) {
    .product-cta__daw-name { font-size: 0.625rem; }
  }
/* END_SECTION:product-cta */

/* START_SECTION:product-faq (INDEX:40) */
.product-faq {
    background: var(--color-bg);
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
  }
  .product-faq__header {
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  .product-faq__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-faq__title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .product-faq__list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .product-faq__item {
    background: #0E1116;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }
  .product-faq__item[open] { border-color: rgba(255, 255, 255, 0.14); }
  .product-faq__q {
    list-style: none;
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
  }
  .product-faq__q::-webkit-details-marker { display: none; }
  .product-faq__chev {
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .product-faq__item[open] .product-faq__chev { transform: rotate(180deg); }
  .product-faq__a {
    padding: 0 1.25rem 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 0.9375rem;
  }
  .product-faq__a p { margin: 0 0 0.75rem; }
  .product-faq__a p:last-child { margin-bottom: 0; }

  @media (max-width: 749px) {
    .product-faq__header { margin-bottom: 1rem; }
    .product-faq__title { font-size: clamp(1.4rem, 6vw, 1.85rem); }
  }
/* END_SECTION:product-faq */

/* START_SECTION:product-features (INDEX:41) */
.product-features { background: var(--color-bg); padding-top: 3rem; padding-bottom: 3rem; }
  .product-features__header {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
  .product-features__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-features__title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 60%, #7d7d7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .product-features__subtitle {
    color: rgba(255, 255, 255, 0.6);
    max-width: 40rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
  }

  .product-features__list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .product-features__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .product-features__item--reverse .product-features__text { order: 2; }
  .product-features__item--reverse .product-features__media { order: 1; }

  .product-features__item-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent, #0764E8);
    margin-bottom: 0.75rem;
    display: block;
  }
  .product-features__item-heading {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #fff;
  }
  .product-features__item-text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 1rem;
  }
  .product-features__item-text p { margin: 0 0 1rem; }

  .product-features__media {
    border-radius: 20px;
    overflow: hidden;
    background: #0E1116;
    border: 1px solid rgba(255, 255, 255, 0.06);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-features__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .product-features__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-features__media--transparent {
    background: transparent;
    border: 0;
    overflow: visible;
  }
  .product-features__media--transparent .product-features__img,
  .product-features__media--transparent .product-features__video {
    object-fit: contain;
    padding: 0;
    transform: scale(1.1);
    transform-origin: center;
  }
  .product-features__placeholder {
    font-family: var(--font-heading);
    font-size: 6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
  }

  @media (max-width: 749px) {
    .product-features { padding-top: 1.75rem; padding-bottom: 1.5rem; }
    .product-features__list { gap: 1.25rem; }
    .product-features__item { gap: 0.375rem; }
    .product-features__header { margin-bottom: 1.25rem; }
    .product-features__item-heading { font-size: clamp(1.4rem, 6vw, 1.85rem); margin-bottom: 0.5rem; }
    .product-features__item-text { font-size: 0.9375rem; }
    .product-features__media { aspect-ratio: 4 / 3; border-radius: 16px; }
    .product-features__media--transparent .product-features__img,
    .product-features__media--transparent .product-features__video {
      transform: scale(1.15);
    }
    .product-features__item { grid-template-columns: 1fr; }
    .product-features__item .product-features__text { order: 0; }
    .product-features__item .product-features__media { order: 1; }
    .product-features__item--reverse .product-features__text { order: 0; }
    .product-features__item--reverse .product-features__media { order: 1; }
  }
/* END_SECTION:product-features */

/* START_SECTION:product-how-it-works (INDEX:43) */
.product-how {
    background: var(--color-bg, #000);
    color: var(--color-fg, #fff);
    padding: var(--section-py, clamp(2.5rem, 6vw, 4rem)) var(--section-px, clamp(1rem, 3vw, 2rem));
  }

  .product-how__inner {
    max-width: 1080px;
    margin: 0 auto;
  }

  .product-how__eyebrow {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
  }

  .product-how__title {
    margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-fg, #fff);
  }

  .product-how__items {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
  }

  /* ---------- Row layouts ---------- */
  .product-how__row {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  .product-how__row--split {
    flex-direction: row;
    align-items: center;
  }

  /* media_text — media (1st in DOM) appears on the LEFT, copy on the RIGHT */
  .product-how__row--media-first {
    flex-direction: row;
  }

  .product-how__row--dual,
  .product-how__row--wide {
    flex-direction: column;
    align-items: center;
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
  }

  /* ---------- Copy ---------- */
  .product-how__copy {
    flex: 1 1 0;
    min-width: 0;
  }

  .product-how__copy--center {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .product-how__heading {
    margin: 0 0 0.625rem;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-fg, #fff);
  }

  .product-how__body {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.55;
  }

  .product-how__body p {
    margin: 0 0 0.625rem;
  }

  .product-how__body p:last-child {
    margin-bottom: 0;
  }

  /* ---------- Media ---------- */
  .product-how__media {
    position: relative;
    flex: 0 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
  }

  .product-how__media img,
  .product-how__media video,
  .product-how__media-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-how__media-placeholder {
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.04);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.25);
  }

  .product-how__media--square {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    width: 100%;
  }

  .product-how__media--square img,
  .product-how__media--square video {
    aspect-ratio: 1 / 1;
  }

  /* Wide media — 2800x1200 source = 7:3 aspect. */
  .product-how__media--wide {
    aspect-ratio: 7 / 3;
    width: 100%;
  }

  .product-how__media--wide img,
  .product-how__media--wide video {
    aspect-ratio: 7 / 3;
  }

  /* ---------- Dual media ---------- */
  .product-how__dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    width: 100%;
  }

  .product-how__dual-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .product-how__dual-item .product-how__media {
    flex: 1 1 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .product-how__dual-item .product-how__media img,
  .product-how__dual-item .product-how__media video {
    aspect-ratio: 1 / 1;
  }

  .product-how__caption {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 700;
    color: var(--color-fg, #fff);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .product-how__caption-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
    line-height: 1.45;
  }

  .product-how__caption-sub p {
    margin: 0;
  }
  .product-how__caption-sub p + p {
    margin-top: 0.375rem;
  }

  /* ---------- Divider ---------- */
  .product-how__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: clamp(0.25rem, 1vw, 0.75rem) 0;
  }

  /* =========================================================
     DESKTOP — card-grid layout (matches Built Different ref).
     EQ + Compressor + Delay + Reverb sit as 4 equal cards on
     the top row. Gain (wide_media) spans the full row beneath.
     ========================================================= */
  @media (min-width: 750px) {
    .product-how__items {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
      align-items: start;
    }

    /* Hide the inline dividers — the grid spacing replaces them. */
    .product-how__divider { display: none; }

    /* Each split row becomes a vertical card: media on top, copy below.
       Use `order` so it doesn't matter whether the block type is text_media
       (DOM: copy → media) or media_text (DOM: media → copy). */
    .product-how__row--split {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.875rem;
      max-width: none;
    }

    .product-how__row--split .product-how__media {
      order: 1;
      width: 100%;
      flex: 0 0 auto;
    }

    .product-how__row--split .product-how__copy {
      order: 2;
      width: 100%;
      flex: 0 0 auto;
    }

    .product-how__row--split .product-how__heading {
      font-size: clamp(1.125rem, 1.6vw, 1.375rem);
      margin-bottom: 0.4375rem;
    }

    .product-how__row--split .product-how__body {
      font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.65);
    }

    /* Dual takes 2 grid columns — its 2 inner squares fill the same
       width as the 2 sibling cards. */
    .product-how__row--dual {
      grid-column: span 2;
      max-width: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0.875rem;
    }

    .product-how__dual {
      gap: clamp(1.5rem, 2.5vw, 2rem);
    }

    .product-how__dual-item {
      gap: 0.625rem;
      text-align: center;
      align-items: center;
    }

    .product-how__caption {
      font-size: clamp(1.125rem, 1.6vw, 1.375rem);
      font-weight: 800;
    }

    .product-how__caption-sub {
      font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
      color: rgba(255, 255, 255, 0.65);
    }

    /* Wide row = full-width second row, media + text side-by-side. */
    .product-how__row--wide {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      gap: clamp(1.5rem, 3vw, 2.25rem);
      max-width: none;
      margin-top: clamp(1rem, 2vw, 2rem);
    }

    .product-how__row--wide .product-how__media--wide {
      flex: 0 0 60%;
      width: 60%;
      max-width: none;
    }

    .product-how__row--wide .product-how__copy {
      flex: 1 1 auto;
      text-align: left;
      max-width: none;
      margin: 0;
    }

    .product-how__row--wide .product-how__copy--center {
      text-align: left;
      max-width: none;
      margin: 0;
    }

    .product-how__row--wide .product-how__heading {
      font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    }
  }

  /* ---------- Mobile (preserves the original side-by-side rows) ---------- */
  @media (max-width: 749px) {
    .product-how {
      padding-left: clamp(0.75rem, 3.5vw, 1rem);
      padding-right: clamp(0.75rem, 3.5vw, 1rem);
    }

    .product-how__title {
      font-size: clamp(1.5rem, 7.5vw, 2.125rem);
      line-height: 1.15;
      margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
      white-space: nowrap;
    }

    .product-how__items {
      gap: clamp(1rem, 3vw, 1.5rem);
    }

    .product-how__row--split {
      gap: clamp(0.75rem, 2.5vw, 1.125rem);
      align-items: center;
    }

    .product-how__media--square {
      flex: 0 0 46%;
      width: 46%;
      max-width: 46%;
    }

    .product-how__heading {
      font-size: clamp(0.9375rem, 3.8vw, 1.125rem);
      line-height: 1.2;
      margin-bottom: 0.375rem;
      white-space: nowrap;
    }

    .product-how__body {
      font-size: 0.8125rem;
      line-height: 1.45;
    }

    .product-how__copy--center {
      text-align: left;
    }

    .product-how__row--wide .product-how__copy--center {
      text-align: left;
    }

    .product-how__caption {
      font-size: 0.9375rem;
      white-space: nowrap;
    }

    .product-how__caption-sub {
      font-size: 0.75rem;
    }

    .product-how__divider {
      margin: clamp(0.25rem, 2vw, 0.75rem) 0;
    }

    .product-how__media {
      border-radius: 10px;
    }

    .product-how__media img,
    .product-how__media video,
    .product-how__media-placeholder {
      border-radius: 10px;
    }

    /* Delay / reverb pair — sit inline with the section padding so each
       square is sized to match the EQ / Compression media on the split rows.
       The squares fill 50% of the row (minus a small gap), which lands very
       close to the 46% width of the split-row squares. */
    .product-how__row--dual {
      max-width: none;
    }

    .product-how__dual {
      max-width: none;
      gap: clamp(0.75rem, 2.5vw, 1.125rem);
      width: 100%;
      align-items: start;
    }

    .product-how__dual-item {
      gap: 0.625rem;
      align-items: stretch;
      min-width: 0;
    }

    /* Squares fill 100% of their grid cell — overriding the 46% rule used
       by split-row squares. flex 0 0 auto so they don't grow vertically
       (which would break the 1:1 aspect-ratio when caption lengths differ). */
    .product-how__dual-item .product-how__media,
    .product-how__dual-item .product-how__media--square {
      width: 100% !important;
      max-width: none !important;
      flex: 0 0 auto !important;
      border-radius: 12px;
    }

    .product-how__dual-item .product-how__media img,
    .product-how__dual-item .product-how__media video {
      border-radius: 12px;
    }

    .product-how__row--wide {
      max-width: none;
    }

    .product-how__media--wide {
      max-width: none;
    }
  }

  /* Very small phones — shrink title to keep it on one line. */
  @media (max-width: 380px) {
    .product-how__title {
      font-size: clamp(1.25rem, 7vw, 1.625rem);
    }
    .product-how__row--split {
      gap: 0.625rem;
    }
    .product-how__heading {
      font-size: 0.875rem;
    }
    .product-how__media--square {
      flex-basis: 46%;
      max-width: 46%;
    }
  }
/* END_SECTION:product-how-it-works */

/* START_SECTION:product-perks (INDEX:44) */
.product-perks {
    background: var(--color-bg, #000);
    /* Tight bottom — small breathing space before the trust-bar so they
       read as one block but aren't physically touching. */
    padding: var(--section-py) var(--section-px) clamp(1.5rem, 3.5vw, 2.5rem) !important;
  }
  .product-perks__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
  }
  .product-perks__title {
    margin: 0;
    font-size: clamp(1.625rem, 3.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 60%, #7d7d7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .product-perks__subtitle {
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.55);
  }

  .product-perks__grid {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1rem);
  }
  .product-perks__grid[data-perk-count="1"] { grid-template-columns: minmax(0, 320px); justify-content: center; }
  .product-perks__grid[data-perk-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-perks__grid[data-perk-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-perks__grid[data-perk-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Cap desktop at 5 columns and hide the 6th card. (Mobile shows all 6 in a 2x3 grid.) */
  .product-perks__grid[data-perk-count="6"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .product-perks__grid[data-perk-count="6"] .product-perks__card:nth-child(6) { display: none; }

  .product-perks__card {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 0.625rem;
    padding: clamp(1rem, 2vw, 1.5rem) 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* "Click me" hint badge — subtle blue pill, anchored bottom-center. */
  .product-perks__click-me {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.1875rem 0.4375rem 0.1875rem 0.375rem;
    border-radius: 999px;
    background: rgba(7, 100, 232, 0.18);
    border: 1px solid rgba(7, 100, 232, 0.4);
    color: #cdd9ff;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(7, 100, 232, 0.18);
  }
  .product-perks__click-me svg { display: block; }
  .product-perks__card {
    /* Reserve space at the bottom of the card so the click-me pill never
       overlaps the perk text. */
    padding-bottom: clamp(2rem, 4vw, 2.5rem);
  }
  .product-perks__card:hover .product-perks__click-me {
    background: rgba(7, 100, 232, 0.28);
    border-color: rgba(7, 100, 232, 0.55);
    transform: translateX(-50%) translateY(-1px);
  }
  .product-perks__card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
  }
  .product-perks__card:focus-visible {
    outline: 2px solid var(--color-accent, #0764E8);
    outline-offset: 2px;
  }
  .product-perks__card:active { transform: translateY(0); }

  .product-perks__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    margin-bottom: 0.25rem;
  }
  .product-perks__perk-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.005em;
    line-height: 1.2;
  }
  .product-perks__perk-text {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
  }

  /* Tablet */
  @media (max-width: 989px) {
    .product-perks__grid,
    .product-perks__grid[data-perk-count="5"],
    .product-perks__grid[data-perk-count="6"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Mobile — 2-column grid (works for 4 or 6 cards as 2×2 / 2×3). */
  @media (max-width: 749px) {
    .product-perks__grid,
    .product-perks__grid[data-perk-count="1"],
    .product-perks__grid[data-perk-count="2"],
    .product-perks__grid[data-perk-count="3"],
    .product-perks__grid[data-perk-count="4"],
    .product-perks__grid[data-perk-count="5"],
    .product-perks__grid[data-perk-count="6"] {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.625rem;
    }
    /* Re-show the 6th card on mobile (it's hidden on desktop). */
    .product-perks__grid[data-perk-count="6"] .product-perks__card:nth-child(6) { display: flex; }
    .product-perks__card {
      padding: 1rem 0.875rem;
      padding-bottom: 2rem;
      gap: 0.5rem;
      align-items: center;
      text-align: center;
      border-radius: 14px;
      min-height: 0;
    }
    .product-perks__icon {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      margin-bottom: 0.125rem;
    }
    .product-perks__icon svg { width: 20px; height: 20px; }
    .product-perks__perk-title {
      font-size: 0.875rem;
      letter-spacing: -0.005em;
      line-height: 1.25;
    }
    .product-perks__perk-text {
      display: block;
      font-size: 0.75rem;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.6);
    }
    .product-perks__click-me {
      bottom: 0.4375rem;
      font-size: 0.5rem;
      padding: 0.125rem 0.375rem 0.125rem 0.3125rem;
    }
    .product-perks__click-me svg { width: 8px; height: 8px; }
  }

  /* ---------- Modal ---------- */
  .product-perks-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
  }
  .product-perks-modal[hidden] { display: none; }

  .product-perks-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 14, 0.65);
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: pointer;
  }
  .product-perks-modal.is-open .product-perks-modal__backdrop { opacity: 1; }

  .product-perks-modal__panel {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 3rem);
    max-height: calc(100svh - 3rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: #15171b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
  }
  .product-perks-modal.is-open .product-perks-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .product-perks-modal__close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .product-perks-modal__close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.05);
  }

  .product-perks-modal__body { padding: 1.5rem; }

  .product-perks-modal__media {
    margin: -1.5rem -1.5rem 1.25rem;
    background: #0b0d10;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-perks-modal__media--product {
    aspect-ratio: 1 / 1;
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 70%), #0b0d10;
  }
  .product-perks-modal__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .product-perks-modal__media--video { aspect-ratio: 16 / 10; }
  .product-perks-modal__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #0b0d10;
  }

  .product-perks-modal__daws {
    margin: -1.5rem -1.5rem 1.25rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .product-perks-modal__daw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
  }
  .product-perks-modal__daw img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
  }
  .product-perks-modal__daw span {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
  }

  .product-perks-modal__title {
    margin: 0 0 0.625rem;
    font-size: clamp(1.375rem, 3vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #fff;
  }
  .product-perks-modal__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .product-perks-modal__desc p { margin: 0 0 0.625rem; }
  .product-perks-modal__desc p:last-child { margin-bottom: 0; }
  .product-perks-modal__desc strong { color: #fff; font-weight: 600; }
  .product-perks-modal__desc ul,
  .product-perks-modal__desc ol { margin: 0 0 0.625rem 1.125rem; padding: 0; }
  .product-perks-modal__desc li { margin-bottom: 0.25rem; }

  @media (max-width: 599px) {
    .product-perks-modal { padding: 0.875rem; }
    .product-perks-modal__panel {
      max-height: calc(100vh - 1.75rem);
      max-height: calc(100svh - 1.75rem);
      border-radius: 18px;
    }
    .product-perks-modal__body { padding: 1.125rem; }
    .product-perks-modal__media,
    .product-perks-modal__daws { margin: -1.125rem -1.125rem 1rem; }
    .product-perks-modal__daws {
      padding: 1.125rem 0.75rem;
      gap: 0.5rem;
    }
    .product-perks-modal__daw img { width: 36px; height: 36px; }
    .product-perks-modal__daw span { font-size: 0.6875rem; }
  }

  /* Hide raw detail templates from layout (they're cloned into the modal). */
  .product-perks__details { display: none; }
/* END_SECTION:product-perks */

/* START_SECTION:product-related (INDEX:45) */
.product-related {
    background: var(--color-bg);
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
  }
  .product-related__header {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  .product-related__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-related__title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .product-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
  }
  .product-related__empty { color: rgba(255, 255, 255, 0.55); text-align: center; grid-column: 1 / -1; }
/* END_SECTION:product-related */

/* START_SECTION:product-showcase (INDEX:46) */
.product-showcase {
    background: var(--color-bg, #000);
    padding: var(--section-py) var(--section-px);
  }
  .product-showcase__panel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
  }

  .product-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 3vw, 2.5rem);
    align-items: center;
  }
  @media (min-width: 900px) {
    .product-showcase__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: clamp(2rem, 4vw, 3.5rem);
    }
  }

  .product-showcase__content { display: flex; flex-direction: column; }

  .product-showcase__eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
  }
  .product-showcase__eyebrow {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0;
  }
  .product-showcase__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: rgba(255, 165, 0, 0.12);
    border: 1px solid rgba(255, 165, 0, 0.35);
    color: #FFB347;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .product-showcase__heading {
    margin: 0 0 1.25rem;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #fff;
  }
  .product-showcase__heading .product-showcase__artist {
    font-style: italic;
    font-weight: 800;
  }

  .product-showcase__body {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    max-width: 48ch;
  }
  /* Default: show the full body, hide the mobile/short version. */
  .product-showcase__body--short { display: none; }
  .product-showcase__body p {
    margin: 0 0 0.9375rem;
  }
  .product-showcase__body p:last-child { margin-bottom: 0; }
  .product-showcase__body strong,
  .product-showcase__body b {
    color: #fff;
    font-weight: 600;
  }
  .product-showcase__body a {
    color: var(--color-accent, #0764E8);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .product-showcase__media {
    position: relative;
    width: 100%;
    background: transparent;
  }
  .product-showcase__image-wrap {
    position: relative;
    width: 100%;
  }
  .product-showcase__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* CTA overlay */
  .product-showcase__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.125rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(18, 22, 28, 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
    transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
  }
  .product-showcase__cta:hover {
    background: var(--color-accent, #0764E8);
    border-color: var(--color-accent, #0764E8);
    transform: translate(-50%, calc(-50% - 2px));
  }
  .product-showcase__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
  }
  .product-showcase__cta:hover .product-showcase__cta-icon {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Video state (hidden by default; revealed when playing) */
  .product-showcase__video {
    display: none;
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .product-showcase__video-el {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
    border-radius: 18px;
    cursor: pointer;
  }
  .product-showcase__media.is-playing .product-showcase__image-wrap {
    display: none;
  }
  .product-showcase__media.is-playing .product-showcase__video {
    display: flex;
  }

  /* Pause message */
  .product-showcase__pause-msg {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
    text-align: center;
    animation: product-showcase-fade 0.28s ease both;
    border-radius: 18px;
  }
  .product-showcase__pause-msg[hidden] { display: none; }
  .product-showcase__pause-label {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 24ch;
    line-height: 1.15;
  }
  .product-showcase__pause-resume {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 999px;
    border: 0;
    background: var(--color-accent, #0764E8);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .product-showcase__pause-resume:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
  }
  @keyframes product-showcase-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Trust bar (3 columns: trust info | avatars | rating) */
  .product-showcase__trust {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .product-showcase__trust-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .product-showcase__trust-cell--right {
    align-items: flex-end;
    text-align: right;
  }
  .product-showcase__trust-cell--avatars {
    align-items: center;
    justify-content: center;
  }

  .product-showcase__trust-eyebrow {
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-showcase__trust-value {
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 3.4vw, 2.625rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
  }
  .product-showcase__trust-caption {
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.1875rem;
  }
  .product-showcase__trust-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.375rem;
  }
  .product-showcase__trust-stars svg { display: block; }

  /* Avatars row — overlapping circles inside a soft pill background */
  .product-showcase__trust-avatars {
    --avatar-size: 56px;
    --avatar-overlap: 18px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem 0.5rem calc(1rem + var(--avatar-overlap));
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 100%;
  }
  /* Cap visible avatars on desktop to 7 so the pill fits the column cleanly. */
  .product-showcase__trust-avatar:nth-child(n+8) { display: none; }
  .product-showcase__trust-avatar {
    position: relative;
    display: inline-block;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #0b0d10;
    background: #1a1d22;
    margin-left: calc(var(--avatar-overlap) * -1);
    z-index: calc(10 - var(--avatar-i, 0));
    flex: 0 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  }
  .product-showcase__trust-avatar:first-child { margin-left: 0; }
  .product-showcase__trust-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Gradient placeholder when no avatar image is uploaded */
  .product-showcase__trust-avatar--placeholder {
    background:
      radial-gradient(circle at 30% 30%, hsla(var(--avatar-h, 220), 90%, 70%, 1), hsla(var(--avatar-h, 220), 80%, 35%, 1) 70%),
      #1a1d22;
  }

  /* What's Inside? disclosure (animated) */
  .product-showcase__disclosure {
    margin-top: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .product-showcase__disclosure.is-open {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
  }

  /* Placement: desktop vs mobile swap */
  .product-showcase__disclosure--mobile { display: none; }
  @media (max-width: 899px) {
    .product-showcase__disclosure--desktop { display: none; }
    .product-showcase__disclosure--mobile { display: block; }
  }

  .product-showcase__disclosure-summary {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9375rem 1.125rem;
    cursor: pointer;
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background 0.2s ease;
  }
  .product-showcase__disclosure-summary:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .product-showcase__disclosure-summary:focus-visible {
    outline: 2px solid var(--color-accent, #0764E8);
    outline-offset: -2px;
  }
  .product-showcase__disclosure-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, color 0.25s ease;
  }
  .product-showcase__disclosure.is-open .product-showcase__disclosure-icon {
    transform: rotate(180deg);
    background: var(--color-accent, #0764E8);
    color: #fff;
  }

  /* Animated panel using grid-template-rows 0fr <-> 1fr */
  .product-showcase__disclosure-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .product-showcase__disclosure.is-open .product-showcase__disclosure-panel {
    grid-template-rows: 1fr;
  }
  .product-showcase__disclosure-content {
    min-height: 0;
    overflow: hidden;
    padding: 0 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease 0.05s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.05s, padding 0.35s ease;
  }
  .product-showcase__disclosure.is-open .product-showcase__disclosure-content {
    padding: 0.5rem 1.125rem 1.125rem;
    opacity: 1;
    transform: translateY(0);
  }
  .product-showcase__disclosure-content p { margin: 0 0 0.625rem; }
  .product-showcase__disclosure-content p:last-child { margin-bottom: 0; }
  .product-showcase__disclosure-content ul,
  .product-showcase__disclosure-content ol {
    margin: 0;
    padding-left: 1.125rem;
  }
  .product-showcase__disclosure-content li { margin-bottom: 0.375rem; }
  .product-showcase__disclosure-content li:last-child { margin-bottom: 0; }
  .product-showcase__disclosure-content strong,
  .product-showcase__disclosure-content b { color: #fff; font-weight: 600; }
  .product-showcase__disclosure-content a {
    color: var(--color-accent, #0764E8);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-showcase__disclosure-panel,
    .product-showcase__disclosure-content,
    .product-showcase__disclosure-icon { transition: none; }
  }

  @media (max-width: 899px) {
    .product-showcase__heading { font-size: clamp(1.75rem, 7vw, 2.5rem); }

    /* Swap to the short (first two sentences) body on mobile.
       The short version is only rendered when there's a body, so the
       full version is safe to hide here. */
    .product-showcase__body--full { display: none; }
    .product-showcase__body--short { display: block; }

    /* Trust bar: keep all three columns side by side, just tighter */
    .product-showcase__trust {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 0.5rem;
      padding-top: 1.25rem;
      margin-top: 1.5rem;
    }
    .product-showcase__trust-eyebrow,
    .product-showcase__trust-caption {
      font-size: 0.5rem;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .product-showcase__trust-value {
      font-size: clamp(1.25rem, 5vw, 1.625rem);
      white-space: nowrap;
    }
    .product-showcase__trust-avatars {
      --avatar-size: 32px;
      --avatar-overlap: 10px;
      padding: 0.3125rem 0.5rem 0.3125rem calc(0.5rem + var(--avatar-overlap));
    }
    .product-showcase__trust-avatar {
      border-width: 2px;
    }
    /* Trim avatar count on phones so side cells get more horizontal room. */
    .product-showcase__trust-avatar:nth-child(n+5) { display: none; }
    .product-showcase__trust-stars svg {
      width: 10px;
      height: 10px;
    }
  }

  /* Very narrow phones — drop caption letter-spacing entirely. */
  @media (max-width: 380px) {
    .product-showcase__trust-eyebrow,
    .product-showcase__trust-caption {
      font-size: 0.4375rem;
      letter-spacing: 0.04em;
    }
    .product-showcase__trust-avatars {
      --avatar-size: 28px;
      --avatar-overlap: 9px;
    }
    .product-showcase__trust-avatar:nth-child(n+4) { display: none; }
  }
/* END_SECTION:product-showcase */

/* START_SECTION:product-stats (INDEX:47) */
.product-stats {
    background: var(--color-bg);
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
  }
  .product-stats__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
  }
  .product-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem 0;
  }
  @media (max-width: 749px) {
    .product-stats__title { margin: 0 0 1rem; font-size: clamp(1.4rem, 6vw, 1.85rem); }
    .product-stats__grid {
      padding: 1.125rem 0;
      gap: 0.75rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .product-stats__number { font-size: clamp(1.5rem, 6.5vw, 2.25rem); }
    .product-stats__label { font-size: 0.75rem; }
  }
  .product-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  .product-stats__number {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
  }
  .product-stats__label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
  }
/* END_SECTION:product-stats */

/* START_SECTION:product-testimonials (INDEX:48) */
.product-testimonials {
    background: var(--color-bg);
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
  }
  .product-testimonials__header {
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  .product-testimonials__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-testimonials__title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .product-testimonials__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .product-testimonials__track::-webkit-scrollbar { display: none; }

  .product-testimonials__card {
    scroll-snap-align: start;
    margin: 0;
    padding: 1.5rem;
    background: #0E1116;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #fff;
  }
  .product-testimonials__stars {
    display: inline-flex;
    gap: 2px;
    color: #F59E0B;
  }
  .product-testimonials__quote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    quotes: none;
  }
  .product-testimonials__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
  }
  .product-testimonials__author strong { display: block; font-weight: 600; color: #fff; }
  .product-testimonials__role { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
  .product-testimonials__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
  }

  @media (min-width: 990px) {
    .product-testimonials__track {
      grid-auto-columns: minmax(0, 1fr);
      grid-template-columns: repeat(3, minmax(0, 1fr));
      overflow: visible;
    }
  }
  @media (max-width: 749px) {
    .product-testimonials__header { margin-bottom: 1rem; }
    .product-testimonials__title { font-size: clamp(1.4rem, 6vw, 1.85rem); }
    .product-testimonials__track {
      grid-auto-columns: 82%;
    }
    .product-testimonials__card { padding: 1.125rem; gap: 0.75rem; }
  }
/* END_SECTION:product-testimonials */

/* START_SECTION:product-trust-bar (INDEX:49) */
.product-trust-bar-section {
    background: var(--color-bg, #000);
    color: #fff;
    /* Sit flush against the perks section above — no top padding so the
       trust pill reads as part of the same visual block. */
    padding: 0 var(--section-px) clamp(1.25rem, 3vw, 2rem) !important;
  }
  .product-trust-bar-section .page-wrap {
    max-width: 1200px;
    margin: 0 auto;
  }
  /* Inside the standalone trust-bar section, the inherited margin-top and
     top border from .product-showcase__trust would add a big gap. Zero them
     out so the bar sits flush between adjacent sections. */
  .product-trust-bar-section .product-showcase__trust {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
/* END_SECTION:product-trust-bar */

/* START_SECTION:product-video-showcase (INDEX:50) */
.product-video {
    background: var(--color-bg);
    padding: clamp(2rem, 5vw, 4rem) 0;
  }
  .product-video__frame {
    position: relative;
    width: min(88%, 1080px);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: clamp(18px, 2vw, 28px);
    overflow: hidden;
    background: #05060a;
    box-shadow:
      0 30px 80px -30px rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    isolation: isolate;
  }
  .product-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-video__media--iframe {
    border: 0;
  }
  .product-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    pointer-events: none;
    background: radial-gradient(
      ellipse 60% 50% at 50% 50%,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.18) 45%,
      rgba(0, 0, 0, 0) 75%
    );
    z-index: 2;
    transition: opacity 0.3s ease;
  }
  .product-video.is-unmuted .product-video__overlay { opacity: 0; }
  .product-video.is-unmuted .product-video__overlay:hover { opacity: 1; }
  .product-video__cta {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    border-radius: 999px;
    background: rgba(10, 12, 16, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
      background 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease,
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s ease;
  }
  .product-video__cta:hover {
    background: #fff;
    color: #0a0c10;
    border-color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 16px 40px -14px rgba(255, 255, 255, 0.35);
  }
  .product-video__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
  }
  .product-video__cta:hover .product-video__cta-icon {
    background: rgba(10, 12, 16, 0.1);
  }
  .product-video__cta-mute { display: none; }
  .product-video.is-unmuted .product-video__cta-play { display: none; }
  .product-video.is-unmuted .product-video__cta-mute { display: block; }

  @media (max-width: 749px) {
    .product-video { padding: 1.5rem 0; }
    .product-video__frame {
      width: calc(100% - 1.5rem);
      aspect-ratio: 16 / 9;
      border-radius: 14px;
    }
    .product-video__cta {
      padding: 0.75rem 1.1rem;
      font-size: 0.8125rem;
    }
    .product-video__cta-icon {
      width: 22px;
      height: 22px;
    }
  }
/* END_SECTION:product-video-showcase */

/* START_SECTION:shop-all-featured (INDEX:51) */
.shop-featured {
    background: var(--color-bg, #000);
    color: var(--color-fg, #fff);
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 2rem);
    position: relative;
  }

  .shop-featured__eyebrow {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
  }

  /* ---------- Hero ---------- */
  .shop-featured__hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    max-width: 720px;
    margin: 0 auto;
  }

  .shop-featured__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    min-width: 0;
    width: 100%;
  }

  .shop-featured__title {
    margin: 0;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(1.125rem, 3.2vw, 1.875rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-fg, #fff);
    /* One line, ever — fall back to ellipsis if a title is unusually long. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Soft chrome-like sheen mirroring the product page hero */
    background: linear-gradient(180deg, #ffffff 0%, #d8d8d8 60%, #f4f4f4 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .shop-featured__image-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: 230px;
  }

  .shop-featured__image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .shop-featured__image-link:hover .shop-featured__image-frame {
    transform: translateY(-3px);
  }

  .shop-featured__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.18s ease;
  }

  .shop-featured.is-fading .shop-featured__image,
  .shop-featured.is-fading .shop-featured__title {
    opacity: 0;
  }

  /* ---------- Nav arrows ---------- */
  .shop-featured__nav {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    flex-shrink: 0;
  }
  .shop-featured__nav:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
  }
  .shop-featured__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
  }

  /* ---------- Buy now pill ---------- */
  .shop-featured__buy {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: max-content;
    max-width: min(440px, 96%);
    margin: clamp(0.625rem, 1.5vw, 1rem) auto 0;
    padding: 5px 5px 5px 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .shop-featured__buy:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
  }

  .shop-featured__buy-thumb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
  }
  .shop-featured__buy-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .shop-featured__buy-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
  }
  .shop-featured__buy-title {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    text-transform: uppercase;
  }
  .shop-featured__buy-price {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
    margin-top: 2px;
  }

  .shop-featured__buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--color-accent, #2c79ff);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    margin-left: auto;
    flex-shrink: 0;
    transition: filter 0.15s ease;
  }
  .shop-featured__buy:hover .shop-featured__buy-btn {
    filter: brightness(1.07);
  }

  /* ---------- Thumbnail strip ---------- */
  .shop-featured__strip {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    /* `proximity` lets the user free-scroll and only snaps when a chip is
       already most of the way into view; `mandatory` would yank the
       scroll into the nearest chip on every tiny gesture and feels jerky.
       `scroll-behavior: smooth` plus a Safari-only inertial scroll keeps
       fling/momentum scrolling buttery. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: clamp(0.875rem, 1.6vw, 1.25rem) clamp(0.75rem, 2vw, 1.5rem) 0.375rem;
    margin: 0 auto;
    max-width: 1080px;
  }
  .shop-featured__strip::-webkit-scrollbar { display: none; }

  .shop-featured__chip {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4375rem;
    flex: 0 0 auto;
    width: 104px;
    scroll-snap-align: center;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .shop-featured__chip:hover {
    color: #fff;
    transform: translateY(-2px);
  }
  .shop-featured__chip.is-active {
    color: #fff;
  }
  .shop-featured__chip-thumb {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }
  .shop-featured__chip.is-active .shop-featured__chip-thumb {
    border-color: var(--color-accent, #2c79ff);
    transform: scale(1.04);
  }
  .shop-featured__chip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .shop-featured__chip-title {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 749px) {
    .shop-featured {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      padding-top: 0.875rem;
      padding-bottom: 1rem;
    }

    .shop-featured__hero {
      grid-template-columns: 32px 1fr 32px;
      gap: 0.5rem;
    }

    .shop-featured__nav {
      width: 32px;
      height: 32px;
    }
    .shop-featured__nav svg { width: 16px; height: 16px; }

    .shop-featured__title {
      font-size: clamp(1rem, 4.6vw, 1.375rem);
      line-height: 1.05;
    }

    .shop-featured__image-link {
      max-width: 180px;
    }

    .shop-featured__buy {
      gap: 0.5rem;
      padding: 4px 4px 4px 6px;
    }
    .shop-featured__buy-thumb {
      width: 32px;
      height: 32px;
    }
    .shop-featured__buy-title {
      max-width: 120px;
      font-size: 0.75rem;
    }
    .shop-featured__buy-price {
      font-size: 0.6875rem;
    }
    .shop-featured__buy-btn {
      padding: 0.4375rem 0.75rem;
      font-size: 0.625rem;
    }
    .shop-featured__buy-btn svg {
      width: 11px;
      height: 11px;
    }

    .shop-featured__strip {
      padding-top: 0.875rem;
      gap: 0.5rem;
    }
    .shop-featured__chip {
      width: 88px;
    }
    .shop-featured__chip-thumb {
      width: 80px;
      height: 80px;
      border-radius: 12px;
    }
    .shop-featured__chip-title {
      font-size: 0.625rem;
    }
  }
/* END_SECTION:shop-all-featured */

/* START_SECTION:stats-callout (INDEX:52) */
.stats-callout {
    border-bottom: 1px solid var(--color-border);
    padding: clamp(2rem, 4vw, 3rem) 0;
  }
  .stats-callout__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
  }
  .stats-callout__big {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-accent);
  }
  .stats-callout__headline {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .stats-callout__desc {
    color: var(--color-muted);
    margin: 0.375rem 0 0;
    max-width: 52ch;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  @media (max-width: 749px) {
    .stats-callout__inner { grid-template-columns: 1fr; }
  }
/* END_SECTION:stats-callout */

/* START_SECTION:vb-audience (INDEX:53) */
.vb-audience {
    background: var(--vb-off-white);
  }

  .vb-audience__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
  }

  .vb-audience__col {
    background: var(--vb-white);
    border: 1px solid var(--vb-border-light);
    border-radius: 16px;
    padding: 2.5rem 2rem;
  }

  .vb-audience__col h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vb-text-dark);
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
  }

  .vb-audience__col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .vb-audience__col li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--vb-text-body);
  }

  .vb-check { color: #16a34a; font-size: 1.125rem; flex-shrink: 0; }
  .vb-cross { color: #dc2626; font-size: 1.125rem; flex-shrink: 0; }

  @media (max-width: 768px) {
    .vb-audience__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:vb-audience */

/* START_SECTION:vb-clear (INDEX:54) */
.vb-clear__desc {
    max-width: 600px;
    margin: 0 auto 3rem;
    text-align: center;
    font-size: 1.0625rem;
    color: var(--vb-text-muted-dark);
    line-height: 1.7;
  }

  .vb-clear__video {
    max-width: 700px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: var(--vb-blue);
    border-radius: 16px;
    border: 1px solid var(--vb-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
  }

  .vb-clear__video:hover { border-color: var(--vb-blue); }

  .vb-clear__video-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(232, 98, 44, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  .vb-clear__video:hover .vb-clear__video-placeholder {
    transform: scale(1.1);
  }

  .vb-clear__video-placeholder svg {
    margin-left: 4px;
  }
/* END_SECTION:vb-clear */

/* START_SECTION:vb-faq (INDEX:55) */
.vb-faq__sub {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--vb-text-muted-dark);
    margin-top: -1.5rem;
    margin-bottom: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .vb-faq__list {
    max-width: 700px;
    margin: 0 auto;
  }

  .vb-faq__item {
    border-bottom: 1px solid var(--vb-border-light);
  }

  .vb-faq__item summary {
    padding: 1.25rem 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--vb-text-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.2s ease;
  }

  .vb-faq__item summary::-webkit-details-marker { display: none; }

  .vb-faq__item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--vb-text-muted-dark);
    transition: transform 0.3s ease;
  }

  .vb-faq__item[open] summary::after { transform: rotate(45deg); }
  .vb-faq__item summary:hover { color: var(--vb-orange); }

  .vb-faq__answer {
    padding: 0 0 1.5rem;
    font-size: 0.9375rem;
    color: var(--vb-text-muted-dark);
    line-height: 1.7;
  }
/* END_SECTION:vb-faq */

/* START_SECTION:vb-features (INDEX:56) */
.vb-everything {
    background: var(--vb-off-white);
  }

  .vb-feature-rows {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .vb-feature-row {
    background: var(--vb-white);
    border: 1px solid var(--vb-border-light);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .vb-feature-row:hover {
    border-color: var(--vb-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  }

  .vb-feature-row__text h3 {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--vb-text-dark);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
  }

  .vb-feature-row__text p {
    font-size: 0.9375rem;
    color: var(--vb-text-muted-dark);
    line-height: 1.7;
  }
/* END_SECTION:vb-features */

/* START_SECTION:vb-final-cta (INDEX:57) */
.vb-final {
    text-align: center;
    background: var(--vb-off-white);
  }

  .vb-final__title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 900;
    color: var(--vb-text-dark);
    letter-spacing: -0.03em;
    line-height: 1.25;
    max-width: 650px;
    margin: 0 auto 1rem;
  }

  .vb-final__sub {
    font-size: 1.0625rem;
    color: var(--vb-text-muted-dark);
    margin-bottom: 2.5rem;
  }
/* END_SECTION:vb-final-cta */

/* START_SECTION:vb-footer (INDEX:58) */
.vb-footer {
    border-top: 1px solid var(--vb-border-light);
    padding: 3rem 1.5rem;
    text-align: center;
  }

  .vb-footer__thanks {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--vb-text-dark);
    margin-bottom: 0.5rem;
  }

  .vb-footer__copy {
    font-size: 0.8125rem;
    color: var(--vb-text-muted-dark);
  }
/* END_SECTION:vb-footer */

/* START_SECTION:vb-hero (INDEX:59) */
.vb-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 1.5rem 1.5rem 2rem;
    margin: 1rem 2rem 0;
    border-radius: 24px;
    background-color: var(--vb-blue);
    background-image:
      linear-gradient(rgba(200,220,255,0.35) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,220,255,0.35) 1px, transparent 1px),
      linear-gradient(rgba(200,220,255,0.15) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,220,255,0.15) 1px, transparent 1px);
    background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
    overflow: hidden;
    box-shadow: 0 12px 80px rgba(3, 82, 138, 0.4);
  }

  .vb-hero__noise {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 400px 400px;
    animation: vbGrain 0.4s steps(5) infinite;
  }

  @keyframes vbGrain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -15%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 10%); }
    80% { transform: translate(3%, -15%); }
    90% { transform: translate(-10%, 5%); }
  }

  @media (max-width: 768px) {
    .vb-hero {
      margin: 0.75rem 0.75rem 0;
      border-radius: 18px;
      padding: 1.25rem 1rem 1.5rem;
    }
  }

  .vb-hero__content { max-width: 900px; position: relative; z-index: 5; }

  .vb-hero__video {
    position: relative;
    z-index: 6;
    width: 92%;
    max-width: 720px;
    margin-top: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  }

  .vb-hero__video video {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
  }

  .vb-hero__mute-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
    z-index: 10;
    padding: 0;
  }

  .vb-hero__mute-btn:hover { background: rgba(0,0,0,0.75); }

  .vb-hero__mute-icon { width: 18px; height: 18px; }

  .vb-hero__mute-icon--unmuted { display: none; }

  .vb-hero__video.is-unmuted .vb-hero__mute-icon--muted { display: none; }
  .vb-hero__video.is-unmuted .vb-hero__mute-icon--unmuted { display: block; }

  @media (max-width: 768px) {
    .vb-hero__video {
      width: 96%;
      margin-top: 1rem;
      border-radius: 8px;
    }
    .vb-hero__mute-btn { width: 32px; height: 32px; bottom: 8px; right: 8px; }
    .vb-hero__mute-icon { width: 15px; height: 15px; }
  }

  .vb-hero__eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.75);
    margin-bottom: 1rem;
  }

  .vb-hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--vb-white);
    margin-bottom: 1rem;
    text-wrap: balance;
    text-shadow:
      0 2px 0 rgba(0,0,0,0.35),
      0 4px 0 rgba(0,0,0,0.3),
      0 6px 0 rgba(0,0,0,0.22),
      0 8px 0 rgba(0,0,0,0.15),
      0 12px 24px rgba(0,0,0,0.5);
  }

  @media (max-width: 768px) {
    .vb-hero__title {
      font-size: clamp(2.1rem, 9vw, 2.75rem);
      line-height: 1;
      letter-spacing: -0.03em;
    }
  }

  .vb-hero__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
  }

  .vb-hero__divider span:first-child,
  .vb-hero__divider span:last-child {
    display: block;
    width: 80px;
    height: 1px;
    background: rgba(255,255,255,0.4);
  }

  .vb-hero__no {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--vb-white);
    letter-spacing: -0.03em;
    text-shadow:
      0 2px 0 rgba(0,0,0,0.35),
      0 4px 0 rgba(0,0,0,0.28),
      0 6px 0 rgba(0,0,0,0.18),
      0 10px 20px rgba(0,0,0,0.45);
  }

  .vb-hero__animated-word {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: var(--vb-orange);
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    min-height: 1.2em;
    text-shadow:
      0 2px 0 rgba(0,0,0,0.35),
      0 4px 0 rgba(0,0,0,0.28),
      0 6px 0 rgba(0,0,0,0.18),
      0 10px 20px rgba(0,0,0,0.45);
  }

  .vb-hero__tagline {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--vb-white);
    opacity: 0.92;
  }

  @media (max-width: 768px) {
    .vb-hero__tagline {
      font-size: 0.95rem;
      font-weight: 600;
      line-height: 1.4;
      max-width: 32ch;
      margin: 0 auto;
    }
  }

  .vb-clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }

  .vb-cloud {
    position: absolute;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.12));
  }

  .vb-cloud svg { width: 100%; height: auto; }

  .vb-cloud--1 { width: 550px; top: -5%; left: -10%; opacity: 0.92; animation: vbFloat1 18s ease-in-out infinite; }
  .vb-cloud--2 { width: 460px; top: 5%; right: -8%; opacity: 0.85; animation: vbFloat2 22s ease-in-out infinite; }
  .vb-cloud--3 { width: 400px; top: 32%; left: -3%; opacity: 0.78; animation: vbFloat3 20s ease-in-out infinite; }
  .vb-cloud--4 { width: 380px; top: 50%; right: -4%; opacity: 0.72; animation: vbFloat1 25s ease-in-out infinite reverse; }
  .vb-cloud--5 { width: 520px; top: 68%; left: -10%; opacity: 0.82; animation: vbFloat2 19s ease-in-out infinite; }
  .vb-cloud--6 { width: 430px; top: 82%; right: -6%; opacity: 0.68; animation: vbFloat3 23s ease-in-out infinite; }

  @keyframes vbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -15px); }
    50% { transform: translate(-10px, -25px); }
    75% { transform: translate(15px, -10px); }
  }
  @keyframes vbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-15px, -20px); }
    50% { transform: translate(10px, -12px); }
    75% { transform: translate(-20px, -8px); }
  }
  @keyframes vbFloat3 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(12px, -18px); }
    66% { transform: translate(-18px, -10px); }
  }

  @media (max-width: 768px) {
    .vb-cloud--1 { width: 280px; top: -3%; left: -18%; opacity: 0.85; }
    .vb-cloud--2 { width: 240px; top: 8%; right: -16%; opacity: 0.8; }
    .vb-cloud--3 { width: 220px; top: 38%; left: -14%; opacity: 0.7; }
    .vb-cloud--4 { width: 210px; top: 56%; right: -12%; opacity: 0.65; }
    .vb-cloud--5 { width: 260px; top: 74%; left: -16%; opacity: 0.7; }
    .vb-cloud--6 { width: 230px; top: 88%; right: -14%; opacity: 0.6; }
  }
  @media (max-width: 480px) {
    .vb-cloud--1 { width: 240px; left: -22%; }
    .vb-cloud--2 { width: 210px; right: -20%; }
    .vb-cloud--3 { width: 190px; }
    .vb-cloud--4 { width: 180px; }
    .vb-cloud--5 { width: 220px; }
    .vb-cloud--6 { width: 200px; }
  }
/* END_SECTION:vb-hero */

/* START_SECTION:vb-included (INDEX:60) */
.vb-included {
    background: var(--vb-off-white);
  }

  .vb-included__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
  }

  .vb-included__item {
    background: var(--vb-white);
    border: 1px solid var(--vb-border-light);
    border-radius: 14px;
    padding: 2rem 1.25rem;
    text-align: center;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .vb-included__item:hover {
    border-color: var(--vb-orange);
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  }

  .vb-included__icon {
    color: var(--vb-orange);
    margin-bottom: 1rem;
  }

  .vb-included__item h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--vb-text-dark);
    margin-bottom: 0.5rem;
  }

  .vb-included__item p {
    font-size: 0.75rem;
    color: var(--vb-text-muted-dark);
    line-height: 1.5;
  }

  @media (max-width: 768px) {
    .vb-included__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 480px) {
    .vb-included__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:vb-included */

/* START_SECTION:vb-modules (INDEX:61) */
.vb-modules__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
  }

  .vb-mod-card {
    background: var(--vb-white);
    border: 1px solid var(--vb-border-light);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .vb-mod-card:hover {
    border-color: var(--vb-orange);
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  }

  .vb-mod-card__header { margin-bottom: 1rem; }

  .vb-mod-card__badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vb-orange);
    background: rgba(232, 98, 44, 0.08);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
  }

  .vb-mod-card h4 {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--vb-text-dark);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }

  .vb-mod-card p {
    font-size: 0.8125rem;
    color: var(--vb-text-muted-dark);
    line-height: 1.6;
  }

  @media (max-width: 768px) {
    .vb-modules__list { grid-template-columns: 1fr; }
  }
/* END_SECTION:vb-modules */

/* START_SECTION:vb-pricing (INDEX:62) */
.vb-price-section { text-align: center; }

  .vb-price-subtitle {
    font-size: 1.0625rem;
    color: var(--vb-text-body);
    max-width: 520px;
    margin: -1.5rem auto 2.5rem;
    line-height: 1.6;
  }

  .vb-price-card {
    position: relative;
    background: var(--vb-white);
    border: 2px solid var(--vb-border-light);
    border-radius: 20px;
    padding: 2.5rem 2rem 1.5rem;
    max-width: 440px;
    margin: 0 auto;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .vb-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  }

  .vb-price-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--vb-blue);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    white-space: nowrap;
  }

  .vb-price-card__header {
    margin-bottom: 1.25rem;
  }

  .vb-price-card__headline {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--vb-text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.25;
  }

  .vb-price-card__desc {
    font-size: 0.9375rem;
    color: var(--vb-text-body);
    line-height: 1.55;
    margin: 0;
  }

  .vb-price-card__divider {
    height: 1px;
    background: var(--vb-border-light);
    margin: 0 -0.5rem 1.25rem;
  }

  .vb-price-card__pricing {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
  }

  .vb-price-card__compare {
    font-size: 1.75rem;
    font-weight: 700;
    color: #d32f2f;
    text-decoration: line-through;
  }

  .vb-price-card__amount {
    font-size: clamp(3rem, 9vw, 4rem);
    font-weight: 900;
    color: var(--vb-text-dark);
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .vb-price-card__countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vb-orange);
    margin-bottom: 1.25rem;
  }

  .vb-price-card__timer {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }

  .vb-price-card__list {
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .vb-price-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--vb-text-body);
    line-height: 1.45;
  }

  .vb-price-card__check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .vb-price-card__list strong { color: var(--vb-text-dark); }

  .vb-price-card__cta-wrap {
    padding: 0;
  }

  .vb-price-card__cta {
    display: block;
    padding: 1rem 1.5rem;
    background: var(--vb-orange);
    color: #fff;
    font-family: var(--vb-font);
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.3s ease;
  }

  .vb-price-card__cta:hover {
    transform: translateY(-2px);
    background: var(--vb-orange-hover);
    box-shadow: 0 8px 28px rgba(232, 98, 44, 0.35);
  }

  .vb-price-card__guarantee {
    font-size: 0.75rem;
    color: var(--vb-text-muted-dark);
    text-align: center;
    padding: 0.875rem 0 0;
    margin: 0;
  }

  @media (max-width: 768px) {
    .vb-price-card { padding: 2.25rem 1.5rem 1.25rem; }
    .vb-price-card__headline { font-size: 1.25rem; }
    .vb-price-card__list li { font-size: 0.875rem; }
    .vb-price-card__cta { font-size: 1rem; }
  }
/* END_SECTION:vb-pricing */

/* START_SECTION:vb-proof (INDEX:63) */
.vb-proof {
    overflow: hidden;
  }

  .vb-proof__sub {
    text-align: center;
    font-size: 1rem;
    color: var(--vb-text-muted-dark);
    margin-bottom: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .vb-proof__marquee { overflow: hidden; }

  .vb-proof__track {
    display: flex;
    gap: 1.25rem;
    animation: vbMarquee 45s linear infinite;
    width: max-content;
  }

  @keyframes vbMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .vb-proof__card {
    background: var(--vb-white);
    border: 1px solid var(--vb-border-light);
    border-radius: 14px;
    padding: 1.75rem;
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }

  .vb-proof__stars {
    color: var(--vb-orange);
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
  }

  .vb-proof__card p {
    font-size: 0.875rem;
    color: var(--vb-text-body);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-style: italic;
  }

  .vb-proof__author {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--vb-text-muted-dark);
  }
/* END_SECTION:vb-proof */

/* START_SECTION:video-showcase (INDEX:64) */
.video-showcase__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  .demo-card__media {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .demo-card__media:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
  }
  .demo-card__img { width: 100%; height: 100%; object-fit: cover; }
  .demo-card__placeholder {
    width: 100%; height: 100%;
    background:
      radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent 60%),
      linear-gradient(180deg, var(--color-card), var(--color-bg));
  }
  .demo-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg);
  }
  .demo-card__play svg {
    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 12px;
    width: 48px;
    height: 48px;
    backdrop-filter: blur(8px);
  }
  .demo-card__title {
    margin: 1rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .demo-card__text {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
  }

  @media (max-width: 989px) { .video-showcase__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .video-showcase__grid { grid-template-columns: 1fr; } }
/* END_SECTION:video-showcase */

/* START_SECTION:voxbox-audio-preview (INDEX:65) */
.voxbox-audio {
    padding: 6rem 0;
    background: #0a0a0a;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .voxbox-audio__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .voxbox-audio__heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    text-align: center;
    color: white;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  .voxbox-audio__subheading {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 0 0 3rem;
  }

  .voxbox-audio__presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
  }

  .voxbox-preset-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .voxbox-preset-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 20px 60px rgba(var(--accent-rgb), 0.3);
  }

  .voxbox-preset-card.active {
    border-color: #d65a22;
    box-shadow: 0 0 0 2px #d65a22;
  }

  .voxbox-preset-card__image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .voxbox-preset-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .voxbox-preset-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
  }

  .voxbox-preset-card__play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background 0.3s ease;
    color: white;
    pointer-events: none;
  }

  .voxbox-preset-card:hover .voxbox-preset-card__play-overlay {
    background: rgba(0, 0, 0, 0.6);
  }

  .voxbox-preset-card.playing .voxbox-preset-card__play-overlay {
    display: none;
  }

  .voxbox-preset-card__audio-player {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 100%);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-top: 2px solid var(--accent);
  }

  .voxbox-preset-card__player-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .voxbox-preset-card__player-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
  }

  .voxbox-preset-card__player-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.6);
  }

  .voxbox-preset-card__player-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .voxbox-preset-card__progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }

  .voxbox-preset-card__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 10px;
    width: 0%;
    transition: width 0.1s ease;
  }

  .voxbox-preset-card__player-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
  }

  .voxbox-preset-card__content {
    padding: 1.5rem;
  }

  .voxbox-preset-card__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem;
  }

  .voxbox-preset-card__description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0 0 1rem;
  }

  .voxbox-preset-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .voxbox-preset-card__price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent);
  }

  .voxbox-preset-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .voxbox-preset-card__link:hover,
  .voxbox-preset-card__link:active {
    color: var(--accent);
  }

  @media (max-width: 968px) {
    .voxbox-audio {
      padding: 4rem 0;
    }

    .voxbox-audio__container {
      padding: 0 1.5rem;
    }

    .voxbox-audio__presets {
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
  }
/* END_SECTION:voxbox-audio-preview */

/* START_SECTION:voxbox-benefits (INDEX:66) */
.voxbox-benefits {
    padding: 6rem 0;
    background: linear-gradient(to bottom, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .voxbox-benefits__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .voxbox-benefits__heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    text-align: center;
    color: white;
    margin: 0 0 4rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  .voxbox-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  }

  .voxbox-benefit-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(214, 90, 34, 0.2);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
  }

  .voxbox-benefit-card:hover {
    transform: translateY(-8px);
    border-color: #d65a22;
    background: rgba(214, 90, 34, 0.05);
    box-shadow: 0 20px 60px rgba(214, 90, 34, 0.2);
  }

  .voxbox-benefit-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #d65a22 0%, #ff7a3d 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(214, 90, 34, 0.3);
  }

  .voxbox-benefit-card:hover .voxbox-benefit-card__icon {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(214, 90, 34, 0.5);
  }

  .voxbox-benefit-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 1rem;
  }

  .voxbox-benefit-card__description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
  }

  @media (max-width: 768px) {
    .voxbox-benefits {
      padding: 4rem 0;
    }

    .voxbox-benefits__container {
      padding: 0 1.5rem;
    }

    .voxbox-benefits__grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .voxbox-benefit-card {
      padding: 2rem 1.5rem;
    }
  }
/* END_SECTION:voxbox-benefits */

/* START_SECTION:voxbox-breakdown (INDEX:67) */
.vb-breakdown {
    padding: 5rem 0;
    background: #0a0a0a;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  .vb-breakdown__container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .vb-breakdown__pill-wrap {
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .vb-breakdown__pill {
    display: inline-block;
    padding: 0.35rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 50px;
    background: rgba(var(--accent-rgb), 0.08);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .vb-breakdown__pill:hover {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent);
  }

  @keyframes vb-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
  }

  .vb-breakdown__pill--shake {
    animation: vb-shake 2.5s ease-in-out infinite;
    animation-delay: 1s;
  }

  .vb-breakdown__pill--shake:hover {
    animation-play-state: paused;
  }

  .vb-breakdown__heading {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    text-align: center;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .vb-breakdown__sub {
    text-align: center;
    font-size: 1.1rem;
    color: var(--accent);
    font-weight: 700;
    font-style: italic;
    margin: 0 0 2.5rem;
    background: var(--accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .vb-breakdown__label {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.25rem;
  }

  .vb-breakdown__video-stage {
    margin-bottom: 2rem;
  }

  .vb-breakdown__video-frame {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
  }

  .vb-breakdown__video {
    width: 100%;
    height: auto;
    vertical-align: middle;
    display: block;
  }

  .vb-breakdown__video-frame.is-unlocked .vb-breakdown__video {
    cursor: pointer;
  }

  .vb-breakdown__video-overlay {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 0;
    cursor: pointer;
    background: radial-gradient(ellipse 85% 70% at 50% 45%, rgba(var(--accent-rgb), 0.22) 0%, transparent 55%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.72) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .vb-breakdown__video-overlay:hover {
    background: radial-gradient(ellipse 90% 75% at 50% 42%, rgba(var(--accent-rgb), 0.32) 0%, transparent 52%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.78) 100%);
  }

  .vb-breakdown__video-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .vb-breakdown__video-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    text-align: center;
    max-width: min(28rem, 92vw);
  }

  .vb-breakdown__video-overlay-play-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
  }

  .vb-breakdown__video-overlay-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--accent-rgb), 0.55);
    animation: vb-overlay-ring 2.2s ease-out infinite;
    pointer-events: none;
  }

  @keyframes vb-overlay-ring {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    80% {
      transform: scale(1.45);
      opacity: 0;
    }
    100% {
      transform: scale(1.45);
      opacity: 0;
    }
  }

  .vb-breakdown__video-overlay-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .vb-breakdown__video-overlay-icon svg {
    margin-left: 3px;
  }

  .vb-breakdown__video-overlay:hover .vb-breakdown__video-overlay-icon {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
  }

  .vb-breakdown__video-overlay-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .vb-breakdown__video-overlay-text {
    font-size: clamp(0.85rem, 2.6vw, 1.05rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  }

  .vb-breakdown__video-retention {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .vb-breakdown__video-retention[hidden] {
    opacity: 0;
    transform: scale(0.96);
    visibility: hidden;
  }

  .vb-breakdown__video-retention:not([hidden]) {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }

  .vb-breakdown__video-retention__pulse {
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0 auto 0.5rem;
    border-radius: 3px;
    background: var(--accent);
    animation: vb-retention-pulse 1.1s ease-in-out infinite;
  }

  @keyframes vb-retention-pulse {
    0%,
    100% {
      opacity: 0.5;
      transform: scaleX(0.85);
    }
    50% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  .vb-breakdown__video-retention__title {
    margin: 0;
    font-size: clamp(1.05rem, 3.8vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45);
  }

  .vb-breakdown__video-retention__sub {
    margin: 0.35rem 0 0;
    font-size: clamp(0.8rem, 2.4vw, 0.95rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
  }

  .vb-breakdown__total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 3rem;
  }

  .vb-breakdown__total-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
  }

  .vb-breakdown__total-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
  }

  .vb-breakdown__offer {
    text-align: center;
    margin-top: 0.5rem;
  }

  .vb-breakdown__offer-label {
    display: block;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
  }

  .vb-breakdown__offer-price {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 900;
    color: #fff;
  }

  .vb-breakdown__cta-wrap {
    text-align: center;
    margin-top: 2rem;
  }

  .vb-breakdown__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 3.5rem;
    background: var(--accent);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.35);
  }

  .vb-breakdown__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.5);
    background: var(--accent-light);
    color: #fff;
  }

  .vb-breakdown__buy-urgency {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 2rem auto 0.75rem;
    padding: 0.45rem 1.1rem;
    background: rgba(214, 40, 40, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 50px;
    width: fit-content;
    max-width: calc(100% - 2rem);
    animation: vb-buy-urgency-pulse 2s ease-in-out infinite;
    box-shadow: 0 4px 20px rgba(214, 40, 40, 0.4);
  }

  .vb-breakdown__buy-urgency--below {
    margin: 1.25rem auto 0;
  }

  .vb-breakdown__buy-urgency-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
  }

  .vb-breakdown__buy-urgency-text {
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  @keyframes vb-buy-urgency-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(214, 40, 40, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 6px 30px rgba(214, 40, 40, 0.6); }
  }

  .vb-breakdown__buy-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 2rem auto 0;
    padding: 0 1rem;
    width: fit-content;
    max-width: 100%;
  }

  .vb-breakdown__buy-folder {
    flex-shrink: 0;
    position: relative;
    width: 260px;
    height: 228px;
  }

  .vb-breakdown__buy-folder-icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .vb-breakdown__buy-folder-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 16px rgba(var(--accent-rgb), 0.25));
  }

  .vb-breakdown__buy-folder-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    font-size: 1.15rem;
    font-weight: 700;
    color: #0a0a0a;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
  }

  .vb-breakdown__buy-folder-label-line {
    display: block;
  }

  .vb-breakdown__buy-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .vb-breakdown__buy-tagline {
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    font-weight: 800;
    color: var(--accent);
    line-height: 1.25;
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
    text-transform: none;
  }

  .vb-breakdown__buy-tagline span {
    color: var(--accent);
  }

  .vb-breakdown__buy-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin: 0 0 1rem;
  }

  .vb-breakdown__buy-btn {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--accent);
    color: #0a0a0a;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    align-self: flex-start;
    max-width: 100%;
    line-height: 1.2;
    text-align: center;
  }

  .vb-breakdown__buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.35);
    color: #0a0a0a;
  }

  .vb-breakdown__buy-btn-price {
    font-weight: 800;
  }

  .vb-breakdown__buy-btn-compare {
    text-decoration: line-through;
    opacity: 0.5;
    font-weight: 600;
    font-size: 0.85rem;
  }

  .vb-breakdown__buy-countdown {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.6rem;
    align-self: flex-start;
  }

  .vb-breakdown__buy-countdown-timer {
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 768px) {
    .vb-breakdown { padding: 3rem 0; }
    .vb-breakdown__container { padding: 0 1.25rem; }
    .vb-breakdown__cta { width: 100%; max-width: 350px; padding: 1rem 2rem; font-size: 1rem; }

    .vb-breakdown__heading {
      font-size: clamp(2.25rem, 10vw, 3.25rem);
      white-space: nowrap;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .vb-breakdown__video-overlay-play-wrap {
      width: 3.5rem;
      height: 3.5rem;
    }

    .vb-breakdown__video-overlay-icon {
      width: 3.5rem;
      height: 3.5rem;
      font-size: 1.6rem;
    }

    .vb-breakdown__buy-card {
      gap: 1.25rem;
      padding: 0 0.25rem;
      width: auto;
    }

    .vb-breakdown__buy-folder {
      width: 140px;
      height: 123px;
    }

    .vb-breakdown__buy-folder-label {
      font-size: 0.75rem;
    }

    .vb-breakdown__buy-tagline {
      font-size: clamp(0.95rem, 3.6vw, 1.15rem);
    }

    .vb-breakdown__buy-sub {
      font-size: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .vb-breakdown__buy-btn {
      font-size: 0.7rem;
      padding: 0.55rem 1rem;
      gap: 0.3rem;
    }

    .vb-breakdown__buy-urgency {
      padding: 0.3rem 0.75rem;
      gap: 0.3rem;
      margin-top: 1rem;
    }

    .vb-breakdown__buy-urgency-dot { width: 5px; height: 5px; }
    .vb-breakdown__buy-urgency-text { font-size: 0.5rem; letter-spacing: 0.04em; }

    .vb-breakdown__buy-btn-compare {
      font-size: 0.65rem;
    }

    .vb-breakdown__buy-countdown {
      font-size: 0.65rem;
    }
  }
/* END_SECTION:voxbox-breakdown */

/* START_SECTION:voxbox-cta (INDEX:68) */
.voxbox-cta {
    padding: 6rem 0;
    background: #0a0a0a;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .voxbox-cta__container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .voxbox-cta__content {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  }

  .voxbox-cta__header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .voxbox-cta__heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: white;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  .voxbox-cta__subheading {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
  }

  .voxbox-cta__presets {
    margin-bottom: 2rem;
  }

  .voxbox-cta__preset-item,
  .voxbox-cta__value-item,
  .voxbox-cta__bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .voxbox-cta__preset-item:last-of-type {
    border-bottom: none;
  }

  .voxbox-cta__preset-name {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .voxbox-cta__preset-price {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 700;
  }

  .voxbox-cta__value-item {
    border-bottom: none;
  }

  .voxbox-cta__value-name {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .voxbox-cta__value-price {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 700;
  }

  .voxbox-cta__bonus-item {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.15) 0%, transparent 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
  }

  .voxbox-cta__bonus-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
  }

  .voxbox-cta__bonus-text strong {
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 800;
  }

  .voxbox-cta__bonus-price {
    color: var(--accent);
    font-size: 1.125rem;
    font-weight: 800;
  }

  .voxbox-cta__pricing {
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem;
  }

  .voxbox-cta__total-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .voxbox-cta__label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .voxbox-cta__old-price {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: line-through;
  }

  .voxbox-cta__final-pricing {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .voxbox-cta__price-tag {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    transform: skewX(-5deg);
  }

  .voxbox-cta__price-label {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: italic;
    display: block;
    transform: skewX(5deg);
  }

  .voxbox-cta__price-amounts {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .voxbox-cta__compare-price {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.75rem;
    font-weight: 700;
    text-decoration: line-through;
  }

  .voxbox-cta__final-price {
    color: var(--accent);
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
  }

  .voxbox-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: #fff;
    padding: 1.5rem 3rem;
    border-radius: 10px;
    font-weight: 900;
    font-size: 1.125rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.4);
    width: 100%;
  }

  .voxbox-cta__button:hover,
  .voxbox-cta__button:active {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(var(--accent-rgb), 0.6);
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    color: #fff;
  }

  .voxbox-cta__button svg {
    transition: transform 0.3s ease;
  }

  .voxbox-cta__button:hover svg {
    transform: scale(1.1);
  }

  @media (max-width: 768px) {
    .voxbox-cta {
      padding: 4rem 0;
    }

    .voxbox-cta__container {
      padding: 0 1.5rem;
    }

    .voxbox-cta__content {
      padding: 2rem 1.5rem;
    }

    .voxbox-cta__preset-name,
    .voxbox-cta__value-name,
    .voxbox-cta__bonus-text {
      font-size: 0.875rem;
    }

    .voxbox-cta__preset-price {
      font-size: 0.875rem;
    }

    .voxbox-cta__final-pricing {
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
    }

    .voxbox-cta__price-amounts {
      width: 100%;
      justify-content: space-between;
    }

    .voxbox-cta__final-price {
      font-size: 2.5rem;
    }

    .voxbox-cta__button {
      padding: 1.25rem 2rem;
      font-size: 1rem;
    }
  }
/* END_SECTION:voxbox-cta */

/* START_SECTION:voxbox-hero (INDEX:69) */
.voxbox-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(to bottom, #000 0%, #000 70%, #0a0a0a 100%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -100px;
    padding-top: 100px;
  }

  .voxbox-hero__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .voxbox-hero__video,
  .voxbox-hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .voxbox-hero__video-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.1);
  }

  .voxbox-hero__video-placeholder p {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .voxbox-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
  }

  .voxbox-hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 2rem;
  }

  .voxbox-hero__container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .voxbox-hero__heading {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    color: white;
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .voxbox-hero__subheading {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    font-weight: 500;
  }

  .voxbox-hero__pricing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }

  .voxbox-hero__price {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: #d65a22;
    text-shadow: 0 0 30px rgba(214, 90, 34, 0.5);
  }

  .voxbox-hero__compare-price {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
  }

  .voxbox-hero__save {
    background: #d65a22;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .voxbox-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: #d65a22;
    color: white;
    padding: 1.25rem 3rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(214, 90, 34, 0.4);
  }

  .voxbox-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(214, 90, 34, 0.6);
    background: #ff7a3d;
  }

  .voxbox-hero__cta svg {
    transition: transform 0.3s ease;
  }

  .voxbox-hero__cta:hover svg {
    transform: translateX(5px);
  }

  .voxbox-hero__trust {
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
  }

  .voxbox-hero__stars {
    color: #d65a22;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  @media (max-width: 768px) {
    .voxbox-hero {
      min-height: 90vh;
    }

    .voxbox-hero__pricing {
      flex-direction: column;
      gap: 0.5rem;
    }

    .voxbox-hero__cta {
      padding: 1rem 2rem;
      font-size: 1rem;
      width: 100%;
      max-width: 300px;
      justify-content: center;
    }
  }
/* END_SECTION:voxbox-hero */

/* START_SECTION:voxbox-showcase (INDEX:70) */
.voxbox-showcase {
    padding: 6rem 0;
    background: #0a0a0a;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .voxbox-showcase__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .voxbox-showcase__heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    text-align: center;
    color: white;
    margin: 0 0 4rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  .voxbox-showcase__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
  }

  .voxbox-showcase__image {
    position: relative;
  }

  .voxbox-showcase__img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }

  .voxbox-showcase__image-placeholder {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 2px dashed rgba(var(--accent-rgb), 0.3);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.3);
  }

  .voxbox-showcase__image-placeholder p {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .voxbox-showcase__features {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .voxbox-feature {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .voxbox-feature__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.3);
  }

  .voxbox-feature__content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem;
  }

  .voxbox-feature__content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
  }

  .voxbox-showcase__cta {
    text-align: center;
  }

  .voxbox-showcase__button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--accent);
    color: white;
    padding: 1.25rem 3rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.4);
  }

  .voxbox-showcase__button:hover,
  .voxbox-showcase__button:active {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(var(--accent-rgb), 0.6);
    background: var(--accent-light);
    color: white;
  }

  .voxbox-showcase__button svg {
    transition: transform 0.3s ease;
  }

  .voxbox-showcase__button:hover svg {
    transform: translateX(5px);
  }

  @media (max-width: 968px) {
    .voxbox-showcase {
      padding: 4rem 0;
    }

    .voxbox-showcase__container {
      padding: 0 1.5rem;
    }

    .voxbox-showcase__content {
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    .voxbox-feature {
      gap: 1rem;
    }

    .voxbox-feature__icon {
      width: 50px;
      height: 50px;
    }

    .voxbox-showcase__button {
      padding: 1rem 2rem;
      font-size: 1rem;
      width: 100%;
      max-width: 350px;
      justify-content: center;
    }
  }
/* END_SECTION:voxbox-showcase */

/* START_SECTION:voxbox-testimonials (INDEX:71) */
.voxbox-testimonials {
    padding: 6rem 0;
    background: linear-gradient(to bottom, #1a1a1a 0%, #0f0f0f 50%, #000 100%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .voxbox-testimonials__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .voxbox-testimonials__heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    text-align: center;
    color: white;
    margin: 0 0 3rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  .voxbox-testimonials__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
    padding: 3rem 0;
    border-top: 1px solid rgba(214, 90, 34, 0.2);
    border-bottom: 1px solid rgba(214, 90, 34, 0.2);
  }

  .voxbox-stat {
    text-align: center;
  }

  .voxbox-stat__number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #d65a22;
    margin-bottom: 0.5rem;
  }

  .voxbox-stat__label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
  }

  .voxbox-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }

  .voxbox-testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(214, 90, 34, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
  }

  .voxbox-testimonial-card:hover {
    transform: translateY(-5px);
    border-color: #d65a22;
    background: rgba(214, 90, 34, 0.05);
    box-shadow: 0 20px 60px rgba(214, 90, 34, 0.2);
  }

  .voxbox-testimonial-card__stars {
    color: #d65a22;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .voxbox-testimonial-card__text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 0 1.5rem;
  }

  .voxbox-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .voxbox-testimonial-card__avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d65a22 0%, #ff7a3d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
  }

  .voxbox-testimonial-card__name {
    font-weight: 700;
    color: white;
    font-size: 1rem;
  }

  .voxbox-testimonial-card__title {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 968px) {
    .voxbox-testimonials {
      padding: 4rem 0;
    }

    .voxbox-testimonials__container {
      padding: 0 1.5rem;
    }

    .voxbox-testimonials__stats {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 2rem 0;
    }

    .voxbox-testimonials__grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
/* END_SECTION:voxbox-testimonials */

/* START_SECTION:yeat-landing-sticky-bar (INDEX:75) */
.yeat-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: rgba(10, 10, 14, 0.78);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .yeat-sticky-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .yeat-sticky-bar__label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(214, 40, 40, 0.85);
    box-shadow: 0 4px 18px rgba(214, 40, 40, 0.35);
  }

  .yeat-sticky-bar__countdown {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
  }

  .yeat-sticky-bar__time-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    min-width: 48px;
    padding: 0.35rem 0.5rem 0.3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 0.15rem;
  }

  .yeat-sticky-bar__time-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .yeat-sticky-bar__time-unit {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
  }

  .yeat-sticky-bar__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    flex: 0 1 auto;
    margin-left: auto;
    margin-right: 1rem;
  }

  .yeat-sticky-bar__compare {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
    font-weight: 500;
  }

  .yeat-sticky-bar__price-current {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-top: 0.1rem;
    letter-spacing: -0.01em;
  }

  .yeat-sticky-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: #fff;
    color: #0a0a0a;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.6rem 2.75rem;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(255, 255, 255, 0.12);
  }

  .yeat-sticky-bar__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(255, 255, 255, 0.22);
    color: #0a0a0a;
  }

  .yeat-sticky-bar__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    line-height: 1;
    transition: transform 0.15s ease;
  }

  .yeat-sticky-bar__cta:hover .yeat-sticky-bar__cta-icon {
    transform: translateX(2px);
  }

  body.has-yeat-sticky-bar {
    padding-top: var(--yeat-sticky-bar-h, 60px);
  }

  @media (max-width: 900px) {
    .yeat-sticky-bar__label {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .yeat-sticky-bar {
      top: auto;
      bottom: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 0;
      padding-top: 0;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.has-yeat-sticky-bar {
      padding-top: 0;
      padding-bottom: var(--yeat-sticky-bar-h, 60px);
    }

    .yeat-sticky-bar__inner {
      padding: 1rem 0.85rem;
      gap: 0.7rem;
    }

    .yeat-sticky-bar__time-box {
      min-width: 46px;
      padding: 0.5rem 0.4rem 0.4rem;
      border-radius: 6px;
      gap: 0.15rem;
    }

    .yeat-sticky-bar__time-value {
      font-size: 1.1rem;
    }

    .yeat-sticky-bar__time-unit {
      font-size: 0.56rem;
      letter-spacing: 0.07em;
    }

    .yeat-sticky-bar__price {
      margin-right: 0.6rem;
    }

    .yeat-sticky-bar__compare {
      font-size: 1.02rem;
    }

    .yeat-sticky-bar__price-current {
      font-size: 1.35rem;
    }

    .yeat-sticky-bar__cta {
      padding: 0.65rem 2.1rem;
      font-size: 0.95rem;
      letter-spacing: 0.04em;
      gap: 0.45rem;
    }
  }

  @media (max-width: 480px) {
    .yeat-sticky-bar__inner {
      padding: 0.95rem 0.65rem;
      gap: 0.5rem;
    }
    .yeat-sticky-bar__countdown {
      gap: 0.3rem;
    }
    .yeat-sticky-bar__time-box {
      min-width: 42px;
      padding: 0.42rem 0.3rem 0.34rem;
      gap: 0.12rem;
    }
    .yeat-sticky-bar__time-value {
      font-size: 1rem;
    }
    .yeat-sticky-bar__time-unit {
      font-size: 0.5rem;
      letter-spacing: 0.05em;
    }
    .yeat-sticky-bar__compare {
      font-size: 0.9rem;
    }
    .yeat-sticky-bar__price-current {
      font-size: 1.2rem;
    }
    .yeat-sticky-bar__price {
      margin-right: 0.4rem;
    }
    .yeat-sticky-bar__cta {
      padding: 0.58rem 1.65rem;
      font-size: 0.88rem;
      gap: 0.4rem;
    }
  }
/* END_SECTION:yeat-landing-sticky-bar */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:award-badge (INDEX:76) */
.award-badge {
    display: inline-block;
    width: 150px;
    max-width: 100%;
    text-decoration: none;
    perspective: 700px;
    cursor: pointer;
  }
  @media (min-width: 640px) {
    .award-badge { width: 180px; }
  }

  .award-badge__inner {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    transform: perspective(700px) rotateX(0) rotateY(0) scale(1);
    transform-origin: center center;
    transition: transform 220ms ease-out;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
  }

  .award-badge__svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .award-badge__overlays { transform-box: fill-box; }

  .award-badge__overlay {
    transform-origin: 130px 27px;
    transform-box: fill-box;
    will-change: transform;
  }

  @keyframes award-badge-spin-a { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(12deg); } }
  @keyframes award-badge-spin-b { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(22deg); } }
  @keyframes award-badge-spin-c { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(30deg); } }
  @keyframes award-badge-spin-d { 0%,100% { transform: rotate(30deg); } 50% { transform: rotate(42deg); } }
  @keyframes award-badge-spin-e { 0%,100% { transform: rotate(40deg); } 50% { transform: rotate(52deg); } }
  @keyframes award-badge-spin-f { 0%,100% { transform: rotate(50deg); } 50% { transform: rotate(62deg); } }
  @keyframes award-badge-spin-g { 0%,100% { transform: rotate(60deg); } 50% { transform: rotate(72deg); } }
  @keyframes award-badge-spin-h { 0%,100% { transform: rotate(70deg); } 50% { transform: rotate(82deg); } }

  .award-badge__overlay--1 { animation: award-badge-spin-a 5s ease-in-out infinite; }
  .award-badge__overlay--2 { animation: award-badge-spin-b 5s ease-in-out infinite; }
  .award-badge__overlay--3 { animation: award-badge-spin-c 5s ease-in-out infinite; }
  .award-badge__overlay--4 { animation: award-badge-spin-d 5s ease-in-out infinite; }
  .award-badge__overlay--5 { animation: award-badge-spin-e 5s ease-in-out infinite; }
  .award-badge__overlay--6 { animation: award-badge-spin-f 5s ease-in-out infinite; }
  .award-badge__overlay--7 { animation: award-badge-spin-g 5s ease-in-out infinite; }
  .award-badge__overlay--8 { animation: award-badge-spin-h 5s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    .award-badge__overlay { animation: none; }
    .award-badge__inner { transition: none; }
  }
/* END_SNIPPET:award-badge */

/* START_SNIPPET:cart-drawer (INDEX:78) */
is bundled GLOBALLY (site-wide),
     so its desktop rules (.cart-page { position:fixed; height:100dvh;
     justify-content:center }) apply even when the drawer opens from a
     non-/cart page. The neutralize CSS in cart-drawer.liquid's
     {% stylesheet %} only lived inside @media (max-width:899px) so it
     never fired on desktop. These inline rules fix that unconditionally.
     ===================================================================== */

  /* 1. Counter main-cart.liquid's global desktop rule that makes .cart-page
        position:fixed; inset:0; height:100dvh; justify-content:center.
        That caused a ~130px blank gap at the top (centering offset) and
        clipped the checkout bar from the bottom. */
  .cart-drawer__content .cart-page {
    position: relative !important;
    inset: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    z-index: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. Hide elements that only make sense on the standalone /cart page —
        the drawer has its own backdrop and close button. */
  .cart-drawer__content .cart-page__backdrop,
  .cart-drawer__content .cart-page::after,
  .cart-drawer__content .cart-page__sheet-close {
    display: none !important;
  }

  /* 3. Sheet must fill the available scroll area — no extra padding, no
        centering margin, no standalone-page max-height clamping. */
  .cart-drawer__content .cart-page__sheet {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    align-self: stretch !important;
    box-shadow: none !important;
  }

  /* 4. .cart-mobile is the non-scrolling column container — hero stays
        pinned at top, body scrolls. Using overflow:hidden here lets
        .cart-mobile__body (below) be the actual scroll surface so the
        hero never scrolls off-screen. */
  .cart-drawer__content .cart-mobile {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. The items body is the true scroll surface. */
  .cart-drawer__content .cart-mobile__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 6. Checkout bar — in-flow flex footer inside the sheet. Never
        position:fixed in the drawer (panel transform creates a containing
        block that would anchor it to the panel, not the viewport). */
  .cart-drawer__content .cart-mobile__bar {
    flex: 0 0 auto !important;
    position: relative !important;
    left: auto !important; right: auto !important;
    bottom: auto !important; top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: 0 !important;
  }

  /* ── Mobile checkout bar portal ─────────────────────────────────────
     On mobile the panel has transform:translateY(0) which makes it a
     containing block for position:fixed children — so we move the bar
     OUTSIDE the panel into the bar-slot sibling so position:fixed
     attaches to the real viewport. */
  .cart-drawer__bar-slot {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    pointer-events: none;
    display: none;
  }
  .cart-drawer.is-open .cart-drawer__bar-slot {
    display: block;
  }
  .cart-drawer__bar-slot .cart-mobile__bar {
    position: relative !important;
    left: auto !important; right: auto !important;
    bottom: auto !important; top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: 0 !important;
  }

  /* ── Mobile scroll padding ──────────────────────────────────────────
     Pad the scrollable body so the last item is never hidden behind the
     viewport-fixed checkout bar. Only needed on mobile where the bar is
     fixed; on desktop the bar is in-flow so no padding is needed. */
  @media (max-width: 899px) {
    .cart-drawer.is-open .cart-drawer__content .cart-mobile__body {
      padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  /* ── Desktop modal adjustments ───────────────────────────────────────
     The close button is now a sibling of the panel (outside overflow:hidden)
     so it can visually overflow the panel's top-right corner without being
     clipped. The button is positioned relative to .cart-drawer (the
     viewport-sized fixed container), aligned with the panel's corner via calc.

     Panel geometry:
       width  = min(680px, 94vw)   → half = min(340px, 47vw)
       height = min(820px, 100dvh - 40px) → half = min(410px, 50dvh - 20px)
     Panel top-right corner from the viewport:
       top   = 50dvh - half_height = 50dvh - min(410px, 50dvh - 20px)
       right = 50vw  - half_width  = 50vw  - min(340px, 47vw)
     Button centre sits 17px outside that corner. */
  @media (min-width: 750px) {
    .cart-drawer__panel {
      overflow: hidden !important;
    }
    .cart-drawer__scroll {
      padding-top: 0 !important;
    }
    /* Close button aligned to panel's top-right corner, half-outside. */
    .cart-drawer__close {
      position: absolute !important;
      top: max(12px, calc(50dvh - min(410px, calc(50dvh - 20px)) - 17px)) !important;
      right: max(12px, calc(50vw - min(340px, 47vw) - 17px)) !important;
      width: 34px !important;
      height: 34px !important;
      background: #ffffff !important;
      border: 1px solid rgba(15,17,21,0.10) !important;
      box-shadow: 0 2px 12px rgba(15,17,21,0.16) !important;
      z-index: 200 !important;
    }
    /* Hero card gets top breathing room. */
    .cart-drawer__content .cart-mobile__hero {
      margin-top: 1rem !important;
    }
  }
</style>

{%- comment -%}
  Inline critical JS — same reasoning as the inline <style> above.
  Shopify's compiled {% javascript %} bundle is CDN-cached and may be stale
  for several minutes after a push. This runs immediately, every request.

  Strategy: patch window.pinCheckoutBarToBottom so it never applies
  position:fixed when the drawer is open. The CSS flex chain handles the
  layout in that case. Also observe the drawer for is-open class changes as
  a belt-and-suspenders backup.
{%- endcomment -%}
<script>
(function () {
  function clearFixedStyles(bar) {
    bar.classList.remove('is-hidden');
    bar.style.removeProperty('position');
    bar.style.removeProperty('top');
    bar.style.removeProperty('bottom');
    bar.style.removeProperty('left');
    bar.style.removeProperty('right');
    bar.style.removeProperty('z-index');
    bar.style.setProperty('display',         'flex',    'important');
    bar.style.setProperty('visibility',      'visible', 'important');
    bar.style.setProperty('opacity',         '1',       'important');
    bar.style.setProperty('transform',       'none',    'important');
    bar.style.setProperty('pointer-events',  'auto',    'important');
    bar.style.setProperty('width',           '100%',    'important');
    bar.style.setProperty('margin',          '0',       'important');
  }

  function drawerIsOpen() {
    var d = document.querySelector('[data-cart-drawer]');
    return d && d.classList.contains('is-open');
  }

  function fixBarsNow() {
    if (!drawerIsOpen()) return;
    document.querySelectorAll('[data-mc-bar], .cart-mobile__bar')
      .forEach(clearFixedStyles);
  }

  /* Patch pinCheckoutBarToBottom: when the drawer is open on mobile,
     skip the position:fixed logic and just clear stale styles instead. */
  function applyPatch() {
    var orig = window.pinCheckoutBarToBottom;
    if (typeof orig !== 'function' || orig.__patched) return;
    function patched() {
      var isMobile = window.matchMedia('(max-width: 899px)').matches;
      if (isMobile && drawerIsOpen()) {
        fixBarsNow();
        return;
      }
      orig.apply(this, arguments);
    }
    patched.__patched = true;
    window.pinCheckoutBarToBottom = patched;
  }

  /* Compiled {% javascript %} runs in <head> before this body script,
     so the original function should already exist by now. */
  applyPatch();
  /* Fallback: also patch after DOMContentLoaded in case the compiled
     bundle was deferred or the script order was unexpected. */
  document.addEventListener('DOMContentLoaded', applyPatch);

  /* Belt-and-suspenders: MutationObserver watches for the drawer gaining
     is-open. Each time it opens, fix the bar at 0 / 200 / 500 ms so it
     catches the initial load AND any subsequent content refreshes. */
  document.addEventListener('DOMContentLoaded', function () {
    var drawer = document.querySelector('[data-cart-drawer]');
    if (!drawer) return;
    var prev = false;
    new MutationObserver(function () {
      var now = drawer.classList.contains('is-open');
      if (now && !prev) {
        fixBarsNow();
        setTimeout(fixBarsNow, 200);
        setTimeout(fixBarsNow, 500);
        setTimeout(fixBarsNow, 1000);
      }
      prev = now;
    }).observe(drawer, { attributes: true, attributeFilter: ['class'] });
  });
})();
</script>

{% stylesheet %}
  .cart-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* dvh follows the viewport as the mobile URL bar shows/hides so the
       drawer always fills the actual visible area (no gap underneath
       when Chrome's bottom bar collapses). svh/vh kept as fallbacks. */
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    z-index: 140;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    /* Side padding here (rather than margin on the panel) so width:100%
       on the panel doesn't overflow the viewport. We intentionally do
       NOT pad the bottom — we want the panel itself to extend all the
       way to the bottom of the viewport. The inner .cart-drawer__scroll
       carries the safe-area-aware bottom padding so content still
       clears the iOS home indicator. */
    padding: 0 clamp(1rem, 3vw, 3rem);
    box-sizing: border-box;
  }
  .cart-drawer[hidden] { display: none; }

  .cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: auto;
  }
  .cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

  .cart-drawer__panel {
    position: relative;
    width: 100%;
    max-width: none;
    /* Panel size is locked to the small viewport so the cart looks the
       same whether the mobile URL bar is up or collapsed. The outer
       drawer uses dvh, so when the bar hides the panel just slides down
       to the new viewport bottom rather than growing taller. */
    height: 94vh;
    height: 94svh;
    max-height: 94vh;
    max-height: 94svh;
    margin: 0;
    background: #f2f3f5;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
  }
  .cart-drawer.is-open .cart-drawer__panel { transform: translateY(0); }

  .cart-drawer__panel::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 17, 21, 0.18);
    z-index: 2;
    pointer-events: none;
  }

  .cart-drawer__close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 17, 21, 0.08);
    color: #0f1115;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .cart-drawer__close:hover {
    background: rgba(15, 17, 21, 0.16);
    transform: scale(1.04);
  }

  /* While the user is dragging the panel down, suppress the slide
     transition so it tracks the finger 1:1. */
  .cart-drawer.is-dragging .cart-drawer__panel {
    transition: none !important;
  }
  /* Larger tap target around the top grabber so the swipe-down gesture is
     easy to start without conflicting with the content underneath. */
  .cart-drawer__grabber {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 2;
    cursor: grab;
    touch-action: none;
  }
  .cart-drawer__grabber:active { cursor: grabbing; }
  .cart-drawer.is-dragging .cart-drawer__grabber { cursor: grabbing; }

  .cart-drawer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  /* Mobile only: push content down so it clears the grabber pill and
     close button that float above the scroll area. */
  @media (max-width: 899px) {
    .cart-drawer__scroll {
      padding-top: 2rem;
    }
  }

  .cart-drawer__content {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cart-drawer__content [data-cart-page] {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* No site footer inside the cart drawer. */
  .cart-drawer__footer-slot,
  .cart-drawer__content .site-footer,
  .cart-drawer__content footer {
    display: none !important;
  }

  .cart-drawer__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem;
  }
  .cart-drawer__spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(15, 17, 21, 0.15);
    border-top-color: var(--color-accent, #0764E8);
    animation: cartDrawerSpin 0.8s linear infinite;
  }
  @keyframes cartDrawerSpin {
    to { transform: rotate(360deg); }
  }

  /* Hide the injected mobile head inside the drawer — the drawer has its own
     close button. */
  .cart-drawer__content .cart-page__mobile-head { display: none !important; }

  /* Legacy cart layout (desktop grid + intro) — disabled; drawer uses
     the new .cart-mobile UI from main-cart.liquid only. */
  .cart-drawer__content .cart-page__grid,
  .cart-drawer__content .cart-page__intro--desktop {
    display: none !important;
  }

  /* ── Flex chain: panel → scroll → content → page → sheet → mobile → bar ──
     Every link must be a flex column with min-height:0 so the chain
     constrains correctly and .cart-mobile__bar stays inside the clipping
     bounds (never clipped by overflow:hidden on ancestors). */
  .cart-drawer__content [data-cart-page] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* The cart section sets a min-height to fill the viewport; inside the drawer
     we want it to hug the content so the drawer sizes naturally.
     NOTE: The inline <style> above carries !important versions of the critical
     rules (position, inset, height, justify-content) that counter main-cart's
     globally-bundled desktop CSS. These non-!important rules here are a belt-
     and-suspenders fallback for browsers where the inline block wins. */
  .cart-drawer__content .cart-page {
    position: relative;
    inset: auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    z-index: auto;
    padding: 0;
    background: transparent;
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    animation: none !important;
    box-shadow: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  /* Hide main-cart's own backdrop/overlay/close — the drawer supplies those. */
  .cart-drawer__content .cart-page__backdrop,
  .cart-drawer__content .cart-page::after,
  .cart-drawer__content .cart-page__sheet-close {
    display: none !important;
  }
  /* main-cart.liquid's {% stylesheet %} only loads on /cart. On every other
     page the drawer must carry these rules itself so .cart-page__sheet is a
     proper flex column and .cart-mobile + .cart-mobile__bar share the space
     correctly — .cart-mobile scrolls and the bar is always visible at the
     bottom. */
  .cart-drawer__content .cart-page__sheet {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* Sheet — fills 100% of the scroll area, no standalone-page sizing. */
  .cart-drawer__content .cart-page__sheet {
    padding: 0;
    margin: 0;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    align-self: stretch;
    box-shadow: none;
  }
  /* .cart-mobile is the column container — hero pinned, body scrolls.
     overflow:hidden keeps the hero locked; .cart-mobile__body is the
     real scroll surface (see below). */
  .cart-drawer__content .cart-mobile {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
  }
  /* The items body is the scroll surface. */
  .cart-drawer__content .cart-mobile__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Checkout bar — in-flow flex footer, NEVER position:fixed in the drawer.
     position:fixed inside a transform container gets clipped; relative keeps
     it safely inside the flex chain and always visible at the bottom. */
  .cart-drawer__content .cart-mobile__bar,
  .cart-drawer__bar-slot .cart-mobile__bar {
    flex: 0 0 auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: 0 !important;
  }
  /* Kill the big top padding/margin the cart page applies on mobile so
     content hugs the top of the drawer (only the grabber area sits above). */
  .cart-drawer__content .cart-page__grid {
    padding-top: 0 !important;
  }
  .cart-drawer__content .cart-page__main {
    margin-top: 0 !important;
  }
  .cart-drawer__content .cart-page__intro--desktop {
    padding-top: 0.5rem;
    margin-bottom: 1.25rem;
  }
  @media (min-width: 900px) {
    /* Desktop only: no sticky sidebar inside a drawer. */
    .cart-drawer__content .cart-page__summary {
      position: static !important;
    }
  }
  /* Drawer checkout bar uses flex footer on the sheet (see max-width: 899px block below). */

  /* ============================================================
     Bundle picker — two render slots, one visible per viewport.
     The main-cart section emits the bundle markup twice: once
     inside .cart-page__main (mobile/tablet) and once inside
     .cart-page__summary (desktop, under the summary card).
     These rules MUST live here (loaded globally on every page)
     in addition to main-cart.liquid so the slot toggle still
     works when the drawer is opened from a non-/cart page,
     where the main-cart section stylesheet isn't loaded.
     Without these, both copies would render and the bundle
     inside the fixed summary aside would push the checkout
     bar up to the middle of the screen on mobile.
     ============================================================ */
  .cart-builder-slot--in-summary { display: none !important; }
  @media (min-width: 900px) {
    .cart-builder-slot--in-main { display: none !important; }
    .cart-builder-slot--in-summary { display: block !important; }
    .cart-builder-slot--in-summary .cart-builder {
      padding: 0.85rem 0.85rem 0.95rem;
    }
    .cart-builder-slot--in-summary .cart-builder__slots { gap: 0.5rem; }
    .cart-builder-slot--in-summary .cart-builder__slot {
      min-height: 96px;
      padding: 0.6rem 0.35rem 0.65rem;
    }
    .cart-builder-slot--in-summary .cart-builder__slot-label { font-size: 0.7rem; }
  }

  /* ============================================================
     Checkout bar portal — slot is a SIBLING of the panel, completely
     outside the panel's overflow:hidden + transform context.
     position:fixed on the slot is now safe (no transformed ancestor).
     ============================================================ */
  @media (max-width: 899px) {
    .cart-drawer__bar-slot {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      pointer-events: none;
      display: none;
    }
    .cart-drawer.is-open .cart-drawer__bar-slot {
      display: block;
    }
    .cart-drawer__bar-slot .cart-mobile__bar {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      top: auto !important;
      z-index: auto !important;
      width: 100% !important;
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      margin: 0 !important;
    }
    /* Bottom padding so last cart item isn't hidden behind the fixed bar. */
    .cart-drawer.is-open .cart-drawer__scroll {
      padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
  }
  @media (min-width: 900px) {
    /* Desktop: slot unused; bar stays in the sheet as an in-flow flex child. */
    .cart-drawer__bar-slot { display: none !important; }
  }
  .cart-drawer__content .cart-mobile__body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  /* Free gift always pinned to the top of the cart. .cart-items already
     uses flex-direction: column inside main-cart.liquid, but we re-assert
     it here so the order property still works when the drawer is opened
     from a non-/cart page (where main-cart's section stylesheet is not
     loaded). data-line attributes on each <li> are unaffected, so the
     /cart/change.js line numbers still match Shopify's cart order. */
  .cart-items { display: flex; flex-direction: column; }
  .cart-item--gift { order: -1 !important; }

  /* Trim the big spacer before the FAQ section. */
  .cart-drawer__content .cart-faq {
    margin-top: 1.75rem;
    padding-bottom: 0.5rem;
  }

  /* Native <details>-based FAQ — reset the animated height/opacity the cart
     page uses so content is visible when opened. */
  .cart-drawer__content .cart-faq__body {
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .cart-drawer__content .cart-faq__item:not([open]) .cart-faq__body {
    display: none;
  }
  .cart-drawer__content .cart-faq__a {
    transform: none !important;
  }

  /* Site footer pulled in from the /cart page and shown below the FAQ inside
     the drawer. Force a white palette so it looks clean against the light
     drawer background. */
  .cart-drawer__footer-slot { margin-top: 2rem; }
  .cart-drawer__footer-slot .site-footer {
    --footer-bg: #ffffff;
    --footer-fg: #0f1115;
    --footer-muted: #6b7280;
    --footer-border: #e5e7eb;
    background: #ffffff;
    color: #0f1115;
    margin: 0;
  }
  /* The footer logo is designed for a dark background, so invert it when the
     footer sits inside the (white) cart drawer. */
  .cart-drawer__footer-slot .site-footer__logo {
    filter: invert(1);
  }

  /* ============================================================
     Free gift line-item badge.
     ============================================================ */
  .cart-item--gift { position: relative; }
  .cart-item--gift::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1.5px solid rgba(7, 100, 232, 0.45);
    pointer-events: none;
  }
  .cart-item__gift-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: rgba(7, 100, 232, 0.12);
    color: var(--color-accent, #0764E8);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: max-content;
    max-width: 100%;
  }
  .cart-item--gift .cart-item__price { color: var(--color-accent, #0764E8); font-weight: 800; letter-spacing: 0.04em; }
  .cart-item--gift .cart-item__remove { color: #9ca3af; }

  /* "Not bundle-eligible" badge on service line items (custom preset,
     mix/master, mentorship). The Buy 2 Get 1 Free bundle is for vocal
     preset packs only — this badge makes that explicit so a customer
     who adds, say, a custom preset doesn't expect it to advance them
     toward the free preset. */
  .cart-item__service-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.1875rem 0.55rem 0.1875rem 0.4rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(245, 158, 11, 0.32);
    cursor: help;
  }
  .cart-item__service-badge svg { flex: none; }
  .cart-item--service { position: relative; }
  .cart-item--service::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: rgba(245, 158, 11, 0.45);
    pointer-events: none;
  }

  /* ============================================================
     Free gift card — sits between cart items and bundle upsell.
     ============================================================ */
  .cart-gift {
    --gift-accent: var(--color-accent, #0764E8);
    margin: 1.25rem 0 0;
    width: 100%;
  }
  .cart-page__main > .cart-gift { margin-top: 1.25rem; }
  /* While auto-claim is firing, suppress the manual claim card to avoid a flash */
  .cart-gift.is-auto-claiming { display: none !important; }

  /* "Free gift added" toast */
  .cart-gift-toast {
    position: fixed;
    z-index: 100001;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 16px);
    background: linear-gradient(180deg, #16181f 0%, #0E1116 100%);
    color: #fff;
    padding: 0.7rem 1.1rem 0.7rem 0.9rem;
    border-radius: 9999px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    max-width: calc(100vw - 1.5rem);
  }
  .cart-gift-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .cart-gift-toast__emoji {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-gift-toast { transition: opacity 0.15s linear; }
  }

  /* Highlight the gift line on first appearance so the user clearly sees it */
  .cart-item--gift {
    animation: cart-gift-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1;
  }
  @keyframes cart-gift-pop {
    0% { background-color: rgba(7, 100, 232, 0.12); }
    100% { background-color: transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-item--gift { animation: none; }
  }
  .cart-gift__card {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: linear-gradient(135deg, rgba(7, 100, 232, 0.06), rgba(7, 100, 232, 0.02));
    border: 1.5px dashed rgba(7, 100, 232, 0.4);
    border-radius: 18px;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .cart-gift__card.is-claimed {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.55);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.07), rgba(34, 197, 94, 0.02));
  }
  .cart-gift__media {
    position: relative;
    width: 88px; height: 88px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 17, 21, 0.06);
    display: flex; align-items: center; justify-content: center;
  }
  .cart-gift__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .cart-gift__img--ph { font-size: 2rem; }
  .cart-gift__ribbon {
    position: absolute;
    top: 6px; left: -2px;
    padding: 0.125rem 0.5rem;
    background: var(--gift-accent);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(7, 100, 232, 0.35);
  }
  .cart-gift__body { min-width: 0; }
  .cart-gift__eyebrow {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gift-accent);
    margin-bottom: 0.25rem;
  }
  .cart-gift__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: #0f1115;
    margin: 0 0 0.1875rem;
    letter-spacing: -0.005em;
    text-transform: uppercase;
  }
  .cart-gift__desc {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7280;
  }
  /* Show the long copy by default; the mobile media query swaps to short. */
  .cart-gift__desc-full { display: inline; }
  .cart-gift__desc-short { display: none; }
  .cart-gift__action { flex-shrink: 0; }
  .cart-gift__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--gift-accent);
    color: #fff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    white-space: nowrap;
  }
  .cart-gift__btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(7, 100, 232, 0.28);
  }
  .cart-gift__btn:disabled { cursor: not-allowed; }
  .cart-gift__btn-default { display: inline-flex; align-items: center; gap: 0.375rem; }
  .cart-gift__btn-claimed { display: none; align-items: center; gap: 0.375rem; }
  .cart-gift__card.is-claimed .cart-gift__btn {
    background: rgba(34, 197, 94, 0.14);
    color: rgb(21, 128, 61);
  }
  .cart-gift__card.is-claimed .cart-gift__btn-default { display: none; }
  .cart-gift__card.is-claimed .cart-gift__btn-claimed { display: inline-flex; }
  .cart-gift__card.is-loading .cart-gift__btn {
    opacity: 0.6;
    pointer-events: none;
  }

  @media (max-width: 749px) {
    .cart-gift,
    .cart-drawer__content .cart-gift {
      margin: 0.625rem 0 0.75rem !important;
      padding: 0 !important;
      width: 100%;
    }
    .cart-gift__card {
      grid-template-columns: 52px minmax(0, 1fr) auto;
      grid-template-areas: "media body action";
      gap: 0.625rem;
      padding: 0.5rem 0.625rem;
      border-radius: 14px;
      border-width: 1px;
    }
    .cart-gift__media {
      grid-area: media;
      width: 52px; height: 52px;
      border-radius: 10px;
    }
    .cart-gift__body  { grid-area: body; }
    .cart-gift__action { grid-area: action; }
    .cart-gift__ribbon {
      top: 4px;
      padding: 0.0625rem 0.3125rem;
      font-size: 0.5rem;
      letter-spacing: 0.06em;
    }
    .cart-gift__eyebrow {
      font-size: 0.5625rem;
      margin-bottom: 0.125rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .cart-gift__title {
      font-size: 0.8125rem;
      margin-bottom: 0.0625rem;
    }
    .cart-gift__desc {
      font-size: 0.6875rem;
      line-height: 1.25;
    }
    .cart-gift__desc-full { display: none; }
    .cart-gift__desc-short { display: inline; }
    .cart-gift__btn {
      width: auto;
      padding: 0.4375rem 0.75rem;
      font-size: 0.75rem;
      border-radius: 999px;
    }
    .cart-gift__btn svg {
      width: 12px;
      height: 12px;
    }
  }

  /* ============================================================
     Bundle upsell + picker modal — duplicated here (also in
     sections/main-cart.liquid) so styles apply both on the
     standalone /cart page and inside the drawer.
     ============================================================ */
  .cart-bundle,
  .cart-drawer__content .cart-bundle {
    --bundle-accent: var(--color-accent, #0764E8);
    --bundle-accent-soft: rgba(7, 100, 232, 0.08);
    margin: 0 auto 1.25rem !important;
    padding-top: 4rem !important;
    max-width: 1200px;
    text-align: center;
  }
  .cart-bundle__intro { text-align: center; margin-bottom: 1.5rem; }
  .cart-bundle__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f1115;
    margin: 0 0 0.5rem;
  }
  .cart-bundle__subtitle { color: #6b7280; font-size: 0.9375rem; max-width: 540px; margin: 0 auto; }
  .cart-bundle__tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    text-align: left;
  }
  .cart-bundle__tier {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.25rem;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    color: inherit;
    font: inherit;
    cursor: default;
  }
  .cart-bundle__tier--clickable { cursor: pointer; width: 100%; }
  .cart-bundle__tier--clickable:hover {
    border-color: var(--bundle-accent);
    box-shadow: 0 6px 20px rgba(7, 100, 232, 0.10);
    transform: translateY(-2px);
  }
  .cart-bundle__tier.is-active {
    border-color: var(--bundle-accent);
    background: var(--bundle-accent-soft);
    box-shadow: 0 0 0 2px rgba(7, 100, 232, 0.10);
  }
  .cart-bundle__tier.is-faded {
    opacity: 0.55;
    filter: grayscale(0.6);
    pointer-events: none;
  }
  .cart-bundle__radio {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 0.125rem;
    transition: border-color 0.2s ease;
  }
  .cart-bundle__radio-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--bundle-accent);
    transform: scale(0);
    transition: transform 0.2s ease;
  }
  .cart-bundle__tier.is-active .cart-bundle__radio { border-color: var(--bundle-accent); }
  .cart-bundle__tier.is-active .cart-bundle__radio-dot { transform: scale(1); }
  .cart-bundle__tier-body { flex: 1; min-width: 0; }
  .cart-bundle__tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }
  .cart-bundle__tier-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f1115;
    display: inline-flex; align-items: center; gap: 0.4rem;
  }
  .cart-bundle__tier-emoji { font-size: 1.125rem; line-height: 1; }
  .cart-bundle__tier-percent {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--bundle-accent);
    letter-spacing: -0.01em;
  }
  .cart-bundle__tier[data-tier="0"] .cart-bundle__tier-percent { color: #9ca3af; }
  .cart-bundle__tier-savings {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--bundle-accent);
    margin: 0 0 0.4rem;
    line-height: 1.25;
  }
  .cart-bundle__tier[data-tier="0"] .cart-bundle__tier-savings { color: #9ca3af; }
  .cart-bundle__tier-meta { color: #6b7280; font-size: 0.8125rem; margin: 0 0 0.625rem; line-height: 1.35; }
  .cart-bundle__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .cart-bundle__badge--blue { background: var(--bundle-accent); color: #fff; }
  .cart-bundle__badge--muted { background: #e5e7eb; color: #6b7280; }
  .cart-bundle__timer {
    margin: 1.5rem auto 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(90deg, rgba(7, 100, 232, 0.08), rgba(7, 100, 232, 0.16));
    border: 1px solid rgba(7, 100, 232, 0.25);
    border-radius: 999px;
    color: #0f1115;
    font-size: 0.9375rem;
    font-weight: 600;
    width: max-content;
    max-width: 100%;
  }
  .cart-bundle__timer-icon { font-size: 1rem; }
  .cart-bundle__timer-label { color: #6b7280; font-weight: 600; }
  .cart-bundle__timer-value {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-weight: 800;
    color: var(--bundle-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  @media (max-width: 749px) {
    .cart-bundle,
    .cart-drawer__content .cart-bundle {
      width: auto !important;
      max-width: none !important;
      margin: 0 1rem 1rem !important;
      padding: 3rem 0 0 !important;
      box-sizing: border-box !important;
    }
    .cart-bundle__tiers {
      grid-template-columns: 1fr;
      width: 100%;
    }
    .cart-bundle__tier { padding: 1rem; width: 100%; box-sizing: border-box; }
    .cart-bundle__title { font-size: 1.5rem; }
    .cart-bundle__timer { font-size: 0.8125rem; padding: 0.625rem 1rem; }
  }

  /* Bundle picker modal */
  .cart-bundle-modal {
    --bundle-accent: var(--color-accent, #0764E8);
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-bundle-modal[hidden] { display: none; }
  .cart-bundle-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .cart-bundle-modal.is-open .cart-bundle-modal__backdrop { opacity: 1; }
  .cart-bundle-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 22px;
    width: min(720px, calc(100vw - 2rem));
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
  }

  /* ---- Bundle picker progress steps ---- */
  .cart-bundle-modal__progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem 0.65rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-bottom: 1px solid #eef0f2;
  }
  .cart-bundle-modal__progress[hidden] { display: none; }
  .cart-bundle-modal__progress-step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color 0.25s ease;
  }
  .cart-bundle-modal__progress-step.is-active { color: #0f1115; }
  .cart-bundle-modal__progress-step.is-done { color: #4d5e2a; }
  .cart-bundle-modal__progress-dot {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #d6d8dd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }
  .cart-bundle-modal__progress-step.is-active .cart-bundle-modal__progress-dot {
    background: #0f1115;
    border-color: #0f1115;
    transform: scale(1.06);
  }
  .cart-bundle-modal__progress-step.is-done .cart-bundle-modal__progress-dot {
    background: #8cc52f;
    border-color: #8cc52f;
  }
  .cart-bundle-modal__progress-dot-num {
    font-size: 0.78rem;
    font-weight: 800;
    color: #6b7280;
    transition: color 0.2s ease, opacity 0.2s ease;
  }
  .cart-bundle-modal__progress-step.is-active .cart-bundle-modal__progress-dot-num { color: #fff; }
  .cart-bundle-modal__progress-step.is-done .cart-bundle-modal__progress-dot-num { opacity: 0; }
  .cart-bundle-modal__progress-dot-check {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cart-bundle-modal__progress-dot-check svg { display: block; }
  .cart-bundle-modal__progress-step.is-done .cart-bundle-modal__progress-dot-check {
    opacity: 1;
    transform: scale(1);
  }
  .cart-bundle-modal__progress-line {
    flex: 0 0 56px;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .cart-bundle-modal__progress-line-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #8cc52f, #6fb01a);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cart-bundle-modal__progress.is-step2 .cart-bundle-modal__progress-line-fill {
    transform: scaleX(1);
  }

  /* ---- Celebration overlay ---- */
  .cart-bundle-modal__celebration {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    overflow: hidden;
  }
  .cart-bundle-modal__celebration[hidden] { display: none; }
  .cart-bundle-modal__celebration.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  .cart-bundle-modal__celebration-inner {
    position: relative;
    text-align: center;
    transform: scale(0.85) translateY(10px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.35s ease 0.05s;
  }
  .cart-bundle-modal__celebration.is-active .cart-bundle-modal__celebration-inner {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  .cart-bundle-modal__celebration-emoji {
    font-size: 4.5rem;
    line-height: 1;
    display: inline-block;
    animation: cbmc-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .cart-bundle-modal__celebration.is-active .cart-bundle-modal__celebration-emoji {
    animation: cbmc-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both, cbmc-wiggle 0.9s 0.7s ease-in-out;
  }
  .cart-bundle-modal__celebration-title {
    margin: 0.5rem 0 0.25rem;
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f1115;
  }
  .cart-bundle-modal__celebration-msg {
    margin: 0;
    font-size: 0.95rem;
    color: #4b5562;
  }
  .cart-bundle-modal__celebration-msg strong { color: #0f1115; }
  @keyframes cbmc-pop {
    0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
    55%  { transform: scale(1.2) rotate(8deg);  opacity: 1; }
    100% { transform: scale(1)   rotate(0);     opacity: 1; }
  }
  @keyframes cbmc-wiggle {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
  }
  /* Confetti */
  .cart-bundle-modal__confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .cart-bundle-modal__confetti span {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    will-change: transform, opacity;
  }
  .cart-bundle-modal__celebration.is-active .cart-bundle-modal__confetti span {
    animation: cbmc-confetti 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  @keyframes cbmc-confetti {
    0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
    8%   { opacity: 1; }
    100% {
      transform: translate3d(var(--cf-x, 0px), var(--cf-y, 200px), 0) rotate(var(--cf-r, 360deg));
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-bundle-modal__celebration-emoji,
    .cart-bundle-modal__confetti span { animation: none !important; }
  }
  .cart-bundle-modal.is-open .cart-bundle-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .cart-bundle-modal__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
  }
  .cart-bundle-modal__title {
    font-family: var(--font-heading);
    font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;
    color: #0f1115; margin: 0 0 0.25rem;
  }
  .cart-bundle-modal__subtitle { color: #6b7280; font-size: 0.875rem; margin: 0; }
  .cart-bundle-modal__close {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: 50%; border: 0;
    background: #f1f3f5; color: #0f1115;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s ease;
  }
  .cart-bundle-modal__close:hover { background: #e5e7eb; }

  /* Upsell tier badges (shown when modal opens from Checkout intercept) */
  .cart-bundle-modal__upsell {
    margin: 0.875rem 1.5rem 0.25rem;
  }
  .cart-bundle-modal__upsell[hidden] { display: none; }
  .cart-bundle-modal__upsell-tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
  .cart-bundle-modal__upsell-tier {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #0f1115;
    text-align: left;
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }
  .cart-bundle-modal__upsell-tier-tag {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.1875rem 0.5rem;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 999px;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease;
  }
  .cart-bundle-modal__upsell-tier-tag--popular {
    background: linear-gradient(135deg, #f97316, #ef4444);
  }
  .cart-bundle-modal__upsell-tier-tag--best {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
  }
  .cart-bundle-modal__upsell-tier-tag-short { display: none; }
  .cart-bundle-modal__upsell-tier::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(7, 100, 232, 0.92), rgba(96, 165, 250, 0.92));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .cart-bundle-modal__upsell-tier > * { position: relative; z-index: 1; }
  .cart-bundle-modal__upsell-tier.is-active {
    color: #fff;
    border-color: var(--bundle-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(7, 100, 232, 0.55);
  }
  .cart-bundle-modal__upsell-tier.is-active::before { opacity: 1; }
  .cart-bundle-modal__upsell-tier-emoji {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
  }
  .cart-bundle-modal__upsell-tier-body {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
  }
  .cart-bundle-modal__upsell-tier-label {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
  }
  .cart-bundle-modal__upsell-tier-meta {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bundle-accent);
    line-height: 1.25;
    letter-spacing: 0.005em;
    white-space: nowrap;
  }
  .cart-bundle-modal__upsell-tier.is-active .cart-bundle-modal__upsell-tier-meta {
    color: rgba(255, 255, 255, 0.95);
  }
  .cart-bundle-modal__upsell-tier-check {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%) scale(0.6);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--bundle-accent);
    opacity: 0;
    z-index: 3;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .cart-bundle-modal__upsell-tier.is-active .cart-bundle-modal__upsell-tier-check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .cart-bundle-modal__upsell-tier.is-active .cart-bundle-modal__upsell-tier-tag {
    opacity: 0;
    visibility: hidden;
  }

  /* Footer "No thanks" button (only shown in upsell mode) */
  .cart-bundle-modal__foot {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .cart-bundle-modal__foot .cart-bundle-modal__add { flex: 1; }
  .cart-bundle-modal__skip {
    flex-shrink: 0;
    background: transparent;
    border: 1.5px solid rgba(239, 68, 68, 0.55);
    color: #ef4444;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.625rem 0.875rem;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .cart-bundle-modal__skip[hidden] { display: none; }
  .cart-bundle-modal__skip:hover {
    color: #fff;
    background: #ef4444;
    border-color: #ef4444;
  }

  @media (max-width: 540px) {
    .cart-bundle-modal__upsell { margin: 0.625rem 1rem 0.25rem; }
    .cart-bundle-modal__upsell-tiers { gap: 0.5rem; }
    .cart-bundle-modal__upsell-tier { padding: 0.5625rem 0.625rem; gap: 0.4375rem; }
    /* On mobile, float the tag absolutely in the top-right corner so the
       inline text isn't squeezed by it. */
    .cart-bundle-modal__upsell-tier-tag {
      position: absolute;
      top: 0.3125rem;
      right: 0.3125rem;
      margin-left: 0;
      padding: 0.0625rem 0.3125rem;
      font-size: 0.5rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    .cart-bundle-modal__upsell-tier-tag-long { display: none; }
    .cart-bundle-modal__upsell-tier-tag-short { display: inline; }
    .cart-bundle-modal__upsell-tier-emoji { font-size: 1.125rem; }
    .cart-bundle-modal__upsell-tier-label { font-size: 0.8125rem; }
    .cart-bundle-modal__upsell-tier-meta { font-size: 0.625rem; }
    .cart-bundle-modal__upsell-tier-check {
      right: 0.4375rem;
      width: 18px;
      height: 18px;
    }

    .cart-bundle-modal__foot { gap: 0.5rem; }
    .cart-bundle-modal__skip {
      font-size: 0.75rem;
      padding: 0.5rem 0.625rem;
    }
  }

  .cart-bundle-modal__counter { padding: 0.75rem 1.5rem 0; color: #0f1115; font-size: 0.875rem; font-weight: 600; }
  .cart-bundle-modal__counter strong { color: var(--bundle-accent); font-weight: 800; }
  .cart-bundle-modal__grid {
    flex: 1; overflow-y: auto;
    padding: 1rem 1.5rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
    align-content: start;
  }
  .cart-bundle-modal__loading { grid-column: 1 / -1; text-align: center; color: #6b7280; padding: 3rem 1rem; font-size: 0.9375rem; }
  .cart-bundle-modal__card {
    position: relative;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.5rem 0.5rem 0.625rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    color: inherit;
    font: inherit;
  }
  .cart-bundle-modal__card:hover { border-color: var(--bundle-accent); transform: translateY(-2px); }
  .cart-bundle-modal__card.is-selected {
    border-color: var(--bundle-accent);
    box-shadow: 0 0 0 2px var(--bundle-accent), 0 8px 22px rgba(7, 100, 232, 0.18);
  }
  .cart-bundle-modal__card-img-wrap {
    position: relative; aspect-ratio: 1 / 1;
    background: transparent; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .cart-bundle-modal__card-img { max-width: 90%; max-height: 90%; object-fit: contain; }
  .cart-bundle-modal__card-check {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bundle-accent);
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .cart-bundle-modal__card.is-selected .cart-bundle-modal__card-check { opacity: 1; transform: scale(1); }
  .cart-bundle-modal__card.is-in-cart {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.4);
  }
  .cart-bundle-modal__card.is-in-cart:hover {
    border-color: #e5e7eb;
    transform: none;
  }
  /* Greyed out but still clickable — at least one variant of this product
     is already in the cart, but the user can pick a different variant. */
  .cart-bundle-modal__card.is-some-in-cart {
    opacity: 0.7;
    filter: grayscale(0.3);
  }
  .cart-bundle-modal__card.is-some-in-cart:hover {
    opacity: 1;
    filter: grayscale(0);
  }
  .cart-bundle-modal__card.is-some-in-cart.is-selected {
    opacity: 1;
    filter: grayscale(0);
  }
  .cart-bundle-modal__card-incart {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.85);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .cart-bundle-modal__card-incart--alt {
    background: rgba(7, 100, 232, 0.92);
  }
  .cart-bundle-modal__card-title {
    font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700;
    color: #0f1115; line-height: 1.2; letter-spacing: -0.005em; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cart-bundle-modal__foot { padding: 1rem 1.5rem 1.25rem; border-top: 1px solid #e5e7eb; background: #fafafa; }
  .cart-bundle-modal__add {
    width: 100%; padding: 0.95rem 1rem; border: 0; border-radius: 999px;
    background: var(--bundle-accent); color: #fff;
    font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.005em;
    cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease;
  }
  .cart-bundle-modal__add:disabled { opacity: 0.45; cursor: not-allowed; }
  .cart-bundle-modal__add:not(:disabled):hover { transform: translateY(-1px); }
  body.cart-bundle-modal-open { overflow: hidden; }

  /* Body wrapper that hosts grid / DAW / plugin steps */
  .cart-bundle-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cart-bundle-modal__grid[hidden],
  .cart-bundle-modal__daw[hidden],
  .cart-bundle-modal__plugins[hidden] { display: none; }

  /* Selected-card chip showing chosen DAW/plugin set */
  .cart-bundle-modal__card-meta {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bundle-accent);
  }

  /* DAW + plugin step (light theme to match cart) */
  .cart-bundle-modal__daw,
  .cart-bundle-modal__plugins {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.5rem 1.25rem;
  }
  .cart-bundle-modal__back {
    display: inline-flex; align-items: center; gap: 0.375rem;
    margin: 0 0 0.875rem;
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
    background: transparent; border: 0;
    color: #6b7280;
    font-size: 0.8125rem; font-weight: 600;
    border-radius: 8px; cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    font-family: inherit;
  }
  .cart-bundle-modal__back:hover { color: #0f1115; background: #f3f4f6; }
  .cart-bundle-modal__daw-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.125rem; font-weight: 700;
    color: #0f1115; letter-spacing: -0.01em;
  }
  .cart-bundle-modal__daw-sub {
    margin: 0 0 1rem; font-size: 0.8125rem; color: #6b7280;
  }
  .cart-bundle-modal__daws {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .cart-bundle-modal__daw-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem 0.875rem;
    border-radius: 14px;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    color: #0f1115; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    font-family: inherit;
  }
  .cart-bundle-modal__daw-btn:hover:not([disabled]) {
    background: #fff;
    border-color: var(--bundle-accent);
    transform: translateY(-1px);
  }
  .cart-bundle-modal__daw-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
  .cart-bundle-modal__daw-btn[hidden] { display: none; }
  .cart-bundle-modal__daw-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 12px; overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
  }
  .cart-bundle-modal__daw-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cart-bundle-modal__daw-name { font-size: 0.875rem; font-weight: 700; color: #0f1115; }

  .cart-bundle-modal__plugin-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  .cart-bundle-modal__plugin {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    color: #0f1115; cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font-family: inherit;
  }
  .cart-bundle-modal__plugin:hover:not([disabled]) {
    background: #fff; border-color: var(--bundle-accent);
  }
  .cart-bundle-modal__plugin[disabled] { opacity: 0.45; cursor: not-allowed; }
  .cart-bundle-modal__plugin-main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
  .cart-bundle-modal__plugin-title { font-size: 0.9375rem; font-weight: 700; color: #0f1115; }
  .cart-bundle-modal__plugin-sub { font-size: 0.75rem; color: #6b7280; }
  .cart-bundle-modal__plugin-arrow {
    display: inline-flex; color: #9ca3af; flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .cart-bundle-modal__plugin:hover:not([disabled]) .cart-bundle-modal__plugin-arrow {
    color: var(--bundle-accent); transform: translateX(2px);
  }

  @media (min-width: 540px) {
    .cart-bundle-modal__daws { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cart-bundle-modal__daw-btn { padding: 0.875rem 0.5rem 0.75rem; gap: 0.4375rem; }
    .cart-bundle-modal__daw-logo { width: 52px; height: 52px; }
  }

  /* In-place updates — no dimming (loading strip lives in main-cart). */
  .cart-page.is-cart-updating {
    opacity: 1;
    pointer-events: auto;
  }

  @media (max-width: 749px) {
    .cart-bundle-modal { align-items: center; }
    .cart-bundle-modal__panel {
      width: calc(100vw - 1.5rem);
      max-height: calc(100vh - 2rem);
      max-height: calc(100dvh - 2rem);
      border-radius: 22px;
      align-self: center;
    }
    .cart-bundle-modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.75rem 1rem 1rem; }
    .cart-bundle-modal__head { padding: 1rem 1rem 0.5rem; }
    .cart-bundle-modal__counter { padding: 0.625rem 1rem 0; }
    .cart-bundle-modal__foot { padding: 0.875rem 1rem 1rem; }
  }

  /* Hard scroll lock when bundle picker is open */
  html.cart-bundle-modal-open,
  body.cart-bundle-modal-open {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none !important;
    overscroll-behavior: contain !important;
  }

  /* Mobile: full-screen drawer with a top-right close button. */
  @media (max-width: 899px) {
    .cart-drawer {
      padding: 0;
      align-items: stretch;
    }
    .cart-drawer__panel {
      max-width: none;
      width: 100%;
      height: 100dvh;
      height: 100vh;
      max-height: 100dvh;
      max-height: 100vh;
      margin: 0;
      border-radius: 0;
    }
    .cart-drawer__scroll {
      padding: 0;
      overflow: hidden;
    }
    .cart-drawer__grabber,
    .cart-drawer__panel::before { display: none !important; }
    /* Compact X — fixed to viewport so it is always above the transform-
       animated panel (which creates a stacking context that can otherwise
       swallow taps on an absolutely-positioned sibling). */
    .cart-drawer__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: max(8px, env(safe-area-inset-top, 8px));
      right: max(8px, env(safe-area-inset-right, 8px));
      width: 36px;
      height: 36px;
      padding: 0;
      margin: 0;
      z-index: 9500;
      pointer-events: auto !important;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(15, 17, 21, 0.1);
      box-shadow: 0 2px 10px rgba(15, 17, 21, 0.12);
      border-radius: 999px;
    }
    .cart-drawer__close svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    /* Neutralize /cart modal rules (fixed viewport, backdrop iframe) inside drawer. */
    .cart-drawer__content .cart-page {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      z-index: auto !important;
      background: #f5f6f8 !important;
    }
    .cart-drawer__content .cart-page::after,
    .cart-drawer__content .cart-page__backdrop,
    .cart-drawer__content .cart-page__sheet-close {
      display: none !important;
    }
    .cart-drawer__content .cart-page__sheet {
      border-radius: 0;
      flex: 1 1 auto;
      min-height: 0;
      height: 100% !important;
      max-height: 100% !important;
      display: flex;
      flex-direction: column;
      padding: 0 !important;
      margin: 0;
      overflow: hidden;
    }
    /* Legacy /cart markup after the bar must not affect flex height. */
    .cart-drawer__content .cart-page__intro--desktop,
    .cart-drawer__content .cart-page__grid,
    .cart-drawer__content .cart-faq {
      display: none !important;
    }
    /* iOS drag tab on injected cart sheet — not used in drawer. */
    .cart-drawer__content .cart-page__sheet::before {
      display: none !important;
    }
    .cart-drawer__content .cart-mobile {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .cart-drawer__content .cart-mobile__hero {
      margin-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 1.75rem));
      position: relative;
      top: auto;
      z-index: 5;
      flex: 0 0 auto;
    }
    .cart-drawer__content .cart-mobile__body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .cart-drawer__content .cart-mobile__cf {
      position: static !important;
    }
    .cart-drawer__content .cart-mobile__cf::before {
      display: none !important;
    }
    /* The bar is position:fixed (see main-cart inline <style>). On mobile the
       drawer panel has transform:translateY(0) which makes it the containing
       block for fixed children — so the bar pins to the panel bottom = screen
       bottom. We only need to ensure the scroll area doesn't cover it. */
    .cart-drawer__content .cart-mobile__body {
      padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Legacy grid/form must not push the sheet taller than the panel. */
    .cart-drawer__content .cart-page__grid,
    .cart-drawer__content .cart-page__intro--desktop,
    .cart-drawer__content form#CartForm {
      display: none !important;
    }
  }
  /* Desktop: show as a centred modal overlay on top of the current page.
     The homepage stays visible and blurred behind it — no /cart navigation. */
  @media (min-width: 750px) {
    .cart-drawer {
      padding: 0;
      align-items: center;
      justify-content: center;
    }
    .cart-drawer__panel {
      width: min(680px, 94vw);
      height: min(820px, calc(100dvh - 40px));
      max-height: min(820px, calc(100dvh - 40px));
      border-radius: 22px;
      transform: translateY(20px) scale(0.98);
      opacity: 0;
      transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
    }
    .cart-drawer.is-open .cart-drawer__panel {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    /* No swipe handle on desktop */
    .cart-drawer__panel::before {
      display: none;
    }
    /* Panel keeps overflow:hidden for rounded corners. Close button is
       now a sibling of the panel so it isn't clipped. */
    .cart-drawer__panel {
      overflow: hidden;
    }
    .cart-drawer__scroll {
      padding-top: 0;
    }
    /* Close button — aligned to panel's top-right corner, half-outside. */
    .cart-drawer__close {
      position: absolute;
      top: max(12px, calc(50dvh - min(410px, calc(50dvh - 20px)) - 17px));
      right: max(12px, calc(50vw - min(340px, 47vw) - 17px));
      width: 34px;
      height: 34px;
      background: #ffffff;
      border: 1px solid rgba(15,17,21,0.10);
      box-shadow: 0 2px 12px rgba(15,17,21,0.16);
      z-index: 200;
    }
  }

  /* Desktop: no swipe gesture / no need for a grabber tap area. */
  @media (min-width: 900px) {
    .cart-drawer__grabber { display: none; }
  }

  /* Lock background scroll while the drawer is open. */
  html.cart-drawer-open,
  body.cart-drawer-open {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none;
    touch-action: none;
  }
  body.cart-drawer-open main {
    overflow: hidden !important;
  }

  /* "Already in your cart" toast — used by the duplicate-product guard. */
  .cart-dupe-notice {
    position: fixed;
    left: 50%;
    top: 1.25rem;
    transform: translate(-50%, -120%);
    z-index: 100020;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    background: rgba(15, 17, 21, 0.94);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    opacity: 0;
  }
  .cart-dupe-notice.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  .cart-dupe-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer__panel,
    .cart-drawer__backdrop {
      transition: none;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:product-card (INDEX:84) */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #151516;
    border: 0;
    border-radius: 22px;
    padding: 1.25rem 1.25rem 1rem;
    gap: 0.375rem;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: background 0.25s ease;
    box-shadow: none;
    aspect-ratio: 4 / 5;
    min-height: 300px;
  }

  .product-card__top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
  }
  .product-card__eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 0.9rem;
  }
  .product-card__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .product-card__eyebrow--sale {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
  }
  .product-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F59E0B;
  }
  .product-card__badge-icon { color: #F59E0B; }

  .product-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0.25rem 0 0;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-height: calc(1.05em * 2);
  }

  .product-card__media {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.5rem 0.75rem;
    min-height: 0;
  }
  .product-card__media::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 78%;
    width: 60%;
    height: 12%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0) 70%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 1;
  }
  .product-card__img {
    position: relative;
    z-index: 2;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform: translateZ(0);
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
  }

  .product-card__placeholder {
    width: 72%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border-radius: 12px;
  }
  .product-card__placeholder span {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.3);
  }

  .product-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    z-index: 2;
  }
  .product-card__price {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .product-card__price-prefix {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    font-size: 0.8125rem;
    margin-right: -0.125rem;
  }
  .product-card__price-sale { color: var(--color-accent, #0764E8); font-weight: 600; }
  .product-card__price-compare {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: line-through;
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .product-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 999px;
    background: #fff;
    color: #000;
    overflow: hidden;
    transition:
      padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      gap 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.25s ease,
      color 0.25s ease,
      box-shadow 0.25s ease;
    flex-shrink: 0;
    will-change: padding, gap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  .product-card__arrow-label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    overflow: hidden;
    transition:
      max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.22s ease 0.05s;
  }
  .product-card__arrow-icon {
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
  .product-card:hover .product-card__arrow,
  .product-card:active .product-card__arrow,
  .product-card:focus-visible .product-card__arrow {
    gap: 6px;
    padding: 0 8px 0 16px;
    background: var(--color-accent, #0764E8);
    color: #fff;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--color-accent, #0764E8) 60%, transparent);
  }
  .product-card:hover .product-card__arrow-label,
  .product-card:active .product-card__arrow-label,
  .product-card:focus-visible .product-card__arrow-label {
    max-width: 120px;
    opacity: 1;
  }
  .product-card:hover .product-card__arrow-icon,
  .product-card:active .product-card__arrow-icon,
  .product-card:focus-visible .product-card__arrow-icon {
    transform: translateX(2px);
  }

  @media (max-width: 749px) {
    .product-card {
      padding: 0.875rem 0.875rem 0.875rem;
      min-height: 0;
      aspect-ratio: 4 / 5;
      border-radius: 16px;
      gap: 0.25rem;
    }
    .product-card__top { gap: 0.375rem; }
    .product-card__eyebrow-row { min-height: 0.75rem; }
    .product-card__eyebrow { font-size: 0.6875rem; letter-spacing: 0.14em; }
    .product-card__badge { font-size: 0.6875rem; letter-spacing: 0.12em; }
    .product-card__title {
      font-size: 1.125rem;
      margin-top: 0.125rem;
      line-height: 1.1;
      -webkit-line-clamp: 2;
    }
    .product-grid--mobile-2 .product-card__title {
      font-size: 0.9375rem;
    }
    .product-card__media {
      padding: 0.125rem 0 0.25rem;
    }
    .product-card__img {
      max-width: 95%;
      max-height: 95%;
    }
    .product-card__price { font-size: 0.875rem; gap: 0.3rem; }
    .product-card__price-prefix { font-size: 0.75rem; }
    .product-card__price-compare { font-size: 0.75rem; }
    .product-card__arrow {
      height: 32px;
      min-width: 32px;
    }
    /* On mobile/touch the expanding "Learn more" label was overflowing the
       narrow 2-col cards. Keep the arrow as a fixed-size icon-only pill. */
    .product-card:hover .product-card__arrow,
    .product-card:active .product-card__arrow,
    .product-card:focus-visible .product-card__arrow {
      gap: 0;
      padding: 0;
      background: #fff;
      color: #000;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    .product-card:hover .product-card__arrow-label,
    .product-card:active .product-card__arrow-label,
    .product-card:focus-visible .product-card__arrow-label {
      max-width: 0;
      opacity: 0;
    }
    .product-card:hover .product-card__arrow-icon,
    .product-card:active .product-card__arrow-icon,
    .product-card:focus-visible .product-card__arrow-icon {
      transform: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-sticky-buy (INDEX:85) */
.buy-pill--dock {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translate(-50%, calc(100% + 2rem));
    z-index: 80;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;

    /* Bigger than the inline pill */
    gap: 1.125rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border-radius: 999px;
  }
  .buy-pill--dock[hidden] { display: none; }
  .buy-pill--dock.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
  /* Hide the sticky buy bar when the mobile mega menu is open */
  body.is-mega-locked .buy-pill--dock {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, calc(100% + 2rem)) !important;
  }

  .buy-pill--dock .buy-pill__media {
    width: 60px;
    height: 60px;
  }
  .buy-pill--dock .buy-pill__text {
    padding-right: 1rem;
    gap: 0.1875rem;
  }
  .buy-pill--dock .buy-pill__title {
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .buy-pill--dock .buy-pill__price {
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .buy-pill__save {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    color: rgb(21, 128, 61);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .buy-pill--dock .buy-pill__btn {
    padding: 1rem 1.75rem;
    font-size: 0.9375rem;
    gap: 0.625rem;
  }
  .buy-pill--dock .buy-pill__btn svg {
    width: 16px;
    height: 16px;
  }

  @media (max-width: 749px) {
    .buy-pill--dock {
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: none;
      transform: translateY(calc(100% + 2rem));
      padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)) 1rem;
      gap: 0.75rem;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      background: rgba(14, 17, 22, 0.96);
      box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, 0.8);
    }
    .buy-pill--dock.is-visible {
      transform: translateY(0);
    }
    .buy-pill--dock .buy-pill__media { display: none; }
    .buy-pill--dock .buy-pill__text {
      flex: 1;
      min-width: 0;
      padding-right: 0.5rem;
      gap: 0.125rem;
    }
    .buy-pill--dock .buy-pill__title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: #fff;
      white-space: normal;
      line-height: 1.25;
      order: 2;
      text-transform: none;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.65);
      font-weight: 400;
    }
    .buy-pill--dock .buy-pill__price {
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      text-transform: none;
      letter-spacing: 0;
      order: 1;
      display: inline-flex;
      align-items: center;
      gap: 0.4375rem;
      flex-wrap: wrap;
    }
    .buy-pill--dock .buy-pill__save {
      background: rgba(34, 197, 94, 0.2);
      color: rgb(74, 222, 128);
      font-size: 0.625rem;
      padding: 0.125rem 0.4375rem;
    }
    .buy-pill--dock .buy-pill__btn {
      padding: 0.75rem 1.5rem;
      font-size: 0.9375rem;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 600;
    }
    .buy-pill--dock .buy-pill__btn svg { display: none; }
  }
/* END_SNIPPET:product-sticky-buy */

/* START_SNIPPET:product-variant-modal (INDEX:86) */
.variant-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .variant-modal[hidden] { display: none; }
  .variant-modal.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .variant-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .variant-modal__panel {
    position: relative;
    width: min(440px, 100%);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 32px;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.45);
    color: #111;
    transform: translateY(24px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .variant-modal__panel:focus,
  .variant-modal__panel:focus-visible { outline: none; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.45); }
  .variant-modal.is-open .variant-modal__panel { transform: translateY(0); }

  .variant-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.55);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .variant-modal__close:hover { background: rgba(0, 0, 0, 0.06); color: #000; }

  .variant-modal__title {
    margin: 0 0 1.125rem;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    color: #111;
  }
  .variant-modal__subtitle {
    margin: 0 0 1.125rem;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
  }

  .variant-modal__step[hidden] { display: none; }

  /* Step 1 — DAW list */
  .variant-modal__daws {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    margin-bottom: 1rem;
  }
  .variant-modal__daw {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.875rem;
    padding: 0.625rem 0.875rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #111;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
    font-family: inherit;
    text-align: left;
  }
  .variant-modal__daw:hover:not([disabled]):not(.is-selected) {
    border-color: rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
  }
  .variant-modal__daw:active:not([disabled]) { transform: scale(0.99); }
  .variant-modal__daw[disabled] { opacity: 0.4; cursor: not-allowed; }
  .variant-modal__daw[hidden] { display: none; }
  .variant-modal__daw.is-selected {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #ffffff;
  }

  .variant-modal__daw-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    transition: background 0.18s ease;
  }
  .variant-modal__daw.is-selected .variant-modal__daw-logo {
    background: #ffffff;
  }
  .variant-modal__daw-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .variant-modal__daw-name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .variant-modal__daw-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1.4, 0.36, 1);
    flex-shrink: 0;
  }
  .variant-modal__daw.is-selected .variant-modal__daw-check {
    opacity: 1;
    transform: scale(1);
  }

  /* Continue CTA */
  .variant-modal__continue {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    background: #0A0A0A;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.12s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .variant-modal__continue:hover:not([disabled]) { background: #1a1a1a; }
  .variant-modal__continue:active:not([disabled]) { transform: scale(0.99); }
  .variant-modal__continue[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* Step 2 — Plugin set list */
  .variant-modal__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.625rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    background: transparent;
    border: 0;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease;
    font-family: inherit;
  }
  .variant-modal__back:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.05);
  }

  .variant-modal__plugins {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .variant-modal__plugin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.9375rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #111;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font-family: inherit;
  }
  .variant-modal__plugin:hover:not([disabled]) {
    border-color: rgba(0, 0, 0, 0.22);
  }
  .variant-modal__plugin:active:not([disabled]) { transform: scale(0.99); }
  .variant-modal__plugin[disabled] { opacity: 0.45; cursor: not-allowed; }

  .variant-modal__plugin-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
  .variant-modal__plugin-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .variant-modal__plugin-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
    background: #000;
  }
  .variant-modal__plugin-sub {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.55);
  }
  .variant-modal__plugin-arrow {
    display: inline-flex;
    color: rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .variant-modal__plugin:hover:not([disabled]) .variant-modal__plugin-arrow {
    color: #000;
    transform: translateX(2px);
  }
  .variant-modal__plugin-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .variant-modal__waves {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.875rem;
    padding: 0.75rem 0.9375rem;
    border-radius: 16px;
    background: rgba(7, 100, 232, 0.08);
    border: 1px solid rgba(7, 100, 232, 0.25);
    color: #111;
    text-decoration: none;
    font-size: 0.8125rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .variant-modal__waves:hover {
    background: rgba(7, 100, 232, 0.14);
    border-color: rgba(7, 100, 232, 0.5);
    transform: translateY(-1px);
  }
  .variant-modal__waves-text {
    color: rgba(0, 0, 0, 0.78);
  }
  .variant-modal__waves-cta {
    color: var(--color-accent, #0764E8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    margin-left: 0.1875rem;
  }
  .variant-modal__waves svg {
    color: var(--color-accent, #0764E8);
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .variant-modal__waves:hover svg { transform: translate(2px, -2px); }
  .variant-modal__waves-note {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.55);
  }

  @media (min-width: 750px) {
    .variant-modal { align-items: center; }
    .variant-modal__panel { margin: 0 auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .variant-modal, .variant-modal__panel { transition: none; }
  }
/* END_SNIPPET:product-variant-modal */

/* START_SNIPPET:shiny-button (INDEX:87) */
@property --shiny-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
  }

  @keyframes shiny-btn-shine {
    0%   { --shiny-x: 100%; }
    60%  { --shiny-x: -100%; }
    100% { --shiny-x: -100%; }
  }

  .shiny-btn {
    --shiny-x: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-family: var(--font-body, inherit);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
    animation: shiny-btn-shine 4s linear infinite;
    animation-delay: 1s;
  }
  .shiny-btn:active { transform: scale(0.97); }

  .shiny-btn--md { font-size: 0.8125rem; padding: 0.75rem 1.5rem; }
  .shiny-btn--lg { font-size: 0.9375rem; padding: 1rem 2rem; border-radius: 12px; }

  .shiny-btn--dark {
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%), #0A0B0E;
    color: rgba(255, 255, 255, 0.9);
  }
  .shiny-btn--dark:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.12);
  }

  .shiny-btn--light {
    background: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.06) 0%, transparent 60%), #fff;
    color: rgba(0, 0, 0, 0.75);
  }
  .shiny-btn--light:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  }

  .shiny-btn__text {
    position: relative;
    display: block;
    z-index: 2;
    -webkit-mask-image: linear-gradient(
      -75deg,
      #fff calc(var(--shiny-x) + 20%),
      transparent calc(var(--shiny-x) + 30%),
      #fff calc(var(--shiny-x) + 100%)
    );
    mask-image: linear-gradient(
      -75deg,
      #fff calc(var(--shiny-x) + 20%),
      transparent calc(var(--shiny-x) + 30%),
      #fff calc(var(--shiny-x) + 100%)
    );
  }

  .shiny-btn__border {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(
      -75deg,
      rgba(255, 255, 255, 0.1) calc(var(--shiny-x) + 20%),
      rgba(255, 255, 255, 0.5) calc(var(--shiny-x) + 25%),
      rgba(255, 255, 255, 0.1) calc(var(--shiny-x) + 100%)
    );
    -webkit-mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
    mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .shiny-btn--light .shiny-btn__border {
    background: linear-gradient(
      -75deg,
      rgba(0, 0, 0, 0.08) calc(var(--shiny-x) + 20%),
      rgba(0, 0, 0, 0.35) calc(var(--shiny-x) + 25%),
      rgba(0, 0, 0, 0.08) calc(var(--shiny-x) + 100%)
    );
  }

  @media (prefers-reduced-motion: reduce) {
    .shiny-btn { animation: none; }
  }
/* END_SNIPPET:shiny-button */