/*
Theme Name: LaShota
Theme URI: https://lashota.example/
Author: Gray Studio
Author URI: https://graystudio.example/
Description: The LaShota storefront — a bilingual Arabic/Hebrew shop for hand-bound printed photo albums. Carries the house design system and the storefront shell; the album editor and the print-file automation live in the LaShota Albums plugin.
Version: 1.8.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: lashota
Tags: e-commerce, rtl-language-support, translation-ready, custom-colors
*/

/* ============================================================
   The design system, carried verbatim from the prototype.

   It is written in logical properties throughout — inset-inline,
   padding-inline, margin-inline — so the same stylesheet serves
   Arabic and Hebrew right-to-left without a separate rtl.css.
   The direction comes off <html dir>, set in header.php.

   Product photography lives in photos.css, next to this file.
   ============================================================ */

:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ============================================================
   LaShota — design tokens
   Palette sampled from the client reference boards:
   bone / sand / brass / espresso ink + album cover colours.
   ============================================================ */
:root{
  /* grounds */
  --bone:#F7F3EC;        /* Sugar — house ground */
  --paper:#FFFFFF;
  --sand:#EFEAE0;
  --sand-2:#E4DED0;
  --line:#DED8CA;
  --line-soft:#EAE5D9;

  /* ink */
  --ink:#14120F;         /* Ink — house text & mark */
  --body:#46423B;
  --muted:#6B665D;
  --faint:#736E64;

  /* brand colours, by their names in the manual */
  --sugar:#F7F3EC;
  --green:#3B5241;       /* Almond green — house depth */
  --suede:#A9B5A4;       /* album cover */
  --shell:#C9A87C;       /* kraft, foil, thread */
  --ribbon:#7C3B44;      /* velvet tie, seal */
  --shell-wash:#F6EFE3;
  --ribbon-wash:#F4E9EA;

  /* accent roles map onto the brand colours */
  --brass:#3B5241;       /* primary accent = Almond green */
  --brass-lt:#2E4234;
  --brass-soft:#C9A87C;  /* decorative rules, foil, the thread */
  --brass-wash:#EAEFE9;

  /* album cover swatches */
  --cv-forest:#3B5241;
  --cv-burgundy:#7C3B44;
  --cv-camel:#C9A87C;
  --cv-bone:#EDE7D9;
  --cv-ink:#14120F;
  --cv-slate:#A9B5A4;

  /* semantic */
  --ok:#3B5241;
  --ok-bg:#EAEFE9;
  --warn:#8A6A34;
  --warn-bg:#F7EEDE;
  --danger:#7C3B44;
  --danger-bg:#F4E9EA;

  /* type */
  --f-disp:"Amiri",Georgia,serif;
  --f-ui:"Tajawal","Segoe UI",system-ui,sans-serif;
  --f-num:"Heebo",system-ui,sans-serif;

  /* space — 4pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r:3px; --r-lg:6px;
  --sh-1:0 1px 2px rgba(50,38,20,.06);
  --sh-2:0 1px 2px rgba(50,38,20,.05),0 10px 24px -14px rgba(50,38,20,.30);
  --sh-3:0 2px 4px rgba(50,38,20,.06),0 24px 48px -20px rgba(50,38,20,.34);
  --sh-print:0 1px 1px rgba(50,38,20,.22),0 10px 22px -10px rgba(50,38,20,.42);

  --nav-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);

  --z-base:0; --z-raise:10; --z-sticky:20; --z-drawer:40; --z-modal:100; --z-toast:1000;
}
html[data-lang="he"]{
  --f-disp:"Frank Ruhl Libre",Georgia,serif;
  --f-ui:"Heebo","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--body);
  font-family:var(--f-ui);font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:400;color:var(--ink);text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass-soft);color:var(--ink)}

/* language visibility — display:contents keeps layout identical in both languages */
.l{display:none}
html[data-lang="ar"] .l.ar{display:contents}
html[data-lang="he"] .l.he{display:contents}

/* ---------- type scale ---------- */
.d1{font-family:var(--f-disp);font-size:clamp(34px,5.4vw,68px);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.d2{font-family:var(--f-disp);font-size:clamp(27px,3.6vw,44px);line-height:1.15;letter-spacing:-.012em;color:var(--ink)}
.d3{font-family:var(--f-disp);font-size:clamp(21px,2.3vw,30px);line-height:1.25;letter-spacing:-.008em;color:var(--ink)}
.d4{font-family:var(--f-disp);font-size:20px;line-height:1.35;color:var(--ink)}
.lead{font-size:17px;line-height:1.7;color:var(--body)}
.body{font-size:15.5px;line-height:1.72}
.small{font-size:13.5px;line-height:1.6;color:var(--muted)}
.kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:500;font-family:var(--f-ui)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate}

/* placeholder commercial figures — every price on this build is a stand-in */
.ph-val{border-bottom:1px dotted var(--faint)}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.wrap-n{max-width:940px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sect{padding-block:clamp(56px,8vw,104px)}
.sect-sand{background:var(--sand)}
.sect-paper{background:var(--paper)}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap1{gap:var(--s1)}
.gap2{gap:var(--s2)}
.gap3{gap:var(--s3)}
.gap4{gap:var(--s4)}
.gap5{gap:var(--s5)}
.gap6{gap:var(--s6)}
.gap7{gap:var(--s7)}
.mt2{margin-top:var(--s2)}
.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}
.mt5{margin-top:var(--s5)}
.mt6{margin-top:var(--s6)}
.mt7{margin-top:var(--s7)}
.spread{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.hr{height:1px;background:var(--line-soft);border:0;margin:0}
.center{text-align:center}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* section heading block */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.sechead .txt{max-width:56ch}
.sechead .kick{display:block;margin-bottom:var(--s3)}
.sechead p{margin-top:var(--s3);color:var(--muted);font-size:15px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:0 var(--s5);border:1px solid transparent;border-radius:var(--r);
  font-family:var(--f-ui);font-size:14px;font-weight:500;letter-spacing:.04em;
  cursor:pointer;background:none;position:relative;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .1s var(--ease),box-shadow .18s var(--ease);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--brass);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--brass-lt);box-shadow:var(--sh-2)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn-quiet{color:var(--ink);padding-inline:var(--s3)}
.btn-quiet:hover{color:var(--brass)}
.btn-danger{border-color:var(--danger);color:var(--danger);background:transparent}
.btn-danger:hover{background:var(--danger-bg)}
.btn-sm{min-height:38px;padding:0 var(--s4);font-size:13px}
.btn-lg{min-height:56px;padding:0 var(--s6);font-size:15px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none}
.btn .ico{width:17px;height:17px;flex:none}
.btn-icon{min-height:44px;min-width:44px;padding:0;border-radius:50%;color:var(--ink)}
.btn-icon:hover{background:var(--sand)}
.link{color:var(--brass);border-bottom:1px solid var(--brass-soft);padding-bottom:1px;transition:border-color .18s}
.link:hover{border-color:var(--brass)}

/* ---------- form controls ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:13px;font-weight:500;color:var(--ink)}
.field .hint{font-size:12.5px;color:var(--muted)}
.field .err{font-size:12.5px;color:var(--danger);display:none}
.field.is-error .err{display:block}
.inp{
  min-height:48px;padding:0 var(--s4);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);font-size:15px;color:var(--ink);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);width:100%;
}
textarea.inp{padding-block:var(--s3);min-height:120px;line-height:1.6;resize:vertical}
.inp::placeholder{color:var(--faint)}
.inp:hover{border-color:var(--sand-2)}
.inp:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash)}
.field.is-error .inp{border-color:var(--danger)}
.inp[disabled]{background:var(--sand);opacity:.6;cursor:not-allowed}
.inp[readonly]{background:var(--bone);color:var(--muted)}
select.inp{appearance:none;background-repeat:no-repeat;background-size:13px 13px;background-position:left 16px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B665D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");padding-inline-start:var(--s4);padding-inline-end:44px}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;min-height:44px;align-items:center}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:19px;height:19px;border:1px solid var(--line);border-radius:2px;background:var(--paper);flex:none;position:relative;transition:.15s var(--ease)}
.check .box::after{content:"";position:absolute;inset:0;background:var(--brass);border-radius:1px;transform:scale(0);transition:transform .15s var(--ease)}
.check input:checked + .box{border-color:var(--brass)}
.check input:checked + .box::after{transform:scale(.62)}
.check input:focus-visible + .box{outline:2px solid var(--brass);outline-offset:2px}
.check.radio .box,.check.radio .box::after{border-radius:50%}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.switch input{position:absolute;opacity:0}
.switch .track{width:42px;height:24px;border-radius:12px;background:var(--sand-2);position:relative;transition:background .18s var(--ease)}
.switch .track::after{content:"";position:absolute;inset-inline-start:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .22s var(--ease)}
.switch input:checked + .track{background:var(--brass)}
html[dir="rtl"] .switch input:checked + .track::after{transform:translateX(-18px)}

/* segmented control (sizes, orientation, paper …) */
.seg{display:inline-flex;background:var(--sand);border-radius:var(--r);padding:3px;gap:3px;flex-wrap:wrap}
.seg button{
  min-height:38px;padding:0 var(--s4);border:0;background:transparent;border-radius:2px;
  font-size:13.5px;color:var(--body);cursor:pointer;transition:.16s var(--ease);
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1);font-weight:500}

/* colour swatches */
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.12);cursor:pointer;position:relative;padding:0;transition:transform .15s var(--ease)}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;border:1px solid var(--brass);border-radius:50%}
.sw-lg{width:38px;height:38px}

/* ---------- chips, badges, pills ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--s3);
  border:1px solid var(--line);border-radius:20px;background:var(--paper);
  font-size:13px;color:var(--body);cursor:pointer;transition:.16s var(--ease);
}
.chip:hover{border-color:var(--brass-soft)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.chip .x{opacity:.6}
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:2px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  background:var(--sand);color:var(--muted);
}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.badge.brass{background:var(--brass-wash);color:var(--brass)}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---------- cards & surfaces ---------- */
.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.panel{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);padding:var(--s5)}
.tile{background:var(--sand);border-radius:var(--r);padding:var(--s5)}

