/* ============================================================================
   Sukoon — Component library (.sk-*)
   Plain CSS built on the tokens in theme.css, so the brand UI renders with NO
   build step. Tailwind utilities (CDN in dev / compiled in prod) handle one-off
   layout in markup. Anatomy & states per docs/09-COMPONENTS.md.
   ============================================================================ */

/* ── Base / reset-ish ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sk-font-en);
  font-size: var(--sk-fs-body);
  line-height: var(--sk-lh-body);
  color: var(--sk-ink);
  background: var(--sk-surface);
}
a { color: var(--sk-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Inline SVG icons (.sk-ico) ───────────────────────────────────────────────
   Build-free icon system (includes/icons.php). Sized in em so an icon tracks the
   text around it, and coloured via currentColor so it inherits/active-states. */
.sk-ico { width: 1.15em; height: 1.15em; display: inline-block; flex: none;
  vertical-align: -0.18em; stroke: currentColor; fill: none; }
.sk-ico-sm { width: 1em;    height: 1em; }
.sk-ico-lg { width: 1.5em;  height: 1.5em; }
.sk-ico-xl { width: 2em;    height: 2em; }
/* Solid glyphs (star, check badges) read better filled. */
.sk-ico-fill { fill: currentColor; stroke: none; }
h1, h2, h3, h4 { font-family: var(--sk-font-en); font-weight: var(--sk-fw-heading); color: var(--sk-ink); margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: var(--sk-fs-h1); line-height: var(--sk-lh-h1); font-weight: var(--sk-fw-display); }
h2 { font-size: var(--sk-fs-h2); line-height: var(--sk-lh-h2); }
h3 { font-size: var(--sk-fs-h3); line-height: var(--sk-lh-h3); }
h4 { font-size: var(--sk-fs-h4); line-height: var(--sk-lh-h4); }
:focus-visible { outline: var(--sk-focus-outline); outline-offset: 2px; border-radius: var(--sk-r-xs); }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.sk-container { width: 100%; max-width: var(--sk-container); margin-inline: auto; padding-inline: var(--sk-sp-xl); }
.sk-section   { padding-block: clamp(var(--sk-sp-xxxl), 9vw, var(--sk-sp-section)); }
.sk-eyebrow   { font-size: var(--sk-fs-caption); font-weight: 600; letter-spacing: 1.5px;
                text-transform: uppercase; color: var(--sk-gold-deep); }
.sk-divider-gold { height: 2px; border: 0; border-radius: var(--sk-r-full); background: var(--sk-grad-gold); }
.sk-muted { color: var(--sk-ink-muted); }

/* Section header pattern (eyebrow + title), consistent rhythm across pages. */
.sk-section-head { margin-bottom: var(--sk-sp-xxl); }
.sk-section-head h2 { font-size: var(--sk-fs-h1); margin: .2em 0 0; }
.sk-section-head p  { color: var(--sk-ink-muted); max-width: 60ch; margin: .5em 0 0; }

/* Auto-fit responsive grids — columns reflow by available width (no media
   queries needed). --sk-min controls the smallest comfortable card width. */
.sk-grid { display: grid; gap: var(--sk-sp-lg); grid-template-columns: repeat(auto-fill, minmax(min(var(--sk-min, 220px), 100%), 1fr)); }
.sk-grid-tight { --sk-min: 150px; gap: var(--sk-sp-md); }
.sk-grid-wide  { --sk-min: 280px; }
/* Mobile: always keep at least 2 tiles per row (don't collapse to 1). */
@media (max-width: 560px) {
  .sk-grid-tight { grid-template-columns: repeat(2, 1fr); }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sk-font-en); font-size: var(--sk-fs-body); font-weight: 600;
  line-height: 1.2; padding: 12px 26px; border: 1.5px solid transparent;
  border-radius: var(--sk-r-full); cursor: pointer; text-decoration: none;
  transition: background var(--sk-motion-fast), color var(--sk-motion-fast),
              box-shadow var(--sk-motion-fast), transform var(--sk-motion-fast);
  white-space: nowrap; user-select: none;
}
.sk-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sk-btn:active { transform: translateY(0); }
.sk-btn:focus-visible { outline: none; box-shadow: var(--sk-focus-ring); }
.sk-btn[disabled], .sk-btn.is-disabled { background: var(--sk-hairline); color: var(--sk-ink-faint);
  border-color: transparent; box-shadow: none; cursor: not-allowed; pointer-events: none; transform: none; }

