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

/* ==========================================================================
   Dahills v2 - motion layer
   Driven by the theme's own tokens (--cl-accent etc.), so changing the accent
   colour in the Visual Editor recolours every effect below.
   ========================================================================== */

@keyframes da-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes da-sheen {
  from { transform: translateX(-130%) skewX(-18deg); }
  to   { transform: translateX(260%)  skewX(-18deg); }
}

@keyframes da-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cl-accent), 0.35); }
  50%      { box-shadow: 0 0 28px 2px rgba(var(--cl-accent), 0.22); }
}

/* ------------------------------------------------------------------ hero */

.sa-hero-title,
.sa-hero-subtitle,
.sa-hero-actions,
.sa-hero-eyebrow {
  animation: da-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.sa-hero-title    { animation-delay: 0.06s; }
.sa-hero-subtitle { animation-delay: 0.12s; }
.sa-hero-actions  { animation-delay: 0.18s; }

/* --------------------------------------------------------- product cards */

.sa-products-item {
  animation: da-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.sa-products-item:nth-child(1) { animation-delay: 0.00s; }
.sa-products-item:nth-child(2) { animation-delay: 0.05s; }
.sa-products-item:nth-child(3) { animation-delay: 0.10s; }
.sa-products-item:nth-child(4) { animation-delay: 0.15s; }
.sa-products-item:nth-child(5) { animation-delay: 0.20s; }
.sa-products-item:nth-child(6) { animation-delay: 0.25s; }
.sa-products-item:nth-child(n + 7) { animation-delay: 0.30s; }

/* Canvas already lifts the card on hover - this adds the green edge glow. */
.sa-product-card {
  position: relative;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.sa-product-card:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  box-shadow:
    0 16px 36px -16px rgba(var(--cl-accent), 0.5),
    0 0 0 1px rgba(var(--cl-accent), 0.22);
}

.sa-product-card img {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sa-product-card:hover img {
  transform: scale(1.06);
}

.sa-product-card::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 45%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(var(--cl-accent), 0.13),
    transparent
  );
  transform: translateX(-130%) skewX(-18deg);
}

.sa-product-card:hover::after {
  opacity: 1;
  animation: da-sheen 0.9s ease forwards;
}

/* ------------------------------------------------- categories and badges */

.sa-categories a,
.sa-trust-badges > *,
.sa-features > * > * {
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.sa-categories a:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cl-accent), 0.5);
  box-shadow: 0 12px 28px -14px rgba(var(--cl-accent), 0.55);
}

/* ---------------------------------------------------------------- inputs */

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(var(--cl-accent), 0.5);
  box-shadow:
    0 0 0 1px rgba(var(--cl-accent), 0.4),
    0 0 26px -8px rgba(var(--cl-accent), 0.55);
  outline: none;
}

button[type="submit"] {
  animation: da-breathe 3.2s ease-in-out infinite;
}

/* ------------------------------------------------------- scroll and a11y */

html { scroll-behavior: smooth; }

::selection { background: rgba(var(--cl-accent), 0.3); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--cl-bg)); }
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(var(--cl-accent), 0.35);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cl-accent), 0.55); }

@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;
  }
}