/* ==========================================================================
   Britbuild — main stylesheet (industrial / trade identity)
   Applies the Britbuild look to Storefront + WooCommerce, and styles the
   custom .bb-* components (category showcase, spec grid, badges, trust line).
   ========================================================================== */

:root{
  --bb-ink:#14171a; --bb-ink2:#23282d; --bb-steel:#2f3640; --bb-concrete:#6b7280;
  --bb-line:#e4e7eb; --bb-paper:#f5f6f7;
  --bb-amber:#ff8a00; --bb-amber-d:#e67700; --bb-hi:#ffb545;
  --bb-safety:#ffce00; --bb-green:#1f9d55; --bb-red:#c0392b;
  --bb-shadow:0 2px 4px rgba(20,23,26,.06),0 8px 24px rgba(20,23,26,.08);
  --bb-shadow-lg:0 12px 40px rgba(20,23,26,.16);
}

/* ---------- Typography ---------- */
body{ font-family:'Inter',system-ui,Arial,sans-serif; color:var(--bb-ink); }
h1,h2,h3,h4,.bb-disp,
.storefront-primary-navigation,
.site-header .site-branding .site-title{
  font-family:'Oswald','Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.5px;
}
h1,h2,h3{ line-height:1.08; }

/* ---------- Header / branding (dark industrial bar) ---------- */
.site-header{ background:var(--bb-ink2) !important; border-bottom:4px solid var(--bb-amber); }
.site-header .site-title a,
.site-header a{ color:#fff; }
.site-header .site-title a:hover{ color:var(--bb-amber); }
.storefront-primary-navigation{ background:var(--bb-steel); }
.main-navigation ul li a{ color:#dfe3e7; font-weight:500; }
.main-navigation ul li a:hover{ color:#fff; }

/* Hazard-tape accent utility (add class="bb-tape" to any full-width element) */
.bb-tape{ height:6px; background:repeating-linear-gradient(-45deg,var(--bb-safety) 0 16px,#1a1a1a 16px 32px); }

/* ---------- Buttons (amber, with depth) ---------- */
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button{
  background-color:var(--bb-amber) !important; color:#1a1200 !important;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.6px; font-weight:600;
  border:none !important; border-radius:6px !important; box-shadow:0 3px 0 var(--bb-amber-d);
  transition:.15s;
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover{
  background-color:var(--bb-hi) !important; transform:translateY(-1px);
}
.woocommerce .button.alt, .woocommerce-message .button{ background-color:var(--bb-ink2) !important; color:#fff !important; box-shadow:none; }

/* ---------- Product cards (shop / archive) ---------- */
.woocommerce ul.products li.product{
  background:#fff; border:1px solid var(--bb-line); border-radius:12px; padding:12px !important;
  transition:.16s;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--bb-shadow-lg); transform:translateY(-2px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-size:15px; font-weight:600;
}
.woocommerce ul.products li.product .price{ color:var(--bb-ink); }
.woocommerce ul.products li.product .price .amount{ font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; }
.woocommerce span.onsale{
  background:var(--bb-amber); color:#1a1200; font-family:'Oswald',sans-serif; border-radius:6px;
  min-height:auto; min-width:auto; padding:4px 10px; line-height:1.2;
}

/* ---------- Single product ---------- */
.woocommerce div.product .product_title{ font-size:30px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--bb-ink); }
.woocommerce div.product p.price .amount{ font-family:'Oswald',sans-serif; font-weight:700; font-size:34px; }
.woocommerce-tabs ul.tabs li a{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.4px; }

/* ---------- Custom components ---------- */

/* Quick spec grid */
.bb-specquick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 18px; }
.bb-sq{ background:var(--bb-paper); border:1px solid var(--bb-line); border-radius:8px; padding:9px 12px; }
.bb-sq span{ font-size:11px; color:var(--bb-concrete); text-transform:uppercase; letter-spacing:.4px; }
.bb-sq b{ font-family:'Oswald',sans-serif; font-size:16px; display:block; margin-top:2px; }

/* Per-unit price line */
.bb-perunit{ font-size:14px; color:var(--bb-steel); margin:-6px 0 14px; }

/* Badges */
.bb-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px;
  border-radius:100px; margin-bottom:8px; }
.bb-badge--uk{ background:#eef4f7; color:#0f5f8a; border:1px solid #cfe3ee; }

/* Trust line */
.bb-trust{ list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--bb-line); }
.bb-trust li{ font-size:13.5px; color:var(--bb-steel); padding:5px 0; }

/* Delivery-access checkout block */
#britbuild_delivery_access{ background:var(--bb-paper); border:1px solid var(--bb-line); border-left:4px solid var(--bb-amber);
  border-radius:10px; padding:16px 18px; margin:18px 0; }
#britbuild_delivery_access h3{ font-size:16px; margin:0 0 4px; }
#britbuild_delivery_access .bb-help{ font-size:13px; color:var(--bb-concrete); margin-bottom:12px; }

/* ---------- Expandable category showcase ---------- */
.bb-catgrid{ display:grid; grid-template-columns:repeat(var(--bb-cols,4),1fr); gap:16px; }
.bb-catcard{ background:#fff; border:1px solid var(--bb-line); border-radius:12px; overflow:hidden; transition:.18s; }
.bb-catcard:hover{ box-shadow:var(--bb-shadow-lg); transform:translateY(-3px); border-color:transparent; }
.bb-catcard__top{ display:grid; place-items:center; height:120px; position:relative;
  background:linear-gradient(135deg,#ff8a0022,#ff8a000a); text-decoration:none; }
.bb-catcard__img{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.9; }
.bb-catcard__mark{ font-family:'Oswald',sans-serif; font-weight:700; font-size:60px; color:var(--bb-amber); opacity:.28; }
.bb-catcard__label{ position:absolute; left:14px; bottom:12px; background:var(--bb-ink2); color:#fff;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.5px; font-size:13px; padding:4px 10px; border-radius:100px; }
.bb-catcard__body{ padding:14px 16px 16px; }
.bb-catcard__body h3{ font-size:18px; margin:0 0 4px; }
.bb-catcard__body h3 a{ color:var(--bb-ink); text-decoration:none; }
.bb-catcard__count{ font-size:12px; color:var(--bb-concrete); }
.bb-catcard__subs{ list-style:none; margin:10px 0 0; padding:0; max-height:0; overflow:hidden; transition:max-height .28s ease; }
.bb-catcard.is-open .bb-catcard__subs{ max-height:260px; }
.bb-catcard__subs li{ border-top:1px solid var(--bb-line); }
.bb-catcard__subs li a{ display:flex; justify-content:space-between; padding:7px 0; font-size:13.5px;
  color:var(--bb-steel); text-decoration:none; }
.bb-catcard__subs li a:hover{ color:var(--bb-amber-d); }
.bb-catcard__exp{ margin-top:11px; background:none !important; box-shadow:none !important; color:var(--bb-amber-d) !important;
  padding:0 !important; font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.bb-catcard__exp .bb-ar{ transition:.2s; }
.bb-catcard.is-open .bb-catcard__exp .bb-ar{ transform:rotate(180deg); }

@media(max-width:900px){ .bb-catgrid{ grid-template-columns:repeat(2,1fr); } .bb-specquick{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .bb-catgrid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Homepage hero ([britbuild_hero]) — editable via Customizer
   ========================================================================== */
.bb-hero{ background:linear-gradient(120deg,#14171a,#23282d 55%,#2f3640); color:#fff; border-radius:0; margin:0 0 8px;
  background-size:cover; background-position:center; }
.bb-hero__inner{ max-width:1240px; margin:0 auto; padding:54px 22px 60px; }
.bb-hero__kick{ display:inline-flex; gap:8px; align-items:center; background:rgba(255,138,0,.16);
  border:1px solid rgba(255,138,0,.5); color:var(--bb-hi,#ffb545); font-size:12.5px; font-weight:600;
  padding:6px 13px; border-radius:100px; margin-bottom:18px; }
.bb-hero__heading{ font-size:48px; font-weight:800; color:#fff; max-width:720px; margin:0 0 14px; line-height:1.06; }
.bb-hero__sub{ font-size:18px; color:#c9ced3; max-width:560px; margin:0 0 26px; }
.bb-hero .bb-hero__cta.button{ font-size:16px; padding:14px 26px; }
@media(max-width:700px){ .bb-hero__heading{ font-size:34px; } .bb-hero__sub{ font-size:16px; } }

/* ==========================================================================
   Buy-tier UI (pallet / pack / single) on variable products
   ========================================================================== */
.bb-tiers{ margin:0 0 16px; }
.bb-tiers__row{ display:flex; gap:8px; background:var(--bb-paper); border-radius:9px; padding:4px; flex-wrap:wrap; }
.bb-tiers__btn{ flex:1 1 30%; min-width:120px; background:#fff !important; color:var(--bb-ink) !important; box-shadow:none !important;
  border:1.5px solid var(--bb-line) !important; border-radius:6px !important; padding:12px 10px !important;
  display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; transition:.14s; }
.bb-tiers__btn:hover{ border-color:var(--bb-concrete) !important; transform:none; }
.bb-tiers__btn.is-on{ border-color:var(--bb-amber) !important; box-shadow:0 0 0 2px var(--bb-amber) inset !important; }
.bb-tiers__name{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.4px; font-size:14px; font-weight:600; }
.bb-tiers__save{ font-size:11px; color:var(--bb-green); font-weight:600; }
.bb-tiers__info{ margin-top:12px; font-size:15px; color:var(--bb-steel); }
.bb-tiers__info b{ font-family:'Oswald',sans-serif; }
.bb-tiers__savetxt{ color:var(--bb-green); font-weight:600; }

/* ==========================================================================
   Top utility bar + nav promo
   ========================================================================== */
.bb-utility{ background:var(--bb-ink); color:#c9ced3; font-size:12.5px; }
.bb-utility__inner{ max-width:1240px; margin:0 auto; padding:0 22px; height:38px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.bb-utility strong{ color:#fff; }
.bb-utility a{ color:#c9ced3; margin-left:18px; }
.bb-utility a:hover{ color:var(--bb-amber); }
.bb-utility a.is-strong{ color:#fff; font-weight:700; }
.bb-utility__right{ display:flex; align-items:center; white-space:nowrap; }
.bb-nav-promo{ color:var(--bb-hi); font-weight:600; font-size:13px; margin-left:auto; }
@media(max-width:768px){ .bb-utility__left{ display:none; } .bb-utility__inner{ justify-content:center; } }

/* ==========================================================================
   Homepage sections
   ========================================================================== */
.bb-front{ margin:0; }
.bb-strip{ background:#fff; border-top:1px solid var(--bb-line); border-bottom:1px solid var(--bb-line); }
.bb-strip__inner{ max-width:1240px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:repeat(4,1fr); }
.bb-strip__item{ display:flex; gap:12px; align-items:center; padding:20px 18px; border-right:1px solid var(--bb-line); }
.bb-strip__item:last-child{ border-right:none; }
.bb-strip__ic{ font-size:22px; }
.bb-strip__item b{ font-family:'Oswald',sans-serif; font-size:15px; display:block; letter-spacing:.3px; }
.bb-strip__item span{ font-size:12.5px; color:var(--bb-concrete); }
.bb-home-sec{ padding:44px 0; }
.bb-home-sec--pad0{ padding-top:0; }
.bb-home-sec__inner{ max-width:1240px; margin:0 auto; padding:0 22px; }
.bb-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.bb-sec-head h2{ font-size:28px; }
.bb-sec-sub{ color:var(--bb-concrete); font-size:14px; margin:5px 0 0; }
.bb-sec-more{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; font-size:13px; color:var(--bb-amber-d); letter-spacing:.5px; }
.bb-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.bb-pill--safety{ background:var(--bb-safety); color:#1a1a1a; margin-bottom:12px; }
.bb-trade-banner{ background:linear-gradient(100deg,var(--bb-ink2),#2f3640); color:#fff; border-radius:14px; padding:30px 34px;
  display:flex; align-items:center; gap:26px; position:relative; overflow:hidden; }
.bb-trade-banner::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(-45deg,rgba(255,206,0,.06) 0 20px,transparent 20px 40px); }
.bb-trade-banner__l{ position:relative; flex:1; }
.bb-trade-banner__l h2{ font-size:28px; color:#fff; margin:0 0 8px; }
.bb-trade-banner__l p{ color:#c9ced3; max-width:460px; font-size:14px; margin:0; }
.bb-trade-banner__r{ position:relative; }
@media(max-width:900px){ .bb-strip__inner{ grid-template-columns:repeat(2,1fr); } .bb-trade-banner{ flex-direction:column; align-items:flex-start; } }

/* ==========================================================================
   Faceted filters + active chips (product archives)
   ========================================================================== */
.bb-filters{ margin:0 0 14px; }
.bb-filters__toggle{ display:none; }
.bb-filters__groups{ display:flex; flex-wrap:wrap; gap:10px; }
.bb-fgroup{ border:1px solid var(--bb-line); border-radius:10px; background:#fff; min-width:180px; overflow:hidden; }
.bb-fgroup__head{ width:100%; background:var(--bb-paper) !important; color:var(--bb-ink) !important; box-shadow:none !important;
  border:none !important; border-radius:0 !important; text-align:left; padding:10px 14px !important; font-family:'Oswald',sans-serif;
  font-size:13.5px; letter-spacing:.4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.bb-fgroup__head:hover{ transform:none; }
.bb-fgroup__head .bb-ar{ transition:.2s; }
.bb-fgroup.is-collapsed .bb-fgroup__head .bb-ar{ transform:rotate(-90deg); }
.bb-fgroup__body{ padding:6px 12px 10px; max-height:260px; overflow:auto; }
.bb-fgroup.is-collapsed .bb-fgroup__body{ display:none; }
.bb-fopt{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13.5px; color:var(--bb-steel); text-decoration:none; }
.bb-fopt:hover{ color:var(--bb-amber-d); }
.bb-fopt__box{ width:17px; height:17px; border:1.5px solid var(--bb-line); border-radius:4px; display:grid; place-items:center;
  font-size:11px; color:#fff; flex-shrink:0; }
.bb-fopt.is-on .bb-fopt__box{ background:var(--bb-amber); border-color:var(--bb-amber); color:#1a1200; }
.bb-fopt__count{ margin-left:auto; font-size:11px; color:var(--bb-concrete); }
.bb-activechips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; }
.bb-activechips__lbl{ font-family:'Oswald',sans-serif; font-size:13px; color:var(--bb-steel); }
.bb-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--bb-ink2); color:#fff; border-radius:100px;
  padding:6px 12px; font-size:12.5px; text-decoration:none; }
.bb-chip:hover{ background:#000; color:#fff; }
.bb-chip__x{ font-weight:700; }
.bb-clearall{ font-size:12.5px; color:var(--bb-amber-d); font-weight:600; text-decoration:none; }
@media(max-width:768px){
  .bb-filters__toggle{ display:inline-flex; background:var(--bb-ink2) !important; color:#fff !important; }
  .bb-filters__groups{ display:none; }
  .bb-filters.is-open .bb-filters__groups{ display:flex; flex-direction:column; margin-top:10px; }
  .bb-fgroup{ min-width:0; }
}

/* ==========================================================================
   Coverage calculator + postcode delivery checker
   ========================================================================== */
.bb-calc{ background:var(--bb-paper); border:1px dashed var(--bb-concrete); border-radius:10px; padding:14px 16px; max-width:320px; }
.bb-calc h4{ font-size:13px; margin:0 0 8px; }
.bb-calc__row label{ font-size:13px; display:flex; align-items:center; gap:8px; }
.bb-calc__area{ width:80px; border:1.5px solid var(--bb-line); border-radius:5px; padding:6px; font-size:13px; }
.bb-calc__out{ margin-top:9px; font-family:'Oswald',sans-serif; font-size:15px; color:var(--bb-amber-d); }
.bb-pcwidget{ background:#fff; border:1px solid var(--bb-line); border-radius:12px; padding:18px; max-width:340px; box-shadow:var(--bb-shadow); }
.bb-pcwidget h4{ font-size:16px; margin:0 0 4px; }
.bb-pcwidget p{ font-size:12.5px; color:var(--bb-concrete); margin:0 0 12px; }
.bb-pcwidget__row{ display:flex; gap:8px; }
.bb-pcwidget__input{ flex:1; border:2px solid var(--bb-line); border-radius:6px; padding:10px 12px; font-size:14px; text-transform:uppercase; }
.bb-pcwidget__result{ margin-top:12px; font-size:13px; }
.bb-pcwidget__result.is-ok{ background:#eafaf0; border:1px solid #b6e6c8; border-radius:8px; padding:11px 13px; }
.bb-pcwidget__result.is-err{ color:var(--bb-red); }
.bb-pcwidget__result.is-loading{ color:var(--bb-concrete); }

/* ==========================================================================
   Trade bar + trade application form
   ========================================================================== */
.bb-tradebar{ background:var(--bb-paper); border:1px dashed var(--bb-amber); border-radius:9px; padding:10px 13px; margin:0 0 14px; font-size:13.5px; }
.bb-tradebar.is-on{ background:#eef6f0; border-color:#b6e6c8; }
.bb-tradebar a{ color:var(--bb-amber-d); font-weight:600; }
.bb-trade-form{ max-width:480px; }
.bb-trade-form label{ font-size:13.5px; font-weight:600; color:var(--bb-steel); }
.bb-trade-form input{ width:100%; border:1.5px solid var(--bb-line); border-radius:6px; padding:10px 12px; font-size:14px; margin-top:4px; }

/* ==========================================================================
   "Install our app" button + iOS hint
   ========================================================================== */
.bb-install{ background:var(--bb-amber) !important; color:#1a1200 !important; box-shadow:none !important;
  border:none !important; border-radius:100px !important; font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.4px; font-size:11.5px !important; font-weight:600; padding:4px 12px !important; cursor:pointer;
  margin-right:16px; line-height:1.6; }
.bb-install:hover{ background:var(--bb-hi) !important; transform:none; }
.bb-ios-hint{ position:fixed; left:16px; right:16px; bottom:16px; max-width:360px; margin:0 auto; z-index:9999;
  background:#fff; color:var(--bb-ink); border-radius:12px; box-shadow:var(--bb-shadow-lg); padding:16px 18px;
  display:none; }
.bb-ios-hint.is-open{ display:block; }
.bb-ios-hint b{ font-family:'Oswald',sans-serif; }
.bb-ios-hint p{ font-size:13.5px; color:var(--bb-steel); margin:6px 0 0; }
.bb-ios-hint__close{ position:absolute; top:8px; right:10px; background:none !important; box-shadow:none !important;
  border:none !important; color:var(--bb-concrete) !important; font-size:20px !important; padding:0 !important; cursor:pointer; }
.bb-ios-hint::after{ content:""; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  border:9px solid transparent; border-top-color:#fff; border-bottom:0; }
@media(max-width:768px){ .bb-install{ margin-right:0; } }