/* =====================================================================
   IDB Store — main stylesheet (components + animations)
   Loads after theme.css. Uses only theme.css variables.
   ===================================================================== */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.65; overflow-x:hidden; transition:background .5s var(--ease),color .5s var(--ease);
}
img,svg,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; margin:0; padding:0; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.12; margin:0 0 .4em; }
.img-fallback { background:var(--accent-grad); min-height:180px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,4vw,34px); }
.gradient-text { background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ---------------- Buttons ---------------- */
.btn { position:relative; display:inline-flex; align-items:center; gap:.5em; padding:.85em 1.7em; border-radius:50px;
  font-weight:600; font-size:.95rem; letter-spacing:.01em; overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.btn-primary { background:var(--accent-grad); color:#0b0b12; box-shadow:var(--accent-glow); }
[data-theme="royal-boutique"] .btn-primary { color:#fff; }
.btn-primary:hover { transform:translateY(-3px); }
.btn-primary::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-20deg); transition:left .7s var(--ease); }
.btn-primary:hover::after { left:130%; }
.btn-ghost { border:1px solid var(--glass-brd); color:var(--text); background:var(--glass); backdrop-filter:blur(8px); }
.btn-ghost:hover { border-color:var(--accent); transform:translateY(-3px); }
.btn-sm { padding:.6em 1.1em; font-size:.84rem; }
.btn-block { width:100%; justify-content:center; }

/* ---------------- Header ---------------- */
.site-header { position:sticky; top:0; z-index:200; background:var(--header-bg);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border); transition:box-shadow .4s var(--ease); }
.site-header.scrolled { box-shadow:var(--shadow-sm); }
.topbar { font-size:.78rem; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--bg-2); }
.topbar .container { display:flex; justify-content:space-between; align-items:center; min-height:34px; gap:14px; }
.topbar-marquee { overflow:hidden; white-space:nowrap; flex:1; }
.topbar-marquee span { display:inline-block; padding-left:100%; animation:marquee 18s linear infinite; }
.topbar-marquee b { color:var(--accent); }
@keyframes marquee { to { transform:translateX(-100%); } }
.topbar-right { display:flex; gap:16px; flex-shrink:0; }
.topbar-right a:hover { color:var(--accent); }

.header-main { display:flex; align-items:center; gap:22px; min-height:var(--header-h); }
.brand { display:flex; align-items:center; flex-shrink:0; color:var(--text); }
.brand-logo text[fill="currentColor"] { fill:var(--text); }

.primary-nav { display:flex; align-items:center; gap:4px; margin-inline:auto; }
.primary-nav > li > a, .nav-trigger { display:flex; align-items:center; gap:6px; padding:10px 15px; border-radius:12px;
  font-weight:500; font-size:.95rem; transition:color .25s,background .25s; }
.primary-nav > li > a:hover, .has-mega:hover .nav-trigger { color:var(--accent); background:var(--glass); }
.nav-trigger .chev { font-size:.6rem; transition:transform .3s var(--ease); }
.has-mega:hover .nav-trigger .chev { transform:rotate(180deg); }
.has-mega { position:static; }
.mega { position:absolute; left:0; right:0; top:100%; background:var(--surface); border-top:1px solid var(--border);
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(14px); transition:.35s var(--ease); z-index:150; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity:1; visibility:visible; transform:translateY(0); }
.mega-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding:30px 0 36px; }
.mega-col h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin-bottom:12px; }
.mega-col a { display:block; padding:7px 0; color:var(--text-muted); font-size:.92rem; transition:.25s; }
.mega-col a:hover { color:var(--text); padding-left:7px; }

.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.icon-btn { position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--border); background:var(--glass); transition:.3s var(--ease); }
.icon-btn:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.icon-btn svg { width:20px; height:20px; }
.count-badge { position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:var(--accent-grad); color:#0b0b12; font-size:.7rem; font-weight:700; display:grid; place-items:center; }
.menu-toggle { display:none; }

/* Theme toggle pill */
.theme-toggle { width:52px; height:30px; border-radius:50px; border:1px solid var(--border); background:var(--glass); position:relative; flex-shrink:0; }
.theme-toggle::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--accent-grad); transition:left .35s var(--ease); }
[data-theme="royal-boutique"] .theme-toggle::after { left:27px; }