.sk-btn-primary   { background: var(--sk-saffron); color: var(--sk-on-saffron); box-shadow: var(--sk-shadow-gold); }
.sk-btn-primary:hover  { background: #ffae22; box-shadow: var(--sk-shadow-lg); }
.sk-btn-primary:active { background: var(--sk-saffron-deep); }
.sk-btn-secondary { background: var(--sk-primary); color: var(--sk-on-primary); }
.sk-btn-secondary:hover  { background: var(--sk-primary-soft); }
.sk-btn-secondary:active { background: var(--sk-primary-deep); }
.sk-btn-outline   { background: transparent; color: var(--sk-primary); border-color: var(--sk-primary); }
.sk-btn-outline:hover { background: var(--sk-primary-50); }
.sk-btn-gold      { background: var(--sk-gold); color: var(--sk-ink); }
.sk-btn-gold:hover { background: var(--sk-gold-deep); color: #fff; }
.sk-btn-ghost     { background: transparent; color: var(--sk-ink-soft); padding: 10px 18px; }
.sk-btn-ghost:hover { background: var(--sk-hairline); }
/* Provider sign-in (Google) — neutral white per brand guidelines. */
.sk-btn-google     { background: #fff; color: #3c4043; border-color: var(--sk-hairline-strong); font-weight: 500; }
.sk-btn-google:hover { background: #f8f9fa; box-shadow: var(--sk-shadow-sm); }
.sk-btn-google svg { flex: none; }
.sk-btn-sm { padding: 8px 16px; font-size: var(--sk-fs-sm); }
.sk-btn-lg { padding: 15px 32px; font-size: var(--sk-fs-subtitle); }
.sk-btn-block { display: flex; width: 100%; }
.sk-btn-icon { padding: 10px; width: 44px; height: 44px; }
/* Machined uppercase label (BMW-discipline accent, used sparingly on key CTAs). */
.sk-btn-label { text-transform: uppercase; letter-spacing: var(--sk-tracking-label); font-weight: 600; }
/* Touch-friendly: full-width, ≥48px tall CTAs on mobile. */
@media (max-width: 600px) {
  .sk-btn-mobile-block { display: flex; width: 100%; }
  .sk-btn { min-height: 48px; }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.sk-card {
  background: var(--sk-canvas); border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-r-lg); padding: var(--sk-sp-xl); box-shadow: var(--sk-shadow-md);
}
.sk-card-cream { background: var(--sk-cream); border: 0; border-radius: var(--sk-r-lg); padding: var(--sk-sp-xxl); }
.sk-card-glass {
  background: var(--sk-glass-fill); border: 1px solid var(--sk-glass-border);
  border-radius: var(--sk-r-xl); padding: var(--sk-sp-xl);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--sk-shadow-lg);
}
.sk-card-glass-dark {
  background: var(--sk-glass-fill-dark); color: var(--sk-on-primary);
  border: 1px solid var(--sk-glass-border); border-radius: var(--sk-r-xl); padding: var(--sk-sp-xl);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.sk-card-product {
  background: var(--sk-canvas); border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-r-lg); padding: var(--sk-sp-md); box-shadow: var(--sk-shadow-sm);
  transition: box-shadow var(--sk-motion-base), transform var(--sk-motion-base);
}
.sk-card-product:hover, .sk-card-product:focus-within {
  box-shadow: var(--sk-shadow-lg); transform: translateY(-4px); border-color: var(--sk-hairline-strong);
}
.sk-stat-card {
  background: var(--sk-canvas); border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-r-lg); padding: var(--sk-sp-xl); box-shadow: var(--sk-shadow-sm);
}
.sk-stat-card .sk-stat-value { font-size: var(--sk-fs-display); font-weight: 700; color: var(--sk-primary); line-height: 1.1; }
.sk-stat-card .sk-stat-label { font-size: var(--sk-fs-sm); color: var(--sk-ink-muted); }
.sk-purpose-tile {
  display: flex; flex-direction: column; gap: var(--sk-sp-xs); align-items: flex-start;
  background: var(--sk-primary-50); color: var(--sk-primary); border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-r-lg); padding: var(--sk-sp-lg); transition: box-shadow var(--sk-motion-base), transform var(--sk-motion-base);
}
.sk-purpose-tile:hover { box-shadow: var(--sk-shadow-md); transform: translateY(-2px); text-decoration: none; }

/* ── Price ────────────────────────────────────────────────────────────────── */
.sk-price { font-size: var(--sk-fs-price); font-weight: 700; color: var(--sk-ink); }
.sk-price-original { font-size: var(--sk-fs-body); color: #d32f2f; font-weight: 700; text-decoration: line-through; margin-left: .4em; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.sk-label { display: block; font-size: var(--sk-fs-caption); font-weight: 600; color: var(--sk-ink-soft);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.sk-input, .sk-select, .sk-textarea {
  width: 100%; height: 48px; padding: 12px 16px; font: inherit; color: var(--sk-ink);
  background: var(--sk-canvas); border: 1.5px solid var(--sk-hairline-strong);
  border-radius: var(--sk-r-md); transition: border-color var(--sk-motion-fast), box-shadow var(--sk-motion-fast);
}
.sk-textarea { height: auto; min-height: 120px; resize: vertical; }
.sk-input:focus, .sk-select:focus, .sk-textarea:focus {
  outline: none; border-color: var(--sk-primary); box-shadow: var(--sk-focus-ring);
}
.sk-input::placeholder, .sk-textarea::placeholder { color: var(--sk-ink-faint); }
.sk-input.is-invalid, .sk-select.is-invalid, .sk-textarea.is-invalid { border-color: var(--sk-danger); }
.sk-field-error { color: var(--sk-danger); font-size: var(--sk-fs-sm); margin-top: 4px; }
.sk-checkbox, .sk-radio { width: 18px; height: 18px; accent-color: var(--sk-primary); }
/* OTP boxes */
.sk-otp { display: inline-flex; gap: var(--sk-sp-sm); }
.sk-otp input { width: 48px; height: 56px; text-align: center; font-size: var(--sk-fs-h3); font-weight: 600;
  border: 1.5px solid var(--sk-hairline-strong); border-radius: var(--sk-r-md); background: var(--sk-canvas); }
.sk-otp input:focus { outline: none; border-color: var(--sk-primary); box-shadow: 0 0 0 3px var(--sk-primary-50); }
/* iOS Safari auto-zooms the viewport when a focused field's font-size is < 16px
   (our body text is 15px). Bump form controls to 16px on touch-width screens only
   — desktop sizing is unchanged. Fixes the focus-zoom jump on every form. */
@media (max-width: 768px) {
  .sk-input, .sk-select, .sk-textarea { font-size: 16px; }
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.sk-badge { display: inline-block; font-size: var(--sk-fs-caption); font-weight: 600;
  padding: 3px 10px; border-radius: var(--sk-r-full); line-height: 1.4; }
.sk-badge-saffron { background: var(--sk-saffron); color: var(--sk-on-saffron); }
.sk-badge-gold    { background: var(--sk-gold-soft); color: var(--sk-ink); }
.sk-badge-purple  { background: var(--sk-primary-50); color: var(--sk-primary); }
.sk-badge-success { background: #e6f4ec; color: var(--sk-success); }
.sk-badge-warning { background: #fbf2da; color: var(--sk-warning); }
.sk-badge-danger  { background: #fae5e5; color: var(--sk-danger); }
.sk-badge-info    { background: #e7f0fe; color: var(--sk-info); }

/* ── Pill tabs ────────────────────────────────────────────────────────────── */
.sk-tabs { display: inline-flex; gap: var(--sk-sp-xs); flex-wrap: wrap; }
.sk-pill-tab { background: var(--sk-surface); color: var(--sk-ink-soft); border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-r-full); padding: 8px 18px; cursor: pointer; font: inherit; font-size: var(--sk-fs-sm); }
.sk-pill-tab:hover { color: var(--sk-ink); }
.sk-pill-tab.is-active { background: var(--sk-primary); color: var(--sk-on-primary); border-color: var(--sk-primary); }

/* ── Rating stars ─────────────────────────────────────────────────────────── */
.sk-rating { color: var(--sk-rating-star); font-size: var(--sk-fs-body); letter-spacing: 1px; }

/* ── Accordion ────────────────────────────────────────────────────────────── */
.sk-accordion-item { background: var(--sk-canvas); border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-r-md); margin-bottom: var(--sk-sp-sm); overflow: hidden; }
.sk-accordion-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sk-sp-md);
  width: 100%; padding: var(--sk-sp-lg); background: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 600; color: var(--sk-ink); text-align: left; }
.sk-accordion-item.is-open .sk-accordion-header { background: var(--sk-primary-50); box-shadow: inset 3px 0 0 var(--sk-gold); }
.sk-accordion-icon { transition: transform var(--sk-motion-base); flex: none; }
.sk-accordion-item.is-open .sk-accordion-icon { transform: rotate(180deg); }
.sk-accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--sk-motion-base); }
.sk-accordion-body > div { padding: 0 var(--sk-sp-lg) var(--sk-sp-lg); color: var(--sk-ink-soft); }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.sk-toast-root { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.sk-toast { display: flex; align-items: center; gap: 10px; background: var(--sk-ink); color: #fff;
  border-radius: var(--sk-r-md); padding: 14px 18px; box-shadow: var(--sk-shadow-lg); font-size: var(--sk-fs-body);
  max-width: calc(100vw - 32px); overflow-wrap: anywhere;
  transform: translateY(-8px); opacity: 0; transition: opacity var(--sk-motion-base), transform var(--sk-motion-base); }
.sk-toast.is-visible { transform: translateY(0); opacity: 1; }
.sk-toast.is-success { background: var(--sk-success); }
.sk-toast.is-error   { background: var(--sk-danger); }
.sk-toast.is-warning { background: var(--sk-warning); color: var(--sk-ink); }

/* ── Modal / Drawer ───────────────────────────────────────────────────────── */
.sk-overlay { position: fixed; inset: 0; background: rgba(45, 42, 50, 0.45); z-index: 9990;
  opacity: 0; visibility: hidden; transition: opacity var(--sk-motion-base), visibility var(--sk-motion-base);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sk-overlay.is-open { opacity: 1; visibility: visible; }
.sk-modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 9991; pointer-events: none; }
.sk-modal-box { background: var(--sk-canvas); border-radius: var(--sk-r-xl); padding: var(--sk-sp-xxl);
  /* pointer-events must stay off while closed: the invisible centered box would
     otherwise swallow clicks meant for the page underneath (z-index 9991). */
  width: min(92vw, 480px); box-shadow: var(--sk-shadow-lg); pointer-events: none;
  /* Keep tall forms inside the viewport on short/mobile screens — scroll inside
     the box rather than clipping (the centered .sk-modal can't page-scroll). */
  max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: scale(.96); opacity: 0; transition: opacity var(--sk-motion-base), transform var(--sk-motion-base); }
.sk-modal.is-open .sk-modal-box { transform: scale(1); opacity: 1; pointer-events: auto; }
.sk-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(92vw, 420px); background: var(--sk-canvas);
  z-index: 9991; box-shadow: var(--sk-shadow-lg); transform: translateX(100%);
  transition: transform var(--sk-motion-base); display: flex; flex-direction: column; }
.sk-drawer.is-open { transform: translateX(0); }
.sk-drawer-left { right: auto; left: 0; transform: translateX(-100%); }
.sk-drawer-left.is-open { transform: translateX(0); }

/* Drawer content scaffold (header / scrollable body / sticky footer). .sk-drawer
   is flex-column already; these split it into fixed chrome + a scrolling body.
   Used by the shop filter & sort drawers (Option C) — see shop.php. */
