:root{
  --wine:#840259;--wine-deep:#56013b;--wine-soft:#a83b7e;
  --teal:#008080;--teal-deep:#016a6a;
  --cream:#faf4f0;--cream-2:#f4e9e3;--blush:#f6e4ec;
  --ink:#23121c;--muted:#8a7681;--champagne:#c7a878;
  --line:rgba(132,2,89,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Cormorant Garamond по подразбиране дава старостилни цифри — 0/1/2 са колкото
   малките букви, 3/4/5/7/9 висят под линията. Красиво е в течащ текст, но ние
   го ползваме само за заглавия, имена на продукти и цени, където цифрите са
   моделни кодове (Obsessive A704) и суми. Там разнобоят се чете като дефект,
   затова искаме изправените цифри от шрифта. Jost и без това е с такива. */
body{font-family:'Jost',sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:lining-nums}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.serif{font-family:'Cormorant Garamond',serif}
svg{width:19px;height:19px;stroke-width:1.4}

/* ---------- announcement ---------- */
.topbar{background:var(--wine-deep);color:#f3d9e8;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:9px 16px;font-weight:400}
.topbar span{margin:0 14px;white-space:nowrap}
.topbar .dot{color:var(--champagne)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(250,244,240,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{max-width:1280px;margin:0 auto;padding:18px 32px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
/* Менюто изписва имената на категориите, а от блога насам и „Блог“ — шест реда
   текст, които при 13 px и широки разредки не се побират в ширината на сайта и
   изтласкваха кошницата на два реда. Затова буквите тук са малко по-стегнати.
   Стрелките за подменютата взеха още място и лентата остана без нито един
   свободен пиксел: името на магазина се сплескваше на два реда, а докато
   шрифтът се зареди, менюто е с около 6% по-широко и цялата лента се
   разместваше. Затова разстоянията тук са стегнати — така лентата се побира и с
   готовия шрифт, и с временния, и нищо не подскача. */
.menu{display:flex;justify-self:center;gap:16px;list-style:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.menu a{position:relative;padding:6px 0;color:#43303a;transition:color .3s;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--wine);transition:width .35s ease}
.menu a:hover{color:var(--wine)}
.menu a:hover::after{width:100%}
/* ---- падащото меню с подкатегориите ----
   Отваря се без скрипт: :hover за мишката, :focus-within за клавиатурата. Затова
   панелът не се крие с display:none — от него не се стига до връзките с Tab, —
   а с visibility, което ги изважда от реда на обхождане, докато е затворен.
   Разстоянието до лентата е padding отгоре на самия панел, а не празно поле:
   мишката минава през него, без менюто да се затвори по пътя. */
.menu li{position:relative}
/* Стрелката идва като рисунка от самата страница (виж CHEV в генератора), затова
   тук ѝ се задава само размер. Общото правило за иконите я прави 19 px — за реда
   на менюто е твърде едра. */
.menu .chev{width:9px;height:9px;margin-left:5px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;transition:transform .3s}
.menu .has-sub:hover .chev,.menu .has-sub:focus-within .chev{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:50%;z-index:110;padding-top:15px;transform:translate(-50%,7px);opacity:0;visibility:hidden;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s}
.menu .has-sub:hover .submenu,.menu .has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.submenu ul{position:relative;list-style:none;min-width:252px;padding:4px 22px;background:var(--cream);border:1px solid var(--line);border-radius:12px;box-shadow:0 28px 54px -26px rgba(40,3,28,.45)}
/* връхчето към името горе — завъртян квадрат с две от страните си */
.submenu ul::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;background:var(--cream);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.submenu li+li a{border-top:1px solid var(--line)}
.submenu a{display:block;padding:13px 0;font-size:13.5px;letter-spacing:.01em;text-transform:none;white-space:normal;color:#5f4b55}
/* подчертаването отдолу е за лентата; тук редовете са един под друг и линията
   само би се блъскала в разделителите */
.submenu a::after{display:none}
.submenu a:hover{color:var(--wine)}
/* Бутонът за категориите стои само там, където лентата с менюто я няма — на
   широк екран категориите са изписани и втори път да се отварят е излишно. */
.burger{display:none;background:none;border:none;cursor:pointer;color:#43303a;padding:10px;margin:-10px 0 -10px -10px;transition:color .25s}
.burger svg{width:24px;height:24px;stroke-width:1.5}
.burger:hover{color:var(--wine)}
.logo{justify-self:start;text-align:left;line-height:.9}
.logo .mark{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;letter-spacing:.02em;color:var(--ink);position:relative;display:inline-block}
.logo .mark::after{content:"";position:absolute;right:-30px;top:2px;width:26px;height:17px;background:radial-gradient(circle at 30% 70%,var(--wine) 0%,var(--wine-soft) 60%,transparent 72%);border-radius:0 80% 0 80%;transform:rotate(-12deg)}
/* „Luxury Lingerie“ стои на един ред. Иначе, щом лентата се стесни, редът се
   пречупва на „LUXURY“ и „LINGERIE“ и името на магазина изглежда счупено. */
.logo .sub{display:block;font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--wine);margin-top:5px;font-weight:500;white-space:nowrap}
.tools{justify-self:end;display:flex;gap:20px;align-items:center}
.tools a,.tools button{border:none;cursor:pointer;display:flex;align-items:center;transition:color .25s}
/* Голият фон е за иконите. Кошницата до тях е капсула с плътен цвят и си носи
   свой фон — попаднеше ли и тя под същото правило, фонът ѝ отпадаше (правилото
   с два класа е по-силно от нейния) и оставаха бели букви върху кремава лента:
   бутонът за кошницата беше невидим на всяка страница и на всяка ширина. */
.tools a:not(.cart-pill),.tools button{background:none;color:#43303a}
/* Иконата за търсене е 19 px — толкова е и рисунката, но не и мястото, което
   пръстът покрива. Мястото около нея се брои за натискане, без да я измества. */
.tools button{padding:12px;margin:-12px -5px}
.tools a:not(.cart-pill):hover,.tools button:hover{color:var(--wine)}
/* nowrap: с още едно име в менюто („Блог“) на 1280 px мястото отдясно намаля
   и надписът „Кошница · 0“ се пренасяше на два реда — бутонът ставаше двойно
   по-висок от съседите си. */
.cart-pill{display:flex;align-items:center;gap:9px;white-space:nowrap;background:var(--wine);color:#fff;padding:9px 16px;border-radius:40px;font-size:12px;letter-spacing:.08em;transition:background .3s,transform .3s}
.cart-pill:hover{background:var(--wine-deep);transform:translateY(-1px)}

/* ---------- buttons ---------- */
.btn{font-family:'Jost';font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:16px 34px;border-radius:40px;cursor:pointer;transition:all .3s;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn-primary{background:var(--wine);color:#fff}
.btn-primary:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(132,2,89,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--wine);color:var(--wine)}
.btn-light{background:var(--cream);color:var(--wine-deep)}
.btn-light:hover{background:#fff;transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{max-width:1280px;margin:0 auto;padding:64px 32px 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-copy .eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:14px;margin-bottom:26px;font-weight:500}
.hero-copy .eyebrow::before{content:"";width:46px;height:1px;background:var(--teal)}
.hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(46px,6.2vw,86px);line-height:.98;letter-spacing:-.01em;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--wine)}
.hero p.lede{margin:28px 0 38px;max-width:430px;color:#6f5862;font-size:16px;line-height:1.75;font-weight:300}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:38px;margin-top:52px}
.hero-stats .s{display:flex;flex-direction:column}
.hero-stats .num{font-family:'Cormorant Garamond',serif;font-size:38px;color:var(--wine);line-height:1}
.hero-stats .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.hero-visual{display:block;position:relative;aspect-ratio:5/6;border-radius:200px 200px 14px 14px;overflow:hidden;background:linear-gradient(150deg,var(--wine) 0%,var(--wine-deep) 78%);box-shadow:0 40px 80px -30px rgba(86,1,59,.55)}
.hero-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(86,1,59,.28) 100%)}
/* Кадърът се реже отгоре-надолу, защото каталожните снимки са по-тесни от
 * рамката. При рязане по средата главата на модела опира в свода и се отрязва —
 * затова 10% отгоре: горе остава въздух, а отдолу се губят само стъпалата, които
 * и без това са зад етикета с цената. */
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
a.hero-visual:hover img{transform:scale(1.04)}
.hero-badge{position:absolute;right:18px;bottom:18px;z-index:3;background:rgba(250,244,240,.92);backdrop-filter:blur(6px);padding:16px 20px;border-radius:14px;max-width:212px;box-shadow:0 18px 40px -18px rgba(0,0,0,.4)}
.hero-badge .t{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink);line-height:1.15}
.hero-badge .p{display:block;color:var(--wine);font-size:13px;letter-spacing:.05em;margin-top:6px}
.float-tag{position:absolute;left:18px;top:128px;z-index:3;background:#fff;padding:11px 18px;border-radius:40px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;box-shadow:0 14px 30px -14px rgba(0,0,0,.3);display:flex;align-items:center;gap:8px}
.float-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--blush)}
.trust-in{max-width:1280px;margin:0 auto;padding:26px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust .it{display:flex;gap:14px;align-items:center}
.trust .ic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--wine)}
.trust .tt{font-size:13.5px;font-weight:500;letter-spacing:.02em}
.trust .ts{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- section heading ---------- */
.sec{max-width:1280px;margin:0 auto;padding:84px 32px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px;gap:24px}
.sec-head .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:14px;display:block}
.sec-head h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,4vw,54px);line-height:1;color:var(--ink)}
.sec-head .link{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);white-space:nowrap;border-bottom:1px solid var(--wine);padding:10px 0 4px}

/* ---------- categories ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;padding:24px;color:#fff;isolation:isolate}
.cat::before{content:"";position:absolute;inset:0;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(40,3,28,.78),transparent 62%)}
.cat:hover::before{transform:scale(1.07)}
.cat .img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cat:hover .img{transform:scale(1.06)}
/* Четирите корици са снимани на четири различни студийни фона. Тънък слой в цвета
   на плочката отгоре ги връзва в едно семейство, а по-плътното потъмняване долу
   държи името четимо върху светла снимка. Градиентът вече не се мащабира при
   посочване — движи се самата снимка. */
.cat.has-img::before{z-index:-2;opacity:.34;mix-blend-mode:multiply}
.cat.has-img:hover::before{transform:none}
.cat.has-img::after{background:linear-gradient(to top,rgba(28,2,19,.9) 3%,rgba(28,2,19,.5) 32%,rgba(28,2,19,.08) 66%)}
.cat1::before{background:linear-gradient(150deg,#9b2f74,#56013b)}
.cat2::before{background:linear-gradient(150deg,#7a0252,#2c0120)}
.cat3::before{background:linear-gradient(150deg,#b65a8e,#6a0746)}
.cat4::before{background:linear-gradient(150deg,#017878,#014a4a)}
.cat .cn{font-family:'Cormorant Garamond',serif;font-size:27px;line-height:1.05}
.cat .cc{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.82;margin-top:6px;display:flex;align-items:center;gap:8px}
.cat .cc::after{content:"→";transition:transform .3s}
.cat:hover .cc::after{transform:translateX(5px)}

/* ---------- product grid + card ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{background:transparent}
.card .ph{position:relative;aspect-ratio:247/300;border-radius:12px;overflow:hidden;background:var(--cream-2);margin-bottom:18px}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.06)}
.tag{position:absolute;top:13px;left:13px;background:var(--wine);color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:30px;font-weight:500;z-index:2}
.tag.sale{background:var(--teal)}
.tag.out{background:rgba(35,18,28,.72);backdrop-filter:blur(4px)}
.card.is-out .ph img{filter:grayscale(.55);opacity:.72}
.card.is-out:hover .ph img{filter:grayscale(.25);opacity:.85}
.card.is-out .pr .now{color:var(--muted)}
.quick{position:absolute;left:13px;right:13px;bottom:13px;background:rgba(250,244,240,.94);backdrop-filter:blur(6px);color:var(--ink);text-align:center;padding:13px;border-radius:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:0;transform:translateY(12px);transition:all .4s;z-index:2}
.card:hover .quick{opacity:1;transform:translateY(0)}
.quick:hover{background:var(--wine);color:#fff}
.card .cat-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.card .nm{font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1.18;color:var(--ink);min-height:48px;display:block}
.card .pr{margin-top:10px;display:flex;align-items:baseline;gap:9px}
/* Картата на продукт без цена пази мястото на цената, за да не подскачат редовете. */
.card .pr:empty{height:18px}
.card .pr .now{font-size:18px;font-weight:500;color:var(--wine)}
.card .pr .old{font-size:14px;color:var(--muted);text-decoration:line-through}

/* ---------- продуктов ред с превъртане настрани ---------- */
/* Началната страница показва по десет-дванадесет продукта на ред, без да става
   безкрайно дълга. Това е обикновено превъртане настрани, не библиотека: работи
   и без JavaScript — с пръст на телефон и с клавиатура на компютър, — а
   стрелките само добавят удобство върху него.

   Редът излиза до ръба на екрана (отрицателно поле, върнато като padding),
   защото карта, отрязана точно на ръба, се чете като „има още“, докато карта,
   спряла на полето на секцията, изглежда като край на списъка. Процентите в
   grid-auto-columns се смятат спрямо съдържанието без padding-а, така че първата
   карта пак съвпада с ръба на заглавието отгоре. */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*26px)/4);gap:26px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  margin-inline:-32px;padding-inline:32px;scroll-padding-inline:32px;
  /* Място за сянката/фокус-рамката на последния ред карти. */
  padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>.card{scroll-snap-align:start}
.rail:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
.rail-sec{padding-top:0;padding-bottom:52px}
.hd-tools{display:flex;align-items:center;gap:20px}
.rail-nav{display:flex;gap:8px}
/* display:flex по-горе побеждава вградената в браузъра поддръжка на hidden,
   затова тя се изписва изрично: иначе стрелките биха се виждали и преди скриптът
   да ги поеме, и на ред, който няма какво да превърта. */
.rail-nav[hidden]{display:none}
/* 44 px е долната граница за уверено натискане с пръст — същата мярка като на
   останалите бутони в магазина. */
.rail-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--wine);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,opacity .3s}
.rail-arrow:hover:not([disabled]){background:var(--wine);color:#fff;border-color:var(--wine)}
.rail-arrow[disabled]{opacity:.28;cursor:default}
/* Заглавие на подсекция: пет заглавия по 54 px едно под друго превръщат
   страницата в списък от заглавия. Редовете на категориите стоят с по-дребно,
   а голямото остава за „Категории“ и „Подбрано за теб“. */
.sec-head.sub{margin-bottom:26px}
.sec-head.sub h2{font-size:clamp(25px,2.6vw,34px)}
.sec-head.sub .k{margin-bottom:9px}

/* ---------- витрина ---------- */
/* Голяма снимка и четири карти до нея. Ползва се за двете най-големи категории,
   за да не са всички секции на началната страница една и съща фигура. Снимката е
   малко по-широка от решетката (1.05fr), защото четирите карти носят и имена, и
   цени под себе си — при равни колони решетката тежи повече и блокът увисва
   надясно. */
.spot{padding-top:0;padding-bottom:52px}
/* Витрините и редовете нямат отстъп отгоре: над тях винаги стои друга секция със
   свой отстъп отдолу. Редакционната лента е изключение — тя свършва с ръба на
   тъмния си фон и следващото заглавие се залепва за него. */
.editorial + .sec{padding-top:56px}
/* stretch, а не center: четирите карти носят и име, и цена под снимката, затова
   решетката е по-висока от кадър 4:5. Центрирана, голямата снимка увисва в средата
   с празно поле отгоре и отдолу и блокът изглежда недовършен — опъната до височината
   на решетката, двете страни са едно цяло. Затова и съотношението тук отпада: то
   остава само за телефона, където снимката сама определя височината си. */
.spot-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:stretch}
.spot-fig{position:relative;display:block;min-height:520px;border-radius:14px;overflow:hidden;background:rgba(132,2,89,.05)}
.spot-fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.spot-fig:hover img{transform:scale(1.06)}
.spot-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* Огледалният блок: снимката минава вдясно. Само `order`, за да остане в HTML-а
   първа — тя е и връзката към продукта, и първото, което се чете на телефон. */
.spot.mirror .spot-fig{order:2}

/* ---------- editorial banner ---------- */
.editorial{background:var(--wine-deep);color:#f7e7f0;position:relative;overflow:hidden}
.editorial::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(199,168,120,.22),transparent 65%);top:-180px;right:-120px}
.editorial-in{max-width:1280px;margin:0 auto;padding:96px 32px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative}
.editorial .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);margin-bottom:22px;display:block}
.editorial h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(36px,4.4vw,58px);line-height:1.04}
.editorial h2 em{font-style:italic;color:#f1b9d8}
.editorial p{margin:26px 0 36px;color:#e6c6da;line-height:1.8;font-weight:300;max-width:440px}
.ed-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(26px,3vw,40px);line-height:1.3;color:#fff}
.ed-quote .by{display:block;font-style:normal;font-family:'Jost';font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);margin-top:26px}

/* ---------- brands ---------- */
.brands{border-top:1px solid var(--line)}
.brands-in{max-width:1280px;margin:0 auto;padding:54px 32px;text-align:center}
.brands .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:30px;display:block}
.brand-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.brand{font-family:'Cormorant Garamond',serif;font-size:23px;color:#6a5560;padding:10px 26px;border:1px solid var(--line);border-radius:40px;transition:all .3s;cursor:pointer}
.brand:hover{color:var(--wine);border-color:var(--wine);transform:translateY(-2px)}

/* ---------- breadcrumb ---------- */
.crumb{max-width:1280px;margin:0 auto;padding:26px 32px 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumb a{display:inline-block;padding:7px 0}
.crumb a:hover{color:var(--wine)}
.crumb .sep{color:var(--line)}
.crumb .cur{color:var(--wine)}

/* ---------- category listing ---------- */
.listing{max-width:1280px;margin:0 auto;padding:10px 32px 40px;display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
/* Витрина без филтри (една марка, една цена) няма лява колона — иначе решетката
   би се събрала в тесните 240px, определени за панела. */
.listing.bare{grid-template-columns:1fr}
.filters{position:sticky;top:108px;border:1px solid var(--line);border-radius:14px;padding:24px;background:rgba(255,255,255,.4)}
/* Бутонът стои само на тесен екран — отстрани панелът не пречи на нищо и не
   бива да се отваря с второ докосване. */
.filters-toggle{display:none}
.filters h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:18px 0 12px}
.filters h4:first-child{margin-top:0}
/* Отметките бяха с размера по подразбиране на браузъра — около 13 px, при това
   долепени един под друг: пръстът често улучваше съседния ред. Сега самото
   квадратче е по-едро, а целият ред е висок колкото едно докосване. */
.filters label{display:flex;align-items:center;gap:11px;font-size:14px;color:#5f4b55;padding:8px 0;min-height:44px;cursor:pointer}
.filters input{accent-color:var(--wine)}
.filters input[type=radio],.filters input[type=checkbox]{width:20px;height:20px;flex:none;margin:0}
.filters label:hover{color:var(--wine)}
/* Броячът се лепи вдясно и е приглушен — числото е справка, не етикет. */
.filters .cnt{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
/* В „Всички продукти“ категориите не са филтър, а изходи към отделните витрини:
   стоят като редове без квадратче, за да не се четат като нещо за отмятане. */
.filters .cat-links{list-style:none}
.filters .cat-links li{display:flex;align-items:center;gap:9px;font-size:14px;padding:5px 0}
.filters .cat-links a{color:#5f4b55;transition:color .3s}
.filters .cat-links li:hover a{color:var(--wine)}
/* „Изчисти“ е поправка на избора, а не действие, което подканваме да се направи.
   Капсулите на сайта са запазени за „Купи“ и „Количка“, затова тук е тих надпис
   под косъм-линия — със същата дребна разредена главна буква като заглавията на
   групите. Кръгчето с ✕ е единственото цветно петно и се запълва при посочване. */
.filters .clear{display:flex;align-items:center;gap:9px;width:100%;margin-top:22px;padding:16px 0 2px;border:0;border-top:1px solid var(--line);background:none;font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .3s}
/* display:flex е по-специфично от [hidden] в стиловете на браузъра — без този ред
   бутонът щеше да се вижда и когато няма активен филтър. */
.filters .clear[hidden]{display:none}
.filters .clear i{flex:none;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px;line-height:1;color:var(--wine);transition:background .3s,border-color .3s,color .3s}
.filters .clear:hover{color:var(--wine)}
.filters .clear:hover i{background:var(--wine);border-color:var(--wine);color:#fff}
.filters .clear:focus-visible{outline:none;color:var(--wine)}
.filters .clear:focus-visible i{border-color:var(--wine);box-shadow:0 0 0 3px var(--blush)}
/* Двете полета за цена делят реда поравно, с тире помежду им. Числата са с
   еднакво широки цифри, за да не подскача полето при въвеждане. */
.price-range{display:flex;align-items:center;gap:9px;margin-top:4px}
.price-range input{width:100%;min-width:0;font-family:'Jost';font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;transition:border-color .25s;font-variant-numeric:lining-nums tabular-nums}
.price-range input:focus{outline:none;border-color:var(--wine)}
.price-range input::placeholder{color:var(--muted);opacity:.8}
.price-range .dash{color:var(--muted);flex:none}
/* Скритите от филтъра карти изчезват и от подредбата на решетката. */
.card[hidden]{display:none}
/* Дългите категории (най-голямата е 523 продукта, решетка висока 57 000 px)
   натоварваха телефона: една подредба на цялата решетка отнема 123 ms на
   настолен процесор, тоест около половин секунда на телефон — и се плаща
   наново при всеки филтър, всяка подредба и всяко превъртане.
   content-visibility кара браузъра да сглобява само картите близо до екрана и
   да отлага останалите, докато се приближат. Същото измерване: 123 ms → 18 ms.
   Важното е, че НИЩО не се скрива — всеки продукт си остава обикновена връзка в
   страницата, видима за търсачките, и се стига до него с обикновено превъртане.
   contain-intrinsic-height дава предполагаема височина, докато една карта още не
   е сглобявана, за да не подскача лентата за превъртане; „auto“ казва на
   браузъра да запомни истинската височина, щом веднъж я измери. Стойността е
   различна за всяка ширина, защото решетката е 4 колони до филтрите и 2 без тях.
   Нарочно е само височината: ако се зададе и ширина, тя става най-малката
   допустима ширина на колоната и решетката се разпъва встрани.
   Правилото е само за списъка на категорията — по другите страници решетките са
   от няколко карти и там няма какво да се спести. */
.listing .grid .card{content-visibility:auto;contain-intrinsic-height:auto 380px}
.listing-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.listing-head h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,4vw,46px);color:var(--ink)}
.listing-head .count{font-size:13px;color:var(--muted)}
.lh-tools{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
/* Менюто за подредба е тихо — дребна разредена главна буква като заглавията на
   групите с филтри, и косъм-линия отдолу вместо рамка на кутия. */
.sortbox{display:flex;align-items:baseline;gap:10px}
.sortbox>span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sortbox select{font-family:'Jost';font-size:13.5px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:11px 22px 11px 2px;cursor:pointer;transition:border-color .25s,color .25s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a7681' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center}
.sortbox select:hover{color:var(--wine);border-color:var(--wine)}
.sortbox select:focus-visible{outline:none;border-color:var(--wine)}
.empty{padding:80px 0;text-align:center;color:var(--muted);font-size:16px}
.empty a{display:inline-block;padding:10px 4px;color:var(--wine)}

/* ---------- product detail ---------- */
.pdp{max-width:1280px;margin:0 auto;padding:24px 32px 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.gallery{display:grid;grid-template-columns:84px 1fr;gap:18px;position:sticky;top:108px}
/* Продукт с една снимка няма ред с малки изображения — снимката заема цялата
   ширина, вместо да остава празна колона отстрани. */
.gallery.solo{grid-template-columns:1fr}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumbs button{border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:var(--cream-2);padding:0;aspect-ratio:247/296;transition:border-color .3s,transform .3s}
.thumbs button.active{border-color:var(--wine)}
.thumbs button:hover{transform:translateY(-2px)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.stage{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,var(--cream-2),var(--blush));aspect-ratio:247/300}
.stage img{width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.disc{position:absolute;top:18px;left:18px;background:var(--teal);color:#fff;font-size:12px;letter-spacing:.1em;padding:9px 14px;border-radius:30px;font-weight:500;z-index:2}
.wish{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(250,244,240,.92);backdrop-filter:blur(6px);border:none;cursor:pointer;display:grid;place-items:center;color:var(--wine);z-index:2;transition:transform .3s,background .3s}
.wish:hover{transform:scale(1.08);background:#fff}
.wish.on{background:var(--wine);color:#fff}
.brand-eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--teal);font-weight:500;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand-eyebrow::before{content:"";width:34px;height:1px;background:var(--teal)}
.ptitle{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,4.2vw,52px);line-height:1.04;color:var(--ink)}
.rate{display:flex;align-items:center;gap:12px;margin:18px 0 22px;font-size:13px;color:var(--muted)}
.stock{display:inline-flex;align-items:center;gap:7px;color:var(--teal)}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(0,128,128,.18)}
.stock.out{color:var(--muted)}
.stock.out::before{background:var(--muted);box-shadow:0 0 0 3px rgba(138,118,129,.18)}
.price{display:flex;align-items:baseline;gap:14px;margin:6px 0 4px}
.price .now{font-family:'Cormorant Garamond',serif;font-size:42px;color:var(--wine);font-weight:600;line-height:1}
.price .old{font-size:20px;color:var(--muted);text-decoration:line-through}
/* Продукт без цена: изречение, а не сума — затова и не носи вида на цена. */
.price .now.na{font-family:'Jost',sans-serif;font-size:19px;font-weight:400;color:var(--muted);letter-spacing:.03em}
.save{font-size:12.5px;color:var(--teal);letter-spacing:.04em;margin-bottom:26px}
.pdesc{color:#6f5862;line-height:1.8;font-weight:300;font-size:15.5px;max-width:480px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.pdesc p{margin:0}
.pdesc .more{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:400;color:inherit;text-decoration:underline;text-underline-offset:3px}
.details{scroll-margin-top:90px}

/* Rich text kept from the WooCommerce descriptions. The global reset strips list
   markers and indentation, so they are restored here rather than globally. */
.rt p,.rt ul,.rt ol{margin-bottom:13px}
.rt ul,.rt ol{padding-left:21px}
.rt ul{list-style:disc}
.rt ol{list-style:decimal}
.rt li{margin-bottom:6px}
.rt li::marker{color:var(--wine-soft)}
.rt strong,.rt b{font-weight:500;color:var(--ink)}
/* Подзаглавия — идват само от редактора в панела, във вноса от WooCommerce ги
   няма. Без тези правила излизат като най-обикновен ред текст. */
.rt h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--ink);line-height:1.25;margin:22px 0 9px}
.rt h4{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:20px 0 8px}
.rt>h3:first-child,.rt>h4:first-child{margin-top:0}
.rt hr{border:none;border-top:1px solid var(--line);margin:18px 0}
/* Таблици с размери (размер / ръст / обиколка). */
.rt table{width:100%;border-collapse:collapse;margin-bottom:13px;font-size:14px;line-height:1.5}
.rt th,.rt td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.rt th{font-weight:500;color:var(--ink);background:var(--cream-2)}
.rt>*:last-child{margin-bottom:0}
.opt{margin-top:28px}
.opt .lab{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;display:flex;justify-content:space-between}
.opt .lab a{color:var(--wine);border-bottom:1px solid var(--line);font-size:11px;padding:8px 0 3px;margin:-8px 0 -3px}
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{min-width:66px;padding:13px 18px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;font-family:'Jost';font-size:14px;letter-spacing:.06em;color:var(--ink);transition:all .25s}
.chip:hover{border-color:var(--wine-soft)}
.chip.sel{background:var(--wine);color:#fff;border-color:var(--wine)}
.chip:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
/* Височина за пръст, не за показалец: и двата бутона тук нямаха своя височина —
   заемаха толкова, колкото буквите вътре, тоест около 26 px. Пръстът покрива
   близо сантиметър, затова редът за поръчка е 54 px висок. */
.buyrow{display:flex;gap:14px;margin-top:30px;align-items:stretch;min-height:54px}
.stepper{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:40px;overflow:hidden}
.stepper button{width:54px;background:transparent;border:none;font-size:22px;cursor:pointer;color:var(--ink);transition:background .2s}
.stepper button:hover{background:var(--blush)}
.stepper input{width:48px;text-align:center;border:none;background:transparent;font-family:'Jost';font-size:16px;color:var(--ink)}
.add{flex:1;background:var(--wine);color:#fff;border:none;border-radius:40px;cursor:pointer;font-family:'Jost';font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:0 30px;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:12px}
.add:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(132,2,89,.6)}
.add:disabled{background:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}
.assure{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.assure .a{display:flex;gap:12px;align-items:center;font-size:13px;color:#5f4b55}
.assure .a svg{color:var(--wine);flex:none}
.meta{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:2}
.meta b{color:var(--ink);font-weight:500}
/* Марката и категорията водят към своите витрини — подчертани тънко, за да се
   четат като продължение на реда, а не като бутон. */
.meta a{color:#5f4b55;border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.meta a:hover{color:var(--wine);border-color:var(--wine)}
/* The second track is `auto`, not a fixed width: while the browsing history is
   empty the aside stays [hidden] (display:none), the track collapses to 0 and
   the accordions keep the full width they had before the sidebar existed. */
.details{max-width:1280px;margin:0 auto;padding:20px 32px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 56px;align-items:start}
.acc{border-top:1px solid var(--line)}
.acc h3{margin:0}
.acc button{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;align-items:center;font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--ink)}
.acc .ico{font-size:24px;color:var(--wine);transition:transform .3s}
.acc.open .ico{transform:rotate(45deg)}
/* The open/closed animation runs on a grid row, not on max-height. max-height needs
   a fixed number to animate towards, and 1400px clipped the longest description at
   320px (it needs 1469px) — with the section now open by default the customer could
   not click to reveal the rest, so the tail was simply unreachable. A 0fr → 1fr row
   animates the same way and always resolves to the text's own height. */
.acc .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.acc.open .body{grid-template-rows:1fr}
/* .pad carries no spacing of its own. The closed row can only reach 0 if its item
   has nothing that must be laid out — bottom padding on this element would size the
   row to 26px and leave a gap under every closed section, so the padding sits one
   level deeper, on the text, where overflow:hidden clips it away. */
.acc .body>.pad{overflow:hidden;min-height:0}
.acc .body p{color:#6f5862;line-height:1.9;font-weight:300;padding-bottom:26px;max-width:760px}
.acc .body .rt{color:#6f5862;line-height:1.9;font-weight:300;padding-bottom:26px;max-width:760px}
.acc .body .rt p{padding-bottom:0}

/* Последно разглеждани — попълва се от localStorage, вж. скрипта на продуктовата
   страница. Панелът е [hidden] докато няма история. */
.recent{width:300px;padding-top:26px}
.recent>h3{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500;line-height:1.15;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
.recent>h3::after{content:"";display:block;width:40px;height:2px;background:var(--wine-soft);margin:18px 0 22px}
.rc-list{display:flex;flex-direction:column;gap:20px}
.rc-item{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start}
.rc-ph{aspect-ratio:247/300;border-radius:8px;overflow:hidden;background:var(--cream-2)}
.rc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rc-item:hover .rc-ph img{transform:scale(1.06)}
.rc-nm{display:block;font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.25;color:var(--ink);transition:color .3s}
.rc-item:hover .rc-nm{color:var(--wine)}
.rc-pr{display:block;margin-top:8px;line-height:1.7}
.rc-pr i{font-style:normal;font-size:12.5px;color:var(--muted);margin-right:7px}
.rc-pr s{font-size:12.5px;color:var(--muted);margin-right:7px}
.rc-pr b{font-size:16px;font-weight:500;color:var(--wine)}

/* ---------- cart + checkout ---------- */
.page{max-width:1100px;margin:0 auto;padding:40px 32px 80px}
.page h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(32px,4vw,48px);color:var(--ink);margin-bottom:30px}
.cart-grid{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.cart-lines{display:flex;flex-direction:column;gap:16px}
.line{display:grid;grid-template-columns:90px 1fr auto;gap:18px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.5)}
.line img{width:90px;height:108px;object-fit:cover;border-radius:10px;background:var(--cream-2)}
.line .ln{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ink);line-height:1.2}
.line .lv{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.line .lp{color:var(--wine);font-weight:500;margin-top:8px}
.line .rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:4px;padding:10px 0;transition:color .25s}
.line .rm:hover{color:var(--wine)}
.summary{border:1px solid var(--line);border-radius:16px;padding:28px;background:rgba(255,255,255,.6);position:sticky;top:108px}
.summary h3{font-family:'Cormorant Garamond',serif;font-size:24px;margin-bottom:20px}
/* Сумите се редят една под друга — с еднакво широки цифри се подравняват в колона. */
.line .lp,.summary .row,.drawer-foot{font-variant-numeric:lining-nums tabular-nums}
.summary .row{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;color:#5f4b55}
.summary .row.tot{border-top:1px solid var(--line);margin-top:10px;padding-top:18px;font-size:18px;color:var(--ink);font-weight:500}
.summary .btn{width:100%;margin-top:22px}
.summary .note{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.6}
.form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
/* 16px, не по-малко: под този размер телефонът приема, че текстът е нечетим,
   увеличава екрана при докосване на полето и не го връща обратно — клиентът
   довършва поръчката в увеличен изглед, в който не вижда цялата форма. */
.field input,.field textarea{font-family:'Jost';font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 16px;transition:border-color .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--wine)}
.field.err input{border-color:#c0392b}
.field .msg{font-size:12px;color:#c0392b;display:none}
.field.err .msg{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field[hidden]{display:none}
/* Изборът на доставка. Целият ред е бутон, а не само кръгчето: цената и
   обяснението стоят в него, а на телефон се уцелва с пръст. */
.ship-pick{display:grid;gap:10px}
.ship-pick .lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:-2px}
.ship-opt{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:15px 17px;cursor:pointer;transition:border-color .25s,background .25s}
.ship-opt:hover{border-color:var(--wine-soft)}
.ship-opt:has(input:checked){border-color:var(--wine);background:var(--blush)}
.ship-opt input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--wine)}
.ship-opt .t{flex:1;display:flex;flex-direction:column;gap:3px;font-size:15px;color:var(--ink)}
.ship-opt .t small{font-size:12.5px;color:var(--muted);line-height:1.5}
.ship-opt .p{font-size:15px;color:var(--wine);white-space:nowrap}
.ship-note{font-size:12px;color:var(--muted);margin:-6px 0 2px;text-align:right}
.cod-note{display:flex;gap:12px;align-items:center;background:var(--blush);border-radius:12px;padding:16px;font-size:14px;color:var(--wine-deep)}
.thanks{text-align:center;padding:60px 20px}
.thanks .ref{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--wine);margin:14px 0}

/* ---------- търсене ---------- */
.search-bg{position:fixed;inset:0;background:rgba(40,3,28,.4);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:210}
.search-bg.open{opacity:1;pointer-events:auto}
/* Кутията пада отгоре, там където е и бутонът, от който се отваря. */
.search-box{position:fixed;top:0;left:50%;transform:translate(-50%,-14px);width:min(680px,calc(100% - 32px));max-height:min(80vh,720px);background:var(--cream);border-radius:0 0 18px 18px;box-shadow:0 30px 70px -24px rgba(40,3,28,.55);z-index:211;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.search-box.open{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.search-head{display:flex;align-items:center;gap:14px;padding:22px 24px;border-bottom:1px solid var(--line)}
.search-head svg{width:20px;height:20px;flex:none;color:var(--wine);stroke-width:1.6}
.search-head input{flex:1;min-width:0;height:44px;font-family:'Jost';font-size:17px;color:var(--ink);background:none;border:none;padding:0}
.search-head input:focus{outline:none}
/* Браузърът рисува свой кръстен бутон в полето от тип search — той застава до
   нашия и се получават два кръста един до друг. */
.search-head input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-head input::placeholder{color:var(--muted)}
.search-head button{background:none;border:none;cursor:pointer;font-size:24px;line-height:1;color:var(--muted);width:44px;height:44px;margin:-10px -10px -10px 0;display:grid;place-items:center;transition:color .25s}
.search-head button:hover{color:var(--wine)}
.search-meta{padding:14px 24px 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.search-meta:empty{display:none}
.search-results{overflow-y:auto;padding:10px 24px 24px;display:flex;flex-direction:column}
.sr{display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sr:last-child{border-bottom:0}
.sr img{width:58px;height:70px;object-fit:cover;border-radius:8px;background:var(--cream-2)}
.sr-b{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.sr-n{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.2;color:var(--ink);margin-top:3px;transition:color .25s}
.sr:hover .sr-n{color:var(--wine)}
.sr-p{margin-top:5px;font-size:15px;font-weight:500;color:var(--wine);font-variant-numeric:lining-nums tabular-nums}
.sr-p i{font-style:normal;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.04em}
.sr.is-out img{filter:grayscale(.55);opacity:.72}
.sr.is-out .sr-p{color:var(--muted)}
.search-empty{padding:38px 0;text-align:center;color:var(--muted);font-size:15px}

/* ---------- „За нас“ и „Контакти“ ---------- */
/* Надредът над заглавието на страница. Същият вид, който имат надредите в
   секциите на началната страница, но там правилото е вързано за .sec-head. */
.eyebrow-k{display:block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:14px}
.prose{max-width:680px}
.prose p{color:#6f5862;line-height:1.9;font-weight:300;font-size:16.5px;margin-bottom:20px}
/* Правен текст: дълъг, четен рядко и на части. Малко по-широк и по-плътен от
   разказните страници, за да не се разтяга на десетки екрана. */
.prose.legal{max-width:780px}
.prose.legal p{font-size:15.5px;line-height:1.85;margin-bottom:17px}
.prose p:last-child{margin-bottom:0}
.cinfo{margin-bottom:20px;font-size:14.5px;line-height:1.7;color:#5f4b55;display:flex;flex-direction:column}
.cinfo b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:6px}
.cinfo a{color:var(--wine);border-bottom:1px solid var(--line);align-self:flex-start;transition:border-color .25s}
.cinfo a:hover{border-color:var(--wine)}
/* Отметката за съгласие е част от полето, а не отделен ред, за да получи същото
   червено съобщение при грешка като останалите задължителни полета. */
.field label.consent{display:flex;align-items:flex-start;gap:11px;text-transform:none;letter-spacing:0;font-size:14px;line-height:1.6;color:#5f4b55;cursor:pointer}
.consent input{accent-color:var(--wine);flex:none;margin-top:3px;width:17px;height:17px}
/* Отговорът след изпращане. Зелено при успех, червено при отказ — включително
   когато сървърът още не е готов да приема запитвания. */
.form-status{border-radius:12px;padding:15px 17px;font-size:14.5px;line-height:1.65}
.form-status[hidden]{display:none}
.form-status.ok{background:rgba(0,128,128,.1);color:var(--teal-deep)}
.form-status.err{background:rgba(192,57,43,.09);color:#a33224}

/* ---------- клиентски профил ---------- */
/* Иконката в лентата стои до кошницата и на всяка страница. Името до нея се
   изписва само за влязъл човек (app.js го попълва) — празният елемент не заема
   място, така че за всички останали лентата изглежда както досега. */
.acct-link{gap:7px;font-size:13px;letter-spacing:.02em}
.acct-link svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.acct-link [data-acct-name]{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Любими: сърцето в горната лента с брояч, и страницата със списъка. */
.wish-link{position:relative}
.wish-link svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.wish-n{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--wine);color:#fff;font-size:10px;line-height:17px;text-align:center}
.wish svg{width:20px;height:20px}
.wish.on svg{fill:currentColor}
.wish-item{position:relative}
.wish-item .wish{top:10px;right:10px;width:38px;height:38px}
.wish-page h1{margin-bottom:26px}
.wish-note{margin-top:34px;font-size:13px;color:var(--muted)}
/* Вход, регистрация и забравена парола не са страница за четене: тясната колона
   държи полетата на едно място пред очите. */
.acct-gate{max-width:460px}
.acct-gate h1{margin-bottom:22px}
.acct-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:28px}
.acct-tabs[hidden]{display:none}
.acct-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 0 12px;font-family:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .25s,border-color .25s}
.acct-tab:hover{color:var(--wine)}
.acct-tab.is-on{color:var(--wine);border-color:var(--wine)}
.acct-form[hidden]{display:none}
.acct-hint{font-size:13.5px;line-height:1.7;color:#6f5862}
.acct-alt{font-size:13.5px}
.acct-alt a{color:var(--wine);border-bottom:1px solid var(--line);transition:border-color .25s}
.acct-alt a:hover{border-color:var(--wine)}
/* Съобщението над екрана — потвърден имейл, излизане, изтекла връзка. Има и
   трети вид освен „ok“ и „err“: докато чакаме отговор, надписът е неутрален,
   защото още не се знае кое от двете ще е. */
.acct-note{margin-bottom:26px;background:var(--cream-2);color:#5f4b55}
.acct-in h1{margin-bottom:30px}
.acct-cols{display:grid;grid-template-columns:1fr 330px;gap:52px;align-items:start}
.acct-h{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;color:var(--ink);margin-bottom:18px}
.acct-side .acct-h{margin-top:38px}
.acct-side .acct-h:first-child{margin-top:0}
.acct-side .form{margin-bottom:6px}
/* Поръчката е една карта: номер и дата отгоре, редовете под тях, общата сума
   най-долу — същата подредба, която клиентът е получил и в писмото си. */
.acct-orders .ord{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px;background:#fff}
.ord-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ord-h .ref{font-size:14px;letter-spacing:.08em;color:var(--ink);font-weight:500}
.ord-h .muted{font-size:13px;color:var(--muted)}
.ord-st{margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);background:rgba(0,128,128,.1);border-radius:30px;padding:5px 12px}
.acct-orders .it{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:#5f4b55}
.acct-orders .it .v{font-size:12.5px;color:var(--muted);margin-top:3px}
.acct-orders .it .amt{white-space:nowrap}
.acct-orders .tot{display:flex;justify-content:space-between;gap:18px;padding-top:14px;font-size:15px;color:var(--ink);font-weight:500}
.acct-orders .muted{color:var(--muted);font-size:14.5px}
.acct-orders .muted a{color:var(--wine);border-bottom:1px solid var(--line)}

/* ---------- блог ---------- */
/* Списъкът с статии е по-широк от продуктовата решетка: снимките са пейзажни и
   под тях стои текст, а не цена, затова три в ред четат по-добре от четири. */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;margin-top:44px}
.post-card .ph{display:block;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--cream-2);margin-bottom:18px}
.post-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.post-card:hover .ph img{transform:scale(1.05)}
.post-card time{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.post-card .ttl{display:block;font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.2;color:var(--ink);margin:8px 0 10px;transition:color .3s}
.post-card:hover .ttl{color:var(--wine)}
.post-card p{color:#6f5862;font-size:14.5px;line-height:1.75;font-weight:300}
.post-card .more{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .25s}
.post-card:hover .more{border-color:var(--wine)}

/* Самата статия е тясна колона — дълъг текст се чете на около 70 знака на ред. */
.post{max-width:760px;margin:0 auto;padding:30px 32px 60px}
.post-head{text-align:center;margin-bottom:34px}
.post-head time{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.post-head h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,4vw,48px);line-height:1.1;color:var(--ink);margin-top:12px}
.post-cover{border-radius:14px;overflow:hidden;margin-bottom:40px;background:var(--cream-2)}
.post-cover img{width:100%;height:auto;display:block}
/* Тялото идва от старите статии и носи произволен HTML — затова стиловете тук
   се пишат за самите етикети, а не за класове, каквито в текста няма. */
.post-body{color:#5f4b55;font-size:16.5px;line-height:1.9;font-weight:300}
.post-body p{margin-bottom:22px}
.post-body h2,.post-body h3,.post-body h4{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--ink);line-height:1.2;margin:40px 0 16px}
.post-body h2{font-size:30px}
.post-body h3{font-size:25px}
.post-body h4{font-size:21px}
.post-body a{color:var(--wine);border-bottom:1px solid var(--line);transition:border-color .25s}
.post-body a:hover{border-color:var(--wine)}
.post-body strong,.post-body b{font-weight:500;color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 22px 22px}
.post-body li{margin-bottom:10px}
.post-body img{max-width:100%;height:auto;border-radius:12px;display:block;margin:8px auto}
.post-body figure{margin-bottom:26px}
.post-body figcaption{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}
.post-body blockquote{border-left:2px solid var(--wine);padding-left:22px;margin:0 0 24px;font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;color:var(--ink);line-height:1.5}
.post-body hr{border:none;border-top:1px solid var(--line);margin:34px 0}

/* ---------- бюлетин ---------- */
/* Лентата стои между съдържанието и долния край — на по-светъл фон от него, за
   да се чете като покана, а не като част от служебните връзки отдолу. */
.news{background:var(--cream-2);border-top:1px solid var(--line)}
.news-in{max-width:1280px;margin:0 auto;padding:56px 32px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.news .k{display:block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:12px}
.news h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(24px,2.6vw,34px);line-height:1.15;color:var(--ink)}
.news p{color:#6f5862;font-size:14.5px;line-height:1.75;font-weight:300;margin-top:10px;max-width:420px}
.news-form{display:grid;grid-template-columns:1fr auto;gap:12px}
.news-form input{font-family:'Jost',sans-serif;font-size:15px;padding:16px 20px;border:1px solid var(--line);border-radius:40px;background:#fff;color:var(--ink);outline:none;transition:border-color .25s}
.news-form input:focus{border-color:var(--wine)}
.news-form button{white-space:nowrap}
.news-note,.news-status{grid-column:1/-1;margin-top:0}
.news-note{font-size:12.5px;color:var(--muted);line-height:1.6}
.news-status{border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.6}
.news-status[hidden]{display:none}
.news-status.ok{background:rgba(0,128,128,.1);color:var(--teal-deep)}
.news-status.err{background:rgba(192,57,43,.09);color:#a33224}

/* ---------- footer ---------- */
footer{background:var(--wine);color:#f4d8e7}
/* Facebook е единственият социален канал на магазина, затова е един ред с име,
   а не редица от еднакви кръгчета без надпис. */
.social{display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding-top:10px;color:#fff;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:4px;transition:border-color .25s,opacity .25s}
.social svg{width:18px;height:18px;flex:none}
.social:hover{border-color:#fff;opacity:.9}
.foot-in{max-width:1280px;margin:0 auto;padding:76px 32px 0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
.foot .fmark{font-family:'Cormorant Garamond',serif;font-size:32px;color:#fff;font-weight:600}
.foot .fmark small{display:block;font-family:'Jost';font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:#f1b9d8;margin-top:4px}
.foot p.desc{margin-top:20px;color:#e9bdd4;line-height:1.8;font-weight:300;font-size:14px;max-width:300px}
.foot h4{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:22px;font-weight:500}
.foot ul{list-style:none}
/* Разстоянието между връзките беше 13 px, а самите редове високи 20 — две
   съседни връзки се падаха в един пръст. Мястото за докосване е в самата връзка
   (а не между тях), затова редът остава на око същият, но се улучва. */
.foot ul li{margin-bottom:0}
.foot ul a{display:inline-block;padding:12px 0;color:#eec1d8;font-size:14px;transition:color .25s,padding .25s}
.foot ul a:hover{color:#fff;padding-left:5px}
.foot .contact b{color:#fff;font-weight:500}
.foot .contact div{margin-bottom:12px;font-size:14px;color:#eec1d8;line-height:1.6}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:64px}
.foot-bottom-in{max-width:1280px;margin:0 auto;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;letter-spacing:.05em;color:#e9bdd4}
.pay{display:flex;gap:8px;align-items:center}
.pay span{background:rgba(255,255,255,.12);padding:5px 12px;border-radius:6px;font-size:11px;letter-spacing:.1em}
/* Подписът на екипа стои до плащането, а не в реда с фирмените данни: там човек
   чете кой продава, не кой е направил магазина. */
.pay .by{color:#e9bdd4;opacity:.72;text-decoration:none;font-size:11px;letter-spacing:.1em;padding:5px 4px}
.pay .by:hover{opacity:1;text-decoration:underline}

/* reveal animation */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* mini-cart drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(40,3,28,.4);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .35s;z-index:200}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:380px;max-width:90vw;background:var(--cream);box-shadow:-20px 0 60px -20px rgba(40,3,28,.5);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:201;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:'Cormorant Garamond',serif;font-size:24px}
.drawer-head button{background:none;border:none;cursor:pointer;color:var(--ink);font-size:24px;width:44px;height:44px;margin:-10px -10px -10px 0;display:grid;place-items:center;line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.drawer-foot{padding:24px;border-top:1px solid var(--line)}
/* редът със сумата в изскачащата количка — дума вляво, число вдясно, както е
   и в кошницата; иначе двете се долепват и се чете „Общо11 €“. */
.drawer-foot .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px;color:var(--ink);font-weight:500}
.drawer-empty{color:var(--muted);text-align:center;padding:40px 0}

/* панел с категориите (телефон и таблет) — влиза отляво, откъдето е и бутонът,
   и стои над страницата, за да не измества прочетеното. Вътре са всички
   категории, затова панелът се превърта: подкатегориите са повече от екрана. */
.navpanel{position:fixed;top:0;left:0;height:100%;width:330px;max-width:86vw;background:var(--cream);box-shadow:20px 0 60px -20px rgba(40,3,28,.5);transform:translateX(-100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:201;display:flex;flex-direction:column}
.navpanel.open{transform:none}
.navpanel-body{flex:1;overflow-y:auto;padding:10px 24px 44px;-webkit-overflow-scrolling:touch}
.navlist{list-style:none}
.navlist>li>a{display:block;padding:14px 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);transition:color .25s}
.navlist>li>a:hover{color:var(--wine)}
.navlist ul{list-style:none;padding:8px 0 14px 16px}
.navlist ul a{display:block;padding:12px 0;font-size:14px;letter-spacing:.01em;color:var(--muted);transition:color .25s}
.navlist ul a:hover{color:var(--wine)}
.navlist-more{margin-top:26px}
.navlist-more>li>a{border-bottom:none;padding:12px 0;color:var(--wine)}

/* На по-тесен екран редът свършва преди имената на категориите, затова се
   стягат още веднъж — по-добре малко по-дребни букви, отколкото счупен ред. */
@media(max-width:1200px){
  .menu{gap:16px;font-size:11px;letter-spacing:.05em}
}
@media(max-width:1100px){
  .menu{gap:12px;font-size:10.5px;letter-spacing:0}
  /* Тук менюто вече е стегнато докрай, а редът пак не достига. Затова се смалява
     и останалото по лентата — името на магазина и бутонът на кошницата — вместо
     менюто да се качва върху кошницата. */
  .nav{padding:18px 18px;gap:14px}
  .logo .mark{font-size:30px}
  .logo .sub{font-size:9px;letter-spacing:.26em}
  .tools{gap:14px}
  .cart-pill{padding:9px 13px;font-size:11px;gap:7px;letter-spacing:.04em}
  /* Под 1100 px четири карти на ред стават твърде тесни за името и цената. */
  .rail{grid-auto-columns:calc((100% - 2*26px)/3)}
}
/* Последните двайсет пиксела преди телефонния изглед: тук и стегнатото меню вече
   се качва върху кошницата, затова редът се предава на бутона с категориите —
   там подкатегориите така или иначе са изписани. */
@media(max-width:1000px){
  .menu{display:none}
  .burger{display:flex}
}
@media(max-width:980px){
  .nav{grid-template-columns:auto 1fr auto;gap:16px}
  .menu{display:none}
  .burger{display:flex}
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-visual{max-width:440px;margin:0 auto;width:100%}
  .trust-in{grid-template-columns:1fr 1fr;gap:20px}
  .cats{grid-template-columns:1fr 1fr}
  .grid,.grid.g4,.posts{grid-template-columns:1fr 1fr}
  /* Витрината се изправя в една колона: голямата снимка отгоре, четирите карти
     под нея на две по две — същият ритъм като на решетките на категориите.
     Огледалният блок също връща снимката отгоре: под нея тя няма какво да
     огледала, а и водещата снимка трябва да се вижда преди превъртане. */
  .spot-in{grid-template-columns:1fr;gap:26px}
  .spot.mirror .spot-fig{order:0}
  /* min-height:0 задължително: съотношението пресмята ширината от височината,
     така че оставената от компютъра долна граница от 520 px разпъваше снимката до
     390 px — по-широка от колоната — и страницата тръгваше настрани. */
  .spot-fig{aspect-ratio:3/4;min-height:0}
  /* Оттук надолу редът се плъзга с пръст — стрелките отпадат, а на екрана стоят
     две цели карти и се подава трета, за да е ясно, че списъкът продължава. */
  .rail{grid-auto-columns:calc((100% - 26px)/2.25)}
  .rail-nav{display:none}
  .listing .grid .card{contain-intrinsic-height:auto 530px}
  .editorial-in{grid-template-columns:1fr;gap:34px}
  .foot-in{grid-template-columns:1fr 1fr;gap:34px}
  .news-in{grid-template-columns:1fr;gap:26px;padding:46px 32px}
  .pdp{grid-template-columns:1fr;gap:36px}
  .details{grid-template-columns:1fr;gap:0}
  .recent{width:auto;padding-top:34px}
  .rc-list{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
  .gallery{position:static}
  .listing{grid-template-columns:1fr}
  /* Панелът се разгръща над продуктите цял, а докато е затворен от него остава
     само един ред — иначе филтрите заемат целия първи екран и клиентът вижда
     стока едва след като превърти покрай тях. */
  .filters{position:static;padding:0;border-radius:12px;overflow:hidden}
  .filters-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 18px;border:0;background:none;font-family:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);cursor:pointer}
  .filters-toggle i{font-style:normal;font-size:13px;color:var(--wine);transition:transform .3s}
  .filters.open .filters-toggle i{transform:rotate(180deg)}
  .filter-fields{display:none;padding:2px 18px 20px}
  .filters.open .filter-fields{display:block}
  .cart-grid{grid-template-columns:1fr}
  /* Поръчките остават отгоре, данните и паролата слизат под тях: човекът идва
     тук заради историята си, не заради формата за адрес. */
  .acct-cols{grid-template-columns:1fr;gap:44px}
}
/* Таблет в изправено положение. Дотук всичко под 980 px получаваше подредбата за
   телефон, а таблетът е двойно по-широк от него: заглавната секция оставаше
   наполовина празна, а продуктите вървяха по два на ред, всеки широк колкото
   половин екран. Оттук нататък ширината се използва — заглавието се връща на две
   колони, решетките показват по три продукта, а плъзгащият се ред — три и подадена
   четвърта, за да си личи, че продължава. Долната граница е 700 px: под нея
   двуколонното заглавие става по-тясно от буквите в него. */
@media(min-width:700px) and (max-width:980px){
  .hero{grid-template-columns:1.05fr .95fr;gap:28px}
  .hero-visual{max-width:none;margin:0}
  .grid,.grid.g4,.posts{grid-template-columns:repeat(3,1fr)}
  .rail{grid-auto-columns:calc((100% - 26px)/3.25)}
}
@media(max-width:560px){
  /* Три неща на един ред от 320 px: бутон за категориите, име на магазина и
     кошница. Затова тук всичко се стяга — иначе кошницата излиза извън екрана
     и страницата тръгва настрани. */
  .nav{padding:14px 14px;gap:10px}
  .logo .mark{font-size:27px}
  .logo .sub{letter-spacing:.3em;font-size:9px}
  /* На най-тесните телефони „Luxury Lingerie“ се стяга още веднъж, за да остане
     на един ред, без да заема повече място, отколкото заемаше на два. */
  @media(max-width:380px){
    .logo .sub{letter-spacing:.16em;font-size:8px}
  }
  .tools{gap:12px}
  .cart-pill{padding:9px 13px;font-size:11px;gap:7px;letter-spacing:.04em}
  /* Със сърцето за любими иконите станаха четири и „Кошница · 0“ вече не се
     събира (на 320 px не се събираше и преди). Остават иконата и броят; думата
     е скрита само за окото — екранният четец пак я казва. */
  .cp-w{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* От 320 px на реда има място за три неща, а името на влезлия е четвъртото:
     остава само иконката, а името се вижда на самата страница на профила. */
  .acct-link [data-acct-name]{display:none}
  .sec{padding:60px 18px}
  .hero{padding:40px 18px 20px}
  /* Едно и също поле встрани на всяка страница. Началната страница и статиите
     отстъпваха 18 px, а категориите, продуктът, кошницата и долният край — 32.
     Разликата се вижда веднага щом се мине от една страница на друга: текстът
     подскача навътре и навън, а на 320 px тридесет и двата пиксела от двете
     страни изяждат една пета от екрана. */
  .crumb,.listing,.pdp,.details,.page,.trust-in,.editorial-in,.brands-in,.foot-in,.foot-bottom-in{padding-left:18px;padding-right:18px}
  /* Редът за поръчка искаше 362 px: брояч (156) плюс бутон, който не се свива.
     Екранът дава 354, а на 320 px — 284. Затова снимката на продукта и цялата
     дясна колона излизаха няколко пиксела извън екрана и дясното поле изчезваше.
     Броячът се стяга, бутонът може да се свие, а ако пак не остане място —
     минава на свой ред, вместо да разпъва страницата. */
  /* min-height стои на реда, а не на бутоните: пренесе ли се бутонът на втори
     ред, двата реда си поделят височината на реда и бутонът остава 18 px висок.
     Затова тук височината се мести върху самите бутони. */
  .buyrow{flex-wrap:wrap;min-height:0}
  .stepper,.add{min-height:54px}
  .stepper button{width:44px}
  .stepper input{width:40px}
  .add{flex:1 1 170px;min-width:0;padding:0 16px;font-size:12px;letter-spacing:.1em}
  /* Количката е нарисувана и в бутона, и в лентата горе. На тази ширина тя е
     разликата между надпис на един ред и надпис на два. */
  .add svg{display:none}
  /* Продуктовите решетки остават на две колони и тук: една карта на ред заема
     целия екран, а клиентът превърта дълго, за да види няколко модела — и остава
     с усещането, че изборът е малък. В категориите винаги е било по две (там
     .grid.g4 надделява) и началната страница се разминаваше с тях без причина.
     На един ред остават само тези, които наистина не се четат на две колони. */
  .trust-in,.foot-in,.posts{grid-template-columns:1fr}
  /* Плочките на категориите остават на две колони и по телефон: със снимка вътре
     една плочка на ред заема цял екран и четирите категории се превръщат в дълго
     превъртане. На две колони се виждат наведнъж. */
  .cats{grid-template-columns:1fr 1fr;gap:12px}
  .cat{padding:16px 14px;aspect-ratio:4/5}
  .cat .cn{font-size:20px}
  .cat .cc{font-size:10px;letter-spacing:.14em;margin-top:4px}
  .grid{gap:18px 14px}
  /* Полето на .sec тук е 18px, а не 32 — редът излиза точно до ръба на екрана и
     нито пиксел повече, иначе страницата тръгва настрани. */
  .rail{grid-auto-columns:46%;gap:14px;margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px}
  .rail-sec{padding-bottom:36px}
  /* Двете колони остават: те са ритъмът на всички решетки в магазина по телефон,
     а една карта на цял екран прави витрината дълга колкото цяла категория. */
  .spot{padding-bottom:36px}
  .spot-grid{gap:14px}
  .post{padding:22px 18px 48px}
  .news-in{padding:40px 18px}
  .news-form{grid-template-columns:1fr}
  /* Тук решетката на категорията остава на две колони (.grid.g4 е по-силно от
     .grid), затова картите са по-тесни и по-ниски, а не по-високи. */
  .listing .grid .card{contain-intrinsic-height:auto 285px}
  .hero-stats{gap:24px}
  .gallery{grid-template-columns:1fr}.thumbs{flex-direction:row}
  .assure{grid-template-columns:1fr}
  .rc-list{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
}

/* Трите обещания в горната лента не се събират в ширината на телефон и на
   таблет изправено — редът просто продължава извън екрана и остатъкът се губи.
   Затова там се редуват: и трите стоят на едно и също място и се показват
   поред, всяко за около три секунди и половина, вместо от всяко да се вижда по
   една трета. Точките отпадат — няма какво да разделят, щом се вижда едно.
   Съобщението може да се пренесе на втори ред, за да се побере и на 320 px. */
@media(max-width:980px){
  .topbar{display:grid;place-items:center;padding:8px 16px;font-size:11px;letter-spacing:.1em;line-height:1.4}
  .topbar .dot{display:none}
  .topbar span{grid-area:1/1;white-space:normal;opacity:0;animation:topbar-cycle 12s infinite}
  .topbar span:nth-child(3){animation-delay:4s}
  .topbar span:nth-child(5){animation-delay:8s}
}
@keyframes topbar-cycle{0%,2%{opacity:0}6%,28%{opacity:1}33%,100%{opacity:0}}
/* Който е поискал от устройството си по-малко движение, получава и трите
   съобщения едно под друго — видими, неподвижни. Нищо не се крие. */
@media(max-width:980px) and (prefers-reduced-motion:reduce){
  .topbar{display:block}
  .topbar span{display:block;margin:3px 0;opacity:1;animation:none}
}

/* Най-тесните телефони (320 px): четири икони плюс кошницата се събират само с
   по-малко разстояние между тях. Стои най-отдолу, за да надделее над 12-те px
   от правилата за 560 px. */
@media(max-width:380px){.tools{gap:8px}}