/* Плавные переходы между страницами: браузер сам сводит старую и новую
     картинку, вместо резкой подмены. */
  @view-transition{ navigation:auto; }

  :root{
    --bg:#FAF7FB; --shell:#FFFFFF; --shot:#FFFFFF;
    --ink:#1A181E; --muted:#6E6A76; --line:#E7E4EA;
    --lilac:#9C6FA0; --lilac-2:#C8A0C8; --lilac-pale:#F5EBF5;
    --stock:#2E8F5F; --sale:#D64530; --sale-soft:#FDEDEA;
    --herobg:url(/static/img/heroBg.jpg);
    --apple:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath fill='%23000' d='M100 44c-8-16-26-24-44-20-20 5-34 24-34 48 0 44 28 96 52 96 10 0 14-6 26-6s16 6 26 6c24 0 52-52 52-96 0-24-14-43-34-48-18-4-36 4-44 20z'/%3E%3Cpath fill='%23000' d='M104 40c12-4 22-16 22-30-14 1-27 12-28 26-1 3 2 5 6 4z'/%3E%3C/svg%3E");
    --sans:"SF Pro Display","SF Pro Text",-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#141319; --shell:#1B1922; --shot:#FFFFFF;
      --ink:#EFECF3; --muted:#9A95A3; --line:#2C2934;
      --lilac:#D9A9DB; --lilac-2:#9C6FA0; --lilac-pale:#2B1F2C;
      --stock:#68C495; --sale:#EE8570; --sale-soft:#2B1B18;
    }
  }
  :root[data-theme="dark"]{
    --bg:#141319; --shell:#1B1922; --shot:#FFFFFF;
    --ink:#EFECF3; --muted:#9A95A3; --line:#2C2934;
    --lilac:#D9A9DB; --lilac-2:#9C6FA0; --lilac-pale:#2B1F2C;
    --stock:#68C495; --sale:#EE8570; --sale-soft:#2B1B18;
  }

  body{background:var(--bg);color:var(--ink);font-family:var(--sans);
       font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;}
  .in{max-width:1280px;margin:0 auto;padding:0 18px;}
  button{font-family:var(--sans);cursor:pointer;}
  :focus-visible{outline:2px solid var(--lilac);outline-offset:2px;}

  /* ── утилитарная полоса ────────────────────────────── */
  .util{border-bottom:1px solid var(--line);font-size:13px;}
  .util .in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:44px;}
  .lang{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
  .lang button{border:none;background:transparent;padding:4px 11px;font-weight:700;
               font-size:12px;color:var(--muted);}
  .lang button.on{background:var(--lilac);color:#fff;}
  .util .tel{font-weight:700;}
  .util .hours{color:var(--muted);}
  .util nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;}
  .util nav a{color:var(--ink);text-decoration:none;}
  .util nav a:hover{color:var(--lilac);}
  .util nav a.pill{border:1.5px solid var(--lilac);color:var(--lilac);
                   border-radius:999px;padding:4px 13px;font-weight:600;}

  /* ── шапка ─────────────────────────────────────────── */
  .bar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
       background:var(--bg);}
  .bar .in{display:flex;align-items:center;gap:14px;min-height:72px;flex-wrap:wrap;}
  .logo{height:38px;width:auto;display:block;flex:none;background:none;border:none;
        padding:0;margin-right:8px;}
  .cat{display:flex;align-items:center;gap:9px;background:var(--lilac);color:#fff;
       border:none;border-radius:10px;padding:11px 20px;font-weight:700;
       font-size:14.5px;flex:none;}
  .cat .bars{display:flex;flex-direction:column;gap:3px;}
  .cat .bars i{display:block;width:15px;height:2px;background:#fff;border-radius:2px;}
  /* Каталог выпадает по наведению — как у estore и gro. */
  .cat-wrap{position:relative;flex:none;}
  .menu{position:absolute;top:calc(100% + 8px);left:0;z-index:40;
        background:var(--bg);border:1px solid var(--line);border-radius:14px;
        box-shadow:0 24px 50px -24px rgba(40,28,48,.45);padding:10px;
        display:grid;grid-template-columns:250px 260px;gap:8px;
        max-height:70vh;overflow:auto;}
  /* Обязательно. Свой display в стилях перебивает атрибут hidden, и блок
     не прячется: меню не закрывалось вовсе, а пустая корзина показывала
     пустую сетку вместо «Кошик порожній». */
  [hidden]{display:none !important;}
  .menu .col{display:flex;flex-direction:column;gap:2px;}
  /* Пункты меню — ссылки: у товара свой адрес, и «открыть в новой вкладке»
     должно работать. Значит и оформлять надо ссылки, а не кнопки. */
  .menu a{display:flex;justify-content:space-between;gap:12px;align-items:center;
    background:transparent;border:none;border-radius:9px;padding:10px 12px;
    font-size:14px;color:var(--ink);text-align:left;font-weight:600;
    text-decoration:none;}
  .menu a:hover{background:var(--lilac-pale);color:var(--lilac);}
  .menu a.on{background:var(--lilac-pale);color:var(--lilac);}
  .menu .n{font-size:12px;color:var(--muted);font-weight:600;}
  .menu .sub{border-left:1px solid var(--line);padding-left:8px;}
  .menu .sub a{font-weight:500;}
  .sub-empty{padding:12px;color:var(--muted);font-size:13px;}
  @media (max-width:640px){ .menu .sub{display:none;} }
  @media (max-width:640px){ .menu{grid-template-columns:1fr;width:min(88vw,320px);} }

  .search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;
          border:1.5px solid var(--lilac);border-radius:10px;padding:9px 13px;}
  .search input{border:none;outline:none;background:transparent;flex:1;
                font-family:var(--sans);font-size:14px;color:var(--ink);}
  .icons{display:flex;gap:6px;flex:none;}
  .icons button{background:transparent;border:none;font-size:18px;color:var(--muted);
                position:relative;padding:4px 6px;}
  .icons .n{position:absolute;top:0;right:0;background:var(--lilac);color:#fff;
            font-size:10px;font-weight:800;border-radius:999px;padding:0 5px;
            font-family:var(--mono);}

  /* ── мегаменю ──────────────────────────────────────── */
  .mega{position:fixed;inset:0;background:rgba(26,24,30,.4);z-index:40;
        display:grid;place-items:start center;padding:96px 18px 18px;}
  .mega-in{background:var(--bg);border-radius:16px;max-width:1000px;width:100%;
           padding:22px;display:grid;grid-template-columns:230px 1fr;gap:24px;
           max-height:76vh;overflow:auto;}
  .mega h4{margin:0 0 12px;font-size:15px;}
  .mlist{display:flex;flex-direction:column;gap:3px;}
  .mlist button{text-align:left;background:transparent;border:none;padding:9px 11px;
                border-radius:9px;font-size:14px;color:var(--ink);
                display:flex;justify-content:space-between;gap:10px;}
  .mlist button:hover,.mlist button.on{background:var(--lilac-pale);color:var(--lilac);
                                        font-weight:700;}
  .mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;}
  .mcols div{display:flex;flex-direction:column;gap:7px;}
  .mcols a{color:var(--ink);text-decoration:none;font-size:13.5px;}
  .mcols a:hover{color:var(--lilac);}
  .mcols .new{color:var(--sale);font-size:10px;font-weight:800;margin-left:5px;}

  /* ── главная ───────────────────────────────────────── */
  #home{padding:22px 18px 70px;}
  /* Герой с товаром, а не с логотипом: логотип-баннер здесь резался
     и налезал на заголовок. */
  .hero-wrap{position:relative;border-radius:18px;overflow:hidden;
             margin-bottom:26px;display:grid;
             grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
             align-items:center;gap:16px;padding:clamp(22px,3.4vw,42px);
             /* Единая вуаль по всей площади: градиент, уходящий в прозрачность,
                давал видимый край фотографии — выглядело как картинка на картинке. */
             background:linear-gradient(rgba(58,40,72,.62),rgba(58,40,72,.62)),
                        var(--herobg) center/cover no-repeat;
             color:#fff;min-height:clamp(240px,28vw,340px);
             grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
             align-items:center;}
  /* Группа телефонов по одной средней линии с текстом: прижатая к низу,
     она визуально проваливалась относительно заголовка. */
  .hero-phones{position:relative;z-index:1;width:100%;height:auto;
               align-self:center;justify-self:center;
               max-height:clamp(160px,21vw,290px);object-fit:contain;
               object-position:center center;
               /* Трио в шапке владелица утвердила по центру и чуть левее
                  середины колонки: у правого края группа отрывалась от
                  заголовка. Четвёрка живёт ниже, в блоке «Уся лінійка». */
               margin-right:clamp(26px,5vw,78px);
               filter:drop-shadow(0 18px 30px rgba(30,18,40,.38));}
  @media (max-width:640px){ .hero-phones{display:none;} }
  .hero-text{position:relative;z-index:1;align-self:center;
             display:flex;flex-direction:column;
             gap:9px;align-items:flex-start;
             text-shadow:0 2px 14px rgba(30,18,40,.45);}
  /* Её знак на белой плашке — как в самом логотипе; на лиловом фоне
     градиентный знак иначе сливается. */
  .mark{width:46px;height:46px;object-fit:contain;background:#fff;
        border-radius:12px;padding:7px;margin-bottom:4px;}
  .kicker{font-size:12px;font-weight:800;letter-spacing:.12em;
          text-transform:uppercase;opacity:.9;}
  .slogan{font-size:clamp(15px,1.8vw,20px);font-weight:600;opacity:.96;
          margin-top:-2px;}
  .hero-text b{font-size:clamp(26px,3.8vw,46px);font-weight:800;
               text-wrap:balance;
               letter-spacing:-.025em;line-height:1.02;}
  .sub2{font-size:clamp(13px,1.4vw,15.5px);max-width:46ch;opacity:.93;
        text-wrap:balance;}
  .hero-go{margin-top:8px;background:#fff;color:#6E4C84;border:none;
           border-radius:999px;padding:12px 26px;font-weight:800;font-size:14.5px;}
  .hero-shot{position:relative;z-index:1;display:grid;place-items:center;}
  .hero-shot img{max-height:clamp(170px,22vw,270px);width:auto;
                 filter:drop-shadow(0 26px 40px rgba(30,20,40,.4));}
  @media (max-width:640px){
    .hero-wrap{grid-template-columns:1fr;text-align:left;}
    .hero-shot{display:none;}
  }
  /* Официальные формулировки Apple — не выдуманный текст. */
  /* Официальный снимок Apple — на своём светлом фоне, как он и снят. */
  .lineup{background:#F5F5F7;border:1px solid var(--line);border-radius:18px;
          overflow:hidden;margin:0 0 26px;display:grid;
          grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;
          gap:10px;}
  .lineup img{width:100%;height:auto;object-fit:contain;display:block;
              max-height:240px;padding:14px 0 14px 14px;}
  .lineup-text{padding:22px 26px 24px;display:flex;flex-direction:column;
               gap:8px;align-items:flex-start;color:#1A181E;}
  .lineup-text b{font-size:clamp(19px,2.2vw,26px);font-weight:800;
                 letter-spacing:-.02em;}
  .lineup-text span{font-size:13.5px;color:#5C5866;max-width:36ch;}
  .lineup .hero-go{color:#fff;background:var(--lilac);margin-top:4px;}
  @media (max-width:640px){ .lineup{grid-template-columns:1fr;} }

  .claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
          gap:12px;margin:0 0 30px;}
  .claims div{background:#fff;border:1px solid var(--line);border-radius:14px;
              padding:15px 17px;display:flex;flex-direction:column;gap:4px;}
  .claims b{font-size:14.5px;font-weight:800;letter-spacing:-.01em;}
  .claims span{font-size:12.5px;color:var(--muted);line-height:1.4;}
  .hhead{font-size:26px;font-weight:800;margin:0 0 16px;letter-spacing:-.015em;}
  .hhead2{font-size:21px;font-weight:800;margin:34px 0 16px;letter-spacing:-.015em;}
  .fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px;}
  .fam{background:#fff;border:1px solid var(--line);border-radius:14px;
       padding:20px 16px 18px;display:flex;flex-direction:column;gap:4px;
       align-items:center;justify-content:flex-end;text-align:center;
       color:var(--ink);position:relative;overflow:hidden;min-height:168px;}
  .fam:hover{border-color:var(--lilac);}
  .fam img{height:88px;width:auto;object-fit:contain;margin:0 auto 8px;
           display:block;}
  .famtop{flex:1;display:grid;place-items:center;width:100%;position:relative;
          z-index:1;min-height:88px;}
  .fam b{font-size:16px;font-weight:800;letter-spacing:-.01em;}
  .fam span{font-size:13px;color:var(--muted);}
  /* Яблоко — фоном по центру, а не кляксой в углу. */
  .fam::after{content:"";position:absolute;left:50%;top:14px;
    transform:translateX(-50%);width:96px;height:96px;opacity:.10;
    background:var(--lilac);
    -webkit-mask:var(--apple) center/contain no-repeat;
    mask:var(--apple) center/contain no-repeat;}
  .fam img{position:relative;z-index:1;}

  /* ── боковой каталог ───────────────────────────────── */
  .drawer{position:fixed;inset:0;background:rgba(26,24,30,.42);z-index:45;
          display:flex;}
  .drawer-in{background:var(--bg);width:min(360px,86vw);height:100%;
             padding:18px;display:flex;flex-direction:column;gap:14px;
             overflow:auto;}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;
               font-size:16px;}
  .drawer-head .close{position:static;font-size:24px;}
  .drawer-list{display:flex;flex-direction:column;gap:2px;}
  .drawer-list button{display:flex;justify-content:space-between;gap:12px;
    align-items:center;background:transparent;border:none;border-radius:10px;
    padding:12px 12px;font-size:14.5px;color:var(--ink);text-align:left;}
  .drawer-list button:hover{background:var(--lilac-pale);color:var(--lilac);}
  .drawer-list .n{font-size:12.5px;color:var(--muted);}
  .crumbs a{color:var(--muted);}

  /* ── промо-плитка в сетке ──────────────────────────── */
  .promo{grid-column:span 2;background:var(--lilac);color:#fff;border-radius:12px;
         padding:22px;display:flex;flex-direction:column;gap:9px;
         justify-content:center;position:relative;overflow:hidden;}
  .promo h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.015em;}
  .promo p{margin:0;font-size:13.5px;opacity:.92;max-width:32ch;}
  .promo .go{align-self:flex-start;margin-top:4px;background:#fff;
             color:var(--lilac);border:none;border-radius:999px;
             padding:9px 18px;font-weight:700;font-size:13.5px;}
  .promo::after{content:"";position:absolute;right:-34px;bottom:-52px;
    width:190px;height:190px;opacity:.18;background:#fff;
    -webkit-mask:var(--apple) center/contain no-repeat;
    mask:var(--apple) center/contain no-repeat;}
  @media (max-width:560px){ .promo{grid-column:span 2;padding:18px;} }

  /* ── раскладка ─────────────────────────────────────── */
  .layout{display:grid;grid-template-columns:228px 1fr;gap:26px;padding:22px 0 70px;}
  aside{display:flex;flex-direction:column;gap:20px;align-self:start;}
  .fgroup{display:flex;flex-direction:column;gap:8px;}
  .fgroup h3{font-size:14.5px;font-weight:700;margin:0;}
  .fopt{display:flex;align-items:center;gap:9px;font-size:13.5px;background:none;
        border:none;padding:0;color:var(--ink);text-align:left;}
  .box{width:16px;height:16px;border:1.5px solid var(--line);border-radius:4px;
       flex:none;display:grid;place-items:center;color:#fff;font-size:11px;}
  .fopt.on .box{background:var(--lilac);border-color:var(--lilac);}
  .reset{background:none;border:none;color:var(--lilac);font-weight:700;
         font-size:13px;padding:0;text-align:left;}

  /* Её собственный баннер — акцент из фирменных материалов, а не выдуманный. */
  .hero{width:100%;height:clamp(104px, 15vw, 168px);object-fit:cover;
        border-radius:14px;display:block;margin-bottom:18px;}
  /* Полоса моделей: заход в раздел одним кликом, и сетка перестаёт быть
     сплошной стеной одинаковых карточек. */
  .models{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
          gap:10px;margin:0 0 22px;}
  .mcard{background:var(--shell);border:1px solid var(--line);border-radius:12px;
         padding:10px 8px 11px;display:flex;flex-direction:column;
         align-items:center;gap:6px;color:var(--ink);}
  .mcard:hover{border-color:var(--lilac);}
  .mcard.on{border-color:var(--lilac);background:var(--lilac-pale);}
  .mcard img{width:52px;height:52px;object-fit:contain;}
  .mcard span{font-size:11.5px;font-weight:700;text-align:center;line-height:1.25;}
  .crumbs{color:var(--muted);font-size:13px;margin-bottom:10px;}
  .crumbs b{color:var(--ink);font-weight:600;}
  h1{font-size:26px;font-weight:800;margin:0 0 4px;letter-spacing:-.015em;}
  .found{color:var(--muted);font-size:13.5px;margin:0;}
  .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
           justify-content:space-between;margin:0 0 18px;}
  .sortby{display:flex;align-items:center;gap:8px;font-size:13.5px;
          color:var(--muted);}
  .sortby select{font-family:var(--sans);font-size:13.5px;color:var(--ink);
                 background:var(--bg);border:1.5px solid var(--line);
                 border-radius:9px;padding:7px 11px;}

  /* ── сетка ─────────────────────────────────────────── */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px;}
  .item{display:flex;flex-direction:column;gap:8px;background:none;border:none;
        padding:0;text-align:left;color:var(--ink);}
  /* Одна анатомия у всех карточек: цена, название и наличие занимают
     одинаковую высоту, даже когда цены ещё нет — иначе ряды разъезжаются. */
  .pblock{min-height:44px;display:flex;flex-direction:column;justify-content:center;}
  .title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
         overflow:hidden;min-height:37px;}
  .avail{min-height:21px;}
  .shot{background:var(--shot);border:1px solid var(--line);border-radius:12px;
        aspect-ratio:1/1;position:relative;display:grid;place-items:center;
        overflow:hidden;min-height:0;}
  /* Абсолютом, иначе высокая картинка распирает квадрат и ряды разъезжаются. */
  .shot img{position:absolute;inset:12px;width:calc(100% - 24px);
            height:calc(100% - 24px);object-fit:contain;}
  .nophoto{font-size:12.5px;color:var(--muted);font-weight:600;}
  .tagline.new{background:var(--ink);}
  .tagline{position:absolute;top:9px;left:9px;background:var(--lilac);color:#fff;
           font-size:10px;font-weight:800;letter-spacing:.06em;padding:4px 9px;
           border-radius:6px;}
  .prow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
  .prow{align-items:baseline;gap:7px;}
  .now{font-weight:800;font-size:19px;letter-spacing:-.015em;
       font-variant-numeric:tabular-nums;white-space:nowrap;}
  .was{font-size:13px;color:var(--muted);text-decoration:line-through;
       font-variant-numeric:tabular-nums;white-space:nowrap;}
  .off{background:var(--sale-soft);color:var(--sale);font-size:11.5px;
       font-weight:800;padding:2px 7px;border-radius:5px;line-height:1.6;}
  .usd{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
       margin-top:1px;}
  .title{font-size:13.5px;line-height:1.35;}
  .item:hover .title{color:var(--lilac);}
  .avail{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;}
  .avail .yes{color:var(--stock);font-weight:600;}
  .avail .take{border:1.5px solid var(--lilac);color:var(--lilac);border-radius:7px;
               padding:2px 9px;font-weight:600;}
  .soon{font-size:12.5px;color:var(--muted);font-weight:600;}
  .empty{color:var(--muted);padding:30px 0;}
  .more{display:block;margin:26px auto 0;background:transparent;color:var(--lilac);
        border:1.5px solid var(--lilac);border-radius:10px;padding:12px 30px;
        font-weight:700;font-size:14px;}

  /* ── страница товара ───────────────────────────────── */
  .sheet{position:fixed;inset:0;background:rgba(26,24,30,.45);z-index:50;
         display:grid;place-items:start center;padding:60px 18px 18px;overflow:auto;}
  .sheet-in{background:var(--bg);border-radius:16px;max-width:960px;width:100%;
            padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  .close{position:absolute;top:14px;right:16px;background:transparent;border:none;
         font-size:22px;color:var(--muted);}
  .big{background:var(--shot);border:1px solid var(--line);border-radius:14px;
       aspect-ratio:1/1;display:grid;place-items:center;padding:26px;}
  .big img{max-height:100%;width:auto;}
  .pinfo{display:flex;flex-direction:column;gap:13px;position:relative;}
  .pinfo h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.015em;}
  .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
  .meta .yes{color:var(--stock);font-weight:700;}
  .pprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .pprice{align-items:baseline;}
  .pprice .now{font-size:30px;letter-spacing:-.02em;}
  .opts{display:flex;flex-direction:column;gap:9px;}
  .opts .lbl{font-size:13px;color:var(--muted);}
  .swatch{display:flex;gap:8px;flex-wrap:wrap;}
  .swatch button{width:38px;height:38px;border-radius:9px;border:2px solid var(--line);
                 background:var(--shot);}
  .swatch button.on{border-color:var(--lilac);}
  .pills{display:flex;gap:8px;flex-wrap:wrap;}
  .pills button{border:1.5px solid var(--line);background:transparent;border-radius:8px;
                padding:7px 14px;font-weight:600;font-size:13px;color:var(--ink);}
  .pills button.on{border-color:var(--lilac);color:var(--lilac);}
  .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
  .primary{background:var(--lilac);color:#fff;border:none;border-radius:10px;
           padding:13px 26px;font-weight:800;font-size:14.5px;}
  .ghost{background:transparent;color:var(--lilac);border:1.5px solid var(--lilac);
         border-radius:10px;padding:13px 22px;font-weight:700;font-size:14.5px;}
  .facts{border-top:1px solid var(--line);padding-top:13px;display:flex;
         flex-direction:column;gap:7px;font-size:13px;color:var(--muted);}

  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
         background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:999px;
         font-weight:600;font-size:13.5px;z-index:60;}

  footer{border-top:1px solid var(--line);background:#fff;padding:24px 0 40px;}
  footer .in{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);}
  footer a{color:var(--lilac);}
  .note{background:var(--lilac-pale);border:1px solid var(--line);border-radius:11px;
        padding:14px 17px;font-size:13px;margin-top:26px;color:var(--ink);}
  .note b{font-weight:800;}

  @media (max-width:900px){
    .layout{grid-template-columns:1fr;}
    /* На телефоне колонка фильтров превращается в выезжающую
       снизу панель — раньше она просто исчезала. */
    aside{position:fixed;inset:auto 0 0 0;z-index:60;
          background:var(--shell);border-radius:18px 18px 0 0;
          padding:16px 18px 22px;max-height:78vh;overflow:auto;
          box-shadow:0 -18px 44px rgba(30,20,40,.24);
          transform:translateY(101%);transition:transform .22s ease;}
    aside.open{transform:none;}
    .filters-btn{display:inline-flex;}
    .filters-back{position:fixed;inset:0;z-index:55;
                  background:rgba(26,24,30,.42);}
    .mega-in,.sheet-in{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
    .util nav{display:none;}
    .now{font-size:16px;}
  }

  /* Карточки и разделы стали ссылками, а не кнопками: у товара теперь свой
     адрес, и на него должно работать «открыть в новой вкладке». Сбрасываем
     подчёркивание и наследуем цвет, чтобы вид остался прежним. */
  a.item, a.fam, .swatch a, .pills a{
    text-decoration:none; color:inherit;}
  /* Кнопке цвет НЕ наследуем: в шапке текст белый, и «color:inherit»
     делал надпись белой на белой кнопке. */
  a.hero-go{display:inline-block;text-decoration:none;color:#6E4C84;}
  /* Кнопка в блоке «Уся лінійка» — лиловая с белым текстом, её наведение
     не трогаем: иначе она бледнеет. */
  .hero-wrap a.hero-go:hover{background:var(--lilac-pale);color:var(--lilac);}
  .pills a{display:inline-flex;align-items:center;}
  .pwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
         gap:26px;align-items:start;margin:14px 0 30px;}
  .pwrap .big{background:var(--shot);border:1px solid var(--line);
              border-radius:18px;display:grid;place-items:center;
              min-height:340px;padding:22px;}
  .pwrap .big img{max-height:420px;width:auto;max-width:100%;}
  .pwrap .pinfo{display:flex;flex-direction:column;gap:13px;}
  .pwrap h1{font-size:clamp(21px,2.6vw,29px);line-height:1.15;margin:0;
            letter-spacing:-.02em;}
  @media (max-width:760px){ .pwrap{grid-template-columns:1fr;} }

  /* Текстовые страницы и избранное. */
  .doc{max-width:70ch;margin:6px 0 44px;}
  .doc h1{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.02em;margin:0 0 14px;}
  .doc h2{font-size:19px;margin:26px 0 8px;}
  .doc p{margin:0 0 11px;color:var(--ink);line-height:1.65;}
  .doc ul{margin:0 0 14px;padding-left:20px;color:var(--ink);}
  .doc li{margin:0 0 5px;line-height:1.6;}
  .doc a{color:var(--lilac);}
  .fnav{display:flex;gap:16px;flex-wrap:wrap;}
  .fnav a{color:inherit;opacity:.85;}
  .fav{background:none;border:1px solid var(--line);border-radius:999px;
       width:44px;height:44px;font-size:19px;color:var(--lilac);}
  .fav[aria-pressed="true"]{background:var(--lilac-pale);border-color:var(--lilac);}

  /* Кнопка «Фільтри» видна только там, где колонка уехала вниз. */
  .filters-btn{display:none;align-items:center;gap:8px;background:#fff;
               border:1px solid var(--line);border-radius:999px;
               padding:10px 18px;font-weight:700;font-size:14px;
               color:var(--ink);margin:0 0 12px;}
  .filters-btn .n{background:var(--lilac);color:#fff;border-radius:999px;
                  min-width:20px;padding:1px 6px;font-size:12px;}
  .filters-done{display:none;}
  @media (max-width:900px){
    .filters-done{display:block;width:100%;margin-top:14px;
                  background:var(--lilac);color:#fff;border:none;
                  border-radius:999px;padding:13px;font-weight:800;}
  }
  .mcard.more-models{display:grid;place-items:center;color:var(--lilac);
                     font-weight:800;font-size:13px;}
  /* Плитки моделей одного размера: без этого ряд «прыгал», а плитка без
     снимка была вдвое ниже соседних. */
  .mcard{display:flex;flex-direction:column;align-items:center;
         justify-content:flex-end;gap:6px;min-height:118px;}
  .mcard img{height:56px;width:auto;object-fit:contain;}
  .mcard span{font-size:11.5px;line-height:1.25;text-align:center;}

  /* Корзина. */
  .cart{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);
        gap:22px;align-items:start;margin:8px 0 44px;}
  .cart-rows{display:flex;flex-direction:column;gap:10px;}
  .crow{display:grid;grid-template-columns:64px 1fr auto auto auto;gap:12px;
        align-items:center;background:var(--shell);border:1px solid var(--line);
        border-radius:14px;padding:10px 14px;}
  .cshot{height:56px;display:grid;place-items:center;}
  .cshot img{max-height:56px;width:auto;}
  .cname{display:flex;flex-direction:column;gap:2px;font-size:14.5px;}
  .cname a{color:inherit;text-decoration:none;font-weight:700;}
  .cname .art{color:var(--muted);font-size:12px;font-family:var(--mono);}
  .cqty{display:inline-flex;align-items:center;gap:9px;}
  .cqty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
               background:#fff;font-size:15px;}
  .cprice{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .cdel{background:none;border:none;color:var(--muted);font-size:20px;}
  .cart-sum{background:var(--shell);border:1px solid var(--line);
            border-radius:16px;padding:16px;display:flex;flex-direction:column;
            gap:10px;position:sticky;top:14px;}
  .cart-sum .row{display:flex;justify-content:space-between;align-items:baseline;}
  .cart-sum .row b{font-size:21px;font-variant-numeric:tabular-nums;}
  .cart-sum .muted{color:var(--muted);font-size:13px;}
  .cart-sum .primary{text-align:center;text-decoration:none;background:var(--lilac);
                     color:#fff;border-radius:999px;padding:13px;font-weight:800;}
  .cart-sum .fine{color:var(--muted);font-size:12.5px;margin:0;line-height:1.5;}
  @media (max-width:760px){
    .cart{grid-template-columns:1fr;}
    .crow{grid-template-columns:52px 1fr auto;row-gap:8px;}
    .cprice{grid-column:2/4;text-align:right;}
  }

  /* Оформление заказа. */
  .checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);
            gap:24px;align-items:start;margin:8px 0 46px;}
  .cform{display:flex;flex-direction:column;gap:16px;background:var(--shell);
         border:1px solid var(--line);border-radius:16px;padding:20px;}
  .cform label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;
               font-weight:700;color:var(--ink);}
  .cform input, .cform textarea{font:15px/1.4 var(--sans);padding:11px 13px;
    border:1px solid var(--line);border-radius:11px;background:#fff;
    color:var(--ink);}
  .cform input:focus-visible, .cform textarea:focus-visible{outline:2px solid var(--lilac);}
  .fgrp{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .fset{border:1px solid var(--line);border-radius:13px;padding:14px 16px;
        display:flex;flex-direction:column;gap:9px;margin:0;}
  .fset legend{font-size:12px;font-weight:800;letter-spacing:.08em;
               text-transform:uppercase;color:var(--muted);padding:0 6px;}
  .radio{flex-direction:row !important;align-items:flex-start;gap:10px;
         font-weight:500 !important;font-size:14.5px !important;}
  .radio input{width:18px;height:18px;margin-top:1px;accent-color:var(--lilac);}
  .np-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px;}
  .agree{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5;}
  .agree a{color:var(--lilac);}
  .err{color:var(--sale);background:var(--sale-soft);border-radius:10px;
       padding:10px 13px;font-size:14px;margin:0;}
  .cform .primary{background:var(--lilac);color:#fff;border:none;
                  border-radius:999px;padding:14px;font-weight:800;font-size:15px;}
  .cform .primary:disabled{opacity:.6;}
  .cart-mini{display:flex;flex-direction:column;gap:6px;font-size:13px;
             color:var(--muted);}
  .mini{display:flex;justify-content:space-between;gap:10px;}
  .done{text-align:center;padding:44px 20px 60px;display:flex;
        flex-direction:column;gap:12px;align-items:center;}
  .done h2{font-size:26px;margin:0;}
  .done .primary{background:var(--lilac);color:#fff;text-decoration:none;
                 border-radius:999px;padding:13px 28px;font-weight:800;}
  @media (max-width:760px){
    .checkout{grid-template-columns:1fr;}
    .fgrp, .np-fields{grid-template-columns:1fr;}
  }

  /* Согласие на аналитику. */
  .consent{position:fixed;left:14px;right:14px;bottom:14px;z-index:80;
           background:var(--shell);border:1px solid var(--line);
           border-radius:16px;padding:15px 18px;display:flex;gap:16px;
           align-items:center;justify-content:space-between;flex-wrap:wrap;
           box-shadow:0 18px 44px rgba(30,20,40,.2);max-width:760px;
           margin:0 auto;}
  .consent p{margin:0;font-size:13.5px;color:var(--ink);max-width:52ch;
             line-height:1.5;}
  .consent-go{display:flex;gap:9px;}
  .consent button{border:none;border-radius:999px;padding:10px 18px;
                  font-weight:700;font-size:13.5px;background:var(--lilac);
                  color:#fff;}
  .consent button.ghost{background:#fff;color:var(--ink);
                        border:1px solid var(--line);}

  /* Переключатель языка: две ссылки, активная подсвечена. */
  .lang a{display:inline-block;padding:4px 9px;border-radius:7px;
          text-decoration:none;color:var(--muted);font-weight:700;font-size:12px;}
  .lang a.on{background:var(--lilac-pale);color:var(--lilac);}

  /* Мягкость в мелочах: карточки, кнопки и меню не появляются рывком. */
  html{scroll-behavior:smooth;}
  .item, .fam, .mcard, .fopt, .hero-go, .primary, .ghost, .menu a{
    transition:background-color .16s ease, color .16s ease,
               border-color .16s ease, transform .16s ease,
               box-shadow .16s ease;}
  .item:hover, .fam:hover{transform:translateY(-2px);
    box-shadow:0 14px 28px -18px rgba(40,28,48,.5);}
  .menu{animation:menu-in .14s ease;}
  @keyframes menu-in{from{opacity:0;transform:translateY(-4px);}
                     to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .item, .fam, .mcard, .fopt, .hero-go, .primary, .ghost, .menu a,
    .menu{transition:none;animation:none;}
    .item:hover, .fam:hover{transform:none;}
  }