/* kartoon UI v2: a refinement layer over the existing pages, kept in one
   file so the whole thing can be compared, kept or dropped as a unit.

   Same world (dark green, cream, the photographs). What changes:
   a typeface with character instead of the system font, things that
   answer when pressed, sections that open instead of jumping, and the
   browser's own leftovers (selection, focus, scrollbars) themed. */

/* ── Type ──────────────────────────────────────────────────────── */
:root{
  --font-text:"IBM Plex Sans Arabic","SF Arabic","Geeza Pro",-apple-system,system-ui,sans-serif;
  --font-display:"Alexandria","IBM Plex Sans Arabic","SF Arabic",-apple-system,system-ui,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
body,button,input,textarea,select{font-family:var(--font-text)}
body{font-feature-settings:"kern" 1; text-rendering:optimizeLegibility}
h1,h2,h3,.sec-t,.photo h1{font-family:var(--font-display)}
/* The wordmark is the brand: it keeps its own letters. */
.logo{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif !important}
/* Joined script does not take negative tracking: it pulls the letters
   apart at the joins instead of tightening the word. */
h1,h2,h3{letter-spacing:0}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{letter-spacing:-.02em}
h1{font-weight:700}
h2,h3{font-weight:600}
.sec-t{font-weight:600}
.num,.pre small,.st-price,.st-row span:last-child{font-variant-numeric:tabular-nums}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}

