/* WeSell for Eufy: design layer (loads after styles.css) */
:root{
  --bg:#f6f8fb;--bg-elevated:#ffffff;--bg-card:#ffffff;--bg-hover:#f1f5fb;
  --border:#dde3ec;--border-subtle:#e8edf3;
  --text:#0f1b2d;--text-muted:#4a5568;--text-dim:#64748b;
  --accent:#0b5fd9;--accent-hover:#094fb5;--accent-soft:rgba(11,95,217,.08);--accent-glow:rgba(11,95,217,.18);
  --cyan:#0b5fd9;--cyan-soft:rgba(11,95,217,.08);
  --radius:14px;--radius-sm:10px;
  --shadow:0 1px 2px rgba(15,27,45,.06),0 4px 14px rgba(15,27,45,.06);
  --shadow-md:0 4px 10px rgba(15,27,45,.08),0 16px 40px rgba(15,27,45,.10);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;
  --max:1180px;
}
body{background:var(--bg);color:var(--text);font-size:1rem;line-height:1.6}
h1,h2,h3,h4,.section-title,.family-title{font-family:var(--font-head);color:var(--text);letter-spacing:-.015em;line-height:1.2}
h1{font-size:clamp(2rem,4.5vw,3.1rem);font-weight:800}
h2,.section-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{color:var(--text-muted)}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:2px}
.section{padding:var(--s8) 0}.section-sm{padding:var(--s7) 0}
.container{padding-left:var(--s5);padding-right:var(--s5)}
.section-label{color:var(--accent);font-weight:700;letter-spacing:.08em;font-size:.78rem}
/* header */
.site-header{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.nav a{color:var(--text-muted);font-weight:500}.nav a:hover,.nav a.active{color:var(--text);background:var(--bg-hover)}
.nav .btn-nav{background:var(--accent);border-color:var(--accent);color:#fff!important}
.nav .btn-nav:hover{background:var(--accent-hover)}
.nav .btn-nav-secondary{background:#fff;border:1px solid var(--border);color:var(--text)!important}
.nav .btn-nav-secondary:hover{background:var(--bg-hover);border-color:var(--accent)}
.nav-toggle{color:var(--text);border-color:var(--border);background:#fff}
@media (max-width:900px){.site-header .nav{background:#fff!important;border-bottom:1px solid var(--border);box-shadow:var(--shadow-md)}}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:800;font-size:1.2rem;color:var(--text)!important;letter-spacing:-.02em;text-decoration:none}
.wm-badge{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:10px;background:linear-gradient(135deg,#0b5fd9,#12a4e8);color:#fff;font-size:1.05rem}
.wm-for{color:var(--accent);font-weight:700}
/* buttons */
.btn{border-radius:999px;font-weight:600;padding:.75rem 1.4rem;transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff!important;box-shadow:0 2px 8px rgba(11,95,217,.25)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(11,95,217,.3)}
.btn-secondary{background:#fff;border:1px solid var(--border);color:var(--text)!important}
.btn-secondary:hover{border-color:var(--accent);background:var(--bg-hover)}
/* hero */
.hero,.page-hero{background:linear-gradient(180deg,#eaf2ff 0%,var(--bg) 100%);border-bottom:1px solid var(--border-subtle)}
.hero::before{background:radial-gradient(ellipse 60% 50% at 85% 0%,rgba(18,164,232,.16),transparent 60%)}
.hero h1 .accent{color:var(--accent)}
.hero-tagline{color:var(--text)!important;background:#fff!important;border-left-color:var(--accent)!important;box-shadow:var(--shadow)}
.indep-note{font-size:.85rem;color:var(--text-dim);margin:.25rem 0 1.25rem}
.notice-banner{background:#fff;border-bottom:1px solid var(--border)}
.notice-pill{background:var(--accent-soft)!important;color:var(--accent)!important;border-color:transparent!important}
/* cards */
.card,.stat-card,.value-item,.form-card,.detail-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card:hover,a.stat-card:hover,a.value-item:hover,a.card-link:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-card .icon,.card-icon{background:var(--accent-soft);color:var(--accent)}
.cta-box{background:linear-gradient(135deg,#0b3c8a 0%,#0b5fd9 60%,#12a4e8 130%);border:0;box-shadow:var(--shadow-md)}
.cta-box h2{color:#fff}.cta-box p{color:rgba(255,255,255,.9)}
.cta-box .btn-primary{background:#fff;color:#0b3c8a!important}
.band{background:#fff;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
/* catalog */
.cat-nav a{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:999px}
.cat-nav a:hover{border-color:var(--accent);color:var(--accent)}
.family-title{font-size:1.35rem;margin-top:var(--s6)}
.product-grid{gap:var(--s5)}
.product-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);transition:transform .18s,box-shadow .18s,border-color .18s}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.product-card .card-media,.product-card .img-ph{aspect-ratio:4/3;width:100%;border-radius:var(--radius-sm);background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);margin-bottom:var(--s2)}
.product-card .card-media img{width:100%;height:100%;object-fit:contain;padding:.5rem}
.img-ph{background:linear-gradient(135deg,#f1f5fb,#e6eefb)!important;color:var(--accent)}
.product-card h4{font-family:var(--font-head);font-size:1.02rem;line-height:1.3;color:var(--text)}
.product-card .card-price,.card-price{font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:var(--text)}
.product-card .price-note,.price-note{color:var(--text-dim);font-size:.8rem}
.product-card .card-actions{margin-top:auto}
.detail-link{color:var(--accent);font-weight:600}
.badge{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.badge.neutral{background:#eef2f7;color:var(--text-muted)}
.filter-bar input{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.75rem 1.1rem}
.filter-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.back-bar{background:transparent}
.back-link{background:#fff;border:1px solid var(--border);color:var(--text)}
.back-link:hover{color:var(--accent)!important;background:#fff!important}
/* detail page */
.pd-grid{gap:var(--s7)!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important}
.pd-media .card-media,.pd-media .img-ph{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:sticky;top:96px}
.pd-media img{width:100%;height:100%;object-fit:contain;padding:1.5rem;border-radius:0!important}
.pd-text h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:var(--s3)}
.pd-text .card-price{font-size:2rem;margin-top:var(--s4)}
.pd-buy{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s5);margin:var(--s5) 0}
.pd-buy .pd-actions{margin-top:var(--s4)!important}
.pd-buy .btn-primary{flex:1 1 auto;text-align:center;font-size:1.05rem;padding:.95rem 1.5rem}
.pd-buy .pd-trust{font-size:.82rem;color:var(--text-dim);margin-top:var(--s3)}
.pd-unavail{color:var(--text)!important}
.detail-features{padding-left:0;list-style:none}
.detail-features li{padding:.6rem 0;border-bottom:1px solid var(--border-subtle);color:var(--text-muted)}
.detail-features strong{color:var(--text)}
@media(max-width:760px){.pd-grid{grid-template-columns:1fr!important;gap:var(--s5)!important}.pd-media .card-media,.pd-media .img-ph{position:static}}
/* search */
.site-search{padding:var(--s7) 0!important}
.site-search h2{margin-bottom:var(--s4)}
.site-search form{position:relative;max-width:720px}
.site-search form::before{content:"";position:absolute;left:1.1rem;top:50%;width:1.1rem;height:1.1rem;transform:translateY(-50%);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");pointer-events:none}
.site-search input[type=search]{max-width:720px!important;padding:1rem 1.2rem 1rem 3rem!important;font-size:1.05rem!important;border-radius:999px!important;border:1px solid var(--border)!important;background:#fff!important;color:var(--text)!important;box-shadow:var(--shadow)}
.site-search input[type=search]:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-soft),var(--shadow)}
#site-search-results:not(:empty){max-width:720px;margin-top:var(--s3);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--s3);max-height:520px;overflow:auto}
#site-search-results .search-count{font-size:.85rem;color:var(--text-dim);padding:.25rem .5rem;margin:0}
#site-search-results .search-results{display:block!important;margin:0!important}
#site-search-results .search-result a{grid-template-columns:56px 1fr!important;border:0!important;border-radius:var(--radius-sm)!important;padding:.55rem .6rem!important;color:var(--text)!important}
#site-search-results .search-result a:hover,#site-search-results .search-result a:focus-visible{background:var(--bg-hover)}
#site-search-results .search-result img{width:56px!important;height:56px!important;object-fit:contain;background:#fff;border:1px solid var(--border-subtle);border-radius:8px}
#site-search-results .sr-name{font-weight:600;color:var(--text);font-size:.95rem}
#site-search-results .sr-price{color:var(--text-muted);font-size:.88rem}
/* forms */
.form-group input,.form-group textarea,.form-group select{background:#fff!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:var(--radius-sm)}
.form-group label{color:var(--text)}
.field-error{color:#b42318}
.form-alert.error{background:#fef3f2;border-color:#b42318;color:#7a271a}
/* footer */
.site-footer{background:#0f1b2d;color:#cbd5e1;border-top:0}
.site-footer .wordmark{color:#fff!important}
.site-footer .nav a,.footer-cats a,.footer-bottom a{color:#cbd5e1}
.site-footer .nav a:hover,.footer-cats a:hover,.footer-bottom a:hover{color:#fff;background:transparent}
.footer-cats span,.footer-bottom{color:#94a3b8}
.site-footer .nav .btn-nav-secondary{background:transparent;color:#fff!important;border-color:#334155}
.indep-line{color:#e2e8f0;font-weight:600}
@media (max-width:640px){.section{padding:var(--s7) 0}.container{padding-left:var(--s4);padding-right:var(--s4)}.btn{width:100%;justify-content:center}.btn-group{flex-direction:column}.product-grid{gap:var(--s4)}}
.product-card .detail-link,.product-card .card-link{color:var(--accent)!important;font-weight:600}
.product-card:hover .detail-link{text-decoration:underline}
.site-footer .wm-for{color:#7cb8ff}
.pd-text h2{margin:var(--s5) 0 var(--s2)}
.filter-bar input{min-width:min(100%,420px)}