.sk-drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sk-sp-md) var(--sk-sp-lg); border-bottom: 1px solid var(--sk-hairline); flex: 0 0 auto; }
.sk-drawer-title { font-weight: var(--sk-fw-heading); font-size: var(--sk-fs-h4); }
.sk-drawer-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sk-sp-md) var(--sk-sp-lg); }
.sk-drawer-foot { flex: 0 0 auto; display: flex; gap: 10px;
  padding: var(--sk-sp-md) var(--sk-sp-lg);
  padding-bottom: calc(var(--sk-sp-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sk-hairline); background: var(--sk-canvas); }
.sk-drawer-close { background: none; border: 0; cursor: pointer; color: var(--sk-ink-soft);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--sk-r-md); }
.sk-drawer-close:hover { background: var(--sk-surface); color: var(--sk-ink); }
/* Sort options as tappable rows inside the sort drawer */
.sk-sort-opt { display: flex; align-items: center; gap: 12px; padding: 14px 4px; cursor: pointer;
  border-bottom: 1px solid var(--sk-hairline); font-size: var(--sk-fs-body); }
.sk-sort-opt:last-child { border-bottom: 0; }
.sk-sort-opt input { accent-color: var(--sk-primary); width: 18px; height: 18px; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.sk-table { width: 100%; border-collapse: collapse; background: var(--sk-canvas); }
.sk-table th, .sk-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--sk-hairline); font-size: var(--sk-fs-sm); }
.sk-table th { color: var(--sk-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; font-size: var(--sk-fs-caption); }
.sk-table tbody tr:hover { background: var(--sk-surface); }

/* ── Loading: skeleton + spinner ──────────────────────────────────────────── */
.sk-skeleton { background: linear-gradient(90deg, var(--sk-hairline) 25%, #f4f1f8 37%, var(--sk-hairline) 63%);
  background-size: 400% 100%; border-radius: var(--sk-r-sm); animation: sk-shimmer 1.4s ease infinite; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-spinner { width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--sk-gold-soft); border-top-color: var(--sk-gold); animation: sk-spin .8s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sk-skeleton, .sk-spinner { animation: none; }
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.sk-empty { text-align: center; padding: var(--sk-sp-section) var(--sk-sp-xl); color: var(--sk-ink-muted); }

/* ── Order success (order-success.php) ────────────────────────────────────── */
.sk-success-mark { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; position: relative;
  background: #e6f4ec; color: var(--sk-success); display: flex; align-items: center; justify-content: center;
  animation: sk-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.sk-success-mark .sk-ico { width: 40px; height: 40px; }
.sk-success-mark::after { content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid var(--sk-gold); animation: sk-ring 1s ease-out .3s both; }
@keyframes sk-pop  { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sk-ring { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }

.sk-osteps { display: flex; max-width: 560px; margin: 28px auto 0; }
.sk-ostep { flex: 1; position: relative; text-align: center;
  font-size: var(--sk-fs-caption); color: var(--sk-ink-muted); }
.sk-ostep::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px;
  background: var(--sk-hairline-strong); }
.sk-ostep:first-child::before { display: none; }
.sk-ostep-dot { position: relative; z-index: 1; width: 30px; height: 30px; margin: 0 auto 6px;
  border-radius: 50%; background: var(--sk-canvas); border: 2px solid var(--sk-hairline-strong);
  color: var(--sk-ink-faint); display: flex; align-items: center; justify-content: center; }
.sk-ostep-dot .sk-ico { width: 15px; height: 15px; }
.sk-ostep.is-done::before, .sk-ostep.is-current::before { background: var(--sk-success); }
.sk-ostep.is-done .sk-ostep-dot, .sk-ostep.is-current .sk-ostep-dot {
  background: var(--sk-success); border-color: var(--sk-success); color: #fff; }
.sk-ostep.is-current { color: var(--sk-ink); font-weight: 600; }

.sk-osuccess-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--sk-sp-lg);
  margin-top: var(--sk-sp-xxl); text-align: left; }
@media (max-width: 720px) { .sk-osuccess-grid { grid-template-columns: 1fr; } }

.sk-oitem { display: flex; align-items: center; gap: var(--sk-sp-md); padding: 12px 0;
  border-bottom: 1px solid var(--sk-hairline); }
.sk-oitem:last-child { border-bottom: 0; }
.sk-oitem-thumb { width: 56px; height: 56px; flex: none; border-radius: var(--sk-r-sm);
  object-fit: cover; background: var(--sk-cream); border: 1px solid var(--sk-hairline); }
.sk-oitem-name { font-weight: 500; color: var(--sk-ink); }
a.sk-oitem-name:hover { color: var(--sk-link); }
.sk-oitem-meta { font-size: var(--sk-fs-sm); color: var(--sk-ink-muted); }
.sk-oitem-price { margin-left: auto; font-weight: 600; white-space: nowrap; }

.sk-orow { display: flex; justify-content: space-between; gap: var(--sk-sp-md); margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  .sk-success-mark, .sk-success-mark::after { animation: none; }
  .sk-success-mark::after { opacity: 0; }
}

/* ── Dashboard content utilities ──────────────────────────────────────────── */
/* Shared across admin / astrologer / customer pages: a KPI strip, a responsive
   filter toolbar, and a scroll-safe table wrapper. */
.sk-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sk-sp-md); margin-bottom: var(--sk-sp-md); }
.sk-kpi { background: var(--sk-canvas); border: 1px solid var(--sk-hairline); border-radius: var(--sk-r-lg);
  padding: var(--sk-sp-md) var(--sk-sp-lg); box-shadow: var(--sk-shadow-sm); }
.sk-kpi .sk-kpi-label { display: block; font-size: var(--sk-fs-caption); color: var(--sk-ink-muted);
  text-transform: uppercase; letter-spacing: .3px; }
.sk-kpi .sk-kpi-value { font-size: var(--sk-fs-h3); font-weight: 700; color: var(--sk-primary); line-height: 1.2; }
.sk-dash-toolbar { display: flex; gap: var(--sk-sp-xs); flex-wrap: wrap; align-items: center; margin-bottom: var(--sk-sp-md); }
.sk-dash-toolbar .sk-input, .sk-dash-toolbar .sk-select { height: 42px; width: auto; min-width: 0; }
.sk-dash-toolbar .sk-grow { flex: 1; min-width: 180px; }
.sk-select-sm { height: 38px; padding: 6px 12px; }
@media (max-width: 560px) {
  .sk-dash-toolbar { flex-direction: column; align-items: stretch; }
  .sk-dash-toolbar .sk-input, .sk-dash-toolbar .sk-select { width: 100%; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.sk-hero { background: var(--sk-grad-hero); color: #fff; position: relative; overflow: hidden; }
.sk-hero-inner { padding-block: clamp(56px, 9vw, 96px); max-width: 820px; }
.sk-hero-cta { display: flex; gap: var(--sk-sp-sm); flex-wrap: wrap; margin-top: var(--sk-sp-xl); }

/* ── Cosmic Hero (.sk-chero) — astrological zodiac/planet animation ───────── */
.sk-chero {
  position: relative; width: 100%; overflow: hidden;
  font-family: 'Manrope', system-ui, sans-serif; color: #fff;
  background:
    radial-gradient(ellipse 70% 55% at 18% 8%, rgba(106,61,232,.20), transparent 60%),
    radial-gradient(ellipse 65% 50% at 88% 78%, rgba(217,70,239,.16), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(30,58,138,.14), transparent 72%),
    #050816;
}

/* Cosmic keyframes */
@keyframes skc-twinkle { 0%,100% { opacity:.25; transform:scale(.7); } 50% { opacity:1; transform:scale(1); } }
@keyframes skc-spinSlow { to { transform:rotate(360deg); } }
@keyframes skc-spinSlowR { to { transform:rotate(-360deg); } }
@keyframes skc-floatA { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-22px); } }
@keyframes skc-floatB { 0%,100% { transform:translateY(0); } 50% { transform:translateY(16px); } }
@keyframes skc-floatC { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-12px,-14px); } }
@keyframes skc-glowPulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes skc-rayPulse { 0%,100% { opacity:.18; } 50% { opacity:.42; } }
@keyframes skc-drift { 0% { transform:translateX(-4%); } 100% { transform:translateX(4%); } }
@keyframes skc-shoot { 0% { opacity:0; transform:translate(0,0) rotate(35deg) scaleX(.2); } 6% { opacity:1; } 18% { opacity:1; transform:translate(420px,300px) rotate(35deg) scaleX(1); } 24%,100% { opacity:0; transform:translate(520px,372px) rotate(35deg) scaleX(1); } }
@keyframes skc-fadeUp { from { opacity:0; transform:translateY(26px); filter:blur(6px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }

/* Background layers */
.skc-milkyway { position:absolute; inset:-10% -20%; pointer-events:none; z-index:0; background:radial-gradient(ellipse 60% 22% at 50% 50%, rgba(120,140,255,.10), transparent 70%); filter:blur(20px); transform:rotate(-24deg); animation:skc-drift 26s ease-in-out infinite alternate; }
.skc-fog { position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(circle at 30% 70%, rgba(106,61,232,.10), transparent 45%), radial-gradient(circle at 75% 30%, rgba(217,70,239,.08), transparent 45%); filter:blur(8px); animation:skc-drift 32s ease-in-out infinite alternate-reverse; }
.skc-rays { position:absolute; top:-20%; left:50%; width:140%; height:140%; transform:translateX(-50%); pointer-events:none; z-index:0; background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(247,215,116,.06) 18deg, transparent 36deg, transparent 90deg, rgba(56,189,248,.05) 120deg, transparent 150deg); animation:skc-rayPulse 9s ease-in-out infinite; }

/* Star field + shooting stars */
.skc-stars { position:absolute; inset:-20px; pointer-events:none; z-index:1; will-change:transform; }
.skc-stars span { position:absolute; border-radius:50%; }
.skc-shooting { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.skc-shooting span { position:absolute; width:160px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9) 70%, #F7D774); box-shadow:0 0 8px rgba(255,255,255,.6); transform:rotate(35deg); }

/* Content wrapper */
.skc-wrap { position:relative; z-index:5; max-width:1280px; margin:0 auto; padding:clamp(16px,3vw,40px) clamp(20px,4vw,56px); }
.skc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr)); gap:clamp(32px,4vw,64px); align-items:center; padding:clamp(28px,4vw,52px) 0 36px; }

