/*
Theme Name: Affiliate Grid Pro
Theme URI: https://example.com/affiliate-grid-pro
Author: Affiliate Grid Pro
Author URI: https://example.com
Description: Professional affiliate storefront — fully customizable, Pinterest-ready, ultra fast. Ships with product CPT, click tracking, JSON-LD schema, XML sitemap, CSV import, and full admin customization.
Version: 22.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliate-grid-pro
Tags: affiliate, e-commerce, portfolio, one-column, two-columns, grid-layout, custom-colors, custom-logo, custom-menu, custom-background, featured-images, full-width-template, theme-options, threaded-comments, translation-ready
*/

/* Google Fonts are loaded dynamically in header.php based on user-chosen fonts — do NOT @import here. */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;font-family:inherit;border:none}
button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ── CSS VARIABLES (defaults — overridden by header.php inline <style>) ── */
:root{
    --bg:#0a0a0f;--bg-rgb:10,10,15;--bg2:#111118;
    --card:#15151e;--card-rgb:21,21,30;--card-h:#1c1c2a;
    --border:rgba(255,255,255,.07);--border-h:rgba(var(--color-accent-rgb),.28);
    --text:#f0f0f5;--text2:#c0c0d8;--muted:#6a6a8a;
    --color-accent:#6c63ff;--color-accent-rgb:108,99,255;
    --color-accent2:#ff6584;--color-accent2-rgb:255,101,132;
    --color-buy:#ff9900;--color-buy-txt:#000;
    --shadow-sm:0 2px 8px rgba(0,0,0,.28);
    --shadow-md:0 6px 24px rgba(0,0,0,.4);
    --r-sm:4px;--r-md:10px;--r-lg:14px;--r-xl:20px;
    --t:.17s ease;
    /* --font and --font-d are set dynamically in header.php from saved settings */
}
/* Anti-FOUC: pre-light on html prevents flash; light-mode on body for JS toggle */
html.pre-light,body.light-mode{
    --bg:#f2f2f7;--bg-rgb:242,242,247;--card:#fff;--card-rgb:255,255,255;--card-h:#f7f7fd;
    --border:rgba(0,0,0,.08);--border-h:rgba(var(--color-accent-rgb),.22);
    --text:#0f0f1a;--text2:#3a3a5a;--muted:#7070a0;
    --shadow-sm:0 2px 8px rgba(0,0,0,.07);--shadow-md:0 6px 24px rgba(0,0,0,.1);
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background var(--t),color var(--t)}
body.light-mode .site-topbar,.light-mode .filter-bar-wrap::after,html.pre-light .site-topbar,html.pre-light .filter-bar-wrap::after{background:none}

/* ── LAYOUT ── */
.site-wrapper{max-width:1100px;margin:0 auto;padding:0 16px 100px}

/* ── TOP BAR ── */
.site-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0 0}
.topbar-left{display:flex;align-items:center;gap:10px}
.icon-btn{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--muted);transition:all var(--t);position:relative}
.icon-btn:hover{border-color:var(--color-accent);color:var(--text)}
.fav-count{position:absolute;top:-5px;right:-5px;background:var(--color-accent2);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg)}
.theme-toggle{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 16px;font-size:12px;font-weight:600;color:var(--muted);transition:all var(--t)}
.theme-toggle:hover{border-color:var(--color-accent);color:var(--text)}

