/* ============================================================
   Apple Service — Назрань
   Светлая витрина из карточек одной ширины: первый экран с
   наушниками поверх APPLE / SERVICE, плитки категорий с иконками,
   каталог, красные карточки контактов с часами между ними.
   Шрифты: Unbounded — заголовки, Manrope — текст, Anton — фоновые слова.
   ============================================================ */

:root{
  --ink:        #1D1D1F;
  --ink-2:      #3A3A3F;
  --muted:      #6E6E73;
  --muted-2:    #8E8E94;
  --ground:     #F5F5F7;
  --surface:    #FFFFFF;
  --line:       #D2D2D7;
  --line-soft:  #ECECF0;
  --link:       #0066CC;
  --warm:       #A34A0C;
  --slate:      #1D1D1F;   /* нужна страницам документов */

  --wine:       #6E1A2C;
  --wine-2:     #4A0F1C;
  --pink:       #FE208B;   /* Store в логотипе и сердечки избранного */

  --r-xl: 32px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --pill: 980px;

  --gut: clamp(18px, 4vw, 48px);
  --edge: clamp(10px, 1.6vw, 22px);   /* поля и зазоры между карточками-секциями */
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --display: 'Unbounded','Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --ghost:   'Anton','Impact','Arial Narrow',sans-serif;

  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 18px 44px -24px rgba(20,20,30,.22);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.04), 0 30px 60px -28px rgba(20,20,30,.34);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}

body{
  margin:0;overflow-x:hidden;
  background:var(--surface);color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.5;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:absolute;left:14px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--pill);transition:top .18s var(--ease)}
.skip:focus{top:14px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
/* рамка карточек-секций: ширина и поля как у первого экрана */
.frame{max-width:calc(1400px + 2 * var(--edge));margin:0 auto;padding-inline:var(--edge)}

/* ---------- типографика ---------- */
.h2{
  font-family:var(--display);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:600;line-height:1.06;letter-spacing:-.05em;margin:0;
}
.para{max-width:44ch;color:var(--muted);margin:18px 0 0;font-size:1.0588rem;line-height:1.6}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,4vw,60px);flex-wrap:wrap;
  margin-bottom:clamp(28px,4vw,48px);
}
.sec-head .h2{max-width:13ch}
.sec-lead{max-width:40ch;margin:0;font-size:1rem;line-height:1.6;color:var(--muted)}

/* ---------- кнопки: без рамок ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;border-radius:var(--pill);
  font-size:.9412rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .3s var(--ease),transform .25s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn:hover::after{transform:translateX(120%);transition:transform .8s var(--ease)}
.btn:active{transform:scale(.98)}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn-lg{min-height:58px;padding:16px 34px;font-size:1rem}
.btn-wide{width:100%}

.btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.btn-dark:hover{background:#000;box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
.btn-soft{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 24px -14px rgba(0,0,0,.28)}
.btn-soft:hover{box-shadow:0 2px 4px rgba(0,0,0,.06),0 16px 32px -14px rgba(0,0,0,.34)}
.btn-white{background:#fff;color:var(--wine)}
.btn-white:hover{box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}

/* ============================================================
   НАВИГАЦИЯ
   ============================================================ */
.nav-shell{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.nav-shell.tight{background:rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(0,0,0,.07)}
.nav-pill{max-width:calc(1400px + 2 * var(--edge));margin:0 auto;display:flex;align-items:center;gap:24px;height:66px;padding-inline:calc(var(--edge) + clamp(8px,1.4vw,22px))}

.brand{display:flex;align-items:center;gap:10px;margin-right:auto;white-space:nowrap}
.brand-mark{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--ink);transition:transform .3s var(--ease-out);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
/* знак: скруглённый «плей» линией с разрывом на верхней грани, сетка 64×64 */
.brand-mark svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-family:var(--display);font-size:1.1176rem;font-weight:600;letter-spacing:-.05em}

.nav-links{display:flex;gap:34px;font-size:.9412rem;font-weight:600;color:var(--ink-2)}
.nav-links a{position:relative;transition:color .2s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform .3s var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-act{display:flex;align-items:center;gap:10px;margin-left:10px}

/* поиск — заметная серая пилюля с подписью */
.np-search{
  display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 15px;border-radius:var(--pill);
  background:#E9E9ED;color:var(--ink);font-size:.9412rem;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
  transition:background .2s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease);
}
.np-search:hover{background:#DFDFE4}
.np-search:active{transform:scale(.97)}
.np-search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}

/* корзина — чёрный круг с сумкой */
.np-bag{
  position:relative;width:46px;height:46px;border-radius:var(--pill);flex:none;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  transition:background .2s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease);
}
.np-bag:hover{background:#000;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.np-bag:active{transform:scale(.95)}
.np-bag svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.np-btn{width:44px;height:44px;border-radius:var(--pill);display:grid;place-items:center;flex:none;transition:background .2s var(--ease)}
.np-btn:hover{background:rgba(0,0,0,.06)}
.np-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.np-count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:var(--pill);background:var(--wine);color:#fff;box-shadow:0 0 0 2px #fff;
  font-size:.6471rem;font-weight:800;line-height:20px;text-align:center;letter-spacing:0;
}
.np-bag.bump{animation:bump .45s var(--ease-out)}