/* Left column */
.skc-left { max-width:600px; }
.skc-badge { display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:30px; background:rgba(255,255,255,.05); border:1px solid rgba(247,215,116,.32); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#F7D774; font-weight:600; animation:skc-fadeUp .8s ease both; }
.skc-badge-dot { width:6px; height:6px; border-radius:50%; background:#38BDF8; box-shadow:0 0 8px #38BDF8; }
.skc-title { font-family:'Cormorant Garamond', Georgia, serif; font-weight:700; font-size:clamp(40px,6vw,68px); line-height:1.04; letter-spacing:-.01em; margin:22px 0 0; animation:skc-fadeUp .8s ease .08s both; color: white;}
.skc-title-grad { font-style:italic; background:linear-gradient(120deg,#F7D774,#D946EF,#38BDF8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.skc-title-hi { display:block; font-size:.46em; margin-top:.18em; color:#F7D774; letter-spacing:0; }
.skc-sub { font-size:clamp(15px,1.6vw,18px); line-height:1.7; color:#CBD5E1; margin:22px 0 0; max-width:520px; animation:skc-fadeUp .8s ease .16s both; }
.skc-cta { display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; animation:skc-fadeUp .8s ease .24s both; }
.skc-btn-gold, .skc-btn-ghost { display:inline-flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:600; font-size:15.5px; padding:15px 28px; border-radius:30px; cursor:pointer; text-decoration:none; transition:transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease; }
.skc-btn-gold { color:#050816; border:none; background:linear-gradient(180deg,#F7D774,#D4AF37); box-shadow:0 10px 34px rgba(212,175,55,.4); }
.skc-btn-gold:hover { transform:translateY(-2px); filter:brightness(1.08); }
.skc-btn-ghost { color:#F8FAFC; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.skc-btn-ghost:hover { border-color:rgba(247,215,116,.6); background:rgba(247,215,116,.08); }

/* Stats */
.skc-stats { display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,42px); margin-top:46px; animation:skc-fadeUp .8s ease .32s both; }
.skc-stat-num { font-family:'Cormorant Garamond', Georgia, serif; font-weight:700; font-size:34px; color:#F7D774; }
.skc-stat-label { font-size:12.5px; color:#94A3B8; letter-spacing:.06em; margin-top:2px; }
.skc-stat-div { width:1px; align-self:stretch; background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent); }

/* Right column : cosmic wheel */
.skc-right { position:relative; display:flex; align-items:center; justify-content:center; min-height:clamp(420px,46vw,560px); animation:skc-fadeUp 1s ease .2s both; }
.skc-wheel { position:relative; width:clamp(340px,42vw,520px); aspect-ratio:1; will-change:transform; }
.skc-aura { position:absolute; inset:-12%; border-radius:50%; background:radial-gradient(circle, rgba(106,61,232,.28), rgba(217,70,239,.10) 45%, transparent 68%); filter:blur(14px); animation:skc-glowPulse 7s ease-in-out infinite; }

.skc-ring-outer { position:absolute; inset:0; border-radius:50%; animation:skc-spinSlow 120s linear infinite; }
.skc-ring-line { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(247,215,116,.45); box-shadow:0 0 30px rgba(247,215,116,.18), inset 0 0 40px rgba(247,215,116,.10); }
.skc-ring-line-inner { position:absolute; inset:11%; border-radius:50%; border:1px solid rgba(247,215,116,.22); }
.skc-ztrack { position:absolute; inset:0; }
.skc-zglyph { position:absolute; top:3%; left:50%; font-size:clamp(18px,2.4vw,26px); color:#F7D774; text-shadow:0 0 12px rgba(247,215,116,.7); }

.skc-ring-spin { position:absolute; inset:24%; border-radius:50%; animation:skc-spinSlowR 90s linear infinite; }
.skc-ring-dashed { position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(56,189,248,.35); }
.skc-geo { position:absolute; inset:14%; border:1px solid rgba(247,215,116,.30); }
.skc-geo-2 { border-color:rgba(217,70,239,.30); }

.skc-moon-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; will-change:transform; }
.skc-moon { width:24%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 36% 30%, #ffffff, #e6ebf5 38%, #b7c0d4 78%, #8a93a8); box-shadow:0 0 40px rgba(248,250,252,.55), inset -8px -8px 18px rgba(40,50,80,.4); animation:skc-floatA 8s ease-in-out infinite; }

.skc-planet { position:absolute; }
.skc-planet-body { width:100%; height:100%; border-radius:50%; position:relative; }
.skc-planet-sun { left:6%; top:14%; width:14%; aspect-ratio:1; }
.skc-planet-sun .skc-planet-body { background:radial-gradient(circle at 35% 30%, #FFE9A8, #F7D774 35%, #D4AF37 72%, #8a6a18); box-shadow:0 0 34px rgba(247,215,116,.7); animation:skc-floatB 7s ease-in-out infinite; }
.skc-planet-saturn { right:2%; top:30%; width:11%; aspect-ratio:1; }
.skc-planet-saturn .skc-planet-body { background:radial-gradient(circle at 35% 30%, #f0d8a6, #d8b06a 55%, #9c7636); box-shadow:0 0 22px rgba(216,176,106,.5); animation:skc-floatC 9s ease-in-out infinite; }
.skc-saturn-ring { position:absolute; left:50%; top:50%; width:185%; height:46%; transform:translate(-50%,-50%) rotate(-22deg); border-radius:50%; border:3px solid rgba(247,215,116,.6); box-shadow:0 0 12px rgba(247,215,116,.4); }
.skc-planet-mars { right:14%; bottom:6%; width:9%; aspect-ratio:1; }
.skc-planet-mars .skc-planet-body { background:radial-gradient(circle at 35% 30%, #f0a07a, #d9603e 55%, #9c2f1c); box-shadow:0 0 20px rgba(217,96,62,.55); animation:skc-floatA 6.5s ease-in-out infinite; }
.skc-planet-violet { left:14%; bottom:10%; width:8%; aspect-ratio:1; }
.skc-planet-violet .skc-planet-body { background:radial-gradient(circle at 35% 30%, #1a1130, #0a0518 70%); box-shadow:0 0 22px rgba(106,61,232,.7), inset 0 0 10px rgba(217,70,239,.4); border:1px solid rgba(106,61,232,.5); animation:skc-floatB 8.5s ease-in-out infinite; }
.skc-planet-moon2 { left:-2%; top:50%; width:7%; aspect-ratio:1; }
.skc-planet-moon2 .skc-planet-body { background:radial-gradient(circle at 35% 30%, #d7d2cb, #9a958d 65%, #6a655e); box-shadow:0 0 16px rgba(56,189,248,.4); animation:skc-floatC 7.5s ease-in-out infinite; }

/* Floating chips */
.skc-chip { position:absolute; border-radius:18px; background:rgba(11,16,38,.55); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 12px 40px rgba(0,0,0,.45); }
.skc-chart { left:0; bottom:6%; padding:14px 16px; animation:skc-floatA 9s ease-in-out infinite; }
.skc-chart-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#94A3B8; margin-bottom:8px; }
.skc-moonchip { right:2%; top:8%; display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:30px; box-shadow:0 10px 30px rgba(0,0,0,.4); font-size:12.5px; color:#E2E8F0; animation:skc-floatB 7.5s ease-in-out infinite; }
.skc-muted { color:#94A3B8; }
.skc-gold { font-weight:600; color:#F7D774; }

/* Cursor glow */
.skc-glow { position:fixed; left:0; top:0; width:480px; height:480px; border-radius:50%; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s; background:radial-gradient(circle, rgba(247,215,116,.10), rgba(106,61,232,.06) 40%, transparent 68%); mix-blend-mode:screen; }

@media (prefers-reduced-motion: reduce) {
  .sk-chero * { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .skc-shooting span { opacity:0; }
}
/* Small phones: the wheel's 340px floor is wider than a 320px viewport (clipped),
   and the 420px min-height leaves a tall empty band under the headline. Shrink
   both so the cosmic art stays inside the viewport and the fold is tighter. */
@media (max-width: 600px) {
  .skc-right { min-height: clamp(260px, 78vw, 420px); }
  .skc-wheel { width: clamp(240px, 76vw, 420px); }
}

/* ── Trust ticker (post-hero marquee) ─────────────────────────────────────── */
.sk-ticker { overflow:hidden; background:var(--sk-primary-deep); border-top:1px solid var(--sk-hairline); border-bottom:1px solid var(--sk-hairline);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sk-ticker-track { display:flex; align-items:center; width:max-content; padding:14px 0; animation:sk-ticker-scroll 38s linear infinite; }
.sk-ticker:hover .sk-ticker-track { animation-play-state:paused; }
.sk-ticker-item { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; padding:0 4px;
  font-weight:600; font-size:var(--sk-fs-sm); letter-spacing:.02em; color:#fff; }
.sk-ticker-ico { font-size:18px; line-height:1; }
.sk-ticker-sep { padding:0 22px; color:var(--sk-gold); font-size:13px; }
@keyframes sk-ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sk-ticker-track { animation:none; flex-wrap:wrap; justify-content:center; gap:6px 0; }
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.sk-navbar { position: sticky; top: 0; z-index: 100; height: var(--sk-navbar-h);
  background: var(--sk-glass-fill); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sk-hairline); }
.sk-nav-inner { display: flex; align-items: center; gap: var(--sk-sp-lg); height: 100%; }
.sk-brand { display: flex; align-items: center; text-decoration: none; white-space: nowrap; }
.sk-brand img { height: 40px; width: auto; display: block; }

.sk-nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex: 1; }
.sk-nav-link, .sk-nav-trigger { display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--sk-r-md); color: var(--sk-ink); font: inherit;
  font-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color var(--sk-motion-fast), background var(--sk-motion-fast); }
.sk-nav-link:hover, .sk-nav-trigger:hover,
.sk-has-mega:hover .sk-nav-trigger, .sk-has-mega.is-open .sk-nav-trigger { color: var(--sk-primary); background: var(--sk-primary-50); text-decoration: none; }
.sk-nav-link.is-active, .sk-nav-trigger.is-active { color: var(--sk-primary); }
.sk-nav-link.is-active { box-shadow: inset 0 -2px 0 var(--sk-gold); border-radius: var(--sk-r-md) var(--sk-r-md) 0 0; }
.sk-nav-link:focus-visible, .sk-nav-trigger:focus-visible { outline: var(--sk-focus-outline); outline-offset: 2px; }

/* CSS chevron (no glyph dependency); rotates when its menu is open. */
.sk-caret { display: inline-block; width: 7px; height: 7px; position: relative; top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .6;
  transform: rotate(45deg); transition: transform var(--sk-motion-fast), top var(--sk-motion-fast); }
.sk-nav-trigger[aria-expanded="true"] .sk-caret,
.sk-has-mega.is-open .sk-caret { transform: rotate(-135deg); top: 1px; }

.sk-nav-actions { display: flex; align-items: center; gap: 14px; }
.sk-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--sk-r-full); color: var(--sk-ink); text-decoration: none; transition: background var(--sk-motion-fast); }
.sk-nav-icon:hover { background: var(--sk-hairline); text-decoration: none; }
.sk-nav-cart { position: relative; }
.sk-nav-cart-badge { position: absolute; top: -2px; right: -2px; }

/* Mega-menu (desktop dropdown) — opens on hover (CSS) and on click/keyboard
   (.is-open toggled by initNav). Animated via opacity/transform; visibility keeps
   it out of the a11y/tab order while closed. */
.sk-has-mega { position: relative; }
.sk-mega { position: absolute; top: calc(100% + 6px); left: 0; display: flex; flex-wrap: wrap; gap: 12px 32px;
  background: var(--sk-canvas); border: 1px solid var(--sk-hairline); border-radius: var(--sk-r-lg);
  box-shadow: var(--sk-shadow-lg); padding: 20px 24px; min-width: 420px; z-index: 200;
  visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--sk-motion-base), transform var(--sk-motion-base), visibility var(--sk-motion-base); }
.sk-mega-right { left: auto; right: 0; min-width: 220px; }
.sk-has-mega:hover .sk-mega, .sk-has-mega:focus-within .sk-mega, .sk-has-mega.is-open .sk-mega {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.sk-mega-col { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.sk-mega-col a, .sk-mega-col button { color: var(--sk-ink-soft); font-weight: 400; padding: 6px 10px;
  margin: 0 -10px; border-radius: var(--sk-r-sm); background: none; border: 0; cursor: pointer; font: inherit;
  text-align: left; text-decoration: none; transition: color var(--sk-motion-fast), background var(--sk-motion-fast); }
.sk-mega-col a:hover, .sk-mega-col button:hover { color: var(--sk-primary); background: var(--sk-primary-50); }
.sk-mega-col a.is-active { color: var(--sk-primary); font-weight: 600; }
.sk-mega-col a:focus-visible, .sk-mega-col button:focus-visible,
.sk-mega-all:focus-visible { outline: var(--sk-focus-outline); outline-offset: 1px; }
/* Full-width "View all" link above the columns. */
.sk-mega-all { flex: 1 0 100%; display: inline-flex; align-items: center; gap: 6px;
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--sk-hairline);
  color: var(--sk-primary); font-weight: 600; text-decoration: none; }
.sk-mega-all:hover { color: var(--sk-primary-deep, var(--sk-primary)); }
.sk-mega-logout { color: var(--sk-danger) !important; }

/* Hamburger toggle — hidden on desktop, shown ≤1023px */
.sk-nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; border-radius: var(--sk-r-md); }
.sk-nav-toggle:hover { background: var(--sk-hairline); }
.sk-hamburger, .sk-hamburger::before, .sk-hamburger::after { display: block; width: 22px; height: 2px;
  background: var(--sk-ink); border-radius: 2px; transition: transform var(--sk-motion-fast); }
.sk-hamburger { position: relative; }
.sk-hamburger::before, .sk-hamburger::after { content: ""; position: absolute; left: 0; }
.sk-hamburger::before { top: -7px; }
.sk-hamburger::after  { top: 7px; }

/* Mobile slide drawer (reuses .sk-drawer mechanics from ui.js) */
.sk-mobile-nav { width: min(86vw, 360px); padding: 0; }
.sk-mobile-nav-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sk-sp-md) var(--sk-sp-lg); border-bottom: 1px solid var(--sk-hairline); }
.sk-mobile-nav-body { flex: 1; overflow-y: auto; padding: var(--sk-sp-sm) var(--sk-sp-lg); }

/* Mobile accordion nav (.sk-mnav-*) — single section open at a time, animated
   max-height (driven by initNav). Flat nav styling, not the card accordion. */
.sk-mnav-link, .sk-mnav-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sk-sp-md); width: 100%; padding: 14px 6px; font: inherit; font-weight: 500;
  color: var(--sk-ink); background: none; border: 0; border-bottom: 1px solid var(--sk-hairline);
  text-align: left; text-decoration: none; cursor: pointer; }
.sk-mnav-link:hover, .sk-mnav-head:hover { color: var(--sk-primary); }
.sk-mnav-link.is-active, .sk-mnav-head.is-active { color: var(--sk-primary); }
.sk-mnav-link.is-active { box-shadow: inset 3px 0 0 var(--sk-gold); border-radius: 0 var(--sk-r-sm) var(--sk-r-sm) 0; padding-left: 12px; }
.sk-mnav-link:focus-visible, .sk-mnav-head:focus-visible,
.sk-mnav-sublink:focus-visible { outline: var(--sk-focus-outline); outline-offset: -2px; border-radius: var(--sk-r-sm); }
.sk-mnav-group { border-bottom: 1px solid var(--sk-hairline); }
.sk-mnav-group .sk-mnav-head { border-bottom: 0; }
/* CSS chevron for the accordion heads */
.sk-mnav-caret { flex: none; width: 8px; height: 8px; position: relative; top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .6;
  transform: rotate(45deg); transition: transform var(--sk-motion-base), top var(--sk-motion-base); }
.sk-mnav-group.is-open .sk-mnav-caret { transform: rotate(-135deg); top: 1px; }
.sk-mnav-group.is-open > .sk-mnav-head { color: var(--sk-primary); }
/* Collapsible body — max-height animated inline by initNav */
.sk-mnav-body { max-height: 0; overflow: hidden; transition: max-height var(--sk-motion-base); }
.sk-mnav-inner { display: flex; flex-direction: column; padding: 4px 0 12px 12px; }
.sk-mnav-subtitle { font-size: var(--sk-fs-caption); text-transform: uppercase; letter-spacing: .4px;
  color: var(--sk-ink-muted); font-weight: 600; padding: 10px 4px 4px; }
.sk-mnav-sublink { padding: 10px 6px; color: var(--sk-ink-soft); text-decoration: none; border-radius: var(--sk-r-sm); }
.sk-mnav-sublink:hover { color: var(--sk-primary); }
.sk-mnav-sublink.is-active { color: var(--sk-primary); font-weight: 600; }
.sk-mnav-all { color: var(--sk-primary); font-weight: 600; }
.sk-mobile-nav-foot { display: grid; gap: var(--sk-sp-sm); padding: var(--sk-sp-lg); border-top: 1px solid var(--sk-hairline); }

@media (max-width: 1023px) {
  .sk-nav-links, .sk-nav-account, .sk-nav-auth { display: none !important; }
  .sk-nav-toggle { display: inline-flex; }
  .sk-nav-actions { margin-left: auto; }
}

/* ── Mobile sticky bottom nav (≤768px) ──────────────────────────────────────
   App-style primary nav: glass surface + elevated shadow, rounded top corners,
   four equal touch targets, animated active indicator. Tablet/desktop hidden. */
.sk-bottomnav { display: none; }

@media (max-width: 768px) {
  .sk-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(4, 1fr);
    min-height: var(--sk-bottomnav-h);   /* matches the body clearance token */
    background: white;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid var(--sk-hairline);
    border-radius: var(--sk-r-lg) var(--sk-r-lg) 0 0;
    box-shadow: var(--sk-shadow-lg);
    /* iPhone home-indicator safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sk-bottomnav-item {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; padding: 9px 4px;            /* ≥48px touch target */
    color: var(--sk-ink-muted); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--sk-motion-fast);
    /* reset for <button> items (Filter/Sort) so they match the anchor items */
    background: none; border: 0; font: inherit; cursor: pointer;
  }
  .sk-bottomnav-item:hover { color: var(--sk-ink); text-decoration: none; }
  .sk-bottomnav-ico {
    font-size: 22px; line-height: 1;
    transition: transform var(--sk-motion-base);
  }
  .sk-bottomnav-label {
    font-size: var(--sk-fs-caption); line-height: 1; font-weight: var(--sk-fw-medium);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* tap feedback (scale) */
  .sk-bottomnav-item:active .sk-bottomnav-ico { transform: scale(.85); }
  /* active page */
  .sk-bottomnav-item.is-active { color: var(--sk-primary); }
  .sk-bottomnav-item.is-active .sk-bottomnav-label { font-weight: var(--sk-fw-heading); }
  .sk-bottomnav-item.is-active .sk-bottomnav-ico { transform: translateY(-1px) scale(1.08); }
  /* animated glowing top indicator on the active item */
  .sk-bottomnav-item.is-active::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 26px; height: 3px; border-radius: var(--sk-r-full);
    background: var(--sk-primary); box-shadow: var(--sk-shadow-purple);
    transform: translateX(-50%); transform-origin: center;
    animation: sk-bottomnav-in var(--sk-motion-base) both;
  }
  .sk-bottomnav-item:focus-visible {
    outline: var(--sk-focus-outline); outline-offset: -3px; border-radius: var(--sk-r-md);
  }
  @keyframes sk-bottomnav-in {
    from { transform: translateX(-50%) scaleX(0); opacity: 0; }
    to   { transform: translateX(-50%) scaleX(1); opacity: 1; }
  }
  /* keep page content clear of the fixed bar (storefront only — not dashboard) */
  body.sk-app:not(.sk-has-dashboard) {
    padding-bottom: calc(var(--sk-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.sk-footer { background: var(--sk-primary); color: var(--sk-on-primary); padding: 30px var(--sk-sp-xl) 10px; }
.sk-footer a { color: rgba(255,255,255,.82); }
.sk-footer a:hover { color: #fff; }
.sk-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sk-sp-xxl); }
.sk-footer-brand-name { font-weight: 700; font-size: var(--sk-fs-h3); }
.sk-footer-brand p { color: rgba(255,255,255,.72); max-width: 32ch; margin-top: var(--sk-sp-xs); }
.sk-footer-col .sk-eyebrow { color: var(--sk-gold-soft); }
.sk-footer-col ul { list-style: none; padding: 0; margin: var(--sk-sp-sm) 0 0; display: grid; gap: 6px; }
.sk-footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sk-sp-sm); justify-content: space-between;
  align-items: center; margin-top: var(--sk-sp-xxl); padding-top: var(--sk-sp-lg);
  border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7); font-size: var(--sk-fs-sm); }
.sk-footer-bottom-links { display: flex; gap: var(--sk-sp-md); flex-wrap: wrap; }
@media (max-width: 860px) { .sk-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sk-sp-xl); } }
@media (max-width: 480px) { .sk-footer-grid { grid-template-columns: 1fr; } }

/* ── Auth split-screen ────────────────────────────────────────────────────── */
.sk-auth-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; height: 68px; padding: 0 clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--sk-surface) 84%, transparent);
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--sk-hairline); }
.sk-auth-topbar .sk-brand { display: inline-flex; align-items: center; }
.sk-auth-topbar .sk-brand img { display: block; height: 40px; width: auto; }

.sk-auth { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1.05fr 1fr;
  background: radial-gradient(125% 120% at 100% 0%, var(--sk-primary-50) 0%, var(--sk-surface) 46%); }

/* Brand / story panel — gradient canvas with soft light orbs + mandala rings */
.sk-auth-brand { position: relative; overflow: hidden; isolation: isolate;
  background: var(--sk-grad-hero); color: #fff;
  padding: clamp(40px, 5vw, 72px); display: flex; flex-direction: column;
  justify-content: center; gap: 22px; }
.sk-auth-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 42% at 84% 10%, rgba(231,206,114,.45), transparent 70%),
    radial-gradient(48% 48% at 6% 98%, rgba(245,158,11,.40), transparent 72%); }
.sk-auth-brand::after { content: ""; position: absolute; z-index: -1; right: -190px; top: 50%;
  width: 540px; height: 540px; transform: translateY(-50%); border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, transparent 38%, rgba(255,255,255,.10) 38.6%, transparent 40%),
    radial-gradient(circle, transparent 52%, rgba(255,255,255,.08) 52.6%, transparent 54%),
    radial-gradient(circle, transparent 66%, rgba(255,255,255,.07) 66.6%, transparent 68%),
    radial-gradient(circle, transparent 80%, rgba(255,255,255,.05) 80.6%, transparent 82%); }
.sk-auth-brand > * { position: relative; }
.sk-auth-brand .sk-eyebrow { color: var(--sk-gold-soft); }
.sk-auth-brand h1 { color: #fff; font-size: var(--sk-fs-display); line-height: var(--sk-lh-display);
  max-width: 15ch; letter-spacing: -0.01em; }
.sk-auth-lede { margin: 0; max-width: 44ch; color: rgba(255,255,255,.82); font-size: var(--sk-fs-body-lg); }

.sk-auth-trust { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; }
.sk-auth-trust li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.94);
  font-size: var(--sk-fs-body); }
.sk-auth-trust li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background-color: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.30);
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.sk-auth-quote { margin-top: 10px; padding: 16px 18px; border-radius: var(--sk-r-md);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,.92); font-size: var(--sk-fs-sm); line-height: var(--sk-lh-body); }
.sk-auth-quote cite { display: block; margin-top: 6px; font-style: normal; color: var(--sk-gold-soft);
  font-size: var(--sk-fs-caption); letter-spacing: .3px; }

