/*
Theme Name: Fire Australia Co
Theme URI: https://www.fireausco.com.au
Description: Industrial-credible, modern catalogue + enquiry theme for Fire Australia Co. A block-theme child of Twenty Twenty-Five, fully driven by theme.json design tokens (colour, typography, spacing) as the single source of truth. Catalogue + request-a-quote, not checkout.
Author: Applickable
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: fireausco
*/

/* All design decisions live in theme.json. This file holds only the utility
   rules the block editor can't express — every value references a theme.json
   token via its generated CSS custom property, so theme.json stays the single
   source of truth. */

:root {
  --fac-ease: var(--wp--custom--transition--base, 160ms ease);
}

/* ---- Eyebrow / kicker label (small, technical, accent) ------------------ */
.fac-eyebrow {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
.fac-eyebrow.is-on-dark { color: var(--wp--preset--color--accent-bright); }

/* ---- Card block style --------------------------------------------------- */
.is-style-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--custom--shadow--card);
  overflow: clip;
  transition: transform var(--fac-ease), box-shadow var(--fac-ease), border-color var(--fac-ease);
}
a.is-style-card, .is-style-card a { text-decoration: none; }
.is-style-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--custom--shadow--raised);
  border-color: var(--wp--preset--color--steel-soft);
}

/* ---- Steel panel block style (dark technical section) ------------------- */
.is-style-panel-steel {
  background: var(--wp--preset--color--steel);
  color: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--lg);
}
.is-style-panel-steel :where(h1,h2,h3,h4,p,li) { color: var(--wp--preset--color--base); }

/* ---- Framed image ------------------------------------------------------- */
.is-style-framed img {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--base);
}

/* ---- Category grid cards ------------------------------------------------ */
.fac-cat-card { display: flex; flex-direction: column; height: 100%; }
.fac-cat-card .fac-cat-media {
  flex: 0 0 auto;                 /* don't absorb column slack */
  position: relative;            /* image is absolute, so aspect-ratio sets the height */
  aspect-ratio: 4 / 3;
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
  overflow: clip;
}
.fac-cat-card .fac-cat-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 240ms ease;
}
.fac-cat-card:hover .fac-cat-media img { transform: scale(1.04); }
.fac-cat-card .fac-cat-body { flex: 1 1 auto; padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: 0.35rem; }

/* Hero preview: show the full technical diagram (no crop) on white */
.fac-cat-media.fac-media-contain { background: var(--wp--preset--color--base); }
.fac-cat-card .fac-cat-media.fac-media-contain img { object-fit: contain; padding: 1.15rem; box-sizing: border-box; }
.fac-cat-card .fac-cat-body .fac-cat-name {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--steel);
  letter-spacing: -0.01em;
}
.fac-cat-card .fac-cat-link {
  margin-top: auto; font-weight: 600; font-size: 0.9rem;
  color: var(--wp--preset--color--accent);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.fac-cat-card:hover .fac-cat-link { gap: 0.6rem; }

/* ---- Category grid layout ---------------------------------------------- */
.fac-cat-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
/* The group uses flow-layout block-gap, which injects margin-block-start on
   every child except the first — in a grid that offsets rows. We space with
   grid `gap`, so zero those injected margins. */
.fac-cat-grid > * { margin-top: 0; margin-block-start: 0; }

/* ---- Value-prop icon tile ---------------------------------------------- */
.fac-icon {
  width: 46px; height: 46px; border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--accent-tint);
  color: var(--wp--preset--color--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.fac-icon svg { width: 24px; height: 24px; }

/* ---- Hero polish -------------------------------------------------------- */
.fac-hero { background:
  radial-gradient(1200px 480px at 88% -8%, var(--wp--preset--color--surface), transparent 60%),
  var(--wp--preset--color--base);
}

/* ---- Compliance / standards badges ------------------------------------- */
.fac-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
  color: var(--wp--preset--color--steel);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  background: var(--wp--preset--color--base);
  white-space: nowrap;
}
.is-style-panel-steel .fac-badge {
  color: var(--wp--preset--color--base);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}

/* ---- Sticky, quiet header ---------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ---- Consistent spec table (used on single product later) --------------- */
.fac-specs table, table.spec-table {
  width: 100%; border-collapse: collapse; font-size: 0.95rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md); overflow: clip;
}
table.spec-table th {
  text-align: left; background: var(--wp--preset--color--surface-2);
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  color: var(--wp--preset--color--steel);
  padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--wp--preset--color--border);
}
table.spec-table td { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--wp--preset--color--border); }
table.spec-table tr:nth-child(even) td { background: var(--wp--preset--color--surface); }

