/* UC Store. Light retail look (owner, 2026-09-27: the dark neon theme made the blue art blend in and looked
   machine-made). One solid accent, neutral surfaces, no gradient text, glows or glass. */
:root{
  --bg:#f5f4f0;--surface:#fff;--sunken:#efede7;--text:#16161a;--muted:#66666e;--line:#e3e0d8;
  --accent:#e0560a;--accent-ink:#fff;--accent-soft:#fff1e8;--ok:#127a4a;--bad:#b93a0b;--radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:inherit}
h1,h2,h3{letter-spacing:-.01em}
.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}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--text);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}

/* header */
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(20px,5vw);position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;text-decoration:none}
.brand-mark{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800}
.nav{display:flex;gap:28px}
.nav a{color:var(--muted);text-decoration:none;font-size:15px}
.nav a:hover{color:var(--text)}
.cart-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}
.cart-btn span{display:inline-block;min-width:22px;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:13px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px;padding:56px max(20px,7vw) 40px;max-width:1400px;margin:0 auto}
.eyebrow{color:var(--accent);font-size:13px;font-weight:700}
.hero h1{font-size:clamp(36px,5vw,58px);line-height:1.05;margin:10px 0 16px;font-weight:800}
.hero h1 span{color:var(--accent)}
.hero p{font-size:18px;color:var(--muted);max-width:560px;margin:0}
.id-card{background:var(--surface);border:1px solid var(--line);padding:18px;border-radius:var(--radius);margin-top:24px;max-width:560px}
.id-card label,dialog label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.id-row{display:flex;gap:10px}
.id-row input,.search,dialog input:not([type=checkbox]),.promo-row input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:12px 14px;font:inherit}
.id-row input:focus,.search:focus,dialog input:focus,.promo-row input:focus{border-color:var(--accent);outline:none}
.id-card small{display:block;margin-top:8px;color:var(--muted);font-size:13px}
.field-status{min-height:18px;margin:6px 0 0;color:var(--bad);font-size:13px}
.hero-badges{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.hero-badges li{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px;color:var(--muted);font-size:13px}
.hero-art{display:grid;place-items:center;min-height:360px;background:var(--sunken);border-radius:20px;padding:24px}
.hero-art img{height:auto;width:min(100%,500px)}
.fallback-orb{width:min(280px,60vw);aspect-ratio:1;border-radius:50%;background:var(--accent-soft)}
.hero-art img:not([hidden])+.fallback-orb{display:none}

/* buttons */
.primary,.id-row button{border:0;background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.primary:hover,.id-row button:hover,.add:hover{filter:brightness(.94)}
.primary:disabled{opacity:.5;cursor:default}
.wide{width:100%}

/* sections */
.section{padding:56px max(20px,7vw);max-width:1400px;margin:0 auto}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
.section h2{font-size:clamp(26px,3vw,36px);margin:4px 0 0;font-weight:800}
.search{max-width:280px}
.tabs{display:flex;gap:8px;overflow:auto;padding-bottom:4px;margin-bottom:16px}
.tab{white-space:nowrap;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:99px;padding:8px 16px;font:inherit;font-size:15px;cursor:pointer}
.tab.active{background:var(--text);border-color:var(--text);color:#fff}
.result-count{color:var(--muted);font-size:14px;margin:0 0 14px}

/* products */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.product:hover{border-color:#cfcabe}
.product.out{opacity:.6}
.product-art{height:190px;background:var(--sunken);display:grid;place-items:center;overflow:hidden}
.product-art img{width:160px;height:160px;object-fit:contain}
.crystal{width:64px;height:80px;background:#d9d4c8;clip-path:polygon(50% 0,90% 26%,76% 82%,50% 100%,24% 82%,10% 26%)}
.product-body{padding:16px;display:flex;flex-direction:column;flex:1}
.product-top{display:flex;gap:10px;justify-content:space-between;align-items:start}
.product h3{margin:0;font-size:18px}
.badge{font-size:12px;color:var(--bad);background:var(--accent-soft);border-radius:99px;padding:3px 9px;white-space:nowrap}
.product p{color:var(--muted);font-size:14px;margin:6px 0 0;flex:1}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.price{font-size:20px;font-weight:800}
.old{font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:6px}
.add{border:0;background:var(--accent);color:var(--accent-ink);padding:9px 14px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.soldout{font-size:13px;color:var(--bad)}
.empty{grid-column:1/-1;padding:48px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}

/* how / benefits / faq */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps article,.benefits article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.steps b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--bad);font-size:14px}
.steps h3,.benefits h3{margin:14px 0 6px;font-size:18px}
.steps p,.benefits p,.faq p{color:var(--muted);margin:0}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benefit-icon{width:72px;height:72px;object-fit:contain;display:block;background:var(--sunken);border-radius:14px;padding:6px}
.faq{max-width:900px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin-top:10px}
footer{padding:28px max(20px,7vw) 48px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:14px}
footer p{max-width:720px;margin:0}

/* cart drawer */
.drawer{position:fixed;z-index:40;right:0;top:0;width:min(420px,100%);height:100vh;background:var(--surface);border-left:1px solid var(--line);padding:20px;transform:translateX(102%);transition:transform .2s;overflow:auto}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-head h2{margin:0}
.drawer-head button,.dialog-close{background:none;border:0;color:var(--text);font-size:28px;line-height:1;cursor:pointer}
.cart-line{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-line small{color:var(--muted)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.qty button:disabled{opacity:.4;cursor:default}
.qty .remove{border-color:transparent;color:var(--bad);font-size:18px}
.qty span{min-width:18px;text-align:center}
.promo-row{display:flex;gap:8px;margin-top:18px}
.promo-row button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:0 14px;font:inherit;cursor:pointer}
.drawer-sum{margin:16px 0}
.drawer-sum div{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted)}
.drawer-sum dd{margin:0}
.drawer-sum .total{font-size:20px;font-weight:800;color:var(--text);border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.backdrop{position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}
.backdrop.show{opacity:1;pointer-events:auto}

/* checkout dialog */
dialog{width:min(480px,calc(100% - 28px));background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:24px}
dialog::backdrop{background:rgba(20,20,20,.5)}
dialog h2{margin:4px 0 16px}
dialog input:not([type=checkbox]){margin:0 0 14px}
dialog label.check{display:flex;align-items:center;gap:8px;font-weight:600}
.dialog-close{position:absolute;right:14px;top:10px}
.checkout-note{padding:12px;border-radius:10px;background:var(--accent-soft);color:#7a2e00;font-size:14px}
.message{min-height:22px;color:var(--bad)}
.success{display:grid;gap:6px;padding:16px;border:1px solid #bfe3cf;background:#effaf3;border-radius:12px;color:var(--ok)}

@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}.nav{display:none}}
@media(max-width:620px){.hero{padding-top:28px;gap:20px}.hero-art{min-height:0}.hero-art img{width:min(100%,320px)}.id-row{flex-direction:column}.grid{grid-template-columns:1fr}.section{padding:40px 20px}.section-head{align-items:stretch;flex-direction:column}.search{max-width:none}.steps,.benefits{grid-template-columns:1fr}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}