/* ── PROFILE ── */
.profile-header{text-align:center;padding:24px 20px 18px}
.profile-avatar-wrap{display:inline-block;margin-bottom:12px}
.profile-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--color-accent);box-shadow:0 0 0 6px rgba(var(--color-accent-rgb),.12);display:block}
.profile-avatar-placeholder{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),var(--color-accent2));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:34px;font-weight:800;color:#fff;border:3px solid var(--color-accent);box-shadow:0 0 0 6px rgba(var(--color-accent-rgb),.12)}
.profile-name{font-family:var(--font-d);font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:5px}
.profile-bio{font-size:13px;color:var(--muted);max-width:340px;margin:0 auto 12px}
.profile-socials{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.social-icon{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.social-icon svg,.social-icon span{transition:color var(--t)}
/* Brand mode (default): each icon keeps its own color, hover lifts */
body.si-brand .social-icon:hover{transform:scale(1.12);box-shadow:0 4px 12px rgba(0,0,0,.25)}
/* Accent mode: all icons use theme accent color */
body.si-accent .social-icon svg{color:var(--color-accent)!important;fill:var(--color-accent)!important}
body.si-accent .social-icon:hover{background:var(--color-accent);border-color:var(--color-accent);transform:scale(1.12)}
body.si-accent .social-icon:hover svg{color:#fff!important;fill:#fff!important}
/* White/muted mode: neutral icons, glow on hover */
body.si-white .social-icon svg{color:var(--muted)!important;fill:var(--muted)!important}
body.si-white .social-icon:hover{background:var(--color-accent);border-color:var(--color-accent);transform:scale(1.12)}
body.si-white .social-icon:hover svg{color:#fff!important;fill:#fff!important}

/* Newsletter icon button - inline with social icons */
.newsletter-icon-btn{
    cursor:pointer;
    font-family:inherit;
}
/* Newsletter uses SVG icon to match social media icons exactly */
.newsletter-icon-btn svg{
    width:18px;
    height:18px;
    transition:color var(--t),fill var(--t);
}
/* Brand mode: newsletter icon in muted color like other socials */
body.si-brand .newsletter-icon-btn svg{
    fill:var(--muted);
}
body.si-brand .newsletter-icon-btn:hover svg{
    fill:var(--color-accent);
}
/* Accent mode: newsletter matches accent style */
body.si-accent .newsletter-icon-btn svg{
    fill:var(--color-accent);
}
body.si-accent .newsletter-icon-btn:hover{
    background:var(--color-accent);
    border-color:var(--color-accent);
}
body.si-accent .newsletter-icon-btn:hover svg{
    fill:#fff;
}
/* White mode: newsletter uses muted color */
body.si-white .newsletter-icon-btn svg{
    fill:var(--muted);
}
body.si-white .newsletter-icon-btn:hover{
    background:var(--color-accent);
    border-color:var(--color-accent);
}
body.si-white .newsletter-icon-btn:hover svg{
    fill:#fff;
}

/* ── BANNERS ── */
.promo-banners{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.promo-banner{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 16px;transition:all var(--t)}
.promo-banner:hover{background:var(--card-h);border-color:var(--border-h);transform:translateY(-1px)}
.promo-banner-text strong{display:block;font-size:13px;font-weight:600}
.promo-banner-text span{font-size:11px;color:var(--muted)}
.promo-banner-arrow{margin-left:auto;opacity:.35}

/* ── SEARCH + SORT — single row ── */
.search-sort-row{display:flex;gap:9px;align-items:center;margin-bottom:12px}
.search-wrap{flex:1;min-width:0;position:relative}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
#product-search{width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);color:var(--text);font-family:var(--font);font-size:14px;padding:12px 36px 12px 42px;outline:none;transition:border-color var(--t),box-shadow var(--t)}
#product-search:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(var(--color-accent-rgb),.12)}
#product-search::placeholder{color:var(--muted)}
.search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px 6px;border-radius:4px;transition:color var(--t)}
.search-clear:hover{color:var(--text)}
.sort-select{appearance:none;flex-shrink:0;width:90px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;border:1px solid var(--border);border-radius:var(--r-xl);color:var(--text);font-family:var(--font);font-size:12px;font-weight:500;padding:12px 24px 12px 10px;outline:none;cursor:pointer;transition:border-color var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sort-select:focus{border-color:var(--color-accent)}

/* ── FILTER BAR — single scrollable row ── */
.filter-bar-wrap{position:relative;margin-bottom:16px}
.filter-bar-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:36px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none}
.filter-bar{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;cursor:grab;user-select:none}
.filter-bar:active{cursor:grabbing}
.filter-bar::-webkit-scrollbar{display:none}
.filter-btn{flex-shrink:0;scroll-snap-align:start;background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:6px 15px;font-size:12px;font-weight:600;font-family:var(--font);white-space:nowrap;transition:all var(--t);cursor:pointer}
.filter-btn:hover{border-color:var(--color-accent);color:var(--text)}
.filter-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.fcount{opacity:.42;font-size:10px;margin-left:2px}

/* ── SECTION DIVIDER ── */
.section-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.section-divider span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ── VIDEO BANNER ── */
/* ── VIDEO SEARCH PANEL ── */
#video-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;margin-bottom:20px}
#video-panel .fav-panel-header h3 svg{color:var(--color-accent)}
#video-panel .fav-panel-header h3 strong{color:var(--color-accent)}

/* ── FAVOURITES PANEL ── */
#fav-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;margin-bottom:20px}
.fav-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.fav-panel-header h3{font-size:15px;font-weight:700}
.fav-panel-header button{background:none;border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);cursor:pointer;transition:all var(--t);font-family:var(--font)}
.fav-panel-header button:hover{border-color:var(--color-accent);color:var(--text)}

/* ── PRODUCT GRID — 6 columns ── */
.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}

/* ── PRODUCT CARD — minimal ── */
.product-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-h)}
.product-card.hidden{display:none!important}

