:root{
      --teal:#61939e;
      --teal2:#8fc3c9;
      --ink:#111;

      --tealDark:#4f7f89;

      --searchW:96px;
      --searchOpenW:calc(100% - 110px);

      --starsX: 0px;
      --starsY: 0px;

      --catLift:0px;
    }

    ::selection{
      background:#9bcdd3;
      color:#111111;
      text-shadow:none;
    }

    ::-moz-selection{
      background:#9bcdd3;
      color:#111111;
      text-shadow:none;
    }

    *{ box-sizing:border-box; }
    *{
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    *::-webkit-scrollbar{
      width:0;
      height:0;
      background:transparent;
    }
    html,body{ height:100%; max-width:100%; }
    html{
      overflow-x:hidden;
      scroll-behavior:auto !important;
      overscroll-behavior:auto;
      overflow-anchor:none;
    }
    body{
      margin:0;
      background:#f5f3ee;
      color: var(--ink);
      font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      overflow-x:hidden;
      overscroll-behavior:auto;
      overflow-anchor:none;
    }

    .app{
      min-height:100vh;
      width:100%;
      max-width:100%;
      position:relative;
      overflow-x:hidden;
    }

    .bg-layer{
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      overflow:hidden;
      background:#f5f3ee;
    }

    .bg-base{
      position:absolute;
      inset:0;
      background: url("/img/assets/bg-index.png") center center / cover no-repeat;
      transform: translate3d(0,0,0);
      filter: saturate(1.02) contrast(1.02);
    }

    .bg-stars{
      position:absolute;
      inset:0;
      background: url("/img/assets/stars-index.png") center center / cover no-repeat;
      transform: translate3d(var(--starsX), var(--starsY), 0) scale(1.22);
      transform-origin:center;
      opacity: .88;
      mix-blend-mode: multiply;
      filter: saturate(1.1) contrast(1.05);
      will-change: transform;
    }

    .content{
      position:relative;
      z-index:1;
      min-height:100vh;
      width:100%;
      max-width:100%;
      overflow-x:hidden;
    }

    header.topbar{
      position:sticky;
      top:0;
      z-index:60;
      height:64px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 10px 18px;
      backdrop-filter: blur(12px);
      background: linear-gradient(180deg, rgba(247,245,240,.72), rgba(245,243,238,.36));
      border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .topbar-inner{
      width:min(1180px, calc(100% - 12px));
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .topbar-brand{
      flex:0 0 auto;
      height:100%;
      display:inline-flex;
      align-items:center;
      text-decoration:none;
    }
    .topbar-brand img{
      display:block;
      height:85%;
      width:auto;
      object-fit:contain;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
    }

    .search-dim{
      position:fixed;
      left:0;
      right:0;
      top:64px;
      bottom:0;
      z-index:55;
      background: radial-gradient(1000px 680px at 50% 20%, rgba(0,0,0,.35), rgba(0,0,0,.55));
      opacity:0;
      pointer-events:none;
      transition: opacity .16s ease;
    }
    body.search-open .search-dim{
      opacity:1;
      pointer-events:auto;
    }

    .search{
      width: var(--searchW);
      height: 42px;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
      border: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 10px 28px rgba(0,0,0,.08);
      transition: width .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
      cursor:text;
      position:relative;
    }
    body.search-open .search{
      width: var(--searchOpenW);
      background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.40));
      border-color: rgba(97,147,158,.32);
      box-shadow: 0 18px 44px rgba(0,0,0,.16);
    }

    .search i, .search svg{ width:18px; height:18px; opacity:.78; }

    .search input{
      flex: 1;
      border:none;
      outline:none;
      background:transparent;
      font-size: 14px;
      color: rgba(0,0,0,.80);
      min-width: 0;
      opacity:0;
      pointer-events:none;
      transform: translateX(-6px);
      transition: opacity .14s ease, transform .14s ease;
    }
    body.search-open .search input{
      opacity:1;
      pointer-events:auto;
      transform: translateX(0);
    }

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

    .icon-btn{
      height:42px;
      min-width:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border: 1px solid rgba(0,0,0,.12);
      background:
        linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.12));
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 28px rgba(0,0,0,.10);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      text-decoration:none;
      color: rgba(0,0,0,.86);
      position:relative;
      cursor:pointer;
    }
    .js-cart-btn{ display:none !important; }
    .icon-btn:hover{
      transform: translateY(-1px);
      background:
        linear-gradient(135deg, rgba(255,255,255,.40), rgba(255,255,255,.16));
      border-color: rgba(0,0,0,.18);
    }
    .icon-btn svg{ width:18px; height:18px; }

    .account-menu{
      position:relative;
      display:inline-flex;
      align-items:center;
      z-index:70;
    }
    .account-menu.loading .account-trigger::after{
      content:"";
      position:absolute;
      inset:7px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.58), rgba(255,255,255,0));
      animation:accountShimmer 1.05s linear infinite;
      pointer-events:none;
      opacity:.82;
    }
    .account-trigger[aria-expanded="true"]{
      background:#fff;
      border-color:rgba(97,147,158,.34);
      box-shadow:0 14px 36px rgba(0,0,0,.16);
    }
    .account-trigger-avatar{
      width:34px;
      height:34px;
      border-radius:999px;
      overflow:hidden;
      display:block;
      border:1px solid rgba(255,255,255,.82);
      box-shadow:0 6px 16px rgba(0,0,0,.12);
      background:rgba(97,147,158,.16);
    }
    .account-trigger-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .account-trigger--photo{
      padding:0;
    }
    .account-dropdown{
      position:absolute;
      top:calc(100% + 10px);
      right:0;
      width:min(310px, calc(100vw - 24px));
      border:1px solid rgba(0,0,0,.10);
      border-radius:8px;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(16px);
      box-shadow:0 18px 54px rgba(0,0,0,.18);
      padding:12px;
      opacity:0;
      visibility:hidden;
      transform:translateY(-8px) scale(.98);
      transform-origin:top right;
      transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
      pointer-events:none;
    }
    .account-menu.open .account-dropdown{
      opacity:1;
      visibility:visible;
      transform:translateY(0) scale(1);
      pointer-events:auto;
    }
    .account-loading,
    .account-muted,
    .account-status{
      color:rgba(0,0,0,.56);
      font:700 13px/1.35 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }
    .account-skeleton{
      min-height:104px;
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:2px;
    }
    .account-skel-avatar,
    .account-skel-line,
    .account-skel-button,
    .account-widget-skeleton{
      display:block;
      overflow:hidden;
      position:relative;
      background:rgba(97,147,158,.13);
    }
    .account-skel-avatar::after,
    .account-skel-line::after,
    .account-skel-button::after,
    .account-widget-skeleton::after{
      content:"";
      position:absolute;
      inset:0;
      transform:translateX(-100%);
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.72), rgba(255,255,255,0));
      animation:accountShimmer 1.15s linear infinite;
    }
    @keyframes accountShimmer{
      100%{transform:translateX(100%);}
    }
    .account-skel-avatar{
      width:38px;
      height:38px;
      border-radius:999px;
      flex:0 0 auto;
    }
    .account-skel-body{
      flex:1 1 auto;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:9px;
      padding-top:3px;
    }
    .account-skel-line{
      height:12px;
      width:58%;
      border-radius:999px;
    }
    .account-skel-line--wide{
      width:78%;
      height:15px;
    }
    .account-skel-button{
      width:150px;
      height:34px;
      border-radius:8px;
      margin-top:8px;
    }
    .account-widget-skeleton{
      width:190px;
      height:34px;
      border-radius:8px;
    }
    .account-status{
      min-height:18px;
      margin-top:8px;
    }
    .account-login{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:flex-start;
    }
    .account-login-title{
      font:900 15px/1.15 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.82);
    }
    .account-widget{
      min-height:36px;
      display:flex;
      align-items:center;
    }
    .account-user{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .account-user-head{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .account-avatar{
      width:38px;
      height:38px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.80);
      background:rgba(97,147,158,.16);
      overflow:hidden;
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .account-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .account-avatar i,
    .account-avatar svg{
      width:20px;
      height:20px;
      color:#61939e;
    }
    .account-name-wrap{
      min-width:0;
      flex:1 1 auto;
    }
    .account-name-row{
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
    }
    .account-name{
      min-width:0;
      max-width:190px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font:900 15px/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.84);
    }
    .account-links{
      display:flex;
      flex-direction:column;
      gap:4px;
      padding-top:4px;
      border-top:1px solid rgba(0,0,0,.08);
    }
    .account-links--admin{
      border-top:0;
      padding-top:0;
      padding-bottom:6px;
    }
    .account-links--admin .account-link{
      background:rgba(97,147,158,.10);
      color:#335e67;
    }
    .account-delivery-alert{
      border:1px solid rgba(97,147,158,.24);
      border-radius:8px;
      background:rgba(97,147,158,.11);
      padding:10px;
      color:rgba(0,0,0,.68);
      font:800 12px/1.35 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }
    .account-link{
      min-height:38px;
      border-radius:8px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 9px;
      color:rgba(0,0,0,.78);
      font:800 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      text-decoration:none;
      transition:background .14s ease, transform .14s ease;
    }
    .account-link:hover{
      background:rgba(97,147,158,.10);
      transform:translateX(1px);
    }
    .account-link i,
    .account-link svg{
      width:17px;
      height:17px;
      color:#61939e;
      flex:0 0 auto;
    }

    .cart-badge{
      position:absolute;
      top:-6px;
      right:-6px;
      height:18px;
      min-width:18px;
      padding: 0 6px;
      border-radius:999px;
      background:
        linear-gradient(135deg, rgba(44,54,58,.95), rgba(15,18,19,.86));
      color:#fff;
      font-size:11px;
      line-height:18px;
      text-align:center;
      border: 1px solid rgba(255,255,255,.22);
    }

    main{ width:100%; display:flex; justify-content:center; }
    .wrap{ width:min(1180px, 100%); padding: 18px; }

    .hero{
      display:grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
      gap:18px;
      align-items:flex-start;

      /* больше НЕ держим секцию 80vh — из-за этого и была "пустыня" на больших экранах */
      min-height: unset;
      height:auto;

      /* сверху максимум 10vh, и не больше 120px */
      padding-top: 8px;
      padding-bottom: clamp(10px, 2.4vh, 28px);
    }

    .hero-left{
      display:flex;
      flex-direction:column;
      gap: 10px;
      padding: 8px 10px 64px;
      position: relative;
      z-index: 1;
      min-width: 0;
      align-items:flex-start;
      align-self:stretch;
    }

    .hero-left .logo{
      display:block;
      width:min(360px, 54vw);
      max-width:100%;
      height:auto;
      filter:drop-shadow(0 12px 20px rgba(0,0,0,.16));
    }

    .hero-title-area{
      display:block;
      min-width: 0;
      width: 100%;
    }

    .hero-left .hero-cta{
      position:absolute;
      left:10px;
      bottom:8px;
      z-index:2;
    }

    .hero-left .hero-cta.btn.catalog{
      height:44px;
      min-height:44px;
      min-width:146px;
      padding:12px 18px;
      font-size:15px;
    }

    /* чтобы мазки не обрезались и CTA стояла справа от блока с мазками */
    /* (убрали дубликат .tagline, чтобы не было конфликтов) */

    .tagline{
      font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .55px;
      font-size: clamp(20px, 2.25vw, 27px);
      line-height: 1.05;
      min-width: 0;
    }

    .tagline .line{
      display:block;
      position:relative;
      width: fit-content;
      max-width: 100%;
      padding: 8px 14px;
      margin: 0;
      isolation: isolate;
      overflow: visible;
      color: rgba(255,255,255,.96);
    }

    .tagline .line::before{
      content:"";
      position:absolute;
      inset: 0;
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index:-1;
      pointer-events:none;
      opacity: 1;
      transform-origin: center;
      will-change: transform;
    }

    .tagline .line1{
      padding: 14px 14px 22px;
    }

    .tagline .line1::before{
      background-image: url("/img/assets/hero-brush-big.png");
      background-position: center;
      background-size: 100% 218%;
      background-repeat: no-repeat;
      transform: scaleX(1.40);
    }

.tagline .line2{
      margin-top: 7px;
      font-size: clamp(14px, 1.35vw, 17px);
      font-weight: 800;
      letter-spacing: .35px;
      text-transform: none;
      color: rgba(255,255,255,.92);
    }

    .tagline .line2::before{
      background-image: url("/img/assets/hero-brush-small.png");
      background-position: center;
      background-size: 100% 288%;
      background-repeat: no-repeat;
      opacity: .98;
      transform: scale(1.30);
    }

.tagline .accent{
      color: var(--teal);
      font-weight: 900;
    }

    .tagline .accent::selection{background:#9bcdd3;color:#111111;text-shadow:none}
    .tagline .accent::-moz-selection{background:#9bcdd3;color:#111111;text-shadow:none}

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 18px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.12);
      background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.30));
      box-shadow:
        0 18px 46px rgba(0,0,0,.14),
        0 10px 22px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.86);
      font-weight: 900;
      font-size: 14px;
      letter-spacing: .2px;
      text-decoration:none;
      color: rgba(0,0,0,.86);
      cursor:pointer;
      user-select:none;
      line-height: 1;
      height: 56px;
      min-height: 56px;
      width: auto;
      min-width: 220px;
      max-width: 100%;
      transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
    }

    .btn.catalog{
      padding: 14px 24px;
      font-size: 18px;
      line-height: 1;
      height: 52px;
      min-height: 52px;
      min-width: 190px;
      width: auto;
      border-radius: 999px;
      border-color: rgba(38,52,57,.95);
      color: rgba(248,248,248,.96);
      background: linear-gradient(135deg, rgba(58,76,82,.94), rgba(31,42,46,.90));
      box-shadow:0 12px 28px rgba(24,34,37,.28);
    }

    /* чтобы не превращалась в странный «скошенный прямоугольник» на узких экранах */
    .btn.catalog, .btn.catalog *{ border-radius: 999px; }

    .btn.catalog .btn-arr{
      width: 0px;
      opacity: 0;
      overflow: hidden;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transform: translateX(-8px);
      margin-right: 0px;
      transition: width .22s ease, opacity .22s ease, transform .22s ease, margin-right .22s ease;
    }

    .btn.catalog:hover{
      background: #ccc;
      border-color: rgba(0,0,0,.18);
      color: rgba(0,0,0,.86);
      box-shadow: 0 10px 24px rgba(0,0,0,.12);
    }

    .btn.catalog:hover .btn-arr{
      width: 20px;
      opacity: 1;
      transform: translateX(0);
      margin-right: 10px;
    }

    .btn.catalog:hover svg{ color: rgba(0,0,0,.86); }

    .btn:hover{
      transform: translateY(-2px);
      border-color: rgba(0,0,0,.26);
      background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.32));
      box-shadow:
        0 26px 70px rgba(0,0,0,.22),
        0 14px 30px rgba(0,0,0,.12),
        0 0 0 6px rgba(97,147,158,.10),
        inset 0 1px 0 rgba(255,255,255,.90);
      filter: saturate(1.02);
    }

    .btn:active{
      transform: translateY(-1px);
      box-shadow:
        0 18px 52px rgba(0,0,0,.18),
        0 10px 22px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.82);
    }

    .btn.primary{
      border-color: rgba(97,147,158,.78);
      background: linear-gradient(135deg, rgba(97,147,158,.52), rgba(143,195,201,.22));
      box-shadow:
        0 22px 64px rgba(0,0,0,.16),
        0 18px 60px rgba(97,147,158,.26),
        inset 0 1px 0 rgba(255,255,255,.24);
    }

    .btn.primary:hover{
      border-color: rgba(97,147,158,.92);
      box-shadow:
        0 30px 86px rgba(0,0,0,.18),
        0 26px 90px rgba(97,147,158,.38),
        0 0 0 6px rgba(143,195,201,.18),
        inset 0 1px 0 rgba(255,255,255,.28);
    }

    .btn svg{ width:18px; height:18px; }

    .hero-right{
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:flex-end;
      justify-content:flex-start;
      align-self:stretch;
    }

    .home-reviews{
      width:min(380px, 100%);
      border-radius:22px;
      background:rgba(255,255,255,.38);
      border:1px solid rgba(255,255,255,.46);
      box-shadow:0 18px 54px rgba(0,0,0,.12);
      backdrop-filter:blur(12px);
      padding:14px;
      overflow:hidden;
    }
    .home-reviews-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .home-reviews-kicker{
      display:block;
      margin-bottom:4px;
      font:900 11px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      letter-spacing:.7px;
      text-transform:uppercase;
      color:#61939e;
    }
    .home-reviews h2{
      margin:0;
      font:900 20px/1.05 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.82);
    }
    .home-reviews-all{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:34px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(255,255,255,.68);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 10px 28px rgba(0,0,0,.08);
      color:rgba(0,0,0,.72);
      text-decoration:none;
      font:800 12px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      white-space:nowrap;
      transition:transform .16s ease, background .16s ease, border-color .16s ease;
    }
    .home-reviews-all:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.86);
      border-color:rgba(97,147,158,.26);
    }
    .home-reviews-all i{width:15px;height:15px;}
    .home-review-list{
      display:grid;
      gap:10px;
    }
    .home-review-card{
      border-radius:16px;
      background:rgba(255,255,255,.66);
      border:1px solid rgba(0,0,0,.07);
      box-shadow:0 12px 32px rgba(0,0,0,.08);
      padding:12px;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .home-review-card:hover{
      transform:translateY(-2px);
      border-color:rgba(97,147,158,.22);
      box-shadow:0 16px 42px rgba(0,0,0,.11);
    }
    .home-review-card--lavender{
      border-color:rgba(151,128,184,.22);
      box-shadow:0 12px 34px rgba(151,128,184,.10);
    }
    .home-review-top{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .review-avatar{
      width:34px;
      height:34px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, rgba(97,147,158,.30), rgba(255,255,255,.72));
      border:1px solid rgba(97,147,158,.24);
      color:#335e67;
      font:900 14px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      flex:0 0 auto;
      overflow:hidden;
    }
    .review-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .home-review-top b{
      display:block;
      font:900 13px/1.15 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.82);
    }
    .home-review-top small{
      display:block;
      margin-top:2px;
      color:rgba(0,0,0,.48);
      font:700 11px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }
    .home-review-card p{
      margin:10px 0 8px;
      color:rgba(0,0,0,.70);
      font:700 13px/1.35 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }
    .home-review-date{
      color:rgba(0,0,0,.44);
      font:800 11px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }

    .hero-art{
      width: min(420px, 100%);
      aspect-ratio: 1/1;
      border-radius: 22px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.22));
      border: 1px solid rgba(0,0,0,.12);
      box-shadow: 0 34px 84px rgba(0,0,0,.18);
    }
    .hero-art img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter: contrast(1.03) saturate(1.04);
      transform: scale(1.02);
    }

    .new-strip{
      margin-top: clamp(14px, 3vh, 26px);
      position:relative;
    }

    .torn{
      width:100%;
      padding: 14px 14px 16px;
      border-radius: 20px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.26));
      border: 1px solid rgba(0,0,0,.12);
      box-shadow: 0 30px 84px rgba(0,0,0,.18);
      position:relative;
      overflow:hidden;
    }

    .torn::before{
      content:"";
      position:absolute;
      inset:-26px;
      background:
        radial-gradient(150px 70px at 10% 0%, rgba(0,0,0,.22), transparent 72%),
        radial-gradient(170px 70px at 38% 0%, rgba(0,0,0,.16), transparent 72%),
        radial-gradient(190px 76px at 70% 0%, rgba(0,0,0,.20), transparent 72%),
        radial-gradient(170px 70px at 95% 0%, rgba(0,0,0,.18), transparent 72%),
        radial-gradient(150px 70px at 8% 100%, rgba(0,0,0,.20), transparent 72%),
        radial-gradient(170px 70px at 36% 100%, rgba(0,0,0,.14), transparent 72%),
        radial-gradient(190px 76px at 66% 100%, rgba(0,0,0,.18), transparent 72%),
        radial-gradient(170px 70px at 92% 100%, rgba(0,0,0,.16), transparent 72%);
      opacity: .18;
      mix-blend-mode:multiply;
      pointer-events:none;
    }

    .torn::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(97,147,158,.22), transparent 42%),
        radial-gradient(340px 160px at 82% 28%, rgba(143,195,201,.22), transparent 62%),
        radial-gradient(240px 140px at 32% 70%, rgba(0,0,0,.14), transparent 66%);
      opacity: .86;
      pointer-events:none;
    }

    .new-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      position:relative;
      z-index:2;
      padding: 0 2px 10px;
    }
    .new-title{
      font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .8px;
      font-size: 18px;
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .new-title .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size: 11px;
      font-weight: 900;
      padding: 5px 10px;
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(97,147,158,.30), rgba(143,195,201,.22));
      border: 1px solid rgba(97,147,158,.38);
      color: rgba(0,0,0,.86);
    }

    .new-more{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      font-weight: 800;
      font-size: 13px;
      text-decoration:none;
      color: rgba(0,0,0,.78);
      border: 1px solid rgba(0,0,0,.12);
      background:
        linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.22));
      padding: 9px 12px;
      border-radius: 999px;
      box-shadow: 0 14px 34px rgba(0,0,0,.10);
      transition: transform .12s ease;
      position:relative;
      z-index:2;
    }
    .new-more:hover{ transform: translateY(-1px); }
    .new-more svg{ width:16px; height:16px; }

    .new-row{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 12px;
      padding: 6px 2px 2px;
      position:relative;
      z-index:2;
      overflow: visible;
    }
    .new-row::-webkit-scrollbar{ height: 10px; }
    .new-row::-webkit-scrollbar-thumb{
      background:
        linear-gradient(90deg, rgba(97,147,158,.38), rgba(0,0,0,.18));
      border-radius: 999px;
    }
    .new-row::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 999px; }

    .new-card{
      min-width: 0;
      width: 100%;
      scroll-snap-align:none;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.14);
      background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.26));
      box-shadow: 0 18px 44px rgba(0,0,0,.12);
      overflow:hidden;
      position:relative;
    }
    .new-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(100px 80px at 10% 12%, rgba(0,0,0,.14), transparent 70%),
        radial-gradient(120px 90px at 92% 92%, rgba(97,147,158,.20), transparent 75%);
      opacity: .85;
      pointer-events:none;
    }
    .new-card .ph{
      width:100%;
      aspect-ratio: 1/1;
      display:block;
      background:
        linear-gradient(135deg, rgba(0,0,0,.08), transparent 55%),
        radial-gradient(circle at 30% 30%, rgba(143,195,201,.24), transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(0,0,0,.14), transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.18));
    }
    .new-card .meta{
      padding: 8px 10px 10px;
      font-size: 12px;
      font-weight: 800;
      color: rgba(0,0,0,.78);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      position:relative;
      z-index:2;
    }
    .new-badge{
      position:absolute;
      top: 8px;
      left: 8px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .6px;
      background:
        linear-gradient(135deg, rgba(44,54,58,.95), rgba(15,18,19,.86));
      color:#fff;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      z-index:3;
    }

    .catalog-shell{
      position:relative;
      z-index: 4;
      transform:none;
      transition:none;
    }

    .catalog{
      scroll-margin-top: 74px;
      border-radius: 26px 26px 0 0;
      background:
        linear-gradient(180deg, rgba(247,245,240,.92), rgba(243,241,236,.90));
      border-top: 1px solid rgba(0,0,0,.12);
      box-shadow: 0 -46px 110px rgba(0,0,0,.22);
      padding: 22px 18px 70px;
      min-height: 110vh;
      position:relative;
      overflow:hidden;
    }

    .catalog::before{
      content:"";
      position:absolute;
      inset:-40px;
      background:
        radial-gradient(600px 280px at 15% 18%, rgba(97,147,158,.10), transparent 60%),
        radial-gradient(520px 240px at 75% 40%, rgba(0,0,0,.12), transparent 55%),
        radial-gradient(520px 240px at 55% 85%, rgba(143,195,201,.08), transparent 55%);
      opacity: .95;
      pointer-events:none;
    }

    .catalog-inner{
      width:min(1180px, 100%);
      margin:0 auto;
      position:relative;
      z-index:2;
    }

    .cat-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .cat-title{
      font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .8px;
      font-size: 26px;
    }
    .cat-sub{
      color: rgba(0,0,0,.62);
      font-size: 13px;
      font-weight: 600;
      margin-top: 4px;
    }

    .cat-filters{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 10px 12px;
      border-radius:999px;
      border: 1px solid rgba(0,0,0,.12);
      background:
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.32));
      box-shadow: 0 14px 34px rgba(0,0,0,.10);
      font-size: 13px;
      font-weight: 800;
      color: rgba(0,0,0,.78);
    }
    .pill .dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(97,147,158,1), rgba(143,195,201,1));
      box-shadow: 0 0 0 4px rgba(97,147,158,.14);
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .item{
      position: relative;
      display:flex;
      flex-direction:column;
      height:100%;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.12);
      background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
      box-shadow: 0 20px 52px rgba(0,0,0,.12);
      overflow:hidden;
    }
    .item.wantlisted{
      border-color:rgba(132,108,166,.52);
      background:
        radial-gradient(120% 80% at 100% 0%, rgba(132,108,166,.16), rgba(132,108,166,0) 48%),
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.48));
      box-shadow:
        0 20px 52px rgba(0,0,0,.12),
        0 0 0 1px rgba(132,108,166,.18),
        0 0 34px rgba(132,108,166,.22),
        0 0 58px rgba(132,108,166,.12);
    }
    .want-btn{
      position:absolute;
      top:8px;
      right:8px;
      z-index:5;
      width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.10);
      background:rgba(255,255,255,.74);
      color:rgba(16,19,21,.62);
      display:grid;
      place-items:center;
      padding:0;
      cursor:pointer;
      box-shadow:0 10px 24px rgba(0,0,0,.10);
      backdrop-filter:blur(8px);
      transition:transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .want-btn:hover{
      transform:translateY(-1px);
      color:#604f79;
      background:rgba(255,255,255,.88);
      border-color:rgba(132,108,166,.28);
      box-shadow:0 14px 30px rgba(132,108,166,.14);
    }
    .want-btn i,
    .want-btn svg{
      width:18px;
      height:18px;
      transition:transform .18s ease, fill .18s ease;
    }
    .want-btn.is-saved{
      color:#7b6598;
      background:rgba(246,242,251,.88);
      border-color:rgba(132,108,166,.32);
      box-shadow:
        0 12px 30px rgba(132,108,166,.16),
        0 0 18px rgba(132,108,166,.16);
    }
    .want-btn.is-saved svg{
      fill:currentColor;
    }
    .want-btn.is-busy{
      pointer-events:none;
      opacity:.68;
    }
    .want-btn.is-pulse svg{
      animation:wantHeartPulse .42s cubic-bezier(.22,.61,.36,1);
    }
    @keyframes wantHeartPulse{
      0%{transform:scale(.82);}
      48%{transform:scale(1.24) rotate(-8deg);}
      100%{transform:scale(1);}
    }
    .want-badge{
      position:absolute;
      z-index:4;
      right:8px;
      top:50px;
      min-height:23px;
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      border:1px solid rgba(132,108,166,.22);
      background:rgba(246,242,251,.76);
      color:#604f79;
      padding:0 8px;
      font:900 10px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      box-shadow:0 8px 20px rgba(132,108,166,.10);
      pointer-events:none;
    }
    .stock-pill{
      position:absolute;
      top:8px;
      left:8px;
      z-index:4;
      display:inline-flex;
      align-items:center;
      gap:5px;
      max-width:calc(100% - 16px);
      padding:4px 8px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.10);
      font:800 11px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:#f4f6f8;
      text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 8px rgba(0,0,0,.30);
      box-shadow:0 8px 20px rgba(0,0,0,.10);
      backdrop-filter:blur(6px);
      pointer-events:none;
      white-space:nowrap;
    }
    .stock-pill__ic{
      width:14px;
      height:14px;
      border-radius:999px;
      display:grid;
      place-items:center;
      font-size:10px;
      line-height:1;
      font-weight:900;
      flex:0 0 auto;
      color:#f4f6f8;
      text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 7px rgba(0,0,0,.26);
    }

    .hero-art--hidden{ display:none !important; }
    .stock-pill--instock{
      background:linear-gradient(135deg, rgba(76,126,95,.72), rgba(64,107,81,.64));
      border-color:rgba(52,90,68,.75);
    }
    .stock-pill--instock .stock-pill__ic{
      background:rgba(106,165,123,.22);
      color:#ddd;
    }
    .stock-pill--preorder{
      background:linear-gradient(135deg, rgba(148,108,56,.74), rgba(128,92,46,.66));
      border-color:rgba(110,77,35,.76);
    }
    .stock-pill--preorder .stock-pill__ic{
      background:rgba(206,156,86,.22);
      color:#ddd;
    }
    .stock-pill--sold{
      background:linear-gradient(135deg, rgba(136,72,72,.74), rgba(116,61,61,.66));
      border-color:rgba(95,48,48,.76);
    }
    .stock-pill--sold .stock-pill__ic{
      background:rgba(196,106,106,.22);
      color:#ddd;
    }
    .stock-pill--unknown{
      background:linear-gradient(135deg, rgba(88,102,114,.72), rgba(74,87,98,.64));
      border-color:rgba(62,74,84,.74);
    }
    .stock-pill--unknown .stock-pill__ic{
      background:rgba(126,140,153,.18);
      color:#ddd;
    }
    .item .cover{
  aspect-ratio: 1/1;
  border-radius: 16px;
  background-color: rgba(255,255,255,.35);
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  position: relative;
  overflow: hidden;
}
.item .cover::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 40% 35%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.06));
  pointer-events: none;
}
    .item .body{
      padding: 10px 12px 12px;
      display:flex;
      flex-direction:column;
      gap: 4px;
      flex:1 1 auto;
    }
    .item .name{
      font-weight: 900;
      font-size: 14px;
      line-height: 1.1;
      letter-spacing: .2px;
      font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    }

    .item .artist{
      font-size: 14px;
      font-weight: 700;
      color: rgba(0,0,0,.70);
      line-height: 1.15;
      margin-top: 0;
    }
    .item .artist-line{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:0;
    }
    .artist-link{
      border:0;
      background:transparent;
      padding:0;
      margin:0;
      font:inherit;
      color:inherit;
      cursor:pointer;
      text-decoration:underline;
      text-decoration-color: rgba(97,147,158,.45);
      text-underline-offset: 2px;
      transition:color .14s ease, text-decoration-color .14s ease;
    }
    .artist-link:hover{
      color:rgba(79,127,137,.98);
      text-decoration-color: rgba(79,127,137,.72);
    }
    .artist-link:focus-visible{
      outline:2px solid rgba(97,147,158,.34);
      outline-offset:2px;
      border-radius:6px;
    }
    .artist-sep{
      white-space:pre;
      opacity:.78;
    }
