/* Siya Jewels — shared tokens
   Layout idea: "velvet tray". Blush porcelain ground like her display busts,
   plum ink, antique-gold hairlines, and photos framed in temple-arch niches.
   Single light look by choice (a jewellery counter), so colours are set explicitly. */
:root{
  --ground:#fbf5f2;      /* blush porcelain page */
  --velvet:#f4e6e3;      /* velvet-pink surface */
  --velvet-2:#ecd8d4;
  --card:#ffffff;
  --ink:#2b1830;         /* plum ink */
  --ink-2:#5f4d62;
  --muted:#8f7f90;
  --line:#ecdfdc;
  --line-2:#dfcdc9;
  --rose:#c2335f;        /* brand rose, matched to her logo (calls to action) */
  --rose-deep:#9c2449;
  --rose-wash:#fbe9ee;
  --gold:#a07a35;        /* antique gold */
  --gold-soft:#d8bf8a;
  --gold-wash:#f8f0df;
  --leaf:#2e6b4e;        /* emerald, like her green beads: success */
  --leaf-wash:#e5f2ea;
  --amber:#9a5f00;
  --amber-wash:#fdf1dc;
  --danger:#b33434;
  --danger-wash:#fbe9e9;
  --scrim:rgba(43,24,48,.45);

  --display:"Bodoni Moda","Bodoni 72",Didot,"Iowan Old Style",Georgia,serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --r:18px; --r-sm:12px; --r-xs:8px;
  --shadow:0 1px 2px rgba(60,22,48,.05),0 10px 30px -14px rgba(60,22,48,.18);
  --shadow-lg:0 -10px 40px -12px rgba(43,24,48,.28);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-appearance:none;appearance:none}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;
  border-radius:999px;border:1px solid transparent;font-weight:600;font-size:15.5px;letter-spacing:.01em;
  text-decoration:none;transition:transform .12s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--rose);color:#fff;box-shadow:0 8px 20px -10px rgba(194,51,95,.7)}
.btn-primary:hover{background:var(--rose-deep)}
.btn-outline{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink-2);min-height:44px}
.btn-leaf{background:var(--leaf);color:#fff}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none;box-shadow:none}
.btn .spin{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* form fields */
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.field .hint{font-size:12.5px;color:var(--muted)}
.input{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--card);font-size:16px;transition:border-color .15s, box-shadow .15s}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}
.input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-wash)}
.input.bad{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-wash)}
.err{font-size:12.5px;color:var(--danger);font-weight:500}
.prefix{display:flex;align-items:stretch}
.prefix span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line-2);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--velvet);font-weight:600;color:var(--ink-2)}
.prefix .input{border-radius:0 var(--r-sm) var(--r-sm) 0}

/* bottom sheet + toast */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:60;opacity:0;transition:opacity .25s ease}
.scrim.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--ground);border-radius:24px 24px 0 0;
  box-shadow:var(--shadow-lg);max-height:88dvh;display:flex;flex-direction:column;transform:translateY(100%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);max-width:640px;margin:0 auto}
.sheet.on{transform:none}
.sheet-grab{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:10px auto 2px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px var(--gr) 8px var(--gl)}
.sheet-head h2{margin:0;font:600 22px/1.2 var(--display)}
.sheet-body{overflow:auto;padding:4px var(--gr) 16px var(--gl);-webkit-overflow-scrolling:touch}
.sheet-foot{padding:12px var(--gr) calc(12px + var(--sab)) var(--gl);border-top:1px solid var(--line);background:var(--ground)}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:inline-grid;place-items:center;color:var(--ink);flex:none}
.icon-btn svg{width:20px;height:20px}
.toast{position:fixed;left:50%;bottom:calc(92px + var(--sab));transform:translate(-50%,20px);z-index:80;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:500;
  opacity:0;transition:all .25s ease;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* gold ornament: a hairline with a small lozenge, like a jeweller's tag string */
.orn{display:flex;align-items:center;gap:10px;color:var(--gold)}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-soft))}
.orn::after{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.orn i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold);display:block}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}