/* ff-chrome.css  --  Fairfields sitewide Amazon chrome (STAGING electro-child)
   Task card: s5-sitewide-chrome-001

   Ports the approved homepage chrome (generate_homepage.py build_css: header,
   subnav, notice, footer tokens) into a site-wide layer for the header.php /
   footer.php overrides, PLUS hard light-mode enforcement that neutralises the
   Electro dark skin on category / single / cart / checkout / account / content
   pages and hides the Electro Dark/Light switcher.

   SCOPING RULE: design-token vars + link/button resets are scoped to the chrome
   containers (.hdr/.subnav/.notice/.foot/.foot2/.totop) or to body.ff-chrome, so
   they never restyle WooCommerce product content (that is owned by ff-category.css
   / ff-pdp.css). The GLOBAL rules are limited to the intentional light-ground +
   dark-mode kill. Icon fonts are preserved (font-family is set on body WITHOUT
   !important, so .fa/.icon-* element rules still win). */

/* ============================== design tokens (scoped) ==================== */
body.ff-chrome{
  --ink:#0F1111; --link:#007185; --linkH:#C7511F; --bg:#ffffff;
  --hdr:#131921; --sub:#232F3E; --foot2:#131A22; --amber:#FEBD69; --amberD:#F3A847;
  --line:#D5D9D9; --muted:#565959; --red:#B12704;
  --font:"Amazon Ember","Amazon Ember Display",Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/* ============================== light-mode enforcement =================== */
/* Intentional + global: force the white Amazon ground and dark text, killing the
   Electro dark skin. Contains the literal --bg:#ffffff + background:var(--bg)
   !important markers used by the QA white-ground check. */
html,body{background:var(--bg,#ffffff)!important;color:var(--ink,#0F1111)!important;color-scheme:light!important}
body.ff-chrome{font-family:var(--font);font-size:14px;line-height:1.35;-webkit-font-smoothing:antialiased}
/* main storefront content wrappers back to white (neutralise dark surfaces) */
body.ff-chrome #page,
body.ff-chrome #content,
body.ff-chrome .ff-content,
body.ff-chrome .site-content,
body.ff-chrome .content-area,
body.ff-chrome #primary,
body.ff-chrome #main,
body.ff-chrome .woocommerce,
body.ff-chrome .woocommerce-page,
body.ff-chrome .col-full{background:var(--bg,#ffffff)!important}
/* any lingering dark-skin body variant -> white ground, dark text */
body[class*="dark-skin"],body[class*="dark_skin"],body.dark{background:#ffffff!important;color:#0F1111!important}

/* ============================== hide Electro skin switcher =============== */
/* The visible Dark/Light switcher is already gone because our header/footer
   replace Electro's (it is rendered inline there, not on wp_footer). These are a
   belt-and-suspenders backstop for any JS-injected / customizer variant. */
.electro-dark-skin-switcher,.electro-skin-switcher,.electro-color-scheme-switcher,
.electro-dark-mode-switcher,.skin-switcher,.dark-skin-toggle,.color-scheme-switcher,
[class*="skin-switch"],[class*="skin-tools"],#electro-skin-tools,#skin-tools,
.electro-skin-tools,.electro-dark-skin{display:none!important}

/* ============================== chrome link/button resets (scoped) ======= */
.hdr a,.subnav a,.notice a,.foot a,.foot2 a,.totop{color:inherit;text-decoration:none}
.hdr *,.subnav *,.notice *,.foot *,.foot2 *{box-sizing:border-box}
.hdr button,.subnav button{font-family:inherit;cursor:pointer;font-size:inherit}
.hdr .logo,.foot2__logo,.hdr__row,.subnav__row{font-family:var(--font)}

/* ============================== HEADER (search-dominant) ================= */
.hdr{background:var(--hdr);color:#fff}
.hdr__row{display:flex;align-items:center;gap:4px;max-width:1500px;margin:0 auto;padding:6px 14px}
.hbox{display:flex;align-items:center;padding:8px 9px;border:1px solid transparent;border-radius:2px;white-space:nowrap;color:#fff}
.hbox:hover{border-color:#fff}
.logo{font-weight:800;font-size:20px;letter-spacing:.2px;padding:6px 8px 2px;color:#fff}
.loc{display:flex;flex-direction:column;line-height:1.1}
.loc__s{font-size:12px;color:#ccc}
.loc__b{font-weight:700;font-size:14px}
.loc__pin{margin-right:4px;font-size:15px}
.search{display:flex;flex:1 1 auto;min-width:120px;height:42px;border-radius:4px;overflow:hidden;margin:0 6px;background:#fff}
.search:focus-within{outline:3px solid var(--amberD);border-radius:4px}
.search__cat{border:0;background:#E6E6E6;color:#111;font-size:12px;padding:0 8px;max-width:170px}
.search__in{flex:1 1 auto;border:0;padding:0 12px;font-size:15px;min-width:40px;color:#111;background:#fff}
.search__btn{border:0;background:var(--amber);width:46px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#111}
.search__btn:hover{background:var(--amberD)}
.hitem{display:flex;flex-direction:column;line-height:1.15}
.hitem__s{font-size:12px;color:#e6e6e6}
.hitem__b{font-weight:700;font-size:14px}
.basket{display:flex;align-items:flex-end;font-weight:700;color:#fff}
.basket__i{font-size:22px;margin-right:2px}

/* ============================== SUBNAV =================================== */
.subnav{background:var(--sub);color:#fff}
.subnav__row{display:flex;align-items:center;gap:2px;max-width:1500px;margin:0 auto;padding:4px 10px}
.subnav__scroll{display:flex;align-items:center;gap:2px;overflow-x:auto;flex:1 1 auto}
.subnav__scroll::-webkit-scrollbar{height:0}
.subnav__link,.allbtn{color:#fff;font-size:14px;padding:6px 9px;border:1px solid transparent;border-radius:2px;white-space:nowrap}
.subnav__link:hover,.allbtn:hover{border-color:#fff}
.allbtn{display:flex;align-items:center;gap:6px;font-weight:700;background:none}
.allbtn__bars{font-size:16px;line-height:1}
.subnav__all{position:relative}
.mega{display:none;position:absolute;top:100%;left:0;z-index:400;background:#fff;color:var(--ink);min-width:260px;padding:10px 0;box-shadow:0 2px 8px rgba(0,0,0,.25);border-radius:0 0 4px 4px}
.subnav__all:hover .mega,.mega.is-open{display:block}
.mega ul{list-style:none;margin:0;padding:0}
.mega a{display:block;padding:8px 18px;font-size:14px;color:var(--ink)}
.mega a:hover{background:#f3f3f3}
.subnav__meta{display:flex;align-items:center;gap:2px 6px;margin-left:auto;padding-left:10px;flex:0 0 auto}
.subnav__trust{color:#d6dbe0;font-size:13px;padding:6px 8px;white-space:nowrap;border-radius:2px}
.subnav__trust:hover{color:#fff;text-decoration:underline}
.vatnav{display:flex;align-items:center;gap:2px;border:1px solid #48505b;border-radius:4px;padding:2px;margin-left:6px;background:#1b2532}
.vatnav__lbl{font-size:11px;color:#9aa4ad;padding:0 6px;white-space:nowrap}
.vatnav__btn{border:0;background:transparent;color:#d6dbe0;font-size:12px;font-weight:700;padding:5px 9px;border-radius:3px;line-height:1}
.vatnav__btn.is-active{background:var(--amber);color:#111}

/* ============================== NOTICE STRIP ============================= */
.notice{background:#eef3f4;border-bottom:1px solid var(--line)}
.notice__row{max-width:1500px;margin:0 auto;padding:8px 20px;font-size:12.5px;color:#4b5457;text-align:center}
.notice__row b{color:#232f3e}

/* ============================== CONTENT WRAPPER ========================= */
/* Deliberately does NOT constrain width -- Electro's own inner container keeps its
   grid/sidebar layout; we only guarantee a white ground + a little breathing room. */
.ff-content{background:var(--bg,#ffffff);min-height:40vh;padding-top:2px}
.ff-skip{position:absolute;left:-9999px;top:auto}
.ff-skip:focus{left:8px;top:8px;z-index:1000;background:#fff;color:#111;padding:8px 12px;border-radius:4px}

/* ============================== FOOTER ================================== */
.totop{display:block;width:100%;background:#37475A;color:#fff;text-align:center;padding:15px;font-size:13px}
.totop:hover{background:#485769}
.foot{background:var(--sub);color:#dcdcdc}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1100px;margin:0 auto;padding:36px 20px 30px}
.foot__cols h3{color:#fff;font-size:15px;margin:0 0 10px}
.foot__cols ul{list-style:none;margin:0;padding:0}
.foot__cols a{color:#ddd;font-size:13px;line-height:2}
.foot__cols a:hover{text-decoration:underline}
.foot2{background:var(--foot2);color:#a7b0b8}
.foot2__row{max-width:1100px;margin:0 auto;padding:26px 20px;text-align:center}
.foot2__logo{font-weight:800;font-size:20px;color:#fff}
.foot2__line{font-size:12px;color:#8a9199;margin-top:8px}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1100px){
  .foot__cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .foot__cols{grid-template-columns:1fr}
  .loc,.hitem--loc{display:none}
  .subnav__trust{display:none}
}

/* ============ AGGRESSIVE SITE-WIDE LIGHT ENFORCEMENT (2026-07-13) ============ */
/* Electro ships a JS dark skin + a left-edge Dark/Light switcher not found in
   PHP (injected client-side). Force light on every surface and hide the toggle. */
html, body,
.site, #page, #content, .site-content, .content-area,
.woocommerce, .woocommerce-page, main, .main,
.col-full, .container, .row, .products, .product,
header#masthead, .site-header, .header-v2, .electro-advanced-header,
footer, .site-footer, .widget-area, .sidebar, aside {
  background-color: #ffffff !important;
  color: #0F1111 !important;
}
body a:not(.button):not(.btn) { color: #007185; }
/* keep OUR dark navy header/subnav dark on purpose */
.ff-topbar, .ff-topbar *, .ff-subnav, .ff-subnav *,
.hdr, .hdr *, .subnav, .subnav * { background-color: inherit !important; }
.ff-topbar, .hdr { background-color: #131921 !important; color:#fff !important; }
.ff-subnav, .subnav { background-color: #232F3E !important; color:#fff !important; }
.ff-topbar a, .hdr a, .ff-subnav a, .subnav a { color:#fff !important; }
/* nuke the Dark/Light skin switcher wherever it renders */
[class*="skin-switch"], [class*="skin-switcher"], [id*="skin-switch"],
[class*="dark-light"], [class*="light-dark"], [class*="skins-switcher"],
.electro-skins, .electro-skin-switcher, .color-scheme-switcher,
a[href*="dark"][href*="light"], .switcher-dark, .dark-mode-toggle {
  display: none !important; visibility: hidden !important;
}

/* exact Electro dark/light switcher (found via live DOM probe 2026-07-13) */
.electro-mode-switcher, .electro-mode-switcher-item,
.electro-mode-switcher-wrapper, [data-mode="dark"], [data-mode="light"] {
  display: none !important; visibility: hidden !important; width:0 !important; height:0 !important;
}