/* избранное — серый круг с сердечком, счётчик розовый */
.np-fav{
  position:relative;width:46px;height:46px;border-radius:var(--pill);flex:none;
  display:grid;place-items:center;background:#E9E9ED;color:var(--ink);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.np-fav:hover{background:#DFDFE4}
.np-fav:active{transform:scale(.95)}
.np-fav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.np-fav .np-count{background:var(--pink)}
.np-fav.bump{animation:bump .45s var(--ease-out)}


@keyframes bump{0%,100%{transform:scale(1)}35%{transform:scale(1.2)}}

/* ============================================================
   ПЕРВЫЙ ЭКРАН — наушники поверх слов APPLE / SERVICE
   Карточка — контейнер размеров: все позиции в долях её высоты
   (cqh) и ширины (cqw), поэтому композиция не разъезжается.
   Сверху вниз: заголовок → APPLE с наушниками → SERVICE → кнопки.
   ============================================================ */
.hero{padding:82px var(--edge) 0}

.hero-card{
  position:relative;overflow:hidden;isolation:isolate;
  container-type:size;
  max-width:1400px;margin:0 auto;
  /* --hero-h — высота, зафиксированная скриптом на телефоне (см. lockHeroHeight в hero.js) */
  height:var(--hero-h, clamp(600px,calc(100svh - 100px),860px));
  border-radius:var(--r-xl);
  background:
    radial-gradient(70% 60% at 50% 42%,#F4F4F6 0%,rgba(244,244,246,0) 72%),
    linear-gradient(180deg,#E9E9EC 0%,#DEDEE2 100%);

  --word:    min(36cqh, 21cqw);          /* кегль APPLE */
  --word-y:  39.5cqh;                    /* середина букв APPLE */
  --store:   calc(var(--word) * .22);    /* кегль SERVICE */
  --store-y: 69.5cqh;                    /* середина букв SERVICE */
  --hp-h:    min(55cqh, 43cqw);          /* высота наушников */
  --hp-y:    35.5cqh;                    /* центр наушников */
}

/* свет, который следует за курсором */
.hero-light{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;width:760px;height:760px;margin:-380px 0 0 -380px;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 32%,rgba(255,255,255,0) 64%);
  opacity:0;transition:opacity .6s var(--ease);will-change:transform;
}
.hero-card.lit .hero-light{opacity:1}

.hero-title{
  position:absolute;z-index:4;margin:0;
  left:clamp(26px,4.4cqw,64px);top:clamp(26px,6cqh,56px);
  font-family:var(--display);font-weight:700;
  font-size:min(6.4cqh,3.9cqw);line-height:1.02;letter-spacing:-.055em;color:var(--ink);
}

.hero-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-type{position:absolute;inset:0;z-index:1;will-change:transform}

.hero-word,.hero-store{
  position:absolute;left:0;right:0;
  font-family:var(--display);font-weight:900;line-height:.8;
  text-align:center;white-space:nowrap;user-select:none;
}
/* line-height .8 — середина строки почти совпадает с серединой заглавных */
.hero-word{
  font-size:var(--word);letter-spacing:-.06em;
  top:calc(var(--word-y) - .4em);
  color:#fff;text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.hero-store{
  font-size:var(--store);letter-spacing:.14em;padding-left:.14em;
  top:calc(var(--store-y) - .4em);
  color:var(--ink);
}

.hp-slot{
  position:absolute;z-index:3;left:50%;
  top:calc(var(--hp-y) - var(--hp-h) / 2);height:var(--hp-h);
  aspect-ratio:602 / 790;transform:translateX(-50%);
}
.hp-slot img{width:100%;height:100%;will-change:transform;filter:drop-shadow(0 28px 36px rgba(24,44,78,.2))}

.hp-shadow{
  position:absolute;z-index:0;left:50%;
  top:calc(var(--hp-y) + var(--hp-h) / 2 - 1cqh);
  width:calc(var(--hp-h) * .6);height:5cqh;margin-left:calc(var(--hp-h) * -.3);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(40,50,70,.3) 0%,rgba(40,50,70,.1) 45%,rgba(40,50,70,0) 72%);
  filter:blur(3px);will-change:transform,opacity;
}

.hero-act{
  position:absolute;z-index:5;left:0;right:0;bottom:clamp(26px,6cqh,56px);
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding-inline:20px;
}
.hero-act .btn{will-change:transform}

/* появление первого экрана по очереди */
.hero-title,.hero-word,.hero-store,.hp-slot,.hp-shadow,.hero-act{opacity:0}
.hero.ready .hero-word{opacity:1;animation:wordIn 1.1s var(--ease-out) both}
.hero.ready .hero-store{opacity:1;animation:storeIn 1.1s var(--ease-out) .2s both}
.hero.ready .hp-slot{opacity:1;animation:hpIn 1.2s var(--ease-out) .15s both}
.hero.ready .hp-shadow{opacity:1;animation:fadeIn 1.2s var(--ease) .3s both}
.hero.ready .hero-title{opacity:1;animation:riseIn .8s var(--ease-out) .35s both}
.hero.ready .hero-act{opacity:1;animation:riseIn .8s var(--ease-out) .55s both}

@keyframes wordIn{from{opacity:0;letter-spacing:.02em;filter:blur(8px)}to{opacity:1;letter-spacing:-.06em;filter:blur(0)}}
@keyframes storeIn{from{opacity:0;letter-spacing:.42em}to{opacity:1;letter-spacing:.14em}}
@keyframes hpIn{from{opacity:0;transform:translateX(-50%) translateY(46px) scale(.94)}to{opacity:1;transform:translateX(-50%)}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ============================================================
   ВСТУПЛЕНИЕ — поверх всего сайта, ~1.3 с
   Слой графита и тонкая линия света, которая проходит экран.
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:300;overflow:hidden;pointer-events:none;
  animation:introBail .3s 3.4s forwards;          /* страховка, если скрипт не сработал */
}
@keyframes introBail{to{opacity:0;visibility:hidden}}
.intro-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,#18191D 0%,#0C0C0E 68%,#08080A 100%)}

/* линия: тонкая, холодная, ярче всего у головы */
.intro-line{
  position:absolute;left:0;top:50%;width:0;height:1px;margin-top:-.5px;opacity:0;
  background:linear-gradient(90deg,rgba(196,218,255,0) 0%,rgba(204,224,255,.16) 55%,rgba(238,245,255,.95) 100%);
}
.intro-line::after{
  content:"";position:absolute;right:-44px;top:-3px;width:88px;height:7px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(238,245,255,.8),rgba(204,224,255,0));
}

/* ============================================================
   КАТЕГОРИИ — цветные плитки
   ============================================================ */
.bento{padding-top:var(--edge)}
.bento-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(170px,15.5vw,196px);
  gap:clamp(12px,1.3vw,18px);
}
.b-s{grid-column:span 2;grid-row:span 2}
.b-l{grid-column:span 3;grid-row:span 2}
.b-m{grid-column:span 3;grid-row:span 1}
.b-w{grid-column:1 / -1;grid-row:span 1}

.bcell{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);
  padding:clamp(22px,2.2vw,30px);
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  text-align:left;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.bcell:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

.b-ghost{
  position:absolute;z-index:0;left:clamp(18px,2vw,28px);top:52%;
  transform:translateY(-50%);
  font-family:var(--ghost);font-weight:400;text-transform:uppercase;
  font-size:clamp(4.4rem,8.6vw,8.8rem);line-height:.86;letter-spacing:.005em;
  white-space:nowrap;pointer-events:none;user-select:none;
  transition:transform .6s var(--ease-out);
}
.bcell:hover .b-ghost{transform:translateY(-50%) translateX(8px)}

