/* ── Variables ────────────────────────────────────────── */
:root {
    --primary:      #ff9900;
    --primary-dark: #e47911;
    --primary-glow: rgba(255,153,0,.45);
    --secondary:    #131921;
    --secondary-2:  #232f3e;
    --accent:       #146eb4;
    --text:         #0f172a;
    --muted:        #64748b;
    --bg:           #f6f7fb;
    --card:         #fff;
    --border:       #e5e7eb;
    --success:      #16a34a;
    --error:        #dc2626;
    --r:            14px;
    --r-sm:         8px;
    --shadow:       0 4px 18px rgba(15,23,42,.06);
    --shadow-md:    0 8px 24px rgba(15,23,42,.08);
    --shadow-lg:    0 20px 50px rgba(15,23,42,.18);
    --t:            .2s ease;
    --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cart-w:       400px;
}

/* ── Reset ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }
img   { max-width:100%; height:auto; display:block; }
a     { color:inherit; text-decoration:none; }
button{ cursor:pointer; font-family:inherit; border:none; background:none; }
.muted { color: var(--muted); }

/* ── Affiliate Bar ────────────────────────────────────── */
.affiliate-bar { background:#fff8e1; color:#92400e; text-align:center; padding:.45rem 1rem; font-size:.82rem; border-bottom:1px solid #fde68a; }
.affiliate-bar a { color:#b45309; text-decoration:underline; margin-left:.4rem; }

/* ── Header ───────────────────────────────────────────── */
.site-header { position:sticky; top:0; z-index:100; background:linear-gradient(180deg,var(--secondary),var(--secondary-2)); color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.25); }
.header-inner { max-width:1400px; margin:0 auto; padding:.85rem 1.5rem; display:flex; align-items:center; gap:1.25rem; }
.logo { display:flex; align-items:center; gap:.55rem; font-size:1.25rem; font-weight:800; color:#fff; white-space:nowrap; letter-spacing:-.02em; }
.logo-icon { font-size:1.6rem; filter:drop-shadow(0 0 8px var(--primary-glow)); }
.logo-text { background:linear-gradient(90deg,#fff 30%,var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.header-search { flex:1; max-width:680px; display:flex; background:#fff; border-radius:999px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:box-shadow var(--t); }
.header-search:focus-within { box-shadow:0 0 0 3px var(--primary-glow), 0 4px 14px rgba(0,0,0,.18); }
.header-search input { flex:1; padding:.75rem 1.1rem; border:none; outline:none; font-size:.95rem; color:var(--text); background:transparent; }
.btn-search { padding:.75rem 1.2rem; background:var(--primary); color:#000; display:flex; align-items:center; transition:background var(--t); }
.btn-search:hover { background:var(--primary-dark); }

.header-actions { display:flex; align-items:center; gap:.85rem; margin-left:auto; }
.locale-select { padding:.5rem .65rem; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; font-size:.85rem; cursor:pointer; outline:none; transition:background var(--t); }
.locale-select:hover { background:rgba(255,255,255,.16); }
.locale-select option { background:var(--secondary); color:#fff; }

.cart-toggle { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:var(--primary); color:#000; border-radius:999px; font-weight:700; font-size:.9rem; position:relative; transition:background var(--t),transform var(--t); box-shadow:0 4px 14px var(--primary-glow); }
.cart-toggle:hover { background:var(--primary-dark); transform:translateY(-1px); }
.cart-badge { position:absolute; top:-6px; right:-6px; background:var(--error); color:#fff; font-size:.7rem; font-weight:700; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--secondary); transition:transform var(--t); }
.cart-badge.bump { transform:scale(1.4); }

/* ── Hero ─────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#232f3e 100%); color:#fff; padding:4rem 1.5rem 3.5rem; }
.hero-inner { max-width:1100px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.hero-title { font-size:clamp(2.2rem,5vw,3.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; background:linear-gradient(90deg,#fff 0%,#fff 40%,var(--primary) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-tag { font-size:clamp(1rem,2vw,1.2rem); color:rgba(255,255,255,.85); margin:1rem auto 0; max-width:640px; }
.hero-features { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:2rem; }
.hero-pill { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:.5rem 1rem; border-radius:999px; font-size:.85rem; backdrop-filter:blur(8px); }
.hero-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 100%,var(--primary-glow),transparent 60%); opacity:.7; }

/* ── Filter Bar ───────────────────────────────────────── */
.filter-bar { background:#fff; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; position:sticky; top:0; z-index:50; box-shadow:var(--shadow); }
.filter-bar::-webkit-scrollbar { display:none; }
.filter-inner { max-width:1400px; margin:0 auto; padding:.85rem 1.5rem; display:flex; gap:.5rem; white-space:nowrap; }
.filter-btn { padding:.5rem 1.1rem; border-radius:999px; font-size:.88rem; font-weight:500; color:var(--muted); background:#f1f5f9; border:1px solid transparent; transition:all var(--t); }
.filter-btn:hover { color:var(--text); background:#e2e8f0; }
.filter-btn.active { background:var(--secondary); color:#fff; font-weight:600; border-color:var(--secondary); }

/* ── Container + Grid ─────────────────────────────────── */
.container { max-width:1400px; margin:0 auto; padding:1.75rem 1.5rem 2rem; }
.products-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.products-header h2 { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; }
#sortSelect { padding:.55rem .85rem; border:1px solid var(--border); border-radius:var(--r-sm); font-size:.9rem; cursor:pointer; outline:none; background:#fff; box-shadow:var(--shadow); }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.25rem; }

/* ── Product Card ─────────────────────────────────────── */
.product-card { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; transition:transform var(--t),box-shadow var(--t); display:flex; flex-direction:column; cursor:pointer; border:1px solid transparent; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border); }
.product-card:focus-within { outline:2px solid var(--primary); outline-offset:2px; }
.product-image-wrap { position:relative; aspect-ratio:1; overflow:hidden; background:#fafafa; }
.product-image-wrap img { width:100%; height:100%; object-fit:contain; padding:1.25rem; transition:transform .35s ease; }
.product-card:hover .product-image-wrap img { transform:scale(1.06); }
.product-badge { position:absolute; top:.6rem; left:.6rem; background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; font-size:.72rem; font-weight:700; padding:.25rem .55rem; border-radius:999px; box-shadow:0 4px 12px rgba(220,38,38,.4); }
.product-featured-flag { position:absolute; top:.6rem; right:.6rem; background:rgba(255,255,255,.95); color:var(--primary-dark); font-size:.7rem; font-weight:700; padding:.2rem .5rem; border-radius:999px; }
.product-info { padding:1rem 1.1rem; flex:1; display:flex; flex-direction:column; gap:.4rem; }
.product-brand  { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.product-title  { font-size:.95rem; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.product-snippet { font-size:.82rem; color:#475569; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.3em; }
.product-rating { display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--muted); }
.stars          { color:var(--primary); font-size:.9rem; letter-spacing:1px; }
.product-pricing { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.4rem; }
.price-current  { font-size:1.25rem; font-weight:800; color:var(--text); }
.price-original { font-size:.85rem; color:var(--muted); text-decoration:line-through; }
.price-discount { font-size:.72rem; background:#fef3c7; color:#b45309; padding:.18rem .45rem; border-radius:4px; font-weight:600; }
.btn-add-cart { margin:.25rem 1rem 1rem; padding:.7rem; background:var(--primary); color:#000; border-radius:var(--r-sm); font-weight:700; font-size:.9rem; text-align:center; transition:background var(--t),transform var(--t); }
.btn-add-cart:hover  { background:var(--primary-dark); }
.btn-add-cart:active { transform:scale(.97); }
.btn-add-cart.in-cart{ background:var(--success); color:#fff; }

/* ── Skeleton ─────────────────────────────────────────── */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skeleton { background:#fff; pointer-events:none; }
.skeleton-image,.skeleton-text,.skeleton-price,.skeleton-btn { background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size:400px 100%; animation:shimmer 1.4s infinite; border-radius:6px; }
.skeleton-image  { height:200px; }
.skeleton-text   { height:14px; margin:14px 16px 6px; }
.skeleton-text.short { width:60%; }
.skeleton-price  { height:22px; width:90px; margin:8px 16px; }
.skeleton-btn    { height:38px; margin:12px 16px 16px; }

/* ── Cart Sidebar ─────────────────────────────────────── */
.cart-sidebar { position:fixed; right:0; top:0; width:var(--cart-w); max-width:100vw; height:100vh; height:100dvh; background:#fff; box-shadow:var(--shadow-lg); z-index:200; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.cart-sidebar.open { transform:translateX(0); }
.cart-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:199; backdrop-filter:blur(4px); }
.cart-overlay.active { display:block; animation:fadeIn .2s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; background:linear-gradient(135deg,var(--secondary),var(--secondary-2)); color:#fff; }
.cart-header h2 { font-size:1.1rem; font-weight:700; }
.cart-close { font-size:1.4rem; color:#fff; padding:.25rem .55rem; border-radius:6px; line-height:1; }
.cart-close:hover { background:rgba(255,255,255,.15); }
.cart-items { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:1rem; }
.cart-empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.cart-item { display:grid; grid-template-columns:75px 1fr auto; gap:.85rem; align-items:start; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.cart-item-img { width:75px; height:75px; object-fit:contain; background:#f8fafc; border-radius:var(--r-sm); padding:.35rem; border:1px solid var(--border); }
.cart-item-title { font-size:.85rem; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.4rem; }
.cart-item-price { font-size:.95rem; font-weight:700; color:var(--text); }
.cart-item-controls { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; }
.qty-btn { width:28px; height:28px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:700; transition:background var(--t); }
.qty-btn:hover { background:#e2e8f0; }
.qty-display { width:32px; text-align:center; font-weight:600; font-size:.9rem; }
.cart-item-remove { color:var(--muted); padding:.25rem; transition:color var(--t); font-size:1.05rem; }
.cart-item-remove:hover { color:var(--error); }
.cart-footer { padding:1.25rem; border-top:1px solid var(--border); background:#fafafa; }
.cart-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; font-size:1rem; }
.cart-total strong { font-size:1.4rem; color:var(--text); font-weight:800; }
.cart-disclaimer { font-size:.75rem; color:var(--muted); margin-bottom:1rem; }
.btn-checkout { width:100%; padding:1rem; background:var(--primary); color:#000; border-radius:var(--r-sm); font-weight:700; font-size:1rem; transition:background var(--t),transform var(--t); box-shadow:0 6px 18px var(--primary-glow); }
.btn-checkout:hover  { background:var(--primary-dark); }
.btn-checkout:active { transform:scale(.99); }
.btn-checkout:disabled{ opacity:.6; cursor:not-allowed; }

/* ── Modal ────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.65); z-index:300; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(6px); }
.modal-overlay.open { display:flex; }
.product-modal { background:#fff; border-radius:var(--r); max-width:980px; width:100%; max-height:92vh; overflow-y:auto; position:relative; box-shadow:var(--shadow-lg); animation:modalIn .28s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-close { position:absolute; top:1rem; right:1rem; width:36px; height:36px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; z-index:1; transition:background var(--t); box-shadow:var(--shadow); }
.modal-close:hover { background:var(--bg); }
.modal-body { display:grid; grid-template-columns:1fr 1fr; gap:2.25rem; padding:2rem; }
.modal-main-img { width:100%; aspect-ratio:1; object-fit:contain; background:#f8fafc; border-radius:var(--r); padding:1.25rem; }
.modal-thumbs { display:flex; gap:.5rem; margin-top:.85rem; flex-wrap:wrap; }
.modal-thumb { width:64px; height:64px; object-fit:contain; background:#f8fafc; border-radius:var(--r-sm); border:2px solid transparent; cursor:pointer; padding:.3rem; transition:border-color var(--t); }
.modal-thumb.active,.modal-thumb:hover { border-color:var(--primary); }
.modal-info { display:flex; flex-direction:column; gap:1rem; }
.modal-brand { color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.modal-title { font-size:1.45rem; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
.modal-price { font-size:2rem; font-weight:800; color:var(--text); display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.modal-price .price-original { font-size:1rem; }
.modal-price .price-discount { font-size:.8rem; }
.product-desc { white-space:pre-line; color:#334155; font-size:.95rem; max-height:280px; overflow-y:auto; padding-right:.5rem; }
.modal-actions { display:flex; gap:1rem; margin-top:auto; flex-wrap:wrap; }
.modal-actions .btn-add-cart { flex:1; min-width:160px; margin:0; padding:1rem; background:var(--primary); color:#000; border-radius:var(--r-sm); font-weight:700; font-size:1rem; }
.btn-view-amazon { padding:1rem 1.25rem; border:2px solid var(--secondary); color:var(--secondary); border-radius:var(--r-sm); font-weight:700; white-space:nowrap; transition:all var(--t); display:inline-flex; align-items:center; }
.btn-view-amazon:hover { background:var(--secondary); color:#fff; }

/* ── Pagination ───────────────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:.4rem; padding:2.5rem 0 1rem; flex-wrap:wrap; }
.page-btn { min-width:42px; height:42px; padding:0 .8rem; border-radius:var(--r-sm); border:1px solid var(--border); background:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:600; transition:all var(--t); }
.page-btn:hover { border-color:var(--primary); color:var(--primary-dark); }
.page-btn.active { background:var(--secondary); border-color:var(--secondary); color:#fff; }
.page-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ── Trust + Buying Guide Content ─────────────────────── */
.trust-content,.buying-guide { margin-top:2.25rem; background:#fff; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:1.25rem; }
.trust-content h2,.buying-guide h2 { font-size:1.25rem; font-weight:800; letter-spacing:-.01em; margin-bottom:.9rem; }
.trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.trust-card { background:linear-gradient(180deg,#f8fafc,#fff); border:1px solid #e2e8f0; border-radius:12px; padding:.85rem; }
.trust-card h3 { font-size:.95rem; margin-bottom:.35rem; color:#0f172a; }
.trust-card p { font-size:.85rem; color:#334155; line-height:1.55; }
.trust-links { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.9rem; }
.trust-links a { display:inline-flex; align-items:center; gap:.25rem; padding:.4rem .65rem; border:1px solid var(--border); border-radius:999px; font-size:.8rem; color:#334155; background:#fff; }
.trust-links a:hover { border-color:var(--primary); color:#111827; }
.buying-guide ul { margin-left:1.1rem; color:#334155; font-size:.9rem; line-height:1.7; }

/* ── Toast ────────────────────────────────────────────── */
.toast { position:fixed; bottom:2rem; right:2rem; padding:.95rem 1.35rem; background:var(--secondary); color:#fff; border-radius:var(--r); font-size:.9rem; font-weight:500; box-shadow:var(--shadow-lg); z-index:999; max-width:340px; transform:translateY(120px); opacity:0; transition:all .3s cubic-bezier(.4,0,.2,1); }
.toast.show    { transform:translateY(0); opacity:1; }
.toast.success { background:var(--success); }
.toast.error   { background:var(--error); }

/* ── Footer ───────────────────────────────────────────── */
.site-footer { background:linear-gradient(180deg,var(--secondary-2),var(--secondary)); color:rgba(255,255,255,.75); padding:3rem 1.5rem 2rem; margin-top:4rem; font-size:.9rem; }
.footer-inner { max-width:1400px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-col h4 { color:#fff; font-size:1rem; font-weight:700; margin-bottom:.85rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.5rem; }
.footer-col a { color:rgba(255,255,255,.7); transition:color var(--t); }
.footer-col a:hover { color:var(--primary); }
.footer-tag { color:rgba(255,255,255,.65); }
.footer-bottom { text-align:center; padding-top:1.5rem; font-size:.78rem; color:rgba(255,255,255,.55); }
.footer-disclosure { max-width:800px; margin:.75rem auto 0; line-height:1.7; }

/* ── Product Detail Page ──────────────────────────────── */
.breadcrumb { font-size:.85rem; color:var(--muted); margin-bottom:1.5rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.breadcrumb a { color:var(--accent); }
.breadcrumb a:hover { text-decoration:underline; }
.product-detail { display:grid; grid-template-columns:1fr 1fr; gap:3rem; background:#fff; border-radius:var(--r); padding:2rem; box-shadow:var(--shadow); }
.product-detail-info { display:flex; flex-direction:column; gap:1rem; }
.product-page { padding-top:1.5rem; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:768px) {
    .header-inner    { flex-wrap:wrap; padding:.65rem 1rem; gap:.75rem; }
    .cart-label      { display:none; }
    .header-search   { order:3; flex:100%; }
    .products-grid   { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); }
    .modal-body      { grid-template-columns:1fr; gap:1.25rem; padding:1.25rem; }
    .product-detail  { grid-template-columns:1fr; padding:1.25rem; gap:1.5rem; }
    :root            { --cart-w:100vw; }
    .hero            { padding:3rem 1.25rem 2.5rem; }
    .trust-content,.buying-guide { padding:1rem; }
}
@media (max-width:480px) {
    .products-grid   { grid-template-columns:1fr 1fr; gap:.75rem; }
    .cart-item       { grid-template-columns:55px 1fr auto; }
    .toast           { bottom:1rem; right:1rem; left:1rem; max-width:none; }
}