/* Search overlay */
.search-panel { max-height:0; overflow:hidden; background:var(--bg-2); border-top:0 solid var(--border); transition:max-height .4s var(--ease); }
.search-panel.open { max-height:110px; border-top:1px solid var(--border); }
.search-panel form { display:flex; gap:10px; padding:18px 0; }
.search-panel input { flex:1; padding:14px 20px; border-radius:50px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:1rem; }

/* ---------------- Hero ---------------- */
.hero { position:relative; min-height:clamp(560px,88vh,900px); display:flex; align-items:center; overflow:hidden; background:var(--hero-tint),var(--bg); }
.hero-mesh { position:absolute; inset:0; z-index:0; opacity:.6; background:
  conic-gradient(from 90deg at 60% 40%, transparent, rgba(var(--accent-rgb),.08), transparent); animation:spinMesh 40s linear infinite; }
@keyframes spinMesh { to { transform:rotate(360deg); } }
.hero .container { position:relative; z-index:3; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; padding:7px 16px; border-radius:50px; background:var(--glass);
  border:1px solid var(--glass-brd); color:var(--accent); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px; }
.hero h1 { font-size:clamp(2.6rem,6.5vw,5rem); margin-bottom:.2em; }
.hero p.lead { font-size:clamp(1rem,2vw,1.25rem); color:var(--text-muted); max-width:520px; margin-bottom:2em; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:34px; margin-top:40px; }
.hero-stats .num { font-family:var(--font-display); font-size:1.9rem; font-weight:700; }
.hero-stats .lbl { color:var(--text-muted); font-size:.82rem; }

/* Floating 3D product cards */
.hero-visual { position:relative; height:520px; perspective:1400px; }
.float-card { position:absolute; width:230px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--glass-brd); background:var(--surface); transform-style:preserve-3d; }
.float-card img { width:100%; height:300px; object-fit:cover; }
.float-card .fc-cap { padding:12px 16px; }
.float-card .fc-cap b { display:block; font-size:.95rem; }
.float-card .fc-cap span { color:var(--accent); font-weight:700; }
.fc-1 { top:0; right:40px; z-index:3; animation:floaty 6s var(--ease) infinite; }
.fc-2 { bottom:10px; right:200px; z-index:2; width:200px; animation:floaty 7s var(--ease) infinite reverse; }
.fc-3 { top:120px; left:0; z-index:1; width:180px; opacity:.9; animation:floaty 8s var(--ease) infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-22px) rotate(2deg);} }

/* Animated wave divider */
.wave-divider { position:absolute; left:0; right:0; bottom:-1px; z-index:2; line-height:0; }
.wave-divider svg { width:100%; height:90px; display:block; }
.wave-divider .wave-fill { fill:var(--surface); }
.wave-anim path { animation:waveMove 8s ease-in-out infinite alternate; }
@keyframes waveMove { from { transform:translateX(0); } to { transform:translateX(-40px); } }

/* ---------------- Section heads ---------------- */
section { padding:clamp(56px,8vw,104px) 0; position:relative; }
.section-head { text-align:center; max-width:640px; margin:0 auto clamp(34px,5vw,56px); }
.section-head .eyebrow { color:var(--accent); letter-spacing:.24em; text-transform:uppercase; font-size:.76rem; font-weight:600; }
.section-head h2 { font-size:clamp(1.9rem,4vw,3rem); margin:.3em 0; }
.section-head p { color:var(--text-muted); }

/* ---------------- Category tiles (3D tilt + shine) ---------------- */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.cat-tile { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4; display:block;
  transform-style:preserve-3d; transition:transform .5s var(--ease),box-shadow .5s var(--ease); }
