/* The real catalogue: the rail opens the page, then every piece, kind by kind. Colours of the photos' own wall. */
[hidden]{display:none !important}
:root{--wallc:#eee7df}
html{scroll-behavior:smooth}

/* the rail is the first screen */
.rk-wall{min-height:100svh;justify-content:center;padding-top:calc(76px + env(safe-area-inset-top,0px));padding-bottom:40px;position:relative;
  --W:min(18vw,264px,calc((100svh - 300px) / 1.42));--step:clamp(62px,6.9vw,100px)}
.rk-sc{overflow:visible}
.rk-row{padding:0}
.rk-hit{opacity:0}
.rk-go .rk-hit{opacity:1;animation:rkin 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 75ms + 100ms)}
@keyframes rkin{from{transform:translateX(62vw);opacity:0}45%{opacity:1}to{transform:none;opacity:1}}
html[dir="rtl"] .rk-go .rk-hit{animation-name:rkinr}
@keyframes rkinr{from{transform:translateX(-62vw);opacity:0}45%{opacity:1}to{transform:none;opacity:1}}
.rk-bar{animation:rkbar 1s cubic-bezier(.16,1,.3,1) both;transform-origin:left}
@keyframes rkbar{from{transform:scaleX(0)}to{transform:none}}
.rk-cap,.rk-all,.rk-avail{animation:rkup .7s ease both;animation-delay:1.2s}
@keyframes rkup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rk-cap{transition:opacity .2s}
.rk-all{order:2;margin-top:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 24px;border-radius:999px;background:#111;color:#fff;text-decoration:none;
  font:400 11px/1 var(--t);letter-spacing:.1em;text-transform:uppercase}
