/*
Theme Name: Kohper Bikes Child
Theme URI: https://kohper.com
Description: Child theme for the Kohper Bikes B2B demo. Presentation only (Astra 4.x + WooCommerce). All brand styling lives here.
Author: My Project Solution
Template: astra
Version: 2.0.0
Text Domain: kohper-bikes-child
*/

/* =========================================================
   Kohper Bikes — Astra child styles
   Astra 4.x + WooCommerce. Presentation only.
   ========================================================= */

:root{
  --bb-copper:#C87F3F;  --bb-copper-h:#9A5B26; --bb-burnish:#E0A468;
  --bb-ink:#17181B;     --bb-body:#3B3A36;     --bb-muted:#7A7568;
  --bb-faint:#A8A296;   --bb-ondark:#C4C1B8;
  --bb-line:#EAE4D8;    --bb-line-2:#E4DED2;   --bb-divider:#EFEAE0;
  --bb-strong:#D8D2C4;  --bb-surface:#FBFAF7;  --bb-surface-2:#F4F1E9;
  --bb-accent:#F3E8DA;  --bb-accent-line:#E0C9A8;
  --bb-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bb-radius:3px;
}

/* ---- logo ---------------------------------------------- */
.site-header .site-logo-img .custom-logo,
.ast-site-identity .custom-logo,
.custom-logo{
  height:38px !important;
  width:auto !important;
  max-width:none !important;
}

/* logo-only header — hide the redundant site title / tagline text */
.site-header .site-title,
.site-header .site-description,
.ast-site-title-wrap .site-title{display:none !important;}

/* ---- primary menu -------------------------------------- */
.ast-builder-menu .main-header-menu > .menu-item > .menu-link,
.main-header-menu > .menu-item > .menu-link{
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--bb-ink);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link{
  color:var(--bb-copper);
}
/* header layout: logo left · nav centered · search + cart right (matches mockup) */
@media (min-width:922px){
  .site-header-primary-section-center{ justify-content:center !important; }
  .site-header-primary-section-center .site-header-focus-item.ast-flex-grow-1{ flex-grow:0 !important; }
  .site-header-primary-section-right{ justify-content:flex-end !important; }
  .main-header-menu > .menu-item{ margin-left:16px; margin-right:16px; }   /* even gaps between links */
}

/* ---- header cart: render as "Cart (N)" text for EVERY Astra cart style ----
   dropdown / redirect-to-cart → .ast-cart-menu-wrap · off-canvas (side) → .ast-addon-cart-wrap.
   Astra swaps the markup per "cart click action", so both are handled here. */
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-site-header-cart .ast-addon-cart-wrap{
  display:inline-flex !important;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;      /* keep "Cart (N)" on one line — mobile header is tight */
  flex-shrink:0;
  line-height:1 !important;
  border:0 !important; padding:0 !important; background:none !important; border-radius:0 !important;  /* kill the "with-border" box + outline stroke */
}
/* the "Cart" label */
.ast-site-header-cart .ast-cart-menu-wrap::before,
.ast-site-header-cart .ast-addon-cart-wrap::before{
  content:"Cart";
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--bb-ink);
  order:-1;                     /* keep the label before the count in flex order */
}
.ast-site-header-cart:hover .ast-cart-menu-wrap::before,
.ast-site-header-cart:hover .ast-addon-cart-wrap::before{ color:var(--bb-copper); }
/* hide any total-price add-on so the label reads simply "Cart (N)" */
.ast-site-header-cart .ast-woo-header-cart-info-wrap{ display:none !important; }

/* --- dropdown / redirect style: strip Astra's outline-bag box, print "(N)" --- */
.ast-site-header-cart .ast-cart-menu-wrap .count{
  min-width:0 !important; min-height:0 !important;
  border:0 !important; border-radius:0 !important; padding:0 !important; background:none !important;
  box-shadow:none !important; text-shadow:none !important;
  color:var(--bb-copper) !important; font-weight:500 !important; font-size:14px !important; line-height:1 !important;
}
.ast-site-header-cart .ast-cart-menu-wrap .ast-count-text{ display:inline-block; }   /* trims whitespace → "(0)" not "( 0 )" */
.ast-site-header-cart .ast-cart-menu-wrap .count::before{ content:"("; }
.ast-site-header-cart .ast-cart-menu-wrap .count::after{
  content:")" !important; position:static !important; display:inline !important;
  width:auto !important; height:auto !important; margin:0 !important;
  border:0 !important; border-radius:0 !important; transform:none !important;
  top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
}

/* --- off-canvas (side cart) style: hide the bag glyph; the count lives on the
       icon as data-cart-total, exposed via ::after → print it as "(N)" --- */
