/* The website styles. Each [data-style] sets base.css's tokens from the
   palette (--p-deep, --p-dark, --p-primary, --p-accent, --p-soft, --p-muted)
   and adds its own character. Batch 1: snow, glass, clay, motion, luxury. */

/* ================================================================ 1. SNOW
   Clean white, generous space, product photos do the talking. */
[data-style='snow'] {
  --bg: #fbfbfc;
  --bg-2: color-mix(in srgb, var(--p-soft) 22%, #f4f5f7);
  --surface: #ffffff;
  --text: #0c0d10;
  --muted: #6b7078;
  --line: rgba(12, 13, 16, 0.07);
  --radius: 20px;
  --shadow: 0 1px 2px rgba(12, 13, 16, 0.04);
  --shadow-hover: 0 22px 48px rgba(12, 13, 16, 0.10);
}
[data-style='snow'] .hero { background: linear-gradient(180deg, color-mix(in srgb, var(--p-soft) 28%, #fff), #fbfbfc); }
[data-style='snow'] .card { border-color: transparent; }
[data-style='snow'] .card-media { border-radius: var(--radius); }

/* ================================================================ 2. GLASS
   Dark glass: frosted panels floating over a deep, softly lit backdrop. */
[data-style='glass'] {
  color-scheme: dark;
  --bg: var(--p-deep);
  --bg-2: rgba(255, 255, 255, 0.04);
  --surface: color-mix(in srgb, var(--p-dark) 78%, #000);
  --text: #eef3f6;
  --muted: color-mix(in srgb, var(--p-soft) 70%, #9aa4ad);
  --line: rgba(255, 255, 255, 0.12);
  --primary: var(--p-accent);
  --on-primary: var(--p-on-accent);
  --accent: var(--p-soft);
  --header-bg: rgba(10, 14, 20, 0.45);
  --card-bg: rgba(255, 255, 255, 0.06);
  --chip-bg: rgba(255, 255, 255, 0.07);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.18);
  --radius: 22px;
}
[data-style='glass'] #bg {
  background:
    radial-gradient(40% 50% at 85% 10%, color-mix(in srgb, var(--p-accent) 45%, transparent), transparent 70%),
    radial-gradient(45% 55% at 10% 60%, color-mix(in srgb, var(--p-primary) 55%, transparent), transparent 70%),
    radial-gradient(35% 45% at 60% 100%, color-mix(in srgb, var(--p-muted) 60%, transparent), transparent 70%),
    var(--p-deep);
}
[data-style='glass'] .site-header,
[data-style='glass'] .card,
[data-style='glass'] .chip,
[data-style='glass'] .search,
[data-style='glass'] .cart-btn,
[data-style='glass'] .size {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
[data-style='glass'] .card { border-color: rgba(255, 255, 255, 0.12); }
[data-style='glass'] .card::before { content: ''; position: absolute; }
[data-style='glass'] .modal-card,
[data-style='glass'] .drawer {
  background: color-mix(in srgb, var(--p-deep) 70%, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-style='glass'] .btn-primary { background: linear-gradient(135deg, var(--p-accent), var(--p-primary)); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--p-accent) 45%, transparent); }
[data-style='glass'] .hero-pic { border: 1px solid rgba(255, 255, 255, 0.18); }
[data-style='glass'] .badge-low { background: rgba(255, 255, 255, 0.85); }
[data-style='glass'] .price .now { color: #fff; }

/* ================================================================ 3. CLAY (3D)
   Raised, tactile pieces — the same clay as Profy's HQ buttons. */
[data-style='clay'] {
  --bg: color-mix(in srgb, var(--p-soft) 16%, #ecebe8);
  --bg-2: #e3e1dd;
  --surface: #f7f6f3;
  --text: #25221f;
  --muted: #7a746d;
  --line: rgba(0, 0, 0, 0.05);
  --chip-bg: linear-gradient(180deg, #fbf9f6, #e9e4de);
  --radius: 26px;
  --radius-sm: 16px;
  --shadow: 0 10px 22px rgba(60, 50, 40, 0.16), inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
  --shadow-hover: 0 22px 40px rgba(60, 50, 40, 0.22), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
}
[data-style='clay'] .card { background: linear-gradient(180deg, #fbfaf8, #ece8e2); border: 0; padding: 10px; }
[data-style='clay'] .card-media { border-radius: 18px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12); }
[data-style='clay'] .card:active { transform: translateY(2px) scale(0.99); box-shadow: 0 4px 10px rgba(60, 50, 40, 0.18); }
[data-style='clay'] .btn,
[data-style='clay'] .chip,
[data-style='clay'] .cart-btn,
[data-style='clay'] .size,
[data-style='clay'] .qty button {
  border: 0;
  box-shadow: 0 7px 14px rgba(60, 50, 40, 0.18), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
}
[data-style='clay'] .btn-primary,
[data-style='clay'] .chip.on,
[data-style='clay'] .size.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--p-primary) 72%, #fff), var(--p-primary));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--p-primary) 40%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
}
[data-style='clay'] .btn:active,
[data-style='clay'] .chip:active,
[data-style='clay'] .size:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(60, 50, 40, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
[data-style='clay'] .search { border: 0; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.8); background: #e8e5e0; }
[data-style='clay'] .site-header { background: color-mix(in srgb, #ecebe8 88%, transparent); }
[data-style='clay'] .hero-pic { border: 8px solid #f7f6f3; box-shadow: 0 24px 40px rgba(60, 50, 40, 0.25); }
[data-style='clay'] .modal-card, [data-style='clay'] .drawer { background: linear-gradient(180deg, #f9f8f5, #edeae4); }

/* ================================================================ 4. MOTION
   Alive: pieces glide in, photos drift, a colour band runs through. */
[data-style='motion'] {
  --bg: #fcfcfd;
  --surface: #ffffff;
  --text: #0d0f14;
  --muted: #666c78;
  --radius: 22px;
  --shadow: 0 2px 6px rgba(13, 15, 20, 0.05);
  --shadow-hover: 0 30px 60px color-mix(in srgb, var(--p-primary) 22%, transparent);
}
[data-style='motion'] .reveal { opacity: 0; transform: translateY(46px) scale(0.97); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease), filter 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-style='motion'] .reveal.in { opacity: 1; transform: none; filter: none; }
[data-style='motion'] .hero { position: relative; overflow: hidden; }
[data-style='motion'] .hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  background: conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--p-soft) 55%, transparent), color-mix(in srgb, var(--p-accent) 25%, transparent), color-mix(in srgb, var(--p-soft) 55%, transparent));
  filter: blur(80px);
  opacity: 0.55;
  animation: swirl 18s linear infinite;
  z-index: -1;
}
@keyframes swirl { to { transform: rotate(360deg); } }
[data-style='motion'] .hero-pic { animation: floaty 7s ease-in-out infinite; }
[data-style='motion'] .hp1 { animation-delay: -2s; }
[data-style='motion'] .hp2 { animation-delay: -4s; }
@keyframes floaty { 50% { transform: translateY(-14px) rotate(-1deg); } }
[data-style='motion'] .shelf-head h2 {
  background: linear-gradient(90deg, var(--text) 0%, var(--p-primary) 50%, var(--text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: -200% 0; } }
[data-style='motion'] .card:hover { transform: translateY(-8px) rotate(-0.6deg); }
[data-style='motion'] .card:hover .card-media img { transform: scale(1.12); }
[data-style='motion'] .btn-primary { background: linear-gradient(90deg, var(--p-primary), var(--p-accent), var(--p-primary)); background-size: 200% 100%; animation: sheen 5s linear infinite; color: #fff; }
[data-style='motion'] .chip.on { animation: pop 0.35s var(--ease); }
@keyframes pop { 50% { transform: scale(1.08); } }

/* ================================================================ 5. LUXURY
   Quiet and expensive: near-black, ivory type, a serif, hairlines, space. */
[data-style='luxury'] {
  color-scheme: dark;
  --bg: color-mix(in srgb, var(--p-deep) 55%, #070707);
  --bg-2: color-mix(in srgb, var(--p-dark) 60%, #0d0d0d);
  --surface: color-mix(in srgb, var(--p-dark) 40%, #111);
  --text: #f2ede3;
  --muted: #a39d92;
  --line: color-mix(in srgb, var(--p-accent) 28%, transparent);
  --primary: var(--p-accent);
  --on-primary: var(--p-on-accent);
  --accent: var(--p-accent);
  --header-bg: color-mix(in srgb, var(--p-deep) 60%, rgba(7, 7, 7, 0.85));
  --card-bg: transparent;
  --chip-bg: transparent;
  --radius: 0px;
  --radius-sm: 0px;
  --img-radius: 0px;
  --shadow: none;
  --shadow-hover: none;
  --font-display: 'Amiri', 'Reem Kufi', serif;
}
[data-style='luxury'] body { letter-spacing: 0.01em; }
[data-style='luxury'] .hero { padding: 90px 0 70px; }
[data-style='luxury'] .hero h1 { font-weight: 700; font-size: clamp(44px, 6.5vw, 86px); }
[data-style='luxury'] .eyebrow { color: var(--p-accent); letter-spacing: 0.3em; font-size: 12px; }
[data-style='luxury'] .hero-pic { border-radius: 0; box-shadow: none; outline: 1px solid var(--line); outline-offset: 10px; }
[data-style='luxury'] .card { border: 0; }
[data-style='luxury'] .card:hover { transform: none; }
[data-style='luxury'] .card-media { background: var(--bg-2); }
[data-style='luxury'] .card:hover .card-media img { transform: scale(1.03); transition-duration: 1.4s; }
[data-style='luxury'] .card-body { padding: 14px 0; text-align: center; }
[data-style='luxury'] .card-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
[data-style='luxury'] .price { justify-content: center; }
[data-style='luxury'] .price .now { color: var(--p-accent); font-weight: 700; }
[data-style='luxury'] .btn { border-radius: 0; height: 52px; letter-spacing: 0.08em; }
[data-style='luxury'] .btn-primary { background: transparent; color: var(--p-accent); border: 1px solid var(--p-accent); box-shadow: none; }
[data-style='luxury'] .btn-primary:hover { background: var(--p-accent); color: var(--p-on-accent); transform: none; }
[data-style='luxury'] .chip { border-radius: 0; border-width: 0 0 1px; border-color: transparent; }
[data-style='luxury'] .chip.on { background: transparent; color: var(--p-accent); border-color: var(--p-accent); }
[data-style='luxury'] .shelf-head { justify-content: center; flex-direction: column; align-items: center; text-align: center; }
[data-style='luxury'] .shelf-head h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); }
[data-style='luxury'] .shelf-head h2::after { content: ''; display: block; width: 48px; height: 1px; background: var(--p-accent); margin: 14px auto 0; }
[data-style='luxury'] .badge-off { background: var(--p-accent); color: var(--p-on-accent); border-radius: 0; }
[data-style='luxury'] .search, [data-style='luxury'] .cart-btn { border-radius: 0; }
[data-style='luxury'] .logo-mark { border-radius: 0; background: transparent; color: var(--p-accent); border: 1px solid var(--p-accent); font-family: var(--font-display); }