/* daily · theme v3 — the inner pages in the homepage's language (assets/organic.css):
   white and cream grounds, wide grotesk capitals for titles, italic serif accents, tinted product cards,
   6px corners, black footer with a giant wordmark. Loaded after style.css and motion.css, so it only
   restyles: every page keeps its markup, scripts, three languages and right-to-left layout. */

/* the homepage type is the brand now, so it wins over the dashboard's font preset (typography.js) */
:root{
  --paper:#FFFFFF; --cream:#F6F2EC; --stone:#EFECE5; --peach:#FDF4EE; --rose:#FBE9E9; --mist:#F4F4F4;
  --ink:#0B0B0B; --char:#0B0B0B; --mute:#4F4A46; --mute-deep:#4A4541; --line:#E4DED6; --field:#8F877F;
  --serif:"Instrument Serif","Amiri",Georgia,serif !important;
  --sans:"Archivo","Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  --wide:"Archivo","Vazirmatn",system-ui,sans-serif;
  --word:"Archivo",sans-serif;
  --r-1:6px; --r-2:8px; --r-3:10px;
  --ease-v3:cubic-bezier(.16,1,.3,1);
}
body{background:var(--paper);font:400 16.5px/1.5 var(--sans)}

/* ------------------------------------------------------------------ type */
.h-cap{font-family:var(--wide);font-weight:500;font-stretch:112%;font-variation-settings:"wdth" 112;letter-spacing:-.012em;line-height:1}
:is([lang=ar],[lang=ckb]) .h-cap{font-stretch:100%;font-variation-settings:normal;letter-spacing:0;line-height:1.25}
.h-xl{font-size:clamp(2.8rem,7.4vw,6rem)}
.h-l{font-size:clamp(2.1rem,4.2vw,3.6rem)}
.h-m{font-size:clamp(1.5rem,2.4vw,2rem)}
.kicker{font:italic 400 clamp(1.7rem,2.6vw,2.4rem)/1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink);gap:0}
.kicker::before{display:none}
:is([lang=ar],[lang=ckb]) .kicker{font-style:normal}
.lede{color:var(--mute);font-size:1.08rem}
.tag{font:500 .68rem/1 var(--sans);letter-spacing:.08em;border-color:var(--field);color:var(--ink)}

