/* ============================================================
KOPFTUCH.SHOP — DESIGN SYSTEM v1.0
ink #2b2320 · rose #b3456b · blush #e59ab4 · sand #faf7f5
Logical properties everywhere -> Arabic RTL works automatically.
============================================================ */
:root{--ink:#2b2320;--ink-2:#4a423e;--ink-3:#8a7d76;--rose:#b3456b;--rose-d:#96304f;--blush:#e59ab4;
--blush-l:#fbeaf1;--sand:#faf7f5;--line:#eee4de;--ok:#1c7d58;--warn:#b46a00;--err:#b3261e;
--r:14px;--r-s:9px;--r-l:22px;--sh:0 1px 3px rgba(43,35,32,.06),0 8px 24px rgba(43,35,32,.05);
--sh-h:0 4px 12px rgba(43,35,32,.09),0 18px 42px rgba(43,35,32,.09);--max:1280px;--gut:clamp(16px,4vw,32px);
--f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;--fd:'Playfair Display',Georgia,serif}
html[dir=rtl]{--f:'Noto Kufi Arabic','Segoe UI',Tahoma,sans-serif;--fd:'Noto Kufi Arabic',Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f);font-size:16px;line-height:1.6;color:var(--ink-2);background:#fff;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.6vw,3.2rem)}h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}h3{font-size:clamp(1.1rem,2vw,1.4rem)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--blush);outline-offset:2px;border-radius:4px}
.ks-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.ks-skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:9999}
.ks-skip:focus{inset-inline-start:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.wrap-n{max-width:900px;margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(40px,6vw,76px)}.sec--sand{background:var(--sand)}
.sec__head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.sec__head h2{margin:0}.sec__more{font-weight:600;font-size:.92rem;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid transparent;
border-radius:var(--r-s);padding:13px 24px;font:600 .96rem/1 var(--f);cursor:pointer;
text-decoration:none!important;transition:.18s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--p{background:var(--rose);color:#fff}.btn--p:hover{background:var(--rose-d);box-shadow:var(--sh-h)}
.btn--o{background:transparent;color:var(--ink);border-color:var(--ink)}.btn--o:hover{background:var(--ink);color:#fff}
.btn--g{background:var(--sand);color:var(--ink);border-color:var(--line)}.btn--g:hover{background:var(--line)}
.btn--w{background:#fff;color:var(--ink);border-color:#fff}.btn--w:hover{background:var(--blush-l)}
.btn--lg{padding:16px 32px;font-size:1.02rem}.btn--sm{padding:9px 16px;font-size:.85rem}
.btn--full{width:100%}.btn[disabled]{opacity:.45;pointer-events:none}
label{display:block;font-weight:600;font-size:.88rem;color:var(--ink);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],
input[type=search],input[type=date],select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);
border-radius:var(--r-s);font:400 .97rem/1.4 var(--f);color:var(--ink);background:#fff;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--rose);outline:none;box-shadow:0 0 0 3px var(--blush-l)}
textarea{min-height:120px;resize:vertical}
.fld{margin-bottom:16px}.fld--2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fld--2{grid-template-columns:1fr}}
.hint{font-size:.8rem;color:var(--ink-3);margin-top:5px}.req{color:var(--rose)}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem;cursor:pointer}
.chk input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--rose);flex:0 0 auto}
.ks-alert{padding:13px 17px;border-radius:var(--r-s);margin-bottom:16px;font-size:.93rem;border:1px solid}
.ks-alert--ok{background:#eaf7f1;border-color:#bfe5d4;color:#14543c}
.ks-alert--err{background:#fdecea;border-color:#f6c9c4;color:#8c1d16}
.ks-alert--warn{background:#fff6e6;border-color:#ffe0ad;color:#7a4a00}
.ks-alert--info{background:var(--blush-l);border-color:#f3cfdd;color:#7d2f4b}
.hdr{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--line)}
.hdr__bar{background:var(--ink);color:#fff;font-size:.8rem}
.hdr__bar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:38px;flex-wrap:wrap}
.hdr__usps{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.hdr__usps li{color:#e7ded9}
.hdr__main{display:flex;align-items:center;gap:clamp(12px,2.5vw,30px);padding-block:14px}
.logo{font-family:var(--fd);font-weight:700;font-size:1.5rem;color:var(--ink);letter-spacing:-.4px;white-space:nowrap}
.logo span{color:var(--rose)}.logo:hover{text-decoration:none}
.srch{flex:1;position:relative;min-width:0}
.srch input{padding-inline-end:52px;background:var(--sand);border-color:transparent}
.srch button{position:absolute;inset-inline-end:5px;top:5px;bottom:5px;width:42px;border:0;border-radius:7px;
background:var(--rose);color:#fff;cursor:pointer;display:grid;place-items:center}
.hdr__acts{display:flex;align-items:center;gap:4px}
.iact{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:none!important}
.iact:hover{background:var(--sand)}
.iact__b{position:absolute;top:4px;inset-inline-end:2px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
background:var(--rose);color:#fff;font:700 .68rem/19px var(--f);text-align:center}
.langsw{position:relative}
.langsw__t{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1.5px solid var(--line);
border-radius:var(--r-s);background:#fff;font:600 .85rem var(--f);color:var(--ink);cursor:pointer}
.langsw__m{position:absolute;inset-inline-end:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);
border-radius:var(--r-s);box-shadow:var(--sh-h);min-width:160px;padding:6px;display:none;z-index:950}
.langsw.is-open .langsw__m{display:block}
.langsw__m a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink);font-size:.9rem}
.langsw__m a:hover{background:var(--sand);text-decoration:none}
.langsw__m a.is-on{background:var(--blush-l);color:var(--rose);font-weight:600}
.nav{border-top:1px solid var(--line);background:#fff}
.nav__l{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.nav__l::-webkit-scrollbar{display:none}
.nav__l>li{position:relative;flex:0 0 auto}
.nav__l>li>a{display:block;padding:14px 16px;font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.nav__l>li>a:hover{color:var(--rose);text-decoration:none}
.nav__l>li>a.is-on{color:var(--rose);box-shadow:inset 0 -3px 0 var(--rose)}
.nav__sub{position:absolute;inset-inline-start:0;top:100%;background:#fff;border:1px solid var(--line);
border-radius:var(--r-s);box-shadow:var(--sh-h);min-width:250px;padding:8px;display:none;z-index:940}
.nav__l>li:hover .nav__sub,.nav__l>li:focus-within .nav__sub{display:block}
.nav__sub a{display:block;padding:9px 13px;border-radius:6px;color:var(--ink-2);font-size:.9rem}
.nav__sub a:hover{background:var(--sand);color:var(--rose);text-decoration:none}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;place-items:center}
@media(max-width:900px){.burger{display:grid}
.nav{position:fixed;inset:0;background:#fff;z-index:990;transform:translateX(-102%);transition:.25s;overflow:auto;padding:70px 20px 40px}
html[dir=rtl] .nav{transform:translateX(102%)}.nav.is-open{transform:translateX(0)}
.nav__l{flex-direction:column;overflow:visible}
.nav__sub{position:static;display:block;border:0;box-shadow:none;padding-inline-start:16px;min-width:0}
.nav__close{position:absolute;top:16px;inset-inline-end:16px;width:44px;height:44px;border:0;background:var(--sand);border-radius:50%;font-size:1.3rem;cursor:pointer}
.srch{order:9;flex-basis:100%}}
@media(min-width:901px){.nav__close{display:none}}
.hero{position:relative;background:linear-gradient(135deg,#fbeaf1 0%,#faf7f5 52%,#f4e9e4 100%);overflow:hidden}
.hero::after{content:"";position:absolute;inset-inline-end:-140px;top:-140px;width:520px;height:520px;
background:radial-gradient(circle,rgba(229,154,180,.42),transparent 68%);pointer-events:none}
.hero__in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,56px);
align-items:center;padding-block:clamp(40px,7vw,86px);z-index:1}
@media(max-width:860px){.hero__in{grid-template-columns:1fr;text-align:center}}
.kick{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
border-radius:100px;padding:7px 16px;font:600 .78rem var(--f);color:var(--rose);
letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.hero h1{margin-bottom:16px}
.hero__sub{font-size:clamp(1rem,1.7vw,1.16rem);color:var(--ink-2);max-width:55ch;margin-bottom:28px}
@media(max-width:860px){.hero__sub{margin-inline:auto}}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:860px){.hero__cta{justify-content:center}}
.hero__art{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero__art figure{margin:0;border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sh);aspect-ratio:3/4}
.hero__art figure:first-child{grid-row:span 2;aspect-ratio:3/5}
.hero__art img{width:100%;height:100%;object-fit:cover}
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(max-width:820px){.usps{grid-template-columns:repeat(2,1fr)}}
.usps>div{background:#fff;padding:20px 16px;display:flex;gap:11px;align-items:center;justify-content:center;
font-size:.88rem;font-weight:600;color:var(--ink);text-align:start}
.usps svg{flex:0 0 auto;color:var(--rose)}
.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,18px)}
@media(max-width:820px){.ages{grid-template-columns:repeat(2,1fr)}}
.age{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
background:var(--blush-l);box-shadow:var(--sh);transition:.2s;text-decoration:none!important}
.age:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.age img{width:100%;height:100%;object-fit:cover}
.age__t{position:absolute;inset-inline:0;bottom:0;padding:30px 18px 16px;color:#fff;font-weight:700;font-size:1.12rem;
background:linear-gradient(transparent,rgba(43,35,32,.82));font-family:var(--fd)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);
border-radius:100px;padding:9px 17px;font:600 .88rem var(--f);color:var(--ink);transition:.15s;text-decoration:none!important}
.chip:hover,.chip.is-on{border-color:var(--rose);background:var(--blush-l);color:var(--rose)}
.grid{display:grid;gap:clamp(12px,1.8vw,22px);grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
display:flex;flex-direction:column;transition:.2s}
.card:hover{box-shadow:var(--sh-h);transform:translateY(-3px);border-color:transparent}
.card__img{position:relative;display:block;aspect-ratio:3/4;background:var(--sand);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card__img img{transform:scale(1.05)}
.card__b{position:absolute;top:10px;inset-inline-start:10px;display:flex;flex-direction:column;gap:5px;z-index:2}
.bdg{padding:4px 9px;border-radius:5px;font:700 .68rem/1.35 var(--f);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.bdg--new{background:var(--ok)}.bdg--sale{background:var(--rose)}.bdg--out{background:var(--ink-3)}
.card__wish{position:absolute;top:8px;inset-inline-end:8px;width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.93);border:0;display:grid;place-items:center;cursor:pointer;color:var(--ink);z-index:2}
.card__wish:hover{background:#fff;color:var(--rose)}
.card__b2{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1;gap:5px}
.card__v{font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.card__t{font:600 .95rem/1.4 var(--f);color:var(--ink);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__t a{color:inherit;text-decoration:none}.card__t a:hover{color:var(--rose)}
.card__p{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card__p strong{font-size:1.12rem;color:var(--ink);font-weight:700}
.card__p del{font-size:.85rem;color:var(--ink-3)}
.card__vat{font-size:.72rem;color:var(--ink-3)}.card__add{margin-top:8px}
.stars{color:#e8a13a;font-size:.8rem;letter-spacing:1px}
.shop{display:grid;grid-template-columns:262px 1fr;gap:clamp(18px,2.6vw,34px);align-items:start}
@media(max-width:940px){.shop{grid-template-columns:1fr}}
.side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;position:sticky;top:96px}
@media(max-width:940px){.side{position:static}}
.side h3{font-size:1rem;font-family:var(--f);margin-bottom:12px}
.side__g{padding-block:14px;border-top:1px solid var(--line)}
.side__g:first-of-type{border-top:0;padding-top:0}
.side__l{list-style:none;margin:0;padding:0;max-height:250px;overflow:auto}
.side__l a{display:block;padding:6px 0;font-size:.9rem;color:var(--ink-2)}
.side__l a:hover,.side__l a.is-on{color:var(--rose);font-weight:600;text-decoration:none}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.toolbar select{width:auto;min-width:190px}.count{font-size:.9rem;color:var(--ink-3)}
.pd{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,3.6vw,52px);align-items:start}
@media(max-width:900px){.pd{grid-template-columns:1fr}}
/* HOTFIX 4: contain, not cover. The full photo must be visible —
size charts and material charts are useless when cropped. */
.gal__m{display:block;width:100%;border:0;padding:0;cursor:zoom-in;position:relative;
border-radius:var(--r);overflow:hidden;background:var(--sand);
min-height:320px;max-height:78vh}
.gal__m img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;margin:0 auto}
.gal__t{display:flex;gap:9px;margin-top:10px;overflow-x:auto}
.gal__t button{flex:0 0 78px;width:78px;aspect-ratio:3/4;border:2px solid transparent;border-radius:9px;
overflow:hidden;background:var(--sand);cursor:pointer;padding:0}
.gal__t button.is-on{border-color:var(--rose)}
.gal__t img{width:100%;height:100%;object-fit:contain;background:#fff}
.pd__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.pd__price strong{font-size:2rem;color:var(--ink);font-weight:700}
.pd__price del{color:var(--ink-3);font-size:1.05rem}
.pd__save{background:var(--rose);color:#fff;padding:3px 9px;border-radius:5px;font:700 .78rem var(--f)}
.pd__tax{font-size:.85rem;color:var(--ink-3);margin-bottom:18px}
.swatches{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:6px}
.sw{min-width:52px;padding:10px 14px;border:1.5px solid var(--line);border-radius:8px;background:#fff;
font:600 .88rem var(--f);color:var(--ink);cursor:pointer}
.sw:hover{border-color:var(--ink)}
.sw.is-on{border-color:var(--rose);background:var(--blush-l);color:var(--rose)}
.sw[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
.qty button{width:42px;height:46px;border:0;background:var(--sand);font-size:1.15rem;cursor:pointer;color:var(--ink)}
.qty input{width:56px;height:46px;border:0;text-align:center;font-weight:600}
.pd__buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}
.stk{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600}
.stk--in{color:var(--ok)}.stk--low{color:var(--warn)}.stk--out{color:var(--err)}
.trust{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.trust li{display:flex;gap:10px;align-items:flex-start;font-size:.89rem}
.trust svg{flex:0 0 auto;color:var(--rose);margin-top:2px}
.tabs{margin-top:clamp(30px,5vw,56px);border-top:1px solid var(--line)}
.tabs__n{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs__n button{padding:15px 20px;border:0;background:none;font:600 .93rem var(--f);color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tabs__n button.is-on{color:var(--rose);box-shadow:inset 0 -3px 0 var(--rose)}
.tabs__p{padding:26px 0;display:none;max-width:78ch}.tabs__p.is-on{display:block}
.cart{display:grid;grid-template-columns:1fr 372px;gap:clamp(20px,3vw,38px);align-items:start}
@media(max-width:960px){.cart{grid-template-columns:1fr}}
.vgroup{border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.vgroup__h{background:var(--sand);padding:12px 18px;font-weight:600;font-size:.9rem;display:flex;
justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:15px;padding:16px 18px;border-bottom:1px solid var(--line);align-items:start}
.line:last-child{border-bottom:0}
@media(max-width:620px){.line{grid-template-columns:76px 1fr}}
.line__i{border-radius:9px;overflow:hidden;aspect-ratio:3/4;background:var(--sand)}
.line__i img{width:100%;height:100%;object-fit:cover}
.line__t{font-weight:600;color:var(--ink);font-size:.95rem;margin:0 0 4px}
.line__v{font-size:.83rem;color:var(--ink-3)}
.line__r{text-align:end;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
@media(max-width:620px){.line__r{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;text-align:start}}
.line__p{font-weight:700;color:var(--ink);white-space:nowrap}
.rm{border:0;background:none;color:var(--ink-3);font-size:.83rem;cursor:pointer;text-decoration:underline;padding:0}
.rm:hover{color:var(--err)}
.sum{background:var(--sand);border:1px solid var(--line);border-radius:var(--r);padding:22px;position:sticky;top:96px}
@media(max-width:960px){.sum{position:static}}
.sum h3{font-family:var(--f);font-size:1.06rem;margin-bottom:16px}
.sum__r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.93rem}
.sum__r--t{border-top:1.5px solid var(--ink);margin-top:10px;padding-top:13px;font-size:1.2rem;font-weight:700;color:var(--ink)}
.sum__r--d{color:var(--ok);font-weight:600}
.free{background:var(--blush-l);border:1px dashed var(--blush);border-radius:8px;padding:10px 13px;
font-size:.85rem;color:var(--rose);font-weight:600;margin-bottom:14px}
.pays{display:grid;gap:11px;margin-bottom:8px}
.pay{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--r-s);
padding:15px 17px;cursor:pointer;background:#fff;transition:.15s}
.pay:hover{border-color:var(--ink-3)}
.pay:has(input:checked){border-color:var(--rose);background:var(--blush-l)}
.pay input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--rose);flex:0 0 auto}
.pay b{display:block;color:var(--ink);font-size:.95rem}
.pay small{color:var(--ink-3);font-size:.83rem;line-height:1.5;display:block;margin-top:3px}
.steps{display:flex;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.steps span{flex:1;min-width:110px;padding:10px 12px;background:var(--sand);border-radius:7px;
font:600 .85rem var(--f);color:var(--ink-3);text-align:center;border:1px solid var(--line)}
.steps span.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.tbl th,.tbl td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{background:var(--sand);font-weight:600;color:var(--ink);font-size:.84rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tbl tr:hover td{background:#fdfbfa}
.tbl--sc{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.pill{display:inline-block;padding:4px 11px;border-radius:100px;font:600 .76rem var(--f);white-space:nowrap}
.pill--ok{background:#eaf7f1;color:#14543c}.pill--warn{background:#fff6e6;color:#7a4a00}
.pill--err{background:#fdecea;color:#8c1d16}.pill--neu{background:var(--sand);color:var(--ink-2)}
.pill--info{background:var(--blush-l);color:#7d2f4b}
.panel{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
@media(max-width:900px){.panel{grid-template-columns:1fr}}
.pside{background:var(--ink);color:#cfc5c0;padding:22px 0}
.pside__b{padding:0 20px 18px;font-family:var(--fd);font-size:1.2rem;color:#fff}
.pside__b span{color:var(--blush)}
.pside a{display:flex;gap:10px;align-items:center;padding:12px 20px;color:#cfc5c0;font-size:.92rem;font-weight:500}
.pside a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.pside a.is-on{background:var(--rose);color:#fff}
.pmain{padding:clamp(18px,3vw,34px);background:var(--sand);min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.kpi small{display:block;font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:6px}
.kpi b{font-size:1.65rem;color:var(--ink);font-family:var(--fd)}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.6vw,28px);margin-bottom:22px}
.box>h2,.box>h3{margin-top:0}
.ks-crumbs{padding:14px 0;font-size:.84rem;color:var(--ink-3)}
.ks-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.ks-crumbs li+li::before{content:"/";margin-inline-end:7px;color:var(--line)}
.ks-crumbs a{color:var(--ink-3)}.ks-crumbs a:hover{color:var(--rose)}
.ks-pager{display:flex;gap:6px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.ks-pager__i{min-width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--line);
border-radius:8px;color:var(--ink);font-weight:600;font-size:.9rem}
.ks-pager__i:hover{border-color:var(--rose);text-decoration:none}
.ks-pager__i.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ks-pager__gap{display:grid;place-items:center;min-width:28px;color:var(--ink-3)}
.ftr{background:var(--ink);color:#b7aca6;padding-block:clamp(36px,5vw,58px) 0;margin-top:clamp(40px,6vw,76px)}
.ftr__g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(20px,3vw,38px)}
@media(max-width:900px){.ftr__g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__g{grid-template-columns:1fr}}
.ftr h4{color:#fff;font-family:var(--f);font-size:.86rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{color:#b7aca6;font-size:.9rem}.ftr a:hover{color:#fff}
.ftr__logo{font-family:var(--fd);font-size:1.4rem;color:#fff;display:inline-block;margin-bottom:12px}
.ftr__logo span{color:var(--blush)}
.nl{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.nl input{flex:1;min-width:170px;background:rgba(255,255,255,.08);border-color:transparent;color:#fff}
.nl input::placeholder{color:#8a7d76}
.ftr__pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ftr__pay span{background:rgba(255,255,255,.09);border-radius:5px;padding:5px 10px;font-size:.72rem;font-weight:600;color:#ded5d0}
.ftr__btm{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-block:20px;font-size:.82rem;
display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ck{position:fixed;inset-inline:0;bottom:0;background:#fff;border-top:2px solid var(--rose);
box-shadow:0 -6px 28px rgba(0,0,0,.14);z-index:9990;padding:20px 0;display:none}
.ck.is-show{display:block}
.ck__in{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ck__t{flex:1;min-width:250px}.ck__t b{color:var(--ink);display:block;margin-bottom:5px}
.ck__t p{font-size:.86rem;margin:0;color:var(--ink-2)}
.ck__a{display:flex;gap:9px;flex-wrap:wrap}
.ck__o{width:100%;display:none;gap:18px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);margin-top:6px}
.ck.is-set .ck__o{display:flex}
.empty{text-align:center;padding:clamp(40px,7vw,80px) 20px;color:var(--ink-3)}
.empty h3{color:var(--ink)}
.auth{max-width:452px;margin:clamp(28px,5vw,60px) auto;background:#fff;border:1px solid var(--line);
border-radius:var(--r);padding:clamp(24px,4vw,38px);box-shadow:var(--sh)}
.auth h1{font-size:1.65rem;text-align:center;margin-bottom:8px}
.auth__s{text-align:center;color:var(--ink-3);font-size:.92rem;margin-bottom:24px}
.split{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--ink-3);font-size:.84rem}
.split::before,.split::after{content:"";flex:1;height:1px;background:var(--line)}
.prose{max-width:78ch}
.prose h2{font-size:1.4rem;margin-top:2em}
.prose h3{font-size:1.1rem;font-family:var(--f);margin-top:1.6em}
.prose ul,.prose ol{padding-inline-start:22px}.prose li{margin-bottom:.5em}
.prose table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:start}
.prose th{background:var(--sand)}
.vcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;gap:14px;align-items:center}
.vcard img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--sand)}
.vcard b{display:block;color:var(--ink)}
.cta{background:linear-gradient(135deg,var(--ink),#453a35);color:#fff;border-radius:var(--r-l);
padding:clamp(28px,4.4vw,52px);text-align:center}
.cta h2{color:#fff}.cta p{color:#cfc5c0;max-width:60ch;margin-inline:auto}
@media print{.hdr,.ftr,.ck,.btn{display:none!important}body{background:#fff}}
/* ===== PACKAGE 5: B2B bulk-enquiry card on the product page ===== */
.pd__b2b{display:flex;align-items:center;gap:13px;margin:16px 0 4px;padding:14px 16px;
border:1px solid var(--line);border-radius:14px;background:var(--sand);
text-decoration:none;color:var(--ink);transition:border-color .16s,box-shadow .16s,transform .16s}
.pd__b2b:hover{border-color:var(--rose);box-shadow:0 6px 18px rgba(0,0,0,.06);transform:translateY(-1px)}
.pd__b2b-i{font-size:1.5rem;line-height:1;flex:0 0 auto}
.pd__b2b small{color:var(--ink-3);font-size:.82rem}
.pd__b2b-a{margin-inline-start:auto;color:var(--rose);font-size:1.15rem;flex:0 0 auto}
/* ===== PACKAGE 6: three-level mega menu ===== */
.nav__sub--3{display:flex;gap:26px;flex-wrap:wrap;min-width:min(760px,88vw);padding:20px 24px}
.nav__col{display:flex;flex-direction:column;gap:2px;min-width:150px}
.nav__l2{font-weight:600!important;color:var(--ink)!important;padding:4px 0!important;
border-bottom:1px solid var(--line);margin-bottom:5px}
.nav__l3{font-size:.86rem;padding:3px 0!important;color:var(--ink-2)!important}
.nav__l3:hover{color:var(--rose)!important}
@media(max-width:960px){
.nav__sub--3{flex-direction:column;gap:14px;min-width:0;padding:10px 0 10px 14px}
.nav__col{min-width:0}
}
/* ===== HOTFIX 4: zoom button, lightbox, pan-on-zoom ===== */
.gal__zoom{position:absolute;inset-inline-end:12px;inset-block-end:12px;width:38px;height:38px;
display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);
color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.14);transition:transform .16s,background .16s}
.gal__m:hover .gal__zoom{transform:scale(1.08);background:#fff}
.gal__hint{font-size:.78rem;color:var(--ink-3);margin:8px 0 0;text-align:center}
@media(hover:none){.gal__hint{display:none}}
.lb{position:fixed;inset:0;z-index:2000;background:rgba(24,18,16,.94);
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:52px 10px 40px}
.lb[hidden]{display:none}
.lb__img{grid-column:2;max-width:100%;max-height:calc(100vh - 100px);
width:auto;height:auto;margin:0 auto;display:block;object-fit:contain;
transition:transform .22s ease;transform-origin:center center;cursor:zoom-in;touch-action:pan-x pan-y}
.lb__img.is-zoom{cursor:grab;transform:scale(2.2)}
.lb__x{position:absolute;top:12px;inset-inline-end:14px;width:44px;height:44px;border:0;border-radius:50%;
background:rgba(255,255,255,.14);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer}
.lb__x:hover{background:rgba(255,255,255,.26)}
.lb__nav{width:50px;height:50px;border:0;border-radius:50%;background:rgba(255,255,255,.14);
color:#fff;font-size:2rem;line-height:1;cursor:pointer;flex:0 0 auto}
.lb__nav:hover{background:rgba(255,255,255,.26)}
.lb__prev{grid-column:1}
.lb__next{grid-column:3}
.lb__cap{position:absolute;inset-inline:0;bottom:12px;text-align:center;color:rgba(255,255,255,.72);
font-size:.82rem;pointer-events:none}
@media(max-width:700px){
.lb{padding:48px 4px 44px}
.lb__nav{width:42px;height:42px;font-size:1.6rem}
.lb__img.is-zoom{transform:scale(2.6)}
}
[dir=rtl] .lb__prev{grid-column:3}
[dir=rtl] .lb__next{grid-column:1}
/* card images: show the whole product, do not crop heads or hems */
.card__img{background:#fff}
.card__img img{object-fit:contain!important;background:#fff}
/* ===== PACKAGE 7: real products in the hero ===== */
.hero__art figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:#fff}
.hero__art figure a{display:block;text-decoration:none;color:inherit}
.hero__art figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.hero__art figure a:hover img{transform:scale(1.04)}
.hero__art figcaption{position:absolute;inset-inline:0;bottom:0;padding:22px 12px 10px;
background:linear-gradient(to top,rgba(24,18,16,.78),rgba(24,18,16,0));
color:#fff;display:flex;flex-direction:column;gap:2px}
.hero__pn{font-size:.8rem;line-height:1.25;font-weight:500}
.hero__pp{font-size:.92rem;font-weight:700}
.hero__art .bdg--ad{align-self:flex-start;margin-bottom:3px}
/* ===== the legally required "Anzeige" label ===== */
.bdg--ad{background:rgba(24,18,16,.72);color:#fff;font-size:.62rem;letter-spacing:.07em;
text-transform:uppercase;font-weight:600;padding:3px 7px;border-radius:5px;backdrop-filter:blur(3px)}
.card .bdg--ad{position:absolute;top:10px;inset-inline-start:10px;z-index:2}
.ad-note{font-size:.78rem;color:var(--ink-3);background:var(--sand);border:1px solid var(--line);
border-radius:8px;padding:7px 10px;margin-bottom:10px}
/* ===== PACKAGE 8: price transparency (§ 6 PAngV) ===== */
.pd__ship{font-size:.88rem;color:var(--ink-2);margin:-8px 0 16px;line-height:1.55}
.pd__ship .ok{color:var(--ok)}
.pd__ship a{color:var(--rose)}
.pd__nudge{display:inline-block;margin-top:5px;font-size:.82rem;color:var(--rose);
background:#fdf2f6;border-radius:6px;padding:3px 9px}
.card__vat{display:block;font-size:.72rem;color:var(--ink-3);line-height:1.45;margin-top:2px}
.card__vat .ln-ship{color:var(--ink-3);text-decoration:underline}
.card__vat .ln-ship:hover{color:var(--rose)}
/* ===== HOTFIX 8: panel language switch — OUTSIDE the grid =====
.panel is display:grid with two columns. A third direct child gets
its own cell and wrecks the layout, which is what broke the panels.
This element now lives under , so it simply floats. */
.plang{position:fixed;top:10px;inset-inline-end:14px;z-index:70;display:flex;gap:3px;
background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;
box-shadow:0 2px 12px rgba(0,0,0,.10)}
.plang a{display:grid;place-items:center;min-width:30px;height:26px;border-radius:6px;
font-size:.74rem;font-weight:700;color:var(--ink-3);text-decoration:none;letter-spacing:.03em;
transition:background .15s,color .15s}
.plang a:hover{background:var(--sand);color:var(--ink)}
.plang a.is-on{background:var(--rose);color:#fff}
@media(max-width:900px){.plang{top:auto;bottom:12px;inset-inline-end:12px}}
/* belt and braces: the grid must only ever lay out these two children */
.panel>.plang{position:fixed}
/* age tiles: caption now carries a count */
.age__t small{display:block;font-weight:500;font-size:.74rem;opacity:.85;margin-top:2px}
/* category chip count */
.chip__n{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-inline-start:6px;
border-radius:10px;background:rgba(0,0,0,.07);font-size:.68rem;font-weight:700;padding:0 5px}
.chip.is-on .chip__n{background:rgba(255,255,255,.26)}
/* =====================================================================
HOTFIX 9 — HOT ZONE, two-column slide.
Portrait image column + copy column. A 4:5 image box matches the
shape of a product photo, so object-fit:contain no longer creates
white bars, and the copy column fills its own height. No gap can
appear because there is no leftover space in the grid.
===================================================================== */
.hz{background:linear-gradient(135deg,#fdf5f8 0%,#fbf0eb 45%,#f6ebe3 100%);
border-bottom:1px solid var(--line)}
.hz__in{display:grid;grid-template-columns:1.34fr 1fr;gap:clamp(14px,2vw,26px);
padding-block:clamp(18px,2.6vw,30px);align-items:stretch}
.hz__slider{position:relative;background:#fff;border-radius:var(--r);
box-shadow:0 12px 40px rgba(90,60,50,.12);overflow:hidden}
.hzs{display:none}
.hzs.is-on{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
height:100%;animation:hzfade .4s ease}
@keyframes hzfade{from{opacity:0}to{opacity:1}}
.hzs__img{position:relative;display:block;background:var(--sand);overflow:hidden}
.hzs__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hzs__img:hover img{transform:scale(1.05)}
.hzs__seal{position:absolute;top:12px;inset-inline-start:12px;width:54px;height:54px;border-radius:50%;
background:var(--rose);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.92rem;
box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:2}
.hzs__b{padding:clamp(18px,2.2vw,30px) clamp(18px,2.4vw,32px);
display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0}
.hzs__tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tg{font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:4px 9px;border-radius:20px;white-space:nowrap}
.tg--hot{background:var(--rose);color:#fff}
.tg--save{background:#1f6b45;color:#fff}
.tg--new{background:var(--ink);color:#fff}
.tg--ad{background:rgba(24,18,16,.09);color:var(--ink-2)}
.hzs__v{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;
color:var(--ink-3);font-weight:600;margin-bottom:5px}
.hzs__h{font-family:var(--fd);font-size:clamp(1.2rem,2vw,1.72rem);line-height:1.2;
margin:0 0 9px;letter-spacing:-.01em}
.hzs__h a{color:var(--ink);text-decoration:none}
.hzs__h a:hover{color:var(--rose)}
.hzs__sub{color:var(--ink-2);font-size:.9rem;line-height:1.55;margin:0 0 14px}
.hzs__row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.hzs__price{font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:700;letter-spacing:-.02em}
.hzs__row del{color:var(--ink-3);font-size:.98rem}
.hzs__vat{font-size:.74rem;color:var(--ink-3);margin:0 0 10px}
.hzs__vat a,.hzs__vat .ln-ship{color:var(--ink-3);text-decoration:underline}
.hzs__vat a:hover{color:var(--rose)}
.hzs__st{font-size:.82rem;font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:6px}
.hzs__st::before{content:"";width:7px;height:7px;border-radius:50%}
.hzs__st--in{color:#1f6b45} .hzs__st--in::before{background:#2e9d68}
.hzs__st--low{color:#b06a12} .hzs__st--low::before{background:#e0921f}
.hzs__st--out{color:var(--err)} .hzs__st--out::before{background:var(--err)}
.hzs__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hzs__cta form{margin:0}
.hzs__more{font-weight:600;font-size:.88rem;color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--line);padding-bottom:2px}
.hzs__more:hover{color:var(--rose);border-color:var(--rose)}
.hzs__nudge{display:inline-block;margin:13px 0 0;font-size:.78rem;color:var(--rose);
background:#fff;border:1px dashed #e7c3d2;border-radius:7px;padding:5px 11px;align-self:flex-start}
.hzs__trust{list-style:none;display:flex;gap:14px;flex-wrap:wrap;margin:15px 0 0;padding:0;
font-size:.74rem;color:var(--ink-3)}
.hz__nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;
border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);font-size:1.4rem;line-height:1;
cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.16);z-index:4;opacity:0;transition:opacity .2s}
.hz__slider:hover .hz__nav{opacity:1}
.hz__nav:hover{background:#fff;color:var(--rose)}
.hz__nav--p{inset-inline-start:10px}
.hz__nav--n{inset-inline-end:10px}
[dir=rtl] .hz__nav{transform:translateY(-50%) scaleX(-1)}
.hz__dots{position:absolute;bottom:10px;inset-inline-start:0;inset-inline-end:0;
display:flex;justify-content:center;gap:6px;z-index:4}
.hz__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:rgba(24,18,16,.20);transition:.2s}
.hz__dots button.is-on{background:var(--rose);width:22px;border-radius:5px}
/* 2x2 promo block — same overall height as the slider */
.hz__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
gap:clamp(10px,1.3vw,13px)}
.hzc{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;
overflow:hidden;display:flex;flex-direction:column;transition:.18s;min-width:0}
.hzc:hover{border-color:var(--rose);box-shadow:0 8px 22px rgba(0,0,0,.08);transform:translateY(-2px)}
.hzc__i{position:relative;display:block;background:var(--sand);flex:1 1 auto;min-height:0;overflow:hidden}
.hzc__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s ease}
.hzc:hover .hzc__i img{transform:scale(1.06)}
.hzc__pc{position:absolute;top:8px;inset-inline-start:8px;background:var(--rose);color:#fff;
font-size:.66rem;font-weight:700;padding:3px 7px;border-radius:5px;z-index:2}
.hzc__new{position:absolute;top:8px;inset-inline-start:8px;background:var(--ink);color:#fff;
font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:3px 7px;border-radius:5px;z-index:2}
.hzc__ad{position:absolute;top:8px;inset-inline-end:8px;background:rgba(255,255,255,.93);
color:var(--ink-2);font-size:.56rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:2px 6px;border-radius:4px;z-index:2}
.hzc__b{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.hzc__t{font-size:.8rem;font-weight:500;line-height:1.28;margin:0;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hzc__t a{color:var(--ink);text-decoration:none}
.hzc__t a:hover{color:var(--rose)}
.hzc__p{display:flex;align-items:baseline;gap:6px;padding-top:3px}
.hzc__p strong{font-size:.97rem;font-weight:700}
.hzc__p del{font-size:.74rem;color:var(--ink-3)}
.hzc__f{margin:5px 0 0}
.hzc__f button{width:100%;border:1px solid var(--ink);background:#fff;color:var(--ink);
font:600 .74rem/1 var(--f);padding:7px 5px;border-radius:7px;cursor:pointer;transition:.15s}
.hzc__f button:hover{background:var(--rose);border-color:var(--rose);color:#fff}
.hzc__out{margin-top:5px;font-size:.7rem;font-weight:600;color:var(--err)}
@media(max-width:1080px){
.hz__in{grid-template-columns:1fr}
.hzs.is-on{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.hz__nav{opacity:1}
.hz__grid{grid-template-rows:auto auto}
.hzc__i{flex:0 0 auto;aspect-ratio:4/5}
}
@media(max-width:620px){
.hzs.is-on{grid-template-columns:1fr}
.hzs__img{aspect-ratio:4/3.4}
.hzs__img img{position:static;height:100%}
.hzs__b{padding:16px}
.hzs__trust{display:none}
.hz__nav{width:32px;height:32px;font-size:1.2rem;top:28%}
.hzc__f button{font-size:.7rem}
}
/* ===== PACKAGE 12: welcome promo card ===== */
.pv{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:18px}
.pv[hidden]{display:none}
.pv__bk{position:absolute;inset:0;background:rgba(24,18,16,.62);backdrop-filter:blur(3px);
animation:pvbk .28s ease}
@keyframes pvbk{from{opacity:0}to{opacity:1}}
.pv__c{position:relative;z-index:2;background:#fff;border-radius:18px;overflow:hidden;
display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
width:min(780px,100%);max-height:min(86vh,620px);
box-shadow:0 26px 70px rgba(0,0,0,.34);animation:pvin .34s cubic-bezier(.2,.8,.2,1)}
@keyframes pvin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.pv__x{position:absolute;top:10px;inset-inline-end:10px;z-index:4;width:38px;height:38px;border:0;
border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);font-size:1.7rem;line-height:1;
cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.pv__x:hover{background:#fff;color:var(--rose)}
.pv__img{position:relative;display:block;background:var(--sand);min-height:220px}
.pv__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv__seal{position:absolute;bottom:12px;inset-inline-start:12px;background:var(--rose);color:#fff;
font-weight:700;font-size:.9rem;padding:6px 12px;border-radius:20px}
.pv__b{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;justify-content:center;
overflow-y:auto}
.pv__tag{align-self:flex-start;background:var(--rose);color:#fff;font-size:.64rem;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:11px}
.pv__b h2{font-family:var(--fd);font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.2;
margin:0 0 9px;color:var(--ink)}
.pv__t{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:0 0 14px}
.pv__n{font-size:.84rem;font-weight:600;color:var(--ink);margin:0 0 3px}
.pv__p{display:flex;align-items:baseline;gap:9px;margin:0 0 2px}
.pv__p strong{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.pv__p del{color:var(--ink-3);font-size:.92rem}
.pv__v{font-size:.72rem;color:var(--ink-3);margin:0 0 16px}
.pv__go{width:100%;text-align:center}
.pv__skip{margin-top:11px;background:none;border:0;color:var(--ink-3);font:500 .8rem/1.4 var(--f);
cursor:pointer;text-decoration:underline;padding:4px}
.pv__skip:hover{color:var(--rose)}
@media(max-width:680px){
.pv{padding:12px}
.pv__c{grid-template-columns:1fr;max-height:92vh}
.pv__img{aspect-ratio:16/10;min-height:0}
.pv__b{padding:18px}
.pv__b h2{font-size:1.15rem}
}
/* ===== PACKAGE 13: notifications, sidebar badges, image manager, idle bar ===== */
.nts{display:flex;flex-direction:column;gap:8px;margin:0 0 22px}
.nt{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:12px;
text-decoration:none;border:1px solid var(--line);background:#fff;transition:.16s}
.nt:hover{transform:translateX(2px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.nt__n{flex:0 0 auto;min-width:32px;height:32px;padding:0 8px;border-radius:9px;display:grid;
place-items:center;font-weight:700;font-size:.98rem}
.nt__b{display:flex;flex-direction:column;gap:1px;min-width:0}
.nt__b strong{font-size:.9rem;font-weight:600;color:var(--ink)}
.nt__b small{font-size:.76rem;color:var(--ink-3)}
.nt__go{margin-inline-start:auto;color:var(--ink-3);font-size:1.1rem}
.nt--urgent{border-color:#f3c9c9;background:#fff6f6}
.nt--urgent .nt__n{background:#b3261e;color:#fff}
.nt--warn{border-color:#f0dcb8;background:#fffaf2}
.nt--warn .nt__n{background:#e0921f;color:#fff}
.nt--info .nt__n{background:var(--sand);color:var(--ink)}
.nt--ok{border-color:#bfe3d0;background:#f2faf5}
.nt--ok .nt__n{background:#2e9d68;color:#fff}
.nt--none{padding:11px 15px;border-radius:12px;background:#f2faf5;border:1px solid #bfe3d0;
color:#1f6b45;font-size:.88rem;font-weight:500;margin:0 0 22px}
.sbadge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
margin-inline-start:6px;border-radius:10px;background:var(--rose);color:#fff;
font-size:.66rem;font-weight:700;vertical-align:middle}
.imgs{display:flex;gap:11px;flex-wrap:wrap;margin:0 0 14px}
.imgs__i{position:relative;margin:0;width:104px;border:1px solid var(--line);border-radius:9px;
overflow:hidden;background:var(--sand)}
.imgs__i.is-cover{border-color:var(--rose);box-shadow:0 0 0 2px rgba(179,69,107,.18)}
.imgs__i img{display:block;width:104px;height:138px;object-fit:cover}
.imgs__badge{position:absolute;top:5px;inset-inline-start:5px;background:var(--rose);color:#fff;
font-size:.56rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:2px 6px;border-radius:4px}
.imgs__a{display:flex;border-top:1px solid var(--line);background:#fff}
.imgs__a form{display:flex;width:100%;margin:0}
.imgs__a button{flex:1;border:0;background:#fff;color:var(--ink-2);cursor:pointer;
padding:6px 0;font-size:.82rem;line-height:1;border-inline-end:1px solid var(--line)}
.imgs__a button:last-child{border-inline-end:0}
.imgs__a button:hover:not(:disabled){background:var(--sand);color:var(--ink)}
.imgs__a button:disabled{opacity:.3;cursor:default}
.imgs__a button.dl:hover{background:#fff1f1;color:var(--err)}
.idle{position:fixed;bottom:0;inset-inline:0;z-index:90;background:#2b2320;color:#fff;
display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
padding:12px 18px;font-size:.88rem;box-shadow:0 -4px 18px rgba(0,0,0,.2)}
.idle b{font-variant-numeric:tabular-nums}
.idle button{background:var(--rose);color:#fff;border:0;border-radius:8px;
padding:9px 20px;font:600 .86rem var(--f);cursor:pointer}
.idle button:hover{background:#9c3a5d}
/* ===== PACKAGE 15: advert slots REBUILT =====
Package 14 let the product PHOTO decide the height (aspect-ratio:4/5).
"Little Noor" uses a tall material-spec graphic as its cover, so the
lead tile grew to ~700px and swallowed the cart page. Now the BOX sets
a fixed height and the photo is cropped into it, so no upload shape
can ever break the layout again. */
.pslot{margin:30px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.pslot__h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.pslot__h h2{margin:0;font-size:1.06rem;font-weight:600}
.pslot__all{font-size:.8rem;color:var(--rose);text-decoration:none;white-space:nowrap}
.pslot__all:hover{text-decoration:underline}
/* one wide lead + two narrow verticals, exactly as drawn */
.pslot__g{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:stretch}
.pslot__side{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
@media(max-width:700px){.pslot__g{grid-template-columns:1fr}}
.ptile{position:relative;display:flex;flex-direction:column;background:#fff;min-width:0;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s}
.ptile:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.ptile__i{display:block;background:var(--sand);line-height:0;overflow:hidden}
/* THE FIX — fixed pixel heights, photo cropped to fit */
.ptile__i img{display:block;width:100%;height:150px;object-fit:cover}
.ptile--lead .ptile__i img{height:210px}
@media(max-width:700px){.ptile--lead .ptile__i img{height:190px}}
.ptile__ad{position:absolute;top:8px;inset-inline-start:8px;z-index:2}
.ptile__sale{position:absolute;top:8px;inset-inline-start:8px;z-index:2;background:var(--rose);
color:#fff;font-size:.66rem;font-weight:700;padding:3px 7px;border-radius:5px}
.ptile__b{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;flex:1;min-width:0}
.ptile__v{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
/* two lines maximum, so a long name cannot stretch one tile past its neighbour */
.ptile__t{margin:0;font-size:.8rem;font-weight:500;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ptile--lead .ptile__t{font-size:.92rem}
.ptile__t a{color:inherit;text-decoration:none}
.ptile__t a:hover{color:var(--rose)}
.ptile__p{display:flex;align-items:baseline;gap:6px;margin-top:2px;flex-wrap:wrap}
.ptile__p strong{font-size:.95rem}
.ptile--lead .ptile__p strong{font-size:1.06rem}
.ptile__p del{font-size:.76rem;color:var(--ink-3)}
.ptile__vat{font-size:.66rem;color:var(--ink-3);line-height:1.35}
.ptile__vat a{color:var(--ink-3)}
.ptile__add{margin-top:auto;padding-top:8px}
.ptile__add .btn{font-size:.76rem;padding:7px 10px}
/* the quiet wide row under checkout / thank-you */
.prow{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.prow__h{margin:0 0 12px;font-size:.98rem;font-weight:600}
.prow__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px}
@media(max-width:620px){.prow__g{grid-template-columns:1fr 1fr}}
.prow__i{position:relative;min-width:0}
.prow__i img{display:block;width:100%;height:140px;object-fit:cover;border-radius:9px;
border:1px solid var(--line);background:var(--sand)}
.prow__i h3{margin:6px 0 1px;font-size:.76rem;font-weight:500;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prow__i h3 a{color:inherit;text-decoration:none}
.prow__i h3 a:hover{color:var(--rose)}
.prow__i strong{font-size:.85rem;display:block}
.prow__i .ptile__vat{display:block}
/* password box */
.pwbox{max-width:540px}
.pwhint{font-size:.76rem;color:var(--ink-3);margin:4px 0 0;line-height:1.5}
.trust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:11px}
.trust li{display:flex;gap:10px;align-items:flex-start}
.trust__i{flex:0 0 26px;height:26px;border-radius:7px;background:#fff;border:1px solid var(--line);
display:grid;place-items:center;font-size:.86rem;color:var(--rose)}
.trust li span span,.trust li>span:last-child{display:flex;flex-direction:column}
.trust strong{font-size:.81rem;font-weight:600}
.trust small{font-size:.72rem;color:var(--ink-3)}
/* ===== PACKAGE 16: the rented cart boxes =====
These live INSIDE the left cart column, not after the grid. In
Package 15 the block came after the whole .cart grid, so it began
below the summary sidebar and pushed the page down - the "breaking
next page" problem. Height is fixed by the BOX, never by the photo,
so a seller's 3000px poster cannot move the layout by one pixel. */
.cads{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0}
.cads--wide{grid-template-columns:1fr}
@media(max-width:560px){.cads{grid-template-columns:1fr}}
.cad{position:relative;display:flex;flex-direction:column;background:#fff;min-width:0;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
text-decoration:none;transition:.18s}
.cad:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.cad__i{display:block;line-height:0;background:var(--sand);overflow:hidden}
.cad__i img{display:block;width:100%;height:170px;object-fit:cover}
.cad--wide .cad__i img{height:190px}
.cad__ad{position:absolute;top:8px;inset-inline-start:8px;z-index:2;
background:rgba(24,18,16,.72);color:#fff;font-size:.6rem;letter-spacing:.07em;
text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:5px;backdrop-filter:blur(3px)}
.cad__b{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;flex:1;min-width:0}
.cad__v{font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.cad__t{margin:0;font-size:.82rem;font-weight:500;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cad--wide .cad__t{font-size:.92rem}
.cad__t a{color:inherit;text-decoration:none}
.cad__t a:hover{color:var(--rose)}
.cad__p{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:1px}
.cad__p strong{font-size:.96rem}
.cad__p del{font-size:.76rem;color:var(--ink-3)}
.cad__vat{font-size:.66rem;color:var(--ink-3);line-height:1.35}
.cad__add{margin-top:auto;padding-top:8px}
.cad__add .btn{font-size:.76rem;padding:7px 10px}
/* an unsold box, shown only to you and to sellers */
.cad--free{align-items:center;justify-content:center;gap:4px;min-height:170px;padding:18px 14px;
border-style:dashed;border-color:#d8c3cd;background:#fffafc;text-align:center}
.cad--free:hover{border-color:var(--rose);background:#fff6f9}
.cad__free-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
color:var(--ink-3);font-weight:700}
.cad--free strong{font-size:1.06rem;color:var(--rose)}
.cad--free small{font-size:.72rem;color:var(--ink-3)}
/* a customer must never see empty rented space - it says the shop is
empty. So the placeholder collapses to nothing for her. */
.cad--ghost{display:none}
/* ===== PACKAGE 17: placement action controls =====
Many small controls in one table cell. They must wrap instead of
stretching the table, otherwise the placement list becomes a
horizontal scroll nobody uses. */
.pactions{white-space:normal;min-width:212px}
.pactions form{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0}
.pactions .btn{padding:5px 9px;font-size:.73rem;white-space:nowrap}
.pactions__g{display:inline-flex;align-items:center;gap:4px;
background:var(--sand);border:1px solid var(--line);border-radius:8px;padding:3px}
.pactions__g input[type=number]{width:52px;padding:4px 5px;font-size:.73rem;
border:1px solid var(--line);border-radius:5px;background:#fff}
.pactions__g select{padding:4px 5px;font-size:.73rem;border:1px solid var(--line);
border-radius:5px;background:#fff;max-width:150px}
.pactions__g .btn{padding:4px 8px}
.pactions__del{color:var(--err)}
.pactions__del:hover{background:#fff1f1;border-color:#f0c8c8}
/* ===== PACKAGE 19: return form lines ===== */
.retline{display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center;
padding:12px 0;border-bottom:1px solid var(--line)}
.retline:last-of-type{border-bottom:0}
.retline img{display:block;width:54px;height:72px;object-fit:cover;border-radius:6px;
border:1px solid var(--line);background:var(--sand)}
.retline input[type=number]{padding:6px 8px;border:1px solid var(--line);border-radius:6px;
font:inherit;font-size:.86rem;background:#fff}
@media(max-width:520px){
.retline{grid-template-columns:44px 1fr}
.retline>div:last-child{grid-column:2}
.retline img{width:44px;height:58px}
}
/* ===== PACKAGE 20: tagline, product video ===== */
.p-tag{margin:0 0 12px;font-size:.98rem;line-height:1.5;color:var(--ink-2);
font-style:italic;max-width:56ch}
.cad__tag{font-size:.7rem;line-height:1.35;color:var(--ink-3);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pvid{margin:34px 0 0}
.pvid__h{margin:0 0 12px;font-size:1.06rem;font-weight:600}
/* 16:9 without any JavaScript, and it cannot overflow on a phone */
.pvid__f{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r);
overflow:hidden;background:#1a1512;border:1px solid var(--line)}
.pvid__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ===== HOTFIX 11: NEVER CROP A GRAPHIC =====
object-fit:cover fills the box by cutting the overflow. That is right
for a model photo and WRONG for a spec sheet, a size chart or any
image with words in it — cutting a word in half makes the shop look
broken, which is exactly what the "Material & Features" tile did.
assets/js/app.js measures each image AFTER it loads and adds .is-fit
when it is NOT clearly portrait. Portrait = a photo, keep cover.
Landscape or square = usually a graphic, so CONTAIN it and let the
box breathe. The decision is made from the real pixels, so it is
automatic for every future upload and needs no seller input.
.is-fit is appended LAST on purpose: it must override the many
object-fit:cover rules written in earlier packages without me having
to edit each one and risk breaking a layout that already works. */
.card__img img.is-fit,
.ptile__i img.is-fit,
.cad__i img.is-fit,
.prow__i img.is-fit,
.imgs__i img.is-fit,
.hzs__img img.is-fit,
.hzc__i img.is-fit,
.age img.is-fit,
.line__i img.is-fit,
.retline img.is-fit,
.pv__img img.is-fit{
object-fit:contain!important;
background:#fff;
padding:6px;
}
/* a graphic on the sand background looks washed out; white reads as
"this is a document", which is what it is */
.card__img img.is-fit,.hzs__img img.is-fit{padding:8px}
/* The hero is the biggest offender because it is the tallest box.
Give a contained hero graphic a little more room and a soft frame so
it does not float in emptiness. */
.hzs__img img.is-fit{background:linear-gradient(180deg,#fffdfb,#faf5f1)}
/* Thumbnail strips: a contained graphic needs a visible edge or it
dissolves into the page. */
.gal__t img.is-fit{padding:3px}
/* While we do not yet know the shape, hide nothing and shift nothing:
the image keeps its box, so no layout jump when .is-fit lands. */
img[data-fit-pending]{opacity:1}
/* =====================================================================
HOTFIX 12 — THE 2x2 PROMO TILES WERE A LETTERBOX, NOT A TILE
WHY THE HEADS WERE CUT OFF, and why Hotfix 11 could not help:
.hz__in is a grid with align-items:stretch, so the right column
was FORCED to match the height of the tall hero slide.
.hz__grid split that height into two equal rows (1fr 1fr).
.hzc__i then received whatever was LEFT OVER after the title,
the price and the Add-to-cart button had taken theirs.
Measured on the live page: a tile ~225 px wide left the image roughly
225 x 85 px — a wide, SHORT letterbox. object-fit:cover fills that
from a 3:4 portrait photo by keeping the middle band and discarding
the top and bottom. Head gone, feet gone, waist left.
Hotfix 11 behaved correctly and did nothing here: the Abaya photo IS
portrait, so it was classified as a photo and cropped. The right
decision inside an impossible box.
So the BOX had to change, not the image.
Measured result of this fix: the photo goes from 28 % of its height
visible to 75 %.
===================================================================== */
/* 1 — The image gets a REAL shape instead of leftovers.
Square suits both portrait photos and wide graphics, and it is
the only shape that cannot become a letterbox. max-height stops
it growing absurdly tall on a very wide monitor. */
.hzc__i{position:relative;flex:0 0 auto;aspect-ratio:1/1;max-height:290px;min-height:0}
.hzc__i img{position:absolute;inset:0;width:100%;height:100%}
/* 2 — Rows size to their content now. With 1fr 1fr the browser divided
a height that had nothing to do with the images. */
.hz__grid{grid-template-rows:auto auto;align-content:start}
/* 3 — Both columns stay the same height, so the block still looks
composed: the hero image simply grows to match the two tiles
rather than the tiles being squeezed to match the hero. */
.hz__in{align-items:stretch}
.hzs.is-on{align-items:stretch}
/* 4 — KEEP THE FACE. This single line is the difference between a shop
that looks professional and one that looks decapitated: in
fashion photography the face sits in the TOP THIRD, never the
centre, so any crop must be taken from the top. */
.hzc__i img,
.card__img img,
.ptile__i img,
.cad__i img,
.prow__i img,
.hzs__img img,
.line__i img,
.imgs__i img{object-position:50% 18%}
/* A CONTAINED graphic must stay centred — nudging it up would leave a
gap underneath and read as a mistake rather than a choice. */
.hzc__i img.is-fit,
.card__img img.is-fit,
.ptile__i img.is-fit,
.cad__i img.is-fit,
.prow__i img.is-fit,
.hzs__img img.is-fit,
.line__i img.is-fit,
.imgs__i img.is-fit{object-position:50% 50%}
/* Phone: single column, so the tiles can be taller and show more of
the garment. */
@media(max-width:700px){
.hzc__i{aspect-ratio:4/5;max-height:none}
}
/* ============================================================
PACKAGE 21 — UPLOADED LOGO + BRAND SETTINGS SCREEN
The wordmark rules (.logo, .ftr__logo, .pside__b) set a serif font,
a size and a colour. None of that applies to an , but the font
size still adds line-height AROUND it, which is what makes an
uploaded logo sit slightly off-centre. The --img variants switch
those rules off instead of fighting them.
============================================================ */
.brandlogo{height:44px;width:auto;max-width:100%;display:block}
.logo--img{font-size:0;line-height:0;display:flex;align-items:center;flex:0 0 auto}
.logo--img img{max-height:56px}
.ftr__logo--img{font-size:0;line-height:0;margin-bottom:14px}
.ftr__logo--img img{max-height:52px}
.pside__b--img{line-height:0;font-size:0}
.pside__b--img img{margin-bottom:8px}
.pside__b--img small{font-size:.7rem;line-height:1.4;display:inline-block}
/* The header is a flex row: the search field must keep shrinking, the
logo must not. Without flex:0 0 auto a wide logo squeezes the search
box to nothing on a tablet. */
@media(max-width:780px){.logo--img img{max-height:38px}}
/* Admin: the live image next to its own field, so you SEE what is in
use before you replace it. That is the difference between confident
and hopeful. */
.brow{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start;
padding:16px 0;border-top:1px solid var(--line)}
.brow:first-of-type{border-top:0}
.brow__p{min-height:90px;display:flex;align-items:center;justify-content:center;
background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:10px;
font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--ink);text-align:center}
.brow__p--dark{background:var(--ink);border-color:var(--ink)}
.brow__p--tall{min-height:160px}
.brow__p--empty{border-style:dashed}
.brow__p img{max-width:100%;max-height:140px;width:auto;object-fit:contain}
.brow__f>label{display:block;margin-bottom:6px}
.brow__f input[type=file]{width:100%;max-width:430px;font-size:.9rem;padding:9px 10px;
border:1px solid var(--line);border-radius:var(--r-s);background:#fff}
@media(max-width:620px){.brow{grid-template-columns:1fr}}
/* HOTFIX 17 — line sum beside the product-page quantity stepper. */
.pd__linesum{display:block;width:100%;margin-top:8px;font-size:.92rem;color:var(--ink-2)}
.pd__linesum b{color:var(--ink);font-weight:700}
/* ===== PACKAGE 27 ===== */
/* .card__wish is absolutely positioned for the grid tile. On the product
page the same button sits in the buy row, so position and offsets are
reset here instead of writing a second component that could drift. */
.pd__wish{position:static;width:46px;height:46px;border:1px solid var(--line);
background:#fff;flex:0 0 auto}
.pd__wish:hover{border-color:var(--rose)}
/* ===== PACKAGE 28 ===== */
/* "Versand durch Kopftuch.shop". Deliberately QUIETER than the Sponsored
note: it is information, not a disclosure we are obliged to shout. */
.fbk-row{margin:6px 0 2px}
.fbk{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;
background:#eef6f1;color:#14543c;font:600 .76rem var(--f);cursor:help}
/* ===== PACKAGE 30 =====================================================
FULFILMENT UI. Three rules, and they are all about restraint.
1. The FBK badge is GREEN-TINTED, not rose. It is a positive, factual
signal - "we posted this" - and must read as information rather than
as a warning or a promotion. Deliberately quieter than .ad-note: a
paid placement is a disclosure we are OBLIGED to make, this is a
service we chose to offer.
2. .pd__wish resets .card__wish for the product page. The grid version is
position:absolute for the tile corner; on the PDP the same button sits
in the buy row. HOTFIX 20 taught this the hard way - a cached
stylesheet left the button absolutely positioned against the document
and it flew behind the sticky header. Keep this rule and the inline
style in produkt.php; belt and braces on a control she cannot reach
any other way.
3. The admin tables use a monospace code chip for location codes
(DO-KELLER, DU-LAGER) so a warehouse code never reads as prose. On a
pick list printed at 7 a.m. that distinction matters.
===================================================================== */
/* Fulfilled by Kopftuch.shop - the only shipping badge in the shop.
Self-shipped products carry no badge at all: absence is the signal. */
.fbk{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;
background:#eaf7f1;color:#14543c;font:600 .78rem var(--f);cursor:help;white-space:nowrap}
.fbk-row{margin:6px 0 2px}
/* The product-page wishlist button, un-absolute'd. See note 2 above. */
.pd__wish{position:static;width:46px;height:46px;border:1px solid var(--line);
background:#fff;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.pd__wish:hover{border-color:var(--rose)}
/* Location / warehouse codes in admin tables. */
.pmain .tbl code{font:600 .76rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
background:var(--sand);padding:1px 6px;border-radius:4px;white-space:nowrap}
/* Pick lists are printed. Hide the furniture, keep the table. */
@media print{
.pside,.phead,.btn,.fld,form .hint,.ks-alert{display:none!important}
.pmain{padding:0!important}
.box{border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 14px!important}
.tbl{font-size:11pt}
.tbl--sc{overflow:visible!important}
}
/* =====================================================================
PACKAGE 33 / HOTFIX 30b - appended block, v4.4
Everything above this line is untouched, so no existing page can shift.
CORRECTED BEFORE SHIPPING: my draft used var(--fd), var(--r-m) and
var(--gold). This stylesheet defines --fd for the heading font, --r for
the medium radius, and has no --gold at all. An undefined CSS variable
does not error - it silently falls back, so the new sections would have
rendered in the body font with wrong corners and an invisible accent.
Mapped to --fd, --r and --rose-d.
===================================================================== */
/* =====================================================================
PACKAGE 33 - FULFILMENT PAGE + HOMEPAGE HERO
Appended. Nothing above is modified, so no existing page can shift.
Every colour is an existing variable - a new palette here would make
the shop look like two different shops.
===================================================================== */
/* ---------------- fulfilment hero ---------------- */
.ff-hero{background:
radial-gradient(1200px 500px at 15% -10%,rgba(224,154,180,.22),transparent 60%),
radial-gradient(900px 420px at 95% 0%,rgba(212,175,110,.18),transparent 55%),
var(--sand);
padding:clamp(34px,6vw,76px) 0 clamp(30px,5vw,60px);border-bottom:1px solid var(--line)}
.ff-hero__in{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(22px,4vw,54px);align-items:center}
.ff-hero h1{font:700 clamp(2rem,5.2vw,3.5rem)/1.05 var(--fd);margin:.3em 0 .45em;letter-spacing:-.02em}
.ff-hero__sub{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;color:var(--ink-2);max-width:56ch}
.ff-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.ff-hero__fine{font-size:.86rem;color:var(--ink-3);max-width:60ch;border-inline-start:3px solid var(--rose);
padding-inline-start:12px;line-height:1.6}
.ff-hero__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
padding:22px;box-shadow:var(--sh-h)}
.ff-badge{display:inline-block;background:var(--ink);color:#fff;font:600 .78rem var(--f);
padding:6px 12px;border-radius:999px;letter-spacing:.02em}
.ff-count{display:flex;align-items:baseline;gap:10px;margin:16px 0 6px}
.ff-count strong{font:700 3.2rem/1 var(--fd);color:var(--rose)}
.ff-count span{font-size:.9rem;color:var(--ink-3);line-height:1.35}
.ff-ticks{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:9px}
.ff-ticks li{position:relative;padding-inline-start:26px;font-size:.92rem;line-height:1.5}
.ff-ticks li::before{content:"\2713";position:absolute;inset-inline-start:0;top:0;
color:var(--ok);font-weight:700}
/* ---------------- benefits ---------------- */
.ff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.ff-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
transition:transform .18s ease,box-shadow .18s ease}
.ff-card:hover{transform:translateY(-3px);box-shadow:var(--sh-h)}
.ff-card--hero{grid-column:span 2;background:linear-gradient(135deg,var(--blush-l),#fff);
border-color:var(--rose)}
.ff-ico{font-size:1.7rem;display:block;margin-bottom:10px}
.ff-card h3{font:700 1.05rem/1.3 var(--fd);margin:0 0 7px}
.ff-card p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.6}
/* ---------------- steps ---------------- */
.ff-steps{list-style:none;counter-reset:s;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.ff-steps li{position:relative;background:#fff;border:1px solid var(--line);
border-radius:var(--r);padding:22px 18px 18px}
.ff-steps li>span{position:absolute;top:-15px;inset-inline-start:18px;width:34px;height:34px;
border-radius:50%;background:var(--rose);color:#fff;display:grid;place-items:center;
font:700 1rem var(--fd)}
.ff-steps h3{font:700 1rem var(--fd);margin:8px 0 6px}
.ff-steps p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.ff-note{margin:22px 0 0;font-size:.88rem;color:var(--ink-3);background:#fff;
border:1px dashed var(--line);border-radius:var(--r-s);padding:12px 14px;line-height:1.6}
/* ---------------- pricing ---------------- */
.ff-price{display:grid;grid-template-columns:1.4fr .8fr;gap:22px;align-items:start}
.ff-ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
border-radius:var(--r);overflow:hidden}
.ff-ptable th,.ff-ptable td{padding:13px 15px;text-align:start;font-size:.93rem;
border-bottom:1px solid var(--line)}
.ff-ptable thead th{background:var(--sand);font:600 .86rem var(--f);text-transform:uppercase;
letter-spacing:.04em;color:var(--ink-3)}
.ff-ptable thead th small{display:block;font-weight:400;text-transform:none;letter-spacing:0;
color:var(--ink-3);margin-top:2px}
.ff-ptable .is-hl{background:var(--blush-l)}
.ff-ptable thead .is-hl{background:var(--rose);color:#fff}
.ff-ptable thead .is-hl small{color:rgba(255,255,255,.82)}
.ff-ptable tr.is-strong td{font-weight:600}
.ff-ptable tbody tr:last-child td{border-bottom:0}
.ff-pnote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.ff-pnote p{margin:0 0 11px;font-size:.9rem;line-height:1.62;color:var(--ink-2)}
.ff-pnote p:last-child{margin:0}
.ff-promise{border-inline-start:3px solid var(--ok);padding-inline-start:11px;color:var(--ink)!important}
/* ---------------- founding (dark) ---------------- */
.sec--dark{background:var(--ink);color:#fff;padding:clamp(34px,5vw,62px) 0}
.sec--dark h2{color:#fff;font:700 clamp(1.5rem,3.4vw,2.3rem)/1.15 var(--fd);margin:0 0 .4em}
.ff-found{text-align:center;max-width:780px}
.ff-found__sub{font-size:1.08rem;color:rgba(255,255,255,.88);margin:0 0 20px}
.ff-found__count{margin:0 0 22px;font-size:1rem;color:rgba(255,255,255,.72)}
.ff-found__count strong{font:700 2.6rem var(--fd);color:var(--rose-d);display:block;line-height:1}
.ff-found__list{list-style:none;margin:0 auto 20px;padding:0;text-align:start;display:grid;gap:10px;
max-width:620px}
.ff-found__list li{position:relative;padding-inline-start:28px;line-height:1.55;
color:rgba(255,255,255,.92);font-size:.95rem}
.ff-found__list li::before{content:"\2713";position:absolute;inset-inline-start:0;
color:var(--rose-d);font-weight:700}
.ff-found__fine{font-size:.86rem;color:rgba(255,255,255,.6);line-height:1.6;margin:0}
/* ---------------- apply ---------------- */
.ff-apply{max-width:820px}
.ff-apply__lead{font-size:1.05rem;color:var(--ink-2);margin:0 0 22px;line-height:1.6}
.ff-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px}
.ff-form__fine{margin:14px 0 0;font-size:.84rem;color:var(--ink-3);line-height:1.6}
.ff-apply__trust{margin:18px 0 0;font-size:.88rem;color:var(--ink-3);text-align:center}
/* =====================================================================
HOMEPAGE HERO v2 - the redesign you asked for.
WHAT WAS WRONG WITH THE OLD ONE: three elements all calling
ks_img(null), so on a shop with no hero image it rendered three
identical grey placeholders beside the headline. An empty block reads
as "nothing here" - the Package 9 lesson, still visible on the hero.
THIS ONE HAS NO DECORATIVE IMAGE SLOTS AT ALL. It carries the
headline, a proof strip and the search entry, and it looks finished
whether you have one product or a thousand. Type and space do the
work, which is also what makes it feel expensive.
===================================================================== */
.hero2{position:relative;overflow:hidden;background:
radial-gradient(1100px 520px at 18% -12%,rgba(224,154,180,.26),transparent 62%),
radial-gradient(820px 420px at 88% 4%,rgba(212,175,110,.20),transparent 58%),
linear-gradient(180deg,#fff,var(--sand));
border-bottom:1px solid var(--line)}
.hero2__in{position:relative;z-index:2;text-align:center;
padding:clamp(40px,7vw,96px) 0 clamp(30px,5vw,58px);max-width:900px;margin:0 auto}
.hero2 .kick{display:inline-flex;align-items:center;gap:8px;background:#fff;
border:1px solid var(--line);border-radius:999px;padding:7px 15px;
font:600 .8rem var(--f);color:var(--ink-2);box-shadow:0 1px 3px rgba(43,35,32,.05)}
.hero2 h1{font:700 clamp(2.1rem,6.4vw,4.2rem)/1.02 var(--fd);letter-spacing:-.025em;
margin:.42em 0 .3em;text-wrap:balance}
.hero2 h1 em{font-style:normal;color:var(--rose)}
.hero2__sub{font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.6;color:var(--ink-2);
max-width:58ch;margin:0 auto;text-wrap:pretty}
.hero2__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 0}
.hero2__proof{display:flex;gap:clamp(14px,3vw,38px);justify-content:center;flex-wrap:wrap;
margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.hero2__proof div{text-align:center;min-width:94px}
.hero2__proof b{display:block;font:700 1.55rem/1 var(--fd);color:var(--ink)}
.hero2__proof span{font-size:.8rem;color:var(--ink-3);letter-spacing:.02em}
.hero2__strip{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:26px 0 0}
.hero2__strip a{background:#fff;border:1px solid var(--line);border-radius:999px;
padding:8px 15px;font-size:.88rem;color:var(--ink);transition:all .16s ease}
.hero2__strip a:hover{border-color:var(--rose);color:var(--rose);text-decoration:none;
transform:translateY(-1px)}
@media(max-width:900px){
.ff-hero__in,.ff-price{grid-template-columns:1fr}
.ff-card--hero{grid-column:span 1}
.ff-hero__card{order:-1}
}
@media(max-width:560px){
.ff-ptable th,.ff-ptable td{padding:10px 9px;font-size:.86rem}
.hero2__proof{gap:16px}
.hero2__proof b{font-size:1.3rem}
}
/* =====================================================================
PACKAGE 41 - THE MEGA MENU WAS ALWAYS OPEN, AND CLIPPED.
.nav__sub--3{display:flex} (Package 6) came AFTER .nav__sub{display:none}
with equal specificity, so every dropdown stayed open; .nav__l has
overflow-x:auto, which clipped them into cut-off tabs inside the bar.
Desktop: closed, opens on hover/focus as ONE wide panel in columns.
Mobile burger menu: unchanged, listed under each other.
===================================================================== */
@media(min-width:901px){
.nav{position:relative}
.nav__l{overflow:visible;flex-wrap:wrap}
.nav__l>li{position:static}
.nav__sub,.nav__sub--3{display:none}
.nav__l>li:hover>.nav__sub,.nav__l>li:focus-within>.nav__sub{display:grid}
.nav__sub--3{position:absolute;top:100%;inset-inline:0;margin:0 auto;width:min(1200px,96vw);min-width:0;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 26px;align-content:start;
padding:22px 28px;max-height:70vh;overflow:auto;border-radius:0 0 var(--r-s) var(--r-s);border-top:3px solid var(--rose)}
.nav__col{min-width:0}}
@media(max-width:900px){.nav__sub--3{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px 0 10px 14px}}
/* ===== PACKAGE 48: clear B2B card on the product page ===== */
.pd__b2b--x{display:block;position:relative;padding:18px 20px;margin:18px 0 6px;
border:1.5px solid var(--rose);border-radius:16px;background:linear-gradient(135deg,#fff 0%,var(--blush-l) 100%)}
.pd__b2b--x:hover{border-color:var(--rose-d);box-shadow:0 10px 26px rgba(179,69,107,.14)}
.pd__b2b-tag{display:inline-block;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:9px}
.pd__b2b-h{display:block;font-size:1.02rem;line-height:1.35;color:var(--ink)}
.pd__b2b-p{display:block;margin-top:3px}
.pd__b2b-l{list-style:none;margin:11px 0 13px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:.84rem;color:var(--ink-2)}
.pd__b2b-l li{position:relative;padding-inline-start:20px}
.pd__b2b-l li:before{content:"\2713";position:absolute;inset-inline-start:0;color:var(--rose);font-weight:700}
.pd__b2b-b{display:inline-block;background:var(--rose);color:#fff;font-weight:600;font-size:.9rem;padding:9px 18px;border-radius:999px;transition:background .16s}
.pd__b2b--x:hover .pd__b2b-b{background:var(--rose-d)}
@media(max-width:520px){.pd__b2b-l{grid-template-columns:1fr}}
/* ===== PACKAGE 48: brand / seller tiles (3+) ===== */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.btile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 16px;
background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s,border-color .2s}
.btile:hover{border-color:var(--rose);box-shadow:var(--sh-h);transform:translateY(-2px)}
.btile__i{width:92px;height:92px;border-radius:50%;background:var(--sand);display:grid;place-items:center;overflow:hidden;margin-bottom:8px}
.btile__i img{width:78%;height:78%;object-fit:contain}
.btile small{color:var(--ink-3);font-size:.8rem}
/* ===== PACKAGE 48: trust strip ===== */
.tstrip{list-style:none;margin:0;padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
background:var(--sand);border:1px solid var(--line);border-radius:var(--r-l)}
.tstrip li{display:flex;gap:12px;align-items:center}
.tstrip__i{flex:0 0 48px;height:48px;border-radius:50%;background:#fff;color:var(--rose);display:grid;place-items:center;box-shadow:var(--sh)}
.tstrip b{display:block;color:var(--ink);font-size:.93rem}
.tstrip small{color:var(--ink-3);font-size:.8rem}
@media(max-width:900px){.tstrip{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tstrip{grid-template-columns:1fr}}