/* alerts */
.alert{display:flex;gap:var(--s3);padding:var(--s4);border-radius:var(--r);font-size:14px;line-height:1.6;border:1px solid transparent}
.alert .ico{width:18px;height:18px;flex:none;margin-top:2px}
.alert.info{background:var(--brass-wash);border-color:#EADFC4;color:#6C5424}
.alert.ok{background:var(--ok-bg);border-color:#D3E2D5;color:var(--ok)}
.alert.warn{background:var(--warn-bg);border-color:#EEDCB6;color:var(--warn)}
.alert.danger{background:var(--danger-bg);border-color:#EFD3CE;color:var(--danger)}

/* progress + steppers */
.bar{height:3px;background:var(--sand-2);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brass);border-radius:2px;transition:width .3s var(--ease)}
.steps{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.steps .st{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint)}
.steps .st .n{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;background:var(--paper)}
.steps .st.done{color:var(--brass)}
.steps .st.done .n{background:var(--brass);border-color:var(--brass);color:#fff}
.steps .st.now{color:var(--ink);font-weight:500}
.steps .st.now .n{border-color:var(--brass);color:var(--brass)}
.steps .sep{width:18px;height:1px;background:var(--line)}

/* breadcrumbs */
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.crumbs a:hover{color:var(--brass)}
.crumbs .sep{opacity:.45}

/* skeletons */
.sk{background:linear-gradient(90deg,var(--sand) 25%,#F7F1E5 37%,var(--sand) 63%);background-size:400% 100%;animation:shimmer 1.35s linear infinite;border-radius:2px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* tooltip */
.tip{position:relative}
.tip::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(50%) translateY(4px);
  background:var(--ink);color:var(--bone);font-size:11.5px;padding:5px 9px;border-radius:2px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:.16s var(--ease);z-index:var(--z-raise);
}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translateX(50%) translateY(0)}

/* photo stand-ins — every image on this build is drawn, not photographed */
.ph{position:relative;overflow:hidden;background:linear-gradient(to bottom,var(--c1) 0%,var(--c2) 54%,var(--c3) 100%)}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(72% 56% at 34% 32%,rgba(255,255,255,.26),transparent 64%)}
.ph::after{content:"";position:absolute;inset:0;opacity:.13;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.p1{--c1:#9FB3BF;--c2:#D3BFA3;--c3:#7A6650}
.p2{--c1:#33414B;--c2:#856F58;--c3:#D8C6AA}
.p3{--c1:#E0CCB2;--c2:#B78F70;--c3:#54402F}
.p4{--c1:#77887A;--c2:#B0B599;--c3:#4F503F}
.p5{--c1:#E9D9C4;--c2:#CBA089;--c3:#815147}
.p6{--c1:#42515F;--c2:#748B99;--c3:#C0C8C5}
.p7{--c1:#CFAE90;--c2:#947260;--c3:#3E3029}
.p8{--c1:#AFBCA6;--c2:#DED2B9;--c3:#807055}
.p9{--c1:#C8D2D8;--c2:#E4D8C4;--c3:#9C8A72}
.p10{--c1:#6E5B4C;--c2:#C0A183;--c3:#EFE3CE}

/* drawn album objects */
.albumcv{
  position:relative;border-radius:2px 4px 4px 2px;
  background:
    linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 36%,transparent 60%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    var(--cv,var(--cv-forest));
  box-shadow:var(--sh-3);
}
.albumcv .foil{
  position:absolute;inset-inline:0;top:52%;text-align:center;font-family:var(--f-disp);
  font-size:var(--foil,17px);letter-spacing:.02em;
  background:linear-gradient(100deg,#A9895D,#E8D3AC 44%,#B08F62);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.albumcv .edge{position:absolute;inset-block:6%;inset-inline-end:-4px;width:5px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#EFE9DC,#CFC5B2)}
.stackshadow{position:absolute;inset-inline:4%;bottom:-7px;height:7px;border-radius:0 0 3px 3px;background:linear-gradient(#00000022,#00000000)}
/* live product album — reflects size, orientation, material, colour and paper */
.lastage{position:absolute;inset:0;display:grid;place-items:center;perspective:1600px;
  background:linear-gradient(180deg,#FFFDF9,var(--sand));border-radius:inherit;overflow:hidden;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lastage.grabbing{cursor:grabbing}
.laobj{position:relative;transform-style:preserve-3d;will-change:transform;
  transition:width .5s var(--ease),height .5s var(--ease)}
.laobj.snap{transition:width .5s var(--ease),height .5s var(--ease),transform .6s var(--ease)}
.laface{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px 5px 5px 2px;
  transition:background .35s var(--ease),border-radius .35s var(--ease),box-shadow .35s var(--ease)}
.laface .foil{position:absolute;inset-inline:0;top:44%;text-align:center;font-family:var(--f-disp);
  font-size:clamp(11px,2.1vw,19px);letter-spacing:.02em}
/* the back cover is a real panel, so turning the album round shows a back, not nothing */
.laback{border-radius:5px 2px 2px 5px}
.laback .mark{position:absolute;inset-inline:0;bottom:9%;text-align:center;font-family:var(--f-disp);
  font-size:11px;letter-spacing:.26em;opacity:.5}
.laspine{position:absolute;inset-block:0;right:0;transform-origin:right center;filter:brightness(.86)}
.laspine .stitle{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;
  font-family:var(--f-disp);font-size:10px;letter-spacing:.14em;white-space:nowrap;overflow:hidden}
.lablock{position:absolute;left:0;transform-origin:left center;
  background:repeating-linear-gradient(90deg,#F6F1E4 0 1px,#DAD0BA 1px 2px);border-radius:1px;
  box-shadow:inset 0 0 6px rgba(60,45,25,.18)}
.laground{position:absolute;left:50%;bottom:-14px;height:16px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(60,45,25,.30),transparent 72%);filter:blur(2px)}
.ladims{position:absolute;inset-inline:0;bottom:14px;text-align:center;font-size:12px;color:var(--muted)}
.lahint{position:absolute;inset-inline:0;top:14px;text-align:center;font-size:11px;letter-spacing:.06em;
  color:var(--faint);transition:opacity .4s}
.lastage.touched .lahint{opacity:0}
.pdpview{position:absolute;inset-inline:0;bottom:40px;display:flex;justify-content:center;gap:6px;z-index:2}
.pdpview button{border:1px solid var(--line);background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  border-radius:999px;padding:5px 13px;font-size:11px;color:var(--body);cursor:pointer}
.pdpview button[aria-pressed=true]{background:var(--ink);color:var(--sugar);border-color:var(--ink)}
.thumbs button.livethumb{display:grid;place-items:center;background:linear-gradient(180deg,#FFFDF9,var(--sand))}
.thumbs button.livethumb .mini{width:46%;height:56%;border-radius:1px 3px 3px 1px;box-shadow:var(--sh-1)}
.thumbs button.livethumb .tag{position:absolute;inset-inline:0;bottom:4px;font-size:9px;letter-spacing:.08em;color:var(--faint);text-align:center}



/* ============================================================
   Chrome — announcement, header, menus, drawers, overlays
   ============================================================ */
.announce{
  background:var(--ink);color:#E6DDCB;font-size:12.5px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  min-height:38px;padding:6px var(--s4);text-align:center;
}
.announce .sep{opacity:.35}
@media(max-width:620px){.announce .sep,.announce span:last-child{display:none}}
.hdr{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(250,246,239,.82);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.hdr.scrolled{border-color:var(--line-soft);background:rgba(250,246,239,.94)}
.hdr .inner{display:flex;align-items:center;gap:var(--s5);min-height:var(--nav-h);max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* logo slot — typographic placeholder until the real SVG lands */
.logo{display:flex;flex-direction:column;line-height:1;gap:3px;padding-block:6px;flex:none}
.logo .mark{font-family:var(--f-disp);font-size:25px;color:var(--ink);letter-spacing:.01em}
.logo .sub{font-size:9.5px;letter-spacing:.24em;color:var(--faint);text-transform:uppercase;font-family:var(--f-ui)}
.logo-slot-flag{position:absolute;inset:-6px -8px;border:1px dashed var(--line);border-radius:2px;pointer-events:none;opacity:0}
.logo:hover .logo-slot-flag{opacity:1}
.logo{position:relative}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav > li > a,.nav > li > button{
  display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 var(--s3);
  font-size:14px;color:var(--body);background:none;border:0;cursor:pointer;border-radius:2px;
  transition:color .16s var(--ease);position:relative;
}
.nav > li > a::after{content:"";position:absolute;inset-inline:var(--s3);bottom:12px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:inline-end;transition:transform .24s var(--ease)}
.nav > li > a:hover,.nav > li > button:hover{color:var(--ink)}
.nav > li > a:hover::after,.nav > li.is-active > a::after{transform:scaleX(1);transform-origin:inline-start}
.nav > li.is-active > a{color:var(--ink)}
.hdr-tools{display:flex;align-items:center;gap:var(--s1);flex:none}
.cartbtn{position:relative}
.cartbtn .count{
  position:absolute;top:4px;inset-inline-end:4px;min-width:17px;height:17px;border-radius:9px;
  background:var(--brass);color:#fff;font-size:10px;display:grid;place-items:center;
  font-family:var(--f-num);padding:0 4px;
}
.langsw{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;flex:none}
.langsw button{min-height:34px;padding:0 11px;border:0;background:transparent;font-size:12.5px;cursor:pointer;color:var(--muted);transition:.15s}
.langsw button[aria-pressed="true"]{background:var(--ink);color:var(--bone)}

/* mega menu */
.mega{
  position:absolute;inset-inline:0;top:100%;background:var(--paper);border-block:1px solid var(--line-soft);
  box-shadow:var(--sh-2);padding-block:var(--s6);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .24s var(--ease),visibility .24s;z-index:var(--z-sticky);
}
.hdr.mega-open .mega{opacity:1;visibility:visible;transform:none}
.mega .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.mega h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-family:var(--f-ui);margin-bottom:var(--s3)}
.mega li a{display:block;padding:7px 0;font-size:14.5px;color:var(--body)}
.mega li a:hover{color:var(--brass)}
.mega .promo{background:var(--sand);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.mega .promo .thumb{aspect-ratio:4/3;border-radius:2px;overflow:hidden;position:relative;background:var(--sand-2)}

/* mobile drawer */
.scrim{position:fixed;inset:0;background:rgba(36,30,23,.42);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;z-index:var(--z-drawer)}
.scrim.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;inset-block:0;inset-inline-end:0;width:min(400px,86vw);background:var(--bone);
  z-index:calc(var(--z-drawer) + 1);display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .34s var(--ease);box-shadow:var(--sh-3);
}
html[dir="rtl"] .drawer{transform:translateX(-102%)}
.drawer.open{transform:none !important}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:var(--s4);border-bottom:1px solid var(--line-soft);min-height:var(--nav-h)}
.drawer .dbody{flex:1;overflow-y:auto;padding:var(--s4)}
.drawer .dfoot{border-top:1px solid var(--line-soft);padding:var(--s4);background:var(--paper)}
.drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s2);font-size:17px;color:var(--ink);border-bottom:1px solid var(--line-soft);min-height:56px}
.drawer nav a:hover{color:var(--brass)}

/* search overlay */
.searchov{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(250,246,239,.97);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s;overflow-y:auto}
.searchov.open{opacity:1;visibility:visible}
.searchov .box{max-width:840px;margin:clamp(60px,12vh,140px) auto 0;padding-inline:var(--s5)}
.searchov .field-lg{display:flex;align-items:center;gap:var(--s3);border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.searchov .field-lg input{flex:1;border:0;background:transparent;font-size:clamp(22px,3.4vw,34px);font-family:var(--f-disp);color:var(--ink);min-height:56px}
.searchov .field-lg input:focus{outline:none}

/* modal */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--s4);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s}
.modal.open{opacity:1;visibility:visible}
.modal .sheet{background:var(--paper);border-radius:var(--r-lg);max-width:460px;width:100%;padding:var(--s6);box-shadow:var(--sh-3);transform:scale(.96) translateY(8px);transition:transform .26s var(--ease)}
.modal.open .sheet{transform:none}

/* toasts */
.toasts{position:fixed;inset-block-end:var(--s5);inset-inline-start:var(--s5);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.toast{
  display:flex;align-items:center;gap:var(--s3);background:var(--ink);color:var(--bone);
  padding:var(--s3) var(--s4);border-radius:var(--r);box-shadow:var(--sh-3);font-size:14px;
  transform:translateY(10px);opacity:0;transition:.28s var(--ease);max-width:min(400px,90vw);
}
.toast.in{transform:none;opacity:1}
.toast .ico{color:var(--brass-soft);flex:none}

/* cookie bar */
.cookiebar{position:fixed;inset-block-end:0;inset-inline:0;z-index:var(--z-drawer);background:var(--paper);border-top:1px solid var(--line);padding:var(--s4);box-shadow:0 -8px 30px -18px rgba(50,38,20,.4);transform:translateY(102%);transition:transform .4s var(--ease)}
.cookiebar.show{transform:none}
.cookiebar .inner{max-width:1240px;margin-inline:auto;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;padding-inline:clamp(16px,4vw,40px)}

/* footer */
.ftr{background:var(--ink);color:#CFC5B3;padding-block:var(--s8) var(--s6);margin-top:var(--s9)}
.ftr h4{color:var(--bone);font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--s4);font-weight:500}
.ftr a{font-size:14px;color:#CFC5B3;display:block;padding:5px 0}
.ftr a:hover{color:var(--brass-soft)}
.ftr .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6)}
.ftr .news{display:flex;gap:var(--s2);margin-top:var(--s4)}
.ftr .news .inp{background:transparent;border-color:#443A2C;color:var(--bone)}
.ftr .news .inp::placeholder{color:#8A7E6B}
.ftr .legal{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;border-top:1px solid #3A3126;margin-top:var(--s7);padding-top:var(--s5);font-size:12.5px;color:#9A8F7C}
.pay{display:flex;gap:8px;align-items:center}
.pay span{width:38px;height:25px;border:1px solid #443A2C;border-radius:2px;display:grid;place-items:center;font-size:8px;letter-spacing:.06em;color:#9A8F7C}
@media(max-width:820px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr .cols{grid-template-columns:1fr}}

/* ============================================================
   Routing
   ============================================================ */
.screen{display:none}
.screen.active{display:block;animation:screenIn .34s var(--ease)}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:none}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   Motion signature 01 — THE SPILL (hero)
   ============================================================ */
.hero{position:relative;min-height:min(94vh,900px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s6);padding-block:var(--s8)}
.hero .copy{max-width:44ch;position:relative;z-index:3}
.hero .copy .d1{margin-block:var(--s4) var(--s5)}
.hero .cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.hero .assure{display:flex;gap:var(--s5);margin-top:var(--s7);flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.hero .assure div{display:flex;align-items:center;gap:7px}
.spillstage{position:relative;height:min(78vh,720px);min-height:460px}
.spillscene{position:absolute;inset:0}
.phone{
  position:absolute;left:50%;top:50%;width:206px;height:420px;margin:-210px 0 0 -103px;
  border-radius:30px;background:#15120E;border:7px solid #2A241C;overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(50,38,20,.55),inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone .notch{position:absolute;left:50%;transform:translateX(-50%);top:9px;width:62px;height:5px;border-radius:3px;background:#3B342A;z-index:3}
.sptile{position:absolute;will-change:transform}
.sptile .frame{position:absolute;inset:0;border-radius:1px}
.sptile .ph{position:relative;width:100%;height:100%}
.spill-surface{position:absolute;inset-inline:6%;bottom:8%;height:34%;border-radius:50%;background:radial-gradient(60% 60% at 50% 50%,rgba(120,96,58,.10),transparent 70%);pointer-events:none}

/* ============================================================
   Motion signature 02 — THE THREAD (page-long ribbon)
   ============================================================ */
.threadrail{position:absolute;inset-block:0;left:50%;width:340px;margin-left:-170px;pointer-events:none;z-index:0;overflow:visible}
.threadrail svg{width:100%;height:100%}
.threadrail path{fill:none;stroke:var(--brass-soft);stroke-width:2;stroke-linecap:round;opacity:.9}
.threadhost{position:relative}
.threadhost > *:not(.threadrail){position:relative;z-index:1}

/* ============================================================
   Motion signature 03 — THE DEVELOP (materials)
   ============================================================ */
.devrow{display:flex;gap:var(--s5);justify-content:center;flex-wrap:wrap}
.dev{position:relative;width:196px;background:var(--paper);padding:10px 10px 38px;box-shadow:var(--sh-print)}
.dev .win{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#EFE9DC}
.dev .ph{position:absolute;inset:0}
.dev .lat{position:absolute;inset:0;background:#EFE9DC}
.dev .cap{position:absolute;inset-inline:10px;bottom:12px;text-align:center;font-size:10px;letter-spacing:.1em;color:var(--faint)}

/* ============================================================
   Motion signature 04 — THE SPREAD (inspiration page-turn)
   ============================================================ */
.bookstage{position:relative;perspective:2200px;display:grid;place-items:center;padding-block:var(--s6)}
.book{position:relative;width:min(760px,94%);aspect-ratio:1.62/1;transform-style:preserve-3d;box-shadow:var(--sh-3)}
.spread2{position:absolute;inset:0;display:flex}
.pg{flex:1;background:var(--paper);position:relative;overflow:hidden}
.pg.left{box-shadow:inset -26px 0 30px -26px rgba(60,45,25,.45)}
.pg.right{box-shadow:inset 26px 0 30px -26px rgba(60,45,25,.45)}
.pg .inner{position:absolute;inset:9%;display:flex;flex-direction:column;gap:10px}
.pg .ph{flex:1}
.pg .cap{font-size:10px;letter-spacing:.12em;color:var(--faint)}
.leaf{position:absolute;left:0;top:0;width:50%;height:100%;transform-origin:right center;transform-style:preserve-3d;will-change:transform}
.leaf .face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);overflow:hidden}
.leaf .face .pg{position:absolute;inset:0}
.leaf .back{transform:rotateY(180deg)}
.leaf .shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(60,45,25,.35),transparent 46%);opacity:0;pointer-events:none}
.book{cursor:grab;touch-action:pan-y;outline:none;user-select:none;-webkit-user-select:none}
.book.grabbing{cursor:grabbing}
.book:focus-visible{box-shadow:var(--sh-3),0 0 0 3px var(--brass-soft)}
.bookctl{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s5)}
.bkbtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:transform .3s cubic-bezier(.32,.72,0,1),background .3s,opacity .3s}
.bkbtn:hover:not(:disabled){background:var(--sand);transform:scale(1.06)}
.bkbtn:active:not(:disabled){transform:scale(.94)}
.bkbtn:disabled{opacity:.32;cursor:default}
.bkbtn .ic{width:17px;height:17px}
.bklbl{min-width:96px;text-align:center;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.bkhint{text-align:center;margin-top:var(--s3);font-size:12px;color:var(--faint)}

/* ============================================================
   Motion signature 05 — THE BIND (order confirmation)
   ============================================================ */
.bindstage{position:relative;height:440px;perspective:1400px;overflow:hidden}
.bindscene{position:absolute;inset:0}
.bsheet{position:absolute;background:var(--paper);box-shadow:var(--sh-print);will-change:transform}
.bcover{
  position:absolute;left:50%;top:50%;width:214px;height:270px;margin:-135px 0 0 -107px;
  transform-origin:left center;border-radius:2px 4px 4px 2px;
  background:
    linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 36%,transparent 60%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    var(--cv-forest);
  box-shadow:var(--sh-3);
}
.bcover .foil{position:absolute;inset-inline:0;top:62%;text-align:center;font-family:var(--f-disp);font-size:22px;
  background:linear-gradient(100deg,#A9895D,#E8D3AC 44%,#B08F62);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0}
.bback{filter:brightness(.74);opacity:0}
.bribbon{position:absolute;left:50%;top:50%;margin:-152px 0 0 -107px;width:214px;height:304px;overflow:visible;opacity:0}
.bribbon path{fill:none;stroke:var(--ribbon);stroke-width:2.6;stroke-linecap:round}

/* ============================================================
   Product & shop
   ============================================================ */
.shoplayout{display:grid;grid-template-columns:250px 1fr;gap:var(--s7);align-items:start}
.filters{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:var(--s5)}
.fgroup{border-bottom:1px solid var(--line-soft);padding-bottom:var(--s4)}
.fgroup > button{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:0;padding:0 0 var(--s3);cursor:pointer;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:.06em;text-transform:uppercase;min-height:40px}
.fgroup .opts{display:flex;flex-direction:column;gap:2px}
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
@media(max-width:1100px){.prodgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.shoplayout{grid-template-columns:1fr}
.filters{position:static;display:none}
.filters.open{display:flex}}
@media(max-width:560px){.prodgrid{grid-template-columns:1fr}}
.pcard{position:relative;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;transition:box-shadow .28s var(--ease),transform .28s var(--ease)}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.pcard .shot{position:relative;aspect-ratio:4/3.4;background:var(--sand);display:grid;place-items:center;overflow:hidden}
.pcard .shot .albumcv{width:54%;aspect-ratio:.86;transition:transform .5s var(--ease)}
.pcard:hover .shot .albumcv{transform:translateY(-5px) rotate(-1.4deg)}
.pcard .fav{position:absolute;top:10px;inset-inline-end:10px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);border:0;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.18s}
.pcard .fav:hover{color:var(--danger)}
.pcard .fav[aria-pressed="true"]{color:var(--danger)}
.pcard .info{padding:var(--s4)}
.pcard .meta{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.pcard .sizes{display:flex;gap:6px;font-size:11.5px;color:var(--faint);margin-top:6px}
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s7);align-items:start}
@media(max-width:980px){.pdp{grid-template-columns:1fr}}
.gallery{position:sticky;top:calc(var(--nav-h) + 16px);display:grid;gap:var(--s3)}
.gallery .main{aspect-ratio:1/1;background:var(--sand);border-radius:var(--r);display:grid;place-items:center;position:relative;overflow:hidden}
.gallery .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.gallery .thumbs button{position:relative;aspect-ratio:1;background:var(--sand);border:1px solid transparent;border-radius:2px;cursor:pointer;overflow:hidden;padding:0}
.gallery .thumbs button[aria-pressed="true"]{border-color:var(--brass)}
.cfg{display:flex;flex-direction:column;gap:var(--s5);padding-bottom:var(--s4)}
.cfg .grp{display:flex;flex-direction:column;gap:var(--s3)}
.cfg .grp > .lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cfg .grp > .lbl b{color:var(--ink);font-weight:500;letter-spacing:0;text-transform:none;font-size:14px}
.pricebar{position:sticky;bottom:0;background:rgba(250,246,239,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);padding:var(--s4) 0;margin-top:var(--s5);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.pricebar .amt{font-family:var(--f-num);font-size:26px;color:var(--ink);font-weight:500}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.stepper button{width:42px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink);font-size:17px}
.stepper button:hover{color:var(--brass)}
.stepper .v{min-width:40px;text-align:center;font-family:var(--f-num);font-size:15px}
.acc{border-top:1px solid var(--line-soft)}
.acc details{border-bottom:1px solid var(--line-soft)}
.acc summary{list-style:none;cursor:pointer;padding:var(--s4) 0;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--ink);min-height:56px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{color:var(--brass);font-size:19px;transition:transform .2s var(--ease)}
.acc details[open] summary .pm{transform:rotate(45deg)}
.acc .cont{padding-bottom:var(--s5);font-size:14.5px;line-height:1.75;color:var(--body);max-width:70ch}

/* ============================================================
   Creator — upload, editor, cover, preview
   ============================================================ */
.dropzone{border:1.5px dashed var(--line);border-radius:var(--r-lg);background:var(--paper);padding:var(--s8) var(--s5);text-align:center;transition:.22s var(--ease)}
.dropzone.drag{border-color:var(--brass);background:var(--brass-wash)}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-top:var(--s5)}
.srcbtn{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer;font-size:14px;transition:.18s var(--ease)}
.srcbtn:hover{border-color:var(--brass);color:var(--brass)}
.uplist{display:flex;flex-direction:column;gap:var(--s2)}
.uprow{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3);border:1px solid var(--line-soft);border-radius:var(--r);background:var(--paper)}
.uprow .thumb{width:44px;height:44px;border-radius:2px;overflow:hidden;position:relative;background:var(--sand)}
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s2)}
.pcell{position:relative;aspect-ratio:1;border-radius:2px;overflow:hidden;cursor:pointer;background:var(--sand)}
.pcell .ph{position:absolute;inset:0}
.pcell .tickbox{position:absolute;top:6px;inset-inline-start:6px;width:19px;height:19px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.22)}
.pcell[aria-pressed="true"] .tickbox{background:var(--brass);border-color:var(--brass)}
.pcell .flag{position:absolute;inset-inline:0;bottom:0;padding:3px 6px;font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.pcell.used::after{content:"";position:absolute;inset:0;border:2px solid var(--brass);border-radius:2px}
.editor{display:grid;grid-template-columns:258px 1fr;height:min(76vh,720px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.editor .ebar{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);min-height:56px;border-bottom:1px solid var(--line-soft);background:var(--bone);flex-wrap:wrap}
.editor .eside{border-inline-end:1px solid var(--line-soft);display:flex;flex-direction:column;overflow:hidden;background:var(--bone)}
.editor .etabs{display:flex;border-bottom:1px solid var(--line-soft);overflow-x:auto}
.editor .etabs button{flex:1 1 0;min-width:0;min-height:46px;border:0;background:none;font-size:11.5px;cursor:pointer;color:var(--muted);white-space:nowrap;padding:0 4px;overflow:hidden;text-overflow:ellipsis}
.editor .etabs button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brass)}
.editor .epanel{flex:1;overflow-y:auto;padding:var(--s3)}
.editor .ecanvas{position:relative;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 30%,#F7F1E6,var(--sand) 78%);overflow:auto;padding:var(--s5)}
.canvasbook{position:relative;width:min(660px,94%);aspect-ratio:var(--spread,1.9);background:var(--paper);box-shadow:var(--sh-3);display:flex}
.canvasbook .gutter{position:absolute;inset-block:0;inset-inline-start:50%;width:1px;background:linear-gradient(transparent,rgba(60,45,25,.18),transparent)}
.canvasbook .half{flex:1;position:relative;padding:5%}
.canvasbook .slots{position:absolute;inset:0}
/* polaroid prints: white frame, thicker at the foot, soft drop shadow, overlapping */
.slot.tilt,.pvslot.tilt{background:#fff;border-radius:1px}
.slot.tilt{box-shadow:0 4px 14px rgba(60,45,25,.20),0 1px 3px rgba(60,45,25,.14)}
.slot.tilt .ph{inset:4% 4% 10% !important}
.slot.tilt > span[style*="place-items"]{inset:4% 4% 10% !important}
.pvslot.tilt{box-shadow:0 5px 18px rgba(0,0,0,.26),0 1px 3px rgba(0,0,0,.18)}
.pvslot.tilt .ph{inset:4% 4% 10% !important}
/* the captioned print sits proud of the others with a deeper foot for the handwriting */

.slot.cap .ph,.pvslot.cap .ph{inset:4% 4% 16% !important}
.slot.cap > span[style*="place-items"]{inset:4% 4% 16% !important}
.slot.cap{box-shadow:0 10px 28px rgba(60,45,25,.26),0 2px 6px rgba(60,45,25,.16)}
.pvslot.cap{box-shadow:0 12px 34px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.2)}
/* المناسبات carries the wedding sheet behind it, same treatment as the create screen */
#sc-occasions{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
#sc-occasions::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--occbg);background-size:cover;background-position:center top;background-repeat:no-repeat;
  opacity:.42;pointer-events:none;
  /* a touch of blur keeps the photography as texture and stops the sheet's own
     placeholder captions from reading as copy on the page */
  filter:blur(2.5px);transform:scale(1.04)}
#sc-occasions::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,243,236,.55),rgba(247,243,236,.74) 42%,rgba(247,243,236,.92) 78%,var(--bone))}
@media (max-width:700px){ #sc-occasions::before{opacity:.30;background-position:center} }
/* the create screen sits on a soft wash of the collage sheet rather than flat cream */
#sc-create{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
#sc-create::before{content:"";position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  opacity:.42;pointer-events:none;background-image:var(--createbg);
  filter:blur(2.5px);transform:scale(1.04)}
/* a wash over the photo so the headline and cards keep their contrast */
#sc-create::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,243,236,.55),rgba(247,243,236,.74) 42%,rgba(247,243,236,.92) 78%,var(--bone))}
@media (max-width:700px){ #sc-create::before{opacity:.30;background-position:center} }
/* page background photo — sits under every frame */
.pagebgimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none}
/* background picker */
.bgimg-grp{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
.bgimg-grp .lbl{font-size:11px;letter-spacing:.12em;color:var(--faint);margin-bottom:6px}
.bgpick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bgopt{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper);cursor:pointer;padding:0;display:grid;place-items:center;
  font-size:10px;color:var(--muted);transition:border-color .2s,transform .2s var(--ease)}
.bgopt:hover{transform:translateY(-2px)}
.bgopt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.bgopt.up{gap:2px;flex-direction:column;display:flex;align-items:center;justify-content:center;
  border-style:dashed;color:var(--brass)}
.bgopt.up span{font-size:9.5px;text-align:center;line-height:1.2}
.bgown{position:relative;height:74px;margin-top:8px;border-radius:var(--r);overflow:hidden;border:1px solid var(--ink);
  background-size:cover}
.bgown .ph{background-size:cover;background-position:center}
.bgown .tag{position:absolute;inset-inline-start:6px;bottom:6px;font-size:10px;background:rgba(255,255,255,.86);
  border-radius:999px;padding:2px 8px;color:var(--ink)}
.bgop{margin-top:12px;transition:opacity .25s}
.bgop.off{opacity:.4}
.rng{width:100%;accent-color:var(--brass);margin:4px 0 2px}
/* matted frames: a white mount with a printed drop, no tilt */
.slot.mat,.pvslot.mat{background:#fff;border-radius:1px;
  box-shadow:0 5px 16px rgba(60,45,25,.20),0 1px 3px rgba(60,45,25,.14)}
.slot.mat .ph,.pvslot.mat .ph{inset:3.5% !important}
.slot.mat > span[style*="place-items"]{inset:3.5% !important}
.slot.mat.sel{box-shadow:0 5px 16px rgba(60,45,25,.20),0 0 0 2px var(--ink)}
.slot .hand,.pvslot .hand{position:absolute;inset-inline:6%;bottom:2.5%;height:12%;display:grid;place-items:center;
  font-family:"Caveat",var(--f-disp),cursive;font-size:clamp(11px,2.2cqw,26px);color:#1A1714;
  white-space:nowrap;overflow:hidden;pointer-events:none;direction:rtl}
.canvasbook .slots,.pvbase{container-type:inline-size}
/* layout picker: grouped, with true-shape thumbnails */
.laygrp{margin-bottom:16px}
.laygrp .lbl{display:block;font-size:11px;letter-spacing:.12em;color:var(--faint);margin-bottom:8px}
.laygrp .tagsp{display:inline-block;font-size:9px;letter-spacing:.1em;background:var(--brass-wash);color:var(--brass);
  border-radius:999px;padding:2px 7px;margin-inline-start:4px;font-weight:500}
.laygrp.sp{border-top:1px solid var(--line-soft);padding-top:14px}
.laygrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lay{position:relative;padding:0;cursor:pointer;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .25s var(--ease)}
.lay:hover{transform:translateY(-2px)}
.lay.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.lay .sh{position:relative;display:block;aspect-ratio:var(--spread,1.9);background:var(--paper)}
.lay .sh i{position:absolute;background:var(--sand-2);border-radius:1.5px}
.lay .sh i.pol{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(60,45,25,.18)}
.lay .sh i.mat{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(60,45,25,.18)}
.lay .sh i.mat::after{content:"";position:absolute;inset:14%;background:var(--sand-2)}
.lay .sh i.pol::after{content:"";position:absolute;inset:11% 11% 26%;background:var(--sand-2)}
.lay.on .sh i{background:var(--suede)}
.lay .nm{display:block;font-size:10px;color:var(--muted);padding:5px 4px;border-top:1px solid var(--line-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canvasbook .gutter{z-index:3}
.slot .slotx{position:absolute;top:5px;inset-inline-end:5px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(20,18,15,.62);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.slot:hover .slotx,.slot.sel .slotx{opacity:1}
.slot{position:absolute;background:var(--sand);overflow:hidden;border-radius:1px}
.slot .ph{position:absolute;inset:0}
.slot.sel{outline:2px solid var(--brass);outline-offset:2px}
.slot .warn{position:absolute;top:5px;inset-inline-start:5px;background:var(--warn);color:#fff;font-size:9px;padding:2px 5px;border-radius:2px;letter-spacing:.04em}
.safearea{position:absolute;inset:var(--safey,7%) var(--safex,7%);border:1px dashed rgba(140,106,47,.45);pointer-events:none}
.bleed{position:absolute;inset:2%;border:1px dashed rgba(142,51,39,.35);pointer-events:none}
.pagestrip{grid-column:1/-1;display:flex;gap:var(--s2);padding:var(--s3);border-top:1px solid var(--line-soft);overflow-x:auto;background:var(--bone)}
.pagethumb{flex:none;width:88px;aspect-ratio:var(--spread,1.9);background:var(--paper);border:1px solid var(--line);border-radius:2px;cursor:pointer;position:relative;display:flex;padding:3px;gap:2px}
.pagethumb[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass-wash)}
.pagethumb i{flex:1;background:var(--sand);border-radius:1px}
.pagethumb .n{position:absolute;bottom:-16px;inset-inline-start:0;font-size:9.5px;color:var(--faint);font-family:var(--f-num)}
@media(max-width:900px){.editor,.desk-only{display:none}}

/* mobile editor */
.meditor{display:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.meditor .mtop{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);min-height:52px}
.meditor .mcanvas{padding:var(--s5) var(--s4);background:var(--sand);display:grid;place-items:center}
.meditor .mnav{display:flex;border-top:1px solid var(--line-soft)}
.meditor .mnav button{flex:1;min-height:60px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--muted);cursor:pointer}
.meditor .mnav button[aria-pressed="true"]{color:var(--brass)}
@media(max-width:900px){.meditor{display:block}}

/* cover designer */
.coverstage{display:grid;grid-template-columns:1fr 340px;gap:var(--s7);align-items:start}
@media(max-width:900px){.coverstage{grid-template-columns:1fr}}
.cover3d{background:var(--sand);border-radius:var(--r);display:grid;place-items:center;padding:var(--s8) var(--s5);perspective:1500px;overflow:hidden}
.cover3d .obj{position:relative;width:250px;height:310px;transform-style:preserve-3d;transition:transform .7s var(--ease),width .5s var(--ease),height .5s var(--ease);transform:rotateY(-14deg)}
.cover3d .face{transition:background .35s var(--ease),border-radius .35s var(--ease),box-shadow .35s var(--ease)}
.cover3d .face{position:absolute;inset:0;backface-visibility:hidden}
.cover3d .spinebox{position:absolute;inset-block:0;right:0;width:24px;transform-origin:right center;background:var(--cv,var(--cv-forest));filter:brightness(.86);transition:width .5s var(--ease)}
.cover3d .spinebox .stitle{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;font-family:var(--f-disp);font-size:10px;letter-spacing:.14em;white-space:nowrap;overflow:hidden}
.cover3d .coverback{border-radius:4px 2px 2px 4px}
.cover3d .coverback .mark{position:absolute;inset-inline:0;bottom:9%;text-align:center;font-family:var(--f-disp);font-size:11px;letter-spacing:.26em;opacity:.5}
.cover3d .coverblock{position:absolute;left:0;transform-origin:left center;border-radius:1px;
  background:repeating-linear-gradient(90deg,#F6F1E4 0 1px,#DAD0BA 1px 2px);box-shadow:inset 0 0 6px rgba(60,45,25,.18)}

/* preview */
.previewwrap{background:var(--ink);border-radius:var(--r);padding:var(--s7) var(--s5);display:grid;place-items:center;gap:var(--s5)}
.previewwrap{perspective:2400px}
.previewwrap .book{box-shadow:0 40px 80px -30px rgba(0,0,0,.7);cursor:pointer;user-select:none;-webkit-user-select:none;transform-style:preserve-3d}
.pvbase{position:absolute;inset:0;overflow:hidden;border-radius:3px;background:#fff}
.pvslot{position:absolute;overflow:hidden;border-radius:1px;background:var(--sand)}
.pvcap{position:absolute;inset-inline:8%;bottom:3.5%;text-align:center;font-size:10px;letter-spacing:.1em;color:#8C8271}
.pvgutter{position:absolute;inset-block:0;inset-inline-start:50%;width:26px;margin-inline-start:-13px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(60,45,25,.13) 42%,rgba(60,45,25,.16) 50%,rgba(60,45,25,.13) 58%,transparent)}
.pvleaf{position:absolute;top:0;height:100%;width:50%;overflow:hidden;z-index:6;backface-visibility:hidden;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.55);background:#fff}
.pvleaf .in{position:absolute;top:0;height:100%;width:200%}
.pvleaf.L{left:0;transform-origin:right center}
.pvleaf.L .in{left:0}
.pvleaf.R{right:0;transform-origin:left center}
.pvleaf.R .in{right:0}

/* ============================================================
   Cart / checkout / account / tracking
   ============================================================ */
.cartlayout{display:grid;grid-template-columns:1fr 380px;gap:var(--s7);align-items:start}
@media(max-width:980px){.cartlayout{grid-template-columns:1fr}}
.cartrow{display:grid;grid-template-columns:112px 1fr;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line-soft)}
.cartrow .thumb{aspect-ratio:.86;background:var(--sand);border-radius:2px;display:grid;place-items:center;overflow:hidden}
.cartrow .specs{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted);margin-top:6px}
.cartrow .acts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.summary{position:sticky;top:calc(var(--nav-h) + 16px);background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);padding:var(--s5)}
.sumline{display:flex;justify-content:space-between;gap:var(--s4);padding:7px 0;font-size:14.5px}
.sumline.total{border-top:1px solid var(--line);margin-top:var(--s3);padding-top:var(--s4);font-size:18px;color:var(--ink)}
.upsell{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);border:1px solid var(--line-soft);border-radius:var(--r);background:var(--bone)}
.ckt{display:grid;grid-template-columns:1fr 400px;gap:var(--s7);align-items:start}
@media(max-width:980px){.ckt{grid-template-columns:1fr}}
.ckstep{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--paper);margin-bottom:var(--s4);overflow:hidden}
.ckstep .h{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid transparent}
.ckstep.open .h{border-color:var(--line-soft)}
.ckstep .h .n{width:26px;height:26px;border-radius:50%;background:var(--sand);color:var(--muted);display:grid;place-items:center;font-size:12px;font-family:var(--f-num)}
.ckstep.open .h .n,.ckstep.done .h .n{background:var(--brass);color:#fff}
.ckstep .b{padding:0 var(--s5) var(--s5);display:none}
.ckstep.open .b{display:block}
.paylist{display:flex;flex-direction:column;gap:var(--s2)}
.payopt{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;min-height:56px;background:var(--paper)}
.payopt[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash)}
.timeline{display:flex;flex-direction:column;gap:0;position:relative}
.tstep{display:grid;grid-template-columns:34px 1fr;gap:var(--s4);padding-bottom:var(--s6);position:relative}
.tstep:last-child{padding-bottom:0}
.tstep .mark{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;z-index:1;color:var(--faint)}
.tstep::before{content:"";position:absolute;inset-inline-start:17px;top:34px;bottom:0;width:1px;background:var(--line)}
.tstep:last-child::before{display:none}
.tstep.done .mark{background:var(--brass);border-color:var(--brass);color:#fff}
.tstep.done::before{background:var(--brass-soft)}
.tstep.now .mark{border-color:var(--brass);color:var(--brass);box-shadow:0 0 0 5px var(--brass-wash)}
.tstep h4{font-size:16px}
.tstep p{font-size:13.5px;color:var(--muted);margin-top:3px;max-width:56ch}
.acctlayout{display:grid;grid-template-columns:238px 1fr;gap:var(--s7);align-items:start}
.acctlayout > *,.shoplayout > *,.cartlayout > *,.ckt > *,.pdp > *{min-width:0}
@media(max-width:900px){.acctlayout{grid-template-columns:1fr}}
.acctnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--nav-h) + 16px)}
.acctnav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--s3);border-radius:var(--r);font-size:14.5px;color:var(--body)}
.acctnav a:hover{background:var(--sand)}
.acctnav a.on{background:var(--ink);color:var(--bone)}
.acctnav .sep{height:1px;background:var(--line-soft);margin:var(--s3) 0}
.projcard{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.projcard .prev{aspect-ratio:1.7/1;background:var(--sand);display:grid;place-items:center;position:relative}
.projcard .body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.projcard .acts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:auto;padding-top:var(--s3)}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;padding:var(--s3) var(--s3);border-bottom:1px solid var(--line)}
table.data td{padding:var(--s4) var(--s3);border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tablewrap{overflow-x:auto}

/* empty states */
.empty{text-align:center;padding:var(--s9) var(--s5);max-width:46ch;margin-inline:auto}
.empty .art{width:96px;height:96px;margin:0 auto var(--s5);border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--faint)}

/* design-system page bits */
.dsrow{display:grid;grid-template-columns:170px 1fr;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line-soft);align-items:start}
@media(max-width:700px){.dsrow{grid-template-columns:1fr}}
.dsrow > .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.swatchcard{border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.swatchcard .c{height:70px}
.swatchcard .m{padding:8px 10px;font-size:11px;font-family:var(--f-num);color:var(--muted);display:flex;justify-content:space-between;direction:ltr;unicode-bidi:isolate}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0;padding-block:var(--s6) var(--s7)}
.spillstage{height:min(52vh,460px);min-height:340px}
.hero .copy{order:-1}
.nav,.langsw{display:none}
.threadrail{display:none}
}
@media(max-width:560px){
  .devrow{gap:var(--s3)}
.dev{width:132px;padding:7px 7px 26px}
.dev .cap{font-size:8px;bottom:8px}
.editor .ebar{gap:var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.06s !important}
.rv{opacity:1;transform:none}
}


/* ============================================================
   Apple-style layer — materials, radii, springs, type
   Loaded after the base sheet so it overrides it.
   ============================================================ */
:root{
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;
  --r-pill:999px;
  --spring:cubic-bezier(.32,.72,0,1);
  --spring-soft:cubic-bezier(.25,.9,.25,1);
  --sh-1:0 1px 2px rgba(20,18,15,.05);
  --sh-2:0 1px 3px rgba(20,18,15,.05),0 10px 26px -14px rgba(20,18,15,.26);
  --sh-3:0 2px 6px rgba(20,18,15,.05),0 30px 60px -26px rgba(20,18,15,.34);
  --sh-print:0 1px 2px rgba(20,18,15,.16),0 14px 30px -12px rgba(20,18,15,.32);
  --nav-h:72px;
}

/* ---- type: size-specific tracking & leading ---- */
.d1{font-size:clamp(38px,6vw,76px);line-height:1.02;letter-spacing:-.028em}
.d2{font-size:clamp(29px,3.9vw,48px);line-height:1.08;letter-spacing:-.022em}
.d3{font-size:clamp(22px,2.5vw,32px);line-height:1.18;letter-spacing:-.014em}
.d4{font-size:21px;line-height:1.3;letter-spacing:-.008em}
.lead{font-size:18px;line-height:1.62;letter-spacing:-.004em}
.kick{font-size:11px;letter-spacing:.16em;font-weight:500;color:var(--green)}
.small{font-size:13.5px;line-height:1.62}

/* ---- chrome ---- */
.hdr{background:rgba(247,243,236,.72);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px)}
.hdr.scrolled{background:rgba(247,243,236,.86);border-color:rgba(20,18,15,.07)}
.announce{background:var(--ink);color:#CFC9BC;letter-spacing:.01em;font-size:12px}
.nav > li > a,.nav > li > button{border-radius:var(--r-pill);padding:0 14px;transition:background-color .22s var(--spring),color .22s var(--spring)}
.nav > li > a::after{display:none}
.nav > li > a:hover,.nav > li > button:hover{background:rgba(20,18,15,.05);color:var(--ink)}
.nav > li.is-active > a{background:rgba(59,82,65,.10);color:var(--green)}

/* ---- logo ---- */
.logo{gap:0;padding-block:4px;align-items:flex-start}
/* the logo lives in a stretch flex column — pin it to its own size so the lockup
   keeps its proportions instead of being pulled to the container's width */
.logo img{height:34px;width:auto;max-width:100%;display:block;align-self:flex-start;object-fit:contain}
.logo .mark,.logo .sub,.logo-slot-flag{display:none !important}
.ftr .logo{align-items:flex-start}
.ftr .logo img{filter:invert(1);opacity:.94;height:84px;width:auto;align-self:flex-start}
@media(max-width:520px){.logo img{height:28px}}

/* ---- controls ---- */
.btn{border-radius:var(--r-pill);letter-spacing:0;font-weight:500;font-size:14.5px;
  transition:background-color .25s var(--spring),color .25s var(--spring),border-color .25s var(--spring),transform .14s var(--spring),box-shadow .25s var(--spring)}
.btn:active{transform:scale(.965)}
.btn-primary{background:var(--ink);color:var(--sugar);box-shadow:0 1px 2px rgba(20,18,15,.14)}
.btn-primary:hover{background:#2A2620;box-shadow:0 6px 18px -8px rgba(20,18,15,.5)}
.btn-ghost{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border-color:rgba(20,18,15,.12);color:var(--ink)}
.btn-ghost:hover{background:#fff;border-color:rgba(20,18,15,.22);color:var(--ink)}
.btn-accent{background:var(--green);color:#fff}
.btn-accent:hover{background:var(--brass-lt)}
.btn-icon{border-radius:var(--r-pill)}
.btn-icon:hover{background:rgba(20,18,15,.06)}
.link{border-bottom-color:rgba(59,82,65,.4)}
.inp{border-radius:var(--r);border-color:rgba(20,18,15,.14);font-size:15.5px;
  transition:border-color .2s var(--spring),box-shadow .2s var(--spring),background-color .2s var(--spring)}
.inp:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(59,82,65,.12)}


/* segmented control with a sliding indicator */
.seg{position:relative;background:rgba(20,18,15,.055);border-radius:var(--r-pill);padding:4px;gap:0}
.seg .ind{position:absolute;left:0;top:4px;bottom:4px;background:var(--paper);border-radius:var(--r-pill);
  box-shadow:0 1px 3px rgba(20,18,15,.16),0 0 0 .5px rgba(20,18,15,.04);
  transition:transform .48s var(--spring),width .48s var(--spring);pointer-events:none;z-index:0}
.seg button{position:relative;z-index:1;border-radius:var(--r-pill);background:transparent !important;box-shadow:none !important;
  font-size:13.5px;transition:color .28s var(--spring),opacity .2s}
.seg button[aria-pressed="true"]{color:var(--ink);font-weight:500}
.chip{border-radius:var(--r-pill);border-color:rgba(20,18,15,.12);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  transition:background-color .22s var(--spring),color .22s var(--spring),border-color .22s var(--spring),transform .14s var(--spring)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sugar)}
.sw{transition:transform .3s var(--spring),box-shadow .3s var(--spring);box-shadow:inset 0 0 0 1px rgba(20,18,15,.10)}
.sw:hover{transform:scale(1.1)}
.sw[aria-pressed="true"]{transform:scale(1.06)}
.sw[aria-pressed="true"]::after{inset:-6px;border-width:1.5px;border-color:var(--ink)}
.check .box{border-radius:6px;border-color:rgba(20,18,15,.2)}
.check.radio .box{border-radius:50%}
.switch .track{border-radius:var(--r-pill)}
.stepper{border-radius:var(--r-pill);border-color:rgba(20,18,15,.12)}

/* ---- surfaces ---- */
.card{border-radius:var(--r-lg);border-color:rgba(20,18,15,.07);
  transition:box-shadow .4s var(--spring),transform .4s var(--spring)}
.panel{border-radius:var(--r-lg);border-color:rgba(20,18,15,.07)}
.tile{border-radius:var(--r-lg)}
.alert{border-radius:var(--r)}
.badge{border-radius:var(--r-pill);padding:4px 11px;letter-spacing:.04em;text-transform:none;font-size:11.5px}
.pcard{border-radius:var(--r-lg);border-color:rgba(20,18,15,.07)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.pcard .shot{background:linear-gradient(180deg,#FFFDF9,var(--sand))}
.pcard .fav{border-radius:var(--r-pill);backdrop-filter:blur(10px);background:rgba(255,255,255,.76)}
.gallery .main{border-radius:var(--r-xl);background:linear-gradient(180deg,#FFFDF9,var(--sand))}
.gallery .thumbs button{border-radius:var(--r);background:linear-gradient(180deg,#FFFDF9,var(--sand))}
.summary{border-radius:var(--r-lg);background:rgba(255,255,255,.8);backdrop-filter:blur(16px);border-color:rgba(20,18,15,.07)}
.ckstep{border-radius:var(--r-lg);border-color:rgba(20,18,15,.07)}
.payopt{border-radius:var(--r);border-color:rgba(20,18,15,.12)}
.dropzone{border-radius:var(--r-xl);border-color:rgba(20,18,15,.16)}
.srcbtn{border-radius:var(--r-pill);border-color:rgba(20,18,15,.12)}
.editor{border-radius:var(--r-lg);border-color:rgba(20,18,15,.09)}
.meditor{border-radius:var(--r-lg)}
.cover3d{border-radius:var(--r-xl);background:linear-gradient(180deg,#FFFDF9,var(--sand))}
.previewwrap{border-radius:var(--r-xl)}
.projcard{border-radius:var(--r-lg);border-color:rgba(20,18,15,.07)}
.pcell{border-radius:8px}
.uprow{border-radius:var(--r);border-color:rgba(20,18,15,.08)}
.upsell{border-radius:var(--r);border-color:rgba(20,18,15,.08)}
.mega{border-radius:0 0 var(--r-xl) var(--r-xl);background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(24px)}
.drawer{background:rgba(247,243,236,.94);backdrop-filter:saturate(180%) blur(24px)}
.searchov{background:rgba(247,243,236,.86);backdrop-filter:saturate(180%) blur(30px)}
.searchov .field-lg{border-radius:var(--r-lg);border:1px solid rgba(20,18,15,.1);background:rgba(255,255,255,.7);padding:0 20px}
.modal .sheet{border-radius:var(--r-xl);transform:scale(.94) translateY(10px);filter:blur(6px);
  transition:transform .5s var(--spring),filter .4s var(--spring)}
.modal.open .sheet{transform:none;filter:none}
.toast{border-radius:var(--r-pill);background:rgba(20,18,15,.92);backdrop-filter:blur(20px);padding:12px 20px}
.cookiebar{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(24px);border-top-color:rgba(20,18,15,.08)}
.acctnav a{border-radius:var(--r-pill)}
.acctnav a.on{background:var(--ink);color:var(--sugar)}
.pricebar{background:rgba(247,243,236,.82);backdrop-filter:saturate(180%) blur(20px);border-top-color:rgba(20,18,15,.07)}
.sk{border-radius:8px}
.bar{border-radius:var(--r-pill)}
.tstep .mark{border-color:rgba(20,18,15,.14)}
.tstep.now .mark{box-shadow:0 0 0 6px rgba(59,82,65,.10)}
.steps .st .n{border-color:rgba(20,18,15,.14)}
.albumcv{border-radius:2px 8px 8px 2px}

/* reveal: gentler, spring-eased */
.rv{transform:translateY(18px);transition:opacity .7s var(--spring-soft),transform .8s var(--spring-soft)}

/* ============================================================
   Album designer — to-scale sizes in cm, drag to rotate
   ============================================================ */
.dsgn{display:flex;flex-direction:column;gap:clamp(22px,3vw,38px)}
.dsgn-head{max-width:64ch;display:flex;flex-direction:column;gap:12px}
.dsgn-head .lead{color:var(--muted)}
.dsgn-panel{display:grid;grid-template-columns:1.15fr .95fr .9fr;gap:clamp(20px,3vw,44px);align-items:start}
@media(max-width:900px){.dsgn-panel{grid-template-columns:1fr}}
.dsgn-col{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.rng{width:100%;height:34px;accent-color:var(--green);background:transparent}
.dsgn-readout{justify-content:center;margin-top:16px}
.dsgn-stage{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 12%,#FFFDF9,var(--sand) 76%);
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.05);
  padding:clamp(20px,3vw,40px);
}
.dsgn-scene{position:relative;width:100%;height:clamp(360px,54vh,540px);perspective:1700px;
  display:grid;place-items:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dsgn-scene.grabbing{cursor:grabbing}
.dsgn-ref{position:absolute;border:1px dashed rgba(20,18,15,.18);border-radius:2px;pointer-events:none;
  display:grid;place-items:end center;opacity:.75}
.dsgn-ref span{font-size:10px;letter-spacing:.12em;color:var(--faint);transform:translateY(16px);background:transparent}
.dsgn-obj{position:relative;transform-style:preserve-3d;will-change:transform}
.dsgn-face{position:absolute;backface-visibility:hidden;border-radius:1px}
.dsgn-cover{
  background:
    linear-gradient(118deg,rgba(255,255,255,.20),rgba(255,255,255,.04) 34%,transparent 62%),
    var(--mat,none), var(--cvc,var(--green));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
}
.dsgn-cover.front{border-radius:1px 7px 7px 1px}
.dsgn-cover.back{border-radius:7px 1px 1px 7px}
.dsgn-spine{background:linear-gradient(90deg,rgba(0,0,0,.26),transparent 26%,rgba(255,255,255,.09) 50%,transparent 74%,rgba(0,0,0,.26)),var(--mat,none),var(--cvc,var(--green))}
.dsgn-pages{background:repeating-linear-gradient(to bottom,#FFFDF7 0 1.4px,#E7E0D2 1.4px 2.6px);box-shadow:inset 0 0 12px rgba(20,18,15,.14)}
.dsgn-pages.h{background:repeating-linear-gradient(to right,#FFFDF7 0 1.4px,#E7E0D2 1.4px 2.6px)}
.dsgn-foil{position:absolute;inset-inline:8%;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--f-disp);
  line-height:1.25;pointer-events:none}
.dsgn-window{position:absolute;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.22),inset 0 0 14px rgba(0,0,0,.25)}
.dsgn-window::after{content:"";position:absolute;inset:0;background:linear-gradient(128deg,rgba(255,255,255,.42),rgba(255,255,255,.06) 42%,transparent 60%)}
.dsgn-shadow{position:absolute;bottom:8%;inset-inline:22%;height:26px;border-radius:50%;
  background:radial-gradient(60% 60% at 50% 50%,rgba(20,18,15,.24),transparent 72%);filter:blur(7px);pointer-events:none}
.dsgn-hint{position:absolute;inset-inline:0;bottom:-2px;text-align:center;font-size:11.5px;letter-spacing:.1em;color:var(--faint);
  transition:opacity .5s var(--spring);pointer-events:none}
.dsgn-ruler{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:14px;color:var(--faint);font-size:11.5px}
.dsgn-ruler .tick{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);flex:1;max-width:170px;position:relative}
.dsgn-ruler .tick::before,.dsgn-ruler .tick::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--line)}
.dsgn-ruler .tick::before{inset-inline-start:0}
.dsgn-ruler .tick::after{inset-inline-end:0}
.dsgn-vr{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font-size:11.5px;pointer-events:none}
.dsgn-vr .vt{width:1px;background:linear-gradient(180deg,transparent,var(--line),transparent);flex:1;position:relative}
.dsgn-vr .vt::before,.dsgn-vr .vt::after{content:"";position:absolute;left:-3px;width:7px;height:1px;background:var(--line)}
.dsgn-vr .vt::before{top:0}
.dsgn-vr .vt::after{bottom:0}
.dsgn-readout{display:flex;flex-wrap:wrap;gap:8px}
.dsgn-readout .r{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(20,18,15,.07);border-radius:var(--r);padding:10px 14px;min-width:104px}
.dsgn-readout .k{font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.dsgn-readout .v{font-size:15px;color:var(--ink);font-weight:500}
.dsgn-grp > .hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.dsgn-grp .lb{font-size:11px;letter-spacing:.14em;color:var(--faint)}
.dsgn-grp .vl{font-size:13.5px;color:var(--ink)}
.sizegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:520px){.sizegrid{grid-template-columns:repeat(3,1fr)}}
.sizebtn{
  position:relative;border:1px solid rgba(20,18,15,.10);background:rgba(255,255,255,.66);border-radius:var(--r);
  padding:11px 6px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:66px;
  transition:background-color .28s var(--spring),border-color .28s var(--spring),transform .16s var(--spring);
}
.sizebtn:active{transform:scale(.96)}
.sizebtn .glyph{width:26px;height:26px;display:grid;place-items:center}
.sizebtn .glyph i{display:block;background:rgba(20,18,15,.22);border-radius:1px}
.sizebtn .n{direction:ltr;unicode-bidi:isolate;font-family:var(--f-num);font-size:12.5px;color:var(--ink);letter-spacing:.02em}
.sizebtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.sizebtn[aria-pressed="true"] .n{color:var(--sugar)}
.sizebtn[aria-pressed="true"] .glyph i{background:rgba(247,243,236,.85)}
.matrow{display:flex;gap:8px;flex-wrap:wrap}
.dsgn-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-top:6px}
.dsgn-cta .small{color:var(--muted)}

/* paper comparison */
.papers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
@media(max-width:700px){.papers{grid-template-columns:1fr}}
.paper-t{position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;background:var(--paper);display:block;width:100%;padding:0;text-align:start;border:1px solid rgba(20,18,15,.07);
  box-shadow:var(--sh-print);transition:transform .45s var(--spring),box-shadow .45s var(--spring)}
.paper-t[aria-pressed="true"]{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--ink)}
.paper-t .img{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.paper-t .sheen{position:absolute;inset:0;pointer-events:none;opacity:var(--sh,0);
  background:radial-gradient(38% 60% at var(--mx,50%) var(--my,40%),rgba(255,255,255,.75),transparent 62%);
  mix-blend-mode:screen;transition:opacity .3s var(--spring)}
.paper-t .cap{padding:14px 16px;display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:8px}
.paper-t .cap b{font-size:14.5px;color:var(--ink);font-weight:500}
.paper-t .cap span{font-size:10.5px;letter-spacing:.14em;color:var(--faint)}

/* product-card size chips */
.pcard .sizes{gap:6px;flex-wrap:wrap}
.pcard .sizes button{border:1px solid rgba(20,18,15,.10);background:rgba(255,255,255,.6);border-radius:var(--r-pill);
  padding:3px 9px;font-size:11px;font-family:var(--f-num);color:var(--muted);cursor:pointer;transition:.22s var(--spring)}
.pcard .sizes button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sugar)}
.pcard .shot .albumcv{transition:width .5s var(--spring),aspect-ratio .5s var(--spring),transform .5s var(--spring),background-color .35s var(--spring)}
@media (prefers-reduced-motion:reduce){
  .seg .ind,.modal .sheet,.rv,.pcard,.paper-t{transition-duration:.1s !important}
}
@media (prefers-reduced-transparency:reduce){
  .hdr,.mega,.drawer,.searchov,.summary,.cookiebar,.pricebar,.btn-ghost,.chip{backdrop-filter:none !important;background-color:var(--paper) !important}
}


/* ============================================================
   Photography — placeholder imagery, generated for this design.
   To be replaced by the studio's own album and lifestyle shots.
   ============================================================ */
.ph{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--sand)}
.ph::before{opacity:.10}
.ph::after{opacity:.05}
.gallery .main{background-image:none}
.gal-img{position:absolute;inset:0;background-size:cover;background-position:center}

/* ============================================================
   Robustness layer — added for the live site.

   The prototype could assume JavaScript had already run and that <html data-lang>
   was always present, because it was one file that set both before painting. A real
   site cannot: a cache plugin may defer or minify the script, an error anywhere on
   the page stops it, and a cached HTML document can be served before PHP ever sets
   the language. Under the prototype's rules either of those renders a blank page —
   every .rv section stays at opacity 0 and every bilingual span stays display:none.

   So the defaults are inverted here: content is VISIBLE, and the animation is an
   enhancement applied only once the page has told us JavaScript is alive.
   ============================================================ */

/* Arabic is the house language and the server default. Without this, a document that
   reaches the browser with no data-lang attribute shows no text at all. */
html:not([data-lang]) .l.ar{display:contents}

/* Reveal-on-scroll only hides things when JS is present to un-hide them.
   header.php sets html.js in an inline script before the first paint. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(14px)}
html.js .rv.in{opacity:1;transform:none}

/* Safety net: if the observer never fires — an old browser, a script error after
   boot — everything becomes visible a moment after load rather than never. */
html.js.ls-ready .rv{opacity:1;transform:none}

/* ------------------------------------------------------------
   Four small components the prototype never needed.

   It had no blog posts, no legal bodies and no editable pages, so there was never
   any long-form prose to style, no breadcrumb to leave one, and no star rating from
   a real review. These are written in the house tokens so they belong to the same
   system rather than sitting beside it.
   ------------------------------------------------------------ */

/* Long-form body copy: article bodies, legal documents, any page the client writes
   in WordPress. Deliberately narrow — 68ch is about as wide as Arabic stays
   comfortable to read. */
.prose{color:var(--body);font-size:16.5px;line-height:1.8;max-width:68ch}
.prose > * + *{margin-top:var(--s4)}
.prose h2{font-family:var(--f-disp);font-size:26px;color:var(--ink);margin-top:var(--s7)}
.prose h3{font-family:var(--f-disp);font-size:21px;color:var(--ink);margin-top:var(--s6)}
.prose a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li + li{margin-top:var(--s2)}
.prose img{border-radius:var(--r-lg);margin-block:var(--s5)}
.prose blockquote{border-inline-start:2px solid var(--brass-soft);padding-inline-start:var(--s4);
  color:var(--muted);font-style:italic}
.prose code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--sand);
  padding:2px 5px;border-radius:2px}

/* Breadcrumb back out of an article. */
.crumb{font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--ink)}
.crumb a::before{content:"‹";margin-inline-end:6px}

/* A review's rating. */
.stars{display:inline-flex;gap:2px;align-items:center}

/* The design-system page's colour chips. */
.swatches{display:flex;flex-wrap:wrap;gap:var(--s3)}
.swatch{display:flex;flex-direction:column;gap:6px;width:92px}
.swatch > span{display:block;height:52px;border-radius:var(--r);border:1px solid var(--line)}
.swatch code{font-size:10.5px;color:var(--faint)}

/* Skip link — visible only once it has keyboard focus. */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:var(--z-toast);
  background:var(--ink);color:var(--bone);padding:10px 16px;border-radius:0 0 var(--r) 0}
.skip:focus{inset-inline-start:0}

/* ============================================================
   WooCommerce, in house clothes.

   Woo's own three stylesheets are dequeued in inc/woo.php, because they re-grid the
   shop and restyle every control — which is what visibly changed the store the moment
   WooCommerce was activated. This block is the replacement: Woo's markup, mapped onto
   the tokens and components the rest of the site already uses.

   Organised the way a customer meets it: notices, then buttons and forms, then the
   shop, the product page, the basket, checkout and the account area.
   ============================================================ */

/* ---- notices ---------------------------------------------------------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  display:flex;align-items:flex-start;gap:var(--s3);list-style:none;
  padding:var(--s4);border-radius:var(--r);margin:0 0 var(--s5);
  font-size:14.5px;line-height:1.6;border:1px solid transparent}
.woocommerce-message{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.woocommerce-info,.woocommerce-noreviews{background:var(--brass-wash);color:var(--brass);border-color:var(--brass-soft)}
.woocommerce-error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger);
  flex-direction:column;gap:var(--s2)}
.woocommerce-error li{list-style:none}
.woocommerce-message .button,.woocommerce-info .button{margin-inline-start:auto}

/* ---- buttons ---------------------------------------------------------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:46px;padding:0 var(--s5);border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);color:var(--bone);font-family:var(--f-ui);font-size:14.5px;
  font-weight:500;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
  text-decoration:none;line-height:1}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover{
  background:var(--brass);border-color:var(--brass);color:var(--bone)}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--brass);border-color:var(--brass)}
.woocommerce a.button.wc-backward{background:transparent;color:var(--ink);border-color:var(--line)}
.woocommerce .button:disabled,.woocommerce .button[disabled]{opacity:.45;cursor:not-allowed}

/* ---- form fields ------------------------------------------------------ */
.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--s4)}
.woocommerce form .form-row label{font-size:13px;font-weight:500;color:var(--ink)}
.woocommerce form .form-row .required{color:var(--danger);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection--single{
  width:100%;min-height:46px;padding:0 var(--s3);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);font-size:15px;color:var(--ink);
  font-family:var(--f-ui);transition:border-color .2s}
.woocommerce form .form-row textarea{padding-block:var(--s3);min-height:110px;resize:vertical}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--ink)}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
@media (min-width:700px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - var(--s2));display:inline-flex}
  .woocommerce form .form-row-first{margin-inline-end:var(--s3)}
}
.woocommerce form.login,.woocommerce form.register,.woocommerce-form-coupon,
.woocommerce .checkout_coupon{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);background:var(--paper);margin-bottom:var(--s5)}

/* ---- the shop --------------------------------------------------------- */
/* The grid is .prodgrid, set by the theme's own archive template. These rules only
   neutralise the float layout Woo's markup still assumes. */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--s5);list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product{float:none;width:auto;margin:0}
.woocommerce .woocommerce-ordering select{min-height:40px;padding:0 var(--s3);
  border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13.5px}
.woocommerce nav.woocommerce-pagination ul{display:flex;gap:6px;justify-content:center;
  list-style:none;padding:0;border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:grid;place-items:center;min-width:40px;min-height:40px;padding:0 10px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:14px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ---- the product page ------------------------------------------------- */
.woocommerce div.product{display:grid;gap:var(--s7);align-items:start}
@media (min-width:900px){ .woocommerce div.product{grid-template-columns:1.1fr 1fr} }
.woocommerce div.product .product_title{font-family:var(--f-disp);font-weight:400;
  font-size:clamp(27px,3.6vw,44px);line-height:1.15;color:var(--ink);margin:0}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--f-num);font-size:26px;color:var(--ink);font-weight:500;margin:var(--s3) 0}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--body);margin-bottom:var(--s5)}
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin:var(--s5) 0}
.woocommerce div.product form.cart .variations{width:100%;border-collapse:collapse}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{padding:var(--s2) 0;text-align:start;vertical-align:middle}
.woocommerce div.product form.cart .variations label{font-size:13px;font-weight:500;color:var(--ink)}
.woocommerce .quantity input.qty{width:72px;min-height:46px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-family:var(--f-num)}
.woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;gap:var(--s4);list-style:none;
  padding:0;margin:0 0 var(--s5);border-bottom:1px solid var(--line-soft)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:block;padding:var(--s3) 0;
  color:var(--muted);font-size:14px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--brass)}
