/* =====================================================================
   WISDOM GLOBAL STORE — storefront theme
   Palette : deep ink + electric cyan (accent) + logo mint/green (brand)
             magenta appears only inside gradients as a neon spark.
   Type    : Space Grotesk (display) / Inter (body)
   ===================================================================== */
:root{
  --bg:#0A0F1F; --surface:#0F1A2E; --surface-2:#152439; --surface-3:#1D3350;
  /* brand = logo mint/green; accent = poster cyan — brighter, more electric */
  --primary:#2DE0C0; --primary-2:#5FF0D8; --primary-soft:rgba(45,224,192,.14);
  --cyan:#22E0F0; --cyan-soft:rgba(34,224,240,.14); --green:#0C6C54; --mint:#7DEBC8;
  --magenta:#F03FB0; --magenta-soft:rgba(240,63,176,.12); /* spark — gradients only */
  --buy:#2DE0C0; --buy-2:#22E0F0;   /* buy = mint→cyan for CTAs */
  --text:#EAF2F8; --muted:#8FA2BA; --border:rgba(125,235,200,.16);
  --radius:16px; --radius-sm:11px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --neon:linear-gradient(120deg,#22E0F0,#2DE0C0);
  --neon-glow:0 0 0 1px rgba(34,224,240,.2), 0 8px 28px -6px rgba(34,224,240,.45);
  --neon-spark:linear-gradient(120deg,#22E0F0,#F03FB0);
  --ff-display:'Space Grotesk',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); font-family:var(--ff-body);
  margin:0; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:var(--ff-display); letter-spacing:-.02em; line-height:1.12; font-weight:600}
a{color:var(--primary-2); text-decoration:none}
a:hover{color:var(--mint)}
.container-x{max-width:1180px;margin:0 auto;padding:0 20px}
.text-muted-2{color:var(--muted)!important}
.eyebrow{font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.2em;
  font-size:.72rem; color:var(--mint); font-weight:600}
img{max-width:100%}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* ---- Buttons ------------------------------------------------------- */
.btn{font-family:var(--ff-display); font-weight:600; border-radius:var(--radius-sm);
  padding:.62rem 1.2rem; border:1px solid transparent; transition:.2s; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.btn-buy{background:var(--neon); color:#04121A; box-shadow:var(--neon-glow)}
.btn-buy:hover{filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(34,224,240,.3),0 12px 34px -6px rgba(34,224,240,.6)}
.btn-brand{background:var(--neon); color:#04121A; box-shadow:var(--neon-glow)}
.btn-brand:hover{filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(34,224,240,.3),0 12px 34px -6px rgba(34,224,240,.6)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan); background:var(--cyan-soft)}
.btn-block{width:100%; justify-content:center}

/* ---- Navbar -------------------------------------------------------- */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(11,17,32,.85);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--border)}
.site-nav .inner{display:flex; align-items:center; gap:22px; height:72px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--ff-display);
  font-weight:700; font-size:1.2rem; color:#fff; letter-spacing:-.02em}
.brand .brand-logo{width:36px; height:36px; object-fit:contain}
.brand .mark{width:30px;height:30px;border-radius:9px;
  background:var(--neon); display:grid; place-items:center;
  color:#04121A; font-weight:700}
.brand span{color:var(--mint)}
.nav-links{display:flex; gap:22px; margin-left:14px; flex:1}
.nav-links a{color:var(--muted); font-size:.94rem; font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-actions{display:flex; align-items:center; gap:16px}
.nav-icon{position:relative; color:var(--muted); font-size:1.15rem; display:grid; place-items:center}
.nav-icon:hover{color:var(--text)}
.nav-icon .count{position:absolute; top:-8px; right:-10px; background:var(--mint); color:#04121A;
  font-size:.66rem; font-weight:700; min-width:17px; height:17px; border-radius:9px;
  display:grid; place-items:center; padding:0 4px; font-family:var(--ff-body)}
.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:1.4rem}

/* ---- Hero (signature: aurora glow) --------------------------------- */
.hero{position:relative; overflow:hidden; padding:92px 0 80px}
/* layered neon glows in brand colours */
.hero::before{content:""; position:absolute; inset:-40% -10% auto -10%; height:130%;
  background:
    radial-gradient(38% 52% at 20% 26%, rgba(34,224,240,.30), transparent 62%),
    radial-gradient(36% 48% at 82% 22%, rgba(45,224,192,.26), transparent 62%),
    radial-gradient(42% 52% at 62% 82%, rgba(240,63,176,.12), transparent 62%);
  filter:blur(24px); z-index:0; animation:drift 18s ease-in-out infinite alternate}
/* faint tech grid */
.hero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(125,235,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,235,200,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask:radial-gradient(ellipse 72% 62% at 50% 40%,#000,transparent 78%);
  mask:radial-gradient(ellipse 72% 62% at 50% 40%,#000,transparent 78%)}
@keyframes drift{to{transform:translate3d(0,-24px,0) scale(1.05)}}
.hero .inner{position:relative; z-index:2; max-width:780px}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:30px;
  border:1px solid var(--border); background:rgba(45,224,192,.06); margin-bottom:8px}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.7rem); margin:.5rem 0 1rem}
.hero h1 .grad{background:linear-gradient(100deg,var(--cyan),var(--primary));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{font-size:1.14rem; color:var(--muted); max-width:600px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.hero-stats{display:flex; gap:34px; margin-top:44px; flex-wrap:wrap}
.hero-stats .n{font-family:var(--ff-display); font-size:1.6rem; color:var(--text); font-weight:700}
.hero-stats .n .accent{color:var(--cyan)}
.hero-stats .l{font-size:.82rem; color:var(--muted)}
/* floating tech chips */
.hero-chips{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero-chip{position:absolute; display:flex; align-items:center; gap:8px; padding:9px 14px;
  background:rgba(15,26,46,.7); border:1px solid var(--border); border-radius:12px;
  font-family:var(--ff-display); font-size:.82rem; font-weight:500; color:var(--text);
  backdrop-filter:blur(8px); box-shadow:0 8px 26px -12px rgba(0,0,0,.6); animation:float 6s ease-in-out infinite}
.hero-chip i{font-size:1rem}
.hero-chip.c1{top:16%; right:8%; color:var(--cyan); animation-delay:0s}
.hero-chip.c2{top:44%; right:15%; animation-delay:1.4s}
.hero-chip.c3{top:70%; right:6%; animation-delay:.7s}
.hero-chip.c1 i{color:var(--cyan)} .hero-chip.c2 i{color:var(--primary)} .hero-chip.c3 i{color:var(--magenta)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:900px){ .hero-chips{display:none} }

/* ---- Section shell ------------------------------------------------- */
.section{padding:60px 0}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:26px; flex-wrap:wrap}
.section-head h2{font-size:1.7rem; margin:.35rem 0 0}
.section-head .sub{color:var(--muted); font-size:.95rem; margin-top:4px}
.link-more{font-family:var(--ff-display); font-weight:600; font-size:.9rem; color:var(--primary-2)}

/* ---- Four pillars -------------------------------------------------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.pillar{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 20px; transition:.2s}
.pillar:hover{border-color:var(--primary); transform:translateY(-3px)}
.pillar .ic{font-size:1.5rem}
.pillar h4{margin:12px 0 6px; font-size:1.05rem}
.pillar p{color:var(--muted); font-size:.86rem; margin:0}

/* ---- Collection cards --------------------------------------------- */
.coll-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.coll-card{position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px 22px; overflow:hidden; transition:.2s; min-height:170px;
  display:flex; flex-direction:column; justify-content:flex-end}
.coll-card::after{content:""; position:absolute; top:-40px; right:-40px; width:150px; height:150px;
  border-radius:50%; background:radial-gradient(circle,var(--primary-soft),transparent 70%)}
.coll-card:hover{border-color:var(--primary); transform:translateY(-4px)}
.coll-card .eyebrow{position:relative}
.coll-card h3{font-size:1.25rem; margin:8px 0 6px; position:relative}
.coll-card p{color:var(--muted); font-size:.88rem; margin:0 0 4px; position:relative}

/* ---- Product cards ------------------------------------------------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.prod-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.prod-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.2s}
.prod-card:hover{border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow)}
.prod-media{position:relative; aspect-ratio:4/3; background:
   linear-gradient(135deg,var(--surface-2),var(--surface-3)); overflow:hidden}
.prod-media img{width:100%; height:100%; object-fit:cover}
.prod-media .ph{position:absolute; inset:0; display:grid; place-items:center; font-size:2.4rem; opacity:.5}
.wish-btn{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(11,11,20,.6); border:1px solid var(--border); color:#fff; display:grid;
  place-items:center; cursor:pointer; backdrop-filter:blur(4px)}
.wish-btn.on{color:#ff5a7a; border-color:#ff5a7a}
.prod-body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.prod-body h3{font-size:1rem; margin:0; line-height:1.3}
.prod-body h3 a{color:#fff}
.prod-body h3 a:hover{color:var(--primary-2)}
.prod-meta{color:var(--muted); font-size:.78rem; display:flex; gap:10px; flex-wrap:wrap}
.price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto}
.price{font-family:var(--ff-display); font-size:1.15rem; font-weight:600; color:#fff}
.compare{color:var(--muted); text-decoration:line-through; font-size:.85rem}
.save{color:#3ad39a; font-size:.78rem; font-weight:600}
.prod-actions{display:flex; gap:8px; margin-top:10px}

/* ---- Type badges (structural signal) ------------------------------ */
.badge-type{font-family:var(--ff-display); font-size:.68rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:6px; display:inline-flex; align-items:center; gap:5px}
.badge-live{background:rgba(255,90,122,.16); color:#ff8fa3}
.badge-course{background:rgba(124,92,252,.18); color:var(--primary-2)}
.badge-book{background:rgba(58,211,154,.16); color:#5fe0b4}
.badge-device{background:rgba(34,211,238,.16); color:#6fe3f5}
.badge-software{background:rgba(255,190,80,.16); color:#ffcf7a}
.badge-event{background:rgba(255,138,61,.18); color:#ffb27a}
.badge-level{background:var(--surface-3); color:var(--muted); font-size:.68rem; padding:3px 8px; border-radius:6px}

/* ---- Events strip -------------------------------------------------- */
.event-card{display:flex; gap:18px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; align-items:center}
.event-date{flex:0 0 74px; text-align:center; background:var(--primary-soft); border-radius:12px;
  padding:12px 8px; border:1px solid var(--border)}
.event-date .d{font-family:var(--ff-display); font-size:1.5rem; font-weight:700; color:#fff; line-height:1}
.event-date .m{font-size:.72rem; text-transform:uppercase; color:var(--primary-2); letter-spacing:.1em}
.event-card h4{margin:0 0 4px; font-size:1.05rem}
.event-card p{margin:0; color:var(--muted); font-size:.86rem}

/* ---- B2B band ------------------------------------------------------ */
.band{background:linear-gradient(120deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border); border-radius:24px; padding:40px 36px; position:relative; overflow:hidden}
.band::after{content:""; position:absolute; top:-60px; right:-30px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,252,.28),transparent 70%)}
.band h2{font-size:1.8rem; margin:0 0 8px; position:relative}
.band p{color:var(--muted); max-width:560px; position:relative}

/* ---- Breadcrumb / page head --------------------------------------- */
.page-head{padding:34px 0 8px}
.crumbs{color:var(--muted); font-size:.85rem}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:#fff}

/* ---- Product detail ------------------------------------------------ */
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.pd-media{background:linear-gradient(135deg,var(--surface-2),var(--surface-3)); border-radius:var(--radius);
  border:1px solid var(--border); aspect-ratio:1; display:grid; place-items:center; overflow:hidden}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-info h1{font-size:2rem; margin:12px 0}
.pd-price{font-family:var(--ff-display); font-size:1.9rem; color:#fff; font-weight:600}
.pd-facts{list-style:none; padding:0; margin:20px 0; display:grid; gap:10px}
.pd-facts li{display:flex; gap:10px; color:var(--muted); font-size:.92rem; align-items:center}
.qty{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden}
.qty button{background:var(--surface-2); border:0; color:#fff; width:38px; font-size:1.1rem; cursor:pointer}
.qty input{width:52px; text-align:center; background:var(--surface); border:0; color:#fff; font-weight:600}

/* ---- Cart / tables ------------------------------------------------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.cart-line{display:grid; grid-template-columns:72px 1fr 90px 110px; gap:18px; align-items:center;
  grid-template-areas:"t n p a";
  padding:18px 0; border-bottom:1px solid var(--border)}
.cart-line:last-child{border-bottom:0}
.cart-thumb{grid-area:t; width:72px;height:72px;border-radius:12px; background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden; font-size:1.5rem; color:var(--mint)}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-qty{grid-area:p}
.cart-amt{grid-area:a; text-align:right}
.cart-info{grid-area:n; min-width:0}
.cart-name{font-weight:600; margin-bottom:6px}
.cart-name a{color:var(--text)}
.cart-name a:hover{color:var(--mint)}
.cart-info .badge-type{display:inline-block; margin-bottom:4px}
.cart-qty .input{width:100%; text-align:center}
.cart-line-total{font-family:var(--ff-display); font-weight:700; color:var(--mint); margin-bottom:4px}
.cart-remove{color:var(--muted); font-size:.82rem}
.cart-remove:hover{color:#ff8fa3}
.summary-row{display:flex; justify-content:space-between; padding:8px 0; color:var(--muted)}
.summary-row.total{color:#fff; font-family:var(--ff-display); font-size:1.25rem; font-weight:600;
  border-top:1px solid var(--border); margin-top:8px; padding-top:14px}

/* ---- Forms --------------------------------------------------------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px; font-weight:500}
.input,.field input,.field select,.field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); padding:.7rem .85rem; font-family:var(--ff-body); font-size:.95rem}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}

/* ---- Alerts / notices --------------------------------------------- */
.notice{border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:16px; font-size:.92rem; border:1px solid}
.notice-ok{background:rgba(58,211,154,.1); border-color:rgba(58,211,154,.35); color:#8ff0c8}
.notice-err{background:rgba(255,90,122,.1); border-color:rgba(255,90,122,.35); color:#ffa8b8}
.notice-info{background:var(--primary-soft); border-color:var(--primary); color:var(--primary-2)}

/* ---- Empty state --------------------------------------------------- */
.empty{text-align:center; padding:70px 20px; color:var(--muted)}
.empty .ic{font-size:3rem; opacity:.4; margin-bottom:12px}

/* ---- Footer -------------------------------------------------------- */
.site-footer{border-top:1px solid var(--border); margin-top:40px; padding:48px 0 26px; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px}
.site-footer h5{color:#fff; font-family:var(--ff-display); font-size:.95rem; margin:0 0 12px}
.site-footer a{color:var(--muted); display:block; font-size:.9rem; padding:3px 0}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--border); margin-top:30px; padding-top:18px;
  display:flex; justify-content:space-between; font-size:.83rem; flex-wrap:wrap; gap:8px}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width:992px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .coll-grid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pd-grid{grid-template-columns:1fr; gap:24px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-signin{display:none}
  .prod-grid,.prod-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .coll-grid,.pillars{grid-template-columns:1fr}
  .cart-line{grid-template-columns:60px 1fr auto; grid-template-areas:"t n n" "t p a"; gap:12px 14px}
  .cart-amt{align-self:end}
  .hero{padding:56px 0 48px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* Brand logo image in storefront navbar */
.brand .brand-logo{width:36px; height:36px; object-fit:contain}

/* ---- Mobile slide-in menu ------------------------------------------ */
.mobile-menu{position:fixed; inset:0; z-index:200; visibility:hidden; opacity:0; transition:.22s}
.mobile-menu.open{visibility:visible; opacity:1}
.mm-backdrop{position:absolute; inset:0; background:rgba(4,8,18,.65); backdrop-filter:blur(2px)}
.mm-panel{position:absolute; top:0; right:0; height:100%; width:min(320px,86vw); z-index:1;
  background:var(--surface); border-left:1px solid var(--border); padding:20px;
  transform:translateX(100%); transition:transform .24s ease; display:flex; flex-direction:column}
.mobile-menu.open .mm-panel{transform:translateX(0)}
.mm-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px}
.mm-close{background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer}
.mm-close:hover{color:var(--text)}
.mm-links{display:flex; flex-direction:column; gap:4px; flex:1}
.mm-links a{display:flex; align-items:center; gap:12px; color:var(--text); padding:12px 14px;
  border-radius:11px; font-size:1rem; font-weight:500}
.mm-links a i{color:var(--mint); width:22px; text-align:center}
.mm-links a:hover{background:var(--surface-2)}
.mm-foot{padding-top:16px; border-top:1px solid var(--border)}

/* =====================================================================
   CUSTOMER AUTH + ACCOUNT
   ===================================================================== */
.auth-wrap{max-width:440px; margin:0 auto; padding:60px 20px}
.auth-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px}
.auth-title{font-size:1.7rem; margin:0 0 6px}
.auth-lead{color:var(--muted); margin:0 0 24px; font-size:.94rem}
.auth-form{display:flex; flex-direction:column; gap:14px}
.auth-alt{text-align:center; margin-top:20px; color:var(--muted); font-size:.9rem}

.field-icon{position:relative}
.field-icon > i{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted)}
.field-icon input{width:100%; padding:.85rem 1rem .85rem 42px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:12px; color:var(--text); font-family:var(--ff-body); font-size:.95rem; transition:.15s}
.field-icon input::placeholder{color:var(--muted)}
.field-icon input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft); background:var(--surface)}
.pw-toggle{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px}
.pw-toggle:hover{color:var(--cyan)}
.btn-lg{padding:.9rem 1rem; font-size:.98rem}
.btn-sm{padding:.42rem .8rem; font-size:.82rem}

/* Account */
.account{padding:40px 20px 60px}
.account-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:16px; flex-wrap:wrap}
.account-head h1{font-size:1.8rem; margin:0}
.account-layout{display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:start}
.account-tabs{display:flex; flex-direction:column; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px}
.account-tabs a{display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:11px; color:var(--muted); font-weight:500; font-size:.93rem}
.account-tabs a i{width:20px; text-align:center}
.account-tabs a:hover{background:var(--surface-2); color:var(--text)}
.account-tabs a.on{background:var(--primary-soft); color:var(--mint); font-weight:600}
.account-tabs .tab-c{margin-left:auto; font-size:.75rem; background:var(--surface-3); color:var(--muted); padding:1px 8px; border-radius:20px}
.account-body{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; min-height:340px}
.acc-h2{font-size:1.25rem; margin:0 0 20px}
.acc-empty{text-align:center; padding:50px 20px; color:var(--muted)}
.acc-empty i{font-size:2.6rem; color:var(--surface-3); display:block; margin-bottom:14px}
.acc-empty p{margin:0 0 18px}
.acc-form{max-width:460px; display:flex; flex-direction:column; gap:2px}
.acc-form .field{margin-bottom:14px}
.acc-form label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px}
.acc-form input{width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:.6rem .8rem; color:var(--text); font-family:var(--ff-body); font-size:.92rem}
.acc-form input:focus{outline:none; border-color:var(--cyan)}
.acc-form input:disabled{opacity:.55}
.form-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.order-row{display:grid; grid-template-columns:1fr auto auto auto; gap:16px; align-items:center;
  padding:16px; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; background:var(--surface-2)}
.order-ref{font-family:var(--ff-display); font-weight:600}
.order-total{font-family:var(--ff-display); font-weight:700; color:var(--mint)}

.pill{display:inline-block; font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:600; text-transform:capitalize}
.pill-green{background:rgba(79,209,169,.16); color:var(--mint)}
.pill-amber{background:rgba(255,190,80,.16); color:#ffce7a}
.pill-cyan{background:var(--cyan-soft); color:var(--cyan)}
.pill-grey{background:var(--surface-3); color:var(--muted)}
.pill-red{background:rgba(255,90,122,.16); color:#ff8fa3}

@media (max-width:760px){
  .account-layout{grid-template-columns:1fr}
  .account-tabs{flex-direction:row; overflow-x:auto}
  .account-tabs a{white-space:nowrap}
  .order-row{grid-template-columns:1fr auto; row-gap:8px}
  .form-row{grid-template-columns:1fr}
}

/* =====================================================================
   CONTENT PAGES — legal, about, contact
   ===================================================================== */
.page-hero{padding:56px 0 8px; text-align:center}
.page-hero h1{font-size:2.4rem; margin:0 0 10px}
.page-hero p{color:var(--muted); max-width:620px; margin:0 auto; font-size:1.05rem}
.page-hero .eyebrow{display:block; margin-bottom:14px}

.prose{max-width:820px; margin:0 auto; padding:40px 20px 70px; color:var(--text)}
.prose h2{font-size:1.35rem; margin:34px 0 12px; color:var(--text)}
.prose h3{font-size:1.08rem; margin:24px 0 8px; color:var(--mint)}
.prose p,.prose li{color:#C3CEDA; line-height:1.75; font-size:.97rem}
.prose ul{padding-left:22px; margin:10px 0}
.prose li{margin-bottom:7px}
.prose a{color:var(--cyan)}
.prose strong{color:var(--text)}
.prose .updated{color:var(--muted); font-size:.86rem; margin-bottom:8px}
.prose hr{border:none; border-top:1px solid var(--border); margin:32px 0}
.prose .callout{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--mint);
  border-radius:10px; padding:16px 18px; margin:20px 0}
.prose .callout p{margin:0; color:#C3CEDA}

/* About */
.about-section{padding:20px 0}
.about-two{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:30px 0}
.about-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px}
.about-card .ac-ico{width:48px; height:48px; border-radius:12px; background:var(--primary-soft); color:var(--mint);
  display:grid; place-items:center; font-size:1.4rem; margin-bottom:16px}
.about-card h3{font-size:1.2rem; margin:0 0 10px}
.about-card p{color:#C3CEDA; font-size:.95rem; line-height:1.7; margin:0}
.about-values{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0}
.value-item{text-align:center; padding:22px 16px; background:var(--surface); border:1px solid var(--border); border-radius:14px}
.value-item i{font-size:1.8rem; color:var(--cyan); display:block; margin-bottom:12px}
.value-item h4{margin:0 0 6px; font-size:1rem}
.value-item p{color:var(--muted); font-size:.86rem; margin:0}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:30px; max-width:980px; margin:40px auto; padding:0 20px 60px; align-items:start}
.contact-info{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px}
.contact-item{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px}
.contact-item i{width:42px; height:42px; flex-shrink:0; border-radius:11px; background:var(--primary-soft); color:var(--mint); display:grid; place-items:center; font-size:1.15rem}
.contact-item .ci-label{font-size:.8rem; color:var(--muted); margin-bottom:2px}
.contact-item .ci-value{color:var(--text); font-weight:500}
.contact-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px}
.contact-form .field{margin-bottom:16px}
.contact-form label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:.7rem .9rem; color:var(--text); font-family:var(--ff-body); font-size:.94rem}
.contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--cyan)}
.contact-form textarea{resize:vertical; min-height:120px}

@media (max-width:760px){
  .about-two,.about-values,.contact-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:1.9rem}
}

/* Footer brand logo + footer-bottom layout */
.site-footer .brand-logo{width:30px; height:30px; object-fit:contain}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:36px; padding-top:22px; border-top:1px solid var(--border); font-size:.84rem; color:var(--muted)}

/* Checkout signed-in banner */
.checkout-asuser{background:var(--primary-soft); border:1px solid var(--border); border-radius:11px;
  padding:11px 14px; font-size:.86rem; color:var(--text); margin-bottom:18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.checkout-asuser i{color:var(--mint)}
.checkout-asuser.guest{background:var(--surface-2)}
.checkout-asuser a{color:var(--cyan); font-weight:600}