/* ---- Header responsiveness --------------------------------------------- */
.wp-block-button__link { white-space: nowrap; }          /* never wrap per-char */
.fac-header-actions { flex-shrink: 0; }
.fac-header-actions .wp-block-button { flex-shrink: 0; }
.fac-header .wp-block-search__input { min-width: 0; }

.fac-header .wp-block-navigation-item__content,
.fac-header .wp-block-navigation a { white-space: nowrap; }  /* items never break mid-label */

@media (min-width: 782px) {
  .fac-header .wp-block-navigation { flex-wrap: nowrap; column-gap: 1.15rem; }
  .fac-header .wp-block-search__input { width: clamp(150px, 13vw, 200px); }
}

@media (max-width: 781px) {
  .fac-header-actions .wp-block-search { display: none; }  /* search lives in menu */
  .fac-header .alignwide { gap: 0.5rem; }
  .fac-header-actions { gap: 0.5rem; }
}

/* ======================================================================== */
/* Product archive (faceted)                                                */
/* ======================================================================== */
/* The archive is a dynamic block (raw HTML), so it doesn't inherit the
   root-padding-aware alignment. Constrain + pad it with the same tokens the
   header uses so the left/right gutters line up. */
.fac-archive-wrap {
  box-sizing: border-box;
  width: 100%;
  /* parent <main> already provides the root-padding gutter; just constrain to
     wide-size and centre so we line up with the header content edge */
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin-inline: auto;
}

.fac-breadcrumb { font-size: 0.85rem; color: var(--wp--preset--color--steel-soft); margin-bottom: 1rem; }
.fac-breadcrumb a { color: var(--wp--preset--color--steel-soft); text-decoration: none; }
.fac-breadcrumb a:hover { color: var(--wp--preset--color--accent); }
.fac-breadcrumb span { color: var(--wp--preset--color--border); margin: 0 0.15rem; }
.fac-breadcrumb [aria-current] { color: var(--wp--preset--color--ink); }

.fac-archive-head { margin-bottom: 1.25rem; }
.fac-archive-title { margin: 0; }
.fac-archive-desc { margin-top: 0.5rem; color: var(--wp--preset--color--ink-soft); max-width: 60ch; }

.fac-archive-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.fac-result-count { margin: 0; color: var(--wp--preset--color--ink-soft); }
.fac-result-count strong { color: var(--wp--preset--color--ink); }

.fac-filter-toggle {
  display: none; align-items: center; gap: 0.5rem;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  background: var(--wp--preset--color--base); color: var(--wp--preset--color--steel);
  border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--sm);
  padding: 0.5rem 0.9rem; cursor: pointer;
}
.fac-pill {
  background: var(--wp--preset--color--accent); color: #fff;
  border-radius: 999px; font-size: 0.75rem; padding: 0.05rem 0.45rem;
}

/* layout: sidebar + results */
.fac-archive { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }

.fac-filters { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 1.25rem; }
.fac-filters-head { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--steel); }
.fac-clear { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.85rem; color: var(--wp--preset--color--accent); }
.fac-filters-close { display: none; background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--wp--preset--color--steel-soft); }

.fac-facet { border: 0; border-top: 1px solid var(--wp--preset--color--border); padding: 1rem 0 0; margin: 0; }
.fac-facet legend { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--steel); padding: 0; margin-bottom: 0.6rem; }
.fac-facet-opts { display: flex; flex-direction: column; gap: 0.4rem; max-height: 240px; overflow-y: auto; padding-right: 0.7rem; scrollbar-gutter: stable; }
.fac-check { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 0.92rem; color: var(--wp--preset--color--ink); }
.fac-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--wp--preset--color--accent); flex: 0 0 auto; }
.fac-check-label { flex: 1 1 auto; }
.fac-check-count { color: var(--wp--preset--color--steel-soft); font-size: 0.8rem; }
.fac-check:hover .fac-check-label { color: var(--wp--preset--color--accent); }
.fac-apply { margin-top: 0.5rem; }

/* results */
.fac-results-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.fac-active { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fac-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600;
  background: var(--wp--preset--color--accent-tint); color: var(--wp--preset--color--accent);
  border-radius: 999px; padding: 0.25rem 0.7rem; text-decoration: none; }