.woocommerce .related.products > h2,.woocommerce .upsells.products > h2{
  font-family:var(--f-disp);font-size:clamp(21px,2.3vw,30px);color:var(--ink);margin-bottom:var(--s5)}

/* ---- the basket ------------------------------------------------------- */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.woocommerce table.shop_table th{text-align:start;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:500;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line-soft)}
.woocommerce table.shop_table td{padding:var(--s4);border-bottom:1px solid var(--line-soft);
  vertical-align:middle;color:var(--body)}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce table.shop_table img{width:64px;border-radius:var(--r)}
.woocommerce a.remove{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  color:var(--danger);font-size:18px;line-height:1;text-decoration:none}
.woocommerce a.remove:hover{background:var(--danger-bg)}
.woocommerce .cart_totals h2,.woocommerce-checkout-review-order h3,
.woocommerce .cross-sells h2{font-family:var(--f-disp);font-size:21px;color:var(--ink);margin-bottom:var(--s4)}
.woocommerce .cart-collaterals .cart_totals{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);background:var(--paper)}
.woocommerce .cart_totals .order-total .amount{font-family:var(--f-num);font-size:22px;color:var(--ink)}

/* ---- checkout --------------------------------------------------------- */
.woocommerce-checkout #payment{background:var(--bone);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5)}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 var(--s4);
  border-bottom:1px solid var(--line-soft)}