.ast-site-header-cart .ast-addon-cart-wrap .astra-icon{
  font-size:14px !important; padding:0 !important; margin:0 !important; width:auto !important; height:auto !important;
}
.ast-site-header-cart .ast-addon-cart-wrap .astra-icon .ast-icon,
.ast-site-header-cart .ast-addon-cart-wrap .astra-icon > svg{ display:none !important; }
.ast-site-header-cart .ast-addon-cart-wrap .astra-icon::after,
.ast-site-header-cart .ast-addon-cart-wrap .astra-icon.no-cart-total::after{
  content:"(" attr(data-cart-total) ")" !important;
  display:inline !important; position:static !important; background:none !important;
  color:var(--bb-copper) !important; font-family:'Space Grotesk',sans-serif !important;
  font-weight:500 !important; font-size:14px !important; line-height:1 !important;
  min-width:0 !important; width:auto !important; height:auto !important; padding:0 !important; margin:0 !important;
  border:0 !important; border-radius:0 !important; transform:none !important;
  box-shadow:none !important; text-shadow:none !important;   /* kill Astra's badge drop-shadow */
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
}

/* ---- header search icon: match the nav (navy, hover blue) ---- */
.ast-header-search .astra-search-icon{ color:var(--bb-ink); }
.ast-header-search .astra-search-icon:hover{ color:var(--bb-copper); }
.ast-header-search .astra-search-icon .ast-icon svg{ fill:currentColor; height:18px; width:18px; }

/* ---- header account icon (logged-in) — sits just left of the cart ---- */
.bb-header-account{ display:inline-flex; align-items:center; margin-right:20px; }
.bb-header-account .bb-account-link{ display:inline-flex; align-items:center; color:var(--bb-ink); line-height:0; }
.bb-header-account .bb-account-link:hover{ color:var(--bb-copper); }
.bb-header-account .bb-account-ico{ display:block; }

/* ---- breadcrumb -----------------------------------------------------------
   A full-bleed grey band (like the hero/footer) with the text held at content
   width, flush under the header — on shop/category/tag archives AND single
   products. Woo prints the archive breadcrumb at the top of the content; on single
   products functions.php moves it back there too (out of Astra's summary column)
   so both use the identical bar. */
.woocommerce-breadcrumb a{color:var(--bb-muted);}
.woocommerce-breadcrumb a:hover{color:var(--bb-copper);}

.tax-product_cat .woocommerce-breadcrumb,
.tax-product_tag .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb,
.woocommerce-shop .woocommerce-breadcrumb,
.search .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb{
  position:relative; z-index:0;
  background:transparent; border:0;
  padding:15px 0; margin:0 0 26px;
  font-size:13px; color:var(--bb-muted);
}
/* the tinted bar spans the full viewport, behind the content-width text.
   display:block beats WooCommerce's clearfix ::before (display:table), which would
   otherwise collapse the bar to 0 height. */
.tax-product_cat .woocommerce-breadcrumb::before,
.tax-product_tag .woocommerce-breadcrumb::before,
.post-type-archive-product .woocommerce-breadcrumb::before,
.woocommerce-shop .woocommerce-breadcrumb::before,
.search .woocommerce-breadcrumb::before,
.single-product .woocommerce-breadcrumb::before{
  content:""; display:block; position:absolute; z-index:-1; top:0; bottom:0;
  left:50%; transform:translateX(-50%); width:100vw;
  background:var(--bb-surface); border-bottom:1px solid var(--bb-line);
}
/* drop Astra's 60px content-top gap so the bar sits flush under the header */
.tax-product_cat .content-area,
.tax-product_tag .content-area,
.post-type-archive-product .content-area,
.woocommerce-shop .content-area,
.search .content-area,
.single-product .content-area{ margin-top:0 !important; }