.fac-chip span { font-size: 1rem; }
.fac-sort { margin-left: auto; font-size: 0.85rem; color: var(--wp--preset--color--steel-soft); display: inline-flex; align-items: center; gap: 0.5rem; }
.fac-sort-select { font-family: var(--wp--preset--font-family--body); border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm); padding: 0.4rem 0.6rem; background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }

.fac-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.fac-grid > * { margin-top: 0; margin-block-start: 0; }

.fac-prod-card { display: flex; flex-direction: column; }
.fac-prod-media { flex: 0 0 auto; position: relative; aspect-ratio: 1 / 1; display: block;
  background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); overflow: clip; }
.fac-prod-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1rem; box-sizing: border-box; transition: transform 240ms ease; }
.fac-prod-card:hover .fac-prod-media img { transform: scale(1.04); }
.fac-prod-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem 1rem; }
.fac-prod-name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1rem; line-height: 1.25;
  color: var(--wp--preset--color--steel); text-decoration: none; letter-spacing: -0.01em; }
.fac-prod-name:hover { color: var(--wp--preset--color--accent); }
.fac-prod-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.fac-tag { font-size: 0.72rem; font-weight: 600; color: var(--wp--preset--color--steel-soft);
  background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px; padding: 0.1rem 0.5rem; }
.fac-prod-price { margin-top: 0.15rem; font-family: var(--wp--preset--font-family--heading);
  font-weight: 800; font-size: 1.15rem; color: var(--wp--preset--color--steel); letter-spacing: -0.01em; }
.fac-prod-price .woocommerce-Price-amount { color: var(--wp--preset--color--steel); }
.fac-prod-actions { margin-top: auto; padding-top: 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.fac-addcart {
  flex: 1 1 auto; text-align: center;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.85rem;
  color: #fff; background: var(--wp--preset--color--accent);
  border: 1px solid var(--wp--preset--color--accent); border-radius: var(--wp--custom--radius--sm);
  padding: 0.5rem 0.7rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--fac-ease); line-height: 1.2;
}
.fac-addcart:hover, .fac-addcart:focus { background: var(--wp--preset--color--accent-bright); border-color: var(--wp--preset--color--accent-bright); color: #fff; }
.fac-addcart.loading { opacity: 0.7; }
.fac-addcart.added::after { content: " ✓"; }
/* WooCommerce appends a "View cart" link after adding — it crowds the card row;
   the header mini-cart/drawer handles viewing, so hide the inline one. */
.fac-prod-actions .added_to_cart { display: none !important; }
.fac-prod-view { flex: 0 0 auto; font-weight: 600; font-size: 0.85rem; color: var(--wp--preset--color--steel-soft); text-decoration: none; padding: 0.5rem 0.4rem; }
.fac-prod-view:hover { color: var(--wp--preset--color--accent); }

.fac-pagination { display: flex; gap: 0.4rem; margin-top: 2rem; }
.fac-pagination a { min-width: 2.25rem; text-align: center; padding: 0.45rem 0.6rem; text-decoration: none;
  border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--sm);
  color: var(--wp--preset--color--ink); font-weight: 600; }
.fac-pagination a.is-current { background: var(--wp--preset--color--steel); color: #fff; border-color: var(--wp--preset--color--steel); }
.fac-pagination a:hover:not(.is-current) { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.fac-empty { padding: 3rem 1rem; text-align: center; color: var(--wp--preset--color--ink-soft);
  border: 1px dashed var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); }
.fac-empty .fac-clear { display: inline-block; margin-top: 0.5rem; }

/* mobile: filters become a drawer */
@media (max-width: 900px) {
  .fac-archive { grid-template-columns: 1fr; }
  .fac-filter-toggle { display: inline-flex; }
  .fac-filters {
    position: fixed; inset: 0 auto 0 0; top: 0; height: 100dvh; width: min(88vw, 340px); z-index: 200;
    background: var(--wp--preset--color--base); padding: 1.25rem; overflow: auto;
    transform: translateX(-100%); transition: transform 220ms ease; box-shadow: var(--wp--custom--shadow--raised);
  }
  body.fac-drawer-open .fac-filters { transform: translateX(0); }
  body.fac-drawer-open::after { content: ""; position: fixed; inset: 0; background: rgba(15,20,26,0.5); z-index: 150; }
  .fac-filters-close { display: block; }
}

/* ---- Header mini-cart --------------------------------------------------- */
.fac-header .wc-block-mini-cart__button {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  color: var(--wp--preset--color--steel);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--base);
  transition: border-color var(--fac-ease), color var(--fac-ease);
}
.fac-header .wc-block-mini-cart__button:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.fac-header .wc-block-mini-cart__amount { font-weight: 700; }
.fac-header .wc-block-mini-cart__badge {
  background: var(--wp--preset--color--accent); color: #fff; font-weight: 700;
}