.woocommerce-checkout #payment ul.payment_methods li{padding:var(--s3) 0}
.woocommerce-checkout #payment div.payment_box{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:var(--s3);font-size:13.5px;color:var(--muted);margin-top:var(--s2)}
.woocommerce-checkout #payment #place_order{width:100%;min-height:52px;font-size:15.5px}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3{font-family:var(--f-disp);font-size:21px;
  color:var(--ink);margin-bottom:var(--s4)}
@media (min-width:980px){
  .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.1fr .9fr;
    gap:var(--s7);align-items:start}
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review{grid-column:2}
  .woocommerce-checkout form.checkout .col2-set{grid-column:1}
}

/* ---- the account area ------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:var(--s3) 0;
  color:var(--muted);border-bottom:1px solid var(--line-soft);font-size:15px}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--ink);font-weight:500}
@media (min-width:860px){
  .woocommerce-account .woocommerce-MyAccount-navigation{float:none;width:auto}
  .woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}
  .woocommerce-account .woocommerce{display:grid;grid-template-columns:220px 1fr;gap:var(--s7);align-items:start}
}

/* ---- odds and ends ---------------------------------------------------- */
.woocommerce .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.woocommerce del{color:var(--faint);font-size:.85em;margin-inline-end:6px}
.woocommerce ins{text-decoration:none}
.woocommerce .star-rating{color:var(--brass-soft)}
.woocommerce-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:var(--s4)}
.woocommerce-breadcrumb a{color:var(--muted)}

