/*
 * 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; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* =========================================================================
   CLEAN THEME REFINEMENTS
   Loads after built.css and #theme-styles, so these win without !important.
   Plain CSS on existing design tokens only. No Tailwind rebuild required.
   ========================================================================= */

/* --- 1. Local tokens ----------------------------------------------------- */

:root {
  --ui-ring: 0 0 0 3px rgba(var(--cl-accent), 0.32);
  --ui-hairline: rgba(var(--cl-t-primary), 0.08);
  --ui-shadow-pop: 0 2px 4px rgba(8, 11, 16, 0.05), 0 12px 32px -8px rgba(8, 11, 16, 0.12);
}

[data-scheme="dark"] {
  --ui-hairline: rgba(255, 255, 255, 0.07);
  --ui-shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.36), 0 16px 40px -10px rgba(0, 0, 0, 0.56);
}

/* --- 2. Typography ------------------------------------------------------- */
/* Geist is geometric: tighten tracking at display sizes so big headings
   read as one optical unit instead of spaced-out letters. */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.sa-hero-title,
.sa-section-title {
  letter-spacing: -0.021em;
}

.sa-hero-title {
  letter-spacing: -0.032em;
  line-height: 1.06;
}

/* The display scale is a fixed rem value, so a long hero headline stays
   oversized on phones. Scale it fluidly instead, never above the token. */
@media (max-width: 640px) {
  .sa-hero-title {
    font-size: clamp(2rem, 8.5vw, calc(3.25rem * var(--heading-scale)));
    letter-spacing: -0.028em;
    line-height: 1.1;
  }

  .sa-section-title {
    font-size: clamp(1.5rem, 6.2vw, calc(1.875rem * var(--heading-scale)));
  }

  .sa-hero-subtitle {
    font-size: 1rem;
  }
}

.sa-section-title {
  letter-spacing: -0.026em;
}

.sa-hero-subtitle,
.sa-section-subtitle {
  line-height: 1.6;
  text-wrap: pretty;
}

.sa-hero-subtitle {
  max-width: 34rem;
  font-size: 1.0625rem;
}

.sa-hero--centered .sa-hero-subtitle {
  margin-inline: auto;
}

/* Tabular, aligned prices */
.sa-product-card-price,
.sa-page-product-price,
.sa-page-cart-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* Eyebrows: quiet, wide, uppercase */
.sa-hero-eyebrow,
.sa-section-eyebrow {
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* --- 3. Accessible focus ------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ui-ring);
  border-radius: var(--radius-input);
}

/* --- 4. Cards ------------------------------------------------------------ */
/* Card shadows are off in settings; hairline borders carry the structure
   and the hover lift stays subtle. */

.sa-product-card,
.sa-feedback-card,
.sa-blog-post-card,
.sa-status-card,
.sa-faq-support-card {
  border-color: var(--ui-hairline);
  background-clip: padding-box;
  transition:
    transform var(--dur) cubic-bezier(0.2, 0, 0.2, 1),
    box-shadow var(--dur) ease,
    border-color var(--dur) ease;
}

.sa-product-card:hover,
.sa-feedback-card:hover,
.sa-blog-post-card:hover {
  border-color: rgba(var(--cl-accent), 0.35);
  box-shadow: var(--ui-shadow-pop);
}

.sa-product-card-media img,
.sa-blog-post-card img {
  transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.sa-product-card:hover .sa-product-card-media img,
.sa-blog-post-card:hover img {
  transform: scale(1.035);
}

/* --- 5. Buttons ---------------------------------------------------------- */

.sa-btn {
  letter-spacing: -0.006em;
  transition:
    transform var(--dur) cubic-bezier(0.2, 0, 0.2, 1),
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    color var(--dur) ease;
}

.sa-btn:active {
  transform: translateY(0.5px) scale(0.988);
}

/* Faint top highlight gives dimension without a shadow */
.sa-btn--primary.sa-btn--solid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 55%);
}

.sa-btn--primary.sa-btn--solid:hover {
  box-shadow: 0 6px 20px -6px rgba(var(--cl-accent), 0.55);
}

.sa-btn--outline {
  border-color: var(--ui-hairline);
}

.sa-btn--outline:hover {
  border-color: rgba(var(--cl-accent), 0.5);
  background-color: rgba(var(--cl-accent), 0.06);
}

/* --- 6. Header and navbar ------------------------------------------------ */

.sa-header {
  -webkit-backdrop-filter: saturate(165%) blur(14px);
  backdrop-filter: saturate(165%) blur(14px);
}

.sa-navbar-link {
  letter-spacing: -0.006em;
}

.sa-navbar-logo {
  letter-spacing: -0.02em;
}