/* крупная иконка: контур + мягкая заливка в цвет плитки */
.b-ic{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(20px,2.4vw,34px);bottom:clamp(20px,2.4vw,34px);
  width:44%;height:auto;max-height:64%;
  fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.2));
  transition:transform .6s var(--ease-out);
}
.b-ic .f{fill:currentColor;fill-opacity:.13;stroke:none}
.b-ic .d{fill:currentColor;stroke:none}
.bcell:hover .b-ic{transform:translateY(-8px) rotate(-5deg) scale(1.05)}
.b-l .b-ic{width:34%;right:clamp(28px,3.4vw,52px)}
.b-m .b-ic,.b-w .b-ic{width:auto;height:66%;top:17%;bottom:auto}
.b-m .b-ghost,.b-w .b-ghost{left:auto;right:clamp(14px,2vw,26px);font-size:clamp(3.6rem,6.4vw,6.6rem)}
.b-m:hover .b-ghost{transform:translateY(-50%) translateX(-8px)}
.b-l .b-ghost{top:62%;font-size:clamp(5rem,10.5vw,11rem)}

.b-t{
  position:relative;z-index:2;max-width:10ch;
  font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.45rem);font-weight:700;
  letter-spacing:-.055em;line-height:1.02;
}

.b-btn{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:var(--pill);
  font-size:.8824rem;font-weight:700;
  transition:gap .35s var(--ease-out),box-shadow .35s var(--ease);
}
.b-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bcell:hover .b-btn{gap:12px;box-shadow:0 10px 22px -12px rgba(0,0,0,.45)}