/* ------------------------------------------------------------
   Mobile chrome.

   The prototype toggled these three controls' display from JavaScript on a resize
   listener. Media queries do the same job without a flash on first paint and without
   depending on the script running — which, after the reveal-on-scroll lesson, is the
   rule here: structure in CSS, enhancement in JS.
   ------------------------------------------------------------ */
#menubtn{display:none}
#filterbtn{display:none}
@media (max-width:980px){
  #menubtn{display:grid}
  #filterbtn{display:inline-flex}
  .hdr .nav{display:none}
}
@media (max-width:420px){
  #hdrcta{display:none}
}

/* The album editor's upload screen uses one step past the scale's mt7. */
.mt8{margin-top:var(--s8)}

/* ------------------------------------------------------------
   An application page — the album editor — rather than an article.

   page.php gives it the bare .screen, because .prose caps its content at 68
   characters: right for an article, and the reason the editor first appeared as a
   narrow strip down one side of the window with the rest of the screen empty.

   Each of the editor's own screens already carries a .wrap, so there is no padding
   or measure to add here. All this does is stop anything constraining them and give
   the canvas the height the prototype's editor had.
   ------------------------------------------------------------ */
.ls-app{display:block}
.ls-app .editor{height:min(80vh,760px)}
@media (max-width:980px){ .ls-app .editor{height:auto} }

/* Visible only to screen readers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The add-to-cart form sits behind the prototype's own price bar, which is the
   visible control. Hidden rather than removed, because WooCommerce needs a real form
   to post — the buttons in the price bar submit it. */
.ls-buy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* The spacing scale, completed. The album page reaches mt9. */
.mt9{margin-top:var(--s9)}