.rk-all:hover{background:#000}
.rk-avail{order:3}
html[lang="ar"] .rk-all{font:700 14px/1 'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
@media (max-width:860px){
  .rk-wall{--W:min(44vw,calc((100svh - 330px) / 1.42))}
  .rk-rack{width:100vw}                       /* the rail runs off both sides: swipe it along */
  .rk-br{display:none}
  .rk-g{flex-basis:21.5vw;width:21.5vw}
}
@media (prefers-reduced-motion:reduce){.rk-hit{opacity:1}.rk-go .rk-hit,.rk-bar,.rk-cap,.rk-all,.rk-avail{animation:none}}

/* the turn: the side view widens as the front arrives, never a thin line. The shadow falls on the wall behind. */
.rk-wall{background-image:radial-gradient(70% 58% at 50% 34%,#f6f6f5 0%,rgba(246,246,245,0) 72%),linear-gradient(180deg,#efefee 0%,#e8e8e7 55%,#dcdcdb 100%)}
.rk-bar{box-shadow:0 10px 12px -5px rgba(0,0,0,.26),0 1px 0 rgba(255,255,255,.7) inset}
.rk-hook path{stroke:#6f7276;stroke-width:2.1}
.rk-neck{width:7px;height:9px;top:23px;margin-left:-3.5px}
.rk-fc img{filter:drop-shadow(5px 12px 11px rgba(0,0,0,.2))}
.rk-fc .rk-front{transform:scaleX(.36);opacity:0;transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .2s ease,filter .5s var(--ease)}
.rk-g.on .rk-fc .rk-front{transform:scaleX(1);opacity:1;filter:drop-shadow(10px 26px 26px rgba(0,0,0,.24));transition:transform .52s cubic-bezier(.22,1,.36,1),opacity .2s ease .04s,filter .5s var(--ease)}
.rk-fc .rk-side{opacity:1;transform:none;transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .2s ease .14s}
.rk-g.on .rk-fc .rk-side{transform:scaleX(1.9);opacity:0;transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .17s ease}

/* shop */
#shop{scroll-margin-top:60px}
.shop{padding-top:clamp(56px,8vw,96px)}
.shop h2{font-size:clamp(48px,7.5vw,104px)}
html[lang="ar"] .shop h2{font-size:clamp(38px,6vw,76px)}
.filters{position:sticky;top:64px;z-index:20;background:var(--paper);padding:10px 0;margin-bottom:18px;scroll-margin-top:64px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.chips::-webkit-scrollbar{display:none}
.chips button,.chip-go{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--hair);background:none;color:var(--ink);font:500 14px/1 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.chips button b{font-weight:500;color:var(--mute);font-size:12px}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips button[aria-pressed="true"] b{color:inherit;opacity:.65}
.chip-go{border-style:dashed}

.grid{gap:34px 14px}
.card.sc .well{background:var(--wallc);aspect-ratio:4/5}
.card.sc .well img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card.sc:hover .well img{transform:scale(1.04)}
.card.sc .meta{display:block;padding-top:12px}
.sc-b{display:block;font:500 11px/1.3 var(--sans);letter-spacing:.04em;color:var(--mute);margin-bottom:4px;unicode-bidi:isolate}
.card.sc .meta h3{font:600 15px/1.25 var(--sans);text-transform:none;letter-spacing:0}
.sc-c{display:flex;align-items:center;gap:6px;margin-top:5px;font:400 13px/1.3 var(--sans);color:var(--soft)}
.sc-c i,.pd-c i{flex:none;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.card .meta .price{display:block;margin-top:6px;text-align:start}
.card .meta .price.por{font:500 12px/1.3 var(--sans);color:var(--mute)}
html[lang="ar"] .card.sc .meta h3,html[lang="ar"] .sc-c,html[lang="ar"] .chips button,html[lang="ar"] .chip-go,html[lang="ar"] .card .meta .price.por{font-family:'IBM Plex Sans Arabic',sans-serif}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}.filters{top:56px}}

/* one piece */
.pd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(20px,4vw,64px);max-width:1280px;margin:0 auto;padding:calc(96px + env(safe-area-inset-top,0px)) var(--pad) 40px}
/* back: the same pill as the rail's «The rail» button, at the start of the page (the right in Arabic) */
.pd-top{grid-column:1/-1}
.pd-back{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid #e3e3e3;background:#fff;color:#111;font:500 13px/1 var(--sans);letter-spacing:.04em;text-decoration:none}
.pd-back:hover{border-color:#111}
html[dir="rtl"] .pd-ar{display:inline-block;transform:scaleX(-1)}
html[lang="ar"] .pd-back{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
.pd-ph{display:flex;gap:12px;min-width:0}
.pd-main{flex:1;min-width:0;background:var(--wallc);aspect-ratio:4/5;overflow:hidden}
.pd-main img{width:100%;height:100%;object-fit:cover;display:block}
.pd-th{order:-1;display:flex;flex-direction:column;gap:8px;width:72px;flex:none}
.pd-th button{padding:0;border:1px solid transparent;background:var(--wallc);aspect-ratio:4/5;cursor:pointer;overflow:hidden}
.pd-th button[aria-pressed="true"]{border-color:var(--ink)}
.pd-th img{width:100%;height:100%;object-fit:cover;display:block}
.pd-in{display:flex;flex-direction:column;gap:14px;align-self:center;min-width:0}
.pd-b{font:500 14px/1.3 var(--sans);color:var(--mute);unicode-bidi:isolate}
.pd h1{font-size:clamp(40px,5vw,72px)}
html[lang="ar"] .pd h1{font-size:clamp(30px,4vw,50px)}
.pd-c{display:flex;align-items:center;gap:8px;font:400 15px/1.3 var(--sans);color:var(--soft)}
.pd-c i{width:14px;height:14px}
.pd-p{font:600 20px/1.3 var(--sans)}
.pd-p .price.por{font:500 15px/1.3 var(--sans);color:var(--mute)}
.pd-wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;background:#111;color:#fff;text-decoration:none;font:600 15px/1 var(--sans)}
.pd-wa i{font-size:21px}
#add+.pd-wa{background:none;color:var(--ink);border:1px solid var(--ink)}
html[lang="ar"] .pd-wa,html[lang="ar"] .pd-c,html[lang="ar"] .pd-p .price.por{font-family:'IBM Plex Sans Arabic',sans-serif}
.more{padding:30px var(--pad) 70px}
.more h2{font-size:clamp(36px,5vw,64px);margin-bottom:22px}
html[lang="ar"] .more h2{font-size:clamp(26px,3.6vw,42px)}
@media (max-width:860px){
  .pd{grid-template-columns:minmax(0,1fr);padding-top:calc(72px + env(safe-area-inset-top,0px))}
  .pd-ph{flex-direction:column}.pd-th{order:0;flex-direction:row;width:auto}.pd-th button{width:64px}
}