/* ff-ui.css  --  Fairfields Amazon-fidelity UI polish for category/PDP (LIVE)
   Task card: s6-category-pdp-ui-fix-001

   ADDITIVE ONLY. Does not touch, duplicate, or restyle the 4-col archive grid,
   department band, per-unit price line, or PDP enrichment sections -- those are
   owned by roadmap/phase2/pdp_build/ff-category.css + ff-pdp.css and already
   confirmed working live. This file adds: the Amazon-style top band
   (.ff-ui-band, rendered by ff-ui-functions.php via woocommerce_before_main_content
   -- NOT part of header.php/footer.php), breadcrumb styling, a text-wordmark
   fallback + belt-and-suspenders logo-text override, and minor archive polish
   (pagination / no-products-found / sidebar widget titles).

   Self-sufficient tokens: redeclares the same --ff-* values already used by
   ff-category.css / ff-pdp.css (byte-identical, so no drift) so this file still
   renders correctly even on pages where those stylesheets are not enqueued
   (e.g. cart/checkout, where woocommerce_before_main_content also fires). */

:root{
  --ff-ink:#0F1111; --ff-link:#007185; --ff-linkH:#C7511F; --ff-bg:#ffffff;
  --ff-line:#D5D9D9; --ff-muted:#565959; --ff-red:#B12704; --ff-amber:#FEBD69;
  --ff-dark:#131921; --ff-sub:#232F3E;
  --ff-font:"Amazon Ember","Amazon Ember Display",Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/* ======================================================== AMAZON TOP BAND === */
/* Intentionally dark -- protect it from ff-chrome.css's aggressive site-wide
   light-enforcement sweep (that rule targets header#masthead/.site-header/etc,
   not this new class, but !important here removes any ambiguity, mirroring the
   same defensive pattern ff-chrome.css already uses for .ff-topbar/.hdr). */
.ff-ui-band{
  background:#131921 !important; background:var(--ff-dark) !important;
  color:#fff !important;
}
.ff-ui-band__row{
  max-width:1500px; margin:0 auto; padding:8px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--ff-font); font-size:13px;
}
.ff-ui-band__brand{
  font-weight:800; font-size:16px; letter-spacing:.2px; color:#fff !important;
  text-decoration:none; padding:2px 4px;
}
.ff-ui-band__brand:hover{ text-decoration:underline; }
.ff-ui-band__depts{
  display:flex; align-items:center; gap:2px; overflow-x:auto; flex:1 1 auto;
}
.ff-ui-band__depts::-webkit-scrollbar{ height:0; }
.ff-ui-band__depts a{
  color:#e6e6e6 !important; text-decoration:none; white-space:nowrap;
  font-size:12.5px; padding:5px 9px; border:1px solid transparent; border-radius:2px;
}
.ff-ui-band__depts a:hover{ border-color:#fff; color:#fff !important; }
.ff-ui-band__account{
  margin-left:auto; color:#fff !important; text-decoration:none; font-weight:700;
  font-size:12.5px; white-space:nowrap; padding:5px 9px; border:1px solid transparent;
  border-radius:2px;
}
.ff-ui-band__account:hover{ border-color:#fff; text-decoration:underline; }

@media (max-width:640px){
  .ff-ui-band__depts{ display:none; } /* keep the band slim on mobile: brand + account only */
}

/* ============================================================ BREADCRUMB ==== */
/* WooCommerce core already renders .woocommerce-breadcrumb at
   woocommerce_before_main_content priority 20 (below our band). Cosmetic only. */
.woocommerce-breadcrumb{
  font-family:var(--ff-font); font-size:12.5px; color:var(--ff-muted) !important;
  padding:10px 0 4px; margin:0 0 6px;
}
.woocommerce-breadcrumb a{
  color:var(--ff-link) !important; text-decoration:none;
}
.woocommerce-breadcrumb a:hover{ color:var(--ff-linkH) !important; text-decoration:underline; }

/* ================================================== LOGO / WORDMARK TREATMENT
   (1) Text-logo fallback markup injected by ff_ui_text_logo_fallback() when the
       theme calls WordPress core's get_custom_logo()/the_custom_logo() and no
       custom_logo theme_mod is set. */
.ff-text-logo{ text-decoration:none; display:inline-block; }
.ff-text-logo__mark{
  font-family:var(--ff-font); font-weight:800; font-size:20px; letter-spacing:.2px;
  color:inherit;
}

/* (2) Belt-and-suspenders: visually replaces a literal text site-title logo
   ("electro." or similar) wherever Electro renders it as bloginfo('name') markup
   OUTSIDE the core custom-logo API. Scoped to header/masthead/site-branding
   ancestors only (never global) to keep blast radius minimal. A non-matching
   selector is a pure no-op -- same proven pattern as the .electro-mode-switcher
   kill rules already live in ff-chrome.css. Verify the exact match via the
   DEPLOY.md accept-test after first deploy; this list can be widened/narrowed in
   a follow-up cut without touching any template file. */
.site-branding .site-title a,
#masthead .site-title a,
.site-header .site-title a,
header .site-title a,
.ff-ui .site-title a{
  font-size:0 !important; line-height:0 !important; letter-spacing:0 !important;
}
.site-branding .site-title a::after,
#masthead .site-title a::after,
.site-header .site-title a::after,
header .site-title a::after,
.ff-ui .site-title a::after{
  content:"fairfields.shop";
  font:800 20px/1.2 var(--ff-font);
  color:inherit;
}

/* ==================================================== ARCHIVE / PDP POLISH === */
/* Pagination -- Amazon-quiet numbered links, teal current/hover. Additive only:
   does not touch ff-category.css's grid/card rules. */
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul{
  border:0 !important; background:transparent !important;
}
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span{
  font-family:var(--ff-font); font-size:13px; color:var(--ff-ink) !important;
  border:1px solid var(--ff-line) !important; border-radius:4px; margin:0 3px;
  background:#fff !important;
}
.woocommerce-pagination .page-numbers li a:hover{
  border-color:var(--ff-link) !important; color:var(--ff-link) !important;
}
.woocommerce-pagination .page-numbers li span.current{
  background:var(--ff-dark) !important; color:#fff !important; border-color:var(--ff-dark) !important;
}

/* No-products-found notice -- quiet Amazon-style card instead of a loud theme alert */
.woocommerce-info.woocommerce-no-products-found,
p.woocommerce-info{
  font-family:var(--ff-font); font-size:14px; color:var(--ff-ink) !important;
  background:#fff !important; border:1px solid var(--ff-line) !important;
  border-radius:8px; padding:16px 18px;
}

/* Sidebar widget titles -- small caps, muted, teal accent rule (Electro's own
   filter widgets keep their own markup/behaviour; this only restyles headings) */
.widget-area .widget-title,
.sidebar .widget-title,
aside .widget-title{
  font-family:var(--ff-font) !important; font-size:13px !important; font-weight:700 !important;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ff-ink) !important;
  border-bottom:2px solid var(--ff-line) !important; padding-bottom:8px !important;
}

/* Amazon-style search field focus ring reused site-wide where Electro's own
   search form remains in the native header (not our removed override). */
.ff-ui .site-search input[type="search"]:focus,
.ff-ui .site-search input[type="text"]:focus{
  outline:2px solid #F3A847 !important;
}

/* ---- exact Electro logo replacement (live-DOM verified 2026-07-13) ----
   Electro draws "electro." as an inline <svg> inside a.header-logo-link — not
   custom_logo, not text. Hide the SVG, inject the fairfields.shop wordmark. */
.header-logo-link svg, .header-logo svg { display: none !important; }
.header-logo-link {
  display: inline-flex !important; align-items: center;
  min-height: 42px; text-decoration: none !important;
}
.header-logo-link::after {
  content: "fairfields.shop";
  font-family: "Amazon Ember", Arial, "Helvetica Neue", sans-serif;
  font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.5px;
  color: #131921 !important; white-space: nowrap;
}