/* Site looks: picked in Owner Panel > Look. Applied as attributes on <html>. */
:root { --on-accent: #fff; }
.btn-primary { color: var(--on-accent); }
.cart-badge, .sale-tag, .shop-tabs a.active, .plan-badge { color: var(--on-accent); }
.section-go::after { border-color: var(--on-accent); }

/* ---------- color themes ---------- */
html[data-theme="ice"] {
  --red: #38bdf8; --red-dark: #0369a1; --accent-rgb: 56, 189, 248;
  --bg: #06090e; --bg-alt: #0c121a; --card: #111821; --card-border: #213040;
  --steel-1: #141c26; --steel-2: #0c1219; --steel-edge: #263445; --steel-hi: #c7dcef;
}
html[data-theme="gold"] {
  --red: #f5b70a; --red-dark: #a86d00; --accent-rgb: 245, 183, 10; --on-accent: #120d00;
  --bg: #0b0906; --bg-alt: #14110b; --card: #1a160e; --card-border: #352c19;
  --steel-1: #1d1810; --steel-2: #120f09; --steel-edge: #3a301b; --steel-hi: #f1dfb0;
}
html[data-theme="toxic"] {
  --red: #4dff7a; --red-dark: #0f9b3a; --accent-rgb: 77, 255, 122; --on-accent: #03140a;
  --bg: #050a07; --bg-alt: #0b120d; --card: #101912; --card-border: #1f3324;
  --steel-1: #121c15; --steel-2: #0a110c; --steel-edge: #23392a; --steel-hi: #c6f2d2;
}
html[data-theme="purple"] {
  --red: #b26bff; --red-dark: #6d28d9; --accent-rgb: 178, 107, 255;
  --bg: #08060d; --bg-alt: #110d19; --card: #171221; --card-border: #2c2240;
  --steel-1: #1a1426; --steel-2: #0f0b16; --steel-edge: #33284a; --steel-hi: #dccbf5;
}
html[data-theme="sunset"] {
  --red: #ff7a1a; --red-dark: #c2410c; --accent-rgb: 255, 122, 26; --on-accent: #1a0a00;
  --bg: #0c0806; --bg-alt: #160f0a; --card: #1c140e; --card-border: #3a2618;
  --steel-1: #20160f; --steel-2: #130d08; --steel-edge: #3d2a1b; --steel-hi: #f5d6bd;
}
html[data-theme="chrome"] {
  --red: #e7e9ee; --red-dark: #9aa0ab; --accent-rgb: 231, 233, 238; --on-accent: #0a0a0c;
  --bg: #08080a; --bg-alt: #101013; --card: #16161a; --card-border: #2c2c33;
  --steel-1: #1b1b20; --steel-2: #0f0f12; --steel-edge: #3a3a42; --steel-hi: #ffffff;
}
html[data-theme="mud"] {
  --red: #d98b3a; --red-dark: #8a4f17; --accent-rgb: 217, 139, 58; --on-accent: #140a02;
  --bg: #0b0907; --bg-alt: #15110c; --card: #1b1610; --card-border: #362a1c;
  --steel-1: #1f1912; --steel-2: #120e0a; --steel-edge: #3b2e1f; --steel-hi: #ead7bf;
}
html[data-theme="bloodmoon"] {
  --red: #e0102f; --red-dark: #7d0619; --accent-rgb: 224, 16, 47;
  --bg: #0d0506; --bg-alt: #160a0b; --card: #1c0e0f; --card-border: #3a1a1c;
  --steel-1: #22100f; --steel-2: #140808; --steel-edge: #44201f; --steel-hi: #f3c9cd;
}
html[data-theme="synthwave"] {
  --red: #ff3ea5; --red-dark: #a3166a; --accent-rgb: 255, 62, 165;
  --bg: #0a0610; --bg-alt: #120b1c; --card: #181022; --card-border: #33213f;
  --steel-1: #1d1228; --steel-2: #100a17; --steel-edge: #3a2648; --steel-hi: #f6c6e3;
}
html[data-theme="cobalt"] {
  --red: #3d6bff; --red-dark: #1d3fb8; --accent-rgb: 61, 107, 255;
  --bg: #05070f; --bg-alt: #0a0f1d; --card: #0f1528; --card-border: #1f2b4d;
  --steel-1: #111a33; --steel-2: #090e1c; --steel-edge: #253461; --steel-hi: #c9d6ff;
}
html[data-theme="teal"] {
  --red: #14d1c1; --red-dark: #0b7f76; --accent-rgb: 20, 209, 193; --on-accent: #021412;
  --bg: #040b0b; --bg-alt: #091414; --card: #0d1b1b; --card-border: #1a3333;
  --steel-1: #0f1f20; --steel-2: #081212; --steel-edge: #1f3a3b; --steel-hi: #bff2ec;
}
html[data-theme="ranger"] {
  --red: #a9b85a; --red-dark: #5f6a2a; --accent-rgb: 169, 184, 90; --on-accent: #0d1004;
  --bg: #090a06; --bg-alt: #11130c; --card: #171a10; --card-border: #2e331e;
  --steel-1: #1b1d12; --steel-2: #0f110a; --steel-edge: #353a23; --steel-hi: #e1e5c2;
}
html[data-theme="rosegold"] {
  --red: #e8a598; --red-dark: #a8645a; --accent-rgb: 232, 165, 152; --on-accent: #1a0c09;
  --bg: #0c0809; --bg-alt: #151012; --card: #1c1517; --card-border: #3a2b2e;
  --steel-1: #20171a; --steel-2: #120d0e; --steel-edge: #42322f; --steel-hi: #f6dcd5;
}
html[data-theme] body { background: var(--bg); }

/* ---------- corner styles ---------- */
html[data-corners="rounded"] .plate,
html[data-corners="rounded"] .product-card,
html[data-corners="rounded"] .section-plate,
html[data-corners="rounded"] .summary-card,
html[data-corners="rounded"] .checkout-block,
html[data-corners="rounded"] .cart-item,
html[data-corners="rounded"] .order-item,
html[data-corners="rounded"] .product-media,
html[data-corners="rounded"] .page-head-art { clip-path: none; border-radius: 16px; overflow: hidden; }
html[data-corners="rounded"] .btn,
html[data-corners="rounded"] .type-tag,
html[data-corners="rounded"] .sale-tag,
html[data-corners="rounded"] .variant-picker span,
html[data-corners="rounded"] .swatch,
html[data-corners="rounded"] .section-go { clip-path: none; border-radius: 999px; }
html[data-corners="rounded"] .gallery-thumb { clip-path: none; border-radius: 10px; }

html[data-corners="square"] .plate,
html[data-corners="square"] .product-card,
html[data-corners="square"] .section-plate,
html[data-corners="square"] .summary-card,
html[data-corners="square"] .checkout-block,
html[data-corners="square"] .cart-item,
html[data-corners="square"] .order-item,
html[data-corners="square"] .product-media,
html[data-corners="square"] .page-head-art,
html[data-corners="square"] .btn,
html[data-corners="square"] .type-tag,
html[data-corners="square"] .sale-tag,
html[data-corners="square"] .variant-picker span,
html[data-corners="square"] .swatch,
html[data-corners="square"] .section-go,
html[data-corners="square"] .gallery-thumb { clip-path: none; border-radius: 0; }

/* ---------- background effects ---------- */
html[data-bg="grid"] body {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}
html[data-bg="carbon"] body {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.35) 0 6px, transparent 6px 12px);
}
html[data-bg="plain"] .home-hero,
html[data-bg="plain"] .page-head { background: var(--bg-alt); }
html[data-bg="grid"] .page-section-alt,
html[data-bg="carbon"] .page-section-alt { background: rgba(0,0,0,0.35); }

