*{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#0a1628;--navy2:#1e3c72;--gold:#f59e0b;--gold2:#fcd34d;--text:#1e293b;--text2:#475569;--border:#e2e8f0;--bg:#f3f3f3;--shadow:0 2px 8px rgba(0,0,0,.08)}
body{font-family:'Barlow',Arial,sans-serif;background:var(--bg);font-size:13px;color:var(--text);overflow-x:clip}
/* Mobile bottom-gap tightener: the empty space below the last visible
   content block and the affiliate disclosure was too generous on
   small screens. .aff-note's natural margin + page-wrap padding stacks
   up unnecessarily on narrow viewports. */
@media(max-width:600px){
  /* Aggressive bottom-gap compression on mobile. The gap between the last
     content (tile grid or product card) and the affiliate-disclosure box
     was ~100-150px from stacked margins/padding across several invisible
     wrappers. Brute-forcing it tight with !important on every plausible
     suspect. If the layout becomes TOO tight (cards touching the disclosure
     border), back off these values. */
  .page-wrap{padding-bottom:0!important}
  main.content{padding-bottom:0!important;margin-bottom:0!important}
  #productsGrid,#noResults,#crossVerticalMount,#relatedGuides{margin-bottom:0!important;padding-bottom:0!important}
  .aff-note{margin:6px auto 6px!important}
  /* Bottom Featured Partners aside — pull it up so the gap above it
     stays small even with .aff-note's margin. */
  aside.wsl-partners{margin-top:0!important}
}

/* TOPBAR */
.topbar{background:#1e3c72;color:#fff;font-size:11px;padding:5px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-left a{color:rgba(255,255,255,.8);text-decoration:none;margin:0 5px;font-size:11px}
.topbar-left a:hover{color:white}
/* Mobile: horizontal-scroll topbar instead of wrapping into multiple rows */
@media(max-width:760px){
  .topbar{padding:5px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .topbar::-webkit-scrollbar{display:none}
  .topbar-left{display:flex;flex-wrap:nowrap;white-space:nowrap}
  .topbar-left a{margin:0 3px;font-size:10.5px}
  .topbar-right{flex-shrink:0;white-space:nowrap}
}
.lang-switcher{position:relative}
.lang-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:white;padding:4px 10px;border-radius:3px;cursor:pointer;font-size:11px;font-family:'Barlow',sans-serif;min-height:28px}
.lang-btn:hover{background:rgba(255,255,255,.2)}
.lang-dropdown{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#1e293b;border:1px solid rgba(255,255,255,.15);border-radius:6px;min-width:155px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.3);overflow:hidden}
.lang-dropdown.open{display:block}
.lang-opt{padding:9px 14px;color:rgba(255,255,255,.8);font-size:11px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}
.lang-opt:hover,.lang-opt.active{background:rgba(255,255,255,.1);color:white}
.lang-opt.active{color:var(--gold2);font-weight:700}

/* HEADER */
.hdr{background:linear-gradient(135deg,#1e3c72,#2a5298);padding:11px 0;position:sticky;top:0;z-index:500;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.hdr-inner{max-width:1450px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:12px}
.logo{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:900;color:white;text-decoration:none;flex-shrink:0}
.logo span{color:var(--gold)}
.mob-menu-btn{display:none;background:#1e3c72;border:1px solid rgba(255,255,255,.25);color:white;padding:7px 11px;border-radius:4px;cursor:pointer;font-size:13px;font-family:'Barlow',sans-serif;white-space:nowrap;min-height:38px;flex-shrink:0}
.search-row{flex:1;display:flex}
.dept-sel{background:#f3f3f3;border:none;padding:8px 8px;border-radius:4px 0 0 4px;cursor:pointer;font-size:12px;min-width:105px;max-width:145px;font-family:'Barlow',sans-serif}
.srch-inp{flex:1;padding:8px 12px;border:none;font-size:14px;font-family:'Barlow',sans-serif;outline:none;min-width:0}
.srch-btn{background:var(--gold);border:none;padding:8px 16px;border-radius:0 4px 4px 0;cursor:pointer;font-size:16px;transition:background .15s;min-height:38px}
.srch-btn:hover{background:var(--gold2)}

/* STORE TABS */
.tabs-wrap{background:white;border-bottom:2px solid #e8e8e8;overflow-x:auto;scrollbar-width:none}
.tabs-wrap::-webkit-scrollbar{display:none}
.tabs{display:flex;max-width:1450px;margin:0 auto;padding:0 18px}
.tab{padding:10px 16px;cursor:pointer;font-size:13px;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap;color:#555;transition:all .15s;display:flex;align-items:center;gap:5px}
.tab:hover{background:#f7f7f7;color:#1e3c72}
.tab.on{border-bottom-color:var(--gold);color:#1e3c72;background:#fffbf3}
.cnt{background:#eee;color:#555;font-size:10px;padding:1px 6px;border-radius:8px}
.tab.on .cnt{background:var(--gold);color:#333}

/* FILTER BAR */
.fbar{background:white;border-bottom:1px solid var(--border);padding:8px 18px}
.fbar-inner{max-width:1450px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);font-weight:600;white-space:nowrap}
.fg label{font-weight:400;display:flex;align-items:center;gap:4px;cursor:pointer;color:var(--text);min-height:44px}
.fg input[type=checkbox],.fg input[type=radio]{accent-color:#1e3c72;width:14px;height:14px;cursor:pointer}
.price-ins{display:flex;align-items:center;gap:4px}
.price-ins input{width:65px;padding:5px 7px;border:1px solid var(--border);border-radius:4px;font-size:12px;font-family:'Barlow',sans-serif}
.fapply{background:#1e3c72;color:white;border:none;padding:6px 12px;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif;min-height:32px}
.fapply:hover{background:#2a5298}
.fsep{width:1px;height:22px;background:var(--border);flex-shrink:0}
.sort-g{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);font-weight:600;margin-left:auto}
.sort-g select{padding:5px 8px;border:1px solid var(--border);border-radius:4px;font-size:12px;font-family:'Barlow',sans-serif;cursor:pointer}

/* PAGE WRAP */
.page-wrap{max-width:1450px;margin:0 auto;display:flex;padding:14px 14px;gap:10px}

/* SIDEBAR
   2026-05-18 (rev 4): position:sticky + overflow:hidden restored,
   inner-pane scroll still removed. The overflow:hidden is required
   to CLIP the drill-down .sb-flyout panel in its hidden translateX(100%)
   state — without it the empty flyout renders to the right of the rail
   as a phantom "Category" panel (Darryl's screenshot 2026-05-18).
   Original "moving" complaint was the inner scrollbar from
   .sb-pane-main max-height + overflow:auto, which is still removed —
   so no rogue rail scrollbar but the flyout slides in/out properly. */
/* The scroll moved from .sidebar onto .sb-pane-main so the .sb-flyout
   (sibling of sb-pane-main, position:absolute inset:0 inside .sidebar)
   stays anchored to the sidebar's viewport — not pushed by the
   pane-main scroll. .sidebar keeps overflow:hidden so the off-screen
   flyout (translateX(100%)) is clipped, and stays sticky relative
   to the page. */
.sidebar{width:200px;flex-shrink:0;position:sticky;top:12px;background:white;border-radius:8px;border:1px solid var(--border);box-shadow:var(--shadow);font-size:12px;align-self:flex-start;max-height:calc(100vh - 80px);overflow:hidden}
.sb-pane-main{max-height:calc(100vh - 80px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.sb-pane-main::-webkit-scrollbar{width:6px;height:6px}
.sb-pane-main::-webkit-scrollbar-track{background:transparent}
.sb-pane-main::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.sb-pane-main::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.sb-pane-main{}
.sb-title{background:var(--navy);color:white;padding:11px 14px;font-weight:700;font-size:13px;border-radius:8px 8px 0 0}
.cat-item{border-bottom:1px solid #f0f0f0}
.cat-hdr{padding:10px 12px;font-weight:600;color:#1e3c72;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .12s;font-size:12px;min-height:40px;gap:6px;line-height:1.25}
.cat-hdr:hover{background:#f0f6ff}
/* Bolder, larger chevron — was a faint `›`; users couldn't tell categories
   were expandable (2026-05-17 Darryl feedback: "more defined arrow"). */
.cat-hdr::after{content:'›';font-size:24px;color:#1a56db;flex-shrink:0;font-weight:900;line-height:1;transition:transform .15s}
.cat-hdr.drilled::after,.cat-hdr.open::after{transform:rotate(90deg);color:#0d9488}
/* "View all" shortcut at top of each subcat panel — gives users a direct
   path to a general search results page for the category, instead of
   having to pick a specific subcategory (2026-05-17 Darryl feedback). */
.subcat-viewall{display:block;padding:8px 14px 6px;font-size:11.5px;font-weight:800;color:#92400e;background:#fef3c7;border-bottom:1px solid #fde68a;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif}
.subcat-viewall:hover{background:#fde68a;color:#78350f}
.subcat{display:none}
/* Drill-down flyout — slides in from the right when a category is clicked.
   Mirrors the two-pane UX of the header SHOP-HERE drawer. */
.sb-flyout{position:absolute;inset:0;background:white;transform:translateX(100%);transition:transform .25s ease;z-index:10;display:flex;flex-direction:column;border-radius:8px}
.sidebar.flyout-open .sb-flyout{transform:translateX(0)!important}
/* When flyout is open, mute the underlying pane-main visually so it's
   obvious the user is in a different "screen" within the rail. */
.sidebar.flyout-open .sb-pane-main{pointer-events:none}
.sb-flyout-hdr{background:var(--navy);color:white;display:flex;align-items:center;gap:10px;padding:11px 14px;font-weight:700;font-size:13px;border-radius:8px 8px 0 0;flex-shrink:0}
.sb-back-btn{background:transparent;border:0;color:white;cursor:pointer;font-size:18px;padding:0;line-height:1;font-weight:700}
.sb-flyout-list{overflow-y:auto;flex:1}
.sb-flyout-list a{display:block;padding:13px 16px;color:#1e293b;text-decoration:none;border-bottom:1px solid #f0f0f0;font-size:13px;transition:background .1s}
.sb-flyout-list a:hover{background:#f0f6ff;color:#1e40af}
.sb-flyout-list a.sb-view-all{color:#1e40af;font-weight:700;border-top:2px solid #cbd5e1;margin-top:0;background:#fafbff}
.third a:hover{color:#1e3c72;background:#e8f0fe}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:498}
.sidebar-overlay.show{display:block}

/* CONTENT */
.content{flex:1;min-width:0}
.aff-note{background:#fffbf0;border:1px solid rgba(245,158,11,.25);border-radius:5px;padding:8px 14px;font-size:11px;color:#666;margin-bottom:12px}
.res-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:6px}
.res-title{font-size:15px;font-weight:700;color:#333}
.res-title span{color:#1e3c72}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:white;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;border:1px solid var(--border);position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.13);border-color:#93c5fd}
.card-img{position:relative;background:#f9f9f9;height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.card-img img{max-height:188px;max-width:92%;object-fit:contain;transition:transform .22s}
.card:hover .card-img img{transform:scale(1.06)}
.store-lbl{position:absolute;top:7px;left:7px;background:white;border:1px solid #eee;border-radius:4px;padding:2px 7px;font-size:10px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.store-lbl.amazon{color:#FF9900}.store-lbl.ebay{color:#E53238}
.store-lbl.temu{color:#FB7701}.store-lbl.aliexpress{color:#FF4747}
.store-lbl.independent{color:#6366f1}
/* TEMU coupon badge — visible on every TEMU card, drives the click-to-copy flow */
.temu-code-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#FB7701,#E5660A);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:4px;margin:4px 0 0;cursor:pointer;border:0;box-shadow:0 1px 3px rgba(251,119,1,.25);transition:transform .12s ease,box-shadow .12s ease;align-self:flex-start}
.temu-code-badge:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(251,119,1,.4)}
.temu-code-badge.copied{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 1px 4px rgba(22,163,74,.3)}
.temu-code-badge .code-tag{background:rgba(255,255,255,.25);padding:1px 6px;border-radius:3px;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3px}
.price-range{font-size:12px;color:#64748b;font-weight:500}
.low-badge{position:absolute;top:7px;right:7px;background:linear-gradient(135deg,#059669,#047857);color:white;font-size:9px;font-weight:800;padding:3px 7px;border-radius:4px;letter-spacing:.04em;box-shadow:0 2px 6px rgba(5,150,105,.35)}
/* Stackable "pill badges" — Top Rated, Big Discount, etc. — sit BELOW the
   low-badge in the upper-right of card images. Different gradients per type
   so users distinguish at a glance. Same shape + position language as
   low-badge for visual consistency. */
.pill-badge{position:absolute;right:7px;font-size:9px;font-weight:800;padding:3px 7px;border-radius:4px;letter-spacing:.04em;color:white;box-shadow:0 2px 6px rgba(0,0,0,.2);white-space:nowrap}
.pill-rated{top:7px;background:linear-gradient(135deg,#f59e0b,#d97706)}
.pill-discount{top:7px;background:linear-gradient(135deg,#e11d48,#be123c)}
/* Clickable quick-filter pills at the top of the filter bar. Default state:
   subtle. Active state (after click): solid teal. Mirror visual badges
   on cards but they FILTER instead of just decorate. */
.quick-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;color:#475569;cursor:pointer;transition:all .12s}
.quick-pill:hover{border-color:#0d9488;color:#0d9488}
.quick-pill.active{background:#0d9488;border-color:#0d9488;color:#fff;box-shadow:0 2px 6px rgba(13,148,136,.3)}
/* Collapsible rich SEO guide. Default = full content visible. JS adds the
   .res-summary-collapsed class on load if content exceeds 3 lines. */
.res-summary-collapsed{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Per-product share button — now lives in the btn-row at card bottom
   (was previously on the image upper-left). See .btn-share-card above. */
/* When low-badge present, stack other pills below it */
.card-img:has(.low-badge) .pill-rated,
.card-img:has(.low-badge) .pill-discount{top:33px}
.card-img:has(.low-badge):has(.pill-discount) .pill-rated{top:59px}
.card-body{padding:10px;flex:1;display:flex;flex-direction:column;gap:4px}
.card-name{font-size:12px;color:#333;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;font-weight:500}
.card-rating{display:flex;align-items:center;gap:4px;font-size:11px;color:#888}
.stars{color:#f59e0b}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:4px;gap:4px;flex-wrap:wrap}
.price{font-size:17px;font-weight:900;color:#b12704;font-family:'Barlow Condensed',sans-serif}
.was{font-size:11px;color:#94a3b8;text-decoration:line-through}
.save-tag{font-size:10px;color:#059669;font-weight:700;background:#ecfdf5;padding:1px 5px;border-radius:3px}
.btn-view{display:flex;align-items:center;justify-content:center;margin:0 10px 8px;padding:6px 10px;background:var(--gold);border:none;border-radius:5px;font-size:12px;font-weight:700;color:#333;text-align:center;text-decoration:none;transition:background .15s;font-family:'Barlow',sans-serif;min-height:32px}
.btn-view:hover{background:var(--gold2)}
/* View + QR action row — View button on the left, scannable QR on the right.
   QR is generated by api.qrserver.com (free, no key) and lazy-loaded so it
   only fetches when the card scrolls near the viewport. Clicking the QR
   opens the product URL — same target as the View button. */
.btn-action-row{display:flex;gap:6px;margin:0 10px 8px;align-items:stretch}
.btn-action-row .btn-view{flex:1;margin:0;min-width:0}
.btn-qr-box{flex:0 0 80px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:3px;text-decoration:none;transition:border-color .15s,transform .1s;cursor:pointer}
.btn-qr-box:hover{border-color:#0d9488;transform:scale(1.04)}
.btn-qr-box img{display:block;width:72px;height:72px;image-rendering:pixelated}
/* Card-bottom button row — Compare + Share side-by-side, half-width each,
   thinner than before. Replaces the old full-width Compare button. */
.btn-row{display:flex;gap:6px;margin:0 10px 10px}
.btn-cmp,.btn-share-card{flex:1;padding:6px 4px;border-radius:4px;cursor:pointer;font-size:11px;font-family:'Barlow',sans-serif;transition:all .15s;min-height:30px;text-align:center;border:1px solid transparent;font-weight:600}
.btn-cmp{background:#f0f4ff;border-color:#c7d7fe;color:#3730a3}
.btn-cmp:hover{background:#e0e7ff}
.btn-cmp.added{background:#dcfce7;border-color:#86efac;color:#166534}
.btn-share-card{background:#f0fdfa;border-color:#5eead4;color:#0d9488}
.btn-share-card:hover{background:#ccfbf1}

/* FALLBACK CARDS */
.fcard{background:white;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column}
.fcard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.13);border-color:#93c5fd}
.fcard-top{padding:20px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;background:linear-gradient(135deg,#f8faff,#eff6ff)}
.fcard-icon{font-size:28px}
.fcard-store{font-size:13px;font-weight:800;color:#1e3c72}
.fcard-msg{font-size:11px;color:#64748b;text-align:center;line-height:1.4}
.btn-fb{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 12px 12px;padding:10px;background:#1e3c72;border:none;border-radius:5px;font-size:12px;font-weight:700;color:white;text-align:center;text-decoration:none;transition:background .15s;font-family:'Barlow',sans-serif;min-height:40px}
.btn-fb:hover{background:#2a5298}

/* LOADING — skeleton cards that match the real product card layout so
   the page feels populated and intentional during the fetch instead of
   showing a "Searching..." spinner that reads as broken/empty. */
.loading{text-align:center;padding:0;color:#666}
.spinner{width:38px;height:38px;border:3px solid #e2e8f0;border-top-color:#1e3c72;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:13px}
@media(max-width:768px){.skel-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
@media(max-width:480px){.skel-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
.skel-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column}
@keyframes skelShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel-shimmer{background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%);background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite;border-radius:4px}
.skel-img{height:165px;background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%);background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite}
.skel-body{padding:10px;display:flex;flex-direction:column;gap:6px}
.skel-line{height:9px}
.skel-line-100{width:100%}
.skel-line-80{width:80%}
.skel-line-60{width:60%}
.skel-line-40{width:40%}
.skel-line-30{width:30%}
.skel-row{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.skel-price{height:18px;width:42%}
.skel-save{height:13px;width:25%}
.skel-btn{height:36px;margin:4px 10px 8px;border-radius:5px}
.skel-cmp{height:30px;margin:0 10px 10px;border-radius:4px}
@media(max-width:480px){.skel-img{height:130px}.skel-btn{height:32px}}
.noresults{text-align:center;padding:60px 20px;color:#666}
.noresults h2{font-size:20px;margin-bottom:8px;color:#333}

/* COMPARE BAR */
.cmp-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:#1e3c72;color:white;padding:10px 20px;z-index:2000;align-items:center;gap:10px;flex-wrap:wrap}
.cmp-bar.show{display:flex}
.cmp-slots{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.cmp-slot{background:rgba(255,255,255,.12);border:1px dashed rgba(255,255,255,.3);border-radius:5px;padding:5px 10px;font-size:11px;min-width:110px}
.cmp-slot.full{background:rgba(255,255,255,.2);border-style:solid}
.btn-cmpnow{background:var(--gold);color:#333;border:none;padding:8px 16px;border-radius:4px;font-weight:700;font-size:12px;cursor:pointer;font-family:'Barlow',sans-serif;min-height:38px}
.btn-clr{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.3);padding:7px 12px;border-radius:4px;font-size:11px;cursor:pointer;font-family:'Barlow',sans-serif;min-height:38px}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:3000;overflow-y:auto;padding:20px;justify-content:center;align-items:flex-start}
.modal-bg.show{display:flex}
.modal{background:white;border-radius:10px;width:100%;max-width:900px;overflow:hidden}
.modal-hd{background:#1e3c72;color:white;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.modal-hd h2{font-size:15px;font-family:'Barlow Condensed',sans-serif;font-weight:700}
.modal-close{background:none;border:none;color:white;font-size:22px;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.cmptbl{width:100%;border-collapse:collapse;font-size:12px}
.cmptbl th{background:#f5f5f5;padding:10px;text-align:center;font-size:10px;color:#666;font-weight:600;text-transform:uppercase;border-bottom:2px solid #eee}
.cmptbl td{padding:10px;text-align:center;border-bottom:1px solid #f0f0f0;vertical-align:middle}
.cmptbl tr td:first-child{text-align:left;background:#fafafa;font-weight:600;color:#333}
.cmptbl img{max-height:70px;max-width:90px;object-fit:contain}
.best-p{color:#059669;font-weight:800;font-size:14px}
.cmptbl a.buybtn{display:inline-block;padding:6px 12px;background:var(--gold);color:#333;border-radius:4px;text-decoration:none;font-weight:700;font-size:11px}

/* footer{} legacy rule removed — page uses shared wsl-v2 footer */
.ft-inner{max-width:1450px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-bottom:16px}
.ft-col h3{color:var(--gold2);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.ft-col a{display:block;color:rgba(255,255,255,.5);text-decoration:none;font-size:11px;margin-bottom:5px}
.ft-col a:hover{color:white}
.ft-bot{max-width:1450px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;text-align:center;font-size:10px;color:rgba(255,255,255,.35)}

/* MOBILE */
@media(max-width:900px){
  .sidebar{display:none;position:fixed;left:0;top:0;height:100vh;z-index:499;border-radius:0;max-height:100vh}
  .sidebar.show{display:block}
  .mob-menu-btn{display:flex;align-items:center;gap:5px}
  .page-wrap{padding:10px 12px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-img{height:140px}
  .card-img img{max-height:120px}
  .fbar-inner{gap:8px}
  .fsep{display:none}
  .sort-g{margin-left:0;width:100%}
  .card-img{height:145px}
  .price{font-size:15px}
  .btn-view{min-height:44px;font-size:13px}
  .btn-cmp{min-height:40px}
}
@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .card-img{height:115px}
  .card-img img{max-height:98px}
  .card-name{font-size:11px;-webkit-line-clamp:2}
  .hdr-inner{gap:8px}
  .dept-sel{min-width:75px;max-width:85px;font-size:11px;padding:8px 5px}
}
.topbar-current{color:#fcd34d;font-weight:600;margin:0 6px;cursor:default}
.topbar-current:hover{text-decoration:none}
.geo-notice{background:#1e3c72;color:rgba(255,255,255,.55);font-size:11px;padding:0 0 4px;text-align:center;border-top:1px solid rgba(255,255,255,.05)}
.geo-notice a{color:rgba(255,255,255,.85);font-weight:500;margin-left:4px;text-decoration:none}
.geo-notice a:hover{text-decoration:underline}
@media(max-width:600px){}
.donate-pill{display:inline-flex;align-items:center;gap:6px;background:#fbbf24;color:#1f2937;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:700;text-decoration:none;font-family:'Barlow',Arial,sans-serif;white-space:nowrap;transition:background .15s;margin-left:auto}
.donate-pill:hover{background:#f59e0b}
@media(max-width:768px){.donate-pill{display:none}}
/* ── Cards / Rows view toggle ── */
.view-toggle{display:inline-flex;align-items:center;gap:7px;margin:10px 0 16px;padding:6px 12px 6px 14px;background:linear-gradient(135deg,#ecfeff,#cffafe);border:1.5px solid #67e8f9;border-radius:9px;font-family:'Barlow',Arial,sans-serif;box-shadow:0 1px 4px rgba(13,148,136,.10)}
.view-toggle-label{font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:800;color:#0e7490;text-transform:uppercase;letter-spacing:.07em;margin-right:3px}
.view-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;background:#fff;border:1px solid #cbd5e1;border-radius:6px;cursor:pointer;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;color:#475569;transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.view-btn:hover{background:#f1f5f9;border-color:#94a3b8}
.view-btn.active{background:#0d9488;border-color:#0d9488;color:#fff;box-shadow:0 1px 3px rgba(13,148,136,.25)}
.view-btn.active:hover{background:#0a7368;border-color:#0a7368}
.view-icon{font-size:14px;line-height:1}
@media (max-width:480px){
  .view-btn{padding:6px 11px;font-size:12.5px}
  .view-toggle{margin-bottom:12px}
}

/* ── Featured-partner banner (shows when query matches an Awin partner) ── */
.partner-banner{display:flex;align-items:center;gap:14px;margin:6px 0 14px;padding:14px 16px;background:linear-gradient(135deg,#ecfeff 0%,#cffafe 100%);border:1px solid #67e8f9;border-radius:10px;text-decoration:none;color:#0a1628;font-family:'Barlow',Arial,sans-serif;transition:transform .14s,box-shadow .14s,border-color .14s;position:relative;overflow:hidden}
.partner-banner:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(13,148,136,.15);border-color:#22d3ee}
.partner-banner-icon{font-size:42px;line-height:1;flex-shrink:0}
.partner-banner-body{flex:1;min-width:0}
.partner-banner-label{font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0d9488;margin-bottom:2px}
.partner-banner-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:#0a1628;line-height:1.15;margin-bottom:3px}
.partner-banner-desc{font-size:13px;color:#475569;line-height:1.4}
.partner-banner-cta{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;color:#fff;background:#0d9488;padding:8px 16px;border-radius:7px;flex-shrink:0;white-space:nowrap;letter-spacing:.02em}
.partner-banner:hover .partner-banner-cta{background:#0a7368}
@media (max-width:600px){
  .partner-banner{padding:11px 12px;gap:10px}
  .partner-banner-icon{font-size:32px}
  .partner-banner-title{font-size:16px}
  .partner-banner-desc{font-size:12px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .partner-banner-cta{padding:7px 12px;font-size:12px}
}

/* ── Related guides section (shows when articles match the search) ── */
.related-guides{margin:28px 0 8px;padding:0}
.related-guides-head{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:#0a1628;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.related-guides-head::before{content:'';display:inline-block;width:4px;height:18px;background:#0d9488;border-radius:2px}
.related-guides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.related-guide-card{display:block;padding:12px 14px;background:#fff;border:1px solid #e2e8f0;border-radius:9px;text-decoration:none;color:#0a1628;transition:transform .12s,box-shadow .12s,border-color .12s}
.related-guide-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(10,22,40,.08);border-color:#94a3b8}
.related-guide-cat{font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0d9488;margin-bottom:5px}
.related-guide-title{font-family:'Barlow',sans-serif;font-size:13.5px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Rows mode: restyle the existing card grid as a vertical stack of
   horizontal rows. No render-function changes — just CSS overrides. ── */
.grid.view-rows{display:flex !important;flex-direction:column;gap:8px;grid-template-columns:none !important}
.grid.view-rows .card{flex-direction:row;align-items:stretch;max-width:100%;min-height:120px;border-radius:8px}
.grid.view-rows .card-img{flex:0 0 130px;height:auto;min-height:120px;width:130px;background:#fafafa}
.grid.view-rows .card-img img{max-height:104px;max-width:100%}
.grid.view-rows .card-body{flex:1;padding:11px 14px 8px;gap:6px;justify-content:flex-start}
.grid.view-rows .card-name{font-size:14px;-webkit-line-clamp:2;font-weight:600}
.grid.view-rows .card-rating{font-size:12px}
.grid.view-rows .price-row{align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:auto}
/* Rows view: orange button and Share sit at NATURAL height, centered
   vertically. QR is a fixed-size box (also centered) so it doesn't tower
   over a tiny pill button. Card has rigid 130px height so every row in
   the stack is the same vertical size — no jitter from variable body
   content (TEMU Code badge, no-price CTA text). */
.grid.view-rows .card{min-height:130px;max-height:130px;overflow:hidden}
.grid.view-rows .card-body{justify-content:center}
/* Redundant in rows view — the orange Shop button on the right already
   does the same job; hiding the body text-CTA + TEMU code badge keeps
   every row at the same height regardless of merchant. */
.grid.view-rows .price-cta{display:none}
.grid.view-rows .temu-code-badge{display:none}
.grid.view-rows .price-row:empty{display:none}
.grid.view-rows .btn-view{flex:0 0 auto;align-self:center;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:8px 0;width:140px;height:44px;white-space:nowrap;font-size:12px;order:2;margin:0 8px}
.grid.view-rows .btn-action-row{display:contents}
.grid.view-rows .btn-qr-box{display:flex;flex:0 0 80px;width:80px;height:80px;align-self:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:4px;margin:0;order:1}
.grid.view-rows .btn-qr-box img{width:68px;height:68px}
.grid.view-rows .btn-row{align-self:center;margin:0 10px 0 0;order:3}
.grid.view-rows .btn-share-card{height:44px;padding:8px 14px;border-radius:6px}
.grid.view-rows .btn-cmp{display:none}
.grid.view-rows .store-lbl{font-size:9.5px}
.grid.view-rows .low-badge{font-size:9.5px}
@media (max-width:600px){
  .grid.view-rows .card{min-height:108px;max-height:108px}
  .grid.view-rows .card-img{flex:0 0 92px;width:92px;min-height:100px}
  .grid.view-rows .card-img img{max-height:80px}
  .grid.view-rows .card-name{font-size:13px}
  .grid.view-rows .card-body{padding:9px 10px 6px}
  .grid.view-rows .btn-view{width:100px;height:36px;padding:0 8px;font-size:11px;margin:0 6px}
  .grid.view-rows .btn-qr-box{flex:0 0 60px;width:60px;height:60px;padding:3px}
  .grid.view-rows .btn-qr-box img{width:50px;height:50px}
  .grid.view-rows .btn-share-card{height:36px;padding:6px 10px;font-size:11px}
}

/* Carousel view (added 2026-05-18 per Darryl). Horizontal scrolling
   strip — like the homepage Popular Picks row. Cards keep their
   normal size but flow left-to-right with snap-scroll. Works with
   trackpad swipe + arrow keys + thumb on mobile. */
.grid.view-carousel{display:flex !important;flex-direction:row;gap:12px;grid-template-columns:none !important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 14px;-webkit-overflow-scrolling:touch}
.grid.view-carousel .card{flex:0 0 240px;scroll-snap-align:start;max-width:240px}
.grid.view-carousel .card-img{aspect-ratio:1/1;height:200px}
.grid.view-carousel .card-name{-webkit-line-clamp:2}
/* Visible scrollbar so users know they can scroll */
.grid.view-carousel::-webkit-scrollbar{height:8px}
.grid.view-carousel::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}
.grid.view-carousel::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:4px}
.grid.view-carousel::-webkit-scrollbar-thumb:hover{background:#64748b}
@media (max-width:600px){
  .grid.view-carousel .card{flex:0 0 180px;max-width:180px}
  .grid.view-carousel .card-img{height:150px}
}

/* "Like what you see?" donate card — lives in the footer Wikishopline column */
.donate-card{display:block;background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:1.5px solid #fbbf24;border-radius:10px;padding:9px 12px 7px;text-align:center;box-shadow:0 2px 8px rgba(245,158,11,.18);margin:0}
.donate-card .donate-prompt{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:#92400e;margin-bottom:5px;letter-spacing:.04em;line-height:1.3}
.donate-card form{margin:0!important;line-height:0}
.donate-card input[type=image]{vertical-align:middle}
.donate-card a, .donate-card img{display:inline}