/* component styles sit in the components layer so Tailwind utilities (hidden, md:hidden, ...) can override them */
@layer components{

/* Layout concept: one steady dark ground for the whole page (no colour changes on scroll).
   The hero is a real 3D gold ring. On scroll it turns, shrinks, flies up and stays in the header as the logo.
   Type: One typeface everywhere: Estedad (Persian + Latin). Gold on warm graphite. */
:root{
  --bg:15 13 12; --bg2:23 20 18; --surface:30 26 23;
  --ink:245 239 228; --muted:171 161 146; --line:255 255 255;
  --gold:201 161 92; --goldink:224 188 124; --g1:243 218 160; --g2:174 132 66;
  --up:74 222 128; --down:248 113 113;
  color-scheme:dark;
}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
#top{background:radial-gradient(70% 55% at 50% 100%,rgb(var(--gold)/.06),transparent 70%)}
body{margin:0;background:rgb(var(--bg));color:rgb(var(--ink));font-family:Estedad,system-ui,sans-serif;font-size:16px;line-height:1.9}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:rgb(15 13 12)}
:focus-visible{outline:2px solid rgb(var(--gold));outline-offset:3px;border-radius:4px}

.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.gold-text{background:linear-gradient(100deg,rgb(var(--g2)),rgb(var(--g1)) 50%,rgb(var(--g2)));-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-size:clamp(2.1rem,4.8vw,3.7rem);line-height:1.45;text-wrap:balance}
.eyebrow{font-family:Estedad,system-ui,sans-serif;font-weight:500;font-size:1rem;letter-spacing:.16em;color:rgb(var(--goldink));display:flex;align-items:center;gap:.9rem}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:rgb(var(--goldink)/.7)}
.panel{background:rgb(var(--surface));border:1px solid rgb(var(--line)/.1);border-radius:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.8rem 1.8rem;font-weight:700;font-size:.95rem;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,#EBCF9A,#C39A55);color:#14100C;box-shadow:0 12px 32px -14px rgba(201,161,92,.6)}
.btn-line{border:1px solid rgb(var(--line)/.3)}
.btn-line:hover{border-color:rgb(var(--gold));background:rgb(var(--gold)/.1)}
.chip{border:1px solid rgb(var(--line)/.2);border-radius:999px;padding:.05rem .75rem;color:rgb(var(--muted))}
.field{width:100%;border:1px solid rgb(var(--line)/.2);background:rgb(var(--bg));border-radius:.9rem;padding:.65rem 1rem;font:inherit;color:inherit;font-variant-numeric:tabular-nums}
.field:focus{border-color:rgb(var(--gold));outline:none;box-shadow:0 0 0 3px rgb(var(--gold)/.25)}
.gold-light{background:linear-gradient(100deg,#F3DAA0,#C9A15C);-webkit-background-clip:text;background-clip:text;color:transparent}

/* header */
.hdr{background:rgba(15,13,12,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#F4EFE5;border-bottom:1px solid rgba(201,161,92,.22)}
.hdr a:hover{color:#E8CD9A}

/* the 3D ring */
#gem{position:fixed;left:0;top:0;width:var(--gs,420px);height:var(--gs,420px);z-index:70;pointer-events:none;transform-origin:50% 50%;will-change:transform;visibility:hidden}
#gem.ready{visibility:visible}
#gem canvas{position:relative;display:block;width:100%;height:100%}
.gem-glow{position:absolute;inset:-22%;background:radial-gradient(circle,rgba(255,236,190,.16),rgba(216,185,106,.08) 40%,transparent 68%);opacity:var(--ge,1)}
.cue{display:flex;align-items:center;gap:.7rem;font-size:.8rem;color:rgb(var(--muted))}
.cue i{display:block;width:1px;height:2.2rem;background:linear-gradient(rgb(var(--gold)),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* reveal: readable at rest, drifts into place */
.rv{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv:not(.in){opacity:.35;transform:translateY(26px)}

/* rates */
.chg{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;padding:0 .5rem;border-radius:999px;font-variant-numeric:tabular-nums;line-height:1.7}
.chg.up{color:rgb(var(--up));background:rgb(var(--up)/.14)}
.chg.down{color:rgb(var(--down));background:rgb(var(--down)/.14)}
.chg.up::before{content:"▲";font-size:.6em}
.chg.down::before{content:"▼";font-size:.6em}
@keyframes fl-up{from{color:rgb(var(--up))}}
@keyframes fl-dn{from{color:rgb(var(--down))}}
.flash-up{animation:fl-up 1.2s ease-out}
.flash-dn{animation:fl-dn 1.2s ease-out}
.spark .line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark .area{fill:currentColor;fill-opacity:.12}
.spark.up{color:rgb(var(--up))} .spark.down{color:rgb(var(--down))}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.in .spark{animation:wipe 1.3s ease-out both}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:rgb(var(--gold));flex:none}
.dot.live{background:rgb(var(--up));animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--up)/.6)}70%{box-shadow:0 0 0 .45rem rgb(var(--up)/0)}100%{box-shadow:0 0 0 0 rgb(var(--up)/0)}}
.calc{background:rgb(var(--surface));border:1px solid rgb(var(--gold)/.35);border-radius:1.5rem}


/* mobile app-style bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);padding:.35rem max(.5rem,env(safe-area-inset-right,0px)) calc(.35rem + env(safe-area-inset-bottom,0px)) max(.5rem,env(safe-area-inset-left,0px));background:rgba(15,13,12,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(201,161,92,.22)}
.tab{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.4rem .1rem;border-radius:.9rem;font-size:.68rem;line-height:1.3;color:rgb(var(--muted));transition:color .2s ease,background-color .2s ease;-webkit-tap-highlight-color:transparent}
.tab.on{color:rgb(var(--goldink));background:rgb(var(--gold)/.12)}
.tab:active{background:rgb(var(--gold)/.18)}
@media (max-width:767px){body{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom,0px))}html{scroll-padding-bottom:5rem}}

/* collections */
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.92) contrast(1.03)}
.arch:has(.ph)>svg{display:none}
.arch:has(.ph)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgb(var(--bg)/.55));pointer-events:none}
.arch{border-radius:11.5rem 11.5rem 1rem 1rem}

/* workshop story */
.layer{opacity:0;transform:scale(.94);transform-box:view-box;transform-origin:50% 50%;transition:opacity .6s ease,transform .6s ease}
.visual[data-active="0"] [data-l="0"],.visual[data-active="1"] [data-l="1"],.visual[data-active="2"] [data-l="2"],.visual[data-active="3"] [data-l="3"]{opacity:1;transform:none}
.step{opacity:.5;transition:opacity .5s ease}
.step.on{opacity:1}
.vd{width:.45rem;height:.45rem;border-radius:999px;background:rgb(var(--line)/.3);transition:width .4s ease,background-color .4s ease}
.vd.on{width:1.6rem;background:rgb(var(--gold))}
@keyframes tw2{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.twinkle2{transform-box:fill-box;transform-origin:center;animation:tw2 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,body *{transition:none!important;animation:none!important}
  .rv{opacity:1!important;transform:none!important}
}

}
/* heading type: must beat font-weight / font-size utilities on the same elements */
#app h1,#app h2,#app h3{font-family:Estedad,system-ui,sans-serif;font-weight:700;letter-spacing:0}
#app h1{line-height:1.5}
#app h3{font-size:1.45rem;line-height:1.6}
/* collection card: the whole card is one link */
@layer components{
  .card{display:block;color:inherit}
  .card .arch{transition:border-color .3s ease}
  .card:hover .arch{border-color:rgb(var(--gold)/.5)}
  
  
}
#app .card h3{font-size:1.2rem;line-height:1.6}

/* header icon buttons, badge, toast, forms, option cards */
@layer components{
  .ibtn{position:relative;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:999px;color:inherit;transition:background-color .2s}
  .ibtn:hover{background:rgb(var(--gold)/.14)}
  .badge{position:absolute;top:-.05rem;inset-inline-start:-.1rem;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:999px;background:rgb(var(--goldink));color:#14100C;font-size:.68rem;font-weight:800;line-height:1.15rem;text-align:center;font-style:normal}
  .udot{position:absolute;top:.45rem;inset-inline-end:.45rem;width:.5rem;height:.5rem;border-radius:50%;background:rgb(var(--up));box-shadow:0 0 0 2px rgb(var(--bg))}
  .ti{position:relative;display:grid;place-items:center}
  .ti .badge{top:-.3rem;inset-inline-start:-.5rem}
  #toast{position:fixed;z-index:80;left:50%;bottom:calc(5.6rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,1rem);display:flex;align-items:center;gap:1rem;max-width:calc(100vw - 2rem);padding:.7rem 1.1rem;border-radius:999px;background:rgb(var(--surface));border:1px solid rgb(var(--gold)/.5);box-shadow:0 12px 40px -12px #000;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
  #toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  #toast a{color:rgb(var(--goldink));font-weight:700;white-space:nowrap}
  @media(min-width:768px){#toast{bottom:2rem}}
  .opt{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid rgb(var(--line)/.18);border-radius:1rem;cursor:pointer;transition:border-color .2s,background-color .2s}
  .opt:has(input:checked){border-color:rgb(var(--gold));background:rgb(var(--gold)/.08)}
  .opt input{margin-top:.35rem;accent-color:#C9A15C}
  .lbl{display:block;margin-bottom:.4rem;font-size:.85rem;color:rgb(var(--muted))}
  .err{display:none;margin-top:.3rem;font-size:.8rem;color:rgb(var(--down))}
  .bad+.err,.bad ~ .err{display:block}
  .field.bad{border-color:rgb(var(--down))}
  .qty{display:inline-flex;align-items:center;border:1px solid rgb(var(--line)/.2);border-radius:999px}
  .qty button{width:2.2rem;height:2.2rem;font-size:1.1rem;line-height:1;color:rgb(var(--ink))}
  .qty button:hover{color:rgb(var(--goldink))}
  .qty output{min-width:1.6rem;text-align:center;font-variant-numeric:tabular-nums}
  .otp{display:flex;gap:.6rem;justify-content:center;direction:ltr}
  .otp input{width:3.2rem;height:3.6rem;text-align:center;font-size:1.5rem;border:1px solid rgb(var(--line)/.25);border-radius:.9rem;background:rgb(var(--bg));color:inherit}
  .otp input:focus{border-color:rgb(var(--gold));outline:none;box-shadow:0 0 0 3px rgb(var(--gold)/.25)}
  .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
}
.tab .ti{display:grid}

/* photo frames: one ratio for every product picture. Change --img-ratio (e.g. 4/3 for wide photos, 4/5 for tall ones). */
:root{--img-ratio:1/1}
.frame{aspect-ratio:var(--img-ratio);border-radius:1.1rem}
.card:hover .frame{border-color:rgb(var(--gold)/.5)}
.ph{object-fit:cover;object-position:50% 50%}
.snap-row{scrollbar-width:none;scroll-padding-inline:1rem}.snap-row::-webkit-scrollbar{display:none}

/* shared page components (catalog cards, filter chips, photo frames, gallery, FAQ) */
@layer components{
  .fchip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgb(var(--line)/.2);border-radius:999px;padding:.35rem 1rem;font-size:.9rem;color:rgb(var(--muted));transition:color .2s,background-color .2s,border-color .2s;white-space:nowrap}
  .fchip:hover{border-color:rgb(var(--gold)/.6);color:rgb(var(--ink))}
  .fchip.on{background:rgb(var(--gold)/.14);border-color:rgb(var(--gold));color:rgb(var(--goldink))}
  .pcard{display:flex;flex-direction:column;border:1px solid rgb(var(--line)/.1);border-radius:1.25rem;background:rgb(var(--surface));overflow:hidden;transition:border-color .3s ease,transform .3s ease}
  .pcard:hover{border-color:rgb(var(--gold)/.45);transform:translateY(-3px)}
  .pimg{position:relative;display:grid;place-items:center;aspect-ratio:var(--img-ratio,1/1);background:radial-gradient(circle at 50% 38%,rgb(var(--g1)/.2),transparent 64%),rgb(var(--bg2));overflow:hidden}
  .pimg:has(.ph)>svg{display:none}
  .toc-a{flex:none;white-space:nowrap;border:1px solid rgb(var(--line)/.2);border-radius:999px;padding:.3rem 1rem;font-size:.9rem;color:rgb(var(--muted));transition:color .2s,background-color .2s,border-color .2s}
  .toc-a:hover{color:rgb(var(--ink));border-color:rgb(var(--gold)/.6)}
  .toc-a.on{background:rgb(var(--gold)/.14);border-color:rgb(var(--gold));color:rgb(var(--goldink))}
  @media(min-width:1024px){.toc-a{border:0;border-radius:.6rem;padding:.4rem .8rem}.toc-a.on{background:rgb(var(--gold)/.12)}}
  .faq[open]{border-color:rgb(var(--gold)/.45)}
  .faq[open] .faq-i{transform:rotate(180deg)}
  .faq summary{list-style:none}.faq summary::-webkit-details-marker{display:none}
}
.gal-main{position:relative;aspect-ratio:var(--img-ratio);border-radius:1.5rem;overflow:hidden;border:1px solid rgb(var(--line)/.1);background:radial-gradient(circle at 50% 38%,rgb(var(--g1)/.2),transparent 64%),rgb(var(--bg2));display:grid;place-items:center}
.gal-main:has(.ph)>svg{display:none}
.thumb{position:relative;width:4.5rem;aspect-ratio:1/1;border-radius:.9rem;overflow:hidden;border:1px solid rgb(var(--line)/.15);background:rgb(var(--bg2));opacity:.7;transition:opacity .2s,border-color .2s}
.thumb.on{opacity:1;border-color:rgb(var(--gold))}
.scroll-x{overflow-x:auto;scrollbar-width:none}.scroll-x::-webkit-scrollbar{display:none}

/* hero backdrop: a golden glow and halo behind the ring, and a faceted rock ridge under it (assets/hero-rocks.svg) */
@layer components{
.hero-halo{position:absolute;inset:-2% -6%;pointer-events:none;z-index:0;display:grid;place-items:center;
  background:radial-gradient(48% 48% at 50% 46%,rgb(var(--gold)/.26),rgb(var(--gold)/.07) 55%,transparent 72%)}
.hero-halo svg{width:92%;height:92%;opacity:.9}
.hero-rocks{position:absolute;left:50%;bottom:-2.5rem;width:100vw;aspect-ratio:1600/360;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:url(../hero-rocks.svg) 50% 100%/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 38%);mask-image:linear-gradient(to top,transparent 0,#000 38%)}
@media(max-width:1023px){.hero-rocks{bottom:-.5rem;aspect-ratio:auto;height:clamp(6rem,30vw,9rem);background-size:cover;background-position:0 100%}}
}

/* brand lockup in the header: «زرنگار | ZARNEGAR» on every page, mobile and desktop.
   The divider is a thin gold line (not a "|" character) so it stays crisp and centred at any size. */
.hdr .brand{gap:.6rem;min-width:0}
.brand-sep{flex:none;width:1px;height:1.15rem;background:linear-gradient(transparent,rgb(var(--gold)/.85),transparent)}
.brand-en{flex:none;font-weight:600;font-size:.68rem;letter-spacing:.24em;line-height:1;color:rgb(var(--goldink));padding-top:.12rem;white-space:nowrap}
@media(min-width:768px){.hdr .brand{gap:.8rem}.brand-en{font-size:.78rem;letter-spacing:.32em}.brand-sep{height:1.4rem}}
@media(max-width:340px){.brand-en{font-size:.6rem;letter-spacing:.16em}.hdr .brand{gap:.45rem}}

/* Estedad's tabular figures are very wide (gaps around thousand separators), so use its normal proportional figures everywhere */
html *,html ::before,html ::after{font-variant-numeric:normal}