/* ======================================================================== */
/* Single product                                                           */
/* ======================================================================== */
.fac-product-wrap {
  box-sizing: border-box; width: 100%;
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin-inline: auto;
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}
.fac-product-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 1rem; }

/* gallery */
.fac-gallery-main { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--base); overflow: clip; }
.fac-gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2rem; box-sizing: border-box; }
.fac-gallery-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--wp--preset--color--steel-soft); }
.fac-gallery-thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem; flex-wrap: wrap; }
.fac-thumb { width: 64px; height: 64px; padding: 4px; border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--base); cursor: pointer; }
.fac-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fac-thumb:hover, .fac-thumb.is-active { border-color: var(--wp--preset--color--accent); }

/* summary / buy box */
.fac-product-summary { position: sticky; top: 96px; }
.fac-product-title { margin: 0.25rem 0 0.5rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.fac-product-price { font-family: var(--wp--preset--font-family--heading); font-weight: 800;
  font-size: 1.9rem; color: var(--wp--preset--color--steel); letter-spacing: -0.01em; margin: 0.25rem 0 0.75rem; }
.fac-product-price .woocommerce-Price-amount { color: var(--wp--preset--color--steel); }
.fac-product-short { color: var(--wp--preset--color--ink-soft); line-height: 1.7; margin-bottom: 1.25rem; }

.fac-compliance { margin: 0 0 1.5rem; padding: 1rem 0; border-top: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); }
.fac-compliance-label { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--steel-soft); margin-bottom: 0.6rem; }
.fac-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* WooCommerce add-to-cart form */
.fac-buybox { margin-bottom: 1.5rem; }
.fac-buybox form.cart { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; }
.fac-buybox .quantity { display: inline-flex; }
.fac-buybox .quantity input.qty {
  width: 84px; text-align: center; font-weight: 600; font-size: 1rem;
  border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--sm);
  padding: 0.75rem 0.5rem; background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink);
}
.fac-buybox button.single_add_to_cart_button, .fac-buybox button[name="add-to-cart"] {
  flex: 1 1 auto; min-width: 200px;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem;
  color: #fff; background: var(--wp--preset--color--accent);
  border: 1px solid var(--wp--preset--color--accent); border-radius: var(--wp--custom--radius--sm);
  padding: 0.85rem 1.5rem; cursor: pointer; transition: background var(--fac-ease);
}
.fac-buybox button.single_add_to_cart_button:hover { background: var(--wp--preset--color--accent-bright); border-color: var(--wp--preset--color--accent-bright); }

.fac-product-meta { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; }
.fac-product-meta li { display: flex; gap: 0.75rem; font-size: 0.92rem; }
.fac-product-meta li span { flex: 0 0 88px; color: var(--wp--preset--color--steel-soft); }
.fac-product-meta li strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.fac-product-meta a { color: var(--wp--preset--color--accent); text-decoration: none; }

.fac-datasheet { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--wp--preset--font-family--heading);
  font-weight: 700; font-size: 0.92rem; color: var(--wp--preset--color--steel);
  padding: 0.7rem 1rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--surface); text-decoration: none; }
.fac-datasheet:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.fac-datasheet svg { color: var(--wp--preset--color--accent); }

/* details / spec table */
.fac-product-details { margin-top: var(--wp--preset--spacing--70); padding-top: var(--wp--preset--spacing--60); border-top: 1px solid var(--wp--preset--color--border); }
.fac-details-title { margin: 0 0 1rem; }
.fac-specs { max-width: 860px; }
.fac-specs p { color: var(--wp--preset--color--ink-soft); line-height: 1.7; }

@media (max-width: 820px) {
  .fac-product-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .fac-product-summary { position: static; }
}