/* Form side */
.sk-auth-panel { display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(18px, 4vw, 40px); }
.sk-auth-card { width: 100%; max-width: 440px; background: var(--sk-canvas);
  border: 1px solid var(--sk-hairline); border-radius: var(--sk-r-xl);
  box-shadow: var(--sk-shadow-lg); padding: clamp(26px, 3.4vw, 40px);
  animation: sk-auth-rise var(--sk-motion-slow) both; }
.sk-auth-card h2 { font-size: var(--sk-fs-h1); letter-spacing: -0.01em; }
@keyframes sk-auth-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.sk-form-row { margin-bottom: 16px; }
.sk-form-aux { display: flex; justify-content: space-between; align-items: center; font-size: var(--sk-fs-sm); margin: 4px 0 18px; }
.sk-divider-or { display: flex; align-items: center; gap: 12px; color: var(--sk-ink-muted); font-size: var(--sk-fs-sm); margin: 18px 0; }
.sk-divider-or::before, .sk-divider-or::after { content: ""; flex: 1; height: 1px; background: var(--sk-hairline); }

/* Password / affix field — input with an inline trailing toggle button */
.sk-input-wrap { position: relative; }
.sk-input-wrap .sk-input { padding-right: 48px; }
.sk-input-toggle { position: absolute; top: 0; right: 0; height: 48px; width: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: none;
  color: var(--sk-ink-muted); cursor: pointer; border-radius: var(--sk-r-md); transition: color var(--sk-motion-fast); }