/* ------------------------------------------------------------------ buttons */
.btn{border-radius:6px;font:500 1rem/1 var(--sans);letter-spacing:0;text-transform:none;min-height:48px;padding:0 1.3em}
.btn.sm{font-size:.92rem}
.btn.solid{background:var(--ink);border-color:var(--ink)}
.btn.solid:hover{background:#2a2622}
.btn[disabled],.btn[aria-disabled=true]{background:var(--stone);border-color:var(--stone)}
.btn-o{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid currentColor;border-radius:6px;font:400 1rem/1 var(--sans);white-space:nowrap;transition:background .25s,color .25s}
.btn-o .ic{width:16px;height:16px}
.btn-o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ------------------------------------------------------------------ header (same as the homepage, solid) */
.site-head.v3{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);color:var(--ink);border-bottom:1px solid var(--line)}
.site-head.v3 .head-row{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);max-width:none;padding:14px var(--gut)}
.site-head.v3 .wordmark{flex-direction:row;align-items:center}
.site-head.v3 .wordmark b{font:600 2.3rem/1 var(--word);font-stretch:100%;letter-spacing:-.045em}
.site-head.v3 .nav{flex-wrap:nowrap;justify-content:flex-start;gap:clamp(12px,1.6vw,22px);padding:0;margin-inline-start:clamp(8px,3vw,56px)}
.site-head.v3 .nav a{font:400 1.04rem/1 var(--sans);letter-spacing:0;text-transform:none;min-height:44px;white-space:nowrap}
.site-head.v3 .nav a::after{bottom:9px;height:1px}
.site-head.v3 .nav a[aria-current=page]::after{height:1px}
.site-head.v3 .head-right{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.site-head.v3 .icon-btn:hover{background:rgba(11,11,11,.06)}
.site-head.v3 .bag-count{background:var(--ink);color:#fff;box-shadow:0 0 0 2px #fff}
.site-head.v3 .head-cta{margin-inline-start:8px}
.site-head.v3 .menu-btn{display:none}
.lang.compact{border-color:var(--line);margin-inline-end:4px}
.lang.compact button{min-width:36px;height:28px;padding:0 9px;font-size:.7rem}
.lang.compact .l-long{display:none}.lang.compact .l-short{display:inline}
@media (max-width:1340px){ .site-head.v3 .head-cta{display:none} }
@media (max-width:1100px){
  .site-head.v3 .nav,.site-head.v3 .lang.compact{display:none}
  .site-head.v3 .menu-btn{display:inline-flex}
  .site-head.v3 .wordmark b{font-size:2rem}
}
.menu-sheet nav a{font:400 1.35rem/1.2 var(--sans)}
.menu-sheet nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}

/* ------------------------------------------------------------------ page titles */
.page-title{padding:clamp(56px,8vw,110px) var(--gut) clamp(28px,3vw,40px)}
.page-title .lede{font:italic 400 clamp(1.5rem,2.6vw,2.4rem)/1.1 var(--serif);color:var(--ink);max-width:none}
:is([lang=ar],[lang=ckb]) .page-title .lede{font-style:normal;font-size:1.3rem}
main.wrap > .page-title .lede{font:400 1.08rem/1.55 var(--sans);color:var(--mute);max-width:52ch}   /* checkout keeps a reading paragraph */

/* shop: a photo banner with the title in giant capitals, like the homepage hero */
.page-title:has(#shop-title){position:relative;isolation:isolate;overflow:hidden;color:#fff;text-align:start;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(380px,48vw,620px);padding:120px var(--gut) clamp(34px,4vw,56px);margin-bottom:clamp(36px,5vw,64px);background:#3A2418}
.page-title:has(#shop-title)::before{content:"";position:absolute;inset:-12% 0;z-index:-2;background:url("img/organic/hair.jpg") 50% 50%/cover;transform:translateY(var(--py,0px)) scale(1.06)}
.page-title:has(#shop-title)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,10,4,.1),rgba(20,10,4,.5))}
.page-title:has(#shop-title) h1{font-size:clamp(4rem,13vw,11.5rem);line-height:.86;letter-spacing:-.035em}
:is([lang=ar],[lang=ckb]) .page-title:has(#shop-title) h1{font-size:clamp(3rem,9vw,7rem);line-height:1.1}
.page-title:has(#shop-title) .lede{color:#fff;margin:.35em 0 0;text-align:start}

/* ------------------------------------------------------------------ shop grid: tinted cards like the homepage */
.search-field input,.chips button{border-radius:6px}
.chips{gap:8px}
.chips button{font:400 .95rem/1 var(--sans);border-color:var(--line)}
.grid{gap:clamp(14px,1.6vw,20px)}
.grid .card{background:var(--peach);border-radius:8px;padding:12px 12px 18px}
.grid .card:nth-of-type(3n+2){background:var(--stone)}
.grid .card:nth-of-type(3n){background:var(--rose)}
.card .ph{border-radius:6px;background:#fff}
.card .badge{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;height:32px;padding:0 14px;font:400 .86rem/1 var(--sans);letter-spacing:0;text-transform:none}
.card .meta{padding:16px 2px 0;gap:6px}
.card .brand{font:500 .66rem/1.3 var(--sans);letter-spacing:.12em;color:var(--mute)}
.card .name{font:400 1.06rem/1.3 var(--sans);letter-spacing:0}
.card .price{font:500 1rem/1.3 var(--sans)}
.card .quick .btn{border-radius:50%;background:var(--ink);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.card .quick .btn:hover,.card .quick .btn.done{background:#fff;color:var(--ink)}
.sec-head{text-align:center}

/* ------------------------------------------------------------------ product page */
.pdp .h-cap{font-size:clamp(2.2rem,3.6vw,3.4rem)}
.pdp :is(.gallery,.main-ph,.ph){border-radius:10px}

/* ------------------------------------------------------------------ split heroes (consultation, visit): full-bleed photo half */
main > section.wrap.split:first-child{max-width:none;padding:0!important;gap:0;align-items:stretch;min-height:min(92vh,860px)}
main > section.wrap.split:first-child > .ph{border-radius:0;aspect-ratio:auto;min-height:560px;position:relative}
main > section.wrap.split:first-child > .ph img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translateY(var(--py,0px))}
main > section.wrap.split:first-child > div:last-child{padding:clamp(40px,6vw,96px) clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
main > section.wrap.split:first-child h1{font-size:clamp(2.6rem,4.6vw,4.4rem)}
@media (max-width:820px){ main > section.wrap.split:first-child > .ph{min-height:68vh} }
.list-lines.icons li > .ic{color:var(--ink)}

/* forms */
.field > label,fieldset.field > legend{font:500 .74rem/1.2 var(--sans);letter-spacing:.1em}
.field :is(input,select,textarea){border-radius:6px}
.choice label{border-radius:8px}
.checkout-h{font-size:clamp(1.3rem,2vw,1.7rem)!important}
.done-box{border-radius:10px}

/* ------------------------------------------------------------------ dark band (visit: delivery & payment) */
.band{background:#000;margin-top:0;padding-block:clamp(70px,8vw,110px)}
.band .wave{display:none}
.deliv-grid > div{background:var(--cream);color:var(--ink);border-radius:12px;padding:28px 26px;text-align:center}
.deliv-grid > div p{color:var(--mute)}
.deliv-grid .ic-wrap{background:#fff;color:var(--ink)}

/* ------------------------------------------------------------------ restock alerts: the homepage's cream "follow us" band */
.news{background:var(--cream);color:var(--ink)}
.news > p,.news .hint{color:var(--mute)}
.news form{border-color:var(--ink);background:#fff;border-radius:8px}
.news form:focus-within{border-color:var(--ink);box-shadow:none}
.news form > .ic{color:var(--ink)}
.news input{color:var(--ink)}
.news input::placeholder{color:var(--mute)}
.news .btn{background:var(--ink);color:#fff;border-color:var(--ink);border-radius:6px}
.news .btn:hover{background:#2a2622;border-color:#2a2622}
.news :focus-visible{outline-color:var(--ink)}
.news a{color:var(--ink)}

/* ------------------------------------------------------------------ footer: black, giant wordmark */
.foot.v3{background:#000;color:#fff;padding:66px var(--gut) calc(26px + env(safe-area-inset-bottom));font-size:1rem}
.foot.v3 .cols{display:grid;grid-template-columns:1.6fr .8fr 1fr 1.2fr;gap:30px}
.foot.v3 h3{font:600 1rem/1.2 var(--sans);letter-spacing:0;text-transform:none;color:#fff;margin:0 0 8px}
.foot.v3 p{max-width:40ch;margin:0 0 18px;line-height:1.45;color:#E9E4DE}
.foot.v3 ul{gap:4px}
.foot.v3 li a{min-height:40px;color:#fff}
.foot.v3 .pay-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.foot.v3 .pay-chips span{font-size:.78rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 10px;color:#E9E4DE}
.foot-word{font:500 min(29.5vw,470px)/.78 var(--word);font-stretch:118%;font-variation-settings:"wdth" 118;letter-spacing:-.05em;text-align:center;margin:70px 0 64px;color:#fff;user-select:none}
.foot.v3 .foot-base{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:.92rem;color:#D9D4CF;border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.foot.v3 .foot-base .lang{margin-inline-start:auto}
.foot.v3 :focus-visible{outline-color:#fff}
@media (max-width:900px){ .foot.v3 .cols{grid-template-columns:1fr 1fr} .foot.v3 .c1{grid-column:1/-1} }
@media (max-width:520px){ .foot.v3 .cols{grid-template-columns:1fr} }

/* the bag drawer and preview tag follow the same corners */
.drawer{border-start-start-radius:0;border-end-start-radius:0}

/* ------------------------------------------------------------------ consultation: paid video call */
main > section.wrap.split:first-child + section{padding-top:clamp(56px,7vw,100px)}
#fee-line{font-weight:600}
.how-v3{background:var(--cream);border-radius:12px;padding:clamp(24px,3vw,40px);margin-bottom:clamp(40px,5vw,64px)}
.how-v3 ol{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.how-v3 li{list-style:none;background:#fff;border-radius:10px;padding:22px 22px 24px}
.how-v3 li::marker{content:none}
.how-v3 .n{display:block;font:italic 400 2.4rem/1 var(--serif);margin-bottom:12px}
.how-v3 p{font-size:1rem;line-height:1.45}
@media (max-width:760px){ .how-v3 ol{grid-template-columns:1fr} }
.choice.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:600px){ .choice.three{grid-template-columns:1fr} }

/* ---- social: every account as a pill (shared by the homepage and inner-page footers) */
.social-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.social-grid a{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 18px 10px 12px;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#fff;text-decoration:none!important;transition:background .25s,border-color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.social-grid a:hover{background:#fff;color:#0B0B0B;border-color:#fff;transform:translateY(-2px)}
.social-grid .si{flex:none;width:40px;height:40px;padding:8px;border-radius:50%;background:rgba(255,255,255,.1)}
.social-grid a:hover .si{background:#0B0B0B;color:#fff}
.social-grid .sn{display:flex;flex-direction:column;font-weight:600;font-size:15.5px;line-height:1.2}
.social-grid .sn small{font-weight:400;font-size:12.5px;opacity:.7}
.social-grid .sh{margin-inline-start:auto;font-size:14px;opacity:.85;white-space:nowrap}

/* ---- footer v4 (inner pages) */
.site-head.v3 .wordmark b i,.foot-word i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.site-head.v3 .wordmark b i{font-size:1.08em}
.foot.v3 .follow{display:grid;grid-template-columns:minmax(220px,.8fr) 2.2fr;gap:40px;align-items:start;padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid rgba(255,255,255,.18)}
.foot.v3 .follow h2{margin:0;display:flex;flex-direction:column;line-height:.95}
.foot.v3 .follow h2 .cap{font:600 clamp(2.1rem,3.6vw,3.3rem)/1 var(--wide);font-stretch:112%;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:-.01em}
.foot.v3 .follow h2 .it{font:italic 400 clamp(2.6rem,4.4vw,4.1rem)/1 var(--serif)}
:is([lang=ar],[lang=ckb]) .foot.v3 .follow h2 .it{font-style:normal}
.foot.v3 .cols{grid-template-columns:1.3fr .8fr .9fr 1.4fr}
.foot.v3 .pay-chips{margin-top:12px}
.foot-word{font-size:min(15.4vw,250px);line-height:.9;letter-spacing:-.045em;white-space:nowrap;margin:80px 0 48px}
.foot-word i{font-size:1.12em;letter-spacing:-.02em}
@media (max-width:1100px){ .foot.v3 .follow{grid-template-columns:1fr;gap:26px} }
@media (max-width:600px){ .foot-word{font-size:15vw;margin:56px 0 32px} }
/* October 22: the Academy link joined the menu; keep the wordmark on one line by dropping the header button first, then the menu */
@media (max-width:1480px){ .site-head.v3 .head-cta{display:none} }
@media (max-width:1240px){ .site-head.v3 .nav,.site-head.v3 .lang.compact{display:none} .site-head.v3 .menu-btn{display:inline-flex} }
.site-head.v3 .wordmark b{white-space:nowrap}
