/* =====================================================
   KASTELL STORE — MAIN STYLESHEET
   Design: Dark-Grey Gaming | Accent: #CC1111 (Red Kastell)
   Fonts: Orbitron (headings) + Inter (body) + JetBrains Mono (prices)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Caveat:wght@600&display=swap');

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* Backgrounds — dark neutral grey */
  --bg-main:      #141414;
  --bg-surface:   #1c1c1c;
  --bg-elevated:  #222222;
  --bg-overlay:   #14141400;
  --bg-hero:      #141414;

  /* Accent — Kastell red */
  --accent:       #CC1111;
  --accent-hover: #e02020;
  --accent-dim:   rgba(204, 17, 17, 0.12);
  --accent-dim2:  rgba(204, 17, 17, 0.06);
  --accent-border:rgba(204, 17, 17, 0.30);
  --accent-glow:  none;

  /* Text */
  --text-primary:   #f0f0f0;
  --text-secondary: #a8a8b3;
  --text-muted:     #5e5e6e;

  /* Borders */
  --border:         #2e2f36;
  --border-light:   #3a3b43;

  /* Shadows */
  --shadow-sm:   0 2px 8px  rgba(0,0,0,0.35);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);

  /* Typography */
  --font-heading: 'Orbitron', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing scale (4-base) */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10:40px;
  --s-12:48px;  --s-16:64px;  --s-20:80px;  --s-24:96px;

  /* Radii */
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* Neutral button hover (dark theme default) */
  --btn-hover-bg:     #262626;
  --btn-hover-border: var(--border-light);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   150ms;
  --t-normal: 220ms;
  --t-slow:   350ms;

  /* Layout */
  --max-w: 1200px;
  --max-w-sm: 800px;
}

/* ── Light mode ── */
html[data-theme="light"] {
  --bg-main:      #f2f2f5;
  --bg-surface:   #e8e8ed;
  --bg-elevated:  #ffffff;
  --bg-overlay:   #f2f2f500;
  --bg-hero:      #f2f2f5;

  --text-primary:   #111114;
  --text-secondary: #383844;
  --text-muted:     #7a7a8a;

  --border:         #d4d4de;
  --border-light:   #c0c0cc;
  --btn-hover-bg:     #d8d8de;
  --btn-hover-border: #b0b0bc;

  --shadow-sm:   0 2px 8px  rgba(0,0,0,0.07);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.09);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.12);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.07);
}

/* ── Light mode: element overrides (rgba-white → rgba-dark) ── */
html[data-theme="light"] .kst-nav a:hover,
html[data-theme="light"] .kst-nav a.active:hover {
  background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .kst-mobile-nav a:hover {
  background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .kst-btn::before {
  background: rgba(0,0,0,0.06);
}
/* Header buttons: same solid base as hamburger, unified neutral hover */
.kst-header-actions .kst-btn--outline,
.kst-header-actions .kst-btn--ghost {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}
.kst-header-actions .kst-btn--outline:hover,
.kst-header-actions .kst-btn--ghost:hover {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color: var(--text-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Mobile nav icon buttons: same neutral hover */
.kst-mobile-nav-icon-btn:hover,
.kst-mobile-nav-icon-btn:active {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color: var(--text-primary) !important;
}

/* Force accordion backgrounds in hover/open states */
html[data-theme="light"] .kst-faq-item,
html[data-theme="light"] .kst-faq-item.open {
  background: #f2f2f5 !important;
}
html[data-theme="light"] .kst-pac-item,
html[data-theme="light"] .kst-pac-item:hover,
html[data-theme="light"] .kst-pac-item--open {
  background: #ffffff !important;
}
/* Legal table subtle tints */
html[data-theme="light"] .kst-legal-table thead th {
  background: rgba(0,0,0,0.04);
}
html[data-theme="light"] .kst-legal-table tbody td {
  border-bottom-color: var(--border);
}
html[data-theme="light"] .kst-legal-table tbody tr:hover td {
  background: rgba(0,0,0,0.03);
}
/* Account nav section borders */
html[data-theme="light"] .woocommerce-account .woocommerce-MyAccount-navigation ul li + li {
  border-top-color: var(--border);
}

/* ── System preference: light ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-main:      #f2f2f5;
    --bg-surface:   #e8e8ed;
    --bg-elevated:  #ffffff;
    --bg-overlay:   #f2f2f500;
    --bg-hero:      #f2f2f5;

    --text-primary:   #111114;
    --text-secondary: #383844;
    --text-muted:     #7a7a8a;

    --border:         #d4d4de;
    --border-light:   #c0c0cc;
    --btn-hover-bg:     #d8d8de;
    --btn-hover-border: #b0b0bc;

    --shadow-sm:   0 2px 8px  rgba(0,0,0,0.07);
    --shadow-md:   0 4px 20px rgba(0,0,0,0.09);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.12);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.07);
  }
  :root:not([data-theme]) .kst-nav a:hover,
  :root:not([data-theme]) .kst-nav a.active:hover {
    background: rgba(0,0,0,0.06);
  }
  :root:not([data-theme]) .kst-mobile-nav a:hover {
    background: rgba(0,0,0,0.06);
  }
  :root:not([data-theme]) .kst-btn::before {
    background: rgba(0,0,0,0.06);
  }
  :root:not([data-theme]) .kst-faq-item,
  :root:not([data-theme]) .kst-faq-item.open {
    background: #f2f2f5 !important;
  }
  :root:not([data-theme]) .kst-pac-item,
  :root:not([data-theme]) .kst-pac-item:hover,
  :root:not([data-theme]) .kst-pac-item--open {
    background: #ffffff !important;
  }
  :root:not([data-theme]) .kst-legal-table thead th {
    background: rgba(0,0,0,0.04);
  }
  :root:not([data-theme]) .kst-legal-table tbody td {
    border-bottom-color: var(--border);
  }
  :root:not([data-theme]) .kst-legal-table tbody tr:hover td {
    background: rgba(0,0,0,0.03);
  }
}

/* ─────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 200ms ease, color 200ms ease;
}

/* ── Film grain overlay ─────────────────────────────────
   Fixed pseudo-element that sits over the entire page
   at very low opacity — gives depth without distraction.
   pointer-events: none = no clicks blocked.
────────────────────────────────────────────────────── */

/* Override Astra body background — var(--bg-main) respects dark/light/system */
body,
body.astra-page,
body.page,
body.page-template,
body.page-template-page-privacy-policy {
  background-color: var(--bg-main) !important;
}
/* Kill any white Astra content wrappers */
#page, #content, .site, .site-content,
.ast-container, .ast-article-single,
#primary, #main, .entry-content,
.ast-separate-container, .ast-page-builder-template {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-hover); }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─────────────────────────────────────────────
   3. UTILITY CLASSES
───────────────────────────────────────────── */
.kst-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.kst-container--sm {
  max-width: var(--max-w-sm);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.kst-section {
  padding: var(--s-20) 0;
  scroll-margin-top: 40px;
}

.kst-section--lg {
  padding: 100px 0;
}

.kst-badge {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.kst-section-header {
  text-align: center;
  margin-bottom: var(--s-6);
}

.kst-section-header .kst-badge {
  margin-bottom: var(--s-4);
}

.kst-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}

.kst-hero-eyebrow-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
}

.kst-section-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ─────────────────────────────────────────────
   4. BUTTONS
───────────────────────────────────────────── */
.kst-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 28px;
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.03em;
  transition: all var(--t-normal) var(--ease);
  white-space: nowrap;
  min-height: 44px;
  position: relative;
  overflow: hidden;
}

.kst-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.kst-btn:hover::before { opacity: 1; }

.kst-btn--primary {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(204, 17, 17, 0.3);
}

.kst-btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--accent-glow);
  transform: translateY(-2px);
  color: #fff;
}

.kst-btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.kst-btn--outline:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.kst-btn--ghost {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.kst-btn--ghost:hover {
  background: rgba(204, 17, 17, 0.2);
  transform: translateY(-2px);
  box-shadow: var(--accent-glow);
  color: var(--accent-hover);
}

.kst-btn--discord {
  background: #5865F2;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: var(--s-4) var(--s-8);
  flex-shrink: 0;
  width: fit-content;
}

.kst-btn--discord:hover {
  background: #4752c4;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
}

.kst-btn svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────
   5. HEADER / NAVIGATION
───────────────────────────────────────────── */
#kastell-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-normal) var(--ease);
}

#kastell-header.scrolled {
  box-shadow: 0 1px 0 var(--border);
}

.kst-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: var(--s-6);
}

.kst-logo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  flex-shrink: 0;
}

.kst-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.kst-logo-text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

.kst-logo-text span { color: var(--text-primary); }

.kst-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.kst-nav a {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease);
  letter-spacing: 0.02em;
}

.kst-nav a:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.kst-nav a.active {
  color: var(--text-secondary);
  background: none;
}

.kst-nav a.active:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.kst-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

/* Cart icon */
.kst-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease);
  text-decoration: none;
}

.kst-cart-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--text-primary);
}

/* Language button (desktop) — same style as cart/theme */
.kst-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.kst-lang-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--text-primary);
}

/* ── Language Switcher Dropdown ──────────────────────────────────── */
.kst-lang-switcher {
  position: relative;
  display: inline-flex;
}

.kst-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.kst-lang-switcher.open .kst-lang-dropdown {
  display: block;
}

.kst-lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  gap: 10px;
  color: var(--text-secondary);
  text-decoration: none !important;
  font-size: 0.84rem;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.kst-lang-option:hover {
  background: var(--btn-hover-bg);
  color: var(--text-primary);
  text-decoration: none !important;
}

.kst-lang-option--active {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.kst-lang-option--active .kst-lang-code::after {
  content: ' ✓';
}

.kst-lang-name {
  flex: 1;
}

.kst-lang-code {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.kst-lang-option--active .kst-lang-code {
  color: var(--accent);
}

.kst-lang-empty {
  display: block;
  padding: 12px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Mobile variant — expands downward inside the hamburger menu */
.kst-lang-switcher--mobile {
  position: relative;
  flex: 1;
}

.kst-lang-dropdown--mobile {
  left: 0;
  right: 0;
  min-width: unset;
  top: calc(100% + 4px);
}

/* Theme toggle button — same size & style as cart/hamburger */
.kst-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.kst-theme-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--text-primary);
}

.kst-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile menu toggle */
.kst-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  padding: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.kst-menu-toggle:hover {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color: var(--text-primary) !important;
}

/* Mobile nav drawer */
.kst-mobile-nav {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: var(--s-4) var(--s-6);
  z-index: 999;
  flex-direction: column;
  gap: var(--s-2);
}

.kst-mobile-nav.open { display: flex; }
.kst-mobile-nav a {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  display: block;
}
.kst-mobile-nav a:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }


.kst-mobile-account-btn {
  width: 100%;
  margin-top: var(--s-3);
  flex-direction: row !important;
  gap: var(--s-2) !important;
  justify-content: center !important;
}

/* Mobile nav icon row (cart · theme · language) */
.kst-mobile-nav-icons {
  display: flex;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}

.kst-mobile-nav-icon-btn {
  position: relative;
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md) !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.kst-mobile-nav-icon-btn:hover,
.kst-mobile-nav-icon-btn:active {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color: var(--text-primary) !important;
}


.kst-mobile-icon-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.kst-mobile-nav-icon-btn .kst-cart-count {
  position: absolute;
  top: 4px;
  right: 10px;
}

/* Push content below fixed header */
body { padding-top: 68px; }

/* Kill white gap — hide Astra's native masthead & admin bar margin */
html {
  margin-top: 0 !important;
  background-color: var(--bg-main) !important;
}
body { margin-top: 0 !important; }
#wpadminbar { position: fixed !important; }
#masthead,
.site-header:not(#kastell-header),
.main-header-bar-wrap,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header,
.ast-below-header,
.ast-above-header-section,
.ast-below-header-section {
  display: none !important;
}
/* (background overrides moved to section 2 above) */
#kastell-header { border-bottom: none !important; }

/* ─────────────────────────────────────────────
   6. HERO SECTION
───────────────────────────────────────────── */
.kst-hero {
  position: relative;
  display: block;
  background:
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px),
    var(--bg-hero);
  background-size: 28px 28px, auto;
  overflow: hidden;
}

@media (min-width: 769px) {
  .kst-hero {
    max-width: var(--max-w);
    margin: 0 auto;
  }
}

.kst-hero::before { display: none; }
.kst-hero::after  { display: none; }

.kst-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-10) 0 var(--s-10);
}

.kst-hero-content { width: 100%; max-width: 100%; }

.kst-hero-actions .kst-btn { flex: 1; justify-content: center; }

.kst-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.kst-hero-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}


.kst-hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin-bottom: var(--s-5);
}

.kst-hero-headline .highlight {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(204,17,17,0.4);
}

.kst-hero-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--s-4);
  max-width: 100%;
}

.kst-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-10);
}

.kst-hero-trust {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-12);
  padding-top: var(--s-3);
  width: 100%;
}

.kst-hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kst-hero-trust-item .value {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
}

.kst-hero-trust-item .label {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hero visual — payment methods + glow card */
.kst-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.kst-hero-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.kst-hero-card::before { display: none; }

.kst-hero-card-title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}

.kst-payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.kst-payment-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
}

.kst-payment-item:hover {
  border-color: var(--accent-border);
  background: var(--accent-dim2);
}

.kst-payment-item .pm-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.kst-payment-item .pm-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.kst-payment-item .pm-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

.kst-payment-item .pm-note.free {
  color: var(--accent);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   7. SERVICES / PRODUCTS GRID
───────────────────────────────────────────── */
.kst-services {
  background:
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px),
    var(--bg-main);
  background-size: 28px 28px, auto;
  padding: var(--s-4) 0 var(--s-20);
  scroll-margin-top: 88px;
}

.kst-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10);
}

.kst-service-card {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--r-lg);
  overflow: visible;
  transition: all var(--t-normal) var(--ease);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}

/* Extends hover area 8px below the card so translateY(-6px) doesn't cause jitter */
.kst-service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  bottom: -8px;
  pointer-events: auto;
  z-index: -1;
}

.kst-service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  transition: border-color var(--t-normal) var(--ease);
  pointer-events: none;
}

.kst-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.kst-service-card:hover::after {
  border-color: var(--accent-border);
}

.kst-service-banner {
  position: relative;
  width: 100%;
  background: var(--bg-elevated);
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.kst-service-banner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}

.kst-service-card:hover .kst-service-banner img {
  transform: scale(1.04);
}

.kst-badge.kst-service-card-top-badge {
  position: absolute;
  top: calc(-1 * var(--s-4));
  right: 0;
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  border-radius: 0;
  z-index: 2;
}

.kst-service-body {
  padding: var(--s-4) var(--s-5) 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.kst-service-body-badge {
  margin-bottom: var(--s-3);
}

.kst-service-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}

.kst-service-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}

.kst-service-price {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.kst-service-period {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.kst-service-desc {
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--s-5);
}

.kst-service-actions {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin: 0 calc(-1 * var(--s-5));
  border-top: 1px solid var(--border);
  overflow: visible;
}

/* Reset conflicting base button styles for card actions */
.kst-service-actions .kst-btn {
  border: none;
  box-shadow: none;
  transition: transform var(--t-normal) var(--ease);
}

/* Suppress translateY and box-shadow from all button type hovers */
.kst-service-actions .kst-btn:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* Suppress accent color change on outline (cart) button — prevents icon shift */
.kst-service-actions .kst-btn--outline:hover {
  color: var(--text-primary);
}

/* Expand ~2px each side horizontally — same rule for both buttons */
.kst-service-actions .kst-btn--read-more:hover,
.kst-service-actions .kst-btn--cart:hover {
  transform: scaleX(1.04) !important;
  z-index: 1;
}

.kst-btn--read-more {
  flex: 1;
  justify-content: center;
  padding: 14px 16px;
  font-size: 0.825rem;
  border-radius: 0 0 0 var(--r-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kst-btn--cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 18px;
  font-size: 0.825rem;
  font-weight: 700;
  border-radius: 0 0 var(--r-lg) 0;
  flex: 0 0 auto;
  min-width: 112px;
  border-left: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   8. HOW IT WORKS
───────────────────────────────────────────── */
.kst-how {
  background: var(--bg-main);
  position: relative;
  overflow: hidden;
  padding: var(--s-10) 0;
}

.kst-how::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(204,17,17,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.kst-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  position: relative;
}

/* Connector line between steps */
.kst-steps::before {
  content: '';
  position: absolute;
  top: 30px;
  left: calc(16.66% + var(--s-6));
  right: calc(16.66% + var(--s-6));
  height: 1px;
  background: linear-gradient(90deg, var(--accent-border), var(--accent-border));
  background-size: 8px 1px;
  background-image: repeating-linear-gradient(90deg, var(--accent-border) 0, var(--accent-border) 4px, transparent 4px, transparent 8px);
}

.kst-step {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  text-align: left;
  transition: all var(--t-normal) var(--ease);
  position: relative;
  z-index: 1;
}

.kst-step:hover {
  border-color: var(--accent-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.kst-step-number {
  position: absolute;
  top: var(--s-4);
  right: var(--s-5);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  opacity: 0.8;
}

.kst-step-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.kst-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  margin: 0;
}

.kst-step-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin: 0;
}

.kst-step-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ─────────────────────────────────────────────
   9. STATS BAR
───────────────────────────────────────────── */
.kst-stats {
  background: var(--bg-hero);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-12) 0;
}

.kst-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

.kst-stat-item {
  text-align: center;
  padding: var(--s-5) var(--s-4);
  position: relative;
}

.kst-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border);
}

.kst-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 20px rgba(204,17,17,0.3);
  display: block;
  margin-bottom: var(--s-2);
}

.kst-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* Top label row — same element in all 3 items; empty in outer two */
.kst-stat-label--top {
  display: block;
  line-height: 1;
  min-height: 0.8rem;   /* matches font-size so empty slots hold the same space */
  margin-bottom: var(--s-2);
}

/* "Since" variant — value has no bottom margin (no label below) */
.kst-stat-item--since .kst-stat-value {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   10. REVIEWS SECTION
───────────────────────────────────────────── */
.kst-reviews {
  background:
    radial-gradient(circle, rgba(255,255,255,0.065) 1px, transparent 1px),
    var(--bg-surface);
  background-size: 28px 28px, auto;
  padding: var(--s-10) 0;
}

.kst-reviews-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-8);
  row-gap: var(--s-4);
  align-items: start;
  /* carousel viewport (462px) + dots bar (29px) = 491px */
  --reviews-h: 491px;
}

/* Carousel: fixed viewport height */
.kst-reviews .kst-carousel-viewport {
  aspect-ratio: unset;
  height: calc(var(--reviews-h) - 29px);
}

/* Widgetbot wrapper: exact same total height, clips the iframe */
.kst-reviews-inner .kst-discord-widget-wrap {
  height: var(--reviews-h);
  max-width: 520px;
  overflow: hidden;
}

/* Header: centered block above the grid */
.kst-reviews-header {
  display: block;
  text-align: center;
  margin-bottom: var(--s-10);
}

.kst-reviews-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  vertical-align: middle;
  margin-right: var(--s-3);
}

.kst-reviews-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  vertical-align: middle;
}

.kst-reviews-stars svg {
  width: clamp(1.6rem, 4vw, 2.4rem);
  height: clamp(1.6rem, 4vw, 2.4rem);
  fill: var(--accent);
  filter: drop-shadow(0 0 6px rgba(204,17,17,0.5));
  display: block;
}

.kst-reviews-carousel {
  width: 100%;
}

/* Carousel matches widgetbot max-width and centering */
.kst-reviews .kst-carousel {
  max-width: 520px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────
   11. DISCORD SECTION
───────────────────────────────────────────── */
.kst-discord-section {
  background: var(--bg-main);
  padding: var(--s-8) 0;
}

.kst-discord-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
}

.kst-discord-features-col {
  display: flex;
  flex-direction: row;
  gap: var(--s-6);
  align-items: center;
}

.kst-discord-features-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-8);
  margin-bottom: var(--s-6);
}

.kst-discord-feat {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.kst-discord-feat::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent);
}

.kst-discord-widget-wrap {
  overflow: hidden;
  border-radius: var(--r-lg);
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.kst-discord-widget-wrap iframe {
  display: block;
  width: 100%;
}


/* ─────────────────────────────────────────────
   12. FAQ SECTION
───────────────────────────────────────────── */
.kst-faq {
  background:
    radial-gradient(circle, rgba(255,255,255,0.065) 1px, transparent 1px),
    var(--bg-surface);
  background-size: 28px 28px, auto;
}

.kst-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kst-faq-item {
  background: var(--bg-elevated) !important;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: background 150ms ease;
}

.kst-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 150ms ease;
}

.kst-faq-question:hover  { background: none; }
.kst-faq-question:active { background: rgba(0,0,0,0.10); }
.kst-faq-question:focus  { outline: none; background: none; }
.kst-faq-question:focus-visible { outline: 2px solid var(--accent-border); outline-offset: -2px; background: none; }

.kst-faq-q-text {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.5;
}

.kst-faq-item.open .kst-faq-q-text {
  color: var(--text-primary);
}


.kst-faq-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 250ms ease, color 250ms ease;
}

.kst-faq-item.open .kst-faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.kst-faq-answer {
  display: none;
  padding: 20px 24px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.kst-faq-item.open .kst-faq-answer { display: block; }

/* ─────────────────────────────────────────────
   12. SOCIAL LOGIN BUTTONS
───────────────────────────────────────────── */
.kst-social-login {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
  width: 100% !important;
}

.kst-social-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 13px 20px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease !important;
  line-height: 1 !important;
}

.kst-social-btn:hover {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.kst-social-btn--discord:hover {
  border-color: #5865F2 !important;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.12) !important;
}

.kst-social-btn--google:hover {
  border-color: #4285F4 !important;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12) !important;
}

.kst-social-btn svg {
  flex-shrink: 0 !important;
}

.kst-social-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 4px 0 !important;
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.kst-social-divider::before,
.kst-social-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--border) !important;
}

/* ── Auth tabs ── */
.kst-auth-tabs {
  display: flex !important;
  gap: 0 !important;
  max-width: 480px !important;
  margin: 0 auto 0 auto !important;
  border-bottom: 1px solid var(--border) !important;
}

.kst-auth-tab {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  padding: 14px 20px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: color 180ms ease, border-color 180ms ease !important;
}

.kst-auth-tab:hover {
  color: var(--text-primary) !important;
}

.kst-auth-tab--active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* Hide WooCommerce default col headings — tabs replace them */
.woocommerce-account .col2-set .col-1 > h2,
.woocommerce-account .col2-set .col-2 > h2 {
  display: none !important;
}

/* col2-set: single column centered */
.woocommerce-account .col2-set {
  display: block !important;
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  float: none !important;
}

.kst-auth-notice {
  padding: 10px 14px !important;
  border-radius: var(--r-md) !important;
  font-size: 0.825rem !important;
  margin-bottom: 16px !important;
}

.kst-auth-notice--error {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

/* ═══════════════════════════════════════════════════════════
   12. LEGAL PAGES  (Privacy Policy, Terms, etc.)
═══════════════════════════════════════════════════════════ */

.kst-legal-page {
  padding: 80px 0 120px;
  min-height: calc(100vh - 68px);
  background:
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px),
    var(--bg-main);
  background-size: 28px 28px, auto;
}

.kst-legal-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}

.kst-legal-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.kst-legal-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 16px;
  line-height: 1.1;
}

.kst-legal-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

/* Body layout */
.kst-legal-body {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sections */
.kst-legal-section {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.kst-legal-section:last-child {
  border-bottom: 1px solid var(--border);
}

.kst-legal-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}

.kst-legal-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 10px;
  text-transform: none;
  letter-spacing: 0;
}

.kst-legal-section p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.kst-legal-section p:last-child {
  margin-bottom: 0;
}

.kst-legal-section ul {
  margin: 0 0 14px 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kst-legal-section ul li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}

.kst-legal-section ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.kst-legal-section a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 150ms ease;
}

.kst-legal-section a:hover {
  opacity: 0.75;
}

/* Table */
.kst-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  font-size: 0.875rem;
}

.kst-legal-table thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}

.kst-legal-table tbody td {
  padding: 12px 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
  line-height: 1.55;
}

.kst-legal-table tbody tr:last-child td {
  border-bottom: none;
}

.kst-legal-table tbody tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* Mobile */
@media (max-width: 640px) {
  .kst-legal-page {
    padding: 48px 0 80px;
  }

  .kst-legal-hero {
    margin-bottom: 48px;
  }

  .kst-legal-section {
    padding: 28px 0;
  }

  .kst-legal-table thead {
    display: none;
  }

  .kst-legal-table tbody td {
    display: block;
    padding: 8px 0;
    border: none;
  }

  .kst-legal-table tbody td:first-child {
    font-weight: 600;
    color: var(--text-primary);
    padding-top: 16px;
  }

  .kst-legal-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: block;
    margin-bottom: 4px;
  }
}

/* ─────────────────────────────────────────────
   13. FOOTER
───────────────────────────────────────────── */
#kastell-footer {
  background: var(--bg-hero);
  border-top: 1px solid var(--border);
  padding: var(--s-16) 0 var(--s-8);
}

.kst-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-10);
  margin-bottom: var(--s-10);
}

.kst-footer-brand .kst-logo {
  margin-bottom: var(--s-4);
  position: relative;
  overflow: visible;
}

.kst-footer-krauts {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-size: 1.1rem;
  color: #9ECC3B !important;
  letter-spacing: 0.02em;
  position: absolute;
  top: -18px;
  left: -14px;
  transform: rotate(-14deg);
  transform-origin: bottom left;
  text-shadow: 0 0 8px #9ECC3B, 0 0 20px rgba(158,204,59,0.6), 0 0 40px rgba(158,204,59,0.3);
  white-space: nowrap;
}

.kst-footer-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 260px;
  margin-bottom: var(--s-5);
}

.kst-footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}

.kst-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.kst-footer-col ul li a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}

.kst-footer-col ul li a:hover { color: var(--accent); }

.kst-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  gap: var(--s-4);
  flex-wrap: wrap;
}

.kst-footer-copy {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.kst-footer-payments {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.kst-footer-payments span {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: var(--s-2);
}

.kst-pay-badge {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────
   13. WOOCOMMERCE OVERRIDES
───────────────────────────────────────────── */
.woocommerce,
.woocommerce-page {
  background: var(--bg-main) !important;
}

/* Shop page */
.woocommerce .products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--s-6) !important;
}

.woocommerce ul.products li.product {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  transition: all var(--t-normal) var(--ease) !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

.woocommerce ul.products li.product a img {
  border-radius: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  width: 60% !important;
  max-width: 60% !important;
  padding: var(--s-4) 0 !important;
}

/* Descripción truncada debajo del Add to cart */
.woocommerce ul.products li.product .kst-loop-excerpt {
  font-size: 0.75rem !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
  padding: var(--s-3) var(--s-5) var(--s-4) !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  padding: var(--s-5) var(--s-5) var(--s-2) !important;
  letter-spacing: 0.04em !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-mono) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  padding: 0 var(--s-5) var(--s-4) !important;
  display: block !important;
}

.woocommerce ul.products li.product .button {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: var(--font-body) !important;
  border-radius: var(--r-md) !important;
  margin: 0 var(--s-5) var(--s-5) !important;
  padding: 10px 20px !important;
  display: block !important;
  text-align: center !important;
  transition: all var(--t-fast) var(--ease) !important;
  font-size: 0.825rem !important;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--accent-glow) !important;
}

/* Cart */
.woocommerce-cart table.cart {
  background: var(--bg-surface) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
}

.woocommerce-cart table.cart thead tr th {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid var(--border) !important;
  padding: var(--s-4) var(--s-5) !important;
}

.woocommerce-cart table.cart td {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: var(--s-4) var(--s-5) !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-6) !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: var(--s-5) !important;
}

.woocommerce-cart .cart_totals table {
  border: none !important;
  width: 100% !important;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: var(--s-3) 0 !important;
  font-size: 0.875rem !important;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-bottom: none !important;
  padding-top: var(--s-4) !important;
}

.woocommerce-cart .cart_totals .order-total td .amount {
  font-family: var(--font-mono) !important;
  color: var(--accent) !important;
  font-size: 1.2rem !important;
}

/* ── Two-Step Checkout ──────────────────────── */

.kastell-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-8);
}

.kastell-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  opacity: 0.35;
  transition: opacity var(--t-normal) var(--ease);
}

.kastell-step--active { opacity: 1; }

.kastell-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all var(--t-normal) var(--ease);
}

.kastell-step--active .kastell-step-circle {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.kastell-step--done .kastell-step-circle {
  border-color: var(--accent);
  color: var(--accent);
}

.kastell-step-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

.kastell-step--active .kastell-step-label,
.kastell-step--done .kastell-step-label { color: var(--text-primary); }

.kastell-step-line {
  flex: 1;
  max-width: 120px;
  min-width: 60px;
  height: 2px;
  background: var(--border);
  margin: 0 var(--s-4);
  margin-bottom: var(--s-5);
  transition: background var(--t-normal) var(--ease);
}

.kastell-step-line--done { background: var(--accent); }

/* Continue button */
.kastell-step1-actions {
  margin-top: var(--s-6);
  display: flex;
}

.kastell-next-step-btn {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: 14px 24px;
}

/* Read info button */
.kastell-read-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--s-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff !important;
  background: var(--accent);
  border-radius: var(--r-md);
  padding: 4px 12px;
  text-decoration: none !important;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: 0.02em;
}


.kastell-read-info-btn:hover {
  background: var(--accent-hover, #c0392b);
  color: #fff !important;
}

/* Payment hidden/reveal */
#payment.kastell-payment-hidden { display: none !important; }

#payment.kastell-payment-revealed {
  animation: payment-reveal 350ms var(--ease) both;
}

@keyframes payment-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Confirmation modal */
.kastell-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  animation: modal-fade 200ms var(--ease) both;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kastell-confirm-inner {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: modal-slide 220ms var(--ease) both;
}

@keyframes modal-slide {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.kastell-confirm-icon { font-size: 2rem; margin-bottom: var(--s-4); }

.kastell-confirm-inner h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-primary) !important;
  margin-bottom: var(--s-3);
  text-transform: none !important;
  letter-spacing: normal !important;
}

.kastell-confirm-inner p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--s-6);
}

.kastell-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ── Checkout — clean up WooCommerce defaults ── */

/* Hide page titles on cart & checkout */
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
  display: none !important;
}

/* Checkout container — add proper padding and max-width */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout #primary {
  max-width: var(--container, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}

/* Remove theme's default page top padding on checkout */
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .ast-container {
  padding-top: 0 !important;
}

body.woocommerce-checkout .woocommerce-checkout {
  padding-top: 12px !important;
}

/* Hide coupon bar completely */
.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon-toggle *,
.checkout_coupon,
.woocommerce .woocommerce-form-coupon-toggle {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Fix "Billing details" heading — remove line */
body.woocommerce-checkout h3,
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-checkout-payment h3,
body.woocommerce-checkout .woocommerce h3 {
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
  padding: 0 0 12px !important;
  margin: 24px 0 12px !important;
  background: none !important;
  text-decoration: none !important;
}

/* Kill the WC info notice white bar */
.woocommerce-info,
.woocommerce-NoticeGroup .woocommerce-info {
  background: var(--bg-elevated) !important;
  border-top: none !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
  box-shadow: none !important;
}
.woocommerce-info::before { display: none !important; }

/* Added to cart notification */
.woocommerce-message {
  background: var(--bg-elevated) !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-secondary) !important;
}

/* Remove col borders */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Align both column headings to top */
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-billing-fields > h3:not(.kastell-column-heading) {
  margin-top: 0 !important;
}

/* Override general h3 rule so SERVICE DETAILS aligns with YOUR ORDER */
body.woocommerce-checkout .woocommerce .kastell-column-heading {
  margin: 0 0 12px 0 !important;
}

/* Remove top margin from h3 inside service cards */
body.woocommerce-checkout .woocommerce .kastell-service-fields > h3 {
  margin-top: 0 !important;
}

/* Remove space from empty billing fields wrapper */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Your Order panel ─────────────────────── */
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--accent) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

/* Header */
.woocommerce-checkout-review-order-table thead th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead tr th {
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--accent) !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--border) !important;
}
.woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right !important;
}

/* Body rows — border on td, not tr */
.woocommerce-checkout-review-order-table tbody td {
  padding: 16px 0 !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--border) !important;
}
.woocommerce-checkout-review-order-table .product-name {
  font-weight: 600 !important;
  font-size: 0.925rem !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
}
.woocommerce-checkout-review-order-table .product-total {
  text-align: right !important;
  font-weight: 700 !important;
  font-size: 0.925rem !important;
  white-space: nowrap !important;
  color: var(--text-primary) !important;
}
.woocommerce-checkout-review-order-table .product-total .amount,
.woocommerce-checkout-review-order-table .product-total bdi {
  font-family: var(--font-heading) !important;
  letter-spacing: 0.03em !important;
}

/* Read info button — always below the product name */
.woocommerce-checkout-review-order-table .kastell-read-info-btn {
  display: block !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  width: fit-content !important;
  vertical-align: unset !important;
}

/* Quantity × bold */
.woocommerce-checkout-review-order-table .product-quantity {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

/* Total row */
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
  padding: 16px 0 0 !important;
  border: none !important;
}
.woocommerce-checkout-review-order-table .order-total th {
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.woocommerce-checkout-review-order-table .order-total .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
  font-family: var(--font-heading) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.04em !important;
}

/* ── Order review table — mobile fixes ── */
@media (max-width: 560px) {
  /* Tighten cell padding on small screens */
  .woocommerce-checkout-review-order-table tbody td,
  .woocommerce-checkout-review-order-table tfoot td,
  .woocommerce-checkout-review-order-table tfoot th {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Shrink product name & price font slightly */
  .woocommerce-checkout-review-order-table .product-name,
  .woocommerce-checkout-review-order-table .product-total {
    font-size: 0.82rem !important;
  }
  /* Total stays prominent */
  .woocommerce-checkout-review-order-table .order-total .amount,
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
    font-size: 1rem !important;
  }
}

/* Buttons area */
.kastell-step1-actions {
  margin-top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.kastell-back-cart-btn {
  width: 100% !important;
  justify-content: center !important;
  font-size: 0.875rem !important;
  padding: 11px 20px !important;
  opacity: 0.85;
}
.kastell-back-cart-btn:hover { opacity: 1; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-primary) !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  min-height: 44px !important;
  transition: border-color var(--t-fast) var(--ease) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--accent-border) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
}

.woocommerce form .form-row label {
  color: var(--text-secondary) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--s-2) !important;
}

/* WooCommerce place order button */
#place_order,
.woocommerce button[type="submit"],
.woocommerce #respond input#submit {
  background: var(--accent) !important;
  color: #111 !important;
  font-weight: 700 !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  border-radius: var(--r-md) !important;
  padding: 14px 32px !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: all var(--t-normal) var(--ease) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#place_order:hover,
.woocommerce button[type="submit"]:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--accent-glow) !important;
}

/* Payment gateways in checkout */
#payment {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}

#payment .wc_payment_methods {
  background: transparent !important;
  border: none !important;
}

#payment .wc_payment_methods li {
  border-bottom: 1px solid var(--border) !important;
  padding: var(--s-4) var(--s-5) !important;
}

#payment .wc_payment_methods li:last-child { border-bottom: none !important; }

#payment .wc_payment_methods label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

#payment .payment_box {
  background: var(--bg-elevated) !important;
  border-radius: var(--r-md) !important;
  margin-top: var(--s-3) !important;
  padding: var(--s-4) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
}

/* My Account */
.woocommerce-account .woocommerce {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: var(--s-8) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-4) !important;
  align-self: start !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: var(--s-3) var(--s-4) !important;
  border-radius: var(--r-sm) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: all var(--t-fast) var(--ease) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}

/* Notifications */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--r-md) !important;
  border: none !important;
  padding: var(--s-4) var(--s-5) !important;
  font-size: 0.875rem !important;
}

.woocommerce-message {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
}

/* Kill broken icon that Astra injects via ::before */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

.woocommerce-error {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fc8181 !important;
  border-left: 3px solid #ef4444 !important;
}

/* ═══════════════════════════════════════════════════════════
   14. COOKIEADMIN — Theme override (uses CSS variables)
═══════════════════════════════════════════════════════════ */

/* Main consent box */
.cookieadmin_consent_inside {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Title */
#cookieadmin_notice_title {
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* Body text */
.cookieadmin_notice_con,
.cookieadmin_notice_con * {
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
}

/* Outline buttons — Customize & Reject All */
button.cookieadmin_btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  transition: border-color 150ms ease, color 150ms ease !important;
}

button.cookieadmin_btn:hover {
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* Accept All — red accent (multiple selectors for robustness) */
button.cookieadmin_btn[data-action="accept_all"],
button.cookieadmin_btn.cookieadmin_accept_all,
#cookieadmin_accept_all,
.cookieadmin_consent_btns button.cookieadmin_btn:last-child {
  background: #CC1111 !important;
  border-color: #CC1111 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

button.cookieadmin_btn[data-action="accept_all"]:hover,
button.cookieadmin_btn.cookieadmin_accept_all:hover,
#cookieadmin_accept_all:hover,
.cookieadmin_consent_btns button.cookieadmin_btn:last-child:hover {
  background: #e02020 !important;
  border-color: #e02020 !important;
  opacity: 1 !important;
}

/* Powered by */
.cookieadmin-poweredby,
.cookieadmin-poweredby a {
  color: var(--text-muted) !important;
  font-size: 0.7rem !important;
}

/* ── Customize modal ───────────────────────────────────── */
.cookieadmin_cookie_modal {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

.cookieadmin_mod_head,
.cookieadmin_wrapper {
  border-bottom-color: var(--border) !important;
}

.cookieadmin_preference_title {
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

.cookieadmin_preference,
.cookieadmin_desc,
.cookieadmin_types,
.cookieadmin_types * {
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
}

.cookieadmin_types {
  border-top-color: var(--border) !important;
}

.cookieadmin_close_pref {
  color: var(--text-muted) !important;
}

.cookieadmin_close_pref:hover {
  color: var(--text-primary) !important;
}

.cookieadmin_modal_footer {
  border-top-color: var(--border) !important;
}

/* Toggle slider — active = red */
input:checked + .cookieadmin_slider {
  background-color: #CC1111 !important;
}

/* Cookie cards */
.cookieadmin-cookie-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}

.cookieadmin-cookie-name {
  color: var(--text-primary) !important;
}

.cookieadmin-tag {
  background: rgba(128,128,128,0.12) !important;
  color: var(--text-secondary) !important;
}

/* Overlay backdrop */
.cookieadmin_modal_overlay {
  background-color: rgba(0,0,0,0.7) !important;
}

/* ─────────────────────────────────────────────
   15. CART & CHECKOUT — MOBILE FIXES
───────────────────────────────────────────── */

/* Cart + Checkout page containers — always have side padding */
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .entry-content,
body.woocommerce-cart #primary,
body.woocommerce-cart .site-content {
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}

/* WooCommerce Block Cart padding */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wc-block-cart {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* "Proceed to Checkout" button — green */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wc-block-cart .wc-block-cart__submit .wc-block-components-button {
  background-color: var(--accent) !important;
  color: #111 !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
}
.wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--accent-hover) !important;
}

/* Header — no overflow cut on mobile */
#kastell-header {
  overflow: visible !important;
}
#kastell-header .kst-container {
  padding-left: var(--s-6) !important;
  padding-right: var(--s-6) !important;
}
.kst-header-inner {
  overflow: visible !important;
  padding: 0 !important;
}

/* ─────────────────────────────────────────────
   14. PRODUCT PAGE — DESCRIPTION AREAS
───────────────────────────────────────────── */
.kst-product-description,
.kst-product-short-description {
  clear: both;
  margin: var(--s-8) 0;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* Accordion container — quita el padding extra del kst-container */
body.single-product .kst-product-info {
  clear: both !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Título del accordion — alineado a la izquierda */
body.single-product .kst-product-info__title {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Accordion — ancho completo, alineado a la izquierda */
body.single-product .kst-product-accordion {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.kst-product-gallery {
  clear: both;
  margin: var(--s-8) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kst-product-gallery img {
  width: 80%;
  max-width: 80%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
}

.kst-product-short-description img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: var(--s-4) 0;
}

/* ─────────────────────────────────────────────
   15. RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kst-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .kst-hero-visual { display: none; }
  .kst-hero-headline { font-size: 2.4rem; }
  .kst-hero-content { text-align: center; max-width: 100%; }
  .kst-hero-actions { justify-content: center; }
  .kst-hero-trust { justify-content: center; }
  .kst-hero-sub { max-width: 100%; }
  .kst-services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .kst-footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .kst-reviews-inner { grid-template-columns: 1fr; row-gap: var(--s-8); }
  .kst-discord-widget-wrap { max-width: 500px; }
  /* Restore aspect-ratio on mobile so carousel scales proportionally */
  .kst-reviews .kst-carousel-viewport { height: auto; aspect-ratio: 9 / 8; }
}

@media (max-width: 768px) {
  :root { --s-20: 40px; }

  .kst-discord-layout { flex-direction: column; gap: var(--s-5); }
  .kst-discord-features-col { flex-direction: column; gap: var(--s-3); align-items: flex-start; }

  /* Hamburger: tighter padding, no overflow */
  #kastell-header .kst-container {
    padding-left: var(--s-4) !important;
    padding-right: var(--s-4) !important;
  }
  .kst-header-inner { gap: var(--s-3); }

  .kst-nav { display: none; }
  .kst-menu-toggle { display: flex; }
  /* Mobile header: account/login moves inside hamburger menu */
  .kst-header-actions .kst-btn { display: none; }
  .kst-cart-btn { display: none; }
  .kst-lang-btn { display: none; }
  .kst-theme-btn { display: none; }

  .kst-hero { min-height: auto; padding: var(--s-6) 0; }
  .kst-hero-inner { padding: var(--s-6) 0; gap: var(--s-6); }
  .kst-hero-headline { font-size: 1.8rem; }
  /* Force "Digital Spending" to its own line on mobile */
  .kst-hero-headline .highlight { display: block; }
  .kst-hero-sub { margin-bottom: var(--s-5); font-size: 1rem; }
  .kst-hero-actions { margin-bottom: var(--s-6); }
  .kst-hero-trust { flex-wrap: wrap; gap: var(--s-4); padding-top: var(--s-4); }

  .kst-section--lg { padding: 64px 0; }
  .kst-section-header { margin-bottom: var(--s-8); }
  .kst-section-sub { font-size: 0.95rem; }

  .kst-services-grid { grid-template-columns: 1fr; gap: 24px; }
  .kst-steps { grid-template-columns: 1fr; }
  .kst-steps::before { display: none; }
  .kst-step { padding: var(--s-6) var(--s-5); }
  .kst-stats-grid { grid-template-columns: 1fr; gap: 0; }
  .kst-stat-item:not(:last-child)::after { display: none; }
  .kst-stat-item:not(:last-child) { border-bottom: 1px solid var(--border); }

  .kst-footer-top { grid-template-columns: 1fr; }
  .kst-footer-bottom { flex-direction: column; text-align: center; }
  .kst-footer-tagline { max-width: 100%; }
  .kst-discord-widget-wrap { max-width: 100%; }

  .woocommerce .products { grid-template-columns: 1fr !important; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr !important; }

  /* Prevent WooCommerce cart/account tables from overflowing on mobile.
     Rules use both body-class selectors (added by WooCommerce on English pages)
     AND direct table/element selectors so translated pages are covered too. */
  .woocommerce-cart-form__contents { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .woocommerce-cart table.cart,
  table.cart { overflow: auto !important; min-width: 480px; }

  /* Account: content wrapper + all WooCommerce tables */
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-MyAccount-content { overflow-x: auto; }

  .woocommerce-account table.woocommerce-orders-table,
  .woocommerce-account table.shop_table,
  table.woocommerce-orders-table,
  table.shop_table { min-width: 480px; }
}

@media (max-width: 480px) {
  .kst-container { padding: 0 var(--s-4); }
  .kst-hero-headline { font-size: 1.6rem; }
  .kst-hero-actions { flex-direction: column; align-items: stretch; }
  .kst-hero-actions .kst-btn { justify-content: center; width: 100%; }
  .kst-hero-trust { gap: var(--s-2); justify-content: space-between; }
  .kst-hero-trust-item { align-items: center; text-align: center; }
  .kst-hero-trust-item .value { font-size: 1.4rem; }
  .kst-hero-trust-item .label { font-size: 0.7rem; letter-spacing: 0.03em; }
  .kst-services-grid { gap: 24px; }
}

@media (max-width: 360px) {
  .kst-hero-headline { font-size: 1.4rem; }
  .kst-logo-text { font-size: 0.95rem; }
  .kst-btn { padding: 11px 20px; }
}

/* ─────────────────────────────────────────────
   16. MY ACCOUNT DASHBOARD
───────────────────────────────────────────── */

/* Page wrapper */
.woocommerce-account .entry-title { display: none !important; }
.woocommerce-account .woocommerce { display: block !important; }
.woocommerce-account .site-main,
.woocommerce-account #content,
.woocommerce-account .site-content { background: transparent !important; }

.kst-account-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-8);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-2) clamp(16px, 4vw, 48px) var(--s-6);
  min-height: calc(100vh - 68px);
}

/* ── Sidebar Nav ── */
.kst-account-nav {
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5) var(--s-3);
  height: fit-content;
  position: sticky;
  top: 88px;
}

.kst-account-nav-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: 10px;
  margin-bottom: var(--s-3);
  /* extend divider to full card width, ignoring card's horizontal padding */
  margin-left: calc(-1 * var(--s-5));
  margin-right: calc(-1 * var(--s-5));
  padding-left: var(--s-5);
  padding-right: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.kst-account-nav-avatar img,
.kst-account-nav-avatar .kst-avatar-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--accent-border);
  object-fit: cover;
}

.kst-account-nav-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kst-account-nav-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kst-account-nav-email {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kst-account-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-2) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kst-account-nav-item {
  margin: 0 !important;
  padding: 0 !important;
}

.kst-account-nav-item a {
  display: flex !important;
  align-items: center !important;
  gap: var(--s-3) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border-radius: var(--r-md) !important;
  color: var(--text-secondary) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: color var(--t-fast) var(--ease) !important;
  text-decoration: none !important;
}

.kst-account-nav-item a:hover { color: var(--text-primary) !important; }

.kst-account-nav-item.kst-active a { color: var(--accent) !important; }

.kst-account-nav-item a svg { flex-shrink: 0; }

/* Logout item */
.kst-account-nav-item:last-child a { color: #ef4444 !important; }
.kst-account-nav-item:last-child a:hover { color: #dc2626 !important; }

/* ── Main Content ── */
.kst-account-content {
  min-width: 0;
}

/* ── Dashboard ── */
.kst-dash-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: 2px;
}

.kst-dash-greeting {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1;
}

.kst-dash-greeting span { color: var(--accent); }

.kst-dash-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: -1px 0 0;
}

.kst-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.kst-dash-stat {
  background: var(--bg-elevated);
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kst-dash-stat-val {
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kst-dash-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.kst-dash-section {
  background: var(--bg-elevated);
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.kst-dash-section-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border);
  margin: 0;
}

.kst-dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-12);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Orders table */
.kst-orders-table-wrap { overflow-x: auto; }

.kst-orders-table {
  width: 100%;
  border-collapse: collapse;
}

/* Override WC's generic table rules for our custom table */
.woocommerce-account .kst-dash-section {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.woocommerce-account .kst-orders-table {
  border: none !important;
}
.woocommerce-account .kst-orders-table th,
.woocommerce-account .kst-orders-table td {
  border-top:    none !important;
  border-left:   none !important;
  border-right:  none !important;
  border-bottom: 1px solid var(--border) !important;
}
.woocommerce-account .kst-orders-table tr:last-child td {
  border-bottom: none !important;
}
.woocommerce-account .kst-orders-table tr:hover td {
  background: rgba(0,0,0,0.02) !important;
}

.kst-orders-table th {
  padding: 10px var(--s-6);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-elevated);
}
.kst-th-center { text-align: center !important; }
.kst-th-right  { text-align: right  !important; }

.kst-orders-table td {
  padding: 13px var(--s-6);
  font-size: 0.88rem;
  color: var(--text-secondary);
  vertical-align: middle;
}
.kst-td-center { text-align: center !important; }
.kst-td-right  { text-align: right  !important; }

.kst-order-num { color: var(--accent); font-weight: 600; }
.kst-order-num:hover { color: var(--accent-hover); }
.kst-order-date { color: var(--text-muted); font-size: 0.82rem; }
.kst-order-total { font-weight: 600; color: var(--text-primary); }

.kst-order-goto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-main);
  color: var(--text-muted);
  transition: background 150ms ease, color 150ms ease;
}
.kst-order-goto:hover {
  background: var(--accent);
  color: #fff;
}

.kst-orders-pagination {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  padding: var(--s-5) 0;
}

/* Status badges */
.kst-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none !important;
  color: var(--text-primary) !important;
}
.kst-badge--green  { background: rgba(34,197,94,0.18);  }
.kst-badge--blue   { background: rgba(59,130,246,0.18); }
.kst-badge--yellow { background: rgba(245,158,11,0.2);  }
.kst-badge--red    { background: rgba(239,68,68,0.18);  }
.kst-badge--grey   { background: rgba(0,0,0,0.09);      }

/* WooCommerce account pages (orders list, edit account) */
.woocommerce-account .woocommerce-MyAccount-content {
  background: transparent !important;
}
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden;
  border-collapse: separate !important;
  width: 100%;
}
.woocommerce-account table th {
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 16px !important;
}
.woocommerce-account table td {
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 16px !important;
  background: transparent !important;
}
.woocommerce-account table tr:last-child td { border-bottom: none !important; }
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button {
  background: transparent !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent) !important;
  border-radius: var(--r-md) !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover {
  background: var(--accent-dim) !important;
}

/* Edit account form */
.woocommerce-account .woocommerce-EditAccountForm label {
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap;
  margin-bottom: 5px !important;
}
.woocommerce-account .woocommerce-EditAccountForm input {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-md) !important;
  padding: 7px 12px !important;
  height: auto !important;
}

/* Visibility tag (public/private) */
.kst-vis-tag {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-right: 4px;
  cursor: default;
  color: var(--text-primary);
  vertical-align: middle;
}
.kst-vis-tag .kst-vis-icon { display: block; }
.kst-vis-public  { color: var(--text-primary); }
.kst-vis-private { color: var(--text-primary); }

.kst-vis-tag::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-main);
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 10;
}
.kst-vis-tag:hover::after { opacity: 1; }

/* Save button — white text, full-width red */
.woocommerce-account .woocommerce-EditAccountForm .kst-save-btn,
.woocommerce-account button.kst-save-btn {
  display: block !important;
  width: 100% !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 13px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity 150ms ease !important;
}
.woocommerce-account .woocommerce-EditAccountForm .kst-save-btn:hover,
.woocommerce-account button.kst-save-btn:hover { opacity: 0.88 !important; }

/* Profile photo section */
.kst-avatar-section {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.kst-avatar-preview-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.kst-avatar-preview-wrap img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--bg-elevated);
}

/* Pencil button anchored to bottom-right corner of the avatar */
.kst-avatar-pencil-wrap {
  position: absolute;
  bottom: -6px;
  right: -6px;
  z-index: 2;
}

