/* MWS Store product catalogue. Shared billing foundations intentionally live here. */
:root {
      --bg: #08030f;
      --bg-soft: #11071d;
      --panel: rgba(18, 9, 29, .78);
      --panel-solid: #12091d;
      --surface: rgba(255, 255, 255, .055);
      --surface-hover: rgba(139, 92, 246, .105);
      --line: rgba(255, 255, 255, .13);
      --line-strong: rgba(192, 132, 252, .40);
      --text: #fbf9ff;
      --muted: rgba(251, 249, 255, .68);
      --soft: rgba(251, 249, 255, .46);
      --primary: #8b5cf6;
      --primary-2: #c084fc;
      --accent: #f0abfc;
      --success: #4ade80;
      --danger: #fb7185;
      --shadow: 0 32px 90px rgba(0, 0, 0, .42);
      --header: rgba(9, 4, 15, .78);
      --input: rgba(255, 255, 255, .055);
      --grid: rgba(147, 88, 255, .18);
      --grid-soft: rgba(120, 73, 210, .12);
      --grid-bright: rgba(199, 143, 255, .42);
      --grid-glow-inner: rgba(124, 58, 237, .13);
      --grid-glow-outer: rgba(76, 29, 149, .06);
      --glass-highlight: rgba(255,255,255,.08);
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    html[data-theme="light"] {
      --bg: #f7f5fb;
      --bg-soft: #eee9f8;
      --panel: rgba(255, 255, 255, .84);
      --panel-solid: #ffffff;
      --surface: rgba(82, 47, 130, .055);
      --surface-hover: rgba(124, 58, 237, .09);
      --line: rgba(49, 27, 78, .13);
      --line-strong: rgba(124, 58, 237, .34);
      --text: #21162e;
      --muted: rgba(33, 22, 46, .69);
      --soft: rgba(33, 22, 46, .48);
      --primary: #7c3aed;
      --primary-2: #a855f7;
      --accent: #c026d3;
      --success: #16a34a;
      --danger: #e11d48;
      --shadow: 0 28px 75px rgba(49, 27, 78, .14);
      --header: rgba(250, 248, 253, .82);
      --input: rgba(82, 47, 130, .055);
      --grid: rgba(102, 61, 162, .15);
      --grid-soft: rgba(91, 55, 145, .10);
      --grid-bright: rgba(116, 64, 205, .25);
      --grid-glow-inner: rgba(139, 92, 246, .13);
      --grid-glow-outer: rgba(196, 181, 253, .08);
      --glass-highlight: rgba(255,255,255,.72);
    }

    * { box-sizing: border-box; }

    html {
      min-width: 320px;
      max-width: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: 112px;
      background: var(--bg);
      overflow-x: hidden;
      overflow-x: clip;
    }

    body {
      position: relative;
      min-height: 100vh;
      max-width: 100%;
      margin: 0;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(
          circle at 48% 46%,
          color-mix(in srgb, var(--primary) 25%, transparent) 0%,
          color-mix(in srgb, var(--primary) 12%, transparent) 24%,
          transparent 48%
        ),
        radial-gradient(
          ellipse at 50% 118%,
          color-mix(in srgb, var(--primary-2) 11%, transparent),
          transparent 46%
        ),
        linear-gradient(180deg, #090411 0%, var(--bg) 54%, #050209 100%);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transition: color .25s ease, background-color .25s ease;
      isolation: isolate;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,.42),
          transparent 18%,
          transparent 82%,
          rgba(0,0,0,.42)
        ),
        linear-gradient(
          180deg,
          rgba(0,0,0,.30),
          transparent 18%,
          transparent 75%,
          rgba(0,0,0,.46)
        );
      box-shadow: inset 0 0 150px rgba(0,0,0,.50);
    }


    html[data-theme="light"] body {
      background:
        radial-gradient(
          circle at 48% 43%,
          rgba(167, 139, 250, .22) 0%,
          rgba(216, 180, 254, .13) 23%,
          transparent 49%
        ),
        radial-gradient(
          ellipse at 50% 108%,
          rgba(124, 58, 237, .09),
          transparent 48%
        ),
        linear-gradient(
          180deg,
          #fbfaff 0%,
          #f5f0fd 48%,
          #eee8f8 100%
        );
    }

    html[data-theme="light"] body::after {
      background:
        linear-gradient(
          90deg,
          rgba(83, 49, 125, .055),
          transparent 17%,
          transparent 83%,
          rgba(83, 49, 125, .055)
        ),
        linear-gradient(
          180deg,
          rgba(255,255,255,.42),
          transparent 20%,
          transparent 78%,
          rgba(108, 75, 148, .065)
        );
      box-shadow:
        inset 0 0 150px rgba(98, 64, 138, .075),
        inset 0 1px 0 rgba(255,255,255,.72);
    }

    button, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; text-decoration: none; }
    button { color: inherit; }

    :where(a, button, select):focus-visible {
      outline: 3px solid color-mix(in srgb, var(--primary-2) 72%, white);
      outline-offset: 3px;
    }

    .sr-only {
      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;
    }

    #waveGrid {
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: .94;
      mask-image: none;
      -webkit-mask-image: none;
      transform: translateZ(0);
      will-change: contents;
    }

    html[data-theme="light"] #waveGrid {
      opacity: .54;
      mix-blend-mode: multiply;
    }

    html[data-theme="light"] .orb {
      opacity: .10;
      filter: blur(135px);
      mix-blend-mode: multiply;
    }

    html[data-theme="light"] .orb-a {
      background: #a78bfa;
    }

    html[data-theme="light"] .orb-b {
      background: #d8b4fe;
    }

    .orb {
      position: fixed;
      z-index: 0;
      width: min(48vw, 650px);
      aspect-ratio: 1;
      border-radius: 50%;
      filter: blur(110px);
      opacity: .15;
      pointer-events: none;
    }

    .orb-a {
      top: -24rem;
      left: -15rem;
      background: var(--primary);
      animation: orbA 17s ease-in-out infinite;
    }

    .orb-b {
      right: -20rem;
      bottom: -24rem;
      background: var(--primary-2);
      animation: orbB 20s ease-in-out infinite;
    }


    .store-shop-page > main,
    .store-shop-page > footer {
      position: relative;
      z-index: 1;
    }

    .store-shop-page > .toast {
      z-index: 100;
    }

    .site-header {
      position: sticky;
      top: 14px;
      z-index: 60;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      width: min(1220px, calc(100% - 28px));
      min-height: 72px;
      margin: 14px auto 0;
      padding: 11px 13px 11px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--header);
      box-shadow: var(--shadow);
      backdrop-filter: blur(22px);
    }


    html[data-theme="light"] .site-header {
      border-color: rgba(78, 48, 112, .13);
      background:
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,244,253,.75));
      box-shadow:
        0 20px 54px rgba(72, 42, 108, .11),
        inset 0 1px 0 rgba(255,255,255,.95);
      backdrop-filter: blur(24px) saturate(1.15);
    }

    html[data-theme="light"] .product-card-face {
      border-color: rgba(74, 43, 108, .13);
      background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(250,247,254,.78));
      box-shadow:
        0 18px 48px rgba(67, 38, 98, .10),
        inset 0 1px 0 rgba(255,255,255,.92);
      backdrop-filter: blur(20px) saturate(1.08);
    }

    html[data-theme="light"] .product-card-back {
      background:
        radial-gradient(
          circle at 88% 10%,
          color-mix(in srgb, var(--category-accent-2) 12%, transparent),
          transparent 36%
        ),
        linear-gradient(
          145deg,
          color-mix(in srgb, var(--category-accent) 6%, transparent),
          transparent 38%
        ),
        rgba(255,255,255,.96);
    }

    html[data-theme="light"] .product-card:hover {
      filter: drop-shadow(0 24px 36px rgba(78, 45, 112, .15));
    }

    html[data-theme="light"] .product-card.is-featured .product-card-face {
      border-color: color-mix(in srgb, var(--primary) 32%, rgba(74,43,108,.12));
      box-shadow:
        0 24px 62px color-mix(in srgb, var(--primary) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.96);
    }

    html[data-theme="light"] .price-box,
    html[data-theme="light"] .back-feature-list li,
    html[data-theme="light"] .feature-list li,
    html[data-theme="light"] .button-secondary,
    html[data-theme="light"] .billing-toggle,
    html[data-theme="light"] .select {
      background: rgba(255,255,255,.62);
      border-color: rgba(74,43,108,.12);
    }

    html[data-theme="light"] .tab:hover {
      background: rgba(124,58,237,.065);
    }

    html[data-theme="light"] .tab-icon {
      background: rgba(124,58,237,.065);
    }

    html[data-theme="light"] .tab.is-active .tab-icon {
      background: rgba(124,58,237,.11);
    }

    html[data-theme="light"] .free-entry,
    html[data-theme="light"] .empty-category {
      border-color: rgba(74,43,108,.12);
      background:
        radial-gradient(
          circle at 85% 25%,
          rgba(192,132,252,.13),
          transparent 36%
        ),
        linear-gradient(145deg, rgba(255,255,255,.91), rgba(248,244,253,.79));
      box-shadow:
        0 22px 58px rgba(67,38,98,.10),
        inset 0 1px 0 rgba(255,255,255,.92);
    }

    html[data-theme="light"] .store-home-footer.minimal-footer {
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    html[data-theme="light"] .category-heading::after {
      box-shadow: 0 0 16px color-mix(in srgb, var(--category-accent) 30%, transparent);
    }

    html[data-theme="light"] .product-section::before {
      opacity: .18;
      filter: blur(50px);
    }

    html[data-theme="light"] .hero-point,
    html[data-theme="light"] .eyebrow {
      background: rgba(255,255,255,.58);
      border-color: rgba(96,59,139,.13);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    .brand-logo {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
      overflow: hidden;
      border-radius: 15px;
    }

    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .logo-fallback {
      display: none;
      width: 100%;
      height: 100%;
      place-items: center;
      border-radius: inherit;
      color: white;
      background: linear-gradient(145deg, var(--primary), #3b0764);
      font-weight: 950;
    }

    .logo-error img { display: none; }
    .logo-error .logo-fallback { display: grid; }

    .brand-copy {
      display: grid;
      line-height: 1.08;
    }

    .brand-copy strong {
      font-size: .96rem;
      letter-spacing: -.025em;
    }

    .brand-copy small {
      margin-top: 4px;
      color: var(--muted);
      font-size: .71rem;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .control {
      position: relative;
      display: flex;
      align-items: center;
    }

    .select {
      min-height: 42px;
      padding: 0 34px 0 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--text);
      background: var(--input);
      outline: none;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      font-size: .74rem;
      font-weight: 850;
    }

    .control::after {
      content: "";
      position: absolute;
      right: 14px;
      width: 7px;
      height: 7px;
      border-right: 1.5px solid var(--muted);
      border-bottom: 1.5px solid var(--muted);
      transform: translateY(-2px) rotate(45deg);
      pointer-events: none;
    }

    .select option {
      color: #18111f;
      background: #fff;
    }

    .icon-button {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--input);
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .icon-button:hover {
      transform: translateY(-2px);
      border-color: var(--line-strong);
      background: var(--surface-hover);
    }

    .theme-icon {
      width: 18px;
      height: 18px;
    }

    .theme-icon .sun,
    html[data-theme="light"] .theme-icon .moon { display: none; }

    html[data-theme="light"] .theme-icon .sun { display: block; }

    .hero {
      width: min(980px, calc(100% - 32px));
      margin: 0 auto;
      padding: clamp(54px, 7vw, 82px) 0 clamp(42px, 5vw, 62px);
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 11px;
      border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
      border-radius: 999px;
      color: var(--primary-2);
      background: color-mix(in srgb, var(--primary) 10%, transparent);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .eyebrow i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--primary-2);
      box-shadow: 0 0 15px color-mix(in srgb, var(--primary-2) 85%, transparent);
      animation: pulse 1.8s ease-in-out infinite;
    }

    .hero h1 {
      max-width: 860px;
      margin: 17px auto 15px;
      font-size: clamp(2.65rem, 5.8vw, 5.15rem);
      line-height: .96;
      letter-spacing: -.058em;
      overflow-wrap: anywhere;
      hyphens: auto;
    }

    .gradient-text {
      color: transparent;
      background: linear-gradient(105deg, var(--text) 0%, var(--primary-2) 58%, var(--accent) 100%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    .hero-lead {
      max-width: 690px;
      margin: 0 auto;
      color: var(--muted);
      font-size: clamp(.94rem, 1.35vw, 1.07rem);
      line-height: 1.62;
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px;
      margin-top: 19px;
    }

    .hero-point {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: var(--surface);
      font-size: .75rem;
      font-weight: 800;
    }

    .hero-point::before {
      content: "✓";
      color: var(--success);
      font-weight: 950;
    }

    .product-section {
      --category-accent: #8b5cf6;
      --category-accent-2: #f0abfc;
      position: relative;
      width: min(1220px, calc(100% - 28px));
      margin: 0 auto;
      padding-bottom: 110px;
      isolation: isolate;
    }

    .product-section[data-category="websites"] {
      --category-accent: #8b5cf6;
      --category-accent-2: #f0abfc;
    }

    .product-section[data-category="mos"] {
      --category-accent: #22d3ee;
      --category-accent-2: #8b5cf6;
    }

    .product-section[data-category="growth"] {
      --category-accent: #f472b6;
      --category-accent-2: #c084fc;
    }

    .product-section[data-category="gaming"] {
      --category-accent: #f59e0b;
      --category-accent-2: #22d3ee;
    }

    .product-section::before {
      content: "";
      position: absolute;
      top: 110px;
      left: 50%;
      z-index: -1;
      width: min(760px, 78vw);
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        color-mix(in srgb, var(--category-accent) 20%, transparent),
        transparent 68%
      );
      opacity: .28;
      filter: blur(36px);
      transform: translateX(-50%) scale(.78);
      pointer-events: none;
      transition: background .45s ease;
    }

    .product-section.is-changing::before {
      animation: category-glow-pulse .72s cubic-bezier(.22,1,.36,1);
    }

    /* Header-integrated navigation area (merged into site-header) */
    .site-header .header-nav-area {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: color-mix(in srgb, var(--header) 72%, transparent);
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
      backdrop-filter: blur(12px);
    }

    /* show category tabs right-to-left so the most important categories can be ordered from right to left */
    .site-header .header-nav-area .category-tabs {
      display: flex;
      gap: 8px;
      flex-direction: row-reverse;
    }

    /* ensure the site-header centers the nav while keeping brand left and actions right */
    .site-header .brand { flex: 0 0 auto; }
    .site-header .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .site-header .header-nav-area .category-tabs-area { display: flex; align-items: center; gap: 10px; }

    /* make currency control sit closest to the right-side actions */
    .site-header .header-nav-area .category-currency { order: 1; }
    .site-header .header-nav-area .category-tabs { order: 0; }
    .site-header .header-nav-area .home-tab { order: -1; }

    .category-tabs-area {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 10px;
    }

    .category-tabs {
      position: relative;
      isolation: isolate;
      display: flex;
      flex: 1 1 auto;
      min-width: 0;
      gap: 7px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .category-currency {
      flex: 0 0 auto;
    }

    .category-currency .select {
      min-width: 94px;
      min-height: 38px;
      border-color: color-mix(in srgb, var(--category-accent) 28%, var(--line));
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--category-accent) 8%, transparent),
          var(--input)
        );
    }

    .tab-indicator {
      position: absolute;
      inset: 0 auto 0 0;
      z-index: -1;
      width: 0;
      border: 1px solid color-mix(in srgb, var(--category-accent-2) 42%, transparent);
      border-radius: 999px;
      background:
        linear-gradient(135deg, var(--category-accent), var(--category-accent-2));
      box-shadow:
        0 12px 28px color-mix(in srgb, var(--category-accent) 30%, transparent),
        inset 0 1px 0 rgba(255,255,255,.26);
      opacity: 0;
      transform: translateX(0);
      transition:
        width .46s cubic-bezier(.22,1,.36,1),
        transform .46s cubic-bezier(.22,1,.36,1),
        background .35s ease,
        box-shadow .35s ease,
        opacity .2s ease;
      pointer-events: none;
    }

    .tab-indicator.is-ready {
      opacity: 1;
    }

    .category-tabs::-webkit-scrollbar { display: none; }

    .tab {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 16px;
      border: 1px solid transparent;
      border-radius: 999px;
      color: var(--muted);
      background: transparent;
      white-space: nowrap;
      cursor: pointer;
      font-size: .78rem;
      font-weight: 900;
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }

    .tab:hover {
      color: var(--text);
      background: var(--surface);
    }

    .tab.is-active {
      color: var(--primary-2);
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    .tab-icon {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 8px;
      color: var(--muted);
      background: var(--surface);
      font-size: .78rem;
      font-weight: 950;
      transition:
        color .3s ease,
        background .3s ease,
        transform .38s cubic-bezier(.22,1,.36,1);
    }

    .tab.is-active .tab-icon {
      color: var(--primary-2);
      background: rgba(255,255,255,.17);
      transform: rotate(-7deg) scale(1.08);
    }

    .home-tab {
      flex: 0 0 auto;
      border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
      color: var(--text);
      background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    }

    .home-tab:hover {
      border-color: color-mix(in srgb, var(--primary-2) 42%, var(--line));
      background: color-mix(in srgb, var(--primary) 17%, var(--surface));
    }

    .home-tab .tab-icon {
      color: var(--primary-2);
      background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    }

    .product-actions-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      min-height: 52px;
      margin: 0 4px 18px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--category-accent) 6%, transparent),
          transparent 48%
        ),
        var(--surface);
      box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
      backdrop-filter: blur(14px);
      width: max-content;
      max-width: calc(100% - 8px);
    }

    .pricing-tools {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .billing-toggle {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border: 0;
      border-radius: 14px;
      background: transparent;
    }

    .billing-option {
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid transparent;
      border-radius: 11px;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      font-size: .71rem;
      font-weight: 900;
    }

    .billing-option.is-active {
      color: white;
      border-color: color-mix(in srgb, var(--category-accent-2) 34%, transparent);
      background:
        linear-gradient(135deg, var(--category-accent), var(--category-accent-2));
      box-shadow:
        0 8px 20px color-mix(in srgb, var(--category-accent) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,.20);
    }

    .category-heading {
      position: relative;
      display: block;
      margin: 0 4px 24px;
    }

    .category-heading::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -12px;
      width: 72px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--category-accent), var(--category-accent-2));
      box-shadow: 0 0 20px color-mix(in srgb, var(--category-accent) 48%, transparent);
      transform-origin: left center;
      transition: background .35s ease, box-shadow .35s ease;
    }

    .category-heading h2 {
      margin: 0 0 7px;
      font-size: clamp(1.9rem, 4vw, 3.4rem);
      line-height: 1;
      letter-spacing: -.05em;
    }

    .category-heading p {
      max-width: 680px;
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }


    .product-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px;
      perspective: 1200px;
    }

    .product-grid::after {
      content: "";
      position: absolute;
      inset: -14px;
      z-index: -1;
      border-radius: 34px;
      border: 1px solid transparent;
      background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--category-accent) 20%, transparent), transparent)
        border-box;
      opacity: 0;
      pointer-events: none;
    }

    .product-section.is-changing .product-grid::after {
      animation: category-scan .72s cubic-bezier(.22,1,.36,1);
    }

    .product-card {
      position: relative;
      height: 610px;
      perspective: 1500px;
      transform-style: preserve-3d;
      transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        filter .28s ease;
    }

    .product-card:hover {
      transform: translateY(-8px);
      filter: drop-shadow(0 28px 48px rgba(0,0,0,.18));
    }

    .product-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 820ms cubic-bezier(.22,1,.36,1);
      will-change: transform;
    }

    .product-card.is-flipped .product-card-inner {
      transform: rotateY(180deg);
    }

    .product-card-face {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 26px;
      background:
        linear-gradient(145deg, color-mix(in srgb, white 7%, transparent), transparent 30%),
        var(--panel);
      box-shadow: 0 22px 62px rgba(0, 0, 0, .17);
      backdrop-filter: blur(18px);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
    }

    .product-card-face[inert] {
      pointer-events: none;
    }

    .product-card-face::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 8;
      border-radius: inherit;
      background:
        linear-gradient(
          110deg,
          transparent 28%,
          rgba(255,255,255,.14) 48%,
          transparent 68%
        );
      opacity: 0;
      transform: translateX(-130%);
      pointer-events: none;
    }

    .product-card.is-flipped .product-card-face::after {
      animation: flip-light 820ms ease both;
    }

    .product-card-front {
      z-index: 2;
    }

    .product-card-back {
      transform: rotateY(180deg) translateZ(1px);
      background:
        radial-gradient(
          circle at 88% 10%,
          color-mix(in srgb, var(--category-accent-2) 17%, transparent),
          transparent 34%
        ),
        linear-gradient(
          145deg,
          color-mix(in srgb, var(--category-accent) 10%, transparent),
          transparent 34%
        ),
        var(--panel-solid);
    }

    .product-card.is-featured .product-card-face {
      border-color: color-mix(in srgb, var(--primary-2) 50%, transparent);
      box-shadow: 0 26px 74px color-mix(in srgb, var(--primary) 18%, transparent);
    }

    .product-card.is-featured .product-card-face::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      border-radius: inherit;
      background:
        linear-gradient(
          140deg,
          color-mix(in srgb, var(--primary) 24%, transparent),
          transparent 42%
        );
    }

    .back-header {
      position: relative;
      padding: 22px 22px 17px;
      border-bottom: 1px solid var(--line);
    }

    .back-header::after {
      content: "";
      position: absolute;
      right: 20px;
      bottom: -1px;
      width: 76px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        var(--category-accent),
        var(--category-accent-2)
      );
      box-shadow:
        0 0 20px color-mix(in srgb, var(--category-accent) 52%, transparent);
    }

    .back-header h3 {
      margin: 13px 0 7px;
    }

    .back-description {
      margin: 0;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.55;
    }


    .back-content {
      display: flex;
      flex: 1;
      min-height: 0;
      flex-direction: column;
      padding: 17px 22px 21px;
    }

    .back-section-label {
      display: block;
      margin-bottom: 10px;
      color: var(--category-accent-2);
      font-size: .66rem;
      font-weight: 950;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .back-feature-list {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0 4px 4px 0;
      overflow-y: auto;
      list-style: none;
      scrollbar-width: thin;
      scrollbar-color:
        color-mix(in srgb, var(--category-accent) 45%, transparent)
        transparent;
    }

    .back-feature-list li {
      position: relative;
      padding: 10px 11px 10px 35px;
      border: 1px solid var(--line);
      border-radius: 14px;
      color: var(--muted);
      background: var(--surface);
      font-size: .76rem;
      line-height: 1.42;
    }

    .back-feature-list li::before {
      content: "✓";
      position: absolute;
      top: 9px;
      left: 11px;
      display: grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border-radius: 6px;
      color: white;
      background:
        linear-gradient(
          135deg,
          var(--category-accent),
          var(--category-accent-2)
        );
      font-size: .62rem;
      font-weight: 950;
    }

    .back-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: auto;
      padding-top: 16px;
    }

    .flip-back {
      gap: 8px;
    }

    .flip-back::before {
      content: "↶";
      font-size: 1rem;
    }

    @keyframes flip-light {
      0%, 20% {
        opacity: 0;
        transform: translateX(-130%);
      }
      45% {
        opacity: .85;
      }
      72%, 100% {
        opacity: 0;
        transform: translateX(130%);
      }
    }

    .card-top {
      padding: 22px 22px 18px;
      border-bottom: 1px solid var(--line);
    }

    .card-badges {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 26px;
      margin-bottom: 18px;
    }

    .product-type,
    .popular-badge {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: .66rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .product-type {
      border: 1px solid var(--line);
      color: var(--muted);
      background: var(--surface);
    }

    .popular-badge {
      color: white;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 28%, transparent);
    }

    .product-card h3 {
      margin: 0 0 9px;
      font-size: 1.35rem;
      letter-spacing: -.035em;
    }

    .product-description {
      min-height: 63px;
      margin: 0;
      color: var(--muted);
      font-size: .87rem;
      line-height: 1.55;
    }

    .price-box {
      padding: 19px 22px;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--primary) 4%, transparent);
    }

    .price-label {
      display: block;
      margin-bottom: 6px;
      color: var(--soft);
      font-size: .67rem;
      font-weight: 850;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .setup-price {
      display: flex;
      align-items: baseline;
      gap: 7px;
      margin-bottom: 11px;
    }

    .setup-price strong {
      font-size: 2rem;
      line-height: 1;
      letter-spacing: -.055em;
    }

    .setup-price small,
    .recurring-price small {
      color: var(--muted);
      font-size: .7rem;
      font-weight: 750;
    }

    .recurring-price {
      display: flex;
      align-items: baseline;
      gap: 5px;
      color: var(--primary-2);
    }

    .recurring-price strong {
      font-size: 1.12rem;
    }

    .annual-note {
      display: block;
      min-height: 17px;
      margin-top: 7px;
      color: var(--soft);
      font-size: .66rem;
    }

    .card-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 19px 22px 22px;
    }

    .feature-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .feature-list li {
      position: relative;
      padding-left: 34px; /* room for icon */
      color: var(--muted);
      font-size: .79rem;
      line-height: 1.45;
    }

    .feature-list li::before {
      content: "✓";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      color: white;
      background: linear-gradient(135deg, var(--category-accent), var(--category-accent-2));
      box-shadow: 0 8px 20px color-mix(in srgb, var(--category-accent) 22%, transparent);
      font-size: .68rem;
      font-weight: 900;
    }

    .card-actions {
      display: grid;
      gap: 8px;
      margin-top: auto;
      padding-top: 22px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 16px;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      font-size: .78rem;
      font-weight: 900;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }

    .button:hover { transform: translateY(-2px); }
    .button:active { transform: scale(.98); }

    .button-primary {
      color: white;
      background: linear-gradient(135deg, var(--primary), var(--primary-2) 58%, var(--accent));
      box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 28%, transparent);
    }

    .button-secondary {
      border-color: var(--line);
      background: var(--surface);
    }

    .free-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      margin-top: 46px;
      padding: clamp(24px, 4vw, 42px);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 30px;
      background:
        radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--primary-2) 18%, transparent), transparent 34%),
        var(--panel);
      box-shadow: var(--shadow);
    }

    .free-entry h2 {
      margin: 0 0 9px;
      font-size: clamp(1.65rem, 4vw, 3rem);
      letter-spacing: -.05em;
    }

    .free-entry p {
      max-width: 720px;
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .empty-category {
      grid-column: 1 / -1;
      margin: 0;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: 24px;
      color: var(--muted);
      background: var(--panel);
      text-align: center;
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: min(1220px, calc(100% - 28px));
      margin: 0 auto 26px;
      padding: 21px 24px;
      border: 1px solid var(--line);
      border-radius: 24px;
      color: var(--muted);
      background: var(--panel);
      font-size: .75rem;
      backdrop-filter: blur(18px);
    }

    .footer strong { color: var(--text); }

    /* Mirrors the centered footer component used on the main MWS homepage,
       while remaining fully isolated from public/assets/css/main.css. */
    .store-home-footer {
      width: min(1220px, calc(100% - 28px));
      margin: 0 auto 26px;
      color: var(--muted);
      font-size: .92rem;
    }

    .store-home-footer.minimal-footer {
      position: relative;
      display: grid;
      gap: 18px;
      padding: 18px 0 24px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .store-home-footer.minimal-footer::before {
      content: none;
    }

    .store-home-footer.minimal-footer > * {
      position: relative;
      z-index: 1;
    }

    .store-home-footer .footer-grid {
      display: grid;
      gap: 24px;
      width: 100%;
    }

    .store-home-footer .footer-grid-centered {
      grid-template-columns: minmax(0, 760px);
      justify-content: center;
    }

    .store-home-footer .footer-brand,
    .store-home-footer .footer-links {
      display: grid;
      gap: 12px;
    }

    .store-home-footer .footer-brand-centered {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }

    .store-home-footer .footer-logo {
      width: auto;
      height: 48px;
      margin-top: 1rem;
      object-fit: contain;
      filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--primary) 18%, transparent));
    }

    .store-home-footer .footer-brand p {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .store-home-footer .footer-links-centered {
      justify-items: center;
      text-align: center;
    }

    .store-home-footer .footer-link-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 20px;
    }

    .store-home-footer .footer-links a {
      width: max-content;
      max-width: 100%;
      padding-block: 4px;
      color: var(--muted);
      font-weight: 700;
      transition: color .2s ease;
    }

    .store-home-footer .footer-links a:hover {
      color: var(--text);
    }

    .store-home-footer .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 18px;
      border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    }

    .store-home-footer .footer-bottom-centered {
      justify-content: center;
      text-align: center;
    }

    .store-home-footer .footer-meta {
      color: var(--muted);
      font-size: .88rem;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 250;
      max-width: min(360px, calc(100% - 36px));
      padding: 13px 15px;
      border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
      border-radius: 16px;
      color: var(--text);
      background: var(--panel-solid);
      box-shadow: var(--shadow);
      font-size: .78rem;
      font-weight: 800;
      opacity: 0;
      transform: translateY(18px);
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
    }

    .toast.is-visible {
      opacity: 1;
      transform: translateY(0);
    }


    @keyframes category-glow-pulse {
      0% {
        opacity: .18;
        transform: translateX(-50%) scale(.72);
      }
      48% {
        opacity: .58;
        transform: translateX(-50%) scale(1.08);
      }
      100% {
        opacity: .28;
        transform: translateX(-50%) scale(.78);
      }
    }

    @keyframes category-scan {
      0% {
        opacity: 0;
        transform: translateX(-14px) scale(.98);
      }
      45% {
        opacity: .85;
      }
      100% {
        opacity: 0;
        transform: translateX(14px) scale(1.01);
      }
    }

    @keyframes shop-card-enter {
      from {
        opacity: 0;
        transform: perspective(1200px) rotateY(-82deg) scaleX(.18) translateX(-22px);
        clip-path: inset(0 100% 0 0 round 26px);
        filter: blur(8px);
      }
      to {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg) scaleX(1) translateX(0);
        clip-path: inset(0 0 0 0 round 26px);
        filter: blur(0);
      }
    }

    .product-card.is-fallback-entering {
      transform-origin: left center;
      animation: shop-card-enter 720ms cubic-bezier(.16,1,.3,1) both;
      animation-delay: 80ms;
    }

    .product-card.is-fallback-entering:nth-child(2) { animation-delay: 205ms; }
    .product-card.is-fallback-entering:nth-child(3) { animation-delay: 330ms; }
    .product-card.is-fallback-entering:nth-child(4) { animation-delay: 455ms; }

    @keyframes pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50% { opacity: .55; transform: scale(1.45); }
    }

    @keyframes orbA {
      0%,100% { transform: translate3d(0,0,0) scale(1); }
      45% { transform: translate3d(95px,75px,0) scale(1.13); }
      75% { transform: translate3d(20px,145px,0) scale(.93); }
    }

    @keyframes orbB {
      0%,100% { transform: translate3d(0,0,0) scale(1); }
      40% { transform: translate3d(-110px,-60px,0) scale(.92); }
      72% { transform: translate3d(-30px,-135px,0) scale(1.14); }
    }

    @media (max-width: 1080px) {
      .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .product-card { height: 585px; }
    }

    @media (max-width: 800px) {
      .brand-copy small { display: none; }
      .product-toolbar {
        top: 92px;
        grid-template-columns: 1fr;
      }

      .category-tabs-area {
        width: 100%;
      }

      .product-actions-row {
        width: max-content;
      }

      .pricing-tools {
        justify-content: flex-start;
      }
      .free-entry {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .site-header {
        top: 8px;
        width: calc(100% - 16px);
        min-height: 64px;
        margin-top: 8px;
        padding: 8px 9px 8px 11px;
      }

      .brand-logo {
        width: 42px;
        height: 42px;
      }

      .brand-copy {
        display: none;
      }

      .header-actions { gap: 5px; }
      .select {
        min-height: 39px;
        padding-left: 11px;
        padding-right: 29px;
        font-size: .7rem;
      }
      .icon-button { width: 39px; height: 39px; }
      .hero {
        width: calc(100% - 24px);
        padding: 48px 0 40px;
      }

      .hero h1 {
        max-width: 100%;
        margin-top: 14px;
        font-size: clamp(2.2rem, 11vw, 3.25rem);
      }

      .hero-lead {
        font-size: .92rem;
        line-height: 1.58;
      }

      .hero-points {
        margin-top: 16px;
      }
      .product-section,
      .footer {
        width: calc(100% - 16px);
      }
      .tab {
        padding-inline: 12px;
      }

      .tab-icon {
        width: 22px;
        height: 22px;
      }

      .category-tabs-area {
        align-items: stretch;
        flex-direction: column;
      }

      .home-tab {
        align-self: flex-start;
      }

      .category-currency {
        align-self: flex-end;
      }

      .category-currency .select {
        width: 104px;
      }

      .product-toolbar {
        top: 80px;
        margin-bottom: 22px;
        padding: 9px;
        border-radius: 20px;
      }
      .product-actions-row {
        width: calc(100% - 8px);
        align-items: stretch;
        flex-direction: column;
        gap: 5px;
        padding: 6px;
      }

      .pricing-tools {
        width: 100%;
      }

      .billing-toggle {
        width: 100%;
      }

      .billing-option {
        flex: 1;
      }

      .category-currency {
        width: 100%;
      }

      .category-currency .select {
        width: 100%;
      }

      .product-grid { grid-template-columns: 1fr; }
      .product-card { height: 590px; }
      .product-description { min-height: 0; }
      .footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .store-home-footer {
        width: calc(100% - 16px);
      }

      .store-home-footer.minimal-footer {
        padding: 16px 0 22px;
      }

      .store-home-footer .footer-link-row {
        width: 100%;
        flex-direction: column;
        align-items: center;
      }
    }


    @media (max-width: 420px) {
      .product-card {
        height: 620px;
      }

      .back-actions {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 390px) {
      #languageSelect { width: 78px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }

      .product-card-inner {
        transition: none !important;
      }
    }


/* MWS V17: gemeinsame Frontgröße / Footer übernimmt front-wave.css */
.store-shop-page.mws-wave-page #waveGrid,
.store-shop-page.mws-wave-page .orb {
    display: none !important;
}

.store-shop-page.mws-wave-page .site-header {
    min-height: var(--mws-front-header-height, 72px) !important;
}


/* ================================================================
   MWS MINIMAL NEWSLETTER V21
   ================================================================ */

.store-shop-page main#top {
    padding-top: clamp(26px, 4vw, 48px);
}

.newsletter-entry {
    width: min(900px, 100%);
    min-height: 0;
    margin: clamp(34px, 5vw, 54px) auto 0;
    padding: 16px 18px;
    grid-template-columns: minmax(0, .8fr) minmax(330px, 1.2fr);
    gap: 20px;
    align-items: center;
}

.newsletter-copy { display: grid; gap: 5px; }

.newsletter-label {
    color: var(--primary-2);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.newsletter-entry h2 {
    margin: 0;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    line-height: 1.1;
}

.newsletter-entry p {
    margin: 0;
    color: var(--muted);
    font-size: .70rem;
    line-height: 1.45;
}

.newsletter-form {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.newsletter-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: 0;
    color: var(--text);
    background: var(--input);
    font-size: .70rem;
}

.newsletter-field input:focus {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.newsletter-field input::placeholder { color: var(--soft); }

.newsletter-submit {
    min-width: 110px;
    min-height: 42px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: .68rem;
}

.newsletter-submit:disabled { cursor: wait; opacity: .58; }

.newsletter-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 720px) {
    .newsletter-entry {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .newsletter-form { grid-template-columns: 1fr; }
    .newsletter-submit { width: 100%; }
}

/* ========================================================================
   MWS STORE PRE-LAUNCH POLISH 2026-08-29
   Keeps the existing product design, improves hierarchy and launch clarity.
   ======================================================================== */
.product-card-face {
  border-color: color-mix(in srgb, var(--category-accent) 16%, var(--line));
}

.product-card-front::before {
  content: "";
  position: absolute;
  inset: 0 22px auto;
  z-index: 3;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--category-accent), var(--category-accent-2), transparent);
  opacity: .7;
  pointer-events: none;
}

.product-card.is-featured .product-card-front::before {
  height: 3px;
  opacity: 1;
  box-shadow: 0 7px 22px color-mix(in srgb, var(--category-accent) 34%, transparent);
}

.setup-price strong {
  color: var(--text);
  font-size: 2.18rem;
}

.recurring-price {
  padding-top: 2px;
}

.feature-list li {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}

.store-social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 11px;
}

