:root{
  --paper:#FFFFFF; --mist:#F4EEF1; --ink:#2E1114; --ink-soft:#4A2024; --stone:#83677B;
  --line:#E7DDE1; --accent:#501B1D; --accent-hover:#3D1416; --accent-soft:#64485C;
  --dark:#2E1114; --gray-mid:#ADADAD;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --radius:8px; --ease: cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
body{ margin:0; font-family:var(--font); background:var(--paper); color:var(--ink); line-height:1.5; color-scheme: light; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.01em; }
.container{ max-width:1240px; margin:0 auto; padding:0 20px; }
.visually-hidden{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }
.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.7rem 1.1rem; }
.skip-link:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:40; background:var(--dark); border-bottom:1px solid rgba(255,255,255,.08); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:1rem; }
.nav__logo{ font-size:1.15rem; font-weight:300; letter-spacing:.02em; color:#fff; white-space:nowrap; }
.nav__logo-dot{ font-weight:500; color:var(--gray-mid); }
@media (max-width:480px){ .nav__logo{ font-size:.98rem; } }
.nav__actions{ display:flex; align-items:center; gap:.6rem; }
.icon-btn{ position:relative; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--mist); border:none; border-radius:50%; color:var(--ink); }
.icon-btn:hover{ background:#ECE3E7; }
.icon-btn svg{ width:21px; height:21px; stroke:currentColor; }
.site-header .icon-btn{ background:rgba(255,255,255,.1); color:#fff; }
.site-header .icon-btn:hover{ background:rgba(255,255,255,.18); }
.cart-badge{ position:absolute; top:0; right:0; background:var(--accent); color:#fff; font-size:.62rem; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ---------- mobile menu / category drawer ---------- */
.menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:90; }
.menu-overlay.is-open{ opacity:1; pointer-events:auto; }
.menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(300px,85vw); background:#fff; z-index:91; transform:translateX(-100%); transition:transform .3s var(--ease); display:flex; flex-direction:column; }
.menu-drawer.is-open{ transform:translateX(0); }
.menu-drawer__head{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem; border-bottom:1px solid var(--line); }
.menu-drawer nav{ padding:.6rem 0; overflow-y:auto; }
.menu-drawer nav a{ display:block; padding:.85rem 1.2rem; font-size:1rem; }
.menu-drawer nav a:hover, .menu-drawer nav a.is-active{ background:var(--mist); }
.menu-drawer__foot{ padding:1.2rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--stone); }
.menu-drawer__foot a{ display:block; margin-top:.4rem; color:var(--ink); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.85rem 1.6rem; font-size:.92rem; font-weight:600; border-radius:var(--radius); border:1px solid var(--ink); background:var(--ink); color:#fff; transition:opacity .2s; position:relative; overflow:hidden; isolation:isolate; }
.btn:hover{ opacity:.85; }
.btn::before{ content:''; position:absolute; top:0; left:-75%; width:45%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); pointer-events:none; z-index:1; }
.btn.is-shining::before{ animation:btnShine .65s ease-out; }
@keyframes btnShine{ from{ left:-75%; } to{ left:130%; } }
.btn--outline{ background:none; color:var(--ink); }
.btn--accent{ background:var(--accent); border-color:var(--accent); }
.btn--accent:hover{ background:var(--accent-hover); border-color:var(--accent-hover); opacity:1; }
.btn--block{ width:100%; }
.btn--sm{ padding:.55rem 1rem; font-size:.82rem; }

/* ---------- page intro (simple pages: category/search, no hero) ---------- */
.intro{ padding:2.2rem 0 1.4rem; }
.intro h1{ font-size:clamp(1.6rem,4vw,2.2rem); }
.intro p{ color:var(--stone); margin-top:.4rem; max-width:520px; }

/* ---------- homepage hero panel: full-bleed, title + categories, one shared background ---------- */
.hero-panel{
  background:linear-gradient(165deg, var(--accent) 0%, var(--ink) 50%, #190a0c 100%);
  padding:2rem 2rem 1.9rem;
  margin:0 0 1.4rem;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.hero-top .intro-text{ max-width:560px; }
.hero-top .intro-text h1{ color:#fff; font-size:clamp(1.6rem,4vw,2.2rem); text-transform:uppercase; font-weight:300; letter-spacing:.08em; }
.hero-top .intro-text p{ color:#D8B6BC; margin-top:.4rem; max-width:520px; }

.hero-cats{ margin-top:2rem; padding-top:1.7rem; border-top:1px solid rgba(255,255,255,.1); }
.hero-cats .icon-cats-section__title{ font-size:1.05rem; margin-bottom:1.2rem; position:relative; padding-bottom:.6rem; color:#F3E7EA; }
.hero-cats .icon-cats-section__title::after{ content:''; position:absolute; left:0; bottom:0; width:32px; height:3px; background:#D98C95; border-radius:2px; }
@media (max-width:700px){
  .hero-panel{ padding:1.6rem 1.4rem; }
}

/* ---------- icon category row (homepage quick nav, lives inside .hero-cats) ---------- */
.icon-cats{ display:flex; justify-content:space-between; gap:clamp(18px,4vw,40px); overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none; }
.icon-cats::-webkit-scrollbar{ display:none; }
.icon-cat{ flex:0 0 auto; text-align:center; width:78px; }
.icon-cat svg{ width:36px; height:36px; padding:9px; box-sizing:content-box; border-radius:50%; background:rgba(255,255,255,.07); color:#F3E7EA; margin-bottom:.6rem; }
.icon-cat span{ font-size:.78rem; color:#CBA8AE; display:block; line-height:1.3; }
.icon-cat svg{ transition:color .2s, transform .25s var(--ease), background .2s; }
.icon-cat:hover svg{ color:#fff; background:rgba(255,255,255,.16); transform:translateY(-3px); }

/* ---------- category pills ---------- */
.cat-pills{ display:flex; gap:.6rem; overflow-x:auto; padding:.4rem 0 1.6rem; scrollbar-width:none; }
.cat-pills::-webkit-scrollbar{ display:none; }
.cat-pill{ flex:0 0 auto; padding:.6rem 1.1rem; border:1px solid var(--line); border-radius:30px; font-size:.86rem; white-space:nowrap; }
.cat-pill.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- filters ---------- */
.filters-bar{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; padding:.8rem 0 1.6rem; border-top:1px solid var(--line); }
.filters-bar input[type="number"]{ width:84px; padding:.5rem .6rem; border:1px solid var(--line); border-radius:6px; }
.filters-bar select{ padding:.55rem .7rem; border:1px solid var(--line); border-radius:6px; background:#fff; }
.filters-bar label.chip{ display:flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border:1px solid var(--line); border-radius:30px; font-size:.85rem; cursor:pointer; }

/* ---------- product grid + card (hover zoom, per the brief) ---------- */
.section{ padding:1rem 0 2.6rem; }
.section h2{ font-size:1.3rem; margin-bottom:1.2rem; position:relative; padding-bottom:.6rem; }
.section h2::after{ content:''; position:absolute; left:0; bottom:0; width:32px; height:3px; background:var(--accent); border-radius:2px; }
.product-grid{ display:flex; flex-wrap:wrap; row-gap:22px; column-gap:22px; align-items:flex-start; }
.product-grid .card{ flex:0 0 calc(25% - 16.5px); width:calc(25% - 16.5px); }
@media (max-width:980px){
  .product-grid{ row-gap:28px; column-gap:14px; }
  .product-grid .card{ flex:0 0 calc(50vw - 27px); width:calc(50vw - 27px); }
  .product-grid .card__media{ height:calc((50vw - 27px) * 4 / 3); }
  .product-grid .card__media img{ aspect-ratio:auto; height:100%; }
}

/* ---------- auto-scrolling product carousel (featured row) ---------- */
.marquee{
  overflow:hidden; margin:0 -20px; padding:0 20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.marquee__track{ display:flex; gap:16px; width:max-content; animation:marqueeScroll 32s linear infinite; }
.marquee__track:hover{ animation-play-state:paused; }
.marquee__track .card{ width:180px; flex-shrink:0; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:680px){
  .marquee__track{ gap:12px; }
  .marquee__track .card{ width:38vw; }
}
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; overflow-x:auto; } .marquee{ -webkit-mask-image:none; mask-image:none; } }

.card{ position:relative; display:block; transition:transform .3s var(--ease); }
.card__media{ display:block; position:relative; overflow:hidden; background:var(--mist); border-radius:var(--radius); margin-bottom:.7rem; box-shadow:0 0 0 rgba(0,0,0,0); transition:box-shadow .3s var(--ease); }
.card__media img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card__media{ transform:translateZ(0); }
  .card:hover{ transform:translateY(-3px); }
  .card:hover .card__media{ box-shadow:0 14px 28px -10px rgba(46,17,20,.22); }
  .card:hover .card__media img{ transform:scale(1.06); }
}
.card__fav{ display:none; } /* немає обраного без акаунтів — лишено для майбутнього, поки приховано */
.badge{ position:absolute; top:8px; left:8px; font-size:.66rem; font-weight:700; padding:.3rem .55rem; border-radius:5px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); z-index:2; }
.badge--sale{ background:var(--accent); color:#fff; }
.badge--low{ background:#fff; color:var(--accent); border:1px solid var(--accent); }
.card__title{ display:block; font-size:.92rem; font-weight:600; margin-bottom:.2rem; }
.card__prices{ display:flex; gap:.5rem; align-items:baseline; font-size:.92rem; }
.card__price--old{ color:var(--stone); text-decoration:line-through; font-size:.82rem; }
.card__price--sale{ color:var(--accent); font-weight:700; }
.card__oos{ font-size:.78rem; color:var(--stone); margin-top:.2rem; }
.card__colors{ display:flex; gap:.3rem; margin-top:.4rem; }
.card__colors span{ width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.28); }

.empty-state{ text-align:center; padding:3.5rem 1rem; color:var(--stone); }
.pagination{ display:flex; justify-content:center; gap:.5rem; margin-top:2rem; }
.pagination a{ padding:.5rem .9rem; border:1px solid var(--line); border-radius:6px; font-size:.85rem; }
.pagination a.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- PDP ---------- */
.breadcrumbs{ font-size:.8rem; color:var(--stone); padding:1rem 0; }
.breadcrumbs span{ margin:0 .35rem; }
.pdp{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; padding-bottom:3rem; }
@media (max-width:880px){ .pdp{ grid-template-columns:1fr; } }
.pdp__gallery-main{ position:relative; aspect-ratio:3/4; background:var(--mist); border-radius:var(--radius); overflow:hidden; margin-bottom:.6rem; cursor:zoom-in; }
.pdp__gallery-main img{ width:100%; height:100%; object-fit:cover; }

.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.gallery-arrow svg{ width:18px; height:18px; }
.gallery-arrow--prev{ left:12px; }
.gallery-arrow--next{ right:12px; }
.gallery-zoom-hint{
  position:absolute; bottom:12px; right:12px; z-index:3;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.gallery-zoom-hint svg{ width:18px; height:18px; }

.lightbox{
  position:fixed; inset:0; background:rgba(10,10,10,.94); z-index:200;
  display:none; align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:88vh; object-fit:contain; }
.lightbox__close{
  position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; font-size:1.1rem;
}
.lightbox__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__arrow svg{ width:22px; height:22px; }
.lightbox__arrow--prev{ left:18px; }
.lightbox__arrow--next{ right:18px; }
@media (max-width:640px){
  .gallery-arrow, .lightbox__arrow{ width:36px; height:36px; }
}
.pdp__thumbs{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pdp__thumbs img{ width:64px; height:80px; object-fit:cover; border-radius:6px; background:var(--mist); border:2px solid transparent; cursor:pointer; }
.pdp__thumbs img.is-active{ border-color:var(--ink); }
.pdp__price{ font-size:1.5rem; font-weight:800; margin:.7rem 0; }
.pdp__price .old{ font-size:1rem; color:var(--stone); text-decoration:line-through; margin-right:.5rem; font-weight:400; }
.pdp__desc{ color:var(--ink-soft); white-space:pre-line; line-height:1.7; }

.color-swatches{ display:flex; gap:.55rem; flex-wrap:wrap; }
.color-swatches button{ width:32px; height:32px; border-radius:50%; padding:0; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.28); }
.color-swatches button.is-active{ border-color:var(--ink); }
.color-label{ font-size:.85rem; color:var(--ink-soft); margin-top:.5rem; }

.size-grid{ display:flex; gap:.5rem; flex-wrap:wrap; }
.size-grid button{ min-width:46px; height:46px; border:1px solid var(--line); border-radius:6px; background:none; font-size:.86rem; }
.size-grid button.is-active{ border-color:var(--ink); background:var(--ink); color:#fff; }
.size-grid button:disabled{ color:var(--line); text-decoration:line-through; cursor:not-allowed; }
.stock-urgency{ font-size:.78rem; color:var(--accent); font-weight:600; margin-top:.5rem; }

/* ---------- expandable accordion (PDP delivery/returns info) ---------- */
.accordion{ margin-top:1.6rem; border-top:1px solid var(--line); }
.accordion__item{ border-bottom:1px solid var(--line); }
.accordion__trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; padding:1rem 0; font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; }
.accordion__chevron{ width:18px; height:18px; flex-shrink:0; transition:transform .3s var(--ease); }
.accordion__item.is-open .accordion__chevron{ transform:rotate(180deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.accordion__panel-inner{ padding-bottom:1.1rem; font-size:.86rem; color:var(--ink-soft); line-height:1.7; }

.qty-row{ display:flex; align-items:center; gap:1rem; margin:1.2rem 0; }
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; }
.qty-stepper button{ width:38px; height:38px; background:none; border:none; font-size:1.1rem; }
.qty-stepper span{ width:34px; text-align:center; }

.sticky-buybar{ display:none; }
@media (max-width:880px){
  .sticky-buybar{ display:flex; align-items:center; gap:.8rem; position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--line); padding:.8rem 1rem; padding-bottom:max(.8rem, env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .3s var(--ease); }
  .sticky-buybar.is-visible{ transform:translateY(0); }
  .sticky-buybar__price{ font-weight:700; white-space:nowrap; }
  .sticky-buybar .btn{ flex:1; }
}

/* ---------- cart drawer ---------- */
.drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:90; }
.drawer-overlay.is-open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(400px,92vw); background:#fff; z-index:91; transform:translateX(100%); transition:transform .3s var(--ease); display:flex; flex-direction:column; }
.drawer.is-open{ transform:translateX(0); }
.drawer__head{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem; border-bottom:1px solid var(--line); }
.drawer__body{ flex:1; overflow-y:auto; padding:1.2rem; display:grid; gap:1.1rem; }
.drawer__foot{ padding:1.2rem; border-top:1px solid var(--line); }
.line-item{ display:grid; grid-template-columns:60px 1fr auto; gap:.8rem; }
.line-item img{ width:60px; height:75px; object-fit:cover; border-radius:6px; background:var(--mist); }
.line-item__name{ font-size:.86rem; font-weight:600; }
.line-item__meta{ font-size:.76rem; color:var(--stone); }
.toast{ position:fixed; bottom:20px; right:20px; background:var(--ink); color:#fff; padding:.9rem 1.3rem; border-radius:8px; font-size:.85rem; transform:translateY(20px); opacity:0; transition:all .3s var(--ease); z-index:99; }
.toast.is-visible{ transform:translateY(0); opacity:1; }

/* ---------- cart / checkout page ---------- */
.table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.table th{ text-align:left; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--stone); padding:.6rem; border-bottom:1px solid var(--line); }
.table td{ padding:.7rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
@media (max-width:760px){
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{ border-bottom:1px solid var(--line); padding:.9rem 0; display:grid; grid-template-columns:56px 1fr; gap:.25rem .8rem; }
  .table tr td:first-child{ grid-row:1/span 5; }
  .table td{ border:none; padding:.12rem 0; }
  .table td[data-label]::before{ content:attr(data-label); display:inline-block; min-width:80px; font-size:.68rem; text-transform:uppercase; color:var(--stone); }
  .table td:last-child{ grid-column:2; }
}
.field{ display:grid; gap:.4rem; margin-bottom:1rem; }
.field label{ font-size:.78rem; color:var(--stone); }
.field input, .field textarea{ border:1px solid var(--line); border-radius:6px; padding:.75rem .9rem; font-family:inherit; background:#fff; color:var(--ink); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--ink); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:600px){ .grid-2{ grid-template-columns:1fr; } }
.summary-box{ border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:2.4rem 0 1.6rem; margin-top:2rem; background:var(--dark); }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.6rem; margin-bottom:1.4rem; }
.footer-col h4{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); margin-bottom:.7rem; }
.footer-col a, .footer-col p{ font-size:.88rem; color:#E6D9DD; display:block; margin-bottom:.4rem; position:relative; width:fit-content; }
.footer-col a{ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s var(--ease), color .2s; padding-bottom:2px; }
.footer-col a:hover{ color:#fff; background-size:100% 1px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:1.2rem; font-size:.78rem; color:var(--stone); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-social{ display:flex; gap:.6rem; }
.footer-social__btn{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s, transform .2s; }
.footer-social__btn:hover{ background:var(--accent); transform:translateY(-2px); }
.footer-social__btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }