/* ff-amazon-pdp.css  --  Fairfields Amazon-fidelity PDP + category DENSITY layer
   Task card: s7-amazon-pdp-density-001  (electro-child theme)

   EXTENDS (does not duplicate) roadmap/phase2/pdp_build/ff-pdp.css + ff-category.css.
   Those files own the About-this-item bullet styling, honest badges, spec-table
   internals, rail cards and the 4-col archive grid -- all already live and unchanged.
   THIS file owns the piece those were missing: the actual Amazon 3-column PDP
   LAYOUT (gallery 42% / centre 34% / buy-box 24%), the buy-box CARD chrome
   (rendered by ff-amazon-pdp-functions.php's .ff-buybox wrapper), the vertical
   thumbnail gallery restyle, the full-width description section, and site-wide
   was-price/onsale suppression (DMCC).

   Rules marked "CRITICAL" below are load-bearing (layout-defining or compliance-
   defining) and are mirrored verbatim (minified) in the wp_head inline <style>
   block emitted by ff-amazon-pdp-functions.php, because LiteSpeed's CSS-combine
   cache on this host has previously lagged external CSS after a deploy. Rules
   NOT marked CRITICAL are visual polish only -- safe to rely on the external file
   alone; a stale cache just means "less pretty for a few minutes", never broken.

   Self-sufficient tokens: redeclares the same --ff-* values already used by
   ff-pdp.css / ff-category.css / ff-ui.css (byte-identical for the shared ones)
   so this file still renders correctly standalone. */

:root{
  --ff-ink:#0F1111; --ff-link:#007185; --ff-linkH:#C7511F; --ff-bg:#ffffff;
  --ff-line:#D5D9D9; --ff-line2:#e7e9ec; --ff-muted:#565959; --ff-red:#B12704;
  --ff-green:#007600; --ff-amber:#FFD814; --ff-amberH:#F7CA00; --ff-amber2:#FEBD69;
  --ff-dark:#131921; --ff-sub:#232F3E;
  --ff-radius:8px; --ff-radius-sm:6px; --ff-maxw:1500px;
  --ff-font:"Amazon Ember","Amazon Ember Display",Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/* =====================================================================
   1. PDP THREE-COLUMN GRID  --  CRITICAL
   Native WooCommerce markup: div.product > (.images.woocommerce-product-gallery ,
   .summary.entry-summary). We grid the outer pair (gallery 42% / everything-else
   58%), then grid .summary itself into (centre / 300px buy-box). No template file
   touched -- pure CSS re-layout of the existing two native siblings. */
.single-product div.product{
  display:grid!important;
  grid-template-columns:42% minmax(0,1fr);
  column-gap:32px;
  max-width:var(--ff-maxw);
  margin:0 auto;
  background:var(--ff-bg)!important;
  padding:20px 16px 0;
  align-items:start;
}
.single-product div.product .images.woocommerce-product-gallery{
  float:none!important; width:auto!important; margin:0!important;
}
.single-product div.product .summary.entry-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 300px;
  column-gap:24px;
  align-content:start;
  float:none!important; width:auto!important; clear:none!important; margin:0!important;
}
/* every summary child defaults to the centre column; only .ff-buybox moves right */
.single-product div.product .summary.entry-summary > *{grid-column:1}
.single-product div.product .summary.entry-summary > .ff-buybox{
  grid-column:2; grid-row:1;
  position:sticky; top:96px; align-self:start;
}

@media (max-width:960px){
  .single-product div.product{grid-template-columns:1fr}
  .single-product div.product .summary.entry-summary{grid-template-columns:1fr}
  .single-product div.product .summary.entry-summary > .ff-buybox{
    grid-column:1; grid-row:auto; position:static; order:2; margin-top:16px;
  }
}

/* =====================================================================
   2. BUY-BOX CARD  --  CRITICAL (bordered card chrome + amber CTA)
   Wraps native price / stock / form.cart / our MOQ line -- see
   ff_amz_buybox_open()/ff_amz_buybox_close() in ff-amazon-pdp-functions.php. */