/* ---------- announcement bar ---------- */
.announce {
  background: var(--red); color: var(--on-accent);
  text-align: center; font-weight: 600; font-size: 0.88rem; padding: 8px 16px;
}
.announce a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Owner Panel: Look picker ---------- */
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.look-option { position: relative; cursor: pointer; }
.look-option input { position: absolute; opacity: 0; pointer-events: none; }
.look-card {
  display: block; padding: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-border);
}
.look-option input:checked + .look-card { box-shadow: inset 0 0 0 2px var(--red); }
.look-option input:focus-visible + .look-card { outline: 2px solid var(--steel-hi); outline-offset: 2px; }
.look-swatches { display: flex; height: 44px; margin-bottom: 10px; }
.look-swatches span { flex: 1; }
.look-name { font-weight: 700; display: block; }
.look-desc { color: var(--muted); font-size: 0.8rem; }
.look-mini { height: 54px; margin-bottom: 10px; background: var(--steel-1); position: relative; }
.look-mini::before { content: ''; position: absolute; inset: 12px 30% 12px 12px; background: var(--steel-edge); }
.look-mini.c-angled::before { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.look-mini.c-rounded::before { border-radius: 10px; }
.look-mini.b-grid { background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 10px 10px; }
.look-mini.b-carbon { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 3px, transparent 3px 6px); }
.look-mini.b-glow { background: radial-gradient(circle at 70% 50%, rgba(var(--accent-rgb), 0.5), var(--steel-2) 70%); }
.look-mini.b-plain { background: var(--bg-alt); }
.look-mini.b-glow::before, .look-mini.b-grid::before, .look-mini.b-carbon::before, .look-mini.b-plain::before { display: none; }
.look-sticky { position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(transparent, var(--bg) 40%); display: flex; gap: 12px; align-items: center; }