/* ── The browser's own surfaces ───────────────────────────────── */
::selection{background:#cfe8d2; color:#16211a}
input,textarea{caret-color:#cfe8d2}
html{scrollbar-color:#3b4a40 #16211a}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:#16211a}
::-webkit-scrollbar-thumb{background:#34433a; border-radius:8px; border:3px solid #16211a}
::-webkit-scrollbar-thumb:hover{background:#45574b}
:focus-visible{outline:2px solid #cfe8d2; outline-offset:3px; border-radius:6px}
a{text-underline-offset:.22em}

/* ── Press feedback: everything you can press answers ─────────── */
button,.btn,.ch,.pre,.qty-btn,.cc,.st-add,.st-go,.go a,.go button,.prod,.var,.st-btn,.st-ico,.lnk{
  -webkit-tap-highlight-color:transparent;
}
.btn,.ch,.pre,.qty-btn,.cc,.st-add,.go a,.go button,.st-btn,.st-ico,nav button.lnk,.compare,.sec-h .chev{
  transition:transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn:active,.ch:active,.pre:active,.qty-btn:active,.cc:active,.st-add:active,.go a:active,.go button:active,.st-btn:active,.st-ico:active,nav button.lnk:active,.compare:active{
  transform:scale(.97);
}
/* The chosen chip settles in rather than snapping. */
.ch[aria-pressed="true"],.pre[aria-pressed="true"]{box-shadow:0 0 0 1px currentColor inset}

/* ── Cards: the photograph leans in, only where there is a mouse ─ */
.prod .tile img,.var .shot img{transition:transform 600ms var(--ease-out)}
.prod,.var{transition:transform 160ms var(--ease-out)}
.prod:active,.var:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .prod:hover .tile img,.var:hover .shot img{transform:scale(1.035)}
}
.prod .tile,.var .shot{overflow:hidden}

/* ── Category pages: two products fill the row instead of leaving
     half of it empty; one product sits wide. ─────────────────── */
.vars:has(> .var:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.vars:has(> .var:only-child){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:620px){
  .vars:has(> .var:nth-child(2):last-child),.vars:has(> .var:only-child){grid-template-columns:1fr}
}

/* ── Product page: the photograph stays in view while choosing ─ */
@media (min-width:981px){
  .cols > div:first-child{position:sticky; top:24px}
}
.shot img{transition:opacity 220ms ease, filter 220ms ease}
.shot img.v2-swap{opacity:.55; filter:blur(3px)}

/* The quantity menu grows from its button, not from nowhere. */
.qty-list:not([hidden]){animation:v2-pop 170ms var(--ease-out); transform-origin:top center}
.cc-list:not([hidden]){animation:v2-pop 170ms var(--ease-out); transform-origin:top right}
@keyframes v2-pop{from{opacity:0; transform:scale(.97) translateY(-4px)}}

/* ── Home: one authored moment, the first photograph revealed ─── */
.hero-media img{animation:v2-reveal 900ms var(--ease-out) both}
.photo h1{animation:v2-rise 700ms var(--ease-out) both}
.photo .lede{animation:v2-rise 700ms var(--ease-out) 70ms both}
.photo .acts{animation:v2-rise 700ms var(--ease-out) 140ms both}
@keyframes v2-reveal{from{clip-path:inset(0 0 22% 0 round 18px); transform:scale(1.04); opacity:.4}}
@keyframes v2-rise{from{opacity:0; transform:translateY(10px)}}

/* ── Footer: the brand, two short columns, one quiet line ─────── */
footer.ft{padding-block:56px 28px; border-top:1px solid var(--line); text-align:start}
/* A section that already ends on a rule hands it to the footer. */
:has(+ footer.ft){border-bottom:0 !important}
footer.ft .ft-top{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.8fr); gap:40px; align-items:start}
footer.ft .ft-reads a{line-height:1.5}
footer.ft .ft-reads a:last-child{color:var(--tan)}
footer.ft .ft-brand{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
footer.ft .ft-brand .logo{font-size:28px; line-height:1}
footer.ft .ft-brand p{margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:30ch}
footer.ft .ft-col{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
footer.ft .ft-h{margin:0 0 4px; color:var(--cream); font-size:14px; font-weight:600}
footer.ft .ft-col a{color:var(--muted); font-size:15px; text-decoration:none; border:0; transition:color 160ms ease}
footer.ft .ft-col a:hover{color:var(--cream)}
footer.ft .ft-base{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 28px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line)}
footer.ft .ft-base span{color:var(--muted); font-size:13px}
@media (max-width:720px){
  footer.ft{padding-block:40px 24px}
  footer.ft .ft-top{grid-template-columns:1fr 1fr; gap:32px 24px}
  footer.ft .ft-brand,footer.ft .ft-reads{grid-column:1 / -1}
  footer.ft .ft-reads{order:1}
  footer.ft .ft-base{margin-top:36px; flex-direction:column; gap:6px}
}

/* The ways to pay, on white tiles as the card schemes ask. Footer, price
   box and checkout all use this one look. */
.pay-logos{display:flex; gap:6px; flex-wrap:wrap}
.pay-logos i{display:grid; place-items:center; width:46px; height:30px; background:#fff; border-radius:6px}
.pay-logos img{display:block; max-width:34px; max-height:16px}
footer.ft .ft-brand .pay-logos{margin-top:10px}

/* More of the same category, above the footer. */
.more{padding-block:8px 40px}
.more + .more{padding-top:0}
.more-h{margin:0 0 12px; font-size:14px; font-weight:600; color:var(--cream)}
.more-l{display:flex; flex-wrap:wrap; gap:10px 22px}
.more-l a{color:var(--muted); font-size:15px; text-decoration:none; transition:color 160ms ease}
.more-l a:hover{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  .hero-media img,.photo h1,.photo .lede,.photo .acts,.qty-list,.cc-list{animation:none !important}
  .prod .tile img,.var .shot img{transition:none}
  .btn:active,.ch:active,.pre:active,.prod:active,.var:active{transform:none}
}

/* ── Product facts, in the page itself: tiles, then sizes and prices ── */
.pd{padding-block:48px 36px; border-top:1px solid var(--line)}
.pd-head{margin-bottom:18px}
.pd-head h2{margin:0 0 6px; font-size:clamp(22px,2.4vw,28px)}
.pd-lede{margin:0; max-width:62ch; font-size:15px; line-height:1.7; color:var(--muted)}
.pd-tiles{margin:0 0 14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.pd-t{padding:12px 14px; border-radius:14px; background:var(--card)}
.pd-t dt{font-size:12.5px; color:var(--muted)}
.pd-t dd{margin:3px 0 0; font-size:14px; line-height:1.5; color:var(--cream)}
.pd-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start}
.pd-box{padding:16px 18px; border-radius:16px; background:var(--card)}
.pd-box h3,.pd-faq h3{margin:0 0 8px; font-size:15.5px; color:var(--cream)}
.pd-box table{width:100%; border-collapse:collapse; font-size:14px; line-height:1.5}
.pd-box th,.pd-box td{padding:7px 0; border-bottom:1px solid var(--line); text-align:start; vertical-align:top}
.pd-box tr:last-child th,.pd-box tr:last-child td{border-bottom:0}
.pd-box th{color:var(--muted); font-weight:500; padding-inline-end:12px}
.pd-box td{color:var(--cream)}
.pd-box thead th{color:var(--cream); font-weight:600}
.pd-note{margin:8px 0 0; font-size:12px; color:var(--muted)}
.pd-test{margin:0 0 6px; font-size:12px; font-weight:700; color:var(--tan)}
.pd-faq{margin-top:22px}
.pd-qs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start}
.pd-faq details{border:1px solid var(--line); border-radius:14px; background:var(--card); transition:border-color 160ms ease}
.pd-faq details[open]{border-color:rgba(233,184,123,.35)}
.pd-faq summary{cursor:pointer; list-style:none; padding:15px 18px; font-size:15px; font-weight:500; color:var(--cream); display:flex; justify-content:space-between; align-items:center; gap:12px; border-radius:14px}
.pd-faq summary:focus{outline:none}
.pd-faq summary:focus-visible{outline:2px solid var(--tan); outline-offset:2px}
.pd-faq summary::after{content:"+"; flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--band); color:var(--cream); font-size:17px; line-height:1}
.pd-faq details[open] summary::after{content:"−"}
.pd-faq summary::-webkit-details-marker{display:none}
.pd-faq details p{margin:0; padding:0 18px 16px; color:var(--muted); line-height:1.75; font-size:14.5px}
@media(max-width:980px){ .pd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-grid,.pd-qs{grid-template-columns:1fr} }
.pd-read{margin-top:22px}
.pd-read h3{margin:0 0 8px; font-size:15.5px; color:var(--cream)}
.pd-read ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media(max-width:900px){.pd-read ul{grid-template-columns:1fr}}
.pd-read a.rd{display:flex; align-items:center; gap:12px; height:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--cream); font-size:14.5px; line-height:1.5; text-decoration:none; transition:border-color 160ms ease}
.pd-read a.rd::before{content:""; flex:none; width:32px; height:32px; border-radius:9px; background:var(--band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9b87b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8.5L19 7.5V21H6z'/%3E%3Cpath d='M14 3v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E") center/18px no-repeat}
.pd-read a.rd i{margin-inline-start:auto; font-style:normal; color:var(--tan)}
.pd-read a.rd:hover{border-color:var(--tan)}
.pd-about{margin:0 0 16px; display:grid; gap:10px}
.pd-lead{margin:0; font-size:16.5px; line-height:1.8; color:var(--cream)}
.pd-more summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--line); font-size:14px; color:var(--cream)}
.pd-more summary:hover{border-color:var(--tan)}
.pd-more-b{margin-top:10px; padding:4px 18px 16px; border-radius:16px; background:var(--card)}
/* Open: the pill becomes a tab joined to the text card under it. */
.pd-more[open] summary{border-color:transparent; background:var(--card); border-end-start-radius:0; border-end-end-radius:0; padding-bottom:12px; color:var(--tan)}
.pd-more[open] .pd-more-b{margin-top:0; border-start-start-radius:0}
.pd-more summary::-webkit-details-marker{display:none}
.pd-more summary::after{content:"+"; font-size:16px; color:var(--tan)}
.pd-more[open] summary::after{content:"−"}
.pd-more p{margin:10px 0 0; max-width:75ch; font-size:15px; line-height:1.85; color:var(--cream)}
.pd-vs{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:12px 16px; border-radius:14px;
  border:1px solid rgba(233,184,123,.3); background:rgba(233,184,123,.06); text-decoration:none}
.pd-vs span{flex:1 1 100%; font-size:13.5px; font-weight:700; color:var(--tan)}
.pd-vs b{flex:1 1 280px; font-size:14.5px; font-weight:400; line-height:1.7; color:var(--cream)}
.pd-vs i{font-style:normal; font-size:13.5px; font-weight:600; color:var(--tan); white-space:nowrap}
.pd-vs:hover{border-color:var(--tan)}
.cat-about h2{margin:0 0 10px; font-size:clamp(22px,2.4vw,28px)}
.cat-about .pd-lede{margin:0 0 16px}
.cat-about .pd-box{max-width:820px}
.cat-about .pd-box a{color:var(--cream)}

/* ── Design upload ─────────────────────────────────────────────── */
#art-extra{margin-top:12px}
.up-box{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1.5px dashed rgba(238,242,236,.28);
  border-radius:16px; background:rgba(238,242,236,.03); cursor:pointer; transition:border-color .16s, background .16s}
.up-box:hover,.up-box.over,.up-box:focus-visible{border-color:var(--cream); background:rgba(238,242,236,.06)}
.up-box.busy{opacity:.7; pointer-events:none}
.up-box.done{border-style:solid; border-color:rgba(127,211,154,.5); background:rgba(127,211,154,.06)}
.up-ico{flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(238,242,236,.08); color:var(--cream)}
.up-ico svg{width:22px; height:22px}
.up-ico.ok{background:rgba(127,211,154,.18); color:#7fd39a}
.up-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.up-t b{font-size:15.5px; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-t small{font-size:12.5px; color:var(--muted)}
.up-act{flex:0 0 auto; font-size:13.5px; font-weight:600; color:var(--tan)}
.up-alt{margin:10px 2px 0; font-size:13.5px; color:var(--muted)}
.up-note{display:flex; gap:8px; align-items:flex-start; margin:10px 2px 0; font-size:13.5px; line-height:1.6; color:var(--cream)}
.up-note::before{content:"✓"; color:#7fd39a; font-weight:800}

/* End of a product page: the rest of the catalogue as chips. */
.more2{padding-block:8px 48px}
.more2 h2{margin:0 0 14px; font-size:18px}
.m2-g{margin:0 0 14px}
.m2-g p{margin:0 0 8px; font-size:13px; color:var(--muted)}
.m2-l{display:flex; flex-wrap:wrap; gap:8px}
.m2-l a{padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--cream); font-size:14px; text-decoration:none; transition:border-color 160ms ease, background 160ms ease}
.m2-l a:hover{border-color:var(--cream)}
.m2-l a.m2-all{border-color:transparent; color:var(--tan)}

/* Questions and articles in a light panel of their own, so the end of the
   page reads differently from the dark cards above it. */
.pd-band{margin-top:30px; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:20px 48px; align-items:start;
  padding:30px 34px; border-radius:24px; background:#efe8dc; color:#1c211c; counter-reset:q}
.pd-band h3{margin:0 0 6px; font-size:19px; color:#1c211c}
.pd-band .pd-faq,.pd-band .pd-read{margin:0}
.pd-band .pd-qs{display:block}
.pd-band .pd-faq details{border:0; border-bottom:1px solid rgba(28,33,28,.14); border-radius:0; background:none}
.pd-band .pd-faq details[open]{border-color:rgba(28,33,28,.14)}
.pd-band .pd-faq summary{padding:16px 0; border-radius:0; color:#1c211c; font-weight:600; justify-content:flex-start}
.pd-band .pd-faq summary::before{counter-increment:q; content:counter(q, arabic-indic); flex:none; width:26px; color:#a8743a; font-weight:700; font-size:14px}
.pd-band .pd-faq summary::after{margin-inline-start:auto; background:none; border:1.5px solid rgba(28,33,28,.25); color:#1c211c; width:24px; height:24px; font-size:15px}
.pd-band .pd-faq details[open] summary::after{background:#1c211c; color:#efe8dc; border-color:#1c211c}
.pd-band .pd-faq details p{padding:0 26px 16px 0; color:#4b514a}
.pd-band .pd-read ul{display:block}
.pd-band .pd-read li{border-bottom:1px solid rgba(28,33,28,.14)}
.pd-band .pd-read a.rd{padding:15px 0; border:0; border-radius:0; background:none; color:#1c211c; font-weight:500}
.pd-band .pd-read a.rd::before{width:28px; height:28px; background-color:rgba(28,33,28,.07)}
.pd-band .pd-read a.rd i{color:#a8743a; transition:transform 160ms ease}
.pd-band .pd-read a.rd:hover{color:#a8743a}
.pd-band .pd-read a.rd:hover i{transform:translateX(-4px)}
.pd-band .pd-faq summary:focus-visible{outline-color:#a8743a}
@media(max-width:900px){.pd-band{grid-template-columns:1fr; padding:22px 18px; border-radius:20px}}