/* Avatar dropdown menu */
.kst-avatar-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  min-width: 148px;
  z-index: 20;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 130ms ease, transform 130ms ease;
}
.kst-avatar-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.kst-avatar-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 9px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 100ms ease !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
.kst-avatar-dd-item:last-child { border-bottom: none !important; }
.kst-avatar-dd-item:hover { background: var(--bg-elevated) !important; }
.kst-avatar-dd-danger { color: var(--accent) !important; }
.kst-avatar-dd-danger:hover { background: rgba(204,17,17,0.06) !important; }
.kst-avatar-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.kst-avatar-section .kst-avatar-upload-btn,
.kst-avatar-section .kst-avatar-remove-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-md) !important;
  padding: 7px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 120ms ease, border-color 120ms ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
}
.kst-avatar-section .kst-avatar-upload-btn:hover,
.kst-avatar-section .kst-avatar-remove-btn:hover {
  background: var(--btn-hover-bg, var(--bg-elevated)) !important;
  border-color: var(--btn-hover-border, var(--border-light)) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

/* Field hint + optional tag */
.kst-field-hint {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.kst-pending-email {
  color: var(--text-secondary);
}
.kst-cancel-email {
  color: var(--accent);
  text-decoration: none;
  margin-left: 6px;
}
.kst-cancel-email:hover { text-decoration: underline; }
.kst-optional {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 3px;
}

/* Profile header — display name + pencil beside avatar */
.kst-profile-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;          /* fill the avatar height */
  gap: 0;
}
.kst-profile-header-top {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;                      /* push name to vertical center */
  align-items: center;
}
.kst-profile-name {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-block;
}
.kst-dn-inline-input {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  outline: none;
  padding: 0 2px;
  min-width: 120px;
  width: auto;
  line-height: 1.2;
}
.kst-pencil-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  padding: 5px 7px !important;
  border-radius: var(--r-md) !important;
  position: relative !important;
  box-shadow: none !important;
  transition: background 120ms ease, border-color 120ms ease !important;
  line-height: 1 !important;
  font-size: 0 !important; /* kill any inherited text */
}
.kst-pencil-btn:hover {
  background: var(--btn-hover-bg, var(--bg-elevated)) !important;
  border-color: var(--btn-hover-border, var(--border-light)) !important;
  color: var(--text-primary) !important;
}
.kst-pencil-tip {
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--bg-main) !important;
  color: var(--text-secondary) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 120ms ease !important;
  z-index: 10 !important;
}
.kst-pencil-btn:hover .kst-pencil-tip { opacity: 1 !important; }

/* 3-column row: First name | Last name | Email */
.kst-fields-row {
  display: grid;
  grid-template-columns: 1fr 0.65fr 0.65fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  align-items: start;
}
.kst-fields-row .form-row { margin-bottom: 0 !important; }

/* All account form rows — consistent spacing */
.woocommerce-account .woocommerce-EditAccountForm .form-row {
  margin-bottom: var(--s-4) !important;
  padding: 0 !important;
}

/* Password fieldset — line above, tight spacing */
.kst-password-fieldset {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: var(--s-5) 0 0 !important;
  margin-top: var(--s-2) !important;
  margin-bottom: var(--s-5) !important;
}
.kst-password-fieldset legend {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  padding: 0 !important;
  margin-bottom: var(--s-4) !important;
  float: left;
  width: 100%;
}
.kst-password-fieldset .form-row { margin-bottom: var(--s-4) !important; }
.kst-password-fieldset .form-row:last-of-type { margin-bottom: 0 !important; }

/* Password toggle */
.woocommerce-Input-wrapper {
  position: relative !important;
  display: block !important;
}
.woocommerce-Input-wrapper .woocommerce-Input--password {
  padding-right: 42px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Span: small, centered with top/transform — ::before carries the icon */
.show-password-input {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  font-size: 0 !important;
  color: transparent !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
}
.show-password-input::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  opacity: 0.55 !important;
  transition: opacity 150ms ease !important;
}
.show-password-input:hover::before { opacity: 1 !important; }
.show-password-input.display-password::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E") !important;
}
.show-password-input::after { display: none !important; content: none !important; }
.show-password-input svg { display: none !important; }

/* Responsive */
@media (max-width: 768px) {
  .kst-account-wrap { grid-template-columns: 1fr; }
  .kst-account-nav { position: static; }
  .kst-dash-stats { grid-template-columns: repeat(3, 1fr); }
  .kst-fields-row { grid-template-columns: 1fr; }
  .kst-email-col { grid-column: auto; }
}
@media (max-width: 480px) {
  .kst-dash-stats { grid-template-columns: 1fr; }
  .kst-orders-table th:nth-child(2),
  .kst-orders-table td:nth-child(2) { display: none; }
}


/* ─────────────────────────────────────────────
   17. COOKIE CONSENT — hide persistent floating icon
───────────────────────────────────────────── */
/* .cookieadmin_re_consent = the floating icon the JS shows after consent */
.cookieadmin_re_consent,
.cookieadmin-reconsent-icon,
.cookieadmin-reconsent-icons-grid {
  display: none !important;
}

/* ─────────────────────────────────────────────
   18. ADMIN BAR OFFSET
   WP adds 32px (desktop) / 46px (mobile) admin bar.
   Push our fixed header down so it's not covered.
───────────────────────────────────────────── */
.admin-bar #kastell-header {
  top: 32px !important;
}
.admin-bar .kst-mobile-nav {
  top: calc(68px + 32px) !important;
}
@media screen and (max-width: 782px) {
  .admin-bar #kastell-header {
    top: 46px !important;
  }
  .admin-bar .kst-mobile-nav {
    top: calc(68px + 46px) !important;
  }
}

/* ─────────────────────────────────────────────
   18. SHOP PAGE FIXES — overflow + layout
───────────────────────────────────────────── */
body.post-type-archive-product,
body.woocommerce-shop,
body.tax-product_cat {
  overflow-x: hidden;
}
body.post-type-archive-product .site-main,
body.woocommerce-shop .site-main,
body.tax-product_cat .site-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-10) clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}
body.post-type-archive-product .woocommerce,
body.woocommerce-shop .woocommerce,
body.tax-product_cat .woocommerce {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 2-col products on tablets (between 768px and 1024px) */
@media (max-width: 1024px) {
  .woocommerce .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Shop page title */
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
  font-family: var(--font-heading) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--s-6) !important;
  letter-spacing: 0.03em !important;
}

/* Sort dropdown */
.woocommerce-ordering select {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  font-family: var(--font-body) !important;
  max-width: 100% !important;
}
.woocommerce-result-count {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
}

/* ─────────────────────────────────────────────
   19. SINGLE PRODUCT PAGE
───────────────────────────────────────────── */
/* Container */
body.single-product .woocommerce,
body.single-product #primary,
body.single-product .site-main {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: var(--s-10) clamp(16px, 4vw, 48px) !important;
  box-sizing: border-box !important;
  background: var(--bg-main) !important;
}

/* Breadcrumb — ocultar (la categoría ya aparece en el summary) */
body.single-product .woocommerce-breadcrumb {
  display: none !important;
}

/* ── Product header ───────────────────── */
body.single-product .woocommerce div.product {
  display: block !important;
  overflow: hidden !important;
}

/* Gallery — float left, columna izquierda */
body.single-product .woocommerce-product-gallery {
  float: left !important;
  width: 176px !important;
  margin-right: var(--s-8) !important;
  margin-bottom: var(--s-4) !important;
  background: var(--bg-elevated) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--s-3) !important;
  cursor: default !important;
  box-sizing: border-box !important;
}
body.single-product .woocommerce-product-gallery img {
  width: 128px !important;
  height: 128px !important;
  object-fit: contain !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
  outline: none !important;
  box-shadow: none !important;
}
body.single-product .woocommerce-product-gallery a,
body.single-product .woocommerce-product-gallery a:hover {
  pointer-events: none !important;
  cursor: default !important;
}

/* Summary — BFC: se posiciona automáticamente al lado del float */
body.single-product .summary.entry-summary {
  overflow: hidden !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-3) !important;
  align-items: flex-start !important;
  padding: 0 !important;
  width: auto !important;
  position: static !important;
  top: auto !important;
}

/* Título — orden 1 */
body.single-product .product_title {
  font-family: var(--font-heading) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  order: 1 !important;
}

/* Precio — orden 3 */
body.single-product .summary .price {
  font-family: var(--font-mono) !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: block !important;
  order: 3 !important;
}

/* Botón ATC — orden 4 */
body.single-product form.cart {
  margin: 0 !important;
  display: flex !important;
  width: auto !important;
  order: 4 !important;
}
body.single-product form.cart .quantity {
  display: none !important;
}
body.single-product .single_add_to_cart_button {
  width: auto !important;
  height: auto !important;
  padding: 10px 20px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background var(--t-normal) var(--ease), transform var(--t-normal) var(--ease) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
}
body.single-product .single_add_to_cart_button::before {
  display: none !important;
}
body.single-product .single_add_to_cart_button::after {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
}
body.single-product .single_add_to_cart_button:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px) !important;
}

/* Product meta — oculto */
body.single-product .product_meta {
  display: none !important;
}

/* Short description — oculta */
body.single-product .woocommerce-product-details__short-description {
  display: none !important;
}


/* Categoría — visible, estilizada (aplica a Astra y a nuestro hook) */
body.single-product .ast-woo-product-category,
body.single-product .kst-product-category {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  order: 2 !important;
}
body.single-product .ast-woo-product-category a,
body.single-product .kst-product-category a {
  color: var(--accent) !important;
  text-decoration: none !important;
}
body.single-product .ast-woo-product-category a:hover,
body.single-product .kst-product-category a:hover {
  color: var(--text-primary) !important;
}

/* Ocultar otros duplicados de categoría */
body.single-product .summary > .posted_in,
body.single-product .summary > span:has(a[href*="product-cat"]),
body.single-product .summary > p:has(a[href*="product-cat"]) {
  display: none !important;
}

/* Tabs — ocultos */
body.single-product .woocommerce-tabs {
  display: none !important;
}

/* Astra sticky add-to-cart bar — oculto */
.ast-sticky-add-to-cart,
.ast-sticky-add-to-cart.is-active {
  display: none !important;
}

/* Evitar que lightbox HTML en descripción de producto cause overlay */
.kst-product-full-desc .kst-lightbox {
  display: none !important;
}

/* Full product description — debajo del botón */
.kst-product-full-desc {
  order: 5 !important;
  color: var(--text-secondary) !important;
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
  width: 100% !important;
}
.kst-product-full-desc p { margin: 0 0 var(--s-2) !important; }
.kst-product-full-desc ul, .kst-product-full-desc ol {
  padding-left: var(--s-4) !important;
  margin: 0 0 var(--s-2) !important;
}
.kst-product-full-desc li { margin-bottom: var(--s-1) !important; }
.kst-product-full-desc strong { color: var(--text-primary) !important; }

/* Related & Upsell products — full width below floated gallery */
body.single-product .related.products,
body.single-product .upsells.products {
  display: block !important;   /* anula flex/grid del tema Astra */
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: var(--s-12) !important;
  padding-top: var(--s-8) !important;
  border-top: 1px solid var(--border) !important;
}
body.single-product .related > h2,
body.single-product .upsells > h2 {
  display: block !important;
  width: 100% !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: var(--s-6) !important;
}
body.single-product .related ul.products,
body.single-product .upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--s-5) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

/* Cards 20% más compactas + imagen 30% más chica */
body.single-product .related ul.products li.product a img,
body.single-product .upsells ul.products li.product a img {
  width: 70% !important;
  max-width: 70% !important;
  margin: 0 auto !important;
  display: block !important;
}
body.single-product .related ul.products li.product .woocommerce-loop-product__title,
body.single-product .upsells ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.68rem !important;
  padding: calc(var(--s-5) * 0.8) calc(var(--s-5) * 0.8) calc(var(--s-2) * 0.8) !important;
}
body.single-product .related ul.products li.product .price,
body.single-product .upsells ul.products li.product .price {
  font-size: 1.12rem !important;
  padding: 0 calc(var(--s-5) * 0.8) calc(var(--s-4) * 0.8) !important;
}
body.single-product .related ul.products li.product .button,
body.single-product .upsells ul.products li.product .button {
  font-size: 0.66rem !important;
  padding: 8px 16px !important;
  margin: 0 calc(var(--s-5) * 0.8) calc(var(--s-5) * 0.8) !important;
}

/* Product page responsive */
@media (max-width: 1024px) {
  body.single-product .related ul.products,
  body.single-product .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  body.single-product .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
  }
  .kst-product-category {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-top: var(--s-2) !important;
    margin-bottom: var(--s-2) !important;
    text-align: center !important;
  }
  body.single-product .related ul.products,
  body.single-product .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─────────────────────────────────────────────
   20. HIDE SUBTOTAL & COUPON DISCOUNT ROWS
───────────────────────────────────────────── */
/* Subtotal row in cart and checkout */
.cart_totals .cart-subtotal,
.woocommerce-checkout-review-order-table .cart-subtotal,
.shop_table tr.cart-subtotal {
  display: none !important;
}
/* Applied coupon discount row */
.cart_totals tr.cart-discount,
.woocommerce-checkout-review-order-table tr.cart-discount,
.shop_table tr.cart-discount {
  display: none !important;
}
/* Coupon input form in cart (belt+suspenders on top of existing rules) */
.woocommerce-cart-form .coupon,
.cart .coupon {
  display: none !important;
}

/* ─────────────────────────────────────────────
   21. HERO CAROUSEL
   ── Fácil configuración ──────────────────────
   Ancho máximo : --carousel-max-w  (default 480px)
   Alto         : se adapta automáticamente al contenido del hero.
                  En móvil usa aspect-ratio: 3/2 (responsivo).
   Imágenes     : assets/images/carousel/slide-1.png … slide-N.png
                  Tamaño ideal: 960×640 px (retina 2×)
───────────────────────────────────────────── */
:root {
  --carousel-max-w: 480px;   /* ← ancho máximo del carousel */
}

/* La columna visual centra el carousel horizontalmente */
.kst-hero-visual {
  align-items: center;
  justify-content: center;
}

.kst-carousel {
  position: relative;
  width: 100%;
  max-width: var(--carousel-max-w);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
}

/* ── Viewport con aspect-ratio fijo en todas las resoluciones ── */
.kst-carousel-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 8;
  overflow: hidden;
}

/* ── Track (banda deslizante) ── */
.kst-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Slide individual ── */
.kst-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.kst-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Dots ── */
.kst-carousel-dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.kst-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--border-light);
  border: none !important;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: width 250ms var(--ease), background 250ms var(--ease), box-shadow 250ms var(--ease);
}

.kst-carousel-dot.active {
  background: var(--accent) !important;
  width: 24px;
  box-shadow: 0 0 8px rgba(204,17,17,0.45);
}

/* ── Flechas prev / next ── */
.kst-carousel-prev,
.kst-carousel-next {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  opacity: 1;
  overflow: visible !important;
}

.kst-carousel-prev::after,
.kst-carousel-next::after {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border-top: 2.5px solid rgba(255,255,255,0.80);
  border-right: 2.5px solid rgba(255,255,255,0.80);
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.9));
  transition: border-color 150ms ease;
}

.kst-carousel-prev { left: 10px; }
.kst-carousel-next { right: 10px; }

/* Prev apunta a la izquierda (rotado 225°), Next a la derecha (45°) */
.kst-carousel-prev::after { transform: rotate(225deg) translateX(-2px); }
.kst-carousel-next::after { transform: rotate(45deg)  translateX(-2px); }

.kst-carousel-prev:hover::after,
.kst-carousel-next:hover::after {
  border-color: rgba(255,255,255,1);
}

/* ── Botón de pausa ── */
.kst-carousel-pause {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}

/* Icono pausa: dos barras verticales con box-shadow */
.kst-carousel-pause::after {
  content: '';
  display: block;
  width: 3px;
  height: 11px;
  background: rgba(255,255,255,0.70);
  box-shadow: 5px 0 0 rgba(255,255,255,0.70);
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.9));
  border-radius: 1px;
  transition: background 150ms ease, box-shadow 150ms ease;
}

/* Icono play (estado pausado): triángulo */
.kst-carousel-pause.paused::after {
  width: 0;
  height: 0;
  background: transparent;
  box-shadow: none;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent rgba(255,255,255,0.70);
  border-radius: 0;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.9));
}

.kst-carousel-pause:hover::after {
  background: rgba(255,255,255,1);
  box-shadow: 5px 0 0 rgba(255,255,255,1);
}

.kst-carousel-pause.paused:hover::after {
  background: transparent;
  box-shadow: none;
  border-left-color: rgba(255,255,255,1);
}

/* ── Slides: cursor zoom-in ── */
.kst-carousel-slide { cursor: zoom-in; }

/* ═══════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════ */
.kst-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.kst-lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.kst-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

.kst-lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 90vw;
  padding: 20px;
}

.kst-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--r-lg);
}

.kst-lightbox-caption {
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.875rem;
  font-family: var(--font-body);
  text-align: center;
  max-width: 560px;
  line-height: 1.5;
  margin: 0;
}

/* Botón cerrar — misma estética que chevrones */
.kst-lightbox-close {
  -webkit-appearance: none;
  appearance: none;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 2;
}

.kst-lightbox-close::before,
.kst-lightbox-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.9));
  transition: background 150ms ease;
}

.kst-lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.kst-lightbox-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.kst-lightbox-close:hover::before,
.kst-lightbox-close:hover::after {
  background: rgba(255, 255, 255, 1);
}

/* ── Tablet/mobile: mostrar carousel debajo del texto ── */
@media (max-width: 1024px) {
  .kst-hero-visual {
    display: flex !important;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    align-items: initial !important;
  }
}
@media (max-width: 480px) {
  .kst-hero-visual {
    max-width: 100%;
  }
}
/* ─────────────────────────────────────────────
   ORDER CHAT
───────────────────────────────────────────── */
.kst-chat {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-top: var(--s-8);
}

.kst-chat__header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

.kst-chat__icon { font-size: 1.1rem; }

.kst-chat__title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kst-chat__subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: auto;
}

.kst-chat__messages {
  background: var(--bg-main);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-4);
  height: 420px;
  min-height: 420px;
  max-height: none;
  overflow-y: auto;
  resize: vertical;
  margin-bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  scroll-behavior: smooth;
}

.kst-chat__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
  padding: var(--s-8) 0;
}

.kst-chat__msg {
  display: flex;
  flex-direction: column;
}

.kst-chat__msg--customer { align-items: flex-end; }
.kst-chat__msg--admin    { align-items: flex-start; }

.kst-chat__bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.55;
}

.kst-chat__msg--customer .kst-chat__bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.kst-chat__msg--admin .kst-chat__bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-bottom-left-radius: 3px;
}

.kst-chat__meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: var(--s-1);
}

.kst-chat__form {
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
}

.kst-chat__input {
  flex: 1 1 0;      /* 0 base overrides any inherited width:100% */
  min-width: 0;     /* allow shrinking past intrinsic size in flex */
  width: 0 !important; /* neutralize WC/Astra global textarea{width:100%} */
  box-sizing: border-box;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  resize: none;
  transition: border-color var(--t-fast) var(--ease);
}

.kst-chat__input:focus {
  outline: none;
  border-color: var(--accent);
}

.kst-chat__input::placeholder { color: var(--text-muted); }

.kst-chat__send {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 10px 22px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
  transition: background var(--t-fast) var(--ease);
}

.kst-chat__send:hover    { background: var(--accent-hover); }
.kst-chat__send:disabled { opacity: .5; cursor: not-allowed; }

/* Image-only bubble: no background, no padding, no border-radius clipping issue */
.kst-chat__bubble:has(.kst-chat__attach-img) {
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden;
}
.kst-chat__bubble:has(.kst-chat__attach-img) a {
  display: block;
  line-height: 0;
}
.kst-chat__bubble:has(.kst-chat__attach-img) .kst-chat__attach-img {
  display: block;
  border-radius: var(--r-md);
  max-width: 100%;
}

.kst-chat__attach-img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  display: block;
  margin-top: 6px;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.kst-chat__attach-img:hover { opacity: 0.88; }

.kst-chat__attach-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.8;
  word-break: break-all;
}
.kst-chat__attach-file:hover { opacity: 1; }

/* ── Typing indicator ── */
.kst-chat__bubble--typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  font-size: 13px;
  font-style: italic;
  opacity: 0.72;
}
.kst-chat__typing-draft {
  font-style: normal;
  opacity: 0.85;
}
.kst-chat__dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.kst-chat__dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: kst-dot-bounce 1.2s ease-in-out infinite;
}
.kst-chat__dots span:nth-child(2) { animation-delay: 0.2s; }
.kst-chat__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes kst-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1;   }
}

/* ── Read receipt ── */
.kst-chat__read {
  color: #CC1111;
  font-size: 10px;
}

@media (max-width: 480px) {
  .kst-chat__subtitle { display: none; }
  .kst-chat__bubble   { max-width: 92%; }
}

/* ─────────────────────────────────────────────
   ORDER VIEW PAGE
───────────────────────────────────────────── */

/* ── Status header card ── */
.kst-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-5) var(--s-6);
  margin-bottom: 0;
}

.kst-order-header__left {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.kst-order-header__label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.kst-order-header__number {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.kst-order-header__sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
  align-self: center;
}

.kst-order-header__date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.kst-order-header__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.kst-order-header__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Order notes ── */
.kst-order-notes {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid #818cf8;
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
}

.kst-order-notes__title {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-4) !important;
}