.sk-input-toggle:hover { color: var(--sk-primary); }
.sk-input-toggle:focus-visible { outline: none; box-shadow: var(--sk-focus-ring); }
.sk-input-toggle .sk-eye-off { display: none; }
.sk-input-toggle[aria-pressed="true"] .sk-eye-on { display: none; }
.sk-input-toggle[aria-pressed="true"] .sk-eye-off { display: inline; }

@media (max-width: 860px) {
  .sk-auth { grid-template-columns: 1fr; }
  .sk-auth-brand { display: none; }
}

/* ── Reveal-on-scroll (used by ui.js IntersectionObserver) ────────────────── */
.sk-reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--sk-motion-slow), transform var(--sk-motion-slow); }
.sk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sk-reveal { opacity: 1; transform: none; } }

/* ── Responsive table wrapper ─────────────────────────────────────────────── */
/* Desktop: normal table. Tablet: horizontal scroll. Mobile: row → card via
   data-label attributes on each <td> (add label="…" in markup to enable). */
.sk-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--sk-r-md); }
@media (max-width: 600px) {
  .sk-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sk-table-cards tbody tr { display: block; margin-bottom: var(--sk-sp-md); border: 1px solid var(--sk-hairline);
    border-radius: var(--sk-r-md); padding: var(--sk-sp-xs) var(--sk-sp-md); background: var(--sk-canvas); }
  .sk-table-cards td { display: flex; justify-content: space-between; gap: var(--sk-sp-md);
    border: 0; border-bottom: 1px solid var(--sk-hairline); padding: 10px 0; text-align: right; }
  .sk-table-cards tr td:last-child { border-bottom: 0; }
  .sk-table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--sk-ink-soft);
    text-transform: uppercase; font-size: var(--sk-fs-caption); letter-spacing: .3px; text-align: left; }
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.sk-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-xs);
  font-size: var(--sk-fs-sm); color: var(--sk-ink-muted); list-style: none; margin: 0; padding: 0; }
