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

/* Rick Roads — dark, device-first storefront */
html {
  background: #0b0f0d;
}

body {
  letter-spacing: -0.01em;
  background:
    radial-gradient(circle at 8% 4%, rgb(var(--cl-accent) / 0.13), transparent 30rem),
    radial-gradient(circle at 94% 88%, rgb(var(--cl-warning) / 0.06), transparent 28rem),
    rgb(var(--cl-background));
}

::selection {
  color: rgb(var(--cl-on-accent));
  background: rgb(var(--cl-accent));
}

:focus-visible {
  outline: 3px solid rgb(var(--cl-accent) / 0.5);
  outline-offset: 3px;
}

.sa-header {
  background: transparent;
}

.sa-announcement {
  border-bottom: 1px solid rgb(var(--cl-accent) / 0.18);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sa-navbar--floating-pill > div > div {
  border-color: rgb(var(--cl-border));
  background: rgb(var(--cl-background) / 0.82);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
}

.sa-navbar-logo::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: rgb(var(--cl-accent));
  box-shadow: 0 0 20px rgb(var(--cl-accent) / 0.72);
  transform: rotate(45deg);
}

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

.sa-hero {
  isolation: isolate;
}

.sa-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(-8rem, -10vw, -3rem);
  bottom: -9rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgb(var(--cl-accent) / 0.16);
  border-radius: 42% 58% 58% 42%;
  transform: rotate(24deg);
}

.sa-hero-title {
  max-width: 900px;
  font-size: clamp(3.35rem, 8vw, 7rem) !important;
  line-height: 0.91 !important;
  letter-spacing: -0.075em !important;
  text-wrap: balance;
}

.sa-hero-subtitle {
  max-width: 680px;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}

.sa-hero-eyebrow {
  border-color: rgb(var(--cl-accent) / 0.28) !important;
  background: rgb(var(--cl-accent) / 0.08) !important;
}

.sa-section-title {
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.sa-products,
.sa-features,
.sa-faq,
.sa-steps,
.sa-text-block {
  position: relative;
}

.sa-product-card,
.sa-feature-item,
.sa-feedback-card,
.sa-trust-badges--card,
.sa-page-product form,
.sa-page-cart {
  border-color: rgb(var(--cl-border));
  background:
    linear-gradient(145deg, rgb(var(--cl-surface-raised) / 0.96), rgb(var(--cl-surface) / 0.9));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.sa-product-card {
  overflow: hidden;
}

.sa-product-card:hover {
  border-color: rgb(var(--cl-accent) / 0.42);
  box-shadow: 0 26px 75px rgba(0, 0, 0, 0.34), 0 0 0 1px rgb(var(--cl-accent) / 0.08);
}

.sa-product-card-price,
.sa-product-form-price {
  color: rgb(var(--cl-accent));
  font-weight: 800;
}

.sa-btn,
.sa-add-to-cart {
  min-height: 46px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sa-btn:hover,
.sa-add-to-cart:hover {
  box-shadow: 0 12px 32px rgb(var(--cl-accent) / 0.2);
}

.sa-steps-item-icon,
.sa-features-item-icon,
.sa-feature-icon {
  color: rgb(var(--cl-accent));
  background: rgb(var(--cl-accent) / 0.1);
  border-color: rgb(var(--cl-accent) / 0.2);
}

.rr-device-callout {
  margin: 0 0 1.25rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid rgb(var(--cl-accent) / 0.28);
  border-radius: var(--radius-input);
  background: linear-gradient(135deg, rgb(var(--cl-accent) / 0.12), rgb(var(--cl-accent) / 0.035));
}

.rr-device-callout-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: rgb(var(--cl-accent));
  background: rgb(var(--cl-accent) / 0.13);
  box-shadow: inset 0 0 0 1px rgb(var(--cl-accent) / 0.18);
}

.rr-device-callout-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.rr-device-callout-copy strong {
  color: rgb(var(--cl-t-primary));
  font-size: 0.9rem;
}

.rr-device-callout-copy span {
  color: rgb(var(--cl-t-muted));
  font-size: 0.78rem;
  line-height: 1.5;
}

.rr-device-callout-link,
.rr-device-field-help {
  color: rgb(var(--cl-accent));
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.rr-device-callout-link:hover,
.rr-device-field-help:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rr-device-field-help {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sa-product-form input,
.sa-product-form textarea,
.sa-product-form select {
  border-color: rgb(var(--cl-border));
  background: rgb(var(--cl-background) / 0.62);
}

.sa-product-form input:focus,
.sa-product-form textarea:focus,
.sa-product-form select:focus {
  border-color: rgb(var(--cl-accent) / 0.7);
  box-shadow: 0 0 0 3px rgb(var(--cl-accent) / 0.12);
}

.sa-text-block--accent-tint {
  border-block: 1px solid rgb(var(--cl-accent) / 0.12);
  background: linear-gradient(90deg, transparent, rgb(var(--cl-accent) / 0.07), transparent);
}

.sa-faq-item {
  border-color: rgb(var(--cl-border));
  background: rgb(var(--cl-surface) / 0.7);
}

.sa-footer {
  border-top: 1px solid rgb(var(--cl-border));
  background: rgb(var(--cl-background) / 0.88);
}

.sa-footer::before {
  content: "Independent software · Not government-issued identification";
  display: block;
  width: min(100% - 2rem, var(--container-max));
  margin: 0 auto;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(var(--cl-warning) / 0.24);
  border-radius: var(--radius-input);
  color: rgb(var(--cl-warning));
  background: rgb(var(--cl-warning) / 0.06);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 720px) {
  .sa-hero-title {
    font-size: clamp(2.8rem, 15vw, 4.5rem) !important;
  }

  .rr-device-callout {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .rr-device-callout-icon {
    width: 38px;
    height: 38px;
  }

  .rr-device-callout-link {
    grid-column: 2;
    justify-self: start;
  }
}

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