.kst-order-note {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.kst-order-note:last-child { border-bottom: none; }

.kst-order-note__date {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

.kst-order-note__text { font-size: 0.875rem; color: var(--text-primary); }
.kst-order-note__text p { margin: 0; }

/* ── "Order details" section title ── */
.woocommerce-order-details { margin-top: 0 !important; }

.woocommerce-order-details__title {
  font-family: var(--font-heading) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 var(--s-4) !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Order table ── */
table.woocommerce-table--order-details {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--bg-elevated) !important;
  /* border and border-radius now handled by .kst-order-table-wrap wrapper */
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Table header */
table.woocommerce-table--order-details thead tr th {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
}

/* Product row */
table.woocommerce-table--order-details tbody tr td {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  vertical-align: middle !important;
  background: var(--bg-elevated) !important;
}

table.woocommerce-table--order-details .product-name a {
  color: var(--accent) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color var(--t-fast) var(--ease) !important;
}
table.woocommerce-table--order-details .product-name a:hover { color: var(--accent-hover) !important; }

.product-quantity { color: var(--text-muted) !important; font-size: 0.82rem !important; }

table.woocommerce-table--order-details .product-total .woocommerce-Price-amount,
table.woocommerce-table--order-details .product-total bdi {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* Footer rows */
table.woocommerce-table--order-details tfoot tr th,
table.woocommerce-table--order-details tfoot tr td {
  padding: 13px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
  font-size: 0.85rem !important;
  vertical-align: middle !important;
}

table.woocommerce-table--order-details tfoot tr th {
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  text-align: left !important;
  width: 50% !important;
}

table.woocommerce-table--order-details tfoot tr td {
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  text-align: right !important;
}

table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: none !important; }

/* Total row */
table.woocommerce-table--order-details tfoot .order-total th,
table.woocommerce-table--order-details tfoot .order-total td {
  background: var(--bg-elevated) !important;
  font-weight: 700 !important;
}
table.woocommerce-table--order-details tfoot .order-total th { color: var(--accent) !important; }
table.woocommerce-table--order-details tfoot .order-total td .woocommerce-Price-amount,
table.woocommerce-table--order-details tfoot .order-total td bdi {
  color: var(--accent) !important;
  font-size: 1rem !important;
  font-family: var(--font-mono) !important;
}

/* Action buttons row (Pay / Cancel) */
table.woocommerce-table--order-details tfoot tr td a.button,
table.woocommerce-table--order-details tfoot tr td .button,
.woocommerce-order-details a.button {
  display: inline-block !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 7px 18px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background var(--t-fast) var(--ease) !important;
  margin-right: 6px !important;
}
table.woocommerce-table--order-details tfoot tr td a.button:hover,
.woocommerce-order-details a.button:hover { background: var(--accent-hover) !important; }

table.woocommerce-table--order-details tfoot tr td a.cancel {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
}
table.woocommerce-table--order-details tfoot tr td a.cancel:hover {
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

/* ── Hide billing / shipping address ── */
.woocommerce-customer-details { display: none !important; }

/* ── Fix: remove outer vertical cell borders, keep centre divider ── */
table.woocommerce-table--order-details thead tr th,
table.woocommerce-table--order-details tbody tr td,
table.woocommerce-table--order-details tfoot tr th,
table.woocommerce-table--order-details tfoot tr td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

/* Vertical centre divider — right side of first column */
table.woocommerce-table--order-details thead tr th.product-name,
table.woocommerce-table--order-details tbody tr td.product-name,
table.woocommerce-table--order-details tfoot tr th {
  border-right: 1px solid var(--border) !important;
}

/* Horizontal row separator below each product row */
table.woocommerce-table--order-details tbody tr td.product-name,
table.woocommerce-table--order-details tbody tr td.product-total {
  border-bottom: 1px solid var(--border) !important;
}

/* Corner radius now handled by .kst-order-table-wrap (overflow:hidden clips the table) */
table.woocommerce-table--order-details thead tr th:first-child { border-radius: 0 !important; }
table.woocommerce-table--order-details thead tr th:last-child  { border-radius: 0 !important; }

/* Hide the empty <p> wrapper left after the header card div is auto-extracted by the browser */
.woocommerce-account .woocommerce > p:not([class]):empty,
.woocommerce-account .woocommerce > p:not([class]):blank { display: none !important; }

/* Remove default paragraph margin around the header card */
.woocommerce-account .woocommerce > p:not([class]) { margin: 0 !important; padding: 0 !important; line-height: 0; }

/* Table header: aligned padding */
table.woocommerce-table--order-details thead tr th {
  border-bottom: 1px solid var(--border) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Right-align TOTAL column header to match the right-aligned values */
table.woocommerce-table--order-details thead tr th.product-total { text-align: right !important; }

/* Right-align product price in body row */
table.woocommerce-table--order-details tbody tr td.product-total { text-align: right !important; }

/* ── Order view: combined header + table card ── */

/* Kill the empty <p> that wraps the header card — correct container */
.woocommerce-MyAccount-content > p:not([class]),
.woocommerce-MyAccount-content > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
}

/* Header card: top half of the combined card */
.kst-order-header {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  background: var(--bg-elevated) !important;
  margin-bottom: 0 !important;
}

/* Shrink the order number — was 1.4rem */
.kst-order-header__number { font-size: 1rem !important; }

/* Hide the "ORDER DETAILS" section title */
.woocommerce-order-details__title { display: none !important; }

/* "Order details" section — flush to header, no extra gap anywhere */
.woocommerce-MyAccount-content .woocommerce-order-details {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Table: no extra margins */
.woocommerce-MyAccount-content table.woocommerce-table--order-details {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Table wrapper: bottom half of the combined card */
.kst-order-table-wrap {
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: var(--bg-elevated) !important;
  margin-bottom: 0 !important;
  isolation: isolate;
  transform: translateZ(0);
}

/* Nuke bottom spacing from the section and its parent woocommerce container */
.woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-order-details,
section.woocommerce-order-details {
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-content > .woocommerce {
  padding-bottom: 0 !important;
}
.kst-order-table-wrap,
.kst-order-table-wrap table.woocommerce-table--order-details {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove duplicate border from the table itself (wrapper provides it via box-shadow) */
.kst-order-table-wrap table.woocommerce-table--order-details,
.kst-order-table-wrap table.kst-pay-table {
  border: none !important;
  border-radius: 0 !important;
}

/* Nuke any stray border that might bleed from thead/tr elements */
.kst-order-table-wrap thead,
.kst-order-table-wrap thead tr {
  border: none !important;
  outline: none !important;
}

/* ── Remove old individual-cell corner-radius rules (no longer needed) ── */

/* ═══════════════════════════════════════════════════════════
   ORDER-PAY PAGE  (body.woocommerce-order-pay)
   ═══════════════════════════════════════════════════════════ */

body.woocommerce-order-pay .entry-content,
body.woocommerce-order-pay .woocommerce {
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* Outer wrapper */
.kst-order-pay-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* Order summary card */
.kst-pay-order-summary {
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.kst-pay-order-summary__title {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--text-muted) !important;
  margin: 0 0 var(--s-4) !important;
  padding: 0 !important;
  border: none !important;
}

/* Pay table inherits the order-details styles (same class chain) */
.kst-pay-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--bg-elevated) !important;
  table-layout: auto !important;
}

.kst-pay-table thead tr th {
  background: var(--bg-main) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.kst-pay-table thead tr th.product-total { text-align: right !important; }

.kst-pay-table tbody tr td {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
}

.kst-pay-table tbody tr td.product-subtotal {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--text-primary) !important;
  text-align: right !important;
}

.kst-pay-table tbody tr td.product-quantity {
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
  text-align: center !important;
}

.kst-pay-table tfoot tr th,
.kst-pay-table tfoot tr td {
  padding: 14px 20px !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: var(--bg-elevated) !important;
}

.kst-pay-table tfoot tr th {
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.kst-pay-table tfoot tr td.product-total {
  font-family: var(--font-mono) !important;
  font-size: 0.9rem !important;
  color: var(--text-primary) !important;
  text-align: right !important;
}

/* Total row highlight */
.kst-pay-table tfoot tr.order-total th {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.kst-pay-table tfoot tr.order-total td .woocommerce-Price-amount,
.kst-pay-table tfoot tr.order-total td bdi {
  font-family: var(--font-mono) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* Payment method box */
.kst-pay-payment-box {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-6) !important;
}

.kst-pay-payment-box .wc_payment_methods {
  list-style: none !important;
  margin: 0 0 var(--s-4) !important;
  padding: 0 !important;
}

.kst-pay-payment-box .payment_method_kastell_crypto label,
.kst-pay-payment-box .wc_payment_method label {
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.kst-pay-payment-box .payment_box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: var(--s-4) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
}

/* Submit button */
.kst-pay-submit,
#place_order {
  display: block !important;
  width: 100% !important;
  padding: 14px 24px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  margin-top: var(--s-4) !important;
}

.kst-pay-submit:hover,
#place_order:hover {
  background: var(--accent-hover) !important;
}

/* Page title on order-pay */
body.woocommerce-order-pay h1.entry-title,
body.woocommerce-order-pay .page-title {
  font-family: var(--font-body) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--s-6) !important;
}

/* ─────────────────────────────────────────────
   SERVICES PAGINATION
───────────────────────────────────────────── */
.kst-services-paginated {
  position: relative;
}

/* Nav bar: prev arrow · indicator · next arrow */
.kst-services-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  margin-top: var(--s-10);
}

.kst-services-arrow {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 48px;
  height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
  flex-shrink: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.kst-services-arrow:hover {
  background: transparent !important;
  opacity: 1;
  transform: scale(1.15);
}

.kst-services-arrow:disabled {
  opacity: 0.25;
  cursor: default;
  transform: none;
}

.kst-services-arrow::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-right: 3px solid var(--text-secondary);
  border-bottom: 3px solid var(--text-secondary);
  flex-shrink: 0;
  transition: border-color var(--t-fast) var(--ease);
}

.kst-services-arrow--prev::after { transform: rotate(135deg); margin-right: 3px; }
.kst-services-arrow--next::after { transform: rotate(-45deg); margin-left: 3px; }

.kst-services-arrow:hover::after {
  border-color: var(--text-primary);
}

/* ── Grid wrapper (anchors floating arrows) ── */
.kst-services-grid-wrap {
  position: relative;
}

/* ── Floating side arrows ── */
.kst-services-float-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 56px;
  height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.kst-services-float-arrow--prev { left: -60px; }
.kst-services-float-arrow--next { right: -60px; }

.kst-services-float-arrow::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-right: 3px solid var(--text-secondary);
  border-bottom: 3px solid var(--text-secondary);
  transition: border-color var(--t-fast) var(--ease);
}

.kst-services-float-arrow--prev::after { transform: rotate(135deg); margin-right: 4px; }
.kst-services-float-arrow--next::after { transform: rotate(-45deg); margin-left: 4px; }

.kst-services-float-arrow:hover::after { border-color: var(--text-primary); }

/* Only show floating arrows when there's enough margin space */
@media (max-width: 1160px) {
  .kst-services-float-arrow { display: none !important; }
}

.kst-services-page-indicator {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 60px;
  text-align: center;
  letter-spacing: 0.04em;
}