/* ---- product-archive title area (category header) — matches mockup ---- */
.woocommerce-products-header{
  padding:0 0 22px;
  margin:0 0 24px;
  border-bottom:1px solid var(--bb-line);   /* divider under the title area */
}
.woocommerce-products-header__title{
  font-size:40px; font-weight:700; letter-spacing:-.025em; line-height:1.12;
  color:var(--bb-ink); margin:0 0 12px;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header .term-description p,
.woocommerce-products-header .bb-archive-tradenote{
  font-size:16px; line-height:1.6; color:var(--bb-body); max-width:760px; margin:0;
}
.woocommerce-products-header .bb-archive-tradenote{ color:var(--bb-muted); margin-top:2px; }
.woocommerce-products-header .bb-archive-tradenote strong{ color:var(--bb-ink); font-weight:600; }
.woocommerce-products-header .bb-archive-tradenote a{ color:var(--bb-copper); }
/* thin divider under the toolbar, above the grid (archives only) */
.ast-woo-shop-archive ul.products{ border-top:1px solid var(--bb-line); margin-top:14px; padding-top:30px; }
/* list view: match grid's spacing above the pagination (grid gap = ul margin-bottom 15px) */
.mps-products-view-list .woocommerce-pagination{ margin-top:15px !important; }

/* ---- product-archive toolbar: count left · sorting + Grid/List toggle right ---- */
.bb-shop-toolbar{ display:contents; }   /* desktop: wrapper vanishes → floats below lay out as before. Mobile (≤768) flips it to flex. */
.woocommerce .woocommerce-result-count{ float:left; margin:0; color:var(--bb-muted); font-size:14px; line-height:38px; }
.woocommerce .woocommerce-ordering{ float:right; margin:0 24px 0 18px; }   /* gap between sorting and the view toggle */
.woocommerce ul.products{ clear:both; }        /* start the grid below the toolbar */
.mps-products-viewtoggle{ float:right; display:inline-flex; align-items:center; margin:0; }
.mps-products-viewtoggle__label{ color:var(--bb-muted); font-size:13px; margin-right:12px; }
.mps-products-viewtoggle__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; font-size:13.5px; font-weight:600; line-height:1;
  color:var(--bb-ink); background:#fff; text-decoration:none;
  border:1px solid var(--bb-strong);
}
.mps-products-viewtoggle__btn:first-of-type{ border-radius:var(--bb-radius) 0 0 var(--bb-radius); }
.mps-products-viewtoggle__btn:last-of-type{ border-radius:0 var(--bb-radius) var(--bb-radius) 0; border-left:0; }
.mps-products-viewtoggle__btn:hover{ color:var(--bb-copper); }
.mps-products-viewtoggle__btn.is-current,
.mps-products-viewtoggle__btn.is-current:hover{ background:var(--bb-copper); border-color:var(--bb-copper); color:#fff; }
/* grid / list glyphs (mask → inherit the button text colour) */
.mps-products-viewtoggle__btn::before{
  content:""; width:15px; height:15px; background:currentColor; flex:0 0 auto;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;
}
.mps-products-viewtoggle__btn:first-of-type::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1.2'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1.2'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1.2'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1.2'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1.2'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1.2'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.2'/%3E%3C/svg%3E");
}
.mps-products-viewtoggle__btn:last-of-type::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='2' rx='1'/%3E%3Crect x='1' y='7' width='14' height='2' rx='1'/%3E%3Crect x='1' y='12' width='14' height='2' rx='1'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='2' rx='1'/%3E%3Crect x='1' y='7' width='14' height='2' rx='1'/%3E%3Crect x='1' y='12' width='14' height='2' rx='1'/%3E%3C/svg%3E");
}
/* ============================================================
   Mobile (≤768px): header + product-archive toolbar cleanup
   ============================================================ */
@media (max-width:768px){

  /* header de-crowd: the account link is in the off-canvas menu on mobile, so drop
     the redundant header account icon — leaves room so "Cart (N)" never wraps. */
  .bb-header-account{ display:none; }

  /* toolbar → one tidy row: a full-width "Filter & sort" button + an icon-only
     Grid/List toggle, with the result count on its own line beneath. The wrapper
     (.bb-shop-toolbar) flips from display:contents to flex here. */
  .bb-shop-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 22px; }
  .bb-shop-toolbar .woocommerce-result-count,
  .bb-shop-toolbar .woocommerce-ordering,
  .bb-shop-toolbar .mps-products-viewtoggle{ float:none !important; margin:0 !important; }
  .bb-shop-toolbar .woocommerce-ordering{ order:1; flex:1 1 auto; min-width:0; }
  .bb-shop-toolbar .mps-products-viewtoggle{ order:2; flex:0 0 auto; }
  .bb-shop-toolbar .woocommerce-result-count{ order:3; flex:1 0 100%; width:100%; line-height:1.4; margin:2px 0 0 !important; }

  /* the sort <select> presented as a "Filter & sort" button: the container is the
     visible button face (funnel glyph + label) and the real <select> overlays it at
     opacity 0, so a tap opens the OS-native picker — no custom JS or drawer. */
  .woocommerce-ordering{
    position:relative;
    display:flex; align-items:center; justify-content:center; gap:9px;
    height:52px; padding:0 16px;
    border:1px solid var(--bb-strong); border-radius:var(--bb-radius); background:#fff;
  }
  .woocommerce-ordering::before{     /* funnel glyph */
    content:""; width:17px; height:17px; flex:0 0 auto; background:var(--bb-ink);
    -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3h13l-5 6v4.2l-3 1.6V9z'/%3E%3C/svg%3E");
            mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3h13l-5 6v4.2l-3 1.6V9z'/%3E%3C/svg%3E");
  }
  .woocommerce-ordering::after{
    content:"Filter & sort";
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--bb-ink);
  }
  .woocommerce-ordering select.orderby{
    position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
    border:0; background:none; opacity:0; cursor:pointer;
    -webkit-appearance:none; appearance:none;
  }

  /* Grid/List toggle → two icon-only squares (label hidden), matching the mockup */
  .mps-products-viewtoggle{ display:flex; align-items:center; }
  .mps-products-viewtoggle__label{ display:none; }
  /* !important: MPS archive-list.css re-styles these buttons in list view and loads
     after this file at equal specificity — force the icon-only square in both views. */
  .mps-products-viewtoggle__btn{ width:52px !important; height:52px !important; padding:0 !important; justify-content:center; font-size:0 !important; overflow:hidden; }
  .mps-products-viewtoggle__btn::before{ width:19px; height:19px; }

  /* grid view → 2 columns on phones (list view keeps its own stacked rows) */
  body.mps-products-view-grid ul.products{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px 14px !important; margin:0 !important;
  }
  body.mps-products-view-grid ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; }
}

/* list view: qty input beside (left of) the Add-to-cart button, not stacked above
   it. Widen the actions column so qty + button fit on one line; the pack/MOQ note
   wraps below. Desktop only — mobile keeps the plugin's stacked layout. */
