/* ================== RESET & THEME ================== */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  /* Base */
  --bg:#0a0c12;
  --text:#e7e9ee;
  --muted:#9aa3af;
  --muted-2:#cbd5e1;
  --line:rgba(255,255,255,0.14);

  /* Brand (víc fialovo-růžové) */
  --brand:#8b5cf6;   /* violet */
  --brand-2:#a855f7; /* purple */
  --brand-3:#7c3aed; /* deep */
  --pink:#f472b6;    /* pink */
  --pink-2:#ec4899;  /* pink deeper */

  /* Surfaces */
  --panel:rgba(255,255,255,0.06);
  --panel-2:rgba(255,255,255,0.08);
  --panel-3:#111;
  --panel-4:#1a1a1a;
  --card:#0f1320;

  /* Layout */
  --container:1180px;
  --border:#222;
  --radius:16px;
  --radius-sm:12px;

  /* Effects */
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --focus:0 0 0 3px rgba(168,85,247,.35); /* víc purple */

  /* States */
  --ok:#22c55e;
  --danger:#ef4444;
}

/* Typography & base */
html { scroll-behavior:smooth; }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

  /* NOVÉ: vícevrstvé pozadí (měkká mřížka + aurora + grain) */
  background:
    linear-gradient(#10162a 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,#10162a 1px, transparent 1px) 0 0/28px 28px,
    radial-gradient(900px 600px at 85% -120px, #171e33 0%, transparent 60%),
    radial-gradient(800px 520px at -5% -140px, #12162a 0%, transparent 55%),
    linear-gradient(180deg,#0b0f1a,#0a0c12 40%);
  min-height:100dvh; position:relative; overflow-x:hidden;
}
body::before{
  /* měkké „aurora“ fleky s fialovo-růžovým nádechem */
  content:""; position:fixed; inset:-10% -10% auto -10%; height:60vh; pointer-events:none;
  background:
    radial-gradient(40% 40% at 80% 10%, color-mix(in srgb, var(--brand-2) 35%, transparent) 0%, transparent 60%),
    radial-gradient(36% 36% at 15% 0%, color-mix(in srgb, var(--pink) 30%, transparent) 0%, transparent 62%),
    radial-gradient(45% 55% at 50% -10%, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 70%);
  filter:blur(42px) saturate(140%); opacity:.6;
}
body::after{
  /* subtilní zrnění pro „film“ look */
  content:""; position:fixed; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.035'/></svg>");
}
@media (prefers-reduced-motion:no-preference){
  @keyframes bgFloat{ from{ transform:translateY(0) } to{ transform:translateY(6px) } }
  body::before{ animation:bgFloat 16s ease-in-out infinite alternate; }
}

.container{ max-width:var(--container); margin:0 auto; padding:0 16px; }
.muted{ color:var(--muted); }
.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; }
::selection{ background: color-mix(in srgb, var(--brand-2) 65%, transparent); color:#fff; }

/* ================== ICONS ================== */
.iconify{ vertical-align:-0.12em; }
.icon-16 .iconify{ font-size:16px }
.icon-18 .iconify{ font-size:18px }
.icon-20 .iconify{ font-size:20px }
.icon-22 .iconify{ font-size:22px }
.icon-28 .iconify{ font-size:28px }

/* ================== TOP BAR ================== */
.top-bar{
  text-align:center; padding:6px 10px; font-size:.9rem; font-weight:800;
  background:linear-gradient(90deg,var(--brand-2),var(--brand),var(--pink-2));
  color:#fff;
}

/* ================== HEADER ================== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,12,18,.6);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:66px; padding:0 16px; }
header .logo{ font-weight:800; letter-spacing:.2px; font-size:1.1rem; }
nav ul{ display:flex; gap:18px; list-style:none; }
nav a{
  color:var(--text); text-decoration:none; opacity:.9; padding:8px 10px; border-radius:10px; position:relative;
  transition:.2s ease;
}
nav a:hover{ opacity:1; background:rgba(255,255,255,.05); box-shadow:0 8px 18px rgba(168,85,247,.18); }
nav a:focus-visible{ outline:none; box-shadow:var(--focus); }
nav a.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--pink-2),var(--brand)); border-radius:2px; opacity:.95;
}
/* Mobile nav */
.nav-toggle{ display:none; }
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
  nav ul{ display:none; }
  nav.open ul{
    display:flex; flex-direction:column; gap:12px;
    position:fixed; top:66px; right:12px; left:12px;
    padding:16px; border:1px solid var(--line); border-radius:12px;
    background:linear-gradient(180deg,#230f1f4d,#0c1220);
    box-shadow:var(--shadow);
  }
}

/* Cart badge in header */
.cart-icon{
  position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:8px 10px; border:1px solid #2b2b31; border-radius:10px; background:#17171b;
}
.cart-icon .iconify{ font-size:24px; }
.cart-count{
  position:absolute; top:-6px; right:-8px; background:#ff3b7f; color:#fff;
  font-size:12px; line-height:18px; min-width:18px; padding:0 5px; border-radius:999px; text-align:center;
  border:1px solid rgba(255,255,255,.15);
}

/* ================== BUTTONS & BADGES ================== */
.btn,.btn:link,.btn:visited{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:12px; border:1px solid #2b2b31;
  background:#17171b; color:#fff; text-decoration:none; font-weight:800;
  transition: transform .08s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease;
  cursor:pointer; user-select:none;
}
.btn:hover{ background:#1e1e24; border-color:#3a3a42; box-shadow:0 12px 28px rgba(168,85,247,.22); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:var(--focus); }

/* NOVÉ: víc růžovo-fialové u primárního CTA */
.btn-primary{
  background:linear-gradient(135deg, var(--pink-2), var(--brand-2) 55%, var(--brand));
  border-color:transparent;
  background-size:200% 100%;
  box-shadow:0 10px 26px rgba(236,72,153,.24), 0 2px 0 rgba(255,255,255,.06) inset;
}
.btn-primary:hover{ filter:brightness(1.03); background-position:100% 0; }

/* Sekundární (tmavé) s jemným gradient okrajem */
.btn-dark{
  position:relative; background:#0f1116; border-color:#3a3a42;
}
.btn-dark::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(90deg, #3a3a42, color-mix(in srgb, var(--brand-2) 30%, transparent), #3a3a42);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

.btn-outline{
  background:transparent; border-color: color-mix(in srgb, var(--brand-2) 55%, #2b2b31);
  color:#e7e9ee;
}
.btn-outline:hover{ background:rgba(168,85,247,.08); border-color: color-mix(in srgb, var(--pink-2) 60%, var(--brand-2)); }
.btn-ghost{
  background:transparent; border-color:transparent; color:#cbd5e1;
}
.btn-ghost:hover{ background:rgba(255,255,255,.05); color:#fff; }

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:6px 18px; border-radius:20px; background:linear-gradient(180deg,#1b1f33,#151a2a); color:#fff; font-size:.9rem; font-weight:800;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(168,85,247,.18);
}

/* ================== HERO ================== */
.hero{ padding:92px 0 48px; border-bottom:1px solid var(--line); text-align:center; position:relative; overflow:clip; }
.hero h1{
  font-size:clamp(28px,3.4vw,44px); line-height:1.15; margin:.4rem 0 1rem; letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.02), 0 18px 40px rgba(0,0,0,.35);
}
.hero .highlight{
  background:linear-gradient(90deg,#fff, #f5d0fe 50%, var(--pink) 75%, var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%;
  animation:gradMove 10s ease infinite;
}
@keyframes gradMove { 0%{background-position:0} 100%{background-position:200% 0} }
.hero .sub{ color:var(--muted); max-width:740px; margin:0 auto; }
.hero .buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:16px; }

/* Aurora utility (přibarveno do pink/purple) */
.aurora{
  position:absolute; inset:auto -10% 0 -10%; height:320px; pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%, #a855f733, #f472b633, #a855f733);
  filter:blur(48px) saturate(140%); opacity:.45;
}

/* ================== LIQUID GLASS (utility) ================== */
.liquid-glass{
  background:var(--panel);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* ================== ABOUT ================== */
.about{ padding:72px 0; }
.about-box{
  display:grid; grid-template-columns: 1fr 1fr; gap:40px; padding:44px 36px;
  max-width:1000px; margin:0 auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
}
.about-left h2{ font-size:2rem; margin-bottom:12px; }
.about-left p{ color:var(--muted); margin-bottom:12px; }
.about-right{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.about-card{
  position:relative; display:flex; align-items:flex-start; gap:14px; padding:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.about-card:hover{
  transform:translateY(-3px);
  background:var(--panel-2); box-shadow:var(--shadow);
  border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line));
}
.about-card .icon{
  min-width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px;
}
.about-card .icon .iconify{ font-size:26px; color:#fff; }
.about-card h3{ font-size:1.08rem; margin:.1rem 0 6px; }
.about-card p{ color:var(--muted); font-size:.92rem; line-height:1.45; }
.promo-badge{
  margin-top:14px; display:inline-block; padding:8px 16px; font-weight:800; font-size:.95rem;
  background:linear-gradient(180deg,#1b1f33,#151a2a); border:1px solid color-mix(in srgb, var(--pink-2) 40%, var(--line)); border-radius:10px;
  color:#fce7f3;
}

/* ================== SHOP ================== */
.shop{ padding:72px 0; text-align:center; }
.shop h2{ font-size:2rem; margin:0 0 8px; }
.shop p{ color:var(--muted); margin:0 0 18px; }

.tabs{
  position:relative; display:inline-flex; gap:6px; padding:6px; border:1px solid var(--line); border-radius:999px;
  background:#0f1423;
}
.tab{
  position:relative; z-index:1; padding:8px 14px; border-radius:999px; border:none; background:transparent; color:#cbd5e1; font-weight:800; cursor:pointer;
}
.tab.active{ color:#fff; }
.tabs::after{
  content:""; position:absolute; top:6px; bottom:6px; width:110px; left:6px; border-radius:999px;
  background:linear-gradient(180deg,#1c2740,#142037);
  transition:left .25s cubic-bezier(.2,.8,.2,1);
}
.tabs[data-active="1"]::after{ left:6px; }
.tabs[data-active="2"]::after{ left:122px; }

.product-list{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin-top:18px;
}

/* Product card – gradient stroke na hover */
.product{
  position:relative; text-align:left; padding:14px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#0f1322,#0c101a);
  border:1px solid var(--line); min-height:312px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.product::before{
  /* jemný gradientový okraj – zobrazuje se při hoveru díky opacity */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0;
  background:linear-gradient(120deg, color-mix(in srgb, var(--pink-2) 30%, transparent), color-mix(in srgb, var(--brand-2) 30%, transparent) 60%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .25s ease;
}
.product:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#2a3550; }
.product:hover::before{ opacity:1; }
.product:focus-within{ outline:none; box-shadow:var(--focus); }

.product-img{
  width:100%; height:auto; padding-top:62%;
  background:#0f1219 center/cover no-repeat;
  border-radius:12px; border:1px solid var(--line); margin-bottom:10px; position:relative; overflow:hidden;
  transform:translateZ(0); transition:transform .35s ease;
}
.product:hover .product-img{ transform:translateY(-2px) scale(1.015); }
.product-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 65%, rgba(10,12,18,.4));
}
.card-badge{
  position:absolute; top:10px; left:10px;
  background:linear-gradient(180deg, var(--pink-2), var(--brand-2));
  color:#fff; font-weight:800; font-size:.75rem;
  padding:.28rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.25);
}
.product h3{ margin:6px 0 4px; font-size:1.06rem; font-weight:800; }
.product p{
  margin:0 0 10px; color:var(--muted); min-height:38px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.price{
  display:inline-block; margin-bottom:10px; font-weight:800;
  color:#f5d0fe; /* světlejší lavender */
}
.product .add-to-cart{ width:100%; margin-top:auto; }

/* Skeletons for product grid */
.skeleton{ background:linear-gradient(90deg,#11182a 0%,#11182a 40%,#17223a 50%,#11182a 60%,#11182a 100%); background-size:200% 100%; animation:s 1.2s infinite linear; }
@keyframes s{ to{ background-position:-200% 0 } }
.sk-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:linear-gradient(180deg,#0f1322,#0c101a); }
.sk-media{ height:200px; }
.sk-lines{ padding:14px; display:grid; gap:10px; }
.sk-line{ height:12px; border-radius:8px; }
.sk-line.w60{ width:60% } .sk-line.w40{ width:40% }

/* ================== REVIEWS ================== */
.review{ text-align:center; padding:72px 0; }
.review h2{ margin-bottom:16px; }
.review-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.review-card{
  position:relative; padding:18px; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); transition:.2s ease;
}
.review-card:hover{ transform:translateY(-4px); background:var(--panel-2); box-shadow:var(--shadow); border-color: color-mix(in srgb, var(--pink-2) 35%, var(--line)); }
.review-card strong{ display:block; margin-bottom:6px; }
.review-card p{ color:#ccc; margin-top:8px; }
.stars{ display:flex; gap:4px; }
.stars .iconify{ color:#fbbf24; font-size:20px; }

/* ================== FAQ ================== */
.faq { padding:72px 0; }
.faq h2 { text-align:center; margin-bottom:10px; }
.faq-sub { text-align:center; color:var(--muted); margin-bottom:20px; }
.faq-list { max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item { background:linear-gradient(180deg,#230f1f4d,#0c1220); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq-q { width:100%; background:transparent; border:none; text-align:left; color:var(--text); padding:14px 16px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.faq-q .icon { transition: transform .2s ease; }
.faq-item.open .faq-q .icon { transform: rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 16px; color:var(--muted); }
.faq-item.open .faq-a { max-height:260px; padding:0 16px 14px; }

/* ================== FOOTER ================== */
footer{
  padding:40px 16px; margin-top:40px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
}
.footer-content{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:18px; }
.footer-left h3{ margin-bottom:8px; }
.footer-left p{ color:#ccc; max-width:420px; text-align:center; }
.footer-links{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.footer-links ul{ list-style:none; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ color:#d1d5db; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }
.copy{ margin-top:6px; color:#8b8f99; font-size:.9rem; }

/* ================== CART: OVERLAY & PANEL ================== */
.cart-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none;
  transition:opacity .22s ease; z-index:900;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }

.cart-panel{
  position:fixed; top:0; right:0; width:min(420px,92vw); height:100%;
  background:
    radial-gradient(120% 60% at 110% -10%, color-mix(in srgb, var(--pink-2) 10%, transparent) 0%, transparent 60%),
    linear-gradient(180deg,#230f1f4d,#0b101b12);
  border-left:1px solid #202024;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
  z-index:1000; display:flex; flex-direction:column; padding:16px; box-shadow:var(--shadow);
}
.cart-panel.open{ transform:translateX(0); }
.cart-panel h2{ margin:2px 0 4px; font-size:1.2rem; font-weight:800; }
.cart-items{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; }

/* Cart item */
.cart-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;
  background:#fd308d03; border:1px solid #1e1e22; border-radius:12px; padding:10px;
}
.cart-thumb{ width:56px; height:56px; border-radius:10px; background:center/cover no-repeat; border:1px solid #23232a; }
.cart-main{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cart-title{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-meta{ color:var(--muted); font-size:.95rem; }
.cart-line-total{ font-weight:800; color:#c7f9cc; white-space:nowrap; }
.cart-qty{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.qty-btn,.rmv-btn{
  border:1px solid #2b2b31; background:#17171b; color:#e5e7eb; border-radius:8px; padding:4px 8px; cursor:pointer; font-weight:800;
}
.qty-btn{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; }
.qty-btn:hover,.rmv-btn:hover{ background:#1e1e24; border-color:#3a3a42; }
.rmv-btn{ margin-left:6px; font-size:.85rem; opacity:.9; }

/* Summary & checkout */
.cart-summary{
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--line); padding-top:12px; margin-top:8px;
}
.cart-summary .row{ display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.cart-summary .row.total{ font-size:1.05rem; padding-top:4px; }
.coupon{ display:flex; gap:8px; }
.coupon input{
  flex:1; background:#0f0f0f; border:1px solid #262626; color:#fff;
  border-radius:8px; padding:10px 12px; font-weight:600;
}
.perk{ display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.perk-bar{ height:8px; background:#161823; border:1px solid #24283a; border-radius:999px; overflow:hidden; }
.perk-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--pink-2),var(--brand-2),var(--brand)); }

.cart-footer{
  position:sticky; bottom:0;
  background:
    linear-gradient(180deg,rgba(168,85,247,.08),transparent),
    linear-gradient(180deg,#230f1f4d,#0b101b12);
  padding-top:12px; margin-top:8px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cart-footer .total{ font-weight:800; }
.checkout{ width:100%; }

/* ================== TOAST (Added to cart + Undo) ================== */
.toast{
  position:fixed; bottom:16px; right:16px; z-index:2000;
  background:linear-gradient(180deg,#12162a,#0e1424);
  border:1px solid color-mix(in srgb, var(--pink-2) 30%, var(--line)); color:#e5e7eb;
  display:none; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; box-shadow:var(--shadow);
}
.toast.show{ display:flex; animation:toastIn .2s ease; }
.toast .undo{
  margin-left:4px; background:#171d2c; border:1px solid #2b3550; padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:800;
}
.toast .undo:hover{ background:#1e2740; }
@keyframes toastIn{ from{ transform:translateY(6px); opacity:0 } to{ transform:none; opacity:1 } }

/* ================== FLYING THUMB (animation) ================== */
.fly-img{
  position:absolute; width:50px; height:50px; border-radius:8px;
  background:linear-gradient(135deg,var(--pink-2),var(--brand-2)); pointer-events:none; z-index:2000;
  animation:flyToCart 1s ease forwards;
}
@keyframes flyToCart{
  0% { transform:scale(1) translate(0,0); opacity:1; }
  100%{ transform:scale(.3) translate(var(--x), var(--y)); opacity:0; }
}

/* ================== ADMIN / PRODUCT CREATE FORM ================== */
.products-grid{ display:grid; grid-template-columns:2fr 1fr; gap:25px; align-items:start; }
.form-card{
  background:var(--panel-3); border:1px solid var(--border); border-radius:12px; padding:25px; display:flex; flex-direction:column; gap:20px;
}
.form-header{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.form-header .iconify{ font-size:22px; color:var(--brand-2); }
.form-header h3{ font-size:1.1rem; }
.form-subtitle{ font-size:.86rem; color:#888; }

.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-group label{ font-weight:700; font-size:.92rem; }
.form-group input{
  padding:10px 12px; border-radius:10px; border:1px solid #333; background:#0d0d0d; color:#fff; font-size:.95rem;
}
.form-group input:focus{ border-color:var(--brand-2); outline:none; box-shadow:var(--focus); }
.form-help{ font-size:.8rem; color:#666; }

.input-group{ position:relative; }
.input-group .prefix{
  position:absolute; top:50%; left:10px; transform:translateY(-50%); color:#888; font-size:.9rem;
}
.input-group input{ padding-left:28px; }

.preview h4{ font-size:.92rem; margin-bottom:8px; }
.preview-box{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel-4); border:1px solid var(--border); border-radius:8px; padding:12px 15px;
}
.preview-left{ display:flex; align-items:center; gap:10px; }
.preview-left .iconify{ font-size:22px; color:var(--brand-2); }
.preview-left strong{ font-size:.92rem; }
.preview-left .badge{
  background:#222; color:#fce7f3; font-size:.8rem; padding:3px 8px; border-radius:6px; border:1px solid color-mix(in srgb, var(--pink-2) 35%, #333);
}
.preview-box .btn.small{
  padding:6px 12px; background:#222; border:1px solid #333; color:#aaa; font-size:.85rem; border-radius:8px; cursor:pointer;
}
.preview-box .btn.small:hover{ background:#2a2a2a; }

/* Form alerts */
.form-error{
  margin-top:10px; font-size:.86rem; color:var(--danger);
  display:flex; align-items:center; gap:6px;
}
.form-actions{ margin-top:16px; display:flex; justify-content:space-between; gap:10px; }
.form-actions .btn.cancel{ background:none; border:none; color:#aaa; cursor:pointer; }
.form-actions .btn.primary{
  background:linear-gradient(135deg, var(--pink-2), var(--brand-2));
  border:none; color:#fff; font-weight:800; padding:10px 16px; border-radius:10px; cursor:pointer; transition:.2s ease;
}
.form-actions .btn.primary:hover{ filter:brightness(1.04); }

/* ================== ACCESSIBILITY & PREFS ================== */
:where(a,button,.btn,.tab,.product,.faq-q):focus-visible{ outline:none; box-shadow:var(--focus); }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ================== RESPONSIVE ================== */
@media (max-width:980px){
  .about-box{ grid-template-columns:1fr; padding:28px 20px; }
  .products-grid{ grid-template-columns:1fr; }
  .header-inner{ padding:0 12px; }
}

/* ================== EXTRA UTILITIES ALREADY USED ================== */
.hr{
  height:1px; background:linear-gradient(90deg,transparent,#3a3f55,transparent);
  border:none; margin:10px 0;
}

/* ================== LIGHT THEME — Pink & White ================== */
:root[data-theme="light"]{
  /* Base */
  --bg:#fff8fb;
  --text:#0b0d12;
  --muted:#5b6472;
  --muted-2:#6b7280;
  --line:rgba(0,0,0,.10);

  /* Brand (pink scale) */
  --brand:#ec4899;   /* pink-500 */
  --brand-2:#f472b6; /* pink-400 */
  --brand-3:#db2777; /* pink-600 */

  /* Surfaces */
  --panel:rgba(255,255,255,.72);
  --panel-2:rgba(255,255,255,.88);
  --panel-3:#ffffff;
  --panel-4:#f8fafc;
  --card:#ffffff;

  /* Layout & effects */
  --border:#e5e7eb;
  --shadow:0 20px 40px rgba(216,114,165,.15), 0 8px 20px rgba(2,6,23,.06);
  --focus:0 0 0 3px rgba(236,72,153,.25);

  /* States */
  --ok:#16a34a;
  --danger:#ef4444;
}
:root[data-theme="light"] body{
  color:var(--text);
  background:
    radial-gradient(1200px 720px at 75% -160px, #ffe4f2 0%, transparent 60%),
    radial-gradient(1000px 600px at -10% -160px, #f8e7ff 0%, transparent 55%),
    linear-gradient(180deg,#ffffff,#fff8fb 40%);
}
:root[data-theme="light"] body::after{ opacity:.06; mix-blend-mode:multiply; }

/* Header & nav */
:root[data-theme="light"] header{
  background:rgba(255,255,255,.7);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px) saturate(140%);
}
:root[data-theme="light"] nav a:hover{ background:rgba(0,0,0,.04); color:var(--text); }
:root[data-theme="light"] nav a.active::after{
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
}

/* Top bar */
:root[data-theme="light"] .top-bar{
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
}

/* Buttons & badges */
:root[data-theme="light"] .btn{
  background:#fff; color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 4px 10px rgba(149,114,165,.06);
}
:root[data-theme="light"] .btn:hover{
  background:#ffffff; border-color:#d1d5db;
  box-shadow:0 8px 18px rgba(236,72,153,.12);
}
:root[data-theme="light"] .btn-primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
}
:root[data-theme="light"] .btn-dark{
  background:#f4f5f7; color:#111827; border-color:#e5e7eb;
}
:root[data-theme="light"] .btn-outline{
  background:transparent; color:#111827; border-color:#e5e7eb;
}
:root[data-theme="light"] .btn-ghost{
  background:transparent; color:#374151; border-color:transparent;
}
:root[data-theme="light"] .btn-ghost:hover{ background:rgba(0,0,0,.04); }
:root[data-theme="light"] .badge{
  background:#fff; color:#111827; border:1px solid var(--border);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(236,72,153,.12);
}

/* Hero */
:root[data-theme="light"] .hero{ border-bottom:1px solid var(--border); }
:root[data-theme="light"] .hero .highlight{ color:var(--brand); }

/* About */
:root[data-theme="light"] .about-box{
  background:rgba(255,255,255,.8);
  border:1px solid var(--border);
}
:root[data-theme="light"] .about-card{
  background:#fff; border:1px solid var(--border);
}
:root[data-theme="light"] .about-card:hover{
  background:#fff; box-shadow:var(--shadow); transform:translateY(-3px);
}
:root[data-theme="light"] .about-card .icon{
  background:#fff0f6; border:1px solid #fce7f3;
}
:root[data-theme="light"] .promo-badge{
  background:#fff; border:1px solid var(--border); color:#9b1c68;
}

/* Tabs (pills) */
:root[data-theme="light"] .tabs{
  background:#ffffff; border:1px solid var(--border);
}
:root[data-theme="light"] .tab{ color:#374151; }
:root[data-theme="light"] .tab.active{ color:#111827; }
:root[data-theme="light"] .tabs::after{
  background:linear-gradient(180deg,#ffe7f3,#ffd9ec);
}

/* Product grid */
:root[data-theme="light"] .product{
  background:#fff; border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(2,6,23,.04);
}
:root[data-theme="light"] .product:hover{
  border-color:#fbcfe8;
  box-shadow:0 10px 28px rgba(236,72,153,.14);
}
:root[data-theme="light"] .product-img{
  background:#f8fafc center/cover no-repeat; border:1px solid var(--border);
}
:root[data-theme="light"] .product-img::after{
  background:linear-gradient(180deg,transparent 60%, rgba(255,255,255,.65));
}
:root[data-theme="light"] .card-badge{
  background:linear-gradient(180deg,#10b981,#059669);
  border:1px solid rgba(255,255,255,.55);
}
:root[data-theme="light"] .price{ color:#db2777; }

/* Reviews */
:root[data-theme="light"] .review-card{ background:#fff; border:1px solid var(--border); }
:root[data-theme="light"] .stars .iconify{ color:#f59e0b; }

/* FAQ */
:root[data-theme="light"] .faq-item{
  background:#fff; border:1px solid var(--border);
}
:root[data-theme="light"] .faq-q{ color:#111827; }
:root[data-theme="light"] .faq-a{ color:#4b5563; }

/* Footer */
:root[data-theme="light"] footer{
  background:#fff; border:1px solid var(--border); color:#111827;
}
:root[data-theme="light"] .footer-links a{ color:#374151; }
:root[data-theme="light"] .footer-links a:hover{ color:#111827; }

/* Cart */
:root[data-theme="light"] .cart-overlay{ background:rgba(0,0,0,.35); }
:root[data-theme="light"] .cart-panel{
  background:#ffffff; border-left:1px solid var(--border);
}
:root[data-theme="light"] .cart-item{ background:#fff; border:1px solid var(--border); }
:root[data-theme="light"] .cart-thumb{ border-color:#e5e7eb; }
:root[data-theme="light"] .qty-btn, 
:root[data-theme="light"] .rmv-btn{
  background:#fff; color:#111827; border:1px solid #e5e7eb;
}
:root[data-theme="light"] .qty-btn:hover, 
:root[data-theme="light"] .rmv-btn:hover{
  background:#f9fafb; border-color:#d1d5db;
}
:root[data-theme="light"] .cart-summary{ border-top:1px solid var(--border); }
:root[data-theme="light"] .perk-bar{ background:#f3f4f6; border-color:#e5e7eb; }
:root[data-theme="light"] .perk-fill{ background:linear-gradient(90deg,var(--brand-2),var(--brand)); }
:root[data-theme="light"] .cart-footer{
  background:linear-gradient(180deg,#ffffff,#fff8fb);
  border-top:1px solid var(--border);
}

/* Toast */
:root[data-theme="light"] .toast{
  background:#fff; color:#111827; border:1px solid var(--border);
}

/* Header cart icon */
:root[data-theme="light"] .cart-icon{
  background:#fff; border:1px solid var(--border); color:#111827;
}
:root[data-theme="light"] .cart-count{
  background:#ef4444; border-color:#fecaca;
}

/* Aurora accent (hero) */
:root[data-theme="light"] .aurora{
  height:260px;
  background:conic-gradient(from 0deg at 50% 50%, #fbcfe899, #fde68a66, #a7f3d066, #fbcfe899);
  filter:blur(44px) saturate(120%); opacity:.45;
}

/* Inputs */
:root[data-theme="light"] .floating input{
  background:#fff; color:#111827; border:1px solid #e5e7eb;
}
:root[data-theme="light"] .floating label{ color:#6b7280; }
:root[data-theme="light"] .floating input:focus + label,
:root[data-theme="light"] .floating input:not(:placeholder-shown) + label{
  background:#fff; color:#374151;
}
:root[data-theme="light"] .coupon input{
  background:#fff; border:1px solid #e5e7eb; color:#111827;
}

/* Scrollbar (desktop) */
@media (pointer:fine){
  :root[data-theme="light"] *{ scrollbar-color:#d1d5db transparent; }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#d1d5db; }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#c0c6d1; }
}