/* --- 7. Inputs ----------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(var(--cl-accent), 0.55);
}

::placeholder {
  color: rgba(var(--cl-t-muted), 0.7);
}

/* --- 8. Footer ----------------------------------------------------------- */

.sa-footer {
  border-top: 1px solid var(--ui-hairline);
}

.sa-footer-link {
  transition: color var(--dur) ease, opacity var(--dur) ease;
}

.sa-footer-link:hover {
  color: rgb(var(--cl-t-primary));
}

.sa-socials-link {
  transition: transform var(--dur) cubic-bezier(0.2, 0, 0.2, 1), color var(--dur) ease, border-color var(--dur) ease;
}

.sa-socials-link:hover {
  transform: translateY(-2px);
  color: rgb(var(--cl-accent));
  border-color: rgba(var(--cl-accent), 0.4);
}

/* --- 9. FAQ and accordions ----------------------------------------------- */

.sa-faq-item {
  border-color: var(--ui-hairline);
  transition: border-color var(--dur) ease, background-color var(--dur) ease;
}

.sa-faq-item:hover {
  border-color: rgba(var(--cl-t-primary), 0.16);
}

.sa-faq-item summary {
  cursor: pointer;
}

.sa-faq-item summary::-webkit-details-marker {
  display: none;
}

/* --- 10. Feature and step icons ------------------------------------------ */

/* Icon badges are unclassed <span> children in the markup, so target the
   span directly rather than an -icon hook that does not exist. */

.sa-features-item > span,
.sa-steps-item > span {
  transition: transform var(--dur) cubic-bezier(0.2, 0, 0.2, 1), color var(--dur) ease;
}

.sa-features-item:hover > span,
.sa-steps-item:hover > span {
  transform: translateY(-1.5px) scale(1.06);
}

/* --- 11. Cart drawer ----------------------------------------------------- */

.sa-cart-panel {
  box-shadow: var(--ui-shadow-pop);
}

.sa-cart-item {
  border-color: var(--ui-hairline);
}

/* --- 12. Tables ---------------------------------------------------------- */

table th {
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}

table td {
  font-variant-numeric: tabular-nums;
}

/* --- 13. Scrollbar and anchors ------------------------------------------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2.5px solid transparent;
  background-clip: content-box;
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-muted), 0.32);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--cl-t-muted), 0.5);
}

* {
  scrollbar-color: rgba(var(--cl-t-muted), 0.35) transparent;
}

:target {
  scroll-margin-top: 6rem;
}

/* --- 14. Selection ------------------------------------------------------- */

::selection {
  background: rgba(var(--cl-accent), 0.24);
  color: rgb(var(--cl-t-primary));
}

/* --- 15. Media ----------------------------------------------------------- */

img,
video {
  max-width: 100%;
}

/* --- 16. Motion and print ------------------------------------------------ */

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

  .sa-product-card:hover,
  .sa-feedback-card:hover,
  .sa-blog-post-card:hover,
  .sa-socials-link:hover {
    transform: none;
  }
}

@media print {
  .sa-header,
  .sa-navbar,
  .sa-footer,
  .sa-toasts,
  .page-fx,
  .sa-cart-panel {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* --- 17. Accessible accent text (scheme-aware) --------------------------- */
/* The brand accent is tuned so WHITE TEXT ON ACCENT BUTTONS passes 4.5:1.
   That same value is too dark to read as text on a near-black page, and a
   single hue cannot do both (the ceiling is ~4.42:1). So accent-colored TEXT
   uses a per-scheme tint: darker in light mode, lighter in dark mode.
   Buttons and fills keep the true brand accent. */

:root {
  --cl-accent-text: 59, 84, 217;   /* #3B54D9 - 5.9:1 on light surfaces */
}

[data-scheme="dark"] {
  --cl-accent-text: 138, 157, 255; /* #8A9DFF - 7.4:1 on dark surfaces */
}

/* Accent-colored text: links, prices, highlights, eyebrows */
.hl-accent .mk,
.sa-hero-eyebrow.text-accent-500,
.sa-section-eyebrow.text-accent-500,
.text-accent-500,
.sa-product-card-price,
.sa-page-product-price,
.sa-page-cart-price {
  color: rgb(var(--cl-accent-text));
}

/* Inline prose links inside rich text */
.prose a:not(.sa-btn),
.sa-text-block a:not(.sa-btn),
.sa-page-terms-body a:not(.sa-btn),
.sa-page-blog-post-body a:not(.sa-btn) {
  color: rgb(var(--cl-accent-text));
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.07em;
}

/* Keep white-on-accent for solid fills - do not let the tint leak in */
.sa-btn--primary.sa-btn--solid,
.sa-btn--primary.sa-btn--solid:hover,
.sa-add-to-cart.sa-btn--solid {
  color: rgb(var(--cl-on-accent));
}