/* ================================================================
   MATJARI STORE SETUP · the black and gold system
   Ported 1:1 from the approved design, extended for: clickable
   stepper, 3-up templates, dual name, variants, delivery with a
   country-wide rate + time on one line, free shipping, returns,
   registrant details, server save states, copy-link.
   ================================================================ */
:root{
  --ink:#15151A; --ink-2:#23232B; --ink-3:#31313B;
  --page:#F4F3EF; --card:#FFFFFF; --well:#F8F7F4;
  --hairline:#ECEAE3; --border:#DBD8CF; --border-2:#C9C6BC;
  --text:#1B1B20; --muted:#6E6C64; --faint:#9C9A91;
  --gold:#A8863D; --gold-2:#C6A45C; --gold-soft:#F6F0E1; --gold-line:#E7DBBE;
  --green:#177E52; --green-soft:#E6F2EB;
  --red:#C63D33; --red-soft:#FBEBE9;
  --brand:#15151A; /* merchant's preview color */
  --fd:"Fraunces",Georgia,"Times New Roman",serif;
  --fu:"Plus Jakarta Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fm:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-s:10px; --r:14px; --r-l:18px; --r-xl:26px;
  --maxw:660px;
  --sh-1:0 1px 2px rgba(18,18,22,.05),0 2px 8px rgba(18,18,22,.05);
  --sh-2:0 2px 6px rgba(18,18,22,.05),0 14px 34px rgba(18,18,22,.09);
  --sh-3:0 24px 70px rgba(18,18,22,.24),0 8px 20px rgba(18,18,22,.12);
  --sh-ink:0 12px 28px rgba(18,18,22,.22);
  --ease:cubic-bezier(.2,.7,.3,1);
  --pad:clamp(22px,5.6vw,42px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--fu);color:var(--text);background:var(--page);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}
body.ar{--fd:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif;letter-spacing:0}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(900px 480px at 85% -6%,rgba(168,134,61,.07),transparent 60%),
             radial-gradient(760px 420px at -6% 106%,rgba(21,21,26,.05),transparent 55%);}
body.locked{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;touch-action:manipulation}
input,textarea,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
a{color:var(--ink)}
::selection{background:rgba(168,134,61,.25)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding-inline:16px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;width:100%;margin-inline:-16px;padding-inline:16px;
  background:rgba(244,243,239,.9);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-block-end:1px solid var(--hairline);}
.topbar-in{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;gap:10px;padding-block:13px}
.brand{display:flex;align-items:center;gap:11px;min-width:0;margin-inline-end:auto}
.brand-mark{inline-size:37px;block-size:37px;border-radius:12px;flex:none;
  background:linear-gradient(155deg,var(--ink-2),var(--ink));box-shadow:var(--sh-ink);
  display:grid;place-items:center;color:var(--gold-2);}
.brand-mark svg{inline-size:19px;block-size:19px}
.brand-name{font-family:var(--fd);font-weight:640;font-size:1.28rem;letter-spacing:.01em;color:var(--ink);white-space:nowrap}
body.ar .brand-name{font-weight:700}

.save-pill{display:none;align-items:center;gap:7px;padding-block:7px;padding-inline:12px;
  border-radius:999px;background:var(--green-soft);color:var(--green);font-size:.78rem;font-weight:700;
  opacity:0;transform:translateY(-2px);transition:opacity .3s var(--ease),transform .3s var(--ease),background .25s,color .25s;}
.save-pill.on{display:inline-flex}
.save-pill.show{opacity:1;transform:none}
.save-pill svg{inline-size:13px;block-size:13px}
.save-pill.saving{background:var(--gold-soft);color:var(--gold)}
.save-pill.err{background:var(--red-soft);color:var(--red)}

.lang-btn{display:inline-flex;align-items:center;gap:8px;padding-block:9px;padding-inline:15px;
  border:1.5px solid var(--border);border-radius:999px;background:var(--card);
  font-size:.86rem;font-weight:700;color:var(--ink);box-shadow:var(--sh-1);
  transition:border-color .15s,transform .15s var(--ease);}
.lang-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.lang-btn svg{inline-size:15px;block-size:15px;color:var(--gold)}
.link-btn{inline-size:39px;block-size:39px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--border);background:var(--card);color:var(--gold);box-shadow:var(--sh-1);
  transition:border-color .15s,transform .15s var(--ease);}
.link-btn:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.link-btn svg{inline-size:17px;block-size:17px}

/* ---------- progress: clickable numbered stepper ---------- */
.progress{width:100%;padding-block:18px 6px}
.progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.p-step{font-size:.85rem;font-weight:800;color:var(--ink);letter-spacing:.02em}
.p-step b{color:var(--gold)}
.p-name{font-size:.85rem;color:var(--muted);font-weight:600;text-align:end}
.stepper{display:flex;align-items:center;margin-block-start:12px}
.stp{position:relative;flex:1;display:flex;justify-content:center;padding-block:5px;cursor:pointer}
.stp::before{content:"";position:absolute;inset-inline-start:-50%;inset-inline-end:50%;inset-block-start:50%;
  block-size:2px;transform:translateY(-50%);background:#E4E2DA;transition:background .35s var(--ease);z-index:0}
.stp:first-child::before{display:none}
.stp.done::before,.stp.current::before{background:var(--ink)}
.stp .dot{position:relative;z-index:1;inline-size:32px;block-size:32px;border-radius:50%;flex:none;
  border:2px solid var(--border-2);background:var(--card);display:grid;place-items:center;
  font-family:var(--fm);font-weight:800;font-size:.8rem;color:var(--muted);
  transition:all .25s var(--ease);}
.stp .dot svg{inline-size:14px;block-size:14px;display:none}
.stp.done .dot{background:var(--ink);border-color:var(--ink);color:#fff}
.stp.done .dot svg{display:block}
.stp.done .dot i{display:none}
.stp.current .dot{border-color:var(--gold);background:linear-gradient(150deg,var(--gold-2),var(--gold));color:#fff;
  box-shadow:0 0 0 4px rgba(168,134,61,.18),var(--sh-1);}
.stp:disabled{cursor:default}
.stp:not(:disabled):hover .dot{transform:translateY(-2px);border-color:var(--ink);box-shadow:var(--sh-1)}
.stp.current:not(:disabled):hover .dot{border-color:var(--gold)}
.stp:disabled .dot{opacity:.55}

/* ---------- card / steps ---------- */
.card{position:relative;width:100%;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);margin-block:18px 10px;overflow:hidden;}
.card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;z-index:2;
  background:linear-gradient(90deg,var(--gold),var(--gold-2) 40%,var(--gold));}