.item .row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size: 13px;
  color: rgba(0,0,0,.75);
  margin-top: auto;
}


    .item .row span:first-child{ font-weight: 900; }
    .item .row span:last-child{ font-weight: 900; font-size: 14px; }

    .catalog-item{
      opacity:0;
      transform:translate3d(0, 20px, 0) scale(.995);
      transition:
        opacity .44s cubic-bezier(.22,.61,.36,1),
        transform .44s cubic-bezier(.22,.61,.36,1);
      transition-delay:var(--card-reveal-delay, 0s);
      will-change:opacity, transform;
    }
    .catalog-item.in-view{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
    }
    .catalog-item .stock-pill,
    .catalog-item .want-btn,
    .catalog-item .want-badge,
    .catalog-item .cover,
    .catalog-item .name,
    .catalog-item .artist,
    .catalog-item .row,
    .catalog-item .buy{
      opacity:0;
      transform:translate3d(0, 16px, 0);
      will-change:opacity, transform;
    }
    .catalog-item.in-view .stock-pill{ animation:catalogItemPartIn .42s cubic-bezier(.22,.61,.36,1) .06s both; }
    .catalog-item.in-view .want-btn{ animation:catalogItemPartIn .42s cubic-bezier(.22,.61,.36,1) .06s both; }
    .catalog-item.in-view .want-badge{ animation:catalogItemPartIn .42s cubic-bezier(.22,.61,.36,1) .09s both; }
    .catalog-item.in-view .cover{ animation:catalogItemPartIn .44s cubic-bezier(.22,.61,.36,1) .14s both; }
    .catalog-item.in-view .name{ animation:catalogItemPartIn .42s cubic-bezier(.22,.61,.36,1) .24s both; }
    .catalog-item.in-view .artist{ animation:catalogItemPartIn .40s cubic-bezier(.22,.61,.36,1) .34s both; }
    .catalog-item.in-view .row{ animation:catalogItemPartIn .40s cubic-bezier(.22,.61,.36,1) .44s both; }
    .catalog-item.in-view .buy{ animation:catalogItemPartIn .40s cubic-bezier(.22,.61,.36,1) .54s both; }
    @keyframes catalogItemPartIn{
      from{
        opacity:0;
        transform:translate3d(0, 16px, 0);
      }
      to{
        opacity:1;
        transform:translate3d(0, 0, 0);
      }
    }

    @media (prefers-reduced-motion: reduce){
      .catalog-item,
      .catalog-item .stock-pill,
      .catalog-item .want-btn,
      .catalog-item .want-badge,
      .catalog-item .cover,
      .catalog-item .name,
      .catalog-item .artist,
      .catalog-item .row,
      .catalog-item .buy{
        transition:none !important;
        transform:none !important;
        filter:none !important;
        opacity:1 !important;
      }
    }

    .buy{
      margin-top: 2px;
      display:inline-flex;
      justify-content:center;
      align-items:center;
      gap: 10px;
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.12);
      background:
        linear-gradient(135deg, rgba(97,147,158,.22), rgba(143,195,201,.18));
      font-weight: 900;
      cursor:pointer;
      text-decoration:none;
      color: rgba(0,0,0,.88);
      box-shadow: 0 16px 40px rgba(97,147,158,.16);
      transition: transform .12s ease;
    }
    .buy:hover{ transform: translateY(-1px); }
    .buy svg{ width:18px; height:18px; }
    .wantlist-toast{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:120;
      max-width:min(360px, calc(100vw - 28px));
      border:1px solid rgba(132,108,166,.24);
      border-radius:8px;
      background:rgba(255,255,255,.92);
      color:rgba(16,19,21,.82);
      box-shadow:0 18px 52px rgba(16,19,21,.18);
      backdrop-filter:blur(14px);
      padding:12px 14px;
      font:800 13px/1.35 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      opacity:0;
      visibility:hidden;
      transform:translateY(8px);
      transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
      pointer-events:none;
    }
    .wantlist-toast.show{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    @media (max-width: 980px){
      :root{ --searchOpenW: calc(100% - 110px); }
      .hero{
        grid-template-columns: 1fr;
        min-height: unset;
        align-items: start;
        padding-top: 18px;
        gap:12px;
      }
      .hero-right{
        justify-content:flex-start;
        align-items:stretch;
        width:100%;
      }
      .home-reviews{
        width:100%;
        padding:12px;
      }
      .home-review-list{
        display:flex;
        overflow:auto;
        gap:10px;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
      }
      .home-review-card{
        flex:0 0 min(280px, 82vw);
        scroll-snap-align:start;
      }

      .new-row{
        display:flex;
        overflow:auto;
        scroll-snap-type:none;
        -webkit-overflow-scrolling:touch;
      }
      .new-card{ flex: 0 0 120px; width:auto; }

      .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 520px){
      header.topbar{ height:62px; padding: 10px 12px; }
      .topbar-brand img{ height:85%; }
      .search-dim{ top:62px; }
      .wrap{ padding: 12px 12px; }
      .search{ height:40px; }
      .icon-btn{ height:40px; min-width:40px; }
      .account-dropdown{
        position:fixed;
        top:64px;
        right:12px;
        left:12px;
        width:auto;
        transform-origin:top right;
      }
      .account-name{max-width:calc(100vw - 150px);}

      .hero{ gap: 10px; padding-top: 12px; }
      .hero-left{ padding:6px 6px 58px; }
      .hero-left .hero-cta{
        left:auto;
        right:6px;
        bottom:4px;
      }
            .hero-art{ width: min(460px, 100%); border-radius: 18px; }
      .hero-left .logo{ width: min(320px, 88vw); }

      .tagline{ font-size: clamp(14px, 4.8vw, 19px); letter-spacing:.25px; }
      .tagline .line{ padding: 7px 11px; }
      .tagline .line1{ padding: 12px 11px 18px; }
      .tagline .line2{
        margin-top: 6px;
        margin-left: auto;
        margin-right: 0;
        text-align: right;
        font-size: clamp(13px, 4vw, 16px);
      }
      .tagline .line2::before{
        inset: 0 -21px 0 0;
        background-position: calc(100% + 21px) center;
        transform-origin: right center;
      }

      .hero-left .hero-cta.btn.catalog{ font-size: 14px; height: 42px; min-height: 42px; min-width: 132px; padding:10px 16px; }
      .home-reviews-head{align-items:center;}
      .home-reviews h2{font-size:18px;}
      .home-reviews-all span{display:none;}
    }

    @media (max-height: 720px){
      .hero{
        height:auto;
        min-height: unset;
        align-items:flex-start;
        padding-top: 10px;
      }
    }

    /* PATCH: Новинки — типографика чуть крупнее, но в том же стиле */
    .new-row .item .name{ font-size: 16px; }
    .new-row .item .row{ margin-top: 10px; }
    .new-row .new-card.item{ text-decoration:none; color: inherit; }

    /* Product modal (lightbox) */
    .modal{
      position:fixed;
      inset:0;
      z-index:200;
      display:block;
      pointer-events:none;
      visibility:hidden;
      transition:visibility 0s linear .2s;
    }
    .modal[aria-hidden="false"]{
      visibility:visible;
      pointer-events:auto;
      transition-delay:0s;
    }
    .modal-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.45);
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      opacity:0;
      transition:opacity .18s cubic-bezier(.4,0,.2,1);
    }
    .modal[aria-hidden="false"] .modal-overlay{
      opacity:1;
      transition-duration:.34s;
    }

    /* Center vertically with resilient padding */
    .modal-dialog{position:relative;z-index:1;width:min(1120px, calc(100vw - 32px));max-width:min(1120px, calc(100vw - 32px));
      margin:0 auto; top:50%; transform:translateY(calc(-50% + 10px)) scale(.985);
      border-radius:26px;background:rgba(255,255,255,.78);
      box-shadow:0 18px 60px rgba(0,0,0,.25);
      border:1px solid rgba(255,255,255,.45);
      transition:transform .16s ease, opacity .16s ease;overflow:visible;opacity:0;}
    .modal[aria-hidden="false"] .modal-dialog{transform:translateY(-50%) scale(1);transition-duration:.28s;}
    .modal[aria-hidden="false"] .modal-dialog{opacity:1;}
    .modal-body{display:grid;grid-template-columns:minmax(420px, 56%) minmax(0, 1fr);min-height:420px;align-items:start;}
    .modal-left{
      background:transparent;
      border-top-left-radius:26px;
      border-bottom-left-radius:26px;
      overflow:hidden;
      align-self:start;
      min-height:0;
    }
    .modal-photo{
      width:100%;
      min-height:0;
      height:auto;
      aspect-ratio:1/1;
      background-size:contain !important;
      background-position:center;
      background-repeat:no-repeat;
      background-color:transparent;
      border-top-left-radius:26px;
      border-bottom-left-radius:26px;
    }

    .modal-right{padding:24px 26px 20px;display:flex;flex-direction:column;gap:8px;min-height:420px;position:relative;padding-bottom:140px;min-width:0;}

    /* Top row: type on the left, actions on the right */
    .modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
    .modal-type{align-self:auto;color:rgba(0,0,0,.55);font-weight:800;font-size:16px;letter-spacing:.2px;}

    .modal-actions{display:flex;align-items:center;gap:10px;}
    .modal-ic{appearance:none;border:0;background:transparent;cursor:pointer;padding:6px;border-radius:12px;display:grid;place-items:center;}
    .modal-ic i{width:20px;height:20px;color:rgba(0,120,168,.95);} /* фирменный синий */
    .modal-ic:hover{background:rgba(0,120,168,.10);} 
    .modal-ic:active{transform:translateY(1px) scale(.98);} 
    .modal-ic:focus-visible{outline:2px solid rgba(0,120,168,.35);outline-offset:2px;}
    .modal-want-btn.is-saved i,
    .modal-want-btn.is-saved svg{
      color:#7b6598;
      fill:currentColor;
    }
    .modal-want-btn.is-pulse svg{
      animation:wantHeartPulse .42s cubic-bezier(.22,.61,.36,1);
    }

    /* Tooltip (centered above, stays inside modal, arrow keeps rotation) */
    .modal-ic[data-tip]{position:relative;}

    .modal-ic[data-tip]::after{
      z-index:50;
      content:attr(data-tip);
      position:absolute;
      left:50%;
      right:auto;
      bottom:calc(100% + 12px);

      background:rgba(255,255,255,.92);
      border:1px solid rgba(255,255,255,.55);
      box-shadow:0 12px 40px rgba(0,0,0,.18);

      color:rgba(0,0,0,.78);
      font:600 12px/1.2 Rubik, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      padding:8px 10px;
      border-radius:12px;

      max-width:160px;
      white-space:normal;
      text-align:center;

      opacity:0;
      transform:translate(-50%, -4px);
      pointer-events:none;
      transition:opacity .16s ease, transform .16s ease;
    }

    .modal-ic[data-tip]::before{
      z-index:49;
      content:"";
      position:absolute;
      left:50%;
      right:auto;
      bottom:calc(100% + 6px);

      width:10px;
      height:10px;
      background:rgba(255,255,255,.92);
      border-left:1px solid rgba(255,255,255,.55);
      border-top:1px solid rgba(255,255,255,.55);

      opacity:0;
      transform:translate(-50%, -4px) rotate(45deg);
      pointer-events:none;
      transition:opacity .16s ease, transform .16s ease;
    }

    .modal-ic:hover::after{opacity:1;transform:translate(-50%, 0);} 
    .modal-ic:hover::before{opacity:1;transform:translate(-50%, 0) rotate(45deg);} 

    /* Allow tooltips to escape modal */
    .modal-actions{position:relative;z-index:20;}