.cat-tile:hover { transform:translateY(-8px); box-shadow:var(--shadow); }
.cat-tile img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.cat-tile:hover img { transform:scale(1.08); }
.cat-tile::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(0,0,0,.78),transparent 60%); }
.cat-tile::after { content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .8s var(--ease); }
.cat-tile:hover::after { left:140%; }
.cat-tile .cat-cap { position:absolute; left:20px; bottom:20px; z-index:3; color:#fff; }
.cat-tile .cat-cap b { font-family:var(--font-display); font-size:1.4rem; display:block; }
.cat-tile .cat-cap span { font-size:.85rem; opacity:.85; }

/* ---------------- Product flip cards ---------------- */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; }
/* Flat product card — product always visible, Quick View + Add to Cart below */
.pcard { display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--card-bg); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.pcard:hover { transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(0,0,0,.45); border-color:var(--accent); }
.pcard-media { position:relative; aspect-ratio:3/3.6; overflow:hidden; background:var(--surface-2); }
.pcard-imglink { display:block; width:100%; height:100%; }
.pcard-img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .5s var(--ease); }
.pcard:hover .pcard-img { transform:scale(1.06); }
/* Second image auto-shows on hover */
.pcard-img-hover { position:absolute; inset:0; z-index:1; opacity:0; }
.pcard:hover .pcard-img-hover { opacity:1; }
.pcard-badge { position:absolute; top:12px; left:12px; z-index:2; padding:5px 11px; border-radius:50px; font-size:.7rem; font-weight:800; letter-spacing:.03em; }
.pcard-badge.sale { background:var(--accent-3); color:#fff; }
.pcard-badge.new { background:var(--accent-grad); color:#0b0b12; left:auto; right:12px; }
.pcard-wish { position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--text); transition:.3s; }
.pcard-badge.new ~ .pcard-wish { top:52px; }
.pcard-wish:hover,.pcard-wish.active { background:var(--accent-3); color:#fff; }
.pcard-body { padding:16px 18px; display:flex; flex-direction:column; flex:1; }
.pcard-cat { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.pcard-body h3 { font-size:1.05rem; margin:4px 0; font-family:var(--font-body); font-weight:600; }
.pcard-body h3 a { color:inherit; }
.pcard-rate { margin:2px 0 6px; font-size:.82rem; }
.pcard-price { display:flex; align-items:baseline; gap:8px; margin-top:auto; }
.pcard-price b { font-size:1.15rem; }
.pcard-price s { color:var(--text-faint); font-size:.85rem; }
.pcard-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.pcard-actions .btn { width:100%; justify-content:center; }

/* Cart-added modal */
.cart-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(8,10,18,.55); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .25s ease; padding:20px; }
.cart-modal.show { opacity:1; visibility:visible; }
.cart-modal-box { position:relative; width:100%; max-width:380px; background:var(--card-bg); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius); padding:30px 26px 26px; text-align:center;
  transform:translateY(16px) scale(.97); transition:transform .25s var(--ease); box-shadow:0 30px 70px -20px rgba(0,0,0,.6); }
.cart-modal.show .cart-modal-box { transform:none; }
.cart-modal-x { position:absolute; top:12px; right:14px; background:none; border:0; font-size:26px; line-height:1; color:var(--text-faint); cursor:pointer; }
.cart-modal-ic { width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:rgba(37,176,3,.14); color:#25b003; font-size:28px; font-weight:800; }
.cart-modal-title { font-family:var(--font-display); font-size:1.4rem; margin:0 0 6px; }
.cart-modal-name { color:var(--text-muted); font-size:.95rem; margin:0 0 20px; }
.cart-modal-btns { display:grid; gap:10px; }
.cart-modal-btns .btn { width:100%; justify-content:center; }

/* ---------------- Stars ---------------- */
.stars { color:var(--accent); letter-spacing:1px; } .stars .star { color:rgba(150,150,150,.4); }
.stars .star.on,.stars .star.half { color:var(--accent); }

/* ---------------- Marquee strip ---------------- */
.logo-strip { border-block:1px solid var(--border); background:var(--bg-2); overflow:hidden; padding:22px 0; }
.logo-track { display:flex; gap:60px; white-space:nowrap; animation:marquee2 26s linear infinite; }
.logo-track span { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--text-faint); }
@keyframes marquee2 { to { transform:translateX(-50%); } }

/* ---------------- Counters ---------------- */
.counters { background:var(--bg-2); border-block:1px solid var(--border); }
.counter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px; text-align:center; }
.counter .num { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; }
.counter .lbl { color:var(--text-muted); margin-top:4px; }

/* ---------------- Reveal ---------------- */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"]{transition-delay:.08s;} .reveal[data-delay="2"]{transition-delay:.16s;} .reveal[data-delay="3"]{transition-delay:.24s;}

