/* ==========================================================================
   ZOTY SHOP — V2: слой визуальных улучшений (надстройка над shop.css / главной)
   Активируется классом body.v2. Приёмы вдохновлены 21st.dev:
   3D-tilt карточек, glass-блик, shine-кнопки, corner-notch категории,
   градиентный текст, усиленный glassmorphism, мягкие тени и floating-бейджи.
   ========================================================================== */

/* ---------- Плавность и фокус ---------- */
body.v2{scroll-behavior:smooth}
body.v2 :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}

/* ---------- Градиентный текст заголовков ---------- */
body.v2 .hero__main h1 em,
body.v2 .page-head h1,
body.v2 .ab-hero h1 em,
body.v2 .sec-h h2 em{
  background:linear-gradient(100deg,var(--red),#FF5A45 60%,var(--ink));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-right:.18em;margin-right:-.12em;
  padding-bottom:.08em;margin-bottom:-.08em;
}
/* КАТАЛОГ в шапке: только горизонтальный запас; высота/ось — shop-layout.css */
body.v2 header.hdr .cat-btn,
body.v2 header#hdr .cat-btn{
  background:linear-gradient(100deg,var(--red),#FF5A45 60%,var(--ink));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-right:.18em;margin-right:-.12em;
}
/* у курсивных em нужен запас побольше справа */
body.v2 .ab-hero h1 em,
body.v2 .sec-h h2 em{padding-right:.26em;margin-right:-.2em}
/* на ТЁМНОМ фоне градиент должен заканчиваться светлым, иначе конец слова
   сливается с фоном и выглядит как обрезанная буква */
body.v2 .ab-hero h1 em{
  background:linear-gradient(100deg,#FF5A45,#FF8A6E 55%,#FFD9CF);
  -webkit-background-clip:text;background-clip:text;
}

/* ---------- Шапка: усиленный glassmorphism ---------- */
body.v2 header.hdr,
body.v2 header#hdr{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
body.v2 .mainnav{background:rgba(255,255,255,.7);backdrop-filter:blur(12px)}

/* ---------- Кнопки: shine-блик ---------- */
body.v2 .btn-red,
body.v2 .hero__main .b,
body.v2 .bigpromo .b,
body.v2 .pc .buy,
body.v2 .cat-btn{position:relative;overflow:hidden}
body.v2 header.hdr .cat-btn,
body.v2 header#hdr .cat-btn{position:static;overflow:visible}
body.v2 .btn-red::after,
body.v2 .hero__main .b::after,
body.v2 .bigpromo .b::after,
body.v2 .pc .buy::after,
body.v2 .cat-btn::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
body.v2 header.hdr .cat-btn::after,
body.v2 header#hdr .cat-btn::after{display:none}
body.v2 .btn-red:hover::after,
body.v2 .hero__main .b:hover::after,
body.v2 .bigpromo .b:hover::after,
body.v2 .pc:hover .buy::after,
body.v2 .cat-btn:hover::after{left:140%}

/* ---------- Карточки товара: 3D-tilt + glass-блик ---------- */
body.v2 .pgrid{perspective:2000px}
body.v2 .pc{
  transform-style:preserve-3d;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
  overflow:visible;
}
body.v2 .pc::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.5),transparent 42%);
  transition:opacity .25s ease;mix-blend-mode:overlay;
}
body.v2 .pc:hover,
body.v2 .pc.is-tilt{border-color:var(--red);box-shadow:0 26px 50px rgba(16,24,40,.16),0 8px 18px rgba(227,6,19,.08)}
body.v2 .pc:hover::before,
body.v2 .pc.is-tilt::before{opacity:1}
body.v2 .pc .ph{border-radius:16px 16px 0 0;overflow:hidden}
body.v2 .pc .ph,body.v2 .pc .b,body.v2 .pc .buy{transform:translateZ(12px)}
body.v2 .pc:hover .ph img,
body.v2 .pc.is-tilt .ph img{transform:scale(1.05)}
body.v2 .pc:hover h3,
body.v2 .pc.is-tilt h3{color:var(--red)}
body.v2 .pgrid .pc .lbl{animation:none;transform:translateZ(16px)}

/* ---------- Плитки категорий: corner-notch + круглая кнопка-стрелка ---------- */
body.v2 .ctile{position:relative;overflow:hidden;border-radius:20px}
body.v2 .ctile::before{
  content:"";position:absolute;right:0;bottom:0;width:62px;height:62px;
  background:var(--bg);border-top-left-radius:18px;transition:background .25s ease;
}
body.v2 .ctile::after{
  content:"";position:absolute;right:13px;bottom:13px;width:36px;height:36px;border-radius:50%;
  background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/18px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:background .25s ease, transform .25s ease;
}
body.v2 .ctile:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(16,24,40,.14)}
body.v2 .ctile:hover::after{background:var(--red);transform:scale(1.12) rotate(8deg)}
body.v2 .ctile .ic{transition:transform .3s ease}
body.v2 .ctile:hover .ic{transform:scale(1.08) rotate(-4deg)}

