/* Round 3 — dark glass theme (reference: late-assistant.com) in T-Square colours.
   Ink base, paper text, yellow as the single accent. Yellow always carries black text. */
:root{
  --white:#1E1E1E;            /* raised surface */
  --tile:#EEE8DA;             /* product photo tile = brand paper */
  --mute:#A9A395;
  --glass:rgba(255,255,255,.035);
  --glass2:rgba(255,255,255,.06);
  --edge:rgba(255,255,255,.09);
  --edge2:rgba(255,255,255,.16);
  --hair:1px solid var(--edge);
  --line:1px solid var(--edge2);
  --lift:inset 0 1px 0 rgba(255,255,255,.05),0 16px 40px -18px rgba(0,0,0,.75);
  --glow:0 0 0 1px rgba(252,211,42,.14),0 18px 56px -20px rgba(252,211,42,.35);
  --ease:cubic-bezier(.4,0,.2,1);
}
html{background:#161616}
body{background:#161616;color:var(--paper);position:relative}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(../assets/grain.png);background-size:270px;opacity:.05;mix-blend-mode:screen}
::selection{background:var(--yellow);color:#161616}
option{color:#161616;background:#fff}

/* header */
.ann{background:var(--yellow);color:#161616;font-weight:600}
.top{background:rgba(22,22,22,.78);border-bottom:1px solid var(--edge);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.top .wrap{height:68px}
.logo{color:var(--paper)}
.logo small{opacity:.7}
.nav a{color:rgba(238,232,218,.78);border-radius:999px;font-weight:500;transition:all .15s var(--ease)}
.nav a:hover{background:var(--glass2);color:var(--paper)}
.nav a.on{background:var(--yellow);color:#161616}
.ibtn{border:1px solid var(--edge2);background:var(--glass);color:var(--paper);box-shadow:none}
.ibtn:hover{background:var(--glass2);border-color:rgba(255,255,255,.3)}
.ibtn svg{stroke:var(--paper)}
.ibtn .dot{background:var(--yellow);color:#161616}
.top .hcta{display:none}
.searchbar{background:#111;border-bottom:1px solid var(--edge)}
.searchbar input{background:var(--glass2);color:var(--paper);border:1px solid var(--edge2);border-radius:999px;padding-inline:20px}
.searchbar button{border-radius:999px}
.tabs{background:rgba(18,18,18,.92);border-top:1px solid var(--edge)}
.tabs a{color:rgba(238,232,218,.7)}
.tabs a.on{color:var(--yellow);box-shadow:none}
.tabs .dot{background:var(--yellow);color:#161616}
.wa{box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}

/* buttons: pills */
.btn{border:1px solid var(--yellow);background:var(--yellow);color:#161616;border-radius:999px;padding-inline:26px;font-weight:700;box-shadow:0 8px 24px -10px rgba(252,211,42,.55);transition:all .18s var(--ease)}
.btn:hover{background:#FFDD55;color:#161616;border-color:#FFDD55;transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(252,211,42,.7)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.dark,.btn.white{background:var(--glass);color:var(--paper);border-color:var(--edge2);box-shadow:none}
.btn.dark:hover,.btn.white:hover{background:var(--glass2);color:var(--paper);border-color:rgba(255,255,255,.34);box-shadow:none}
.btn.sm{padding-inline:18px}
.link{border-bottom:1px solid rgba(238,232,218,.4)}
.link:hover{color:var(--yellow);border-color:var(--yellow);background:none}

/* type + rhythm */
section.s{border-bottom:1px solid rgba(255,255,255,.06);background:none}
section.s.w{background:#1A1A1A}
section.s.k{background:#101010;color:var(--paper)}
section.s.y{background:var(--yellow);color:#161616}
section.s.y *{--mute:#4b4733}
.lead{color:rgba(238,232,218,.78)}
.y .lead{color:#161616}
.eyebrow{color:var(--yellow);opacity:1}
.eyebrow:after{background:var(--edge2);opacity:1}
.y .eyebrow{color:#161616}.y .eyebrow:after{background:rgba(22,22,22,.25)}
mark,.k mark{background:var(--yellow);color:#161616;border-radius:6px;padding:0 .18em}
.y mark{background:#161616;color:var(--yellow)}
.hl{color:var(--yellow);position:relative;white-space:nowrap}
.hl:after{content:"";position:absolute;inset-inline:0;bottom:-.08em;height:.09em;background:var(--yellow);border-radius:4px;opacity:.9}

/* hero */
.hero{background:radial-gradient(520px 320px at 88% -4%,rgba(252,211,42,.16),transparent 70%),radial-gradient(420px 260px at 6% 100%,rgba(252,211,42,.07),transparent 70%),#161616;color:var(--paper);border-bottom:1px solid var(--edge)}
.hero .wrap{grid-template-columns:1fr;align-items:center;padding-block:clamp(40px,7vw,96px) clamp(36px,5vw,64px)}
.hero h1{max-width:13ch;color:var(--paper)}
.hero .lead{color:rgba(238,232,218,.8)}
.hero .meta{opacity:1;color:rgba(238,232,218,.75)}
.hero .meta span:before{background:var(--yellow)}
.hero:after{background:
  repeating-linear-gradient(90deg,rgba(252,211,42,.9) 0 1.5px,transparent 1.5px 14px) bottom/100% 8px no-repeat,
  repeating-linear-gradient(90deg,rgba(252,211,42,.9) 0 1.5px,transparent 1.5px 70px) bottom/100% 16px no-repeat;opacity:.55}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid rgba(252,211,42,.35);background:rgba(252,211,42,.08);color:var(--yellow);border-radius:999px;font-size:12.5px;font-weight:600}
.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(252,211,42,.18)}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.collage a{display:block;overflow:hidden;border-radius:18px;border:1px solid rgba(252,211,42,.5);box-shadow:var(--glow);background:#222;transition:transform .35s var(--ease),box-shadow .35s}
.collage a:hover{transform:translateY(-3px)}
.collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.collage a:hover img{transform:scale(1.04)}
.collage .c1{grid-column:1/-1;aspect-ratio:16/10}
.collage .c1 img{object-position:50% 40%}
.collage .c2,.collage .c3{aspect-ratio:1/1}
.marq{background:var(--yellow);color:#161616;font-weight:700}

/* cards */
.card,.pcard{background:var(--glass);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--lift);color:var(--paper);transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.card:hover{box-shadow:var(--lift);border-color:rgba(252,211,42,.4)}
.pcard:hover{transform:translateY(-4px);background:var(--glass2);border-color:rgba(252,211,42,.45)}
.pcard .img{background:var(--tile);border-radius:17px 17px 0 0;margin:-1px -1px 0}
.pcard .img:after{background:repeating-linear-gradient(90deg,rgba(22,22,22,.28) 0 1px,transparent 1px 8px)}
.pcard:nth-child(4n+2) .img,.pcard:nth-child(5n+3) .img{background:var(--tile)}
.pcard h3 a{color:var(--paper)}
.pcard .sku{color:var(--mute)}
.pcard .row{border-top:1px solid var(--edge)}
.price{color:var(--paper)}
.price s{color:var(--mute)}
.badge{background:rgba(22,22,22,.85);color:var(--paper);border:1px solid var(--edge2);backdrop-filter:blur(6px)}
.badge.y{background:var(--yellow);color:#161616;border:0}
.tag{background:var(--glass);border:1px solid var(--edge2);color:var(--paper)}
.add{background:var(--yellow);color:#161616;border-radius:50%;box-shadow:0 6px 16px -6px rgba(252,211,42,.6)}
.add:hover{background:#FFDD55;color:#161616;transform:scale(1.08)}
.save{background:var(--yellow);color:#161616}

/* feature cards with ring icons */
.trust{counter-reset:none}
.trust div{background:var(--glass);border:1px solid var(--edge)!important;border-radius:18px!important;padding:22px!important;box-shadow:var(--lift);transition:border-color .3s,transform .3s var(--ease)}
.trust div:hover{border-color:rgba(252,211,42,.4)!important;transform:translateY(-3px)}
.trust div:before{display:none}
.trust svg{display:grid!important;width:46px!important;height:46px;padding:11px;border:1.5px solid var(--yellow);border-radius:50%;stroke:var(--yellow);stroke-width:1.7;margin-bottom:14px;box-sizing:border-box}
.trust b{font-size:17px;color:var(--paper)}
.trust small{color:var(--mute)}

/* doctor list block: the yellow moment */
.dl{background:var(--yellow);color:#161616;border-radius:24px;box-shadow:0 30px 80px -30px rgba(252,211,42,.45)}
.dl .eyebrow,.dl .eyebrow:after{color:#161616}
.dl .eyebrow:after{background:rgba(22,22,22,.25)}
.dl p{color:#26241c}
.dl mark{background:#161616;color:var(--yellow)}
.dl .stepbox b{background:#161616;color:var(--yellow)}
.dl .sel{background-color:#fff;color:#161616;border:1px solid rgba(22,22,22,.2)}
.dl .btn{background:#161616;color:var(--paper);border-color:#161616;box-shadow:none}
.dl .btn:hover{background:#000;color:var(--yellow)}

/* kits */
.kit{background:var(--glass);border:1px solid var(--edge);border-radius:22px;box-shadow:var(--lift);color:var(--paper);transition:transform .3s var(--ease),border-color .3s}
.kit:hover{transform:translateY(-4px);border-color:rgba(252,211,42,.4)}
.kit .hd,.kit .ft{border-color:var(--edge)}
.kit li:before{color:var(--yellow)}
.kit.hot{background:var(--yellow);color:#161616;border-color:var(--yellow);box-shadow:0 30px 80px -30px rgba(252,211,42,.5)}
.kit.hot .hd,.kit.hot .ft{border-color:rgba(22,22,22,.18)}
.kit.hot li:before{color:#161616}
.kit.hot .badge{background:#161616;color:var(--yellow)}
.kit.hot .save{background:#161616;color:var(--yellow)}
.kit.hot .btn,.kit.hot .btn.dark{background:#161616;color:var(--paper);border-color:#161616;box-shadow:none}
.kit.hot .btn:hover{background:#000;color:var(--yellow)}
.kit.hot .link{color:#161616;border-color:#161616}
.kit .tier{color:var(--yellow)}.kit.hot .tier{color:#161616}

/* category index */
.idx{border-top:1px solid var(--edge2)}
.idxr{border-bottom:1px solid var(--edge);color:var(--paper)}
.idxr .t small{color:var(--mute)}
.idxr:hover{background:var(--yellow);color:#161616}
.idxr:hover .t small{color:#26241c}
.idxr .n{color:var(--yellow);opacity:1}
.idxr:hover .n{color:#161616}

/* masonry gallery */
.masonry{columns:2;column-gap:14px}
.mcard{break-inside:avoid;margin:0 0 14px;background:var(--glass);border:1px solid var(--edge);border-radius:18px;overflow:hidden;box-shadow:var(--lift);transition:transform .3s var(--ease),border-color .3s}
.mcard:hover{transform:translateY(-3px);border-color:rgba(252,211,42,.45)}
.mcard img{width:100%;height:auto;display:block}
.mcard figcaption{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:13px}
.mcard figcaption img{width:26px;height:26px;border-radius:50%;background:var(--yellow);padding:4px;object-fit:contain;flex:none}
.mcard figcaption b{font-weight:600}
.mcard figcaption span{color:var(--mute);margin-inline-start:auto;font-size:12px}
@media(min-width:700px){.masonry{columns:3}}
@media(min-width:1000px){.masonry{columns:4}}

/* tables, forms, panels */
.tbl{background:var(--glass);border:1px solid var(--edge);border-radius:14px;color:var(--paper)}
.tbl th{background:var(--glass2);color:var(--paper)}
.tbl th,.tbl td{border-bottom:1px solid var(--edge)}
.tbl a{color:var(--yellow)}
.fld input,.fld textarea,.sel,.coupon input,.item select{background:var(--glass2);color:var(--paper);border:1px solid var(--edge2);border-radius:12px}
.fld input::placeholder,.coupon input::placeholder,.searchbar input::placeholder{color:var(--mute)}
.fld input:focus,.fld textarea:focus,.sel:focus,.coupon input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(252,211,42,.22)}
.sel{background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%)}
.dl .sel{background-image:linear-gradient(45deg,transparent 50%,#161616 50%),linear-gradient(135deg,#161616 50%,transparent 50%)}
.fld .hint{color:var(--mute)}
.fs{background:var(--glass);border:1px solid var(--edge);border-radius:20px}
.fs legend{color:var(--yellow)}
.sum,.line,.item,.filters,.stat,.faq details{background:var(--glass);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--lift);color:var(--paper)}
.faq summary{color:var(--paper)}
.faq details[open] summary{border-bottom:1px solid var(--edge)}
.radio{background:var(--glass);border:1px solid var(--edge2);border-radius:14px;color:var(--paper)}
.radio.on{background:rgba(252,211,42,.08);border-color:var(--yellow);box-shadow:none}
.radio small{color:var(--mute);opacity:1}
.chip{background:var(--glass);border:1px solid var(--edge2);color:var(--paper);border-radius:999px}
.chip:hover{border-color:var(--yellow)}
.chip.on{background:var(--yellow);color:#161616;border-color:var(--yellow)}
.qty{background:var(--glass);border:1px solid var(--edge2);border-radius:999px}
.qty button{color:var(--paper)}
.qty span{border-inline:1px solid var(--edge2)}
.note{background:rgba(252,211,42,.09);border:1px solid rgba(252,211,42,.32);color:var(--paper);border-radius:14px}
.note.w{background:var(--glass);border:1px solid var(--edge)}
.note.e{background:var(--err);border-color:var(--err);color:#fff}
.why{color:rgba(238,232,218,.82);border-inline-start:3px solid var(--yellow)}
.sticky{background:rgba(22,22,22,.92);border-top:1px solid var(--edge)}
.offer{background:var(--yellow);color:#161616;border-radius:18px}
.offer .btn.dark{background:#161616;color:var(--paper);border-color:#161616}
.item .th,.line .thumb{background:var(--tile);border-radius:12px}
.crumbs,.crumbs a{color:var(--mute)}
.tl{border-inline-start:2px solid var(--edge2)}
.tl .st:before{background:#161616;border:2px solid var(--edge2)}
.tl .st.done:before{background:var(--yellow);border-color:var(--yellow)}
.tl .st.cur:before{box-shadow:0 0 0 5px rgba(252,211,42,.25)}
.st-pill{background:var(--glass);border:1px solid var(--edge2);color:var(--paper);border-radius:999px}
.st-pill.new{background:var(--yellow);color:#161616}
.empty svg{filter:none}
.toast{background:var(--yellow);color:#161616;border-radius:999px;padding:12px 20px}
.toast a{color:#161616;font-weight:800}
.vid{border:1px solid var(--edge2);border-radius:22px;box-shadow:var(--glow)}
.photo{background:none;border-radius:18px}
.stepbox b{background:var(--yellow);color:#161616}
.err404 h1{color:var(--yellow)}
footer{background:#0E0E0E;border-top:1px solid var(--edge)}
footer .legal{border-color:var(--edge)}

/* admin readability */
.adm .tbl td{vertical-align:top}
.adm .sel{min-height:40px}

@media(min-width:900px){
  .hero .wrap{grid-template-columns:1.05fr 1fr;gap:56px}
  .top .hcta{display:inline-flex;min-height:42px;padding:6px 20px;font-size:14px}
}

/* inline-styled yellow chips/cards keep black text */
.tag[style*="--yellow"],.card[style*="--yellow"],.card[style*="--yellow"] *{color:#161616}
.card[style*="--ink)"],.card[style*="--ink)"] *{color:var(--paper)}
.y .tag{background:transparent;border-color:rgba(22,22,22,.35);color:#161616}
.y .tag[style*="--ink"]{background:#161616!important;color:var(--yellow)!important;border-color:#161616}
.y .btn{background:#161616;color:var(--paper);border-color:#161616;box-shadow:none}
.y .btn:hover{background:#000;color:var(--yellow)}
.y .note.w{background:rgba(22,22,22,.08);border-color:rgba(22,22,22,.2);color:#161616}
.y a.link{color:#161616;border-color:#161616}

/* fixes after first visual pass */
.logo,.logo span,.nav a,.top .btn{white-space:nowrap}
.nav{gap:2px;margin-inline-start:8px}
.nav a{padding:6px 11px;font-size:14px}
.top .hcta{display:none!important}
@media(min-width:1100px){.top .hcta{display:inline-flex!important}}
.hl{white-space:normal;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.07em;text-underline-offset:.2em;text-decoration-skip-ink:none}
.hl:after{display:none}
.hero h1{max-width:none}
.collage{min-width:0}
.hero .wrap>div{min-width:0}

/* select arrow: keep size/position (the shorthand above reset them) */
.sel{background-repeat:no-repeat!important;background-size:6px 6px!important;background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%!important}
[dir=rtl] .sel{background-position:20px 50%,14px 50%!important}
.fld .sel,.item select{background-color:var(--glass2)}
.dl .sel{background-color:#fff!important}
.item select{background-image:none}

.hero h1.h-xl{font-size:clamp(32px,5.4vw,62px);line-height:1.2}
@media(max-width:899px){.hero h1.h-xl{font-size:clamp(32px,9vw,48px)}}

/* original typography restored: Alexandria Black headings */
h1,h2,h3,h4{font-family:'Alexandria','IBM Plex Sans Arabic',sans-serif;font-weight:900;letter-spacing:0}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3,html[lang=en] h4{font-family:'Space Grotesk','Alexandria',sans-serif;font-weight:700}
.h-xl,.h-l,.h-m,.pp h1,.kit h3,.dl h2{font-weight:900;letter-spacing:0}
.pcard h3{font:700 15px/1.5 'Alexandria','IBM Plex Sans Arabic',sans-serif}
html[lang=en] .pcard h3{font-family:'Space Grotesk',sans-serif;font-weight:600}
.idxr .t b{font-family:'Alexandria','IBM Plex Sans Arabic',sans-serif;font-weight:900}
.hero h1.h-xl{font-size:clamp(34px,5.6vw,66px);line-height:1.28}
@media(max-width:899px){.hero h1.h-xl{font-size:clamp(34px,10vw,50px);line-height:1.3}}
.hero .lead{margin-top:6px}

.kit.hot .price,.kit.hot .price small,.kit.hot s{color:#161616!important}
.y .price,.y .price small,.dl .price{color:#161616}

/* story video is vertical 9:16 */
.vid video{aspect-ratio:9/16;max-height:72vh;width:auto;max-width:100%;margin-inline:auto;object-fit:contain;background:#161616}
.vid{display:grid;place-items:center;max-width:340px;margin-inline:auto;background:#161616}
/* tags on dark sections stay readable */
.k .tags .tag,.k .tag{color:var(--paper)!important;background:transparent!important;border-color:rgba(238,232,218,.35)!important}

.err404 .t{filter:none}
.themebtn svg{stroke:var(--paper)}

/* dark option: big T in yellow, scale numerals in paper */
.bigT .tb{display:none}.bigT .ty{display:block}
.bigT .scale{-webkit-text-stroke:2px rgba(238,232,218,.55);opacity:.7}
.hero mark{background:var(--yellow);color:#161616}
.hero .wrap.numsrow{border-top:1px solid var(--edge2)}
.numsrow span{color:var(--mute);opacity:1}
.kitsec{background:none}
.kitsec .link{color:var(--paper);border-color:rgba(238,232,218,.4)}
.hero mark{--mb:var(--yellow);--mf:#161616}
.plate{background:var(--glass2);border:1px solid var(--edge2)}
.plate:hover{background:var(--yellow);color:#161616}
.plate.kit{background:var(--yellow);color:#161616}
.rtrack:before{background:
  repeating-linear-gradient(90deg,rgba(238,232,218,.55) 0 1.5px,transparent 1.5px 12px) bottom/100% 9px no-repeat,
  repeating-linear-gradient(90deg,rgba(238,232,218,.55) 0 1.5px,transparent 1.5px 60px) bottom/100% 18px no-repeat,
  linear-gradient(rgba(238,232,218,.55),rgba(238,232,218,.55)) bottom/100% 1.5px no-repeat}
.plate .hang,.plate .hang:before{background:rgba(238,232,218,.55)}
.plate:after{background:#161616}
.prog{background:repeating-linear-gradient(90deg,rgba(238,232,218,.25) 0 1px,transparent 1px 10px) bottom/100% 4px no-repeat}