/*
 * 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; }
 * ───────────────────────────────────────────────────────────────────────────
*/
/* ============================================
   HALAL & WEALTHY — SellAuth Storefront Theme v2
   Matches the main landing page: emerald + gold + cream,
   Cormorant Garamond (headings) + Jost (body)
   Includes decorative motifs, glow, and motion
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --emerald:#0E3B2E;
  --emerald-deep:#081F19;
  --emerald-mid:#12483A;
  --gold:#C6A15B;
  --gold-soft:#E4CE9E;
  --cream:#F6F0E4;
  --sage:#8AA893;
  --ink:#0E1512;
}

/* ---------- BASE ---------- */
html, body{
  background-color: var(--emerald-deep) !important;
  color: var(--cream) !important;
  font-family: 'Jost', sans-serif !important;
}

/* subtle ambient glow + geometric star texture behind everything */
body{
  background-image:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(198,161,91,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(138,168,147,0.06), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M60 20 L67 47 L94 54 L67 61 L60 88 L53 61 L26 54 L53 47 Z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-attachment: fixed !important;
  background-repeat: repeat, no-repeat, repeat;
}

::selection{ background: var(--gold); color: var(--emerald-deep); }

/* thin gold scrollbar */
::-webkit-scrollbar{ width: 9px; }
::-webkit-scrollbar-track{ background: var(--emerald-deep); }
::-webkit-scrollbar-thumb{ background: rgba(198,161,91,0.4); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--gold); }

/* ---------- HEADINGS ---------- */
h1, h2, h3, h4, h5,
.title, .product-title, .shop-title, .heading{
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  color: var(--cream) !important;
  letter-spacing: 0.01em;
  position: relative;
}

/* small gold diamond accent before major headings */
h1::before, .shop-title::before{
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-right: 12px;
  vertical-align: middle;
}

a{ color: var(--gold); text-decoration: none; transition: color 0.25s ease; }
a:hover{ color: var(--gold-soft) !important; }

/* ---------- HEADER / NAV ---------- */
header, .navbar, .site-header, nav{
  background-color: var(--emerald-deep) !important;
  border-bottom: 1px solid rgba(198,161,91,0.2) !important;
  position: relative;
}
/* animated gold hairline under header */
header::after, .navbar::after, .site-header::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

/* ---------- CARDS / PRODUCT TILES ---------- */
.card, .product-card, .product-item, .panel, .box{
  background-color: var(--emerald-mid) !important;
  border: 1px solid rgba(198,161,91,0.25) !important;
  border-radius: 6px !important;
  color: var(--cream) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.card::before, .product-card::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(198,161,91,0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card:hover, .product-card:hover{
  border-color: rgba(198,161,91,0.6) !important;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(198,161,91,0.15);
}
.card:hover::before, .product-card:hover::before{ opacity: 1; }

/* ---------- PRICE ---------- */
.price, .product-price{
  color: var(--gold-soft) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* ---------- BUTTONS (with shine sweep) ---------- */
button, .btn, .button, input[type="submit"]{
  background-color: var(--gold) !important;
  color: var(--emerald-deep) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 14px 28px !important;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
button::before, .btn::before, .button::before{
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
button:hover::before, .btn:hover::before, .button:hover::before{ left: 130%; }
button:hover, .btn:hover, .button:hover{
  background-color: var(--gold-soft) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(198,161,91,0.35);
}

.btn-secondary, .btn-outline{
  background: transparent !important;
  border: 1px solid rgba(246,240,228,0.35) !important;
  color: var(--cream) !important;
}
.btn-secondary:hover, .btn-outline:hover{
  border-color: var(--gold) !important;
  background: rgba(198,161,91,0.08) !important;
}

/* ---------- INPUTS / CHECKOUT FORM ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select{
  background-color: rgba(246,240,228,0.06) !important;
  border: 1px solid rgba(198,161,91,0.4) !important;
  color: var(--cream) !important;
  font-family: 'Jost', sans-serif !important;
  border-radius: 2px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input::placeholder, textarea::placeholder{ color: rgba(246,240,228,0.4) !important; }
input:focus, textarea:focus, select:focus{
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(198,161,91,0.12) !important;
}

/* ---------- FOOTER ---------- */
footer, .site-footer{
  background-color: var(--emerald-deep) !important;
  border-top: 1px solid rgba(198,161,91,0.15) !important;
  color: var(--sage) !important;
  position: relative;
}
footer::before, .site-footer::before{
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}

/* ---------- MUTED / SECONDARY TEXT ---------- */
.text-muted, .subtitle, .description, p{
  color: var(--sage) !important;
}

/* ---------- BADGES / TAGS ---------- */
.badge, .tag, .label{
  background-color: rgba(198,161,91,0.15) !important;
  color: var(--gold-soft) !important;
  border: 1px solid rgba(198,161,91,0.3) !important;
  border-radius: 3px !important;
  letter-spacing: 0.06em;
}

/* ---------- LOADING SPINNER (common class names) ---------- */
.spinner, .loader, .loading{
  border-color: rgba(198,161,91,0.2) !important;
  border-top-color: var(--gold) !important;
}

/* ---------- DIVIDERS ---------- */
hr{
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(198,161,91,0.4), transparent) !important;
}

/* ---------- SUCCESS / CHECKOUT CONFIRMATION ---------- */
.success, .alert-success{
  background: rgba(198,161,91,0.1) !important;
  border: 1px solid rgba(198,161,91,0.4) !important;
  color: var(--gold-soft) !important;
}