.card-pad{padding:var(--pad)}
.step{display:none}
.step.active{display:block}
@media (prefers-reduced-motion:no-preference){.step.active{animation:stepIn .42s var(--ease)}}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.step-head{margin-block-end:26px}
.step-kicker{display:flex;align-items:center;gap:10px;margin-block-end:14px}
.step-kicker .sq{inline-size:30px;block-size:30px;border-radius:9px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.88rem;font-family:var(--fm);}
.step-kicker .kt{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
body.ar .step-kicker .kt{letter-spacing:.05em;font-size:.84rem}
.step-title{font-family:var(--fd);font-weight:640;font-size:clamp(1.9rem,6.8vw,2.55rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
body.ar .step-title{font-weight:700;letter-spacing:0;line-height:1.25}
.step-sub{margin-block-start:10px;color:var(--muted);font-size:1.03rem;max-inline-size:52ch}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-block-start:13px;color:var(--muted);font-size:.87rem;font-weight:600}
body.ar .meta{font-size:.92rem}
.meta svg{inline-size:15px;block-size:15px;color:var(--gold)}
.meta .sep{color:var(--border-2)}

/* ---------- fields ---------- */
.field{margin-block-end:22px}
.field:last-child{margin-block-end:0}
.label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-block-end:9px}
.label .lab{font-weight:700;font-size:.98rem;color:var(--ink)}
.label .opt{font-size:.78rem;color:var(--faint);font-weight:650}
body.ar .label .opt{font-size:.85rem}
.hint{font-size:.85rem;color:var(--muted);margin-block-start:8px;line-height:1.5}
body.ar .hint{font-size:.9rem}
.input,.textarea{width:100%;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);
  padding-block:15px;padding-inline:16px;font-size:1.03rem;transition:border-color .18s,box-shadow .18s;
  -webkit-appearance:none;appearance:none;}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:hover,.textarea:hover{border-color:var(--border-2)}
.input:focus,.textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(21,21,26,.09)}
.textarea{resize:vertical;min-block-size:100px;line-height:1.55}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236E6C64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-inline-end:34px;cursor:pointer}
[dir="rtl"] select.input{background-position:left 12px center;padding-inline-end:16px;padding-inline-start:34px}
.affix{position:relative;display:flex}
.affix .input{padding-inline-end:86px}
.affix-suffix{position:absolute;inset-inline-end:6px;inset-block:6px;display:flex;align-items:center;padding-inline:13px;
  background:var(--well);border:1px solid var(--hairline);border-radius:10px;font-size:.86rem;color:var(--muted);font-weight:700;pointer-events:none;}
.row{display:grid;gap:14px}
.row.two{grid-template-columns:1fr 1fr}
@media (max-width:440px){.row.two{grid-template-columns:1fr}}

.field.invalid .input,.field.invalid .textarea,.field.invalid .dropzone,[data-f].invalid .input,[data-f].invalid .textarea{border-color:var(--red)}
.error-msg{display:none;align-items:center;gap:7px;margin-block-start:9px;font-size:.85rem;color:var(--red);font-weight:650}
body.ar .error-msg{font-size:.9rem}
.field.invalid .error-msg,.invalid > .error-msg{display:flex}
.error-msg svg{inline-size:14px;block-size:14px;flex:none}
@media (prefers-reduced-motion:no-preference){
  .field.invalid .input,.field.invalid .textarea,.invalid{animation:nudge .3s var(--ease)}
  @keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
}

/* dual business name */
.name-pair{display:flex;flex-direction:column;gap:10px}
.name-row{position:relative;display:flex}
[dir="ltr"] .name-row .input{padding-right:96px;padding-left:16px}
[dir="rtl"] .name-row .input{padding-left:96px;padding-right:16px}
[dir="rtl"] .name-row .input[dir="ltr"]{text-align:left}
[dir="ltr"] .name-row .input[dir="rtl"]{text-align:right}
.name-tag{position:absolute;inset-inline-end:6px;inset-block:6px;display:flex;align-items:center;padding-inline:12px;
  background:var(--well);border:1px solid var(--hairline);border-radius:10px;font-size:.76rem;color:var(--muted);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;pointer-events:none;}
body.ar .name-tag{letter-spacing:0;font-size:.82rem}
.main-pick{margin-block-start:14px;padding:13px 15px;border-radius:var(--r);background:var(--gold-soft);border:1px dashed var(--gold-line)}
.mp-label{display:block;font-size:.85rem;font-weight:750;color:var(--gold);margin-block-end:9px}
body.ar .mp-label{font-size:.9rem}
.main-pick .chip{padding-block:9px;padding-inline:14px;font-size:.88rem;background:var(--card)}
.main-pick .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.other-wrap{margin-block-start:11px}
@media (prefers-reduced-motion:no-preference){.other-wrap,.free-wrap,.ret-custom,.main-pick{animation:reveal .3s var(--ease)}}
@keyframes reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;padding-block:11px;padding-inline:16px;border-radius:999px;
  border:1.5px solid var(--border);background:var(--card);font-size:.9rem;font-weight:650;color:var(--ink);
  transition:all .16s var(--ease);}
body.ar .chip{font-size:.95rem}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .cnt{font-size:.76rem;opacity:.65;font-weight:800}
.chip.ghost{border-style:dashed;color:var(--muted);background:var(--well)}
.chip svg{inline-size:14px;block-size:14px}
.chip:disabled{opacity:.45;transform:none;cursor:default}