.single-product .ff-buybox{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--ff-line); border-radius:var(--ff-radius);
  background:#fff!important; padding:18px 18px 20px;
}
.single-product .ff-buybox .price{
  font:400 28px/1.25 var(--ff-font); color:var(--ff-ink)!important; margin:0;
}
.single-product .ff-buybox .price ins{text-decoration:none!important; font-weight:700}
.single-product .ff-buybox .price del,
.single-product .ff-buybox .price .screen-reader-text{display:none!important}
.single-product .ff-buybox .woocommerce-Price-amount{color:inherit}
.single-product .ff-buybox p.stock{
  font:700 14px/1.3 var(--ff-font); margin:0; padding:0;
}
.single-product .ff-buybox p.stock.in-stock{color:var(--ff-green)!important}
.single-product .ff-buybox p.stock.out-of-stock,
.single-product .ff-buybox p.stock.unavailable{color:var(--ff-red)!important}
.single-product .ff-buybox form.cart{margin:4px 0 0!important; padding:0!important}
.single-product .ff-buybox .quantity input.qty{
  border:1px solid var(--ff-line)!important; border-radius:var(--ff-radius-sm);
  font:400 14px var(--ff-font); padding:8px; width:64px;
}
.single-product .ff-buybox .button,
.single-product .ff-buybox .single_add_to_cart_button{
  display:block; width:100%; margin-top:10px;
  background:var(--ff-amber)!important; border:1px solid var(--ff-amberH)!important;
  color:#0F1111!important; border-radius:999px; font:700 14px/1 var(--ff-font);
  padding:11px 18px; text-align:center; box-shadow:0 2px 5px rgba(15,17,17,.15);
}
.single-product .ff-buybox .button:hover,
.single-product .ff-buybox .single_add_to_cart_button:hover{
  background:var(--ff-amber2)!important; border-color:var(--ff-amber2)!important;
}
.single-product .ff-buybox .star-rating,
.single-product .ff-buybox .woocommerce-product-rating{display:none!important}

/* buy-box trust line + trade CTA (ff_amz_buybox_trust()) */
.single-product .ff-buybox-trust{
  margin-top:8px; padding-top:10px; border-top:1px solid var(--ff-line2);
}
.single-product .ff-buybox-trust__cta{
  display:inline-block; font:700 13px/1.3 var(--ff-font); color:var(--ff-link)!important;
  text-decoration:none;
}
.single-product .ff-buybox-trust__cta:hover{color:var(--ff-linkH)!important; text-decoration:underline}

/* the existing ff-buybox-extra (dual MOQ/bulk line) now lives INSIDE the card --
   drop its old top border/margin since the card border already separates it */
.single-product .ff-buybox .ff-buybox-extra{margin:2px 0 0; padding-top:8px}

/* =====================================================================
   3. BRAND LINE + DIVIDER (centre column, under the title)  --  polish
   Rendered by ff_amz_pdp_brand_line() -- fail-open, prints nothing when no
   brand taxonomy/term exists for the product (never fabricated). */
.single-product .ff-brand-line{
  margin:2px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--ff-line2);
  font:400 13px/1.4 var(--ff-font); color:var(--ff-muted)!important;
}
.single-product .ff-brand-line a{color:var(--ff-link)!important; text-decoration:none; font-weight:600}
.single-product .ff-brand-line a:hover{color:var(--ff-linkH)!important; text-decoration:underline}

/* =====================================================================
   4. GALLERY  --  vertical thumbnail strip + hover-zoom (polish, progressive
   enhancement). Targets WooCommerce's native Flexslider gallery classes.
   Best-effort: if Electro renders different classnames the rules are simple
   no-ops (default Woo gallery still shows the image -- never a blank void).
   Verify exact classnames on the live DOM during the accept-test iteration. */
