/* ff-category.css  --  Fairfields category/archive Amazon-density layer (STAGING)
   Task card: s5-category-pdp-001
   Reuses the homepage Amazon tokens. Scoped to Woo archive containers so the
   Electro sidebar/filters are untouched. Adds: 4-col density grid, teal titles
   clamped to 2 lines, a second "/unit at N+" price line, and a department band. */

: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-font:"Amazon Ember","Amazon Ember Display",Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/* ---- department band (above the grid) ---- */
.woocommerce .ff-deptband{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:10px 0 12px;margin:0 0 14px;border-bottom:1px solid var(--ff-line)}
.woocommerce .ff-deptband__name{font:700 22px/1.2 var(--ff-font);color:var(--ff-ink)!important;letter-spacing:-.01em}
.woocommerce .ff-deptband__count{font:400 13px/1 var(--ff-font);color:var(--ff-muted)!important}

/* ---- 4-column Amazon-density grid ---- */
.woocommerce ul.products.columns-4{display:grid!important;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0;padding:0;list-style:none}
.woocommerce ul.products.columns-4 li.product{width:auto!important;margin:0!important;float:none!important;
  background:#fff!important;border:1px solid var(--ff-line);border-radius:8px;padding:14px;
  display:flex;flex-direction:column}
.woocommerce ul.products li.product:hover{box-shadow:0 4px 14px rgba(15,17,17,.10)}
.woocommerce ul.products li.product a img{margin:0 auto 10px;max-height:160px;width:auto;object-fit:contain;
  mix-blend-mode:multiply}

/* title: teal, clamped to 2 lines */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font:400 13.5px/1.35 var(--ff-font)!important;color:var(--ff-link)!important;padding:0 0 6px!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{color:var(--ff-linkH)!important;
  text-decoration:underline}

/* price: Amazon red; keep it compact */
.woocommerce ul.products li.product .price{color:var(--ff-red)!important;font:700 16px/1.15 var(--ff-font)!important;
  margin:2px 0 0}
.woocommerce ul.products li.product .price del{color:var(--ff-muted)!important;font-weight:400}

/* second price line: "/unit at N+" */
.woocommerce ul.products li.product .ff-loop-unit{font:400 11.5px/1.35 var(--ff-font);color:var(--ff-muted)!important;
  margin:3px 0 0}

/* button spacing -> Amazon-ish, keep theme colours otherwise */
.woocommerce ul.products li.product .button{margin-top:auto}

/* ---- suppress star ratings on archive cards (DMCC) ---- */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-product-rating{display:none!important}

@media (max-width:1024px){
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(2,1fr)}
  .woocommerce .ff-deptband__name{font-size:19px}
}
@media (max-width:420px){
  .woocommerce ul.products.columns-4{grid-template-columns:1fr}
}