:root{
  --page:#F1D9DE;
  --bg:#FFF7F5;
  --surface:#FFFFFF;
  --soft:#FBE4E4;
  --text:#3A1226;
  --muted:#7E5567;
  --line:rgba(58,18,38,.13);
  --track:rgba(58,18,38,.16);
  --accent:#B3125F;
  --on-accent:#FFFFFF;
  --nav-bg:rgba(255,247,245,.88);
  --serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --u:min(100vw,480px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#12060D;--bg:#1B0912;--surface:#2A1120;--soft:#3A1830;--text:#FBE9EE;--muted:#C79DB0;
    --line:rgba(251,233,238,.15);--track:rgba(251,233,238,.2);--accent:#D02A7C;--on-accent:#fff;
    --nav-bg:rgba(27,9,18,.88);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#12060D;--bg:#1B0912;--surface:#2A1120;--soft:#3A1830;--text:#FBE9EE;--muted:#C79DB0;
  --line:rgba(251,233,238,.15);--track:rgba(251,233,238,.2);--accent:#D02A7C;--on-accent:#fff;
  --nav-bg:rgba(27,9,18,.88);color-scheme:dark;
}
html[lang="ar"]{--serif:'Amiri',Georgia,serif;--sans:'Tajawal','Segoe UI',Tahoma,sans-serif}
span[lang="ar"]{font-family:'Tajawal','Segoe UI',Tahoma,sans-serif}

*,*::before,*::after{box-sizing:inherit;margin:0}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip;background:var(--page);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[dir="rtl"] *{letter-spacing:0!important}
[dir="rtl"] .flip{transform:scaleX(-1)}
.back{transform:scaleX(-1)}
[dir="rtl"] .back{transform:none}
.i{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gi{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}

/* ---------- placeholder palette (stands in for photos) ---------- */
.g0{--g:linear-gradient(155deg,#FCE8E6 0%,#F3BCCB 100%);--ink:#3A1226;--on:#fff}
.g1{--g:linear-gradient(155deg,#D8367F 0%,#A80F5A 100%);--ink:#fff;--on:#A80F5A}
.g2{--g:linear-gradient(155deg,#F9D9E1 0%,#E9A9BD 100%);--ink:#3A1226;--on:#fff}
.g3{--g:linear-gradient(155deg,#5E203F 0%,#33102A 100%);--ink:#FBE4E4;--on:#33102A}
.g4{--g:linear-gradient(155deg,#FFF1E6 0%,#F1CFC9 100%);--ink:#3A1226;--on:#fff}
.g5{--g:linear-gradient(155deg,#C42E74 0%,#8C0E4A 100%);--ink:#fff;--on:#8C0E4A}
.g6{--g:linear-gradient(155deg,#F5BDD0 0%,#DB7FA4 100%);--ink:#3A1226;--on:#fff}
.g7{--g:linear-gradient(155deg,#EFD9CC 0%,#DDB3A6 100%);--ink:#3A1226;--on:#fff}

/* ---------- shell ---------- */
.app{max-width:480px;margin-inline:auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:104px;box-shadow:0 0 0 1px var(--line)}

.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 10px;background:var(--nav-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:transform .5s var(--ease)}
.hdr.hide{transform:translateY(-110%)}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:31px;letter-spacing:.01em;color:var(--accent);text-decoration:none;line-height:1}
.ibtn{min-width:44px;height:44px;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border-radius:22px;color:var(--text);font-size:13px;font-weight:500}
.langbtn{justify-self:start;padding-inline:8px}
.hend{justify-self:end}
.langpop{position:absolute;top:calc(100% + 4px);inset-inline-start:10px;min-width:170px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 36px rgba(58,18,38,.2);display:none}
.langpop.open{display:block;animation:up .28s var(--ease)}
.langpop button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:12px;border:0;background:none;border-radius:12px;font-size:16px;cursor:pointer}
.langpop button[aria-checked="true"]{background:var(--soft);font-weight:500}
@keyframes up{from{opacity:0;transform:translateY(14px)}}

/* ---------- hero carousel ---------- */
.hero{padding-top:14px}
.track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:20px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain;animation:rise 1s var(--ease) .1s backwards}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 84%;scroll-snap-align:start;position:relative;aspect-ratio:4/5;border-radius:30px;overflow:hidden;isolation:isolate;background:var(--g);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transform:scale(.94);opacity:.78;transition:transform .7s var(--ease),opacity .7s}
.slide.on{transform:none;opacity:1}
.slide::before{content:"";position:absolute;z-index:-1;width:118%;aspect-ratio:1;left:-9%;top:-14%;border:1px solid var(--ink);border-radius:50%;opacity:.16}
.slide::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(60% 40% at 25% 18%,rgba(255,255,255,.42),transparent 70%)}
.s-ico{position:absolute;left:50%;top:36%;width:56%;transform:translate(-50%,-50%);color:var(--ink);opacity:.55;pointer-events:none}
.s-ico .gi{stroke-width:.8}
.s-sub{font-size:15px;opacity:.85;margin-bottom:2px}
.s-title{font-family:var(--serif);font-weight:500;font-size:clamp(44px,13.5vw,60px);line-height:1;letter-spacing:-.01em}
html[lang="ar"] .s-title{line-height:1.3;font-size:clamp(38px,11.5vw,52px)}
.cta{display:inline-flex;align-self:flex-start;margin-top:16px;padding:12px 24px;border-radius:999px;background:var(--ink);color:var(--on);font-size:15px;font-weight:500}
.slide.on .s-copy>*{animation:up .9s var(--ease) both}
.slide.on .s-copy>:nth-child(2){animation-delay:.08s}
.slide.on .s-copy>:nth-child(3){animation-delay:.18s}
.s-copy{display:flex;flex-direction:column}
/* hero slide with a real photo */
.s-ph{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.slide.has-ph{--ink:#fff;--on:#3A1226}
.slide.has-ph::before{display:none}
.slide.has-ph::after{background:linear-gradient(180deg,rgba(40,10,26,0) 38%,rgba(40,10,26,.62) 100%)}

.segs{display:flex;gap:6px;padding:8px 20px 0}
.seg{flex:1;height:24px;border:0;background:none;padding:0;position:relative;cursor:pointer}
.seg::before{content:"";position:absolute;inset-inline:0;top:10px;height:3px;border-radius:2px;background:var(--track)}
.fill{position:absolute;top:10px;inset-inline-start:0;height:3px;border-radius:2px;background:var(--accent);width:0}
.seg.done .fill{width:100%}
.seg.active .fill{animation:fill var(--dur,5.6s) linear forwards}
.hero.paused .seg.active .fill{animation-play-state:paused}
@keyframes fill{from{width:0}to{width:100%}}

.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:15px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .25s,transform .2s}
.chip:active{transform:scale(.96);background:var(--soft)}

/* ---------- section heads ---------- */
.cat,#new{scroll-margin-top:64px}
.cat-head{padding:56px 22px 20px}
.cat-title{font-family:var(--serif);font-weight:500;font-size:clamp(46px,14vw,70px);line-height:.98;letter-spacing:-.015em;color:var(--text)}
html[lang="ar"] .cat-title{line-height:1.3;font-size:clamp(42px,12.5vw,62px)}
.cat-title .ln{display:block;overflow:hidden;padding-bottom:.1em}
.cat-title .ln>span{display:block;transform:translateY(108%);transition:transform 1.1s var(--ease)}
.cat-head.in .cat-title .ln>span{transform:none}
.cat-sub{margin-top:6px;font-family:var(--serif);font-size:21px;font-style:italic;color:var(--muted);opacity:0;transform:translateY(10px);transition:opacity .9s .3s,transform .9s .3s var(--ease)}
html[lang="ar"] .cat-sub{font-style:normal;font-size:18px}
.meta{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);opacity:0;transform:translateY(10px);transition:opacity .9s .45s,transform .9s .45s var(--ease)}
.cat-head.in .cat-sub,.cat-head.in .meta{opacity:1;transform:none}
.pill{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;transition:background .25s,color .25s}
.pill:active{background:var(--accent);color:var(--on-accent)}

/* ---------- category separator band ---------- */
.band{position:relative;margin:56px 0 0;aspect-ratio:4/5;max-height:78svh;border-radius:0;overflow:hidden;isolation:isolate;background:var(--g);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end}
.band:not(.has-ph)::before{content:"";position:absolute;z-index:-1;width:120%;aspect-ratio:1;left:-10%;top:-16%;border:1px solid var(--ink);border-radius:50%;opacity:.16}
.band.has-ph{--ink:#fff;--on:#3A1226}
.band.has-ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(40,10,26,0) 34%,rgba(40,10,26,.66) 100%)}
.band-ph{position:absolute;left:0;top:-6%;z-index:-2;width:100%;height:112%;object-fit:cover;transform:translateY(calc(var(--py,0px)*.9))}
.band-ico{position:absolute;left:50%;top:36%;width:52%;transform:translate(-50%,-50%);opacity:.5;pointer-events:none}
.band-ico .gi{stroke-width:.8}
.band-copy{display:flex;flex-direction:column;padding:24px 24px 26px}
.band-k{font-size:14px;opacity:.85}
.band-title{font-family:var(--serif);font-weight:500;font-size:clamp(54px,16vw,78px);line-height:.96;letter-spacing:-.015em;margin-top:2px}
html[lang="ar"] .band-title{line-height:1.3;font-size:clamp(44px,13vw,64px)}
.band .ln{display:block;overflow:hidden;padding-bottom:.08em}
.band .ln>span{display:block;transform:translateY(108%);transition:transform 1.1s var(--ease)}
.band.in .ln>span{transform:none}
.band-sub{font-family:var(--serif);font-style:italic;font-size:21px;opacity:.92;margin-top:2px}
html[lang="ar"] .band-sub{font-style:normal;font-size:18px}
.band-btn{align-self:flex-start;margin-top:18px;padding:13px 24px;border-radius:999px;background:var(--ink);color:var(--on);font-size:15px;font-weight:500;text-decoration:none;transition:transform .2s}
.band-btn:active{transform:scale(.96)}
.band-sub,.band-k,.band-btn{opacity:0;transform:translateY(10px);transition:opacity .9s .35s,transform .9s .35s var(--ease)}
.band.in .band-sub,.band.in .band-k{opacity:.9;transform:none}
.band.in .band-btn{opacity:1;transform:none}
/* wide screens (PC): banners run the full window width; their text lines up with the shop column */
@media (min-width:481px){
  .band{width:calc(100vw - var(--sbw,0px));margin-inline:calc(50% - (50vw - var(--sbw,0px)/2));aspect-ratio:auto;height:min(80vh,760px);max-height:none}
  .band-page{height:min(62vh,600px)}
  .band-copy{padding-inline:max(24px,calc(50vw - var(--sbw,0px)/2 - 216px))}
  .band-back{inset-inline-start:max(12px,calc(50vw - var(--sbw,0px)/2 - 228px))}
}
/* category page */
.band-page{margin:0;aspect-ratio:1/1}
.band-back{top:12px;inset-inline-start:12px}
.cpage .empty{padding:48px 20px}
.others{padding:44px 0 0}
.others h3{font-family:var(--serif);font-size:28px;font-weight:600;padding:0 22px 6px}

/* ---------- gallery ---------- */
/* phones: 2 across, every photo the same portrait size (same idea as the PC rows) */
.collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 14px;background:var(--bg)}
.collage+.collage{padding-top:0}
.collage .tile{grid-row:auto;grid-column:auto;aspect-ratio:3/4;border-radius:14px}
.collage .tile:active{transform:none;filter:brightness(.94)}
/* collage keeps its 7px padding at the bottom: same gap before the next banner as between photos */
.cat+.cat .band{margin-top:0}
/* end of a category: a clear "see all" button and breathing room before the next banner */
.cat-end{display:flex;justify-content:center;padding:18px 20px 64px}
.cat-end .pill{padding:12px 26px;font-size:15px}
/* quotes between sections (set in the admin's Home page tab) */
.quote{padding:72px 32px 76px;text-align:center}
.quote p{max-width:22ch;margin:0 auto;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(30px,8.4vw,40px);line-height:1.2;color:var(--text)}
.quote::after{content:"";display:block;width:44px;height:1px;margin:30px auto 0;background:var(--accent);opacity:.7}
html[lang="ar"] .quote p{font-style:normal;line-height:1.6;font-size:clamp(26px,7vw,34px)}
.ranked .cat-head{padding-top:44px}
.ranked .cat-end{padding-bottom:40px}
/* reel motion: at rest the main photo is shown as-is; during a piece's turn its first photos glide side to side */
.collage .ph{--sx:-5%;--sy:0%;--ex:5%;--ey:0%;transform:none;transition:opacity .5s ease}
.collage .ph.fresh{opacity:0}
.collage .ph.sweep{animation:sweep var(--dur,2.4s) cubic-bezier(.3,0,.7,1) forwards;will-change:transform}
@keyframes sweep{from{transform:scale(1.12) translate(var(--sx),var(--sy))}to{transform:scale(1.12) translate(var(--ex),var(--ey))}}
.collage .ph.sweep.rev{animation-name:sweep-rev}
@keyframes sweep-rev{from{transform:scale(1.12) translate(var(--ex),var(--ey))}to{transform:scale(1.12) translate(var(--sx),var(--sy))}}
.t-tall{grid-row:span 2}
.t-wide{grid-column:span 2}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:0 14px 6px;scroll-padding-inline:14px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .tile{flex:0 0 58%;aspect-ratio:3/4;scroll-snap-align:start}

.tile{position:relative;border-radius:24px;overflow:hidden;isolation:isolate;background:var(--g);color:var(--ink);transition:transform .35s var(--ease);-webkit-tap-highlight-color:transparent}
.tile:active{transform:scale(.97)}
.tile::before{content:"";position:absolute;z-index:-1;width:130%;aspect-ratio:1;left:-15%;top:-38%;border:1px solid var(--ink);border-radius:50%;opacity:.14}
.art{position:absolute;inset:-30px;z-index:-1;background:radial-gradient(55% 40% at 28% 18%,rgba(255,255,255,.45),transparent 70%),radial-gradient(50% 38% at 82% 92%,rgba(0,0,0,.08),transparent 70%);transform:translateY(calc(var(--py,0px)*-.6));pointer-events:none}
.ico{position:absolute;left:50%;top:48%;width:46%;transform:translate(-50%,-50%) translateY(var(--py,0px));opacity:.5;pointer-events:none}
.t-tall .ico{width:54%}
.t-wide .ico{width:22%;left:50%}
.strip .ico{width:54%}
.tile .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hit{position:absolute;inset:0;border:0;background:none;cursor:pointer;z-index:1}
.heart{position:absolute;z-index:2;top:4px;inset-inline-end:4px;width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink);opacity:.72;-webkit-tap-highlight-color:transparent;transition:opacity .25s}
.heart .i{filter:drop-shadow(0 1px 3px rgba(0,0,0,.18));transition:transform .2s}
.heart:active .i{transform:scale(.85)}
.heart.on{opacity:1}
.heart.on .i{fill:#D8367F;stroke:#D8367F;animation:pop .5s var(--ease)}
.g1 .heart.on .i,.g5 .heart.on .i{fill:#fff;stroke:#fff}
@keyframes pop{35%{transform:scale(1.4)}}

.promo .pin{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
.promo .k{font-size:12.5px;opacity:.85}
.promo .t{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.02}
html[lang="ar"] .promo .t{line-height:1.25;font-size:22px}
.promo .s{font-size:13.5px;opacity:.9}

/* reveal: the one gallery motion */
.rv:not(.in){opacity:0}
.rv.in{animation:rise 1s var(--ease) backwards;animation-delay:calc(var(--i,0)*90ms)}
@keyframes rise{from{opacity:0;transform:translateY(34px) scale(.95)}}

/* ---------- footer ---------- */
.foot{margin-top:60px;padding:36px 20px 8px;text-align:center;border-top:1px solid var(--line)}
.foot .logo{font-size:38px}
.flangs{display:flex;justify-content:center;gap:6px;margin:16px 0 14px}
.flangs button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:none;cursor:pointer;font-size:14px}
.flangs button[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.foot p{font-size:13px;color:var(--muted)}

/* ---------- bottom nav ---------- */
.nav{position:fixed;bottom:0;inset-inline:0;margin-inline:auto;width:min(100%,480px);z-index:40;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--nav-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(105%)}
.nb{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:12px;color:var(--muted);cursor:pointer;min-height:52px}
.nb.on{color:var(--accent);font-weight:500}
.nbi{position:relative;display:grid;place-items:center;height:26px}
.bump{animation:bump .6s var(--ease)}
@keyframes bump{30%{transform:scale(1.3) rotate(-8deg)}60%{transform:scale(.95) rotate(4deg)}}
.badge{position:absolute;top:-4px;inset-inline-start:calc(50% + 4px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:500;display:grid;place-items:center;font-style:normal}

/* ---------- piece viewer (opens from a tile) ---------- */
.viewer{position:fixed;top:0;bottom:0;inset-inline:0;margin-inline:auto;width:min(100%,480px);z-index:50;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:inset(50% 50% 50% 50% round 24px);outline:0}
.viewer.open{visibility:visible}
.viewer.fade{animation:vfade .4s var(--ease)}
.viewer.swap .v-media{animation:vfade .5s var(--ease)}
@keyframes vfade{from{opacity:0}}
.v-media{position:relative}
.v-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.v-track::-webkit-scrollbar{display:none}
.vs{flex:0 0 100%;scroll-snap-align:start;position:relative;aspect-ratio:4/5;max-height:78svh;overflow:hidden;isolation:isolate;background:var(--g);color:var(--ink)}
.vs::before{content:"";position:absolute;z-index:-1;width:130%;aspect-ratio:1;left:-15%;top:-30%;border:1px solid var(--ink);border-radius:50%;opacity:.14}
.vph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vico{position:absolute;left:50%;top:46%;width:52%;transform:translate(-50%,-50%);opacity:.5;pointer-events:none}
.vico .gi{stroke-width:.7}
.m-b .vico{width:135%;left:64%;top:60%;opacity:.32}
.m-c .vico{width:32%;left:50%;top:40%;opacity:.55}
.vbtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,247,245,.82);color:#3A1226;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;z-index:3}
.v-close{inset-inline-start:14px}
.v-heart{inset-inline-end:14px}
.v-heart.on .i{fill:#B3125F;stroke:#B3125F;animation:pop .5s var(--ease)}
.burst{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;opacity:0;pointer-events:none;z-index:2;filter:drop-shadow(0 4px 16px rgba(0,0,0,.28))}
.burst .i{fill:#fff;stroke:#fff}
.burst.go{animation:burst .9s var(--ease)}
@keyframes burst{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.15)}60%{opacity:1;transform:scale(.95)}100%{opacity:0;transform:scale(1.1)}}
.v-segs{display:flex;gap:6px;padding:14px 22px 0}
.v-segs i{flex:1;height:3px;border-radius:2px;background:var(--track);transition:background .3s}
.v-segs i.on{background:var(--accent)}
.v-info{padding:22px 22px 8px}
.v-info>*{animation:up .9s var(--ease) both}
.v-info>:nth-child(2){animation-delay:.06s}
.v-info>:nth-child(3){animation-delay:.12s}
.v-info>:nth-child(n+4){animation-delay:.18s}
.v-info h2{font-family:var(--serif);font-weight:600;font-size:38px;line-height:1.05;letter-spacing:-.01em}
html[lang="ar"] .v-info h2{line-height:1.3;font-size:34px}
.v-price{margin-top:8px;font-size:17px}
.v-cap{margin-top:14px;font-size:17px;line-height:1.65;color:var(--muted);max-width:36ch}
.v-info .lbl{margin-top:28px}
.v-more{padding:38px 0 48px}
.v-more h3{font-family:var(--serif);font-size:28px;font-weight:600;padding:0 22px 14px}
.v-more .strip .tile{flex-basis:44%}
.linkbtn{display:block;margin:14px auto 0;background:none;border:0;color:var(--accent);font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}

/* ---------- sheet + toast ---------- */
.ov{position:fixed;inset:0;background:rgba(40,10,26,.5);opacity:0;pointer-events:none;transition:opacity .35s;z-index:60}
.ov.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;bottom:0;inset-inline:0;margin-inline:auto;width:min(100%,480px);z-index:61;background:var(--surface);color:var(--text);border-radius:28px 28px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px));max-height:84svh;overflow:auto;transform:translateY(105%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s;outline:0}
.sheet.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s 0s}
.grab{width:42px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 16px}
.sh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sh-head h2{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.1}
.x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:none;display:grid;place-items:center;cursor:pointer;flex:none}
.x.sm{width:36px;height:36px;border:0}
.list{list-style:none;padding:0}
.row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.rthumb{width:54px;height:62px;border-radius:15px;background:var(--g);color:var(--ink);display:grid;place-items:center;flex:none;overflow:hidden}
.rthumb .gi{width:58%}
.rthumb img{width:100%;height:100%;object-fit:cover}

.load-err{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;color:var(--muted)}
.load-err button{padding:12px 24px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent);font-size:15px;cursor:pointer}
.rname{flex:1;font-size:16px;line-height:1.3}
.rname small{display:block;color:var(--muted);font-size:13.5px}
.rprice{font-size:15px}
.price{font-size:14px}
.lbl{display:flex;justify-content:space-between;margin:14px 0 2px;font-size:15px;font-weight:500}
.lbl a{color:var(--accent);font-weight:400;text-decoration:underline;text-underline-offset:3px}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 22px}
.sz-btn{min-width:54px;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:none;cursor:pointer;font-size:15px;transition:background .2s,transform .2s}
.sz-btn:active{transform:scale(.95)}
.sz-btn.sel{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sz-btn:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.cta-btn{width:100%;padding:16px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:500;cursor:pointer;transition:transform .2s,opacity .2s,background .3s}
.cta-btn:active{transform:scale(.98)}
.cta-btn:disabled{opacity:.45;cursor:not-allowed}
.cta-btn.ok{background:var(--text);color:var(--bg)}
.total{display:flex;justify-content:space-between;font-size:17px;font-weight:500;padding:16px 0 14px}
.note{text-align:center;color:var(--muted);font-size:13.5px;margin-top:12px}
.empty{text-align:center;padding:34px 12px;color:var(--muted)}
.empty .i{color:var(--accent);margin:0 auto 10px;display:block}
.sbox{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;border:1px solid var(--line);border-radius:18px;background:var(--bg)}
.sbox input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--text);outline:0}
.pops{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}

/* ---- order form (no cart: tap a piece, pick a size, fill this, done) ---- */
.oitem{padding:4px 0 18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.oitem .rthumb{width:50px;height:58px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:6px}
.field input[type=text],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);font-family:inherit;font-size:16px;color:var(--text)
}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%237E5567' stroke-width='1.8'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:center right 14px;padding-inline-end:38px}
[dir="rtl"] .field select{background-position:center left 14px;padding-inline-end:14px;padding-inline-start:38px}
.field textarea{resize:vertical;min-height:60px;line-height:1.5}
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stepper button{width:46px;height:46px;border:0;background:var(--soft);font-size:19px;line-height:1;cursor:pointer}
.stepper button:active{background:var(--track)}
.stepper span{min-width:42px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
.oerr{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);border-radius:12px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.oerr:empty{display:none}
.empty.ok{color:var(--text);padding:28px 8px 10px}
.empty.ok p{max-width:34ch;margin:0 auto;line-height:1.6}

.toast{position:fixed;inset-inline:0;margin-inline:auto;width:max-content;max-width:90%;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:70;padding:12px 20px;border-radius:999px;background:var(--text);color:var(--bg);font-size:15px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .45s var(--ease)}
.toast.show{opacity:1;transform:none}


/* ---------- PC-only pieces: hidden on phones ---------- */
.hstart{justify-self:start;display:flex;align-items:center}
.hend{display:flex;align-items:center}
.themebtn .i{transition:transform .5s var(--ease)}
.themebtn:active .i{transform:rotate(-30deg) scale(.9)}
html{transition:background-color .3s}
.dlinks,.donly,.tcap,.sarr,.v-save{display:none}
.card{display:contents}
.tile .ph-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
@media (hover:hover){.tile:hover .ph-alt.ready,.card:hover .ph-alt.ready{opacity:1}}

/* =====================================================================
   PC VERSION (1024px and wider)
   Same shop, laid out for a big screen: links in the top bar instead of
   the bottom bar, a wide editorial hero, landscape photo frames, a 4-up
   grid on category pages, a two-column product view and side drawers.
   ===================================================================== */
@media (min-width:1024px){
  :root{--hh:65px;--wrap:1320px;--gut:max(40px,calc((100vw - var(--sbw,0px) - var(--wrap))/2))}
  body{background:var(--bg)}
  .app{max-width:none;padding-bottom:0;box-shadow:none}
  .nav{display:none}
  .toast{bottom:32px}

  /* top bar: category links | logo | search, saved, orders, language */
  .hdr{padding:10px var(--gut);gap:24px;top:0}
  .hstart .langbtn{display:none}
  .donly{display:inline-flex}
  .dlinks{display:flex;gap:30px}
  .dlinks a{position:relative;padding:10px 0;font-size:15.5px;color:var(--text);text-decoration:none;transition:color .2s}
  .dlinks a::after{content:"";position:absolute;inset-inline:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .35s var(--ease)}
  .dlinks a:hover,.dlinks a[aria-current="page"]{color:var(--accent)}
  .dlinks a:hover::after,.dlinks a[aria-current="page"]::after{transform:none}
  .hend{display:flex;align-items:center;gap:2px}
  .logo{font-size:42px}
  .ibtn:hover{background:var(--soft)}
  .langpop{inset-inline-start:auto;inset-inline-end:var(--gut)}
  #new{scroll-margin-top:var(--hh)}
  .cat{scroll-margin-top:0}
  .hdr{min-height:var(--hh)}

  /* hero: one wide slide at a time — big title on the colour, photo on the other side */
  .hero{padding:24px var(--gut) 0}
  .hero+.chips{display:none}
  .track{padding-inline:0;scroll-padding-inline:0;gap:16px}
  .slide{flex:0 0 100%;aspect-ratio:auto;height:min(72vh,660px);border-radius:32px;padding:56px 64px;justify-content:center;transform:none;opacity:1}
  .slide::before{width:62%;left:-12%;top:-34%}
  [dir="rtl"] .slide::before{left:auto;right:-12%}
  .slide.has-ph::before{display:block}
  .slide.has-ph::after{display:none}
  .slide.has-ph.g0,.slide.has-ph.g2,.slide.has-ph.g4,.slide.has-ph.g6,.slide.has-ph.g7{--ink:#3A1226;--on:#fff}
  .slide.has-ph.g1,.slide.has-ph.g5{--ink:#fff;--on:#A80F5A}
  .slide.has-ph.g3{--ink:#FBE4E4;--on:#33102A}
  .s-ph{inset:0 0 0 auto;width:44%}
  [dir="rtl"] .s-ph{inset:0 auto 0 0}
  .s-ico{left:auto;right:9%;top:50%;width:26%;transform:translateY(-50%)}
  [dir="rtl"] .s-ico{right:auto;left:9%}
  .s-copy{max-width:50%}
  .s-sub{font-size:20px}
  .s-title{font-size:clamp(76px,8.2vw,136px)}
  html[lang="ar"] .s-title{font-size:clamp(64px,6.8vw,112px)}
  .cta{margin-top:28px;padding:15px 32px;font-size:16px;transition:transform .25s var(--ease)}
  .slide:hover .cta{transform:translateY(-2px)}
  .segs{padding:14px 0 0;gap:8px}

  /* section heads */
  .cat-head{padding:88px var(--gut) 28px}
  .cat-title{font-size:clamp(72px,7vw,112px)}
  html[lang="ar"] .cat-title{font-size:clamp(60px,6vw,96px)}
  .cat-sub{font-size:24px}

  /* category banners: text lines up with the page edge */
  .band{margin-top:88px;height:100vh;height:100svh}
  .band-page{height:min(62vh,600px)}
  .band-copy{padding:40px var(--gut) 64px}
  .band-back{inset-inline-start:var(--gut);top:24px}
  .band-k{font-size:16px}
  .band-title{font-size:clamp(84px,9vw,148px)}
  html[lang="ar"] .band-title{font-size:clamp(68px,7.4vw,120px)}
  .band-sub{font-size:26px}
  .band-btn{margin-top:26px;padding:15px 32px;font-size:16px}
  .band-btn:hover{transform:translateY(-2px)}

  /* home: under each banner, one row of equal portrait photos (4 across),
     name and price written underneath — like kith.com */
  .collage,.collage.f1,.collage.f2,.collage.f3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;height:auto;aspect-ratio:auto;gap:14px;padding:14px var(--gut)}
  .collage .tile,.cpage .frames .tile{grid-row:auto;grid-column:auto;aspect-ratio:3/4;height:auto;border-radius:14px}
  .collage .tile:active{transform:none}
  .cat-end{padding:28px var(--gut) 96px}
  .cat-end .pill{padding:14px 32px;font-size:16px}
  .quote{padding:120px var(--gut) 128px}
  .quote p{max-width:26ch;font-size:clamp(44px,4.2vw,64px)}
  html[lang="ar"] .quote p{font-size:clamp(36px,3.4vw,52px)}
  .ranked .cat-head{padding-top:72px}

  /* product cards: photo only; on hover the name and price fade in over a
     soft gradient at the bottom, and the heart gets a bolder outline */
  .card{display:flex;flex-direction:column;min-width:0}
  .card .tile{width:100%}
  .tcap{display:flex;position:absolute;z-index:1;inset-inline:0;bottom:0;justify-content:space-between;align-items:flex-end;gap:12px;padding:64px 18px 16px;color:#fff;line-height:1.3;background:linear-gradient(180deg,rgba(40,10,26,0),rgba(40,10,26,.62));opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
  .cname{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cprice{font-size:15px;white-space:nowrap;opacity:.92}
  .tile:hover .tcap,.tile:focus-within .tcap{opacity:1;transform:none}
  .hit{z-index:1}.heart{z-index:2}
  .tile:hover .heart,.tile:focus-within .heart{opacity:1}
  .heart .i{transition:transform .2s,stroke-width .25s}
  .tile:hover .heart .i,.tile:focus-within .heart .i{stroke-width:2.4}

  /* category page: every piece in an even 4-across grid */
  .cpage .frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:14px var(--gut)}
  .cpage .collage{display:contents}
  .others{padding:72px 0 0}
  .others h3{font-size:34px;padding:0 var(--gut) 10px}
  .others .chips{padding:8px var(--gut) 4px}



  /* strips (New in, Keep browsing) get arrows */
  .swrap{position:relative}
  .strip{gap:14px;padding:0 var(--gut) 6px;scroll-padding-inline:var(--gut)}
  .strip .card{flex:0 0 calc((100% - 42px)/4);scroll-snap-align:start}
  .strip .card .tile{flex:none;width:100%;aspect-ratio:3/4}
  .sarr{display:grid;place-items:center;position:absolute;z-index:3;top:calc(50% - 29px);width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:0 10px 26px rgba(58,18,38,.14);transition:transform .25s var(--ease),background .25s}
  .sarr:hover{transform:scale(1.06);background:var(--soft)}
  .sprev{inset-inline-start:calc(var(--gut) - 26px)}
  .snext{inset-inline-end:calc(var(--gut) - 26px)}

  /* product view: photos on the left, details stay in view on the right */
  .viewer{width:100%;padding:0 var(--gut)}
  .v-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr);column-gap:64px;align-items:start}
  .v-media{grid-column:1;grid-row:1;padding-top:24px}
  .v-track{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;scroll-snap-type:none}
  .vs{aspect-ratio:4/5;max-height:none;border-radius:20px}
  .vs.span{grid-column:1/-1;justify-self:center;width:min(100%,calc((100vh - 48px)*.8))}
  .v-segs{display:none}
  .v-close{position:fixed;top:20px;inset-inline-start:20px;z-index:5}
  .v-heart{display:none}
  .v-save{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:999px;background:none;font-size:16px;cursor:pointer;transition:background .25s}
  .v-save:hover{background:var(--soft)}
  .v-save.on .i{fill:var(--accent);stroke:var(--accent);animation:pop .5s var(--ease)}
  .vbtn:hover{background:#fff}
  .v-info{grid-column:2;grid-row:1;position:sticky;top:0;padding:96px 0 40px}
  .v-info h2{font-size:56px}
  html[lang="ar"] .v-info h2{font-size:46px}
  .v-price{font-size:20px}
  .v-cap{max-width:44ch}
  .sz-btn:hover:not(:disabled):not(.sel){background:var(--soft)}
  .cta-btn:hover:not(:disabled){filter:brightness(1.08)}
  .v-more{position:relative;padding:80px 0 88px}
  .v-more h3{font-size:36px;padding:0 0 18px}
  .v-more .strip{padding-inline:0;scroll-padding-inline:0}
  .v-more .strip .card{flex:0 0 calc((100% - 56px)/5)}
  .v-more .sprev{inset-inline-start:-26px}
  .v-more .snext{inset-inline-end:-26px}

  /* sheets become a drawer from the side */
  .sheet{top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;margin:0;width:min(460px,100%);max-height:none;border-radius:28px 0 0 28px;padding:28px 32px 32px;transform:translateX(105%)}
  [dir="rtl"] .sheet{border-radius:0 28px 28px 0;transform:translateX(-105%)}
  .sheet.open,[dir="rtl"] .sheet.open{transform:none}
  .grab{display:none}
  .row:hover .rname{color:var(--accent)}

  /* hover for chips and pills */
  .chip:hover{background:var(--soft)}
  .pill:hover{background:var(--accent);color:var(--on-accent)}
  .foot{margin-top:96px;padding:56px var(--gut) 24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv:not(.in){opacity:1}
  .cat-title .ln>span,.band .ln>span{transform:none}
  .band-sub,.band-k,.band-btn{opacity:1;transform:none}
  .cat-sub,.meta{opacity:1;transform:none}
  .seg.active .fill{width:100%}
  .slide{transform:none;opacity:1}
}