@media (min-width:922px){
  .mps-products-view-list .mps-products-list__head,
  .mps-products-view-list ul.products li.product.mps-products-list__row{
    grid-template-columns:minmax(0,1fr) 135px 120px 135px 250px !important;
  }
  .mps-products-view-list .mps-products-list__buy{ justify-content:flex-end; align-items:center; gap:10px 10px; }
  .mps-products-view-list .mps-products-list__buy .quantity{ margin:0 !important; }
  .mps-products-view-list .mps-products-list__buy .button{
    flex:0 0 auto !important; width:auto !important; margin:0 !important; white-space:nowrap;
  }
  .mps-products-view-list .mps-products-list__buy .mps-products-list__packnote{
    flex-basis:100%; margin:6px 0 0; text-align:right;
  }
}

/* ---- buttons ------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  border-radius:var(--bb-radius);
  font-weight:600;
  letter-spacing:.02em;
}
/* secondary / outline — used for "Add to bulk order", "Download PDF" */
.woocommerce a.button.bb-ghost,
.woocommerce button.button.bb-ghost{
  background:#fff;
  color:var(--bb-ink);
  border:1px solid var(--bb-strong);
}
.woocommerce a.button.bb-ghost:hover,
.woocommerce button.button.bb-ghost:hover{
  background:var(--bb-copper);
  border-color:var(--bb-copper);
  color:#fff;
}

/* ---- product loop cards -------------------------------- */
/* NOTE: these equal-height grid-card rules use :not(.mps-products-list__row) so they
   never touch the plugin's List view (its rows are a CSS grid, laid out by the plugin). */
.woocommerce ul.products{ align-items:stretch; }     /* stretch every card in a row to equal height */
.woocommerce ul.products li.product:not(.mps-products-list__row){
  display:flex !important;
  flex-direction:column;
  height:100% !important;      /* fill the stretched grid cell */
}
/* consistent, uncropped image frame so every card starts at the same height */
.woocommerce ul.products li.product:not(.mps-products-list__row) .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product:not(.mps-products-list__row) a.woocommerce-LoopProduct-link{ display:block; }
.woocommerce ul.products li.product:not(.mps-products-list__row) img{
  border:1px solid var(--bb-line);
  border-radius:0;
  aspect-ratio:1/1;
  object-fit:contain;          /* show the whole product, never crop */
  background:#fff;
  width:100% !important;
  height:auto !important;
}
/* clamp titles to 2 lines so a long name never pushes the row out of line */
.woocommerce ul.products li.product:not(.mps-products-list__row) .woocommerce-loop-product__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  color:var(--bb-ink);
  padding:0;
}
.woocommerce ul.products li.product .price{
  font-size:16px;
  font-weight:600;
  color:var(--bb-ink);
  margin-top:auto;             /* pin price + button to the bottom */
}
.woocommerce ul.products li.product .price del{
  font-size:13px;
  color:#A8A296;
  font-weight:400;
  margin-right:6px;
}
.woocommerce ul.products li.product .price ins{text-decoration:none;}
.woocommerce ul.products li.product .button{
  width:100%;
  text-align:center;
  background:#fff;
  color:var(--bb-ink);
  border:1px solid var(--bb-strong);
  font-size:13.5px;
  padding:11px 16px;
}
.woocommerce ul.products li.product .button:hover{
  background:var(--bb-copper);
  border-color:var(--bb-copper);
  color:#fff;
}
/* Astra wraps title/chips/price/button in .astra-shop-summary-wrap — make it fill
   the stretched card so price + button pin to the very bottom (buttons always in line).
   margin-top:auto on both price and button covers cards with or without a price. */
.woocommerce ul.products li.product:not(.mps-products-list__row) .astra-shop-summary-wrap{
  display:flex !important;
  flex-direction:column;
  flex:1 1 auto;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .price,
.woocommerce ul.products li.product .astra-shop-summary-wrap .button{
  margin-top:auto;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .price ~ .button{
  margin-top:12px;   /* once the price has claimed the gap, keep the button close to it */
}

/* ---- single product ------------------------------------ */
.woocommerce div.product .product_title{
  font-size:34px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--bb-ink);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-size:30px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--bb-ink);
}
.woocommerce div.product p.price del{
  font-size:15px;
  font-weight:400;
  color:#A8A296;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:15px;
  line-height:1.75;
  color:var(--bb-body);
}
.woocommerce div.product form.cart div.quantity input.qty{
  height:52px;
  width:56px;
  border:1px solid var(--bb-strong);
  border-radius:0;
  font-weight:600;
  color:var(--bb-ink);
}
.woocommerce div.product form.cart .button{
  height:52px;
  padding:0 32px;
  font-size:15px;
}
.product_meta{
  border-top:1px solid var(--bb-line);
  padding-top:18px;
  font-size:13.5px;
  color:var(--bb-muted);
}
.product_meta > span{display:block;margin-bottom:8px;}
.product_meta .sku{font-family:var(--bb-mono);color:var(--bb-body);}

