/* =========================================================================
   adcolor.ro v2 — PLP RĂDĂCINĂ „/produse/" (is_shop) — DELTA CSS
   Roster #14 SPECIALIST WOOCOMMERCE · Val 1.

   Loads ONLY on is_shop(), layered ON TOP of:
     - base.css (global tokens + buttons + reveal/stagger/to-top + header/footer),
     - plp.css  (breadcrumb, cat-hero, cat-count-line, sec/sec-head, seo-block,
                 eeat/geo, cite, faq, blog-cards, newsletter, rail, mini-card).
   This file carries ONLY the root-landing blocks that neither base.css nor plp.css
   define: the category CARD grid, the paletar/calculator CTA band, and the brand band.
   Rules extracted VERBATIM from content/documents/mockups/plp-root-v1.html
   (card = 1:1 components-v1). No header/footer/token duplication.
   ========================================================================= */

/* ---- GRILA categoriilor (4 pe rând, se înfășoară; 7 carduri → 4 + 3) ---- */
.fam-section{ padding:var(--space-2) 0 var(--space-9); }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--space-5); }
@media (min-width:1024px){ .cat-grid{ grid-template-columns:repeat(4,1fr); } }

/* ===== CARD CATEGORIE „Pick your finish" — VERBATIM din components-v1.html ===== */
.cat-card{
  --accent:var(--cat-sage);
  --panel-peek:280px;
  --flood-over:48px;
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  overflow:hidden; border:1px solid var(--color-border); isolation:isolate;
  transition:box-shadow var(--transition), transform var(--transition);
}
.cat-card .flood{
  position:absolute; left:0; right:0; top:0; z-index:0;
  height:calc(100% + var(--flood-over));
  background:var(--accent); will-change:transform;
  -webkit-mask:var(--card-curve); mask:var(--card-curve);
  transform:translateY(calc(-100% + var(--panel-peek)));
  transition:transform var(--tr-slide);
}
.cat-card:hover .flood, .cat-card:focus-visible .flood{ transform:translateY(0); }
.cat-card:hover, .cat-card:focus-visible{ box-shadow:var(--shadow-card-hover); transform:translateY(-4px); outline:none; }
.cat-card:focus-visible{ outline:3px solid var(--color-text-primary); outline-offset:3px; }
.cat-card .panel{
  position:absolute; left:0; right:0; top:0; height:var(--panel-peek); z-index:1;
  display:flex; align-items:flex-start; justify-content:center; pointer-events:none;
  padding:var(--space-5) var(--space-5) 0;
}
.cat-card .panel .cat-img{
  width:72%; aspect-ratio:1/1; object-fit:cover; display:block;
  max-height:calc(var(--panel-peek) - var(--space-5) - 44px);
  background:transparent; padding:0; border:0; border-radius:16px; box-shadow:none; overflow:hidden;
  transform:scale(1); transform-origin:center; will-change:transform;
  transition:transform var(--tr-zoom);
}
.cat-card:hover .panel .cat-img, .cat-card:focus-visible .panel .cat-img{ transform:scale(1.06); }
.cat-card .body{ position:relative; z-index:2; margin-top:var(--panel-peek);
  padding:var(--space-4) var(--space-4) var(--space-5); text-align:center; }
.cat-card .body h3{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h3);
  margin:0 0 var(--space-1); line-height:var(--lh-heading); color:var(--color-text-primary); }
