/* ============================================================
   ILCATO — base design system
   Quiet-luxury womenswear. Cream + graphite + warm brown.
   Cormorant (display/logo) + Montserrat (UI/text).
   ============================================================ */

:root{
  /* palette — warm neutrals only */
  --cream:      #f7f4ef;
  --cream-2:    #efe9df;
  --cream-3:    #e8e1d4;
  --paper:      #fdfbf7;
  --ink:        #1b1916;
  --ink-2:      #4a463f;
  --muted:      #8c8576;
  --line:       #e0d9cb;
  --line-2:     #d3cabb;
  --accent:     #6e4a32;   /* warm brown */
  --accent-dk:  #563824;
  --sale:       #9a3a2f;
  --ok:         #5c6b4f;

  /* typography */
  --display:'Cormorant', Georgia, 'Times New Roman', serif;
  --text:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* fluid type scale (mind the spaces around + / -) */
  --fs-mega:  clamp(3.4rem, 1.6rem + 6.4vw, 8.5rem);
  --fs-h1:    clamp(2.4rem, 1.3rem + 3.6vw, 4.6rem);
  --fs-h2:    clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem);
  --fs-h3:    clamp(1.35rem, 1.05rem + 1vw, 1.9rem);
  --fs-lead:  clamp(1.02rem, 0.94rem + 0.45vw, 1.22rem);
  --fs-body:  clamp(0.92rem, 0.88rem + 0.18vw, 1rem);
  --fs-sm:    0.82rem;
  --fs-xs:    0.72rem;

  /* rhythm */
  --container: 1360px;
  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 3.4rem);
  --section-y: clamp(3.6rem, 2rem + 5.5vw, 8rem);
  --radius: 2px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.1, 1);
  --dur: 0.6s;

  --header-h: 76px;
}

*,*::before,*::after{box-sizing:border-box}
/* НЕ вешать overflow-x:hidden/clip на html: clip на корне блокирует прокрутку
   колесом в Safari (вьюпорт становится нескроллируемым). Горизонтальный клип — на body;
   от бокового панорамирования на мобиле — только на мобиле, ниже */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (max-width:860px){
  /* pan-x pan-y: скролл в обе оси работает, но pinch-zoom и double-tap-zoom
     заблокированы (просьба юзера 2026-07-04; iOS 13+ уважает touch-action,
     для старых Safari дублируется gesturestart-перехватом в site.js) */
  html{overflow-x:hidden;touch-action:pan-x pan-y}
  /* iOS Safari проверяет touch-action на самом элементе-ЦЕЛИ тапа, а не только на
     html: глушим double-tap-zoom и на интерактивных элементах/картинках — иначе
     двойной тап по фото в карточках товаров приближал страницу (юзер 2026-07-04) */
  a,img,button,label,input,select,textarea,.swiper,.swiper-slide{touch-action:pan-x pan-y}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
/* Запирание скролла (корзина/меню/фильтры/модалки открыты). Замок должен висеть
   на самом html: в мобильной @media у html стоит overflow-x:hidden, из-за чего
   overflow с body НЕ пробрасывается на вьюпорт — body.no-scroll страницу не
   запирал (сайт скроллился под открытой корзиной). На body — clip, а не hidden,
   чтобы body не становился scroll-контейнером (убивает sticky, см. ниже) */
body.no-scroll{overflow:clip}
html:has(body.no-scroll){overflow:hidden}
/* мобайл: когда html сам overflow-x:hidden, overflow с body не пробрасывается на
   вьюпорт и body{overflow-x:hidden} делает body scroll-контейнером → position:sticky
   внутри (sticky-hero на главной) мёртв. clip НЕ создаёт scroll-контейнер, боковой
   пан всё равно заблокирован. clip — ТОЛЬКО на body, на html нельзя (см. выше).
   Блок стоит ПОСЛЕ базового body{overflow-x:hidden} — иначе каскад его перебьёт */
@media (max-width:860px){
  body{overflow-x:clip}
}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--accent);color:var(--paper)}

/* headings */
.display{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:0.005em}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.06}

/* ---- primitives ---------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1600px}
.container--narrow{max-width:1040px}

.eyebrow{
  font-size:var(--fs-xs);
  letter-spacing:0.32em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted);
}
.eyebrow--accent{color:var(--accent)}

.logo{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:0.42em;
  text-transform:uppercase;
  padding-left:0.42em;
}

.lead{font-size:var(--fs-lead);color:var(--ink-2);font-weight:300;line-height:1.65}

/* buttons */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:0.7em;
  min-height:52px;padding:0 2.2em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-size:var(--fs-xs);letter-spacing:0.24em;text-transform:uppercase;font-weight:500;
  border-radius:var(--radius);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change:transform;
}
.btn:hover{--bg:var(--accent);--bd:var(--accent)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink)}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.btn--light{--bg:transparent;--fg:var(--paper);--bd:rgba(255,255,255,.7)}
.btn--light:hover{--bg:var(--paper);--fg:var(--ink);--bd:var(--paper)}
.btn--block{width:100%}
.btn--sm{min-height:44px;padding:0 1.5em}

/* text link with underline sweep */
.link{
  position:relative;display:inline-block;
  font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;font-weight:500;
  padding-bottom:4px;color:var(--ink);
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link--light{color:var(--paper)}

.hairline{height:1px;background:var(--line);border:0;margin:0}

/* reveal-on-scroll */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-group]>*{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
[data-reveal-group].is-in>*{opacity:1;transform:none}

.mask{overflow:hidden;display:block}
.mask>*{display:block;transform:translateY(102%);transition:transform 1s var(--ease)}
.is-in .mask>*,.mask.is-in>*{transform:none}

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal-group]>*,.mask>*{opacity:1 !important;transform:none !important;transition:none !important}
}

/* utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.accent{color:var(--accent)}
.price{font-variant-numeric:tabular-nums;letter-spacing:0.02em;display:inline-flex;align-items:baseline;gap:.55em;flex-wrap:wrap}
.price__old{color:var(--muted);text-decoration:line-through}
.price__pct{color:var(--sale);font-size:.9em}
.price__sale{color:var(--sale);font-weight:500;font-size:1.08em}
.price__disc{color:var(--sale)}
.cart-item__price.price,.cart-row__price.price{justify-content:flex-end}