.single-product .images.woocommerce-product-gallery{
  display:flex; flex-direction:row-reverse; gap:12px; align-items:flex-start;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport{
  flex:1 1 auto; min-width:0; border:1px solid var(--ff-line); border-radius:4px;
  overflow:hidden; background:#fff;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .flex-viewport img{
  width:100%; height:auto; object-fit:contain; transition:transform .35s ease; cursor:zoom-in;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:hover img,
.single-product .woocommerce-product-gallery .flex-viewport:hover img{transform:scale(1.12)}
.single-product .woocommerce-product-gallery ol.flex-control-nav,
.single-product .woocommerce-product-gallery .flex-control-thumbs{
  flex:0 0 76px; display:flex!important; flex-direction:column; gap:8px;
  list-style:none; margin:0!important; padding:0!important;
  max-height:520px; overflow-y:auto;
}
.single-product .woocommerce-product-gallery ol.flex-control-nav li,
.single-product .woocommerce-product-gallery .flex-control-thumbs li{width:100%; margin:0!important}
.single-product .woocommerce-product-gallery ol.flex-control-nav img,
.single-product .woocommerce-product-gallery .flex-control-thumbs img{
  width:100%; height:72px; object-fit:contain; border:1px solid var(--ff-line);
  border-radius:4px; background:#fff; cursor:pointer; opacity:.72;
}
.single-product .woocommerce-product-gallery ol.flex-control-nav li.flex-active-slide img,
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{
  opacity:1; border-color:var(--ff-ink);
}
@media (max-width:960px){
  .single-product .images.woocommerce-product-gallery{flex-direction:column}
  .single-product .woocommerce-product-gallery ol.flex-control-nav,
  .single-product .woocommerce-product-gallery .flex-control-thumbs{
    flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden;
  }
  .single-product .woocommerce-product-gallery ol.flex-control-nav img,
  .single-product .woocommerce-product-gallery .flex-control-thumbs img{
    width:64px; height:64px; flex:0 0 auto;
  }
}

/* =====================================================================
   5. FULL-WIDTH SECTIONS BELOW THE FOLD  --  polish
   ff_amz_pdp_description() + the rehooked ff_pdp_specs/bundles/related (now
   on woocommerce_after_single_product_summary, see functions.php) all reuse
   the .ff-section / .ff-section__h chrome already defined in ff-pdp.css --
   nothing to redeclare here except the description body typography and making
   sure these sections span the FULL 1500px container, not just the old
   58%-wide .summary column they used to render inside of. */
.single-product .ff-section{max-width:var(--ff-maxw); margin-left:auto; margin-right:auto}
.single-product .ff-description__body{
  font:400 14px/1.7 var(--ff-font); color:var(--ff-ink)!important; max-width:900px;
}
.single-product .ff-description__body p{margin:0 0 12px}
.single-product .ff-description__body img{max-width:100%; height:auto}

/* =====================================================================
   6. WAS-PRICE / ONSALE SUPPRESSION (DMCC)  --  CRITICAL, site-wide
   woocommerce_sale_flash is also filtered to '' in PHP (belt-and-suspenders);
   this CSS is the guaranteed-visible layer even if a cached fragment still
   contains the badge markup. Only the current price may ever show. */
.woocommerce span.onsale,
.woocommerce .onsale{display:none!important}
.woocommerce .price del,
.woocommerce .price del .woocommerce-Price-amount,
.woocommerce p.price del{display:none!important}
.woocommerce .price ins{text-decoration:none!important; background:none!important}

/* =====================================================================
   7. CATEGORY / ARCHIVE DENSITY POLISH  --  extends ff-category.css
   Does NOT redefine the 4-col grid (owned by ff-category.css) -- additive
   was-price suppression on cards + light Amazon-style sidebar filter spacing. */
.woocommerce ul.products li.product .price del{display:none!important}
.woocommerce ul.products li.product .onsale{display:none!important}
.woocommerce ul.products li.product:hover{transition:box-shadow .15s, transform .1s; transform:translateY(-1px)}

.widget-area .widget_layered_nav ul li,
.widget-area .widget_product_categories ul li,
.sidebar .widget_layered_nav ul li,
.sidebar .widget_product_categories ul li{
  font:400 13px/1.6 var(--ff-font); padding:3px 0;
}
.widget-area .widget_price_filter .price_slider_amount .button,
.sidebar .widget_price_filter .price_slider_amount .button{
  background:var(--ff-dark)!important; border-color:var(--ff-dark)!important; color:#fff!important;
  border-radius:4px!important;
}

/* =====================================================================
   8. FOOTER WORDMARK  --  CRITICAL
   Mirrors the PROVEN header fix (a.header-logo-link, live-DOM verified,
   see roadmap/phase2/chrome_build/ff-chrome-functions.php:139-144 and
   roadmap/phase2/ui_fix/ff-ui.css:156-169) for the footer's equivalent link.
   Best-effort selector net -- Electro's exact footer logo class was not
   independently live-DOM-verified for this build; verify + narrow/widen
   during the accept-test iteration (never breaks layout if a selector
   doesn't match -- simple no-op). */
.footer-logo-link svg, .footer-logo svg, .site-footer .logo svg,
#colophon .footer-logo svg, .electro-footer-logo svg,
.footer-logo-link img, .footer-logo img, .site-footer .logo img,
#colophon .footer-logo img, .electro-footer-logo img{display:none!important}
.footer-logo-link, .footer-logo, .site-footer .logo,
#colophon .footer-logo, .electro-footer-logo{
  display:inline-flex!important; align-items:center; min-height:32px;
  text-decoration:none!important;
}
.footer-logo-link::after, .footer-logo::after, .site-footer .logo::after,
#colophon .footer-logo::after, .electro-footer-logo::after{
  content:"fairfields.shop";
  font-family:"Amazon Ember",Arial,"Helvetica Neue",sans-serif;
  font-weight:700; font-size:20px; line-height:1; letter-spacing:-.3px;
  color:#fff!important; white-space:nowrap;
}