/* Favourite button */
.fav-btn{position:absolute;top:7px;right:7px;z-index:10;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.45);border:none;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);backdrop-filter:blur(6px);transition:all var(--t);cursor:pointer;padding:0}
.fav-btn:hover{background:rgba(0,0,0,.65);color:#fff;transform:scale(1.1)}
.fav-btn.fav-active{color:#ff4d6d;background:rgba(255,77,109,.18)}
.fav-btn.fav-active svg{fill:#ff4d6d;stroke:#ff4d6d}
.fav-btn svg{transition:all var(--t)}
body.light-mode .fav-btn,html.pre-light .fav-btn{background:rgba(255,255,255,.75);color:var(--muted)}
body.light-mode .fav-btn:hover,html.pre-light .fav-btn:hover{background:rgba(255,255,255,.95)}

/* Image */
.agp-card-link{display:block}
.product-image-wrap{background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;position:relative}
.product-image-wrap img{width:100%;height:100%;object-fit:contain;transition:transform .28s ease}
.product-card:hover .product-image-wrap img{transform:scale(1.06)}
.no-img-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#ccc}

/* Badge */
.product-badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.07em;text-transform:uppercase;box-shadow:var(--shadow-sm);z-index:1}
.product-badge.amazon{background:#ff9900;color:#000}
.product-badge.top{background:#f59e0b;color:#000}
.product-badge.new{background:#22c55e;color:#fff}
.product-badge.best{background:var(--color-accent);color:#fff}

/* Title — minimal */
.product-info{padding:7px 8px 5px;flex:1}
.product-title{font-size:10.5px;font-weight:500;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-price{font-size:11px;font-weight:700;color:var(--color-accent);margin-top:3px}

/* ── CARD ACTION BUTTONS ── */
.card-actions{display:flex;gap:5px;padding:6px 7px 8px}
.card-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border-radius:6px;font-size:10.5px;font-weight:600;font-family:var(--font);transition:all var(--t);white-space:nowrap;cursor:pointer;text-align:center}
.card-btn-info{background:var(--card-h);color:var(--muted);border:1px solid var(--border)}
.card-btn-info:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}

/* Smart affiliate button — changes color per platform */
.card-btn-affiliate{color:#000;font-weight:700;border:none}
.btn-amazon{background:#ff9900}
.btn-amazon:hover{background:#e88a00}
.btn-etsy{background:#f1641e;color:#fff}
.btn-etsy:hover{background:#d4551a;color:#fff}
.btn-fiverr{background:#1dbf73;color:#fff}
.btn-fiverr:hover{background:#18a863;color:#fff}
.btn-walmart{background:#0071ce;color:#fff}
.btn-walmart:hover{background:#005fa8;color:#fff}
.btn-ebay{background:#e53238;color:#fff}
.btn-ebay:hover{background:#c42b30;color:#fff}
.btn-target{background:#cc0000;color:#fff}
.btn-target:hover{background:#aa0000;color:#fff}
.btn-ali{background:#e43225;color:#fff}
.btn-ali:hover{background:#c42b1f;color:#fff}
.btn-generic{background:var(--color-accent);color:#fff}
.btn-generic:hover{background:rgba(var(--color-accent-rgb),.85);color:#fff}

/* ── NO RESULTS ── */
.no-products-msg,.no-results-msg{text-align:center;padding:50px 20px;color:var(--muted)}
.no-products-msg h3,.no-results-msg h3{font-size:17px;margin-bottom:7px;color:var(--text2)}

/* ── FOOTER ── */
.site-footer{margin-top:44px;padding:24px 20px 18px;border-top:1px solid var(--border)}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 18px;margin-bottom:14px}
.footer-nav a{font-size:12px;color:var(--muted);transition:color var(--t)}
.footer-nav a:hover{color:var(--color-accent)}
.footer-disclaimer{text-align:center;font-size:11px;color:var(--muted);line-height:1.6}

/* ── SCROLL TO TOP ── */
#scrollTopBtn{position:fixed;bottom:24px;right:24px;z-index:999;width:44px;height:44px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(var(--color-accent-rgb),.45);opacity:0;transform:translateY(12px);transition:opacity .22s,transform .22s;pointer-events:none;border:none;cursor:pointer}
#scrollTopBtn.visible{opacity:1;transform:translateY(0);pointer-events:auto}
#scrollTopBtn:hover{background:rgba(var(--color-accent-rgb),.85);transform:translateY(-2px)}

/* ── RESPONSIVE ── */
@media(max-width:900px){.product-grid{grid-template-columns:repeat(4,1fr);gap:8px}}
@media(max-width:600px){
    .product-grid{grid-template-columns:repeat(3,1fr);gap:7px}
    .search-sort-row{flex-wrap:nowrap;gap:6px}
    .search-wrap{flex:1;min-width:0}
    #product-search{padding:10px 14px 10px 38px;font-size:13px}
    .sort-select{
        width:40px;flex-shrink:0;padding:10px 4px;
        font-size:0;                          /* hide the "Sort" text */
        background-position:center;           /* center the arrow icon */
        background-size:14px 14px;
        text-align:center;color:transparent   /* hide text of any selected option */
    }
    .sort-select option{font-size:13px;color:var(--text)}
    .site-wrapper{padding:0 10px 80px}
}
@media(max-width:380px){.product-grid{grid-template-columns:repeat(2,1fr);gap:6px}}

/* ── CATEGORY PAGE ── */
.agp-back-btn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px 14px;transition:all var(--t)}
.agp-back-btn:hover{color:var(--color-accent);border-color:var(--color-accent)}

/* ── AD SYSTEM ────────────────────────────────────────── */

/* v20: Sidebars are FLOATING, positioned absolutely to the left/right of the
   fixed-width .site-wrapper content. The product grid is never compressed —
   sidebars only appear on screens wide enough to fit them alongside the main
   column. Mobile/tablet: sidebars hidden, inline ads only.
   v20: Sidebars align top with the search bar area (below promo banners),
   not the very top of the page. */

.agp-page-with-sidebar {
    position: relative;
}

.agp-sidebar {
    display: none; /* hidden by default — shown only when there's room */
}

.agp-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 20px;
}

/* ── AD / MONETIZATION SLOTS ────────────────────────────── */

.agp-ad-slot {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    clear: both;
}

.agp-ad-sticky {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.agp-ad-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .7;
    display: block;
    text-align: center;
    margin-bottom: 4px;
}

.agp-ad-unit {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-height: 300px;
    position: relative;
}

.agp-ad-unit > *,
.agp-ad-unit iframe,
.agp-ad-unit img,
.agp-ad-unit ins {
    max-width: 100% !important;
}

.agp-ad-unit iframe {
    min-height: 300px;
    border: 0;
}

.agp-ad-unit script {
    display: block !important;
}

/* Ensure AdSense responsive units display properly */
.agp-ad-unit ins.adsbygoogle {
    display: block !important;
    min-height: 90px;
}

/* Floating sidebars — only appear when there's real empty room alongside the
   1100px content column. Breakpoint: viewport ≥ 1440px.
   top: 320px pushes the sidebar down to align with the search bar area. */
@media(min-width: 1440px) {
    .agp-sidebar {
        display: block;
        position: absolute;
        top: 320px;              /* aligns with search/sort row, below promo banners */
        width: 160px;
    }
    .agp-sidebar-left  { left: calc(50% - 550px - 180px); }
    .agp-sidebar-right { right: calc(50% - 550px - 180px); }
}

/* Extra-wide screens — more breathing room */
@media(min-width: 1680px) {
    .agp-sidebar { width: 200px; }
    .agp-sidebar-left  { left: calc(50% - 550px - 230px); }
    .agp-sidebar-right { right: calc(50% - 550px - 230px); }
}

/* ── v20: LOCKED PLACEHOLDER CARD ──────────────────────── */
.agp-locked-card{
    cursor:pointer;
    background:repeating-linear-gradient(45deg,rgba(var(--color-accent-rgb,124,58,237),.04) 0 10px,transparent 10px 20px),var(--card);
    border-style:dashed!important;
    border-color:rgba(var(--color-accent-rgb,124,58,237),.4)!important;
    transition:transform var(--t),border-color var(--t)
}
.agp-locked-card:hover{
    transform:translateY(-2px);
    border-color:var(--color-accent)!important;
    box-shadow:0 8px 24px rgba(var(--color-accent-rgb,124,58,237),.15)
}
.agp-locked-img{
    background:linear-gradient(135deg,rgba(var(--color-accent-rgb,124,58,237),.08),rgba(var(--color-accent-rgb,124,58,237),.18))!important;
    display:flex!important;align-items:center;justify-content:center
}
.agp-locked-overlay{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:var(--color-accent);text-align:center
}

/* Custom badge already picks up .product-badge base styles — no extra CSS needed. */

/* ── v21: NEWSLETTER — BANNER-STYLE CARD (lives in .promo-banners row) ──
   Reuses .promo-banner base styles; only adds the button + icon treatment. */
.promo-newsletter{
    /* Same visual footprint as other promo banners, no underline/link styles */
    background:var(--card);
    border:1px solid var(--border);
    cursor:pointer;
    text-align:left;
    font:inherit;
    color:inherit;
}
.promo-newsletter:hover{border-color:var(--color-accent)}
.promo-newsletter-icon{
    background:var(--color-accent)!important;color:#fff!important;
    font-size:20px!important;line-height:1!important
}
.promo-newsletter-btn{
    margin-left:auto;flex-shrink:0;
    padding:7px 14px;border-radius:999px;
    background:var(--color-accent);color:#fff;
    font-size:12px;font-weight:700;white-space:nowrap;
    transition:filter var(--t),transform var(--t)
}
.promo-newsletter:hover .promo-newsletter-btn{filter:brightness(1.08);transform:translateY(-1px)}

/* ── v21: NEWSLETTER MODAL ──────────────────────────────── */
.agp-modal{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    -webkit-overflow-scrolling:touch;
}
.agp-modal[hidden]{display:none}
.agp-modal-backdrop{
    position:absolute;inset:0;
    background:rgba(15,23,42,.65);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    animation:agpFadeIn .2s ease-out;
}
.agp-modal-card{
    position:relative;
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:32px 28px 26px;
    max-width:440px;width:100%;
    max-height:90vh;overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    animation:agpSlideUp .25s ease-out;
    -webkit-overflow-scrolling:touch;
}
/* Mobile modal fixes */
@media(max-width:520px){
    .agp-modal{padding:0;align-items:flex-end}
    .agp-modal-card{
        max-height:95vh;
        border-radius:var(--r-lg) var(--r-lg) 0 0;
        padding:24px 20px 20px;
        animation:agpSlideUpMobile .3s ease-out;
    }
}
@keyframes agpSlideUpMobile{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
}
.agp-modal-close{
    position:absolute;top:12px;right:12px;
    width:32px;height:32px;border-radius:999px;
    border:none;background:transparent;color:var(--muted);
    font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background var(--t),color var(--t)
}
.agp-modal-close:hover{background:var(--border);color:var(--text)}
.agp-modal-card h2{
    font-family:var(--font-d);font-size:20px;font-weight:800;
    margin:0 0 6px;letter-spacing:-.2px;color:var(--text);
}
.agp-modal-desc{
    font-size:13px;color:var(--text2);margin:0 0 18px;line-height:1.55;
}
.agp-modal-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.agp-modal-field{display:flex;flex-direction:column;gap:6px}
.agp-modal-field > span,
.agp-modal-field > legend{
    font-size:12px;font-weight:700;color:var(--text);
    text-transform:uppercase;letter-spacing:.05em;
    padding:0;
}
.agp-modal-field .req{color:#dc2626;margin-left:2px}
.agp-modal-field input[type=text],
.agp-modal-field input[type=email],
.agp-modal-field textarea{
    width:100%;padding:11px 14px;
    border:1px solid var(--border);border-radius:var(--r-md);
    font-size:14px;background:var(--bg);color:var(--text);
    font-family:inherit;
    transition:border-color var(--t),box-shadow var(--t);
    box-sizing:border-box;
}
.agp-modal-field textarea{resize:vertical;min-height:70px}
.agp-modal-field input:focus,
.agp-modal-field textarea:focus{
    outline:none;border-color:var(--color-accent);
    box-shadow:0 0 0 3px rgba(var(--color-accent-rgb,124,58,237),.15)
}
.agp-cadence{
    border:1px solid var(--border);border-radius:var(--r-md);
    padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin:0;
}
.agp-cadence label{
    display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);
    padding:6px 10px;border-radius:6px;transition:background var(--t);
}
.agp-cadence label:hover{background:rgba(var(--color-accent-rgb,124,58,237),.06)}
.agp-cadence input[type=radio]{accent-color:var(--color-accent);margin:0;width:16px;height:16px}
.agp-cadence input[type=radio]:checked + span{font-weight:700;color:var(--color-accent)}

.agp-modal-submit{
    margin-top:6px;padding:13px;border:none;border-radius:var(--r-md);
    background:var(--color-accent);color:#fff;font-weight:700;font-size:14px;
    cursor:pointer;transition:filter var(--t),transform var(--t)
}
.agp-modal-submit:hover{filter:brightness(1.08);transform:translateY(-1px)}
.agp-modal-submit:active{transform:translateY(0)}
.agp-modal-msg{min-height:18px;font-size:13px;text-align:center}
.agp-modal-msg.success{color:#16a34a;font-weight:600}
.agp-modal-msg.error{color:#dc2626}

@keyframes agpFadeIn{from{opacity:0}to{opacity:1}}
@keyframes agpSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:480px){
    .agp-modal{padding:10px}
    .agp-modal-card{padding:26px 20px 20px}
    .agp-modal-card h2{font-size:18px}
    .promo-newsletter-btn{padding:6px 11px;font-size:11px}
}

/* ── v20.1: VIDEO FILTER PINS MATCHES TO TOP ──────────────
   Uses grid auto-flow + order. Matching cards get order:-1 so they float to the
   front without hiding the rest. Non-matching cards stay visible, indexable,
   and clickable — crucial for SEO. 
   
   NOTE: Video search now uses a dedicated panel, so highlighting is disabled. */
.product-card.agp-video-match{
    /* Highlighting removed - products now shown in video panel */
}
/* Video match badge removed - not needed in panel view */

/* Subtle divider between matches and the rest */
#productGrid.has-video-match{position:relative}

/* ── v22: NEWSLETTER STICKY FAB (bottom-right) ────────────── */
/* ── NEWSLETTER FAB STYLES (DEPRECATED - Newsletter now inline with social icons) ── */
/* 
.agp-newsletter-fab{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:998;
    display:flex;align-items:center;gap:8px;
    padding:12px 18px 12px 14px;
    border:none;border-radius:999px;
    background:var(--color-accent);
    color:#fff;
    font-family:inherit;font-size:13px;font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(var(--color-accent-rgb,124,58,237),.4),
               0 2px 6px rgba(0,0,0,.1);
    transition:transform var(--t),box-shadow var(--t),filter var(--t);
    animation:agpFabIn .5s cubic-bezier(.34,1.56,.64,1) .8s backwards;
}
.agp-newsletter-fab:hover{
    transform:translateY(-3px) scale(1.02);
    filter:brightness(1.05);
    box-shadow:0 12px 30px rgba(var(--color-accent-rgb,124,58,237),.5),
               0 3px 8px rgba(0,0,0,.12);
}
.agp-newsletter-fab:active{transform:translateY(-1px) scale(.99)}
.agp-newsletter-fab-icon{
    font-size:18px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:999px;
    background:rgba(255,255,255,.2);
    flex-shrink:0;
}
.agp-newsletter-fab-label{white-space:nowrap}
@keyframes agpFabIn{
    from{opacity:0;transform:translateY(20px) scale(.8)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:520px){
    .agp-newsletter-fab{right:14px;bottom:14px;padding:11px 16px 11px 12px;font-size:12px}
    .agp-newsletter-fab-icon{width:22px;height:22px;font-size:15px}
}
*/
/* Scroll-to-top button positioning (FAB removed, no adjustment needed) */
/*
body:has(.agp-newsletter-fab) #scrollTopBtn{
    bottom:74px;
}
*/

/* ── v22: NEWS TICKER ─────────────────────────────────────── */
.agp-news-ticker{
    --agp-ticker-bg:#111827;
    --agp-ticker-fg:#ffffff;
    --agp-ticker-duration:40s;
    background:var(--agp-ticker-bg);
    color:var(--agp-ticker-fg);
    padding:10px 0;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:14px;
    margin:14px 0 18px;
    border-radius:var(--r-md);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    font-size:13px;font-weight:500;
    position:relative;
}
.agp-news-ticker-label{
    background:#dc2626;color:#fff;
    padding:4px 12px;
    border-radius:999px;
    font-size:10px;font-weight:800;
    letter-spacing:.08em;
    margin-left:14px;
    display:inline-flex;align-items:center;gap:5px;
    flex-shrink:0;
    white-space:nowrap;
}
.agp-news-ticker-track-wrap{
    flex:1;
    overflow:hidden;
    position:relative;
    /* Fade edges */
    mask-image:linear-gradient(to right,transparent 0,black 30px,black calc(100% - 30px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,black 30px,black calc(100% - 30px),transparent 100%);
}
.agp-news-ticker-track{
    display:inline-flex;
    gap:36px;
    padding-left:16px;
    white-space:nowrap;
    animation:agpNewsScroll var(--agp-ticker-duration) linear infinite;
}
.agp-news-ticker-track:hover{animation-play-state:paused}
.agp-news-item{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--agp-ticker-fg);
    text-decoration:none;
    flex-shrink:0;
}
a.agp-news-item:hover{text-decoration:underline;text-underline-offset:3px}
.agp-news-emoji{font-size:14px;line-height:1}
@keyframes agpNewsScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}
@media(max-width:600px){
    .agp-news-ticker{margin:10px 0 14px;font-size:12px}
    .agp-news-ticker-label{font-size:9px;padding:3px 9px;margin-left:10px}
    .agp-news-ticker-track{gap:28px}
}
/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
    .agp-news-ticker-track{animation-duration:0s;transform:none}
    .agp-newsletter-fab{animation:none}
}