/* ======================================================================== */
/* Two-row header + FiboSearch                                              */
/* ======================================================================== */
.fac-header-top { gap: clamp(1rem, 3vw, 2.5rem); }
.fac-brand { flex: 0 0 auto; }
.fac-brand .wp-block-site-logo { margin: 0; line-height: 0; }
.fac-brand .custom-logo, .fac-brand .wp-block-site-logo img { display: block; width: 230px; height: auto; max-height: 46px; }
.fac-search { flex: 1 1 auto; max-width: 560px; display: flex; align-items: center; }
.fac-search .dgwt-wcas-search-wrapp { width: 100%; max-width: 100%; float: none; background: transparent !important; }
/* FiboSearch pads .sf-wrapp 10px all round — that insets the input (so the
   button overhangs) and adds 20px of height (big gap below). Zero it so the
   input fills the bar and the wrapper is exactly the input height. */
.fac-search .dgwt-wcas-search-wrapp,
.fac-search .dgwt-wcas-search-form,
.fac-search .dgwt-wcas-sf-wrapp { padding: 0 !important; margin: 0 !important; }
.fac-search .dgwt-wcas-sf-wrapp { position: relative; }
/* clean white bordered input (not the default grey pill) */
.fac-search .dgwt-wcas-search-input[type="search"] {
  background: var(--wp--preset--color--base) !important;
  border: 1px solid var(--wp--preset--color--border) !important;
  border-radius: var(--wp--custom--radius--sm) !important;
  height: 46px !important; font-size: 0.98rem !important;
  padding-left: 16px !important; padding-right: 58px !important;
  box-shadow: none !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important;
}
.fac-search .dgwt-wcas-search-input[type="search"]:focus { border-color: var(--wp--preset--color--steel-soft) !important; }
/* accent search button as a neat square on the right */
.fac-search .dgwt-wcas-search-submit {
  background: var(--wp--preset--color--accent) !important; color: #fff !important;
  left: auto !important; right: 5px !important;
  top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
  height: 36px !important; width: 46px !important; border-radius: var(--wp--custom--radius--sm) !important;
}
.fac-search .dgwt-wcas-search-submit:hover { background: var(--wp--preset--color--accent-bright) !important; }
.fac-search .dgwt-wcas-search-submit svg,
.fac-search .dgwt-wcas-search-submit path,
.fac-search .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier { fill: #fff !important; stroke: #fff !important; }

/* FiboSearch results dropdown (rendered on <body>, so styled globally).
   The suggestions + details panels are flush siblings — frame them as ONE
   block: square the touching corners and use a single divider between them. */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
  border: 1px solid var(--wp--preset--color--border) !important;
  box-shadow: var(--wp--custom--shadow--raised) !important;
  background: var(--wp--preset--color--base) !important;
  overflow: hidden !important; padding-top: 0.35rem !important; padding-bottom: 0.35rem !important;
}
.dgwt-wcas-suggestions-wrapp {
  border-radius: var(--wp--custom--radius--md) 0 0 var(--wp--custom--radius--md) !important;
  border-right: 0 !important;
}
.dgwt-wcas-details-wrapp {
  border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 !important;
  border-left: 1px solid var(--wp--preset--color--border) !important; box-shadow: none !important;
}
/* when the details panel isn't shown, round the suggestions fully */
.dgwt-wcas-suggestions-wrapp:last-of-type { border-radius: var(--wp--custom--radius--md) !important; border-right: 1px solid var(--wp--preset--color--border) !important; }
.dgwt-wcas-suggestion { padding: 0.5rem 0.9rem !important; }
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-hovered,
.dgwt-wcas-suggestion:hover { background: var(--wp--preset--color--accent-tint) !important; }
.dgwt-wcas-sugg-headline { color: var(--wp--preset--color--steel-soft) !important; font-family: var(--wp--preset--font-family--heading); letter-spacing: 0.06em; }
.dgwt-wcas-st-title, .dgwt-wcas-st--product .dgwt-wcas-st-title { color: var(--wp--preset--color--steel) !important; }
.dgwt-wcas-st-price { color: var(--wp--preset--color--accent) !important; font-weight: 700 !important; }
.dgwt-wcas-suggestion-more, .dgwt-wcas-suggestion-nomatches { color: var(--wp--preset--color--steel-soft) !important; }
/* Kill the inherited block-gap between the search row and nav row, and match
   the row's bottom padding to the header's top padding so the search bar sits
   symmetrically (equal space above and below). */