.store-social-row a {
  display: inline-flex;
  min-height: 34px;
  padding: 6px 11px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: .72rem;
  font-weight: 850;
}

.store-social-row a:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
}

/* ========================================================================
   MWS STORE PRODUCT MODEL 2026-08-30
   Three public product tiers per category; TRY is the catalogue base price.
   ======================================================================== */
@media (min-width: 1081px) {
  .store-shop-page .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1240px;
    margin-inline: auto;
  }
}

.store-shop-page .tier-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--surface);
}

.store-shop-page .tier-badge.tier-silver {
  color: color-mix(in srgb, var(--text) 78%, #aeb7c4);
  border-color: color-mix(in srgb, #b8c0cc 46%, var(--line));
  background: color-mix(in srgb, #cbd2dc 8%, var(--surface));
}

.store-shop-page .tier-badge.tier-gold {
  color: color-mix(in srgb, #f6c85f 78%, var(--text));
  border-color: color-mix(in srgb, #d8a938 54%, var(--line));
  background: color-mix(in srgb, #d8a938 9%, var(--surface));
}

.store-shop-page .tier-badge.tier-diamond {
  color: color-mix(in srgb, #8cc8ff 72%, var(--text));
  border-color: color-mix(in srgb, #9fd4ff 48%, var(--line));
  background: color-mix(in srgb, #9fd4ff 9%, var(--surface));
}

.store-shop-page .product-card.is-tier-gold .product-card-face {
  border-color: color-mix(in srgb, #d8a938 28%, var(--line));
}

@media (max-width: 620px) {
  .store-shop-page .card-badges {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}