.sk-breadcrumb li { display: flex; align-items: center; gap: var(--sk-sp-xs); }
.sk-breadcrumb li + li::before { content: "›"; color: var(--sk-ink-faint); }
.sk-breadcrumb a { color: var(--sk-ink-soft); }
.sk-breadcrumb a:hover { color: var(--sk-primary); }
.sk-breadcrumb [aria-current="page"] { color: var(--sk-ink); font-weight: 500; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.sk-pagination { display: flex; flex-wrap: wrap; gap: var(--sk-sp-xs); align-items: center; }
.sk-pagination a, .sk-pagination span, .sk-pagination button { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--sk-hairline); background: var(--sk-canvas);
  border-radius: var(--sk-r-md); color: var(--sk-ink-soft); font: inherit; font-size: var(--sk-fs-sm); cursor: pointer; }
.sk-pagination a:hover, .sk-pagination button:hover { border-color: var(--sk-primary); color: var(--sk-primary); text-decoration: none; }
.sk-pagination .is-active { background: var(--sk-primary); border-color: var(--sk-primary); color: var(--sk-on-primary); }
.sk-pagination .is-disabled { color: var(--sk-ink-faint); pointer-events: none; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.sk-alert { display: flex; gap: var(--sk-sp-sm); align-items: flex-start; padding: var(--sk-sp-md) var(--sk-sp-lg);
  border-radius: var(--sk-r-md); font-size: var(--sk-fs-body); border: 1px solid transparent; }
.sk-alert-icon { flex: none; font-size: 1.1em; line-height: 1.4; }
.sk-alert-success { background: #e6f4ec; color: #1d6b3c; border-color: #bfe3cc; }
.sk-alert-warning { background: #fbf2da; color: #8a6400; border-color: #f0deaf; }
.sk-alert-danger  { background: #fae5e5; color: #9b2c2c; border-color: #f0c0c0; }
.sk-alert-info    { background: #e7f0fe; color: #1d4ed8; border-color: #c2d6f7; }

/* ── Prose (long-form / CMS HTML) ─────────────────────────────────────────────
   Comfortable reading rhythm for admin-authored content (legal pages, blog). */
.sk-prose { color: var(--sk-ink-soft); font-size: var(--sk-fs-body-lg); line-height: 1.8; }
.sk-prose > :first-child { margin-top: 0; }
.sk-prose > :last-child { margin-bottom: 0; }
.sk-prose h2 { font-size: var(--sk-fs-h3); color: var(--sk-primary); margin: 2em 0 .6em;
  padding-top: 1.4em; border-top: 1px solid var(--sk-hairline); scroll-margin-top: 96px; }
.sk-prose > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.sk-prose h3 { font-size: var(--sk-fs-h4); color: var(--sk-ink); margin: 1.6em 0 .5em; }
.sk-prose p, .sk-prose ul, .sk-prose ol { margin: 0 0 1.1em; }
.sk-prose ul, .sk-prose ol { padding-left: 1.3em; }
.sk-prose li { margin-bottom: .5em; }
.sk-prose li::marker { color: var(--sk-gold-deep); }
.sk-prose a { color: var(--sk-link); text-decoration: underline; text-underline-offset: 2px; }
.sk-prose strong { color: var(--sk-ink); font-weight: var(--sk-fw-heading); }
.sk-prose em { color: var(--sk-ink-muted); }

/* ── Legal / policy page layout ───────────────────────────────────────────────
   Premium header band + content card with an auto-built sticky table of contents
   (cms-page.php). Pure presentation; TOC is generated client-side from h2s. */
.sk-legal-hero { background: var(--sk-grad-hero); color: #fff; position: relative; overflow: hidden; }
.sk-legal-hero::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 85% -10%, rgba(212,175,55,.30), transparent 55%); pointer-events: none; }
.sk-legal-hero .sk-container { position: relative; padding-block: clamp(40px, 6vw, 72px); max-width: 1040px; }
.sk-legal-hero .sk-breadcrumb, .sk-legal-hero .sk-breadcrumb a { color: rgba(255,255,255,.78); }
.sk-legal-hero .sk-breadcrumb a:hover { color: #fff; }
.sk-legal-hero .sk-breadcrumb [aria-current="page"] { color: #fff; }
.sk-legal-hero .sk-breadcrumb li + li::before { color: rgba(255,255,255,.5); }
.sk-legal-eyebrow { color: var(--sk-gold-soft); }
.sk-legal-hero h1 { color: #fff; font-size: var(--sk-fs-display); margin: .35em 0 0; }
.sk-legal-meta { margin: 14px 0 0; color: rgba(255,255,255,.82); font-size: var(--sk-fs-sm);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--sk-r-full);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }

.sk-legal-wrap { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px);
  max-width: 1040px; padding-block: clamp(28px, 4vw, 52px); align-items: start; }
.sk-legal-card { background: var(--sk-canvas); border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-r-xl); box-shadow: var(--sk-shadow-md); padding: clamp(24px, 3.4vw, 48px); }

.sk-legal-toc { position: sticky; top: 92px; }
.sk-legal-toc-title { font-size: var(--sk-fs-caption); font-weight: 600; letter-spacing: var(--sk-tracking-label);
  text-transform: uppercase; color: var(--sk-ink-muted); margin: 0 0 12px; padding-left: 14px; }
.sk-legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--sk-hairline); }
.sk-legal-toc li { margin: 0; }
.sk-legal-toc a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--sk-ink-muted); font-size: var(--sk-fs-sm); line-height: 1.4; text-decoration: none; transition: color .15s, border-color .15s; }
.sk-legal-toc a:hover { color: var(--sk-primary); }
.sk-legal-toc a.is-active { color: var(--sk-primary); border-left-color: var(--sk-primary); font-weight: 500; }