.cat-card .body .count{ font-family:var(--font-body); font-size:var(--fs-small); color:var(--color-text-secondary); }
.cat-card .cta{
  display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4);
  font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:var(--fs-small);
  border:1.5px solid var(--color-text-primary); color:var(--color-text-primary);
  background:transparent; border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4); min-height:40px;
  transition:background var(--tr-slide), color var(--tr-slide), border-color var(--tr-slide);
}
.cat-card .cta .icon{ width:1em; height:1em; }
.cat-card:hover .cta, .cat-card:focus-visible .cta{
  background:var(--color-text-primary); color:var(--color-on-primary); border-color:var(--color-text-primary);
}
@media (prefers-reduced-motion: reduce){
  .cat-card{ transition:box-shadow var(--transition); }
  .cat-card:hover, .cat-card:focus-visible{ transform:none; }
  .cat-card .flood{ transform:translateY(calc(-100% + var(--panel-peek))); transition:none; }
  .cat-card:hover .flood, .cat-card:focus-visible .flood{ transform:translateY(calc(-100% + var(--panel-peek))); }
  .cat-card::after{ content:""; position:absolute; inset:0; z-index:0; background:var(--accent);
    opacity:0; transition:opacity 140ms ease; pointer-events:none; }
  .cat-card:hover::after, .cat-card:focus-visible::after{ opacity:1; }
  .cat-card .cta{ transition:background 140ms ease, color 140ms ease; }
  .cat-card .panel .cat-img{ transition:none; }
  .cat-card:hover .panel .cat-img, .cat-card:focus-visible .panel .cat-img{ transform:none; }
}

/* ---- BANDĂ CTA (paletar + calculator) — VERBATIM din plp-root-v1.html ---- */
.cta-band{ padding:0 0 var(--space-9); }
.cta-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:768px){ .cta-grid{ grid-template-columns:1fr 1fr; } }
.cta-panel{ border-radius:var(--radius-lg); padding:var(--space-7); display:flex; flex-direction:column;
  gap:var(--space-3); box-shadow:var(--shadow-card); }
.cta-panel .cta-eyebrow{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-eyebrow);
  font-size:var(--fs-eyebrow); font-weight:700; }
.cta-panel h2{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h2);
  line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:0; }
.cta-panel p{ margin:0; font-size:var(--fs-body); line-height:var(--lh-body); }
.cta-panel .cta-actions{ margin-top:var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-3); }
.cta-panel--warm{ background:var(--cat-mustard); color:var(--color-text-primary); }
.cta-panel--warm .cta-eyebrow{ color:var(--color-primary-active); }
.cta-panel--warm p{ color:var(--color-text-primary); }
.cta-panel--sage{ background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
  color:var(--color-on-primary); }
.cta-panel--sage .cta-eyebrow{ color:var(--color-accent); }
.cta-panel--sage h2{ color:#fff; }
.cta-panel--sage p{ color:#ECEFE6; }
.cta-panel .panel-ico{ width:44px; height:44px; border-radius:var(--radius-md); display:inline-flex;
  align-items:center; justify-content:center; }
.cta-panel--warm .panel-ico{ background:rgba(94,115,85,.18); color:var(--color-primary-active); }
.cta-panel--sage .panel-ico{ background:rgba(255,255,255,.16); color:#fff; }
.cta-panel .panel-ico .icon{ width:1.4em; height:1.4em; }

/* ---- BANDĂ BRANDURI — VERBATIM din plp-root-v1.html ---- */
.brands-band{ padding:var(--space-8) 0; background:var(--color-tint); border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border); }
.brands-band .bb-head{ text-align:center; max-width:60ch; margin:0 auto var(--space-6); }
.brands-band .bb-head .eyebrow{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-eyebrow);
  font-size:var(--fs-eyebrow); font-weight:700; color:var(--color-primary); margin:0 0 var(--space-2); }
.brands-band .bb-head h2{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h2);
  line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:0; color:var(--color-text-primary); }
.brand-logos{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; justify-content:center; }
.brand-logo{ display:inline-flex; align-items:center; justify-content:center; min-width:140px; min-height:56px;
  padding:var(--space-3) var(--space-5); background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm); text-decoration:none;
  font-family:var(--font-display); font-size:1.2rem; color:var(--color-text-primary);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.brand-logo:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--color-primary); }
.brand-logo:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .brand-logo:hover{ transform:none; } }