.modal-sep{height:1px;background:rgba(0,0,0,.10);margin:0 0 2px;}

    .modal-title{font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;font-weight:900;font-size:28px;line-height:1.1;color:#0f0f0f;}
    .modal-artist{
      font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight:600;
      font-size:17px;
      letter-spacing:.2px;
      color:#111;
      opacity:.85;
      margin-top:-2px;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:0;
    }
    .modal-artist .artist-link{
      font-weight:600;
    }
    .modal-meta{
      margin:12px -6px 0;
      border-radius:14px;
      border:1px solid rgba(0,0,0,.08);
      background:rgba(255,255,255,.23);
      padding:10px 14px;
    }
    .modal-meta-toggle{
      display:none;
      border:1px solid rgba(0,0,0,.12);
      background:rgba(226,228,231,.78);
      color:rgba(0,0,0,.76);
      border-radius:999px;
      padding:7px 12px;
      font:800 12px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      cursor:pointer;
    }
    .modal-meta-body{
      display:grid;
      gap:8px;
      max-height:none;
      overflow:visible;
      padding-right:0;
    }
    .modal-track-toggle{
      margin-top:10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:100%;
      border:1px solid rgba(0,0,0,.12);
      background:rgba(226,228,231,.78);
      color:rgba(0,0,0,.78);
      border-radius:999px;
      padding:8px 12px;
      font:800 12px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      cursor:pointer;
    }
    .modal-track-wrap{position:relative;display:block;}
    .modal-track-tip{
      display:block;
      position:absolute;
      left:calc(100% + 12px);
      top:0;
      width:min(520px, calc(100vw - 120px));
      max-height:min(56vh, 520px);
      overflow:auto;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,.14);
      background:rgba(241,243,246,.98);
      box-shadow:0 18px 46px rgba(0,0,0,.22);
      z-index:35;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translate3d(0, 8px, 0);
      transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
      user-select:text;
      -webkit-user-select:text;
    }
    .modal-track-body{
      margin-top:8px;
      display:block;
      max-height:0;
      opacity:0;
      overflow:hidden;
      transform:translateY(-4px);
      transition:max-height .22s ease, opacity .18s ease, transform .18s ease;
    }
    .modal-track-body.is-open{
      max-height:min(52vh, 460px);
      opacity:1;
      transform:translateY(0);
    }
    .modal-meta-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      font:700 13px/1.2 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.74);
    }
    .modal-meta-item .k{
      color:rgba(0,0,0,.55);
      font-weight:800;
      flex:0 0 auto;
    }
    .modal-meta-item .v{
      text-align:right;
      min-width:0;
      word-break:break-word;
    }
    .modal-meta-item--stack{
      display:grid;
      gap:6px;
    }
    .modal-meta-item--stack .v{
      text-align:left;
    }
    .modal-tracklist{
      white-space:pre-line;
      font-weight:600;
      line-height:1.3;
      color:rgba(0,0,0,.78);
      text-align:left;
    }
    @media (min-width: 841px){
      .modal-track-wrap{
        width:max-content;
      }
      .modal-track-toggle{
        width:auto;
        margin-top:8px;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        color:rgba(28,38,45,.88);
        font:800 14px/1.2 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
        text-decoration:underline;
        text-decoration-color:rgba(97,147,158,.58);
        text-underline-offset:3px;
      }
      .modal-track-tip{
        left:0;
        top:0;
        width:min(520px, calc(100vw - 220px));
        max-height:min(68vh, 560px);
      }
      .modal-track-wrap.tip-open .modal-track-tip,
      .modal-track-wrap.is-open .modal-track-tip{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translate3d(0, 0, 0);
        transition-delay:0s;
      }
      .modal-track-body{
        display:none !important;
      }
    }

    /* Description: bigger + thicker, tighter leading, pushed lower */
    .modal-desc{font-family:Rubik, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-size:17px;line-height:1.18;font-weight:600;color:rgba(0,0,0,.78);
      margin-top:14px;}
    .modal-note,.modal-order{font-family:Rubik, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;font-size:17px;line-height:1.18;font-weight:600;color:rgba(0,0,0,.68);}
    .modal-note{margin-top:10px;}

    /* Order type closer to price */
    .modal-order{font-size:16px;font-weight:800;line-height:1.15;color:rgba(0,0,0,.62);
      position:absolute;left:26px;right:26px;bottom:108px;}

    .modal-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;
      position:absolute;left:26px;right:26px;bottom:20px;}
    .modal-price{font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;font-weight:900;font-size:26px;line-height:1;color:#0b0b0b;white-space:nowrap;}
    .modal-cta{min-width:220px;justify-content:center;}

    /* Invert modal buy button (default = hover colors, hover = white) */
    #modalBuy.btn.catalog{
      position:relative;
      isolation:isolate;
      overflow:hidden;
      background:#ccc;
      border-color: rgba(0,0,0,.18);
      color: rgba(0,0,0,.86);
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    #modalBuy.btn.catalog::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
      opacity:1;
      pointer-events:none;
      z-index:0;
      animation:modalBuyFillPulse 2.8s cubic-bezier(.4,0,.2,1) infinite alternate;
    }
    #modalBuy.btn.catalog > *{
      position:relative;
      z-index:1;
    }
    #modalBuy.btn.catalog:hover{
      background: #ffffff;
      border-color: rgba(97,147,158,.34);
      color: rgba(0,0,0,.86);
      box-shadow:
        0 18px 46px rgba(0,0,0,.16),
        0 10px 22px rgba(0,0,0,.10),
        0 0 0 1px rgba(255,255,255,.70),
        0 0 16px rgba(255,255,255,.42),
        inset 0 1px 0 rgba(255,255,255,.88);
    }
    #modalBuy.btn.catalog:hover::before{
      animation:none;
      opacity:0;
    }
    #modalBuy.btn.catalog svg{ color: rgba(0,0,0,.86); }
    #modalBuy.btn.catalog:hover svg{ color: rgba(0,0,0,.86); }
    @keyframes modalBuyFillPulse{
      0%{
        opacity:1;
      }
      100%{
        opacity:0;
      }
    }


    /* Mobile */
    @media (max-width: 840px){
      .modal{overflow:auto;}
      .modal-dialog{
        max-width:calc(100vw - 22px);
        top:0;
        margin:10px auto 0;
        transform:none;
      }
      .modal[aria-hidden="false"] .modal-dialog{transform:none;}
      .modal-body{grid-template-columns:1fr;}
      .modal-left{
        border-top-right-radius:26px;
        border-bottom-left-radius:0;
      }
      .modal-photo{
        min-height:0;
        border-top-right-radius:26px;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
      }
      .modal-right{
        padding:20px 16px 16px;
        position:relative;
        padding-bottom:calc(102px + env(safe-area-inset-bottom));
        min-height:unset;
      }
      .modal-title{font-size:clamp(20px, 6.2vw, 24px);}
      .modal-price{font-size:22px;}
      .modal-cta{min-width:0;flex:1;}
      .modal-actions{gap:6px;}
      .modal-ic{
        padding:4px;
        border-radius:10px;
      }
      .modal-ic i{
        width:17px;
        height:17px;
      }
      .modal-bottom{
        flex-wrap:nowrap;
        position:fixed;
        left:50%;
        right:auto;
        bottom:0;
        transform:translateX(-50%);
        width:min(calc(100vw - 22px), 560px);
        box-sizing:border-box;
        margin-top:0;
        padding:10px 16px calc(10px + env(safe-area-inset-bottom));
        border-radius:0;
        background:transparent;
        border:0;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        isolation:isolate;
        overflow:visible;
        z-index:12;
      }
      .modal-bottom::before{
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:-44px;
        bottom:0;
        z-index:-1;
        pointer-events:none;
        background:linear-gradient(
          180deg,
          rgba(245,245,245,0) 0%,
          rgba(245,245,245,.56) 32%,
          rgba(245,245,245,.84) 62%,
          rgba(245,245,245,.94) 100%
        );
      }
      .modal-order{
        position:static;
        left:auto;
        right:auto;
        bottom:auto;
        margin-top:8px;
      }
      .modal-meta{
        margin-top:10px;
        padding:10px;
      }
      .modal-meta-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:100%;
      }
      .modal-meta-body{
        display:grid;
        gap:8px;
        max-height:0;
        opacity:0;
        overflow:hidden;
        transform:translateY(-4px);
        margin-top:8px;
        transition:max-height .22s ease, opacity .18s ease, transform .18s ease;
      }
      .modal-meta.is-open .modal-meta-body{
        max-height:min(52vh, 460px);
        opacity:1;
        transform:translateY(0);
      }
      .modal-track-toggle{
        margin-top:8px;
      }
      .modal-track-tip{
        display:none !important;
      }
      .modal-ic[data-tip]::after{right:auto;left:0;}
      .modal-ic[data-tip]::before{right:auto;left:12px;}
    }

    @media (max-width: 1120px) and (min-width: 841px){
      .modal-body{
        grid-template-columns:minmax(340px, 52%) minmax(0, 1fr);
      }
      .modal-right{
        padding:22px 20px 18px;
        padding-bottom:132px;
      }
      .modal-order{
        left:20px;
        right:20px;
      }
      .modal-bottom{
        left:20px;
        right:20px;
      }
    }

    /* Keep dialog inside viewport on very small heights */
    @media (max-height: 520px){
      .modal-dialog{top:24px;transform:translateY(0) scale(.985);}
      .modal[aria-hidden="false"] .modal-dialog{transform:translateY(0) scale(1);}
    }

    /* New items (РќРѕРІРёРЅРєРё) */
    .new-strip{
      margin-top:18px;
      border-radius:26px;
      background:rgba(255,255,255,.35);
      border:1px solid rgba(255,255,255,.40);
      box-shadow:0 18px 60px rgba(0,0,0,.12);
      backdrop-filter:blur(10px);
      padding:14px 14px 16px;
      overflow:hidden;
    }
    .new-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
    .new-title{display:flex;align-items:center;gap:10px;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:rgba(0,0,0,.78);}
    .new-pill{
      display:inline-flex;align-items:center;justify-content:center;
      padding:6px 10px;border-radius:999px;
      background:rgba(255,255,255,.65);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 10px 26px rgba(0,0,0,.10);
      font:800 12px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.70);
    }
    .new-all{
      display:inline-flex;align-items:center;gap:10px;
      padding:8px 12px;border-radius:999px;
      background:rgba(255,255,255,.65);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 12px 34px rgba(0,0,0,.10);
      font:700 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.72);
      text-decoration:none;
    }
    .new-all i{width:18px;height:18px;}
    .new-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
    @media (max-width: 980px){ .new-row{grid-template-columns:repeat(2,minmax(0,1fr));} }
    @media (max-width: 520px){ .new-row{grid-template-columns:1fr;} }

    /* Filters (Каталог) */
    .cat-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
    .filter-pill{
      appearance:none;
      border:1px solid rgba(0,0,0,.08);
      background:rgba(255,255,255,.60);
      border-radius:999px;
      padding:8px 10px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      box-shadow:0 12px 34px rgba(0,0,0,.10);
      backdrop-filter:blur(10px);
      font:700 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.72);
      cursor:default;
      user-select:none;
    }
    .filter-pill i{width:18px;height:18px;color:#61939e;}
    .filter-pill i.chev{color:rgba(0,0,0,.48);}
    .filter-pill:hover{background:rgba(255,255,255,.72);border-color:rgba(97,147,158,.28);box-shadow:0 16px 44px rgba(0,0,0,.14);}
    @media (max-width: 840px){
      .cat-filters{justify-content:flex-start;}
      .filter-pill{padding:8px 10px;}
    }

    /* About (О нас) */
    .about{margin-top:18px;}
    .about-box{
      position:relative;
      border-radius:26px;
      background:rgba(255,255,255,.35);
      border:1px solid rgba(255,255,255,.40);
      box-shadow:0 18px 60px rgba(0,0,0,.12);
      backdrop-filter:blur(10px);
      padding:18px 18px 20px;
      overflow:hidden;
    }

    .about-box::before{
      content:"";
      position:absolute;
      inset:0;
      background:url('/img/assets/index-about.png') center/cover no-repeat;
      opacity:.95;
      transform:translateZ(0);
      pointer-events:none;
    }

    .about-box > *{position:relative;z-index:1;}

    .about-h{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:800;font-size:40px;line-height:1.05;color:rgba(0,0,0,.80);}
    .about-sub{margin-top:12px;font:600 20px/1.25 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:rgba(0,0,0,.68);}

    .about-facts{margin-top:16px;display:flex;gap:16px;flex-wrap:wrap;}
    .about-fact{
      flex:1 1 240px;
      display:flex;align-items:center;gap:14px;
      padding:16px 18px;
      border-radius:18px;
      background:rgba(255,255,255,.62);
      border:1px solid rgba(0,0,0,.06);
      box-shadow:0 14px 36px rgba(0,0,0,.10);
      backdrop-filter:blur(10px);
      color:rgba(0,0,0,.78);
      font:800 22px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }
    .about-fact i{width:26px;height:26px;color:#61939e;}

    .about-body{margin-top:18px;display:grid;grid-template-columns:1fr minmax(260px, 520px);gap:24px;align-items:center;}
    .about-text{font:600 18px/1.35 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:rgba(0,0,0,.70);}
    .about-text p{margin:0 0 12px;}

    .about-delivery{margin-top:10px;font:800 28px/1.1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:rgba(0,0,0,.78);}
    .about-delivery .v{color:#61939e;}

    .about-warn{margin-top:8px;font:600 18px/1.25 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:rgba(0,0,0,.68);}
    .about-warn .k{font-weight:800;color:rgba(0,0,0,.78);}

    .about-cta-wrap{display:flex;justify-content:flex-end;}
    .about-cta.btn.catalog{
      width:min(520px, 100%);
      padding:18px 24px;
      border-radius:999px;
      font:800 24px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }

    @media (max-width: 980px){
      .about-h{font-size:34px;}
      .about-sub{font-size:18px;}
      .about-fact{font-size:18px;}
      .about-body{grid-template-columns:1fr;}
      .about-cta-wrap{justify-content:flex-start;margin-top:6px;}
      .about-cta.btn.catalog{font-size:22px;}
    }

    body.modal-open{overflow:hidden;}
    
        /* Topbar / inline search */
    .top-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end;width:auto;min-width:0;}
    .icon-btn--catalog{
      width:auto !important;
      min-width:0;
      padding:0 14px;
      gap:8px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      white-space:nowrap;
      font:800 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      border-color: rgba(97,147,158,.34);
      color: rgba(0,0,0,.86);
      background: #ffffff;
      box-shadow:
        0 18px 46px rgba(0,0,0,.16),
        0 10px 22px rgba(0,0,0,.10),
        0 0 0 1px rgba(255,255,255,.70),
        0 0 16px rgba(255,255,255,.42),
        inset 0 1px 0 rgba(255,255,255,.88);
    }
    .icon-btn--catalog i{width:18px;height:18px;flex:0 0 auto;}
    .icon-btn--catalog:hover{
      color:rgba(248,248,248,.96);
      background:linear-gradient(135deg, rgba(58,76,82,.94), rgba(31,42,46,.90));
      border-color:rgba(38,52,57,.95);
      box-shadow:0 12px 28px rgba(24,34,37,.28);
    }

    .search-inline{
      flex:1 1 300px;
      min-width:190px;
      max-width:360px;
      width:auto;
      height:42px;
      border-radius:999px;
      background:rgba(255,255,255,.70);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 12px 34px rgba(0,0,0,.10);
      backdrop-filter:blur(10px);
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 14px;
      cursor:text;
      position:relative;
      z-index:5;
      pointer-events:auto !important;
      isolation:isolate;
    }
    .search-inline *{pointer-events:auto !important;}
    .search-inline i{width:18px;height:18px;color:rgba(0,0,0,.56);flex:0 0 auto;pointer-events:none;}
    .search-inline input{
      border:0;
      background:transparent;
      outline:none;
      width:100%;
      min-width:0;
      height:100%;
      font:700 14px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.74);
      position:relative;
      z-index:6;
      pointer-events:auto !important;
      -webkit-appearance:none;
      appearance:none;
    }
    .search-inline input::placeholder{color:rgba(0,0,0,.45);}

    .cat-head{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:16px;
      align-items:start;
    }
    .cat-filters{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:nowrap;
      justify-content:flex-end;
      min-width:0;
    }
    .fchip{flex:0 0 auto;}

    @media (max-width: 900px){
      .cat-head{grid-template-columns:1fr;gap:12px;}
      .cat-filters{justify-content:flex-start;flex-wrap:wrap;}
      .search-inline{order:-1;max-width:none;width:100%;flex:1 1 100%;}
      .icon-btn--catalog span{display:none;}
      .icon-btn--catalog{width:42px !important;padding:0;justify-content:center;}
    }

    @media (max-width: 980px){
      .hero{
        grid-template-columns:1fr;
        min-height:unset;
        padding-top:8px;
      }
      .hero-left{
        min-height:300px;
        justify-content:flex-start;
      }
      .hero-left .logo{
        width:min(360px, 86vw);
        max-height:128px;
      }
      .hero-title-area{
        transform:translateY(-4px);
      }
      .hero-right{
        min-height:0;
      }
      .hero-review-collage{
        min-height:0;
        display:flex;
        gap:10px;
        overflow:auto;
        padding:2px 2px 8px;
        -webkit-overflow-scrolling:touch;
      }
      .hero-review-link,
      .hero-review-collage .home-review-card{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        flex:0 0 min(250px, 78vw);
        transform:none;
      }
      .hero-review-link{
        min-width:118px;
        justify-content:center;
        align-self:stretch;
        min-height:auto;
      }
      .hero-review-collage .home-review-card:nth-of-type(n){
        width:auto;
      }
    }

    @media (max-width: 520px){
      .hero-left{
        min-height:252px;
        padding:0 6px 52px;
      }
      .hero-left .logo{
        width:min(330px, 90vw);
        max-height:112px;
      }
      .tagline{
        font-size:clamp(14px, 4.6vw, 18px);
      }
      .tagline .line1{
        padding:10px 10px 16px;
      }
      .tagline .line2{
        font-size:clamp(12px, 3.8vw, 15px);
      }
      .new-strip{
        margin-top:8px;
      }
    }

    /* 2026-05-23 last override: desktop no-overlap, mobile link below cards */
    @media (min-width: 981px){
      .hero-review-collage .home-review-strip{
        position:absolute;
        inset:0;
        min-height:590px;
      }

      .hero-review-collage .home-review-card{
        position:absolute;
        inset:auto;
        left:var(--left, 0);
        top:var(--top, 0);
        width:var(--w, 230px);
        max-width:calc(100% - 18px);
        transform:rotate(var(--r, 0deg));
      }

      .hero-review-collage .home-review-card:nth-of-type(1){
        --w:245px;
        --left:min(47%, 320px);
        --top:18px;
        --r:1.1deg;
        --z:5;
      }

      .hero-review-collage .home-review-card:nth-of-type(2){
        --w:220px;
        --left:0;
        --top:158px;
        --r:-1deg;
        --z:3;
      }

      .hero-review-collage .home-review-card:nth-of-type(3){
        --w:218px;
        --left:min(52%, 350px);
        --top:336px;
        --r:.8deg;
        --z:4;
      }

      .hero-review-collage .home-review-card:nth-of-type(4){
        --w:200px;
        --left:4%;
        --top:392px;
        --r:-.7deg;
        --z:2;
      }
    }

    @media (max-width: 980px){
      .hero-review-collage{
        display:block;
        overflow:visible;
        padding:4px 2px 12px;
      }

      .hero-review-collage .home-review-strip{
        display:flex;
        align-items:stretch;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 0 6px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
      }

      .hero-review-collage .home-review-card{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        flex:0 0 min(250px, 76vw);
        width:auto;
        max-width:none;
        transform:none;
        scroll-snap-align:start;
      }

      .hero-review-collage .hero-review-link{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        display:inline-flex;
        width:auto;
        min-width:112px;
        min-height:36px;
        height:36px;
        justify-content:center;
        padding:0 13px;
        margin:8px 0 0 auto;
        transform:none;
      }
    }

    @media (max-width: 520px){
      .hero-review-collage .home-review-card{
        flex-basis:min(238px, 74vw);
      }
    }

    /* 2026-05-23 final main hero fix: square logo, separated collage, mobile scroll */
    body:not(.reviews-page) .topbar-brand img[src$="logo1.png"]{
      height:118%;
      width:auto;
      max-width:88px;
      object-fit:contain;
      object-position:left center;
    }

    @media (min-width: 981px){
      .hero{
        grid-template-columns:minmax(430px, .92fr) minmax(440px, 1.08fr);
        gap:clamp(28px, 4.4vw, 58px);
        align-items:center;
        min-height:clamp(650px, 70vh, 740px);
        padding-top:0;
        padding-bottom:12px;
      }

      .hero-left{
        justify-content:center;
        min-height:670px;
        padding:0 10px 62px;
        gap:8px;
        overflow:visible;
      }

      .hero-left .logo{
        width:462px;
        max-width:100%;
        max-height:none;
        height:auto;
        object-fit:contain;
        object-position:left center;
        margin:0 0 -2px;
      }

      .hero-title-area{
        width:max-content;
        max-width:none;
        transform:translateY(-4px);
      }

      .tagline{
        font-size:clamp(18px, 1.95vw, 25px);
        letter-spacing:.32px;
      }

      .tagline .line{
        max-width:none;
      }

      .tagline .line1{
        width:max-content;
        max-width:none;
        padding:14px 20px 21px;
        line-height:.96;
      }

      .tagline .line1::before{
        inset:-9px -73px -12px -103px;
        background-size:100% 168%;
        transform:scaleX(1.04);
      }

      .tagline-main,
      .tagline-sub{
        display:block;
        white-space:nowrap;
      }

      .tagline-sub{
        margin-top:2px;
      }

      .tagline .line2{
        margin-top:5px;
        font-size:clamp(13px, 1.18vw, 16px);
      }

      .hero-left .hero-cta{
        bottom:0;
      }

      .hero-left .hero-cta--image{
        left:0;
        width:clamp(210px, 18vw, 300px);
        height:auto;
        display:block;
        background:transparent;
        border:0;
        box-shadow:none;
        padding:0;
        text-decoration:none;
        transition:transform .18s ease, filter .18s ease;
      }

      .hero-left .hero-cta--image:hover{
        transform:scale(1.022);
        filter:drop-shadow(0 14px 24px rgba(0,0,0,.16));
      }

      .hero-left .hero-cta--image img{
        display:block;
        width:100%;
        height:auto;
        object-fit:contain;
        filter:drop-shadow(0 12px 22px rgba(0,0,0,.11));
      }

      .hero-right{
        position:relative;
        min-height:670px;
        align-self:center;
        align-items:stretch;
        padding-left:0;
      }

      .hero-review-collage{
        position:relative;
        width:100%;
        min-height:590px;
        isolation:isolate;
      }

      .home-review-strip{
        position:absolute;
        inset:0;
        min-height:590px;
      }

      .hero-review-link{
        position:absolute;
        right:4%;
        top:1%;
        z-index:8;
        min-height:34px;
        height:auto;
        align-self:auto;
        padding:0 13px;
        transform:rotate(1deg);
      }

      .hero-review-collage .home-review-card{
        position:absolute;
        inset:auto;
        width:var(--w, 230px);
        max-width:calc(100% - 18px);
        margin:0;
        left:var(--left, 0);
        top:var(--top, 0);
        transform:rotate(var(--r, 0deg));
      }

      .hero-review-collage .home-review-card:nth-of-type(1){
        --w:clamp(218px, 18vw, 245px); --left:calc(100% - var(--w) - 10px); --top:18px; --r:1.1deg; --z:5;
      }

      .hero-review-collage .home-review-card:nth-of-type(2){
        --w:clamp(190px, 16vw, 220px); --left:0; --top:158px; --r:-1deg; --z:3;
      }

      .hero-review-collage .home-review-card:nth-of-type(3){
        --w:clamp(206px, 17vw, 218px); --left:calc(100% - var(--w) - 28px); --top:352px; --r:.8deg; --z:4;
      }

      .hero-review-collage .home-review-card:nth-of-type(4){
        --w:clamp(188px, 15vw, 200px); --left:8px; --top:410px; --r:-.7deg; --z:2;
      }
    }

    @media (max-width: 980px){
      body:not(.reviews-page) .topbar-brand img[src$="logo1.png"]{
        height:108%;
        max-width:78px;
      }

      .hero{
        display:block;
        grid-template-columns:1fr;
        min-height:unset;
        height:auto;
        padding-top:6px;
        padding-bottom:10px;
      }

      .hero-left{
        min-height:0;
        padding:0 6px 58px;
        gap:6px;
        justify-content:flex-start;
        overflow:visible;
      }

      .hero-left .logo{
        width:min(245px, 64vw);
        max-width:100%;
        max-height:none;
        height:auto;
        object-fit:contain;
        object-position:left center;
        margin:0 0 -4px;
      }

      .hero-title-area{
        width:100%;
        transform:none;
      }

      .tagline{
        font-size:clamp(15px, 4.4vw, 20px);
        line-height:1.04;
      }

      .tagline .line{
        width:max-content;
        max-width:calc(100vw - 42px);
        white-space:normal;
      }

      .tagline .line1{
        padding:10px 11px 15px;
      }

      .tagline .line1::before{
        transform:scaleX(1.06);
      }

      .tagline .line2{
        margin-top:5px;
        font-size:clamp(12px, 3.5vw, 15px);
      }

      .tagline .line2::before{
        transform:scale(1.08);
      }

      .hero-left .hero-cta{
        left:auto;
        right:6px;
        bottom:4px;
      }

      .hero-left .hero-cta.btn.catalog{
        height:42px;
        min-height:42px;
        min-width:128px;
        padding:10px 15px;
        font-size:14px;
      }

      .hero-right{
        width:100%;
        min-height:0;
        align-items:stretch;
        margin-top:8px;
        overflow:hidden;
      }

      .hero-review-collage{
        position:relative;
        width:100%;
        min-height:0;
        display:block;
        overflow:visible;
        padding:4px 2px 12px;
        isolation:isolate;
      }

      .home-review-strip{
        display:flex;
        align-items:stretch;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 0 6px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
      }

      .hero-review-link{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        display:inline-flex;
        width:auto;
        min-width:112px;
        min-height:36px;
        height:36px;
        justify-content:center;
        padding:0 13px;
        margin:8px 0 0 auto;
        transform:none;
      }

      .hero-review-link:hover{
        transform:translateY(-1px);
      }

      .hero-review-collage .home-review-card{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        flex:0 0 min(250px, 76vw);
        width:auto;
        max-width:none;
        transform:none;
        scroll-snap-align:start;
      }

      .hero-review-collage .home-review-card::after{
        font-size:22px;
      }
    }

    @media (max-width: 520px){
      .wrap{
        padding:10px 12px;
      }

      .hero-left{
        padding:0 4px 58px;
      }

      .hero-left .logo{
        width:min(230px, 62vw);
      }

      .tagline{
        font-size:clamp(14px, 4.2vw, 18px);
      }

      .tagline .line{
        max-width:calc(100vw - 34px);
      }

      .tagline .line1{
        padding:9px 10px 14px;
      }

      .hero-review-collage .home-review-card{
        flex-basis:min(238px, 74vw);
      }

      .home-review-thumb{
        max-height:120px;
      }

      .new-strip{
        margin-top:8px;
      }
    }
    /* 2026-05-23: stable hero collage, no text overlap */
    @media (min-width: 981px){
      .hero{
        grid-template-columns:minmax(520px, .98fr) minmax(470px, 1.02fr);
        gap:44px;
        min-height:clamp(500px, 58vh, 620px);
        align-items:center;
      }
      .hero-left{
        z-index:3;
        justify-content:center;
        padding:0 10px 58px;
      }
      .hero-left .logo{
        width:min(505px, 42vw);
        max-height:220px;
        object-fit:contain;
        object-position:left center;
        margin-bottom:-8px;
      }
      .hero-title-area{
        width:min(620px, 100%);
        transform:translateY(-6px);
      }
      .tagline .line{
        max-width:100%;
      }
      .tagline .line1::before{
        transform:scaleX(1.14);
      }
      .hero-right{
        z-index:2;
        min-height:500px;
        padding-left:10px;
      }
      .hero-review-collage{
        min-height:500px;
      }
      .hero-review-link{
        right:3%;
        top:1%;
      }
      .hero-review-collage .home-review-card:nth-of-type(1){
        --w:250px; --x:48%; --y:22px; --r:1.2deg; --z:5;
      }
      .hero-review-collage .home-review-card:nth-of-type(2){
        --w:222px; --x:5%; --y:150px; --r:-1deg; --z:3;
      }
      .hero-review-collage .home-review-card:nth-of-type(3){
        --w:214px; --x:51%; --y:322px; --r:.8deg; --z:4;
      }
      .hero-review-collage .home-review-card:nth-of-type(4){
        --w:202px; --x:12%; --y:338px; --r:-.7deg; --z:2;
      }
    }

    @media (max-width: 980px){
      .hero{
        display:block;
        min-height:unset;
        padding-top:8px;
        padding-bottom:10px;
      }
      .hero-left{
        min-height:0;
        padding:0 6px 54px;
        overflow:visible;
      }
      .hero-left .logo{
        width:min(430px, 84vw);
        max-height:190px;
        object-fit:contain;
        object-position:left center;
        margin-bottom:-4px;
      }
      .hero-title-area{
        max-width:100%;
        transform:none;
      }
      .tagline{
        font-size:clamp(15px, 4.7vw, 21px);
        letter-spacing:.2px;
      }
      .tagline .line{
        width:auto;
        max-width:calc(100vw - 42px);
        white-space:normal;
        overflow:visible;
      }
      .tagline .line1{
        padding:10px 10px 16px;
      }
      .tagline .line1::before{
        transform:scaleX(1.05);
        background-size:100% 205%;
      }
      .tagline .line2{
        margin-top:6px;
        font-size:clamp(12px, 3.8vw, 16px);
      }
      .tagline .line2::before{
        transform:scale(1.08);
      }
      .hero-left .hero-cta{
        left:auto;
        right:6px;
        bottom:4px;
      }
      .hero-left .hero-cta.btn.catalog{
        font-size:14px;
        height:42px;
        min-height:42px;
        min-width:132px;
        padding:10px 16px;
      }
      .hero-right{
        min-height:0;
        width:100%;
        align-items:stretch;
        overflow:hidden;
        margin-top:10px;
      }
      .hero-review-collage{
        width:100%;
        min-height:0;
        display:flex;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:2px 4px 10px;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
      }
      .hero-review-link{
        position:relative;
        inset:auto;
        flex:0 0 auto;
        align-self:flex-start;
        min-height:36px;
        height:36px;
        padding:0 12px;
        transform:none;
        scroll-snap-align:start;
      }
      .hero-review-collage .home-review-card{
        position:relative;
        inset:auto;
        width:auto;
        flex:0 0 min(250px, 76vw);
        transform:none;
        scroll-snap-align:start;
      }
      .hero-review-collage .home-review-card::after{
        font-size:22px;
      }
      .home-review-thumb{
        max-height:120px;
      }
    }

    @media (max-width: 520px){
      .wrap{
        padding:10px 12px;
      }
      .hero-left{
        padding:0 2px 52px;
      }
      .hero-left .logo{
        width:min(390px, 92vw);
        max-height:170px;
      }
      .tagline{
        font-size:clamp(14px, 4.4vw, 18px);
      }
      .tagline .line{
        max-width:calc(100vw - 34px);
      }
      .hero-review-collage .home-review-card{
        flex-basis:min(238px, 74vw);
      }
    }

    /* Filters (new) */
    .cat-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
    .fchip{
      appearance:none;
      border:1px solid rgba(0,0,0,.08);
      background:rgba(255,255,255,.60);
      border-radius:999px;
      padding:8px 12px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      box-shadow:0 12px 34px rgba(0,0,0,.10);
      backdrop-filter:blur(10px);
      font:800 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.72);
      cursor:pointer;
      user-select:none;
      transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease;
    }
    .fchip--reset{
      width:36px;
      height:36px;
      min-width:36px;
      padding:0;
      justify-content:center;
      gap:0;
      position:relative;
    }
    .fchip--reset i{
      width:16px;
      height:16px;
    }
    .fchip--reset[data-tip]::after{
      content:attr(data-tip);
      position:absolute;
      left:50%;
      top:calc(100% + 10px);
      transform:translate(-50%, 4px);
      opacity:0;
      pointer-events:none;
      white-space:nowrap;
      background:rgba(255,255,255,.94);
      border:1px solid rgba(255,255,255,.62);
      box-shadow:0 10px 30px rgba(0,0,0,.16);
      border-radius:10px;
      padding:7px 10px;
      color:rgba(0,0,0,.76);
      font:700 12px/1.15 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      transition:opacity .16s ease, transform .16s ease;
      z-index:25;
    }
    .fchip--reset[data-tip]::before{
      content:"";
      position:absolute;
      left:50%;
      top:calc(100% + 5px);
      width:9px;
      height:9px;
      transform:translate(-50%, 4px) rotate(225deg);
      opacity:0;
      pointer-events:none;
      background:rgba(255,255,255,.94);
      border-left:1px solid rgba(255,255,255,.62);
      border-top:1px solid rgba(255,255,255,.62);
      transition:opacity .16s ease, transform .16s ease;
      z-index:24;
    }
    .fchip--reset[data-tip]:hover::after,
    .fchip--reset[data-tip]:hover::before,
    .fchip--reset[data-tip]:focus-visible::after,
    .fchip--reset[data-tip]:focus-visible::before{
      opacity:1;
      transform:translate(-50%, 0) rotate(225deg);
    }
    .fchip--reset[data-tip]:hover::after,
    .fchip--reset[data-tip]:focus-visible::after{
      transform:translate(-50%, 0);
    }
    @media (hover:none){
      .fchip--reset[data-tip]::before,
      .fchip--reset[data-tip]::after{
        display:none;
      }
    }

    /* Collage storefront hero */
    .hero{
      grid-template-columns:minmax(0, .94fr) minmax(410px, 1.06fr);
      gap:12px;
      align-items:center;
      padding-top:0;
      padding-bottom:10px;
      min-height:clamp(430px, 55vh, 560px);
    }
    .hero-left{
      justify-content:center;
      padding:0 10px 54px;
      gap:6px;
    }
    .hero-left .logo{
      width:min(360px, 38vw);
      max-height:96px;
      object-fit:contain;
      object-position:left center;
      margin-bottom:-6px;
    }
    .hero-title-area{
      transform:translateY(-10px);
    }
    .tagline{
      font-size:clamp(19px, 2.05vw, 26px);
      letter-spacing:.35px;
    }
    .tagline .line1{
      padding:12px 13px 19px;
    }
    .tagline .line2{
      margin-top:4px;
      font-size:clamp(13px, 1.22vw, 16px);
    }
    .hero-left .hero-cta{
      bottom:4px;
    }
    .hero-right{
      position:relative;
      min-height:420px;
      align-self:center;
      align-items:stretch;
    }
    .hero-review-collage{
      position:relative;
      width:100%;
      min-height:420px;
      isolation:isolate;
    }
    .hero-review-link{
      position:absolute;
      right:5%;
      top:2%;
      z-index:8;
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 12px 28px rgba(0,0,0,.10);
      color:rgba(0,0,0,.72);
      text-decoration:none;
      font:900 12px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      transform:rotate(1deg);
      transition:transform .18s ease, background .18s ease;
    }
    .hero-review-link:hover{
      transform:translateY(-1px) rotate(1deg);
      background:rgba(255,255,255,.9);
    }
    .hero-review-collage .home-review-card{
      position:absolute;
      width:var(--w, 230px);
      margin:0;
      border-radius:18px;
      background:rgba(255,255,255,.62);
      border:1px solid rgba(255,255,255,.68);
      box-shadow:0 18px 48px rgba(0,0,0,.13);
      backdrop-filter:blur(13px);
      transform:translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg));
      z-index:var(--z, 2);
    }
    .hero-review-collage .home-review-card:nth-of-type(1){
      --w:260px; --x:42%; --y:18px; --r:1.4deg; --z:4;
    }
    .hero-review-collage .home-review-card:nth-of-type(2){
      --w:235px; --x:10%; --y:118px; --r:-1.2deg; --z:3;
    }
    .hero-review-collage .home-review-card:nth-of-type(3){
      --w:220px; --x:55%; --y:205px; --r:1deg; --z:5;
    }
    .hero-review-collage .home-review-card:nth-of-type(4){
      --w:205px; --x:25%; --y:292px; --r:-.8deg; --z:2;
    }
    .home-review-thumb{
      width:100%;
      aspect-ratio:16/9;
      object-fit:cover;
      display:block;
      border-radius:12px;
      margin:9px 0 8px;
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    .hero-review-collage .home-review-card::after{
      content:"☆";
      position:absolute;
      right:14px;
      bottom:8px;
      color:rgba(97,147,158,.78);
      font:900 25px/1 Montserrat,system-ui,sans-serif;
      transform:rotate(16deg);
      pointer-events:none;
    }
    .fchip:hover{background:rgba(255,255,255,.72);border-color:rgba(97,147,158,.22);box-shadow:0 16px 44px rgba(0,0,0,.14);}
    .fchip:active{transform:translateY(1px);}
    .fchip .cnt{
      display:none;
      width:22px;height:22px;
      border-radius:999px;
      align-items:center;justify-content:center;
      background:rgba(97,147,158,.18);
      border:1px solid rgba(97,147,158,.30);
      color:rgba(0,0,0,.72);
      font:900 12px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }

    .filters-ui{position:fixed;inset:0;z-index:80;display:none;}
    .filters-ui.show{display:block;}
    .filters-ovl{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);}

    .filters-drawer{
      position:absolute;
      top:0;right:0;
      width:min(460px, 92vw);
      height:100%;
      background:rgba(255,255,255,.82);
      border-left:1px solid rgba(255,255,255,.55);
      box-shadow:-18px 0 80px rgba(0,0,0,.26);
      backdrop-filter:blur(14px);
      transform:translateX(102%);
      transition:transform .28s ease;
      display:flex;
      flex-direction:column;
    }
    .filters-ui.show .filters-drawer{transform:translateX(0);}

    .filters-head{padding:14px 14px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
    .filters-title{font:900 16px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:rgba(0,0,0,.78);}
    .filters-actions{display:flex;gap:8px;align-items:center;}
    .filters-ic{width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.70);
      box-shadow:0 12px 34px rgba(0,0,0,.10);display:grid;place-items:center;cursor:pointer;}
    .filters-ic i{width:18px;height:18px;}

    .tabs{margin:0 14px 12px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);
      border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.55);border-radius:999px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.10);
    }
    .tabbtn{appearance:none;border:0;background:transparent;padding:10px 10px;cursor:pointer;
      font:900 12px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:.35px;text-transform:uppercase;color:rgba(0,0,0,.62);
      position:relative;z-index:2;
    }
    .tabbtn.active{color:rgba(0,0,0,.86);}
    .tab-ind{position:absolute;top:0;bottom:0;width:33.333%;left:0;transform:translateX(calc(var(--tab,0) * 100%));
      background:rgba(97,147,158,.18);
      transition:transform .22s ease;
    }

    .pages{flex:1 1 auto;min-height:0;overflow:hidden;}
    .pages-track{height:100%;display:flex;width:300%;transform:translateX(calc(var(--tab,0) * -33.333%));transition:transform .22s ease;}
    .page{width:33.333%;padding:0 14px 14px;overflow:auto;-webkit-overflow-scrolling:touch;}

    .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    .tiles--wide{grid-template-columns:1fr;}
    .tiles--wide .tile{min-height:120px;}

    .filters-search{
      display:flex;
      align-items:center;
      gap:10px;
      height:44px;
      margin:0 0 12px;
      padding:0 14px;
      border-radius:999px;
      background:rgba(255,255,255,.70);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 12px 34px rgba(0,0,0,.10);
      backdrop-filter:blur(10px);
    }
    .filters-search i{width:18px;height:18px;color:rgba(0,0,0,.56);flex:0 0 auto;}
    .filters-search input{
      width:100%;
      min-width:0;
      height:100%;
      border:0;
      outline:none;
      background:transparent;
      font:700 14px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.74);
      -webkit-appearance:none;
      appearance:none;
    }
    .filters-search input::placeholder{color:rgba(0,0,0,.45);}
    .tile{
      position:relative;
      border-radius:18px;
      border:1px solid rgba(0,0,0,.10);
      background:rgba(255,255,255,.60);
      box-shadow:0 14px 40px rgba(0,0,0,.12);
      overflow:hidden;
      cursor:pointer;
      min-height:98px;
      transform:translateZ(0);
    }
    .tile::before{content:"";position:absolute;inset:0;background-image:var(--tile-bg, linear-gradient(135deg, rgba(97,147,158,.35), rgba(0,0,0,.18)));background-size:cover;background-position:center;filter:saturate(.78) contrast(.92) brightness(.92);transform:scale(1.03);opacity:.92;transition:filter .22s ease;}
    .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.10));}
    .tile .label{position:relative;z-index:2;padding:12px 12px 10px;color:rgba(255,255,255,.94);
      font:900 14px/1.15 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-shadow:0 10px 24px rgba(0,0,0,.35);
    }
    .tile.sel{outline:2px solid rgba(97,147,158,.55);outline-offset:2px;}
    .tile.sel::before{filter:saturate(1.05) contrast(1.02) brightness(1);}
    .tile--merch .merch-split{
      position:absolute;
      inset:0;
      z-index:3;
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:1fr 1fr;
      opacity:0;
      transform:scale(.96);
      pointer-events:none;
      transition:opacity .22s ease, transform .22s ease;
    }
    .tile--merch.open .merch-split{pointer-events:auto;}
    .tile--merch .merch-part{
      appearance:none;
      border:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font:600 15px/1.15 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(255,255,255,.94);
      text-shadow:0 6px 14px rgba(0,0,0,.32);
      background:rgba(0,0,0,.12);
      border-right:1px solid rgba(255,255,255,.26);
      border-bottom:1px solid rgba(255,255,255,.26);
      user-select:none;
      cursor:pointer;
      transition:background .18s ease, filter .18s ease;
    }
    .tile--merch .merch-part:nth-child(2n){border-right:0;}
    .tile--merch .merch-part:nth-last-child(-n+2){border-bottom:0;}
    .tile--merch.open::before{
      filter:saturate(.82) contrast(.98) brightness(.72) blur(1px);
    }
    .tile--merch.open .label{
      opacity:.0;
      transform:translateY(-6px);
      transition:opacity .18s ease, transform .18s ease;
    }
    .tile--merch.open .merch-split{
      opacity:1;
      transform:scale(1);
    }
    .tile--merch .merch-part.sel{
      background:linear-gradient(135deg, rgba(77,157,173,.62), rgba(41,101,126,.58));
      filter:saturate(1.2) contrast(1.05);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
    }

    .chips{display:flex;flex-wrap:wrap;gap:10px;}
    .chip{
      border-radius:999px;
      border:1px solid rgba(0,0,0,.10);
      background:rgba(255,255,255,.70);
      padding:10px 12px;
      cursor:pointer;
      font:800 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.72);
      box-shadow:0 12px 34px rgba(0,0,0,.10);
      user-select:none;
      transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
    }
    .chip.sel{background:rgba(97,147,158,.18);border-color:rgba(97,147,158,.30);}

    .gblock{margin-top:12px;border-radius:18px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.62);
      box-shadow:0 14px 40px rgba(0,0,0,.10);padding:12px;
    }
    .gtitle{font:900 12px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:.35px;text-transform:uppercase;color:rgba(0,0,0,.60);margin-bottom:10px;}
    .range{display:grid;gap:10px;}
    .range-row{display:flex;justify-content:space-between;gap:10px;font:700 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:rgba(0,0,0,.66);}    
    .range input{width:100%;}
    .range-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .range-field{display:grid;gap:6px;}
    .range-field span{
      font:700 11px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.54);
      text-transform:uppercase;
      letter-spacing:.2px;
    }
    .range-field input[type="number"]{
      width:100%;
      height:34px;
      border-radius:10px;
      border:1px solid rgba(0,0,0,.12);
      background:rgba(255,255,255,.74);
      padding:0 10px;
      font:700 13px/1 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:rgba(0,0,0,.76);
      outline:none;
    }
    .range-field input[type="number"]:focus{
      border-color:rgba(97,147,158,.42);
      box-shadow:0 0 0 2px rgba(97,147,158,.14);
    }

    .check{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font:700 13px/1.2 Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:rgba(0,0,0,.70);}    
    .check input{width:18px;height:18px;}

    body.filters-open{overflow:hidden;}

    @media (max-width: 640px){
      html, body{ overflow-x:hidden; }
      .tabs{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        min-height:40px;
      }
      .tabbtn{
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:0;
        min-height:40px;
        padding:0 6px;
        font-size:11px;
        line-height:1.1;
        letter-spacing:.2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .filters-drawer{
        left:50%;right:auto;top:50%;
        transform:translate(-50%, calc(-50% + 24px)) scale(.98);
        width:min(520px, 94vw);
        height:min(76vh, 720px);
        border-radius:26px;
        border:1px solid rgba(255,255,255,.55);
      }
      .filters-ui.show .filters-drawer{transform:translate(-50%,-50%) scale(1);}
      .tiles--wide{grid-template-columns:1fr;}
      .item .buy{
        gap:8px;
        padding:9px 10px;
        border-radius:12px;
        font-size:13px;
        margin-top:8px;
      }
      .item .buy svg{ width:16px; height:16px; }
      .stock-pill{
        top:7px;
        left:7px;
        padding:3px 7px;
        font-size:10px;
      }
      .stock-pill__ic{
        width:13px;
        height:13px;
        font-size:9px;
      }
    }

    /* Final responsive pass for floating hero collage */
    @media (max-width: 980px){
      .hero{
        grid-template-columns:1fr;
        min-height:unset;
        padding-top:8px;
        gap:10px;
      }
      .hero-left{
        min-height:300px;
        justify-content:flex-start;
      }
      .hero-left .logo{
        width:min(340px, 84vw);
        max-height:92px;
      }
      .hero-title-area{
        transform:translateY(-4px);
      }
      .hero-right{
        min-height:0;
        align-items:stretch;
      }
      .hero-review-collage{
        min-height:0;
        display:flex;
        gap:10px;
        overflow:auto;
        padding:2px 2px 8px;
        -webkit-overflow-scrolling:touch;
      }
      .hero-review-link,
      .hero-review-collage .home-review-card{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        flex:0 0 min(250px, 78vw);
        width:auto;
        transform:none;
      }
      .hero-review-link{
        justify-content:center;
        align-self:stretch;
        min-height:auto;
      }
      .hero-review-collage .home-review-card::after{
        font-size:22px;
      }
    }

    @media (max-width: 520px){
      .hero-left{
        min-height:252px;
        padding:0 6px 52px;
      }
      .hero-left .logo{
        width:min(300px, 86vw);
        max-height:84px;
      }
      .tagline{
        font-size:clamp(14px, 4.6vw, 18px);
      }
      .tagline .line1{
        padding:10px 10px 16px;
      }
      .tagline .line2{
        font-size:clamp(12px, 3.8vw, 15px);
      }
      .hero-left .hero-cta.btn.catalog{
        font-size:14px;
        height:42px;
        min-height:42px;
        min-width:132px;
        padding:10px 16px;
      }
      .new-strip{
        margin-top:8px;
      }
    }

    /* 2026-05-23 final-final home reviews layout */
    @media (min-width: 981px){
      .hero-review-collage{
        min-height:590px;
      }

      .hero-review-collage .home-review-strip{
        position:absolute;
        inset:0;
        min-height:590px;
      }

      .hero-review-collage .home-review-card{
        position:absolute;
        inset:auto;
        left:var(--left, 0);
        top:var(--top, 0);
        width:var(--w, 230px);
        max-width:calc(100% - 18px);
        transform:rotate(var(--r, 0deg));
      }

      .hero-review-collage .home-review-card:nth-of-type(1){
        --w:245px;
        --left:min(47%, 320px);
        --top:18px;
        --r:1.1deg;
        --z:5;
      }

      .hero-review-collage .home-review-card:nth-of-type(2){
        --w:220px;
        --left:0;
        --top:158px;
        --r:-1deg;
        --z:3;
      }

      .hero-review-collage .home-review-card:nth-of-type(3){
        --w:218px;
        --left:min(52%, 350px);
        --top:336px;
        --r:.8deg;
        --z:4;
      }

      .hero-review-collage .home-review-card:nth-of-type(4){
        --w:200px;
        --left:4%;
        --top:392px;
        --r:-.7deg;
        --z:2;
      }
    }

    @media (max-width: 980px){
      .hero-review-collage{
        display:block;
        overflow:visible;
        padding:4px 2px 12px;
      }

      .hero-review-collage .home-review-strip{
        display:flex;
        align-items:stretch;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 0 6px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
      }

      .hero-review-collage .home-review-card{
        position:relative;
        inset:auto;
        flex:0 0 min(250px, 76vw);
        width:auto;
        max-width:none;
        transform:none;
        scroll-snap-align:start;
      }

      .hero-review-collage .hero-review-link{
        position:relative;
        inset:auto;
        display:inline-flex;
        width:auto;
        min-width:112px;
        min-height:36px;
        height:36px;
        justify-content:center;
        padding:0 13px;
        margin:8px 0 0 auto;
        transform:none;
      }
    }

    @media (max-width: 520px){
      .hero-review-collage .home-review-card{
        flex-basis:min(238px, 74vw);
      }
    }

    /* 2026-05-23 absolute final main hero override */
    body:not(.reviews-page) .topbar-brand img[src$="logo1.png"]{
      height:118%;
      width:auto;
      max-width:88px;
      object-fit:contain;
      object-position:left center;
    }

    @media (min-width: 981px){
      .hero{
        grid-template-columns:minmax(430px, .92fr) minmax(440px, 1.08fr);
        gap:clamp(28px, 4.4vw, 58px);
        align-items:center;
        min-height:clamp(650px, 70vh, 740px);
        padding-top:0;
        padding-bottom:12px;
      }

      .hero-left{
        justify-content:center;
        min-height:670px;
        padding:0 10px 62px;
        gap:8px;
        overflow:visible;
      }

      .hero-left .logo{
        width:462px;
        max-width:100%;
        max-height:none;
        height:auto;
        object-fit:contain;
        object-position:left center;
        margin:0 0 -2px;
      }

      .hero-title-area{
        width:max-content;
        max-width:none;
        transform:translateY(-4px);
      }

      .tagline{
        font-size:clamp(18px, 1.95vw, 25px);
        letter-spacing:.32px;
      }

      .tagline .line{
        max-width:none;
      }

      .tagline .line1{
        width:max-content;
        max-width:none;
        padding:14px 20px 21px;
        line-height:.96;
      }

      .tagline .line1::before{
        inset:-9px -73px -12px -103px;
        background-size:100% 168%;
        transform:scaleX(1.04);
      }

      .tagline-main,
      .tagline-sub{
        display:block;
        white-space:nowrap;
      }

      .tagline-sub{
        margin-top:2px;
      }

      .tagline .line2{
        margin-top:5px;
        font-size:clamp(13px, 1.18vw, 16px);
      }

      .hero-left .hero-cta{
        bottom:0;
      }

      .hero-left .hero-cta--image{
        left:0;
        width:clamp(210px, 18vw, 300px);
        height:auto;
        display:block;
        background:transparent;
        border:0;
        box-shadow:none;
        padding:0;
        text-decoration:none;
        transition:transform .18s ease, filter .18s ease;
      }

      .hero-left .hero-cta--image:hover{
        transform:scale(1.022);
        filter:drop-shadow(0 14px 24px rgba(0,0,0,.16));
      }

      .hero-left .hero-cta--image img{
        display:block;
        width:100%;
        height:auto;
        object-fit:contain;
        filter:drop-shadow(0 12px 22px rgba(0,0,0,.11));
      }

      .hero-right{
        position:relative;
        min-height:670px;
        align-self:center;
        align-items:stretch;
        padding-left:0;
      }

      .hero-review-collage{
        position:relative;
        width:100%;
        min-height:670px;
        isolation:isolate;
      }

      .hero-review-collage .home-review-strip{
        position:absolute;
        inset:0;
        min-height:590px;
      }

      .hero-review-link{
        position:absolute;
        right:clamp(26px, 7vw, 92px);
        top:auto;
        bottom:0;
        z-index:8;
        width:clamp(190px, 18vw, 270px);
        min-height:0;
        height:auto;
        align-self:auto;
        padding:0;
        border:0;
        background:transparent;
        box-shadow:none;
        transform:rotate(1deg);
        transition:transform .18s ease, filter .18s ease;
      }

      .hero-review-link:hover{
        transform:scale(1.022) rotate(1deg);
        background:transparent;
        filter:drop-shadow(0 14px 24px rgba(0,0,0,.16));
      }

      .hero-review-link img{
        display:block;
        width:100%;
        height:auto;
        object-fit:contain;
        filter:drop-shadow(0 12px 22px rgba(0,0,0,.11));
      }

      .hero-review-collage .home-review-card{
        position:absolute;
        inset:auto;
        width:var(--w, 230px);
        max-width:calc(100% - 18px);
        margin:0;
        left:var(--left, 0);
        top:var(--top, 0);
        transform:rotate(var(--r, 0deg));
      }

      .hero-review-collage .home-review-card:nth-of-type(1){
        --w:clamp(218px, 18vw, 245px); --left:calc(100% - var(--w) - 10px); --top:18px; --r:1.1deg; --z:5;
      }

      .hero-review-collage .home-review-card:nth-of-type(2){
        --w:clamp(190px, 16vw, 220px); --left:118px; --top:158px; --r:-1deg; --z:3;
      }

      .hero-review-collage .home-review-card:nth-of-type(3){
        --w:clamp(206px, 17vw, 218px); --left:calc(100% - var(--w) - 28px); --top:352px; --r:.8deg; --z:4;
      }

      .hero-review-collage .home-review-card:nth-of-type(4){
        --w:clamp(188px, 15vw, 200px); --left:104px; --top:410px; --r:-.7deg; --z:2;
      }
    }

    @media (max-width: 980px){
      body:not(.reviews-page) .topbar-brand img[src$="logo1.png"]{
        height:108%;
        max-width:78px;
      }

      .hero{
        display:block;
        grid-template-columns:1fr;
        min-height:unset;
        height:auto;
        padding-top:6px;
        padding-bottom:10px;
      }

      .hero-left{
        min-height:0;
        padding:0 6px 58px;
        gap:6px;
        justify-content:flex-start;
        overflow:visible;
      }

      .hero-left .logo{
        width:min(335px, 78vw);
        max-width:100%;
        max-height:none;
        height:auto;
        object-fit:contain;
        object-position:left center;
        margin:0 0 -4px;
      }

      .hero-title-area{
        width:100%;
        transform:none;
      }

      .tagline{
        font-size:clamp(15px, 4.4vw, 20px);
        line-height:1.04;
      }

      .tagline .line{
        width:max-content;
        max-width:calc(100vw - 42px);
        white-space:normal;
      }

      .tagline .line1{
        width:max-content;
        max-width:calc(100vw - 34px);
        padding:10px 12px 16px;
        line-height:.98;
      }

      .tagline .line1::before{
        inset:-5px -12px -8px -10px;
        background-size:100% 154%;
        transform:scaleX(1.02);
      }

      .tagline-main,
      .tagline-sub{
        display:block;
        white-space:nowrap;
      }

      .tagline-sub{
        margin-top:2px;
      }

      .tagline .line2{
        margin-top:5px;
        font-size:clamp(12px, 3.5vw, 15px);
      }

      .tagline .line2::before{
        transform:scale(1.08);
      }

      .hero-left .hero-cta{
        left:auto;
        right:6px;
        bottom:4px;
      }

      .hero-left .hero-cta--image{
        width:min(182px, 48vw);
        height:auto;
        display:block;
        background:transparent;
        border:0;
        box-shadow:none;
        padding:0;
        text-decoration:none;
        transition:transform .18s ease, filter .18s ease;
      }

      .hero-left .hero-cta--image:hover{
        transform:scale(1.02);
        filter:drop-shadow(0 12px 22px rgba(0,0,0,.14));
      }

      .hero-left .hero-cta--image img{
        display:block;
        width:100%;
        height:auto;
        object-fit:contain;
        filter:drop-shadow(0 10px 18px rgba(0,0,0,.11));
      }

      .hero-left .hero-cta.btn.catalog{
        height:42px;
        min-height:42px;
        min-width:128px;
        padding:10px 15px;
        font-size:14px;
      }

      .hero-right{
        width:100%;
        min-height:0;
        align-items:stretch;
        margin-top:8px;
        overflow:hidden;
      }

      .hero-review-collage{
        position:relative;
        width:100%;
        min-height:0;
        display:block;
        overflow:visible;
        padding:4px 2px 12px;
        isolation:isolate;
      }

      .hero-review-collage .home-review-strip{
        display:flex;
        align-items:stretch;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 0 6px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
      }

      .hero-review-link{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        display:inline-flex;
        width:min(182px, 48vw);
        min-width:0;
        min-height:36px;
        height:auto;
        justify-content:center;
        padding:0;
        margin:8px auto 0;
        border:0;
        background:transparent;
        box-shadow:none;
        transform:none;
        transition:transform .18s ease, filter .18s ease;
      }

      .hero-review-link:hover{
        transform:scale(1.02);
        background:transparent;
        filter:drop-shadow(0 12px 22px rgba(0,0,0,.14));
      }

      .hero-review-link img{
        display:block;
        width:100%;
        height:auto;
        object-fit:contain;
        filter:drop-shadow(0 10px 18px rgba(0,0,0,.11));
      }

      .hero-review-collage .home-review-card{
        position:relative;
        inset:auto;
        right:auto;
        top:auto;
        flex:0 0 min(250px, 76vw);
        width:auto;
        max-width:none;
        transform:none;
        scroll-snap-align:start;
      }

      .hero-review-collage .home-review-card::after{
        font-size:22px;
      }
    }

    @media (max-width: 520px){
      .wrap{
        padding:10px 12px;
      }

      .hero-left{
        padding:0 4px 58px;
      }

      .hero-left .logo{
        width:min(320px, 78vw);
      }

      .tagline{
        font-size:clamp(14px, 4.2vw, 18px);
      }

      .tagline .line{
        max-width:calc(100vw - 34px);
      }

      .tagline .line1{
        padding:9px 10px 15px;
      }

      .hero-review-collage .home-review-card{
        flex-basis:min(238px, 74vw);
      }

      .home-review-thumb{
        max-height:120px;
      }

      .new-strip{
        margin-top:8px;
      }
    }

    /* 2026-05-23 phone-only hero polish */
    @media (max-width: 520px){
      .hero-left .logo{
        width:min(360px, 86vw);
        margin:0 auto -4px;
        align-self:center;
        object-position:center center;
      }

      .tagline{
        width:100%;
        font-size:clamp(14px, 4.15vw, 18px);
      }

      .tagline .line1{
        margin-left:14px;
        padding:11px 13px 17px;
      }

      .tagline .line1::before{
        inset:-8px -34px -10px -30px;
        background-size:100% 170%;
        transform:scaleX(1.05);
      }

      .tagline .line2{
        margin-top:10px;
        margin-left:auto;
        margin-right:10px;
        padding:8px 14px 10px;
      }

      .tagline .line2::before{
        inset:-5px -28px -7px -20px;
        transform:scale(1.14, 1.12);
      }

      .hero-left .hero-cta{
        right:14px;
        bottom:2px;
      }

      .hero-left .hero-cta--image{
        width:min(235px, 60vw);
      }

      .hero-review-collage .home-review-strip{
        padding-right:50px;
        -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 calc(100% - 62px), rgba(0,0,0,0) 100%);
        mask-image:linear-gradient(90deg, #000 0%, #000 calc(100% - 62px), rgba(0,0,0,0) 100%);
      }

      .hero-review-link{
        display:flex;
        width:min(145px, 36vw);
        margin:8px 0 0 auto;
      }
    }

    /* 2026-05-26 catalog image button shadow */
    .hero-left .hero-cta--image{
      filter:
        drop-shadow(0 27px 40px rgba(0,0,0,.24))
        drop-shadow(0 -27px 40px rgba(0,0,0,.24))
        drop-shadow(0 11px 18px rgba(0,0,0,.14))
        drop-shadow(0 -11px 18px rgba(0,0,0,.14))
        drop-shadow(0 0 18px rgba(97,147,158,.14));
    }

    .hero-left .hero-cta--image img{
      filter:none;
    }

    .hero-left .hero-cta--image:hover{
      transform:scale(1.022);
      filter:
        drop-shadow(0 27px 43px rgba(97,147,158,.29))
        drop-shadow(0 -27px 43px rgba(97,147,158,.29))
        drop-shadow(0 13px 21px rgba(31,49,54,.16))
        drop-shadow(0 -13px 21px rgba(31,49,54,.16))
        drop-shadow(0 0 22px rgba(97,147,158,.24));
    }

    /* 2026-06-01 phone hero fixes */
    @media (max-width: 640px){
      .top-actions > .icon-btn--catalog.js-smooth-catalog{
        display:none !important;
      }
    }

    @media (max-width: 520px){
      .tagline .line{
        overflow:visible;
      }

      .tagline .line1{
        max-width:calc(100vw - 22px);
        margin-left:0;
        padding:12px 16px 18px;
      }

      .tagline .line1::before{
        inset:-10px -42px -13px -24px;
        background-position:center;
        background-size:100% 178%;
        transform:scaleX(1.04);
      }

      .tagline .line2{
        margin-right:0;
        padding:8px 17px 11px;
      }

      .tagline .line2::before{
        inset:-6px -34px -8px -24px;
        background-position:center;
        transform:scale(1.12, 1.12);
      }

      .hero-left .hero-cta--image{
        width:min(264px, 70vw);
        right:10px;
      }
    }

    /* 2026-06-01 phone review spacing polish */
    @media (max-width: 520px){
      .tagline .line2::before{
        inset:-4px -22px -5px -16px;
        transform:translateX(-16px) scale(.9, .9);
      }

      .hero-review-collage{
        padding-bottom:2px;
      }

      .hero-review-collage .home-review-strip{
        padding-bottom:14px;
      }

      .hero-review-link{
        position:relative;
        z-index:2;
        display:flex;
        margin:4px 0 0 auto;
      }

      .new-strip{
        margin-top:-2px;
      }
    }

    /* 2026-06-04 desktop hero review placement */
    @media (min-width: 981px){
      .hero-right{
        min-height:700px;
      }

      .hero-review-collage{
        min-height:700px;
      }

      .hero-review-collage .home-review-strip{
        min-height:600px;
      }

      .hero-review-link{
        bottom:12px;
        right:clamp(40px, 9vw, 130px);
      }

      .hero-review-collage .home-review-card:nth-of-type(1){
        --w:clamp(230px, 18vw, 260px);
        --left:calc(100% - var(--w) - 8px);
        --top:0px;
      }

      .hero-review-collage .home-review-card:nth-of-type(2){
        --w:clamp(210px, 16vw, 235px);
        --left:clamp(-18px, 4.5vw, 72px);
        --top:16px;
      }

      .hero-review-collage .home-review-card:nth-of-type(3){
        --w:clamp(210px, 17vw, 230px);
        --left:calc(100% - var(--w) - 24px);
        --top:278px;
      }

      .hero-review-collage .home-review-card:nth-of-type(4){
        --w:clamp(205px, 16vw, 225px);
        --left:clamp(-8px, 6vw, 98px);
        --top:262px;
      }
    }