/* ============================================================
   DALI — shared styles (used alongside Tailwind CDN)
   Only what Tailwind utilities can't express cleanly lives here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-grotesk@400,500,600,700&display=swap');

:root{
  --brand:#5f96cf;
  --brand-dark:#4a7db8;
  --brand-light:#e8f1fa;

  /* Thai national colours (Thai flag palette) + a temple-gold accent,
     used for the Thailand-market identity elements: flag strip, badges,
     "Made for Thailand" trims. Kept as accents alongside --brand rather
     than replacing it, so the DALI product photography still reads clean. */
  --thai-red:#A51931;
  --thai-blue:#241D4F;
  --thai-gold:#C9A227;
}

html{ scroll-behavior:smooth; }
body{ font-family:'Inter',sans-serif; }
.font-display{ font-family:'ClashGrotesk-Variable','Inter',sans-serif; }

/* Belt-and-suspenders: a generic `img{ height:auto }` reset from a plugin
   stylesheet (WooCommerce's own woocommerce-general.css did exactly this —
   see the enqueue note in functions.php) beats a single Tailwind utility
   class like .h-full on specificity, silently breaking the object-cover
   fill on product/card imagery. Force it back regardless of what else loads. */
img.object-cover{ height:100% !important; width:100% !important; }

/* ── Thai flag strip (5-band: red/white/blue/white/red) ─────── */
.thai-flag-strip{
  height:6px; width:100%;
  background:linear-gradient(to bottom,
    var(--thai-red) 0 20%, #fff 20% 40%, var(--thai-blue) 40% 60%, #fff 60% 80%, var(--thai-red) 80% 100%);
}
.thai-badge{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--thai-gold); color:var(--thai-gold);
  border-radius:999px; padding:4px 10px; font-size:11px; font-weight:600;
}

/* scrollbar */
::-webkit-scrollbar{ width:5px; }
::-webkit-scrollbar-track{ background:#f5f5f5; }
::-webkit-scrollbar-thumb{ background:var(--brand); border-radius:3px; }

/* hide scrollbar on horizontal card sliders (e.g. collections slider) */
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* ── PREMIUM TILES COLLECTION SLIDER (home) ──────
   Hand-authored for the same reason as .scan-qr-img above: this is a
   new component, so Tailwind arbitrary-width/snap utilities for it
   were never part of the one-time static build and render as nothing. */
.collections-slider{
  display:flex; align-items:flex-start; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:4px 4px 10px;
}
.collections-slider .col-card{
  flex:0 0 78%; scroll-snap-align:start; aspect-ratio:1/1; height:auto;
}
@media (min-width:640px){ .collections-slider .col-card{ flex-basis:calc(50% - 8px); } }
@media (min-width:1024px){ .collections-slider .col-card{ flex-basis:calc(25% - 12px); } }

.collections-nav{
  position:absolute; top:50%; margin-top:-20px; z-index:2;
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border:none; border-radius:999px;
  background:#fff; color:#111; cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.18); transition:background .2s;
}
.collections-nav:hover{ background:#f3f4f6; }
.collections-nav.prev{ left:-16px; }
.collections-nav.next{ right:-16px; }
@media (min-width:1024px){ .collections-nav{ display:flex; } }

/* ── PRODUCT FILTERS SIDEBAR SCROLL (shop) ───────
   max-h with an arbitrary calc() value has the same static-build
   problem, so it's a plain rule here — lets the filter list scroll
   internally instead of overflowing past reach in the sticky sidebar. */
.filter-scroll{ max-height:calc(100vh - 220px); overflow-y:auto; padding-right:4px; }

/* ── eyebrow label ───────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand);
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--brand); flex-shrink:0;
}
.eyebrow.on-dark{ color:var(--brand); }

/* ── HERO TILE SLIDER (right-side product imagery) ──────────── */
.hero-tile-slider{ height:400px; }
.hero-tile-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  transition:opacity 1.1s ease, transform 6s ease;
}
.hero-tile-slide.active{ opacity:1; transform:scale(1); }
.htdot{
  width:8px; height:8px; border:none; cursor:pointer; padding:0;
  border-radius:999px; background:rgba(255,255,255,.35);
  transition:background .3s, width .3s;
}
.htdot.active{ background:var(--brand); width:22px; }

.scroll-hint::before{
  content:''; width:1px; height:32px;
  background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);
}

/* ── TICKER ──────────────────────────────────── */
.ticker-track{
  display:flex; gap:48px; white-space:nowrap;
  animation:ticker 30s linear infinite;
}
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.dot-pulse{ animation:pulse 2s infinite; }

/* ── SCROLL REVEALS ──────────────────────────── */
.reveal,.reveal-left,.reveal-right,.reveal-scale{
  opacity:0; transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.reveal{ transform:translateY(32px); }
.reveal-left{ transform:translateX(-32px); }
.reveal-right{ transform:translateX(32px); }
.reveal-scale{ transform:scale(.96); }
.reveal.on,.reveal-left.on,.reveal-right.on,.reveal-scale.on{ opacity:1; transform:none; }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; }
.d4{ transition-delay:.32s; } .d5{ transition-delay:.40s; } .d6{ transition-delay:.48s; }

/* hero entrance */
@keyframes hIn{ to{ opacity:1; transform:none; } }
.h-anim{ opacity:0; transform:translateY(14px); animation:hIn .8s cubic-bezier(.16,1,.3,1) forwards; }

/* progress fill (about) */
.progress-fill{ height:100%; background:var(--brand); width:0; border-radius:99px; transition:width 1.8s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .ticker-track{ animation:none; }
}

/* keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* ── MEGA MENU (click-toggle) ────────────────── */
.menu-panel{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease;
}
.menu-panel.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.chev{ transition:transform .2s; }
.menu-trigger.active .chev{ transform:rotate(180deg); }

/* mobile drawer */
.mobile-drawer{ transition:transform .35s cubic-bezier(.16,1,.3,1); transform:translateX(100%); }
.mobile-drawer.open{ transform:translateX(0); }

/* ── Language switcher (Thai / English) ──────────────────────────────
   dali_lang_switcher_html() (inc/dali-helpers.php) reuses the .menu-trigger/
   .menu-panel mega-menu mechanism above — no extra CSS needed here. */

/* ── generic WP page content (page.php fallback) ─────── */
.dali-page-content h1,.dali-page-content h2,.dali-page-content h3{
  font-family:'ClashGrotesk-Variable','Inter',sans-serif; font-weight:700; color:#111;
  margin-top:1.75rem; margin-bottom:.75rem;
}
.dali-page-content h2{ font-size:22px; } .dali-page-content h3{ font-size:18px; }
.dali-page-content p{ margin-bottom:1rem; }
.dali-page-content a{ color:var(--brand); text-decoration:underline; }
.dali-page-content ul,.dali-page-content ol{ margin:0 0 1rem 1.25rem; }
.dali-page-content ul{ list-style:disc; } .dali-page-content ol{ list-style:decimal; }
.dali-page-content img{ border-radius:12px; max-width:100%; height:auto; }