/* =====================================================================
   SHR AUTOSENSOR — UI System 2026.1 (reed-relay.com)
   Design tokens & component refinements.
   Conventions follow shadcn/ui token layering + Tailwind spacing scale
   + Flowbite/daisyUI card patterns. Loaded AFTER hermes-batch2.
   ===================================================================== */
:root{
  --rr-ring:#f0b534;
  --rr-ease:cubic-bezier(.2,.7,.3,1);
  --rr-sh-sm:0 1px 2px rgba(11,47,85,.06),0 1px 3px rgba(11,47,85,.07);
  --rr-sh-md:0 2px 4px rgba(11,47,85,.05),0 10px 28px rgba(11,47,85,.10);
  --rr-sh-lg:0 4px 10px rgba(11,47,85,.07),0 24px 56px rgba(11,47,85,.16);
  --rr-border:#e2ecf5;
}
/* Accessible focus rings (shadcn-style ring) */
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--rr-ring);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------- Header: sticky + glass ---------------- */
.site-header{position:sticky;top:0;z-index:900}
.site-header.is-solid{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 rgba(11,47,85,.08)}
/* The quick-search band duplicates the hero search on the homepage */
body.home .header-action-row{display:none}

/* ---------------- Hero: depth + glass + product strip ---------------- */
body.home .hero{position:relative;overflow:hidden;background:
 radial-gradient(1100px 540px at 88% -18%,rgba(240,181,52,.16),transparent 55%),
 radial-gradient(900px 560px at -12% 118%,rgba(66,146,255,.17),transparent 55%),
 linear-gradient(158deg,#0a2a4d 0%,#0d3a68 58%,#10437c 100%)}
body.home .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
 background-size:46px 46px;
 -webkit-mask-image:radial-gradient(900px 560px at 72% 28%,#000 25%,transparent 72%);
 mask-image:radial-gradient(900px 560px at 72% 28%,#000 25%,transparent 72%)}
.hero-inner{position:relative;z-index:1}
.eyebrow{letter-spacing:.16em}
.hero h1{letter-spacing:-.022em}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);border-radius:20px;box-shadow:0 24px 64px rgba(3,16,36,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:22px}
.hero-card h3{letter-spacing:-.01em;margin-bottom:14px}
.hero-card .v{border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transition:background .18s var(--rr-ease)}
.hero-card .v:hover{background:rgba(255,255,255,.10)}
.hero-card .v b{color:#f6c453}
/* product photo strip inside the coverage card */
.hero-card-media{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2px 2px 18px}
.hero-card-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#f4f8fc;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 24px rgba(3,16,36,.28);transition:transform .25s var(--rr-ease)}
.hero-card-media .m1{transform:rotate(-2deg)}
.hero-card-media .m2{transform:translateY(-10px) rotate(1.5deg)}
.hero-card-media .m3{transform:rotate(2.5deg)}
.hero-card-media img:hover{transform:translateY(-3px) scale(1.03)}
/* stats → cards */
.hero-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-stats .stat{flex:1 1 130px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:14px 16px;text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-stats .stat b{display:block;font-size:28px;line-height:1.1;color:#f6c453;letter-spacing:-.02em}
.hero-stats .stat span{color:rgba(255,255,255,.75);font-size:13px}

/* ---------------- Product cards (shop / category) ---------------- */
ul.products li.product{background:#fff;border:1px solid var(--rr-border);border-radius:16px;overflow:hidden;box-shadow:var(--rr-sh-sm);transition:transform .2s var(--rr-ease),box-shadow .2s var(--rr-ease),border-color .2s var(--rr-ease)}
ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--rr-sh-lg);border-color:#c8dcee}
ul.products li.product h2.woocommerce-loop-product__title,ul.products li.product .woocommerce-loop-product__title{padding:10px 16px 0;font-size:15px;line-height:1.45;min-height:3.1em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.01em}
ul.products li.product .price{padding:0 16px}
ul.products li.product .price .amount{font-weight:800;color:#0b2f55}
ul.products li.product .button{margin:10px 16px 6px;border-radius:10px}
.onsale{border-radius:999px;padding:4px 12px;background:#e35252;font-weight:700;letter-spacing:.02em;box-shadow:0 6px 16px rgba(227,82,82,.35)}

/* ---------------- PDP polish ---------------- */
.rr-pdp .rr-card{border-radius:20px}
.rr-pdp .rr-shot img{border-radius:16px;box-shadow:var(--rr-sh-sm)}
.rr-pdp .rr-spec th{background:#f7fafd}
.rr-pdp h1{letter-spacing:-.02em}
.rr-pdp .rr-btn{border-radius:12px}

/* ---------------- Buttons ---------------- */
.btn{border-radius:12px;transition:transform .16s var(--rr-ease),box-shadow .16s var(--rr-ease),background .16s var(--rr-ease),border-color .16s var(--rr-ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{box-shadow:0 8px 20px rgba(11,92,171,.22)}