/* ---------- more color themes ---------- */
html[data-theme="ember"] {
  --red: #ff4d1f; --red-dark: #a8260a; --accent-rgb: 255, 77, 31;
  --bg: #0d0705; --bg-alt: #170d09; --card: #1d110c; --card-border: #3d2117;
  --steel-1: #22120c; --steel-2: #140a07; --steel-edge: #46271b; --steel-hi: #f7cfc2;
}
html[data-theme="volt"] {
  --red: #d4ff2e; --red-dark: #7f9c06; --accent-rgb: 212, 255, 46; --on-accent: #0f1400;
  --bg: #090a04; --bg-alt: #11130a; --card: #171a0d; --card-border: #2f351a;
  --steel-1: #1b1e0d; --steel-2: #0f1107; --steel-edge: #353c1d; --steel-hi: #eef7c4;
}
html[data-theme="ocean"] {
  --red: #00c2ff; --red-dark: #006d99; --accent-rgb: 0, 194, 255; --on-accent: #001520;
  --bg: #03080e; --bg-alt: #081320; --card: #0c1a28; --card-border: #183049;
  --steel-1: #0c1a28; --steel-2: #061019; --steel-edge: #1c3955; --steel-hi: #c2ecff;
}
html[data-theme="mint"] {
  --red: #3ee0a0; --red-dark: #138a5c; --accent-rgb: 62, 224, 160; --on-accent: #02140c;
  --bg: #050b09; --bg-alt: #0b1612; --card: #101d18; --card-border: #1e3a2f;
  --steel-1: #10201a; --steel-2: #08120e; --steel-edge: #234236; --steel-hi: #c9f5e3;
}
html[data-theme="magenta"] {
  --red: #e646f5; --red-dark: #8e1aa0; --accent-rgb: 230, 70, 245;
  --bg: #0b050c; --bg-alt: #140a16; --card: #1a0f1d; --card-border: #3a1f40;
  --steel-1: #1f1022; --steel-2: #120914; --steel-edge: #44264b; --steel-hi: #f3c8f7;
}
html[data-theme="slate"] {
  --red: #94a8c6; --red-dark: #556683; --accent-rgb: 148, 168, 198; --on-accent: #0a0d12;
  --bg: #08090c; --bg-alt: #0f1116; --card: #15181e; --card-border: #2a303b;
  --steel-1: #171a21; --steel-2: #0e1015; --steel-edge: #323946; --steel-hi: #dde4ef;
}

