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

/* ===== Mourne — match the Vercel site ===== */

/* Cursor glow blob (accent, subtle) */
#mourne-cursor-glow{
  position:fixed;top:0;left:0;z-index:0;pointer-events:none;
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle, rgba(78,63,134,.10), transparent 60%);
  filter:blur(50px);opacity:0;transition:opacity .5s ease;will-change:transform;
}

/* Product cards: crisper hover to mirror the site (accent border + soft accent shadow) */
.sa-product-card{ transition:border-color .15s ease, transform .15s ease, box-shadow .3s ease; }
.sa-product-card:hover{
  border-color:rgba(78,63,134,.5) !important;
  box-shadow:0 18px 50px -22px rgba(78,63,134,.5);
}

/* Accent-tint the price like the site's card badge */
.sa-product-card-price{ letter-spacing:-.01em; }

/* Logo gets the faint accent glow the site uses */
.sa-navbar-logo img, .sa-hero img{ filter:drop-shadow(0 0 22px rgba(78,63,134,.14)); }

/* Homepage is a full custom build (its own header + footer),
   so hide SellAuth's default chrome ONLY on the shop template. */
body.sa-tpl-shop > #app > div > .sa-header,
body.sa-tpl-shop .sa-breadcrumbs,
body.sa-tpl-shop > #app > .sa-footer,
body.sa-tpl-shop > #app > div > .sa-footer{ display:none !important; }
body.sa-tpl-shop .components > .component{ padding-top:0; padding-bottom:0; }

/* ===== Site-wide atmosphere (film grain + orb mesh + dot grid) =====
   Matches the shop homepage's background layers on every other page
   (product/checkout, cart, faq, terms, etc) so nothing feels bland or
   like a different site. Injected via custom.js — see #mourne-atmo. */
#mourne-atmo{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#mourne-atmo .m-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.14; will-change:transform; }
#mourne-atmo .m-orb--1{ width:560px; height:560px; background:radial-gradient(circle, rgba(78,63,134,.55), transparent 70%); top:-15%; left:-10%; animation:m-orb1 18s ease-in-out infinite alternate; }
#mourne-atmo .m-orb--2{ width:460px; height:460px; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); bottom:-18%; right:-10%; animation:m-orb2 22s ease-in-out infinite alternate; }
@keyframes m-orb1{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(70px,50px) scale(1.15);} }
@keyframes m-orb2{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(-50px,-70px) scale(1.1);} }
#mourne-atmo .m-grid{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.55) 20%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.55) 20%, transparent 70%); }
#mourne-film-grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.03; mix-blend-mode:overlay; background:repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%) 0 0/2px 2px; animation:m-grain-shift .3s steps(4) infinite; }
@keyframes m-grain-shift{ 0%{ transform:translate(0,0);} 25%{ transform:translate(-1px,2px);} 50%{ transform:translate(2px,-1px);} 75%{ transform:translate(-2px,-2px);} 100%{ transform:translate(1px,1px);} }
[data-scheme="light"] #mourne-atmo, [data-scheme="light"] #mourne-film-grain{ display:none; }

/* ===== Checkout / product page — reskin to match the homepage mood ===== */
body.sa-tpl-product .sa-page-product-title{
  background:linear-gradient(135deg,#fff 0%,#e5e5e5 30%,#fff 60%,#d4d4d4 100%);
  background-size:220% 220%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:m-title-shine 8s ease infinite; letter-spacing:-.01em;
}
@keyframes m-title-shine{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
body.sa-tpl-product .sa-product-gallery,
body.sa-tpl-product .sa-page-product-price + * ,
body.sa-tpl-product [class*="rounded-card"].border-theme{
  transition:border-color .25s ease, box-shadow .35s ease;
}
body.sa-tpl-product .sa-product-gallery:hover{
  border-color:rgba(78,63,134,.45) !important;
  box-shadow:0 20px 50px -22px rgba(78,63,134,.5);
}
body.sa-tpl-product .sa-add-to-cart, body.sa-tpl-product button[type="submit"].bg-accent-500, body.sa-tpl-product a.bg-accent-500{
  box-shadow:0 0 0 rgba(78,63,134,0); transition:box-shadow .3s ease, transform .15s ease;
}
body.sa-tpl-product .sa-add-to-cart:hover, body.sa-tpl-product button[type="submit"].bg-accent-500:hover, body.sa-tpl-product a.bg-accent-500:hover{
  box-shadow:0 10px 30px -8px rgba(78,63,134,.6); transform:translateY(-1px);
}
body.sa-tpl-product .sa-header{ background:rgba(10,10,10,.7); backdrop-filter:blur(10px); }
body.sa-tpl-cart .sa-header{ background:rgba(10,10,10,.7); backdrop-filter:blur(10px); }