/* ---------- Hero promo-карточки: glass-блик ---------- */
body.v2 .hero__promo{box-shadow:0 18px 40px rgba(16,24,40,.18)}
body.v2 .hero__promo::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(300px circle at 80% 0,rgba(255,255,255,.18),transparent 60%);pointer-events:none;
}

/* ---------- Sale-bar: бегущий блик ---------- */
body.v2 .sale-bar{position:relative;overflow:hidden}
body.v2 .sale-bar::after{
  content:"";position:absolute;top:0;left:-50%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  animation:saleShine 4s linear infinite;
}
@keyframes saleShine{to{left:160%}}

/* ---------- Секции: чуть крупнее радиусы и мягче тени ---------- */
body.v2 .c-card,body.v2 .advc,body.v2 .stat,body.v2 .fblock,body.v2 .summary,body.v2 .block,body.v2 .citems,body.v2 .seo-block,body.v2 .req,body.v2 .c-form,body.v2 .next{box-shadow:0 4px 20px rgba(16,24,40,.05)}
body.v2 .bigpromo .box,body.v2 .ab-hero{box-shadow:0 20px 50px rgba(16,24,40,.18)}

/* ---------- totop: pulse-кольцо ---------- */
body.v2 .totop.show{animation:totopIn .3s ease}
@keyframes totopIn{from{transform:translateY(14px) scale(.8);opacity:0}to{transform:none;opacity:1}}

/* ---------- Формы: focus-glow и плавность (вдохновлено 21st.dev) ---------- */
body.v2 .field input,
body.v2 .field textarea,
body.v2 .promo input,
body.v2 .price-row input{transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
body.v2 .field input:focus,
body.v2 .field textarea:focus,
body.v2 .promo input:focus,
body.v2 .price-row input:focus{box-shadow:0 0 0 4px rgba(227,6,19,.12)}
body.v2 .search:focus-within{box-shadow:0 0 0 4px rgba(227,6,19,.1)}
body.v2 .opt{transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease}
body.v2 .opt.on{box-shadow:0 8px 22px rgba(227,6,19,.1)}
body.v2 .opt:hover{transform:translateY(-2px)}

/* ---------- Табы карточки товара: плавный «летающий» индикатор ---------- */
body.v2 .tabnav{position:relative}
body.v2 .tabnav button{transition:color .2s ease, transform .15s ease}
body.v2 .tabnav button:hover{color:var(--ink);transform:translateY(-1px)}
body.v2 .tabnav button.on{border-color:transparent}
body.v2 .tabnav button.on::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),#FF6A4D);
}
body.v2 .tabpane.on{animation:tabIn .35s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Блок ОТЗЫВЫ (новый, в стиле v2) ---------- */
.reviews .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.reviews .rev{
  background:var(--paper);border-radius:18px;padding:30px 28px 26px;position:relative;
  box-shadow:0 4px 20px rgba(16,24,40,.05);transition:transform .22s ease, box-shadow .22s ease;
  display:flex;flex-direction:column;gap:16px;overflow:hidden;
}
.reviews .rev::before{
  content:"\201C";position:absolute;right:22px;top:6px;font-family:Georgia,serif;
  font-size:96px;line-height:1;color:var(--red);opacity:.1;font-weight:700;
}
body.v2 .reviews .rev:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(16,24,40,.14)}
.reviews .rev__stars{color:var(--red);font-size:16px;letter-spacing:2px}
.reviews .rev__text{font-weight:500;color:#3A3F47;line-height:1.6;flex:1;position:relative;z-index:1}
.reviews .rev__author{display:flex;align-items:center;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.reviews .rev__ava{
  width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--red),#FF6A4D);color:#fff;font-weight:800;font-size:16px;
  box-shadow:0 8px 18px rgba(227,6,19,.28);
}
.reviews .rev__author b{font-size:15px;font-weight:800;display:block}
.reviews .rev__author span{font-size:12.5px;color:var(--mut);font-weight:500}
@media(max-width:1000px){.reviews .rev-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.reviews .rev-grid{grid-template-columns:1fr}}

/* ---------- Отключение tilt на тач/при reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  body.v2 .pc{transform:none!important}
  body.v2 .pc .lbl{animation:none}
  body.v2 .sale-bar::after{animation:none}
  body.v2 .reviews .rev:hover{transform:none}
}