/* checkbox */
.checkline{display:flex;align-items:center;gap:12px;padding-block:4px;cursor:pointer;user-select:none}
.checkline input{position:absolute;opacity:0}
.checkline .box{inline-size:23px;block-size:23px;border-radius:7px;border:2px solid var(--border-2);background:var(--card);
  display:grid;place-items:center;color:#fff;transition:all .18s var(--ease);flex:none;}
.checkline .box svg{inline-size:13px;block-size:13px;opacity:0;transform:scale(.5);transition:.18s var(--ease)}
.checkline input:checked + .box{background:var(--ink);border-color:var(--ink)}
.checkline input:checked + .box svg{opacity:1;transform:scale(1)}
.checkline input:focus-visible + .box{box-shadow:0 0 0 4px rgba(21,21,26,.14)}
.checkline .txt{font-size:.95rem;font-weight:650}

/* ---------- buttons / sticky nav ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r);font-weight:750;font-size:1.02rem;
  padding-block:16px;padding-inline:22px;transition:transform .15s var(--ease),box-shadow .2s,border-color .2s,opacity .2s;white-space:nowrap;}
.btn svg{inline-size:18px;block-size:18px}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--sh-ink);flex:1;min-block-size:56px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(18,18,22,.3);background:var(--ink-2)}
.btn-primary:active{transform:scale(.985)}
.btn-primary:disabled{opacity:.5;transform:none;box-shadow:var(--sh-1);cursor:default}
.btn-ghost{background:var(--card);border:1.5px solid var(--border);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.3);flex:1;min-block-size:58px}
.btn-light:hover{transform:translateY(-2px)}
.btn-light:active{transform:scale(.985)}
.ico-fwd,.ico-back{transition:transform .2s var(--ease)}
[dir="rtl"] .ico-fwd,[dir="rtl"] .ico-back{transform:scaleX(-1)}
.btn:hover .ico-fwd{transform:translateX(3px)}
[dir="rtl"] .btn:hover .ico-fwd{transform:scaleX(-1) translateX(3px)}
.btn-text{align-self:center;font-size:.88rem;font-weight:650;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:8px}
.btn-text:hover{color:var(--red)}

.navbar{position:sticky;bottom:0;z-index:30;width:100%;margin-block-start:4px;
  padding-block:12px calc(12px + env(safe-area-inset-bottom));
  background:rgba(244,243,239,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block-start:1px solid var(--hairline);}
.navbar-in{max-width:var(--maxw);margin-inline:auto;display:flex;gap:11px}
body[data-view="intro"] .navbar,body[data-view="done"] .navbar,
body[data-view="intro"] .progress,body[data-view="done"] .progress{display:none}

/* ---------- intro: dark hero ---------- */
.hero{position:relative;margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 26px;
  padding:calc(var(--pad) + 8px) var(--pad) 32px;color:#F2F0EA;overflow:hidden;
  background:linear-gradient(165deg,#20202A 0%,#15151A 55%,#101014 100%);}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 300px at 88% -10%,rgba(198,164,92,.22),transparent 60%),
             radial-gradient(420px 260px at -10% 110%,rgba(198,164,92,.1),transparent 55%);}
.hero > *{position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding-block:7px;padding-inline:14px;border-radius:999px;
  border:1px solid rgba(198,164,92,.5);color:var(--gold-2);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-block-end:18px;}
body.ar .hero-badge{letter-spacing:.05em;font-size:.82rem}
.hero-title{font-family:var(--fd);font-weight:640;font-size:clamp(2.1rem,8.4vw,3rem);line-height:1.06;letter-spacing:-.02em;color:#FBFAF7}
body.ar .hero-title{font-weight:700;letter-spacing:0;line-height:1.3}
.hero-sub{margin-block-start:13px;color:#B9B6AC;font-size:1.06rem;max-inline-size:48ch}
.hero-sub b{color:#EDE9DE;font-weight:700}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:20px}
.trust span{display:inline-flex;align-items:center;gap:7px;padding-block:7px;padding-inline:13px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.8rem;font-weight:650;color:#D8D5CB;}
body.ar .trust span{font-size:.87rem}
.trust svg{inline-size:14px;block-size:14px;color:var(--gold-2)}
.hero-cta{margin-block-start:24px;display:flex}
.resume-box{margin-block-start:22px;padding:15px 17px;border-radius:var(--r-l);
  background:rgba(255,255,255,.07);border:1px solid rgba(198,164,92,.4);display:flex;gap:13px;align-items:flex-start}
.resume-box > svg{inline-size:22px;block-size:22px;color:var(--gold-2);flex:none;margin-block-start:2px}
.rb-body{min-width:0}
.resume-box .rb-t{font-weight:750;color:#FBFAF7;font-size:.97rem}
.resume-box .rb-s{font-size:.85rem;color:#B9B6AC;margin-block-start:1px}
body.ar .resume-box .rb-s{font-size:.9rem}
.rb-copy{display:inline-flex;align-items:center;gap:7px;margin-block-start:11px;padding-block:8px;padding-inline:13px;
  border-radius:999px;border:1px solid rgba(198,164,92,.55);background:rgba(198,164,92,.12);color:var(--gold-2);
  font-size:.8rem;font-weight:750;transition:background .15s,transform .15s var(--ease);}
.rb-copy:hover{background:rgba(198,164,92,.22);transform:translateY(-1px)}
.rb-copy svg{inline-size:14px;block-size:14px}
body.ar .rb-copy{font-size:.87rem}

.intro-list{display:flex;flex-direction:column;gap:9px}
.intro-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--r-l);background:var(--well);border:1px solid var(--hairline)}
.intro-item .n{inline-size:29px;block-size:29px;border-radius:9px;flex:none;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--fm);font-size:.84rem}
.intro-item .t{flex:1;font-weight:650;font-size:.96rem}
.intro-item .m{font-size:.78rem;color:var(--gold);font-weight:800;white-space:nowrap}
body.ar .intro-item .m{font-size:.85rem}
.intro-item.hl{background:var(--gold-soft);border-color:var(--gold-line)}
.intro-item.done{opacity:.72}
.intro-item.done .n{background:var(--green)}
.intro-foot{margin-block-start:22px;display:flex;flex-direction:column;gap:12px}
.intro-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;color:var(--muted);text-align:center}
body.ar .intro-note{font-size:.9rem}
.intro-note svg{inline-size:15px;block-size:15px;color:var(--green);flex:none}
.help-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--gold);text-decoration:none;
  border-block-end:1.5px solid var(--gold-line);padding-block-end:2px;align-self:center;}
.help-link svg{inline-size:16px;block-size:16px}
.help-link:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- dropzone ---------- */
.dropzone{position:relative;display:flex;align-items:center;gap:15px;border:2px dashed var(--border);
  border-radius:var(--r-l);background:var(--well);padding:16px;cursor:pointer;text-align:start;
  transition:border-color .18s,background .18s,transform .12s var(--ease);}
.dropzone:hover{border-color:var(--ink);background:var(--card)}
.dropzone.drag{border-color:var(--gold);background:var(--gold-soft);transform:scale(1.01)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dz-icon{inline-size:54px;block-size:54px;border-radius:14px;flex:none;background:var(--card);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink)}
.dz-icon svg{inline-size:24px;block-size:24px}
.dz-thumb{inline-size:54px;block-size:54px;border-radius:13px;flex:none;object-fit:cover;background:var(--well);border:1px solid var(--hairline)}
.dz-title{font-weight:700;font-size:.95rem;color:var(--ink)}
.dz-sub{font-size:.81rem;color:var(--muted);margin-block-start:2px}
body.ar .dz-sub{font-size:.87rem}
.dz-clear{position:absolute;inset-inline-end:10px;inset-block-start:10px;inline-size:29px;block-size:29px;border-radius:50%;
  background:var(--card);box-shadow:var(--sh-1);border:1px solid var(--hairline);display:none;place-items:center;color:var(--muted);z-index:2;}
.dropzone.has-file .dz-clear{display:grid}
.dz-clear:hover{color:var(--red);border-color:var(--red)}
.dz-clear svg{inline-size:14px;block-size:14px}
.dropzone.busy{pointer-events:none;opacity:.7}
.dz-alt{display:inline-flex;align-items:center;gap:7px;margin-block-start:11px;font-size:.86rem;font-weight:750;color:var(--gold);
  text-decoration:none;border-block-end:1.5px solid var(--gold-line);padding-block-end:2px;}
body.ar .dz-alt{font-size:.91rem}
.dz-alt:hover{color:var(--ink);border-color:var(--ink)}
.dz-alt svg{inline-size:14px;block-size:14px}

/* ---------- template cards: three side by side ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.tpl{position:relative;text-align:start;border:2px solid var(--hairline);border-radius:var(--r-l);background:var(--card);
  overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .16s var(--ease);width:100%;
  display:flex;flex-direction:column;}
.tpl:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--border-2)}
.tpl.sel{border-color:var(--ink);box-shadow:var(--sh-ink)}
.tpl-preview{position:relative;display:block;aspect-ratio:4/3;background:var(--well);overflow:hidden;border-block-end:1px solid var(--hairline)}
.tpl-preview svg,.tpl-preview img{inline-size:100%;block-size:100%;display:block;object-fit:cover;object-position:top}
.tpl-tick{position:absolute;inset-block-start:8px;inset-inline-end:8px;inline-size:25px;block-size:25px;border-radius:50%;
  border:2px solid var(--border-2);background:var(--card);display:grid;place-items:center;color:#fff;
  transition:all .2s var(--ease);box-shadow:var(--sh-1);}
.tpl.sel .tpl-tick{background:var(--ink);border-color:var(--ink)}
.tpl-tick svg{inline-size:13px;block-size:13px;opacity:0;transform:scale(.5);transition:.2s var(--ease)}
.tpl.sel .tpl-tick svg{opacity:1;transform:scale(1)}
.tpl-meta{display:flex;flex-direction:column;padding:11px 12px 13px;flex:1}
.tpl-name{font-family:var(--fd);font-weight:640;font-size:1.05rem;color:var(--ink);line-height:1.15;display:block}
body.ar .tpl-name{font-weight:700}
.tpl-desc{font-size:.78rem;color:var(--muted);margin-block-start:3px;display:block;line-height:1.45}
body.ar .tpl-desc{font-size:.84rem}
.tpl-link{display:inline-flex;align-items:center;gap:4px;margin-block-start:auto;padding-block-start:9px;font-size:.76rem;font-weight:750;color:var(--gold);text-decoration:none;}
body.ar .tpl-link{font-size:.82rem}
.tpl-link span{border-block-end:1.5px solid var(--gold-line);padding-block-end:1px}
.tpl-link:hover{color:var(--ink)}
.tpl-link:hover span{border-color:var(--ink)}
.tpl-link svg{inline-size:11px;block-size:11px;flex:none}
@media (max-width:480px){
  .tpl-grid{gap:8px}
  .tpl-meta{padding:9px 9px 11px}
  .tpl-name{font-size:.94rem}
  .tpl-desc{display:none}
  .tpl-tick{inline-size:22px;block-size:22px;inset-block-start:6px;inset-inline-end:6px}
}

/* ---------- swatches / fonts ---------- */
.block{margin-block-start:30px;padding-block-start:26px;border-block-start:1px solid var(--hairline)}
.block-title{font-weight:750;font-size:1.06rem;color:var(--ink);margin-block-end:4px}
.block-sub{font-size:.88rem;color:var(--muted);margin-block-end:15px}
body.ar .block-sub{font-size:.93rem}
.swatches{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.swatch{position:relative;inline-size:47px;block-size:47px;border-radius:14px;border:2px solid rgba(0,0,0,.05);box-shadow:var(--sh-1);transition:transform .15s var(--ease)}
.swatch:hover{transform:scale(1.08)}
.swatch.sel{box-shadow:0 0 0 3px var(--card),0 0 0 5.5px var(--ink)}
.swatch svg{position:absolute;inset:0;margin:auto;inline-size:18px;block-size:18px;color:#fff;opacity:0;transform:scale(.5);transition:.18s var(--ease);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.swatch.sel svg{opacity:1;transform:scale(1)}
.swatch-custom{inline-size:47px;block-size:47px;border-radius:14px;flex:none;border:2px dashed var(--border-2);background:var(--well);
  display:grid;place-items:center;color:var(--muted);overflow:hidden;position:relative;transition:transform .15s,border-color .15s;}
.swatch-custom:hover{transform:scale(1.08);border-color:var(--ink)}
.swatch-custom.sel{border-style:solid;box-shadow:0 0 0 3px var(--card),0 0 0 5.5px var(--ink)}
.swatch-custom.sel .plus svg{color:#fff}
.swatch-custom input[type=color]{position:absolute;inset:-6px;width:160%;height:160%;border:none;padding:0;cursor:pointer;opacity:0}
.swatch-custom .plus{pointer-events:none}
.swatch-custom .plus svg{inline-size:18px;block-size:18px}
.color-label{margin-inline-start:4px;font-size:.86rem;color:var(--muted);font-family:var(--fm)}
.fonts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.font-opt{text-align:center;padding:15px 8px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--card);
  transition:border-color .18s,transform .14s var(--ease);}
.font-opt:hover{transform:translateY(-2px);border-color:var(--ink)}
.font-opt.sel{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink),var(--sh-1)}
.font-sample{font-size:1.55rem;line-height:1;color:var(--ink);margin-block-end:8px}
.font-tag{font-size:.78rem;color:var(--muted);font-weight:700}
body.ar .font-tag{font-size:.85rem}
.font-opt.sel .font-tag{color:var(--ink)}

/* ---------- live preview ---------- */
.preview-wrap{margin-block-start:30px}
.preview-eyebrow{display:flex;align-items:center;gap:8px;font-size:.73rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-block-end:12px}
body.ar .preview-eyebrow{letter-spacing:.04em;font-size:.83rem}
.live-dot{inline-size:7px;block-size:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(23,126,82,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,126,82,.5)}70%{box-shadow:0 0 0 7px rgba(23,126,82,0)}100%{box-shadow:0 0 0 0 rgba(23,126,82,0)}}
.preview{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--sh-2);background:var(--card)}
.pv-bar{display:flex;align-items:center;gap:11px;padding:13px 15px;background:var(--brand);color:#fff;transition:background .35s var(--ease)}
.pv-logo{inline-size:37px;block-size:37px;border-radius:11px;flex:none;background:rgba(255,255,255,.16);display:grid;place-items:center;
  font-weight:800;font-size:1.05rem;color:#fff;border:1px solid rgba(255,255,255,.24);overflow:hidden;}
.pv-logo img{inline-size:100%;block-size:100%;object-fit:cover}
.pv-name{font-weight:750;font-size:1.03rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-name.pv-serif{font-family:var(--fd);font-weight:640}
body.ar .pv-name.pv-serif{font-weight:700}
.pv-name.pv-round{font-family:"Trebuchet MS","Segoe UI",var(--fu);letter-spacing:.2px}
.pv-cart{margin-inline-start:auto;opacity:.85}
.pv-cart svg{inline-size:18px;block-size:18px}
.pv-body{padding:14px;background:var(--well)}
.pv-hero{border-radius:12px;block-size:84px;border:1px solid var(--hairline);display:flex;align-items:center;padding-inline:16px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 14%,#fff),color-mix(in srgb,var(--brand) 3%,#fff));transition:background .35s var(--ease);}
.pv-hero-btn{font-size:.78rem;font-weight:750;color:#fff;background:var(--brand);padding-block:9px;padding-inline:15px;border-radius:10px;transition:background .35s var(--ease)}
.pv-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-block-start:11px}
.pv-tile{aspect-ratio:1;border-radius:11px;background:#EDEBE4;overflow:hidden;border:1px solid var(--hairline)}
.pv-tile img{inline-size:100%;block-size:100%;object-fit:cover}

/* ============ step 3: catalog ============ */
.goal{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-l);
  background:var(--well);border:1px solid var(--hairline);margin-block-end:16px;transition:background .3s,border-color .3s;}
.goal.met{background:var(--green-soft);border-color:#C8E2D3}
.goal-slots{display:flex;gap:8px;flex:none}
.goal-slot{inline-size:42px;block-size:42px;border-radius:12px;border:2px dashed var(--border-2);background:var(--card);
  display:grid;place-items:center;color:var(--faint);font-weight:800;font-size:.84rem;overflow:hidden;transition:border-color .3s;}
.goal-slot img{inline-size:100%;block-size:100%;object-fit:cover}
.goal-slot.filled{border-style:solid;border-color:var(--ink)}
.goal.met .goal-slots{display:none}
.goal-check{display:none;inline-size:42px;block-size:42px;border-radius:50%;background:var(--green);color:#fff;place-items:center;flex:none;box-shadow:0 6px 16px rgba(23,126,82,.3)}
.goal-check svg{inline-size:21px;block-size:21px}
.goal.met .goal-check{display:grid}
.goal-t{font-weight:750;font-size:.98rem;color:var(--ink)}
.goal.met .goal-t{color:var(--green)}
.goal-s{font-size:.83rem;color:var(--muted);margin-block-start:1px}
body.ar .goal-s{font-size:.88rem}

.searchbar{position:relative;margin-block-end:12px;display:none}
.searchbar.show{display:block}
.searchbar .input{padding-inline-start:44px;padding-block:12px;font-size:.95rem}
.searchbar svg{position:absolute;inset-inline-start:15px;inset-block-start:50%;transform:translateY(-50%);inline-size:17px;block-size:17px;color:var(--faint);pointer-events:none}

.filterbar{display:flex;align-items:center;gap:9px;overflow-x:auto;padding-block:2px 13px;margin-inline:-2px;padding-inline:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.filterbar::-webkit-scrollbar{display:none}
.filterbar .chip{flex:none;padding-block:9px;padding-inline:15px;font-size:.87rem}
.fb-manage{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.83rem;font-weight:750;color:var(--gold);
  padding-block:9px;padding-inline:13px;border-radius:999px;border:1.5px dashed var(--gold-line);background:var(--gold-soft);white-space:nowrap;}
body.ar .fb-manage{font-size:.88rem}
.fb-manage:hover{border-color:var(--gold)}
.fb-manage svg{inline-size:13px;block-size:13px}

.plist{display:flex;flex-direction:column;gap:11px;margin-block-end:14px}
.pcard{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1.5px solid var(--hairline);border-radius:var(--r-l);
  background:var(--card);text-align:start;width:100%;transition:border-color .18s,box-shadow .18s,transform .2s var(--ease),opacity .25s;}
.pcard:hover{border-color:var(--border-2);box-shadow:var(--sh-1)}
@media (prefers-reduced-motion:no-preference){.pcard.adding{animation:popIn .45s var(--ease)}}
@keyframes popIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.pthumb{inline-size:62px;block-size:62px;border-radius:13px;flex:none;background:var(--well);border:1px solid var(--hairline);
  display:grid;place-items:center;color:var(--faint);overflow:hidden;}
.pthumb img{inline-size:100%;block-size:100%;object-fit:cover}
.pthumb svg{inline-size:23px;block-size:23px}
.pinfo{flex:1;min-width:0;cursor:pointer}
.pname{font-weight:750;font-size:1rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmeta{display:flex;align-items:center;gap:8px;margin-block-start:4px;flex-wrap:wrap}
.pcat{font-size:.74rem;font-weight:750;color:var(--muted);background:var(--well);border:1px solid var(--hairline);padding-block:2px;padding-inline:9px;border-radius:999px;white-space:nowrap}
body.ar .pcat{font-size:.8rem}
.pvars{font-size:.72rem;font-weight:750;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);padding-block:2px;padding-inline:9px;border-radius:999px;white-space:nowrap}
body.ar .pvars{font-size:.78rem}
.pprice{font-weight:800;color:var(--ink);font-size:.92rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pprice.on-sale{color:var(--green)}
.pprice .old{color:var(--faint);text-decoration:line-through;font-weight:600;font-size:.84em;margin-inline-start:6px}
.psale{font-size:.68rem;font-weight:800;color:#fff;background:var(--red);padding-block:2.5px;padding-inline:8px;border-radius:999px;letter-spacing:.04em}
.pacts{display:flex;gap:6px;flex:none}
.icon-btn{inline-size:42px;block-size:42px;border-radius:12px;display:grid;place-items:center;color:var(--muted);
  border:1.5px solid var(--hairline);background:var(--card);transition:all .15s var(--ease);}
.icon-btn:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.icon-btn.danger:hover{color:var(--red);border-color:var(--red)}
.icon-btn svg{inline-size:17px;block-size:17px}
.icon-btn.confirming{background:var(--red);border-color:var(--red);color:#fff;inline-size:auto;padding-inline:12px;font-size:.78rem;font-weight:800}

.empty{text-align:center;padding:36px 18px;border:2px dashed var(--border);border-radius:var(--r-l);background:var(--well);margin-block-end:14px}
.empty-icon{inline-size:60px;block-size:60px;border-radius:17px;background:var(--card);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--gold);margin:0 auto 14px}
.empty-icon svg{inline-size:27px;block-size:27px}
.empty-t{font-weight:750;font-size:1.05rem;color:var(--ink)}
.empty-s{font-size:.88rem;color:var(--muted);margin-block-start:5px}
body.ar .empty-s{font-size:.93rem}

.btn-add{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:17px;border-radius:var(--r-l);
  border:2px dashed var(--border-2);background:var(--card);font-weight:750;font-size:1rem;color:var(--ink);
  transition:border-color .18s,background .18s,transform .14s var(--ease);}
.btn-add:hover{border-color:var(--ink);background:var(--well);transform:translateY(-1px)}
.btn-add:disabled{opacity:.5;transform:none;cursor:default}
.btn-add svg{inline-size:19px;block-size:19px}
.cap-note{text-align:center;font-size:.81rem;color:var(--faint);margin-block-start:10px}
body.ar .cap-note{font-size:.87rem}

/* ---------- overlay + sheet ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(16,16,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center;}
.overlay.open{display:flex}
@media (prefers-reduced-motion:no-preference){.overlay.open{animation:fadeIn .25s var(--ease)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:var(--maxw);background:var(--card);border-radius:24px 24px 0 0;box-shadow:var(--sh-3);
  max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;}
@media (prefers-reduced-motion:no-preference){.overlay.open .sheet{animation:sheetUp .4s var(--ease)}}
@keyframes sheetUp{from{transform:translateY(46px);opacity:.55}to{transform:none;opacity:1}}
@media (min-width:720px){
  .overlay{align-items:center;padding:24px}
  .sheet{border-radius:24px;max-height:88vh}
}
.sheet-grip{inline-size:44px;block-size:5px;border-radius:99px;background:var(--border);margin:11px auto 0;flex:none}
@media (min-width:720px){.sheet-grip{display:none}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px 12px;flex:none}
.sheet-title{font-family:var(--fd);font-weight:640;font-size:1.42rem;color:var(--ink)}
body.ar .sheet-title{font-weight:700}
.sheet-x{inline-size:39px;block-size:39px;border-radius:50%;display:grid;place-items:center;background:var(--well);border:1px solid var(--hairline);color:var(--muted)}
.sheet-x:hover{color:var(--red);border-color:var(--red)}
.sheet-x svg{inline-size:16px;block-size:16px}
.sheet-body{padding:6px 22px 22px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.sheet-foot{flex:none;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-block-start:1px solid var(--hairline);
  background:var(--card);display:flex;flex-direction:column;gap:10px;}

/* photo tiles */
.imgtiles{display:flex;gap:10px;flex-wrap:wrap}
.imgtile{position:relative;inline-size:82px;block-size:82px;border-radius:15px;overflow:hidden;border:1.5px solid var(--hairline);background:var(--well);flex:none}
.imgtile img{inline-size:100%;block-size:100%;object-fit:cover}
.imgtile .main-tag{position:absolute;inset-block-end:0;inset-inline:0;background:rgba(21,21,26,.85);color:var(--gold-2);font-size:.6rem;font-weight:800;
  text-align:center;padding-block:3.5px;letter-spacing:.08em;text-transform:uppercase;}
body.ar .imgtile .main-tag{letter-spacing:0;font-size:.68rem}
.imgtile .rm{position:absolute;inset-block-start:5px;inset-inline-end:5px;inline-size:23px;block-size:23px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--red);box-shadow:var(--sh-1);}
.imgtile .rm svg{inline-size:11px;block-size:11px}
.imgtile .mk{position:absolute;inset-block-end:5px;inset-inline:5px;background:rgba(255,255,255,.94);border-radius:8px;
  font-size:.62rem;font-weight:800;padding-block:3.5px;color:var(--ink);}
body.ar .imgtile .mk{font-size:.68rem}
.imgtile.loading::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 70%),var(--well);
  background-size:200% 100%,auto;}
@media (prefers-reduced-motion:no-preference){.imgtile.loading::after{animation:shimmer 1.1s linear infinite}}
@keyframes shimmer{to{background-position:-200% 0,0 0}}
.imgtile.loading .spin{position:absolute;inset:0;margin:auto;inline-size:22px;block-size:22px;z-index:1;
  border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--gold);}
@media (prefers-reduced-motion:no-preference){.imgtile.loading .spin{animation:rot .8s linear infinite}}
@keyframes rot{to{transform:rotate(360deg)}}
.imgadd{inline-size:82px;block-size:82px;border-radius:15px;border:2px dashed var(--border-2);background:var(--well);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink);position:relative;flex:none;
  transition:border-color .15s,background .15s;}
.imgadd:hover,.imgadd.drag{border-color:var(--gold);background:var(--gold-soft)}
.imgadd input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.imgadd svg{inline-size:21px;block-size:21px}
.imgadd span{font-size:.66rem;font-weight:800;letter-spacing:.04em}
body.ar .imgadd span{letter-spacing:0;font-size:.74rem}

.sale-reveal{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:750;color:var(--gold);padding-block:6px}
body.ar .sale-reveal{font-size:.95rem}
.sale-reveal svg{inline-size:15px;block-size:15px}
.sale-live{display:none;align-items:center;gap:8px;margin-block-start:9px;padding:11px 14px;border-radius:12px;background:var(--green-soft);
  font-size:.87rem;font-weight:650;color:var(--green);flex-wrap:wrap;}
.sale-live.show{display:flex}
.sale-live .old{text-decoration:line-through;color:var(--faint);font-weight:600}
.sale-live .pct{background:var(--red);color:#fff;font-size:.7rem;font-weight:800;padding-block:2.5px;padding-inline:8px;border-radius:999px}

/* ---------- variants editor ---------- */
.vwrap{margin-block-start:2px}
.vhint{font-size:.83rem;color:var(--muted);margin-block-end:12px;line-height:1.5}
body.ar .vhint{font-size:.88rem}
.vgroup{border:1.5px solid var(--hairline);border-radius:var(--r-l);background:var(--well);padding:14px;margin-block-end:11px}
.vg-head{display:flex;align-items:center;gap:9px;margin-block-end:10px}
.vg-head .input{flex:1;padding-block:11px;padding-inline:13px;font-size:.95rem;background:var(--card)}
.vg-rm{inline-size:38px;block-size:38px;flex:none;border-radius:11px;display:grid;place-items:center;color:var(--muted);
  border:1.5px solid var(--hairline);background:var(--card);}
.vg-rm:hover{color:var(--red);border-color:var(--red)}
.vg-rm svg{inline-size:14px;block-size:14px}
.vg-quick{display:flex;flex-wrap:wrap;gap:7px;margin-block-end:11px}
.vg-quick .chip{padding-block:7px;padding-inline:12px;font-size:.8rem;background:var(--card)}
body.ar .vg-quick .chip{font-size:.86rem}
.vtags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vtag{display:inline-flex;align-items:center;gap:7px;padding-block:8px;padding-inline:13px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:.86rem;font-weight:650;}
body.ar .vtag{font-size:.91rem}
.vtag .vt-price{font-size:.72rem;color:var(--gold-2);font-weight:800;font-variant-numeric:tabular-nums}
.vtag .vt-x{display:grid;place-items:center;inline-size:17px;block-size:17px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff}
.vtag .vt-x svg{inline-size:9px;block-size:9px}
.vtag .vt-x:hover{background:var(--red)}
.vtag-in{flex:1;min-inline-size:130px;border:1.5px dashed var(--border-2);border-radius:999px;background:var(--card);
  padding-block:8px;padding-inline:14px;font-size:.88rem;}
.vtag-in:focus{outline:none;border-color:var(--ink);border-style:solid}
.v-prices-reveal{display:inline-flex;align-items:center;gap:6px;margin-block-start:11px;font-size:.83rem;font-weight:750;color:var(--gold);padding-block:4px}
body.ar .v-prices-reveal{font-size:.88rem}
.v-prices-reveal svg{inline-size:13px;block-size:13px}
.vprices{margin-block-start:9px;display:flex;flex-direction:column;gap:8px}
.vp-row{display:flex;align-items:center;gap:10px}
.vp-row .vp-l{flex:1;min-width:0;font-size:.9rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-row .affix{flex:none;inline-size:150px}
.vp-row .input{padding-block:10px;padding-inline:12px;font-size:.92rem;background:var(--card)}
.vp-row .affix-suffix{padding-inline:9px;font-size:.76rem;inset-block:5px}
.v-add{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:750;color:var(--muted);
  border:1.5px dashed var(--border-2);border-radius:999px;background:var(--well);padding-block:9px;padding-inline:14px;
  transition:border-color .15s,color .15s;}
body.ar .v-add{font-size:.93rem}
.v-add:hover{border-color:var(--ink);color:var(--ink)}
.v-add svg{inline-size:13px;block-size:13px}

/* category manager */
.cat-row{display:flex;align-items:center;gap:10px;padding-block:10px;border-block-end:1px solid var(--hairline)}
.cat-row:last-child{border-block-end:none}
.cat-row .input{padding-block:11px;padding-inline:14px;font-size:.96rem}
.cat-row .cnt{font-size:.79rem;color:var(--faint);font-weight:700;white-space:nowrap;flex:none}
.cat-add{display:flex;gap:9px;margin-block-end:8px}
.cat-add .input{flex:1;padding-block:12px}
.btn-mini{flex:none;padding-inline:18px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:750;transition:transform .15s var(--ease),background .15s}
.btn-mini:hover{transform:translateY(-1px);background:var(--ink-2)}

/* toast */
.toast{position:fixed;inset-inline:0;bottom:calc(88px + env(safe-area-inset-bottom));z-index:120;display:flex;justify-content:center;pointer-events:none;padding-inline:16px}
.toast-in{display:none;align-items:center;gap:11px;background:var(--ink);color:#F2F0EA;border-radius:14px;
  padding-block:12px;padding-inline:18px;box-shadow:var(--sh-3);font-size:.92rem;font-weight:650;pointer-events:auto;max-width:100%;}
.toast-in.show{display:inline-flex}
@media (prefers-reduced-motion:no-preference){.toast-in.show{animation:toastUp .35s var(--ease)}}
@keyframes toastUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast-in svg{inline-size:16px;block-size:16px;flex:none;color:var(--gold-2)}
.toast-act{flex:none;font-weight:800;color:var(--gold-2);text-decoration:underline;text-underline-offset:3px;padding:2px 4px}

/* ---------- step 4 ---------- */
.toggle-row{display:flex;align-items:center;gap:15px;padding:17px;border:1.5px solid var(--hairline);border-radius:var(--r-l);
  background:var(--card);margin-block-end:12px;transition:border-color .2s,box-shadow .2s;}
.toggle-row.on{border-color:var(--ink);box-shadow:var(--sh-1)}
.toggle-ico{inline-size:46px;block-size:46px;border-radius:13px;flex:none;background:var(--well);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink)}
.toggle-ico svg{inline-size:22px;block-size:22px}
.toggle-row.on .toggle-ico{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.toggle-name{font-weight:750;font-size:1rem;color:var(--ink)}
.toggle-sub{font-size:.83rem;color:var(--muted);margin-block-start:2px}
body.ar .toggle-sub{font-size:.88rem}
.toggle-text{flex:1;min-width:0}
.switch{position:relative;inline-size:54px;block-size:32px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.switch .slider{position:absolute;inset:0;border-radius:999px;background:var(--border-2);transition:background .22s var(--ease)}
.switch .slider::before{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:26px;block-size:26px;
  border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .22s var(--ease);}
.switch input:checked + .slider{background:var(--ink)}
.switch input:checked + .slider::before{transform:translateX(22px)}
[dir="rtl"] .switch input:checked + .slider::before{transform:translateX(-22px)}
.switch input:focus-visible + .slider{box-shadow:0 0 0 4px rgba(21,21,26,.16)}

.zone-row{display:flex;gap:9px;align-items:center;margin-block-end:10px}
.zone-row .z-city{flex:1.25;min-width:0}
.zone-row .z-cost{flex:1;position:relative;min-inline-size:104px}
.zone-row .z-cost .input{padding-inline-end:56px}
.zone-row .z-suffix{position:absolute;inset-inline-end:6px;inset-block:6px;display:flex;align-items:center;padding-inline:9px;
  background:var(--well);border:1px solid var(--hairline);border-radius:9px;font-size:.76rem;color:var(--muted);font-weight:700;pointer-events:none;}
.zone-row .z-time{flex:1;min-inline-size:108px}
.zone-row .input{padding-block:13px;padding-inline:13px;font-size:.94rem}
.zone-row .z-select{font-size:.88rem;font-weight:650}
.zone-row .input.bad{border-color:var(--red)}
.zone-rm{inline-size:42px;block-size:42px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--muted);
  border:1.5px solid var(--hairline);background:var(--card);}
.zone-rm:hover{color:var(--red);border-color:var(--red)}
.zone-rm svg{inline-size:15px;block-size:15px}
.free-tag{font-size:.7rem;font-weight:800;color:var(--green)}
.zone-row.pinned{padding:11px;border-radius:var(--r-l);background:var(--gold-soft);border:1.5px solid var(--gold-line);margin-block-end:16px}
.zone-row.pinned .z-fixed{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:750;color:var(--ink);padding-inline:3px}
.zone-row.pinned .z-fixed svg{inline-size:16px;block-size:16px;color:var(--gold);flex:none}
.zone-row.pinned .input{background:var(--card)}
.zone-row.pinned[hidden]{display:none}
.cities-head{margin-block:4px 10px}
.cities-head .ch-t{display:block;font-weight:750;font-size:.95rem;color:var(--ink)}
.cities-head .ch-s{display:block;font-size:.83rem;color:var(--muted);margin-block-start:1px}
body.ar .cities-head .ch-s{font-size:.88rem}
@media (max-width:430px){
  .zone-row{flex-wrap:wrap}
  .zone-row .z-city{flex:1 1 100%}
  .zone-row.pinned .z-city{flex:1 1 100%}
  .zone-row .z-cost{flex:1 1 0}
  .zone-row .z-time{flex:1.15 1 0;min-inline-size:0}
}

.free-wrap{margin-block-start:12px;max-inline-size:300px}

.ret-custom{margin-block-start:12px}

/* ---------- step 5 ---------- */
.explain{display:flex;gap:14px;padding:17px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--hairline);
  border-inline-start:3px solid var(--gold);margin-block-end:13px;box-shadow:var(--sh-1);}
.explain .ex-ico{inline-size:42px;block-size:42px;border-radius:12px;flex:none;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold)}
.explain .ex-ico svg{inline-size:20px;block-size:20px}
.explain .ex-t{font-weight:750;font-size:.97rem;color:var(--ink)}
.explain .ex-s{font-size:.88rem;color:var(--muted);margin-block-start:3px;line-height:1.55}
body.ar .explain .ex-s{font-size:.93rem}
.explain .ex-s b{color:var(--ink)}
.urlbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r);background:var(--ink);color:#C9C6BD;
  font-family:var(--fm);font-size:.98rem;margin-block:20px 24px;box-shadow:var(--sh-ink);overflow:hidden;}
.urlbar svg{inline-size:15px;block-size:15px;flex:none;color:var(--gold-2)}
.urlbar .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;unicode-bidi:isolate}
.urlbar .u b{color:#fff;font-weight:700}
.rank{display:flex;align-items:center;gap:11px;direction:ltr}
.rank .rk{inline-size:36px;block-size:36px;border-radius:11px;flex:none;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:800;font-family:var(--fm);font-size:.86rem;}
.rank .affix{flex:1}
.rank .affix .input{direction:ltr;text-align:left;padding-left:16px}
.suggest{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:14px;align-items:center}
.suggest .sg-l{font-size:.81rem;font-weight:700;color:var(--faint)}
body.ar .suggest .sg-l{font-size:.87rem}
.sg{font-family:var(--fm);font-size:.83rem;font-weight:600;color:var(--ink);background:var(--gold-soft);
  border:1.5px dashed var(--gold-line);border-radius:999px;padding-block:7px;padding-inline:13px;transition:all .15s var(--ease);direction:ltr;}
.sg:hover{border-color:var(--gold);transform:translateY(-1px)}

/* ---------- step 6 ---------- */
.review-group{border:1px solid var(--hairline);border-radius:var(--r-l);background:var(--card);margin-block-end:13px;overflow:hidden;box-shadow:var(--sh-1)}
.rg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;border-block-end:1px solid var(--hairline);background:var(--well)}
.rg-title{display:flex;align-items:center;gap:10px;font-weight:750;color:var(--ink);font-size:.99rem}
.rg-title svg{inline-size:19px;block-size:19px;color:var(--gold);flex:none}
.rg-edit{display:inline-flex;align-items:center;gap:6px;font-size:.83rem;font-weight:750;color:var(--ink);
  padding-block:7px;padding-inline:13px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);
  transition:border-color .15s,transform .14s var(--ease);}
body.ar .rg-edit{font-size:.88rem}
.rg-edit:hover{border-color:var(--ink);transform:translateY(-1px)}
.rg-edit svg{inline-size:13px;block-size:13px}
.rg-body{padding:15px 17px;display:flex;flex-direction:column;gap:11px}
.rev-line{display:flex;gap:12px;align-items:baseline}
.rev-k{flex:none;inline-size:110px;font-size:.76rem;color:var(--faint);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
body.ar .rev-k{letter-spacing:0;font-size:.82rem}
.rev-v{flex:1;font-size:.96rem;min-width:0;overflow-wrap:anywhere}
.rev-v.muted{color:var(--faint)}
.rev-logo{inline-size:46px;block-size:46px;border-radius:12px;object-fit:cover;border:1px solid var(--hairline);background:var(--well)}
.rev-dot{inline-size:18px;block-size:18px;border-radius:6px;display:inline-block;vertical-align:-3.5px;margin-inline-end:8px;border:1px solid rgba(0,0,0,.08)}
.rev-pill{display:inline-flex;align-items:center;gap:6px;padding-block:5px;padding-inline:12px;border-radius:999px;font-size:.8rem;font-weight:750}
body.ar .rev-pill{font-size:.86rem}
.rev-pill.yes{background:var(--green-soft);color:var(--green)}
.rev-pill.no{background:var(--well);color:var(--faint);border:1px solid var(--hairline)}
.rev-chips{display:flex;flex-wrap:wrap;gap:7px}
.rev-chip{padding-block:5px;padding-inline:12px;border-radius:999px;background:var(--well);border:1px solid var(--hairline);font-size:.81rem;font-weight:650}
body.ar .rev-chip{font-size:.87rem}
.rev-thumbs{display:flex;gap:7px;flex-wrap:wrap}
.rev-thumbs .th{inline-size:46px;block-size:46px;border-radius:11px;overflow:hidden;background:var(--well);border:1px solid var(--hairline);
  display:grid;place-items:center;color:var(--faint);font-size:.74rem;font-weight:800;}
.rev-thumbs .th img{inline-size:100%;block-size:100%;object-fit:cover}
.rev-prod{display:flex;align-items:center;gap:11px;padding-block:9px;border-block-end:1px solid var(--hairline)}
.rev-prod:last-child{border-block-end:none;padding-block-end:0}
.rev-prod .n{flex:1;min-width:0;font-weight:650;font-size:.93rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-prod .p{font-weight:750;color:var(--ink);font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.rev-more{font-size:.85rem;color:var(--muted);font-weight:650;padding-block-start:4px}

.whatnext{margin-block:24px 4px;padding:20px;border-radius:var(--r-l);color:#EDEBE3;
  background:linear-gradient(160deg,#20202A,#131318);box-shadow:var(--sh-ink);}
.wn-t{font-weight:750;color:#FBFAF7;margin-block-end:14px;font-size:1.02rem}
.wn-item{display:flex;gap:13px;align-items:flex-start;padding-block:8px}
.wn-item .n{inline-size:28px;block-size:28px;border-radius:9px;flex:none;background:var(--gold-2);color:var(--ink);display:grid;place-items:center;font-weight:800;font-family:var(--fm);font-size:.8rem}
.wn-item .t{font-size:.92rem;padding-block-start:3px;color:#C9C6BD}
body.ar .wn-item .t{font-size:.96rem}
.wn-item .t b{font-weight:750;color:#FBFAF7}

/* ---------- success ---------- */
.success{display:none;text-align:center;padding-block:14px 6px}
.success.show{display:block}
@media (prefers-reduced-motion:no-preference){.success.show{animation:stepIn .6s var(--ease)}}
.check-wrap{position:relative;inline-size:104px;block-size:104px;margin:6px auto 24px}
.check-ring{position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,var(--ink-2),var(--ink));box-shadow:var(--sh-ink);
  border:2px solid var(--gold-2);}
.check-ring svg{position:absolute;inset:0;margin:auto;inline-size:48px;block-size:48px;color:var(--gold-2)}
@media (prefers-reduced-motion:no-preference){
  .check-ring{animation:ringPop .55s var(--ease) both}
  .check-ring svg path{stroke-dasharray:48;stroke-dashoffset:48;animation:draw .5s .35s var(--ease) forwards}
  .check-halo{position:absolute;inset:-11px;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:halo 1s .3s var(--ease)}
}
@keyframes ringPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes halo{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.success-badge{display:inline-block;font-size:.73rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-block-end:10px}
body.ar .success-badge{letter-spacing:.05em;font-size:.83rem}
.success-title{font-family:var(--fd);font-weight:640;font-size:clamp(1.9rem,7.2vw,2.5rem);line-height:1.1;color:var(--ink)}
body.ar .success-title{font-weight:700;line-height:1.3}
.success-body{margin:13px auto 0;color:var(--muted);font-size:1.04rem;max-inline-size:44ch}
.ref-card{display:inline-flex;flex-direction:column;align-items:center;gap:3px;margin-block:24px 6px;padding:14px 28px;
  border-radius:var(--r-l);background:var(--well);border:1px dashed var(--border-2);}
.ref-label{font-size:.71rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
body.ar .ref-label{letter-spacing:.03em;font-size:.8rem}
.ref-code{font-family:var(--fm);font-size:1.26rem;font-weight:600;color:var(--ink);letter-spacing:.06em;direction:ltr}
.pay-placeholder{margin:22px auto 0;max-inline-size:430px;padding:18px;border:2px dashed var(--gold-line);border-radius:var(--r-l);background:var(--gold-soft);text-align:start}
.pay-placeholder .pp-t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
body.ar .pay-placeholder .pp-t{letter-spacing:.02em;font-size:.86rem}
.pay-placeholder .pp-t svg{inline-size:15px;block-size:15px}
.pay-placeholder .pp-s{font-size:.89rem;color:#6E5F42;margin-block-start:6px}
.btn-again{margin-block-start:26px;display:inline-flex;align-items:center;gap:9px;padding-block:14px;padding-inline:24px;border-radius:var(--r);
  border:1.5px solid var(--border);background:var(--card);font-weight:750;transition:border-color .15s,transform .14s var(--ease);}
.btn-again:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-again svg{inline-size:16px;block-size:16px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;inline-size:9px;block-size:14px;border-radius:2px;opacity:0;will-change:transform,opacity}
@media (prefers-reduced-motion:no-preference){.confetti i{animation:fall var(--d,3s) var(--delay,0s) var(--ease) forwards}}
@keyframes fall{0%{opacity:0;transform:translateY(-12vh) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(108vh) rotate(720deg)}}

.foot{width:100%;text-align:center;padding-block:22px calc(16px + env(safe-area-inset-bottom));color:var(--faint);font-size:.82rem}
body.ar .foot{font-size:.88rem}
.foot .lock{display:inline-flex;align-items:center;gap:6px}
.foot svg{inline-size:13px;block-size:13px;opacity:.75}
.foot .help-link{display:inline-flex;margin-block-start:10px}

@media (max-width:480px){
  .rev-line{flex-direction:column;gap:3px}
  .rev-k{inline-size:auto}
  .swatch,.swatch-custom{inline-size:43px;block-size:43px}
  .font-sample{font-size:1.35rem}
}