:root {
  --ecb-gold: #e0c97a;          /* on dark surfaces */
  --ecb-gold-deep: #9a7b2e;   /* accessible gold on light surfaces */
  --ecb-dark: #0d0d0d;
  --ecb-ink: #1e1e1e;
  --ecb-cream: #faf8f4;
  --ecb-hero-ink: #141210;
  --ecb-line: #e7e3db;
}

h1,h2,h3,h4,h5,h6,
.woocommerce-loop-product__title,
.site-title, .wp-block-button__link { font-family:'Oswald',sans-serif !important; }

/* header — light; the logo is a transparent-background variant */
.site-header, .ast-main-header-wrap, .main-header-bar,
.ast-primary-header-bar, .ast-above-header-bar { background-color:#ffffff !important; }
.site-header { border-bottom:1px solid var(--ecb-line) !important; box-shadow:0 1px 0 rgba(0,0,0,.02); }
/* the logo already carries the wordmark — hide the duplicated text title */
.site-header .site-title, .ast-site-identity .site-title,
.site-header .site-description { position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.custom-logo-link img, .ast-site-identity img { display:block; }
.main-header-bar .main-header-menu > li > a,
.ast-builder-menu .main-header-menu > li > a { color: var(--ecb-ink) !important; letter-spacing:.5px; }
.main-header-bar .main-header-menu > li > a:hover,
.ast-builder-menu .main-header-menu > li > a:hover,
.main-header-menu .current-menu-item > a { color: var(--ecb-gold-deep) !important; }
.ast-header-break-point .ast-mobile-menu-trigger-minimal { color: var(--ecb-ink) !important; }
.ast-builder-menu .sub-menu { background:#fff !important; border:1px solid var(--ecb-line); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.ast-builder-menu .sub-menu a { color:#3d3d3d !important; }
.ast-builder-menu .sub-menu a:hover { color: var(--ecb-gold-deep) !important; background:#faf8f4; }

/* ============================ hero (split) ============================ */
/* Astra constrains direct children of .entry-content to the content width, so the
   break-out needs to match that specificity — .alignfull alone is not enough here. */
.entry-content > .ecb-hero,
.entry-content > .ecb-usp-wrap,
.entry-content > .ecb-brands-wrap {
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}
.ecb-hero {
  display:grid; grid-template-columns:46% 54%; min-height:620px; align-items:stretch;
  background: var(--ecb-hero-ink);
}
/* the homepage opens on the hero — no container padding above it */
.home .site-content > .ast-container { padding-top:0 !important; }
.home .entry-content > *:first-child { margin-top:0 !important; }

.ecb-hero .pane { display:flex; align-items:center; background: var(--ecb-hero-ink); }
.ecb-hero .inner { max-width:600px; margin-left:auto; padding:80px 64px 80px 40px; }
.ecb-hero .eyebrow {
  font-size:12.5px; letter-spacing:3.2px; text-transform:uppercase;
  color: var(--ecb-gold); margin:0 0 18px; font-weight:600;
}
.ecb-hero h1 {
  font-family:'Oswald',sans-serif; font-size:56px; line-height:1.04; font-weight:700;
  color:#fff !important; margin:0 0 20px; letter-spacing:-.5px;
}
.ecb-hero .lead { font-size:16.5px; line-height:1.75; color:#b9b2a8; margin:0 0 32px; max-width:46ch; }
.ecb-hero .btns { display:flex; flex-wrap:wrap; gap:14px; }
.ecb-hero .btns a {
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:1.3px; text-transform:uppercase;
  font-weight:600; padding:15px 30px; border-radius:2px; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.ecb-hero .btns .primary { background: var(--ecb-gold); color:#1c1a17 !important; }
.ecb-hero .btns .primary:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(224,201,122,.28); }
.ecb-hero .btns .ghost { color:#fff !important; border:2px solid rgba(255,255,255,.55); padding:13px 28px; }
.ecb-hero .btns .ghost:hover { border-color: var(--ecb-gold); color: var(--ecb-gold) !important; }
.ecb-hero .meta {
  list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin:34px 0 0; padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.ecb-hero .meta li {
  font-size:12.5px; letter-spacing:.6px; color:#9c958b; text-transform:uppercase; position:relative; padding-left:16px;
}
.ecb-hero .meta li::before {
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px; background: var(--ecb-gold); border-radius:50%;
}
.ecb-hero .shot { position:relative; overflow:hidden; min-height:600px; }
.ecb-hero .shot .slide {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease;
}
.ecb-hero .shot .slide.is-on { opacity:1; }
.ecb-hero .shot::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, var(--ecb-hero-ink) 0%, rgba(20,18,16,.35) 22%, transparent 55%);
}
.ecb-hero .tag {
  position:absolute; left:0; bottom:0; z-index:3; background: var(--ecb-gold); color:#1c1a17;
  font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase;
  padding:12px 22px; font-weight:600;
}
.ecb-hero .dots { position:absolute; right:22px; bottom:22px; z-index:3; display:flex; gap:8px; }
.ecb-hero .dots .dot {
  width:9px; height:9px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.4); transition:background .2s ease, transform .2s ease;
}
.ecb-hero .dots .dot.is-on { background: var(--ecb-gold); transform:scale(1.25); }
/* A `1fr` grid track carries an implicit min-width:auto, so a single long
 * unbreakable word stretches the track past the viewport. Dutch and German
 * compounds ("distikstofoxide", "Lebensmittelqualität") do exactly that — the
 * Dutch home page was scrolling 410px wide in a 390px viewport. min-width:0
 * lets the track shrink; the wrap rules stop the word itself overflowing. */
.ecb-hero > *, .ecb-hero .pane, .ecb-hero .shot, .ecb-hero .inner { min-width:0; }
.ecb-hero h1, .ecb-hero .lead, .ecb-hero .eyebrow { overflow-wrap:break-word; }

@media (max-width:980px){
  .ecb-hero { grid-template-columns:minmax(0,1fr); min-height:0; }
  .ecb-hero .inner { max-width:100%; margin:0; padding:56px 24px; }
  .ecb-hero h1 { font-size:38px; }
  .ecb-hero .shot { min-height:340px; order:-1; }
  .ecb-hero .shot::before { background:linear-gradient(180deg, transparent 40%, var(--ecb-hero-ink) 100%); }
}

/* footer — light, so black is reserved for type and the hero imagery */
.site-footer, .ast-footer-overlay, .site-below-footer-wrap, .site-primary-footer-wrap {
  background-color: var(--ecb-hero-ink) !important; color:#a7a099 !important; border-top:0;
}
.ecb-footer-logo { display:inline-block; margin:0 0 14px; }
.ecb-footer-logo img { width:210px; height:auto; display:block; }
@media (max-width:600px){ .ecb-footer-logo img { width:180px; } }
.site-footer a, .site-below-footer-wrap a { color:#d6cfc6 !important; }

/* multi-column footer (Google Merchant Center: contact, policies, business identity) */
.ecb-footer { text-align:left; max-width:1200px; margin:0 auto; padding:8px 0 0; }
.ecb-footer .ecb-cols {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:38px; align-items:start;
}
.ecb-footer h4 {
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
  color:#fff !important; margin:0 0 14px; font-weight:600;
}
.ecb-footer p, .ecb-footer li { font-size:13.5px; line-height:1.85; color:#9c958c !important; margin:0; }
.ecb-footer ul { list-style:none; margin:0; padding:0; }
.ecb-footer a { color:#cfc8bf !important; text-decoration:none; }
.ecb-footer a:hover { color: var(--ecb-gold) !important; text-decoration:underline; }
.ecb-footer .ecb-brand {
  font-family:'Oswald',sans-serif; font-size:20px; color:#fff !important; font-weight:700; margin:0 0 10px;
}
.ecb-footer .ecb-legal { font-size:12.5px; color:#807a72 !important; line-height:1.9; margin-top:12px; }
.ecb-footer .ecb-legal strong { color:#ded7ce !important; font-weight:600; }
.ecb-footer .ecb-bar {
  border-top:1px solid rgba(255,255,255,.10); margin-top:34px; padding-top:18px;
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center;
}
.ecb-footer .ecb-bar p { font-size:12.5px; color:#7f786f !important; }
.ecb-footer .ecb-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
@media (max-width:600px){ .ecb-footer .ecb-badges { justify-content:flex-start; } }
.ecb-footer .ecb-badge {
  display:inline-block; border:1px solid var(--ecb-line); background:#fff; border-radius:2px;
  padding:4px 10px; font-size:11.5px; letter-spacing:.4px; color:#6b6b6b !important; white-space:nowrap;
}
.ecb-footer .ecb-todo { color: var(--ecb-gold) !important; font-weight:600; }
@media (max-width:1024px){ .ecb-footer .ecb-cols { grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:600px){
  .ecb-footer .ecb-cols { grid-template-columns:1fr; gap:26px; }
  .ecb-footer .ecb-bar { flex-direction:column; align-items:flex-start; }
}

/* product cards */
.woocommerce ul.products li.product { transition: transform .18s ease, box-shadow .18s ease; }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.10); }
.woocommerce ul.products li.product .price { color: var(--ecb-dark) !important; font-weight:600; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:15px !important; line-height:1.35; }
/* category tiles: contained image + solid label band (Astra overlays the title by default) */
.woocommerce ul.products li.product-category {
  background:#fff; border:1px solid #ececec; border-radius:3px; overflow:hidden; padding:0 !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product-category:hover {
  border-color:#ddd2a8; box-shadow:0 12px 30px rgba(0,0,0,.09); transform:translateY(-3px);
}
/* li.product-category also carries .product, so undo the flex layout applied to
   product cards — otherwise the image stretches and clips the label band away */
.woocommerce ul.products li.product-category { display:block !important; }

/* The row used to sit off-centre under a centred heading: the shortcode asks for
   four columns and only three categories exist, so WooCommerce left an empty
   fourth track and the cards stopped 305px short of the container's right edge.
   auto-fit collapses the empty track, so three cards fill and centre the row —
   and a fourth category, if one is ever added, still lands correctly with no
   change to the page content. Scoped with :has() so it cannot touch the product
   grid further down the page, which shares the .products.columns-4 markup and is
   correct as it stands. */
.woocommerce ul.products:has(> li.product-category) {
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* The anchor is inline-block, so it shrink-wrapped the 300px image and never
   filled the card. That went unnoticed while cards were 285px wide — the
   oversized image was simply clamped by max-width and looked full-bleed. */
.woocommerce ul.products li.product-category > a {
  display:block !important; width:100% !important; height:auto !important;
}
/* Edge to edge, no padding. The three source images are not the same KIND of
   picture — two are cut-out products on white, one is a dark lifestyle photo —
   and the old 20px padding framed the photo in a white gutter, which made it
   read as a pasted rectangle while the others floated. Filling the square makes
   the set consistent whatever the asset. cover + a square ratio reproduces the
   same centre crop the 300x300 thumbnail already had, so the framing is
   unchanged; see the subcategory_archive_thumbnail_size filter in ecb-chrome.php
   for where the sharper source comes from. */
.woocommerce ul.products li.product-category img {
  width:100% !important; height:auto !important; max-height:none;
  aspect-ratio:1/1; object-fit:cover;
  background:#fff; padding:0 !important; margin:0 !important;
  display:block; align-self:auto; transition:transform .5s ease;
}
.woocommerce ul.products li.product-category:hover img { transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){
  .woocommerce ul.products li.product-category img { transition:none; }
  .woocommerce ul.products li.product-category:hover img { transform:none; }
}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  position:static !important; transform:none !important; inset:auto !important;
  background: var(--ecb-dark) !important; color:#fff !important;
  margin:0 !important; padding:14px 12px !important; text-align:center; width:100%;
  font-size:14.5px !important; letter-spacing:.9px; text-transform:uppercase; font-weight:600;
}
.woocommerce ul.products li.product-category h2 .count {
  display:block; background:none !important; color: var(--ecb-gold) !important;
  font-size:11.5px; letter-spacing:1.1px; margin-top:5px; padding:0; font-weight:400;
}

/* buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt,
.woocommerce ul.products li.product .button {
  background: var(--ecb-dark) !important; color:#fff !important; border-radius:2px !important;
  text-transform:uppercase; letter-spacing:.6px; font-weight:600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover, .woocommerce ul.products li.product .button:hover {
  background: var(--ecb-gold) !important; color: var(--ecb-dark) !important;
}
.ecb-outline-btn .wp-block-button__link:hover {
  background: var(--ecb-gold) !important; border-color: var(--ecb-gold) !important; color: var(--ecb-dark) !important;
}

.wp-block-cover h1, .wp-block-cover h2 { color:#fff !important; }

/* --- lighter, warmer surface treatment --- */
body, .site { background:#fff; }
.ecb-cta { border-top:1px solid var(--ecb-line); border-bottom:1px solid var(--ecb-line); }
.ecb-cta h2::after { background: var(--ecb-gold-deep) !important; }
.ecb-usp-wrap { background:#fff; border-bottom:1px solid var(--ecb-line); }
.ecb-usp-item svg { color: var(--ecb-gold-deep); }
.wp-block-group h2.wp-block-heading::after { background: var(--ecb-gold-deep); }
.woocommerce ul.products li.product,
.ecb-why .wp-block-column { border-color: var(--ecb-line); }
.woocommerce ul.products li.product-category { border-color: var(--ecb-line); }
/* category label band stays dark for contrast, but softened off pure black */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  background:#232323 !important;
}
.woocommerce ul.products li.product-category h2 .count { color:#d8bf7f !important; }
/* buttons: ink, with gold on hover — reads premium on light surfaces */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt,
.woocommerce ul.products li.product .button { background: var(--ecb-ink) !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover, .woocommerce ul.products li.product .button:hover {
  background: var(--ecb-gold-deep) !important; color:#fff !important;
}
.single-product div.product .price { color: var(--ecb-ink) !important; }
.single-product div.product .woocommerce-product-details__short-description { border-left-color: var(--ecb-gold-deep); }
.single-product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--ecb-gold-deep); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--ecb-gold-deep); }
/* ======================= header & footer: signature styling ================== */

/* NOTE — one deliberate exception to "all site CSS lives here": the WhatsApp
   widget (.ecb-wa*, incl. the floating button and the .ecb-topbar .ecb-wa-link
   entry below) is styled inside wp-content/mu-plugins/ecb-whatsapp.php. It is
   self-contained and namespaced, and keeping it there means re-running this
   script can never leave a fixed-position green button unstyled sitewide. */

/* utility strip — warm espresso, not black; reads as a rule, not a slab */
.ecb-topbar {
  background:linear-gradient(90deg,#e6d29a 0%, var(--ecb-gold) 48%, #d3ba76 100%) !important;
  color:#4a4133 !important; border-bottom:0 !important; font-size:12.5px; font-weight:500;
}
.ecb-topbar a { color:#2e2820 !important; font-weight:600; }
.ecb-topbar a:hover { color:#000 !important; }
.ecb-topbar .sep { color:rgba(74,65,51,.35) !important; }
.ecb-topbar strong { color:#1c1a17 !important; letter-spacing:.6px; text-transform:uppercase; }
.ecb-topbar .in { padding:9px 20px; }

/* language switcher in the utility bar (TranslatePress) */
.ecb-topbar .in > div { display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; }
.ecb-lang { display:inline-flex; align-items:center; margin-left:6px; }
.ecb-lang .trp-shortcode-switcher__wrapper {
  --bg: rgba(255,255,255,.55) !important;
  --bg-hover: #ffffff !important;
  --text: #2e2820 !important;
  --text-hover: #1c1a17 !important;
  --border: 1px solid rgba(74,65,51,.28) !important;
  --border-color: rgba(74,65,51,.28) !important;
  --border-radius: 2px !important;
  --font-size: 12px !important;
  --flag-size: 14px !important;
  line-height:1.2;
}
.ecb-lang .trp-shortcode-switcher__wrapper * { font-weight:600 !important; }
/* TP renders an in-flow anchor plus an absolutely positioned interactive copy;
   pin the copy to the top of the wrapper and strip its vertical padding */
.ecb-lang .trp-shortcode-switcher__wrapper > .trp-language-switcher { top:0 !important; padding:0 !important; }
.ecb-lang .trp-language-switcher.trp-shortcode-switcher { padding:0 !important; }

/* compact the switcher so it fits the slim utility bar */
.ecb-lang .trp-shortcode-switcher__wrapper { height:26px !important; min-height:0 !important; }
.ecb-lang .trp-language-switcher { height:26px !important; min-height:0 !important; }
.ecb-lang .trp-current-language-item__wrapper,
.ecb-lang .trp-current-language-item {
  height:26px !important; min-height:0 !important; padding:0 22px 0 8px !important;
  display:flex !important; align-items:center !important; font-size:12px !important;
}
.ecb-lang .trp-language-switcher__list,
.ecb-lang .trp-ls-dropdown__list {
  position:absolute !important; top:100% !important; right:0 !important; left:auto !important;
  min-width:150px; z-index:130;
}
.ecb-lang img, .ecb-lang .trp-flag-image { width:14px !important; height:auto !important; }

/* the dropdown must overlay, never expand the bar */
.ecb-lang .trp-shortcode-switcher__wrapper { position:relative; z-index:120; }
.ecb-topbar { position:relative; z-index:110; overflow:visible; }
@media (max-width:768px){
  .ecb-topbar .in { justify-content:center; }
  /* The switcher wraps onto its own line here. It must size to its control
   * (~158px), not stretch the full row — full width reads as a broken form
   * field rather than a language chip. */
  .ecb-lang { margin:2px auto 0; width:auto; flex:0 0 auto; justify-content:center; }
  /* Separators left dangling once their neighbour is hidden, or once the
   * switcher has wrapped away from them. CSS cannot select "previous sibling
   * of a hidden element", so both are tagged in the markup instead. */
  .ecb-topbar .sep-lang { display:none; }
}
@media (max-width:600px){
  .ecb-topbar .in { padding:6px 14px; gap:1px 0; row-gap:2px; }
  .ecb-topbar .in > div { justify-content:center; width:100%; gap:0 6px; }
  .ecb-topbar { font-size:12.5px; }
  .ecb-topbar strong { letter-spacing:.4px; }
}

/* main bar: white, sticky, with a gold hairline that anchors the brand colour */
.ast-main-header-wrap, .main-header-bar-wrap {
  position:sticky; top:0; z-index:99;
  background:#fff !important;
  box-shadow:0 1px 0 var(--ecb-line);
  transition:box-shadow .2s ease;
}
.admin-bar .ast-main-header-wrap, .admin-bar .main-header-bar-wrap { top:32px; }
.site-header { border-bottom:0 !important; position:relative; }
.site-header::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg,
    transparent 0%, rgba(154,123,46,.25) 12%, var(--ecb-gold) 50%,
    rgba(154,123,46,.25) 88%, transparent 100%);
}
.main-header-bar { padding-top:0; padding-bottom:0; }
/* logo height is set once, further down under "header logo sizing" — a second
 * declaration here would be dead weight, since that one comes later and wins */

/* One row, everything on the same optical centre line.
 * Astra lets the menu <ul> wrap, which is how the cart ended up on a line of its
 * own below the nav. nowrap keeps brand | nav | cart | CTA on a single row and
 * the sizes below are what make that fit down to 1024px.
 *
 * MUST stay inside the desktop query. Unscoped, `display:flex; nowrap` forces the
 * collapsed mobile menu into a row too: items squash to ~16px with no tap target
 * and the CTA and cart get pushed out of view entirely. */
@media (min-width:922px){
  .main-header-bar .ast-container,
  .main-header-bar .main-header-container,
  .main-header-bar .ast-flex.main-header-container { align-items:center; }
  .main-header-bar .site-branding { display:flex; align-items:center; }
  .main-header-bar-navigation > .main-header-menu,
  .main-header-bar .main-header-menu {
    display:flex; flex-wrap:nowrap; align-items:center;
  }
  .main-header-bar .main-header-menu > li { display:flex; align-items:center; }
}

/* nav: refined spacing, gold underline, small-caps feel */
.ast-builder-menu .main-header-menu > li > a,
.main-header-bar .main-header-menu > li > a {
  font-size:13px !important; letter-spacing:1px; text-transform:uppercase; font-weight:500;
  padding-left:13px; padding-right:13px;
  line-height:1.2 !important; height:auto !important; min-height:0 !important;
  white-space:nowrap;
}
@media (min-width:922px){
  .main-header-bar .main-header-menu > li > a { padding-top:30px; padding-bottom:30px; }
  .main-header-bar .main-header-menu > li.ecb-nav-cta > a,
  .main-header-bar .main-header-menu > li.ecb-cart-item > a { padding-top:12px; padding-bottom:12px; }
}
/* dropdowns must still sit below the full bar, not below the shrunken link */
.main-header-menu .sub-menu { top:100%; }
@media (max-width:1200px){
  .ast-builder-menu .main-header-menu > li > a,
  .main-header-bar .main-header-menu > li > a { padding-left:10px; padding-right:10px; letter-spacing:.6px; }
}
.ast-builder-menu .main-header-menu > li > a::after { bottom:10px; height:2px; }

/* the trade CTA sitting in the nav */
/* Astra stretches menu links to the full bar height — the CTA must not */
.main-header-menu li.ecb-nav-cta,
.ast-builder-menu .main-header-menu li.ecb-nav-cta {
  display:flex; align-items:center; margin-left:14px;
}
.main-header-menu li.ecb-nav-cta > a,
.ast-builder-menu .main-header-menu li.ecb-nav-cta > a {
  background: var(--ecb-ink); color:#fff !important;
  border-radius:2px;
  height:auto !important; min-height:0 !important; line-height:1.15 !important;
  padding:12px 22px !important; margin:0 !important; align-self:center;
  font-family:'Oswald',sans-serif; font-size:13px !important; letter-spacing:1.2px;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.main-header-menu li.ecb-nav-cta > a .sub-arrow { display:none; }
.main-header-menu li.ecb-nav-cta > a:hover {
  background: var(--ecb-gold-deep); color:#fff !important;
  transform:translateY(-1px); box-shadow:0 8px 18px rgba(154,123,46,.28);
}
.main-header-menu li.ecb-nav-cta > a::after { display:none !important; }
.ast-header-break-point .main-header-menu li.ecb-nav-cta > a { margin-left:0; text-align:center; }

/* ------------------------------ footer ------------------------------ */
.ecb-footer { padding-top:0; }

/* gold panel that opens the footer */
.ecb-foot-cta {
  display:flex; flex-wrap:wrap; gap:20px 34px; align-items:center; justify-content:space-between;
  background:linear-gradient(120deg, #e6d29a 0%, var(--ecb-gold) 46%, #cbb069 100%);
  border-radius:4px; padding:26px 32px; margin:0 0 46px;
  box-shadow:0 14px 34px rgba(154,123,46,.18);
}
.ecb-foot-cta .k {
  font-family:'Oswald',sans-serif; font-size:23px; font-weight:700; color:#1c1a17 !important;
  margin:0 0 4px; letter-spacing:.2px;
}
.ecb-foot-cta .s { font-size:13.5px; color:#4a4133 !important; margin:0; }
.ecb-foot-cta .btn {
  background:#1c1a17; color:#fff !important; text-decoration:none;
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:1.2px; text-transform:uppercase;
  padding:14px 30px; border-radius:2px; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ecb-foot-cta .btn:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(28,26,23,.3); color:#fff !important; }

/* column headings get a short gold rule */
.ecb-footer h4 { position:relative; padding-bottom:12px; margin-bottom:16px !important; }
.ecb-footer h4::after {
  content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background: var(--ecb-gold);
}
.ecb-footer .ecb-cols { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; }
.ecb-footer .col-brand p { max-width:34ch; }
.ecb-footer ul li { padding:3px 0; }
.ecb-footer ul li a { position:relative; }
.ecb-footer ul li a:hover { text-decoration:none; padding-left:3px; transition:padding .15s ease; }
.ecb-footer-logo img { width:230px; }

/* bottom bar as a warm strip, edge to edge inside the footer */
.ecb-footer .ecb-bar { margin-top:44px; padding:20px 0 0; background:none; border-top:1px solid rgba(255,255,255,.10); }
.ecb-footer .ecb-bar p { color:#9b948b !important; }
.ecb-footer .ecb-badge {
  background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.14) !important;
  color:#cfc7bc !important;
}

/* Home-page vertical rhythm: the full-width bands each carry their own
 * padding, so adjacent boundaries were stacking to ~150px of dead space.
 * Trimmed at source in the block markup; these rules catch what the theme
 * and WooCommerce add on top. */
.home .entry-content > * { margin-block-start:0; margin-block-end:0; }
.home .wp-block-group .woocommerce { margin-bottom:0; }
.home .woocommerce ul.products { margin-bottom:0; }
.home .wc-block-grid__products, .home ul.products { row-gap:26px; }
.home .ecb-usp-wrap + .wp-block-group { border-top:1px solid var(--ecb-line); }

/* ---------------------------------------------------------------
 * Home-page content sections: format table, ordering steps, FAQ.
 *
 * These sit between WooCommerce blocks that carry their own inline
 * background colours, so each band is given a hairline rule and its own
 * internal card weight rather than a background — that way the rhythm
 * survives whatever the neighbouring block decides to paint.
 * --------------------------------------------------------------- */
.ecb-formats-sec, .ecb-steps-sec, .ecb-faq-sec { border-top:1px solid var(--ecb-line); }
.ecb-sec-head { max-width:820px; margin:0 auto 28px; text-align:center; }
.ecb-sec-head h2 {
  font-family:'Oswald',sans-serif; font-size:34px; font-weight:700; line-height:1.15;
  margin:0 0 12px; color: var(--ecb-dark);
}
.ecb-sec-lead { color:#5f5a53; font-size:17px; line-height:1.7; margin:0; }
.ecb-sec-note { margin:24px auto 0; max-width:900px; text-align:center; font-size:15px; line-height:1.75; color:#5f5a53; }
.ecb-sec-note a, .ecb-faq a { color: var(--ecb-gold-deep); text-decoration:underline; text-underline-offset:2px; }
.ecb-sec-note a:hover, .ecb-faq a:hover { color: var(--ecb-dark); }

/* format comparison table */
.ecb-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.ecb-formats {
  width:100%; border-collapse:collapse; min-width:640px;
  border:1px solid var(--ecb-line); background:#fff;
}
table.ecb-formats thead th {
  background: var(--ecb-dark); color:#fff; text-align:left;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.1px; text-transform:uppercase;
  padding:14px 18px; font-weight:500;
}
table.ecb-formats tbody th, table.ecb-formats tbody td {
  padding:15px 18px; border-top:1px solid var(--ecb-line); font-size:15px; vertical-align:top;
}
table.ecb-formats tbody th {
  text-align:left; font-family:'Oswald',sans-serif; font-size:17px; font-weight:600;
  color: var(--ecb-dark); white-space:nowrap;
}
table.ecb-formats tbody tr:nth-child(odd) { background:#faf8f4; }
table.ecb-formats tbody tr:hover { background:rgba(224,201,122,.16); }
table.ecb-formats td a { color: var(--ecb-gold-deep); text-decoration:none; border-bottom:1px solid rgba(154,123,46,.35); }
table.ecb-formats td a:hover { color: var(--ecb-dark); border-bottom-color: var(--ecb-dark); }
.ecb-formats .ecb-alt { color:#8a8279; font-weight:400; font-size:14px; }

/* ordering steps */
ol.ecb-steps {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
ol.ecb-steps > li {
  position:relative; background:#fff; border:1px solid var(--ecb-line);
  border-top:3px solid var(--ecb-gold); padding:24px 24px 22px;
}
ol.ecb-steps .n {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background: var(--ecb-dark); color:#fff;
  font-family:'Oswald',sans-serif; font-size:15px; margin-bottom:14px;
}
ol.ecb-steps h3 {
  font-family:'Oswald',sans-serif; font-size:19px; font-weight:600;
  margin:0 0 10px; color: var(--ecb-dark);
}
ol.ecb-steps p { margin:0; color:#5f5a53; font-size:15px; line-height:1.7; }

/* key commercial facts */
.ecb-factgrid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:24px; background: var(--ecb-line); border:1px solid var(--ecb-line);
}
.ecb-factgrid > div { background:#fff; padding:20px 22px; text-align:center; }
.ecb-factgrid .k {
  display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#8a8279; margin-bottom:6px;
}
.ecb-factgrid .v {
  display:block; font-family:'Oswald',sans-serif; font-size:20px; color: var(--ecb-dark);
}

/* FAQ accordion */
.ecb-faq { max-width:880px; margin:0 auto; border-top:1px solid var(--ecb-line); }
.ecb-faq details { border-bottom:1px solid var(--ecb-line); }
.ecb-faq summary {
  cursor:pointer; list-style:none; padding:20px 44px 20px 2px; position:relative;
  font-family:'Oswald',sans-serif; font-size:18px; color: var(--ecb-dark);
}
.ecb-faq summary::-webkit-details-marker { display:none; }
.ecb-faq summary::after {
  content:""; position:absolute; right:10px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--ecb-gold-deep); border-bottom:2px solid var(--ecb-gold-deep);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.ecb-faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.ecb-faq summary:hover { color: var(--ecb-gold-deep); }
.ecb-faq details > div { padding:0 44px 22px 2px; }
.ecb-faq details p { margin:0; color:#5f5a53; font-size:15.5px; line-height:1.75; }

@media (max-width:900px){
  .ecb-sec-head h2 { font-size:29px; }
  ol.ecb-steps { grid-template-columns:1fr; gap:18px; }
  .ecb-factgrid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .ecb-formats-sec, .ecb-steps-sec, .ecb-faq-sec { padding-top:38px !important; padding-bottom:38px !important; }
  .ecb-sec-head h2 { font-size:25px; }
  .ecb-factgrid { grid-template-columns:1fr; }
  .ecb-faq summary { font-size:16px; }
}


/* ---------------------------------------------------------------
 * Collapsed (mobile) menu.
 *
 * Astra stacks the items; everything here is about making them usable —
 * 48px tap targets, a rule between rows so the list reads as a list, the
 * trade CTA as a full-width button, and the cart suppressed because a copy
 * already sits next to the hamburger.
 * --------------------------------------------------------------- */
@media (max-width:921px){
  .ast-header-break-point .main-header-bar-navigation .main-header-menu {
    display:block !important; flex-wrap:wrap !important;
    background:#fff; border-top:1px solid var(--ecb-line);
    padding:4px 0 10px;
  }
  .ast-header-break-point .main-header-bar-navigation .main-header-menu > li,
  .ast-header-break-point .main-header-bar-navigation .main-header-menu > li > a,
  .ast-header-break-point .main-header-menu li.ecb-nav-cta,
  .ast-header-break-point .main-header-menu li.ecb-nav-cta > a { box-sizing:border-box; }
  .ast-header-break-point .main-header-bar-navigation .main-header-menu > li {
    display:block !important; width:100%; max-width:100%; border-bottom:1px solid var(--ecb-line);
  }
  .ast-header-break-point .main-header-bar-navigation,
  .ast-header-break-point .main-header-bar-navigation .main-header-menu { max-width:100%; overflow-x:hidden; }
  .ast-header-break-point .main-header-bar-navigation .main-header-menu > li:last-child { border-bottom:0; }
  .ast-header-break-point .main-header-bar-navigation .main-header-menu > li > a,
  .ast-header-break-point .main-header-bar-navigation .main-header-menu .sub-menu > li > a {
    display:block; padding:15px 20px !important; min-height:48px;
    line-height:1.5 !important; height:auto !important;
    font-size:14px !important; letter-spacing:1px;
  }
  .ast-header-break-point .main-header-bar-navigation .main-header-menu .sub-menu > li > a {
    padding-left:36px !important; font-size:13px !important; color:#6b645b !important;
  }
  /* the trade CTA reads as a button, not another list row */
  /* Astra indents collapsed menu items, which left the CTA 34px from the left
   * edge and 6px from the right. Reset the inherited indent so it centres. */
  .ast-header-break-point .main-header-bar-navigation .main-header-menu li.ecb-nav-cta,
  .ast-header-break-point .main-header-menu li.ecb-nav-cta {
    padding:14px 20px !important; margin:0 !important; border-bottom:0;
  }
  .ast-header-break-point .main-header-bar-navigation .main-header-menu li.ecb-nav-cta > a {
    margin:0 !important; width:100%;
  }
  /* The background needs !important: Astra's own collapsed-menu anchor rule
   * wins otherwise, and since the white text already carries !important the
   * result is white-on-white — a button that occupies 73px and is invisible. */
  .ast-header-break-point .main-header-bar-navigation .main-header-menu li.ecb-nav-cta > a,
  .ast-header-break-point .main-header-menu li.ecb-nav-cta > a {
    display:block !important; text-align:center; padding:14px 18px !important;
    background: var(--ecb-dark) !important; color:#fff !important;
    border-radius:2px; min-height:48px; line-height:1.4 !important;
  }
  .ast-header-break-point .main-header-menu li.ecb-nav-cta > a:hover {
    background: var(--ecb-gold-deep) !important; color:#fff !important;
  }
  /* a cart already sits beside the hamburger — don't repeat it in the list */
  .ast-header-break-point .main-header-menu li.ecb-cart-item { display:none !important; }
}

/* ---------------------------------------------------------------
 * Cart control in the primary nav (rendered by mu-plugins/ecb-chrome.php).
 * --------------------------------------------------------------- */
.main-header-menu li.ecb-cart-item { display:flex; align-items:center; margin-left:8px; }
/* Astra stretches menu links to the full bar height and sets a matching
 * line-height — both have to be undone or the control renders as a tall empty
 * box with the icon sitting at the bottom of it. */
.main-header-menu li.ecb-cart-item > .ecb-cart,
.ecb-cart {
  display:inline-flex !important; align-items:center; gap:9px;
  height:auto !important; min-height:0 !important; line-height:1.15 !important;
  padding:11px 15px !important; margin:0 !important; align-self:center;
  border:1px solid rgba(20,18,16,.18); border-radius:2px;
  color: var(--ecb-ink) !important; text-decoration:none !important;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.ecb-cart::after { display:none !important; }
.ecb-cart:hover {
  border-color: var(--ecb-gold-deep); background:rgba(224,201,122,.14);
  color: var(--ecb-gold-deep) !important;
}
.ecb-cart-ico {
  width:18px; height:18px; flex:0 0 18px; background-color: currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h2l.4%202M7%2013h10l3-8H5.4M7%2013%205.4%205M7%2013l-2%204h13%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h2l.4%202M7%2013h10l3-8H5.4M7%2013%205.4%205M7%2013l-2%204h13%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.ecb-cart-n {
  min-width:19px; height:19px; padding:0 5px; border-radius:19px;
  background: var(--ecb-gold-deep); color:#fff !important;
  font-size:11px; line-height:19px; text-align:center; font-family:inherit; letter-spacing:0;
}
/* Tight desktop widths: drop the word, keep the icon and the count. */
@media (max-width:1200px){
  .ecb-cart-label { display:none; }
  .ecb-cart { padding:11px 12px !important; gap:7px; }
}
/* Two copies exist: one in the nav, one beside the hamburger. Astra already
 * hides its mobile header row above the break point and the nav below it, so
 * they are naturally exclusive — the media query below only handles sizing. */
.ecb-cart-mobile { display:none; }
@media (max-width:921px){
  .ecb-cart-label { display:none; }
  .ecb-cart-mobile { display:flex; align-items:center; margin-right:10px; }
  .ecb-cart-mobile .ecb-cart { padding:9px 11px !important; }
  .ecb-cart-mobile .ecb-cart-n { min-width:17px; height:17px; line-height:17px; font-size:10px; }
}

/* ---------------------------------------------------------------
 * Language switcher: let the open dropdown escape the top bar.
 *
 * This lives HERE, not in build-switcher.php, because this file is the single
 * source of truth for site CSS and rewrites the Customizer's Additional CSS
 * wholesale on every run. The fix was originally written straight to the
 * database, so the next unrelated rebuild silently deleted it and the switcher
 * stopped opening — twice. Keeping it in the source of truth is the only way it
 * survives.
 *
 * The chip is pinned to 26px to fit the gold bar, and that selector also matches
 * the absolutely-positioned overlay, which TranslatePress gives overflow:hidden.
 * The panel was therefore clipped to 26px and invisible in every open mode.
 * overflow:visible frees it; the overlay keeps its 26px height, so the closed
 * chip and the bar are geometrically unchanged (measured: chip 26px, bar 42px).
 *
 * The open panel also needs an opaque background — the chip's --bg is
 * deliberately translucent, which is right for the pill but leaves the dropdown
 * see-through over the hero. Scoped to .is-open so the closed state is untouched.
 * --------------------------------------------------------------- */
.ecb-lang .trp-shortcode-overlay { overflow:visible !important; }
.ecb-lang .trp-shortcode-overlay.is-open .trp-switcher-dropdown-list {
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
  border-radius:0 0 5px 5px !important;
}

/* icons: CSS masks, because Astra's wp_kses_post strips inline <svg> */
.ecb-footer .ico {
  display:inline-block; width:16px; height:16px; flex:0 0 16px;
  background-color: var(--ecb-gold);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.ecb-footer .ico-phone { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.3%201.8.6%202.7a2%202%200%200%201-.5%202.1L8.1%209.7a16%2016%200%200%200%206%206l1.2-1.1a2%202%200%200%201%202.1-.5c.9.3%201.8.5%202.7.6a2%202%200%200%201%201.7%202Z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.3%201.8.6%202.7a2%202%200%200%201-.5%202.1L8.1%209.7a16%2016%200%200%200%206%206l1.2-1.1a2%202%200%200%201%202.1-.5c.9.3%201.8.5%202.7.6a2%202%200%200%201%201.7%202Z%22%2F%3E%3C%2Fsvg%3E"); }
.ecb-footer .ico-mail { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m2%207%2010%206%2010-6%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m2%207%2010%206%2010-6%22%2F%3E%3C%2Fsvg%3E"); }
.ecb-footer .ico-pin { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.ecb-footer .ico-clock { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.ecb-footer .ico-form { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8Z%22%2F%3E%3Cpath%20d%3D%22M14%202v6h6M9%2013h6M9%2017h4%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8Z%22%2F%3E%3Cpath%20d%3D%22M14%202v6h6M9%2013h6M9%2017h4%22%2F%3E%3C%2Fsvg%3E"); }
.ecb-footer .ico-check { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8.5%2012.2%202.4%202.4%204.6-4.8%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8.5%2012.2%202.4%202.4%204.6-4.8%22%2F%3E%3C%2Fsvg%3E"); }
.ecb-footer .ico-bank { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010h18M5%2010v8m4-8v8m6-8v8m4-8v8M2%2018h20M12%203%203%208h18Z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010h18M5%2010v8m4-8v8m6-8v8m4-8v8M2%2018h20M12%203%203%208h18Z%22%2F%3E%3C%2Fsvg%3E"); }

/* five-column layout: brand | boutique | marques | infos | contact */
.ecb-footer .ecb-cols { grid-template-columns:1.7fr .85fr .85fr 1.05fr 1.15fr; gap:40px; }

/* icon-led contact block */
.ecb-footer .ecb-contact li { display:flex; align-items:flex-start; gap:10px; padding:5px 0; }
.ecb-footer .ecb-contact .ico { width:16px; height:16px; flex:0 0 16px; margin-top:3px; color:var(--ecb-gold); opacity:.9; }
.ecb-footer .ecb-contact a, .ecb-footer .ecb-contact span { line-height:1.6; }

/* trust strip: real trade terms, not invented certifications */
.ecb-footer .ecb-trust {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 30px;
  margin-top:40px; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.10);
}
.ecb-footer .ecb-trust-list { display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; padding:0; list-style:none; }
.ecb-footer .ecb-trust-list li {
  display:flex; align-items:center; gap:8px; padding:0;
  font-size:12.5px; letter-spacing:.2px; color:#b3aca2 !important;
}
.ecb-footer .ecb-trust-list .ico { width:15px; height:15px; flex:0 0 15px; color:var(--ecb-gold); }

/* the one payment method that actually exists */
.ecb-footer .ecb-pay { display:flex; align-items:center; gap:12px; }
.ecb-footer .ecb-pay .k {
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:#8d867d !important;
}
.ecb-footer .ecb-pay .v {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.16); border-radius:3px; background:rgba(255,255,255,.05);
  padding:7px 12px; font-size:12.5px; color:#ded7ce !important; white-space:nowrap;
}
.ecb-footer .ecb-pay .ico { width:18px; height:18px; flex:0 0 18px; color:var(--ecb-gold); }

/* legal bar */
.ecb-footer .ecb-bar { margin-top:22px; }
.ecb-footer .ecb-bar-legal { font-size:12px; color:#7a736a !important; }

@media (max-width:1200px){ .ecb-footer .ecb-cols { grid-template-columns:1.5fr 1fr 1fr 1.1fr; } .ecb-footer .col-contact { grid-column:1 / -1; } }
@media (max-width:1024px){
  .ecb-footer .ecb-cols { grid-template-columns:1fr 1fr; gap:32px; }
  .ecb-footer .col-brand, .ecb-footer .col-contact { grid-column:auto; }
}
@media (max-width:600px){
  .ecb-footer .ecb-cols { grid-template-columns:1fr !important; gap:26px; }
  .ecb-footer .ecb-trust { flex-direction:column; align-items:flex-start; }
  .ecb-footer .ecb-trust-list { gap:8px 0; flex-direction:column; }
  .ecb-footer .ecb-pay { width:100%; justify-content:flex-start; }
}
@media (max-width:600px){
  .ecb-foot-cta { padding:22px; text-align:center; justify-content:center; }
  .ecb-foot-cta .btn { width:100%; text-align:center; }
  .ecb-footer .ecb-bar { padding:16px 18px; }
}

/* ========================= shop filter sidebar ========================= */
#secondary.widget-area, .ast-woocommerce-sidebar, .woocommerce-sidebar { padding-right:12px; }
#secondary .widget, .widget-area .widget {
  background:#fff; border:1px solid var(--ecb-line); border-radius:4px;
  padding:20px 20px 18px; margin-bottom:16px;
}
#secondary .widget-title, .widget-area .widget-title, #secondary .widgettitle {
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
  color: var(--ecb-ink); margin:0 0 14px; padding-bottom:11px; position:relative; font-weight:600;
  border-bottom:1px solid var(--ecb-line);
}
#secondary .widget-title::after, #secondary .widgettitle::after {
  content:""; position:absolute; left:0; bottom:-1px; width:30px; height:2px; background: var(--ecb-gold-deep);
}

/* lists */
#secondary .widget ul { list-style:none; margin:0; padding:0; }
#secondary .widget ul li {
  padding:7px 0; border-bottom:1px solid #f4f2ee; font-size:14px; line-height:1.5;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#secondary .widget ul li:last-child { border-bottom:0; padding-bottom:0; }
#secondary .widget ul li a { color:#40403d !important; text-decoration:none; flex:1; transition:color .15s ease; }
#secondary .widget ul li a:hover { color: var(--ecb-gold-deep) !important; }
#secondary .widget ul li .count {
  background:#f5f3ee; color:#8a857c; font-size:11.5px; border-radius:10px; padding:2px 8px; font-weight:500;
}
#secondary .widget ul li.chosen > a, #secondary .widget ul li.current-cat > a {
  color: var(--ecb-gold-deep) !important; font-weight:600;
}
#secondary .widget ul li.chosen { position:relative; }

/* search */
#secondary .woocommerce-product-search { display:flex; gap:0; }
#secondary .woocommerce-product-search .search-field {
  flex:1; min-width:0; border:1px solid #dcd8d0; border-right:0; border-radius:3px 0 0 3px;
  padding:10px 12px; font-size:14px; background:#fdfcfa;
}
#secondary .woocommerce-product-search .search-field:focus {
  outline:none; border-color: var(--ecb-gold-deep); background:#fff;
}
#secondary .woocommerce-product-search button[type=submit] {
  background: var(--ecb-ink) !important; color:#fff !important; border:0; border-radius:0 3px 3px 0;
  padding:10px 16px; font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:.8px;
  text-transform:uppercase; cursor:pointer;
}
#secondary .woocommerce-product-search button[type=submit]:hover { background: var(--ecb-gold-deep) !important; }

/* price slider */
#secondary .price_slider_wrapper .ui-slider {
  background:#eae6de; height:4px; border-radius:3px; border:0; margin:14px 0 18px;
}
#secondary .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--ecb-gold-deep); }
#secondary .price_slider_wrapper .ui-slider .ui-slider-handle {
  background:#fff; border:2px solid var(--ecb-gold-deep); width:15px; height:15px; border-radius:50%;
  top:-6px; margin-left:-7px; box-shadow:0 1px 4px rgba(0,0,0,.15);
}
#secondary .price_slider_amount { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
#secondary .price_slider_amount .price_label { font-size:13px; color:#6b6b6b; order:1; width:100%; margin-bottom:10px; }
#secondary .price_slider_amount .button {
  order:2; background: var(--ecb-ink) !important; color:#fff !important; border-radius:2px;
  font-size:12px !important; letter-spacing:.8px; padding:9px 18px !important;
}
#secondary .price_slider_amount .button:hover { background: var(--ecb-gold-deep) !important; }

/* active filters */
#secondary .woocommerce-widget-layered-nav-list__item--chosen a,
#secondary .widget_layered_nav_filters ul li a {
  color:#8a4b3c !important; font-weight:500;
}
#secondary .widget_layered_nav_filters ul li { border-bottom:0; padding:4px 0; }

/* trade CTA card */
.ecb-side-cta { }
#secondary .widget:has(.ecb-side-cta) { background: var(--ecb-hero-ink); border-color: var(--ecb-hero-ink); }
.ecb-side-cta .k {
  font-family:'Oswald',sans-serif; font-size:18px; color:#fff; margin:0 0 8px; font-weight:600;
}
.ecb-side-cta .s { font-size:13.5px; color:#a49d94; line-height:1.65; margin:0 0 16px; }
.ecb-side-cta .btn {
  display:block; text-align:center; background: var(--ecb-gold); color:#1c1a17 !important;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.1px; text-transform:uppercase;
  font-weight:600; padding:12px 16px; border-radius:2px; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.ecb-side-cta .btn:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(224,201,122,.25); }
.ecb-side-cta .pts { list-style:none; margin:16px 0 0 !important; padding:0 !important; }
.ecb-side-cta .pts li {
  border-bottom:0 !important; padding:5px 0 5px 16px !important; position:relative;
  font-size:12.5px; color:#928c83; display:block !important;
}
.ecb-side-cta .pts li::before {
  content:""; position:absolute; left:0; top:11px; width:5px; height:5px;
  background: var(--ecb-gold); border-radius:50%;
}

/* --- mobile: collapse the filters behind a toggle --- */
.ecb-filter-toggle { display:none; }

@media (max-width:921px){
  #secondary.widget-area { padding-right:0; margin-bottom:22px; }
  #secondary .widget { margin-bottom:12px; }

  .ecb-filter-toggle {
    display:flex; align-items:center; gap:12px; width:100%;
    background:#fff; border:1px solid var(--ecb-line); border-radius:4px;
    padding:15px 18px; cursor:pointer; margin:0; text-align:left;
    font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:1.1px;
    text-transform:uppercase; font-weight:600; color: var(--ecb-ink);
    box-shadow:0 2px 10px rgba(0,0,0,.04); transition:border-color .16s ease, box-shadow .16s ease;
  }
  .ecb-filter-toggle:hover, .ecb-filter-toggle[aria-expanded="true"] {
    border-color:#ddd2a8; box-shadow:0 6px 18px rgba(0,0,0,.07);
  }
  .ecb-filter-toggle .ico { display:flex; color: var(--ecb-gold-deep); }
  .ecb-filter-toggle .ico svg { width:19px; height:19px; }
  .ecb-filter-toggle .lbl { flex:1; }
  .ecb-filter-toggle .n {
    background: var(--ecb-gold-deep); color:#fff; font-size:12px; line-height:1;
    min-width:21px; height:21px; border-radius:11px; display:inline-flex;
    align-items:center; justify-content:center; padding:0 6px; letter-spacing:0;
  }
  .ecb-filter-toggle .chev { display:flex; color:#9a938a; transition:transform .22s ease; }
  .ecb-filter-toggle .chev svg { width:18px; height:18px; }
  .ecb-filter-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); }

  /* the panel itself */
  #secondary .widget { display:none; }
  #secondary.ecb-filters-open .widget { display:block; animation:ecbFadeIn .22s ease both; }
  #secondary.ecb-filters-open .widget:first-of-type { margin-top:12px; }
}
@keyframes ecbFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* no-JS safety: never leave the filters permanently unreachable */
.no-js .ecb-filter-toggle { display:none !important; }
@media (max-width:921px){ .no-js #secondary .widget { display:block !important; } }

/* ---------------------------- contact page ---------------------------- */
.ecb-contact-head { max-width:820px; margin:0 auto 44px; text-align:center; }
.ecb-contact-head .eyebrow {
  font-size:12px; letter-spacing:2.6px; text-transform:uppercase;
  color: var(--ecb-gold-deep); margin:0 0 10px; font-weight:600;
}
.ecb-contact-head h1 { font-size:42px !important; margin:0 0 14px; letter-spacing:-.4px; }
.ecb-contact-head .lead { font-size:17px; color:#5f5f5f; line-height:1.7; margin:0; }

.ecb-contact-wrap { display:grid; grid-template-columns:1.55fr 1fr; gap:34px; align-items:start; }
.ecb-contact-form {
  background:#fff; border:1px solid var(--ecb-line); border-radius:4px; padding:32px 32px 26px;
  box-shadow:0 8px 28px rgba(0,0,0,.04);
}
.ecb-contact-form h2 { font-size:24px !important; margin:0 0 6px; }
.ecb-contact-form h2::after { display:none; }
.ecb-contact-form .hint { font-size:13px; color:#8a8a8a; margin:0 0 22px; }
.ecb-contact-form .hint span, .ecb-contact-form label span { color:#b3452f; }

.ecb-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.ecb-contact-form p { margin:0 0 16px; }
.ecb-contact-form label { display:block; font-size:13.5px; font-weight:600; color:#3a3a3a; letter-spacing:.2px; }
.ecb-contact-form input[type=text], .ecb-contact-form input[type=email],
.ecb-contact-form input[type=tel], .ecb-contact-form input[type=number],
.ecb-contact-form select, .ecb-contact-form textarea {
  width:100%; margin-top:6px; padding:11px 13px; font-size:14.5px; font-weight:400;
  border:1px solid #dcd8d0; border-radius:3px; background:#fdfcfa; color:#2b2b2b;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.ecb-contact-form input:focus, .ecb-contact-form select:focus, .ecb-contact-form textarea:focus {
  outline:none; background:#fff; border-color: var(--ecb-gold-deep);
  box-shadow:0 0 0 3px rgba(154,123,46,.12);
}
.ecb-contact-form textarea { resize:vertical; min-height:130px; }
.ecb-contact-form .consent { font-size:13px; color:#6b6b6b; line-height:1.6; margin:6px 0 20px; }
.ecb-contact-form .consent a { color: var(--ecb-gold-deep); }
.ecb-contact-form .wpcf7-list-item { margin:0; }
.ecb-contact-form input[type=submit] {
  background: var(--ecb-ink); color:#fff; border:0; border-radius:2px;
  font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:1px; text-transform:uppercase;
  font-weight:600; padding:14px 34px; cursor:pointer; transition:background .18s ease;
}
.ecb-contact-form input[type=submit]:hover { background: var(--ecb-gold-deep); }
.wpcf7 form .wpcf7-response-output {
  margin:18px 0 0; border-radius:3px; border-width:1px; font-size:14px; padding:12px 14px;
}
.wpcf7-not-valid-tip { color:#b3452f; font-size:12.5px; font-weight:500; }

.ecb-contact-side { display:grid; gap:16px; }
.ecb-contact-side .card {
  background:#fff; border:1px solid var(--ecb-line); border-radius:4px; padding:20px 22px;
}
.ecb-contact-side .card.accent { background: var(--ecb-cream); border-color:#e2dccc; }
.ecb-contact-side h3 {
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
  margin:0 0 10px; color: var(--ecb-ink);
}
.ecb-contact-side h3::after { display:none; }
.ecb-contact-side p { margin:0 0 4px; font-size:15px; color:#3a3a3a; line-height:1.6; }
.ecb-contact-side .muted { font-size:13px; color:#8a8a8a; }
.ecb-contact-side a { color: var(--ecb-gold-deep); text-decoration:none; font-weight:500; }
.ecb-contact-side a:hover { text-decoration:underline; }
.ecb-contact-side ul { margin:0 0 10px; padding-left:18px; }
.ecb-contact-side li { font-size:14px; color:#4a4a4a; line-height:1.8; }

.ecb-contact-legal {
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  margin-top:52px; padding-top:30px; border-top:1px solid var(--ecb-line);
}
.ecb-contact-legal h4 {
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
  color:#8a8a8a; margin:0 0 8px;
}
.ecb-contact-legal p { font-size:13.5px; color:#5a5a5a; line-height:1.8; margin:0; }
.ecb-contact-legal a { color:#4a4a4a; text-decoration:none; }
.ecb-contact-legal a:hover { color: var(--ecb-gold-deep); text-decoration:underline; }

@media (max-width:900px){
  .ecb-contact-wrap { grid-template-columns:1fr; }
  .ecb-form-grid { grid-template-columns:1fr; }
  .ecb-contact-legal { grid-template-columns:1fr; gap:20px; }
  .ecb-contact-head h1 { font-size:32px !important; }
}

/* header logo sizing */
.custom-logo-link img, .ast-site-identity img { max-height:74px; width:auto; }


/* ============================ professional polish ============================ */

/* --- utility bar above the header --- */
.ecb-topbar {
  background: var(--ecb-cream); color:#6b6b6b; font-size:12.5px; letter-spacing:.3px;
  border-bottom:1px solid var(--ecb-line);
}
.ecb-topbar .in {
  max-width:1200px; margin:0 auto; padding:8px 20px;
  display:flex; flex-wrap:wrap; gap:6px 26px; align-items:center; justify-content:space-between;
}
.ecb-topbar a { color:#3d3d3d !important; text-decoration:none; }
.ecb-topbar a:hover { color: var(--ecb-gold-deep) !important; }
.ecb-topbar .sep { color:#cfcabf; margin:0 10px; }
.ecb-topbar strong { color: var(--ecb-gold-deep); font-weight:600; }
@media (max-width:768px){ .ecb-topbar .in { justify-content:center; text-align:center; } .ecb-topbar .hide-sm { display:none; } }

/* --- header --- */
.site-header { border-bottom:1px solid rgba(255,255,255,.08); }
.ast-site-identity .site-title a { font-size:26px !important; letter-spacing:.4px; }
.main-header-menu > li > a, .ast-builder-menu .main-header-menu > li > a {
  font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:.5px;
}
.ast-builder-menu .main-header-menu > li > a { position:relative; }
.ast-builder-menu .main-header-menu > li > a::after {
  content:""; position:absolute; left:0; right:0; bottom:6px; height:2px;
  background: var(--ecb-gold-deep); transform:scaleX(0); transition:transform .18s ease;
}
.ast-builder-menu .main-header-menu > li > a:hover::after,
.main-header-menu .current-menu-item > a::after { transform:scaleX(1); }

/* --- section rhythm --- */
.wp-block-group.alignfull > .wp-block-heading { letter-spacing:-.2px; }
.wp-block-group h2.wp-block-heading::after {
  content:""; display:block; width:54px; height:3px; background: var(--ecb-gold);
  margin:16px auto 0; border-radius:2px;
}
.ecb-why h3.wp-block-heading::after { display:none; }

/* --- USP strip --- */
.ecb-usp-wrap { background:#fff; border-bottom:1px solid #ececec; }
.ecb-usp {
  max-width:1200px; margin:0 auto; padding:34px 20px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.ecb-usp-item { display:flex; gap:14px; align-items:flex-start; }
.ecb-usp-item svg { width:30px; height:30px; color: var(--ecb-gold); flex:0 0 30px; margin-top:2px; }
.ecb-usp-item h3 {
  font-family:'Oswald',sans-serif; font-size:15px; margin:0 0 3px; color: var(--ecb-dark);
  font-weight:600; letter-spacing:.2px;
}
.ecb-usp-item p { margin:0; font-size:13px; line-height:1.55; color:#6d6d6d; }
@media (max-width:1024px){ .ecb-usp { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ecb-usp { grid-template-columns:1fr; } }

/* --- brand row --- */
.ecb-brands-wrap { background: var(--ecb-cream); border-top:1px solid var(--ecb-line); }
.ecb-brands { max-width:1200px; margin:0 auto; padding:46px 20px 52px; text-align:center; }
.ecb-brands-label {
  font-size:12px; letter-spacing:2.6px; text-transform:uppercase; color:#9a9a9a; margin:0 0 22px;
}
.ecb-brands ul.ecb-brand-grid {
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); gap:18px; align-items:stretch;
}
.ecb-brands ul.ecb-brand-grid li { margin:0; }
.ecb-brands ul.ecb-brand-grid a {
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--ecb-line); border-radius:3px;
  height:118px; padding:18px 22px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ecb-brands ul.ecb-brand-grid a:hover {
  border-color:#ddd2a8; box-shadow:0 10px 26px rgba(0,0,0,.08); transform:translateY(-3px);
}
.ecb-brands ul.ecb-brand-grid img {
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply;
}
.ecb-brands ul.ecb-brand-grid a.is-text {
  font-family:'Oswald',sans-serif; font-size:19px; letter-spacing:1px;
  text-transform:uppercase; color:#1d1d1d !important; text-decoration:none;
}
@media (max-width:1024px){ .ecb-brands ul.ecb-brand-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .ecb-brands ul.ecb-brand-grid { grid-template-columns:repeat(2,1fr); } }

/* --- brand row, rotating --------------------------------------------------
   The grid above is NOT replaced: it stays the served markup and the fallback.
   ecb-chrome.php wraps the list in a clipping viewport, clones the set and adds
   .is-marquee at runtime. So with JS blocked, or with prefers-reduced-motion set,
   the visitor gets the five static cards rather than a blank strip or a
   half-built carousel. The clones are added client-side on purpose — the HTML
   that is served and crawled keeps exactly five brand links, not ten.

   The loop is seamless because the track holds a whole number of copies and
   travels exactly one copy's width (--ecb-marquee-shift, set in JS from the
   measured set width including its trailing gap) before repeating. */
.ecb-brand-marquee {
  overflow:hidden;
  /* Feathered edges: a hard clip makes a moving strip look broken, a fade makes
     it read as continuous. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.ecb-brands.is-marquee ul.ecb-brand-grid {
  display:flex; grid-template-columns:none; width:max-content; gap:18px;
  animation:ecb-brand-scroll var(--ecb-marquee-dur,24s) linear infinite;
  will-change:transform;
}
.ecb-brands.is-marquee ul.ecb-brand-grid li { flex:0 0 218px; }
/* Paused on hover and whenever a logo takes keyboard focus — a link that is
   sliding away is a link nobody can click. */
.ecb-brands.is-marquee .ecb-brand-marquee:hover ul.ecb-brand-grid,
.ecb-brands.is-marquee ul.ecb-brand-grid:focus-within { animation-play-state:paused; }
@keyframes ecb-brand-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(calc(-1 * var(--ecb-marquee-shift,0px))); }
}
@media (max-width:600px){
  .ecb-brands.is-marquee ul.ecb-brand-grid li { flex-basis:158px; }
  .ecb-brands.is-marquee ul.ecb-brand-grid a { height:96px; padding:14px 16px; }
}
/* Belt and braces — JS already declines to build the marquee at all in this case. */
@media (prefers-reduced-motion:reduce){
  .ecb-brands.is-marquee ul.ecb-brand-grid { animation:none; }
}

/* --- latest articles band ---------------------------------------------------
   Markup comes from wp-content/mu-plugins/ecb-blog.php (it lists the newest posts,
   so it has to be rendered, not stored). Kept LIGHT on purpose: the page already
   carries a dark hero, dark category label bands, dark buttons and a dark footer,
   and the brief on this site has consistently been one dark anchor, not several.
   The reference layout used a dark slab here; the structure is what was worth
   taking, not the weight. White also separates it from the warm #f3efe6 CTA band
   directly below it. */
.ecb-posts-wrap { background:#fff; border-top:1px solid var(--ecb-line); padding:54px 0 58px; }
.ecb-posts { max-width:1200px; margin:0 auto; padding:0 20px; }
.ecb-posts-head { text-align:center; font-size:34px !important; font-weight:700; margin:0; }
.ecb-posts-sub {
  text-align:center; color:#666; margin:16px auto 30px; max-width:620px; font-size:16px;
}
.ecb-posts-grid {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px 24px;
}
.ecb-post-card {
  margin:0; display:flex; flex-direction:column; background:#fff; overflow:hidden;
  border:1px solid var(--ecb-line); border-radius:3px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ecb-post-card:hover { border-color:#ddd2a8; box-shadow:0 12px 30px rgba(0,0,0,.09); transform:translateY(-3px); }

.ecb-post-media { position:relative; display:block; overflow:hidden; background: var(--ecb-cream); }
.ecb-post-media img {
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  transition:transform .5s ease;
}
.ecb-post-card:hover .ecb-post-media img { transform:scale(1.04); }
.ecb-post-noimg { display:block; width:100%; aspect-ratio:16/10; background: var(--ecb-cream); }

/* Date tab, borrowed from the reference layout but in gold on warm ink rather than
   a saturated accent square. */
.ecb-post-date {
  position:absolute; top:0; left:16px; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:52px; padding:8px 8px 7px;
  background: var(--ecb-gold); color: var(--ecb-ink);
  font-family:'Oswald',sans-serif; line-height:1; text-align:center;
  border-radius:0 0 3px 3px; box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.ecb-post-date b { font-size:19px; font-weight:600; }
.ecb-post-date i { font-style:normal; font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; margin-top:3px; }

.ecb-post-body { display:flex; flex-direction:column; flex:1 1 auto; padding:20px 22px 22px; }
.ecb-post-title { margin:0 0 10px; font-size:18px; line-height:1.3; }
.ecb-post-title a { color: var(--ecb-ink) !important; text-decoration:none !important; }
.ecb-post-title a:hover { color: var(--ecb-gold-deep) !important; }
.ecb-post-blurb {
  margin:0 0 18px; font-size:14.5px; line-height:1.6; color:#6a6a6a;
  /* Titles run to two or three lines and blurbs are meta descriptions of uneven
     length; clamping keeps the three buttons on one baseline. */
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.ecb-post-more {
  margin-top:auto; align-self:flex-start;
  font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:600; color: var(--ecb-gold-deep) !important; text-decoration:none !important;
  /* The rule underneath is a border, not an underline, so Astra's
     `.ast-single-post .entry-content a { text-decoration: underline }` (0,2,1, which
     outranks a plain class selector) has to be turned off explicitly or the link
     carries two lines. Same reason on the title and the outline button below. */
  border-bottom:2px solid var(--ecb-gold); padding-bottom:3px;
  transition:border-color .18s ease, color .18s ease;
}
.ecb-post-more:hover { color: var(--ecb-ink) !important; border-bottom-color: var(--ecb-ink); }

.ecb-posts-all { text-align:center; margin:34px 0 0; }
.ecb-posts-all a {
  display:inline-block; padding:13px 30px;
  border:1.5px solid var(--ecb-ink); border-radius:2px;
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:600; color: var(--ecb-ink) !important; text-decoration:none !important;
  transition:background .18s ease, color .18s ease;
}
.ecb-posts-all a:hover { background: var(--ecb-ink); color:#fff !important; }

@media (max-width:600px){
  .ecb-posts-wrap { padding:40px 0 44px; }
  .ecb-posts-head { font-size:27px !important; }
  .ecb-posts-grid { gap:20px; }
}
@media (prefers-reduced-motion:reduce){
  .ecb-post-card, .ecb-post-media img { transition:none; }
  .ecb-post-card:hover { transform:none; }
  .ecb-post-card:hover .ecb-post-media img { transform:none; }
}

/* --- /guides/ index (page 769), the blog landing page ----------------------
   ecb-blog.php swaps the stored list for the same cards the home band uses, so the
   grid rules live with the band (.ecb-post-card et al) and are not restated here.
   What IS here: the page header, and a fallback for the plain <ul> that remains in
   post_content if that filter ever stops running. */

/* Header: centred, with the same gold rule the home sections carry, so the blog
   landing page opens like a section of the site rather than a bare document. */
.page-id-769 .entry-header { text-align:center; margin-bottom:6px; }
.page-id-769 .entry-header .entry-title { font-size:38px; margin-bottom:0; }
.page-id-769 .entry-header .entry-title::after {
  content:""; display:block; width:54px; height:3px; background: var(--ecb-gold);
  margin:16px auto 0; border-radius:2px;
}
.page-id-769 .entry-content > p:first-child {
  text-align:center; max-width:760px; margin:18px auto 6px;
  font-size:17px; line-height:1.65; color:#666;
}
.page-id-769 .ecb-guides-grid { margin-top:34px; }
@media (max-width:600px){
  .page-id-769 .entry-header .entry-title { font-size:28px; }
  .page-id-769 .entry-content > p:first-child { font-size:15.5px; }
}

/* Fallback only — the stored <ul> when the card filter has not run. */
.page-id-769 .entry-content > ul:not(.ecb-posts-grid) {
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;
}
.page-id-769 .entry-content > ul:not(.ecb-posts-grid) > li {
  margin:0; background:#fff; border:1px solid var(--ecb-line); border-radius:3px;
  padding:22px 24px 24px;
}
.page-id-769 .entry-content > ul:not(.ecb-posts-grid) > li > h2 {
  font-size:19px !important; line-height:1.32; margin:0 0 10px;
}
.page-id-769 .entry-content > ul:not(.ecb-posts-grid) > li > h2::after { display:none; }
.page-id-769 .entry-content > ul:not(.ecb-posts-grid) > li > h2 a {
  color: var(--ecb-ink) !important; text-decoration:none !important;
}
.page-id-769 .entry-content > ul:not(.ecb-posts-grid) > li > p {
  margin:0; font-size:14.5px; line-height:1.6; color:#6a6a6a;
}

/* --- "pourquoi choisir" cards --- */
.ecb-why .wp-block-column {
  background:#fff; border:1px solid #ececec; border-radius:3px; padding:26px 22px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ecb-why .wp-block-column:hover {
  border-color:#ddd2a8; box-shadow:0 10px 26px rgba(0,0,0,.06); transform:translateY(-3px);
}
.ecb-why .wp-block-column h3 { margin-top:0 !important; }

/* --- product cards --- */
.woocommerce ul.products li.product {
  background:#fff; border:1px solid #ececec; border-radius:3px; padding:14px 14px 18px;
  display:flex; flex-direction:column;
}
.woocommerce ul.products li.product:hover { border-color:#ddd2a8; box-shadow:0 12px 30px rgba(0,0,0,.09); }
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product a img {
  border-radius:2px; margin-bottom:0 !important;
}
/* uniform image box — source photography mixes plain packshots and dark scenes */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  position:relative; display:block; background:#fff; border-bottom:1px solid #f1f1f1;
  margin-bottom:14px !important; padding:6px 0 14px;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  aspect-ratio:1/1; object-fit:contain; width:100%; height:auto;
}
.woocommerce ul.products li.product .ast-woo-product-category {
  font-size:11px !important; letter-spacing:1.1px; text-transform:uppercase; color:#a0a0a0 !important;
  margin-bottom:5px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size:14.5px !important; line-height:1.4; min-height:2.8em; margin-bottom:6px;
}
.woocommerce ul.products li.product .price { font-size:17px !important; margin-bottom:12px; }
.woocommerce ul.products li.product .button { margin-top:auto; width:100%; text-align:center; }

/* --- shop chrome --- */
.woocommerce .woocommerce-breadcrumb {
  font-size:12.5px; color:#9a9a9a; letter-spacing:.3px; margin-bottom:14px;
}
.woocommerce .woocommerce-breadcrumb a { color:#7a7a7a; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--ecb-gold); }
.woocommerce .woocommerce-result-count { color:#8a8a8a; font-size:13.5px; }
.woocommerce .woocommerce-ordering select { border:1px solid #e2e2e2; border-radius:2px; padding:8px 10px; }
.woocommerce-products-header__title, .woocommerce .page-title { letter-spacing:-.3px; }

/* --- single product --- */
.single-product div.product .product_title { font-size:30px !important; line-height:1.2; }
.single-product div.product .price { font-size:26px !important; color: var(--ecb-dark) !important; font-weight:600; }
.single-product div.product .woocommerce-product-details__short-description {
  color:#5c5c5c; line-height:1.75; border-left:3px solid var(--ecb-gold); padding-left:16px; margin:18px 0;
}
.single-product .woocommerce-tabs ul.tabs { border-bottom:1px solid #e6e6e6; padding-left:0 !important; }
.single-product .woocommerce-tabs ul.tabs li { border:0 !important; background:none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
  font-family:'Oswald',sans-serif; letter-spacing:.6px; text-transform:uppercase; font-size:14px;
  color:#7a7a7a !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--ecb-dark) !important; border-bottom:2px solid var(--ecb-gold); }
.single-product .woocommerce-tabs .panel table { font-size:14px; }
.single-product table.variations td, .single-product table.variations th { padding:8px 0; }
.single-product .product_meta { font-size:13px; color:#8a8a8a; border-top:1px solid #eee; padding-top:14px; }

/* related products heading */
.single-product section.related > h2, .single-product section.upsells > h2 { font-size:26px !important; }

/* ===================== mobile first screen (phones only) =====================
   Measured in a real 390x814 viewport before this block: the utility bar took
   91px across three wrapped rows, chrome before any content was 196px (24% of
   the first screen), the hero was 1040px — taller than the display — and ZERO
   hero CTAs were reachable without scrolling. The only conversion on this site
   is the quote request, so that was the most expensive thing on the page.

   This block is deliberately LAST. The stylesheet is assembled in blocks, and a
   base rule further down beats an earlier @media (max-width:600px) rule of equal
   specificity — `.ecb-topbar .in` is already overridden exactly that way (the
   8px 20px padding above wins over the 6px 14px set in the earlier 600px block),
   which is why padding and gap are restated here rather than assumed. Appending
   at the end is what makes that safe; do not move this block upwards.

   Everything below sits inside a media query, so >600px is untouched BY
   CONSTRUCTION. Verified empirically as well: a geometry + computed-style
   fingerprint of 232 elements is byte-identical with and without this block at
   601, 768, 1024 and 1440px, and differs (99 rules) at 600px. */
@media (max-width:600px){
  /* --- utility bar: three rows down to one (91px -> 34px) --- */
  /* Keep the two things a phone actually needs: the tap-to-call number, which is
     the most actionable contact route on a handset, and the language switcher,
     which is navigation rather than contact detail. WhatsApp keeps its own
     floating button on every page, and the address and opening hours are both in
     the footer and on /contact/, so nothing here is the only copy of anything.
     Hidden, never deleted — the markup is untouched and desktop is unchanged. */
  .ecb-topbar .in { padding:4px 14px; gap:0; row-gap:0; justify-content:center; }
  .ecb-topbar .in > div { width:auto; flex:0 1 auto; justify-content:center; gap:0; min-width:0; }
  .ecb-topbar .in > div:first-child { display:none; }
  .ecb-topbar .ecb-wa-link { display:none !important; }
  .ecb-topbar a[href^="mailto:"] { display:none; }
  .ecb-topbar .sep { display:none; }
  /* The switcher no longer wraps onto its own line, so the separator that the
     768px block hides as a dangling leftover is meaningful again here. */
  .ecb-topbar .sep.sep-lang { display:inline; margin:0 9px; }
  .ecb-topbar .ecb-lang { margin:0; flex:0 0 auto; }

  /* --- hero: lift the CTAs onto the first screen --- */
  /* Vertical trim only. The grid, the .slide/.is-on structure that ecb-lcp.php
     preloads, the dots and the crossfade are all left exactly as they were, and
     the switcher control keeps its 26px height so the tap target is not reduced. */
  .ecb-hero .shot { min-height:200px; }
  .ecb-hero .inner { padding:26px 22px 32px; }
  .ecb-hero .eyebrow { margin-bottom:10px; letter-spacing:2.6px; }
  .ecb-hero h1 { font-size:30px; line-height:1.08; margin-bottom:14px; }
  .ecb-hero .lead { font-size:15.5px; line-height:1.6; margin-bottom:22px; }
  .ecb-hero .btns { gap:10px; }
  .ecb-hero .btns a { padding:14px 24px; }
  .ecb-hero .btns .ghost { padding:12px 22px; }
  .ecb-hero .meta { margin-top:24px; padding-top:20px; gap:8px 20px; }
}