/* ---------- more backgrounds ---------- */
html[data-bg="dots"] body { background-image: radial-gradient(rgba(255,255,255,0.05) 1.2px, transparent 1.6px); background-size: 22px 22px; }
html[data-bg="stripes"] body { background-image: repeating-linear-gradient(-55deg, rgba(var(--accent-rgb),0.035) 0 18px, transparent 18px 64px); }
html[data-bg="scanlines"] body { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px); }
html[data-bg="aurora"] body {
  background-image:
    radial-gradient(ellipse 55% 45% at 12% 8%, rgba(var(--accent-rgb),0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 92% 38%, rgba(var(--accent-rgb),0.10), transparent 70%),
    radial-gradient(ellipse 60% 45% at 30% 100%, rgba(var(--accent-rgb),0.08), transparent 70%);
  background-attachment: fixed;
}
html[data-bg="dots"] .page-section-alt, html[data-bg="stripes"] .page-section-alt,
html[data-bg="scanlines"] .page-section-alt, html[data-bg="aurora"] .page-section-alt { background: rgba(0,0,0,0.3); }

/* ---------- heading fonts ---------- */
html[data-font="russo"] { --font-head: 'Russo One', 'Inter', sans-serif; }
html[data-font="bebas"] { --font-head: 'Bebas Neue', 'Inter', sans-serif; }
html[data-font="bebas"] h1, html[data-font="bebas"] h2, html[data-font="bebas"] h3 { letter-spacing: .03em; font-weight: 400; }
html[data-font="bebas"] .product-name { font-size: 1.3rem; }
html[data-font="bebas"] .product-price, html[data-font="bebas"] .price-amount { letter-spacing: .03em; }
html[data-font="rajdhani"] { --font-head: 'Rajdhani', 'Inter', sans-serif; }
html[data-font="chakra"] { --font-head: 'Chakra Petch', 'Inter', sans-serif; }
html[data-font="inter"] { --font-head: 'Inter', system-ui, sans-serif; }
html[data-font="inter"] h1, html[data-font="inter"] h2 { letter-spacing: -0.01em; }

/* ---------- button styles ---------- */
html[data-buttons="solid"] .btn-primary { background: var(--red); }
html[data-buttons="outline"] .btn-primary {
  background: rgba(var(--accent-rgb), 0.06); color: var(--red); box-shadow: inset 0 0 0 2px var(--red);
}
html[data-buttons="outline"] .btn-primary:hover { background: var(--red); color: var(--on-accent); }
html[data-buttons="neon"] .btn-primary {
  background: rgba(var(--accent-rgb), 0.12); color: var(--steel-hi);
  box-shadow: inset 0 0 0 1px var(--red), 0 0 14px rgba(var(--accent-rgb), 0.45), inset 0 0 12px rgba(var(--accent-rgb), 0.25);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7);
}
html[data-buttons="neon"] .btn-primary:hover {
  box-shadow: inset 0 0 0 1px var(--red), 0 0 26px rgba(var(--accent-rgb), 0.75), inset 0 0 16px rgba(var(--accent-rgb), 0.35);
}
/* angled corners cut off outer shadows, so neon glows inward there */
html[data-corners="angled"][data-buttons="neon"] .btn-primary,
html[data-corners="angled"][data-buttons="neon"] .btn-primary:hover { box-shadow: inset 0 0 0 1px var(--red), inset 0 0 18px rgba(var(--accent-rgb), 0.45); }

/* ---------- card styles ---------- */
html[data-cards="raised"] .product-card,
html[data-cards="raised"] .plate,
html[data-cards="raised"] .summary-card,
html[data-cards="raised"] .order-card { box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); border-color: transparent; }
html[data-cards="glass"] .product-card,
html[data-cards="glass"] .plate,
html[data-cards="glass"] .summary-card,
html[data-cards="glass"] .order-card {
  background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.09);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-cards="accent"] .product-card,
html[data-cards="accent"] .summary-card,
html[data-cards="accent"] .order-card { box-shadow: inset 0 3px 0 var(--red); }

/* ---------- text size ---------- */
html[data-text="large"] { font-size: 106.25%; }
html[data-text="large"] body { font-size: 1.06rem; }
html[data-text="large"] .small, html[data-text="large"] .muted.small { font-size: 0.92rem; }

