*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --p: #6b21a8;
      --p-dark: #4a1572;
      --p-mid: #8b5cf6;
      --p-light: #ede9fe;
      --p-pale: #f5f3ff;
      --ban1: #78439a;
      --ban2: #523493;
      --white: #fff;
      --bg: #F2F8FD;
      --border: #dde8f5;
      --ink: #1a0f2e;
      --muted: #5a6a80;
      --subtle: #94a3b8;
      --green: #16a34a;
      --green-l: #dcfce7;
      --blue: #0369a1;
      --blue-l: #e0f2fe;
      --gold: #f59e0b;
      --gold-l: #fef3c7;
    }

    .sec-ocassion {
      position: relative;
      text-align: center;
    }

    .buy-btn,
    .buy-btn:hover {
      text-decoration: none !important;
      color: #fff;
    }

    .see-all {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      padding: 12px 0;
      width: 120px;
      color: var(--color-primary);
      font-weight: 600;
      font-size: 16px;
    }


    /* ── Section Header ── */
    .sec-header {
      text-align: center;
      margin-bottom: 32px
    }

    .modal {
      left: auto !important;
      top: auto;
    }

    .sec-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--p-mid);
      margin-bottom: 10px
    }

    .sec-eyebrow::before,
    .sec-eyebrow::after {
      content: '';
      width: 22px;
      height: 2px;
      background: linear-gradient(90deg, var(--p), var(--p-mid));
      border-radius: 2px
    }

    .sec-title {
      /* font-size: clamp(1.7rem, 3.5vw, 2.4rem); */
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.03em;
      line-height: 1.1;
      margin-bottom: 10px
    }

    .sec-title em {
      font-style: normal;
      color: var(--p)
    }

    .sec-sub {
      font-size: 16px;
      color: var(--muted);
      max-width: 460px;
      margin: 0 auto
    }

    /* ── Tab Row ── */
    .tab-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 28px;
      flex-wrap: wrap
    }

    .tab-pills {
      display: flex;
      gap: 4px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 4px;
      box-shadow: 0 2px 10px rgba(82, 52, 147, .06)
    }

    .tab-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 9px;
      font-size: 16px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
      border: none;
      background: none;
      font-family: 'Space Grotesk', sans-serif
    }

    .tab-pill.active {
      background: linear-gradient(135deg, var(--ban1), var(--ban2));
      color: #fff;
      box-shadow: 0 4px 14px rgba(82, 52, 147, .3)
    }

    .tab-pill:not(.active):hover {
      color: var(--p);
      background: var(--p-pale)
    }

    .tab-pill svg {
      width: 12px;
      height: 12px
    }

    .tab-pill .count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 800
    }

    .tab-pill.active .count {
      background: rgba(255, 255, 255, .2);
      color: #fff
    }

    .tab-pill:not(.active) .count {
      background: var(--p-pale);
      color: var(--p)
    }

    .tab-right {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .results-count {
      font-size: 14px;
      color: var(--muted);
      font-weight: 500
    }

    .results-count strong {
      color: var(--ink);
      font-weight: 700
    }

    .sort-select {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 9px;
      padding: 7px 28px 7px 12px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      outline: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center
    }

    /* ══ DESKTOP GRID ══ */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px
    }

    /* ══ BRAND CARD ══ */
    .bcard {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s, border-color .22s;
      position: relative;
      display: flex;
      flex-direction: column;
      animation: fadeUp .35s ease both
    }

    .bcard:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(82, 52, 147, .14);
      border-color: #c4b0e0
    }

    .bcard:nth-child(1) {
      animation-delay: .03s
    }

    .bcard:nth-child(2) {
      animation-delay: .06s
    }

    .bcard:nth-child(3) {
      animation-delay: .09s
    }

    .bcard:nth-child(4) {
      animation-delay: .12s
    }

    .bcard:nth-child(5) {
      animation-delay: .15s
    }

    .bcard:nth-child(6) {
      animation-delay: .18s
    }

    .bcard:nth-child(7) {
      animation-delay: .21s
    }

    .bcard:nth-child(8) {
      animation-delay: .24s
    }

    .bcard:nth-child(9) {
      animation-delay: .27s
    }

    .bcard:nth-child(10) {
      animation-delay: .30s
    }

    .bcard:nth-child(11) {
      animation-delay: .33s
    }

    .bcard:nth-child(12) {
      animation-delay: .36s
    }

    .bcard-thumb {
      aspect-ratio: 3/2;
      position: relative;
      overflow: hidden
    }

    .bcard-thumb-bg {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .bcard-thumb-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .5) 100%)
    }

    .bcard-meta {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 8px 10px 7px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      z-index: 2;
      display: none;
    }

    .bcard-gk {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, .12);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 5px;
      padding: 2px 6px
    }

    .bcard-gk-dot {
      width: 7px;
      height: 7px;
      border-radius: 2px;
      background: rgba(255, 255, 255, .7)
    }

    .bcard-gk-text {
      font-size: .42rem;
      font-weight: 700;
      color: rgba(255, 255, 255, .85);
      letter-spacing: .04em
    }

    .bcard-valid {
      font-size: .42rem;
      color: rgba(255, 255, 255, .6);
      font-weight: 500
    }

    .bcard-overlay {
      position: absolute;
      inset: 0;
      background: rgba(26, 15, 46, .72);
      backdrop-filter: blur(3px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px;
      opacity: 0;
      transition: opacity .22s;
      z-index: 3
    }

    .bcard:hover .bcard-overlay {
      opacity: 1
    }

    .bcard-overlay-name {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      text-align: center;
      line-height: 1.2
    }

    .bcard-overlay-btns {
      display: flex;
      gap: 7px;
      width: 100%
    }

    .bcard-ov-btn {
      flex: 1;
      padding: 7px 4px;
      border-radius: 8px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 12px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: all .15s;
      text-align: center
    }

    .bcard-ov-btn.details {
      background: rgba(255, 255, 255, .14);
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .25);
      cursor: pointer
    }

    .bcard-ov-btn.details:hover {
      background: rgba(255, 255, 255, .26)
    }

    .bcard-ov-btn.buy {
      background: linear-gradient(135deg, var(--ban1), var(--ban2));
      color: #fff;
      box-shadow: 0 3px 12px rgba(82, 52, 147, .4)
    }

    .bcard-body {
      padding: 10px 11px 12px;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .bcard-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.2;
      letter-spacing: -.01em;
      white-space: nowrap;
      overflow: hidden;
      /* text-align: center; */
      text-overflow: ellipsis
    }

    .bcard-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap
    }

    .bcard .bcard-discount-badge {
      position: absolute;
      top: 10px;
      left: -5px;
      background: #ff3d00;
      color: #fff;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: bold;
      transform: rotate(-10deg);
      z-index: 5;
    }

    .btag {
      display: inline-flex;
      align-items: center;
      border-radius: 5px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap
    }

    .btag-instore {
      background: var(--p-pale);
      color: var(--p)
    }

    .btag-online {
      background: var(--blue-l);
      color: var(--blue)
    }

    .btag-multi {
      background: var(--green-l);
      color: var(--green)
    }

    .bcard-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 4;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff;
      border-radius: 6px;
      padding: 3px 7px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(217, 119, 6, .4)
    }

    /* ══ LOAD MORE ══ */
    .load-more-wrap {
      text-align: center;
      margin-top: 32px
    }

    .load-more-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 11px 28px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: .83rem;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 2px 10px rgba(82, 52, 147, .06)
    }

    .load-more-btn:hover {
      border-color: var(--p-mid);
      color: var(--p);
      background: var(--p-pale);
      transform: translateY(-1px)
    }

    .load-more-btn svg {
      width: 14px;
      height: 14px
    }

    /* ══ EMPTY ══ */
    .empty-state {
      grid-column: 1/-1;
      text-align: center;
      padding: 56px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px
    }

    .empty-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--p-pale);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .empty-icon svg {
      width: 24px;
      height: 24px;
      color: var(--p)
    }

    .empty-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--ink)
    }

    .empty-sub {
      font-size: .82rem;
      color: var(--muted)
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* ══ TABLET ══ */
    @media(max-width:1024px) and (min-width:601px) {
      .cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px
      }
    }

    /* ══ MOBILE CAROUSEL ══ */
    .mob-carousel {
      display: none
    }

    @media(max-width:600px) {
      .search-box {
        width: 100%;
        display: contents;
      }

      .section,
      .ts-wrap {
        padding: 0;
        margin: 0;
        max-width: 100%;
      }

      .tab-right {
        display: none
      }

      /* .tab-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
      } */

      .cards-grid {
        /* display: none !important */
        grid-template-columns: 1fr 1fr;
      }

      .all-brands,
      .emerging-brands {
        display: none !important;
      }

      .load-more-wrap {
        display: none
      }

      .mob-carousel {
        display: block
      }
    }

    .mob-carousel-viewport {
      overflow: hidden;
      position: relative
    }

    .mob-carousel-track {
      display: flex;
      transition: transform .35s cubic-bezier(.4, 0, .2, 1);
      will-change: transform
    }

    .mob-slide {
      flex: 0 0 100%;
      min-width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px
    }

    .mob-slide .bcard {
      animation: none;
      width: 100%
    }

    .mob-slide .bcard-name {
      font-size: 12px
    }

    .mob-slide .bcard-body {
      padding: 7px 8px 9px;
      gap: 5px
    }

    .mob-slide .btag {
      font-size: 9px;
      padding: 2px 5px
    }

    .mob-carousel-foot {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 14px
    }

    .mob-cc-btns {
      display: flex;
      gap: 8px
    }

    .mob-cc-btn {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--white);
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .18s;
      -webkit-tap-highlight-color: transparent
    }

    .mob-cc-btn:not([disabled]):hover {
      border-color: var(--p);
      background: var(--p-pale)
    }

    .mob-cc-btn[disabled] {
      opacity: .3;
      pointer-events: none
    }

    .mob-cc-btn svg {
      width: 14px;
      height: 14px;
      color: var(--ink)
    }

    .mob-dots {
      display: flex;
      gap: 5px;
      align-items: center
    }

    .mob-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--border);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: all .25s;
      -webkit-tap-highlight-color: transparent
    }

    .mob-dot.active {
      width: 22px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--ban1), var(--ban2))
    }

    .mob-page-label {
      font-size: .72rem;
      font-weight: 600;
      color: var(--subtle)
    }

    .mob-page-label strong {
      color: var(--p)
    }

    /* ══════════════════════════════
   MODAL
══════════════════════════════ */
    .card-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(15, 7, 30, .55);
      backdrop-filter: blur(7px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s;
    }

    .card-modal-backdrop.open {
      opacity: 1;
      pointer-events: all
    }

    .modal {
      background: var(--white);
      border-radius: 22px;
      width: 100%;
      max-width: 800px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 32px 80px rgba(15, 7, 30, .3), 0 8px 24px rgba(15, 7, 30, .12);
      transform: translateY(28px) scale(.97);
      transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
      overflow: hidden;
    }

    .card-modal-backdrop.open .modal {
      transform: translateY(0) scale(1)
    }

    /* Header */
    .modal-hdr {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px 16px;
      background: linear-gradient(135deg, #f3eeff 0%, #fff 60%);
      border-bottom: 1.5px solid var(--border);
      flex-shrink: 0;
    }

    .modal-hdr-left {}

    .modal-hdr-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -.025em;
      line-height: 1.2;
      margin-bottom: 3px
    }

    .modal-hdr-sub {
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
      margin-bottom: 10px
    }

    .modal-hdr-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .modal-close-btn {
      width: 34px;
      height: 34px;
      min-width: 34px;
      border-radius: 9px;
      background: var(--white);
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .17s;
      flex-shrink: 0;
    }

    .modal-close-btn:hover {
      background: var(--p-pale);
      border-color: var(--p-mid)
    }

    .modal-close-btn svg {
      width: 14px;
      height: 14px;
      color: var(--muted)
    }

    /* Body: 2 col */
    .modal-body {
      display: grid;
      grid-template-columns: 235px 1fr;
      flex: 1;
      min-height: 0;
      overflow: hidden
    }

    /* Left panel */
    .modal-left {
      padding: 18px 16px;
      background: var(--bg);
      border-right: 1.5px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 14px;
      /* overflow-y: auto; */
    }

    .modal-left::-webkit-scrollbar {
      width: 3px
    }

    .modal-left::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px
    }

    /* Card visual */
    .m-card {
      aspect-ratio: 3/2;
      border-radius: 13px;
      overflow: hidden;
      position: relative;
      /* box-shadow: 0 6px 22px rgba(82, 52, 147, .2); */
      /* background: linear-gradient(135deg, #4c1d95, #7c3aed, #a78bfa); */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .m-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .44) 100%)
    }

    .m-card-text {
      position: relative;
      z-index: 1;
      font-size: .82rem;
      font-weight: 800;
      color: #fff;
      text-align: center;
      padding: 8px;
      line-height: 1.25;
      text-shadow: 0 1px 6px rgba(0, 0, 0, .2)
    }

    .m-card-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 7px 10px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      z-index: 2
    }

    .m-card-gk {
      display: flex;
      align-items: center;
      gap: 3px;
      background: rgba(255, 255, 255, .13);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 4px;
      padding: 2px 6px
    }

    .m-card-gk-dot {
      width: 6px;
      height: 6px;
      border-radius: 1.5px;
      background: rgba(255, 255, 255, .8)
    }

    .m-card-gk-label {
      font-size: .4rem;
      font-weight: 700;
      color: rgba(255, 255, 255, .88);
      letter-spacing: .04em
    }

    .m-card-valid {
      font-size: .4rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .62)
    }

    /* Price */
    .m-price-box {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 11px;
      padding: 11px 13px
    }

    .m-price-label {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--subtle);
      margin-bottom: 3px
    }

    .m-price-val {
      font-size: 12px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -.02em
    }

    /* Features */
    .m-features {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .m-feat {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 500
    }

    .m-feat-ic {
      width: 20px;
      height: 20px;
      min-width: 20px;
      border-radius: 6px;
      background: var(--green-l);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .m-feat-ic svg {
      width: 10px;
      height: 10px;
      color: var(--green)
    }

    /* Buy btn left */
    .m-buy-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      padding: 11px;
      border-radius: 11px;
      border: none;
      background: linear-gradient(135deg, var(--ban1), var(--ban2));
      color: #fff;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 4px 14px rgba(82, 52, 147, .28)
    }

    .m-buy-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(82, 52, 147, .42)
    }

    .m-buy-btn svg {
      width: 14px;
      height: 14px
    }

    /* Right panel */
    .modal-right {
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    /* Tabs */
    .m-tabs {
      display: flex;
      border-bottom: 1.5px solid var(--border);
      flex-shrink: 0;
      padding: 0 18px;
      background: #fff
    }

    .m-tab {
      padding: 13px 16px;
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      border: none;
      background: none;
      font-family: 'Space Grotesk', sans-serif;
      border-bottom: 2.5px solid transparent;
      margin-bottom: -1.5px;
      transition: all .17s;
      white-space: nowrap
    }

    .m-tab.active {
      color: var(--p);
      border-bottom-color: var(--p)
    }

    .m-tab:hover:not(.active) {
      color: var(--ink)
    }

    /* Tab panes */
    .m-panes {
      flex: 1;
      overflow-y: auto;
      padding: 20px 20px 16px
    }

    .m-panes::-webkit-scrollbar {
      width: 4px
    }

    .m-panes::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px
    }

    .m-pane {
      display: none
    }

    .m-pane.active {
      display: block
    }

    /* Gift Details pane */
    .m-desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.72;
      margin-bottom: 14px
    }

    .m-desc strong {
      color: var(--ink);
      font-weight: 700
    }

    .m-desc a {
      color: var(--p);
      text-decoration: none
    }

    .m-desc a:hover {
      text-decoration: underline
    }

    .m-callout {
      background: var(--p-pale);
      border: 1.5px solid var(--p-light);
      border-radius: 11px;
      padding: 13px 15px
    }

    .m-callout p {
      font-size: 12px;
      color: var(--p-dark);
      line-height: 1.65
    }

    .m-callout p strong {
      color: var(--p);
      font-weight: 700
    }

    /* T&C pane */
    .m-tc {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .m-tc-item {
      display: flex;
      gap: 10px;
      align-items: flex-start
    }

    .m-tc-num {
      min-width: 22px;
      height: 22px;
      border-radius: 6px;
      background: var(--p-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .6rem;
      font-weight: 800;
      color: var(--p);
      flex-shrink: 0;
      margin-top: 1px
    }

    .m-tc-text {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.58
    }

    /* Locations pane */
    .m-loc-intro {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 14px;
      line-height: 1.6
    }

    .m-loc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .m-loc-chip {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 9px;
      padding: 8px 11px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink)
    }

    .m-loc-chip svg {
      width: 12px;
      height: 12px;
      color: var(--p);
      flex-shrink: 0
    }

    /* Footer */
    .modal-ftr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 20px;
      border-top: 1.5px solid var(--border);
      background: var(--bg);
      flex-shrink: 0
    }

    .mf-close {
      padding: 9px 20px;
      border-radius: 10px;
      background: var(--white);
      border: 1.5px solid var(--border);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      transition: all .17s
    }

    .mf-close:hover {
      border-color: var(--p-mid);
      color: var(--p)
    }

    .mf-buy {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 9px 22px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--ban1), var(--ban2));
      border: none;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 3px 12px rgba(82, 52, 147, .28)
    }

    .mf-buy:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 18px rgba(82, 52, 147, .42)
    }

    .mf-buy svg {
      width: 14px;
      height: 14px
    }

    /* Mobile modal */
    @media(max-width:680px) {
      .card-modal-backdrop {
        padding: 0;
        align-items: flex-end
      }

      .modal {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 94vh
      }

      .modal-body {
        grid-template-columns: 1fr;
        overflow-y: auto
      }

      .modal-left {
        border-right: none;
        border-bottom: 1.5px solid var(--border);
        background: var(--white)
      }

      /* .m-card {
        max-width: 200px;
        margin: 0 auto
      } */

      .modal-right {
        overflow: visible
      }

      .m-panes {
        overflow: visible
      }
      .banner-swiper-container .bannerSwiper .swiper-slide img {
          max-width: 100%;
          width: 100%;
          height: 150px;
          display: block;
         border-radius: 12px;
      }
    }

    @media(max-width:400px) {
      .m-loc-grid {
        grid-template-columns: 1fr
      }

      .m-tabs {
        padding: 0 10px
      }

      .m-tab {
        padding: 11px 10px;
        font-size: .72rem
      }
    }