/* ---------------- Newsletter ---------------- */
.newsletter-card { border-radius:var(--radius-lg); border:1px solid var(--glass-brd); background:var(--card-bg);
  padding:clamp(34px,5vw,62px); text-align:center; position:relative; overflow:hidden; }
.newsletter-card::before { content:""; position:absolute; inset:0; background:var(--hero-tint); opacity:.5; }
.newsletter-card > * { position:relative; }
.newsletter-form { display:flex; gap:12px; max-width:520px; margin:22px auto 0; flex-wrap:wrap; }
.newsletter-form input { flex:1; min-width:220px; padding:15px 22px; border-radius:50px; border:1px solid var(--border); background:var(--surface); color:var(--text); }

/* ---------------- Footer ---------------- */
.site-footer { background:var(--bg-2); border-top:1px solid var(--border); padding-top:clamp(50px,7vw,82px); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
.footer-brand p { color:var(--text-muted); font-size:.9rem; margin:16px 0; max-width:320px; }
.footer-col h4 { font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin-bottom:16px; }
.footer-col a { display:block; padding:6px 0; color:var(--text-muted); font-size:.9rem; transition:.25s; }
.footer-col a:hover { color:var(--accent); padding-left:6px; }
.social-row { display:flex; gap:10px; margin-top:16px; }
.social-row a { width:42px; height:42px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; transition:.3s; }
.social-row a:hover { background:var(--accent-grad); color:#0b0b12; transform:translateY(-3px); }
.footer-bottom { border-top:1px solid var(--border); margin-top:clamp(32px,5vw,54px); padding:22px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.84rem; color:var(--text-faint); }
.pay-badges { display:flex; gap:8px; flex-wrap:wrap; }
.pay-badges span { font-size:.72rem; border:1px solid var(--border); border-radius:6px; padding:5px 9px; color:var(--text-muted); }

/* ---------------- WhatsApp float + back to top ---------------- */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:300; width:60px; height:60px; border-radius:50%;
  background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.45); animation:waPulse 2.6s infinite; }
.wa-float svg { width:32px; height:32px; }
@keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.to-top { position:fixed; right:24px; bottom:92px; z-index:295; width:46px; height:46px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--accent); display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(12px); transition:.35s var(--ease); }
.to-top.show { opacity:1; visibility:visible; transform:none; }

/* ---------------- Toast ---------------- */
#toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:400; background:var(--surface);
  border:1px solid var(--border); border-left:4px solid var(--accent); padding:14px 22px; border-radius:14px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:.35s var(--ease); font-size:.92rem; max-width:90vw; }
#toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
#toast.err { border-left-color:#ef4444; }

/* ---------------- Mobile nav ---------------- */
.nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:.3s; z-index:250; }
.nav-backdrop.open { opacity:1; visibility:visible; }
.mobile-nav { position:fixed; top:0; right:-100%; width:min(86vw,360px); height:100%; z-index:260; background:var(--surface);
  border-left:1px solid var(--border); padding:22px; overflow-y:auto; transition:right .4s var(--ease); }
.mobile-nav.open { right:0; }
.mobile-nav a { display:block; padding:13px 4px; border-bottom:1px solid var(--border); font-size:1.02rem; }

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .primary-nav,.topbar{ display:none; } .menu-toggle{ display:grid; }
  .hero .container{ grid-template-columns:1fr; } .hero-visual{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; text-align:center; }
  .pcard:hover .pcard-inner{ transform:none; } /* flip off on touch; tap goes to product */
}
/* ===== Mobile header fit: keep only cart + menu in the bar ===== */
@media (max-width:600px){
  .header-actions .ha-collapse{ display:none !important; }
  .header-actions{ gap:6px; }
  .search-panel{ display:none; }          /* search lives in the drawer on phones */
}
/* Drawer search box + theme row */
.mnav-search{ display:flex; gap:8px; margin-bottom:14px; }
.mnav-search input{ flex:1; min-width:0; padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--glass); color:var(--text); font:inherit; }
.mnav-search button{ flex-shrink:0; display:grid; place-items:center; padding:0 14px; }
.mnav-theme{ display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border); color:var(--muted); }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; } .reveal{ opacity:1 !important; transform:none !important; }
  .pcard:hover .pcard-inner{ transform:none; }
}