/* ---------- announcement bar styles ---------- */
html[data-bar="dark"] .announce { background: var(--bg-alt); color: var(--red); border-bottom: 1px solid var(--card-border); }
html[data-bar="gradient"] .announce { background: linear-gradient(90deg, var(--red-dark), var(--red) 50%, var(--red-dark)); }
html[data-bar="ticker"] .announce { overflow: hidden; white-space: nowrap; text-align: left; }
html[data-bar="ticker"] .announce-text { display: inline-block; padding-left: 100%; animation: announce-tick 18s linear infinite; }
html[data-bar="ticker"] .announce:hover .announce-text { animation-play-state: paused; }
@keyframes announce-tick { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  html[data-bar="ticker"] .announce { text-align: center; white-space: normal; }
  html[data-bar="ticker"] .announce-text { animation: none; padding-left: 0; }
}
html[data-motion="off"][data-bar="ticker"] .announce { text-align: center; white-space: normal; }
html[data-motion="off"][data-bar="ticker"] .announce-text { animation: none; padding-left: 0; }

/* ---------- Look picker previews for the new options ---------- */
.look-mini.b-dots { background-image: radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1.4px); background-size: 8px 8px; }
.look-mini.b-stripes { background-image: repeating-linear-gradient(-55deg, rgba(var(--accent-rgb),0.25) 0 5px, transparent 5px 14px); }
.look-mini.b-scanlines { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 3px); }
.look-mini.b-aurora { background: radial-gradient(ellipse 70% 80% at 20% 20%, rgba(var(--accent-rgb),0.45), transparent 70%), radial-gradient(ellipse 60% 70% at 90% 90%, rgba(var(--accent-rgb),0.3), transparent 70%), var(--steel-2); }
.look-mini.b-dots::before, .look-mini.b-stripes::before, .look-mini.b-scanlines::before, .look-mini.b-aurora::before { display: none; }
.look-font-sample { display: block; font-size: 1.35rem; line-height: 1.2; margin-bottom: 8px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-btn-sample { display: flex; align-items: center; justify-content: center; height: 54px; margin-bottom: 10px; background: var(--steel-2); }
.look-btn-sample i { font-style: normal; font-weight: 700; font-size: .82rem; padding: 7px 14px; border-radius: 6px; }
.look-btn-sample.bt-gradient i { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: var(--on-accent); }
.look-btn-sample.bt-solid i { background: var(--red); color: var(--on-accent); }
.look-btn-sample.bt-outline i { box-shadow: inset 0 0 0 2px var(--red); color: var(--red); }
.look-btn-sample.bt-neon i { color: var(--steel-hi); background: rgba(var(--accent-rgb),.12); box-shadow: inset 0 0 0 1px var(--red), 0 0 12px rgba(var(--accent-rgb),.55); text-shadow: 0 0 6px rgba(var(--accent-rgb),.8); }
.look-mini.cd-standard::before { background: var(--card); box-shadow: inset 0 0 0 1px var(--card-border); }
.look-mini.cd-raised::before { background: var(--card); box-shadow: 0 6px 14px rgba(0,0,0,.7); }
.look-mini.cd-glass { background: radial-gradient(circle at 75% 40%, rgba(var(--accent-rgb),.55), var(--steel-2) 60%); }
.look-mini.cd-glass::before { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.look-mini.cd-accent::before { background: var(--card); box-shadow: inset 0 3px 0 var(--red); }
.look-text-sample { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin-bottom: 10px; padding: 0 12px 10px; background: var(--steel-2); font-weight: 700; color: var(--text); }
.look-text-sample.tx-normal { font-size: 1rem; } .look-text-sample.tx-large { font-size: 1.25rem; }
.look-bar-sample { display: block; height: 54px; margin-bottom: 10px; background: var(--steel-2); position: relative; overflow: hidden; }
.look-bar-sample::before { content: 'SALE'; position: absolute; left: 0; right: 0; top: 0; height: 18px; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; letter-spacing: .08em; }
.look-bar-sample.br-solid::before { background: var(--red); color: var(--on-accent); }
.look-bar-sample.br-dark::before { background: var(--bg-alt); color: var(--red); box-shadow: 0 1px 0 var(--card-border); }
.look-bar-sample.br-gradient::before { background: linear-gradient(90deg, var(--red-dark), var(--red), var(--red-dark)); color: var(--on-accent); }
.look-bar-sample.br-ticker::before { background: var(--red); color: var(--on-accent); content: 'SALE  •  SALE  •  SALE  •  SALE'; text-align: left; padding-left: 40%; white-space: nowrap; }
.look-mini.cd-standard, .look-mini.cd-raised, .look-mini.cd-glass, .look-mini.cd-accent { display: block; }