/* ---- tabs ---------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0;
  margin:0 0 -1px;
  border-bottom:1px solid var(--bb-line);
  display:flex;
  flex-wrap:wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;
  border:0;
  border-radius:0;
  margin:0;
  padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:15px 26px;
  font-size:14px;
  font-weight:500;
  color:var(--bb-muted);
  border-bottom:3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--bb-ink);
  font-weight:600;
  border-bottom-color:var(--bb-copper);
}

/* ---- tables (parts lists, additional information) ------- */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes{
  border:1px solid var(--bb-line);
  border-radius:0;
  border-collapse:collapse;
}
.woocommerce table.shop_table thead th{
  background:var(--bb-surface);
  border-bottom:1px solid var(--bb-line);
  font-family:var(--bb-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bb-muted);
  padding:12px 16px;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--bb-divider);
  padding:12px 16px;
  font-size:13.5px;
}

/* ---- notices ------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top:0;
  border-radius:0;
  font-size:14px;
  padding:15px 32px;
}
.woocommerce-message{
  background:#F2F8F3;
  border-bottom:1px solid #D6E7D9;
  color:var(--bb-body);
}
.woocommerce-message::before{color:#4A8A57;}
.woocommerce-info{
  background:#FBFAF7;
  border-bottom:1px solid var(--bb-line);
  color:var(--bb-body);
}
.woocommerce-info::before{color:var(--bb-copper);}

/* ---- B2B feature chips --------------------------------- */
/* Applied to plugin-rendered term/badge markup. One blue chip for the
   product UI type, grey chips for the features switched on.          */
.bb-chip{
  display:inline-block;
  font-family:var(--bb-mono);
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 9px;
  border-radius:var(--bb-radius);
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  color:var(--bb-muted);
  white-space:nowrap;
}
.bb-chip--type{
  background:var(--bb-accent);
  border-color:var(--bb-accent-line);
  color:var(--bb-copper);
}
.bb-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;}

