/* Front page only. Ported from the approved home mockup (Website/home.html). */
.wsteaser{background:var(--cream)}
.wst{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.wsc{background:var(--paper);border-top:6px solid var(--c);border-radius:var(--r-md);padding:var(--s5);text-decoration:none;display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.wsc h3{font-size:28px;color:var(--c)}
.wsc span{margin-top:auto;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
@media(max-width:760px){.wst{grid-template-columns:1fr}}
.kitsec{background:var(--pink-100);padding-block:var(--s8)}
.kitsec .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s7);align-items:center}
.kitcopy{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;min-width:0}
.kitcopy h2{font-size:clamp(36px,4.5vw,56px);color:var(--pink-600)}
.kitcopy p{font-size:19px}
.newtag{background:var(--pink);color:#fff;font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill)}
.kprice{font-family:var(--display);font-weight:600;font-size:24px}
.ktiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);min-width:0}
.kt{background:var(--paper);border-radius:var(--r-md);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;padding-bottom:var(--s3)}
.kt img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.kt b{font-family:var(--display);font-weight:600;font-size:22px;color:var(--pink);padding:var(--s2) var(--s3) 0}
.kt span{font-size:14px;color:var(--ink-soft);padding-inline:var(--s3)}
.duo.solo{grid-template-columns:1fr}
@media(max-width:860px){.kitsec .wrap{grid-template-columns:1fr;gap:var(--s5)}.ktiles{grid-template-columns:repeat(2,1fr)}}
.tea2 .line,.tea .line{color:var(--c);font-size:14px}
.kt .ktp{font-style:normal;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);padding:4px var(--s3) 0}
.kt .ktp s{font-size:.8em;font-weight:500;color:var(--ink-soft);margin-right:4px}
.tea .img .alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.tea:hover .img .alt{opacity:1}
.kt{position:relative}
.kt .alt{position:absolute;top:0;left:0;width:100%;aspect-ratio:1;object-fit:cover;opacity:0;transition:opacity .3s}
.kt:hover .alt{opacity:1}
.kword{font-size:.55em;letter-spacing:.04em;margin-left:.15em;vertical-align:.12em}
.kt .kst{display:block;font-size:12px;color:var(--ink-soft);padding:0 var(--s3);margin-top:-2px}
.kt .kt-badge{position:absolute;top:8px;left:8px;z-index:2;background:var(--pink);color:#fff;font-family:var(--display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.eyebrow{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.hero{background:var(--cream);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s7);align-items:center;padding-block:var(--s8)}
.hero-copy{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.hero h1{font-size:clamp(40px,5.6vw,68px)}
.hero h1 .pink{color:var(--pink)}
.hero h1 .green{color:var(--green-700)}
.hero .sub{font-size:20px;color:var(--ink-soft);max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
.packs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);transform:rotate(-3deg)}
.packs img{width:100%;aspect-ratio:909/540;object-fit:cover;border-radius:var(--r-md);display:block;border:var(--rule) solid var(--line);background:var(--paper)}
.packs img:nth-child(2),.packs img:nth-child(4){margin-top:var(--s6)}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr;padding-block:var(--s7)}.packs{transform:none}}
.trust{border-block:var(--rule) solid var(--ink)}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.trust li{padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:2px;text-align:center}
.trust li+li{border-left:var(--rule) solid var(--line)}
.trust b{font-family:var(--display);font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.trust span{font-size:15px;color:var(--ink-soft)}
@media(max-width:760px){.trust ul{grid-template-columns:1fr 1fr}.trust li:nth-child(3){border-left:0}.trust li:nth-child(n+3){border-top:var(--rule) solid var(--line)}}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.sec-head h2{font-size:clamp(30px,3.6vw,44px)}
.sec-head p{max-width:30em;color:var(--ink-soft)}
.teas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.tea{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.tea .img{border-radius:var(--r-md);overflow:hidden;border:var(--rule) solid var(--line);position:relative}
.tea .img img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:left center}
.tea .tag{position:absolute;left:10px;top:10px;background:var(--c);color:#fff;font-family:var(--display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.tea h3{font-size:30px;color:var(--c)}
.tea .line{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tea p{font-size:16px}
.tben{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:16px}
.tben li{position:relative;padding-left:26px}
.tben li::before{content:"";position:absolute;left:2px;top:.3em;width:12px;height:7px;border-left:2.4px solid var(--c);border-bottom:2.4px solid var(--c);transform:rotate(-45deg)}
.tea .buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s2)}
.price{font-family:var(--display);font-weight:600;font-size:24px;font-variant-numeric:tabular-nums}
.price small{display:block;font-family:var(--sans);font-weight:400;font-size:14px;color:var(--ink-soft);letter-spacing:0}
.add{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--c);color:#fff;border:0;border-radius:var(--r-pill);padding:10px 16px;cursor:pointer;text-decoration:none}
.tea.skin{--c:var(--skin)}
.tea.shape{--c:#d9546b}
.tea.rose{--c:var(--rose)}
.tea.mint{--c:var(--green-700)}
@media(max-width:980px){.teas{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.teas{grid-template-columns:1fr}}
.reviews{background:var(--pink-100)}
.quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.q{display:flex;flex-direction:column;gap:var(--s4);border-top:var(--rule) solid var(--pink-600);padding-top:var(--s4);min-width:0;margin:0}
.q blockquote{margin:0;font-size:19px;line-height:1.4}
.q .who{margin-top:auto;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-600)}
.q .who span{color:var(--ink-soft)}
@media(max-width:900px){.quotes{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.quotes{grid-template-columns:1fr}}
.fb{margin-top:var(--s6);font-size:16px}
.story .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s7);align-items:center}
.story img{width:100%;aspect-ratio:4/4.3;object-fit:cover;object-position:center 20%;border-radius:var(--r-md);display:block}
.story-copy{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.story h2{font-size:clamp(30px,3.6vw,44px)}
.story p{font-size:19px;max-width:32em}
@media(max-width:820px){.story .wrap{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.panel{border-radius:var(--r-md);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.panel h2{font-size:clamp(28px,3vw,38px)}
.panel p{font-size:18px;max-width:30em}
.panel .from{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.panel.oils{background:var(--oil);color:var(--paper)}
.panel.oils .btn{border-color:var(--paper);color:var(--paper)}
.panel.oils .btn:hover{background:var(--paper);color:var(--ink)}
.dots{display:flex;gap:8px;flex-wrap:wrap}
.dots i{width:22px;height:22px;border-radius:50%;display:block}
.panel.gift{background:var(--green-100)}
.panel.pillow{background:var(--lav);color:var(--paper)}
.panel.pillow .btn{border-color:var(--paper);color:var(--paper)}
.panel.pillow .btn:hover{background:var(--paper);color:var(--lav)}
.panel .btn{align-self:flex-start;margin-top:auto}
.duo+.duo{margin-top:var(--s3)}
@media(max-width:760px){.duo{grid-template-columns:1fr}.panel{padding:var(--s5)}}
/* product photos: packs shot on white, shown on white tiles */
.packs{transform:none}
.packs img{aspect-ratio:1;object-fit:contain;background:var(--paper)}
.pimg{display:block;align-self:flex-end;width:auto;max-width:60%;margin-bottom:calc(-1 * var(--s2))}
.panel.oils .pimg{height:200px}
.panel.pillow .pimg{height:170px}
.tea .img{background:var(--paper)}
.tea .img img{object-fit:contain;object-position:center}
/* whole tea card is one box so the price clearly belongs to its tea */
.tea{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;padding-bottom:var(--s4)}
.tea .img{border:0;border-bottom:1px solid var(--line);border-radius:0}
.tea>*:not(.img){padding-inline:var(--s4)}
@media(max-width:480px){.teas{gap:var(--s6)}}
/* white hero so the white pack photos blend in */
.hero{background:var(--paper);border-bottom:var(--rule) solid var(--line)}
.packs img{border:0;border-radius:0}
main>section{padding-block:var(--s8)}
.tea h3 a{color:inherit;text-decoration:none}
.tea .img{display:block}
/* „CALM кутия“: the word sits right after the name; the tile never gets underlined (2026-11-14). */
.kt b .kword{padding:0;margin-left:.3em;font-size:.6em;color:var(--ink-soft)}
.kt,.kt:hover,.kt:focus,.kt b,.kt span{text-decoration:none!important}
.kt s{text-decoration:line-through!important}
/* Price and „Виж“ on one row at the bottom of the box tile (2026-11-14). */
.kt .ktb{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);margin-top:auto;padding:4px var(--s3) 0}
.kt .ktb .ktpw{display:flex;flex-direction:column;padding:0}
.kt .ktb .ktp,.kt .ktb .kst{padding:0;margin:0}
.kt .ktv{flex:none;padding:8px 16px;border-radius:999px;background:var(--pink);color:#fff;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.kt:hover .ktv{background:var(--pink-600)}