.fac-header-nav { border-top: 1px solid var(--wp--preset--color--border); margin-block-start: 0 !important; }
.fac-header-top { padding-bottom: var(--wp--preset--spacing--40) !important; }

/* ---- Mega-nav ----------------------------------------------------------- */
.fac-meganav { position: relative; }
.fac-nav-toggle { display: none; }
.fac-nav-list { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between;
  gap: clamp(0.6rem, 1.5vw, 1.7rem); list-style: none; margin: 0; padding: 0; }
.fac-nav-item { position: relative; }
.fac-nav-link { display: inline-flex; align-items: center; padding: 0.85rem 0; white-space: nowrap;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  font-size: clamp(0.82rem, 0.5vw + 0.55rem, 0.95rem);
  color: var(--wp--preset--color--ink); text-decoration: none;
  border-bottom: 2px solid transparent; transition: color var(--fac-ease), border-color var(--fac-ease); }
.fac-nav-item:hover > .fac-nav-link, .fac-nav-item:focus-within > .fac-nav-link { color: var(--wp--preset--color--accent); border-bottom-color: var(--wp--preset--color--accent); }
.fac-nav-all .fac-nav-link { color: var(--wp--preset--color--accent); }
.fac-mega-toggle { display: none; }

.fac-mega { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 540px;
  background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md); box-shadow: var(--wp--custom--shadow--raised);
  padding: 1.25rem 1.4rem; margin-top: -1px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--fac-ease), transform var(--fac-ease), visibility var(--fac-ease); }
.fac-nav-item.has-mega:hover > .fac-mega, .fac-nav-item.has-mega:focus-within > .fac-mega {
  opacity: 1; visibility: visible; transform: none; }
/* right-align panels for the last items so they don't overflow the viewport */
.fac-nav-item:nth-last-child(-n+3) .fac-mega { left: auto; right: 0; }
.fac-mega-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.fac-mega-title { font-family: var(--wp--preset--font-family--heading); font-weight: 800; color: var(--wp--preset--color--steel); }
.fac-mega-all { color: var(--wp--preset--color--accent); font-weight: 600; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.fac-mega-cols { columns: 210px auto; column-gap: 1.75rem; }
.fac-mega-link { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  padding: 0.32rem 0; text-decoration: none; break-inside: avoid; }
.fac-mega-link span { color: var(--wp--preset--color--ink); font-size: 0.9rem; }
.fac-mega-link em { color: var(--wp--preset--color--steel-soft); font-style: normal; font-size: 0.78rem; }
.fac-mega-link:hover span { color: var(--wp--preset--color--accent); }

/* ---- Mobile: hamburger drawer + accordion ------------------------------- */
@media (max-width: 1024px) {
  .fac-header-top { flex-wrap: wrap; }
  .fac-search { order: 3; flex-basis: 100%; max-width: none; }
  .fac-header-nav { border-top: 0; }
  /* keep the header narrow on mobile: icon+count cart (no price), smaller logo */
  .fac-header .wc-block-mini-cart__amount { display: none !important; }
  .fac-brand .custom-logo, .fac-brand .wp-block-site-logo img { width: 160px !important; max-height: 36px; }
  .fac-nav-list { justify-content: flex-start; }

  .fac-nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.8rem 0; background: none; border: 0; cursor: pointer;
    font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--steel); }
  .fac-nav-list { display: none; flex-direction: column; gap: 0; border-top: 1px solid var(--wp--preset--color--border); }
  .fac-meganav.is-open .fac-nav-list { display: flex; }
  .fac-nav-item { border-bottom: 1px solid var(--wp--preset--color--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .fac-nav-link { padding: 0.9rem 0; flex: 1 1 auto; border-bottom: 0; }
  .fac-mega-toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; background: none; border: 0; cursor: pointer; color: var(--wp--preset--color--steel-soft); }
  .fac-mega-toggle svg { transition: transform var(--fac-ease); }
  .fac-nav-item.is-expanded .fac-mega-toggle svg { transform: rotate(180deg); }
  .fac-mega { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0.9rem; margin: 0; display: none; flex-basis: 100%; }
  .fac-nav-item.is-expanded .fac-mega { display: block; }
  .fac-mega-cols { columns: 1; }
  .fac-mega-head { border: 0; margin-bottom: 0.3rem; padding-bottom: 0.3rem; }
}

/* ---- Accessible focus ring --------------------------------------------- */
:where(a, button, .wp-block-button__link):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent-bright);
  outline-offset: 2px;
}