/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status / -badges),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/


/* Kova Menu storefront polish */
:root {
  --kova-pink: #f27bcf;
  --kova-blue: #7897ff;
}

html { scroll-behavior: smooth; }

/* Keep the home page focused on the hero, products, and customer proof. */
.sa-tpl-shop .sa-announcement,
.sa-tpl-shop .sa-trust-badges,
.sa-tpl-shop .sa-categories,
.sa-tpl-shop .sa-features,
.sa-tpl-shop .sa-text-block,
.sa-tpl-shop .sa-faq { display: none !important; }

/* Only the crest stays in the header; status, blog, and Discord stay out of its nav. */
#navbar .sa-navbar-logo { gap: 0 !important; }
#navbar .sa-navbar-logo > span { display: none !important; }
#navbar .sa-navbar-logo img {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  max-width: none !important;
  max-height: 64px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 10px rgba(242, 123, 207, .2));
}
#navbar .h-14,
#navbar .h-16 { min-height: 80px !important; height: 80px !important; }
#navbar .sa-navbar-link[href*="status"],
#navbar .sa-navbar-link[href*="blog"],
#navbar .sa-navbar-link[href*="discord"] { display: none !important; }

/* Keep the footer simple and leave the requested social link icons. */
.sa-footer .sa-footer-link,
.sa-footer a:not([aria-label]),
.sa-footer .sa-footer--columns .wrap > .grid > div:not(:first-child),
.sa-footer .wrap > .grid > div:first-child > p { display: none !important; }
.sa-footer img { display: none !important; }
.sa-footer .wrap { justify-content: center; }

/* Smooth click states with a pink outline and a soft blue glow. */
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"]), input, select, textarea, summary) {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease,
    box-shadow .22s ease, outline-color .22s ease, transform .22s ease !important;
}
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"]), input, select, textarea, summary):focus,
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"]), input, select, textarea, summary).kova-click-selected {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--kova-pink) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(242, 123, 207, .18), 0 0 18px rgba(120, 151, 255, .22) !important;
}
:where(a, button, [role="button"]):hover:not(:focus) { transform: translateY(-2px); }
.sa-product-card,
.sa-product-card:focus-within,
.sa-product-card.kova-click-selected {
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
.sa-product-card:focus-within,
.sa-product-card.kova-click-selected {
  outline: 2px solid var(--kova-pink) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(242, 123, 207, .14), 0 0 18px rgba(120, 151, 255, .2) !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Remove footer branding and navigation columns while keeping Discord. */
.sa-footer h3 { display: none !important; }
.sa-footer .grid > div:not(:first-child) { display: none !important; }
.sa-footer .grid > div:first-child { align-items: center; text-align: center; }
.sa-footer .grid > div:first-child p { display: none !important; }
.sa-footer .grid > div:first-child > div:first-child > a:not([aria-label]) { display: none !important; }


/* Remove the default single-customer headline badge. */
.sa-hero-eyebrow { display: none !important; }