/* ---- My Account login screen (branded two-column card) ---- */
.woocommerce-account .bb-login{
  display:grid; grid-template-columns:1fr 1fr;
  max-width:1000px; margin:24px auto 48px;
  background:#fff; border:1px solid var(--bb-line); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px -35px rgba(15,42,82,.35);
}
.bb-login__panel{ padding:52px 48px; }
.bb-login__apply{ background:var(--bb-ink); color:#fff; display:flex; flex-direction:column; }
/* both columns are flex so their buttons bottom-align to the same line */
.bb-login__signin{ display:flex; flex-direction:column; }
.bb-login__signin form{ display:flex; flex-direction:column; flex:1 1 auto; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; }   /* kill WooCommerce's default form.login box so the panel isn't doubled */
.bb-login__signin .bb-login__meta{ margin-top:auto; }   /* push "remember me" + Sign in to the bottom */
.bb-login__signin form .form-row:last-child{ margin:0 !important; }   /* submit row flush to the panel bottom */
.bb-login__brand{ margin:0 0 34px; line-height:0; }
.bb-login__brand .custom-logo,.bb-login__brand img{ height:34px !important; width:auto !important; }
.bb-login__brandtext{ font-weight:700; font-size:20px; color:var(--bb-ink); }
.bb-login__signin .bb-login__title{ font-size:32px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--bb-ink); margin:0 0 12px; }
.bb-login__sub{ font-size:16px; line-height:1.5; color:var(--bb-body); margin:0 0 32px; }
.bb-login .woocommerce-form-row{ margin:0 0 20px; }
.bb-login .woocommerce-form-row label{ display:block; font-size:14px; font-weight:600; color:var(--bb-ink); margin:0 0 8px; }
.bb-login .input-text{
  width:100%; height:54px; padding:0 16px; box-sizing:border-box;
  border:1px solid var(--bb-strong); border-radius:9px; font-size:15px; color:var(--bb-ink); background:#fff;
}
.bb-login .input-text::placeholder{ color:var(--bb-faint); }
.bb-login .input-text:focus{ border-color:var(--bb-copper); box-shadow:0 0 0 3px rgba(26,109,242,.16); outline:none; }
.bb-login__meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 26px; }
.bb-login__meta label{ display:flex; align-items:center; gap:9px; margin:0; font-size:15px; color:var(--bb-body); cursor:pointer; }
.bb-login__meta input[type=checkbox]{ width:18px; height:18px; accent-color:var(--bb-copper); }
.bb-login__forgot{ color:var(--bb-copper); font-weight:600; font-size:15px; white-space:nowrap; }
.bb-login__submit{
  width:100%; height:56px; background:var(--bb-copper); color:#fff !important; border:0; border-radius:9px;
  font-size:16px; font-weight:600; letter-spacing:.01em; cursor:pointer;
}
.bb-login__submit:hover{ background:var(--bb-ink); }
.bb-login__eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bb-copper); margin:0 0 18px; }
.bb-login__apply .bb-login__title{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.12; color:#fff; margin:0 0 16px; }
.bb-login__applysub{ font-size:15.5px; line-height:1.65; color:#A8A296; margin:0 0 28px; }
.bb-login__checks{ list-style:none; margin:0; padding:0; }
.bb-login__checks li{ position:relative; padding-left:30px; margin:0 0 18px; font-size:16px; color:#C4C1B8; }
.bb-login__checks li::before{ content:"\2713"; position:absolute; left:2px; top:-1px; color:var(--bb-copper); font-weight:800; }
.bb-login__applybtn{
  display:block; text-align:center; margin-top:auto; padding:17px 20px;
  background:#fff; color:var(--bb-ink); font-weight:600; font-size:16px; border-radius:9px; text-decoration:none;
}
.bb-login__applybtn:hover{ background:var(--bb-accent); }
/* hide the redundant "My account" page title on the logged-out login screen */
.woocommerce-account:not(.logged-in) .entry-header,
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) .ast-archive-description{ display:none !important; }
@media (max-width:768px){
  .woocommerce-account .bb-login{ grid-template-columns:1fr; margin:12px auto 32px; }
  .bb-login__panel{ padding:36px 28px; }
  .bb-login__applybtn{ margin-top:24px; }
}

/* ---- footer -------------------------------------------- */
.site-footer,
.site-primary-footer-wrap,
.site-above-footer-wrap,
.site-below-footer-wrap,
.ast-below-footer-wrap,
footer.site-footer .ast-builder-grid-row-container{
  background-color:var(--bb-ink) !important;
}
.site-footer,
.site-footer p,
.site-footer .widget{color:#C4C1B8;}
.site-footer .widget-title,
.site-footer h2{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.site-footer a{color:#A8A296;}
.site-footer a:hover{color:#fff;}
.site-footer .bb-foot-logo{max-width:150px;height:auto;margin-bottom:14px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin:0 0 8px;}
/* socket / copyright row: content-width divider (not full bleed), text left + right */
.site-below-footer-wrap,
.ast-below-footer-wrap{border-top:0 !important;}   /* kill Astra's full-width divider */
.site-below-footer-wrap *,
.ast-below-footer-wrap *{color:#A8A296;font-size:12px;}
.bb-socket{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;width:100%;
  border-top:1px solid rgba(255,255,255,.06);padding-top:22px;
}
@media (max-width:544px){ .bb-socket{justify-content:center;text-align:center;} }
/* breathing room at the top of the footer band */
.site-above-footer-wrap{ padding-top:64px !important; }
@media (max-width:544px){ .site-above-footer-wrap{ padding-top:44px !important; } }
/* 4-column footer widget row */
.site-above-footer-wrap .ast-builder-footer-grid-columns{
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:40px;
}
@media (max-width:921px){
  .site-above-footer-wrap .ast-builder-footer-grid-columns{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
}
@media (max-width:544px){
  .site-above-footer-wrap .ast-builder-footer-grid-columns{grid-template-columns:1fr !important;}
}

/* ---- feature filter pills ------------------------------ */
.bb-pills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 30px;}
.bb-pill{
  display:inline-block;font-size:12.5px;font-weight:500;line-height:1;
  padding:9px 15px;border-radius:var(--bb-radius);border:1px solid var(--bb-line-2);
  color:var(--bb-body);background:#fff;text-decoration:none;white-space:nowrap;
  transition:border-color .12s,color .12s,background .12s;
}
.bb-pill:hover{border-color:var(--bb-copper);color:var(--bb-copper);}
.bb-pill.is-active{background:var(--bb-copper);border-color:var(--bb-copper);color:#fff;}

/* ========================================================
   Homepage bands
   ======================================================== */
.home .site-content .ast-container{max-width:none;padding:0;}   /* full-width page: bands go edge-to-edge */
.bb-band{width:100%;}
/* ...but band CONTENT lines up with the header (Astra's full-width template
   strips max-width off entry-content children, so force it back). 1240 = the
   header container box, so content edges match the logo/menu. */
.home .bb-hero,
.home .bb-trade,
.home .bb-closing{ max-width:none !important; }   /* full-bleed background bands */
.home .bb-bulk-band{ max-width:1240px !important; margin:56px auto !important; } /* contained navy card (not full-bleed) */
.home .bb-hero-inner,
.home .bb-trade-inner,
.home .bb-closing-inner,
.home .bb-section{
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* every section's content sits on the same 20px inset (673 → 1873), matching
   the header/footer. wp:group sections otherwise inherit a wider block padding. */
.home .bb-section{ padding-left:20px !important; padding-right:20px !important; }

/* On desktop, pull every band's CONTENT out to the 1240 wrapper edge (653 → 1893)
   so it is exactly as wide as the blue CTA band's background. The blue CTA text
   keeps its own 20px inset (that band reads as "correct"). Mobile keeps the 20px
   gutters below so content never touches the screen edge. */
@media (min-width:1280px){
  .home .bb-hero-copy{ padding-left:0 !important; }
  .home .bb-trade-inner{ padding-left:0 !important; padding-right:0 !important; }
  .home .bb-section{ padding-left:0 !important; padding-right:0 !important; }
  .home .bb-closing-inner{ padding-left:0 !important; padding-right:0 !important; }
  /* header logo + nav + cart share the same 653→1893 edge as the bands */
  .site-header .ast-container{ padding-left:0 !important; padding-right:0 !important; }
}
.bb-section{max-width:1200px;margin:0 auto;padding:52px 20px;}
.bb-section > .wp-block-heading,
.bb-section h2{font-size:24px;font-weight:600;color:var(--bb-ink);margin:0 0 6px;}

/* generic buttons inside marketing bands */
.bb-band a.button{
  display:inline-block;background:var(--bb-copper);color:#fff;border:1px solid var(--bb-copper);
  border-radius:var(--bb-radius);font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:15px 30px;text-decoration:none;line-height:1;
}
.bb-band a.button:hover{background:var(--bb-ink);border-color:var(--bb-ink);color:#fff;}
.bb-band a.button.bb-ghost{background:#fff;color:var(--bb-ink);border:1px solid var(--bb-strong);}
.bb-band a.button.bb-ghost:hover{background:var(--bb-copper);border-color:var(--bb-copper);color:#fff;}

/* placeholder tiles until real imagery lands */
.bb-ph-label{color:var(--bb-faint);font-size:13px;font-family:var(--bb-mono);}
.bb-hero-media,.bb-ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--bb-surface-2);border:1px dashed var(--bb-strong);
}

/* 1 · hero */
.bb-hero{background:var(--bb-surface);border-bottom:1px solid var(--bb-line);}
.bb-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.bb-hero-copy{padding:70px 44px 70px 20px;align-self:center;}
/* hero graphic: branded B2B wholesale-order preview (SVG asset, no placeholder look) */
.bb-hero-media{
  min-height:420px;
  border:0;
  background:#F4F1E9 url(assets/hero-b2b.svg) center/cover no-repeat;
}
.bb-hero-media .bb-ph-label{display:none;}
.bb-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-copper);margin:0 0 14px;}
.bb-hero-h1{font-size:44px;font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--bb-ink);margin:0 0 18px;}
.bb-hero-body{font-size:16.5px;line-height:1.75;color:var(--bb-body);max-width:490px;margin:0 0 26px;}
.bb-hero-cta{display:flex;gap:12px;flex-wrap:wrap;}

/* 2 · trade assurance strip */
.bb-trade{background:#fff;border-bottom:1px solid var(--bb-line);}
.bb-trade-inner{max-width:1200px;margin:0 auto;padding:26px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
.bb-trade-item{font-size:13.5px;color:var(--bb-body);}
.bb-tick{color:var(--bb-copper);font-weight:700;margin-right:6px;}

/* 4 · shop by category (WooCommerce block → big 4-up image tiles) */
.bb-cats ul.wc-block-product-categories-list{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.bb-cats .wc-block-product-categories-list-item{margin:0;padding:0;}
.bb-cats .wc-block-product-categories-list-item > a{display:block !important;text-decoration:none;}
.bb-cats .wc-block-product-categories-list-item__image{
  display:block !important;width:100% !important;height:auto !important;max-width:none !important;
  aspect-ratio:1/1;overflow:hidden;margin:0 0 14px !important;float:none !important;
  border:1px solid var(--bb-line);
  background:#fff;padding:18px;box-sizing:border-box;   /* consistent square frame */
}
.bb-cats .wc-block-product-categories-list-item__image img{width:100% !important;height:100% !important;max-width:none !important;object-fit:contain;display:block;}
/* categories without a set image → keep the striped placeholder look */
.bb-cats .wc-block-product-categories-list-item__image--placeholder{background:repeating-linear-gradient(45deg,#EAE4D8 0 9px,#F8F5EE 9px 18px);padding:0;}
.bb-cats .wc-block-product-categories-list-item__image--placeholder img{opacity:0;}

/* category section heading row: heading left, "All categories" button right */
.bb-cats-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.bb-cats-head h2{margin:0;}
/* plain text link (matches the closing-section links) — no button box */
.bb-cats-viewall{
  font-size:14px;font-weight:600;color:var(--bb-copper);text-decoration:none;white-space:nowrap;
  border:0;border-radius:0;padding:0;line-height:1;background:none;
}
.bb-cats-viewall:hover{color:var(--bb-ink);background:none;}
.bb-cats .wc-block-product-categories-list-item a{font-size:18px;font-weight:600;color:var(--bb-ink);line-height:1.3;}
.bb-cats .wc-block-product-categories-list-item a:hover{color:var(--bb-copper);}
.bb-cats .wc-block-product-categories-list-item-count{display:block;margin-top:5px;color:var(--bb-muted);font-size:14px;font-weight:400;}
@media (max-width:921px){ .bb-cats ul.wc-block-product-categories-list{grid-template-columns:repeat(2,1fr);gap:24px;} }
@media (max-width:544px){ .bb-cats ul.wc-block-product-categories-list{grid-template-columns:1fr;} }

/* 5 · featured */
.bb-featured .bb-sub{font-size:13px;color:var(--bb-muted);margin:0 0 4px;}

/* 6 · bulk order band (navy CONTAINED card, padded in from the page edges) */
.bb-bulk-band{background:var(--bb-ink);}
.bb-bulk-inner{padding:44px 20px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;} /* 20px sides → content aligns to 673 like every other section */
@media (max-width:544px){ .bb-bulk-inner{padding:32px 20px;} }
.bb-eyebrow--onink{color:#E0A468;}
.bb-bulk-h2{font-size:30px;font-weight:600;color:#fff;margin:0 0 16px;line-height:1.2;}
.bb-bulk-body{font-size:15.5px;line-height:1.75;color:#C4C1B8;max-width:420px;margin:0 0 24px;}
.bb-bulk-card{background:#fff;border-radius:6px;padding:8px 4px;}
.bb-bulk-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.bb-bulk-table th{font-family:var(--bb-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-muted);background:var(--bb-surface);text-align:left;padding:11px 14px;}
.bb-bulk-table td{padding:11px 14px;border-top:1px solid var(--bb-divider);color:var(--bb-body);}
.bb-bulk-table tfoot td{font-weight:600;color:var(--bb-ink);border-top:1px solid var(--bb-line-2);}

/* 7 · three closing columns */
.bb-closing{background:#fff;}
.bb-closing-inner{max-width:1200px;margin:0 auto;padding:52px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.bb-close-col h3{font-size:16.5px;font-weight:600;color:var(--bb-ink);margin:0 0 10px;}
.bb-close-col p{font-size:14.5px;line-height:1.75;color:var(--bb-body);margin:0 0 12px;}
.bb-close-link{font-size:13.5px;font-weight:600;color:var(--bb-copper);text-decoration:none;}
.bb-close-link:hover{color:var(--bb-ink);}

@media (max-width:921px){
  .bb-hero-inner,.bb-bulk-inner{grid-template-columns:1fr;}
  .bb-hero-copy{padding:44px 20px;}
  .bb-hero-h1{font-size:32px;}
  .bb-hero-media{min-height:260px;}
  .bb-trade-inner{grid-template-columns:1fr 1fr;}
  .bb-closing-inner{grid-template-columns:1fr;gap:26px;}
}
@media (max-width:544px){
  .bb-trade-inner{grid-template-columns:1fr;}
}

/* ---- responsive ---------------------------------------- */
@media (max-width:921px){
  .woocommerce ul.products.columns-4 li.product{width:48%;}
  .woocommerce div.product .product_title{font-size:26px;}
  .woocommerce div.product p.price{font-size:24px;}
}
@media (max-width:544px){
  .woocommerce ul.products.columns-4 li.product{width:100%;}
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:13px 16px;}
}

/* =========================================================
   Block Checkout (woocommerce/checkout) — brand the form
   The store uses the block Checkout (Store API), so these target
   the .wc-block-* component classes rather than the classic form.
   Presentation only.
   ========================================================= */

/* section headings (Contact information, Shipping address, …) → brand type */
.wc-block-checkout .wc-block-components-checkout-step__title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  color:var(--bb-ink);
  font-size:18px;
}
.wc-block-checkout .wc-block-components-checkout-step__description{ color:var(--bb-muted); }

/* text inputs + selects → brand border, radius, blue focus ring
   (block default is a heavy near-black border at 4px radius) */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-address-form input,
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea{
  border:1px solid var(--bb-strong) !important;
  border-radius:var(--bb-radius) !important;
  background:#fff;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-address-form input:focus,
.wc-block-checkout .wc-block-components-combobox input:focus,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus{
  border-color:var(--bb-copper) !important;
  box-shadow:0 0 0 1px var(--bb-copper) !important;
  outline:none !important;
}
/* floating labels → muted, blue once floated/active */
.wc-block-checkout .wc-block-components-text-input label{ color:var(--bb-muted); }
.wc-block-checkout .wc-block-components-text-input.is-active label{ color:var(--bb-copper); }

/* radios + checkboxes → brand blue fill (block default is near-black) */
.wc-block-checkout input[type=radio],
.wc-block-checkout input[type=checkbox]{ accent-color:var(--bb-copper); }
.wc-block-checkout .wc-block-components-radio-control__input:checked{
  border-color:var(--bb-copper) !important;
  background:#fff !important;                 /* white ring… */
}
.wc-block-checkout .wc-block-components-radio-control__input:checked::before{
  background:var(--bb-copper) !important;       /* …blue centre dot (block default draws it black) */
}

/* selectable option rows (shipping method, payment) → brand the chosen box */
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control__option{
  border-radius:var(--bb-radius);
}
.wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  box-shadow:inset 0 0 0 1.5px var(--bb-copper) !important;   /* block draws this box as a dark inset shadow */
}

/* Place Order button — already brand blue; tighten radius, size + hover */
.wc-block-checkout .wc-block-components-checkout-place-order-button{
  background:var(--bb-copper) !important;
  border-radius:var(--bb-radius) !important;
  min-height:52px;
  font-weight:600; letter-spacing:.02em;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover{
  background:var(--bb-ink) !important;
}

/* order-summary card → brand border/radius + heading type */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block{
  border:1px solid var(--bb-line) !important;
  border-radius:var(--bb-radius) !important;
  background:var(--bb-surface);
}
.wc-block-checkout .wc-block-components-checkout-order-summary__title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  color:var(--bb-ink);
}
/* the grand total row → navy, to anchor the summary */
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--bb-ink);
}
/* "Add coupons" panel divider colour */
.wc-block-checkout .wc-block-components-panel{ border-color:var(--bb-line); }