/* тона: благородные вместо кислотных */
.t-graphite{background:linear-gradient(150deg,#26272D 0%,#141518 100%);color:#fff}
.t-graphite .b-ghost{color:rgba(255,255,255,.07)}
.t-graphite .b-btn{background:#fff;color:var(--ink)}

.t-ice{background:linear-gradient(150deg,#E6EEF5 0%,#C9D8E6 100%);color:#16202B}
.t-ice .b-ghost{color:rgba(255,255,255,.62)}
.t-ice .b-btn{background:#16202B;color:#fff}

.t-wine{background:linear-gradient(150deg,#7A1F31 0%,#4A0F1C 100%);color:#fff}
.t-wine .b-ghost{color:rgba(255,255,255,.08)}
.t-wine .b-btn{background:#fff;color:var(--wine)}

.t-pearl{background:linear-gradient(160deg,#F2F2F4 0%,#E3E3E8 100%);color:var(--ink)}
.t-pearl .b-ghost{color:#fff}
.t-pearl .b-btn{background:var(--ink);color:#fff}

.t-sand{background:linear-gradient(150deg,#EFE6D8 0%,#DCCBB2 100%);color:#2A2117}
.t-sand .b-ghost{color:rgba(255,255,255,.55)}
.t-sand .b-btn{background:#2A2117;color:#fff}

.t-navy{background:linear-gradient(150deg,#22304F 0%,#131B2F 100%);color:#fff}
.t-navy .b-ghost{color:rgba(255,255,255,.07)}
.t-navy .b-btn{background:#fff;color:#131B2F}

/* ============================================================
   ПОЛОСА ДОВЕРИЯ
   ============================================================ */
.strip{padding-top:var(--edge)}
.strip-in{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.strip-item{
  display:flex;align-items:center;gap:16px;
  padding:22px 24px;border-radius:var(--r-md);background:var(--ground);
}
.strip-ic{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 8px 18px -12px rgba(0,0,0,.25)}
.strip-ic svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.strip-item b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.02em}
.strip-item span{display:block;font-size:.8824rem;color:var(--muted);margin-top:3px;line-height:1.45}

/* ============================================================
   КАТАЛОГ
   ============================================================ */
.catalog{padding:var(--edge) var(--edge) 0}
.page-catalog main{padding-top:74px}

/* ---------- страница «Категории» ----------
   Плитки — те же, что на главной (.bento-grid, .bcell, тона t-*),
   плюс строка с количеством товаров. Бренды — бегущая строка. */
.cat-grid{grid-auto-flow:dense}
.b-head{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px}

.cat-sub{
  margin:clamp(44px,5vw,68px) 0 clamp(16px,1.8vw,24px);
  font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.05em;
}

/* бегущая строка брендов: во всю ширину карточки, края растворяются */
.marquee{
  margin-inline:calc(-1 * clamp(14px,3.6vw,56px));
  overflow:hidden;padding-block:10px;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.mq-track{display:flex;width:max-content;animation:marquee 55s linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq-group{display:flex;gap:14px;padding-right:14px}
.mq-item{
  display:flex;align-items:center;gap:18px;
  padding:24px 22px 24px 28px;border-radius:var(--r-lg);
  background:#fff;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease),transform .35s var(--ease-out),box-shadow .35s var(--ease);
}
.mq-item b{font-family:var(--display);font-size:clamp(1.5rem,2.3vw,2.1rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.mq-go{width:36px;height:36px;border-radius:var(--pill);display:grid;place-items:center;background:var(--ground);color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.mq-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mq-item:hover,.mq-item:focus-visible{background:var(--ink);color:#fff;transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.mq-item:hover .mq-go,.mq-item:focus-visible .mq-go{background:rgba(255,255,255,.14);color:#fff}

/* новые тона для плиток категорий */
.t-cocoa{background:linear-gradient(150deg,#4A3428 0%,#2A1C15 100%);color:#fff}
.t-cocoa .b-ghost{color:rgba(255,255,255,.07)}
.t-cocoa .b-btn{background:#fff;color:#2A1C15}

.t-mist{background:linear-gradient(150deg,#EEECF4 0%,#D8D4E6 100%);color:#221F33}
.t-mist .b-ghost{color:rgba(255,255,255,.64)}
.t-mist .b-btn{background:#221F33;color:#fff}

.t-rose{background:linear-gradient(150deg,#F6E6EB 0%,#EACBD5 100%);color:#3A1826}
.t-rose .b-ghost{color:rgba(255,255,255,.58)}
.t-rose .b-btn{background:#3A1826;color:#fff}

/* ---------- выпадающие списки: бренд и сортировка ---------- */
.dd{position:relative}
.dd-btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  height:44px;min-width:176px;padding:0 16px 0 20px;border-radius:var(--pill);
  background:#fff;color:var(--ink);font-size:.9412rem;font-weight:700;white-space:nowrap;
  transition:box-shadow .25s var(--ease);
}
.dd-btn:hover,.dd.on .dd-btn{box-shadow:0 8px 18px -12px rgba(0,0,0,.3)}
.dd-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.dd.on .dd-chev{transform:rotate(180deg)}
.dd-list{
  position:absolute;z-index:40;top:calc(100% + 8px);left:0;
  min-width:100%;width:max-content;max-width:300px;max-height:340px;overflow-y:auto;
  margin:0;padding:6px;list-style:none;border-radius:20px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 50px -18px rgba(20,20,30,.35);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top;
  transition:opacity .18s var(--ease),transform .25s var(--ease-out),visibility .18s;
}
.dd-right .dd-list{left:auto;right:0;transform-origin:top right}
.dd.on .dd-list{opacity:1;visibility:visible;transform:none}
.dd-list:focus{outline:none}
.dd-opt{
  display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px 0 14px;border-radius:14px;
  font-size:.9412rem;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;
}
.dd-l{margin-right:auto}
.dd-opt small{font-size:.7647rem;font-weight:700;color:var(--muted-2)}
.dd-opt.act{background:var(--ground)}
.dd-opt[aria-selected="true"]{color:var(--ink);font-weight:800}
.dd-check{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.dd-opt[aria-selected="true"] .dd-check{opacity:1}

/* ---------- нижняя навигация: только на телефоне ---------- */
.tabbar{display:none}
.page-catalog .catalog-card{min-height:calc(100svh - 110px)}
/* каталог — отдельная карточка, светлее первого экрана */
.catalog-card{
  max-width:1400px;margin:0 auto;border-radius:var(--r-xl);
  background:linear-gradient(180deg,#F4F4F7 0%,#EDEDF1 100%);
  padding:clamp(34px,4.4vw,64px) clamp(14px,3.6vw,56px) clamp(40px,5vw,72px);
}
.catalog .sec-head{margin-bottom:clamp(22px,2.6vw,34px)}

/* AirPods в правом углу карточки каталога: кейс торчит за верхний край,
   при наведении — открытая версия с наушниками. Кейс в обеих картинках
   одной ширины и стоит по низу, поэтому при смене он не прыгает.
   Открытая картинка: кейс 371 из 380 px ширины, отступ слева 4 px. */
.catalog-card{position:relative}
.pods{
  --w:clamp(100px,8.4vw,120px);
  position:absolute;z-index:3;right:clamp(20px,2.2vw,34px);top:calc(var(--w) * -.3);
  width:var(--w);height:calc(var(--w) * .7508);
  border-radius:var(--r-md);
  animation:podsFloat 5.2s var(--ease) infinite;
}
/* зона наведения выше кейса — чтобы открытые наушники не закрывались под курсором */
.pods::before{content:"";position:absolute;left:-12%;right:-12%;bottom:0;height:calc(var(--w) * 1.5)}
.pods img{
  position:absolute;left:0;bottom:0;height:auto;max-width:none;pointer-events:none;
  filter:drop-shadow(0 18px 22px rgba(20,20,30,.2)) drop-shadow(0 3px 5px rgba(20,20,30,.1));
  transition:opacity .4s var(--ease),transform .6s var(--ease-out);
}
.pods-closed{width:100%}
.pods-open{
  width:calc(var(--w) * 1.0243);left:calc(var(--w) * -.0108);
  opacity:0;transform:translateY(18px) scale(.92);transform-origin:50% 100%;
}
.pods:hover,.pods:focus-visible{animation-play-state:paused}
.pods:hover .pods-closed,.pods:focus-visible .pods-closed{opacity:0;transform:translateY(-4px) scale(1.04)}
.pods:hover .pods-open,.pods:focus-visible .pods-open{opacity:1;transform:none}
@keyframes podsFloat{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-7px) rotate(5deg)}}   /* наклон к правому углу */
/* при наведении наушники выпрыгивают поверх шапки, а не прячутся под ней */
.pods:hover,.pods:focus-visible{z-index:91}
/* на компьютере карточка каталога ниже — чтобы открытым наушникам хватило места под шапкой */
@media (min-width:901px){.page-list main{padding-top:150px}}
@media (max-width:900px),(hover:none){.pods{display:none}}

.controls{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(26px,3vw,40px)}
.ctrl-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;min-width:0}
.ctrl-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.cat-sum{margin:0 6px 0 0;color:var(--muted);font-size:.8824rem;font-weight:600}

.chips{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.chip{
  height:44px;padding:0 20px;border-radius:var(--pill);
  font-size:.9412rem;font-weight:700;color:var(--ink-2);background:#fff;
  white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease);
}
.chip:hover{box-shadow:0 8px 18px -12px rgba(0,0,0,.3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chips-sm .chip{height:40px;padding:0 18px;font-size:.8824rem;background:rgba(255,255,255,.6)}
.chips-sm .chip[aria-pressed="true"]{background:var(--ink)}

.field{position:relative;display:flex;align-items:center}
.field-ic{position:absolute;left:17px;width:18px;height:18px;fill:none;stroke:var(--muted-2);stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.field input{
  height:44px;width:min(250px,52vw);padding:0 18px 0 46px;border:0;border-radius:var(--pill);
  background:#fff;font-size:.9412rem;font-weight:600;
  transition:box-shadow .25s var(--ease);
}
.field input:focus{outline:none;box-shadow:0 0 0 3px rgba(0,102,204,.2)}
.field input::placeholder{color:var(--muted-2);font-weight:500}

.sort select{
  height:44px;padding:0 40px 0 20px;border:0;border-radius:var(--pill);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236E6E73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px;
  appearance:none;-webkit-appearance:none;font-size:.9412rem;font-weight:700;cursor:pointer;
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(14px,1.5vw,20px)}

.item{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r-lg);
  padding:12px 12px 22px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

.item-media-wrap{position:relative;cursor:pointer;border-radius:var(--r-md);overflow:hidden}
/* высота фото одна на все карточки: картинка лежит поверх, а не распирает блок */
.item-media{
  position:relative;aspect-ratio:1 / .92;border-radius:var(--r-md);
  background:radial-gradient(80% 70% at 50% 45%,#FAFAFB 0%,#EEEEF1 100%);
  display:grid;place-items:center;
}
.item-media img{position:absolute;inset:9% 12%;width:76%;height:82%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18));transition:transform .6s var(--ease-out)}
.item:hover .item-media img{transform:scale(1.06) translateY(-4px)}

/* заглушка, пока нет фото */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ph-ic{width:clamp(52px,20%,76px);opacity:.9}
.ph-ic svg{width:100%;height:auto;fill:none;stroke:#A9A9B2;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ph-t{font-size:.7059rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#A9A9B2}
.item:hover .ph-ic{transform:translateY(-3px);transition:transform .5s var(--ease-out)}

/* снято на телефон (загружено из админки): фото заполняет рамку целиком */
.item-media.cv img,.mb-media.cv img{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.item:hover .item-media.cv img{transform:scale(1.04)}
.mb-media.cv{overflow:hidden;height:auto;aspect-ratio:1 / 1;max-height:min(66vh,600px)}   /* своё фото — квадратом, как в админке */

/* сколько фото у товара — на карточке в каталоге */
.item-count{
  position:absolute;right:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px 5px 8px;border-radius:var(--pill);background:rgba(255,255,255,.9);
  font-size:.7059rem;font-weight:800;color:var(--ink-2);box-shadow:0 6px 14px -10px rgba(0,0,0,.3);
}
.item-count svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* галерея в быстром просмотре */
.mb-gal{overflow:hidden}
.gal-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:inherit}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline:2px solid var(--link);outline-offset:-4px}
.mb-gal .gal-track img{position:static;inset:auto;flex:0 0 100%;width:100%;height:100%;box-sizing:border-box;padding:9% 12%;object-fit:contain;scroll-snap-align:center;scroll-snap-stop:always}
.mb-gal.cv .gal-track img{padding:0;object-fit:cover;filter:none}
.gal-nav{position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:0 8px 20px -10px rgba(0,0,0,.4);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.gal-nav:hover{transform:scale(1.06)}
.gal-nav svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gal-nav.prev{left:12px}
.gal-nav.next{right:12px}
.gal-nav:disabled{opacity:0;pointer-events:none}
.gal-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(29,29,31,.28);box-shadow:0 0 0 1.5px rgba(255,255,255,.75);transition:background .2s,transform .2s}
.gal-dots i.on{background:var(--ink);transform:scale(1.2)}
@media (hover:none){ .gal-nav{display:none} }
.line-media.cv{padding:0;overflow:hidden}
.line-media.cv img{object-fit:cover}

/* серые заготовки карточек, пока товары едут с сервера */
.skel{pointer-events:none}
.skel:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.skel .item-media,.skel i{background:linear-gradient(90deg,#EEEEF1 0%,#F7F7F9 50%,#EEEEF1 100%);background-size:200% 100%;animation:skel 1.3s linear infinite}
.skel i{display:block;height:14px;border-radius:7px;margin:16px 6px 0;width:70%}
.skel i+i{width:45%;margin-top:10px}
.skel i+i+i{width:35%;height:22px;margin-top:22px}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel .item-media,.skel i{animation:none}}

.item-tag{
  position:absolute;top:12px;left:12px;z-index:1;
  padding:6px 11px;border-radius:var(--pill);
  background:rgba(255,255,255,.9);
  font-size:.6471rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  box-shadow:0 6px 14px -10px rgba(0,0,0,.3);
}
.item-tag.used{color:var(--warm)}
.item-tag.sold{background:var(--ink);color:#fff}

/* продано: фото приглушено, вместо кнопки — пометка */
.item.sold .item-media img{opacity:.5;filter:grayscale(1) drop-shadow(0 18px 22px rgba(0,0,0,.12))}
.item.sold .ph-ic{opacity:.5}
.item.sold .price{color:var(--muted)}
.soldout{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--pill);
  background:var(--ground);color:var(--muted);font-size:.8235rem;font-weight:800;white-space:nowrap;flex:none;
}

.item-name{
  font-family:var(--display);
  font-size:1.1765rem;font-weight:600;letter-spacing:-.05em;line-height:1.18;
  margin:18px 10px 0;cursor:pointer;transition:color .2s var(--ease);
}
.item-name:hover{color:var(--link)}
.item-specs{margin:8px 10px 0;font-size:.8824rem;color:var(--muted);font-weight:500}

.batt{display:flex;align-items:center;gap:9px;margin:12px 10px 0;font-size:.8235rem}
.batt-bar{width:44px;height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden;flex:none}
.batt-bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.batt b{font-weight:800}
.batt-cap{color:var(--muted-2);font-weight:600}

.item-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:auto 10px 0;padding-top:20px;
}
.price-row{display:flex;flex-direction:column;line-height:1.15}
.price{font-family:var(--display);font-size:1.0588rem;font-weight:600;letter-spacing:-.05em;white-space:nowrap}
.price-was{font-size:.8235rem;color:var(--muted-2);text-decoration:line-through;font-weight:600;margin-top:3px}

.add{
  min-height:44px;padding:11px 19px;border-radius:var(--pill);
  background:var(--ink);color:#fff;
  font-size:.8824rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap;flex:none;
  transition:background .2s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease);
}
.add:hover{background:#000;box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.add:active{transform:scale(.96)}

.stepper{display:flex;align-items:center;gap:2px;border-radius:var(--pill);padding:3px;background:var(--ground);flex:none}
.stepper button{width:38px;height:38px;border-radius:var(--pill);display:grid;place-items:center;color:var(--ink);transition:background .15s var(--ease)}
.stepper button:hover{background:#fff}
.stepper svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.stepper b{min-width:26px;text-align:center;font-size:.9412rem;font-weight:800}

/* сердечко на карточке: правый верхний угол фото */
.fav{
  position:absolute;z-index:2;top:22px;right:22px;width:38px;height:38px;border-radius:var(--pill);
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink-2);
  box-shadow:0 6px 14px -10px rgba(0,0,0,.35);
  transition:transform .2s var(--ease),color .2s var(--ease);
}
.fav:hover{transform:scale(1.08);color:var(--pink)}
.fav svg,.mb-fav svg,.line-fav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transition:fill .2s var(--ease)}
.fav.on,.mb-fav.on,.line-fav.on{color:var(--pink)}
.fav.on svg,.mb-fav.on svg,.line-fav.on svg{fill:var(--pink)}
.fav.pop svg,.mb-fav.pop svg,.line-fav.pop svg{animation:heartPop .45s var(--ease-out)}
@keyframes heartPop{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* главная: одна кнопка под витриной */
.more{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}
.more-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.more-btn:hover svg{transform:translateX(4px)}


.empty{text-align:center;padding:80px 0}
.empty-t{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.04em;margin:0 0 22px}

/* появление при прокрутке */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease-out)}
.bcell.reveal.in{transition:opacity .7s var(--ease),transform .8s var(--ease-out),box-shadow .45s var(--ease)}
.bcell.reveal.in:hover{transform:translateY(-6px);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease)}
.item.reveal.in:hover{transform:translateY(-6px);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease)}

/* ============================================================
   КОНТАКТЫ — две красные карточки, между ними часы
   Внутренние края карточек вырезаны эллипсом вокруг корпуса
   часов: маска прозрачна внутри эллипса, центр — середина зазора.
   Корпус на снимке ≈ 0.6 высоты и 0.57 ширины всего кадра.
   ============================================================ */
.contact{padding:var(--edge) 0 clamp(40px,5vw,72px)}
.duo{
  --gap:  var(--edge);
  --wh:   clamp(430px,40vw,560px);          /* высота часов с ремешком */
  --bx:   calc(var(--wh) * .36);            /* полуоси выреза */
  --by:   calc(var(--wh) * .385);
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  margin-block:calc(var(--wh) * .07);
}
.duo-card{
  position:relative;min-height:calc(var(--wh) * .86);
  border-radius:var(--r-xl);color:#fff;
  background:
    radial-gradient(90% 70% at 20% 0%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(155deg,#D8202F 0%,#B3121F 55%,#8F0C18 100%);
  padding:clamp(30px,3.6vw,54px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.duo-a{
  padding-right:calc(var(--bx) - var(--gap) / 2 + 28px);
  -webkit-mask:radial-gradient(var(--bx) var(--by) at calc(100% + var(--gap) / 2) 50%,transparent 99%,#000 100%);
          mask:radial-gradient(var(--bx) var(--by) at calc(100% + var(--gap) / 2) 50%,transparent 99%,#000 100%);
}
.duo-b{
  padding-left:calc(var(--bx) - var(--gap) / 2 + 28px);
  -webkit-mask:radial-gradient(var(--bx) var(--by) at calc(var(--gap) / -2) 50%,transparent 99%,#000 100%);
          mask:radial-gradient(var(--bx) var(--by) at calc(var(--gap) / -2) 50%,transparent 99%,#000 100%);
}
.duo .h2{color:#fff}
.duo-p{margin:16px 0 0;max-width:30ch;font-size:1.0588rem;line-height:1.55;color:rgba(255,255,255,.82)}
.duo .btn{margin-top:28px;color:#B3121F}

.duo-rows{margin:0;display:grid;gap:10px;width:100%}
.duo-rows > div{padding:17px 20px;border-radius:var(--r-sm);background:rgba(255,255,255,.12);backdrop-filter:blur(2px)}
.duo-rows dt{font-size:.7647rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.duo-rows dd{margin:5px 0 0;font-size:1rem;font-weight:700;line-height:1.4}
/* кнопка маршрута под адресом */
.duo-route{
  display:flex;align-items:center;gap:8px;width:max-content;margin-top:12px;
  padding:9px 16px 9px 13px;border-radius:var(--pill);
  background:#fff;color:#B3121F;font-size:.8235rem;font-weight:800;line-height:1.2;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease);
}
.duo-route:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.duo-route:active{transform:scale(.97)}
.duo-route svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}

/* часы: обёртка даёт тень, сама картинка гасит обрезанные концы ремешка */
.duo-watch{
  position:absolute;z-index:2;left:50%;top:50%;
  height:var(--wh);aspect-ratio:483 / 784;
  transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 30px 34px rgba(90,0,12,.32));
}
.duo-watch img{
  width:100%;height:100%;transition:transform .8s var(--ease-out);
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 11%,#000 89%,transparent 100%);
          mask:linear-gradient(180deg,transparent 0%,#000 11%,#000 89%,transparent 100%);
}
.duo:hover .duo-watch img{transform:rotate(-3deg) scale(1.02)}

.foot{background:var(--ground);color:var(--muted);padding-block:36px 26px;font-size:.8824rem}
.foot-top{display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;justify-content:space-between;padding-bottom:22px}
.foot-brand{color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 28px;font-weight:600}
.foot-links a:hover{color:var(--ink)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding-top:20px;box-shadow:inset 0 1px 0 var(--line-soft);color:var(--muted-2);font-size:.7647rem}
.foot-bottom a:hover{color:var(--ink)}
.foot-seller{flex-basis:100%}   /* реквизиты продавца — отдельной строкой */

/* ============================================================
   КОРЗИНА
   ============================================================ */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(10,10,14,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s var(--ease)}
.scrim.on{opacity:1}

.drawer{
  position:fixed;top:10px;right:10px;bottom:10px;z-index:110;width:min(470px,calc(100vw - 20px));
  background:#fff;border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(calc(100% + 24px));visibility:hidden;
  transition:transform .5s var(--ease-out),visibility .5s;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
}
.drawer.on{transform:none;visibility:visible}

.drawer-head{display:flex;align-items:center;padding:24px 20px 18px 30px;flex:none;box-shadow:inset 0 -1px 0 var(--line-soft)}
.drawer-t{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.05em;margin:0;margin-right:auto}
.drawer .np-btn{background:var(--ground);width:40px;height:40px}
.drawer .np-btn:hover{background:var(--line-soft)}

.drawer-body{flex:1;overflow-y:auto;padding:12px;background:var(--ground);overscroll-behavior:contain}

.line{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:12px;border-radius:var(--r-md);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 24px -18px rgba(20,20,30,.3);transition:box-shadow .3s var(--ease)}
.line + .line{margin-top:10px}
.line:hover{box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 30px -18px rgba(20,20,30,.38)}
.line-open{cursor:pointer}
.line-media{aspect-ratio:1;border-radius:var(--r-sm);background:var(--ground);display:grid;place-items:center;padding:10px}
.line-media img{width:100%;height:100%;object-fit:contain}
.line-media.ph .ph-ic{width:44%}
.line-body{min-width:0;display:flex;flex-direction:column}
.line-tag{font-size:.6471rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.line-name{font-family:var(--display);font-size:1rem;font-weight:600;line-height:1.2;margin:5px 0 0;letter-spacing:-.05em}
.line-meta{font-size:.8235rem;color:var(--muted);margin:4px 0 0;font-weight:500}
.line-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.line-price{font-family:var(--display);font-weight:600;letter-spacing:-.05em;font-size:1rem}
.line-acts{display:flex;align-items:center;gap:6px}
.line-fav{width:36px;height:36px;border-radius:var(--pill);display:grid;place-items:center;background:var(--ground);color:var(--ink-2);transition:background .15s var(--ease)}
.line-add{height:36px;padding:0 15px;border-radius:var(--pill);background:var(--ink);color:#fff;font-size:.8235rem;font-weight:800;white-space:nowrap;transition:background .2s var(--ease)}
.line-add:hover{background:#000}
.line-add.in{background:var(--ground);color:var(--ink)}
.line-add.off{background:var(--ground);color:var(--muted)}
.line-tag.sold{color:var(--ink)}


.qty{display:flex;align-items:center;gap:2px;border-radius:var(--pill);padding:3px;background:var(--ground)}
.qty button{width:32px;height:32px;border-radius:var(--pill);display:grid;place-items:center;transition:background .15s var(--ease)}
.qty button:hover{background:var(--line-soft)}
.qty svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.qty span{min-width:26px;text-align:center;font-size:.9412rem;font-weight:800}

.cart-empty{text-align:center;padding:70px 24px}
.cart-empty .btn,.fav-empty .btn{margin-top:22px}
.empty-ic{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 12px 26px -16px rgba(0,0,0,.35)}
.empty-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
/* пустое избранное: розовое сердце в мягком ореоле */
.fav-empty{text-align:center;padding:34px 22px 30px;margin-bottom:6px;border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 50% 0%,#FFE7F1 0%,#fff 62%);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.fav-empty-ic{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 18px;border-radius:50%;
  background:#fff;color:var(--pink);box-shadow:0 14px 30px -14px rgba(254,32,139,.55);animation:heartBeat 2.4s var(--ease) infinite}
.fav-empty-ic svg{width:34px;height:34px;fill:currentColor;stroke:none}
@keyframes heartBeat{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.1)}86%{transform:scale(.97)}}
.drawer-sub{margin:22px 6px 12px;font-size:.7647rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.drawer-n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 9px;margin-left:6px;vertical-align:4px;
  border-radius:var(--pill);background:var(--ground);font-family:'Manrope',sans-serif;font-size:.8235rem;font-weight:800;letter-spacing:0}
.cart-empty p{margin:0}
.cart-empty-t{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.04em}
.cart-empty-s{color:var(--muted);font-size:.9412rem;margin-top:10px!important}


.drawer-foot{flex:none;padding:20px 30px calc(22px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 var(--line-soft),0 -18px 30px -24px rgba(20,20,30,.25)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.total span{color:var(--muted);font-size:.9412rem;font-weight:700}
.total strong{font-family:var(--display);font-size:1.8rem;font-weight:700;letter-spacing:-.055em}
.drawer-note{font-size:.8235rem;color:var(--muted);margin:14px 0 0;line-height:1.55}
.drawer-note a{color:var(--ink);font-weight:700}
.drawer-note a:hover{text-decoration:underline}

/* ============================================================
   БЫСТРЫЙ ПРОСМОТР
   ============================================================ */
.modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:20px;background:rgba(10,10,14,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal.on{display:grid}
.modal-box{background:#fff;border-radius:var(--r-xl);width:min(600px,100%);max-height:92vh;overflow-y:auto;position:relative;animation:pop .45s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

.mb-media{position:relative;height:clamp(300px,46vh,440px);background:radial-gradient(80% 70% at 50% 45%,#FAFAFB 0%,#EAEAEE 100%);display:grid;place-items:center;border-radius:var(--r-xl) var(--r-xl) 0 0}
/* картинка вписана в блок целиком — за края не выходит */
.mb-media img{position:absolute;inset:9% 12%;width:76%;height:82%;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.2))}
.mb-body{padding:clamp(24px,3.5vw,36px)}
.mb-tag{font-size:.6471rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mb-tag.used{color:var(--warm)}
.mb-tag.sold{color:var(--ink)}
.mb-sold{margin:14px 0 16px;padding:12px 14px;border-radius:var(--r-sm);background:var(--ground);font-size:.8824rem;font-weight:600;color:var(--ink-2)}
.mb-name{font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:-.055em;line-height:1.1;margin:8px 0 0}
.mb-specs{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.9412rem;color:var(--muted);font-weight:600}
.mb-desc{font-size:1rem;margin:18px 0 0;line-height:1.6;color:var(--ink-2)}
.mb-rows{margin:22px 0 0;display:grid;gap:6px}
.mb-rows > div{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;border-radius:var(--r-sm);background:var(--ground);font-size:.9412rem}
.mb-rows dt{color:var(--muted);font-weight:600}
.mb-rows dd{margin:0;font-weight:800;text-align:right}
.mb-price{font-family:var(--display);font-size:1.8rem;font-weight:700;letter-spacing:-.055em;margin:24px 0 18px;display:flex;align-items:baseline;gap:12px}
.mb-price .price-was{font-family:'Manrope',sans-serif;font-size:.9412rem;letter-spacing:0}
.mb-actions{display:flex;gap:10px}
.mb-actions .btn{flex:1}
.mb-fav{width:58px;height:58px;flex:none;border-radius:var(--pill);display:grid;place-items:center;background:var(--ground);color:var(--ink);transition:background .2s var(--ease)}
.mb-fav:hover{background:var(--line-soft)}
.mb-fav svg{width:22px;height:22px}
.mb-close{position:absolute;top:16px;right:16px;z-index:2;width:42px;height:42px;border-radius:var(--pill);background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 8px 20px -12px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.mb-close:hover{transform:rotate(90deg)}
.mb-close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ============================================================
   ТОСТ
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:30px;z-index:130;transform:translate(-50%,24px);
  background:var(--ink);color:#fff;padding:15px 26px;border-radius:var(--pill);
  font-size:.9412rem;font-weight:700;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .45s var(--ease-out);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.6);max-width:calc(100vw - 32px);text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.drawer-open .toast{top:24px;bottom:auto!important;transform:translate(-50%,-24px)}
.drawer-open .toast.on{transform:translate(-50%,0)}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1100px){
  .nav-links{gap:24px}
  .bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .b-s,.b-l{grid-column:span 1;grid-row:span 2}
  .b-m{grid-column:span 1;grid-row:span 1}
  .b-l .b-ghost{font-size:clamp(4rem,11vw,7rem)}
  .duo{--wh:clamp(380px,44vw,480px)}
  .duo .h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
}

/* планшет и телефон: всё по центру столбиком —
   заголовок сверху, наушники с APPLE / SERVICE посередине, кнопки внизу */
@media (max-width:900px){
  .hero{padding-top:74px}
  .hero-card{
    height:var(--hero-h, clamp(560px,calc(100svh - 86px),900px));
    --word:    min(28.5cqw, 17cqh);
    --word-y:  33cqh;                    /* слово под дугой оголовья — читается целиком */
    --store:   calc(var(--word) * .36);
    --store-y: 66cqh;
    --hp-h:    min(40cqh, 88cqw);
    --hp-y:    41cqh;
  }
  .hero-title{left:0;right:0;text-align:center;top:clamp(24px,4.5cqh,44px);font-size:min(9.6cqw,5.4cqh)}
  .hero-act{bottom:clamp(20px,4cqh,40px)}
  .strip{display:none}
}

@media (max-width:760px){
  .nav-links{display:none}
  .nav-pill{height:60px;gap:12px}
  .nav-act{gap:6px}
  .np-search{width:42px;height:42px;padding:0;justify-content:center}
  .np-search span{display:none}
  .np-fav,.np-bag{display:none}          /* избранное и корзина — в нижней панели */

  .tabbar{
    position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:95;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
    padding:6px;border-radius:26px;
    background:rgba(255,255,255,.9);
    backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 18px 40px -14px rgba(20,20,30,.32),0 2px 8px -2px rgba(20,20,30,.1);
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
    padding:7px 0 5px;border-radius:20px;
    font-size:.6471rem;font-weight:700;letter-spacing:0;color:var(--muted-2);white-space:nowrap;
    transition:color .2s var(--ease);
  }
  .tab:active{background:rgba(0,0,0,.05)}
  .tab[aria-current="page"]{color:var(--ink);background:var(--ground)}
  .tab-ic{position:relative;display:grid;place-items:center;width:28px;height:26px}
  .tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tab[aria-current="page"] svg{stroke-width:2.1}
  .tab .np-count{top:-4px;right:-8px;min-width:17px;height:17px;line-height:17px;font-size:.5882rem;padding:0 4px}
  .tab .tab-count-fav{background:var(--pink)}
  .tab.bump .tab-ic{animation:bump .45s var(--ease-out)}

  body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
  .hero-card{height:var(--hero-h, clamp(520px,calc(100svh - 170px),860px))}

  .cat-grid > .b-l:first-child{grid-column:span 2}   /* смартфоны — во всю ширину */
  .marquee{margin-inline:-12px}
  .mq-item{padding:16px 14px 16px 20px;gap:12px;border-radius:22px}
  .mq-go{width:30px;height:30px}
  .mq-item b{font-size:1.3rem}
  .fav{top:14px;right:14px;width:34px;height:34px}
  .fav svg{width:16px;height:16px}
  .more-btn{width:100%}

  .hero-act{flex-direction:column;align-items:stretch;padding-inline:clamp(16px,5cqw,28px);gap:10px}
  .hero-act .btn{width:100%;min-height:54px}

  .bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,44vw,200px);gap:10px}
  .b-s,.b-l,.b-m{grid-column:span 1;grid-row:span 1}
  .bcell{padding:18px;border-radius:24px}
  .b-t{font-size:clamp(1.05rem,4.6vw,1.4rem)}
  .b-ghost{font-size:clamp(2.6rem,15vw,4.4rem)!important;left:14px!important;right:auto!important;top:56%!important}
  .b-ic,.b-l .b-ic,.b-m .b-ic{width:50%;height:auto;max-height:58%;top:auto;left:auto;right:14px;bottom:14px}
  .b-btn{display:none}   /* плитка нажимается целиком, кнопка в узкой плитке мешает иконке */

  .catalog-card{padding-inline:12px}
  .ctrl-row{flex-direction:column;align-items:stretch;gap:12px}
  .ctrl-right{width:100%;flex-wrap:nowrap}
  .cat-sum{display:none}
  .field{flex:1 1 auto;min-width:0}
  .field input{width:100%}
  .sort{flex:0 0 auto}
  .sort select{max-width:44vw}
  .ctrl-right{flex-wrap:wrap}
  .field{flex:1 1 100%}
  .dd{flex:1 1 0;min-width:0}
  .dd-btn{width:100%;min-width:0}
  .dd-val{overflow:hidden;text-overflow:ellipsis}
  .dd-list{max-width:calc(100vw - 48px)}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px}
  .chips::-webkit-scrollbar{display:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .item{padding:8px 8px 16px;border-radius:22px}
  .item-media{border-radius:16px}
  .item-name{font-size:.9412rem;margin:12px 6px 0}
  .item-specs{font-size:.7647rem;margin:6px 6px 0}
  .batt{margin:8px 6px 0}
  .item-foot{flex-direction:column;align-items:stretch;gap:10px;margin:auto 6px 0;padding-top:12px}
  .price{font-size:1rem}
  .add{width:100%;min-height:40px;padding:9px 14px}
  .stepper{justify-content:space-between}

  /* контакты: карточка — часы — карточка, вырезы сверху и снизу */
  .duo{--wh:300px;grid-template-columns:1fr;gap:calc(var(--gap) / 2);margin-block:0}
  .duo-card{min-height:0;padding:30px 24px}
  .duo-a{
    padding-bottom:calc(var(--by) - var(--gap) / 2 + 46px);
    -webkit-mask:radial-gradient(var(--bx) var(--by) at 50% calc(100% + var(--gap) / 2),transparent 99%,#000 100%);
            mask:radial-gradient(var(--bx) var(--by) at 50% calc(100% + var(--gap) / 2),transparent 99%,#000 100%);
  }
  .duo-b{
    padding-top:calc(var(--by) - var(--gap) / 2 + 46px);
    -webkit-mask:radial-gradient(var(--bx) var(--by) at 50% calc(var(--gap) / -2),transparent 99%,#000 100%);
            mask:radial-gradient(var(--bx) var(--by) at 50% calc(var(--gap) / -2),transparent 99%,#000 100%);
  }
  /* часы — нулевая строка сетки между карточками */
  .duo-watch{position:relative;left:auto;top:auto;justify-self:center;height:0;width:0;aspect-ratio:auto;transform:none}
  .duo-watch img{position:absolute;left:0;top:0;height:var(--wh);width:auto;max-width:none;transform:translate(-50%,-50%)}
  .duo:hover .duo-watch img{transform:translate(-50%,-50%)}

  .foot-top{flex-direction:column;align-items:flex-start;gap:16px}
  .foot-bottom{flex-direction:column;gap:6px}
  .drawer{top:0;right:0;bottom:0;width:100vw;border-radius:0}
  .drawer-body{padding-inline:12px}
  .drawer-foot,.drawer-head{padding-inline:22px}
  .mb-media{height:clamp(260px,40vh,360px)}
}

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

/* Телефон и планшет: после касания :hover «залипает» — карточки
   приподнимались, фото увеличивались. Там возвращаем всё на место,
   а касание не приближает страницу двойным тапом. */
a,button,.chip,.dd-opt{touch-action:manipulation}
@media (hover:none){
  .item:hover,.item.reveal.in:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.03)}
  .item:hover .item-media img,.item:hover .item-media.cv img,.item:hover .ph-ic{transform:none}
  .bcell:hover,.bcell.reveal.in:hover{transform:none;box-shadow:none}
  .bcell:hover .b-ic{transform:none}
  .bcell:hover .b-ghost,.b-m:hover .b-ghost{transform:translateY(-50%)}
  .bcell:hover .b-btn{gap:8px;box-shadow:none}
  .mq-item:hover{background:#fff;color:var(--ink);transform:none;box-shadow:none}
  .mq-item:hover .mq-go{background:var(--ground);color:var(--ink)}
  .fav:hover{transform:none}
  .fav:not(.on):hover{color:var(--ink-2)}
  .btn:hover::after{transform:translateX(-120%);transition:none}
  .brand:hover .brand-mark,.duo-route:hover,.mb-close:hover{transform:none}
  .duo:hover .duo-watch img{transform:none}
  .more-btn:hover svg{transform:none}
  .line:hover{box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 24px -18px rgba(20,20,30,.3)}
}
/* на телефоне часы в контактах держатся сдвигом — касание его не сбрасывает */
@media (hover:none) and (max-width:760px){
  .duo:hover .duo-watch img{transform:translate(-50%,-50%)}
}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero-title,.hero-word,.hero-store,.hp-slot,.hero-act,.hp-shadow,.reveal{opacity:1!important}
  /* бегущая строка стоит на месте — бренды листаются пальцем */
  .mq-track{animation:none!important}
  .pods{animation:none}
  .marquee{overflow-x:auto}
  .mq-group[aria-hidden]{display:none}
  .reveal{transform:none!important}
}