@media (max-width: 860px) {
  .sk-legal-wrap { grid-template-columns: 1fr; }
  .sk-legal-toc { display: none; }
}

/* ── Social share (includes/social-share.php + core/share.js) ───────────────
   Mobile-first: a single "Share" button shows by default; ≥769px the full
   button row + title appears and the native button hides. Markup is built by
   share.js, so these rules are the only styling surface. */
.sk-share { margin-block: var(--sk-sp-lg); }
.sk-share__title { display: none; font-size: var(--sk-fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--sk-tracking-label); color: var(--sk-ink-muted);
  margin-bottom: 10px; }
.sk-share__row { display: none; flex-wrap: wrap; gap: 10px; }

.sk-share__btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: inherit; font-size: var(--sk-fs-sm); font-weight: 500; color: var(--sk-ink);
  padding: 10px 16px; border: 1px solid var(--sk-hairline); border-radius: var(--sk-r-lg);
  background: var(--sk-canvas); box-shadow: var(--sk-shadow-sm);
  transition: transform var(--sk-motion-fast), box-shadow var(--sk-motion-fast),
              border-color var(--sk-motion-fast), background var(--sk-motion-fast), color var(--sk-motion-fast); }
.sk-share__btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--sk-shadow-md);
  border-color: var(--sk-hairline-strong); }
.sk-share__btn:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; }
.sk-share__btn:active { transform: translateY(0) scale(.99); }

/* Single mobile "Share" button (default). */
.sk-share__native { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: inherit;
  font-size: var(--sk-fs-body); font-weight: 600; color: #fff; padding: 12px 22px; border: 0;
  border-radius: var(--sk-r-full); background: var(--sk-primary);
  box-shadow: var(--sk-shadow-md); transition: transform var(--sk-motion-fast), box-shadow var(--sk-motion-fast); }
.sk-share__native:hover { transform: translateY(-1px) scale(1.03); box-shadow: var(--sk-shadow-lg); }
.sk-share__native:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 3px; }
.sk-share-ic { display: inline-grid; place-items: center; line-height: 0; }

/* Per-brand accent on hover (subtle — keeps the light-premium look). */
.sk-share__btn--whatsapp:hover { color: #1ebd5a; }
.sk-share__btn--facebook:hover { color: #1877f2; }
.sk-share__btn--x:hover        { color: #0f0f0f; }
.sk-share__btn--telegram:hover { color: #2aabee; }
.sk-share__btn--linkedin:hover { color: #0a66c2; }
.sk-share__btn--copy:hover     { color: var(--sk-primary); }

@media (min-width: 769px) {
  .sk-share__title, .sk-share__row { display: flex; }
  .sk-share__native { display: none; }
  /* Tablet-compact variant: icon-forward, condensed labels. */
  .sk-share--compact .sk-share__txt { display: none; }
  .sk-share--compact .sk-share__btn { padding: 10px 13px; }
}

/* ── Bottom sheet (mobile fallback when Web Share API is absent) ──────────── */
.sk-share-sheet { position: fixed; inset: 0; z-index: 1200; }
.sk-share-sheet__backdrop { position: absolute; inset: 0; background: rgba(20,12,30,.45);
  opacity: 0; transition: opacity .2s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sk-share-sheet.is-open .sk-share-sheet__backdrop { opacity: 1; }
.sk-share-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sk-canvas);
  border-radius: 20px 20px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--sk-shadow-lg); transform: translateY(100%); transition: transform .24s cubic-bezier(.22,.61,.36,1); }
.sk-share-sheet.is-open .sk-share-sheet__panel { transform: translateY(0); }
.sk-share-sheet__grip { width: 42px; height: 4px; border-radius: var(--sk-r-full);
  background: var(--sk-hairline-strong); margin: 6px auto 12px; }
.sk-share-sheet__head { display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: var(--sk-fs-body-lg); color: var(--sk-ink); margin-bottom: 14px; }
.sk-share-sheet__x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--sk-ink-muted); padding: 0 4px; }
.sk-share-sheet__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.sk-share-sheet__item { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: var(--sk-fs-caption); color: var(--sk-ink-soft); background: none; border: 0; padding: 6px 2px; }
.sk-share-sheet__item .sk-share-ic { width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--sk-hairline); background: var(--sk-surface); color: var(--sk-primary);
  transition: transform var(--sk-motion-fast), background var(--sk-motion-fast); }
.sk-share-sheet__item:hover .sk-share-ic { transform: scale(1.06); background: var(--sk-primary-50); }
.sk-share-sheet__item:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; border-radius: var(--sk-r-sm); }

@media (prefers-reduced-motion: reduce) {
  .sk-share__btn, .sk-share__native, .sk-share-sheet__panel, .sk-share-sheet__backdrop,
  .sk-share-sheet__item .sk-share-ic { transition: none; }
  .sk-share__btn:hover, .sk-share__native:hover { transform: none; }
}