:root {
      --black: #090909;
      --ink: #151515;
      --text: #242424;
      --muted: #686868;
      --line: #e8e3d8;
      --soft: #f7f5ef;
      --paper: #fffdf8;
      --yellow: #e11924;
      --yellow-dark: #b8121c;
      --red: #e11924;
      --green: #17884f;
      --radius: 18px;
      --shadow: 0 20px 48px rgba(18,18,18,.09);
      --shadow-soft: 0 10px 30px rgba(18,18,18,.06);
      font-family: Inter, Arial, sans-serif;
      color: var(--text);
      background: #fff;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        linear-gradient(115deg, transparent 0 12%, rgba(225,25,36,.045) 12% 12.45%, transparent 12.45% 100%),
        linear-gradient(115deg, transparent 0 78%, rgba(9,9,9,.04) 78% 78.45%, transparent 78.45% 100%),
        repeating-linear-gradient(135deg, rgba(225,25,36,.032) 0 1px, transparent 1px 20px),
        #fff;
      background-attachment: fixed;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        linear-gradient(115deg, transparent 0 8%, rgba(225,25,36,.075) 8% 8.45%, transparent 8.45% 100%),
        linear-gradient(115deg, transparent 0 88%, rgba(9,9,9,.045) 88% 88.35%, transparent 88.35% 100%),
        linear-gradient(0deg, transparent 0 calc(100% - 1px), rgba(225,25,36,.05) calc(100% - 1px) 100%);
      background-size: 100% 100%, 100% 100%, 100% 180px;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        linear-gradient(135deg, transparent 0 18%, rgba(225,25,36,.045) 18% 18.18%, transparent 18.18% 100%),
        linear-gradient(135deg, transparent 0 42%, rgba(9,9,9,.035) 42% 42.16%, transparent 42.16% 100%),
        linear-gradient(135deg, transparent 0 66%, rgba(225,25,36,.035) 66% 66.14%, transparent 66.14% 100%);
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }

    .wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
    .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; }
    .is-hidden { display: none !important; }
    #saveDeliveryAddress[hidden] { display: none; }

    /* Полноэкранный просмотр фото существует только на телефонах.
       На ПК его элементы не должны попадать в обычный поток страницы. */
    .product-image-viewer { display: none; }

    header {
      z-index: 30;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      height: 92px;
      display: grid;
      grid-template-columns: 170px 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .logo img { width: 128px; height: 78px; object-fit: contain; }

    .nav-links {
      display: flex;
      gap: 30px;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      color: var(--ink);
      text-transform: uppercase;
    }

    .nav-links a, .nav-tab { position: relative; }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 4px;
      border-radius: 999px;
      background: var(--yellow);
      transform: scaleX(0);
      transition: transform .18s ease;
    }
    .nav-links a:hover::after,
    .nav-links a.active::after,
    .nav-links a.active-page::after { transform: scaleX(1); }

    .nav-links a.active,
    .nav-links a.active-page {
      color: var(--red);
    }

    .nav-links .nav-tab.active {
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid var(--red);
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      box-shadow: 0 12px 24px rgba(225,25,36,.18);
    }

    .nav-links .nav-tab.active::after {
      display: none;
    }

    .nav-actions { display: flex; gap: 10px; align-items: center; }

    .icon-button,
    .nav-tab,
    .btn {
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 16px;
      font-weight: 900;
      transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .icon-button { min-width: 44px; padding: 0 13px; position: relative; }
    .icon-button svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .btn:hover, .nav-tab:hover, .icon-button:hover { transform: translateY(-2px); border-color: #d3c8b3; box-shadow: var(--shadow-soft); }
    .btn:active, .nav-tab:active, .icon-button:active, .chip:active, .add:active, .details-button:active { transform: translateY(0) scale(.98); }
    .btn:disabled, .add:disabled, button:disabled {
      cursor: not-allowed;
      opacity: .52;
      transform: none !important;
      box-shadow: none !important;
    }
    .btn.dark { background: var(--black); color: #fff; border-color: var(--black); box-shadow: 0 12px 24px rgba(0,0,0,.14); }
    .btn.yellow, .nav-tab.active {
      background:
        linear-gradient(135deg, rgba(255,255,255,.16), transparent 38%),
        var(--yellow);
      border-color: var(--yellow);
      color: #fff;
      box-shadow: 0 10px 22px rgba(225,25,36,.16);
    }
    .cart-count,
    .badge,
    .circle-arrow,
    .label,
    .checkout-progress span.active,
    .step-number,
    .checkout-summary-head b,
    .avatar,
    .mobile-nav-btn.active {
      color: #fff;
    }
    .hero-actions .btn.yellow, .promo.dark .btn.yellow { animation: softPulse 3.4s ease-in-out infinite; }

    @keyframes fadeUp {
      from { opacity: .78; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes softPulse {
      0%, 100% { box-shadow: 0 12px 24px rgba(0,0,0,.14); }
      50% { box-shadow: 0 18px 34px rgba(225,25,36,.26); }
    }
    @keyframes toastIn {
      from { opacity: 0; transform: translate(-50%, 18px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }
    @keyframes shineSweep {
      from { transform: translateX(-120%) skewX(-18deg); }
      to { transform: translateX(220%) skewX(-18deg); }
    }
    @keyframes cartIconWiggle {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      28% { transform: translateY(-2px) rotate(-7deg); }
      58% { transform: translateY(1px) rotate(5deg); }
    }
    @keyframes cartTotalPop {
      0%, 100% { transform: scale(1); }
      45% { transform: scale(1.08); }
    }

    .hero > *, .benefits, .categories, .promo-row, .service-strip, .info-grid, .catalog-layout {
      animation: fadeUp .32s ease both;
    }
    .benefits { animation-delay: .03s; }
    .categories { animation-delay: .05s; }
    .promo-row { animation-delay: .06s; }
    .service-strip { animation-delay: .07s; }
    .catalog-layout { animation-delay: .08s; }

    .chip, .choice, .payment, .add, .details-button, .contact-actions a, footer a {
      transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
    }
    .chip:hover, .choice:hover, .payment:hover, .contact-actions a:hover {
      transform: translateY(-2px);
      border-color: #d4c7ad;
      box-shadow: var(--shadow-soft);
    }
    .add:hover { background: #c91520; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(225,25,36,.2); }
    .add.preorder-add:hover { background: #181818; box-shadow: 0 12px 24px rgba(0,0,0,.22); }
    .qty button:hover { background: var(--soft); }

    .cart-count {
      position: absolute;
      right: -5px;
      top: -7px;
      min-width: 22px;
      height: 22px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--yellow);
      color: var(--black);
      font-size: 12px;
      font-weight: 950;
      border: 2px solid #fff;
    }

    .user-pill {
      display: none;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0 14px;
      background: #fff;
      font-weight: 900;
    }

    .user-pill span {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--yellow);
      color: var(--black);
    }
    .compact-label { display: none; }

    .page { display: none; }
    .page.active { display: block; }
    .catalog-page-head { display: none; }
    .home-page #catalog { display: none; }
    .catalog-page .catalog-view > .hero,
    .catalog-page .catalog-view > .benefits,
    .catalog-page #categories,
    .catalog-page #offers,
    .catalog-page #about,
    .catalog-page #contacts {
      display: none;
    }
    .catalog-page #catalog {
      padding-top: 44px;
      min-height: 760px;
    }
    .catalog-page .catalog-page-head {
      display: block;
      max-width: 820px;
      margin-bottom: 24px;
    }
    .catalog-page .catalog-page-head h1 {
      max-width: 780px;
      font-size: clamp(38px, 5vw, 64px);
    }
    .catalog-page .catalog-page-head p {
      max-width: 680px;
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.5;
      font-weight: 800;
    }

    .hero {
      position: relative;
      min-height: 540px;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 36px;
      align-items: center;
      padding: 34px 0 42px;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      left: -84px;
      top: 72px;
      width: 144px;
      height: 250px;
      border-left: 10px solid rgba(225,25,36,.14);
      border-top: 10px solid rgba(225,25,36,.14);
      transform: skewX(-16deg);
      z-index: -1;
    }

    .hero::after {
      content: "";
      position: absolute;
      right: -8%;
      top: 60px;
      width: 58%;
      height: 420px;
      background:
        repeating-linear-gradient(135deg, rgba(225,25,36,.05) 0 1px, transparent 1px 18px),
        linear-gradient(90deg, rgba(255,255,255,.08), #f4f1e8);
      border-radius: 28px 0 0 28px;
      z-index: -1;
    }

    .badge {
      width: max-content;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      background: var(--yellow);
      color: var(--black);
      font-size: 13px;
      font-weight: 950;
      margin-bottom: 22px;
      box-shadow: 0 10px 22px rgba(225,25,36,.18);
    }

    h1 {
      margin: 0;
      max-width: 620px;
      font-size: clamp(42px, 5vw, 70px);
      line-height: .98;
      letter-spacing: 0;
      color: var(--black);
      text-transform: uppercase;
    }

    h1 .yellow { color: var(--yellow-dark); }

    .hero p {
      margin: 22px 0 0;
      max-width: 500px;
      color: #4b4b4b;
      font-size: 18px;
      line-height: 1.55;
      font-weight: 650;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

    .hero-products {
      min-height: 430px;
      display: grid;
      align-items: end;
      overflow: hidden;
      border-radius: 0 0 0 34px;
      box-shadow: 0 24px 70px rgba(0,0,0,.08);
    }

    .hero-products img {
      width: 100%;
      height: 430px;
      object-fit: cover;
      object-position: center right;
    }

    .pack-art {
      width: 92px;
      height: 140px;
      border-radius: 16px;
      border: 5px solid var(--black);
      background: linear-gradient(140deg, #fff 0 33%, var(--yellow) 33% 50%, var(--red) 50% 66%, var(--black) 66% 100%);
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 950;
      text-align: center;
      line-height: 1;
      padding: 10px;
    }

    .benefits {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin: 10px auto 34px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
    }

    .benefit {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: start;
    }

    .benefit-icon {
      width: 42px;
      height: 42px;
      border: 2px solid var(--black);
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: #fff;
      font-weight: 950;
      color: var(--yellow-dark);
    }
    .benefit-icon svg, .service-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .benefit b { display: block; color: var(--black); font-size: 14px; }
    .benefit span { color: var(--muted); font-size: 12px; line-height: 1.35; }

    section { padding: 28px 0; position: relative; }
    .section-title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      width: 100%;
      max-width: min(100%, 920px);
      text-align: center;
      margin: 0 auto 24px;
      color: var(--black);
      font-size: 30px;
      line-height: 1.08;
      text-transform: uppercase;
    }
    .section-title::before,
    .section-title::after {
      content: "";
      position: static;
      flex: 0 1 clamp(36px, 8vw, 96px);
      min-width: 36px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--red));
    }
    .section-title::after {
      background: linear-gradient(90deg, var(--red), transparent);
    }

    .categories {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .category {
      min-height: 236px;
      border: 1px solid #d9d9d9;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.045) 0 1px, transparent 1px 44px),
        #fff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .category::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--red), var(--black));
      opacity: .9;
    }
    .category:hover { transform: translateY(-4px); border-color: #d4c7ad; box-shadow: var(--shadow); }

    .category-visual {
      height: 158px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, #f7fbff, #fff);
      border-radius: 14px;
      overflow: hidden;
      padding: 4px;
    }
    .category-visual img { width: 112%; height: 112%; object-fit: contain; mix-blend-mode: multiply; }
    .category-visual img[src*="category-icons/"] {
      width: auto;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      object-position: center center;
      mix-blend-mode: normal;
    }
    .category-visual img[src^="https://"] {
      width: 100%;
      height: 100%;
      object-fit: contain;
      mix-blend-mode: normal;
    }

    .category b { color: var(--black); font-size: 16px; line-height: 1.2; min-height: 38px; display: flex; align-items: flex-end; }
    .circle-arrow {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--yellow);
      display: grid;
      place-items: center;
      margin-left: auto;
      font-weight: 950;
      transition: transform .18s ease, background .18s ease, color .18s ease;
    }
    .circle-arrow img {
      width: 16px;
      height: 16px;
      display: block;
      filter: brightness(0) invert(1);
    }
    .category:hover .circle-arrow { transform: translateX(2px); background: var(--black); color: #fff; }
    .promo-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    .promo-row-single { grid-template-columns: 1fr; }

    .promo {
      min-height: 240px;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px;
      overflow: hidden;
      position: relative;
      background: #fff;
      box-shadow: var(--shadow-soft);
    }
    .promo::before,
    .info-card::before,
    .service-strip::before,
    .checkout-step::before,
    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg, transparent 0 82%, rgba(225,25,36,.08) 82% 82.4%, transparent 82.4% 100%);
    }

    .promo.dark {
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 20px),
        linear-gradient(135deg, #050505, #151515);
      color: #fff;
    }

    .promo h3 { margin: 0; font-size: 28px; line-height: 1.1; text-transform: uppercase; }
    .promo p { max-width: 360px; color: var(--muted); line-height: 1.45; }
    .promo.dark p { color: rgba(255,255,255,.72); }
    .percent { position: absolute; right: 38px; bottom: 18px; font-size: 130px; color: var(--yellow); font-weight: 950; line-height: .8; }
    .percent::after {
      content: "";
      position: absolute;
      inset: 10% -12%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent);
      animation: shineSweep 5s ease-in-out infinite;
    }

    .brand-cloud {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      align-content: center;
    }

    .brand-chip {
      position: relative;
      overflow: hidden;
      min-height: 48px;
      border: 1px solid transparent;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: #fff;
      padding: 8px 12px;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .brand-chip::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--red), var(--black));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .18s ease;
    }
    .brand-chip:hover { transform: translateY(-3px); border-color: rgba(225,25,36,.22); box-shadow: var(--shadow-soft); }
    .brand-chip:hover::before { transform: scaleX(1); }
    .brand-chip img { width: 100%; height: 48px; object-fit: contain; }
    .brand-chip.is-hidden { display: none; }

    .catalog-brand-panel {
      min-height: auto;
      display: grid;
      grid-template-columns: minmax(260px, .6fr) minmax(0, 1fr);
      gap: 28px;
      align-items: center;
      margin: 4px 0 34px;
    }
    .catalog-brand-panel .brand-cloud {
      grid-template-columns: repeat(5, minmax(90px, 1fr));
    }
    .catalog-brand-panel .brand-chip {
      min-height: 62px;
    }
    .catalog-brand-panel .brand-chip img {
      height: 54px;
    }

    .service-strip {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px;
      background: #fff;
      box-shadow: var(--shadow-soft);
    }

    .service-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      align-items: center;
    }

    .service-icon {
      width: 42px;
      height: 42px;
      border: 2px solid var(--black);
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--yellow-dark);
      font-weight: 950;
      font-size: 18px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.08), transparent 46%),
        #fff;
    }

    .service-item b { display: block; color: var(--black); font-size: 15px; }
    .service-item span { color: var(--muted); font-size: 13px; line-height: 1.35; }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr .95fr;
      gap: 18px;
    }

    .info-card {
      min-height: 170px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.035) 0 1px, transparent 1px 38px),
        #fff;
      padding: 22px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

    .info-card.warm {
      background:
        linear-gradient(135deg, rgba(225,25,36,.08) 0 1px, transparent 1px 38px),
        linear-gradient(135deg, #fff1f2, #fff);
    }
    .info-card.dark {
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 20px),
        var(--black);
      color: #fff;
    }
    .info-card h3 { margin: 0 0 10px; color: inherit; font-size: 20px; line-height: 1.15; }
    .info-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.45; }
    .info-card.dark p { color: rgba(255,255,255,.72); }
    .info-visual {
      position: absolute;
      right: 18px;
      bottom: 12px;
      width: 95px;
      opacity: .95;
      filter: drop-shadow(0 12px 22px rgba(0,0,0,.12));
    }
    .mini-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
    .mini-form input { min-height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; min-width: 0; }

    .catalog-layout {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: start;
    }
    .catalog-layout::before {
      content: "";
      position: absolute;
      left: -30px;
      top: 84px;
      bottom: 140px;
      width: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--red), transparent);
      opacity: .45;
    }

    .catalog-tools {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }
    .catalog-tools input, .catalog-tools select, .catalog-tools button {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      padding: 0 16px;
      color: var(--black);
      font-weight: 800;
      outline: 0;
    }
    .catalog-tools input:focus, .catalog-tools select:focus { border-color: var(--yellow-dark); box-shadow: 0 0 0 4px rgba(225,25,36,.12); }
    #catalogSearch { grid-column: span 1; }
    .mobile-filter-button { display: none; }
    .reset-filter-button { min-height: 46px; padding-inline: 16px; }
    .catalog-count {
      width: max-content;
      max-width: 100%;
      margin: 0 0 14px;
      border: 1px solid rgba(225,25,36,.18);
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.055), rgba(255,255,255,.92)),
        #fff;
      color: var(--black);
      padding: 9px 14px;
      font-size: 14px;
      font-weight: 950;
      box-shadow: 0 12px 28px rgba(20,20,20,.045);
    }
    .catalog-count.is-empty { display: none; }
    .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .chip {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      padding: 9px 14px;
      color: var(--muted);
      font-weight: 800;
      transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
    }
    .chip:hover { border-color: rgba(225,25,36,.28); color: var(--black); }
    .chip.active { background: var(--black); color: #fff; border-color: var(--black); }
    .chip[data-filter="promo"].active,
    .chip[data-mobile-filter="promo"].active { background: var(--red); border-color: var(--red); }

    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

    .product-card {
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 430px;
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      cursor: pointer;
      position: relative;
    }
    .product-card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--red), rgba(9,9,9,.92));
      opacity: 0;
      transition: opacity .18s ease;
      z-index: 1;
    }
    .product-card:hover::before { opacity: 1; }
    .product-card:hover { transform: translateY(-4px); border-color: #d4c7ad; box-shadow: var(--shadow); }

    .photo {
      min-height: 198px;
      background:
        repeating-linear-gradient(135deg, rgba(225,25,36,.035) 0 1px, transparent 1px 18px),
        var(--soft);
      display: grid;
      place-items: center;
      position: relative;
      padding: 18px;
      overflow: hidden;
    }

    .photo::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 20px;
      background:
        radial-gradient(circle at 50% 62%, rgba(225,25,36,.16), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.7), transparent);
      opacity: 0;
      transform: scale(.86);
      transition: opacity .24s ease, transform .24s ease;
      pointer-events: none;
    }

    .photo[data-badge]::after {
      content: attr(data-badge);
      position: absolute;
      right: 12px;
      top: 12px;
      border-radius: 999px;
      background: var(--yellow);
      color: var(--black);
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 950;
      z-index: 3;
    }
    .favorite-toggle {
      position: absolute;
      left: 12px;
      top: 12px;
      z-index: 4;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(225,25,36,.12);
      border-radius: 50%;
      background: rgba(255,255,255,.92);
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(20,20,20,.08);
      transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
    }
    .favorite-toggle:hover,
    .favorite-toggle.active {
      transform: translateY(-2px);
      background: var(--red);
      border-color: var(--red);
      color: #fff;
    }

    .photo img { width: 100%; height: 176px; object-fit: contain; position: relative; z-index: 1; }

    .card-quick-view {
      position: absolute;
      left: 50%;
      bottom: 12px;
      z-index: 3;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(10,10,10,.9);
      color: #fff;
      padding: 0 14px;
      font-size: 12px;
      font-weight: 950;
      opacity: 0;
      transform: translate(-50%, 10px) scale(.94);
      transition: opacity .2s ease, transform .2s ease;
      pointer-events: none;
      box-shadow: 0 12px 26px rgba(0,0,0,.18);
      white-space: nowrap;
    }

    .product-body { padding: 16px; display: flex; flex: 1; flex-direction: column; }
    .product-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 9px;
      min-width: 0;
    }
    .label {
      display: block;
      max-width: 100%;
      width: max-content;
      color: var(--red);
      background: rgba(225,25,36,.08);
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }
    .stock-pill {
      flex: 0 0 auto;
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
      transition: transform .18s ease, background .18s ease, color .18s ease;
    }
    .product-card.is-available .stock-pill {
      background: rgba(12,139,79,.1);
      color: var(--green);
    }
    .product-card.is-preorder .stock-pill {
      background: rgba(8,8,8,.08);
      color: var(--black);
    }
    .product-card h3 {
      margin: 0;
      color: var(--black);
      font-size: 18px;
      line-height: 1.22;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 44px;
      overflow-wrap: anywhere;
    }
    .product-card p {
      margin: 8px 0 13px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 38px;
    }
    .bottom { margin-top: auto; border-top: 0; padding-top: 12px; display: grid; gap: 10px; }
    .price {
      display: grid;
      gap: 3px;
    }
    .price b { display: block; color: var(--black); font-size: 20px; line-height: 1; }
    .price span {
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sale-price {
      gap: 5px;
    }
    .sale-price-line {
      min-height: 23px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .sale-price del,
    .sale-price-values del {
      color: #777;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      text-decoration-color: var(--red);
      text-decoration-thickness: 2px;
    }
    .sale-price .sale-discount-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: max-content;
      min-height: 23px;
      padding: 3px 9px;
      border-radius: 10px;
      background: #fff0f1;
      color: var(--red);
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: .01em;
      overflow: visible;
    }
    .sale-price > b {
      color: var(--red);
      font-size: 23px;
    }
    .sale-price .price-product-meta {
      color: var(--green);
    }
    .product-modal-sale-price {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center !important;
      gap: 7px 16px !important;
    }
    .sale-price-values {
      display: grid;
      gap: 5px;
    }
    .product-modal-sale-price .sale-price-values b {
      color: var(--red);
      font-size: 32px;
    }
    .product-modal-sale-price .sale-price-values del {
      font-size: 16px;
    }
    .product-modal-sale-price .sale-discount-badge {
      min-height: 42px;
      padding: 8px 14px;
      border-radius: 14px;
      font-size: 17px;
    }
    .product-modal-sale-price small {
      grid-column: 1 / -1;
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
    }

    .buy-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .qty {
      display: inline-flex;
      align-items: center;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      overflow: hidden;
    }
    .qty button {
      width: 36px;
      height: 40px;
      border: 0;
      background: #fff;
      color: var(--black);
      font-weight: 950;
      transition: background .16s ease, color .16s ease, transform .16s ease;
    }
    .qty button:hover { background: var(--red); color: #fff; transform: scale(1.04); }
    .qty span { min-width: 28px; text-align: center; font-weight: 950; }
    .product-cart-stepper {
      min-height: 42px;
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      border: 1px solid rgba(225,25,36,.18);
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.08), transparent 54%),
        #fff;
      color: var(--black);
      overflow: hidden;
      box-shadow: 0 10px 22px rgba(20,20,20,.05);
    }
    .product-cart-stepper button {
      height: 100%;
      border: 0;
      background: transparent;
      color: var(--red);
      font-size: 18px;
      font-weight: 950;
      cursor: pointer;
      transition: background .16s ease, color .16s ease, transform .16s ease;
    }
    .product-cart-stepper button:hover {
      background: var(--red);
      color: #fff;
      transform: scale(1.03);
    }
    .product-cart-stepper span {
      min-width: 0;
      text-align: center;
      color: var(--black);
      font-size: 16px;
      font-weight: 950;
      line-height: 1;
    }
    .add {
      border: 0;
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.18), transparent 44%),
        var(--red);
      color: #fff;
      font-weight: 950;
      box-shadow: 0 10px 20px rgba(225,25,36,.12);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .add.preorder-add {
      background:
        linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%),
        var(--black);
      color: #fff;
      box-shadow: 0 10px 20px rgba(0,0,0,.14);
    }
    .details-button { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--black); font-weight: 950; min-height: 42px; transition: background .16s ease, border-color .16s ease, color .16s ease; }
    .details-button:hover { background: var(--black); border-color: var(--black); color: #fff; }
    .product-card:hover .photo::before { opacity: 1; transform: scale(1); }
    .product-card:hover .card-quick-view { opacity: 1; transform: translate(-50%, 0) scale(1); }
    .product-card:hover .label { background: var(--red); color: #fff !important; transform: translateY(-1px); }
    .product-card:hover .stock-pill { transform: translateY(-1px); }
    .product-card:hover .add { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(225,25,36,.18); }
    .product-card:hover .details-button { border-color: rgba(225,25,36,.28); }
    .catalog-more {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      padding: 8px 0 4px;
    }
    .catalog-more .btn {
      min-width: 220px;
      min-height: 48px;
      background: #fff;
      border-color: rgba(225,25,36,.2);
      box-shadow: var(--shadow-soft);
    }

    .cart {
      position: static;
      border: 1px solid var(--line);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.035) 0 1px, transparent 1px 42px),
        #fff;
      padding: 16px;
      box-shadow: var(--shadow);
    }
    .cart h3 { margin: 0 0 6px; color: var(--black); font-size: 22px; }
    .cart p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.4; }
    .cart-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .cart-name { color: var(--black); font-weight: 900; font-size: 14px; }
    .cart-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
    .cart-total { display: none; justify-content: space-between; padding-top: 14px; margin-top: 12px; border-top: 2px solid var(--line); color: var(--black); }
    .cart-total strong { font-size: 21px; }
    .progress {
      display: none;
      margin-top: 12px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.12), transparent 34%),
        #fff7f7;
      border: 1px solid rgba(225,25,36,.14);
      border-radius: 16px;
      padding: 12px;
    }
    .progress.visible { display: block; }
    .progress p { margin: 0 0 8px; font-size: 13px; color: var(--black); font-weight: 900; line-height: 1.35; }
    .track { height: 9px; background: rgba(225,25,36,.12); border-radius: 999px; overflow: hidden; }
    .fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--red), #101114);
      border-radius: 999px;
      transition: width .28s ease;
    }

    .order-layout, .profile-layout { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
    .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
    .checkout-head {
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      padding: 22px;
      box-shadow: 0 18px 46px rgba(9,9,9,.05);
    }
    .checkout-head h2 { margin: 0 0 8px; color: var(--black); font-size: 32px; text-transform: uppercase; }
    .checkout-head p { margin: 0; max-width: 760px; color: var(--muted); line-height: 1.45; font-weight: 750; }
    .checkout-progress {
      display: none;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 16px;
    }
    .checkout-progress span {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 10px;
      color: var(--black);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }
    .checkout-progress span.active { background: var(--red); border-color: var(--red); color: #fff; }
    .checkout-progress span.done {
      background: rgba(23,136,79,.1);
      border-color: rgba(23,136,79,.22);
      color: var(--green);
    }
    .panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 18px;
      box-shadow: 0 10px 28px rgba(0,0,0,.04);
    }
    .panel h2, .panel h3 { margin: 0 0 8px; color: var(--black); }
    .panel p { color: var(--muted); line-height: 1.45; }
    .summary { background: var(--soft); border-radius: 14px; padding: 12px; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
    .summary b { display: block; color: var(--black); margin-bottom: 6px; }
    .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .fields label {
      display: grid;
      gap: 7px;
      color: var(--black);
      font-size: 12px;
      font-weight: 950;
    }
    .fields label > span {
      padding-left: 4px;
    }
    .fields label small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.25;
      padding-left: 4px;
    }
    .fields input, .fields textarea, .fields select {
      width: 100%;
      min-height: 50px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f7f8fa;
      padding: 0 14px;
      outline: 0;
    }
    .fields input:focus, .fields textarea:focus, .fields select:focus {
      border-color: var(--yellow-dark);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(225,25,36,.12);
    }
    .fields input.field-error,
    .fields textarea.field-error,
    .fields select.field-error {
      border-color: var(--red);
      background: rgba(225,25,36,.06);
      box-shadow: 0 0 0 4px rgba(225,25,36,.08);
    }
    .fields textarea { grid-column: 1/-1; min-height: 110px; padding-top: 13px; }
    .delivery-address-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin-top: 2px;
      border: 1px solid rgba(232,227,216,.9);
      border-radius: 18px;
      background: linear-gradient(145deg, #fff, #faf8f3);
      padding: 14px;
    }
    .delivery-address-short-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .courier-comment-field textarea {
      width: 100%;
      min-height: 82px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f7f8fa;
      padding: 13px 14px;
      color: var(--black);
      outline: 0;
      line-height: 1.4;
    }
    .courier-comment-field textarea:focus {
      border-color: var(--yellow-dark);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(225,25,36,.12);
    }
    .delivery-address-fields.is-hidden { display: none; }
    #orderComment {
      min-height: 74px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: 13px 14px;
      color: var(--black);
      outline: 0;
      resize: vertical;
    }
    #orderComment:focus {
      border-color: var(--yellow-dark);
      box-shadow: 0 0 0 4px rgba(225,25,36,.1);
    }
    .full { grid-column: 1/-1; }
    .checkout-steps { display: grid; gap: 14px; }
    .checkout-step {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 18px;
      box-shadow: var(--shadow-soft);
    }
    .checkout-step p { margin: -4px 0 14px; color: var(--muted); line-height: 1.45; font-size: 14px; font-weight: 700; }
    .step-title { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
    .step-number { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 950; }
    .step-title h3 { margin: 0; color: var(--black); }
    .delivery-window-block {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }
    .delivery-window-block h3 {
      margin: 0;
      color: var(--black);
      font-size: 18px;
    }
    .pickup-notice {
      display: grid;
      gap: 4px;
      margin-top: 16px;
      border: 1px solid rgba(23,136,79,.22);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(23,136,79,.1), #fff);
      padding: 14px 16px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }
    .pickup-notice b {
      color: var(--green);
      font-size: 16px;
      font-weight: 950;
    }
    .checkout-summary-card {
      position: sticky;
      top: 24px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 18px;
      box-shadow: 0 24px 64px rgba(9,9,9,.1);
    }
    .checkout-summary-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }
    .checkout-summary-head span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .checkout-summary-head b {
      min-width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: none;
      place-items: center;
      font-size: 15px;
      font-weight: 950;
    }
    .checkout-summary-card h3 { margin: 0 0 12px; color: var(--black); }
    .checkout-readiness {
      display: none;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin: 0 0 12px;
    }
    .checkout-readiness span {
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }
    .checkout-readiness span.done {
      border-color: rgba(23,136,79,.22);
      background: rgba(23,136,79,.09);
      color: var(--green);
    }
    .checkout-todo {
      display: grid;
      gap: 8px;
      margin: 0 0 12px;
    }
    .checkout-todo span {
      display: grid;
      grid-template-columns: 24px 1fr;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 14px;
      background: #fff8f8;
      color: #7b1e25;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.25;
    }
    .checkout-todo i {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 12px;
      font-weight: 950;
    }
    .checkout-todo span.done {
      border-color: rgba(23,136,79,.18);
      background: rgba(23,136,79,.07);
      color: var(--green);
    }
    .checkout-todo span.done i {
      background: var(--green);
    }
    .checkout-lines { display: grid; gap: 10px; margin-bottom: 14px; }
    .checkout-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: var(--black); font-size: 14px; }
    .checkout-line span { color: var(--muted); font-size: 12px; display: block; margin-top: 3px; }
    .checkout-line .availability-badge { color: #fff; }
    .checkout-groups { display: grid; gap: 10px; margin-bottom: 12px; }
    .checkout-group {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      overflow: hidden;
    }
    .checkout-group.preorder {
      border-color: rgba(225,25,36,.18);
      background: #fff8f8;
    }
    .checkout-group-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      color: var(--black);
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .checkout-group-head b {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .checkout-group .checkout-line {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(232,227,216,.7);
    }
    .checkout-group .checkout-line:last-child { border-bottom: 0; }
    .availability-badge {
      display: inline-grid;
      place-items: center;
      width: max-content;
      margin-left: 8px;
      border-radius: 999px;
      padding: 4px 7px;
      color: #fff;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      vertical-align: middle;
    }
    .availability-badge.available { background: var(--green); }
    .availability-badge.preorder { background: var(--black); }
    .availability-note {
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 14px;
      background: #fff7f7;
      color: #672126;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.35;
      margin-bottom: 12px;
    }
    .checkout-total-box { border-top: 2px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
    .checkout-delivery-card {
      display: grid;
      gap: 10px;
      border: 1px solid rgba(225,25,36,.18);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.12), transparent 38%),
        #fff7f7;
      padding: 13px;
      margin-bottom: 4px;
    }
    .checkout-delivery-card.ready {
      border-color: rgba(23,136,79,.22);
      background:
        radial-gradient(circle at 100% 0, rgba(23,136,79,.12), transparent 38%),
        #f7fff9;
    }
    .checkout-delivery-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .checkout-delivery-card b {
      display: block;
      margin-top: 3px;
      color: var(--black);
      font-size: 17px;
      font-weight: 950;
      line-height: 1.1;
    }
    .checkout-delivery-card small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
    }
    .checkout-delivery-mini {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .checkout-delivery-mini em {
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--black);
      padding: 6px 9px;
      font-style: normal;
      font-size: 11px;
      font-weight: 950;
    }
    .checkout-review {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
    }
    .review-row {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 10px;
      color: var(--black);
      font-size: 13px;
      line-height: 1.35;
    }
    .review-row span { color: var(--muted); font-weight: 850; }
    .review-row b { font-weight: 950; }
    .checkout-payment-plan {
      display: none;
      gap: 10px;
      margin-top: 12px;
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.1), transparent 34%),
        #fffafa;
      padding: 12px;
    }
    .payment-plan-head,
    .payment-plan-total {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }
    .payment-plan-head span,
    .payment-plan-total span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }
    .payment-plan-head b,
    .payment-plan-total strong {
      color: var(--black);
      font-size: 14px;
      text-align: right;
    }
    .payment-plan-steps {
      display: grid;
      gap: 8px;
    }
    .payment-plan-steps div {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 9px;
      align-items: start;
      color: var(--muted);
      font-size: 13px;
      font-weight: 820;
      line-height: 1.35;
    }
    .payment-plan-steps i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 12px;
      font-weight: 950;
    }
    .payment-plan-total {
      border-top: 1px solid rgba(232,227,216,.9);
      padding-top: 10px;
    }
    .payment-plan-total strong {
      font-size: 18px;
    }
    .checkout-submit { width: 100%; margin-top: 14px; min-height: 52px; font-size: 15px; }
    .checkout-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 10px;
      padding: 11px 12px;
      border: 1px solid #eadfda;
      border-radius: 8px;
      background: #fff;
      color: #555;
      font-size: 12px;
      line-height: 1.45;
    }
    .checkout-consent input {
      width: 18px;
      height: 18px;
      margin-top: 1px;
      flex: 0 0 auto;
      accent-color: var(--red);
    }
    .checkout-consent a {
      color: var(--red);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .saved-checkout-consent {
      display: none;
      grid-template-columns: 30px 1fr;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
      border: 1px solid rgba(23,136,79,.22);
      border-radius: 12px;
      background: rgba(23,136,79,.07);
      color: var(--green);
      padding: 11px 12px;
      font-size: 12px;
      font-weight: 800;
    }
    .saved-checkout-consent.visible { display: grid; }
    .saved-checkout-consent i {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-weight: 950;
    }
    .saved-checkout-consent b {
      display: block;
      margin-bottom: 2px;
      color: var(--black);
    }
    .auth-consent {
      margin: 12px 0;
    }
    .checkout-highlights {
      display: none;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 16px;
    }
    .checkout-highlights span {
      min-height: 42px;
      border: 1px solid rgba(225,25,36,.14);
      border-radius: 14px;
      background: #fff;
      color: #641f25;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 8px;
      font-size: 12px;
      font-weight: 950;
    }
    .payment-safe-note,
    .checkout-payment-safe {
      margin-top: 12px;
      border: 1px solid rgba(225,25,36,.15);
      border-radius: 16px;
      background: #fff7f7;
      color: #682126;
      padding: 12px;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.4;
    }
    .checkout-payment-safe {
      display: none;
      gap: 4px;
      margin-top: 10px;
    }
    .checkout-payment-safe b {
      color: var(--black);
      font-size: 14px;
    }
    .checkout-payment-safe span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }
    .checkout-auth-hint {
      display: grid;
      gap: 10px;
      margin: 12px 0;
      border: 1px solid rgba(225,25,36,.25);
      border-radius: 16px;
      background: #fff1f2;
      padding: 12px;
      color: #4d422c;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.4;
    }
    .checkout-auth-hint.signed { border-color: rgba(23,136,79,.25); background: rgba(23,136,79,.09); color: var(--green); }
    .checkout-auth-hint .btn { min-height: 38px; padding: 0 14px; width: max-content; }
    .payment-grid.field-error,
    .card-wallet.field-error {
      border-color: rgba(225,25,36,.38);
      box-shadow: 0 0 0 4px rgba(225,25,36,.08), 0 16px 34px rgba(225,25,36,.1);
    }
    .payment-grid.field-error {
      border-radius: 18px;
      background: rgba(225,25,36,.035);
      padding: 8px;
      margin: -8px;
    }
    .checkout-next-hint {
      display: none;
      margin: 10px 0 0;
      border: 1px solid rgba(9,9,9,.08);
      border-radius: 16px;
      background: linear-gradient(135deg, #fff, #fff7f7);
      color: var(--black);
      padding: 12px;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.35;
    }
    .checkout-trust-list { display: none; gap: 8px; margin-top: 14px; }
    .checkout-trust {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }
    .checkout-trust b { display: block; color: var(--black); font-size: 13px; }
    .checkout-trust i {
      width: 32px;
      height: 32px;
      border: 1px solid var(--line);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #fff;
      color: var(--yellow-dark);
      font-style: normal;
      font-weight: 950;
    }
    .contact-actions { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
    .contact-actions a { min-height: 42px; border: 1px solid var(--line); border-radius: 999px; display: grid; place-items: center; font-weight: 950; background: #fff; }
    .success-card { display: none; border: 1px solid rgba(23,136,79,.25); border-radius: 18px; background: linear-gradient(135deg, rgba(23,136,79,.12), #fff); padding: 18px; margin-top: 14px; }
    .success-card.visible { display: block; }
    .success-card h3 { margin: 0 0 8px; color: var(--green); }
    .success-receipt {
      display: grid;
      gap: 8px;
      margin: 12px 0;
      border: 1px solid rgba(23,136,79,.18);
      border-radius: 16px;
      background: #fff;
      padding: 12px;
    }
    .success-receipt div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
    }
    .success-receipt b { color: var(--black); text-align: right; }
    .payment-card { display: none; margin-top: 14px; border: 1px solid rgba(225,25,36,.28); border-radius: 18px; background: linear-gradient(145deg, #fff1f2, #fff); padding: 16px; }
    .payment-card.visible { display: block; }
    .payment-card h3 { margin: 0 0 8px; color: var(--black); }
    .payment-card p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
    .payment-box { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: center; margin: 12px 0; }
    .payment-method-mark {
      width: 116px;
      aspect-ratio: 1;
      border-radius: 18px;
      background: radial-gradient(circle at 70% 20%, rgba(225,25,36,.18), transparent 45%), #fff;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      align-content: center;
      gap: 4px;
      padding: 10px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
    }
    .payment-method-mark b { color: var(--red); font-size: 18px; line-height: 1; }
    .payment-method-mark span { color: var(--black); font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
    .payment-summary { display: grid; gap: 6px; }
    .payment-summary div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
    .payment-summary b { color: var(--black); text-align: right; }
    .payment-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .final-order {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 18px;
      align-items: start;
      padding: 42px 0;
    }
    .final-hero, .final-summary {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #fff;
      box-shadow: var(--shadow);
    }
    .final-hero {
      min-height: 440px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.16), transparent 32%),
        repeating-linear-gradient(135deg, rgba(225,25,36,.04) 0 1px, transparent 1px 18px),
        #fff;
    }
    .final-check {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 38px;
      font-weight: 950;
      box-shadow: 0 18px 38px rgba(23,136,79,.2);
      margin-bottom: 16px;
    }
    .final-hero h2 {
      margin: 16px 0 10px;
      color: var(--black);
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1;
      text-transform: uppercase;
    }
    .final-hero p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.45;
      font-weight: 800;
    }
    .final-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }
    .final-next {
      display: grid;
      gap: 10px;
      margin-top: 20px;
      border: 1px solid rgba(9,9,9,.08);
      border-radius: 18px;
      background: rgba(255,255,255,.82);
      padding: 14px;
    }
    .final-next > b {
      color: var(--black);
      font-size: 15px;
    }
    .final-next div {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
      color: var(--muted);
      font-size: 13px;
      font-weight: 820;
      line-height: 1.35;
    }
    .final-next i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--red);
      color: #fff;
      font-style: normal;
      font-weight: 950;
    }
    .final-next strong {
      display: block;
      color: var(--black);
      font-size: 13px;
    }
    .final-next .done i {
      background: var(--green);
    }
    .final-next .done strong {
      color: var(--green);
    }
    .final-summary { padding: 22px; }
    .final-summary-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 16px;
    }
    .final-summary-head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .final-summary-head h3 {
      margin: 4px 0 0;
      color: var(--black);
      font-size: 28px;
    }
    .final-summary-head b {
      color: var(--red);
      font-size: 28px;
      white-space: nowrap;
    }
    .final-details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }
    .final-detail {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
      padding: 12px;
    }
    .final-detail span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 4px;
    }
    .final-detail b {
      color: var(--black);
      font-size: 14px;
      line-height: 1.3;
    }
    .final-contact {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid rgba(225,25,36,.14);
      border-radius: 18px;
      background: #fff7f7;
      padding: 14px;
      margin-bottom: 16px;
    }
    .final-contact span,
    .final-contact small {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }
    .final-contact b {
      display: block;
      color: var(--black);
      margin: 3px 0;
      font-size: 16px;
    }
    .final-contact a {
      min-height: 40px;
      border-radius: 999px;
      background: var(--black);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      font-weight: 950;
      white-space: nowrap;
    }
    .final-items {
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
    }
    .final-item {
      display: grid;
      grid-template-columns: 64px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }
    .final-item:last-child { border-bottom: 0; }
    .final-item img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      border-radius: 14px;
      background: var(--soft);
      padding: 7px;
    }
    .final-item b { color: var(--black); }
    .final-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .cart-meta .availability-badge,
    .drawer-line-meta .availability-badge,
    .final-item .availability-badge {
      display: inline-grid;
      color: #fff;
      margin-top: 0;
      font-size: 10px;
    }
    .final-item strong { color: var(--black); white-space: nowrap; }
    .order-items-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
    .order-item-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; color: var(--black); }
    .order-item-row:last-child { border-bottom: 0; }
    .order-item-row span { color: var(--muted); font-size: 12px; display: block; margin-top: 3px; }
    .choice-grid, .payment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .choice-grid.single-window { grid-template-columns: 1fr; }
    .payment-grid { grid-template-columns: repeat(2, 1fr); }
    .payment-grid.single-payment { grid-template-columns: 1fr; }
    .choice, .payment {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f7f8fa;
      padding: 11px;
      text-align: left;
      color: var(--muted);
    }
    .choice.active, .payment.active { border-color: var(--yellow-dark); background: #fff1f2; }
    .choice b, .payment b { display: block; color: var(--black); }
    .choice span, .payment span { font-size: 12px; }
    .delivery-window-choice { display: grid; gap: 3px; align-content: start; }
    .delivery-window-choice b { font-size: 18px; line-height: 1.15; }
    .delivery-window-choice .delivery-window-date {
      display: block;
      color: var(--black);
      font-size: 15px;
      line-height: 1.25;
      font-weight: 900;
    }
    .delivery-window-choice span { display: block; font-size: 13px; line-height: 1.25; }
    .card-wallet {
      display: none;
      margin-top: 12px;
      border: 1px solid rgba(225,25,36,.18);
      border-radius: 18px;
      background: linear-gradient(145deg, #fff, #fff7f7);
      padding: 14px;
    }
    .card-wallet.visible { display: grid; gap: 12px; }
    .card-wallet-head, .profile-cards-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }
    .card-wallet-head b, .profile-cards-head b { display: block; color: var(--black); font-size: 15px; }
    .card-wallet-head span, .profile-cards-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .card-wallet-head .btn, .profile-cards-head .btn { min-height: 38px; padding: 0 13px; }
    .profile-cards-head .btn {
      flex: 0 0 auto;
      min-width: 132px;
      padding-inline: 18px;
      white-space: nowrap;
      line-height: 1;
    }
    .saved-cards { display: grid; gap: 8px; }
    .saved-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: 12px;
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 10px;
      align-items: center;
      text-align: left;
      color: var(--black);
      box-shadow: 0 8px 22px rgba(0,0,0,.04);
    }
    button.saved-card { cursor: pointer; }
    button.saved-card.active {
      border-color: var(--yellow-dark);
      background: #fff1f2;
      box-shadow: 0 10px 26px rgba(225,25,36,.1);
    }
    .card-mark {
      width: 42px;
      height: 30px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--black), #3a3a3a);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .02em;
    }
    .card-mark.visa { background: linear-gradient(135deg, #123a91, #0a66c2); }
    .card-mark.mastercard { background: linear-gradient(135deg, #111, #e11924); }
    .saved-card b { display: block; color: var(--black); font-size: 14px; }
    .saved-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .saved-card .btn { min-height: 34px; padding: 0 12px; }
    .saved-card-empty {
      border: 1px dashed rgba(225,25,36,.25);
      border-radius: 16px;
      background: #fff;
      color: var(--muted);
      padding: 12px;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.4;
    }
    .secure-card-form {
      display: none;
      border: 1px solid rgba(9,9,9,.12);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.13), transparent 30%),
        #fff;
      padding: 14px;
    }
    .secure-card-form.visible { display: grid; gap: 12px; }
    .secure-card-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .secure-card-top b { color: var(--black); font-size: 14px; }
    .card-preview {
      min-height: 132px;
      border-radius: 18px;
      padding: 18px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.86), rgba(9,9,9,.95)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 15px);
      color: #fff;
      display: grid;
      align-content: space-between;
      box-shadow: 0 18px 36px rgba(9,9,9,.16);
    }
    .card-preview.visa {
      background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.22), transparent 24%),
        linear-gradient(135deg, #16439b, #0a1028 72%);
    }
    .card-preview.mastercard {
      background:
        radial-gradient(circle at 82% 18%, rgba(255,184,0,.24), transparent 22%),
        radial-gradient(circle at 70% 24%, rgba(225,25,36,.32), transparent 24%),
        linear-gradient(135deg, #171717, #321014 72%);
    }
    .card-preview span { width: max-content; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 950; }
    .card-preview b { font-size: 20px; letter-spacing: .08em; }
    .card-preview small { color: rgba(255,255,255,.78); font-weight: 900; }
    .card-form-message {
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.35;
      background: var(--soft);
      color: var(--muted);
    }
    .card-form-message.success {
      background: rgba(23,136,79,.1);
      color: var(--green);
    }
    .card-form-message.error {
      background: rgba(225,25,36,.1);
      color: var(--red);
    }
    .card-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .replace { display: flex; gap: 10px; align-items: flex-start; background: var(--soft); border-radius: 14px; padding: 12px; color: var(--muted); font-size: 13px; }
    .replace input { width: 18px; height: 18px; accent-color: var(--yellow-dark); }
    .status { display: none; margin-top: 12px; border-radius: 14px; padding: 12px; background: rgba(23,136,79,.1); color: var(--green); font-weight: 900; }
    .status.error {
      background: #fff1f2;
      color: var(--red);
      border: 1px solid rgba(225,25,36,.2);
    }
    .status.success {
      background: rgba(23,136,79,.1);
      color: var(--green);
      border: 1px solid rgba(23,136,79,.18);
    }

    .profile-cover { min-height: 110px; border-radius: 18px; background: linear-gradient(135deg, var(--black), #2d2d2f); color: #fff; padding: 18px; display: flex; justify-content: space-between; align-items: flex-end; }
    .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); color: var(--black); display: grid; place-items: center; font-size: 26px; font-weight: 950; }
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
    .stat { background: var(--soft); border-radius: 14px; padding: 12px; }
    .stat b { display: block; color: var(--black); font-size: 20px; }
    .detail { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 10px 0; color: var(--muted); }
    .detail b { color: var(--black); text-align: right; }
    .profile-client-checklist {
      margin-top: 14px;
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.1), transparent 36%),
        #fff;
      padding: 12px;
    }
    .profile-check-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }
    .profile-check-head span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .profile-check-head b {
      min-height: 28px;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 950;
    }
    .profile-check-grid {
      display: grid;
      gap: 8px;
    }
    .profile-check-grid div {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 8px;
      align-items: center;
      border: 1px solid rgba(225,25,36,.12);
      border-radius: 14px;
      background: #fff7f7;
      padding: 9px;
    }
    .profile-check-grid div.ready {
      border-color: rgba(23,136,79,.18);
      background: rgba(23,136,79,.06);
    }
    .profile-check-grid i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 12px;
      font-weight: 950;
    }
    .profile-check-grid .ready i {
      background: var(--green);
    }
    .profile-check-grid b,
    .profile-check-grid small {
      display: block;
    }
    .profile-check-grid b {
      color: var(--black);
      font-size: 12px;
      line-height: 1.1;
    }
    .profile-check-grid small {
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      line-height: 1.25;
    }
    .profile-cards {
      margin-top: 14px;
      border: 1px solid rgba(225,25,36,.18);
      border-radius: 18px;
      background: #fff7f7;
      padding: 12px;
    }
    .profile-cards .saved-cards { margin-top: 10px; }
    .profile-summary {
      padding: 20px;
      border-radius: 24px;
      box-shadow: var(--shadow-soft);
    }
    .profile-identity {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 14px;
      align-items: center;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    .profile-identity h2 { margin: 4px 0 2px; font-size: 24px; }
    .profile-identity p { margin: 0; font-size: 13px; }
    .profile-kicker {
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .profile-stats {
      grid-template-columns: 1fr 1.5fr;
      margin: 16px 0 18px;
    }
    .profile-stats .stat {
      border: 1px solid var(--line);
      background: var(--paper);
      padding: 14px;
    }
    .profile-stats .stat span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }
    .profile-contact-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-end;
      margin-bottom: 4px;
    }
    .profile-contact-head b { color: var(--black); font-size: 15px; }
    .profile-contact-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 800; }
    .profile-contact-toggle {
      display: none;
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--black);
      padding: 0 12px;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }
    .profile-contact-list {
      border-top: 1px solid var(--line);
      margin-top: 10px;
    }
    .profile-contact-list .detail:last-child { border-bottom: 0; }
    .profile-client-checklist:empty { display: none; }
    .profile-cards {
      background: var(--paper);
      border-color: var(--line);
    }
    .profile-cards .saved-cards { display: none; }
    .profile-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin-top: 16px;
    }
    .profile-actions .btn { min-height: 44px; }
    .profile-logout {
      border-color: rgba(225,25,36,.3);
      background: #fff7f7;
      color: #a51f28;
      box-shadow: 0 8px 18px rgba(225,25,36,.07);
    }
    .profile-logout:hover,
    .profile-logout:focus-visible {
      border-color: var(--red);
      background: var(--red);
      color: #fff;
      box-shadow: 0 12px 24px rgba(225,25,36,.18);
    }
    .saved-cards.compact .saved-card {
      grid-template-columns: 38px 1fr auto;
      padding: 10px;
    }
    .saved-cards.compact .card-mark { width: 38px; height: 28px; }
    .profile-orders-panel { overflow: hidden; }
    .profile-orders-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 16px;
    }
    .profile-orders-head span {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      background: #fff1f2;
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .profile-orders-head h2 { margin-top: 8px; }
    .profile-orders-head p { margin: 0; font-size: 13px; }
    .profile-order-overview {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }
    .profile-order-overview div {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(145deg, #fff, #fff8f8);
      padding: 12px;
    }
    .profile-order-overview span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }
    .profile-order-overview b {
      display: block;
      margin-top: 4px;
      color: var(--black);
      font-size: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .profile-quick-repeat {
      margin: 0 0 14px;
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 20px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.08), transparent 34%),
        #fff;
      padding: 14px;
    }
    .profile-quick-repeat:empty { display: none; }
    .quick-repeat-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }
    .quick-repeat-head span {
      display: block;
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .quick-repeat-head b {
      display: block;
      margin-top: 3px;
      color: var(--black);
      font-size: 18px;
    }
    .quick-repeat-head .btn {
      min-height: 38px;
      padding: 0 14px;
      white-space: nowrap;
    }
    .quick-repeat-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .quick-repeat-item {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff8f8;
      padding: 10px;
      display: grid;
      grid-template-columns: 48px 1fr 28px;
      gap: 9px;
      align-items: center;
      text-align: left;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .quick-repeat-item:hover {
      transform: translateY(-2px);
      border-color: rgba(225,25,36,.3);
      box-shadow: var(--shadow-soft);
    }
    .quick-repeat-item img,
    .quick-repeat-item .pack-art {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      object-fit: contain;
      background: #fff;
      padding: 4px;
    }
    .quick-repeat-item span {
      min-width: 0;
      display: block;
    }
    .quick-repeat-item b,
    .quick-repeat-item small {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .quick-repeat-item b {
      color: var(--black);
      font-size: 12px;
      font-weight: 950;
    }
    .quick-repeat-item small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }
    .quick-repeat-item i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 18px;
      font-weight: 950;
    }
    .profile-order-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }
    .profile-order-filters button {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      padding: 0 12px;
      font-weight: 950;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .profile-order-filters button:hover { transform: translateY(-2px); border-color: rgba(225,25,36,.28); box-shadow: var(--shadow-soft); }
    .profile-order-filters button.active { background: var(--black); color: #fff; border-color: var(--black); }
    .profile-order-filters span {
      min-width: 22px;
      min-height: 22px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #fff1f2;
      color: var(--red);
      font-size: 11px;
    }
    .profile-order-filters button.active span { background: var(--red); color: #fff; }
    .feed { display: grid; gap: 14px; }
    .order-card { background: var(--soft); border-radius: 16px; padding: 14px; border: 1px solid var(--line); }
    .profile-order-card {
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,247,247,.78)),
        repeating-linear-gradient(135deg, rgba(225,25,36,.03) 0 1px, transparent 1px 18px);
      padding: 18px;
      box-shadow: 0 16px 42px rgba(15,18,22,.06);
    }
    .order-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .order-top b { color: var(--black); font-size: 20px; }
    .order-status { border-radius: 999px; padding: 7px 10px; color: var(--green); background: rgba(23,136,79,.1); font-size: 12px; font-weight: 900; white-space: nowrap; }
    .order-status.wait { color: var(--red); background: rgba(225,25,36,.1); }
    .order-status.paid { color: var(--green); background: rgba(23,136,79,.1); }
    .order-status.progress { color: #8a4b00; background: rgba(255,188,0,.18); }
    .profile-order-timeline {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
      margin: 14px 0;
    }
    .profile-order-timeline span {
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: var(--muted);
      background: #fff;
      font-size: 11px;
      font-weight: 950;
    }
    .profile-order-timeline span.active {
      border-color: var(--red);
      background: var(--red);
      color: #fff;
    }
    .profile-next-step {
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 16px;
      background: #fff;
      padding: 12px;
      margin-bottom: 12px;
    }
    .profile-next-step span {
      display: block;
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .profile-next-step b {
      display: block;
      margin-top: 4px;
      color: var(--black);
      font-size: 16px;
    }
    .profile-next-step p {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 800;
    }
    .profile-next-step.wait { background: #fff6f6; border-color: rgba(225,25,36,.24); }
    .profile-next-step.review { background: #fffaf0; border-color: rgba(255,188,0,.32); }
    .profile-next-step.active { background: #f7fbff; border-color: rgba(40,118,220,.16); }
    .profile-next-step.done { background: #f3fbf6; border-color: rgba(23,136,79,.2); }
    .profile-order-summary,
    .profile-order-details-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .profile-order-summary div,
    .profile-order-details-grid div {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      padding: 10px;
    }
    .profile-order-summary span,
    .profile-order-details-grid span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }
    .profile-order-summary b,
    .profile-order-details-grid b {
      display: block;
      margin-top: 4px;
      color: var(--black);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .order-items-mini {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .mini-item {
      min-width: 180px;
      flex: 1;
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      padding: 8px;
    }
    .mini-item img,
    .mini-item .pack-art {
      width: 42px;
      height: 42px;
      object-fit: contain;
      border-radius: 11px;
      background: var(--cream);
    }
    .mini-item span {
      min-width: 0;
      color: var(--black);
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mini-item b {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .mini-item.more {
      min-width: auto;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: var(--red);
      font-weight: 950;
      padding: 0 14px;
    }
    .profile-order-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
      align-items: center;
    }
    .profile-order-actions .btn { min-height: 40px; padding: 0 14px; }
    .order-note {
      border-radius: 999px;
      background: rgba(225,25,36,.1);
      color: var(--red);
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 950;
    }
    .profile-order-lines,
    .profile-history {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }
    .profile-order-line {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: 9px;
    }
    .profile-order-line img,
    .profile-order-line .pack-art {
      width: 56px;
      height: 56px;
      object-fit: contain;
      border-radius: 12px;
      background: var(--cream);
    }
    .profile-order-line b,
    .profile-order-line span {
      display: block;
    }
    .profile-order-line b { color: var(--black); }
    .profile-order-line span { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .profile-order-line strong { color: var(--black); white-space: nowrap; }
    .profile-history {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: 10px;
    }
    .profile-history-line {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }
    .profile-history-line b { color: var(--black); }
    .orders-empty {
      border: 1px dashed rgba(225,25,36,.24);
      border-radius: 22px;
      background: #fff7f7;
      padding: 22px;
    }
    .orders-empty h3 { margin-bottom: 6px; font-size: 24px; }
    .orders-empty p { color: var(--muted); max-width: 520px; }
    .orders-empty .btn { margin-top: 14px; }
    .orders-empty.compact { background: #fff; }
    .empty { border: 1px dashed #cbd1dc; border-radius: 16px; padding: 18px; color: var(--muted); background: var(--soft); }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(0,0,0,.42);
      backdrop-filter: blur(10px);
    }
    .modal.open { display: grid; }
    .auth {
      width: min(850px, 100%);
      max-height: calc(100vh - 36px);
      background: #fff;
      border-radius: 24px;
      overflow: auto;
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      box-shadow: 0 28px 90px rgba(0,0,0,.22);
    }
    .auth-side { background: var(--black); color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
    .auth-side img { width: 120px; background: #fff; border-radius: 16px; }
    .auth-side p { color: rgba(255,255,255,.7); line-height: 1.45; }
    .auth-main { padding: 22px; }
    .auth-head { display: flex; justify-content: space-between; gap: 14px; }
    .close {
      width: 40px;
      min-width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--black);
      display: grid;
      place-items: center;
      padding: 0;
      font-size: 24px;
      line-height: 1;
      font-weight: 950;
      box-shadow: 0 8px 22px rgba(20,20,20,.06);
    }
    .close:hover {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(225,25,36,.18);
    }
    .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
    .tab { min-height: 42px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 900; }
    .tab.active { background: var(--black); color: #fff; border-color: var(--black); }
    .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .auth-grid label { display: grid; gap: 6px; color: var(--black); font-size: 13px; font-weight: 900; }
    .auth-grid input, .auth-grid select { min-height: 48px; border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; background: #f7f8fa; }
    .auth-code-field { display: none !important; }
    .auth-code-field.visible { display: grid !important; }
    .auth-code-field input { font-size: 20px; font-weight: 900; letter-spacing: .28em; text-align: center; }
    .auth-resend-code { align-self: end; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--black); font-weight: 900; cursor: pointer; }
    .auth-resend-code[hidden] { display: none; }
    .auth-resend-code:disabled { cursor: wait; opacity: .6; }
    .auth-help { margin: 14px 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
    .password-requirements {
      margin: 12px 0 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
      padding: 11px 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }
    .password-requirements[hidden] { display: none; }
    .password-requirements b { display: block; margin-bottom: 6px; color: var(--black); }
    .password-requirements span { display: block; position: relative; padding-left: 18px; }
    .password-requirements span::before { content: "○"; position: absolute; left: 0; color: var(--muted); }
    .password-requirements span.met { color: var(--green); }
    .password-requirements span.met::before { content: "✓"; color: var(--green); font-weight: 950; }
    .auth-status { display: none; margin-top: 10px; border-radius: 14px; background: rgba(23,136,79,.1); color: var(--green); padding: 10px 12px; font-weight: 900; }
    .auth-status.error { background: rgba(225,25,36,.09); color: var(--red); }
    .auth-status.info { background: rgba(18,20,24,.07); color: var(--black); }
    .auth-recover-button {
      display: inline-flex;
      justify-content: center;
      width: 100%;
      margin: 2px 0 12px;
      border: 0;
      background: transparent;
      color: var(--red);
      font: inherit;
      font-size: 13px;
      font-weight: 950;
      cursor: pointer;
    }
    .auth-recover-button:hover { text-decoration: underline; text-underline-offset: 3px; }

    .product-modal {
      width: min(1280px, calc(100vw - 36px));
      max-height: calc(100vh - 36px);
      background: #fff;
      border: 1px solid rgba(232,227,216,.85);
      border-radius: 24px;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(520px, 1.08fr) minmax(0, .92fr);
      box-shadow: 0 28px 90px rgba(0,0,0,.22);
    }
    .product-modal-media {
      min-height: 0;
      height: calc(100vh - 36px);
      max-height: calc(100vh - 36px);
      background:
        radial-gradient(circle at 34% 24%, rgba(225,25,36,.12), transparent 28%),
        repeating-linear-gradient(135deg, rgba(225,25,36,.04) 0 1px, transparent 1px 16px),
        linear-gradient(145deg, #fff, var(--soft));
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 14px;
      padding: 18px;
      align-self: stretch;
    }
    .product-gallery-stage {
      position: relative;
      min-height: 0;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
    }
    .product-gallery-stage img {
      width: 100%;
      height: 100%;
      max-height: calc(100vh - 80px);
      object-fit: contain;
      object-position: center;
      filter: drop-shadow(0 18px 32px rgba(20,20,20,.1));
    }
    .product-gallery-thumbs {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 10px;
      overflow-x: auto;
      padding: 4px 2px 2px;
      scrollbar-width: thin;
    }
    .product-gallery-thumb {
      flex: 0 0 66px;
      width: 66px;
      height: 66px;
      border: 1px solid rgba(225,25,36,.12);
      border-radius: 14px;
      background: rgba(255,255,255,.78);
      display: grid;
      place-items: center;
      padding: 5px;
      box-shadow: 0 8px 20px rgba(20,20,20,.06);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .product-gallery-thumb:hover,
    .product-gallery-thumb.active {
      transform: translateY(-2px);
      border-color: var(--red);
      box-shadow: 0 10px 24px rgba(225,25,36,.16);
    }
    .product-gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .product-modal-body {
      max-height: calc(100vh - 36px);
      overflow: auto;
      padding: 28px;
      scrollbar-width: thin;
    }
    .product-modal-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
    .product-modal-brand-line { display: none; }
    .product-modal h2 { margin: 8px 0 10px; color: var(--black); font-size: clamp(28px, 3vw, 40px); line-height: 1.06; overflow-wrap: anywhere; }
    .product-modal p { color: var(--muted); line-height: 1.5; }
    #productModalDescription {
      margin: 12px 0 6px;
      font-size: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-usage-card {
      margin: 12px 0 12px;
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.12), transparent 32%),
        #fffafa;
      padding: 13px 14px;
    }
    .product-usage-card span {
      display: block;
      color: var(--red);
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .product-usage-card b {
      display: block;
      margin-top: 5px;
      color: var(--black);
      font-size: 15px;
      line-height: 1.35;
    }
    .product-logo { width: 126px; height: 54px; object-fit: contain; margin: 12px 0; }
    .product-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
    .product-meta-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--black);
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 900;
    }
    .product-modal-offer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 62px;
      margin: 10px 0 12px;
      padding: 10px 12px;
      border: 1px solid rgba(225,25,36,.14);
      border-radius: 16px;
      background: linear-gradient(105deg, #fff9f9, #fff 66%);
    }
    .product-modal-offer-price {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 8px;
      min-width: 0;
    }
    .product-modal-offer-price del {
      color: #8c8c8c;
      font-size: 13px;
      font-weight: 800;
    }
    .product-modal-offer-price strong {
      color: var(--red);
      font-size: 25px;
      line-height: 1;
      letter-spacing: -.04em;
    }
    .product-modal-offer-price small {
      flex-basis: 100%;
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
    }
    .product-modal-offer-price span,
    .product-modal-stock-state {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }
    .product-modal-offer-price span { background: #ffe7e8; color: var(--red); }
    .product-modal-stock-state { background: #e7f6ed; color: var(--green); }
    .product-modal-stock-state.is-preorder { background: #f2f0ec; color: #6e6a62; }
    .product-summary-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 12px 0;
    }
    .product-summary-strip div {
      min-width: 0;
      border: 1px solid rgba(232,227,216,.88);
      border-radius: 16px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.08), transparent 34%),
        #fff;
      padding: 11px 12px;
      box-shadow: 0 10px 22px rgba(20,20,20,.03);
    }
    .product-summary-strip b,
    .product-summary-strip span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .product-summary-strip b {
      color: var(--black);
      font-size: 13px;
      line-height: 1.12;
    }
    .product-summary-strip span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }
    .product-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
    .fact { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--paper); }
    .fact span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
    .fact b { color: var(--black); }
    .product-specs {
      display: grid;
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      margin-bottom: 16px;
    }
    .product-specs div {
      display: grid;
      grid-template-columns: minmax(120px, .72fr) minmax(0, 1fr);
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(232,227,216,.82);
    }
    .product-specs div:last-child { border-bottom: 0; }
    .product-specs span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }
    .product-specs b {
      color: var(--black);
      font-size: 13px;
      font-weight: 950;
      text-align: right;
    }
    .product-section-title {
      margin: 18px 0 10px;
      color: var(--black);
      font-size: 14px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .product-summary-strip,
    .product-specs-title,
    .product-specs,
    .product-benefits-title,
    .product-benefits,
    .product-trust {
      display: none !important;
    }
    .product-benefits {
      display: grid;
      gap: 8px;
      margin: 14px 0;
      padding: 0;
      list-style: none;
    }
    .product-benefits li {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(232,227,216,.74);
      border-radius: 14px;
      background: #fff;
      padding: 9px 10px;
      color: var(--black);
      font-size: 13px;
      font-weight: 850;
    }
    .product-benefits li::before {
      content: "✓";
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 950;
    }
    .product-trust {
      border: 1px solid rgba(225,25,36,.22);
      border-radius: 16px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.13), transparent 34%),
        linear-gradient(145deg, #fff1f2, #fff);
      padding: 12px;
      color: #5d2026;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.45;
    }
    .product-trust-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .product-trust-list div {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 8px;
      align-items: start;
      min-width: 0;
      border: 1px solid rgba(225,25,36,.12);
      border-radius: 14px;
      background: rgba(255,255,255,.78);
      padding: 9px;
    }
    .product-trust-list i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 12px;
      font-weight: 950;
    }
    .product-trust-list b,
    .product-trust-list span {
      display: block;
      min-width: 0;
    }
    .product-trust-list b {
      color: var(--black);
      font-size: 12px;
      line-height: 1.15;
    }
    .product-trust-list span {
      color: #6f3439;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.3;
    }
    .product-trust-list p {
      grid-column: 1 / -1;
      margin: 2px 0 0;
      color: #5d2026;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.35;
    }
    .related-products {
      display: grid;
      margin: 0 0 18px;
    }
    .related-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: end;
      margin-bottom: 10px;
    }
    .related-head span {
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .related-head b {
      color: var(--black);
      font-size: 18px;
    }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .related-product {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
      padding: 10px;
      display: grid;
      gap: 8px;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .related-product:hover {
      transform: translateY(-2px);
      border-color: rgba(225,25,36,.35);
      box-shadow: var(--shadow-soft);
    }
    .related-product-main {
      min-width: 0;
      border: 0;
      background: transparent;
      padding: 0;
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 8px 10px;
      text-align: left;
      cursor: pointer;
    }
    .related-product-main > span {
      grid-row: span 4;
      min-width: 0;
      border-radius: 12px;
      background: #fff;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .related-product-main > span img {
      width: 100%;
      height: 74px;
      object-fit: contain;
      padding: 6px;
      mix-blend-mode: multiply;
    }
    .related-product b {
      color: var(--black);
      font-size: 12px;
      line-height: 1.25;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .related-product small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .related-product em {
      color: var(--red);
      font-style: normal;
      font-size: 13px;
      font-weight: 950;
    }
    .related-cart {
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(225,25,36,.16);
    }
    .related-empty {
      grid-column: 1 / -1;
      border: 1px dashed rgba(225,25,36,.22);
      border-radius: 16px;
      background: #fff7f7;
      color: var(--muted);
      padding: 14px;
      font-size: 13px;
      font-weight: 850;
    }
    .modal-buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 18px; }
    .modal-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 14px; color: var(--muted); font-weight: 900; }
    .modal-total strong { color: var(--black); font-size: 20px; line-height: 1; text-align: right; white-space: nowrap; }
    .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
    .modal-actions .btn, .modal-actions .add { min-height: 46px; }
    .product-purchase-panel {
      position: sticky;
      bottom: 0;
      z-index: 4;
      margin: 20px -28px -28px;
      padding: 18px 28px 24px;
      border-top: 1px solid #eeeeee;
      background:
        linear-gradient(180deg, rgba(255,255,255,.9), #fff 24%),
        #fff;
      box-shadow: 0 -18px 42px rgba(20,20,20,.08);
    }
    .product-purchase-panel .price {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: end;
      margin-bottom: 12px;
    }
    .product-purchase-panel .price b {
      font-size: 28px;
      line-height: 1;
    }
    .product-purchase-panel .price span {
      max-width: 230px;
      text-align: right;
    }
    .product-pay-note {
      margin-top: 10px;
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 14px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.11), transparent 34%),
        #fff7f7;
      color: #6c3035;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.35;
    }

    .cart-drawer {
      width: min(560px, 100%);
      max-height: min(760px, calc(100vh - 32px));
      margin-left: auto;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 20px;
      overflow-y: auto;
      overflow-x: clip;
      box-shadow: 0 28px 90px rgba(0,0,0,.22);
    }
    .cart-drawer-head {
      position: sticky;
      top: -20px;
      z-index: 5;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      margin: -20px -20px 14px;
      padding: 20px;
      background:
        radial-gradient(circle at 92% 0%, rgba(225,25,36,.1), transparent 36%),
        linear-gradient(180deg, #fff 0%, #fffafa 100%);
      color: var(--black);
      border-bottom: 1px solid var(--line);
      border-radius: 28px 28px 18px 18px;
    }
    .cart-drawer-head h2::before {
      content: "Ваш заказ";
      display: block;
      margin-bottom: 4px;
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .02em;
      text-transform: uppercase;
    }
    .cart-drawer-head p { margin: 4px 0 0; color: var(--muted); }
    .cart-drawer-head .close {
      background: #fff;
      color: var(--black);
      border-color: var(--line);
      box-shadow: 0 8px 22px rgba(20,20,20,.07);
    }
    .cart-drawer h2 { margin: 0; color: inherit; }
    .drawer-empty { border: 1px dashed #d6cbb8; border-radius: 16px; padding: 18px; color: var(--muted); background: #fbfaf7; line-height: 1.45; }
    .drawer-overview {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }
    .drawer-overview span {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }
    .drawer-overview b { display: block; color: var(--black); font-size: 17px; line-height: 1.1; }
    .drawer-group {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      overflow: hidden;
      margin-top: 12px;
    }
    .drawer-group-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      background: #fbfaf7;
      border-bottom: 1px solid var(--line);
    }
    .drawer-group.available .drawer-group-head { background: rgba(12,139,79,.06); }
    .drawer-group.preorder .drawer-group-head { background: #fff7f7; }
    .drawer-group-head span { display: block; color: var(--black); font-weight: 950; }
    .drawer-group-head small { display: block; margin-top: 2px; color: var(--muted); font-weight: 800; line-height: 1.25; }
    .drawer-group-head b {
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--black);
      color: #fff;
      padding: 7px 10px;
      font-size: 12px;
    }
    .cart-day-toggle {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      cursor: pointer;
    }
    .cart-day-toggle input {
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: var(--red);
      cursor: pointer;
    }
    .drawer-line {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }
    .drawer-line:last-child { border-bottom: 0; }
    .drawer-line-photo {
      width: 72px;
      height: 72px;
      border-radius: 14px;
      background: var(--soft);
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .drawer-line img { width: 72px; height: 72px; object-fit: contain; padding: 7px; mix-blend-mode: multiply; }
    .drawer-line .pack-art { width: 72px; height: 72px; border-radius: 14px; font-size: 12px; }
    .drawer-line-body { min-width: 0; }
    .drawer-line-top { display: flex; justify-content: space-between; gap: 10px; color: var(--black); font-weight: 950; }
    .drawer-line-top span {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 1.18;
    }
    .drawer-line-top b { white-space: nowrap; }
    .drawer-line-meta { color: var(--muted); font-size: 12px; margin: 5px 0 9px; font-weight: 800; }
    .drawer-line-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
    .drawer-line-actions .qty { height: 36px; }
    .drawer-line-actions .qty button { width: 32px; height: 34px; }
    .drawer-line-actions .qty span { min-width: 28px; }
    .drawer-total-preview {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-top: 12px;
      border: 1px solid rgba(225,25,36,.14);
      border-radius: 16px;
      background: #fff7f7;
      padding: 12px 14px;
      color: var(--muted);
      font-weight: 900;
    }
    .drawer-total-preview b { color: var(--black); font-size: 20px; }
    .drawer-summary {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
    }
    .drawer-summary:empty { display: none; }
    .summary-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 850; }
    .summary-row.total {
      align-items: center;
      color: var(--black);
      font-size: 22px;
      font-weight: 950;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }
    .summary-hint {
      border: 1px solid rgba(12,139,79,.14);
      border-radius: 14px;
      background: rgba(12,139,79,.06);
      color: #276346;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.35;
    }
    .drawer-actions {
      position: sticky;
      bottom: -20px;
      z-index: 4;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(14px);
      margin: 14px -20px -20px;
      padding: 14px 20px 18px;
      border-top: 1px solid var(--line);
    }
    .drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

    .mobile-bar { display: none; }
    .mobile-cart-float {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 44;
      width: auto;
      min-width: 210px;
      max-width: min(330px, calc(100% - 32px));
      min-height: 52px;
      border: 0;
      border-radius: 999px;
      background: var(--black);
      color: #fff;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 16px;
      font-weight: 950;
      box-shadow: 0 16px 34px rgba(0,0,0,.22);
      overflow: hidden;
      isolation: isolate;
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .mobile-cart-float::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.18) 44%, transparent 56%),
        radial-gradient(circle at 18% 50%, rgba(225,25,36,.28), transparent 34%);
      transform: translateX(-105%);
      opacity: 0;
      transition: opacity .22s ease;
    }
    .mobile-cart-float.visible { display: flex; animation: fadeUp .2s ease both; }
    .mobile-cart-float:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 24px 58px rgba(0,0,0,.3), 0 0 0 6px rgba(225,25,36,.08);
      background: #050505;
    }
    .mobile-cart-float:hover::before {
      opacity: 1;
      animation: shineSweep .85s ease both;
    }
    .mobile-cart-float:active { transform: translateY(0) scale(.98); }
    .float-cart-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
    .float-cart-left svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 65%; }
    .mobile-cart-float:hover .float-cart-left svg { animation: cartIconWiggle .62s ease both; }
    #mobileCartFloatText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #mobileCartFloatTotal {
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      padding: 5px 9px;
      font-size: 13px;
      transform-origin: center;
    }
    .mobile-cart-float:hover #mobileCartFloatTotal { animation: cartTotalPop .46s ease both; }
    .filter-sheet { display: none; }

    .trust-main {
      padding: 42px 0 0;
    }

    .trust-hero {
      position: relative;
      min-height: 430px;
      display: grid;
      align-items: center;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 30px;
      padding: 58px;
      box-shadow: var(--shadow);
      background:
        linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 48%, rgba(255,255,255,.2) 100%),
        url("../assets/optimized/original-market-hero-brand.jpg") right center / auto 100% no-repeat,
        #fff;
    }

    .trust-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(135deg, rgba(225,25,36,.035) 0 1px, transparent 1px 24px),
        radial-gradient(circle at 16% 24%, rgba(225,25,36,.1), transparent 28%);
      pointer-events: none;
    }

    .trust-hero::after {
      content: "";
      position: absolute;
      right: 22px;
      bottom: 22px;
      width: 190px;
      height: 190px;
      border: 1px solid rgba(225,25,36,.18);
      border-radius: 34px;
      transform: rotate(-8deg);
      opacity: .5;
    }

    .trust-hero > div {
      position: relative;
      z-index: 1;
      max-width: 780px;
    }

    .trust-kicker {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      border-radius: 999px;
      padding: 0 16px;
      background: rgba(225,25,36,.08);
      color: var(--red);
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .trust-hero h1 {
      margin: 22px 0 18px;
      max-width: 900px;
      color: var(--black);
      font-size: clamp(42px, 5.2vw, 76px);
      line-height: .95;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .trust-hero p {
      margin: 0;
      max-width: 650px;
      color: var(--muted);
      font-size: 20px;
      line-height: 1.45;
      font-weight: 800;
    }

    .trust-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .trust-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 22px;
      align-items: start;
      margin-top: 28px;
    }

    .trust-content {
      display: grid;
      gap: 22px;
    }

    .trust-card,
    .trust-note,
    .trust-side-card,
    .mini-map {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow-soft);
    }

    .trust-card,
    .trust-note,
    .trust-side-card {
      padding: 28px;
    }

    .trust-card::after,
    .trust-side-card::after {
      content: "";
      position: absolute;
      right: -54px;
      bottom: -54px;
      width: 150px;
      height: 150px;
      border-radius: 36px;
      border: 1px solid rgba(225,25,36,.12);
      transform: rotate(-14deg);
      pointer-events: none;
    }

    .trust-card h2,
    .trust-side-card h3 {
      position: relative;
      z-index: 1;
      margin: 14px 0 12px;
      color: var(--black);
      line-height: 1.04;
      letter-spacing: 0;
    }

    .trust-card h2 { font-size: clamp(28px, 3.2vw, 42px); }
    .trust-side-card h3 { font-size: 24px; }

    .trust-card p,
    .trust-side-card p,
    .trust-note p,
    .mini-map p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
      font-weight: 750;
    }

    .trust-grid {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .trust-grid.three { grid-template-columns: repeat(3, 1fr); }

    .trust-grid div,
    .trust-list div {
      position: relative;
      z-index: 1;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 16px;
    }

    .trust-grid b,
    .trust-list b {
      display: block;
      color: var(--black);
      font-size: 17px;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .trust-grid span,
    .trust-list span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 750;
    }

    .trust-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .trust-list div {
      border-left: 5px solid var(--red);
    }

    .trust-steps {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .trust-steps div {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 4px 14px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 16px;
    }

    .trust-steps span {
      grid-row: span 2;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      font-weight: 950;
    }

    .trust-steps b {
      color: var(--black);
      font-size: 17px;
      line-height: 1.2;
    }

    .trust-steps p {
      margin: 0;
      color: var(--muted);
      font-weight: 750;
      line-height: 1.4;
    }

    .trust-side {
      position: sticky;
      top: 18px;
      display: grid;
      gap: 14px;
    }

    .trust-side-card.dark {
      background:
        radial-gradient(circle at 82% 12%, rgba(225,25,36,.25), transparent 34%),
        linear-gradient(135deg, #060606, #17191c);
      border-color: #141414;
      color: #fff;
    }

    .trust-side-card.dark h3,
    .trust-side-card.dark p {
      color: #fff;
    }

    .trust-note {
      border-color: rgba(225,25,36,.22);
      background: rgba(225,25,36,.045);
    }

    .trust-note b {
      display: block;
      color: var(--red);
      margin-bottom: 8px;
      font-size: 20px;
    }

    .trust-contact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 28px;
    }

    .trust-contact-grid .trust-card h2 {
      font-size: 28px;
      text-transform: none;
    }

    .mini-map {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(5,5,5,.88), rgba(22,22,22,.72)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 1px, transparent 1px 24px),
        #111;
    }

    .mini-map span {
      color: var(--red);
      font-weight: 950;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .mini-map b {
      color: #fff;
      font-size: 42px;
      line-height: 1;
      margin-bottom: 10px;
    }

    .mini-map p {
      color: rgba(255,255,255,.76);
    }

    .trust-faq {
      display: grid;
      gap: 12px;
      margin-top: 28px;
    }

    .trust-faq details {
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255,255,255,.94);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .trust-faq summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      color: var(--black);
      font-size: 20px;
      font-weight: 950;
      cursor: pointer;
      list-style: none;
    }

    .trust-faq summary::-webkit-details-marker { display: none; }

    .trust-faq summary::after {
      content: "+";
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      flex: 0 0 32px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
    }

    .trust-faq details[open] summary::after { content: "−"; }

    .trust-faq p {
      margin: 0;
      padding: 0 24px 22px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.5;
      font-weight: 750;
    }

    footer {
      position: relative;
      overflow: hidden;
      margin-top: 28px;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 22px),
        linear-gradient(135deg, #050505, #101010);
      color: #fff;
      padding: 38px 0 34px;
    }
    footer::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--red), var(--black), var(--red));
    }
    footer::after {
      content: "ORIGINAL MARKET";
      position: absolute;
      right: -18px;
      bottom: -12px;
      color: rgba(255,255,255,.035);
      font-size: 86px;
      font-weight: 950;
      letter-spacing: 0;
      pointer-events: none;
    }
    .footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 28px; }
    footer img { width: 110px; background: #fff; border-radius: 14px; box-shadow: 0 18px 34px rgba(0,0,0,.22); }
    footer p, footer a { color: rgba(255,255,255,.7); line-height: 1.5; font-size: 14px; }
    footer a:hover { color: var(--yellow); }
    footer h4 { margin: 0 0 10px; position: relative; }
    footer h4::after {
      content: "";
      display: block;
      width: 34px;
      height: 2px;
      border-radius: 999px;
      background: var(--red);
      margin-top: 8px;
    }

    .site-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      z-index: 90;
      max-width: min(460px, calc(100% - 28px));
      border-radius: 999px;
      background: var(--black);
      color: #fff;
      padding: 13px 18px;
      font-weight: 900;
      box-shadow: 0 18px 48px rgba(0,0,0,.18);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 18px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .site-toast.visible {
      opacity: 1;
      transform: translate(-50%, 0);
      animation: toastIn .18s ease both;
    }
    .modal.open ~ .site-toast { display: none; }
    body[data-view="order"] .site-toast,
    body[data-view="profile"] .site-toast,
    body[data-view="success"] .site-toast { display: none; }

    .order-details {
      display: none;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .order-card.open .order-details { display: block; }

    .cart-count,
    .user-pill span,
    .badge,
    .circle-arrow,
    .photo::after,
    .checkout-progress span.active,
    .step-number,
    .checkout-summary-head b,
    .avatar,
    .mobile-nav-btn.active {
      color: #fff !important;
    }

    /* Cleaner storefront direction based on the latest visual reference */
    body {
      background:
        linear-gradient(180deg, #fff 0%, #fbfbfb 54%, #fff 100%);
      background-attachment: fixed;
    }

    body::before {
      background:
        linear-gradient(115deg, transparent 0 12%, rgba(225,25,36,.035) 12% 12.22%, transparent 12.22% 100%),
        linear-gradient(115deg, transparent 0 86%, rgba(9,9,9,.028) 86% 86.18%, transparent 86.18% 100%),
        linear-gradient(0deg, transparent 0 calc(100% - 1px), rgba(225,25,36,.026) calc(100% - 1px) 100%);
      background-size: 100% 100%, 100% 100%, 100% 250px;
    }

    body::after {
      opacity: .58;
      background:
        linear-gradient(135deg, transparent 0 22%, rgba(225,25,36,.024) 22% 22.12%, transparent 22.12% 100%),
        linear-gradient(135deg, transparent 0 70%, rgba(9,9,9,.022) 70% 70.1%, transparent 70.1% 100%);
    }

    header {
      background: rgba(255,255,255,.97);
      box-shadow: 0 10px 30px rgba(15,15,15,.035);
    }

    .nav {
      height: 86px;
      grid-template-columns: 142px 1fr auto;
    }

    .logo img {
      width: 112px;
      height: 68px;
    }

    .nav-links {
      gap: 28px;
      font-size: 12px;
    }

    .nav-tab,
    .icon-button,
    .btn {
      min-height: 42px;
    }

    .nav-links .nav-tab[data-view="catalog"] {
      gap: 10px;
      padding-inline: 18px;
    }

    .nav-links .nav-tab[data-view="catalog"]::before {
      content: "";
      width: 14px;
      height: 10px;
      background:
        linear-gradient(currentColor 0 0) top left / 14px 2px no-repeat,
        linear-gradient(currentColor 0 0) center left / 14px 2px no-repeat,
        linear-gradient(currentColor 0 0) bottom left / 14px 2px no-repeat;
      border-radius: 999px;
    }

    .btn.yellow,
    .nav-tab.active,
    .circle-arrow {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: 0 12px 24px rgba(225,25,36,.18);
    }

    .hero {
      min-height: 535px;
      grid-template-columns: .86fr 1.14fr;
      gap: 32px;
      padding: 40px 0 34px;
    }

    .hero::before {
      display: none;
    }

    .hero::after {
      right: -7%;
      top: 48px;
      width: 59%;
      height: 430px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.04), rgba(246,246,246,.92));
      border-radius: 32px 0 0 32px;
    }

    .badge {
      background: #fff1f2;
      color: var(--red) !important;
      box-shadow: none;
      min-height: 30px;
      padding-inline: 13px;
      margin-bottom: 20px;
    }

    h1 {
      max-width: 600px;
      font-size: clamp(42px, 4.7vw, 66px);
      line-height: 1.03;
    }

    h1 .yellow {
      color: var(--red);
    }

    .hero p {
      max-width: 470px;
      color: #60636a;
      font-size: 17px;
      font-weight: 600;
    }

    .hero-actions .btn.dark {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: 0 18px 34px rgba(225,25,36,.22);
    }

    .hero-actions .btn.yellow {
      animation: none;
      background: #fff;
      border-color: var(--line);
      color: var(--black);
      box-shadow: 0 14px 28px rgba(18,18,18,.08);
    }

    .hero-products {
      min-height: 430px;
      border-radius: 0 0 0 32px;
      box-shadow: 0 26px 70px rgba(0,0,0,.06);
      background: transparent;
    }

    .hero-products img {
      height: 430px;
      object-position: center right;
    }

    .benefits {
      margin-top: 2px;
      padding-bottom: 30px;
    }

    .benefit-icon,
    .service-icon {
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--red);
      box-shadow: 0 10px 24px rgba(18,18,18,.055);
    }

    section {
      padding: 30px 0;
    }

    .section-title {
      font-size: 28px;
      margin-bottom: 28px;
    }

    .section-title::before,
    .section-title::after {
      flex-basis: clamp(32px, 7vw, 84px);
    }

    .category {
      min-height: 288px;
      border-color: #ececec;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 18px 38px rgba(20,20,20,.055);
    }

    .category::before {
      height: 3px;
      background: var(--red);
      opacity: 0;
      transition: opacity .18s ease;
    }

    .category:hover {
      border-color: rgba(225,25,36,.22);
      box-shadow: 0 24px 52px rgba(20,20,20,.09);
    }

    .category:hover::before {
      opacity: 1;
    }

    .category-visual {
      height: 214px;
      background: #fafafa;
      border-radius: 14px;
    }

    .category-visual img[src*="category-icons/"] {
      width: auto;
      height: calc(100% - 10px);
      max-width: 100%;
      object-fit: contain;
      object-position: center top;
      transform: translateY(-4px);
      mix-blend-mode: normal;
    }

    .category-visual img[src*="category-icons/laundry"] {
      clip-path: inset(3px 0 0 0);
    }

    .category b {
      min-height: 34px;
      font-size: 15px;
    }

    .category:hover .circle-arrow {
      background: var(--black);
      color: #fff;
    }

    .promo,
    .service-strip,
    .info-card {
      border-color: #eeeeee;
      border-radius: 16px;
      box-shadow: 0 18px 42px rgba(20,20,20,.055);
    }

    .promo::before,
    .info-card::before,
    .service-strip::before {
      background: linear-gradient(135deg, transparent 0 86%, rgba(225,25,36,.04) 86% 86.24%, transparent 86.24% 100%);
    }

    .promo.dark {
      background: linear-gradient(135deg, #08090b, #1b1e22);
    }

    .promo.dark::after {
      content: "";
      position: absolute;
      right: 46px;
      bottom: 26px;
      width: 174px;
      height: 108px;
      border: 14px solid #262a2f;
      border-top-width: 18px;
      border-radius: 18px 18px 34px 34px;
      opacity: .88;
      pointer-events: none;
    }

    .promo.dark .percent {
      right: 92px;
      bottom: 98px;
      width: 88px;
      height: 88px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--red);
      color: #fff;
      font-size: 64px;
      line-height: 1;
      transform: rotate(-12deg);
      box-shadow: 0 18px 34px rgba(225,25,36,.28);
      z-index: 2;
    }

    .percent::after {
      display: none;
    }

    .promo.dark .btn.yellow {
      animation: none;
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: none;
    }

    .brand-chip {
      border-radius: 12px;
      padding: 6px 12px;
      min-height: 52px;
    }

    .brand-chip::before {
      height: 2px;
      background: var(--red);
    }

    .brand-chip img {
      height: 46px;
    }

    .service-strip {
      padding: 20px 24px;
    }

    .info-card {
      background: #fff;
    }

    .info-card.warm {
      background:
        linear-gradient(135deg, rgba(225,25,36,.07), rgba(255,255,255,.9) 58%),
        #fff;
    }

    .info-card.dark {
      background: linear-gradient(135deg, #090a0d, #1c2025);
    }

    .catalog-layout::before {
      background: linear-gradient(135deg, transparent 0 86%, rgba(225,25,36,.04) 86% 86.2%, transparent 86.2% 100%);
    }

    footer {
      background: linear-gradient(135deg, #050607, #12161a);
    }

    footer::before {
      background: var(--red);
      height: 4px;
    }

    footer::after {
      font-size: 74px;
      opacity: .9;
    }

    footer a:hover {
      color: #fff;
    }

    .btn,
    .add,
    .details-button,
    .icon-button,
    .chip,
    .category,
    .product-card,
    .brand-chip {
      will-change: transform;
    }

    .btn,
    .add,
    .details-button,
    .nav-tab {
      position: relative;
      overflow: hidden;
    }

    .btn::after,
    .add::after,
    .details-button::after,
    .nav-tab::after {
      content: "";
      position: absolute;
      inset: -40% auto -40% -60%;
      width: 42%;
      transform: skewX(-18deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
      opacity: 0;
      pointer-events: none;
      transition: transform .42s ease, opacity .18s ease;
    }

    .btn:hover::after,
    .add:hover::after,
    .details-button:hover::after,
    .nav-tab:hover::after {
      opacity: 1;
      transform: translateX(360%) skewX(-18deg);
    }

    .btn:focus-visible,
    .add:focus-visible,
    .details-button:focus-visible,
    .icon-button:focus-visible,
    .chip:focus-visible,
    .nav-tab:focus-visible,
    .category:focus-visible,
    .brand-chip:focus-visible {
      outline: 3px solid rgba(225,25,36,.22);
      outline-offset: 3px;
    }

    :where(button, a, input, select, textarea, [tabindex]):focus-visible {
      outline: 3px solid rgba(225,25,36,.3);
      outline-offset: 3px;
    }

    :where(input, select, textarea):focus-visible {
      border-color: var(--red);
      box-shadow: 0 0 0 4px rgba(225,25,36,.08);
    }

    .hero-actions .btn,
    .promo .btn {
      min-width: 152px;
    }

    .benefit,
    .service-item {
      transition: transform .18s ease;
    }

    .benefit:hover,
    .service-item:hover {
      transform: translateY(-2px);
    }

    .benefit:hover .benefit-icon,
    .service-item:hover .service-icon {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: 0 14px 30px rgba(225,25,36,.16);
    }

    .category-visual img,
    .photo img {
      transition: transform .22s ease, filter .22s ease;
    }

    .category:hover .category-visual img {
      transform: translateY(-4px) scale(1.04);
      filter: saturate(1.06);
    }

    .product-card {
      border-color: #eeeeee;
      box-shadow: 0 16px 34px rgba(20,20,20,.052);
    }

    .product-card:hover {
      border-color: rgba(225,25,36,.24);
      box-shadow: 0 24px 54px rgba(20,20,20,.09);
    }

    .product-card:hover .photo img {
      transform: translateY(-5px) scale(1.045);
      filter: saturate(1.04);
    }

    .photo {
      background:
        linear-gradient(135deg, rgba(225,25,36,.03), transparent 46%),
        #fbfaf7;
    }

    .photo::after {
      background: var(--red);
      color: #fff !important;
      box-shadow: 0 8px 18px rgba(225,25,36,.16);
    }

    .label {
      color: var(--red) !important;
      background: #fff1f2;
    }

    .price span {
      color: #0c8b4f;
    }

    .qty {
      background: #fff;
      transition: border-color .16s ease, box-shadow .16s ease;
    }

    .qty:hover {
      border-color: rgba(225,25,36,.22);
      box-shadow: 0 8px 18px rgba(20,20,20,.05);
    }

    .add {
      min-height: 42px;
      box-shadow: 0 12px 24px rgba(225,25,36,.16);
    }

    .details-button {
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
    }

    .cart {
      background: #fff;
      border-color: #eeeeee;
      box-shadow: 0 18px 42px rgba(20,20,20,.07);
    }

    .cart-line,
    .drawer-line {
      transition: background .16s ease;
    }

    .cart-line:hover,
    .drawer-line:hover {
      background: #fafafa;
    }

    .mobile-cart-float {
      box-shadow: 0 18px 48px rgba(0,0,0,.24);
    }

    .site-toast {
      border: 1px solid rgba(255,255,255,.16);
    }

    .catalog-view > section:not(.hero),
    .benefits,
    .order-view,
    .profile-view,
    .final-view {
      content-visibility: auto;
      contain-intrinsic-size: 520px;
    }

    .wrap {
      width: min(1440px, calc(100% - 28px));
    }

    .hero {
      min-height: clamp(430px, 32vw, 520px);
      display: flex;
      align-items: center;
      padding: clamp(34px, 3.8vw, 56px) clamp(34px, 5vw, 82px);
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 28%, rgba(255,255,255,.82) 38%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 61%),
        url("../assets/optimized/original-market-home-hero.png") calc(100% - 12px) center / auto 71% no-repeat;
      box-shadow: 0 18px 54px rgba(20,20,20,.045);
      overflow: hidden;
    }

    .hero::before,
    .hero::after {
      display: none;
    }

    .hero > div:first-child {
      position: relative;
      z-index: 2;
      width: min(660px, 46%);
    }

    .hero-products {
      display: none;
    }

    .hero h1,
    h1 {
      max-width: none;
    }

    .hero h1 {
      font-size: clamp(34px, 2.75vw, 46px);
      line-height: 1.04;
      white-space: nowrap;
    }

    .hero p {
      max-width: 440px;
      font-size: 16px;
    }

    .hero-super .badge {
      background: var(--red);
      color: #fff !important;
    }

    .hero-super h1 span { color: var(--red) !important; }

    .hero-super .yellow { color: var(--red); }

    .hero-flags {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      align-items: start;
      justify-items: center;
      width: 100%;
      gap: 0;
      margin-top: 18px;
    }

    .hero-flags span {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
      gap: 5px;
      color: #4d4d4d;
      font-size: clamp(8px, .7vw, 10px);
      font-weight: 800;
      white-space: nowrap;
    }

    .hero-flags img {
      width: 42px;
      height: 28px;
      object-fit: cover;
      border: 1px solid rgba(20,20,20,.12);
      border-radius: 3px;
      box-shadow: 0 2px 5px rgba(0,0,0,.08);
    }

    .benefits {
      margin-top: 12px;
      padding-bottom: 26px;
    }

    .catalog-layout {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .catalog-main {
      min-width: 0;
    }

    .catalog-content {
      grid-column: 1 / -1;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-content: start;
    }

    .catalog-layout > .cart {
      display: none;
    }

    .catalog-layout > .catalog-count {
      grid-column: 1;
      grid-row: 2;
    }

    .catalog-layout > .grid {
      grid-column: 1;
      grid-row: 3;
    }

    .catalog-layout > .catalog-more {
      grid-column: 1;
      grid-row: 4;
    }

    #productGrid.grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    #productGrid .product-card {
      min-width: 0;
    }

    #catalog .section-title {
      margin-bottom: 22px;
    }

    .catalog-main {
      padding: 18px;
      border: 1px solid #eee8dd;
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.025), transparent 44%),
        rgba(255,255,255,.96);
      box-shadow: 0 18px 46px rgba(20,20,20,.045);
    }

    .catalog-tools {
      gap: 12px;
      margin-bottom: 14px;
    }

    .catalog-tools input,
    .catalog-tools select,
    .catalog-tools button {
      min-height: 48px;
      font-size: 14px;
      box-shadow: 0 8px 18px rgba(20,20,20,.035);
    }

    .filters {
      margin-bottom: 0;
    }

    .subfilters {
      display: flex;
      align-items: stretch;
      gap: 8px;
      margin-top: 10px;
      padding: 10px 2px 2px;
      border-top: 1px solid rgba(232,227,216,.72);
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      mask-image: none;
    }

    .subfilters::-webkit-scrollbar {
      display: none;
    }

    .subfilters-title {
      flex: 0 0 auto;
      width: 94px;
      min-width: 94px;
      display: grid;
      align-content: center;
      color: var(--black);
      font-weight: 950;
      line-height: 1.05;
    }

    .subfilters-title small {
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      text-transform: none;
      white-space: nowrap;
    }

    .tag-chip {
      position: relative;
      flex: 0 0 auto;
      width: auto;
      min-width: 148px;
      max-width: 248px;
      min-height: 42px;
      display: inline-flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      border: 1px solid rgba(232,227,216,.9);
      border-radius: 999px;
      background: #fff;
      color: var(--black);
      padding: 8px 10px 8px 15px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(20,20,20,.025);
      transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .tag-chip b,
    .tag-chip small {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tag-chip b {
      color: inherit;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
    }

    .tag-chip small {
      display: none;
    }

    .tag-chip span {
      position: static;
      flex: 0 0 auto;
      min-width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #fff1f2;
      color: var(--red);
      padding: 0 6px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
    }

    .tag-chip:hover {
      transform: translateY(-2px);
      border-color: rgba(225,25,36,.28);
      color: var(--black);
      box-shadow: 0 10px 22px rgba(20,20,20,.05);
    }

    .tag-chip.active {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: 0 12px 28px rgba(225,25,36,.14);
    }

    .tag-chip.active span {
      background: rgba(255,255,255,.18);
      color: #fff;
    }
    .tag-chip-all {
      min-width: 140px;
    }
    .active-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 12px 0 0;
    }
    .active-filter-bar:empty { display: none; }
    .active-filter-bar > span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .active-filter-bar button {
      min-height: 34px;
      border: 1px solid rgba(225,25,36,.16);
      border-radius: 999px;
      background: #fff7f7;
      color: var(--red);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 11px;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease;
    }
    .active-filter-bar button:hover {
      transform: translateY(-2px);
      border-color: rgba(225,25,36,.34);
      background: #fff;
    }
    .active-filter-bar i {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 13px;
      line-height: 1;
    }
    .active-filter-bar .clear-all {
      background: var(--black);
      border-color: var(--black);
      color: #fff;
    }

    .catalog-count {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      border: 1px solid rgba(225,25,36,.12);
      border-radius: 999px;
      background: #fff;
      padding: 8px 14px;
      color: var(--black);
      box-shadow: 0 10px 22px rgba(20,20,20,.035);
    }
    .recently-viewed {
      margin: 18px 0 12px;
      border: 1px solid rgba(225,25,36,.14);
      border-radius: 20px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.07), transparent 34%),
        #fff;
      padding: 14px;
      box-shadow: var(--shadow-soft);
    }
    .recently-viewed:empty { display: none; }
    .recent-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }
    .recent-head span {
      display: block;
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .recent-head b {
      display: block;
      margin-top: 3px;
      color: var(--black);
      font-size: 18px;
    }
    .recent-head .btn {
      min-height: 34px;
      padding: 0 12px;
      font-size: 12px;
    }
    .recent-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .recent-item {
      min-width: 0;
      display: grid;
      grid-template-columns: 1fr 34px;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff8f8;
      padding: 8px;
    }
    .recent-main {
      min-width: 0;
      border: 0;
      background: transparent;
      padding: 0;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      text-align: left;
      cursor: pointer;
    }
    .recent-main img,
    .recent-main .pack-art {
      width: 48px;
      height: 48px;
      object-fit: contain;
      border-radius: 12px;
      background: #fff;
      padding: 4px;
    }
    .recent-main span,
    .recent-main b,
    .recent-main small {
      min-width: 0;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .recent-main b {
      color: var(--black);
      font-size: 12px;
      font-weight: 950;
    }
    .recent-main small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }
    .recent-add {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(225,25,36,.16);
    }
    .favorite-panel {
      margin: 12px 0 14px;
      border: 1px solid rgba(9,9,9,.08);
      border-radius: 20px;
      background:
        radial-gradient(circle at 100% 0, rgba(9,9,9,.08), transparent 35%),
        linear-gradient(145deg, #101114, #1b1d21);
      color: #fff;
      padding: 14px;
      box-shadow: 0 16px 42px rgba(10,10,10,.13);
    }
    .favorite-panel:empty { display: none; }
    .favorite-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }
    .favorite-head span {
      display: block;
      color: rgba(255,255,255,.64);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .favorite-head b {
      display: block;
      margin-top: 3px;
      color: #fff;
      font-size: 18px;
    }
    .favorite-head .btn {
      min-height: 34px;
      padding: 0 12px;
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      color: #fff;
      font-size: 12px;
    }
    .favorite-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .favorite-item {
      min-width: 0;
      display: grid;
      grid-template-columns: 1fr 34px;
      gap: 8px;
      align-items: center;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.07);
      padding: 8px;
    }
    .favorite-main {
      min-width: 0;
      border: 0;
      background: transparent;
      padding: 0;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      text-align: left;
      cursor: pointer;
    }
    .favorite-main img,
    .favorite-main .pack-art {
      width: 46px;
      height: 46px;
      object-fit: contain;
      border-radius: 12px;
      background: #fff;
      padding: 4px;
    }
    .favorite-main span,
    .favorite-main b,
    .favorite-main small {
      min-width: 0;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .favorite-main b {
      color: #fff;
      font-size: 12px;
      font-weight: 950;
    }
    .favorite-main small {
      margin-top: 3px;
      color: rgba(255,255,255,.62);
      font-size: 11px;
      font-weight: 850;
    }
    .favorite-add {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(225,25,36,.2);
    }

    /* Secondary catalog history: useful, but visually quieter than the product grid. */
    .recently-viewed,
    .favorite-panel {
      margin: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fbfaf7;
      color: var(--black);
      box-shadow: none;
    }

    .recent-head,
    .favorite-head {
      margin-bottom: 9px;
    }

    .recent-head b,
    .favorite-head b {
      margin-top: 1px;
      color: var(--black);
      font-size: 15px;
    }

    .favorite-head span {
      color: var(--red);
    }

    .favorite-head .btn {
      min-height: 32px;
      border-color: var(--line);
      background: #fff;
      color: var(--muted);
      box-shadow: none;
    }

    .recent-list,
    .favorite-list {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    .recent-list::-webkit-scrollbar,
    .favorite-list::-webkit-scrollbar {
      display: none;
    }

    .recent-item,
    .favorite-item {
      flex: 0 0 min(290px, 82vw);
      grid-template-columns: minmax(0, 1fr) 34px;
      border-color: var(--line);
      background: #fff;
      scroll-snap-align: start;
    }

    .favorite-main b {
      color: var(--black);
    }

    .favorite-main small {
      color: var(--muted);
    }

    .catalog-page .catalog-page-head {
      position: relative;
      max-width: none;
      min-height: 246px;
      margin-top: 6px;
      margin-bottom: 18px;
      padding: 28px min(43vw, 560px) 24px 0;
      overflow: hidden;
    }

    .catalog-page .catalog-page-head::after {
      content: "";
      position: absolute;
      right: 0;
      top: 12px;
      width: min(40vw, 530px);
      height: 220px;
      border-radius: 30px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.24) 46%, rgba(255,255,255,0) 100%),
        url("../assets/optimized/original-market-hero-brand.jpg") right center / cover no-repeat;
      box-shadow: 0 24px 60px rgba(20,20,20,.08);
    }

    .catalog-page .catalog-page-head > * {
      position: relative;
      z-index: 1;
    }

    .catalog-page .catalog-page-head h1 {
      max-width: 760px;
      font-size: clamp(36px, 4.2vw, 58px);
      line-height: .96;
    }

    .catalog-page .catalog-page-head p {
      max-width: 620px;
      margin-top: 12px;
      font-size: 16px;
      line-height: 1.45;
    }

    .catalog-head-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .catalog-head-metrics span {
      border: 1px solid rgba(225,25,36,.12);
      border-radius: 999px;
      background: #fff;
      color: var(--black);
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 950;
      box-shadow: 0 8px 18px rgba(20,20,20,.035);
    }

    .catalog-brand-panel {
      grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr);
      gap: 18px;
      margin: 0 0 22px;
      padding: 18px 22px;
      border-radius: 22px;
    }

    .catalog-brand-panel h3 {
      margin-bottom: 8px;
      font-size: clamp(22px, 2.3vw, 30px);
      line-height: 1.05;
    }

    .catalog-brand-panel p {
      max-width: 320px;
      font-size: 14px;
      margin: 0;
    }

    .catalog-brand-panel .brand-cloud {
      grid-template-columns: repeat(5, minmax(76px, 1fr));
      gap: 8px;
    }

    .catalog-brand-panel .brand-chip {
      min-height: 48px;
      border-radius: 12px;
      padding: 5px 10px;
    }

    .catalog-brand-panel .brand-chip img {
      height: 42px;
    }

    .shopping-intents {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      margin: 18px 0 24px;
    }

    .shopping-intents button {
      min-width: 0;
      min-height: 82px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,246,.72)),
        #fff;
      color: var(--black);
      padding: 13px;
      text-align: left;
      box-shadow: 0 12px 28px rgba(20,20,20,.045);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .shopping-intents button:hover,
    .shopping-intents button.active {
      transform: translateY(-3px);
      border-color: rgba(225,25,36,.35);
      box-shadow: 0 18px 44px rgba(225,25,36,.12);
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.16), transparent 36%),
        #fff;
    }

    .shopping-intents span {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      border-radius: 999px;
      background: #fff1f2;
      color: var(--red);
      padding: 0 8px;
      font-size: 11px;
      font-weight: 950;
    }

    .shopping-intents b {
      display: block;
      margin-top: 9px;
      color: var(--black);
      font-size: 13px;
      line-height: 1.18;
    }
    .catalog-trust-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
      gap: 10px;
      align-items: stretch;
      margin: -6px 0 30px;
      border: 1px solid rgba(225,25,36,.13);
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0, rgba(225,25,36,.1), transparent 36%),
        linear-gradient(145deg, #fff, #fff8f8);
      padding: 12px;
      box-shadow: var(--shadow-soft);
    }
    .catalog-trust-card {
      min-width: 0;
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(232,227,216,.82);
      border-radius: 16px;
      background: rgba(255,255,255,.8);
      padding: 10px;
    }
    .catalog-trust-card i {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-style: normal;
      font-weight: 950;
      box-shadow: 0 10px 24px rgba(225,25,36,.16);
    }
    .catalog-trust-card span,
    .catalog-trust-card b {
      min-width: 0;
      display: block;
    }
    .catalog-trust-card b {
      color: var(--black);
      font-size: 13px;
      line-height: 1.2;
    }
    .catalog-trust-card span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 820;
      line-height: 1.3;
    }
    .catalog-trust-action {
      min-width: 190px;
      border: 0;
      border-radius: 16px;
      background: var(--black);
      color: #fff;
      padding: 0 18px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 14px 30px rgba(20,20,20,.14);
    }

    .catalog-control-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 10px;
    }

    .catalog-control-head span {
      display: block;
      color: var(--red);
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .catalog-control-head b {
      display: block;
      margin-top: 4px;
      color: var(--black);
      font-size: 18px;
      line-height: 1.15;
    }

    .catalog-control-head small {
      flex: 0 0 auto;
      border-radius: 999px;
      background: #fff1f2;
      color: var(--red);
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 950;
    }
    .catalog-stats {
      display: none;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 12px;
    }
    .catalog-stats span {
      min-width: 0;
      border: 1px solid rgba(232,227,216,.82);
      border-radius: 14px;
      background: linear-gradient(145deg, #fff, #fff8f8);
      color: var(--muted);
      padding: 9px 10px;
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .catalog-stats b {
      color: var(--black);
      font-size: 15px;
      margin-right: 4px;
    }

    .catalog-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      margin-bottom: 8px;
    }

    .catalog-search-row input,
    .catalog-tools select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      padding: 0 16px;
      color: var(--black);
      font-weight: 850;
      outline: 0;
      box-shadow: 0 8px 18px rgba(20,20,20,.035);
    }

    .catalog-search-row input:focus,
    .catalog-tools select:focus {
      border-color: rgba(225,25,36,.36);
      box-shadow: 0 0 0 4px rgba(225,25,36,.1);
    }

    .search-suggestions {
      display: grid;
      gap: 10px;
      margin: 4px 0 14px;
      border: 1px solid rgba(232,227,216,.92);
      border-radius: 20px;
      background: #fff;
      padding: 14px;
      box-shadow: 0 20px 48px rgba(20,20,20,.1);
    }

    .search-suggestions:empty {
      display: none;
    }

    .search-suggestions-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .search-suggestions-head span,
    .search-suggestions-head b { display: block; }
    .search-suggestions-head span {
      color: var(--red);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .search-suggestions-head b {
      margin-top: 2px;
      color: var(--black);
      font-size: 16px;
    }
    .search-suggestions-head small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }
    .search-product-results {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .search-product-result {
      min-width: 0;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--paper);
      padding: 9px;
      color: var(--black);
      text-align: left;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .search-product-result:hover {
      transform: translateY(-2px);
      border-color: rgba(225,25,36,.3);
      box-shadow: var(--shadow-soft);
    }
    .search-product-result img,
    .search-product-result .pack-art {
      width: 48px;
      height: 48px;
      border-radius: 11px;
      background: #fff;
      object-fit: contain;
      padding: 4px;
    }
    .search-product-result > span { min-width: 0; }
    .search-product-result b,
    .search-product-result small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .search-product-result b { font-size: 12px; }
    .search-product-result small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }
    .search-product-result strong {
      color: var(--red);
      font-size: 12px;
      white-space: nowrap;
    }
    .search-hints {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .search-hints button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      border: 1px solid rgba(232,227,216,.9);
      border-radius: 999px;
      background: #fff;
      color: var(--black);
      padding: 8px 11px;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(20,20,20,.035);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .search-hints button:hover {
      transform: translateY(-1px);
      border-color: rgba(225,25,36,.3);
      box-shadow: 0 12px 26px rgba(225,25,36,.1);
    }

    .search-hints button > span {
      flex: 0 0 auto;
      border-radius: 999px;
      background: #fff1f2;
      color: var(--red);
      padding: 4px 7px;
      font-size: 10px;
      text-transform: uppercase;
    }

    .search-hints button > b {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .search-show-all {
      min-height: 40px;
      border: 0;
      border-radius: 12px;
      background: var(--black);
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
    }
    .search-no-match {
      border-radius: 14px;
      background: #fff7f7;
      padding: 14px;
    }
    .search-no-match b,
    .search-no-match span { display: block; }
    .search-no-match b { color: var(--black); }
    .search-no-match span { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .search-empty-state {
      grid-column: 1 / -1;
      width: 100%;
      display: grid;
      justify-items: center;
      gap: 8px;
      padding: 34px 18px;
    }
    .search-empty-state b { color: var(--black); font-size: 18px; }
    .search-empty-state span { max-width: 440px; color: var(--muted); }
    .search-empty-state .btn { margin-top: 6px; }

    .catalog-filter-details {
      width: max-content;
      max-width: 100%;
      margin-bottom: 10px;
      border: 1px solid rgba(232,227,216,.9);
      border-radius: 999px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 10px 22px rgba(20,20,20,.025);
    }

    .catalog-filter-details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 310px;
      min-height: 42px;
      padding: 0 14px 0 18px;
      cursor: pointer;
      list-style: none;
      color: var(--black);
      font-weight: 950;
    }

    .catalog-filter-details summary::-webkit-details-marker {
      display: none;
    }

    .catalog-filter-details summary small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .catalog-filter-details summary::after {
      content: "+";
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      font-size: 17px;
      line-height: 1;
    }

    .catalog-filter-details[open] summary {
      border-bottom: 1px solid rgba(232,227,216,.8);
    }

    .catalog-filter-details[open] {
      width: 100%;
      border-radius: 18px;
    }

    .catalog-filter-details[open] summary::after {
      content: "-";
      background: var(--black);
    }

    .catalog-tools {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 0;
      padding: 12px;
    }

    .filters {
      flex-wrap: nowrap;
      gap: 7px;
      margin-bottom: 0;
      padding-top: 2px;
      overflow-x: auto;
      scrollbar-width: none;
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    }

    .filters::-webkit-scrollbar {
      display: none;
    }

    .filters .chip,
    .tag-chip {
      min-height: 34px;
      padding: 7px 12px;
      font-size: 12px;
      white-space: nowrap;
    }

    .subfilters {
      display: flex;
      align-items: stretch;
      gap: 8px;
      margin-top: 10px;
      padding: 10px 2px 2px;
      border-top: 1px solid rgba(232,227,216,.72);
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      mask-image: none;
    }

    .subfilters::-webkit-scrollbar {
      display: none;
    }

    .subfilters-title {
      flex: 0 0 auto;
      width: 94px;
      min-width: 94px;
      display: grid;
      align-content: center;
      color: var(--black);
      font-weight: 950;
      line-height: 1.05;
    }

    .subfilters-title small {
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      text-transform: none;
      white-space: nowrap;
    }

    .tag-chip {
      position: relative;
      flex: 0 0 auto;
      min-width: 148px;
      max-width: 248px;
      min-height: 42px;
      display: inline-flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      border: 1px solid rgba(232,227,216,.9);
      border-radius: 999px;
      background: #fff;
      color: var(--black);
      padding: 8px 10px 8px 15px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(20,20,20,.03);
      transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
    }

    .tag-chip b,
    .tag-chip small {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tag-chip b {
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
    }

    .tag-chip small {
      display: none;
    }

    .tag-chip span {
      position: static;
      flex: 0 0 auto;
      min-width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #fff1f2;
      color: var(--red);
      padding: 0 7px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      transform: none;
    }

    .tag-chip:hover {
      transform: translateY(-2px);
      border-color: rgba(225,25,36,.28);
    }

    .tag-chip.active {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: 0 12px 28px rgba(225,25,36,.14);
    }

    .tag-chip-all {
      min-width: 140px;
    }

    .tag-chip.active span {
      background: rgba(255,255,255,.18);
      color: #fff;
      opacity: 1;
    }

    .cart {
      position: static;
      overflow: hidden;
      border-radius: 24px;
      padding: 0;
      background: #fff;
      box-shadow: 0 18px 48px rgba(20,20,20,.08);
    }

    .cart-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 18px;
      background:
        linear-gradient(135deg, rgba(225,25,36,.08), transparent 55%),
        #fff;
      border-bottom: 1px solid var(--line);
    }

    .cart-head span {
      color: var(--red);
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .cart-head h3 {
      margin: 3px 0 0;
      font-size: 24px;
    }

    .cart-head b {
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--black);
      color: #fff;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 950;
    }
    .cart-head b[hidden] { display: none; }

    .cart.has-items .cart-head {
      background:
        radial-gradient(circle at 92% 0%, rgba(225,25,36,.3), transparent 34%),
        var(--black);
      border-bottom-color: rgba(255,255,255,.08);
    }

    .cart.has-items .cart-head span,
    .cart.has-items .cart-head h3 {
      color: #fff;
    }

    .cart.has-items .cart-head b {
      background: var(--red);
    }

    .cart-empty-state {
      display: grid;
      gap: 5px;
      min-height: 122px;
      padding: 18px;
      align-content: center;
      background:
        repeating-linear-gradient(135deg, rgba(225,25,36,.035) 0 1px, transparent 1px 18px),
        #fff;
    }

    .cart-empty-state span {
      color: var(--black);
      font-size: 17px;
      font-weight: 950;
    }

    .cart-empty-state p {
      margin: 0;
      color: var(--muted);
    }

    .cart-composition {
      display: none;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      padding: 12px 14px 0;
    }

    .cart-composition.visible {
      display: grid;
    }

    .cart-composition span {
      border: 1px solid rgba(232,227,216,.9);
      border-radius: 14px;
      background: #fbfaf7;
      padding: 9px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .cart-composition b {
      color: var(--black);
      font-size: 16px;
    }

    #cartList {
      max-height: 280px;
      overflow: auto;
      padding: 0 14px;
    }

    .cart-line {
      align-items: center;
      border-bottom-color: rgba(232,227,216,.86);
    }

    .cart-total,
    .progress,
    .cart-side-actions,
    .cart > .btn {
      margin-left: 14px;
      margin-right: 14px;
    }

    .cart-side-actions {
      display: none;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin-top: 12px;
    }

    .cart.has-items .cart-side-actions {
      display: grid;
    }

    .cart-side-actions .btn {
      min-height: 40px;
      padding: 0 12px;
      font-size: 13px;
    }

    .cart-side-actions .ghost {
      color: var(--muted);
      background: #fff;
    }

    .cart-side-actions .ghost:hover {
      color: #fff;
      background: var(--red);
      border-color: var(--red);
    }

    .cart > .btn {
      width: calc(100% - 28px) !important;
      margin-bottom: 14px;
    }

    .product-card {
      min-height: 0;
      border-radius: 22px;
      background: #fff;
    }

    #productGrid .product-card {
      isolation: isolate;
      border-color: rgba(232,227,216,.82);
      box-shadow: 0 12px 30px rgba(15,18,22,.055);
    }

    #productGrid .product-card::after {
      content: "";
      position: absolute;
      inset: auto 14px 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(225,25,36,.22), transparent);
      opacity: 0;
      transition: opacity .18s ease;
      z-index: 2;
    }

    #productGrid .product-card:hover::after {
      opacity: 1;
    }

    #productGrid .photo {
      aspect-ratio: 1 / 1.14;
      min-height: 0;
      padding: 10px;
      background:
        linear-gradient(180deg, #fff 0%, #faf8f3 100%);
    }

    #productGrid .photo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .product-body {
      padding: 10px 10px 11px;
    }

    .label {
      max-width: 100%;
      width: fit-content;
      font-size: 11px;
      margin-bottom: 0;
    }

    .product-card-top {
      margin-bottom: 6px;
    }

    .product-card h3 {
      font-size: 15px;
      line-height: 1.24;
      min-height: 36px;
    }

    .product-card p {
      margin: 7px 0 10px;
      -webkit-line-clamp: 1;
      min-height: 20px;
    }

    .product-card-micro {
      display: none;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 27px;
      margin: 0 0 10px;
    }

    .product-card-micro span {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border: 1px solid rgba(232,227,216,.86);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      padding: 0 8px;
      font-size: 10px;
      font-weight: 950;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-card-micro span:first-child {
      border-color: rgba(12,139,79,.18);
      background: rgba(12,139,79,.08);
      color: var(--green);
    }

    .bottom {
      gap: 7px;
      padding-top: 8px;
    }

    .price b {
      font-size: 19px;
    }

    .price span {
      font-size: 12px;
    }

    .buy-row {
      grid-template-columns: 1fr;
      gap: 7px;
    }

    #productGrid .qty {
      height: 34px;
    }

    #productGrid .qty button {
      width: 28px;
      height: 34px;
    }

    #productGrid .qty span {
      min-width: 28px;
    }

    .add,
    .details-button {
      min-height: 34px;
      font-size: 13px;
    }

    #productGrid .details-button {
      min-height: 32px;
      background: #fff;
    }

    #productGrid .product-cart-stepper {
      min-height: 34px;
      grid-template-columns: 36px 1fr 36px;
    }

    #productGrid .product-cart-stepper span {
      font-size: 14px;
    }

    .catalog-more {
      padding: 14px 0 2px;
    }

    .catalog-more .btn {
      min-width: 260px;
      border-color: rgba(225,25,36,.18);
      background:
        linear-gradient(135deg, rgba(225,25,36,.045), transparent 48%),
        #fff;
      color: var(--black);
    }

    .catalog-more .btn:hover {
      border-color: var(--red);
      background: var(--red);
      color: #fff;
      box-shadow: 0 16px 34px rgba(225,25,36,.16);
    }

    .promo-row,
    .info-grid,
    .service-strip {
      gap: 22px;
    }

    .categories {
      gap: 18px;
    }

    @media (max-width: 1280px) {
      .grid {
        grid-template-columns: repeat(3, minmax(230px, 1fr));
      }
    }

    @media (max-width: 1400px) {
      #productGrid.grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
      }
      #productGrid .photo {
        aspect-ratio: 1 / 1.14;
        min-height: 0;
        padding: 8px;
      }
      #productGrid .photo img {
        height: 100%;
      }
      #productGrid .product-body {
        padding: 9px;
      }
      #productGrid .label {
        font-size: 10px;
        padding: 4px 7px;
        margin-bottom: 0;
        max-width: calc(100% - 72px);
      }
      #productGrid .product-card-top {
        gap: 5px;
        margin-bottom: 7px;
      }
      #productGrid .stock-pill {
        padding: 4px 6px;
        font-size: 9px;
      }
      #productGrid .card-quick-view {
        min-height: 28px;
        padding: 0 10px;
        font-size: 10px;
      }
      #productGrid .product-card h3 {
        font-size: 14px;
        min-height: 32px;
      }
      #productGrid .product-card p {
        display: none;
      }
      #productGrid .price b {
        font-size: 16px;
      }
      #productGrid .price span {
        font-size: 10px;
      }
      #productGrid .buy-row {
        grid-template-columns: 1fr;
      }
      #productGrid .product-cart-stepper {
        min-height: 34px;
        grid-template-columns: 34px 1fr 34px;
      }
      #productGrid .add,
      #productGrid .details-button {
        min-height: 34px;
        font-size: 12px;
      }
    }

    @media (max-width: 1060px) {
      .nav { grid-template-columns: auto 1fr; height: auto; padding: 12px 0; }
      .nav-links { grid-column: 1 / -1; order: 3; justify-content: flex-start; overflow-x: auto; gap: 10px; padding-bottom: 2px; scrollbar-width: none; }
      .nav-links::-webkit-scrollbar { display: none; }
      .nav-actions { flex-wrap: wrap; justify-content: flex-end; }
      .hero, .catalog-layout, .order-layout, .profile-layout, .auth, .checkout-layout, .final-order { grid-template-columns: 1fr; }
      .hero {
        min-height: 410px;
        padding: 32px 28px;
        background:
          linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.28) 70%, rgba(255,255,255,.03) 100%),
          url("../assets/optimized/original-market-hero-brand.jpg") calc(100% + 28px) center / auto 92% no-repeat;
      }
      .hero > div:first-child { width: min(520px, 58%); }
      .hero h1 { white-space: normal; }
      .checkout-summary-card { position: static; }
      .catalog-content,
      .catalog-main,
      .catalog-layout > .cart,
      .catalog-layout > .catalog-count,
      .catalog-layout > .grid,
      .catalog-layout > .catalog-more {
        grid-column: 1;
        grid-row: auto;
      }
      .catalog-tools { grid-template-columns: 1fr 1fr; }
      .catalog-search-row { grid-template-columns: minmax(0, 1fr) auto auto; }
      .subfilters-title {
        min-height: auto;
      }
      .product-modal { grid-template-columns: 1fr; overflow: auto; }
      .product-modal-media {
        height: auto;
        max-height: none;
        min-height: 300px;
        padding: 18px;
      }
      .product-gallery-stage img {
        width: 100%;
        height: min(420px, 54vh);
        max-height: 420px;
      }
      .product-gallery-thumbs { justify-content: flex-start; }
      .product-modal-body {
        max-height: none;
        overflow: visible;
      }
      .cart-drawer { margin: 0 auto; }
      .hero-products { min-height: 320px; border-radius: 24px; }
      .hero-products img { height: 320px; }
      .categories { grid-template-columns: repeat(3, 1fr); }
      .grid { grid-template-columns: repeat(2, 1fr); }
      .service-strip, .info-grid { grid-template-columns: repeat(2, 1fr); }
      .cart { position: static; }
      .trust-hero {
        min-height: 360px;
        padding: 36px 30px;
        background:
          linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 66%, rgba(255,255,255,.6) 100%),
          url("../assets/optimized/original-market-hero-brand.jpg") right center / auto 100% no-repeat,
          #fff;
      }
      .trust-layout,
      .trust-contact-grid {
        grid-template-columns: 1fr;
      }
      .trust-side {
        position: static;
        grid-template-columns: 1fr 1fr;
      }
      .trust-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      body { padding-bottom: 112px; }
      body.trust-page { padding-bottom: 112px; }
      .wrap { width: min(100% - 22px, 1180px); }
      .logo img { width: 88px; height: 58px; }
      .nav {
        grid-template-columns: auto 1fr;
        gap: 8px;
        padding: 8px 0;
      }
      .nav-actions { gap: 7px; }
      .nav-actions .user-pill {
        max-width: 132px;
        min-height: 38px;
        padding: 4px 10px 4px 4px;
        gap: 7px;
      }
      .nav-actions .user-pill b {
        max-width: 74px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .icon-button { min-height: 38px; min-width: 38px; padding: 0 10px; }
      .icon-button svg { width: 20px; height: 20px; }
      .nav-links {
        display: none;
      }
      .nav-tab, .nav-links a { min-height: 34px; padding-inline: 10px; white-space: nowrap; }
      .wide-label { display: none; }
      .compact-label { display: inline; }
      .hero {
        min-height: 430px;
        padding: 18px 18px 148px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 55%, rgba(255,255,255,.38) 80%, rgba(255,255,255,0) 100%),
          url("../assets/optimized/original-market-home-hero.png") center calc(100% + 20px) / 82% auto no-repeat;
      }
      .hero > div:first-child { width: min(100%, 342px); }
      .hero::before, .hero::after, .hero-products, .catalog-layout::before { display: none; }
      h1 { font-size: 30px; }
      .hero p {
        max-width: 300px;
        font-size: 14px;
        line-height: 1.45;
      }
      .hero-actions {
        gap: 8px;
        margin-top: 16px;
      }
      .hero-flags {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(100%, 310px);
        gap: 8px 4px;
        margin-top: 13px;
      }
      .hero-flags span { font-size: 9px; gap: 4px; white-space: normal; text-align: center; }
      .hero-flags img { width: 28px; height: 19px; }
      .section-title { width: auto; font-size: 24px; }
      .section-title::before, .section-title::after { display: none; }
      .hero-actions .btn { width: 100%; }
      .trust-main { padding-top: 18px; }
      .trust-hero {
        min-height: 0;
        border-radius: 22px;
        padding: 24px 18px;
        background:
          linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.95) 72%, rgba(255,255,255,.74) 100%),
          url("../assets/optimized/original-market-hero-brand-mobile.jpg") 76% center / auto 100% no-repeat,
          #fff;
      }
      .trust-hero::after { display: none; }
      .trust-kicker { min-height: 30px; padding: 0 12px; font-size: 11px; }
      .trust-hero h1 {
        font-size: 34px;
        line-height: .98;
        margin: 16px 0 12px;
      }
      .trust-hero p {
        max-width: 330px;
        font-size: 14px;
        line-height: 1.45;
      }
      .trust-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
      }
      .trust-card,
      .trust-note,
      .trust-side-card,
      .mini-map {
        border-radius: 18px;
      }
      .trust-card,
      .trust-note,
      .trust-side-card {
        padding: 18px;
      }
      .trust-card h2 { font-size: 26px; }
      .trust-card p,
      .trust-side-card p,
      .trust-note p,
      .mini-map p {
        font-size: 14px;
      }
      .trust-layout { gap: 14px; margin-top: 16px; }
      .trust-content { gap: 14px; }
      .trust-side {
        grid-template-columns: 1fr;
      }
      .trust-grid.three,
      .trust-contact-grid {
        grid-template-columns: 1fr;
      }
      .trust-steps div {
        grid-template-columns: 38px 1fr;
        gap: 3px 10px;
        padding: 12px;
      }
      .trust-steps span {
        width: 34px;
        height: 34px;
      }
      .trust-faq {
        margin-top: 16px;
      }
      .trust-faq summary {
        padding: 16px;
        font-size: 16px;
      }
      .trust-faq p {
        padding: 0 16px 16px;
        font-size: 14px;
      }
      .mini-map {
        min-height: 220px;
        padding: 20px;
      }
      .mini-map b { font-size: 32px; }
      .checkout-head { padding: 16px; }
      .checkout-head h2 { font-size: 26px; }
      .auth { max-height: calc(100vh - 22px); border-radius: 20px; }
      .auth-side { padding: 16px; }
      .auth-side img { width: 92px; }
      .auth-main { padding: 16px; }
      .final-order { padding: 22px 0; }
      .final-hero, .final-summary { border-radius: 20px; padding: 18px; }
      .final-hero { min-height: auto; }
      .final-check { width: 58px; height: 58px; font-size: 30px; }
      .final-actions { display: grid; grid-template-columns: 1fr; }
      .final-summary-head { display: grid; }
      .final-summary-head b { font-size: 24px; }
      .final-details { grid-template-columns: 1fr; }
      .final-item { grid-template-columns: 54px 1fr; }
      .final-item img { width: 54px; height: 54px; }
      .final-item strong { grid-column: 2; }
      .checkout-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .checkout-progress span { min-width: 0; padding: 9px 7px; }
      .checkout-highlights { grid-template-columns: 1fr; }
      .checkout-summary-card, .checkout-step { min-width: 0; padding: 16px; }
      .review-row { grid-template-columns: 1fr; gap: 3px; }
      .success-receipt div { align-items: flex-start; }
      .checkout-auth-hint .btn { width: 100%; }
      .profile-orders-head {
        display: grid;
      }
      .profile-orders-head .btn {
        width: 100%;
      }
      .profile-summary { padding: 16px; border-radius: 20px; }
      .profile-identity { grid-template-columns: 54px 1fr; gap: 12px; }
      .profile-identity .avatar { width: 54px; height: 54px; font-size: 22px; }
      .profile-identity h2 { font-size: 21px; }
      .profile-stats { grid-template-columns: 1fr 1.35fr; }
      .profile-contact-head { align-items: center; flex-direction: row; gap: 10px; }
      .profile-contact-toggle { display: inline-flex; align-items: center; justify-content: center; }
      .profile-contact-list { display: none; }
      .profile-contact-list.is-open { display: block; }
      .profile-cards {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding: 11px 12px;
      }
      .profile-cards-head { display: contents; }
      .profile-cards-head span { display: none; }
      .profile-cards-head .btn {
        width: auto;
        min-height: 38px;
        white-space: nowrap;
      }
      .profile-actions { grid-template-columns: 1fr 1fr; }
      .profile-order-overview {
        grid-template-columns: 1fr 1fr;
      }
      .profile-order-overview b {
        font-size: 15px;
      }
      .quick-repeat-head {
        display: grid;
        grid-template-columns: 1fr;
      }
      .quick-repeat-head .btn {
        width: 100%;
      }
      .quick-repeat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .quick-repeat-item {
        grid-template-columns: 42px 1fr;
      }
      .quick-repeat-item i {
        grid-column: 1 / -1;
        width: 100%;
        height: 30px;
        border-radius: 999px;
      }
      .profile-order-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: none;
      }
      .profile-order-filters::-webkit-scrollbar { display: none; }
      .profile-order-filters button {
        flex: 0 0 auto;
      }
      .profile-order-card { padding: 14px; border-radius: 18px; }
      .order-top { display: grid; }
      .profile-order-timeline {
        grid-template-columns: repeat(5, minmax(64px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .profile-order-summary,
      .profile-order-details-grid {
        grid-template-columns: 1fr 1fr;
      }
      .mini-item {
        min-width: 100%;
      }
      .profile-order-line {
        grid-template-columns: 48px 1fr;
      }
      .profile-order-line img,
      .profile-order-line .pack-art {
        width: 48px;
        height: 48px;
      }
      .profile-order-line strong {
        grid-column: 2;
      }
      .profile-history-line {
        grid-template-columns: 1fr;
        gap: 3px;
      }
      .profile-order-actions .btn {
        flex: 1 1 140px;
      }
      .brand-cloud { grid-template-columns: repeat(2, 1fr); }
      .brand-chip img { height: 56px; }
      .catalog-page #catalog { padding-top: 24px; }
      .catalog-page .catalog-page-head {
        min-height: 0;
        margin-bottom: 12px;
        padding: 0;
      }
      .catalog-page .catalog-page-head::after { display: none; }
      .catalog-page .catalog-page-head .badge {
        font-size: 12px;
        padding: 8px 12px;
      }
      .catalog-page .catalog-page-head h1 {
        max-width: 360px;
        font-size: 32px;
        line-height: .96;
      }
      .catalog-page .catalog-page-head p {
        max-width: 350px;
        font-size: 14px;
        line-height: 1.35;
      }
      .catalog-head-metrics { gap: 6px; }
      .catalog-head-metrics span {
        padding: 7px 10px;
        font-size: 11px;
      }
      .catalog-brand-panel {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        margin-bottom: 18px;
      }
      .catalog-brand-panel .brand-cloud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .catalog-brand-panel .brand-chip { min-height: 52px; }
      .catalog-brand-panel h3 {
        font-size: 25px;
        line-height: 1.02;
      }
      .catalog-brand-panel p {
        font-size: 14px;
        line-height: 1.35;
      }
      .shopping-intents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 14px 0 18px;
      }
      .shopping-intents button {
        min-height: 72px;
        border-radius: 16px;
        padding: 11px;
      }
      .shopping-intents b {
        font-size: 12px;
      }
      .promo {
        min-height: 0;
        border-radius: 20px;
        padding: 22px;
      }
      .promo.dark {
        min-height: 250px;
        display: grid;
        align-content: start;
      }
      .promo h3 {
        max-width: 280px;
        font-size: 28px;
        line-height: 1.05;
      }
      .promo p {
        max-width: 210px;
        font-size: 16px;
        line-height: 1.35;
      }
      .promo .btn {
        width: max-content;
        max-width: 100%;
        min-height: 44px;
        padding: 0 18px;
        position: relative;
        z-index: 2;
      }
      .promo.dark .percent {
        right: 18px;
        bottom: 58px;
        width: 84px;
        height: 84px;
        border-radius: 22px;
        display: grid;
        place-items: center;
        background: var(--red);
        color: #fff;
        font-size: 46px;
        transform: rotate(-8deg);
        box-shadow: 0 22px 42px rgba(225,25,36,.28);
      }
      .promo.dark .percent::after {
        display: none;
      }
      .info-card.warm {
        min-height: 0;
      }
      .info-card.warm h3 {
        font-size: 22px;
        line-height: 1.15;
      }
      .info-card.warm p {
        max-width: 260px;
        margin-bottom: 0;
      }
      .info-card.warm .btn {
        grid-column: 1;
        width: max-content;
        margin-top: 4px;
      }
      .info-card .info-visual {
        position: static;
        grid-column: 2;
        grid-row: 2 / span 2;
        width: 92px;
        max-width: 92px;
        border-radius: 14px;
        background: #fff;
        padding: 7px;
        justify-self: end;
      }
      .catalog-control-head { display: block; }
      .catalog-control-head b { font-size: 16px; }
      .catalog-control-head small { display: inline-flex; margin-top: 8px; }
      .catalog-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .catalog-stats span {
        padding: 8px;
        font-size: 11px;
      }
      .catalog-stats b {
        font-size: 14px;
      }
      .catalog-content {
        display: grid;
        gap: 12px;
      }
      .catalog-main {
        border-radius: 20px;
        padding: 12px;
        box-shadow: 0 12px 32px rgba(15,18,22,.05);
      }
      .catalog-search-row { grid-template-columns: minmax(0, 1fr) auto; }
      .search-suggestions {
        padding: 10px;
        border-radius: 16px;
      }
      .search-suggestions-head small { display: none; }
      .search-product-results { grid-template-columns: 1fr; }
      .search-product-result { grid-template-columns: 44px minmax(0, 1fr) auto; }
      .search-product-result img,
      .search-product-result .pack-art {
        width: 44px;
        height: 44px;
      }
      .search-hints { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
      .search-hints::-webkit-scrollbar { display: none; }
      .search-hints button { flex: 0 0 auto; max-width: 260px; }
      .catalog-tools { grid-template-columns: 1fr; }
      .catalog-filter-details, .catalog-tools select, .filters, .subfilters, .reset-filter-button { display: none; }
      .active-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
      }
      .active-filter-bar::-webkit-scrollbar { display: none; }
      .active-filter-bar button,
      .active-filter-bar > span {
        flex: 0 0 auto;
      }
      .catalog-content,
      .catalog-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: clip;
      }
      .recently-viewed {
        margin: 10px 0 8px;
        padding: 10px;
        border-radius: 16px;
      }
      .recently-viewed,
      .favorite-panel,
      .recent-head,
      .favorite-head,
      .recent-list,
      .favorite-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .recent-head {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
      }
      .recent-head b,
      .favorite-head b {
        margin-top: 1px;
        font-size: 15px;
      }
      .recent-head .btn {
        width: auto;
        min-height: 30px;
        padding: 0 10px;
      }
      .recent-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }
      .recent-list::-webkit-scrollbar,
      .favorite-list::-webkit-scrollbar { display: none; }
      .recent-item {
        flex: 0 0 min(270px, 82vw);
        grid-template-columns: minmax(0, 1fr) 34px;
        scroll-snap-align: start;
      }
      .recent-add {
        width: 34px;
        border-radius: 50%;
      }
      .favorite-panel {
        margin: 8px 0 10px;
        padding: 10px;
        border-radius: 16px;
      }
      .favorite-head {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
      }
      .favorite-head .btn {
        width: auto;
        min-height: 30px;
        padding: 0 10px;
      }
      .favorite-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }
      .favorite-item {
        flex: 0 0 min(270px, 82vw);
        grid-template-columns: minmax(0, 1fr) 34px;
        scroll-snap-align: start;
      }
      .favorite-add {
        width: 34px;
        border-radius: 50%;
      }
      .mobile-filter-button { display: inline-flex; width: 100%; }
      .filter-sheet {
        width: min(460px, 100%);
        max-height: min(760px, calc(100vh - 32px));
        margin: 0 auto;
        background: #fff;
        border-radius: 24px;
        padding: 20px;
        overflow: auto;
        box-shadow: 0 28px 90px rgba(0,0,0,.22);
      }
      .modal.open .filter-sheet { display: block; }
      .filter-sheet-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
      .filter-sheet h2 { margin: 0; color: var(--black); }
      .filter-group { display: grid; gap: 8px; margin-top: 16px; }
      .filter-group label { color: var(--black); font-weight: 950; }
      .filter-group select { min-height: 46px; border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; background: #fff; font-weight: 800; }
      .mobile-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .mobile-category-grid .chip { min-height: 42px; justify-content: center; text-align: center; }
      .mobile-quick-group-hint {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        padding: 9px 12px;
        border: 1px solid rgba(237, 28, 36, .16);
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(237, 28, 36, .08), rgba(255, 255, 255, .94));
        color: var(--muted);
        font-weight: 850;
      }
      .mobile-quick-group-hint.visible { display: flex; }
      .mobile-quick-group-hint span {
        font-size: 11px;
        line-height: 1;
        color: var(--red);
        text-transform: uppercase;
      }
      .mobile-quick-group-hint b {
        flex: 1;
        min-width: 0;
        color: var(--black);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mobile-quick-group-hint em {
        flex: 0 0 auto;
        padding: 6px 9px;
        border-radius: 999px;
        background: #fff;
        color: var(--red);
        font-style: normal;
        font-size: 12px;
        box-shadow: inset 0 0 0 1px rgba(237, 28, 36, .12);
      }
      .filter-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
      .product-facts, .modal-buy, .modal-actions { grid-template-columns: 1fr; }
      .product-summary-strip {
        grid-template-columns: 1fr;
      }
      .product-trust-list {
        grid-template-columns: 1fr;
      }
      .product-summary-strip div {
        padding: 10px 11px;
      }
      .product-benefits li {
        align-items: flex-start;
      }
      .related-grid { grid-template-columns: 1fr; }
      .product-modal h2 { font-size: 26px; }
      .product-modal-body { padding: 18px; }
      .product-purchase-panel {
        position: static;
        margin: 18px -18px -18px;
        padding: 16px 18px 18px;
      }
      .product-purchase-panel .price {
        display: grid;
        gap: 6px;
      }
      .product-purchase-panel .price span {
        max-width: none;
        text-align: left;
      }
      .related-head { display: grid; gap: 4px; }
      .related-product-main { grid-template-columns: 58px 1fr; }
      .related-product-main > span img { height: 58px; }
      .related-cart { min-height: 38px; }
      .product-card { border-radius: 16px; }
      #productGrid .product-card:hover {
        transform: none;
      }
      #productGrid .product-card:hover .photo img,
      #productGrid .product-card:hover .label,
      #productGrid .product-card:hover .stock-pill,
      #productGrid .product-card:hover .add {
        transform: none;
      }
      #productGrid .product-card:hover .card-quick-view,
      #productGrid .product-card:hover .photo::before,
      #productGrid .product-card:hover::before,
      #productGrid .product-card:hover::after {
        opacity: 0;
      }
      #productGrid .card-quick-view {
        font-size: 11px;
      }
      #productGrid .photo {
        min-height: 178px;
        padding: 8px;
        overflow: hidden;
      }
      #productGrid .photo img {
        width: 100%;
        height: 166px;
        max-width: 100%;
        object-fit: contain;
      }
      #productGrid .photo::after {
        right: 8px;
        top: 8px;
        padding: 4px 7px;
        font-size: 11px;
      }
      #productGrid .favorite-toggle {
        left: 8px;
        top: 8px;
        width: 32px;
        height: 32px;
      }
      .product-body { padding: 8px; }
      #productGrid .product-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 6px;
      }
      #productGrid .label,
      #productGrid .stock-pill {
        width: auto;
        min-height: 23px;
        padding: 4px 7px;
        font-size: 11px;
      }
      #productGrid .label { max-width: calc(100% - 82px); }
      #productGrid .stock-pill { flex: 0 0 auto; }
      #productGrid .product-card h3 {
        font-size: 13px;
        line-height: 1.22;
        min-height: 32px;
        -webkit-line-clamp: 2;
      }
      #productGrid .product-card p,
      #productGrid .product-card-micro {
        display: none;
      }
      #productGrid .price b {
        font-size: 15px;
      }
      #productGrid .price span {
        font-size: 11px;
      }
      .buy-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      #productGrid .product-cart-stepper {
        min-height: 32px;
        grid-template-columns: 32px 1fr 32px;
      }
      #productGrid .product-cart-stepper span {
        font-size: 13px;
      }
      .buy-row .add {
        width: 100%;
        min-height: 32px;
        font-size: 11px;
      }
      #productGrid .details-button {
        min-height: 31px;
        font-size: 11px;
      }
      .bottom {
        gap: 7px;
        padding-top: 7px;
      }
      .contact-actions { grid-template-columns: 1fr; }
      .payment-box, .payment-actions { grid-template-columns: 1fr; }
      .payment-method-mark { width: 100%; max-width: 180px; margin: 0 auto; }
      .card-wallet-head, .profile-cards-head, .secure-card-top, .card-form-actions { grid-template-columns: 1fr; display: grid; }
      .card-wallet-head .btn, .profile-cards-head .btn { width: 100%; }
      .saved-card { grid-template-columns: 40px 1fr; }
      .saved-card .btn, .saved-card small { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
      .card-preview b { font-size: 17px; }
      .order-item-row { grid-template-columns: 1fr; }
      .drawer-actions { grid-template-columns: 1fr; }
      .drawer-overview { grid-template-columns: 1fr; }
      .drawer-group-head { align-items: flex-start; }
      .drawer-line {
        grid-template-columns: 62px 1fr;
        padding: 12px;
      }
      .drawer-line-photo,
      .drawer-line img,
      .drawer-line .pack-art {
        width: 62px;
        height: 62px;
      }
      .drawer-line-actions {
        align-items: flex-start;
        flex-direction: column;
      }
      #productGrid.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        padding-bottom: 18px;
        scroll-snap-type: none;
      }
      #productGrid .product-card {
        min-width: 0;
        scroll-snap-align: none;
        box-shadow: 0 12px 28px rgba(15,18,22,.055);
      }
      .catalog-count {
        width: 100%;
        justify-content: center;
        text-align: center;
      }
      .catalog-more .btn {
        width: 100%;
        min-width: 0;
      }
      .benefits, .promo-row, .grid, .fields, .choice-grid, .payment-grid, .stats, .footer-grid, .auth-grid, .service-strip, .info-grid, .mini-form { grid-template-columns: 1fr; }
      .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .category { min-height: 228px; padding: 10px; }
      .category-visual { height: 154px; }
      .category-visual img[src*="category-icons/"] {
        width: auto;
        height: calc(100% - 8px);
        max-width: 100%;
        object-position: center top;
        transform: translateY(-3px);
      }
      .category b { font-size: 14px; min-height: 34px; }
      .catalog-layout > .cart { display: none; }
      .service-strip { padding: 16px; }
      .info-card { min-height: auto; }
      .icon-button { min-width: auto; }
      .mobile-bar {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 45;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(16px);
        box-shadow: 0 18px 48px rgba(0,0,0,.16);
      }
      .mobile-nav-btn {
        min-height: 54px;
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: var(--black);
        display: grid;
        place-items: center;
        gap: 3px;
        font-size: 11px;
        font-weight: 950;
        text-decoration: none;
      }
      .mobile-nav-btn svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
      .mobile-nav-btn.active { background: var(--yellow); }
      .mobile-cart-float {
        left: 18px;
        right: 18px;
        bottom: 96px;
        width: auto;
        min-height: 52px;
        padding: 0 14px;
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 22px 52px rgba(0,0,0,.26);
      }
      .mobile-cart-float.visible { display: flex; }
      .mobile-cart-float .float-cart-left {
        min-width: 0;
      }
      .mobile-cart-float span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cart-drawer {
        max-height: calc(100vh - 24px);
        border-radius: 22px 22px 0 0;
        padding: 16px;
      }
      .cart-drawer-head {
        top: -16px;
        margin: -16px -16px 12px;
        padding: 16px;
        border-radius: 22px 22px 16px 16px;
      }
      #drawerCheckoutButton { order: -1; }
      .site-toast {
        left: 14px;
        right: 14px;
        bottom: 156px;
        width: auto;
        max-width: none;
        border-radius: 24px;
        padding: 14px 18px;
        font-size: 16px;
        line-height: 1.25;
        transform: translateY(18px);
        animation: none;
      }
      .site-toast.visible {
        transform: translateY(0);
        animation: none;
      }
      .float-cart-left svg { width: 22px; height: 22px; }
    }

    @media (max-width: 680px) and (hover: none) {
      #productGrid .product-card:hover,
      #productGrid .product-card:hover .photo img,
      #productGrid .product-card:hover .label,
      #productGrid .product-card:hover .stock-pill,
      #productGrid .product-card:hover .add,
      #productGrid .favorite-toggle:hover {
        transform: none;
      }
      #productGrid .product-card:hover .card-quick-view,
      #productGrid .product-card:hover .photo::before,
      #productGrid .product-card:hover::before,
      #productGrid .product-card:hover::after {
        opacity: 0;
      }
    }

    @media (max-width: 1100px) {
      .catalog-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .catalog-trust-action {
        grid-column: 1 / -1;
        min-height: 48px;
      }
    }

    @media (max-width: 760px) {
      .catalog-trust-strip {
        grid-template-columns: 1fr;
        margin: 0 0 22px;
        padding: 10px;
        border-radius: 18px;
      }
      .catalog-trust-action {
        width: 100%;
        min-width: 0;
        min-height: 48px;
      }
    }

    /* Product page modal polish */
    .product-modal {
      width: min(1380px, calc(100vw - 28px));
      max-height: min(900px, calc(100vh - 28px));
      grid-template-columns: minmax(430px, .98fr) minmax(420px, 1.02fr);
      border-radius: 28px;
      background: #fff;
      box-shadow: 0 32px 110px rgba(0,0,0,.24);
    }
    .product-modal-media {
      height: auto;
      max-height: none;
      min-height: 0;
      padding: 22px;
      border-right: 1px solid var(--line);
      background:
        radial-gradient(circle at 16% 12%, rgba(225,25,36,.08), transparent 30%),
        linear-gradient(145deg, #fff 0%, #fbfaf7 100%);
      display: block;
    }
    .product-gallery-shell {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 16px;
      height: 100%;
      min-height: min(760px, calc(100vh - 72px));
    }
    .product-gallery-shell:not(.has-thumbs) {
      grid-template-columns: 1fr;
    }
    .product-gallery-stage {
      min-height: 0;
      height: 100%;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #fff;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
    }
    .product-gallery-stage img {
      width: 100%;
      height: 100%;
      max-height: none;
      padding: 18px;
      object-fit: contain;
      object-position: center;
    }
    .product-gallery-controls {
      position: absolute;
      right: 14px;
      bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px;
      border: 1px solid rgba(232,227,216,.92);
      border-radius: 999px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 8px 22px rgba(20,20,20,.12);
      color: var(--black);
      font-size: 12px;
      line-height: 1;
    }
    .product-gallery-nav {
      width: 30px;
      height: 30px;
      min-height: 30px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #f4f2ee;
      color: var(--black);
      font-size: 24px;
      line-height: 1;
    }
    .product-gallery-thumbs {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 10px;
      overflow: auto;
      padding: 2px 2px 8px;
    }
    .product-gallery-thumb {
      flex: 0 0 92px;
      width: 76px;
      height: 92px;
      border-color: var(--line);
      border-radius: 16px;
      background: #fff;
    }
    .product-gallery-thumb:hover,
    .product-gallery-thumb.active {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(225,25,36,.08), 0 12px 28px rgba(20,20,20,.08);
      transform: translateY(-1px);
    }
    .product-modal-body {
      max-height: min(900px, calc(100vh - 28px));
      padding: 28px;
      background: #fff;
    }
    .product-modal-top {
      position: sticky;
      top: 0;
      z-index: 5;
      margin: -28px -28px 18px;
      padding: 22px 28px 16px;
      border-bottom: 1px solid rgba(232,227,216,.72);
      background: linear-gradient(180deg, #fff 72%, rgba(255,255,255,.94));
    }
    .product-modal h2 {
      max-width: 760px;
      font-size: clamp(30px, 2.55vw, 46px);
      line-height: 1.04;
      letter-spacing: 0;
    }
    #productModalDescription {
      font-size: 17px;
      line-height: 1.55;
      -webkit-line-clamp: 5;
    }
    .product-summary-strip,
    .product-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .product-summary-strip div,
    .product-facts .fact,
    .product-specs div {
      border-radius: 16px;
      background: #fbfaf7;
      border: 1px solid var(--line);
    }
    .product-purchase-panel {
      z-index: 6;
      margin: 22px -28px -28px;
      padding: 18px 28px 22px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(16px);
      box-shadow: 0 -18px 38px rgba(15,18,22,.08);
    }
    .product-purchase-panel .price {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
      align-items: start;
      margin-bottom: 12px;
    }
    .product-purchase-panel .price b {
      font-size: 34px;
    }
    .product-purchase-panel .price span {
      max-width: none;
      text-align: left;
      color: var(--green);
    }
    .modal-buy {
      grid-template-columns: 132px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }
    .modal-buy .qty {
      width: 132px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
    }
    .modal-buy .qty button,
    .modal-buy .qty span {
      width: 100%;
      min-width: 0;
      display: grid;
      place-items: center;
      margin: 0;
      padding: 0;
      line-height: 1;
    }
    .modal-buy .qty button:hover {
      transform: none;
    }
    .modal-actions {
      grid-template-columns: 1fr 1fr;
    }

    @media (max-width: 980px) {
      .product-modal {
        width: min(720px, calc(100vw - 18px));
        max-height: calc(100vh - 18px);
        grid-template-columns: 1fr;
        overflow: auto;
        border-radius: 24px;
      }
      .product-modal-media {
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .product-modal-top {
        position: sticky;
        top: 0;
        z-index: 8;
        margin: -14px -14px 12px;
        padding: max(12px, env(safe-area-inset-top)) 14px 12px;
        border-bottom: 1px solid rgba(232,227,216,.94);
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(14px);
      }
      .product-modal-offer {
        min-height: 58px;
        margin: 8px 0 10px;
        padding: 9px 10px;
      }
      .product-modal-offer-price strong { font-size: 24px; }
      .product-modal-brand-line {
        display: block;
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        min-width: 0;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #productModalTag {
        align-self: start;
      }
      .product-modal-actions {
        align-self: start;
      }
      .product-logo {
        display: none;
      }
      .product-gallery-shell {
        grid-template-columns: 1fr;
        min-height: 0;
        height: auto;
        gap: 10px;
      }
      .product-gallery-stage {
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 20px;
        position: relative;
      }
      .product-gallery-stage img {
        height: 100%;
        padding: 10px;
      }
      .product-gallery-thumbs {
        flex-direction: row;
        order: 2;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 2px;
      }
      .product-gallery-thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 72px;
        scroll-snap-align: start;
      }
      .product-modal-body {
        max-height: none;
        padding: 18px;
        overflow: visible;
      }
      .product-modal-top {
        position: static;
        margin: 0 0 12px;
        padding: 0;
        border-bottom: 0;
        background: transparent;
      }
      .product-modal h2 {
        font-size: 28px;
      }
      .product-summary-strip,
      .product-facts {
        grid-template-columns: 1fr;
      }
      .product-purchase-panel {
        position: sticky;
        bottom: 0;
        margin: 18px -18px -18px;
        padding: 16px 18px 18px;
      }
      .modal-buy,
      .modal-actions {
        grid-template-columns: 1fr;
      }
      .modal-buy .qty {
        width: 100%;
      }
    }

    /* Product modal overlap fix */
    .product-modal-top {
      position: relative;
      top: auto;
      margin: 0 0 16px;
      padding: 0;
      border-bottom: 0;
      background: transparent;
    }
    .product-modal-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }
    .product-modal-favorite {
      width: 48px;
      min-width: 48px;
      min-height: 48px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: #fff;
      color: var(--red);
      font-size: 25px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 10px 24px rgba(15,18,22,.05);
      transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
    }
    .product-modal-favorite:hover,
    .product-modal-favorite.active {
      transform: translateY(-1px);
      border-color: var(--red);
      background: var(--red);
      color: #fff;
    }
    .product-share-button {
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--black);
      padding: 0 16px;
      font-size: 14px;
      font-weight: 950;
      box-shadow: 0 10px 24px rgba(15,18,22,.05);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .product-share-button:hover {
      transform: translateY(-1px);
      border-color: rgba(225,25,36,.24);
      box-shadow: 0 14px 30px rgba(225,25,36,.12);
    }
    .product-purchase-panel {
      position: relative;
      bottom: auto;
      margin: 22px 0 0;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 18px 42px rgba(15,18,22,.08);
    }
    .product-modal-body {
      padding-bottom: 28px;
    }
    .product-summary-strip {
      margin-bottom: 16px;
    }

    @media (max-width: 980px) {
      .product-purchase-panel {
        position: relative;
        margin: 18px 0 0;
        padding: 16px;
      }
      .product-modal-body {
        padding-bottom: 18px;
      }
      .product-modal-actions {
        gap: 8px;
      }
      .product-share-button {
        min-height: 44px;
        padding: 0 13px;
        font-size: 13px;
      }
      .product-modal-favorite {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 23px;
      }
    }

    /* Product information: concise by default, complete details on demand. */
    .product-description-block { margin: 12px 0; }
    .product-description-block #productModalDescription { margin: 0; }
    #productModalDescription.is-expanded {
      display: block;
      -webkit-line-clamp: unset;
      overflow: visible;
    }
    .product-description-toggle {
      min-height: 34px;
      margin-top: 6px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--red);
      font-size: 13px;
      font-weight: 950;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .product-specs-details {
      margin: 14px 0 16px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
    }
    .product-specs-details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 54px;
      padding: 0 14px;
      cursor: pointer;
      color: var(--black);
      font-size: 14px;
      font-weight: 950;
      list-style: none;
    }
    .product-specs-details summary::-webkit-details-marker { display: none; }
    .product-specs-details summary::after {
      content: "+";
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border-radius: 50%;
      background: #f5f2ed;
      font-size: 20px;
      line-height: 1;
    }
    .product-specs-details[open] summary {
      border-bottom: 1px solid var(--line);
    }
    .product-specs-details[open] summary::after { content: "−"; }
    .product-specs-details summary span {
      margin-left: auto;
      margin-right: 10px;
      color: var(--muted);
      font-size: 12px;
    }
    .product-specs-details .product-specs {
      display: grid !important;
      margin: 0;
      border: 0;
      border-radius: 0;
    }
    .product-specs-details .product-specs div { border-radius: 0; }
    /* The mobile gallery remains in normal flow. It never overlays product
       text, price or controls, and the main photo retains its full frame. */
    @media (max-width: 680px) {
      #productModal .product-modal-media {
        position: relative;
        z-index: auto;
        height: auto;
        min-height: 0;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        box-shadow: none;
      }

      #productModal .product-gallery-shell,
      #productModal .product-gallery-shell.has-thumbs {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 74px;
        height: auto;
        min-height: 0;
        gap: 8px;
      }

      #productModal .product-gallery-shell:not(.has-thumbs) {
        grid-template-rows: auto;
      }

      #productModal .product-gallery-stage {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
      }

      #productModal .product-gallery-thumbs {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 74px;
      }

      #productModal .product-gallery-stage img.product-gallery-main {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
        object-position: center;
      }

    }

    @media (max-width: 360px) {
      #productModal .product-modal-media {
        height: auto;
        min-height: 0;
      }
    }

    .footer-legal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.62);
      font-size: 12px;
      line-height: 1.5;
    }
    .footer-legal nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px 16px;
    }
    .footer-legal a {
      color: #fff;
      text-decoration: none;
    }
    .footer-legal a:hover { color: var(--red); }

    .cookie-notice {
      position: fixed;
      z-index: 140;
      left: 50%;
      bottom: 24px;
      display: none;
      align-items: center;
      gap: 18px;
      width: min(720px, calc(100% - 32px));
      padding: 14px 14px 14px 20px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: #101216;
      color: #fff;
      box-shadow: 0 20px 60px rgba(15,18,22,.28);
      transform: translateX(-50%);
    }
    .cookie-notice.visible { display: flex; }
    .cookie-notice span {
      flex: 1;
      font-size: 13px;
      line-height: 1.45;
    }
    .cookie-notice a {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .cookie-notice button {
      flex: 0 0 auto;
      min-height: 42px;
      padding: 0 18px;
      border: 0;
      border-radius: 10px;
      background: var(--red);
      color: #fff;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
    }

    @media (max-width: 680px) {
      .footer-legal {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 22px;
      }
      .footer-legal nav { justify-content: flex-start; }
      .cookie-notice {
        right: 12px;
        bottom: 92px;
        left: 12px;
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        width: auto;
        padding: 12px;
        border-radius: 14px;
        transform: none;
      }
      .cookie-notice span {
        font-size: 12px;
        line-height: 1.35;
      }
      .cookie-notice button {
        width: 100%;
        min-height: 38px;
      }
    }

    /* Minimal homepage advantage strip */
    #about.wrap {
      padding-top: 10px;
      padding-bottom: 20px;
    }
    #about .service-strip {
      gap: 0;
      padding: 0;
      border-color: rgba(20,20,20,.08);
      border-radius: 14px;
      background: rgba(255,255,255,.78);
      box-shadow: none;
      backdrop-filter: blur(8px);
    }
    #about .service-strip::before {
      display: none;
    }
    #about .service-item {
      grid-template-columns: 30px 1fr;
      gap: 10px;
      min-height: 68px;
      padding: 14px 18px;
      border-right: 1px solid rgba(20,20,20,.07);
      transition: background .16s ease, transform .16s ease;
    }
    #about .service-item:last-child {
      border-right: 0;
    }
    #about .service-icon {
      width: 30px;
      height: 30px;
      border: 1px solid rgba(225,25,36,.18);
      border-radius: 50%;
      background: #fff;
      color: var(--red);
      box-shadow: none;
    }
    #about .service-icon svg {
      width: 17px;
      height: 17px;
    }
    #about .service-item b {
      font-size: 13px;
      line-height: 1.15;
    }
    #about .service-item span {
      display: block;
      margin-top: 2px;
      font-size: 11.5px;
      line-height: 1.25;
      color: rgba(20,20,20,.58);
    }
    #about .service-item:hover {
      transform: none;
      background: rgba(225,25,36,.035);
    }
    #about .service-item:hover .service-icon {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: none;
    }

    @media (max-width: 900px) {
      #about .service-strip {
        grid-template-columns: repeat(2, 1fr);
      }
      #about .service-item:nth-child(2n) {
        border-right: 0;
      }
      #about .service-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(20,20,20,.07);
      }
    }

    @media (max-width: 560px) {
      #about.wrap {
        padding-top: 6px;
        padding-bottom: 14px;
      }
      #about .service-strip {
        border-radius: 12px;
      }
      #about .service-item {
        grid-template-columns: 26px 1fr;
        gap: 8px;
        min-height: 62px;
        padding: 12px;
      }
      #about .service-icon {
        width: 26px;
        height: 26px;
      }
      #about .service-icon svg {
        width: 15px;
        height: 15px;
      }
      #about .service-item b {
        font-size: 12px;
      }
      #about .service-item span {
        font-size: 10.5px;
      }
    }

    /* Minimal homepage info cards */
    #contacts.wrap {
      padding-top: 12px;
      padding-bottom: 28px;
    }
    #contacts .info-grid {
      gap: 12px;
      align-items: stretch;
    }
    #contacts .info-card {
      min-height: 118px;
      padding: 18px;
      border-color: rgba(20,20,20,.08);
      border-radius: 14px;
      background: rgba(255,255,255,.86);
      box-shadow: none;
    }
    #contacts .info-card::before {
      display: none;
    }
    #contacts .info-card:hover {
      transform: none;
      border-color: rgba(225,25,36,.18);
      box-shadow: 0 14px 32px rgba(20,20,20,.055);
    }
    #contacts .info-card.warm {
      background: linear-gradient(135deg, rgba(225,25,36,.045), rgba(255,255,255,.92));
    }
    #contacts .info-card.dark {
      background: #111317;
      box-shadow: none;
    }
    #contacts .info-card h3 {
      margin-bottom: 8px;
      font-size: 17px;
      line-height: 1.15;
    }
    #contacts .info-card p {
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 1.35;
    }
    #contacts .info-card b,
    #contacts .info-card span {
      font-size: 13px;
      line-height: 1.35;
    }
    #contacts .info-card .btn {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      font-size: 13px;
    }
    #contacts .info-card .service-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border-color: rgba(225,25,36,.18);
      color: var(--red);
      box-shadow: none;
    }

    @media (max-width: 900px) {
      #contacts .info-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px) {
      #contacts.wrap {
        padding-top: 8px;
        padding-bottom: 20px;
      }
      #contacts .info-grid {
        gap: 10px;
      }
      #contacts .info-card {
        min-height: auto;
        padding: 15px;
      }
    }

    /* Minimal footer */
    footer {
      margin-top: 10px;
      padding: 30px 0 22px;
      background: #090b0e;
    }
    footer::before {
      height: 3px;
      background: var(--red);
    }
    footer::after {
      display: none;
    }
    .footer-grid {
      grid-template-columns: 1.1fr repeat(3, .9fr);
      gap: 22px;
      align-items: start;
    }
    footer img {
      width: 82px;
      border-radius: 10px;
      box-shadow: none;
    }
    footer h4 {
      margin-bottom: 8px;
      font-size: 14px;
    }
    footer h4::after {
      width: 24px;
      height: 2px;
      margin-top: 6px;
    }
    footer p,
    footer a {
      font-size: 12.5px;
      line-height: 1.55;
    }
    .footer-legal {
      margin-top: 20px;
      padding-top: 14px;
      gap: 14px;
      font-size: 11.5px;
    }
    .footer-legal nav {
      gap: 6px 12px;
    }

    @media (max-width: 760px) {
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
    }

    @media (max-width: 560px) {
      footer {
        margin-top: 6px;
        padding: 24px 0 96px;
      }
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      footer img {
        width: 74px;
      }
      .footer-legal {
        margin-top: 16px;
      }
    }

    /* Minimal homepage final spacing */
    #categories.wrap {
      padding-bottom: 18px;
    }
    #categories + #about.wrap,
    #about + #contacts.wrap {
      margin-top: 0;
    }
    #about.wrap {
      margin-top: 0;
    }
    #contacts.wrap {
      margin-top: 0;
    }
    #about .service-strip,
    #contacts .info-grid {
      contain: layout paint;
    }
    #contacts .info-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    #contacts .info-card.dark {
      min-height: 118px;
    }
    #contacts .info-card.dark b,
    #contacts .info-card.dark span {
      color: #fff;
    }
    #contacts .info-card.dark p {
      color: rgba(255,255,255,.74);
    }

    @media (max-width: 900px) {
      #categories.wrap {
        padding-bottom: 12px;
      }
      #about .service-strip {
        overflow: hidden;
      }
      #about .service-item {
        border-bottom: 1px solid rgba(20,20,20,.07);
      }
      #about .service-item:nth-last-child(-n + 2) {
        border-bottom: 0;
      }
      #contacts .info-card {
        min-height: 112px;
      }
    }

    @media (max-width: 680px) {
      #about .service-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #about .service-item {
        align-items: start;
      }
      #contacts .info-grid {
        grid-template-columns: 1fr;
      }
      #contacts .info-card,
      #contacts .info-card.dark {
        min-height: auto;
      }
    }

    @media (max-width: 420px) {
      #about .service-strip {
        grid-template-columns: 1fr;
      }
      #about .service-item,
      #about .service-item:nth-child(2n),
      #about .service-item:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid rgba(20,20,20,.07);
      }
      #about .service-item:last-child {
        border-bottom: 0;
      }
      #contacts .info-card h3 {
        font-size: 16px;
      }
      #contacts .info-card p {
        font-size: 12.5px;
      }
    }

    /* Minimal homepage final content cleanup */
    #contacts .info-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #contacts .info-card,
    #contacts .info-card.dark {
      min-height: 96px;
      justify-content: flex-start;
      gap: 6px;
    }
    #contacts .info-card h3 {
      margin-bottom: 2px;
    }
    #contacts .info-card p {
      margin-bottom: 0;
    }
    #contacts .info-card .service-icon {
      margin-top: 2px;
    }
    #contacts .contact-inline {
      display: grid;
      gap: 2px;
      margin-top: 2px;
    }
    #contacts .contact-inline b,
    #contacts .contact-inline span {
      display: block;
    }

    @media (max-width: 900px) {
      #contacts .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      #contacts .info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      #contacts .info-card,
      #contacts .info-card.dark {
        min-height: 0;
        display: block;
        width: 100%;
        padding: 18px 20px;
        text-align: left;
      }
      #contacts .info-card.warm h3,
      #contacts .info-card h3 {
        max-width: none;
        margin: 0 0 8px;
        font-size: 18px;
        line-height: 1.18;
        text-align: left;
      }
      #contacts .info-card.warm p,
      #contacts .info-card p {
        max-width: none;
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        text-align: left;
      }
      #contacts .info-card .service-icon {
        margin-top: 14px;
      }
      #contacts .info-card.dark {
        padding: 20px;
        background: #111317;
      }
      #contacts .info-card.dark h3 {
        color: #fff;
      }
      #contacts .info-card.dark p {
        color: rgba(255,255,255,.74);
      }
      #contacts .contact-inline {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: 14px;
      }
      #contacts .info-card.dark .contact-inline b,
      #contacts .info-card.dark .contact-inline span {
        color: #fff;
        font-size: 14px;
        line-height: 1.35;
      }
    }

    /* Mobile homepage cleanup: keep the path short and remove repeated proof blocks. */
    @media (max-width: 640px) {
      .home-page .benefits,
      .home-page #about {
        display: none;
      }

      .home-page #contacts {
        margin-top: 8px;
      }

      .home-page #contacts .info-grid {
        grid-template-columns: 1fr;
      }

      .home-page #contacts .info-card:not(.dark) {
        display: none;
      }

      .home-page #contacts .info-card.dark {
        display: block;
        width: 100%;
        min-height: 0;
        padding: 22px;
      }
    }

    /* Unified motion system */
    :root {
      --motion-fast: 130ms;
      --motion-base: 200ms;
      --motion-slow: 320ms;
      --motion-ease: cubic-bezier(.22, 1, .36, 1);
      --motion-ease-soft: cubic-bezier(.2, .75, .25, 1);
    }

    @keyframes omViewIn {
      from { opacity: .92; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes omItemIn {
      from { opacity: .82; transform: translateY(8px) scale(.995); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes omModalBackdropIn {
      from { opacity: 0; backdrop-filter: blur(0); }
      to { opacity: 1; backdrop-filter: blur(10px); }
    }

    @keyframes omModalPanelIn {
      from { opacity: 0; transform: translateY(18px) scale(.975); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes omDrawerIn {
      from { opacity: 0; transform: translateX(28px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes omCountPop {
      0% { transform: scale(.82); }
      70% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    .page.active {
      animation: omViewIn var(--motion-slow) var(--motion-ease) both;
    }

    .motion-item {
      animation: omItemIn var(--motion-base) var(--motion-ease) both;
      animation-delay: calc(min(var(--motion-index, 0), 7) * 16ms);
    }

    .modal.open {
      animation: omModalBackdropIn var(--motion-base) ease-out both;
    }

    .modal.open > .auth,
    .modal.open > .product-modal,
    .modal.open > .filter-sheet {
      animation: omModalPanelIn var(--motion-slow) var(--motion-ease) both;
      transform-origin: center bottom;
    }

    .modal.open > .cart-drawer {
      animation: omDrawerIn var(--motion-slow) var(--motion-ease) both;
    }

    .profile-order-card,
    .profile-quick-repeat article,
    .recent-card,
    .favorite-card,
    .drawer-line,
    .cart-line {
      transition:
        transform var(--motion-base) var(--motion-ease),
        opacity var(--motion-base) ease,
        border-color var(--motion-fast) ease,
        background var(--motion-fast) ease,
        box-shadow var(--motion-base) var(--motion-ease);
    }

    .profile-order-card:hover,
    .profile-quick-repeat article:hover,
    .recent-card:hover,
    .favorite-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 42px rgba(20,20,20,.08);
    }

    .product-card,
    .category,
    .brand-chip,
    .btn,
    .add,
    .details-button,
    .chip,
    .choice,
    .payment,
    .icon-button {
      transition-timing-function: var(--motion-ease-soft);
    }

    .btn:active,
    .add:active,
    .details-button:active,
    .icon-button:active,
    .chip:active,
    .choice:active,
    .payment:active {
      transform: translateY(0) scale(.975);
      transition-duration: 80ms;
    }

    .cart-count:not(:empty) {
      animation: omCountPop var(--motion-base) var(--motion-ease) both;
    }

    .order-card-details,
    .catalog-filter-panel,
    .checkout-card-form,
    .checkout-card-wallet {
      transition:
        opacity var(--motion-base) ease,
        transform var(--motion-base) var(--motion-ease),
        max-height var(--motion-slow) var(--motion-ease);
    }

    @media (max-width: 680px) {
      .motion-item {
        animation-delay: calc(min(var(--motion-index, 0), 5) * 12ms);
      }

      .modal.open > .auth,
      .modal.open > .product-modal,
      .modal.open > .filter-sheet {
        animation-name: omViewIn;
      }
    }

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

    /* Mobile density and viewport polish */
    @media (max-width: 680px) {
      html,
      body {
        max-width: 100%;
        overflow-x: clip;
      }

      body:not(.trust-page) .nav-actions #headerSearchButton,
      body:not(.trust-page) .nav-actions #loginButton,
      body:not(.trust-page) .nav-actions .user-pill {
        display: none !important;
      }

      body:not(.trust-page) .nav {
        grid-template-columns: auto 1fr auto;
      }

      body:not(.trust-page) .nav-actions {
        grid-column: 3;
      }

      .hero {
        min-height: 392px;
        padding: 16px 16px 126px;
        border-radius: 20px;
      }

      .hero h1 {
        margin: 12px 0 10px;
        font-size: clamp(27px, 8.2vw, 32px);
        line-height: .98;
      }

      .hero-actions {
        margin-top: 13px;
      }

      .hero-actions .btn {
        min-height: 44px;
      }

      .wrap {
        width: min(100% - 20px, 1180px);
      }

      #categories.wrap {
        padding-top: 20px;
        padding-bottom: 10px;
      }

      .section-title {
        margin-bottom: 14px;
        font-size: 22px;
      }

      .categories {
        gap: 8px;
      }

      .category {
        min-height: 182px;
        padding: 8px;
        border-radius: 17px;
      }

      .category-visual {
        height: 116px;
        border-radius: 13px;
      }

      .category b {
        min-height: 32px;
        padding: 0 2px;
        font-size: 13px;
        line-height: 1.2;
      }

      .catalog-page #catalog {
        padding-top: 18px;
      }

      .catalog-page .catalog-page-head h1 {
        margin: 12px 0 8px;
        font-size: 29px;
      }

      .catalog-page .catalog-page-head p {
        margin-bottom: 10px;
      }

      .catalog-main {
        padding: 10px;
      }

      .catalog-search-row input,
      .mobile-filter-button,
      .catalog-search-row .btn {
        min-height: 44px;
      }

      #productGrid.grid {
        gap: 8px;
      }

      #productGrid .photo {
        min-height: 152px;
      }

      #productGrid .photo img {
        height: 140px;
      }

      .checkout-layout,
      .order-layout {
        gap: 12px;
      }

      .checkout-head,
      .checkout-summary-card,
      .checkout-step {
        padding: 14px;
        border-radius: 18px;
      }

      .checkout-head h2 {
        font-size: 23px;
      }

      .checkout-progress {
        margin-top: 12px;
      }

      .checkout-progress span {
        min-height: 42px;
        font-size: 11px;
      }

      .checkout-steps {
        gap: 10px;
      }

      .fields,
      .choice-grid,
      .payment-grid {
        gap: 9px;
      }

      .delivery-address-fields {
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
      }

      .delivery-address-short-row {
        grid-template-columns: 1fr;
        gap: 9px;
      }

      .field input,
      .field select,
      .field textarea,
      .delivery-address-field input {
        min-height: 46px;
      }

      .filter-sheet {
        width: 100%;
        max-height: calc(100dvh - 10px);
        margin-top: auto;
        padding: 16px;
        border-radius: 22px 22px 0 0;
      }

      .cart-drawer {
        max-height: calc(100dvh - 10px);
        padding-bottom: max(16px, env(safe-area-inset-bottom));
      }

      .product-modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 10px);
        border-radius: 20px;
      }

      .product-modal-media {
        padding: 10px;
      }

      .product-modal-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        margin-bottom: 18px;
      }

      .product-modal-top > div:first-child {
        display: contents;
      }

      #productModalTag {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
      }

      .product-modal-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
      }

      #productModalName {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        max-width: none;
        margin: 2px 0 0;
        font-size: clamp(29px, 8.4vw, 36px);
        line-height: 1.06;
        letter-spacing: -.02em;
        overflow-wrap: break-word;
      }

      .related-products {
        margin-bottom: 10px;
      }

      .product-usage-card {
        margin: 10px 0;
        padding: 10px 11px;
        border-radius: 13px;
      }

      .product-usage-card span {
        font-size: 11px;
      }

      .product-usage-card b {
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.25;
      }

      .product-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin: 10px 0 14px;
      }

      .product-facts .fact {
        min-width: 0;
        padding: 9px 10px;
        border-radius: 12px;
      }

      .product-facts .fact span {
        font-size: 11px;
      }

      .product-facts .fact b {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .related-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .related-product {
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 7px;
        align-items: center;
        min-height: 64px;
        padding: 7px;
        border-radius: 13px;
        background: #fff;
      }

      .related-product:nth-child(n + 4) {
        display: none;
      }

      .related-product-main {
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 2px 9px;
        align-items: center;
      }

      .related-product-main > span {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 52px;
        height: 52px;
        border-radius: 10px;
      }

      .related-product-main > span img {
        width: 100%;
        height: 52px;
        padding: 4px;
      }

      .related-product b {
        grid-column: 2;
        grid-row: 1;
        font-size: 12px;
        line-height: 1.18;
        -webkit-line-clamp: 2;
      }

      .related-product small {
        display: none;
      }

      .related-product em {
        grid-column: 2;
        grid-row: 2;
        font-size: 13px;
        line-height: 1;
      }

      .related-cart {
        width: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 12px;
        font-size: 0;
        box-shadow: none;
      }

      .related-cart::before {
        content: "+";
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
      }

      .product-gallery-stage {
        width: 100%;
        height: min(112vw, 440px);
        max-height: none;
        aspect-ratio: auto;
        padding: 8px;
        background: #fff;
        touch-action: pan-y;
      }

      .product-gallery-stage img.product-gallery-main {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        padding: 4px;
        object-fit: contain;
        object-position: center;
      }

      .product-gallery-thumbs {
        padding: 4px 2px 2px;
      }
      .product-gallery-thumbs::-webkit-scrollbar { display: none; }
      .product-gallery-controls {
        right: 10px;
        bottom: 10px;
      }

      .product-gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .mobile-bar {
        bottom: max(8px, env(safe-area-inset-bottom));
        padding: 6px;
        border-radius: 20px;
      }

      .mobile-nav-btn {
        min-height: 50px;
        border-radius: 14px;
        font-size: 11.5px;
      }

      .cookie-notice {
        bottom: calc(78px + env(safe-area-inset-bottom));
        padding: 10px;
      }

      .cookie-notice span {
        font-size: 11px;
      }

      .site-toast {
        bottom: calc(142px + env(safe-area-inset-bottom));
      }

      footer {
        padding-top: 22px;
      }

      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 14px;
      }

      footer img {
        width: 66px;
      }

      footer h4 {
        font-size: 13px;
      }

      footer p,
      footer a {
        font-size: 11.5px;
      }

      .footer-legal {
        gap: 10px;
      }

      .trust-main {
        padding-top: 12px;
      }

      .trust-page .nav {
        padding: 6px 0;
      }

      .trust-page .nav-actions .btn {
        min-height: 40px;
        padding: 0 14px;
      }

      .trust-hero {
        padding: 20px 16px;
        border-radius: 18px;
      }

      .trust-hero > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .trust-hero h1 {
        margin: 13px 0 10px;
        font-size: clamp(22px, 6vw, 24px);
        line-height: 1.02;
        letter-spacing: -.012em;
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: balance;
      }

      .trust-actions {
        gap: 8px;
        margin-top: 15px;
        width: 100%;
      }

      .trust-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
      }

      .trust-layout,
      .trust-content {
        gap: 10px;
      }

      .trust-card,
      .trust-note,
      .trust-side-card {
        padding: 15px;
        border-radius: 16px;
      }

      .trust-card h2 {
        margin: 12px 0 10px;
        font-size: 23px;
      }

      .trust-card p,
      .trust-side-card p,
      .trust-note p {
        font-size: 13px;
        line-height: 1.45;
      }

      .trust-grid,
      .trust-list,
      .trust-steps {
        gap: 8px;
      }

      .trust-grid div,
      .trust-list div {
        padding: 12px;
      }
    }

    @media (max-width: 420px) {
      .profile-stats {
        grid-template-columns: 1fr 1.35fr;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-grid > div:first-child,
      .footer-grid > div:last-child {
        grid-column: 1 / -1;
      }
    }

    /* Compact mobile footer */
    @media (max-width: 680px) {
      body:not(.trust-page) {
        padding-bottom: 96px;
      }

      body:not(.trust-page) footer {
        margin-top: 6px;
        padding: 18px 0 16px;
      }

      body:not(.trust-page) .footer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px 18px;
      }

      body:not(.trust-page) .footer-grid > div:first-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 11px;
        align-items: center;
      }

      body:not(.trust-page) .footer-grid > div:first-child img {
        width: 54px;
      }

      body:not(.trust-page) .footer-grid > div:first-child p {
        margin: 0;
        font-size: 11.5px;
        line-height: 1.35;
      }

      body:not(.trust-page) .footer-grid > div:nth-child(2) {
        display: none;
      }

      body:not(.trust-page) .footer-grid > div:last-child {
        grid-column: auto;
      }

      body:not(.trust-page) footer h4 {
        margin-bottom: 6px;
        font-size: 12.5px;
      }

      body:not(.trust-page) footer h4::after {
        width: 20px;
        margin-top: 4px;
      }

      body:not(.trust-page) footer p,
      body:not(.trust-page) footer a {
        font-size: 11.5px;
        line-height: 1.45;
      }

      body:not(.trust-page) .footer-legal {
        display: block;
        margin-top: 12px;
        padding-top: 10px;
        font-size: 11px;
        line-height: 1.4;
      }

      body:not(.trust-page) .footer-legal nav {
        display: none;
      }
    }

    /* Keep complete product artwork visible inside catalog cards. */
    #productGrid .photo img {
      position: absolute;
      inset: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: center;
    }

    /* Stage 7: compact, readable dialogs and cards on narrow phones. */
    @media (max-width: 680px) {
      .modal { padding: 10px; }
      .auth {
        width: 100%;
        max-height: calc(100dvh - 20px);
        grid-template-columns: 1fr;
        border-radius: 18px;
      }
      .auth-side { display: none; }
      .auth-main { min-width: 0; padding: 15px; }
      .auth-head > div { min-width: 0; }
      .auth-head h2 { overflow-wrap: anywhere; }
      .auth-grid { grid-template-columns: 1fr; }
      .auth-grid input,
      .auth-grid select { width: 100%; min-width: 0; font-size: 16px; }
      .product-modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 18px;
      }
      .product-modal-media {
        height: min(42dvh, 360px);
        min-height: 220px;
        padding: 12px;
      }
      .product-gallery-stage img { max-height: min(38dvh, 320px); }
      .product-modal-top > div:first-child { min-width: 0; }
      .product-modal h2 { font-size: clamp(22px, 7vw, 28px); }
      .product-modal-actions { flex: 0 0 auto; }
      .product-body,
      .product-card,
      .product-card h3,
      .product-card p { min-width: 0; }
      .cart-drawer { overflow-x: clip; }
      .drawer-actions {
        min-width: 0;
        margin: 14px 0 0;
        padding: 14px 0 max(4px, env(safe-area-inset-bottom));
      }
    }

    @media (max-width: 360px) {
      .modal { padding: 6px; }
      .auth { max-height: calc(100dvh - 12px); border-radius: 14px; }
      .auth-main { padding: 12px; }
      .tabs { gap: 6px; margin: 12px 0; }
      .tab { min-height: 40px; font-size: 13px; }
      .product-modal { max-height: calc(100dvh - 12px); border-radius: 14px; }
      .product-modal-body { padding: 14px; }
      .product-modal-media { min-height: 190px; height: 36dvh; }
      .product-modal-actions { gap: 5px; }
      .product-share-button { padding-inline: 9px; }
    }

    /* Stage 8: catalog usability — calmer grid, readable mobile filters and product view. */
    #productGrid.grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
    }

    /* Stage 9: give portrait product photos enough room and never crop them. */
    #productGrid .photo {
      aspect-ratio: 1 / 1.14;
    }

    @media (max-width: 1180px) {
      #productGrid.grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 860px) {
      #productGrid.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      body.catalog-page {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
      }

      #productGrid.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-bottom: calc(98px + env(safe-area-inset-bottom));
      }

      #productGrid .photo {
        aspect-ratio: 1 / 1.1;
      }

      #productGrid .photo img {
        inset: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
      }

      .active-filter-bar {
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 0;
      }

      .active-filter-bar .clear-all {
        max-width: 100%;
      }

      #filterModal.modal.open {
        align-items: end;
        padding: 10px 10px 0;
        background: rgba(12, 14, 18, .58);
      }

      .filter-sheet {
        width: 100%;
        max-height: calc(100dvh - 10px);
        margin: 0;
        border: 1px solid rgba(232, 227, 216, .96);
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
        background: #fff;
        isolation: isolate;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 -22px 70px rgba(0, 0, 0, .28);
      }

      .filter-sheet-head {
        position: sticky;
        top: -16px;
        z-index: 3;
        margin: -16px 0 12px;
        padding: 16px 0 12px;
        border-bottom: 1px solid var(--line);
        background: #fff;
      }

      .filter-sheet-actions {
        position: sticky;
        bottom: -16px;
        z-index: 3;
        margin: 18px 0 -16px;
        padding: 12px 0 calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: #fff;
      }

      .product-modal-media {
        height: min(38dvh, 320px);
        min-height: 240px;
        overflow: hidden;
      }

      .product-gallery-shell,
      .product-gallery-shell:not(.has-thumbs) {
        width: 100%;
        height: 100%;
        min-height: 0;
      }

      .product-gallery-stage {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        aspect-ratio: auto;
        overflow: hidden;
      }

      .product-gallery-stage img.product-gallery-main {
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .product-modal-body {
        position: relative;
        z-index: 2;
        background: #fff;
      }

      #productModalName {
        font-size: clamp(22px, 6.3vw, 27px);
        line-height: 1.08;
      }
    }