/* Fit the full product artwork on catalog and home cards. */
.sa-product-card-media .aspect-product-card-image { aspect-ratio: 1 / 1 !important; object-fit: contain !important; object-position: center !important; transform: none !important; }
/* Show the complete WeeHub key artwork without cropping. */
#page-product .aspect-product-page-image { aspect-ratio: 1 / 1 !important; }
#page-product .object-product-image { object-fit: contain !important; object-position: center !important; }
/* WeeHub icy storefront — 2026-10-24 */
:root { --font-heading:'DM Sans',Arial,sans-serif; }
html, body { background:#e8f6ff !important; color:#10265e !important; }
body { background:radial-gradient(ellipse at 18% 8%,#bde5ff 0,transparent 42%),radial-gradient(ellipse at 90% 40%,#a9d9fa 0,transparent 45%),linear-gradient(130deg,#e4f5ff,#f6fcff 48%,#c4e6ff) !important; background-attachment:fixed !important; isolation:isolate; }
body::before,body::after {content:'';position:fixed;inset:-120px 0;pointer-events:none;z-index:-1;background-repeat:repeat;will-change:transform;}
body::before {background-image:radial-gradient(circle at 18px 25px,#fff 1.7px,transparent 3px),radial-gradient(circle at 110px 135px,#fff9 2px,transparent 4px),radial-gradient(circle at 220px 65px,#fff 1px,transparent 2px);background-size:290px 230px;animation:weehub-snow 24s linear infinite;opacity:.8;}
body::after {background-image:radial-gradient(circle at 85px 45px,#fff 2.5px,transparent 5px),radial-gradient(circle at 250px 190px,#fff9 1.5px,transparent 3px);background-size:380px 320px;animation:weehub-snow 38s linear infinite;opacity:.65;}
@keyframes weehub-snow {from{transform:translate3d(0,-90px,0)}to{transform:translate3d(30px,140px,0)}}
#app,.sa-hero,.sa-products,.sa-steps,.sa-features,.sa-faq {background:transparent !important;}
.sa-navbar {background:#eefaffd9 !important;border-bottom:1px solid #88c4e7 !important;backdrop-filter:blur(16px);}
.sa-announcement {background:linear-gradient(110deg,#b4e3ff,#dcf7ff,#bce7ff) !important;color:#173b6b !important;}
.sa-navbar-link,.sa-footer-link {color:#31577c !important;}
h1,h2,h3,.sa-hero-title,.sa-section-title,.sa-product-card-title {font-family:'DM Sans','Inter',Arial,sans-serif !important;color:#10265e !important;}
.sa-hero-title {letter-spacing:-.045em;line-height:1.06;}
.sa-hero-subtitle,.sa-section-subtitle,.sa-trust-badges-subtitle {color:#41658c !important;}
.sa-hero-eyebrow,.sa-section-eyebrow {color:#087dba !important;}
.sa-btn--primary {background:linear-gradient(120deg,#8af0ff,#41c8ef) !important;color:#0a3150 !important;border:1px solid #63c8ec !important;box-shadow:inset 0 1px #fff,0 8px 24px #3794c322 !important;}
.sa-btn--secondary {background:linear-gradient(130deg,#f9feff,#d4edff) !important;color:#183c6b !important;border:1px solid #8dc4e7 !important;}
.sa-product-card,.sa-trust-badges,.sa-features-item,.sa-faq-support-card,.sa-text-block {background:linear-gradient(130deg,#f6fcffd9,#d9efffd9) !important;border:1px solid #91c8e9 !important;border-radius:20px !important;box-shadow:inset 0 1px #fff,0 14px 40px #527fab18 !important;}
.sa-faq-item {border-color:#91c8e9 !important;}
.sa-footer {background:#d9efff80 !important;border-top:1px solid #91c8e9 !important;color:#41658c !important;}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none;will-change:auto;}}
/*
 * 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; }
 * ───────────────────────────────────────────────────────────────────────────
*/