.napkins-towels-menu-top {
	margin-bottom: 4px;
}

img.wp-image-539 {
    height: 20px !important;
    width: auto !important;
    vertical-align: middle;
    position: relative;
    top: -1px;              /* nudge to center against the text */
}

/* === BIZCO FiboSearch bar styling (Solaris) === */

/* Wrapper: just radius + clip, NO border */
.dgwt-wcas-search-wrapp {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.dgwt-wcas-suggestions-wrapp {
    background: #FFFFFF !important;
    overscroll-behavior: none !important;
}

/* Input carries the border on left/top/bottom only — never near the green button */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
    font-family:'Outfit',sans-serif !important;
/* 	border-right: none !important; */
    box-shadow: none !important;
    font-size: 1.15rem !important;
	 border-radius:999px 0 0 999px !important;   /* rounded left side */
  border:none !important;        /* soft green-tint border */
  height:52px !important;
  padding-left:22px !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form{
  border:1.5px solid #CFE3D6 !important;
  border-radius:999px !important;
  overflow:hidden !important;   /* clips button corners to the pill shape */
}

/* Submit button: green, flush right, rounded right corners */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
    background:#0F9558 !important;
    border: none !important;
	border-radius:0 999px 999px 0 !important;
	
     width:56px !important;
    min-width: 3.5rem !important;
    margin: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 3.2rem !important;
}

/* White submit icon — larger */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg path {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg {
    width: 1.8rem !important;
    height: 1.8rem !important;
    transform: scale(1.25) !important;
}

/* Placeholder: darker grey, slightly heavier weight */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder {
    color: #9A9A9A !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* Submit hover state */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:hover {
    background: #0F5230 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus{
  border-color:#1A7A4A !important;
  box-shadow:0 0 0 3px rgba(26,122,74,.12) !important;
  outline:none !important;
}

/* === GHOST (outline) header button — unchanged on hover === */
.ct-header-cta .ct-button-ghost:hover {
    background-color: transparent !important;
    color: #0F9558 !important;
    border-color: #0F9558 !important;
    --theme-button-text-initial-color: #0F9558 !important;
    --theme-button-text-hover-color: #0F9558 !important;
}

/* === MEGA MENU tiles === */
.mega-tile {
    position: relative !important;
}
.mega-tile a {
    position: static !important;
}
.mega-tile .wp-block-heading a::after,
.mega-tile h2 a::after,
.mega-tile h3 a::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}
.mega-tile:hover a {
    text-decoration: underline !important;
}

/* === BREADCRUMBS divider on product pages === */
.ct-breadcrumbs {
    border-bottom: 1px solid #E0E0E0 !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}

/* Border radius on the main gallery image (Blocksy native gallery) */
.woocommerce-product-gallery__image img,
.flexy-items img,
.ct-product-gallery img {
    border-radius: 10px !important;
}

.sub-menu {
  container-type: inline-size;
  container-name: megamenu;
}

.mega-tile h5.wp-block-heading,
.mega-tile h5.wp-block-heading a {
  font-size: clamp(1rem, 0.5625rem + 1cqw, 1.5rem);
  line-height: 1.25;
  margin: 0;
}

.mega-tile h5.wp-block-heading a {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Desktop mega-menu: section title + tile images scale with panel width */
@media (min-width: 1000px) {
  .header-menu-1 .sub-menu .mega-menu-title-row h4 {
    font-size: clamp(1.4rem, 0.5rem + 1.6cqw, 1.75rem);
  }
  .header-menu-1 .sub-menu .mega-tile img,
  .header-menu-1 .sub-menu .mega-tile figure img {
    width: clamp(70px, 6.5cqw, 100px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .header-menu-1 .sub-menu .mega-tile .wp-block-column:first-child {
    flex: 0 0 auto !important;
  }
  .header-menu-1 .sub-menu .mega-tile .wp-block-column:last-child {
    flex: 1 1 0 !important;
    min-width: 0;
  }
}

/* Mega menu: symmetric vertical rhythm around the divider + image/title gap */
.header-menu-1 .sub-menu > li.menu-item:has(> .entry-content) {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.header-menu-1 .sub-menu .entry-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-menu-1 .sub-menu hr.wp-block-separator {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.header-menu-1 .sub-menu .mega-tile.wp-block-columns,
.header-menu-1 .sub-menu .mega-tile .wp-block-columns {
  column-gap: 24px !important;
}
/* last tile in a column: its inner columns block carries a 16px bottom margin that
   collapses through the wrapper and pads every column's bottom - kill it */
.header-menu-1 .sub-menu .wp-block-column > :last-child,
.header-menu-1 .sub-menu .wp-block-column > :last-child > .wp-block-columns:last-child {
  margin-bottom: 0 !important;
}

/* White bordered buy-box container around the summary elements */
.entry-summary,
.ct-product-summary {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 10px !important;
    padding: 24px !important;
}
/* Hide the variation price inside the add-to-cart area (we show it at the top instead) */
.woocommerce-variation-price {
    display: none !important;
}

/* 1. Hide price until JS reveals it (prevents range flash) */
.entry-summary > .price,
.ct-product-summary > .price,
p.price {
    visibility: hidden !important;
}
.bizco-price-ready .entry-summary > .price,
.bizco-price-ready .ct-product-summary > .price,
.bizco-price-ready p.price {
    visibility: visible !important;
}

/* 2. The variation price amount: large + red */
.bizco-price-amount,
.bizco-price-amount .woocommerce-Price-amount {
    color: #D32F2F !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
}

/* 3. The "/Container" suffix: dark + smaller */
.bizco-price-suffix {
    color: #2D2D2D !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
}

/* Font of the Quantity: X units on the PDP */
.bizco-units {
    font-weight: 500 !important;
}
.entry-summary > .price,
.ct-product-summary > .price,
p.price {
    margin-bottom: 0rem !important;
}

/* Remove margin between price and quantity on PDP */
.bizco-units {
    margin-top: 0 !important;
}

.bizco-units {
  font-size: 18px;
}
.bizco-units #bizco-qty {
  font-size: 18px;
  font-weight: 500;
}

/* Keep ONLY shape swatches visible (scoped to the shape attribute's cell) */
td:has(select[name="attribute_pa_shape"]) .ct-swatch-container.ct-hidden {
    display: inline-flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* bizco-ctl-v1: snippet 147 owns this button now (secondary A). These base
   values are kept only so the control still looks right if 147 is off. */
.bizco-inventory-list-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    height: 40px;
    padding: 0 16px;
    background:#EEF2F5;
    color:#3A4F66;
    border:1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s;box-sizing:border-box;}
.bizco-inventory-list-btn:hover {
    background:#E1E8EE;
    color:#192A3D;border-color:transparent;}
.bizco-inventory-list-btn::before {
    content: "+";
    margin-right: 8px;
    font-weight: 700;
}
/* Buy-box sizes to its content instead of stretching to gallery height */
/*
.entry-summary,
.ct-product-summary {
    align-self: flex-start !important;
}
*/

/* Right rail = transparent stack of cards */
.entry-summary,
.ct-product-summary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-self: flex-start !important;
}

/* Both white cards */
.bizco-buybox,
.bizco-overview {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 10px !important;
    padding: 24px !important;
}

/* Overview heading */
.bizco-overview-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: #2D2D2D;
}

/* Bullet list with green checkmarks */
.bizco-overview-content ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.bizco-overview-content ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.bizco-overview-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230F9558'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.bizco-buybox,
.bizco-overview {
    width: 100% !important;
}
/* Hide overview until JS moves it into the summary column */
.bizco-overview {
    display: none !important;
}
.entry-summary > .bizco-overview {
    display: block !important;
}

/* Restore spacing lost when the buy elements were wrapped in .bizco-buybox */
.bizco-buybox .ct-product-content-block {
    margin-bottom: 1rem !important;
}
.bizco-buybox .ct-product-divider {
    margin-bottom: 1rem !important;
}

/* Restore clean +/- on the quantity stepper (replace the broken icon glyphs) */
.bizco-buybox .quantity .ct-increase::before {
    content: "+" !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 500 !important;
}
.bizco-buybox .quantity .ct-decrease::before {
    content: "−" !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 500 !important;
}
.bizco-buybox .quantity .ct-increase::before,
.bizco-buybox .quantity .ct-decrease::before {
    font-size: 16px !important;
    line-height: 1 !important;
}
/* White card around the gallery (image + thumbnails) */
.woocommerce-product-gallery {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 10px !important;
    padding: 1.85rem !important;
    align-self: flex-start !important;
}

/* Make the product row a real flex container so gap works */
.product-entry-wrapper {
    display: flex !important;
    gap: 1rem !important;
    align-items: flex-start !important;
}

.product-entry-wrapper > .woocommerce-product-gallery {
    float: none !important;
    margin: 0 !important;
    /* width still controlled by Blocksy's Gallery → Container Width slider */
}
.product-entry-wrapper > .entry-summary {
    float: none !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* Gap between the buy box and the overview (stacked in the right column) */
.entry-summary {
    gap: 1rem !important;
}

/* PDP Price Transparency Box */

/* Product row = 2-column grid; left col stacks gallery + cost box */
.product-entry-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;  /* gallery wider; tweak ratio here */
    gap: 1rem !important;
    align-items: start !important;
}
.product-entry-wrapper > .woocommerce-product-gallery {
    grid-column: 1; order: 1;
    width: auto !important; max-width: none !important; float: none !important; margin: 0 !important;
}
.product-entry-wrapper > .bizco-cost-box {
    grid-column: 1; grid-row: 2;
    display: block !important;
}
.product-entry-wrapper > .entry-summary {
    grid-column: 2; grid-row: 1 / span 4; order: 0;
    width: auto !important; max-width: none !important; float: none !important; margin: 0 !important;
}

/* Hide the cost box until JS moves it into the grid (it's printed in the footer) */
.bizco-cost-box { display: none; }

/* Cost box card */
.product-entry-wrapper > .bizco-cost-box {
    background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px; padding: 24px;
}
.bizco-cost-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; color: #2D2D2D; }
.bizco-cost-sub { font-size: 18px; color: #6B6B6B; margin: 0 0 16px; }
.bizco-cost-rows { display: flex; flex-direction: column; }
.bizco-cost-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid #D9DDE2; }
.bizco-cost-label { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 6px; color: #2D2D2D; font-weight: 500; font-size: 1.1rem; }
.bizco-cost-value { font-weight: 600; color: #2D2D2D; white-space: nowrap; font-size: 1.1rem; }
.bizco-cost-markup .bizco-cost-value { color: #64748B !important; }
.bizco-cost-markup { border-bottom: none !important; }
.bizco-cost-amt { color: #2D2D2D; font-weight: 600; }
.bizco-cost-final { border-bottom: none; border-top: 2px solid #E0E0E0; margin-top: 4px; padding-top: 14px; }
.bizco-cost-final .bizco-cost-label { font-weight: 700; }
.bizco-cost-final .bizco-cost-value { font-size: 1.45rem; font-weight: 700; color: #D32F2F; }

/* Info tooltips */
.bizco-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: #0F9558; color: #fff; font-size: 11px; font-weight: 700; font-style: italic;
    font-family: Georgia, serif; line-height: 1; border: none; padding: 0; cursor: pointer; position: relative;
}
.bizco-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
    background: #2D2D2D; color: #fff; padding: 8px 10px; border-radius: 6px;
    width: 270px; font-size: .9rem; font-weight: 400; font-style: normal; line-height: 1.45; text-align: left;
    opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 30; pointer-events: none;
}
.bizco-tip:hover::after, .bizco-tip.bizco-tip-open::after { opacity: 1; visibility: visible; }
/* Stacked one-column view: the icons sit near the screen edge, so a centered
   bubble overflows left. Anchor the bubble to the icon instead. */
@media (max-width: 880.98px) {
    .bizco-tip::after { left: -6px; transform: none; max-width: calc(100vw - 48px); }
}

.bizco-rv-photos-head .bizco-rv-see-all {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.bizco-rv-photos-head .bizco-rv-aside-title {
  min-width: 0 !important;
}
@media (max-width: 950px) {
  .bizco-rv-photos-head {
    align-items: flex-start !important;   /* button stays top while title wraps down */
  }
  .bizco-rv-photos-head .bizco-rv-aside-title {
    max-width: 60% !important;            /* force title to wrap sooner */
  }
}

/* Stack to one column on smaller screens */
@media (max-width: 880px) {
	
	.product-entry-wrapper > .woocommerce-product-gallery { order: 1 !important; }
  .product-entry-wrapper > .summary { order: 2 !important; }
  .product-entry-wrapper > .bizco-works-with { order: 3 !important; }
  .product-entry-wrapper > .bizco-transparent { order: 4 !important; }
  .product-entry-wrapper > .bizco-product-info { order: 5 !important; }

	
    .product-entry-wrapper {
        display: flex !important; flex-direction: column !important;
			align-items: stretch !important;
    }
	  .product-entry-wrapper .bizco-price-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
	/* QTY + ADD-TO-CART on one line, button shrinks */
  .product-entry-wrapper .ct-cart-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .product-entry-wrapper .ct-cart-actions .quantity {
    flex: 0 0 auto !important;
    width: 130px !important;       /* fixed qty width */
    max-width: 130px !important;
  }
  .product-entry-wrapper .ct-cart-actions .single_add_to_cart_button {
    flex: 1 1 0 !important;         /* fills remaining, shrinks with window */
    width: auto !important;
    min-width: 0 !important;
  }
  /* inventory button stays full-width on its own line below */
  .product-entry-wrapper .ct-cart-actions .bizco-inventory-list-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
	.product-entry-wrapper .bizco-price-row .price {
    order: 0 !important;
    margin: 0 !important;
  }
	  .product-entry-wrapper .bizco-price-row .bizco-max-badge {
    order: 0 !important;          /* after price, not above */
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
	.product-entry-wrapper > .summary {
    width: 100% !important;
    align-self: stretch !important;
  }
    .product-entry-wrapper > .woocommerce-product-gallery { order: 1; }
    .product-entry-wrapper > .entry-summary { order: 2; }
    .product-entry-wrapper > .bizco-cost-box { order: 3; }
	
	  .bizco-specs .bizco-spec-row {
grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: baseline !important;
  }
  .bizco-specs .bizco-spec-label {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
    text-align: left !important;
    min-width: 0 !important;
  }
  .bizco-specs .bizco-spec-value {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    text-align: right !important;
    min-width: 0 !important;
  }
  
}

@media (max-width: 450px) {
  .product-entry-wrapper .bizco-price-row {
    flex-direction: column !important;
    align-items: flex-start !important;      /* let children fill width */
    justify-content: flex-start !important;
  }
  /* badge above the price, full width, larger */
  .product-entry-wrapper .bizco-price-row .bizco-max-badge {
    order: -1 !important;
    width: auto !important;               /* size to content, not full width */
    justify-content: flex-start !important;
    margin: 0 0 10px 0 !important;
    padding: 6px 12px !important;         /* trim the excessive inner padding */
    font-size: clamp(12px, 4.4vw, 20px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .product-entry-wrapper .bizco-price-row .bizco-max-badge img {
    height: 1.2em !important;
    width: auto !important;
  }
  .product-entry-wrapper .bizco-price-row .price {
    order: 0 !important;
  }
}

.bizco-trend-box { display: none; }
.product-entry-wrapper + .bizco-trend-box {
    display: block;
    background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px;
    padding: 24px; margin-top: 1rem;
}
.bizco-trend-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; color: #2D2D2D; }
.bizco-trend-sub { font-size: 18px; color: #6B6B6B; margin: 0 0 16px; }

/* Outer "Transparent Pricing" container (full width, below the product row) */
.bizco-transparent {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    padding: 24px;
    margin-top: 0;
}
.bizco-transparent-title {
    order: 0;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #2D2D2D;
}
/* Inner sections: light grey so they read as distinct panels inside the white box */
.bizco-transparent .bizco-cost-box {
    order: 1;
    display: block !important;
    background: #F5F6F8 !important;
    border: 1px solid #ECEEF1 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 0 !important;
}
.bizco-transparent .bizco-trend-box {
    order: 2;
    display: block !important;
    background: #F5F6F8 !important;
    border: 1px solid #ECEEF1 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 16px 0 0 !important;
}
/* Keep Transparent Pricing in the left column, directly under the gallery */
.product-entry-wrapper > .bizco-transparent {
    grid-column: 1;
    order: 3;
}
  .product-entry-wrapper > .bizco-transparent,
  .product-entry-wrapper > .bizco-works-with {
    width: 100% !important;
    align-self: stretch !important;
  }
.bizco-trend-canvas-wrap { position: relative; width: 100%; height: 320px; }
/* bizco-ctl-v1 segmented control. Each segment is its own pill inside a padded
   shell: no dividers (they left a sliver beside the active segment) and no
   square corners (a rectangular ring ran past the shell curve). */
.bizco-trend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid #D9E0DB;
    border-radius: 999px;
    background: #fff;
    margin-bottom: 16px;
}
.bizco-trend-toggle button {
    background: transparent;
    border: none;
    border-radius: 999px;
    height: 32px;
    padding: 0 16px;
    font-family: Outfit, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: #3F4A46;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.bizco-trend-toggle button:hover { color: #0F5230; box-shadow: inset 0 0 0 1px #0F5230; }
.bizco-trend-toggle button.active { background: #0F5230; color: #fff; box-shadow: none; }
.bizco-trend-toggle button.active:hover { background: #0C4227; }
.bizco-trend-toggle button:focus-visible { outline: 2px solid #0F9558; outline-offset: 2px; }
/* Specs card — sits in the right column, under the overview */
.bizco-specs {
    display: none;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    padding: 24px;
    width: 100%;
}
.entry-summary > .bizco-overview { order: 2; }
.entry-summary > .bizco-essentials { order: 3; }
.entry-summary > .bizco-specs { order: 5; }
/* below buy box (1) and overview (2) */
.entry-summary .bizco-specs { display: block; }

.bizco-specs-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 12px; color: #2D2D2D; }
.bizco-specs-rows { border: 1px solid #ECEEF1; border-radius: 8px; overflow: hidden; }
.bizco-spec-row { display: grid; grid-template-columns: 45% 1fr; gap: 12px; padding: 10px 14px; }
.bizco-spec-row:nth-child(odd) { background: #F5F6F8; }
.bizco-spec-label { font-weight: 600; color: #2D2D2D; }
.bizco-spec-value { color: #3A3A3A; }

/* Works with section */
.bizco-works-with { display: none; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px; padding: 18px 24px; }
/* Shown when JS appends it; stacks in the left column via order */
.product-entry-wrapper > .bizco-works-with { display: block; grid-column: 1; order: 2; }
.product-entry-wrapper > .bizco-product-info { grid-column: 1; order: 4; }
.bizco-ww-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; color: #2D2D2D; }
.bizco-ww-items { display: flex; flex-wrap: wrap; gap: 14px; }
.bizco-ww-item { display: flex; align-items: flex-start; gap: 12px; width: 260px; text-decoration: none; color: #2D2D2D;
    border: 1px solid #ECEEF1; border-radius: 8px; padding: 12px; background: #F9FAFB; transition: border-color .15s; }
.bizco-ww-item:hover { border-color: #0F9558; }
.bizco-ww-img { flex-shrink: 0; }
.bizco-ww-img img { width: 84px !important; height: 84px !important; max-width: 84px !important; object-fit: contain; display: block; border-radius: 4px; }
.bizco-ww-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bizco-ww-name { font-size: .9rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bizco-ww-pricing { font-size: 1rem; line-height: 1.2; }
.bizco-ww-price, .bizco-ww-price .woocommerce-Price-amount { color: #D32F2F; font-weight: 700; }
.bizco-ww-suffix { color: #2D2D2D; font-weight: 600; margin-left: 2px; }

/*  BIZCO Essentials Badge on PDP */
.bizco-essentials { display: none; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px; padding: 20px 24px; text-align: center; }
.entry-summary > .bizco-essentials { display: block; }
.bizco-essentials img { max-width: 320px; max-height: 110px; width: auto; height: auto; display: inline-block; }

/* === PDP Product Info section (left column, under Transparent Pricing) === */
.bizco-product-info { background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px; padding: 28px; }
.bizco-pi-heading { font-size: 1.4rem; font-weight: 700; text-align: center; color: #2D2D2D; margin: 0 0 24px; line-height: 1.35; }

.bizco-pi-block { display: flex; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid #EEE; }
.bizco-pi-block:first-of-type { border-top: none; padding-top: 0; }
.bizco-pi-block.side-right { flex-direction: row-reverse; }
.bizco-pi-media { flex: 0 0 42%; }
.bizco-pi-media img { width: 100%; height: auto; border-radius: 8px; display: block; }
.bizco-pi-block-text { flex: 1; }
.bizco-pi-block-text h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; color: #2D2D2D; }
.bizco-pi-block-text p { margin: 0 0 10px; color: #3A3A3A; line-height: 1.55; }

.bizco-pi-features { display: flex; flex-wrap: wrap; gap: 1px;
    background: #E5E7EB; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; margin: 22px 0; }
.bizco-pi-feature { flex: 1 1 200px; display: flex; gap: 10px; padding: 14px; background: #FFFFFF; }
.bizco-pi-feature-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.bizco-pi-feature-icon img { width: 28px; height: 28px; object-fit: contain; }
.bizco-pi-feature-text { display: flex; flex-direction: column; gap: 2px; }
.bizco-pi-feature-text strong { font-size: .9rem; color: #2D2D2D; }
.bizco-pi-feature-text span { font-size: .78rem; color: #6B7280; line-height: 1.4; }

.bizco-pi-faqs { margin-top: 24px; }
.bizco-pi-faqs-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; color: #2D2D2D; }
.bizco-pi-faq { border: 1px solid #ECEEF1; border-radius: 8px; margin-bottom: 8px; padding: 12px 16px; }
.bizco-pi-faq summary { cursor: pointer; font-weight: 600; color: #2D2D2D; list-style: none; position: relative; padding-right: 24px; }
.bizco-pi-faq summary::-webkit-details-marker { display: none; }
.bizco-pi-faq summary::after { content: '+'; position: absolute; right: 0; top: 0; font-size: 1.2rem; color: #6B7280; }
.bizco-pi-faq[open] summary::after { content: '\2212'; }
.bizco-pi-faq-a { margin-top: 8px; color: #3A3A3A; line-height: 1.55; }

/* bizco-ctl-v1: deep green on hover, matching every other selector pill.
   Kept here (rather than in snippet 148) because this !important rule would
   otherwise beat the swatch custom properties. */
/* bizco-test-pilltap1 v1 (case PILL-TAP-1, owner 2026-10-01): Blocksy 2.1.57 marks the chosen pill
   aria-pressed="true" instead of .active, so both count as chosen; same weight as before. */
.ct-variation-swatches .ct-swatch-container:not(.active,[aria-pressed="true"]):hover .ct-swatch,
.ct-variation-swatches .ct-swatch-container:not(.active,[aria-pressed="true"]):hover .ct-swatch-content {
    color: #0F5230 !important;
}
/* Order sample container — right column, directly under the Essentials badge */
.bizco-sample-box {
    display: none;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    padding: 24px;
    width: 100%;
}
.entry-summary > .bizco-sample-box { display: block; order: 4; }

/* Order sample button — matches the inventory button styling (no plus) */
/* bizco-ctl-v1 secondary A (tonal green). Sits directly under the
   Add to My Inventory button on the product page, so it has to be the
   same control. */
.bizco-order-sample-btn {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    background:#ffffff;
    color:#0F5230;
    border:1px solid #0F5230;
    border-radius: 8px;
    font-family: Outfit, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;box-sizing:border-box;}
.bizco-order-sample-btn:hover {
    background:#0F5230;
    color:#ffffff;border-color:#0F5230;}
.bizco-order-sample-btn:focus-visible {
    outline: 2px solid #0F9558;
    outline-offset: 2px;
}

/* Reviews */

.bizco-reviews-section { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; margin-top: 1rem; align-items: start; }

.bizco-rv-main { background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px; overflow: hidden; }
.bizco-rv-summary { background: #F5F6F8; padding: 24px; display: flex; gap: 32px; align-items: center; border-bottom: 1px solid #E0E0E0; }
.bizco-rv-summary-left { text-align: center; flex: 0 0 auto; }
.bizco-rv-avg { font-size: 3rem; font-weight: 800; color: #2D2D2D; line-height: 1; }
.bizco-rv-total { font-size: .9rem; color: #3A3A3A; margin-top: 6px; }
.bizco-stars { display: inline-block; font-size: 1.4rem; line-height: 1; margin-top: 8px; }
.bizco-stars::before { content: "★★★★★"; letter-spacing: 2px;
    background: linear-gradient(90deg, #F5A623 calc(var(--rating) / 5 * 100%), #D8D8D8 calc(var(--rating) / 5 * 100%));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.bizco-rv-summary-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bizco-rv-bar-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.bizco-rv-bar-label { font-size: .85rem; color: #2D2D2D; white-space: nowrap; }
.bizco-rv-star { color: #F5A623; }
.bizco-rv-bar { height: 10px; background: #E5E7EB; border-radius: 5px; overflow: hidden; }
.bizco-rv-bar-fill { display: block; height: 100%; background: #0F9558; border-radius: 5px; }
.bizco-rv-bar-count { font-size: .85rem; color: #3A3A3A; min-width: 28px; text-align: right; }
.bizco-rv-empty { text-align: center; width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 4px; color: #6B7280; }
.bizco-rv-empty strong { font-size: 1.1rem; color: #2D2D2D; }

.bizco-rv-list { padding: 8px 24px 24px; }
.bizco-rv-list ol.commentlist { list-style: none; margin: 0; padding: 0; }
.bizco-rv-list ol.commentlist > li.review { padding: 18px 0; border-bottom: 1px solid #EEE; }
.bizco-rv-list ol.commentlist > li.review:last-child { border-bottom: none; }

.bizco-rv-aside { display: flex; flex-direction: column; gap: 1rem; }
.bizco-rv-photos, .bizco-rv-write { background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px; padding: 24px; }
.bizco-rv-aside-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; color: #2D2D2D; }
.bizco-rv-write-sub { font-size: .85rem; color: #6B6B6B; margin: 0 0 14px; }
.bizco-rv-photos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bizco-rv-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }

/* Make the moved review-submit button on-brand */
.bizco-rv-write #respond input[type="submit"], .bizco-rv-write #respond .submit {
    background: #0F9558 !important; color: #FFFFFF !important; border: none !important;
    border-radius: 8px !important; padding: 12px 20px !important; font-weight: 600 !important; cursor: pointer; width: 100%;
}

@media (max-width: 768px) {
    .bizco-reviews-section { display: flex; flex-direction: column; }
}
/* Write-review button */
/* bizco-ctl-v1 primary */
.bizco-rv-open-modal {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 48px; padding: 0 20px;
    background: #0F9558; color: #FFFFFF; border: 1px solid transparent; border-radius: 8px;
    font-family: Outfit, sans-serif; font-weight: 600; font-size: 16px; line-height: 1;
    cursor: pointer; transition: background .15s;
}
.bizco-rv-open-modal:focus-visible { outline: 2px solid #0F9558; outline-offset: 2px; }
.bizco-rv-open-modal:hover { background: #0F5230; }

/* Review modal */
/* Review modal */
.bizco-review-modal[hidden] { display: none; }
.bizco-review-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bizco-review-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.bizco-review-modal-card { position: relative; background: #FFFFFF; border-radius: 12px; padding: 28px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.bizco-review-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.8rem; line-height: 1; color: #6B7280; cursor: pointer; border-radius: 8px; padding: 2px 8px; transition: background .15s, color .15s; }
/* Same close affordance as the add-to-cart and inventory alerts. */
.bizco-review-modal-close:hover { color: #0F5230; background: #F0F4F1; }
.bizco-review-modal-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 16px; color: #2D2D2D; }
/* bizco-ctl-v1 primary. Height stated outright because the plugin ships its
   own input[type=submit] sizing. */
.bizco-review-modal #respond input[type="submit"], .bizco-review-modal #respond .submit {
    background: #0F9558 !important; color: #FFFFFF !important; border: 1px solid transparent !important;
    border-radius: 8px !important; height: 48px !important; padding: 0 20px !important;
    font-family: Outfit, sans-serif !important; font-weight: 600 !important; font-size: 16px !important;
    line-height: 1 !important; cursor: pointer; width: 100%;
}
.bizco-review-modal #respond input[type="submit"]:hover, .bizco-review-modal #respond .submit:hover {
    background: #0F5230 !important;
}

/* Validation error box */
.bizco-rv-errors { background: #FDECEA; border: 1px solid #F5C6C2; color: #B3261E; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: .9rem; }
.bizco-rv-errors div { margin: 2px 0; }

/* Upload media control — subheading + compact button */
.bizco-review-modal #cr_review_image {
    position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}.bizco-review-modal #cr_review_image {
    position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.bizco-review-modal .cr-upload-local-images {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.bizco-review-modal .cr-upload-local-images::before {
    order: -2;
    content: "Add photos or videos";
    font-weight: 600;
    font-size: .95rem;
    color: #2D2D2D;
    margin-bottom: 2px;
}
.bizco-review-modal .cr-upload-local-images::after {
    order: -1;
    content: "Up to 300 MB per file.";
    font-size: .8rem;
    color: #9CA3AF;
    font-weight: 400;
    margin-bottom: 10px;
}
.bizco-review-modal /* bizco-ctl-v1 secondary A (tonal green). Was a 2px brand outline, the last
   survivor of that style inside the review modal. font-size:0 stays - the
   visible label is painted by ::before. */
.cr-upload-images-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    height: 40px !important;
    padding: 0 18px !important;
    background:#EEF2F5 !important;
    color:#3A4F66 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-family: Outfit, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
}
.bizco-review-modal .cr-upload-images-status::before {
    content: "Upload media";
    font-size: .95rem !important;
}
.bizco-review-modal .cr-upload-images-status:hover {
    background:#E1E8EE !important;
    color:#192A3D !important;
}
/* bizco-test-asterisk1 v1 (case ASTERISK-1, owner 2026-09-24): a required mark never starts a line of its own. The
   space in front of the * is a no-break one (\00a0), so a narrow window moves the last word down with the mark. */
.bizco-review-modal .comment-form-rating > label::after {
    content: "\00a0*";
    color: #D32F2F;
    font-weight: 700;
}
.bizco-rv-variation-field label::after { content: "\00a0*"; color: #D32F2F; font-weight: 700; }

/* Product Reviews Images/Video Box */

/* Photos box header + tiles */
.bizco-rv-photos-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bizco-rv-photos-head .bizco-rv-aside-title { margin: 0; }
.bizco-rv-see-all { background: none; border: none; color: #0F9558; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: underline; padding: 0; }
.bizco-rv-photo-tile { position: relative; padding: 0; border: 1px solid #ECEEF1; border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #000; }
.bizco-rv-photo-tile img, .bizco-rv-photo-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bizco-rv-photo-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bizco-rv-photo-play::before { content: ''; width: 0; height: 0; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.bizco-rv-photo-more { position: absolute; inset: 0; background: rgba(0,0,0,.6); color: #fff; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }

/* Inline review media → clickable thumbnails */
.bizco-rv-list .cr-comment-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bizco-rv-list .iv-comment-image, .bizco-rv-list .cr-comment-video { float: none !important; margin: 0 !important; }
.bizco-rv-list .iv-comment-image a, .bizco-rv-list .cr-comment-video { display: block; width: 80px; height: 80px; border-radius: 6px; overflow: hidden; cursor: pointer; position: relative; }
.bizco-rv-list .iv-comment-image img, .bizco-rv-list .cr-comment-video video { width: 80px; height: 80px; object-fit: cover; display: block; }
.bizco-rv-list .cr-comment-videoicon { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; pointer-events: none; }
.bizco-rv-list .cr-comment-video-close { display: none !important; }

/* Variation collection and display in reviews */

/* Variation details inside each review (stacked, above the text) */
.bizco-review-variation { margin: 0 0 12px; }
.bizco-rv-detail { display: block; font-size: .9rem; color: #3A3A3A; margin-bottom: 2px; }
.bizco-rv-detail strong { color: #2D2D2D; }

/* Variation selector in the review modal */
.bizco-rv-variation-field { margin-bottom: 16px; }
.bizco-rv-variation-field label { display: block; font-weight: 600; margin-bottom: 6px; color: #2D2D2D; }

.bizco-rv-variation-field { margin-bottom: 16px; }
.bizco-rv-variation-field label { display: block; font-weight: 600; margin-bottom: 6px; color: #2D2D2D; }
/* bizco-ctl-v1 dropdown (option A) */
.bizco-rv-select { position: relative; display: flex; align-items: center; height: 48px; border: 1px solid #D9E0DB; border-radius: 8px; padding: 0 40px 0 14px; cursor: pointer; background: #fff; user-select: none; transition: border-color .15s ease, box-shadow .15s ease; }
.bizco-rv-select:hover { border-color: #BFCCC4; }
.bizco-rv-select.open { border-color: #0F5230; box-shadow: inset 0 0 0 1px #0F5230; }
.bizco-rv-select-value { display: block; color: #9A9A9A; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bizco-rv-select-value.has-value { color: #2D2D2D; }
.bizco-rv-select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #6B7280; transition: transform .15s; }
.bizco-rv-select.open .bizco-rv-select-caret { transform: translateY(-50%) rotate(180deg); }
.bizco-rv-select-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #D9E0DB; border-radius: 8px; box-shadow: 0 12px 28px rgba(25,42,61,.12); z-index: 10; max-height: 264px; overflow-y: auto; display: none; }
.bizco-rv-select.open .bizco-rv-select-list { display: block; }
.bizco-rv-select-list li { padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: 15px; color: #3F4A46; }
.bizco-rv-select-list li:hover { background: #F2F5F7; color: #3F4A46; }
.bizco-rv-select-list li[aria-selected="true"], .bizco-rv-select-list li.is-selected { color: #16211B; font-weight: 600; }

/* Lightbox */
.bizco-lightbox[hidden] { display: none; }
.bizco-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bizco-lightbox-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.bizco-lightbox-card { position: relative; z-index: 1; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; background: #fff; border-radius: 12px; width: 100%; max-width: 900px; height: 560px; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }

.bizco-lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 24px; border-bottom: 1px solid #EEE; }
.bizco-lightbox-title { font-size: 1.15rem; font-weight: 700; color: #2D2D2D; }
.bizco-lightbox-close { position: static; background: none; border: none; font-size: 1.8rem; line-height: 1; color: #6B7280; cursor: pointer; flex-shrink: 0; padding: 0 4px; }

.bizco-lightbox-body { min-height: 0; display: flex; flex-direction: row; gap: 1.5rem; padding: 24px; overflow: hidden; }
.bizco-lightbox-stage { position: static; flex: 1 1 50%; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 8px; }
.bizco-lightbox-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.bizco-lightbox-media img, .bizco-lightbox-media video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.bizco-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E0E0E0; background: #fff; color: #2D2D2D; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.bizco-lightbox-prev { left: 12px; }
.bizco-lightbox-next { right: 12px; }

.bizco-lightbox-review {
    flex: 1 1 50%;
    min-width: 0;
    overflow-y: auto;
    padding-top: 20px;
}
.bizco-lightbox-rating { margin-bottom: 4px; }
.bizco-lightbox-author { font-weight: 700; color: #2D2D2D; }
.bizco-lightbox-date { font-size: .85rem; color: #6B7280; margin-top: 2px; }
.bizco-lightbox-verified { color: #0F9558; font-weight: 600; font-size: .85rem; margin-top: 6px; }
.bizco-lightbox-text { margin-top: 12px; color: #3A3A3A; line-height: 1.55; }

.bizco-lightbox-thumbs-wrap { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #EEE; }
.bizco-lightbox-thumbs { flex: 1 1 auto; display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; }
.bizco-lightbox-thumbs-nav { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #E0E0E0; background: #fff; color: #2D2D2D; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bizco-lightbox-thumb { position: relative; flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #000; }
/* bizco-ctl-v1: deep green + an inset white ring so active still beats hover */
.bizco-lightbox-thumb:hover { border-color: #0F5230; }
.bizco-lightbox-thumb.active { border-color: #0F5230; box-shadow: inset 0 0 0 2px #FFFFFF; }
.bizco-lightbox-thumb img, .bizco-lightbox-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .bizco-lightbox-body { flex-direction: column; } .bizco-lightbox-card { height: auto; } }
.bizco-review-modal #reply-title,
.bizco-review-modal .comment-reply-title { display: none !important; }
.bizco-review-modal #commentform {
    gap: 12px !important;
    row-gap: 8px !important;
}
/* --- Review list formatting --- */

/* Remove avatar, reset spacing */
.bizco-rv-list .comment_container { display: block !important; padding: 0 !important; }
.bizco-rv-list .comment_container > .avatar { display: none !important; }
.bizco-rv-list .comment-text { margin: 0 !important; }

/* Stars above the meta */
.bizco-rv-list .star-rating { margin: 0 0 8px !important; }

/* Stacked meta: name → Posted on date.
 * 2026-08-28: the verified badge is gone. WooCommerce's "Show 'verified
 * owner' label" setting is now off, so CusRev no longer prints the
 * .woocommerce-review__verified span at all and the two rules that used to
 * hide its text and repaint it as "Verified Purchase" had nothing to hang
 * on. Turn the setting back on and the raw plugin label returns unstyled. */
.bizco-rv-list .meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 10px; }
.bizco-rv-list .woocommerce-review__dash { display: none; }
.bizco-rv-list .woocommerce-review__author { order: 1; font-weight: 700; color: #2D2D2D; font-size: 1rem; }
.bizco-rv-list .woocommerce-review__published-date { order: 2; color: #6B7280; font-size: .85rem; }
.bizco-rv-list .woocommerce-review__published-date::before { content: "Posted on "; }

/* --- Replies → embedded "Customer Service" response box --- */
.bizco-rv-list .children { list-style: none; margin: 14px 0 0; padding: 0; }
.bizco-rv-list .children > li { margin: 0; }
.bizco-rv-list .children .comment_container { display: block !important; background: #E8F5EE; border-left: 4px solid #0F9558; border-radius: 0 6px 6px 0; padding: 14px 18px !important; }
.bizco-rv-list .children .avatar,
.bizco-rv-list .children .star-rating,
.bizco-rv-list .children .meta { display: none !important; }
.bizco-rv-list .children .comment-text { margin: 0 !important; }
.bizco-rv-list .children .description { margin: 0; color: #2D2D2D; line-height: 1.5; }
.bizco-rv-list .children .comment-text::after {
    content: "BIZCO Wholesale Customer Service";
    display: block; font-weight: 700; color: #2D2D2D; margin-top: 10px; font-size: .9rem;
}
.woocommerce-tabs { display: none !important; }

.bizco-rv-count { padding: 10px 24px 0; color: #6B7280; font-size: .9rem; font-weight: 500; }
/* bizco-ctl-v1 secondary A (tonal green) */
.bizco-rv-more { display: block; margin: 18px auto 6px; height: 40px; padding: 0 20px; background:#EEF2F5; color:#3A4F66; border: 1px solid transparent; border-radius: 8px; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.bizco-rv-more:hover { background:#E1E8EE; color:#192A3D; }

.bizco-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.bizco-price-row p.price { margin: 0 !important; }
.bizco-price-row { row-gap: 0 !important; }
.bizco-price-row .bizco-max-badge { margin: 8px 0 !important; }

.bizco-max-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EAF3EE;
    color: #2d2d2d;
    border: 1.5px solid #1A7A4A;
    font-weight: 700;
    font-size: .85rem;
    padding: 5px 12px;
    border-radius: 6px;
    margin-left: auto;   /* pushes the badge to the right of the price */
}
.bizco-max-badge img {
    height: 16px;
    width: auto;
    display: inline-block;
}

/* Category hero title — readable over the image */
.tax-product_cat .page-title,
.post-type-archive-product .page-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.5);
}

/* Subcategory page */

/* Darken the hero image behind the title */
.tax-product_cat .hero-section { position: relative; }
.tax-product_cat .hero-section::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.5));
    z-index: 0;
    pointer-events: none;
}
.tax-product_cat .hero-section .entry-header { position: relative; z-index: 1; }

/* White, bold, readable title */
.tax-product_cat .page-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Square, rounded images across category archives */
.woocommerce ul.products li .ct-media-container,
.woocommerce ul.products li figure {
    border-radius: 10px !important;
    overflow: hidden !important;
}
.woocommerce ul.products li img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
}

.woocommerce ul.products li figure,
.woocommerce ul.products li .ct-media-container { margin-bottom: 0 !important; }

.woocommerce ul.products li .woocommerce-loop-category__title,
.woocommerce ul.products li .woocommerce-loop-product__title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #2D2D2D !important;
    line-height: 1.3 !important;
    margin: 10px 0 4px !important;
}


/* Drop the "(1)" count on subcategory tiles */
.woocommerce-loop-category__title .count,
.woocommerce-loop-category__title mark {
    display: none !important;
}

/* ============================================================
   PRODUCT CARD HOVER - image zoom instead of a green wash
   bizco-card-hover-zoom v1  (2026-07-27)
   Replaced the two rgba(15,149,88,.35 / .18) ::after overlays that
   used to tint every loop image on hover. The container is already
   radius-10 + overflow:hidden, so scaling the img inside reads as a
   clean zoom with zero layout shift (transform is off-layout).
   Markup is figure > a.ct-media-container > img on shop, product_cat
   archives, search results and the subcategory tiles alike.
   ============================================================ */
.woocommerce ul.products li .ct-media-container {
    position: relative;
    display: block;
    overflow: hidden !important;
    border-radius: 10px !important;
}
.woocommerce ul.products li .ct-media-container img {
    transition: transform .4s cubic-bezier(.2, .6, .3, 1);
    transform-origin: center center;
}
.woocommerce ul.products li:hover .ct-media-container img,
.woocommerce ul.products li .ct-media-container:hover img,
.woocommerce ul.products li .ct-media-container:focus-visible img {
    transform: scale(1.07);
}
/* Reduced motion: skip the zoom, keep a quiet ring so hover is still legible */
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li .ct-media-container img { transition: none; }
    .woocommerce ul.products li:hover .ct-media-container img,
    .woocommerce ul.products li .ct-media-container:hover img { transform: none; }
    .woocommerce ul.products li:hover .ct-media-container {
        box-shadow: 0 0 0 2px rgba(15, 149, 88, .45);
    }
}

/* Layout only. Type, colour and the no-underline-until-hover behaviour
   come from the site-wide inline text-CTA spec (bizco-ilink v1, snippet 148);
   the link carries .bizco-ilink alongside this class. */
.bizco-subcat-shop {
    display: inline-block;
    margin-top: 2px;
}

/* Smooth color transition on the text */
.woocommerce ul.products li .woocommerce-loop-category__title,
.woocommerce ul.products li .woocommerce-loop-product__title,
.woocommerce ul.products li .bizco-subcat-shop { transition: color .2s; }

/* Loop titles do NOT recolour on hover - owner decision 2026-08-18. Pinned
   to the resting ink rather than simply deleted, so Blocksy's link-hover
   colour cannot take over on the anchor inside the heading. The tile still
   signals hover through the image zoom and the shop-link underline below. */
.woocommerce ul.products li:hover .woocommerce-loop-category__title,
.woocommerce ul.products li:hover .woocommerce-loop-category__title a,
.woocommerce ul.products li:hover .woocommerce-loop-product__title,
.woocommerce ul.products li:hover .woocommerce-loop-product__title a {
    color: #2D2D2D !important;
}
/* The tile hover carries the shop link with it: whenever the title greens,
   "Shop N products" underlines, so the pair reads as one target. Its own
   hover (deeper green + underline, bizco-ilink) still works on top of this.
   Needs !important + this stylesheet's later position to beat ilink's
   text-decoration:none !important. */
.woocommerce ul.products li:hover .bizco-subcat-shop {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.tax-product_cat ul.products {
    margin-top: 2.5rem !important;
}

/* Subcat pages that show products */

/* 1. Hide the sorting dropdown */
.woocommerce .woocommerce-ordering { display: none !important; }

/* 3. Truncate product name to 3 lines */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Hide the category shown under the product */
.woocommerce ul.products li.product .entry-meta { display: none !important; }

/* 6. Hide the "Select options" / add-to-cart button */
.woocommerce ul.products li.product .ct-woo-card-actions { display: none !important; }

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    color: #D32F2F !important;
    font-weight: 700 !important;
}
.woocommerce ul.products li.product .price {
    font-size: 1.35rem !important;
}
.woocommerce ul.products li.product .price .bizco-loop-suffix {
    color: #2D2D2D !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    margin-left: 2px;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    color: #D32F2F !important;
    font-weight: 700 !important;
}
.woocommerce ul.products li.product .price {
    font-size: 1.35rem !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    font-weight: 600 !important;
		font-size: 1.05rem !important;
}

.bizco-loop-pill {
    display: inline-block;
    background: #FFFFFF;
    color: #2D2D2D;
    border: 1px solid #C1C1C1;
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 999px;
    line-height: 1.3;
    transition: background .15s, color .15s, border-color .15s;
}
.woocommerce ul.products li.product:hover .bizco-loop-pill {
    background: #0F9558;
    color: #FFFFFF;
    border-color: #0F9558;
}
.bizco-loop-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }

.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category { cursor: pointer; }
/* Product-listing pages: center the result count in the same gap */
.tax-product_cat .woocommerce-result-count { margin-top: 1.25rem !important; margin-bottom: 0 !important; }
.tax-product_cat ul.products { margin-top: 1.25rem !important; }

/* Subcategory pages: keep the larger top room */
.tax-product_cat ul.products:has(li.product-category) { margin-top: 2.5rem !important; }

.bizco-loop-pricerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bizco-loop-cart { display: flex; align-items: center; gap: 8px; }
/* bizco-ctl-v1 quantity stepper, compact. Same frame and hover as the PDP,
   cart, Rapid Restock and savings-calculator steppers. */
.bizco-loop-qty { display: inline-flex; align-items: center; border: 1px solid #D9E0DB; border-radius: 8px; overflow: hidden; background: #fff; transition: border-color .12s, box-shadow .12s; }
.bizco-loop-qty:has(:focus-visible) { border-color: #0F5230; box-shadow: inset 0 0 0 1px #0F5230; }
/* The card row is a stretch flex, so the frame takes the row height (40px
   next to Add to cart). Children fill it so there is never dead space inside
   the border. min-height keeps it right if the row ever shrinks. */
.bizco-loop-qty { min-height: 32px; align-items: stretch; }
.bizco-loop-qty button { width: 28px; height: auto; min-height: 32px; border: none; background: transparent; color: #2D2D2D; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
/* .bizco-loop-qty button hover / press / touch = snippet 148 section 3b. */
.bizco-loop-qty input { width: 44px; height: auto; min-height: 32px; border: none; text-align: center; font-family: Outfit, sans-serif; font-size: .95rem; font-weight: 600; color: #161A1C; background: transparent; padding: 0; box-sizing: border-box; -moz-appearance: textfield; }
.bizco-loop-qty input::-webkit-outer-spin-button, .bizco-loop-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bizco-loop-add { background: #0F9558; color: #fff; border: none; border-radius: 8px; padding: 6px 16px; font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.bizco-loop-add:hover { background: #0F5230; }

.post-type-archive-product .hero-section {
    position: relative;
    /* 2026-08-25: this was the 1600px ORIGINAL JPEG - 2456 KB, downloaded on
       every visit to All Products and to search results. A CSS background is
       invisible to every PHP image filter, so nothing else could catch it.
       background-size computes to 60% here (snippet 139's title-band rules beat
       the `cover` below), so the photo is drawn at ~1152px on a 1920 screen and
       ~273px on a phone, UNDER the ::before scrim - there is no case where the
       original resolution was doing any work. 1536w webp = 411 KB, 768w = 102 KB.
       Root-relative on purpose: no host to rewrite when this moves to
       bizcowholesale.com. */
    background-image: url('/images/bizco-shop-banner-portion-cups-768x768.webp') !important;
    background-size: cover;
    background-position: center;
}
@media (min-width: 1000px) {
    .post-type-archive-product .hero-section {
        background-image: url('/images/bizco-shop-banner-portion-cups-1536x1536.webp') !important;
    }
}
.post-type-archive-product .hero-section::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.5));
    z-index: 0; pointer-events: none;
}
.post-type-archive-product .hero-section .entry-header { position: relative; z-index: 1; }

.post-type-archive-product .woocommerce-result-count { margin-top: 1.25rem !important; margin-bottom: 0 !important; }
.post-type-archive-product ul.products { margin-top: 1.25rem !important; }

.ct-cart-actions .single_add_to_cart_button {
    min-width: 0 !important;
    white-space: nowrap !important;
    /* Add to cart type ramp. Was clamp(0.7rem, 2vw, 1rem): a 2vw slope hits the
       0.7rem floor at a 560px viewport, so the label sat at 11.2px on every
       phone - far too small for the page's primary action. Same 1rem ceiling,
       same 800px viewport where it is reached, so nothing at or above 800px
       moves; below that it now eases from 16px down to a 15px floor instead of
       falling to 11.2px. The BUTTON's own size is deliberately untouched -
       padding, min-width and width all still come from the rules around this. */
    font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1rem) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* bizco-atc-narrow v2: the label eases down once it stops fitting.
   The rule above floors at 15px from a 550px viewport down, which is right for a
   normal phone. But on this page the cart row is a FIXED 130px qty stepper plus
   the button taking whatever is left, so the button gets narrower and narrower
   while the label stays 15px, and eventually the text paints outside the green box
   (overflow is visible and white-space is nowrap, so it spills rather than clips).

   MEASURED, do not guess these:
     button content width = 0.88vw - 210px   (0.88 = the theme container, minus the
                                              24px card padding, the 130px stepper
                                              and the 10px gap and 10px padding)
     "Add to cart" width  = 5.0052 x font-size
   They cross at exactly 324px: 75.1px of text in 75.1px of space, verified live.
   So the ease starts at 324, not at 315 - starting later would leave a 9px band
   still overflowing AND put a visible step at the breakpoint. Solving the two for
   font-size gives 17.58vw - 41.95px, which is 15.0px at 324 and therefore joins the
   clamp above with no seam.

   The 11px floor binds below ~301px. Under that no font size is both readable and
   narrow enough (280px would need 7.3px), because the 130px stepper is the real
   constraint down there, not the type. Fixing THAT means letting the row wrap so
   the button goes full width, which changes the button's size - deliberately not
   done here. The button box stays 40px tall throughout either way. */
@media (max-width: 323.98px) {
  .ct-cart-actions .single_add_to_cart_button {
    font-size: clamp(11px, 17.58vw - 41.95px, 15px) !important;
  }
}

/* No-reviews empty state: make the whole box white, drop the divider */
.bizco-rv-summary:has(.bizco-rv-empty) {
    background: #FFFFFF !important;
    border-bottom: none !important;
    min-height: 240px !important;
    justify-content: center !important;
}
.bizco-rv-main:has(.bizco-rv-empty) .bizco-rv-list {
    display: none !important;
}

/* Make search bar wider */
.ct-search-box {
    width: 700px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
	  min-width: 0;
}
/* Fluid width for the Advanced Woo Search bar */
.ct-search-box .dgwt-wcas-search-wrapp {
    width: clamp(240px, 45vw, 920px) !important;
    max-width: 100% !important;
    min-width: 0;
}
.dgwt-wcas-search-wrapp { max-width: 100% !important; }

/* Formatting search results dropdown modal */

/* === FiboSearch dropdown — BIZCO styling === */

/* Dropdown container */
.dgwt-wcas-suggestions-wrapp {
    border: 1px solid #E0E0E0 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 44px rgba(0,0,0,.12) !important;
    padding: 6px !important;
    margin-top: 8px !important;
}

/* Each result row */
.dgwt-wcas-suggestion {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border-bottom: 1px solid #F0F1F3 !important;
}
.dgwt-wcas-suggestion:last-of-type { border-bottom: none !important; }

/* Bigger, square, rounded thumbnail (matches your product cards) */
.dgwt-wcas-si {
    width: 96px !important;
    height: 96px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.dgwt-wcas-si img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 10px !important;
    display: block !important;
}

/* Title */
.dgwt-wcas-content-wrapp { min-width: 0 !important; }
.dgwt-wcas-st-title {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #2D2D2D !important;
    line-height: 1.4 !important;
}
.dgwt-wcas-st-title {
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    color: #2D2D2D !important;
    line-height: 1.4 !important;
}

/* Hover / keyboard-selected row → light grey, same as the header account button/dropdown (#F2F5F7) */
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
    background: #F2F5F7 !important;
}

/* "See all products" footer */
/* Pin "See all results" to the bottom; only the list above scrolls */
.dgwt-wcas-suggestion-more {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    background: #FFFFFF !important;
    justify-content: center !important;
    padding: 14px !important;
    border-top: 1px solid #E0E0E0 !important;
    border-radius: 0 0 10px 10px !important;
    font-size: 0 !important;
    text-transform: none !important;
	    padding: 20px !important;
}
.dgwt-wcas-suggestion-more::after {
    content: "See all results...";
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #0F9558 !important;
    text-transform: none !important;
}
.dgwt-wcas-suggestion-more:hover { background: #F2F5F7 !important; }

/* bizco-dropdown-no-parent-hack, REMOVED 2026-08-27.
   A rule here hid any .dgwt-wcas-suggestion-product that followed a
   .dgwt-wcas-suggestion-product-var. It was a POSITIONAL stand-in for "the
   variable parent row": FiboSearch tags variations and nothing else (search.js,
   sugVarClass), so no selector can name a parent. It worked only while parents
   were indexed and scored adjacent to their own variations. Snippet 105 stopped
   indexing variable parents on 2026-07-26, after which the only rows the
   selector could still match were innocent simple products, and it was silently
   deleting real results: 20 rows across 40 common searches. Searching "straw"
   showed 3 of 5 while the footer still counted 5. Parents are excluded in PHP
   now (snippet 105: readable_index/insert and indexer/source_query/where).
   Do not reinstate this. */

.search-results .woocommerce-result-count { display: none !important; }
.bizco-search-header { margin: 0 0 1.5rem; }
.bizco-search-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0;
}

.search-results .hero-section { display: none !important; }
.search-results .bizco-search-header { margin-top: 1.5rem !important; }

/* Outer white box — compact horizontal chips (bizco-srp-cats v2, 2026-07-27)
   Tiles used to be vertical (88px photo above the name), which made the whole
   band ~213px tall for what is a secondary "jump to a category" affordance.
   Now each tile is [ 52px photo | name over count ] so the band is ~100px and
   the wide empty space to the right of the tiles is put to use. */
.bizco-search-cats {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 12px 24px;
    margin: 0 0 0rem;
}
.bizco-search-cats-title { font-size: 1rem; font-weight: 700; color: #2D2D2D; margin: 0 0 14px; }

/* Single row, tiles divided by thin vertical lines */
.bizco-search-cats-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
	  align-items: stretch !important;
	scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* IE/old Edge */
}

.bizco-search-cats-row::-webkit-scrollbar {
  display: none !important;                /* Chrome, Safari, new Edge */
  width: 0 !important;
  height: 0 !important;
}

.bizco-search-cat {
    flex: 0 0 auto;
    width: 212px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "img name"
        "img count";
    align-content: center;
    column-gap: 10px;
    row-gap: 1px;
    text-align: left;
    padding: 8px 16px;
    border: none;
    border-right: 1px solid #E5E7EB;   /* the divider */
    background: transparent;
    text-decoration: none;
	  height: auto !important;
	align-self: stretch !important;
}
/* first tile sits flush with the card's own padding, no double indent */
.bizco-search-cat:first-child { padding-left: 2px; }
.bizco-search-cat:last-child { border-right: none; }

.bizco-search-cat-img {
    grid-area: img;
    align-self: center;
    width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.bizco-search-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bizco-search-cat-name {
    grid-area: name; align-self: end;
    font-size: .85rem; font-weight: 600; color: #0F9558; line-height: 1.3;
}
.bizco-search-cat:hover .bizco-search-cat-name { text-decoration: underline; }
.bizco-search-cat-count { grid-area: count; align-self: start; font-size: .75rem; color: #6B7280; margin-top: 0 !important; }

/* Phone: narrower tiles so two still fit inside the scroller */
@media (max-width: 767px) {
  .bizco-search-cats { padding: 10px 16px; }
  .bizco-search-cat { width: 178px; padding: 6px 12px; column-gap: 8px; }
  .bizco-search-cat:first-child { padding-left: 2px; }
  .bizco-search-cat-img { width: 52px; height: 52px; }
}
/* List results in SRP */
/* Row: image | name(narrow) | price(middle) | cart(right) */
body.search-results ul.products li.product {
    display: grid !important;
        grid-template-columns: 100px minmax(0, 1fr) minmax(0, 0.7fr) auto !important;
    grid-template-areas:
        "img title price cart"
        "img pills price cart" !important;
    column-gap: 20px !important;
    row-gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #EEE !important;
    float: none !important;
}
body.search-results ul.products li.product:last-child { border-bottom: none !important; }

/* Image */
body.search-results ul.products li.product > figure { grid-area: img !important; width: 100px !important; margin: 0 !important; }
body.search-results ul.products li.product > figure img { aspect-ratio: 1/1 !important; object-fit: cover !important; border-radius: 10px !important; }

/* Name — capped width so it wraps to a 2nd line much sooner */
body.search-results ul.products li.product > .woocommerce-loop-product__title {
    grid-area: title !important; margin: 0 !important; -webkit-line-clamp: 2 !important;
}
body.search-results ul.products li.product > .bizco-loop-pills { grid-area: pills !important; margin: 0 !important; }

/* Split the price row into two separate grid columns */
body.search-results ul.products li.product > .bizco-loop-pricerow { display: contents !important; }

/* Price — centered in the middle column */
body.search-results ul.products li.product .price {
    grid-area: price !important;
    justify-self: end !important;
	  margin-right: 8rem !important;
    text-align: center !important;
/*     margin: 0 !important; */
}

/* Cart — quantity selector stacked ABOVE the Add to cart button, on the right */
body.search-results ul.products li.product .bizco-loop-cart {
    grid-area: cart !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-width: 140px !important;
}
body.search-results ul.products li.product .bizco-loop-qty { width: 100% !important; }
body.search-results ul.products li.product .bizco-loop-qty input { flex: 1 1 auto !important; width: auto !important; }
body.search-results ul.products li.product .bizco-loop-add { width: 100% !important; }
body.search-results ul.products.products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 12px !important;
    padding: 8px 24px !important;
    margin: 0 !important;
    align-items: stretch !important;
}

.bizco-lightbox-variation { font-size: .85rem; color: #6B7280; margin-top: 4px; }
.bizco-rv-pagination {
    grid-column: 1;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 16px 24px;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}
/* Outer nav: no box, just position it under the reviews column, centered */
.bizco-rv-pagination {
    grid-column: 1;
    margin-top: 0rem;
    display: flex;
    justify-content: center;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* The single container box around the numbers (a tiny bit bigger) */
.bizco-rv-pagination ul.page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    background: #FFFFFF;
}
.bizco-rv-pagination ul.page-numbers li { margin: 0; }

/* Individual numbers: no outline box — plain */
/* bizco-ctl-v1 selected state: pill, deep green, ring on hover */
.bizco-rv-pagination a.page-numbers,
.bizco-rv-pagination span.page-numbers {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: none; border-radius: 999px;
    color: #3F4A46; text-decoration: none; font-weight: 600; font-size: .95rem;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.bizco-rv-pagination a.page-numbers:hover { background: none; color: #0F5230; border-color: #0F5230; box-shadow: inset 0 0 0 1px #0F5230; }
.bizco-rv-pagination .page-numbers.current { background: #0F5230; color: #FFFFFF; border-color: #0F5230; }
.bizco-rv-pagination .page-numbers.dots { min-width: auto; padding: 0 4px; color: #9CA3AF; background: none; }

/* old reveal UI no longer used */
.bizco-rv-count, .bizco-rv-more { display: none !important; }

/* === Two-column review layout === */
.bizco-rv-list li.review {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    row-gap: 0 !important;
    column-gap: 32px !important;
    align-items: start !important;
    padding: 24px 0 !important;
}
.bizco-rv-list li.review > .comment_container,
.bizco-rv-list li.review > .comment_container > .comment-text { display: contents !important; }

/* LEFT: author/date/verified — spans all rows so it never stretches a row */
.bizco-rv-list li.review > .comment_container > .comment-text > .meta {
    grid-column: 1 !important; grid-row: 1 / -1 !important; align-self: start !important; margin: 0 !important;
}
/* RIGHT: rating → variation+text → media → response, spacing via margins */
.bizco-rv-list li.review > .comment_container > .comment-text > .star-rating {
    grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important;
}
.bizco-rv-list li.review > .comment_container > .comment-text > .description {
    grid-column: 2 !important; grid-row: 2 !important; margin: 8px 0 0 !important;
}
.bizco-rv-list li.review > .comment_container > .comment-text > .cr-comment-images {
    grid-column: 2 !important; grid-row: 3 !important; margin: 12px 0 0 !important;
}
/* bizco-ui-rvreply v1 (owner 2026-09-26): the store's reply spans the whole review, from under the name to the
   right edge. Its own row (5) is below the name column, which spans rows 1-4, so the two never overlap. */
.bizco-rv-list li.review > .children {
    grid-column: 1 / -1 !important; grid-row: 5 !important; margin: 14px 0 0 !important;
}

/* phones: stack to one column */
@media (max-width: 640px) {
    .bizco-rv-list li.review { grid-template-columns: 1fr !important; grid-template-rows: none !important; row-gap: 8px !important; }
    .bizco-rv-list li.review > .comment_container > .comment-text > .meta,
    .bizco-rv-list li.review > .comment_container > .comment-text > .star-rating,
    .bizco-rv-list li.review > .comment_container > .comment-text > .description,
    .bizco-rv-list li.review > .comment_container > .comment-text > .cr-comment-images,
    .bizco-rv-list li.review > .children { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; }
}

/* Footer */
/* 1 & 2: Footer column titles — white, bigger, bolder */
.ct-footer .widget-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

/* 3: Underline footer menu links on hover — columns AND bottom-right menu.
   Titles aren't links, so they're untouched. */
.ct-footer .widget a:hover,
.ct-footer .menu a:hover,
.ct-footer [class*="menu"] a:hover {
    text-decoration: underline;
}

/* Allow the row + container to shrink below the menu's content width */
.ct-footer [data-row="bottom"],
.ct-footer [data-row="bottom"] > * {
    min-width: 0;
}

.ct-footer [data-row="bottom"] .ct-container {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;          /* THE fix — lets it shrink to the viewport */
    width: 100%;
    max-width: 100%;
    grid-template-columns: none !important;   /* kill the old grid */
}

/* Keep both blocks full-size so ONLY the gap absorbs the shrink */
.ct-footer [data-row="bottom"] [data-column] {
    flex-shrink: 0;
	padding-left: 5rem;
    padding-right: 5rem;
}

/* Search bar: wide on big screens, shrinks smoothly with the window */
.ct-header-search {
    width: clamp(240px, 45vw, 620px) !important;
    max-width: 100%;
    min-width: 0;
}
/* Top footer row: logo left, three widgets grouped on the right */
.ct-footer .ct-container:has(> [data-column="logo"]) {
    display: flex !important;
    align-items: flex-start;   /* top-align widgets with the logo */
    gap: 8vw;                 /* spacing between the three widget columns */
    grid-template-columns: none !important;   /* kill the old grid */
}

/* Push the whole widget group to the right, logo stays put */
.ct-footer .ct-container:has(> [data-column="logo"]) > [data-column="widget-area-1"] {
    margin-left: auto;
}
@media (max-width: 767px) {
    .ct-footer .ct-container:has(> [data-column="logo"]) {
        flex-wrap: wrap;
        gap: 30px;
    }
    .ct-footer .ct-container:has(> [data-column="logo"]) > [data-column="widget-area-1"] {
        margin-left: 0;   /* don't force-right on mobile */
    }
}

.ct-footer .ct-container:has(> [data-column="logo"]) > [data-column="logo"] {
    align-self: center;
}

/* The support line is appended after that container but still inside the
   footer's middle row, so align-self:center parks the logo high in the
   green band. Drop it by half the overhang; snippet 84 measures it. */
@media (min-width: 768px) {
    .ct-footer .ct-container:has(> [data-column="logo"]) > [data-column="logo"] {
        transform: translateY(var(--bizco-footer-logo-shift, 28px));
    }
}
/* Grey top-row background
   (or set this natively: Customize → Footer → click the top row → Design → Background) */
.ct-footer [data-row="top"] {
    background-color: #e9ecef !important;
}

/* White parallelogram box: angled sides + rounded corners */
.bizco-footer-banner {
    width: fit-content;
    max-width: 90%;
    margin: 28px auto;
    background: #ffffff;
    border-radius: 16px;
    transform: skewX(-8deg);          /* angles the left/right sides */
    padding: 22px 46px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Counter-skew so text + button stay upright inside the slanted box */
/* ===== FOOTER/HOME MAX BANNER — responsive ===== */

/* Base (desktop): one row, everything inline */
.bizco-footer-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;               /* was wrap — stop the CTA floating off */
  gap: 28px;
  transform: skewX(8deg);
}
.bizco-footer-banner__copy { flex: 0 1 auto; }
.bizco-footer-banner__cta  { flex: 0 0 auto; }

/* ---- MEDIUM (601–900px): logo + copy on top, CTA full-width below ---- */
@media (max-width: 1317px) and (min-width: 601px) {
  .bizco-footer-banner {
    width: fit-content !important;
    max-width: 90% !important;
    margin-inline: auto;
  }
  .bizco-footer-banner__inner {
    flex-direction: column;      /* top row, then CTA below */
    align-items: center;
    row-gap: 22px;
  }
  .bizco-footer-banner__top {
    display: flex;
    align-items: center;
    gap: 28px;                   /* logo | copy stay side by side */
  }
  .bizco-footer-banner__cta {
    width: 100%;
    max-width: 360px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}
.bizco-footer-banner__top {
  display: flex;
  align-items: center;
  gap: 28px;
}
.bizco-footer-banner__cta {
  margin-left: auto;
}

/* ---- NARROW (≤600px): centered vertical stack, un-skewed ---- */
@media (max-width: 600px) {
  /* remove the skew so the stacked card sits square */
  .bizco-footer-banner  { transform: none; padding: 24px 22px; max-width: 92%; }
  .bizco-footer-banner__inner {
    transform: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .bizco-footer-banner__brand { height: 44px; }
  /* divider was a left border — flip it to a top border under the logo */
  .bizco-footer-banner__copy {
    align-items: center;
    text-align: center;
    padding-left: 0;
    border-left: none;
    padding-top: 16px;
    border-top: 2px solid rgba(46, 158, 79, 0.22);
    width: 100%;
  }
  .bizco-footer-banner__cta {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

.bizco-footer-banner__text {
    margin: 0;
    color: #000000;
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.2;
}

.bizco-footer-banner__logo {
    height: 1.1em;
    width: auto;
    position: relative;
    top: 0.08em;
}

/* Button — now green fill / white text (inverse of the white box) */
.bizco-footer-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0F9558;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 32px;                /* bigger = more prominent + better tap target */
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15, 149, 88, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bizco-footer-banner__cta:hover {
    transform: translateY(-2px);        /* lifts on hover */
    background: #0F5230;
    color: #ffffff;                                  /* keep text crisp white on hover */
    box-shadow: 0 4px 10px rgba(15, 149, 88, 0.3); /* deeper blue glow on lift */
}
/* Stack the big text and the subtext */
.bizco-footer-banner__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding-left: 28px;
    border-left: 2px solid rgba(46, 158, 79, 0.22);
}

/* Small print under the headline */
.bizco-footer-banner__subtext {
    margin: 0;
    color: #000000;                    /* same brand green — or a lighter grey-green */
    font-size: clamp(12px, 1.2vw, 15px);
    font-weight: 500;
    opacity: 0.8;                      /* softens it a touch below the headline */
}
.bizco-footer-banner__brand {
    height: 52px;              /* give the brand real presence */
    width: auto;
    flex-shrink: 0;
}
/* Arrow nudges forward on hover */
.bizco-footer-banner__cta-arrow {
    transition: transform 0.15s ease;
}
.bizco-footer-banner__cta:hover .bizco-footer-banner__cta-arrow {
    transform: translateX(4px);
}

.bizco-hero-copy {
  max-width: 1200px;   /* your target measure */
  margin-left: 0;      /* keeps it left-aligned to the container edge */
  margin-right: auto;  /* pushes remaining space to the right */
}

.bizco-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  font-size:15px;
  line-height:1;
  color:#0F5230;                 /* deep green text */
  background:#EAF3EE;            /* light green tint */
  border:1px solid #D2E5D9;
  padding:9px 15px 9px 13px;
  border-radius:999px;          /* full pill */
}
.bizco-chip svg{
width:clamp(18px, 1.7vw, 24px) !important;
  height:clamp(18px, 1.7vw, 24px) !important;
  flex:none;                    /* keeps icon from squishing */
}
.bizco-hero{
  position:relative;
  overflow:hidden;
  max-width:100% important;
  margin-top:0 !important;
  background-color:#E2EFE7;
  /* dot grid + left-to-right fade (dots strong left, gone right) */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26,122,74,.18) 1.4px, transparent 1.6px),
    linear-gradient(to right, #E9F2EC 0%, rgba(233,242,236,0) 60%);
  background-size:20px 20px, 100% 100%;
  padding:1vh 64px 1vh !important;   /* override inline padding:0 from Columns block */
  border-radius:0px !important;
  border:none !important;
  box-shadow:none !important;
}

/* soft corner glow */
.bizco-hero::after{
  content:"";
  position:absolute;
  top:-120px; right:-120px;
  width:440px; height:440px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(26,122,74,.14) 0%, rgba(26,122,74,0) 70%);
  pointer-events:none;
}
/* keep content above the pattern/glow */
.bizco-hero-inner{
  position:relative;
  z-index:1;
/*   max-width:760px; */
	max-width:1160px;
  margin-left:0;
  margin-right:auto;
	padding-left: 2vw;
	padding-right: 2vw;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* accent bar */
.bizco-bar{
  width:52px;
/*   height:4px; */
  background:#1A7A4A;
  border-radius:2px;
  margin-bottom:26px;
	margin-left:0;
  margin-right:auto;
}
hr.bizco-bar.wp-block-separator{
  background-color:#1A7A4A !important;
  border:none !important;
  height:3px !important;
  border-radius:3px !important;
}

/* eyebrow */
.bizco-eyebrow{
  font-weight:700 !important;
  font-size:clamp(9px, 1.6vw, 24px) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  color:#1A7A4A;
/*   margin-bottom:0px; */
}
/* headline */
.bizco-headline{
  font-weight:800 !important;
  font-size:clamp(34px, 3.5vw, 52px) !important;
  line-height:1.04 !important;
  letter-spacing:-.022em;
  color:#161A1C;
  max-width:18ch;
/*   margin-bottom:0px !important; */
}
.bizco-hero-inner > .bizco-headline{
  margin-top:10px !important;      /* pulls headline up toward eyebrow */
}
.bizco-headline em{
  font-style:normal;
  color:#1A7A4A;
}

/* delivery pill */
.bizco-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  font-size:15px;
  line-height:1;
  color:#0F5230;
  background:#FFFFFF;
  border:1px solid #CFE3D6;
  padding:11px 17px 11px 14px;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(15,82,48,.08);
}
.bizco-chip svg{
  width:18px;
  height:18px;
  flex:none;
  color:#1A7A4A;
}
/* mobile */
@media(max-width:780px){
  .bizco-hero{ padding:32px 28px 32px !important; }
  .bizco-hero::after{ width:260px; height:260px; top:-90px; right:-90px; }
  .bizco-eyebrow{ font-size:13px !important; }
  .bizco-headline{ font-size:38px !important; max-width:100%; }
}
.bizco-pp-arrow{
  position:absolute;
  top:38%;                       /* centers on the image area; nudge to taste */
  transform:translateY(-50%);
  z-index:5;

  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:#1A7A4A;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.bizco-pp-arrow:hover{
  background:#1A7A4A;
  color:#fff;
  box-shadow:0 6px 20px rgba(15,82,48,.25);
  transform:translateY(-50%) scale(1.05);
}
.bizco-pp-arrow svg{ width:22px; height:22px; }

.bizco-pp-prev{ left:-8px; }     /* slight overlap past left edge */
.bizco-pp-next{ right:-8px; }    /* slight overlap past right edge */

/* hidden state (at start / at end) — fade out, non-interactive */
.bizco-pp-arrow.bizco-hidden{
  opacity:0;
  pointer-events:none;
}

.wp-block-columns.wp-container-core-columns-is-layout-db5a5286{
  border-width:0 !important;
}

/* ===== BIZCO POPULAR PRODUCTS CAROUSEL ===== */
.bizco-pp{
 position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}

/* scrolling track */
.bizco-pp-track{
  display:flex;
  gap:0;                          /* dividers handle separation, no gap */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  background:#fff;                /* single white background for the whole strip */
  border:1px solid #E8EBE8;
  border-radius:18px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
   padding:8px;                    /* inner breathing room around items  */
  scrollbar-width:none;
}
.bizco-pp-track::-webkit-scrollbar{ display:none; }  /* Chrome/Safari */

/* card */
.bizco-pp-card{
  flex:0 0 auto;
  width:clamp(210px, 17vw, 320px);
  scroll-snap-align:start;
  background:transparent;
  border:none;
  border-right:1px solid #EEF0EE;   /* thin divider between items */
  border-radius:0;
  padding:14px 16px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:background .15s ease;
	text-align:center;        /* centers title + price/label */
  align-items:center;  
}
.bizco-pp-card:hover{
  background:#FAFBFA;               /* gentle hover, no lift */
  box-shadow:none;
  transform:none; 
}
.bizco-pp-card:last-child{ border-right:none; }
/* image */
.bizco-pp-imgwrap{
   border-radius:12px;              /* rounded image */
  overflow:hidden;
  margin-bottom:12px;
  aspect-ratio:1/1;
  background:#F6F7F5;
}
.bizco-pp-imgwrap img{
  width:100%;
  height:100%;
  object-fit:cover;                /* keep your lifestyle shots full-bleed */
  display:block;
}

/* title — clamped to 3 lines */
.bizco-pp-title{
 font-family:'Outfit',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.3;
  color:#1a1a1a;
  margin-bottom:10px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.3em * 3);
}

/* price row: red price + gray container label */
.bizco-pp-price{
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(15px, 1.2vw, 19px);
  color:#D32F2F;
  margin-top:auto;
  line-height:1;
}

/* WooCommerce wraps price in <span class="woocommerce-Price-amount"> — inherit red */
.bizco-pp-price .woocommerce-Price-amount{ color:#D32F2F; }
.bizco-pp-price del{ color:#9aa0a4; font-weight:600; font-size:14px; margin-right:6px; }
.bizco-pp-price ins{ text-decoration:none; }

/* container label ("/Case") in muted gray */
.bizco-pp-label{
  color:#6b7280;
  font-weight:600;
  font-size:clamp(11px, 0.9vw, 14px);
  margin-left:2px;
}

.bizco-popular h2,
.wp-block-heading.bizco-popular-heading{
  font-weight:600;   /* was likely 700/800 — lighter */
	font-size:clamp(20px, 2vw, 32px) !important;
}

/* hide arrows on touch/mobile — users swipe instead */
@media(max-width:780px){
  .bizco-pp-arrow{ display:none; }
}
.bizco-popular{ margin-top:4vh !important;  }

.bizco-headline-row{
  display:flex;
  align-items:center !important;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.bizco-headline-row .bizco-headline{
  margin-bottom:0 !important;
  flex:0 1 auto;             /* was 1 1 auto — don't force-grow, wrap at natural max-width */
  max-width:18ch;            /* keep the same 2-line wrap you had before */
}
.bizco-headline-row .bizco-chip{
  flex:0 0 auto;
  white-space:nowrap;
     /* align near baseline of "for less." */ 
font-size:clamp(14px, 1.3vw, 19px) !important;
  padding:clamp(10px, 1.1vw, 16px) clamp(16px, 1.8vw, 26px) !important; /* bigger pill */
  gap:12px;   
}

.bizco-hero.wp-block-columns{
  gap:0 !important;              /* kill column gap creating the purple space */
}
.bizco-hero-inner.wp-block-column{
  flex-basis:100% !important;
  max-width:100% !important;     /* let it fill the whole row */
  width:100% !important;
}
.bizco-shopall{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#1A7A4A;
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
}
.bizco-shopall span{
  text-decoration:none;
}
.bizco-shopall:hover span{
  text-decoration:underline;      /* ONLY the text underlines */
  text-underline-offset:3px;
}
.bizco-shopall i{
  font-style:normal;
  display:inline-block;
  transition:transform .15s ease;
}
.bizco-shopall:hover i{
  transform:translateX(3px);
}
/* the column holding the See all products link */
.wp-block-column:has(.bizco-shopall){
  text-align:right;
}
.wp-block-columns .wp-block-buttons:has(.bizco-viewmore){
  justify-content:flex-end !important;
}

.bizco-calc{ max-width:640px; margin:0 auto; text-align:center; }

.bizco-calc-inputwrap{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px; }
.bizco-calc-label{ font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; color:#161A1C; }
.bizco-calc-input{
  display:inline-flex; align-items:center; background:#fff;
  border:2px solid #1A7A4A; border-radius:14px; padding:0 18px; height:62px;
  box-shadow:0 4px 16px rgba(15,82,48,.06);
}
.bizco-calc-dollar{ color:#5C6469; font-size:24px; font-weight:700; margin-right:2px; }
.bizco-calc-input input{
  border:none; outline:none; font-family:'Outfit',sans-serif; font-size:24px; font-weight:700;
  width:160px; color:#161A1C; background:transparent;
}
.bizco-calc-per{ color:#5C6469; font-size:16px; font-weight:500; margin-left:6px; }

.bizco-calc-result{
  background:#fff; border:1px solid #E6EAE7; border-radius:18px; padding:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.05); text-align:left;
}
.bizco-calc-row{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; }
.bizco-calc-row-label{ font-family:'Outfit',sans-serif; font-size:17px; color:#5C6469; font-weight:500; }
.bizco-calc-row-val{ font-family:'Outfit',sans-serif; font-size:23px; font-weight:700; color:#161A1C; }
.bizco-calc-current .bizco-calc-row-val{ color:#5C6469; }
.bizco-calc-bizco{ border:2px solid #1A7A4A; border-radius:14px; }
.bizco-calc-bizco .bizco-calc-row-label{ color:#161A1C; font-weight:600; }
.bizco-calc-bizco .bizco-calc-row-val{ color:#1A7A4A; font-weight:800; }

.bizco-calc-savings{ background:#EAF3EE; border-radius:14px; margin-top:10px; padding:20px; text-align:center; }
.bizco-calc-savings-month{ font-family:'Outfit',sans-serif; font-size:clamp(19px,2.6vw,25px); font-weight:700; color:#0F5230; line-height:1.3; }
.bizco-calc-savings-month b{ font-weight:900; color:#1A7A4A; }
.bizco-calc-savings-year{ font-family:'Outfit',sans-serif; font-size:15px; color:#5C6469; font-weight:500; margin-top:4px; }
.bizco-calc-savings-year b{ color:#0F5230; font-weight:700; }

.bizco-calc-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  background:#0F9558; color:#fff; font-family:'Outfit',sans-serif; font-weight:700; font-size:17px;
  text-decoration:none; padding:15px 30px; border-radius:999px; transition:background .15s ease;
}
.bizco-calc-cta:hover{ background:#0F5230;
color: #ffffff}
.bizco-calc-cta::after{ content:"→"; transition:transform .15s ease;
color: #ffffff;}
.bizco-calc-cta:hover::after{ transform:translateX(3px); }

.bizco-calc-disclaimer{ font-family:'Outfit',sans-serif; font-size:12px; color:#9aa0a4; margin-top:16px; line-height:1.5; max-width:100%; margin-left:auto; margin-right:auto; }

.bizco-savings{
  background-color:#E9F2EC;   /* your hero tint — match whatever you settled on */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26,122,74,.18) 1.4px, transparent 1.6px);
  background-size:20px 20px;
}
.wp-block-columns.wp-container-core-columns-is-layout-995f960e{
  margin-bottom:0 !important;
}
/* But restore spacing specifically under the title row */
.mega-menu-title-row.wp-block-columns.wp-container-core-columns-is-layout-995f960e {
  margin-bottom: 12px !important;
}
/* track — single consolidated rule */
.bizco-pp-track{
  cursor:grab;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  scroll-snap-type:x mandatory;   /* snap when NOT dragging */
  scroll-behavior:smooth;
}

/* while dragging: kill snap + smooth so the drag is fluid 1:1 */
.bizco-pp-track.bizco-dragging{
  cursor:grabbing;
  scroll-snap-type:none !important;   /* THIS fixes the harsh jump */
  scroll-behavior:auto !important;
}

/* prevent native image/link drag from hijacking the scroll-drag */
.bizco-pp-track a,
.bizco-pp-track img{
  user-select:none;
  -webkit-user-drag:none;
}
.bizco-pp-track{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
}
.bizco-pp-track::-webkit-scrollbar{ display:none; }

.bizco-savings{
  padding-top:30px;
  padding-bottom:30px;
}
/* the "How much could your kitchen save?" heading */
.bizco-savings h2,
.bizco-savings .wp-block-heading{
  font-weight:600 !important;
	font-size:clamp(20px, 2vw, 32px) !important;
	margin-bottom: 2px;
}

/* the subhead paragraph */
.bizco-savings p{
  font-size:19px !important;   /* was ~17px — a little larger */
}

.bizco-cats{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.bizco-cat{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#1a1a1a;
  min-width:120px;
}
.bizco-cat-circle{
  width:clamp(90px, 9vw, 130px);
  height:clamp(90px, 9vw, 130px);
  border-radius:50%;
  overflow:hidden;
  background:#F1F5F2;
  border:1px solid #E6EAE7;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.bizco-cat-circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bizco-cat:hover .bizco-cat-circle{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.bizco-cat-label{
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:clamp(13px, 1vw, 15px);
  text-align:center;
  line-height:1.3;
}
.bizco-cat:hover .bizco-cat-label{
  color:#0F5230;
}

@media(max-width:640px){
  .bizco-cats{ justify-content:center; }
  .bizco-cat{ flex:0 0 30%; }
}
/* Shop by Category heading */
.bizco-cats-heading{
  font-size:clamp(20px, 2vw, 32px) !important;
	margin-bottom:12px !important;
}
/* Direct from factory section */
/* Left column */

.bizco-cmp-rule{
  width:60px;
  max-width:60px;
  height:6px !important;
  background:#1A7A4A !important;
  border:none !important;
  border-radius:4px;
  margin:24px 0 24px 0 !important;
  opacity:1 !important;
}
.bizco-cmp-sub{
  font-family:'Outfit',sans-serif;
  font-size:clamp(17px, 1.4vw, 20px) !important;
  line-height:1.55 !important;
  color:#5C6469;
  max-width:34ch;
}

/* both headings identical size, no gap between them */
.wp-block-column:has(.bizco-cmp-head) h2{
  font-family:'Outfit',sans-serif;
  font-weight:800 !important;
  font-size:clamp(32px, 3.5vw, 52px) !important;
  line-height:1.05 !important;
  letter-spacing:-.02em;
  margin:0 !important;
  color:#161A1C;
}

/* BIZCO Max Benefits Section */
/* section wrapper — green dots background (add class bizco-max-section to the Group) */
.bizco-max-section{
  background-color:#E9F2EC;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26,122,74,.18) 1.4px, transparent 1.6px);
  background-size:20px 20px;
  padding-top:80px !important;
  padding-bottom:80px !important;
}

.bizco-benefits-wrap{
  max-width:1260px;
  margin:0 auto;
}

/* header */
.bizco-benefits-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 36px;
}
.bizco-benefits-eyebrow{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#1A7A4A;
  margin-bottom:12px;
}
.bizco-calc-eyebrow{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#1A7A4A;
  margin-bottom:12px;
}
.bizco-benefits-title{
  font-family:'Outfit',sans-serif;
  font-weight:700 !important;
  font-size:clamp(26px, 3vw, 34px) !important;
  line-height:1.1 !important;
  color:#161A1C;
  margin:0 0 10px !important;
}
.bizco-benefits-sub{
  font-family:'Outfit',sans-serif;
  font-size:22px;
  color:#5C6469;
  line-height:1.5;
  margin:0;
}

/* grid */
.bizco-benefits{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

/* card */
.bizco-benefit{
  display:flex;
  align-items:center;
  gap:20px;
  background:#fff;
  border:1px solid #E6EAE7;
  border-radius:14px;
  padding:28px 30px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.bizco-benefit-icon{
  flex:none;
  width:64px;
  height:64px;
  border-radius:12px;
  background:#EAF3EE;
  color:#1A7A4A;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bizco-benefit-icon svg{ width:34px; height:34px; }
.bizco-benefit-title{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:clamp(18px, 1.5vw, 24px);
  color:#161A1C;
  margin-bottom:3px;
}
.bizco-benefit-sub{
  font-family:'Outfit',sans-serif;
  font-size:clamp(15px, 1.1vw, 18px);
  color:#5C6469;
  line-height:1.45;
}

@media(max-width:720px){
  .bizco-benefits{ grid-template-columns:1fr; }
}

.bizco-max-logo{
  height:0.9em;              /* scales with the heading font size */
  width:auto;
  vertical-align:baseline;
  position:relative;
  top:0.05em;                /* nudge to align with text baseline */
}

/* Benefits CTA section */

.bizco-max-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:#fff;
  border-radius:18px;
  padding:22px 30px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  margin-top:28px;
  flex-wrap:wrap;
}
.bizco-max-cta-left{
  display:flex;
  align-items:center;
  gap:22px;
  flex:1;
  min-width:280px;
}
.bizco-max-cta-logo{
  height:48px;
  width:auto;
  flex:none;
}
.bizco-max-cta-divider{
  width:1px;
  align-self:stretch;
  background:#E0E0E0;
  flex:none;
}
.bizco-max-cta-title{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:clamp(18px, 2vw, 24px);
  color:#161A1C;
  line-height:1.2;
  margin-bottom:4px;
}
.bizco-max-cta-sub{
  font-family:'Outfit',sans-serif;
  font-size:15px;
  color:#5C6469;
  line-height:1.4;
}
/* The orange .bizco-max-cta-btn was deleted here: no markup on the site ever
   used it. The rest of the .bizco-max-cta family is dead too. */

@media(max-width:720px){
  .bizco-max-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .bizco-max-cta-left{ flex-direction:column; gap:14px; }
  .bizco-max-cta-divider{ display:none; }
}
.bizco-benefits-wrap{
  margin-bottom:60px;
}

/* Transparent Pricing Section */

.bizco-trans{
  font-family:'Outfit',sans-serif;
  max-width:1000px;
  margin:0 auto;
}

.bizco-trans-header{
  text-align:center;
  max-width:660px;
  margin:0 auto 40px;
}
.bizco-trans-eyebrow{
  font-weight:700;
  font-size:24px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#1A7A4A;
  margin-bottom:12px;
}
.bizco-trans-title{
  font-weight:700 !important;
  font-size:clamp(26px, 3vw, 34px) !important;
  line-height:1.1 !important;
  color:#161A1C;
  margin:0 0 12px !important;
}
.bizco-trans-sub{
  font-size:22px;
  color:#5C6469;
  line-height:1.5;
  margin:0;
}

.bizco-trans-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}

.bizco-trans-card{
  background:#fff;
  border:1px solid #E6EAE7;
  border-radius:16px;
  padding:28px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.bizco-trans-card-chart{
  display:flex;
  flex-direction:column;
}
.bizco-trans-card-title{
  font-weight:700 !important;
  font-size:clamp(26px, 3vw, 34px) !important;
  color:#161A1C;
  margin-bottom:6px;
}
.bizco-trans-card-sub{
  font-size:17px;
  color:#5C6469;
  line-height:1.5;
  margin-bottom:22px;
}

.bizco-trans-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #EEF0EE;
}
.bizco-trans-row-total{
  padding:16px 0 4px;
  border-bottom:none;
}
.bizco-trans-row-label{
  font-size:18px;
  color:#2D2D2D;
}
.bizco-trans-row-strong{
  font-size:22px;
  font-weight:700;
  color:#161A1C;
}
.bizco-trans-row-val{
  font-weight:700;
  font-size:16px;
  color:#161A1C;
}
.bizco-trans-row-muted{ color:#5C6469; }
.bizco-trans-row-price{
  font-weight:800;
  font-size:22px;
  color:#D32F2F;
}

.bizco-trans-svg{
  width:100%;
  height:auto;
  margin-top:auto;
}
.bizco-trans-legend{
  display:flex;
  gap:20px;
  justify-content:center;
  margin-top:14px;
}
.bizco-trans-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#5C6469;
}
.bizco-trans-dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

@media(max-width:760px){
  .bizco-trans-grid{ grid-template-columns:1fr; }
}
.bizco-trans-section{
  padding-top:80px !important;
  padding-bottom:80px !important;
}

/* FAQ section */

.wp-block-column:has(.bizco-faq-btn){
  display:flex;
  flex-direction:column;
  justify-content:space-between;  /* heading top, button bottom */
}
.bizco-faq-btn a,
.bizco-faq-btn .wp-block-button__link{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background:#fff !important;
  color:#1A7A4A !important;
  border:1px solid #CFE3D6 !important;
  border-radius:999px !important;
  font-weight:600;
  padding:12px 24px !important;
}
.bizco-faq-btn a::after{
  content:"→";
  transition:transform .15s ease;
}
.bizco-faq-btn a:hover{
  background:#1A7A4A !important;
  color:#fff !important;
}
.bizco-faq-btn a:hover::after{
  transform:translateX(3px);
}
/* remove underline on question hover */
.bizco-faq-section .ct-accordion-title:hover,
.bizco-faq-section [class*="accordion"] [class*="title"]:hover{
  text-decoration:none !important;
}
/* rotate the + icon 90° on hover */
.bizco-faq-section .ct-accordion-title:hover .ct-icon,
.bizco-faq-section [class*="accordion"]:hover [class*="icon"]{
  transform:rotate(90deg);
  transition:transform .2s ease;
}

.bizco-faq-section .ct-accordion-item,
.bizco-faq-section [class*="accordion-item"]{
  border-bottom:1.5px solid #D9DDD9;  /* thick black line */
}

.wp-block-accordion-heading__toggle{
  display:flex !important;
  align-items:center !important;      /* vertically centers icon against title */
  justify-content:space-between;
  gap:16px;
}

/* remove underline on hover */
.wp-block-accordion-heading__toggle:hover{
  text-decoration:none !important;
}
.wp-block-accordion-heading__toggle-title{
  text-decoration:none !important;
	font-weight: 600;
	font-size: 24px;
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{
  text-decoration:none !important;
}

/* rotate the + icon 90° on hover */
.wp-block-accordion-heading__toggle-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  transform-origin:center center;      /* rotate around its own center */
  transition:transform .2s ease;
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon{
  transform:rotate(90deg);
}

.bizco-faq-section{
  background-color:#E9F2EC;
  background-image:radial-gradient(circle at 1px 1px, rgba(26,122,74,.18) 1.4px, transparent 1.6px);
  background-size:20px 20px;
  padding-top:80px !important;
  padding-bottom:80px !important;
	 max-width:none !important;
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.bizco-faq-section .wp-block-columns{
  max-width:1600px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.wp-block-accordion-panel p,
.wp-block-accordion-panel .wp-block-paragraph{
  font-size:18px !important;
  line-height:1.6;
}
.bizco-faq-section .wp-block-accordion-panel{
  padding-left:26px;
	padding-bottom:20px;
}
.bizco-faq-section{
  margin-bottom:0 !important;
}
.sub-menu .wp-block-columns:first-of-type {
  margin-bottom: 1rem; /* tune to taste */
}

/* Hide the mega-menu panel for any item that's been moved into "More" */
.more-items-container .sub-menu .sub-menu {
  display: none !important;
}

/* Hide the dropdown arrow/toggle so it renders as a plain link */
.more-items-container .sub-menu .menu-item-has-children > a.ct-menu-link > .ct-toggle-dropdown-desktop,
.more-items-container .sub-menu .menu-item-has-children > button.ct-toggle-dropdown-desktop-ghost {
  display: none !important;
}
/* [data-header*="type-1"] .ct-header [data-id="menu"] {
    --menu-items-gap: 0px;
    --menu-items-spacing: 25px;
} */

/* Tablet band (768–1000px): force DESKTOP header to stay, hide MOBILE header */
@media (min-width: 768px) and (max-width: 999.98px) {
  [data-device="desktop"] {
    display: block !important;
  }
  [data-device="mobile"] {
    display: none !important;
  }
}
/* Below 768px: let the mobile header take over */
@media (max-width: 767px) {
	
	body.search-results ul.products li.product {
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    grid-template-areas:
      "img   title"
      "img   pills"
      "price price" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding: 16px !important;
    align-items: start !important;
  }

  /* image: top-left, spans the title+pills rows */
  body.search-results li.product figure {
    grid-area: img !important;
    width: 90px !important;
    height: 90px !important;
    margin: 0 !important;
  }
  body.search-results li.product figure img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* title: full width beside image, wraps freely */
  body.search-results li.product .woocommerce-loop-product__title {
    grid-area: title !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    /* allow up to 3 lines then ellipsis */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* pills: under the title, beside image */
  body.search-results li.product .bizco-loop-pills {
    grid-area: pills !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  /* price row (price + qty + add-to-cart): full-width bottom row */
  body.search-results li.product .bizco-loop-pricerow {
    grid-area: price !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 4px !important;
    width: 100% !important;
  }
  /* price prominent on the left */
  body.search-results li.product .bizco-loop-pricerow .price {
    font-size: 18px !important;
    font-weight: 700 !important;
    flex: 0 0 auto !important;
  }
  /* qty + add-to-cart group on the right */
  body.search-results li.product .bizco-loop-qty {
    flex: 0 0 auto !important;
  }
  body.search-results li.product .add_to_cart_button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  [data-device="desktop"] {
    display: none !important;
  }
  [data-device="mobile"] {
    display: block !important;
  }
}

body.search-results ul.products li.product .price {
  margin-right: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
}
body.search-results ul.products li.product {
  grid-template-columns: 100px minmax(200px, 1fr) 134px 225px !important;
}
body.search-results ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: none !important;
}

/* ============================================
   TABLET BAND: 768px – 1000px
   (adjust 1000px to Blocksy's actual collapse point)
   ============================================ */
@media (min-width: 768px) and (max-width: 999.98px) {
	
	
	
	.dgwt-wcas-suggestions-wrapp {
   max-height: calc(100vh - 160px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
  }
	.dgwt-wcas-suggestions-wrapp .js-dgwt-wcas-suggestion-more {
        position: sticky !important;
    bottom: -1px !important;              /* close the 1px seam */
    top: auto !important;
    z-index: 10 !important;
    background: #fff !important;
    box-shadow: 0 2px 0 2px #fff !important;  /* opaque halo covers the sliver */
    margin-bottom: 0 !important;
  }
	
	/* arrow rotation controlled ONLY by is-open, never hover */
  #menu-primary-navigation-v1 .bizco-more:not(.is-open) .bizco-chev,
  #menu-primary-navigation-v1 .bizco-more:not(.is-open):hover .bizco-chev {
    transform: none !important;
  }
  #menu-primary-navigation-v1 .bizco-more.is-open .bizco-chev {
    transform: rotate(180deg) !important;
  }
	
	/* shrink the whole hero */
  .hero-section[data-type="type-2"] {
    position: relative !important;
    min-height: 0 !important;
    height: 150px !important;
  }

  /* shrink the image + crop to middle */
  .hero-section[data-type="type-2"] figure,
  .hero-section[data-type="type-2"] .ct-media-container {
    height: 150px !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .hero-section[data-type="type-2"] .ct-media-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* kill Blocksy's 250px min-height + 50px padding on the title container */
  .hero-section[data-type="type-2"] > .entry-header,
  .hero-section[data-type="type-2"] > [class*="ct-container"] {
    min-height: 0 !important;
    --min-height: 0 !important;
    padding: 0 !important;
    --container-padding: 0 !important;
  }

  /* pin the title to fill the 150px hero and center it */
  .hero-section[data-type="type-2"] .entry-header {
    position: absolute !important;
    inset: 0 !important;
    height: 150px !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
  }
  .hero-section[data-type="type-2"] .page-title {
    margin: 0 !important;
  }
	
	/* 1. Collapse the mega-menu's category columns from 3 → 2 so each tile breathes */
  .header-menu-1 .sub-menu .wp-block-columns.wp-container-core-columns-is-layout-995f960e {
    flex-wrap: wrap !important;
    gap: 8px 24px;
  }
  .header-menu-1 .sub-menu .wp-block-columns.wp-container-core-columns-is-layout-995f960e > .wp-block-column {
    flex: 1 1 calc(50% - 24px) !important;
    flex-basis: calc(50% - 24px) !important;
    min-width: 0 !important;
  }

  /* 2. Force tile images bigger and consistent (override the 34px collapse) */
  .header-menu-1 .sub-menu .mega-tile img,
  .header-menu-1 .sub-menu figure img {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    object-fit: cover;
  }
  /* give the image column enough basis so it doesn't collapse */
  .header-menu-1 .sub-menu .mega-tile .wp-block-column:first-child {
    flex-basis: 56px !important;
    flex: 0 0 auto !important;
  }
	
	/* pull the stacked tiles closer together */
  .header-menu-1 .sub-menu .wp-block-group.mega-tile,
  .header-menu-1 .sub-menu .mega-tile + .mega-tile {
    margin-top: 4px !important;
  }
	
  .header-menu-1 .sub-menu .mega-tile .wp-block-column:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 3. Bigger, more tappable labels */
  .header-menu-1 .sub-menu .mega-tile .wp-block-heading,
  .header-menu-1 .sub-menu .mega-tile .wp-block-heading a {
    font-size: 19px !important;
    line-height: 1.3 !important;
  }

  /* 4. Tap-friendly vertical spacing between tiles */
  .header-menu-1 .sub-menu .mega-tile {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* 5. Slightly smaller title so it doesn't dominate */
  .header-menu-1 .sub-menu .mega-menu-title-row h4 {
    font-size: 26px !important;
  }
	/* trim the title-row and separator spacing at the top */
  .header-menu-1 .sub-menu .mega-menu-title-row {
    margin-bottom: 12px !important;
  }
	.header-menu-1 .sub-menu hr.wp-block-separator {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
	/* tighten the dropdown's own top/bottom padding */
  .header-menu-1 .sub-menu .entry-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* hide placeholder-only columns so they don't wrap into a phantom row */
  .header-menu-1 .sub-menu .wp-block-column:empty,
  .header-menu-1 .sub-menu .wp-block-column:has(> p:only-child:empty) {
    display: none !important;
  }
	

  /* SEARCH — 450px at 1000px, same rate continuing down */
  .ct-search-box {
    width: 100% !important;
    max-width: clamp(150px, 45vw, 450px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ct-search-box .dgwt-wcas-search-wrapp,
  .ct-search-box .dgwt-wcas-search-form,
  .ct-search-box .dgwt-wcas-search-input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* LOGO — 150px at 1000px, shrinking down to ~115px at 768px */
  .site-logo-container,
  .site-logo-container img.default-logo {
    width: clamp(110px, 15vw, 150px) !important;
    max-width: clamp(110px, 15vw, 150px) !important;
    height: auto !important;
  }
	
	
}

/* Keep "Popular products" + "See all products" inline below 781px */
@media (max-width: 820px) and (min-width: 768px) {
  .wp-block-columns:has(> .wp-block-column > .bizco-shopall) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .wp-block-columns:has(> .wp-block-column > .bizco-shopall) > .wp-block-column {
    flex-basis: auto !important;
  }
  /* keep the button hugging the right, heading taking remaining space */
  .wp-block-columns:has(> .wp-block-column > .bizco-shopall) > .wp-block-column:first-child {
    flex: 1 1 auto !important;
  }
  .wp-block-columns:has(> .wp-block-column > .bizco-shopall) > .wp-block-column:last-child {
    flex: 0 0 auto !important;
    text-align: right;
  }
}

@media (min-width: 481px) and (max-width: 781px) {

  /* Make the heading column a horizontal 3-part row */
  .bizco-cmp-head,
  .bizco-cmp-rule,
  .bizco-cmp-sub {
    /* opt these out of the column's normal vertical flow */
  }
  .wp-block-column:has(> .bizco-cmp-head) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1.25rem;
    flex-basis: auto !important;   /* undo core's 100% stack */
  }

  /* Group the two heading lines together on the left */
  .bizco-cmp-head { flex: 0 0 auto; }

  /* Turn the horizontal rule into a vertical divider */
  .bizco-cmp-rule {
    width: 3px !important;
    height: 3.5rem !important;
    border: none !important;
    background: #1A7A4A !important;
    margin: 0 !important;
    flex: 0 0 auto;
    align-self: center;
  }

  /* Let the paragraph take the remaining width on the right */
  .bizco-cmp-sub {
    flex: 1 1 auto;
    margin: 0 !important;
  }
}

@media (min-width: 481px) and (max-width: 781px) {

  .wp-block-column:has(.bizco-cmp-rule) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;   /* center the 3 items */
    gap: 1.25rem;
    flex-basis: auto !important;
  }

  .bizco-cmp-head-group { flex: 0 0 auto; }

  .bizco-cmp-rule {
    width: 3px !important;
    height: 3.5rem !important;
    border: none !important;
    background: #1A7A4A !important;
    margin: 0 !important;
    flex: 0 0 auto;
    align-self: center;
  }

  .bizco-cmp-sub {
    flex: 0 1 auto !important;   /* was 1 1 auto — stop it filling the row */
    max-width: 40ch;             /* keep the text block a sane width */
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  /* stack copyright over menu, remove the 5rem side padding that overflows */
  .ct-footer [data-row="bottom"] .ct-container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 14px;
  }
  .ct-footer [data-row="bottom"] [data-column] {
    flex-shrink: 1;              /* allow shrinking */
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
    min-width: 0;
  }
  /* let the 5-link menu wrap instead of running off-screen */
  .ct-footer [data-row="bottom"] #menu-footer-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* When the More flyout is open, stop the nav from clipping it.
   Blocksy's JS sets data-responsive="no" on nav.header-menu-1 below
   1000px, and the theme ships [data-responsive=no]{overflow:hidden}, so
   the flyout (position:absolute; top:100%, i.e. entirely below the nav
   box) is clipped out of existence there: opacity 1, correct 210px box,
   simply not painted. Snippet 73 opens the flyout on BOTH :hover and
   .is-open, so both states must un-clip. Covering only .is-open left the
   hover path opening invisibly at 768-999.98px, which is exactly the band
   where the More button exists at all. Do NOT just drop the theme's
   overflow:hidden - it is Blocksy's overflow-collapse machinery and menu
   items would spill before snippet 73's JS tags them .bizco-hidden.
   bizco-more-unclip v2, 2026-07-28 */
#menu-primary-navigation-v1:has(.bizco-more:hover),
#menu-primary-navigation-v1:has(.bizco-more.is-open),
.header-menu-1.menu-container:has(.bizco-more:hover),
.header-menu-1.menu-container:has(.bizco-more.is-open) {
  overflow: visible !important;
}
@media (max-width: 999.98px) {
/* collapse the 2-col grid to a single full-width column */
  .bizco-reviews-section {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  .bizco-reviews-section > .bizco-rv-aside {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .bizco-reviews-section > .bizco-rv-main {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .bizco-reviews-section > .woocommerce-pagination {
    order: 3 !important;
		display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* inside the aside: "Leave a review" above "Photo & Video Reviews" */
  .bizco-rv-aside {
    display: flex !important;
    flex-direction: column !important;
  }
  .bizco-rv-aside > .bizco-rv-write {
    order: 1 !important;
  }
  .bizco-rv-aside > .bizco-rv-photos {
    order: 2 !important;
  }
	  .bizco-rv-photos-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
    gap: 8px !important;
    grid-auto-rows: 64px !important;              /* fixed row height */
    max-height: calc(64px * 2 + 8px) !important;
    overflow: hidden !important;
  }
  .bizco-rv-photos-grid .bizco-rv-photo-tile {
    height: 64px !important;
    aspect-ratio: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .bizco-rv-photos-grid .bizco-rv-photo-tile img,
  .bizco-rv-photos-grid .bizco-rv-photo-tile video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* ROW GRID */
  body.search-results ul.products li.product {
    grid-template-columns: 100px 1fr minmax(130px, 190px) !important;
    grid-template-areas:
      "img title pricecart"
      "img pills pricecart" !important;
    column-gap: 16px !important;
    align-items: center !important;
  }

  /* IMAGE — locked to its column */
  body.search-results ul.products li.product figure {
    grid-area: img !important;
    width: 100px !important;
    max-width: 100px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  body.search-results ul.products li.product figure img {
    width: 100% !important;
    height: auto !important;
  }

  /* TITLE + PILLS */
  body.search-results ul.products li.product .woocommerce-loop-product__title {
    grid-area: title !important;
    min-width: 0 !important;
  }
  body.search-results ul.products li.product .bizco-loop-pills {
    grid-area: pills !important;
  }

  /* PRICE STACKED ABOVE CART */
  body.search-results ul.products li.product .bizco-loop-pricerow {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    grid-area: pricecart !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.search-results ul.products li.product .price {
    margin: 0 !important;
    justify-self: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* CART / QTY / BUTTON — fill the shrinking column, don't overflow */
  body.search-results ul.products li.product .bizco-loop-cart,
  body.search-results ul.products li.product .bizco-loop-qty,
  body.search-results ul.products li.product .bizco-loop-add {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.search-results ul.products li.product .bizco-loop-add {
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap;
  }

  /* QTY input must shrink (number inputs resist by default) */
  body.search-results ul.products li.product .bizco-loop-qty {
    display: flex !important;
  }
  body.search-results ul.products li.product .bizco-qty-input {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
  }
  body.search-results ul.products li.product .bizco-qty-dec,
  body.search-results ul.products li.product .bizco-qty-inc {
    flex: 0 0 auto !important;
  }
}
@media (max-width: 1232px) {
  .bizco-price-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* badge moves ABOVE the price, stays 18px down to 835px */
  .bizco-price-row .bizco-max-badge {
    order: -1 !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    margin: 0 0 8px 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .bizco-price-row .bizco-max-badge img {
    height: 1.2em !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
}

/* below 835px: shrink font aggressively so text + logo stay on one line inside the pill */
/* below 835px: shrink font aggressively so text + logo stay on one line inside the pill */
@media (max-width: 835px) {
  .bizco-price-row .bizco-max-badge {
    overflow: visible !important;
    max-width: none !important;
    font-size: clamp(8px, 2.25vw, 17px) !important;
  }
  .bizco-price-row .bizco-max-badge img {
    height: 1.1em !important;
  }
}

@media (max-width: 890px) {
  .ct-cart-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* qty: remove fixed 130px, fill width, shrink with container */
  .ct-cart-actions .quantity {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .ct-cart-actions .quantity input.qty {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* add-to-cart: full width below qty */
  .ct-cart-actions .single_add_to_cart_button {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
}
.bizco-specs .bizco-spec-row {

  gap: 12px !important;
  align-items: start !important;
}

@media (min-width: 881px) and (max-width: 955px) {
  .bizco-specs .bizco-spec-row {
    grid-template-columns: minmax(105px, 0.9fr) 1fr !important;
    gap: 10px !important;
    align-items: baseline !important;
  }
  .bizco-specs .bizco-spec-label {
    overflow-wrap: normal !important;
    word-break: keep-all !important;      /* never break mid-word */
    white-space: normal !important;
    hyphens: none !important;
  }
  .bizco-specs .bizco-spec-value {
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .bizco-specs .bizco-spec-row {
    grid-template-columns: minmax(90px, max-content) minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

.product-entry-wrapper .summary .bizco-works-with {
  display: block !important;
}

/* FIREWALL: restore desktop header row backgrounds in the 768-999 tablet band, 
   overriding Blocksy's mobile (max-width:999.98px) bleed */
@media (min-width: 768px) {
	[data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="top"] {
    --height: 35px !important;   /* desktop top-row height, not the mobile 100px */
  }
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="top"] {
    background-color: rgb(233, 233, 233) !important;   /* your desktop top-row color */
  }
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="middle"] {
    background-color: var(--theme-palette-color-8) !important;  /* your desktop middle color */
  }
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="bottom"] {
    background-color: rgb(15, 149, 88) !important;   /* your desktop bottom-row color */
  }

  /* bizco-seam v1 (fix group TEST-HDR-2, owner report 2026-09-21): the menu bar's bottom edge and the top of
     the coloured band under it are both at css y 158. On a display scaled to 110 / 125 / 175 percent that is
     HALF a screen pixel: the bar paints its half, the band's paint starts on the next whole pixel, and the
     half nobody paints shows the near-white page behind the header as a light line across the screen.
     Nothing below the header can fill that row, so the bar paints one pixel more of whatever is under it.
     --bizco-seam names that colour per screen; unset means transparent, i.e. nothing painted and no change. */
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="bottom"] {
    box-shadow: 0 1px 0 0 var(--bizco-seam, transparent) !important;
  }
  body.home.page-id-1234,          /* the home page, signed in and signed out */
  body.bizco-ptb--rail {           /* the deep-green page title band: My Account, Orders, Cart, referral, Help Center */
    --bizco-seam: #0F5230;
  }
  body.page-id-2492 {              /* the BIZCO MAX page, its own band colour */
    --bizco-seam: #155F3A;
  }
}

@media (max-width: 767px) {
	.ct-header [data-device="mobile"] [data-row*="bottom"] .entry-content p {
    text-align: center !important;
    line-height: 1.5 !important;
  }
	
  .ct-header [data-device="mobile"] .ct-search-box,
  .ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* the FORM carries the pill shape + clips to it — flatten it */
  .ct-header [data-device="mobile"] .dgwt-wcas-search-form {
    border-radius: 6px !important;
  }
  /* wrapper also has radius + overflow clip */
  .ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp {
    border-radius: 6px !important;
  }
  /* input: flatten the rounded-left. NOTE: the form's 6px radius is on its
     BORDER box, so its inner (padding-box) curve is 6 - 1.5 = 4.5px. Giving the
     input a full 6px carved a crescent out of the white fill and let the green
     header show through between the input and the border. Match 4.5px. */
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input {
    width: 100% !important;
    border-radius: 4.5px 0 0 4.5px !important;
  }
  /* submit: flatten the rounded-right (same 4.5px inner curve) */
  .ct-header [data-device="mobile"] .dgwt-wcas-search-submit {
    border-radius: 0 4.5px 4.5px 0 !important;
  }
}
/* Announcement tiers (full / med / short) moved to snippet 135, which also
   measures them and shows the longest that fits. The rules that used to live
   here forced the tier with !important and fought that. Do not re-add them. */

/* keep it one line always, no wrapping */
@media (max-width: 767px) {
	
  .ct-header [data-device="mobile"] [data-row*="bottom"] .entry-content p {
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
  }
}
@media (max-width: 767px) {
  .ct-header [data-device="mobile"] {
    /* was #0F9558. The phone header is white + a grey announcement strip
       now - see bizco-mobile-header-white v1 at the end of this sheet.
       The three rows paint their own boxes over this, so it only shows if
       one ever fails to; green would flash, white cannot. */
    background-color: #ffffff !important;
  }
}

.ct-header .ct-header-text .entry-content a {
  text-decoration: underline !important;
}
@media (min-width: 768px) {
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="top"],
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="top"] .ct-header-text,
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="top"] .ct-header-text p,
  [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="top"] .ct-header-text a {
    color: #2D2D2D !important;   /* desktop announcement dark text */
  }
}

@media (max-width: 360px) {
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input {
    font-size: clamp(14.5px, 3.8vw, 16px) !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input::placeholder {
    font-size: inherit !important;
  }
}

@media (max-width: 767px) {
	
	 /* ===== force ALL sub-menus always open, remove toggle arrows ===== */
  #offcanvas .mobile-menu .sub-menu {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  #offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
    display: none !important;   /* hide the expand/collapse arrows */
  }
  /* parent labels: not clickable look, no pointer */
  #offcanvas .mobile-menu .ct-sub-menu-parent > .ct-menu-link {
    pointer-events: none;
  }

  /* ===== QUICK ACTIONS (menu-item-2324): hide header, kids = rectangle buttons ===== */
  #offcanvas .mobile-menu #menu-item-2324 > .ct-sub-menu-parent {
    display: none !important;   /* hide the "Quick Actions" header */
  }
	
	#offcanvas .mobile-menu #menu-item-2315,
  #offcanvas .mobile-menu #menu-item-2316 {
    flex: 1 1 120px !important;   /* grow/shrink, min 120px before wrapping */
    margin: 0 !important;
  }
	
	#offcanvas .mobile-menu #menu-item-2323 {
    flex: 1 1 100% !important;
    margin: 0 !important;
  }
	
  #offcanvas .mobile-menu #menu-item-2324 > .sub-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
  }
  #offcanvas .mobile-menu #menu-item-2324 > .sub-menu > li {
    margin: 0 !important;
  }
  #offcanvas .mobile-menu #menu-item-2324 > .sub-menu > li > .ct-menu-link {
    display: block !important;
    text-align: center !important;
    padding: 12px 16px !important;
    border: 1.5px solid #1A7A4A !important;
    border-radius: 6px !important;
    color: #1A7A4A !important;
    font-weight: 600 !important;
    pointer-events: auto !important;   /* buttons ARE clickable */
  }

  /* ===== PRODUCT CATEGORIES (2317) & QUICK LINKS (2325): bold static header + listed kids ===== */
  #offcanvas .mobile-menu #menu-item-2317 > .ct-sub-menu-parent > .ct-menu-link,
  #offcanvas .mobile-menu #menu-item-2325 > .ct-sub-menu-parent > .ct-menu-link {
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: #2D2D2D !important;
    pointer-events: none !important;
  }
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #2D2D2D !important;
    pointer-events: auto !important;
    padding-left: 0 !important;      /* align with header, no indent */
		font-weight: 500 !important;
  }
	#offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link::after,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link::after {
    content: "›" !important;
    font-size: 1.3em !important;
    color: #2D2D2D !important;
    margin-left: 8px !important;
  }
  /* spacing between sections */
  #offcanvas .mobile-menu > ul > li {
    margin-bottom: 18px !important;
  }
	/* remove any left indent on the sub-menu so items align with header */
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
	#offcanvas.ct-panel {
    /* bizco-mobmenu-glue v1: --bizco-mobmenu-top is kept in sync with the real
       header bottom by the "BIZCO Mobile offcanvas glued to header" snippet,
       so the panel meets the header at any scroll position. 269px = fallback. */
    top: var(--bizco-mobmenu-top, 269px) !important;
    height: calc(100vh - var(--bizco-mobmenu-top, 269px)) !important;
    height: calc(100dvh - var(--bizco-mobmenu-top, 269px)) !important;
  }
	 #offcanvas .ct-panel-inner {
    min-height: 100% !important;
    background-color: #e9e9e9 !important;   /* or whatever green you want */
  }
	#offcanvas .ct-panel-content[data-device="mobile"] {
    background-color: #e9e9e9 !important;
  }
	#offcanvas .ct-panel-content-inner,
  #offcanvas .mobile-menu,
  #offcanvas .mobile-menu > ul {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #offcanvas .mobile-menu .ct-menu-link {
    color: #1A7A4A !important;
  }
	
	.ct-header [data-device="mobile"] .site-logo-container img {
    width: 120px !important;   /* 20% smaller on mobile (was 150px) */
    height: auto !important;
  }
	.ct-header [data-device="mobile"] .site-logo-container {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
.ct-header [data-device="mobile"] .ct-header-text:has(.bizco-account) {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
 .ct-header [data-device="mobile"] .ct-header-text:has(.bizco-account) .entry-content {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  .ct-header [data-device="mobile"] .site-logo-container img {
    /* Shrink starts just under 420px (28.6vw crosses 120px at ~419.6px);
       was 32vw, which held the logo at its 120px cap until 375px.
       At 420->120px, 390->111.5px, 375->107.3px, 360->103px, 320->91.5px;
       the 80px floor is only reached below ~280px. */
    width: clamp(80px, 28.6vw, 120px) !important;
    height: auto !important;
  }
	
}

/* mobile search bar */

.dgwt-wcas-suggestion-more,
.js-dgwt-wcas-suggestion-more {
  bottom: -1px !important;
  box-shadow: 0 2px 0 2px #fff !important;
  z-index: 10 !important;
}
.dgwt-wcas-suggestions-wrapp {
  padding-bottom: 0 !important;
}
.bizco-search-heading .bizco-search-label {
  font-weight: 500;
}
.bizco-search-heading .bizco-search-term {
  font-weight: 600;
}
/* SRP category scroll arrows removed 2026-08-11 (snippet 77 retired).
   The strip is now pills that wrap on desktop and swipe on a phone —
   see bizco-srp-head-cats v1 at the end of this stylesheet. */

/* ============================================================
   SEARCH RESULTS PAGE — MOBILE CARD (under 768px)      [BIZCO]
   bizco-srp-mobile-fix v15
   Phone card layout:
     top row     :  product title, full width (truncated to 3 lines)
     bottom row  :  image (FIXED 136px, left, with margin around it)
                    | price + qty + add-to-cart stacked (right)
   The image is a fixed square that does NOT scale with the window;
   the actions column (1fr) takes the remaining width and shrinks
   horizontally as the window narrows. Everything is constrained
   to the white card (min-width:0 + box-sizing + overflow:hidden,
   and the actions track can shrink to 0) so nothing bleeds out.
   Price is centered over the Add-to-cart button. Pills hidden.
   This block fully controls the mobile card (every grid / flex /
   width property is set here) so it doesn't inherit sizing from
   the base / tablet rules. Scoped to max-width:767px, so
   tablet/desktop are untouched; selectors mirror the desktop
   specificity and sit last in the file, so they win.
   ============================================================ */
@media (max-width: 767px) {

  /* Card: title full-width on top, then [fixed image | actions].
     Image track = auto (fixed figure size); actions = 1fr and can
     shrink to 0, so the card never grows wider than its container. */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "title title"
      "img   act" !important;
    column-gap: 18px !important;
    row-gap: 12px !important;
    padding: 16px 12px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* White single-column list container. On search results this comes
     from the desktop base; the shop/category archives need it set here
     so their cards match the SRP mobile layout. */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products.products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  /* Product name — full-width top row, truncated after 3 lines */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > .woocommerce-loop-product__title {
    grid-area: title !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    max-height: none !important;
  }

  /* Image — FIXED square (does not scale with the window), with margin */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > figure {
    grid-area: img !important;
    width: 136px !important;
    height: 136px !important;
    max-width: 136px !important;
    flex: none !important;
    margin: 8px 8px 8px 0 !important;
    align-self: end !important;
  }
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > figure img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* Variation pills — hidden on mobile */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > .bizco-loop-pills {
    display: none !important;
  }

  /* Actions column (right of the image): price, qty, add stacked.
     Undo the desktop `display:contents` so they group together. */
  /* Keeps price + qty + add stacked and pinned to the RIGHT edge.
     Each is capped at 180px (so it doesn't span comically wide at
     ~700px) but drops to 100% once the column narrows below 180px. */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > .bizco-loop-pricerow {
    grid-area: act !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    align-self: end !important;             /* bottom-align to the row (matches the image) */
    justify-content: flex-end !important;  /* push price/qty/add to the bottom */
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 0 8px 0 !important;   /* match the image's 8px bottom margin */
  }

  /* Price — centered over the Add-to-cart button, right-aligned, <=180px */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .price {
    grid-area: auto !important;
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    width: 100% !important;
    max-width: 180px !important;
    text-align: center !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* Cart cluster — qty above add, right-aligned, capped at 180px */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .bizco-loop-cart {
    grid-area: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: flex-end !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 180px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Qty selector — full-width bar (<=180px), input fills the middle */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .bizco-loop-qty {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 180px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .bizco-loop-qty input,
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .bizco-qty-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .bizco-qty-dec,
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .bizco-qty-inc {
    flex: 0 0 auto !important;
  }

  /* Add-to-cart — full width beneath the qty selector; wraps rather
     than overflow when the column gets very narrow */
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product .bizco-loop-add {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 180px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }
}

/* --- 420px and below: shrink the image to free room for qty + add --- */
@media (max-width: 420px) {
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > figure {
    width: 112px !important;
    height: 112px !important;
    max-width: 112px !important;
  }
}

/* --- 375px and below: shrink the image a bit more --- */
@media (max-width: 375px) {
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > figure {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
  }
}

/* ============================================================
   FOOTER / HOME "BIZCO MAX" FREE-TRIAL BANNER — MOBILE (<768px)
   bizco-max-banner-mobile v5  (centered, roomy, edge-safe)
   Under 768px: centered vertical stack, no divider:
     MAX logo -> heading -> subtext -> CTA (sized to its content).
   Content is CENTERED in the box (left-aligned drifts inside the
   skew), with generous vertical spacing, a readable subtext, and a
   CTA that hugs its label instead of spanning full width. The box
   keeps its rhombus skew (re-applied here to beat the old <=600
   un-skew). Width is sized off the viewport (100vw - 80px) so the
   ~20px skew overhang still clears the screen edges on the home
   page's full-bleed section. Same classes in the footer content
   block and on the home page, so this fixes both. Sits last in the
   file. >=768px untouched.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-footer-banner {
    transform: skewX(-8deg) !important;   /* keep the rhombus */
    width: auto !important;
    max-width: min(560px, calc(100vw - 80px)) !important;  /* leave room for the slant + screen-edge gap */
    margin: 28px auto !important;
    padding: 32px 44px !important;         /* more vertical room + slant room */
  }
  .bizco-footer-banner__inner {
    transform: skewX(8deg) !important;     /* counter-skew: content upright */
    flex-direction: column !important;
    align-items: center !important;        /* CENTERED in the box */
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;                   /* real spacing between blocks */
  }
  /* logo above the copy, centered */
  .bizco-footer-banner__top {
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
  }
  .bizco-footer-banner__brand {
    height: 46px !important;
  }
  /* copy: centered, no divider */
  .bizco-footer-banner__copy {
    align-items: center !important;
    text-align: center !important;
    border-left: none !important;
    border-top: none !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 10px !important;                   /* heading -> subtext */
  }
  .bizco-footer-banner__text {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  /* readable supporting text (was collapsing to ~12px on mobile) */
  .bizco-footer-banner__subtext {
    font-size: 15px !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    color: #4A5257 !important;
  }
  /* CTA sized to its label, centered (not full width) */
  .bizco-footer-banner__cta {
    width: auto !important;
    max-width: 100% !important;
    align-self: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   MOBILE FOOTER (<768px)                               [BIZCO]
   bizco-mobile-footer v8
   Logo stays centered on top at all mobile widths. The three link
   groups (About Us / Services / Help) change layout by width:
     - up to 479px : single column, blocks + text CENTERED (stacked)
     - 480-767px   : CSS grid of 3 content-width columns, centered
                     as a group (no trailing space in the last
                     column). Grid = fixed 3 columns that shrink
                     instead of wrapping, so it stays 3-across right
                     down to 480px, then jumps to the single column
                     below -- it never breaks into a 2-1 config.
   Bottom row: copyright + legal links stacked/centered, wrapping.
   Scoped to max-width:767px; desktop/tablet untouched. Sits last
   in the file so it beats the older footer mobile rules.
   ============================================================ */
@media (max-width: 767px) {
  /* --- MIDDLE ROW: logo on top, link groups reflow below --- */
  .ct-footer .ct-container:has(> [data-column="logo"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 30px 24px !important;
    text-align: center !important;
  }
  /* logo: full-width row, centered on top */
  .ct-footer .ct-container:has(> [data-column="logo"]) > [data-column="logo"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 0 4px !important;
    display: flex !important;
    justify-content: center !important;
  }
  /* link groups: single centered column by default (small phones) */
  .ct-footer .ct-container:has(> [data-column="logo"]) > [data-column^="widget-area"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* logo centered */
  .ct-footer [data-column="logo"] .site-branding,
  .ct-footer [data-column="logo"] .site-logo-container {
    display: flex !important;
    justify-content: center !important;
  }
  /* each link group: heading + links centered */
  .ct-footer [data-column^="widget-area"] .widget-title {
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  .ct-footer [data-column^="widget-area"] .widget-menu {
    text-align: center !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
  }
  .ct-footer [data-column^="widget-area"] .widget-menu li {
    text-align: center !important;
  }

  /* --- BOTTOM ROW: copyright + legal links stacked, centered, wrapping --- */
  .ct-footer [data-row="bottom"] .ct-container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: center !important;
  }
  .ct-footer [data-row="bottom"] [data-column="menu"] ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 18px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
}

/* 480-767px: CSS grid of 3 content-width columns, centered as a
   group. Grid keeps all three on one line (they shrink instead of
   wrapping) down to 480px, then it drops to the single column -- no
   2-1 config. Logo spans the full width and stays centered. */
@media (min-width: 480px) and (max-width: 767px) {
  .ct-footer .ct-container:has(> [data-column="logo"]) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, max-content)) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 26px 34px !important;
  }
  /* logo: span all 3 columns, centered across the full width */
  .ct-footer .ct-container:has(> [data-column="logo"]) > [data-column="logo"] {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: auto !important;
    max-width: none !important;
  }
  /* widget columns: content-width grid items, text left-aligned */
  .ct-footer .ct-container:has(> [data-column="logo"]) > [data-column^="widget-area"] {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .ct-footer [data-column^="widget-area"] .widget-title,
  .ct-footer [data-column^="widget-area"] .widget-menu,
  .ct-footer [data-column^="widget-area"] .widget-menu li {
    text-align: left !important;
  }
}

/* ============================================================
   HOME "POPULAR PRODUCTS" — MOBILE (<768px)            [BIZCO]
   bizco-pp-mobile v4
   - "See all products" stays on the SAME line as the "Popular
     products" heading (its Gutenberg columns no longer stack).
   - Compact cards with much smaller square (rounded) images,
     a touch bigger than the category circles.
   - Reveal the built-in prev/next arrows as full-height edge
     "bars" (like the SRP category scroller) so users know they
     can scroll for more. The shortcode's JS already toggles them
     by scroll position.
   Scoped to max-width:767px; desktop/tablet untouched. Sits last
   in the file so it beats the older popular-products rules.
   ============================================================ */
@media (max-width: 767px) {
  /* heading row: keep heading + "See all products" on one line */
  .bizco-popular .wp-block-columns:has(.bizco-shopall) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  .bizco-popular .wp-block-columns:has(.bizco-shopall) > .wp-block-column {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .bizco-popular .wp-block-columns:has(.bizco-shopall) > .wp-block-column:first-child {
    flex: 1 1 auto !important;
  }
  .bizco-popular .wp-block-columns:has(.bizco-shopall) > .wp-block-column:last-child {
    flex: 0 0 auto !important;
    text-align: right !important;
  }
  .bizco-popular .wp-block-columns:has(.bizco-shopall) h2 {
    font-size: clamp(15px, 4.4vw, 22px) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .bizco-popular .bizco-shopall {
    font-size: 14px !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }
  .bizco-popular .bizco-shopall i,
  .bizco-popular .bizco-shopall svg { font-size: 15px !important; }

  /* compact cards + smaller square (rounded) images */
  .bizco-pp-card {
    width: 130px !important;
    padding: 8px 8px 10px !important;
    scroll-snap-align: start !important;
  }
  .bizco-pp-imgwrap {
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }
  .bizco-pp-title {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
    min-height: calc(1.3em * 2) !important;
    margin-bottom: 6px !important;
  }
  .bizco-pp-price {
    font-size: 14px !important;
  }
  .bizco-pp-label {
    font-size: 11px !important;
  }

  /* Carousel: arrows take their OWN column (in-flow), the scrollable
     track sits BETWEEN them. So a card can never slide under or beside
     a bar, and snap can land the first card flush against the track. */
  .bizco-pp {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  .bizco-pp-track {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
  /* prev/next arrows: full-height OPAQUE bars, each in its own 32px column */
  .bizco-pp-arrow {
    position: static !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #1A7A4A !important;
  }
  .bizco-pp-arrow:hover {
    transform: none !important;
    background: #ffffff !important;
    color: #0F5230 !important;
  }
  .bizco-pp-prev { border-right: 1px solid #E3E3E3 !important; }
  .bizco-pp-next { border-left: 1px solid #E3E3E3 !important; }
  .bizco-pp-arrow svg { width: 20px !important; height: 20px !important; }
  /* collapse a hidden arrow to zero width so there's no end indent:
     the first product sits flush-left (aligned with the heading) at the
     start; the bar only takes space once it's actually shown. */
  .bizco-pp-arrow.bizco-hidden {
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   HOME HERO "FREE 2-DAY DELIVERY" PILL — MOBILE (<768px)  [BIZCO]
   bizco-chip-mobile v1
   The pill has white-space:nowrap, so on narrow screens the text
   runs off the edge. Allow it to wrap: the truck icon stays large
   on the left, the text wraps to two lines beside it, and the text
   sizes up a touch. The pill hugs its content and wraps (instead of
   overflowing) once the one-line text no longer fits.
   Scoped to max-width:767px; desktop/tablet untouched.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-headline-row .bizco-chip {
    display: inline-flex !important;
    align-items: center !important;
    white-space: normal !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
    gap: 12px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    padding: 12px 18px !important;
  }
  .bizco-headline-row .bizco-chip svg {
    width: 30px !important;
    height: 30px !important;
    flex: none !important;
  }
  /* the text (incl. region label) is one flex item so it wraps as one
     block -- no gap before "DFW" and no mid-word break of "DFW" */
  .bizco-headline-row .bizco-chip .bizco-chip-text {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
}

/* pill region label: full "Dallas–Fort Worth" on desktop/tablet,
   "DFW" on mobile. (Requires the two spans in the pill markup.) */
.bizco-chip .chip-region-abbr { display: none !important; }
@media (max-width: 767px) {
  .bizco-chip .chip-region-full { display: none !important; }
  .bizco-chip .chip-region-abbr { display: inline !important; }
}

/* ============================================================
   HOME FAQ SECTION — MOBILE: button below the FAQs         [BIZCO]
   bizco-faq-mobile v1
   The section is 2 columns: left = heading + "View All FAQs"
   button, right = the accordions. On mobile the columns stack, so
   the button lands BETWEEN the heading and the FAQs. Flatten both
   columns (display:contents) into one flex column and reorder with
   `order` so the button sits AFTER the last FAQ. Scoped <=767px;
   the desktop/tablet two-column layout is untouched.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-faq-section .bizco-faq-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column {
    display: contents !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column > h2 {
    order: 0 !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column > .wp-block-accordion {
    order: 1 !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column > .wp-block-buttons {
    order: 2 !important;
    margin-top: 34px !important;
  }
}

/* ============================================================
   HOME HERO EYEBROW ("WHOLESALE SUPPLIES FOR...") SIZE  [BIZCO]
   bizco-eyebrow-size v1
   The old clamp(9px, 1.6vw, 24px) + a flat 13px override under
   780px made it shrink too fast on tablet and read tiny on mobile.
   Raise the floor + growth so it stays larger on tablet/mobile
   (desktop still tops out at 24px). Unscoped + last in the file, so
   it beats both the base clamp and the <=780px 13px override.
   ============================================================ */
.bizco-eyebrow {
  font-size: clamp(17px, 2.4vw, 24px) !important;
}

/* PDP price-history chart: drag-to-pan affordance + touch handling */
#bizco-trend-canvas { cursor: grab; touch-action: pan-y; }
#bizco-trend-canvas:active { cursor: grabbing; }

/* ============================================================
   HOME HERO (dotted green section) — MOBILE PADDING    [BIZCO]
   bizco-hero-pad-mobile v1
   Trim the top/bottom padding of the .bizco-hero section on mobile
   (it was 32px top/bottom under 780px). Horizontal padding kept.
   ============================================================ */
@media (max-width: 780px) {
  .bizco-hero {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* ============================================================
   SUBCATEGORY ARCHIVE TILES — MOBILE (max-width:767px)
   bizco-subcat-mobile-grid v2
   Subcat tiles carry `li.product`, so the SRP/product mobile card
   grid also caught them (title-on-top, image-below, one per row).
   This re-specifies subcategory tiles ONLY (li.product-category)
   as a 2-up grid of vertical stacks — image, title, then the
   "Shop N products" link. Uses ROW SUBGRID so that, within a row,
   the image / title / shop-link bands line up across both tiles no
   matter how many lines each title wraps to. Scoped to <=767px so
   tablet/desktop stay unchanged.
   ============================================================ */
@media (max-width: 767px) {

  /* Grid container: 2 tiles per row, auto-collapsing to 1 once the
     row can't fit two. Drops the product-card white "list" wrapper.
     Each tile spans 3 implicit rows (image / title / shop link);
     those rows are sized across BOTH tiles in the row, which is what
     makes the shop links align. */
  body.tax-product_cat ul.products.products:has(li.product-category) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 22px 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 1.75rem !important;
    align-items: start !important;
  }

  /* Tile: span 3 parent rows and adopt them as a row subgrid. */
  /* bizco-subcat-gap-leak fix (2026-08-28): the shared mobile card block
     above sets grid-template-areas "title title" / "img act" plus an
     18px column-gap on EVERY li.product, and subcategory tiles carry
     li.product too. grid-template-areas forces a second (0px) column
     track, so the 18px gap was subtracted from every tile: image,
     title and link were 18px narrower than their track and hugged its
     left edge, which read as the whole 2-up block sitting left of
     centre on the page. Areas and the column gap are cleared here. */
  body.tax-product_cat ul.products li.product-category {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    column-gap: 0 !important;
    grid-row: span 3 !important;
    grid-template-rows: subgrid !important;
    row-gap: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
  }

  /* Row 1 — image: full-width square. */
  body.tax-product_cat ul.products li.product-category > figure {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 8px 0 !important;
    align-self: start !important;
  }
  body.tax-product_cat ul.products li.product-category > figure a,
  body.tax-product_cat ul.products li.product-category > figure .ct-media-container {
    display: block !important;
    width: 100% !important;
  }
  body.tax-product_cat ul.products li.product-category > figure img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  /* Row 2 — title: top-aligned within the row's (tallest) title band. */
  body.tax-product_cat ul.products li.product-category > .woocommerce-loop-category__title {
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 4px 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  /* Row 3 — shop link: its own band, so the links line up across
     the row regardless of how tall each title is. */
  body.tax-product_cat ul.products li.product-category > .bizco-subcat-shop {
    grid-row: 3 !important;
    grid-column: 1 !important;
    align-self: start !important;
    display: inline-block !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 13px !important;
    text-align: left !important;
  }
}
/* ============================================================
   404 (NOT FOUND) PAGE — remove search bar + center the message
   bizco-404-center v2
   Hides the theme's product search form on the 404 body and
   vertically centers the "Oops…" heading + description in the
   main content area. Mobile: shrink the oversized title and add
   side padding so it wraps instead of overflowing the viewport.
   ============================================================ */
body.error404 .site-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 70vh !important;
  text-align: center !important;
}
body.error404 .site-main > .ct-container {
  width: 100% !important;
  box-sizing: border-box !important;
}
body.error404 .ct-no-results {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
body.error404 .ct-no-results .hero-section .entry-header,
body.error404 .ct-no-results .page-title,
body.error404 .ct-no-results .page-description {
  text-align: center !important;
}
body.error404 .ct-no-results .page-title {
  overflow-wrap: anywhere !important;
}

/* Remove the search form (its wrapper holds nothing else on 404). */
body.error404 .ct-no-results .entry-content {
  display: none !important;
}

/* Mobile: the default 404 title is huge and overflows — scale it down. */
@media (max-width: 767px) {
  body.error404 .ct-no-results .page-title {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  body.error404 .ct-no-results .page-description {
    font-size: 15px !important;
  }
}
/* ============================================================
   PRIMARY MOBILE MENU — green tap/hover highlight on nav rows
   bizco-primary-menu-tap v1
   Matches the account (Sign in / Sign up) dropdown: tapping a row
   fills it light-green (#F0F7F3) and turns the label + "›" arrow
   green (#0F9558). Applies to the tappable list rows under
   Product Categories (#menu-item-2317) and Quick Links
   (#menu-item-2325). Padding + negative side margins keep the
   text aligned with the section header while the fill reads as a
   full row highlight. Scoped <=767px / offcanvas only.
   ============================================================ */
@media (max-width: 767px) {
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link {
    padding: 8px 10px !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    border-radius: 6px !important;
    transition: background-color .15s, color .15s !important;
  }
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:hover,
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:active,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:hover,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:active {
    background: #F0F7F3 !important;
    color: #0F9558 !important;
  }
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:hover::after,
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:active::after,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:hover::after,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:active::after {
    color: #0F9558 !important;
  }
}
/* ============================================================
   NO-REVIEWS EMPTY STATE — trim excess vertical whitespace
   bizco-rv-empty-trim v1
   The empty "No reviews yet" summary box had min-height:240px,
   leaving a lot of blank space above/below the text. Collapse it
   to fit the content with modest padding.
   ============================================================ */
.bizco-rv-summary:has(.bizco-rv-empty) {
    min-height: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.bizco-rv-empty {
    padding: 8px !important;
}

/* ============================================================
   NO-REVIEWS EMPTY STATE — match the "Leave a review" height
   bizco-rv-empty-match-height v1
   When side-by-side (the >=768px grid), stretch the empty box to
   the aside's height so the two cards match, with the text staying
   vertically centered. When stacked (the <768px flex column) there
   is no sibling to match, so the box keeps its compact content
   height (the trimmed size) — unchanged.
   ============================================================ */
.bizco-reviews-section:has(.bizco-rv-empty) {
    align-items: stretch !important;
}
.bizco-rv-main:has(.bizco-rv-empty) {
    display: flex !important;
    flex-direction: column !important;
}
.bizco-rv-main:has(.bizco-rv-empty) .bizco-rv-count {
    display: none !important;
}
.bizco-rv-summary:has(.bizco-rv-empty) {
    flex: 1 1 auto !important;   /* fill the (stretched) box; text stays centered */
}
/* ============================================================
   CATEGORY ARCHIVE BREADCRUMBS — strip above the hero (all sizes)
   bizco-cat-breadcrumbs v4
   Blocksy .ct-breadcrumbs nav (from snippet 78) wrapped in
   .ct-container, above the hero on every breakpoint. No divider.
   Mobile keeps the roomier spacing; desktop (>=768) is tightened.
   ============================================================ */
.bizco-cat-breadcrumbs {
    display: block !important;
    padding-top: 14px !important;
}
.bizco-cat-breadcrumbs .ct-breadcrumbs {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
}
@media (min-width: 768px) {
  .bizco-cat-breadcrumbs {
    padding-top: 6px !important;
  }
  .bizco-cat-breadcrumbs .ct-breadcrumbs {
    margin-bottom: 6px !important;
  }
}

/* ============================================================
   "+ Add to My Inventory" — per-layout placement
   bizco-loop-inventory-btn v2
   The button (injected by snippet 54 as a sibling after the price
   row) needs different placement per layout:
   - Shop/archive vertical cards: full-width below the row (handled
     by the button's base style + bizco-loop-bottom-align).
   - SRP (horizontal card): stack it under "Add to cart" in the
     price/cart column instead of letting it land in the image cell.
   - Mobile: cap the width and right-align it under the cart actions
     so it doesn't stretch the full (wide) card width.
   ============================================================ */

/* ---- SRP desktop (>=1001px): under Add to cart, in the cart column ---- */
@media (min-width: 1000px) {
  body.search-results ul.products li.product > .bizco-inventory-list-btn {
    grid-column: cart !important;
    grid-row: 3 !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 140px !important;
    margin: 4px 0 0 0 !important;
    padding: 9px 14px !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
  }
}

/* ---- SRP tablet (768-1000px): under Add to cart, in the price/cart column ---- */
@media (min-width: 768px) and (max-width: 999.98px) {
  body.search-results ul.products li.product > .bizco-inventory-list-btn {
    grid-column: pricecart !important;
    grid-row: 3 !important;
    align-self: start !important;
    width: 100% !important;
    margin: 4px 0 0 0 !important;
    padding: 9px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }
}

/* ---- Mobile (all loop pages incl. SRP): cap width, right-align ---- */
@media (max-width: 767px) {
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > .bizco-inventory-list-btn {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 300px !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   SHOP/ARCHIVE CARDS — bottom-align the price/cart/inventory group
   bizco-loop-bottom-align v1
   Cards in a row are equal height (grid stretch) and are flex
   columns. Pushing the price row (everything under the pills) to
   the bottom makes the "+ Add to My Inventory" button line up
   across every product in the row. Desktop/tablet only; on mobile
   the card is a grid whose image/act are already bottom-aligned
   under the name.
   ============================================================ */
@media (min-width: 768px) {
  :is(body.search-results,body.post-type-archive-product,body.tax-product_cat) ul.products li.product > .bizco-loop-pricerow {
    margin-top: auto !important;
  }
}

/* ============================================================
   UNIFIED PRODUCT GRID — shop + SRP: same vertical "floating card"
   at every breakpoint; columns 4 -> 3 -> 2 -> 1.  bizco-unified-grid v3
   2026-07-29: body.bizco-shop-all joined the :is() list everywhere it
   appears in this file (23 selectors). That class is added by snippet 125
   only on /product-category/<top-level>/?shop_all=1 - the mega menu's
   "Shop all" button - so those pages draw the shop card while every other
   route into the same category (hamburger menu, top-level nav item, home
   category cards) is untouched.  Revert = delete ", body.bizco-shop-all".
   v3: price forced flush-left + full width, Add-to-cart fills (override
   the old <=767 mobile block's align-self:flex-end / max-width:180 on
   price & add). Compact qty; 1-per-row card capped + centered. Last in
   file so it wins over the older search-results / mobile blocks.
   ============================================================ */
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 30px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}
@media (max-width: 1200px) { :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 860px)  { :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px !important; } }
@media (max-width: 520px)  { :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; } }

:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important;
  text-align: left !important;
}
@media (max-width: 520px) {
  :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product { max-width: 420px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
}

:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product > figure {
  grid-area: auto !important; order: 0 !important;
  width: 100% !important; max-width: 100% !important; height: auto !important;
  margin: 0 !important; align-self: stretch !important;
}
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product > figure img {
  width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important;
  object-fit: cover !important; border-radius: 10px !important;
}

:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product > .woocommerce-loop-product__title {
  grid-area: auto !important; width: 100% !important; max-width: 100% !important;
  margin: 10px 0 4px !important; text-align: left !important; font-size: 1.05rem !important;
  -webkit-line-clamp: 3 !important;
}

:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product > .bizco-loop-pills {
  grid-area: auto !important; display: flex !important; flex-wrap: wrap !important;
  gap: 8px !important; margin: 8px 0 10px !important; width: 100% !important;
}

:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product > .bizco-loop-pricerow {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: 10px !important; width: 100% !important; min-width: 0 !important; margin: auto 0 10px 0 !important;
}
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .price {
  grid-area: auto !important; justify-self: auto !important; align-self: stretch !important;
  width: auto !important; max-width: none !important; margin: 0 !important;
  text-align: left !important; white-space: nowrap !important;
}
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .bizco-loop-cart {
  grid-area: auto !important; display: flex !important; flex-direction: row !important;
  align-items: stretch !important; align-self: stretch !important; gap: 8px !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important;
}
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .bizco-loop-qty {
  flex: 0 0 auto !important; width: 104px !important; min-width: 104px !important; max-width: 104px !important; display: flex !important;
}
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .bizco-loop-qty input, :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .bizco-qty-input {
  flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; text-align: center !important;
}
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .bizco-qty-dec, :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .bizco-qty-inc { flex: 0 0 28px !important; }
:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product .bizco-loop-add {
  flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important;
  align-self: auto !important; white-space: nowrap !important; padding: 8px 12px !important;
}

:is(body.search-results, body.post-type-archive-product, body.bizco-shop-all) ul.products.products li.product > .bizco-inventory-list-btn {
  grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; align-self: auto !important;
  display: block !important; width: 100% !important; max-width: none !important;
  margin: 0 0 10px 0 !important; padding: 11px 16px !important; font-size: 0.95rem !important; white-space: normal !important;
}

/* ============================================================
   PDP BUY-BOX RESPONSIVENESS  bizco-pdp-buybox v3
   Above the 880px stack point the gallery was pinned to 648px while
   the summary starved (~146px), cutting off the MAX badge, Add-to-cart,
   inventory button and the BIZCO ESSENTIALS logo. Give the summary a
   real min width, let the gallery shrink, and keep the badge/logo fluid.
   v3: the MAX logo must scale with the badge text and stay small — the
   old `height:auto` here forced it to its natural 37px (too big on
   wide/tablet, overflowed the badge ~458px). Size it in em, capped.
   ============================================================ */
@media (min-width: 881px) {
  .single-product .product-entry-wrapper {
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr) !important;
  }
}
.single-product .bizco-essentials img { max-width: 100% !important; height: auto !important; }

/* MAX "Free Delivery" badge: fluid, wrap instead of overflowing */
.single-product .product-entry-wrapper .bizco-price-row .bizco-max-badge,
.single-product .entry-summary .bizco-max-badge {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* MAX logo: scale with the badge text, capped small (fixes the 37px blowup) */
.single-product .product-entry-wrapper .bizco-max-badge img {
  height: 1.1em !important;
  max-height: 16px !important;
  width: auto !important;
  max-width: 100% !important;
}
/* ===== BIZCO Contact Us — form + hero (WPForms #2533 / page 1876) ===== */
/* ============================================================
   bizco-contact v2   (sibling of bizco-feedback v2 / bizco-report v2)
   Same treatment as the other two form pages: no dot patterns,
   one white card as the only emphasis surface, a supporting rail
   on the bare #FAFBFC canvas, and the site CTA pill.
   Rail markup = the .bizco-fbx-aside wp:html block in page 1876;
   the shared .bizco-fbx-* styles live in the Share Feedback block.
   All three form pages now carry the same First/Last, Email/Phone,
   Business Name block, so all three read "Required unless marked
   optional." (Phone is the only optional field on each).
   ============================================================ */

/* ---------- HERO: flat brand green, no texture ---------- */
.page-id-1876 .site-main > .ct-container-full{ padding-top:0 !important; }  /* hero flush to header */
.page-id-1876 .hero-section{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:clamp(38px, 5vw, 64px);
  padding:clamp(44px, 5.6vw, 72px) 24px clamp(46px, 5.9vw, 76px);
  border-radius:0;
  text-align:center;
  background-color:var(--theme-palette-color-1);
  background-image:radial-gradient(120% 150% at 50% -35%, rgba(255,255,255,.11), rgba(255,255,255,0) 62%);
  background-repeat:no-repeat;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.10);
}
.page-id-1876 .hero-section .entry-header{
  position:relative; z-index:1; margin:0; padding:0; border:none;
}
.page-id-1876 .page-title{
  color:#fff !important;
  font-weight:700 !important;
  font-size:clamp(28px, 3.9vw, 44px) !important;
  letter-spacing:-.022em;
  line-height:1.14 !important;
  text-shadow:none;
  text-wrap:balance;
  margin:0 !important;
}
/* Subtitle -- edit copy freely. The support address used to live here as plain
   CSS text (not clickable); it is now a real mailto link in the rail instead. */
.page-id-1876 .hero-section .entry-header::after{
  content:"Questions about pricing, an order, or BIZCO MAX? Send us a note and the right person will get back to you.";
  display:block; max-width:54ch; margin:14px auto 0;
  color:rgba(255,255,255,.88);
  font-size:clamp(15px, 1.15vw, 17.5px); line-height:1.6; font-weight:400;
  text-wrap:pretty;
}

/* ---------- PAGE GRID: supporting rail + form ---------- */
/* Scoped to the article: Blocksy content blocks (mega menus, footer banner)
   each render inside their own .entry-content, so a body-class descendant
   selector would turn all 15 of them into grids. */
.page-id-1876 #post-1876 > .entry-content{
  width:min(90vw, 1120px);
  max-width:1120px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0, clamp(280px, 27vw, 340px)) minmax(0, 1fr);
  gap:clamp(30px, 4.5vw, 72px);
  align-items:start;
  padding-bottom:clamp(48px, 5.4vw, 76px);
}
/* page 1876 opens with a stray empty paragraph block -- it would claim a cell */
.page-id-1876 #post-1876 > .entry-content > p:empty{ display:none; }
#wpforms-2533{ grid-column:2; grid-row:1; }
.page-id-1876 .bizco-fbx-aside{ grid-column:1; grid-row:1; }

/* The rail carries the support address as a real link (shared vocabulary --
   only this page currently has an anchor inside a step). */
.bizco-fbx-step-text a{
  color:#0C7A47; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(12,122,71,.35);
  transition:border-color .15s ease;
}
.bizco-fbx-step-text a:hover{ border-bottom-color:#0C7A47; }

/* ---------- FORM CARD: the page's single white surface ---------- */
#wpforms-2533{
  max-width:none; margin:0;
  background:#fff;
  background-image:none;
  border:1px solid #E4EAE6;
  border-radius:20px;
  padding:clamp(24px, 2.6vw, 36px);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* Field rhythm: one gap value, no per-field bottom padding */
#wpforms-2533 .wpforms-field-container{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:20px 24px;
}
#wpforms-2533 .wpforms-field{ width:100%; padding:0; }
/* two-up pairs: First+Last, Email+Phone */
@media (min-width:783px){
  #wpforms-2533 .wpforms-field-container > #wpforms-2533-field_1-container,
  #wpforms-2533 .wpforms-field-container > #wpforms-2533-field_2-container,
  #wpforms-2533 .wpforms-field-container > #wpforms-2533-field_4-container,
  #wpforms-2533 .wpforms-field-container > #wpforms-2533-field_6-container{ width:calc(50% - 12px); }
}

/* Asterisks out; one honest note in. Phone is the only optional field and its
   label already says so, so this wording covers the whole form. */
#wpforms-2533 .wpforms-field-container::before{
  content:"Fields marked * are required.";
  flex:0 0 100%;
  font-family:"Outfit",sans-serif; font-size:13.5px; line-height:1.4;
  color:#6B7280;
  margin:0 0 -4px;
}
/* small green asterisk on required fields; the span is aria-hidden in
   WPForms markup, so this is decoration -- the input keeps its required attr */
#wpforms-2533 .wpforms-required-label{
  display:inline !important;
  margin-left:1px;   /* WPForms' markup already puts a space before the span */
  color:var(--theme-palette-color-1);
  font-size:.9em; font-weight:700; line-height:1;
  vertical-align:baseline;
}

/* ---------- Labels + helper text ---------- */
#wpforms-2533 .wpforms-field-label{
  font-family:"Outfit",sans-serif; font-weight:600; font-size:15px;
  letter-spacing:-.005em; line-height:1.35;
  color:#1a1a1a; margin:0 0 7px;
}
#wpforms-2533 .wpforms-field-description{
  font-family:"Outfit",sans-serif; font-size:13.5px; line-height:1.5;
  color:#5F6B63; margin:0 0 9px;
}

/* ---------- Inputs ---------- */
#wpforms-2533 input[type="text"],
#wpforms-2533 input[type="email"],
#wpforms-2533 input[type="tel"],
#wpforms-2533 select,
#wpforms-2533 textarea{
  width:100%; max-width:100% !important;
  font-family:"Outfit",sans-serif; font-size:16px; color:#1F2A24;
  background:#fff;
  border:1px solid #D9E0DB;
  border-radius:10px;
  padding:13px 14px; line-height:1.5;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#wpforms-2533 input[type="text"]:hover,
#wpforms-2533 input[type="email"]:hover,
#wpforms-2533 textarea:hover{ border-color:#BFCCC4; }
#wpforms-2533 textarea{ min-height:164px; resize:vertical; }

/* Native select (fallback when snippet 85's JS is unavailable) */
#wpforms-2533 select{
  height:auto; min-height:48px; line-height:1.6;
  padding:12px 42px 12px 14px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6B63' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  background-color:#fff;
}
/* Snippet 85 swaps the select for .bizco-select -- keep the two identical.
   ID selector here beats snippet 85's .wpforms-container class rules. */
/* bizco-ctl-v1 dropdown (option A) */
#wpforms-2533 .bizco-select__trigger{
  font-family:"Outfit",sans-serif; font-size:16px; color:#1F2A24;
  background:#fff;
  border:1px solid #D9E0DB;
  border-radius:8px;
  height:48px !important;
  min-height:48px !important;
  padding:0 14px;
  line-height:1;
}
#wpforms-2533 .bizco-select__trigger:hover{ border-color:#BFCCC4; }
#wpforms-2533 .bizco-select.is-open .bizco-select__trigger,
#wpforms-2533 .bizco-select__trigger:focus-visible,
#wpforms-2533 .bizco-select.is-open .bizco-select__trigger{
  border-color:#0F5230;
  box-shadow:inset 0 0 0 1px #0F5230; outline:none;
}
#wpforms-2533 .bizco-select__label.is-placeholder{ color:#98A29B; }
/* Focus ring */
#wpforms-2533 input:focus,
#wpforms-2533 select:focus,
/* bizco-ctl-v1 field focus: crisp ring, no glow - same as every other
   field and dropdown on the site. */
#wpforms-2533 textarea:focus{
  border-color:#0F5230;
  box-shadow:inset 0 0 0 1px #0F5230; outline:none;
}
#wpforms-2533 ::placeholder{ color:#98A29B; opacity:1; }

/* ---------- Submit row ---------- */
#wpforms-2533 .wpforms-submit-container{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid #EEF2EF;
}

/* bizco-ctl-v1 primary: the same 48px / 8px box as every other submit on
   the site. Was a 54px pill with a green glow. */
#wpforms-2533 .wpforms-submit{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  font-family:"Outfit",sans-serif !important; font-weight:600 !important; font-size:16px !important;
  color:#fff !important; background:#0F9558 !important;
  line-height:1 !important;
  border:none !important; border-radius:8px !important;
  /* WPForms modern pins the button to --wpforms-button-size-height (41px) */
  height:48px !important; min-height:48px !important;
  padding:0 26px !important; cursor:pointer; white-space:nowrap;
  box-shadow:none;
  transition:background .15s ease;
}
#wpforms-2533 .wpforms-submit:hover{
  background:#0F5230 !important;
  transform:none;
  box-shadow:none;
}
#wpforms-2533 .wpforms-submit:active{ transform:none; }
#wpforms-2533 .wpforms-submit:focus-visible{
  outline:2px solid #0F9558; box-shadow:none;outline-offset:2px;}
/* bizco-ui-formring v1 (owner 2026-09-25): no blue ring around Submit after a click. WPForms draws a 2px ring
   in its default blue (#066aab) as :focus::after; it shows while the button is faded to "Sending...". The green
   :focus-visible outline above stays for keyboard users. Same rule in the 2559 and 2573 blocks. */
#wpforms-2533 .wpforms-submit:focus::after{ display:none; }
/* bizco-ui-formspin v1 (owner 2026-09-25): while the form sends (WPForms puts .wpforms-loading on the container),
   the button wears the site's one busy look, snippet 184's: lighter (.55), no words, an 18px white ring spinning
   in the middle. WPForms' own spinner beside the button is hidden. The label is shrunk, not replaced: ::before
   holds the unseen "Submit" so the button keeps its width, and screen readers still hear "Sending...".
   The keyframes below serve the 2559 and 2573 blocks too. */
#wpforms-2533 .wpforms-submit-spinner{ display:none !important; }
#wpforms-2533.wpforms-loading .wpforms-submit{
  color:transparent !important; font-size:0 !important; gap:0 !important; opacity:.55 !important;
  background:#0F9558 !important; cursor:default !important; text-shadow:none !important; transition:none !important; }
#wpforms-2533.wpforms-loading .wpforms-submit::before{
  content:attr(data-submit-text) !important; display:block !important; position:static !important;
  font-size:16px !important; visibility:hidden !important; filter:none !important; background:none !important; }
#wpforms-2533.wpforms-loading .wpforms-submit::after{
  content:"" !important; display:block !important; position:absolute !important; z-index:1 !important;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  width:18px !important; height:18px !important; margin:-9px 0 0 -9px !important; padding:0 !important;
  box-sizing:border-box !important; border-radius:50% !important;
  border:2.5px solid rgba(255,255,255,.42) !important; border-top-color:#fff !important;
  background:none !important; opacity:1 !important; animation:bizco-formspin .8s linear infinite !important; }
@keyframes bizco-formspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #wpforms-2533.wpforms-loading .wpforms-submit::after,
  #wpforms-2559.wpforms-loading .wpforms-submit::after,
  #wpforms-2573.wpforms-loading .wpforms-submit::after{ animation-duration:2.4s !important; }
}

/* ---------- Validation + success ---------- */
#wpforms-2533 input.wpforms-error, #wpforms-2533 select.wpforms-error, #wpforms-2533 textarea.wpforms-error{ border-color:#D9E0DB !important; box-shadow:none !important; }
#wpforms-2533 label.wpforms-error{ color:#d63638; font-size:13px; margin-top:5px; }
#wpforms-2533 .wpforms-confirmation-container-full{
  background:#F3F7F4;
  border:1px solid #E4EAE6;
  border-left:4px solid var(--theme-palette-color-1);
  border-radius:12px; color:#1F2A24; padding:18px 20px;
  font-size:16px; line-height:1.55;
}

/* Supporting text sits directly under the label, above the input */
#wpforms-2533 .wpforms-field{ display:flex; flex-direction:column; }
#wpforms-2533 .wpforms-field > *{ order:3; }
#wpforms-2533 .wpforms-field-label{ order:1; }
#wpforms-2533 .wpforms-field-description{ order:2; }

/* ---------- Responsive ---------- */
/* Below 1040px the rail collapses under the form (see bizco-feedback v2). */
@media (max-width:1039.98px){
  .page-id-1876 #post-1876 > .entry-content{
    grid-template-columns:minmax(0, 1fr);
    width:min(100% - 32px, 680px);
    gap:clamp(30px, 5vw, 44px);
  }
  #wpforms-2533{ grid-column:1; grid-row:1; }
  .page-id-1876 .bizco-fbx-aside{ grid-column:1; grid-row:2; padding-top:0; }
}
@media (max-width:600px){
  .page-id-1876 .hero-section{ padding:38px 20px 40px; }
  .page-id-1876 #post-1876 > .entry-content{ width:min(100% - 32px, 680px); }
  #wpforms-2533{ padding:22px 18px; border-radius:16px; }
  #wpforms-2533 .wpforms-submit{ width:100%; justify-content:center; }

}

/* == BIZCO Max Eligibility hero (page 2555) :: START == */
.page-id-2555 .site-main > .ct-container-full{ padding-top:0 !important; }
.page-id-2555 .hero-section{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:40px;
  padding:40px 32px;
  border-radius:0;
  text-align:center;
  background-color:var(--theme-palette-color-1);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1.3px, transparent 1.6px),
    radial-gradient(90% 120% at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  background-size:22px 22px, 100% 100%;
  background-repeat:repeat, no-repeat;
}
.page-id-2555 .hero-section .entry-header{
  position:relative; z-index:1; margin:0; padding:0; border:none;
}
.page-id-2555 .page-title{
  color:#fff !important;
  font-weight:800 !important;
  font-size:clamp(30px, 5vw, 46px) !important;
  letter-spacing:-.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.18);
  margin:0 !important;
}
.page-id-2555 .hero-section .entry-header::after{
  content:"Please enter your address to determine if you are eligible to become a BIZCO Max member.";
  display:block; max-width:660px; margin:14px auto 0;
  color:rgba(255,255,255,.92);
  font-size:clamp(15px, 2vw, 18px); line-height:1.6; font-weight:400;
}
@media (max-width:600px){
  .page-id-2555 .hero-section{ padding:30px 20px; margin-bottom:24px; }
  .page-id-2555 #post-2555 > .entry-content{ padding-left:16px; padding-right:16px; }
}
/* == BIZCO Max Eligibility hero (page 2555) :: END == */

/* == BIZCO Report an Issue (page 2566 / form 2559) :: START == */
/* ============================================================
   bizco-report v2   (sibling of bizco-feedback v2)
   Same treatment as the Share Feedback page: no dot patterns,
   one white card as the only emphasis surface, a supporting
   rail on the bare #FAFBFC canvas, and the site CTA pill.
   Shared anatomy lives in both blocks rather than a common
   one so either page can be tuned without touching the other.
   Rail markup = the .bizco-fbx-aside wp:html block in page
   2566; its styles are shared and defined in the Share
   Feedback block (bizco-feedback v2) above.
   ============================================================ */

/* ---------- HERO: flat brand green, no texture ---------- */
.page-id-2566 .site-main > .ct-container-full{ padding-top:0 !important; }  /* hero flush to header */
.page-id-2566 .hero-section{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:clamp(38px, 5vw, 64px);
  padding:clamp(44px, 5.6vw, 72px) 24px clamp(46px, 5.9vw, 76px);
  border-radius:0;
  text-align:center;
  background-color:var(--theme-palette-color-1);
  background-image:radial-gradient(120% 150% at 50% -35%, rgba(255,255,255,.11), rgba(255,255,255,0) 62%);
  background-repeat:no-repeat;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.10);
}
.page-id-2566 .hero-section .entry-header{
  position:relative; z-index:1; margin:0; padding:0; border:none;
}
.page-id-2566 .page-title{
  color:#fff !important;
  font-weight:700 !important;
  font-size:clamp(28px, 3.9vw, 44px) !important;
  letter-spacing:-.022em;
  line-height:1.14 !important;
  text-shadow:none;
  text-wrap:balance;
  margin:0 !important;
}
.page-id-2566 .hero-section .entry-header::after{   /* subtitle -- edit copy freely */
  content:"Found a bug, a broken page, or something that just does not work? Tell us what happened and we will look into it.";
  display:block; max-width:54ch; margin:14px auto 0;
  color:rgba(255,255,255,.88);
  font-size:clamp(15px, 1.15vw, 17.5px); line-height:1.6; font-weight:400;
  text-wrap:pretty;
}

/* ---------- PAGE GRID: supporting rail + form ---------- */
.page-id-2566 #post-2566 > .entry-content{
  width:min(90vw, 1120px);
  max-width:1120px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0, clamp(280px, 27vw, 340px)) minmax(0, 1fr);
  gap:clamp(30px, 4.5vw, 72px);
  align-items:start;
  padding-bottom:clamp(48px, 5.4vw, 76px);
}
#wpforms-2559{ grid-column:2; grid-row:1; }
.page-id-2566 .bizco-fbx-aside{ grid-column:1; grid-row:1; }

/* ---------- FORM CARD: the page's single white surface ---------- */
#wpforms-2559{
  max-width:none; margin:0;
  background:#fff;
  background-image:none;
  border:1px solid #E4EAE6;
  border-radius:20px;
  padding:clamp(24px, 2.6vw, 36px);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* Field rhythm: one gap value, no per-field bottom padding */
#wpforms-2559 .wpforms-field-container{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:20px 24px;
}
#wpforms-2559 .wpforms-field{ width:100%; padding:0; }
/* two-up pairs: First+Last (1/8), Email+Phone (3/9) -- matches form 2533 */
@media (min-width:783px){
  #wpforms-2559 .wpforms-field-container > #wpforms-2559-field_1-container,
  #wpforms-2559 .wpforms-field-container > #wpforms-2559-field_8-container,
  #wpforms-2559 .wpforms-field-container > #wpforms-2559-field_3-container,
  #wpforms-2559 .wpforms-field-container > #wpforms-2559-field_9-container{ width:calc(50% - 12px); }
}

/* Asterisks out; one honest note in. Phone is the only optional field and its
   label already says so, so this wording covers the whole form (as on 2533). */
#wpforms-2559 .wpforms-field-container::before{
  content:"Fields marked * are required.";
  flex:0 0 100%;
  font-family:"Outfit",sans-serif; font-size:13.5px; line-height:1.4;
  color:#6B7280;
  margin:0 0 -4px;
}
/* small green asterisk on required fields; the span is aria-hidden in
   WPForms markup, so this is decoration -- the input keeps its required attr */
#wpforms-2559 .wpforms-required-label{
  display:inline !important;
  margin-left:1px;   /* WPForms' markup already puts a space before the span */
  color:var(--theme-palette-color-1);
  font-size:.9em; font-weight:700; line-height:1;
  vertical-align:baseline;
}

/* ---------- Labels + helper text ---------- */
#wpforms-2559 .wpforms-field-label{
  font-family:"Outfit",sans-serif; font-weight:600; font-size:15px;
  letter-spacing:-.005em; line-height:1.35;
  color:#1a1a1a; margin:0 0 7px;
}
#wpforms-2559 .wpforms-field-description{
  font-family:"Outfit",sans-serif; font-size:13.5px; line-height:1.5;
  color:#5F6B63; margin:0 0 9px;
}

/* ---------- Inputs ---------- */
#wpforms-2559 input[type="text"],
#wpforms-2559 input[type="email"],
#wpforms-2559 input[type="tel"],
#wpforms-2559 textarea{
  width:100%; max-width:100% !important;
  font-family:"Outfit",sans-serif; font-size:16px; color:#1F2A24;
  background:#fff;
  border:1px solid #D9E0DB;
  border-radius:10px;
  padding:13px 14px; line-height:1.5;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#wpforms-2559 input[type="text"]:hover,
#wpforms-2559 input[type="email"]:hover,
#wpforms-2559 textarea:hover{ border-color:#BFCCC4; }
/* "What went wrong?" is the long answer; "Where did this happen?" is a line or two */
#wpforms-2559 #wpforms-2559-field_5{ min-height:158px; resize:vertical; }
#wpforms-2559 #wpforms-2559-field_7{ min-height:104px; resize:vertical; }
#wpforms-2559 textarea{ resize:vertical; }

/* Focus ring */
#wpforms-2559 input:focus,
/* bizco-ctl-v1 field focus: crisp ring, no glow - same as every other
   field and dropdown on the site. */
#wpforms-2559 textarea:focus{
  border-color:#0F5230;
  box-shadow:inset 0 0 0 1px #0F5230; outline:none;
}
#wpforms-2559 ::placeholder{ color:#98A29B; opacity:1; }

/* ---------- Submit row ---------- */
#wpforms-2559 .wpforms-submit-container{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid #EEF2EF;
}

/* bizco-ctl-v1 primary: the same 48px / 8px box as every other submit on
   the site. Was a 54px pill with a green glow. */
#wpforms-2559 .wpforms-submit{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  font-family:"Outfit",sans-serif !important; font-weight:600 !important; font-size:16px !important;
  color:#fff !important; background:#0F9558 !important;
  line-height:1 !important;
  border:none !important; border-radius:8px !important;
  /* WPForms modern pins the button to --wpforms-button-size-height (41px) */
  height:48px !important; min-height:48px !important;
  padding:0 26px !important; cursor:pointer; white-space:nowrap;
  box-shadow:none;
  transition:background .15s ease;
}
#wpforms-2559 .wpforms-submit:hover{
  background:#0F5230 !important;
  transform:none;
  box-shadow:none;
}
#wpforms-2559 .wpforms-submit:active{ transform:none; }
#wpforms-2559 .wpforms-submit:focus-visible{
  outline:2px solid #0F9558; box-shadow:none;outline-offset:2px;}
/* bizco-ui-formring v1: no blue ring around Submit after a click (see the Contact Us block) */
#wpforms-2559 .wpforms-submit:focus::after{ display:none; }
/* bizco-ui-formspin v1: the spinner sits inside the button while the form sends (see the Contact Us block) */
#wpforms-2559 .wpforms-submit-spinner{ display:none !important; }
#wpforms-2559.wpforms-loading .wpforms-submit{
  color:transparent !important; font-size:0 !important; gap:0 !important; opacity:.55 !important;
  background:#0F9558 !important; cursor:default !important; text-shadow:none !important; transition:none !important; }
#wpforms-2559.wpforms-loading .wpforms-submit::before{
  content:attr(data-submit-text) !important; display:block !important; position:static !important;
  font-size:16px !important; visibility:hidden !important; filter:none !important; background:none !important; }
#wpforms-2559.wpforms-loading .wpforms-submit::after{
  content:"" !important; display:block !important; position:absolute !important; z-index:1 !important;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  width:18px !important; height:18px !important; margin:-9px 0 0 -9px !important; padding:0 !important;
  box-sizing:border-box !important; border-radius:50% !important;
  border:2.5px solid rgba(255,255,255,.42) !important; border-top-color:#fff !important;
  background:none !important; opacity:1 !important; animation:bizco-formspin .8s linear infinite !important; }

/* ---------- Validation + success ---------- */
#wpforms-2559 input.wpforms-error, #wpforms-2559 textarea.wpforms-error{ border-color:#D9E0DB !important; box-shadow:none !important; }
#wpforms-2559 label.wpforms-error{ color:#d63638; font-size:13px; margin-top:5px; }
#wpforms-2559 .wpforms-confirmation-container-full{
  background:#F3F7F4;
  border:1px solid #E4EAE6;
  border-left:4px solid var(--theme-palette-color-1);
  border-radius:12px; color:#1F2A24; padding:18px 20px;
  font-size:16px; line-height:1.55;
}

/* Supporting text sits directly under the label, above the input */
#wpforms-2559 .wpforms-field{ display:flex; flex-direction:column; }
#wpforms-2559 .wpforms-field > *{ order:3; }
#wpforms-2559 .wpforms-field-label{ order:1; }
#wpforms-2559 .wpforms-field-description{ order:2; }

/* ---------- Responsive ---------- */
/* Below 1040px the rail collapses under the form (see bizco-feedback v2). */
@media (max-width:1039.98px){
  .page-id-2566 #post-2566 > .entry-content{
    grid-template-columns:minmax(0, 1fr);
    width:min(100% - 32px, 680px);
    gap:clamp(30px, 5vw, 44px);
  }
  #wpforms-2559{ grid-column:1; grid-row:1; }
  .page-id-2566 .bizco-fbx-aside{ grid-column:1; grid-row:2; padding-top:0; }
}
@media (max-width:600px){
  .page-id-2566 .hero-section{ padding:38px 20px 40px; }
  .page-id-2566 #post-2566 > .entry-content{ width:min(100% - 32px, 680px); }
  #wpforms-2559{ padding:22px 18px; border-radius:16px; }
  #wpforms-2559 .wpforms-submit{ width:100%; justify-content:center; }

}

/* == BIZCO Report an Issue :: END == */

/* == BIZCO Share Feedback (page 2580 / form 2573) :: START == */
/* ============================================================
   bizco-feedback v2   (replaces the dotted mint form card)
   Brings this page onto the same design language as the
   redesigned guest home (bizco-home-unify v1):
   - ONE quiet canvas (#FAFBFC body) -- no dot patterns anywhere
     except the hero band, which loses its dots too.
   - ONE emphasis surface: the form is the only white card
     (#fff / 1px #E4EAE6 / radius 20 / soft shadow), same token
     set as .bizco-cmp and .bizco-trans-panel.
   - Two-column reading order on desktop: a supporting rail on
     the left ("What happens next" + sibling links) and the form
     on the right. DOM order is form-then-rail, so phones get
     the form first and the rail reads as a footnote.
   - Required asterisks removed (they were on nearly every field,
     so the green stars were pure noise) -- replaced by one quiet
     "Required unless marked optional." note at the top of the card.
   ============================================================ */

/* ---------- HERO: flat brand green, no texture ---------- */
.page-id-2580 .site-main > .ct-container-full{ padding-top:0 !important; }  /* hero flush to header */
.page-id-2580 .hero-section{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:clamp(38px, 5vw, 64px);
  padding:clamp(44px, 5.6vw, 72px) 24px clamp(46px, 5.9vw, 76px);
  border-radius:0;
  text-align:center;
  background-color:var(--theme-palette-color-1);
  /* one soft light source instead of a dot field */
  background-image:radial-gradient(120% 150% at 50% -35%, rgba(255,255,255,.11), rgba(255,255,255,0) 62%);
  background-repeat:no-repeat;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.10);
}
.page-id-2580 .hero-section .entry-header{
  position:relative; z-index:1; margin:0; padding:0; border:none;
}
.page-id-2580 .page-title{
  color:#fff !important;
  font-weight:700 !important;
  font-size:clamp(28px, 3.9vw, 44px) !important;
  letter-spacing:-.022em;
  line-height:1.14 !important;
  text-shadow:none;
  text-wrap:balance;
  margin:0 !important;
}
.page-id-2580 .hero-section .entry-header::after{   /* subtitle -- edit copy freely */
  content:"Tell us what we should stock next, or how we can make BIZCO work better for your business.";
  display:block; max-width:54ch; margin:14px auto 0;
  color:rgba(255,255,255,.88);
  font-size:clamp(15px, 1.15vw, 17.5px); line-height:1.6; font-weight:400;
  text-wrap:pretty;
}

/* ---------- PAGE GRID: supporting rail + form ---------- */
.page-id-2580 #post-2580 > .entry-content{
  /* 90vw matches the site's content rhythm; capped so the two columns
     never grow past a comfortable measure on wide screens */
  width:min(90vw, 1120px);
  max-width:1120px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0, clamp(280px, 27vw, 340px)) minmax(0, 1fr);
  gap:clamp(30px, 4.5vw, 72px);
  align-items:start;
  padding-bottom:clamp(48px, 5.4vw, 76px);
}
#wpforms-2573{ grid-column:2; grid-row:1; }
.bizco-fbx-aside{ grid-column:1; grid-row:1; }

/* ---------- SUPPORTING RAIL ---------- */
.bizco-fbx-aside{
  font-family:"Outfit",sans-serif;
  width:100%; max-width:none;   /* beat the theme's content-width cap on entry-content children */
  padding-top:4px;   /* optical: aligns the rail title with the card's first label */
}
.bizco-fbx-title{
  font-size:clamp(18px, 1.5vw, 22px);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.2;
  color:#1a1a1a;
  margin:0 0 20px;
}
.bizco-fbx-steps{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:22px;
}
.bizco-fbx-step{ display:flex; gap:14px; align-items:flex-start; }
.bizco-fbx-ico{
  flex:0 0 38px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:#0F5230; border-radius:11px; color:#fff;   /* bizco-tile1 v1: fbx (fix group TEST-TILE-1): was #EAF4EE / #1A7A4A */
}
.bizco-fbx-ico svg{ display:block; width:19px; height:19px; }
.bizco-fbx-step-title{
  font-size:15.5px; font-weight:600; color:#1a1a1a;
  line-height:1.3; margin:2px 0 5px;
}
.bizco-fbx-step-text{
  font-size:14.5px; line-height:1.55; color:#5F6B63;
  margin:0; text-wrap:pretty;
}

.bizco-fbx-links{
  margin-top:26px; padding-top:22px;
  border-top:1px solid #E4EAE6;
}
.bizco-fbx-links-title{
  font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#6B7280; margin:0 0 12px;
}
.bizco-fbx-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0;
  font-size:15px; font-weight:600; color:#0C7A47 !important;
  text-decoration:none; border-bottom:1px solid #EEF2EF;
  transition:color .15s ease;
}
.bizco-fbx-link:last-child{ border-bottom:none; }
.bizco-fbx-link span{ transition:transform .15s ease; }
.bizco-fbx-link:hover{ color:#0F9558 !important; }
.bizco-fbx-link:hover span{ transform:translateX(4px); }

/* ---------- FORM CARD: the page's single white surface ---------- */
#wpforms-2573{
  max-width:none; margin:0;
  background:#fff;
  background-image:none;
  border:1px solid #E4EAE6;
  border-radius:20px;
  padding:clamp(24px, 2.6vw, 36px);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* Field rhythm: one gap value, no per-field bottom padding */
#wpforms-2573 .wpforms-field-container{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:20px 24px;
}
#wpforms-2573 .wpforms-field{ width:100%; padding:0; }
/* two-up pairs: First+Last (2/6), Email+Phone (3/9) -- matches form 2533 */
@media (min-width:783px){
  #wpforms-2573 .wpforms-field-container > #wpforms-2573-field_2-container,
  #wpforms-2573 .wpforms-field-container > #wpforms-2573-field_6-container,
  #wpforms-2573 .wpforms-field-container > #wpforms-2573-field_3-container,
  #wpforms-2573 .wpforms-field-container > #wpforms-2573-field_9-container{ width:calc(50% - 12px); }
}

/* Asterisks out; one honest note in. Phone is the only optional field and its
   label already says so, so this wording covers the whole form (as on 2533). */
#wpforms-2573 .wpforms-field-container::before{
  content:"Fields marked * are required.";
  flex:0 0 100%;
  font-family:"Outfit",sans-serif; font-size:13.5px; line-height:1.4;
  color:#6B7280;
  margin:0 0 -4px;
}
/* small green asterisk on required fields; the span is aria-hidden in
   WPForms markup, so this is decoration -- the input keeps its required attr */
#wpforms-2573 .wpforms-required-label{
  display:inline !important;
  margin-left:1px;   /* WPForms' markup already puts a space before the span */
  color:var(--theme-palette-color-1);
  font-size:.9em; font-weight:700; line-height:1;
  vertical-align:baseline;
}

/* ---------- Labels + helper text ---------- */
#wpforms-2573 .wpforms-field-label{
  font-family:"Outfit",sans-serif; font-weight:600; font-size:15px;
  letter-spacing:-.005em; line-height:1.35;
  color:#1a1a1a; margin:0 0 7px;
}
#wpforms-2573 .wpforms-field-description{
  font-family:"Outfit",sans-serif; font-size:13.5px; line-height:1.5;
  color:#5F6B63; margin:0 0 9px;
}

/* ---------- Inputs ---------- */
#wpforms-2573 input[type="text"],
#wpforms-2573 input[type="email"],
#wpforms-2573 input[type="tel"],
#wpforms-2573 select,
#wpforms-2573 textarea{
  width:100%; max-width:100% !important;
  font-family:"Outfit",sans-serif; font-size:16px; color:#1F2A24;
  background:#fff;
  border:1px solid #D9E0DB;
  border-radius:10px;
  padding:13px 14px; line-height:1.5;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#wpforms-2573 input[type="text"]:hover,
#wpforms-2573 input[type="email"]:hover,
#wpforms-2573 textarea:hover{ border-color:#BFCCC4; }
#wpforms-2573 textarea{ min-height:164px; resize:vertical; }

/* Native select (kept as the fallback when snippet 85's JS is unavailable) */
#wpforms-2573 select{
  height:auto; min-height:48px; line-height:1.6;
  padding:12px 42px 12px 14px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6B63' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  background-color:#fff;
}
/* Snippet 85 swaps the select for .bizco-select -- keep the two identical.
   ID selector here beats snippet 85's .wpforms-container class rules. */
/* bizco-ctl-v1 dropdown (option A) */
#wpforms-2573 .bizco-select__trigger{
  font-family:"Outfit",sans-serif; font-size:16px; color:#1F2A24;
  background:#fff;
  border:1px solid #D9E0DB;
  border-radius:8px;
  height:48px !important;
  min-height:48px !important;
  padding:0 14px;
  line-height:1;
}
#wpforms-2573 .bizco-select__trigger:hover{ border-color:#BFCCC4; }
#wpforms-2573 .bizco-select.is-open .bizco-select__trigger,
#wpforms-2573 .bizco-select__trigger:focus-visible,
#wpforms-2573 .bizco-select.is-open .bizco-select__trigger{
  border-color:#0F5230;
  box-shadow:inset 0 0 0 1px #0F5230; outline:none;
}
#wpforms-2573 .bizco-select__label.is-placeholder{ color:#98A29B; }
/* Focus ring */
#wpforms-2573 input:focus,
#wpforms-2573 select:focus,
/* bizco-ctl-v1 field focus: crisp ring, no glow - same as every other
   field and dropdown on the site. */
#wpforms-2573 textarea:focus{
  border-color:#0F5230;
  box-shadow:inset 0 0 0 1px #0F5230; outline:none;
}
#wpforms-2573 ::placeholder{ color:#98A29B; opacity:1; }

/* ---------- Submit row ---------- */
#wpforms-2573 .wpforms-submit-container{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid #EEF2EF;
}

/* bizco-ctl-v1 primary: the same 48px / 8px box as every other submit on
   the site. Was a 54px pill with a green glow. */
#wpforms-2573 .wpforms-submit{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  font-family:"Outfit",sans-serif !important; font-weight:600 !important; font-size:16px !important;
  color:#fff !important; background:#0F9558 !important;
  line-height:1 !important;
  border:none !important; border-radius:8px !important;
  /* WPForms modern pins the button to --wpforms-button-size-height (41px) */
  height:48px !important; min-height:48px !important;
  padding:0 26px !important; cursor:pointer; white-space:nowrap;
  box-shadow:none;
  transition:background .15s ease;
}
#wpforms-2573 .wpforms-submit:hover{
  background:#0F5230 !important;
  transform:none;
  box-shadow:none;
}
#wpforms-2573 .wpforms-submit:active{ transform:none; }
#wpforms-2573 .wpforms-submit:focus-visible{
  outline:2px solid #0F9558; box-shadow:none;outline-offset:2px;}
/* bizco-ui-formring v1: no blue ring around Submit after a click (see the Contact Us block) */
#wpforms-2573 .wpforms-submit:focus::after{ display:none; }
/* bizco-ui-formspin v1: the spinner sits inside the button while the form sends (see the Contact Us block) */
#wpforms-2573 .wpforms-submit-spinner{ display:none !important; }
#wpforms-2573.wpforms-loading .wpforms-submit{
  color:transparent !important; font-size:0 !important; gap:0 !important; opacity:.55 !important;
  background:#0F9558 !important; cursor:default !important; text-shadow:none !important; transition:none !important; }
#wpforms-2573.wpforms-loading .wpforms-submit::before{
  content:attr(data-submit-text) !important; display:block !important; position:static !important;
  font-size:16px !important; visibility:hidden !important; filter:none !important; background:none !important; }
#wpforms-2573.wpforms-loading .wpforms-submit::after{
  content:"" !important; display:block !important; position:absolute !important; z-index:1 !important;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  width:18px !important; height:18px !important; margin:-9px 0 0 -9px !important; padding:0 !important;
  box-sizing:border-box !important; border-radius:50% !important;
  border:2.5px solid rgba(255,255,255,.42) !important; border-top-color:#fff !important;
  background:none !important; opacity:1 !important; animation:bizco-formspin .8s linear infinite !important; }

/* ---------- Validation + success ---------- */
#wpforms-2573 input.wpforms-error, #wpforms-2573 select.wpforms-error, #wpforms-2573 textarea.wpforms-error{ border-color:#D9E0DB !important; box-shadow:none !important; }
#wpforms-2573 label.wpforms-error{ color:#d63638; font-size:13px; margin-top:5px; }
#wpforms-2573 .wpforms-confirmation-container-full{
  background:#F3F7F4;
  border:1px solid #E4EAE6;
  border-left:4px solid var(--theme-palette-color-1);
  border-radius:12px; color:#1F2A24; padding:18px 20px;
  font-size:16px; line-height:1.55;
}

/* Supporting text sits directly under the label, above the input */
#wpforms-2573 .wpforms-field{ display:flex; flex-direction:column; }
#wpforms-2573 .wpforms-field > *{ order:3; }
#wpforms-2573 .wpforms-field-label{ order:1; }
#wpforms-2573 .wpforms-field-description{ order:2; }

/* ---------- Responsive ---------- */
/* Below 1040px there isn't room for a rail AND a comfortable two-up field
   row, so it collapses: the form leads, the rail becomes a footnote. */
@media (max-width:1039.98px){
  .page-id-2580 #post-2580 > .entry-content{
    grid-template-columns:minmax(0, 1fr);
    width:min(100% - 32px, 680px);
    gap:clamp(30px, 5vw, 44px);
  }
  #wpforms-2573{ grid-column:1; grid-row:1; }
  .bizco-fbx-aside{ grid-column:1; grid-row:2; padding-top:0; }
}
@media (max-width:600px){
  .page-id-2580 .hero-section{ padding:38px 20px 40px; }
  .page-id-2580 #post-2580 > .entry-content{ width:min(100% - 32px, 680px); }
  #wpforms-2573{ padding:22px 18px; border-radius:16px; }
  #wpforms-2573 .wpforms-submit{ width:100%; justify-content:center; }

}

/* == BIZCO Share Feedback :: END == */


/* ===== BIZCO Help Center — hero + resource grid (page 1003) ===== */

/* ---------- HERO: identical treatment to Contact Us (page 1876) ---------- */
.page-id-1003 .site-main > .ct-container-full{ padding-top:0 !important; }  /* hero flush to header */
.page-id-1003 .hero-section{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:44px;
  padding:40px 32px;
  border-radius:0;
  text-align:center;
  background-color:var(--theme-palette-color-1);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1.3px, transparent 1.6px),
    radial-gradient(90% 120% at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  background-size:22px 22px, 100% 100%;
  background-repeat:repeat, no-repeat;
}
.page-id-1003 .hero-section .entry-header{
  position:relative; z-index:1; margin:0; padding:0; border:none;
}
/* swap the visible title text: page is "Help Center", banner reads "How can we help?" */
.page-id-1003 .page-title{
  font-size:0 !important;
  line-height:0 !important;
  margin:0 !important;
}
.page-id-1003 .page-title::before{
  content:"How can we help?";
  display:block;
  color:#fff;
  font-weight:800;
  font-size:clamp(30px, 5vw, 46px);
  line-height:1.1;
  letter-spacing:-.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.18);
}
.page-id-1003 .hero-section .entry-header::after{   /* subtitle */
  content:"Find answers, report a problem, or get in touch.";
  display:block; max-width:660px; margin:14px auto 0;
  color:rgba(255,255,255,.92);
  font-size:clamp(15px, 2vw, 18px); line-height:1.6; font-weight:400;
}

/* ---------- RESOURCE GRID (reuses the home-page card language) ---------- */
.bizco-help{ padding-bottom:66px; }
.bizco-help-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  max-width:960px;
  margin:0 auto;
}
.bizco-help-card{
  display:flex;
  align-items:center;
  gap:20px;
  background:#fff;
  border:1px solid #E6EAE7;
  border-radius:16px;
  padding:28px 30px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bizco-help-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(25,42,61,.10);
  border-color:#C9E2D2;
}
.bizco-help-icon{
  flex:none;
  width:60px; height:60px;
  border-radius:14px;
  background:#0F5230;   /* bizco-tile1 v1: help (fix group TEST-TILE-1): was #EAF3EE / #1A7A4A */
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.bizco-help-icon svg{ width:30px; height:30px; }
.bizco-help-body{ display:block; flex:1 1 auto; min-width:0; }
.bizco-help-title{
  display:flex; align-items:center; gap:8px;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:clamp(18px, 1.4vw, 22px);
  color:#161A1C;
  line-height:1.25;
  margin:2px 0 6px;
}
.bizco-help-arrow{
  color:#1A7A4A;
  font-weight:700;
  transition:transform .16s ease;
}
.bizco-help-card:hover .bizco-help-arrow{ transform:translateX(4px); }
.bizco-help-sub{
  display:block;
  font-family:'Outfit',sans-serif;
  font-size:clamp(14px, 1vw, 16px);
  color:#5C6469;
  line-height:1.5;
}

/* ---------- SUPPORT CALLOUT ----------
   Restyled 2026-07-27: was a dotted mint panel; now mirrors the guest-home
   floating green CTA banner (.bizco-cta-green) -- same #0F9558 field, same
   two-layer float shadow, white type, white icon puck. Keep the green here
   in sync with --bizco-cta-bg in the bizco-cta-green block.
   -------------------------------------- */
.bizco-help-support{
  --bizco-support-bg:#0F9558;
  max-width:960px;
  margin:22px auto 0;
  display:flex; align-items:center; gap:18px;
  background:var(--bizco-support-bg);
  border:0;
  border-radius:16px;
  padding:24px 30px;
  box-shadow:0 4px 12px rgba(22,33,27,.14), 0 22px 48px rgba(22,33,27,.18);
}
.bizco-help-support-icon{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:#fff; color:var(--bizco-support-bg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.bizco-help-support-icon svg{ width:26px; height:26px; }
.bizco-help-support-text{
  font-family:'Outfit',sans-serif;
  font-size:clamp(15px, 1.1vw, 17px);
  color:#fff; line-height:1.55;
}
.bizco-help-support-text strong{ color:#fff; font-weight:700; }
.bizco-help-support-text a{
  color:#fff; font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  white-space:nowrap;
}
.bizco-help-support-text a:hover{ border-bottom-color:#fff; }

@media (max-width:720px){
  .bizco-help-grid{ grid-template-columns:1fr; }
  .bizco-help{ padding-bottom:46px; }
  .bizco-help-support{ flex-direction:column; text-align:center; gap:14px; }
}
@media (max-width:600px){
  .page-id-1003 #post-1003 > .entry-content{ padding:0 16px; }
  .page-id-1003 .hero-section{ padding:34px 20px; }
  .bizco-help-card{ padding:22px 22px; gap:16px; }
}

/* == Post-submit confirmation: center message in the form card (all 3 forms) == */
#wpforms-2533:has(.wpforms-confirmation-container-full),
#wpforms-2559:has(.wpforms-confirmation-container-full),
#wpforms-2573:has(.wpforms-confirmation-container-full){
  display:flex; align-items:center; justify-content:center; min-height:200px;
}
#wpforms-2533 .wpforms-confirmation-container-full,
#wpforms-2559 .wpforms-confirmation-container-full,
#wpforms-2573 .wpforms-confirmation-container-full{ margin:0 !important; width:100%; }

/* ===== BIZCO SRP pagination — match the PDP review paginator (.bizco-rv-pagination) ===== */
/* Blocksy renders search pagination as nav.ct-pagination > [a.prev] div.ct-hidden-sm(numbers) [a.next].
   Replicate the review pill: one bordered white box, plain number cells, green current. */
body.search-results nav.ct-pagination{
  display:flex !important;              /* block-level flex so margin-auto can center it */
  width:fit-content !important;
  max-width:100%;
  margin:28px auto 0 !important;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px 16px !important;
  border:1px solid #E0E0E0 !important;
  border-radius:12px !important;
  background:#FFFFFF !important;
}
/* numbers wrapper — keep it visible at every size (review paginator shows numbers on mobile too) */
body.search-results nav.ct-pagination .ct-hidden-sm{
  display:inline-flex !important;
  align-items:center;
  gap:4px;
}
/* individual cells — identical values to .bizco-rv-pagination a/span.page-numbers */
/* bizco-ctl-v1 selected state */
body.search-results nav.ct-pagination a.page-numbers,
body.search-results nav.ct-pagination span.page-numbers{
  min-width:36px; height:36px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:none; border-radius:999px;
  color:#3F4A46; text-decoration:none; font-weight:600; font-size:.95rem;
  line-height:1; box-shadow:none;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
body.search-results nav.ct-pagination a.page-numbers:hover{ background:none; color:#0F5230; border-color:#0F5230; box-shadow:inset 0 0 0 1px #0F5230; }
body.search-results nav.ct-pagination .page-numbers.current{ background:#0F5230; color:#FFFFFF; border-color:#0F5230; }
body.search-results nav.ct-pagination .page-numbers.dots{ min-width:auto; padding:0 4px; color:#9CA3AF; background:none; }
/* prev / next: compact chevron pills (hide Blocksy's "Prev"/"Next" word, keep the arrow) */
body.search-results nav.ct-pagination a.prev.page-numbers,
body.search-results nav.ct-pagination a.next.page-numbers{
  font-size:0 !important;
  gap:0;
}
body.search-results nav.ct-pagination a.prev.page-numbers svg,
body.search-results nav.ct-pagination a.next.page-numbers svg{
  width:11px; height:11px;
}

/* ===== BIZCO review paginator — match SRP paginator (arrow SVG + no hover ring) ===== */
/* kill the instant green box-shadow ring on hover (Woo .woocommerce-pagination default) so the
   hover matches the SRP: smooth background+color fade only, no ring */
.bizco-rv-pagination a.page-numbers,
.bizco-rv-pagination span.page-numbers,
.bizco-rv-pagination a.page-numbers:hover,
.bizco-rv-pagination a.page-numbers:focus{
  box-shadow:none !important;
}
/* Blocksy chevron SVG (injected by snippet 44) sized to match the SRP arrows */
.bizco-rv-pagination a.prev.page-numbers svg,
.bizco-rv-pagination a.next.page-numbers svg{
  width:11px; height:11px;
}

/* ============================================================
   CATEGORY PAGE MOBILE CARD — match the actions column to the
   "+ Add to My Inventory" button       bizco-cat-mobile-act-match v1
   Under 768px (one product per row) the category card capped
   price / qty / add-to-cart at 180px while the inventory button
   spanned the whole card capped at 300px, so the two groups had
   different widths AND shrank at different rates (different grid
   tracks). Fix: cap all four controls at the same 300px and place
   the inventory button in the SAME grid track as the actions
   column (column 2), so every control shares one right-aligned
   width and they all shrink together once that column narrows
   past 300px. Scoped to tax-product_cat only — shop/SRP use the
   unified vertical card and must keep their full-width button.
   Appended last so it wins the specificity tie with the v15
   mobile block and the mobile inventory-button rule.
   ============================================================ */
@media (max-width: 767px) {
  body.tax-product_cat ul.products li.product .price,
  body.tax-product_cat ul.products li.product .bizco-loop-cart,
  body.tax-product_cat ul.products li.product .bizco-loop-qty,
  body.tax-product_cat ul.products li.product .bizco-loop-add {
    max-width: 300px !important;
  }
  body.tax-product_cat ul.products li.product > .bizco-inventory-list-btn {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 300px !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }
}

/* bizco-cat-mobile-act-match v1 addendum — very narrow phones:
   under 360px the shared column can drop near 110px; at the base
   1rem / 20px padding the word "Inventory" no longer fits and
   breaks mid-word. Shrink the button type/padding so it wraps on
   word boundaries instead. */
@media (max-width: 360px) {
  body.tax-product_cat ul.products li.product > .bizco-inventory-list-btn {
    font-size: 0.85rem !important;
    padding: 10px 8px !important;
  }
}

/* ============================================================
   CATEGORY PAGE MOBILE CARD — v2 refinements
   bizco-cat-mobile-act-match v2
   1. Inventory button same HEIGHT as Add to cart: .9rem type
      (inherits the same 1.65 line-height) + 4px vertical padding;
      with its 2px border that lands on the add button's ~36px box.
      This also supersedes the v1 addendum's under-360px sizing.
   2. Bigger price: 24px, /Case suffix 19px (20px/15px under 360px
      so the nowrap price cannot overflow the narrow column).
   3. Actions stack pinned to the TOP of its row so the price top
      aligns with the image top (both offset 8px), and the figure
      now spans grid rows 2-4 so the inventory-button row hugs the
      stack (fixed gap under Add to cart) instead of being pushed
      down by the image row's height. figure rule excludes
      .product-category — subcategory tiles keep their subgrid.
   ============================================================ */
@media (max-width: 767px) {
  /* image spans the actions + button rows, top-aligned */
  body.tax-product_cat ul.products li.product:not(.product-category) > figure {
    grid-row: 2 / 4 !important;
    grid-column: 1 / 2 !important;
    align-self: start !important;
  }
  /* actions stack: top-aligned, 8px top margin to match the image */
  body.tax-product_cat ul.products li.product > .bizco-loop-pricerow {
    align-self: start !important;
    justify-content: flex-start !important;
    margin: 8px 0 8px 0 !important;
  }
  /* bigger price + suffix */
  body.tax-product_cat ul.products li.product .price {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  body.tax-product_cat ul.products li.product .price .bizco-loop-suffix {
    font-size: 19px !important;
  }
  /* inventory button: same box as Add to cart (~36px) */
  body.tax-product_cat ul.products li.product > .bizco-inventory-list-btn {
    font-size: .9rem !important;
    padding: 4px 12px !important;
  }
}
@media (max-width: 360px) {
  body.tax-product_cat ul.products li.product .price {
    font-size: 20px !important;
  }
  body.tax-product_cat ul.products li.product .price .bizco-loop-suffix {
    font-size: 15px !important;
  }
}

/* ============================================================
   CATEGORY PAGE MOBILE CARD — under 480px: full stack
   bizco-cat-mobile-act-match v3
   Single-column card: title / image (centered, fixed 136px — the
   420/375px shrink rules are overridden, no side column to make
   room for) / price / qty + Add-to-cart SHARING ONE ROW / full-
   width inventory button. The qty+add row is fluid: qty keeps a
   ~140px basis (can give up space down to 100px), add-to-cart
   flexes into the rest, both stretch to equal height. Price
   returns to 24px/19px here (overrides the v2 under-360 shrink —
   the full-width line has room). The li grid + figure re-placement
   carry :not(.product-category) so subcategory tiles keep their
   subgrid; the figure override also undoes v2's grid-row:2/4,
   which in a single column would collide with the price row.
   ============================================================ */
@media (max-width: 480px) {
  body.tax-product_cat ul.products li.product:not(.product-category) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "img"
      "act" !important;
  }
  body.tax-product_cat ul.products li.product:not(.product-category) > figure {
    grid-row: 2 / 3 !important;
    grid-column: 1 / 2 !important;
    justify-self: center !important;
    align-self: start !important;
    width: 136px !important;
    height: 136px !important;
    max-width: 136px !important;
    margin: 0 !important;
  }
  body.tax-product_cat ul.products li.product > .bizco-loop-pricerow {
    grid-row: 3 / 4 !important;
    grid-column: 1 / 2 !important;
    align-items: stretch !important;
    margin: 0 !important;
    max-width: none !important;
  }
  body.tax-product_cat ul.products li.product .price {
    width: 100% !important;
    max-width: none !important;
    font-size: 24px !important;
    text-align: center !important;
  }
  body.tax-product_cat ul.products li.product .price .bizco-loop-suffix {
    font-size: 19px !important;
  }
  /* qty + Add to cart on ONE fluid row, equal heights */
  body.tax-product_cat ul.products li.product .bizco-loop-cart {
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
  }
  body.tax-product_cat ul.products li.product .bizco-loop-qty {
    flex: 0 1 140px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 100px !important;
  }
  body.tax-product_cat ul.products li.product .bizco-loop-add {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    /* min-width:auto = never below the label width; nowrap so the
       qty selector (down to its 100px floor) absorbs the shrink
       instead of the label wrapping to two lines */
    min-width: auto !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }
  /* inventory button: full-width row 4 */
  body.tax-product_cat ul.products li.product > .bizco-inventory-list-btn {
    grid-column: 1 / 2 !important;
    grid-row: 4 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* ============================================================
   CATEGORY PAGE MOBILE CARD — v4: 481-767px image centering + size
   bizco-cat-mobile-act-match v4
   The right column is top-pinned independently (v2 pricerow
   align-self:start), so centering the image cannot move it. The
   figure spans grid rows 2-4; center it vertically in that span
   and enlarge 136 -> 172px. CEILING: the spanned height is exactly
   the actions stack (129.4) + 12 row-gap + button row (35.8) =
   177.2px — the figure plus its vertical margins must stay under
   that or the button row stretches and the inventory button drops.
   Hence vertical margins go to 0 (centering replaces them) and
   172px keeps ~5px slack. Range-scoped so the sub-481 v3 stack is
   untouched.
   ============================================================ */
@media (min-width: 481px) and (max-width: 767px) {
  body.tax-product_cat ul.products li.product:not(.product-category) > figure {
    align-self: center !important;
    width: 172px !important;
    height: 172px !important;
    max-width: 172px !important;
    margin: 0 8px 0 0 !important;
  }
}

/* === Transparent Pricing on tiny screens: tighter card + fluid type so rows keep one line === */
@media (max-width: 440px) {
    .bizco-transparent { padding: 14px; }
    .bizco-transparent-title { font-size: 1.25rem; margin-bottom: 12px; }
    .bizco-cost-box, .product-entry-wrapper > .bizco-cost-box { padding: 16px; }
    .bizco-cost-title { font-size: 1.1rem; }
    .bizco-cost-sub { font-size: clamp(12.5px, 4.3vw, 14px); margin-bottom: 12px; }
    .bizco-cost-row { gap: 8px; padding: 10px 0; }
    .bizco-cost-label { font-size: clamp(12px, 4.3vw, 14px); gap: 5px; min-width: 0; align-items: flex-start; }
    .bizco-cost-value { font-size: clamp(12px, 4.3vw, 14px); }
    .bizco-cost-final .bizco-cost-value { font-size: clamp(16px, 5.5vw, 18px); }
    .bizco-tip { flex-shrink: 0; margin-top: 2px; }
    .bizco-trend-title { font-size: 1.1rem; }
    .bizco-trend-sub { font-size: clamp(12.5px, 4.3vw, 14px); }
    .bizco-trend-box, .product-entry-wrapper + .bizco-trend-box { padding: 16px; }
}

/* Mega menu: uniform vertical spacing between stacked tiles. The tiles ship as mixed
   markup (bare wp-block-columns with 16px bottom margin vs group-wrapped with 24px,
   plus a tablet-only 4px top margin on some) which made stack gaps uneven. */
.header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > * {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
.header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > :last-child {
  margin-bottom: 0 !important;
}
.header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > * .wp-block-columns {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* empty leftover tile wrapper (Cutlery block): zero its box and cancel the preceding
   tile's 24px stack margin via collapsing (display:none would leave that margin, as the
   real tile is then no longer :last-child) */
.header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > .mega-tile:empty {
  height: 0;
  padding: 0 !important;
  margin-top: -24px !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   HOME TILES — CATEGORIES + POPULAR PRODUCTS (min 1000px) [BIZCO]
   bizco-home-tiles v4  (replaces bizco-cats-cards v3)
   One shared tile system for both sections: the IMAGE is the
   card -- a rounded (16px) full-bleed 4:3 photo tile with a
   faint edge, text hanging below it on the canvas, left-aligned.
   No boxes, no footer bars, no column dividers. Both sections
   sit on the same 5-column / 24px-gap grid so their columns
   align vertically (products keep their horizontal scroll for
   items 6+). Categories: name + inline green arrow under the
   tile. Products: name then price, with price rows bottom-
   aligned across the row (margin-top:auto). Hover on either:
   tile shadow + image zoom (zoom itself lives in
   bizco-pp-hover-zoom + rules here), text goes green.
   Below 1000px untouched: categories revert to circles
   (base rules + bizco-cats-mobile), products keep their
   existing mobile/tablet treatment.
   ============================================================ */
@media (min-width: 1000px) {

  /* -- shared grid -- */
  .bizco-cats { gap: 24px; }
  .bizco-pp-track { gap: 24px; }

  /* -- categories -- */
  .bizco-cat {
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 0;
  }
  .bizco-cat-circle {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    border: 1px solid #E9EDEA;
    background: #F1F5F2;
    transition: box-shadow .18s ease;
  }
  .bizco-cat-circle img {
    transition: transform .25s ease;
  }
  .bizco-cat:hover .bizco-cat-circle {
    transform: none;
    box-shadow: 0 8px 24px rgba(15, 40, 25, .10);
  }
  .bizco-cat:hover .bizco-cat-circle img {
    transform: scale(1.05);
  }
  .bizco-cat:focus-visible {
    outline: 2px solid #1A7A4A;
    outline-offset: 2px;
    border-radius: 16px;
  }
  .bizco-cat-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.3;
  }
  .bizco-cat-label::after {
    content: "\2192";
    color: #1A7A4A;
    transition: transform .18s ease;
  }
  .bizco-cat:hover .bizco-cat-label::after {
    transform: translateX(3px);
  }

  /* -- products: same tile anatomy, aligned to the grid -- */
  .bizco-pp-card {
    width: calc((100% - 96px) / 5);
    padding: 0;
    border-right: none;
    text-align: left;
    align-items: stretch;
  }
  .bizco-pp-card:hover {
    background: transparent;
  }
  .bizco-pp-imgwrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    border: 1px solid #E9EDEA;
    background: #F1F5F2;
    margin-bottom: 12px;
    transition: box-shadow .18s ease;
  }
  .bizco-pp-card:hover .bizco-pp-imgwrap {
    box-shadow: 0 8px 24px rgba(15, 40, 25, .10);
  }
  .bizco-pp-title {
    text-align: left;
    font-size: clamp(14px, 1vw, 15px);
    margin-bottom: 8px;
  }
  .bizco-pp-card:hover .bizco-pp-title {
    color: #0F5230;
  }
  .bizco-pp-price {
    text-align: left;
    margin-top: auto;
  }
  .bizco-pp-card:focus-visible {
    outline: 2px solid #1A7A4A;
    outline-offset: 2px;
    border-radius: 16px;
  }
}
/* ============================================================
   HOME SECTION HEADERS (Explore by category / Popular)  [BIZCO]
   bizco-section-headers v3
   Bold section headings (weight 700, slight negative tracking)
   with the section action (See all products) vertically centered
   on the same header row, which sits tight above its content.
   v2: subhead paragraphs removed again from page 1234 at the
   user's request -- p.bizco-sec-sub no longer exists.
   ============================================================ */
.bizco-cats-heading,
.bizco-popular h2.wp-block-heading {
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) {
  /* Theme layout rules zero the header rows' margins (computed mb was
     0 despite an 18px rule) -- padding survives them. 14px makes the
     visual gap under the categories heading match Popular products
     (measured 4px vs 18px glyph-bottom to card-top at 1600px; the
     popular gap comes from inside the .bizco-pp slider markup). */
  .bizco-popular > .wp-block-columns:has(.bizco-cats-heading) {
    padding-bottom: 14px;
  }
  .bizco-popular > .wp-block-columns:has(.bizco-shopall) {
    padding-bottom: 13px; /* tiles v4 removed the old 14px card padding; this re-matches the 18px categories gap */
  }
  /* Core ships .wp-block-columns{align-items:normal!important}, so an
     align-items on the ROW is inert here (it computed to "normal", which
     stretched the link column and left "See all products" sitting at its
     top edge -- 6px above the heading's centre at 1280px). Centre the
     link's own column instead: core only sets align-self via the
     .is-vertically-aligned-* classes, which this row doesn't carry. */
  .bizco-popular > .wp-block-columns:has(.bizco-shopall)
    > .wp-block-column:has(.bizco-shopall) {
    align-self: center;
  }
}

/* ============================================================
   HOME "POPULAR PRODUCTS" — HOVER IMAGE ZOOM           [BIZCO]
   bizco-pp-hover-zoom v1
   Hovering anywhere on a product card (the whole card is one
   a.bizco-pp-card) zooms its image slightly, matching the
   category-card hover effect. The imgwrap already clips via
   overflow:hidden + 12px radius. Scoped to real pointers so
   touch taps don't stick a zoomed state.
   ============================================================ */
@media (hover: hover) {
  .bizco-pp-imgwrap img {
    transition: transform .25s ease;
  }
  .bizco-pp-card:hover .bizco-pp-imgwrap img {
    transform: scale(1.05);
  }
}

/* ============================================================
   HOME PAGE UNIFICATION — PASS 1                        [BIZCO]
   bizco-home-unify v1
   Guest home consistency pass:
   1) ONE CANVAS: the body background (#FAFBFC) runs the whole
      page. Light-green dotted bands removed from the savings,
      membership-benefits and FAQ sections. Hero keeps its dots
      (per user, for now).
   2) HEADERS: one anatomy everywhere -- left-aligned, same
      scale/weight as the top sections. Centered benefits +
      transparent-pricing headers become left-aligned, their
      uppercase eyebrows are hidden, subheads use the standard
      muted size, 18px from header block to content.
   3) RHYTHM: every section starts clamp(48px, 7vw, 72px) after
      the previous one; stray bottom margins zeroed so gaps come
      from one side only.
   4) SAVINGS BANNER: with its band gone, the solid green card
      stretches to the shared content width on the canvas.
   ============================================================ */

/* -- 1. one canvas -- */
.bizco-savings,
.bizco-max-section,
.bizco-faq-section {
  background-color: transparent !important;
  background-image: none !important;
}

/* -- 2. header consistency -- */
.bizco-benefits-header,
.bizco-trans-header {
  text-align: left;
  max-width: none;
  margin: 0 0 18px;
}
.bizco-benefits-eyebrow,
.bizco-trans-eyebrow {
  display: none;
}
.bizco-benefits-title,
.bizco-trans-title {
  font-size: clamp(20px, 2vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  color: #1a1a1a;
  line-height: 1.2 !important;
  margin: 0 0 4px !important;
}
.bizco-benefits-sub,
.bizco-trans-sub {
  font-size: clamp(15px, 1.1vw, 17px);
  color: #5F6B63;
  line-height: 1.45;
}

/* -- 3. uniform section rhythm -- */
.bizco-cats { margin-bottom: 0; }
.bizco-pp { margin-bottom: 0 !important; }
.bizco-popular { margin-top: clamp(48px, 7vw, 72px) !important; }
.bizco-savings {
  margin-top: clamp(48px, 7vw, 72px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.bizco-savings-inner > p:empty { display: none; }
.bizco-cmp-section {
  padding-top: clamp(48px, 7vw, 72px) !important;
  padding-bottom: 0 !important;
}
.bizco-max-section {
  padding-top: clamp(48px, 7vw, 72px) !important;
  padding-bottom: 0 !important;
}
.bizco-trans-section {
  padding-top: clamp(48px, 7vw, 72px) !important;
  padding-bottom: 0 !important;
}
.bizco-faq-section {
  padding-top: clamp(48px, 7vw, 72px) !important;
  padding-bottom: clamp(48px, 7vw, 72px) !important;
}

/* -- 4. shared content width for inner wrappers -- */
.bizco-svb { max-width: none; }
.bizco-trans { max-width: none; }
.bizco-benefits-wrap { max-width: 90vw; }
.bizco-faq-section .wp-block-columns { max-width: 90vw !important; }

/* ============================================================
   HOME TILES — RESPONSIVE (below 1000px)                [BIZCO]
   bizco-home-tiles v5  (companion to v4; REPLACES the deleted
   bizco-cats-mobile v1 circle row)
   Below 1000px the categories KEEP the v4 tile formatting (user
   prefers it to the old circles) as a horizontal scroll row, and
   products adopt the identical tile anatomy at matching widths --
   both sections share tile width clamp(150px, 24vw, 240px) and a
   16px gap. Products under 768px still get their compact type
   sizes + edge-bar arrows from bizco-pp-mobile v4 (the !important
   rules below win over its card/imgwrap geometry because this
   block sits later in the file). Phone header parity: the
   categories title matches the Popular products mobile size and
   the same 14px gap below.
   ============================================================ */
@media (max-width: 999.98px) {
  /* categories: horizontal scroll row of tiles */
  .bizco-cats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bizco-cats::-webkit-scrollbar { display: none; }
  .bizco-cat {
    flex: 0 0 auto !important;
    width: clamp(150px, 24vw, 240px) !important;
    min-width: 0 !important;
    align-items: stretch !important;
    gap: 10px !important;
    scroll-snap-align: start;
  }
  .bizco-cat-circle {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
    border: 1px solid #E9EDEA;
    background: #F1F5F2;
    overflow: hidden;
  }
  .bizco-cat-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    text-align: left !important;
    font-size: clamp(12px, 1.8vw, 14px) !important;
    line-height: 1.3 !important;
  }
  .bizco-cat-label::after {
    content: "\2192";
    color: #1A7A4A;
  }

  /* products: same tile anatomy + width */
  .bizco-pp-track { gap: 16px; }
  .bizco-pp-card {
    width: clamp(150px, 24vw, 240px) !important;
    padding: 0 !important;
    border-right: none !important;
    text-align: left !important;
    align-items: stretch !important;
  }
  .bizco-pp-imgwrap {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
    border: 1px solid #E9EDEA !important;
    background: #F1F5F2 !important;
    margin-bottom: 10px !important;
  }
  .bizco-pp-title { text-align: left !important; }
  .bizco-pp-price { text-align: left !important; margin-top: auto !important; }
}

/* phone header parity: same title size + same gap as products */
@media (max-width: 767px) {
  /* .bizco-popular h2 (0,1,1) carries !important font-size; match specificity+ */
  .bizco-popular h2.bizco-cats-heading {
    font-size: clamp(15px, 4.4vw, 22px) !important;
    line-height: 1.2 !important;
  }
  .bizco-popular > .wp-block-columns:has(.bizco-cats-heading) {
    padding-bottom: 14px;
  }
}

/* ============================================================
   HOME CAROUSELS — POLISH                               [BIZCO]
   bizco-home-tiles v6
   1) Mobile edge-bar arrows lose their inner grey border.
   2) The bars' collapse (flex-basis/width to 0) is transitioned,
      and snippets 70/71 now hide a bar AT CLICK TIME when the
      step lands at a terminal position -- collapse + scroll play
      as one motion, so the row no longer jumps after landing.
   3) Categories (snippet 71) render the same carousel shell as
      products: .bizco-pp wrapper (.bizco-cats-nav) + arrow
      buttons + the row as .bizco-cats.bizco-pp-track. The row
      must fill the wrapper at every width.
   4) Below 1000px category tiles shrink further so more fit;
      names may wrap to two lines (label row is align-center so
      the arrow stays vertically centered on the name block).
   5) The scroll rows are horizontal-only: overflow-y hidden
      kills the stray vertical scrolling inside the carousel,
      and overscroll containment stops scroll chaining.
   ============================================================ */
.bizco-cats-nav .bizco-cats {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
.bizco-pp-track,
.bizco-cats {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
@media (min-width: 1000px) {
  .bizco-cats-nav .bizco-cats { cursor: default; }
}
@media (max-width: 999.98px) {
  .bizco-cat {
    width: clamp(112px, 21vw, 200px) !important;
  }
  .bizco-cat-label {
    font-size: clamp(12px, 1.7vw, 14px) !important;
  }
}
@media (max-width: 767px) {
  .bizco-pp-prev { border-right: none !important; }
  .bizco-pp-next { border-left: none !important; }
  .bizco-pp-arrow {
    transition: flex-basis .2s ease, width .2s ease, background .15s ease, color .15s ease;
  }
}

/* ============================================================
   HOME CAROUSELS — OVERLAY EDGE BARS (max 767px)        [BIZCO]
   bizco-home-tiles v7
   The in-flow edge bars (bizco-pp-mobile v4) changed the track's
   clientWidth when they collapsed; on the SHORT categories row
   that made the browser clamp scrollLeft mid-flight -> the jump
   the user saw when clicking the prev bar near the end. Fix:
   bars become opaque OVERLAYS (absolute, full height) that FADE
   via .bizco-hidden instead of collapsing -- track width never
   changes, so a jump is structurally impossible on both
   carousels. scroll-padding keeps snapped cards resting between
   the bars, while terminal positions still land flush (padding
   clamps at the scroll extremes). The snippets' click-time hide
   now just starts the fade early.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-pp-arrow {
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    width: 32px !important;
    flex: none !important;
    transform: none !important;
    z-index: 6;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    transition: opacity .2s ease, background .15s ease, color .15s ease;
  }
  .bizco-pp-prev { left: 0 !important; right: auto !important; }
  .bizco-pp-next { right: 0 !important; left: auto !important; }
  .bizco-pp-arrow.bizco-hidden {
    width: 32px !important;
    flex-basis: auto !important;
    min-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .bizco-pp-track,
  .bizco-cats {
    scroll-padding: 0 32px;
  }
}

/* ============================================================
   HOME CAROUSELS — EDGE BARS AT ALL WIDTHS              [BIZCO]
   bizco-home-tiles v8
   The floating circle arrows are retired for the two home
   carousels: the mobile full-height overlay bar (v7) is now the
   ONE arrow implementation at every width, same constraints --
   opaque white, borderless, overlay (never affects track width,
   so no jump), fades via .bizco-hidden, snap rests between bars
   via scroll-padding, terminal clicks fade the bar at click time
   (snippets 70/71). Also overrides the old max-780 rule that
   display:none'd the arrows in the 768-780 band. Categories at
   1000px+ have no overflow, so updateArrows keeps their bars
   faded out there.
   ============================================================ */
.bizco-pp-arrow {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  width: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
  z-index: 6;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #1A7A4A;
  box-shadow: none !important;
  cursor: pointer;
  transition: opacity .2s ease, background .15s ease, color .15s ease;
}
.bizco-pp-arrow:hover {
  background: #fff !important;
  color: #0F5230 !important;
  transform: none !important;
  box-shadow: none !important;
}
.bizco-pp-prev { left: 0 !important; right: auto !important; }
.bizco-pp-next { right: 0 !important; left: auto !important; }
.bizco-pp-arrow svg { width: 20px; height: 20px; }
.bizco-pp-arrow.bizco-hidden {
  opacity: 0;
  pointer-events: none;
}
.bizco-pp-track,
.bizco-cats {
  scroll-padding: 0 32px;
}

/* ============================================================
   HOME "SAME QUALITY / BETTER PRICING" — COMPARISON CARD v3 [BIZCO]
   bizco-cmp-v3  (replaces bizco-cmp-v2)
   Right side = ONE white container card (.bizco-cmp) holding the
   Traditional and BIZCO rows; the "Same quality products" line
   sits OUTSIDE the card, below it. Prices = tag-style callouts
   with darker outlines (trad #B8C2BB, BIZCO #5E9C7B + green
   check). Icons sized by --cmp-icon; arrows are longer/thicker
   44x16 SVGs sized by --cmp-ah height var.
   Layout bands (all static flow — only the tag notch is
   absolutely positioned — nothing can overlap):
   - .ge1240px: body row — chain left, price tag right
   - 560-1239px: body stacks — HORIZONTAL chain full width, tag
     below right (notch up); 560-999px adds compact sizes
     (38px icons, 30px arrows, 12.5px labels) so the horizontal
     chain survives far below the old break
   - .le559px: vertical chain, price = full-width receipt row
   ============================================================ */
.bizco-cmp{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#FFFFFF;
  border:1px solid #E4EAE6;
  border-radius:20px;
  padding:clamp(16px, 2vw, 28px);
  box-shadow:0 10px 30px rgba(22,26,28,.06);
}

.bizco-cmp-card{
  background:none !important;
  border:none !important;
  border-radius:0;
  padding:10px 4px 14px;
  position:static;
}
.bizco-cmp-trad{ border-bottom:1px solid #EDF1EE !important; }

.bizco-cmp-label{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#6B7280;
  margin-bottom:16px;
}
.bizco-cmp-label-green{ color:#1A7A4A; }

/* body row: chain + price tag */
.bizco-cmp-body{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2vw, 32px);
  padding:0 !important;
}
.bizco-cmp-chain{
  --cmp-icon:clamp(40px, 3.9vw, 68px);
  --cmp-ah:clamp(13px, 1.2vw, 22px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  flex:1;
  min-width:0;
}
.bizco-cmp-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:'Outfit',sans-serif;
  font-size:clamp(12px, 1.1vw, 16px) !important;
  font-weight:500;
  color:#2D2D2D;
}
.bizco-cmp-step svg{
  width:var(--cmp-icon) !important;
  height:var(--cmp-icon) !important;
  display:block;
}
.bizco-cmp-step span{ white-space:nowrap; }

/* SVG arrows between steps, centered on the icon row */
.bizco-cmp-arrow{
  color:#AEB6B0;
  flex:none;
  align-self:flex-start;
  margin-top:calc(var(--cmp-icon)/2 - var(--cmp-ah)/2);
}
.bizco-cmp-arrow svg{
  width:clamp(34px, 3.2vw, 60px);
  height:var(--cmp-ah);
  display:block;
}

/* BIZCO green connector: line + arrowhead, centered on the icons */
.bizco-cmp-longarrow{
  flex:1;
  height:4px;
  border-radius:2px;
  background:#1A7A4A;
  position:relative;
  align-self:flex-start;
  margin:calc(var(--cmp-icon)/2 - 2px) 18px 0 12px;
}
.bizco-cmp-longarrow::after{
  content:"";
  position:absolute;
  right:-3px;
  top:50%;
  transform:translateY(-50%);
  border-left:11px solid #1A7A4A;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-right:none;
}

/* price tag: callout with darker outline, left notch, soft shadow */
.bizco-cmp-price{
  position:relative;
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  background:#FFFFFF;
  border:1.5px solid #B8C2BB !important;
  border-radius:12px;
  padding:10px 16px 12px;
  box-shadow:0 4px 14px rgba(22,26,28,.10);
  transform:none;
  top:auto;
  right:auto;
}
.bizco-cmp-price::before{
  content:"";
  position:absolute;
  left:-6.5px;
  top:50%;
  width:11px;
  height:11px !important;
  background:#FFFFFF;
  border-left:1.5px solid #B8C2BB;
  border-bottom:1.5px solid #B8C2BB;
  border-radius:0 0 0 3px;
  transform:translateY(-50%) rotate(45deg);
}
.bizco-cmp-price-txt{ display:flex; flex-direction:column; }
.bizco-cmp-price-label{
  font-family:'Outfit',sans-serif;
  font-size:13px;
  color:#6B7280;
  margin-bottom:2px;
}
.bizco-cmp-price-val{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:clamp(20px, 2vw, 30px) !important;
  line-height:1;
  color:#161A1C;
}
.bizco-cmp-price-val span{
  font-size:clamp(12px, 1.2vw, 16px) !important;
  font-weight:600;
  color:#9AA0A4;
}
.bizco-cmp-price-check{ width:24px; height:24px; flex:none; }

/* green (BIZCO) tag */
.bizco-cmp-price-green{
  background:#F2F9F4;
  border-color:#5E9C7B !important;
  box-shadow:0 4px 14px rgba(26,122,74,.16);
}
.bizco-cmp-price-green::before{
  background:#F2F9F4;
  border-left-color:#5E9C7B;
  border-bottom-color:#5E9C7B;
}
.bizco-cmp-price-green .bizco-cmp-price-label{ color:#1A7A4A; }
.bizco-cmp-price-green .bizco-cmp-price-val{ color:#1A7A4A; }
.bizco-cmp-price-green .bizco-cmp-price-val span{ color:#5FA37D; }

/* quality line: OUTSIDE the card, below it */
.bizco-cmp-quality{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:0 8px;
  border:none;
  font-family:'Outfit',sans-serif;
  font-size:clamp(17px, 1.8vw, 24px);
  color:#6B7280;
}
.bizco-cmp-quality svg{ width:34px; height:34px; flex:none; }
.bizco-cmp-quality b{ color:#161A1C; font-weight:700; }

/* savings-calculator CTA under the intro copy (moved from the green banner) */
.bizco-cmp-cta-wrap{ margin:26px 0 0; }
/* matches .bizco-footer-banner__cta ("Start Your Free Trial") exactly */
.bizco-cmp-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#0F9558;
  color:#ffffff !important;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:16px;
  padding:15px 32px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(15,149,88,.25);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bizco-cmp-cta:hover{
  transform:translateY(-2px);
  background:#0F5230;
  color:#ffffff !important;
  box-shadow:0 4px 10px rgba(15,149,88,.3);
}
.bizco-cmp-cta-arrow{ transition:transform .15s ease; }
.bizco-cmp-cta:hover .bizco-cmp-cta-arrow{ transform:translateX(4px); }
@media (max-width:400px){
  .bizco-cmp-cta{ font-size:15px; padding:14px 22px; gap:8px; }
}
/* 481-781: the intro column becomes a horizontal row - CTA wraps to its own centered line */
@media (min-width:481px) and (max-width:781px){
  .wp-block-column:has(.bizco-cmp-rule){ flex-wrap:wrap !important; }
  /* keep heading | rule | sub on ONE line: basis 0 so the sub never wraps itself */
  .wp-block-column:has(.bizco-cmp-rule) .bizco-cmp-sub{ flex:1 1 0 !important; min-width:0; }
  .bizco-cmp-cta-wrap{ flex:0 0 100%; text-align:center; margin:14px 0 0; }
}
@media (max-width:480px){
  .bizco-cmp-cta-wrap{ margin:20px 0 0; }
}

/* -- 560-1239px: chain keeps the full card width, tag drops below -- */
@media (max-width:1239px) and (min-width:560px){
  .bizco-cmp .bizco-cmp-card .bizco-cmp-body{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-chain{ width:100%; }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price{ align-self:flex-end; }
  /* notch points up at the chain */
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price::before{
    left:auto;
    right:26px;
    top:-6.5px;
    transform:rotate(135deg);
  }
}

/* -- 560-999px: compact horizontal chain (stay horizontal!) -- */
@media (max-width: 999.98px) and (min-width: 560px){
  .bizco-cmp .bizco-cmp-card .bizco-cmp-chain{
    --cmp-icon:38px;
    --cmp-ah:11px;
    gap:6px;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-step{ font-size:12.5px !important; gap:6px; }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-arrow svg{ width:30px; }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-longarrow{ margin-left:10px; margin-right:14px; }
}

/* -- .le559px: vertical chain, price = full-width receipt row -- */
@media (max-width:559px){
  .bizco-cmp{ padding:16px; }
  .bizco-cmp .bizco-cmp-card{ padding:8px 2px 16px; }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-body{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:16px !important;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-chain{
    flex-direction:column !important;
    align-items:flex-start !important;
    align-self:center !important;
    justify-content:flex-start !important;
    gap:4px !important;
    flex:none !important;
    width:auto !important;
    max-width:100% !important;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-step{
    flex-direction:row !important;
    align-items:center !important;
    gap:12px !important;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-step svg{
    width:36px !important;
    height:36px !important;
    flex:none;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-step span{ font-size:15px !important; }
  /* arrows rotate to point down, under the icon column */
  .bizco-cmp .bizco-cmp-card .bizco-cmp-arrow{
    align-self:flex-start;
    margin:10px 0 10px 3px;
    transform:rotate(90deg);
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-arrow svg{ width:30px; height:11px; }
  /* green connector: vertical, arrowhead points down */
  .bizco-cmp .bizco-cmp-card .bizco-cmp-longarrow{
    flex:none !important;
    width:4px !important;
    height:30px !important;
    margin:2px 0 2px 16px !important;
    align-self:flex-start !important;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-longarrow::after{
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:-8px !important;
    transform:translateX(-50%) !important;
    border-left:6px solid transparent !important;
    border-right:6px solid transparent !important;
    border-top:10px solid #1A7A4A !important;
    border-bottom:none !important;
  }
  /* price: full-width receipt row — label left, price right */
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price{
    position:relative !important;
    transform:none !important;
    align-self:stretch !important;
    width:auto !important;
    box-sizing:border-box;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    padding:12px 16px !important;
    margin-top:2px;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price::before{ display:none !important; }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price-txt{
    flex:1;
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
  }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price-label{ font-size:13.5px !important; margin:0 !important; }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price-val{ font-size:22px !important; }
  .bizco-cmp .bizco-cmp-card .bizco-cmp-price-val span{ font-size:13px !important; }
  .bizco-cmp-quality{ font-size:16.5px; gap:10px; margin-top:14px; padding:0 4px; }
  .bizco-cmp-quality svg{ width:27px; height:27px; }
}

/* ============================================================
   HOME CATEGORY TILES — LARGER LABELS (min 1000px)      [BIZCO]
   bizco-home-tiles v9
   The category names + arrow were undersized relative to the
   big tiles on desktop. Scale label with viewport (16 -> 21px),
   arrow slightly larger than the text (em-based, so it tracks).
   Below 1000px the smaller v5/v6 sizes still apply unchanged.
   ============================================================ */
@media (min-width: 1000px) {
  .bizco-cat-label {
    font-size: clamp(16px, 1.35vw, 21px);
    gap: 10px;
  }
  .bizco-cat-label::after {
    font-size: 1.1em;
    line-height: 1;
  }
}

/* ============================================================
   HOME PRODUCT TILES — LARGER TYPE (min 1000px)         [BIZCO]
   bizco-home-tiles v10
   Product names + prices scale on desktop to match the bigger
   category labels (v9), staying a step below them so categories
   still read as the louder nav layer. Names stay clamped to 3
   lines (restated here so the clamp can't be lost to another
   rule); min-height reserves exactly 3 lines at the new size so
   every card's price row keeps its shared baseline.
   ============================================================ */
@media (min-width: 1000px) {
  .bizco-pp-title {
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 3);
    margin-bottom: 10px;
  }
  .bizco-pp-price {
    font-size: clamp(17px, 1.35vw, 22px);
  }
  .bizco-pp-label {
    font-size: clamp(12px, 1vw, 15px);
  }
}

/* ============================================================
   HOME TILES — CARDS + CONNECTED CAROUSEL               [BIZCO]
   bizco-tile-cards v1   (replaces the rejected bizco-tile-caption v1 mat)
   Two modes, one card anatomy:
   * CARD: white, radius 16, clipped -- the photo runs FULL BLEED
     to the card's top/left/right edges and is cut off with a
     SHARP bottom edge; the name/price sit directly beneath it
     inside the same card, so image and wording are one object.
   * CAROUSEL (strip): when a row scrolls behind < > arrows it
     becomes ONE connected component -- the wrapper carries the
     white surface + hairline + radius + clipping, cards sit
     flush (no gap) separated by hairline dividers, and the arrow
     bars live inside that same surface. Nothing floats.
   Products are always a carousel. Categories float as separate
   cards at >=1000px (all five fit, no arrows) and join into the
   connected strip below 1000px, which is exactly where their
   arrows appear.
   ============================================================ */

/* ---- shared card anatomy ---- */
.bizco-cat,
.bizco-pp-card {
  box-sizing: border-box;
  background: #fff;
  border: none;
  padding: 0;
  overflow: hidden;
}
.bizco-cat-circle,
.bizco-pp-imgwrap {
  width: 100%;
  border: none !important;
  border-radius: 0 !important;   /* sharp bottom edge, full bleed */
  margin-bottom: 0 !important;
  background: #F1F5F2;
}
.bizco-cat-label {
  padding: 12px 14px 14px;
}
.bizco-pp-title {
  padding: 12px 14px 0;
}
.bizco-pp-price {
  padding: 8px 14px 14px;
}

/* ---- carousel mode: one connected strip ---- */
.bizco-pp:not(.bizco-cats-nav) {
  background: #fff;
  border: 1px solid #E9EDEA;
  border-radius: 16px;
  overflow: hidden;
}
.bizco-pp:not(.bizco-cats-nav) .bizco-pp-track {
  gap: 0 !important;
}
.bizco-pp-card {
  border-right: 1px solid #EEF0EE;
}
.bizco-pp-card:last-child {
  border-right: none;
}

/* ---- floating mode: categories at >=1000px ---- */
@media (min-width: 1000px) {
  .bizco-cat {
    border: 1px solid #E9EDEA;
    border-radius: 16px;
  }
  .bizco-cats-nav {
    background: none;
    border: none;
    overflow: visible;
  }
  /* products strip: 5 flush columns fill the surface */
  .bizco-pp:not(.bizco-cats-nav) .bizco-pp-card {
    width: 20% !important;
  }
}

/* ---- categories join the strip below 1000px ---- */
@media (max-width: 999.98px) {
  .bizco-cats-nav {
    background: #fff;
    border: 1px solid #E9EDEA;
    border-radius: 14px;
    overflow: hidden;
  }
  .bizco-cats-nav .bizco-cats {
    gap: 0 !important;
  }
  .bizco-cat {
    border-right: 1px solid #EEF0EE;
    border-radius: 0;
  }
  .bizco-cat:last-child {
    border-right: none;
  }
  .bizco-cat-label {
    padding: 10px 12px 12px;
  }
  .bizco-pp-title { padding: 10px 12px 0; }
  .bizco-pp-price { padding: 6px 12px 12px; }
}

/* ============================================================
   HOME CAROUSEL ARROWS — BOLDER BARS                     [BIZCO]
   bizco-tile-arrows v1
   Kept from the reverted bizco-tile-cards v2: the edge bars were
   hard to see. Wider (44px), bigger heavier chevron, deeper
   green, and a soft shadow cast onto the adjacent content so the
   bar reads as a raised control. Applies to BOTH carousels via
   the shared classes; scroll-padding matches the bar width so
   snapped cards rest beside them.
   (The card spacing + centred price from v2 and the per-tile
   outlines from v3 were reverted at the user's request.)
   ============================================================ */
.bizco-pp-arrow {
  width: 44px !important;
  color: #0F5230;
}
.bizco-pp-arrow svg {
  width: 26px;
  height: 26px;
  stroke-width: 3;
}
.bizco-pp-prev {
  box-shadow: 12px 0 16px -8px rgba(16, 40, 26, .20) !important;
}
.bizco-pp-next {
  box-shadow: -12px 0 16px -8px rgba(16, 40, 26, .20) !important;
}
.bizco-pp-arrow:hover {
  color: #0F5230 !important;
}
.bizco-pp-arrow.bizco-hidden {
  box-shadow: none !important;
}
.bizco-pp-track,
.bizco-cats {
  scroll-padding: 0 44px;
}

/* ============================================================
   MEMBER BENEFITS TILES — guest home                   [BIZCO]
   bizco-mb v2
   Replaces the old 2-col .bizco-benefit list rows with a row of
   large centered tiles (illustrated icon + short title + one
   line of copy), per the reference design.

   Sizing is CONTAINER-relative (cqi = 1% of the tile's inline
   size) so the icon/type/padding keep the same proportions in
   every column count; media queries only change how many
   columns there are. Fallback clamps keep it sane if a browser
   ignores container queries.
   ============================================================ */
.bizco-mb{
  font-family:'Outfit',sans-serif;
}

/* -- header: matches the other section titles (bizco-home-unify v1),
      left-aligned, no subhead -- */
.bizco-mb-header{
  margin:0 0 18px;
}
.bizco-mb-title{
  font-family:'Outfit',sans-serif;
  font-weight:700 !important;
  font-size:clamp(20px, 2vw, 32px) !important;
  line-height:1.2 !important;
  letter-spacing:-.015em;
  color:#1a1a1a;
  margin:0 !important;
  text-wrap:balance;
}
.bizco-mb-logo{
  height:1.34em;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  /* The badge art is a parallelogram with a lot of padding around "MAX", so it
     has to run taller than cap height to read at the same weight as the text.
     Negative block margins shrink the MARGIN box (what vertical-align measures)
     back to ~.74em so the taller badge never grows the line box; `top` then
     lifts it off the x-height midpoint that vertical-align:middle lands on and
     onto the cap-height midpoint, which is where the text looks centred. */
  margin:-.3em .1em -.3em .08em;
  position:relative;
  top:-.1em;
}

/* -- grid -- */
.bizco-mb-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(10px, 1.05vw, 18px);
  align-items:stretch;
}

/* -- tile -- */
.bizco-mb-tile{
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border:1px solid #E4EAE6;
  border-radius:clamp(14px, 1.3vw, 20px);
  padding:clamp(18px,1.5vw,28px) clamp(10px,0.9vw,18px) clamp(20px,1.7vw,30px);
  box-shadow:0 1px 2px rgba(22,33,27,.04), 0 6px 18px rgba(22,33,27,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bizco-mb-tile:hover{
  transform:translateY(-3px);
  border-color:#CFE0D6;
  box-shadow:0 2px 4px rgba(22,33,27,.05), 0 14px 30px rgba(22,33,27,.09);
}

.bizco-mb-icon{
  display:block;
  width:clamp(56px, 52cqi, 122px);
  height:clamp(56px, 52cqi, 122px);
  color:#26382F;
  margin:0 0 clamp(10px, 6cqi, 20px);
  flex:none;
}

.bizco-mb-t{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:clamp(13px, 8.4cqi, 18.5px);
  line-height:1.22;
  letter-spacing:-.012em;
  color:#16211B;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:2.44em;
  margin:0 0 clamp(4px, 2.6cqi, 9px) !important;
}
.bizco-mb-s{
  font-family:'Outfit',sans-serif;
  font-weight:400;
  font-size:clamp(12.5px, 7cqi, 16px);
  line-height:1.42;
  color:#6A7873;
  margin:0 !important;
  max-width:24ch;
}

/* -- column count only -- */
@media (max-width:1239px){
  .bizco-mb-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .bizco-mb-icon{ width:clamp(60px, 45cqi, 148px); height:clamp(60px, 45cqi, 148px); }
  .bizco-mb-t{ font-size:clamp(15px, 5.8cqi, 21px); }
  .bizco-mb-s{ font-size:clamp(13.5px, 5cqi, 16.5px); }
  .bizco-mb-tile{ padding:clamp(18px,2vw,30px) clamp(14px,1.3vw,24px) clamp(20px,2.2vw,32px); }
  .bizco-mb-icon{ margin-bottom:clamp(10px, 4cqi, 22px); }
}
@media (max-width:719px){
  .bizco-mb-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .bizco-mb-icon{ width:clamp(58px, 48cqi, 130px); height:clamp(58px, 48cqi, 130px); }
  .bizco-mb-t{ font-size:clamp(13.5px, 7.6cqi, 20px); }
  .bizco-mb-s{ font-size:clamp(13px, 6.4cqi, 16px); }
  .bizco-mb-tile{ padding:clamp(14px,3vw,26px) clamp(10px,2.2vw,20px) clamp(16px,3.4vw,28px); }
}
@media (max-width:399px){
  .bizco-mb-grid{ gap:10px; }
  .bizco-mb-tile{ border-radius:14px; }
}

/* ============================================================
   HOME TILES — OVERLAID CATEGORY LABEL + COMPACT PRODUCTS [BIZCO]
   bizco-tile-compact v1
   1) The category name now OVERLAYS the bottom of its photo on
      an opaque white band (photo never shows through), with
      equal padding above and below the name, so each tile is
      only as tall as its 4:3 photo -- the whole section gets
      shorter. Name type drops accordingly. The card already
      clips, so the band's bottom corners follow the card radius.
   2) Product tiles are ~50% narrower so many more fit in the
      carousel (the SKU list on page 1234 grew to match).
   3) Product name/price/unit type scales down to suit the
      smaller tile; the 3-line clamp still holds because its
      reserved height is em-based.
   ============================================================ */

/* ---- 1. category label as an overlay band ---- */
.bizco-cat {
  position: relative;
}
.bizco-cat-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 7px 12px !important;   /* equal top/bottom */
  margin: 0;
  font-size: clamp(11px, 0.9vw, 14px) !important;
}
@media (max-width: 999.98px) {
  .bizco-cat-label {
    padding: 6px 10px !important;
    font-size: clamp(10px, 1.35vw, 12px) !important;
  }
  /* small tiles: a 4:3 photo leaves too little image behind a
     two-line overlay band, so go square below 1000px */
  .bizco-cat-circle {
    aspect-ratio: 1 / 1 !important;
  }
}

/* ---- 2. much smaller product tiles ---- */
@media (min-width: 1000px) {
  .bizco-pp:not(.bizco-cats-nav) .bizco-pp-card {
    width: 10% !important;
  }
}
@media (max-width: 999.98px) {
  .bizco-pp-card {
    width: clamp(88px, 12vw, 120px) !important;
  }
}

/* ---- 3. smaller product type ---- */
/* bizco-pp-type v2 (owner 2026-08-28): names a step larger on phones, and
   12px of top padding rather than 8 so the rating badge hanging below the
   photo clears the first line. Every 3-line box calc below adds the same
   12px, because box-sizing is border-box. */
.bizco-pp-title {
  font-size: clamp(11.5px, 0.9vw, 13px) !important;
  padding: 12px 9px 0 !important;
}
.bizco-pp-price {
  font-size: clamp(11px, 0.9vw, 14px) !important;
  padding: 5px 9px 9px !important;
}
.bizco-pp-label {
  font-size: clamp(9.5px, 0.7vw, 11px) !important;
}

/* ============================================================
   HOME HERO — VERTICAL PADDING -50%                     [BIZCO]
   bizco-hero-pad-half v1
   The guest-home hero's top/bottom whitespace came from TWO
   stacked paddings: the .bizco-hero section (1vh desktop /
   16px under 780px via bizco-hero-pad-mobile v1) and the
   .bizco-hero-inner column (2rem). Both are halved here so the
   total shrinks by 50% at every width. Horizontal padding and
   the dot pattern are untouched. Last in the file, so it beats
   both the base rules and bizco-hero-pad-mobile v1.
   ============================================================ */
.bizco-hero {
  padding-top: 0.5vh !important;
  padding-bottom: 0.5vh !important;
}
.bizco-hero-inner {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
@media (max-width: 780px) {
  .bizco-hero {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ============================================================
   HOME CATEGORY TILES — SIMPLIFIED                       [BIZCO]
   bizco-cat-simple v1   *** revert = delete this block ***
   The tile was carrying four separate devices: a photo, a card
   border, an opaque white band pasted over the photo, and a
   per-tile arrow. That reads as fussy at five-across.
   Simplified to ONE object: the photo IS the tile, with the name
   set in white over a soft bottom scrim. No border, no band, no
   arrow -- the scrim is part of the image, so nothing looks stuck
   on top of it, and the tile stays exactly as short as before.
   Strip mode (<1000px) keeps its hairline dividers, since with
   no gaps the photos would otherwise touch.
   ============================================================ */
.bizco-cat-label {
  background: linear-gradient(
      to top,
      rgba(12, 24, 17, .82) 0%,
      rgba(12, 24, 17, .55) 45%,
      rgba(12, 24, 17, 0) 100%) !important;
  color: #fff;
  padding: 26px 14px 12px !important;   /* tall fade, text sits low */
  font-weight: 600;
  letter-spacing: .005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: background .18s ease;
}
.bizco-cat-label::after {
  display: none;                        /* per-tile arrow removed */
}
.bizco-cat:hover .bizco-cat-label {
  background: linear-gradient(
      to top,
      rgba(12, 24, 17, .90) 0%,
      rgba(12, 24, 17, .62) 45%,
      rgba(12, 24, 17, 0) 100%) !important;
}
.bizco-cat:hover .bizco-cat-label,
.bizco-cat:hover {
  color: #fff;                          /* keep white, not the green text hover */
}
@media (min-width: 1000px) {
  .bizco-cat {
    border: none;                       /* photo needs no frame */
  }
  .bizco-cat-label {
    padding: 30px 16px 14px !important;
    font-size: clamp(13px, 1vw, 16px) !important;
  }
}
@media (max-width: 999.98px) {
  .bizco-cat-label {
    padding: 20px 10px 9px !important;
  }
}

/* ============================================================
   HOME CATEGORY TILES — SHORTER CROP                     [BIZCO]
   bizco-cat-shorter v2
   Same tile width, less height: the photo ratio goes 4:3 -> 16:9 -> 20:9 (v2: another 20% shorter)
   on desktop and 1:1 -> 4:3 on the small-screen strip. The images
   are object-fit:cover, so this crops off the top and bottom
   rather than squashing them. The scrim label is unaffected (it
   is anchored to the bottom edge), and its fade is trimmed a
   little so it stays proportional on the shorter tile.
   ============================================================ */
.bizco-cat-circle {
  aspect-ratio: 20 / 9 !important;
}
@media (min-width: 1000px) {
  .bizco-cat-label {
    padding: 20px 16px 11px !important;
  }
}
@media (max-width: 999.98px) {
  .bizco-cat-circle {
    aspect-ratio: 5 / 3 !important;
  }
  .bizco-cat-label {
    padding: 13px 10px 7px !important;
  }
}

/* ============================================================
   HOME — TIGHTER GAP BETWEEN THE TWO SHELVES             [BIZCO]
   bizco-shelf-gap v1
   Categories + Popular products are two shelves of ONE browsing
   block, so the space between them should be smaller than the
   space that separates that block from the next real section.
   The products group is the one carrying "See all products", so
   :has(.bizco-shopall) targets it without touching the category
   group's own top gap (which still separates the block from the
   hero) or any other section rhythm.
   ============================================================ */
.bizco-popular:has(.bizco-shopall) {
  margin-top: clamp(22px, 2.6vw, 34px) !important;
}

/* ============================================================
   HOME PRODUCTS — LARGER TYPE ON BIG SCREENS             [BIZCO]
   bizco-pp-type-up v2
   Names are now short (snippet 70 trims the " - 150/Case"
   suffix), so the tile can carry bigger type without wrapping
   into a wall. Scoped to >=1000px; the compact phone/tablet
   sizes from bizco-tile-compact v1 are left alone.
   ============================================================ */
@media (min-width: 1000px) {
  .bizco-pp-title {
    font-size: 13px !important;
  }
  .bizco-pp-price {
    font-size: 14px !important;
  }
  .bizco-pp-label {
    font-size: clamp(10px, 0.8vw, 12px) !important;
  }
}

/* Show the WHOLE product image: contain (never crop) on a white
   field, inset by padding so the shot is smaller and floats
   centred in its frame. Product photography is on white, so the
   surrounding field reads as part of the image. Category tiles
   keep object-fit:cover -- their crop is deliberate. */
.bizco-pp-imgwrap {
  background: #fff !important;
  padding: 8px 10px !important;
  box-sizing: border-box;
}
.bizco-pp-imgwrap img {
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 999.98px) {
  .bizco-pp-imgwrap {
    padding: 6px 7px !important;
  }
}

/* ============================================================
   HOME PRODUCTS — NO ELLIPSIS, CENTRED, ONE UNIT          [BIZCO]
   bizco-pp-unit v1
   1) No "..." : -webkit-line-clamp always renders an ellipsis, so
      the clamp is dropped for a plain block clipped to exactly
      three lines. Text still wraps on word boundaries, so the
      visible copy ends at the last whole word that fits and the
      fourth line is simply not drawn -- no dots eating space.
      min-height == max-height keeps every card's price on the
      same baseline.
   2) Name and price centred.
   3) Hover treats the card as ONE object: the photo's separate
      drop shadow is removed, so nothing frames the image apart
      from its text. Feedback is the photo zoom + the name turning
      green, both parts of the same unit responding together.
   ============================================================ */
.bizco-pp-title {
  display: block !important;
  -webkit-line-clamp: none !important;
  line-height: 1.35 !important;
  /* box-sizing is border-box, so the element's own 12px top padding
     must be added or the third line gets sliced in half. */
  min-height: calc(1.35em * 3 + 12px) !important;
  max-height: calc(1.35em * 3 + 12px) !important;
  overflow: hidden !important;
  text-align: center !important;
}
.bizco-pp-price {
  text-align: center !important;
}
.bizco-pp-card:hover .bizco-pp-imgwrap {
  box-shadow: none !important;
}

/* ============================================================
   GUEST HOME - MAX CTA CARD (green rhombus)               [BIZCO]
   bizco-guest-cta v2   (was bizco-guest-cta-band v1)
   v1 painted a full-bleed #e9ecef bar behind this card for one
   reason: a WHITE rhombus vanishes on the #FAFBFC canvas. The
   card is now deep green, so it carries its own contrast and the
   bar is gone - the home page is one continuous canvas again
   (see bizco-home-unify). The wrapper is kept for its flow-root
   (holds the banner's 28px margins) and full-bleed pair.

   !! EVERY rule below is scoped to .bizco-cta-green !!
   The sitewide FOOTER banner is a separate content block that
   must stay white - and it carries the IDENTICAL class list,
   INCLUDING the --guest modifier, so --guest is NOT a home-page
   hook (verified 2026-07-26: scoping to it turned the footer
   green too). .bizco-cta-green is added only in page 1234.
   Never scope this to --guest or to the bare class.

   The MAX mark is drawn in CSS (skewed box + text) instead of an
   <img>: sharp at every size, and its green can never drift from
   the card's green because both are declared here. The supplied
   PNGs were unusable - Inverted_Max.png is 80x37 into a 52px slot
   (~2.5x upscale) and MAX_Inverted_400.png uploaded as a 1x1.
   To go back to an image, swap .bizco-mark for the old <img
   class="bizco-footer-banner__brand"> in page 1234.
   ============================================================ */
.bizco-guest-cta-band {
  display: flow-root;
  background-color: transparent;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.bizco-cta-green {
  /* ---- ONE-LINE COLOUR SWITCH --------------------------------
     Change these two and the card, the MAX mark's letters and the
     shadow all follow. Tested options:
       #155F3A + #CFE6D8  darkest, white text 7.0:1   (v3 original)
       #1A7A4A + #FFFFFF  the MAX badge green, 5.4:1  (passes AA)
       #0F9558 + #FFFFFF  the CTA-button green, 3.8:1 (FAILS AA on
                          the 15px subtext; headline is large-text
                          so it still passes at 3:1)
     ------------------------------------------------------------ */
  --bizco-cta-bg: #0F9558;
  --bizco-cta-sub: #FFFFFF;

  background: var(--bizco-cta-bg) !important;
  box-shadow: 0 4px 12px rgba(22,33,27,.14), 0 22px 48px rgba(22,33,27,.18) !important;
}
.bizco-cta-green .bizco-footer-banner__text {
  color: #ffffff !important;
}
.bizco-cta-green .bizco-footer-banner__subtext {
  color: var(--bizco-cta-sub) !important;  /* beats the <=767 #4A5257 rule on specificity */
  opacity: 1 !important;
}
.bizco-cta-green .bizco-footer-banner__copy {
  border-left-color: rgba(255,255,255,.28) !important;
}

/* white MAX mark; letters use the card's own green */
.bizco-cta-green .bizco-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--bizco-cta-bg);
  font: 800 25px/1 'Outfit', sans-serif;
  letter-spacing: .01em;
  border-radius: 6px;
  padding: 13px 21px;
  transform: skewX(-13deg);                /* matches the wordmark's own slant */
  flex-shrink: 0;
}
.bizco-cta-green .bizco-mark span {
  display: block;
  transform: skewX(13deg);                 /* letters upright inside the slant */
}

/* the CTA is the other solid-white object; keep it the brightest */
.bizco-cta-green .bizco-footer-banner__cta {
  background: #ffffff !important;
  color: #14522F !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}
.bizco-cta-green .bizco-footer-banner__cta:hover {
  background: #F2F7F4 !important;
  color: #14522F !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
}

@media (max-width: 767px) {
  .bizco-cta-green .bizco-mark {
    font-size: 22px;
    padding: 11px 18px;
  }
}

/* ============================================================
   TRANSPARENT PRICING (guest home)                    [BIZCO]
   bizco-trans-split v4
   Markup comes from snippet 107 "BIZCO Home transparent pricing
   preview" ([bizco_price_preview]); this file only styles it.

   v4 DROPS the green dot field that used to sit behind the chart
   pane. Reasons: it was the only tinted surface left in the
   middle of the page (bizco-home-unify v1 deliberately put ~90%
   of the home page on ONE quiet canvas and killed dot patterns
   outside the hero), and a coloured half fought the chart, which
   now carries real gridlines and two data series and needs to be
   the loudest thing in the card. The two halves are separated by
   a hairline + whitespace instead, and the chart's PLOT AREA
   picks up the #FAFBFC canvas tint - the same "quiet panel inside
   a white card" relationship the PDP uses (#F5F6F8 boxes inside
   .bizco-transparent).

   The LEFT pane reuses the PDP classes (.bizco-cost-title/-sub/
   -rows/-row/-label/-value/-markup/-final/-amt and .bizco-tip) so
   it stays identical to the product page - EXCEPT .bizco-cost-box
   itself, which is display:none globally and only un-hidden
   inside .product-entry-wrapper.

   NOTE: no overflow:hidden on the panel - the .bizco-tip bubbles
   are absolutely positioned and would get clipped.
   ============================================================ */

.bizco-trans-title { max-width: 34ch; }

/* Two independent cards, not one card with a divider. The wrapper is
   layout only - the white surfaces belong to the panes. */
.bizco-trans-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bizco-trans-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --bizco-pane-pad: clamp(22px, 2.3vw, 32px);
  padding: var(--bizco-pane-pad);
  background: #fff;
  border: 1px solid #E4EAE6;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

/* Both panes are top-aligned so "See the full cost breakdown" and "Track
   changes over time" - and the subs beneath them - start on the same line.
   The cost pane used to be centred, which floated it out of alignment; the
   slack that created is taken up by the larger type below instead. */
.bizco-trans-pane { justify-content: flex-start; }
.bizco-trans-pane .bizco-cost-rows { display: flex; flex-direction: column; }
.bizco-trans-pane .bizco-cost-title { text-wrap: balance; }
/* Both subs share one size and one wrapping rule. They keep the full card
   width and only break when they genuinely must - the old max-width:46ch +
   text-wrap:balance pair was splitting sentences that nearly fit into two
   deliberately-even lines. `pretty` keeps a lone word off the last line. */
.bizco-trans-pane .bizco-cost-sub {
  max-width: none;
  text-wrap: pretty;
  margin-bottom: 18px;
}

/* The chart pane is the taller of the two, so the cost pane would otherwise
   sit in a pool of whitespace. Scale its rows up to fill that height. Scoped
   to .bizco-trans-pane-cost so the PDP's own cost box is untouched, and to
   >=561px so the <=440px mobile shrink further down still wins on phones. */
@media (min-width: 561px) {
  /* 2026-08-22: the rows no longer stretch. Spreading them across whatever
     height the chart dictated is what stopped the three figures reading as a
     receipt - 88px between one line's text and the next at a 1293px section.
     With these two rules gone they fall back to post 89's base 11px rhythm,
     which is exactly what the product page uses, and the CHART becomes the
     elastic half of the pair (see .bizco-tchart-wrap below). */
  .bizco-trans-pane-cost .bizco-cost-label,
  .bizco-trans-pane-cost .bizco-cost-value { font-size: 1.25rem; }
  .bizco-trans-pane-cost .bizco-cost-final .bizco-cost-value { font-size: 1.7rem; }
  .bizco-trans-pane-cost .bizco-cost-label { gap: 9px; }
  .bizco-trans-pane-cost .bizco-tip {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }
}

/* ---- the server-rendered replica of the PDP price/markup chart ---- */
/* No max-width: the svg fills its card, which is the whole point of giving
   the chart its own container. */
.bizco-tchart-wrap {
  position: relative;
  margin: auto 0;   /* centre the chart in whatever height the receipt sets */
}
.bizco-tchart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.bizco-tchart text { font-family: 'Outfit', sans-serif; }
/* sizes are viewBox units, so they shrink with the svg - see the ramp below */
.bizco-tchart-tick { font-size: 15px; fill: #6B7280; }
.bizco-tchart-axis { font-size: 15px; font-weight: 600; fill: #2D2D2D; }

/* the key sits with the chart it describes, directly above the plot */
.bizco-tchart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #2D2D2D;
}
.bizco-tchart-key-item { display: inline-flex; align-items: center; gap: 7px; }
.bizco-tchart-key-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }

/* Wide screens: float the key INSIDE the plot's bottom-right, which is dead
   space at every point in the current series. The insets mirror the svg's own
   padding (R = 78/780 = 10% of the width, B = 14/250 = 5.6% of the height) so
   the box lands just inside the plot frame however the svg is scaled.
   It stacks vertically to stay narrow (~17% of the plot) and clear of the
   06/01 trough at ~53% across, and it carries a translucent backing plate:
   this is LIVE data, so a corner that is empty today may not be in a month,
   and the plate keeps the key readable if a line ever runs under it. */
/* 1300px, not the 901px column breakpoint: the key box is a fixed ~116x68
   and the svg keeps shrinking with the card, so below ~1300 the box grows past
   too large a share of the plot height and starts covering points (measured
   with the final box: 53px clear at 1900, 32px at 1600, 18px at the 1400
   gate, then collisions below). Under 1400 it goes back in flow beneath the
   chart.
   A single-row layout was tried and is worse - it is wide enough to reach the
   06/01 trough at ~53% across. */
@media (min-width: 1400px) {
  .bizco-tchart-key {
    position: absolute;
    right: calc(10% + 10px);
    bottom: calc(5.6% + 10px);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #EEF1EF;
    border-radius: 9px;
    font-size: 12.5px;
  }
}

/* PDP tooltips are tap-toggled by snippet 29's JS, which does not
   run on the home page - :focus covers touch there */
.bizco-tip:focus::after { opacity: 1; visibility: visible; }
/* The icons sit close to the viewport edge here, so the default 270px
   centred bubble runs off the left of #main-container (which is
   overflow:clip). Anchor it to the icon instead - same fix the
   <=880.98px media query already applies on the PDP. */
.bizco-trans-pane .bizco-tip::after {
  left: -6px;
  transform: none;
  max-width: calc(100vw - 48px);
}

/* Below ~900px two columns of cost rows get cramped and the chart loses
   the width its axis labels need, so the two cards stack. */
@media (max-width: 900px) {
  .bizco-trans-panel { grid-template-columns: 1fr; }
  .bizco-tchart-wrap { margin-top: 12px; }
}

/* SVG text scales WITH the viewBox, so on a narrow card the 780-unit chart
   renders its type far smaller than the declared px. These bumps are in
   viewBox units, sized so the rendered text lands back at ~11-13px. */
@media (max-width: 700px) {
  .bizco-tchart-tick { font-size: 21px; }
  .bizco-tchart-axistitle { font-size: 21px; }
}
@media (max-width: 520px) {
  .bizco-tchart-tick { font-size: 29px; }
  .bizco-tchart-axistitle { display: none; }
}

/* ============================================================
   HOME PRODUCTS — ROUNDED PHOTOS + BIGGER PRICE          [BIZCO]
   bizco-pp-polish v1
   Rounding an object-fit:contain image does NOT round the actual
   picture: the <img> box stays the full frame and a letterboxed
   photo's edges sit inside it, so the radius clips empty space.
   Fix: the frame becomes a flex centring box and the <img> is
   auto-sized (max-width/height 100%), so the element hugs the
   picture exactly -- then the radius lands on the photo's real
   corners, which is what softens the shots that aren't on white.
   ============================================================ */
.bizco-pp-imgwrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.bizco-pp-imgwrap img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 10px !important;
}
@media (min-width: 1000px) {
  .bizco-pp-price {
    font-size: 17px !important;
  }
}

/* ============================================================
   HOME PRODUCTS — BREATHING ROOM + GREEN NAMES           [BIZCO]
   bizco-pp-final v1
   1) A little vertical padding inside the carousel so the top of
      the photos and the bottom of the prices aren't flush against
      the container edge. (Side padding stays 0 so the first card
      still starts flush with the section's left edge.)
   2) Product names sit in BIZCO green and deepen to the dark
      green on hover -- names only; prices and category labels are
      untouched.
   ============================================================ */
.bizco-pp:not(.bizco-cats-nav) .bizco-pp-track {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
@media (max-width: 999.98px) {
  .bizco-pp:not(.bizco-cats-nav) .bizco-pp-track {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}
.bizco-pp-title {
  color: #1A7A4A !important;
}
.bizco-pp-card:hover .bizco-pp-title {
  color: #0F5230 !important;
}

/* ============================================================
   GUEST HOME - GAP BETWEEN THE BENEFIT TILES AND THE MAX CTA
   bizco-mb-cta-gap v1
   The tiles sat 88px above the green rhombus (60px from
   .bizco-benefits-wrap's legacy margin-bottom + the banner's own
   28px), which read as a section break rather than the tail of
   one section. It now uses the SAME token as the categories ->
   popular-products gap (bizco-shelf-gap v1): the CTA is the
   closing move of the MAX block, not a new section.
   Scoped to .bizco-mb-wrap / .bizco-cta-green, both of which
   exist only on page 1234 - .bizco-footer-banner's 28px margin
   is shared with the SITEWIDE FOOTER banner and must stay put.
   Must sit AFTER the max-width:767px .bizco-footer-banner rule
   (margin: 28px auto !important) to win the cascade there.
   ============================================================ */
.bizco-mb-wrap {
  margin-bottom: 0 !important;
}
.bizco-cta-green {
  margin-top: clamp(22px, 2.6vw, 34px) !important;
}

/* ============================================================
   HOME FAQ — QUESTION / ANSWER FORMATTING               [BIZCO]
   bizco-faq-refine v1
   The answers were reading as loose fragments: indented 26px off
   the question they belong to, set in the same near-black as the
   question, and running ~95 characters per line. The rows were
   also cramped (7px of padding around a 24px question) while the
   gaps BETWEEN accordions came from block spacing, so the rules
   sat closer to the question above them than below.

   This block supersedes the earlier ad-hoc FAQ rules further up
   the file (the 24px title, the 26px panel indent, the 18px
   answer, the 1.5px #D9DDD9 rule and the hover 90deg icon spin).
   Those are left in place but are fully overridden here.

   What changes:
   1) Answer is flush with its question, muted (#5F6B63) and
      capped at a 68ch measure -- it now reads as the reply to the
      line above rather than a second heading.
   2) Question drops 24px -> clamp(17px, 1.3vw, 20px) so five of
      them stop competing with the section h2.
   3) One rhythm: 20px above/below every question, 10px from an
      open question to its answer, 24px from the answer to the
      rule. Block spacing between accordions is zeroed.
   4) The +/- control is drawn (two bars in a circular token)
      instead of relying on core's rotate(45deg), which turned the
      "+" into an "x" -- an x reads as dismiss, not collapse.
   5) The "View All FAQs" button sits under the heading instead of
      being pushed to the bottom of a mostly empty column.
   ============================================================ */

.bizco-faq-section {
  --faq-q: clamp(17px, 1.3vw, 20px);
  --faq-icon: 30px;
  --faq-gap: clamp(16px, 2vw, 32px);
  --faq-rule: #E4EAE6;
  --faq-ink: #1A1A1A;
  --faq-muted: #5F6B63;
  --faq-green: #1A7A4A;
}

/* -- 1. left column: heading + CTA read as one header block -- */
.bizco-faq-section .wp-block-columns.bizco-faq-inner {
  column-gap: clamp(32px, 4vw, 80px);
}
.bizco-faq-section .wp-block-column:has(.bizco-faq-btn) {
  justify-content: flex-start;
}
.bizco-faq-section .wp-block-column:has(.bizco-faq-btn) .wp-block-buttons {
  margin-top: 28px;
}

/* -- 2. the list owns its own rhythm -- */
.bizco-faq-section .wp-block-accordion {
  margin-block: 0 !important;
}
.bizco-faq-section .wp-block-accordion-heading {
  margin: 0 !important;
}
.bizco-faq-section .wp-block-accordion-item,
.bizco-faq-section [class*="accordion-item"] {
  border-bottom: 1px solid var(--faq-rule);
}
.bizco-faq-section .wp-block-accordion:first-of-type .wp-block-accordion-item {
  border-top: 1px solid var(--faq-rule);
}

/* -- 3. the question row -- */
.bizco-faq-section .wp-block-accordion-heading__toggle {
  align-items: flex-start !important;
  gap: var(--faq-gap);
  padding: 20px 0 !important;
  transition: padding-bottom .25s ease;
}
.bizco-faq-section .wp-block-accordion-heading__toggle-title {
  font-size: var(--faq-q) !important;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--faq-ink);
}
.bizco-faq-section .wp-block-accordion-heading__toggle:focus-visible {
  outline: 2px solid var(--faq-green);
  outline-offset: 4px;
  border-radius: 6px;
}

/* -- 4. drawn +/- token, optically centred on the first line -- */
.bizco-faq-section .wp-block-accordion-heading__toggle-icon {
  position: relative;
  flex: none;
  width: var(--faq-icon) !important;
  height: var(--faq-icon) !important;
  margin-top: calc(var(--faq-q) * 0.7 - var(--faq-icon) / 2);
  border: 1px solid #E0E7E2;
  border-radius: 50%;
  background: #fff;
  color: var(--faq-muted);
  font-size: 0 !important;              /* hides the literal "+" glyph */
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* core rotates the glyph 45deg when open and an older rule spun it
   90deg on hover; both are cancelled -- the bars do the work now */
.bizco-faq-section .wp-block-accordion-heading__toggle-icon,
.bizco-faq-section .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
.bizco-faq-section .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  transform: none !important;
}
.bizco-faq-section .wp-block-accordion-heading__toggle-icon::before,
.bizco-faq-section .wp-block-accordion-heading__toggle-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.bizco-faq-section .wp-block-accordion-heading__toggle-icon::before {
  top: 50%;
  left: 9px;
  right: 9px;
  height: 1.6px;
  transform: translateY(-50%);
}
.bizco-faq-section .wp-block-accordion-heading__toggle-icon::after {
  left: 50%;
  top: 9px;
  bottom: 9px;
  width: 1.6px;
  transform: translateX(-50%);
  transition: transform .25s ease, opacity .2s ease;
}
.bizco-faq-section .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
  /* bizco-tile1 v1: faq-hover (fix group TEST-TILE-1): outlined, not tinted (was #BFD8C7 / #F2F8F4 / --faq-green) */
  border-color: #0F5230;
  background: #fff;
  color: #0F5230;
}
.bizco-faq-section .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
  /* bizco-tile1 v1: faq-open (fix group TEST-TILE-1): was #C6E0D0 / #EAF4EE / --faq-green */
  border-color: #0F5230;
  background: #0F5230;
  color: #fff;
}
/* open: the vertical bar collapses, leaving a minus */
.bizco-faq-section .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* -- 5. the answer -- */
.bizco-faq-section .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
  padding-bottom: 10px !important;
}
.bizco-faq-section .wp-block-accordion-panel {
  padding: 0 calc(var(--faq-icon) + var(--faq-gap)) 24px 0 !important;
}
/* A CLOSED answer is not removed from the page: core marks it
   hidden="until-found" so the browser's own Find can still reach the
   words inside it and open the row. The browser draws none of it but
   still lays out its box, so the padding above kept a dead 24px (20px
   on a phone) strip under every closed question and the question sat
   high in its own row. Give the closed answer no bottom padding; an
   open one (the attribute is removed) keeps it. bizco-faq-evenrow v1,
   fix group TEST-FAQ-1, 2026-09-18. */
.bizco-faq-section .wp-block-accordion-panel[hidden] {
  padding-bottom: 0 !important;
}
.bizco-faq-section .wp-block-accordion-panel p,
.bizco-faq-section .wp-block-accordion-panel .wp-block-paragraph {
  margin: 0 !important;
  max-width: min(68ch, 100%);
  font-size: clamp(15.5px, 1.05vw, 17px) !important;
  line-height: 1.65 !important;
  color: var(--faq-muted) !important;
}
.bizco-faq-section .wp-block-accordion-panel p + p {
  margin-top: 12px !important;
}

@media (prefers-reduced-motion: no-preference) {
  .bizco-faq-section .wp-block-accordion-item.is-open > .wp-block-accordion-panel {
    animation: bizcoFaqReveal .28s ease both;
  }
}
@keyframes bizcoFaqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* -- 6. close the 768-781px gap --------------------------------
   The columns stack at 781px (Gutenberg) but bizco-faq-mobile v1
   only reorders below 768px, so in that 14px band the "View All
   FAQs" button was stranded between the heading and the FAQs.
   Same flatten + reorder, raised to the real stacking point.  */
@media (max-width: 781px) {
  .bizco-faq-section .bizco-faq-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column {
    display: contents !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column > h2 {
    order: 0 !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column > .wp-block-accordion {
    order: 1 !important;
  }
  .bizco-faq-section .bizco-faq-inner > .wp-block-column > .wp-block-buttons {
    order: 2 !important;
    margin-top: 34px !important;
  }
}

/* -- 7. phones -- */
@media (max-width: 767px) {
  .bizco-faq-section {
    --faq-icon: 26px;
    --faq-gap: 14px;
  }
  .bizco-faq-section .wp-block-accordion-heading__toggle {
    padding: 17px 0 !important;
  }
  .bizco-faq-section .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
    padding-bottom: 8px !important;
  }
  .bizco-faq-section .wp-block-accordion-panel {
    padding-bottom: 20px !important;
  }
  .bizco-faq-section .wp-block-accordion-heading__toggle-icon::before {
    left: 8px;
    right: 8px;
  }
  .bizco-faq-section .wp-block-accordion-heading__toggle-icon::after {
    top: 8px;
    bottom: 8px;
  }
}

/* ====
   MEGA MENU - calmer scale (bizco-megamenu-scale v1, 2026-07-26)
   The desktop panels read as oversized: 24px tile labels, 28px section
   titles, 100px thumbnails and 24px rhythm inside a 1728px-wide panel,
   which produced a 488px-tall sheet for only 3-7 links. This block
   rescales type, thumbnails and vertical rhythm at every width. It wins
   over the earlier !important rules by sitting later in the file at
   equal-or-higher specificity. Delete this whole block to revert.
   ==== */

/* tile label - was clamp(16px .. 24px) */
.mega-tile h5.wp-block-heading,
.mega-tile h5.wp-block-heading a {
  font-size: clamp(15px, 12.25px + 0.275cqw, 17px) !important;
  line-height: 1.35 !important;
}

/* vertical rhythm: panel padding, divider, tile stack, image-to-label gap */
.header-menu-1 .sub-menu > li.menu-item:has(> .entry-content) {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.header-menu-1 .sub-menu hr.wp-block-separator {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}
.header-menu-1 .sub-menu .mega-tile.wp-block-columns,
.header-menu-1 .sub-menu .mega-tile .wp-block-columns {
  column-gap: 16px !important;
}
.header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > * {
  margin-bottom: 14px !important;
}
.header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > :last-child {
  margin-bottom: 0 !important;
}
/* keep the empty-tile collapse in step with the new 14px stack gap */
.header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > .mega-tile:empty {
  margin-top: -14px !important;
}

/* Desktop (>=1001px) */
@media (min-width: 1000px) {
  /* section title - was clamp(22.4px .. 28px) */
  .header-menu-1 .sub-menu .mega-menu-title-row h4 {
    font-size: clamp(18px, 14.6px + 0.31cqw, 20px) !important;
  }
  /* thumbnails - was clamp(70px .. 100px). Shallow slope on purpose: a steeper
     one bottomed out at the floor by ~1440px, so mid-desktop lost more than the
     wide end did. 52px at 1100 -> 56px at 1440 -> 64px at 1920. */
  .header-menu-1 .sub-menu .mega-tile img,
  .header-menu-1 .sub-menu .mega-tile figure img {
    width: clamp(52px, 32px + 1.85cqw, 64px) !important;
  }
}

/* Tablet band (768-1000px): matching step down from 19/26/56 */
@media (min-width: 768px) and (max-width: 999.98px) {
  .header-menu-1 .sub-menu .mega-tile .wp-block-heading,
  .header-menu-1 .sub-menu .mega-tile .wp-block-heading a {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  .header-menu-1 .sub-menu .mega-menu-title-row h4 {
    font-size: 20px !important;
  }
  .header-menu-1 .sub-menu .mega-tile img,
  .header-menu-1 .sub-menu figure img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
  .header-menu-1 .sub-menu .mega-tile .wp-block-column:first-child {
    flex-basis: 52px !important;
  }
  .header-menu-1 .sub-menu > li.menu-item:has(> .entry-content) {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .header-menu-1 .sub-menu hr.wp-block-separator {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
}
/* end bizco-megamenu-scale v1 */

/* ============================================================
   HOME FAQ — "VIEW ALL FAQs" BUTTON VISIBILITY          [BIZCO]
   bizco-faq-cta v1  (companion to bizco-faq-refine v1)
   At rest the pill was white fill + a 1px #CFE3D6 border on the
   #FAFBFC canvas -- roughly 1.1:1 against its background, so the
   button effectively disappeared until hovered.

   It becomes a proper secondary button: the border now carries
   the brand green it already used for its label, which reads at
   ~5.2:1 against the canvas. Outline-at-rest / solid-on-hover
   also keeps it correctly subordinate to the solid green
   "Start Your Free Trial" CTA in the MAX banner above -- this is
   navigation, not a conversion moment.
   ============================================================ */

.bizco-faq-section .bizco-faq-btn a,
.bizco-faq-section .bizco-faq-btn .wp-block-button__link {
  border: 1.5px solid var(--faq-green) !important;
  color: var(--faq-green) !important;
  background: #fff !important;
  transition: background .15s ease, color .15s ease,
              transform .15s ease, box-shadow .15s ease;
}
.bizco-faq-section .bizco-faq-btn a:hover,
.bizco-faq-section .bizco-faq-btn .wp-block-button__link:hover {
  background: var(--faq-green) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(26, 122, 74, .22);
}
.bizco-faq-section .bizco-faq-btn a:focus-visible {
  outline: 2px solid var(--faq-green);
  outline-offset: 3px;
}

/* ============================================================
   HOME CAROUSEL ARROWS — NARROWER ON SMALL SCREENS      [BIZCO]
   bizco-tile-arrows v2
   The 44px edge bars (v1) read well beside the wide desktop
   tiles, but below 1000px the tiles shrink to
   clamp(112px, 21vw, 200px) and a fixed 44px bar swallowed up to
   ~40% of a tile. The bar now scales with the viewport
   (26px at 390 -> 33px at 500 -> 36px cap) and the chevron with
   it; scroll-padding tracks the same value so snapped tiles
   still rest beside the bars. 1000px+ is untouched (44px).

   Also: the tracks get the wrapper's own radius. The bars are
   opaque overlays sitting on top of the scrolled tiles, and the
   strip wrapper clips with border-radius; when the browser
   composites the scroller, that ancestor rounded clip can miss
   by a sub-pixel and the tile photo bleeds through at the top
   and bottom corners beside the bar (what the user saw on the
   categories strip). Giving the SCROLLER its own matching
   radius makes it clip its own children, so nothing can show
   behind the bar's corners.
   ============================================================ */
@media (max-width: 999.98px) {
  .bizco-pp-arrow,
  .bizco-pp-arrow.bizco-hidden {
    width: clamp(26px, 6.6vw, 36px) !important;
  }
  .bizco-pp-arrow svg {
    width: clamp(16px, 4.2vw, 22px) !important;
    height: clamp(16px, 4.2vw, 22px) !important;
    stroke-width: 3;
  }
  .bizco-pp-prev {
    box-shadow: 9px 0 13px -8px rgba(16, 40, 26, .18) !important;
  }
  .bizco-pp-next {
    box-shadow: -9px 0 13px -8px rgba(16, 40, 26, .18) !important;
  }
  .bizco-pp-arrow.bizco-hidden {
    box-shadow: none !important;
  }
  .bizco-pp-track,
  .bizco-cats {
    scroll-padding: 0 clamp(26px, 6.6vw, 36px);
  }
}

/* scroller clips itself with the strip radius (see note above) */
.bizco-pp:not(.bizco-cats-nav) .bizco-pp-track {
  border-radius: 15px !important;
}
@media (max-width: 999.98px) {
  .bizco-cats-nav .bizco-cats {
    border-radius: 13px !important;
  }
}


/* ============================================================
   BIZCO Policies — hero + directory + sticky TOC + policy cards
   Page 3041 (/policies/).  Block marker: bizco-pol v1
   ------------------------------------------------------------
   Markup = one wp:html block (.bizco-pol) in the page content.
   Design language is borrowed wholesale from the Help Center
   (page 1003) and Contact Us (page 1876): flat brand-green
   full-bleed hero with the dot texture, #FAFBFC canvas, white
   cards with #E6EAE7 hairlines, mint icon pucks, Outfit type.
   Header is NOT sticky on this site, so scroll-margin only has
   to clear a little breathing room.
   ============================================================ */

/* ---------- HERO: same treatment as Help Center (page 1003) ---------- */
.page-id-3041 .site-main > .ct-container-full{ padding-top:0 !important; }  /* hero flush to header */
.page-id-3041 .hero-section{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:44px;
  padding:40px 32px;
  border-radius:0;
  text-align:center;
  background-color:var(--theme-palette-color-1);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1.3px, transparent 1.6px),
    radial-gradient(90% 120% at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  background-size:22px 22px, 100% 100%;
  background-repeat:repeat, no-repeat;
}
.page-id-3041 .hero-section .entry-header{
  position:relative; z-index:1; margin:0; padding:0; border:none;
}
.page-id-3041 .page-title{
  color:#fff !important;
  font-weight:800 !important;
  font-size:clamp(30px, 5vw, 46px) !important;
  line-height:1.1 !important;
  letter-spacing:-.01em;
  margin:0 !important;
  text-shadow:0 1px 10px rgba(0,0,0,.18);
}
.page-id-3041 .hero-section .entry-header::after{   /* subtitle */
  content:"Everything that governs your account, your orders, and your BIZCO Max membership, all in one place.";
  display:block; max-width:660px; margin:14px auto 0;
  color:rgba(255,255,255,.92);
  font-size:clamp(15px, 2vw, 18px); line-height:1.6; font-weight:400;
}

/* ---------- SHELL ---------- */
.bizco-pol{
  --pol-ink:#161A1C;
  --pol-body:#3F4A44;
  --pol-muted:#5C6469;
  --pol-line:#E6EAE7;
  --pol-green:#1A7A4A;
  --pol-mint:#EAF3EE;
  font-family:'Outfit',sans-serif;
  max-width:1180px;
  margin:0 auto;
  padding-bottom:72px;
  scroll-margin-top:20px;
}
.bizco-pol *{ box-sizing:border-box; }

/* ---------- INTRO: lede ---------- */
.bizco-pol-intro{
  max-width:960px;          /* same measure as the Help Center support card */
  margin:0 auto clamp(30px, 3.2vw, 40px);
  text-align:center;
}
.bizco-pol-lede{
  font-size:clamp(16px, 1.25vw, 18.5px);
  line-height:1.65;
  color:var(--pol-body);
  margin:0;
  text-wrap:pretty;
}
.bizco-pol-lede a{ color:var(--pol-green); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(26,122,74,.35); }
.bizco-pol-lede a:hover{ border-bottom-color:var(--pol-green); }

/* ---------- DIRECTORY CARDS (the "what's on this page" grid) ---------- */
.bizco-pol-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin:0 0 clamp(44px, 5vw, 64px);
}
.bizco-pol-card{
  display:flex; flex-direction:column; gap:7px;
  background:#fff;
  border:1px solid var(--pol-line);
  border-radius:16px;
  padding:20px 22px;
  text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bizco-pol-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(25,42,61,.10);
  border-color:#C9E2D2;
}
.bizco-pol-card-title{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:clamp(15.5px, 1.1vw, 17px);
  color:var(--pol-ink); line-height:1.3;
}
.bizco-pol-card-arrow{ color:var(--pol-green); font-weight:700; transition:transform .16s ease; }
.bizco-pol-card:hover .bizco-pol-card-arrow{ transform:translateX(4px); }
.bizco-pol-card-sub{
  font-size:14px; line-height:1.5; color:var(--pol-muted);
}

/* ---------- LAYOUT: sticky rail + documents ---------- */
.bizco-pol-layout{
  display:grid;
  grid-template-columns:minmax(0, 264px) minmax(0, 1fr);
  gap:clamp(28px, 3.4vw, 52px);
  align-items:start;
}
.bizco-pol-nav{
  position:sticky; top:24px;
  align-self:start;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--pol-line);
  border-radius:16px;
  padding:20px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.bizco-pol-nav-head{
  margin:0 0 12px 10px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#8A938E;
}
.bizco-pol-nav ul,
.bizco-pol-jump ul{ list-style:none; margin:0; padding:0; }
.bizco-pol-nav li + li,
.bizco-pol-jump li + li{ margin-top:2px; }
.bizco-pol-nav a,
.bizco-pol-jump a{
  display:flex; align-items:baseline; gap:10px;
  padding:8px 10px;
  border-radius:9px;
  text-decoration:none;
  font-size:14.5px; line-height:1.35; font-weight:500;
  color:var(--pol-body);
  transition:background-color .14s ease, color .14s ease;
}
.bizco-pol-nav a:hover,
.bizco-pol-jump a:hover{ background:#F2F7F4; color:var(--pol-ink); }
.bizco-pol-nav-n{
  flex:none;
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
  color:#A8B2AC;
}
.bizco-pol-nav-t{ min-width:0; }
/* scroll-spy state (set by the bizco-policies snippet) */
.bizco-pol-nav a.is-current{
  background:var(--pol-mint);
  color:#0C5F3A; font-weight:700;
  box-shadow:inset 2px 0 0 var(--pol-green);
}
.bizco-pol-nav a.is-current .bizco-pol-nav-n{ color:var(--pol-green); }
.bizco-pol-nav-help{
  display:block;
  margin:14px 10px 2px;
  padding-top:14px;
  border-top:1px solid var(--pol-line);
  font-size:13.5px; font-weight:600; line-height:1.45;
  color:var(--pol-green); text-decoration:none;
}
.bizco-pol-nav-help:hover{ text-decoration:underline; }

/* ---------- MOBILE JUMP MENU (native details element, no JS needed) ---------- */
.bizco-pol-jump{
  display:none;
  background:#fff;
  border:1px solid var(--pol-line);
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  margin-bottom:26px;
  overflow:hidden;
}
.bizco-pol-jump > summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px;
  cursor:pointer;
  font-weight:700; font-size:15.5px; color:var(--pol-ink);
  list-style:none;
}
.bizco-pol-jump > summary::-webkit-details-marker{ display:none; }
.bizco-pol-jump-caret{
  flex:none; width:9px; height:9px;
  border-right:2px solid var(--pol-green);
  border-bottom:2px solid var(--pol-green);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.bizco-pol-jump[open] .bizco-pol-jump-caret{ transform:rotate(-135deg) translateY(-2px); }
.bizco-pol-jump > ul{ padding:0 8px 12px; border-top:1px solid var(--pol-line); padding-top:8px; }

/* ---------- DOCUMENT CARDS ---------- */
.bizco-pol-content{ min-width:0; }
.bizco-pol-doc{
  scroll-margin-top:20px;
  background:#fff;
  border:1px solid var(--pol-line);
  border-radius:20px;
  padding:clamp(26px, 3vw, 40px);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.bizco-pol-doc + .bizco-pol-doc{ margin-top:clamp(22px, 2.4vw, 32px); }
.bizco-pol-doc-head{
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:1px solid var(--pol-line);
}
.bizco-pol-doc-title{
  margin:0;
  font-weight:800;
  font-size:clamp(23px, 2.2vw, 30px);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--pol-ink);
  text-wrap:balance;
}
.bizco-pol-doc-meta{
  margin:8px 0 0;
  font-size:13px; font-weight:500; letter-spacing:.02em;
  color:#8A938E;
}

/* ---------- DOCUMENT BODY TYPE ---------- */
.bizco-pol-doc-body{
  font-size:clamp(15px, 1.05vw, 16.5px);
  line-height:1.72;
  color:var(--pol-body);
}
.bizco-pol-doc-body > p{ margin:0 0 16px; text-wrap:pretty; }
.bizco-pol-doc-body > p:last-child{ margin-bottom:0; }
.bizco-pol-doc-body strong{ color:var(--pol-ink); font-weight:700; }
.bizco-pol-doc-body a{
  color:#0C7A47; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(12,122,71,.35);
  transition:border-color .15s ease;
}
.bizco-pol-doc-body a:hover{ border-bottom-color:#0C7A47; }
.bizco-pol-doc-body h3.bizco-pol-h3{
  margin:30px 0 10px;
  font-weight:700;
  font-size:clamp(17px, 1.35vw, 19.5px);
  line-height:1.3;
  letter-spacing:-.008em;
  color:var(--pol-ink);
}
/* numbered top-level headings in the Max / Referral terms get a rule above them */
.bizco-pol-doc-body h3.bizco-pol-h3--num{
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--pol-line);
  font-size:clamp(18px, 1.45vw, 21px);
  font-weight:800;
}
.bizco-pol-doc-body h4.bizco-pol-h4{
  margin:22px 0 8px;
  font-weight:700;
  font-size:clamp(15.5px, 1.1vw, 17px);
  line-height:1.35;
  color:#22302A;
}
.bizco-pol-doc-body > *:first-child{ margin-top:0; }

/* lists */
.bizco-pol-list{
  margin:0 0 16px;
  padding:0;
  list-style:none;
}
.bizco-pol-list > li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
  text-wrap:pretty;
}
.bizco-pol-list > li::before{
  content:"";
  position:absolute; left:2px; top:.72em;
  width:6px; height:6px; border-radius:50%;
  background:var(--pol-green);
}
.bizco-pol-list > li:last-child{ margin-bottom:0; }

/* the "Key points" / "Quick summary" callouts inside the Max + Referral terms */
.bizco-pol-summary{
  background:#F5F9F7;
  border:1px solid #DCE9E2;
  border-radius:14px;
  padding:20px 22px;
  margin:0 0 24px;
}
.bizco-pol-summary-title{
  margin:0 0 12px !important;
  padding:0 !important; border:0 !important;
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.09em; text-transform:uppercase;
  color:#0C5F3A !important;
}
.bizco-pol-summary p{ margin:0 0 12px; font-size:14.5px; color:var(--pol-muted); }
.bizco-pol-summary .bizco-pol-list{ margin-bottom:0; font-size:15px; }

/* the Privacy Policy placeholder — swap this out for real copy when it's written */
.bizco-pol-pending{
  display:flex; align-items:flex-start; gap:14px;
  background:#FFF9EC;
  border:1px solid #F0E0BC;
  border-radius:14px;
  padding:16px 20px;
  margin-top:20px;
}
.bizco-pol-pending-ico{ flex:none; width:24px; height:24px; color:#B07C12; margin-top:2px; }
.bizco-pol-pending-ico svg{ width:24px; height:24px; display:block; }
.bizco-pol-pending-text{ font-size:14.5px; line-height:1.55; color:#5A4715; }
.bizco-pol-pending-text strong{ color:#4A390E; font-weight:700; }
.bizco-pol-pending-text a{ color:#8A5F08; border-bottom-color:rgba(138,95,8,.4); }

/* back-to-top */
.bizco-pol-backtop{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:26px;
  font-size:13.5px; font-weight:600;
  color:var(--pol-muted); text-decoration:none;
}
.bizco-pol-backtop:hover{ color:var(--pol-green); }

/* ---------- CLOSING CONTACT CARD (mirrors .bizco-help-support) ---------- */
.bizco-pol-contact{
  --bizco-support-bg:#0F9558;
  display:flex; align-items:center; gap:18px;
  margin-top:clamp(26px, 3vw, 36px);
  background:var(--bizco-support-bg);
  border-radius:16px;
  padding:24px 30px;
  box-shadow:0 4px 12px rgba(22,33,27,.14), 0 22px 48px rgba(22,33,27,.18);
}
.bizco-pol-contact-ico{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:#fff; color:var(--bizco-support-bg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.bizco-pol-contact-ico svg{ width:26px; height:26px; }
.bizco-pol-contact-text{
  font-size:clamp(15px, 1.1vw, 17px); color:#fff; line-height:1.55;
}
.bizco-pol-contact-text strong{ color:#fff; font-weight:700; }
.bizco-pol-contact-text a{
  color:#fff; font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  white-space:nowrap;
}
.bizco-pol-contact-text a:hover{ border-bottom-color:#fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .bizco-pol-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 999.98px){
  /* rail out, disclosure menu in */
  .bizco-pol-layout{ display:block; }
  .bizco-pol-nav{ display:none; }
  .bizco-pol-jump{ display:block; }
}
@media (max-width:720px){
  .bizco-pol-cards{ grid-template-columns:1fr; gap:12px; }
  .bizco-pol{ padding-bottom:52px; }
  .bizco-pol-contact{ flex-direction:column; text-align:center; gap:14px; }
  .bizco-pol-doc{ border-radius:16px; }
}
@media (max-width:600px){
  .page-id-3041 #post-3041 > .entry-content{ padding:0 16px; }
  .page-id-3041 .hero-section{ padding:34px 20px; }
  .bizco-pol-doc{ padding:22px 20px; }
  .bizco-pol-doc-body h3.bizco-pol-h3--num{ margin-top:30px; padding-top:18px; }
  .bizco-pol-contact{ padding:22px 20px; }
}

/* print: drop the chrome, keep the words */
@media print{
  .bizco-pol-cards, .bizco-pol-nav, .bizco-pol-jump, .bizco-pol-backtop, .bizco-pol-contact{ display:none !important; }
  .bizco-pol-layout{ display:block; }
  .bizco-pol-doc{ border:0; box-shadow:none; padding:0; page-break-after:always; }
}

/* ============================================================
   MAX FREE-TRIAL CTA — FITS ON SMALL SCREENS            [BIZCO]
   bizco-max-cta-fit v1
   "Start Your Free Trial" is white-space:nowrap at a fixed 16px
   with 32px side padding, while the banner caps at
   min(560px, 100vw - 80px) and eats 44px of padding per side.
   Below ~430px the label's intrinsic width passed the banner's
   content box and the text hung out of both ends of the pill
   (at 320px: label 173px + 64px padding vs a 152px box).
   Label type, side padding and the label/arrow gap now all scale
   with the viewport, and the banner's own side padding tightens
   at the same time so the pill keeps real breathing room instead
   of just barely fitting. The arrow is a text glyph, so it
   scales with the font. Same classes in the home MAX card and
   the footer banner -- this fixes both. 768px+ untouched.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-footer-banner {
    padding: 32px clamp(20px, 8vw, 44px) !important;
  }
  .bizco-footer-banner__cta {
    font-size: clamp(12.5px, 3.6vw, 16px) !important;
    padding: 14px clamp(14px, 5vw, 32px) !important;
    gap: clamp(6px, 1.8vw, 10px) !important;
  }
}

/* ============================================================
   BIZCO Footer link columns — readable wrapped items   [BIZCO]
   bizco-footer-menu v1
   PROBLEM (measured at 1000px): li margin-bottom was 0 and the
   real gap between adjacent menu items was 0-1px, while the link
   line-height was 26.4px (16px x 1.65). The distance between the
   two lines of ONE item ("Report an" / "Issue") was therefore
   IDENTICAL to the distance between two DIFFERENT items, so a
   column read as one undifferentiated 26.4px baseline grid with
   no grouping cue at all. The wrapping was not the bug; the
   missing distinction between "next line" and "next link" was.
   FIX
   1. Tighten leading INSIDE an item (1.65 -> 1.35) and add real
      space BETWEEN items, so an item's own lines hug each other
      and consecutive items are separated by ~1.6x that distance.
      This is what makes a wrapped item legible even when it does
      wrap -- everything else is just reducing how often it has to.
   2. Hand the columns back the width the gutter was eating. The
      row gap was 8vw, i.e. 24vw of the row spent on three
      gutters (240px of a 900px row at a 1000px viewport), which
      is what squeezed "Help" to 98px and wrapped short labels.
   3. text-wrap:balance so an item that still must wrap splits
      into even lines instead of stranding one word.
   ============================================================ */

/* -- 2. gutters (was a flat 8vw) -- */
.ct-footer .ct-container:has(> [data-column="logo"]) {
  gap: clamp(28px, 4.5vw, 88px);
}

/* -- 1 + 3. the menus themselves -- */
.ct-footer [data-column^="widget-area"] .widget-menu li.menu-item {
  line-height: 1.35;
  margin-bottom: 14px;
}
.ct-footer [data-column^="widget-area"] .widget-menu li.menu-item:last-child {
  margin-bottom: 0;
}
.ct-footer [data-column^="widget-area"] .widget-menu a {
  line-height: 1.35;
  text-wrap: balance;
}

/* ============================================================
   MAX BANNER — CONTENT FOLLOWS THE RHOMBUS             [BIZCO]
   bizco-max-skew-center v1
   The card is skewX(-8deg) and ONE wrapper (__inner) carries the
   +8deg counter-skew. Both skews share the same centre, so they
   cancel to the identity: every row ends up centred on the
   card's UNSKEWED rectangle, not on the slanted shape you
   actually see. A row therefore drifts off the rhombus's local
   centre by tan(8deg) x its distance from the card's middle --
   measured +13px right for the "Start Your Free Trial" pill (it
   sits low) and -19px left for the MAX badge (it sits high).

   Fix: the counter-skew moves from the wrapper onto each ROW.
   Composing a skew about the card's centre with one about the
   row's own centre leaves the row upright (the tangents still
   cancel) and adds exactly the translation the slant needs, so
   every row self-centres in the rhombus at its own height. The
   MAX badge keeps its -13deg wordmark slant: tangents add, so
   skewX(8) skewX(-13) renders identically to the -13 it has now.
   Hover must restate the skew or the pill snaps to the card's
   slant mid-transition. Unscoped: on the desktop one-row layout
   every row sits at the card's middle, so the shift is 0 there.
   Same classes in the home MAX card and the footer banner.
   ============================================================ */
.bizco-footer-banner__inner,
.bizco-footer-banner__top {
  transform: none !important;
}
/* the copy block shifts as ONE unit -- skewing its heading and subtext
   separately staggered their left edges ~4.5px apart in the desktop
   left-aligned layout */
.bizco-footer-banner__brand,
.bizco-footer-banner__copy,
.bizco-footer-banner__cta {
  transform: skewX(8deg);
}
.bizco-cta-green .bizco-mark {
  transform: skewX(8deg) skewX(-13deg);
}
.bizco-footer-banner__cta:hover {
  transform: skewX(8deg) translateY(-2px);
}


/* ==== MEGA MENU - elevation (bizco-megamenu-elevation v1) ====
   The dropdown panel is a large white surface that landed on white page
   content with only Blocksy's default 0 10px 20px rgba(41,51,61,.1) shadow -
   invisible at that size, so the panel read as part of the page. Two-layer
   elevation (tight contact edge + broad ambient) plus a bottom radius so the
   panel reads as a card resting on the page. Negative spread on the ambient
   layer keeps the shadow from bleeding up over the green nav bar.
   Applies to every top-level header dropdown (all 5 mega menus).
   To revert: delete this block. */
.header-menu-1 .menu > .menu-item > .sub-menu {
  border-radius: 0 0 10px 10px !important;
  box-shadow:
    0 2px 4px rgba(16, 24, 40, .06),
    0 18px 40px -8px rgba(16, 24, 40, .24) !important;
}
/* end bizco-megamenu-elevation v1 */

/* ============================================================
   HOME HERO -- MOBILE COMPACT (max-width:767px)         [BIZCO]
   bizco-hero-mobile v1   *** revert = delete this block ***
   At 390px the hero measured 455px tall and, with the 223px
   header above it, pushed "Explore by category" down to 726px:
   86% of an 844px screen spent before a single product.
   Four causes, all addressed here:
   1. The eyebrow ran 3 lines of tracked uppercase (84px plus
      25px of margin = 24% of the hero). A short mobile-only
      kicker replaces it. Markup: .bizco-eyebrow-full /
      .bizco-eyebrow-short spans inside the .bizco-eyebrow
      paragraph in page 1234 -- the same swap the delivery pill
      already uses for "Dallas-Fort Worth" vs "DFW".
   2. The headline sat at a desktop-scale 38px in a 318px
      column, so it broke to 4 lines. A clamp takes it to 3.
   3. The delivery pill wrapped to 2 lines and carried a 24px
      bottom margin that did nothing (it is the last element).
      Now a single nowrap line; the font-size clamp keeps it
      inside the pill down to 320px.
   4. Section padding (8px) and column padding (16px) stacked
      at both ends. Collapsed to one set.
   Result: hero 455px -> 214px at 390px wide. Scoped to
   max-width:767px, so tablet and desktop are untouched. Sits
   last in the file so it beats bizco-eyebrow-size v1,
   bizco-hero-pad-half v1 and bizco-chip-mobile v1.
   ============================================================ */
.bizco-eyebrow .bizco-eyebrow-short { display: none; }

@media (max-width: 767px) {
  .bizco-eyebrow .bizco-eyebrow-full  { display: none; }
  .bizco-eyebrow .bizco-eyebrow-short { display: inline; }

  .bizco-hero { padding: 14px 20px 18px !important; }
  .bizco-hero-inner { padding: 0 !important; }

  .bizco-eyebrow {
    font-size: 12.5px !important;
    letter-spacing: .09em !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .bizco-headline {
    font-size: clamp(27px, 8.2vw, 34px) !important;
    /* 1.06 was too tight once the pill shared the last line: the pill is
       taller than the line box, so its top edge ran ~2.7px into the line
       above. 1.14 cuts that to 1.3px and costs only 5px of hero height. */
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
  }
  .bizco-headline-row {
    gap: 14px !important;
    margin-bottom: 0 !important;
  }

  .bizco-headline-row .bizco-chip {
    font-size: clamp(13px, 3.6vw, 14px) !important;
    padding: 9px 14px 9px 12px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    margin-bottom: 0 !important;
    box-shadow: 0 1px 4px rgba(15, 82, 48, .07) !important;
  }
  .bizco-headline-row .bizco-chip svg {
    width: 19px !important;
    height: 19px !important;
  }
}
/* end bizco-hero-mobile v1 */


/* ============================================================
   BIZCO Policies — Privacy Policy section (page 3041)
   Block marker: bizco-pol-privacy v1
   ------------------------------------------------------------
   The Privacy Notice comes from Termly. Its own markup is stripped
   at build time (see wp-content/bizco-tools/policies/termly.js) and
   re-emitted using this page's existing vocabulary, so it inherits
   .bizco-pol-doc-body typography for free. Only three things it
   needs that no other policy does live here: the US state
   personal-information table, numbered lists, and the Termly
   attribution footnote.

   The attribution STAYS. The account is on Termly's free plan,
   which requires the credit link. Do not remove it without
   confirming the plan allows it.
   ============================================================ */

/* ---------- the "categories of personal information" table ---------- */
/* Wide table, narrow phone. The wrapper scrolls; the page never does. */
.bizco-pol-tablewrap{
  margin:0 0 20px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--pol-line);
  border-radius:12px;
  /* Scroll affordance, no JS: two white panels that scroll WITH the content
     (background-attachment:local) sit on top of two shadows pinned to the
     container edges (scroll). At the far left the white panel covers the left
     shadow, so a shadow is visible only on a side that has more content.
     Without this the table just looks cropped on a phone. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(22,33,27,.17), rgba(22,33,27,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(22,33,27,.17), rgba(22,33,27,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
  background-color:#fff;
}
.bizco-pol-table{
  width:100%;
  min-width:560px;               /* below this the three columns stop being readable */
  border-collapse:collapse;
  font-size:14.5px;
  line-height:1.5;
}
.bizco-pol-table th,
.bizco-pol-table td{
  padding:12px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--pol-line);
}
.bizco-pol-table th{
  background:#F5F9F7;
  font-weight:700;
  color:var(--pol-ink);
  white-space:nowrap;
}
.bizco-pol-table tr:last-child td{ border-bottom:0; }
/* the YES/NO "Collected" column */
.bizco-pol-table td:last-child{
  text-align:center;
  font-weight:700;
  white-space:nowrap;
  color:var(--pol-muted);
}
.bizco-pol-table th:last-child{ text-align:center; }

/* ---------- numbered lists (Termly uses a few) ---------- */
.bizco-pol-list--num{ counter-reset:bizco-pol-n; }
.bizco-pol-list--num > li{ counter-increment:bizco-pol-n; padding-left:28px; }
.bizco-pol-list--num > li::before{
  content:counter(bizco-pol-n) ".";
  position:absolute; left:0; top:0;
  width:auto; height:auto; border-radius:0; background:none;
  font-weight:700; font-size:.95em;
  color:var(--pol-green);
}

/* ---------- Termly's underlined run-in headings ---------- */
.bizco-pol-doc-body u{
  text-decoration:none;
  font-weight:700;
  color:var(--pol-ink);
}

/* ---------- attribution footnote (required by Termly's free plan) ---------- */
.bizco-pol-attribution{
  margin:26px 0 0;
  padding-top:16px;
  border-top:1px solid var(--pol-line);
  font-size:12.5px;
  line-height:1.5;
  color:#8A938E;
}
.bizco-pol-attribution a{
  color:#8A938E !important;
  font-weight:500 !important;
  border-bottom:1px solid rgba(138,147,142,.4) !important;
}
.bizco-pol-attribution a:hover{ color:var(--pol-green) !important; border-bottom-color:var(--pol-green) !important; }

/* ---------- Termly's own section anchors get the same landing offset ---------- */
#toc, #infocollect, #personalinfo, #sensitiveinfo, #infouse, #whoshare, #cookies,
#inforetain, #infosafe, #infominors, #privacyrights, #withdrawconsent,
#DNT, #uslaws, #policyupdates, #contact, #request{ scroll-margin-top:20px; }

@media (max-width:600px){
  .bizco-pol-table{ font-size:13.5px; }
  .bizco-pol-table th, .bizco-pol-table td{ padding:10px 12px; }
}


/* ============================================================
   HOME HERO -- MOBILE: DELIVERY PILL FLOWS AFTER THE HEADLINE
   bizco-hero-chip-inline v1  *** revert = delete this block ***
   Extends bizco-hero-mobile v1. Two changes, both <=767px:

   1. COPY. The pill said "Free two-day delivery across DFW".
      The " across <region>" tail is now wrapped in
      .bizco-chip-tail (page 1234) and hidden on mobile, leaving
      "Free two-day delivery". That is ~77px narrower, which is
      exactly what makes change 2 fit.

   2. PLACEMENT. .bizco-headline-row was a flex row, so the pill
      could only sit beside the headline BLOCK (vertically
      centred against all 3 lines) or wrap under the whole
      thing. To sit on the same line as "less." it has to share
      an inline formatting context with the text, so on mobile
      the row becomes display:block and the h1 becomes
      display:inline. The pill is then just another inline item
      after the last word: it lands to the right of "less." when
      the line has room and falls to its own line when it does
      not -- ordinary line breaking does the "unless there isn't
      enough room" logic for free, at every width, with no
      breakpoint to maintain.

   Notes: line-height is restated on the row because the block
   container's own 26.4px strut would otherwise pad the lines
   the h1 used to control. margin-left is 4px, not a gap, so the
   indent is invisible on the wrapped-to-own-line case.
   Tablet/desktop keep the flex row untouched.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-chip .bizco-chip-tail { display: none; }

  /* flow-root, not block: the pill is a FLOAT now, and a plain block
     parent would not contain it (the row would collapse to the text
     height and the hero's background would clip the pill). */
  .bizco-headline-row {
    display: flow-root !important;
    line-height: 1.14 !important;
    /* keep the row's strut on the headline's own scale rather than the
       inherited 16px, so it never fights the inline text's line boxes */
    font-size: clamp(27px, 8.2vw, 34px) !important;
  }
  .bizco-headline { display: inline !important; }

  /* float:right, placed after ALL the headline text, is what right-aligns
     the pill without breaking the "drop down if it doesn't fit" behaviour:
     a float lands on the line box it is encountered in -- the LAST line --
     flush to the container's right edge, and the browser pushes it to the
     next line by itself when the remaining space on that line is too
     narrow. No width query, no breakpoint, no JS. margin-left is a minimum
     gutter for the case where "less." nearly reaches the pill. */
  .bizco-headline-row .bizco-chip {
    float: right !important;
    margin-left: 12px !important;
    /* Sitting ON the "less." line was cramped -- the pill is taller than
       the line box, so it crowded the text above and below. Dropping it
       18px sets it a little BELOW and to the right of "less." instead:
       ~16.5px of air above the pill against the hero's 18px of padding
       below it, so the spacing reads balanced. This is deliberately NOT
       a full extra line -- the float still tucks into the last line's
       band, so it costs ~18px of hero height rather than a whole ~55px
       line. Raising this past ~26px starts to look like its own row. */
    margin-top: 18px !important;
  }
}
/* end bizco-hero-chip-inline v1 */

/* ============================================================
   SECTION RHYTHM -- MOBILE (max-width:767px)            [BIZCO]
   bizco-section-rhythm-mobile v1  *** revert = delete block ***
   bizco-home-unify v1 set one rhythm for every section:
   clamp(48px,7vw,72px). On a phone that is far too generous --
   measured at 390px the REAL content-to-content gaps were 48px
   (hero -> categories) and 72px everywhere else, because most
   sections carry the space as padding-top INSIDE the box while a
   24px sibling margin sits outside it, and the two add up.
   This block collapses those two sources into ONE token,
   clamp(30px,8vw,40px) = 31px at 390px, so every section break
   is identical and roughly 40% of what it was.

   The categories/products pair is deliberately NOT touched: its
   22px shelf gap comes from bizco-shelf-gap v1's
   `.bizco-popular:has(.bizco-shopall)` rule, whose 0,2,0
   specificity already beats the plain `.bizco-popular` below --
   so the two shelves stay grouped as one block.

   TWO COLLAPSED MARGINS had to be hunted down by hand; without
   both, the cmp -> MAX break stayed at ~55px while every other
   break obeyed. Neither is visible in `.bizco-cmp-section`'s own
   computed style, which is what made it slow to find:
   1. `.bizco-cmp-section` is not a direct child of the content
      flow -- it sits inside an UNCLASSED wp-block-group wrapper
      that carries its own 24px bottom margin. Reached with
      `:has(> .bizco-cmp-section)`.
   2. `.bizco-cmp-quality` (the quality line, which v3 moved
      OUTSIDE the card) has a 24.75px bottom margin that collapses
      up through the stacked column and the wrapper, landing
      between the two sections. Margins collapse here only on
      mobile, where the columns block stacks to display:block.
   Since collapsed margins take the MAX of the chain, zeroing
   just one of the two changed the gap by ~1px and looked like
   the fix had failed. Both are required.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-hero,
  .bizco-popular,
  .bizco-cmp-section,
  .bizco-max-section,
  .bizco-trans-section,
  .bizco-faq-section { margin-bottom: 0 !important; }

  /* the two collapsed margins described above */
  .wp-block-group:has(> .bizco-cmp-section) { margin-bottom: 0 !important; }
  .bizco-cmp-quality { margin-bottom: 0 !important; }
  .bizco-max-section > :last-child,
  .bizco-trans-section > :last-child { margin-bottom: 0 !important; }

  /* the single mobile rhythm token */
  .bizco-popular { margin-top: clamp(30px, 8vw, 40px) !important; }
  .bizco-cmp-section,
  .bizco-max-section,
  .bizco-trans-section,
  .bizco-faq-section { padding-top: clamp(30px, 8vw, 40px) !important; }
  .bizco-faq-section { padding-bottom: clamp(30px, 8vw, 40px) !important; }
}
/* end bizco-section-rhythm-mobile v1 */

/* ============================================================
   BIZCO MAX REFERRAL PROGRAM — page 1001                [BIZCO]
   bizco-ref v1

   Guest-flow explainer for the referral program. Plain-language
   summary of the "BIZCO Max Referral Program Terms & Conditions"
   section of the policies page (3041, #referral-program-terms).

   Hero is the same treatment as Help Center (1003) / Policies
   (3041): full-bleed brand green, dot texture, top radial glow,
   title text swapped via CSS so the menu label stays sane.

   Icons are the guest-home member-benefit house style
   (bizco-mb v2): mint backdrop disc, currentColor strokes,
   #FFFFFF / #CFE6D8 / #E4EDE7 fills, #A9BBB0 grey accents,
   #1A7A4A green badges, per-icon square viewBox crop. Tiles are
   deliberately NOT the .bizco-mb-* classes — those carry the home
   page's 6/3/2-column media queries, which would fight this
   3-column grid.
   ============================================================ */

/* ---------- HERO: same treatment as Help Center (page 1003) ---------- */
.page-id-1001 .site-main > .ct-container-full{ padding-top:0 !important; }
.page-id-1001 .hero-section{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; margin-bottom:44px;
  padding:40px 32px;
  border-radius:0;
  text-align:center;
  background-color:var(--theme-palette-color-1);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1.3px, transparent 1.6px),
    radial-gradient(90% 120% at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  background-size:22px 22px, 100% 100%;
  background-repeat:repeat, no-repeat;
}
.page-id-1001 .hero-section .entry-header{
  position:relative; z-index:1; margin:0; padding:0; border:none;
}
/* page is titled "BIZCO Referral Program" for menus; banner reads the benefit */
.page-id-1001 .page-title{
  font-size:0 !important;
  line-height:0 !important;
  margin:0 !important;
}
.page-id-1001 .page-title::before{
  content:"Earn 3% back on every business you refer";
  display:block;
  max-width:16ch;
  margin:0 auto;
  color:#fff;
  font-weight:800;
  font-size:clamp(28px, 4.4vw, 44px);
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
  text-shadow:0 1px 10px rgba(0,0,0,.18);
}
.page-id-1001 .hero-section .entry-header::after{
  content:"They get $100 in store credit to start. You get a free month of BIZCO Max, plus 3% of their product orders back as store credit.";
  display:block; max-width:660px; margin:16px auto 0;
  color:rgba(255,255,255,.92);
  font-size:clamp(15px, 2vw, 18px); line-height:1.6; font-weight:400;
}

/* ---------- shell ---------- */
.bizco-ref{
  font-family:'Outfit',sans-serif;
  max-width:1080px;
  margin:0 auto;
  padding-bottom:66px;
}
.bizco-ref-sec{ margin:0 0 clamp(40px, 5vw, 62px); }

/* section headers use the home page's unified label style */
.bizco-ref-h{
  font-family:'Outfit',sans-serif;
  font-weight:700 !important;
  font-size:clamp(20px, 2vw, 32px) !important;
  line-height:1.2 !important;
  letter-spacing:-.015em;
  color:#1a1a1a;
  margin:0 0 18px !important;
}

/* ---------- 1. WHAT YOU EARN : three illustrated tiles ---------- */
.bizco-ref-tiles{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.4vw, 20px);
  align-items:stretch;
}
.bizco-ref-tile{
  container-type:inline-size;
  /* centred for the same reason as .bizco-ref-step: subs run 2-3 lines and the
     grid stretches every tile to the tallest. These tiles are column at every
     width, so this needs no media-query reset. */
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:#fff;
  border:1px solid #E4EAE6;
  border-radius:clamp(14px, 1.3vw, 20px);
  padding:clamp(20px,2vw,32px) clamp(14px,1.4vw,26px) clamp(22px,2.2vw,34px);
  box-shadow:0 1px 2px rgba(22,33,27,.04), 0 6px 18px rgba(22,33,27,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bizco-ref-tile:hover{
  transform:translateY(-3px);
  border-color:#CFE0D6;
  box-shadow:0 2px 4px rgba(22,33,27,.05), 0 14px 30px rgba(22,33,27,.09);
}
/* cqi is 1% of the TILE's inline size, so the art keeps its proportions at
   every column count. Never use cqi on the container's own properties. */
.bizco-ref-icon{
  display:block; flex:none;
  width:clamp(64px, 42cqi, 132px);
  height:clamp(64px, 42cqi, 132px);
  color:#26382F;
  margin:0 0 clamp(12px, 4cqi, 20px);
}
.bizco-ref-t{
  font-weight:700;
  font-size:clamp(15px, 6cqi, 21px);
  line-height:1.22;
  letter-spacing:-.012em;
  color:#16211B;
  margin:0 0 clamp(5px, 2.4cqi, 9px) !important;
}
/* Inline MAX badge. The art is a parallelogram with heavy padding (the glyphs
   are ~38% of the image height), so it has to run taller than cap height to
   read at the weight of its neighbours. Negative block margins shrink the
   MARGIN box, which is what vertical-align measures, so the taller badge never
   grows the line box; `top` lifts it off the x-height midpoint that
   vertical-align:middle lands on and onto the cap-height midpoint. Same
   treatment as .bizco-mb-logo on the home page. */
.bizco-ref-logo{
  height:1.34em;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  margin:-.3em .06em -.3em .1em;
  position:relative;
  top:-.1em;
}
.bizco-ref-s{
  font-weight:400;
  font-size:clamp(13.5px, 5cqi, 16.5px);
  line-height:1.45;
  color:#6A7873;
  margin:0 !important;
  max-width:30ch;
}

/* ---------- 2. HOW IT WORKS : four numbered step cards ---------- */
/* 2x2 rather than 4 across: the container is 1080px, so four columns would
   be ~255px each and step 3's body runs 211 characters. Two columns give
   ~530px and keep every row balanced. Below 820px this collapses to 1fr. */
.bizco-ref-steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(12px, 1.4vw, 20px);
  margin:0 !important;
  padding:0 !important;
}
.bizco-ref-step{
  position:relative;
  container-type:inline-size;
  /* justify-content:center so the stack sits in the middle of the card. The
     step subs vary from 2 to 5 lines, and the grid stretches every card in a
     row to the tallest, so top-aligned content leaves the short cards
     visibly bottom-heavy with dead space. Reset to flex-start in the
     820px ROW layout, where this axis is horizontal. */
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:#fff;
  border:1px solid #E4EAE6;
  border-radius:clamp(14px, 1.3vw, 20px);
  padding:clamp(22px,2.2vw,34px) clamp(14px,1.4vw,26px) clamp(22px,2.2vw,34px);
  box-shadow:0 1px 2px rgba(22,33,27,.04), 0 6px 18px rgba(22,33,27,.05);
  margin:0 !important;
}
.bizco-ref-step::marker{ content:none; }
.bizco-ref-num{
  position:absolute; top:14px; left:16px;
  width:30px; height:30px; border-radius:50%;
  background:#0F5230; color:#fff;   /* bizco-tile1 v1: ref-num (fix group TEST-TILE-1): was #EAF3EE / #1A7A4A */
  font-weight:700; font-size:15px; line-height:30px; text-align:center;
}
.bizco-ref-stepicon{
  display:block; flex:none;
  width:clamp(64px, 38cqi, 118px);
  height:clamp(64px, 38cqi, 118px);
  color:#26382F;
  margin:0 0 clamp(12px, 4cqi, 18px);
}
.bizco-ref-step-body{ display:block; }
.bizco-ref-step-t{
  font-weight:700;
  font-size:clamp(15px, 6cqi, 20px);
  line-height:1.22;
  letter-spacing:-.012em;
  color:#16211B;
  margin:0 0 clamp(5px, 2.4cqi, 9px) !important;
}
.bizco-ref-step-s{
  font-weight:400;
  font-size:clamp(13.5px, 5cqi, 16px);
  line-height:1.5;
  color:#6A7873;
  margin:0 !important;
}

/* ---------- 3. WHAT 3% ADDS UP TO ---------- */
.bizco-ref-math{
  background:#fff;
  border:1px solid #E4EAE6;
  border-radius:18px;
  padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,32px);
  box-shadow:0 1px 2px rgba(22,33,27,.04), 0 6px 18px rgba(22,33,27,.05);
}
/* one scenario = a label + its three-stat flow; scenarios are separated by a
   hairline rather than being separate cards, so they read as one comparison */
.bizco-ref-scenario + .bizco-ref-scenario{
  margin-top:clamp(18px, 2vw, 26px);
  padding-top:clamp(18px, 2vw, 26px);
  border-top:1px solid #EDF1EF;
}
.bizco-ref-scen-h{
  font-weight:700;
  font-size:clamp(13px, 1.1vw, 15px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#8A948F;
  margin:0 0 clamp(10px, 1.1vw, 14px) !important;
  text-align:center;
}
.bizco-ref-flow{
  display:flex; align-items:stretch; justify-content:center;
  gap:clamp(8px, 1.2vw, 18px);
}
.bizco-ref-stat{
  flex:1 1 0; min-width:0;
  /* centred: the row is align-items:stretch, so a stat whose label wraps to two
     lines (the "$10,000 combined product orders" one) makes every box in that
     row taller. flex-start left the shorter boxes' numbers pinned to the top
     with dead space underneath. */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:#FAFBFC;
  border:1px solid #EDF1EF;
  border-radius:14px;
  padding:clamp(14px,1.5vw,22px) clamp(10px,1.1vw,18px);
}
.bizco-ref-stat--hi{
  background:#EAF3EE;
  border-color:#D3E7DB;
}
.bizco-ref-stat-n{
  display:block;
  font-weight:800;
  font-size:clamp(24px, 3.2vw, 40px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:#155F3A;
  margin-bottom:8px;
}
.bizco-ref-stat:not(.bizco-ref-stat--hi) .bizco-ref-stat-n{ color:#16211B; }
.bizco-ref-stat-l{
  display:block;
  font-size:clamp(12.5px, 1.05vw, 14.5px);
  line-height:1.4;
  color:#6A7873;
  max-width:22ch;
}
.bizco-ref-op{
  flex:none;
  align-self:center;
  width:clamp(20px, 2vw, 28px); height:clamp(20px, 2vw, 28px);
  color:#9FB3A7;
}
.bizco-ref-op svg{ width:100%; height:100%; display:block; }
.bizco-ref-math-note{
  margin:clamp(16px,1.6vw,22px) 0 0 !important;
  font-size:clamp(12.5px, 1.05vw, 14px);
  line-height:1.55;
  color:#8A948F;
  text-align:center;
  max-width:78ch;
  margin-inline:auto !important;
}

/* ---------- 5. FULL TERMS CARD ----------
   Mirrors .bizco-help-support: same #0F9558 field,
   white circular icon puck and two-layer float shadow. Keep the green
   in sync with --bizco-support-bg and --bizco-cta-bg.
   -------------------------------------- */
.bizco-ref-terms{
  --bizco-support-bg:#0F9558;
  display:flex; align-items:center; gap:18px;
  background:var(--bizco-support-bg);
  border:0;
  border-radius:16px;
  padding:24px 30px;
  box-shadow:0 4px 12px rgba(22,33,27,.14), 0 22px 48px rgba(22,33,27,.18);
}
.bizco-ref-terms-i{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:#fff; color:var(--bizco-support-bg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.bizco-ref-terms-i svg{ width:26px; height:26px; }
.bizco-ref-terms-text{
  font-size:clamp(15px, 1.1vw, 17px);
  color:#fff; line-height:1.55;
  margin:0 !important;
}
.bizco-ref-terms-text a{
  color:#fff; font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
}
.bizco-ref-terms-text a:hover{ border-bottom-color:#fff; }

/* No CTA card on this page: the sitewide MAX footer banner lands directly
   under .bizco-ref-terms with the same "Start Your Free Trial" button, so a
   second one here would be a duplicate. Page ends the way Policies does. */

/* ---------- responsive ---------- */
/* The flow row stays horizontal until it stacks at 640. It must never
   flex-wrap: wrapping puts 2 stats on row 1 and leaves the second arrow
   dangling at the end of it, pointing at nothing. */
@media (max-width:820px){
  .bizco-ref-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bizco-ref-tiles .bizco-ref-tile:last-child{ grid-column:1 / -1; }
  .bizco-ref-tiles .bizco-ref-tile:last-child .bizco-ref-icon{ width:118px; height:118px; }
  .bizco-ref-steps{ grid-template-columns:1fr; }
  .bizco-ref-step{
    /* row layout: the main axis is now horizontal, so centering would push the
       icon and copy away from the card's leading edge */
    flex-direction:row; align-items:center; justify-content:flex-start; text-align:left;
    gap:18px;
    padding:20px 24px 20px 58px;
  }
  .bizco-ref-num{ top:50%; left:16px; transform:translateY(-50%); }
  .bizco-ref-stepicon{ width:96px; height:96px; margin:0; }
  .bizco-ref-step-s{ max-width:none; }
}
@media (max-width:640px){
  .bizco-ref-flow{ flex-direction:column; align-items:stretch; }
  .bizco-ref-stat{ flex:0 0 auto; }
  .bizco-ref-stat-l{ max-width:none; }
  .bizco-ref-op{ align-self:center; transform:rotate(90deg); }
  .bizco-ref-terms{ flex-direction:column; text-align:center; gap:14px; }
}
@media (max-width:600px){
  .page-id-1001 #post-1001 > .entry-content{ padding:0 16px; }
  .page-id-1001 .hero-section{ padding:34px 20px; }
  .bizco-ref{ padding-bottom:46px; }
  .bizco-ref-math{ padding:20px 16px; }
}
@media (max-width:480px){
  .bizco-ref-step{ padding:18px 18px 18px 18px; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .bizco-ref-num{ top:12px; left:12px; transform:none; }
  .bizco-ref-stepicon{ width:104px; height:104px; margin:0 0 12px; }
  .bizco-ref-tiles{ grid-template-columns:1fr; }
  .bizco-ref-tiles .bizco-ref-tile:last-child .bizco-ref-icon{ width:clamp(64px, 42cqi, 132px); height:clamp(64px, 42cqi, 132px); }
}
/* == bizco-ref v1 :: END == */


/* ============================================================
   POPULAR PRODUCTS -- MOBILE BREATHING ROOM (max 767px) [BIZCO]
   bizco-pp-mobile-room v1  *** revert = delete this block ***
   Measured at 390px BEFORE: cards were 88px wide (from
   bizco-tile-compact's clamp(88px,12vw,120px)), 3.9 of them on
   screen, and the longest product name needed SEVEN lines in a
   box that only showed three -- so ALL 20 names were truncated.

   1. WIDTH. clamp(134px,37vw,176px) = 134px @320, 144px @390,
      176px @767. That is ~2.1-2.4 cards in view, which still
      shows a sliced card as the scroll affordance. Widening
      alone drops the longest name from 7 lines to 3.
   2. NAME CAP 3 -> 5 lines. NOTE the cap is NOT
      -webkit-line-clamp: bizco-pp-unit v1 deliberately dropped
      that (it always draws an ellipsis) in favour of a fixed
      max-height that clips at a whole line. So the cap is a
      height, and it is raised here to 5 lines.
      `min-height: 0` is the important half: bizco-pp-unit v1
      sets min-height == max-height so every card reserves the
      same title box and all prices share a baseline. Reserving
      5 lines when the widened cards only need 3 added 27px of
      dead space per card. Zeroing the min and pushing the price
      down with `margin-top:auto` keeps the prices aligned
      ANYWAY -- the track is a flex row, so every card stretches
      to the tallest -- while the card shrinks back to the
      height the copy actually needs. Verified: card 219 -> 192px
      at 390px with all price rows still pixel-identical.
   3. PRICE 11px -> 15px. `.bizco-pp-label` ("/Case") is a
      SEPARATE element with its own clamp(8px,0.62vw,10px), so
      it is untouched and stays small on purpose -- it is a unit
      qualifier, not part of the number.
   Verified 0 names clipped at 320/390/767 (longest needs 4/3/3
   lines against the cap of 5). >=768px untouched.
   ============================================================ */
@media (max-width: 767px) {
  .bizco-pp-card {
    width: clamp(134px, 37vw, 176px) !important;
  }
  /* bizco-pp-cap3 v1 (phones), owner 2026-08-28: the cap goes back to THREE
     lines. Five let a long name run most of the card. min-height stays 0 and
     the price keeps margin-top:auto, so prices still share a baseline. */
  .bizco-pp-title {
    min-height: 0 !important;
    max-height: calc(1.35em * 3 + 12px) !important;
  }
  /* bizco-pp-type v2: price a step up on phones with the name (owner 2026-08-28) */
  .bizco-pp-price {
    font-size: 16.5px !important;
    margin-top: auto !important;
  }
}
/* end bizco-pp-mobile-room v1 */
/* ============================================================
   HOME FAQ - TOUCH: no sticky hover on the +/- token    [BIZCO]
   bizco-faq-touch v1
   On a touch screen the last-tapped element keeps :hover until
   something else is tapped. Tapping an open FAQ closed it but
   left its token in the green hover state, so a closed row kept
   reading as open. Green should mean open and nothing else here,
   so the hover treatment is switched off wherever hover is not a
   real pointer capability. The open state is re-asserted inside
   the query with higher specificity (5 classes vs 4) so an open
   row still shows green while it is being tapped.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .bizco-faq-section .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
  .bizco-faq-section .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-icon,
  .bizco-faq-section .wp-block-accordion-heading__toggle:active .wp-block-accordion-heading__toggle-icon {
    border-color: #E0E7E2;
    background: #fff;
    color: var(--faq-muted);
  }
  .bizco-faq-section .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    /* bizco-tile1 v1: faq-open-touch (fix group TEST-TILE-1): was #C6E0D0 / #EAF4EE / --faq-green */
    border-color: #0F5230;
    background: #0F5230;
    color: #fff;
  }
  /* same story for the "View All FAQs" pill */
  .bizco-faq-section .bizco-faq-btn a:hover,
  .bizco-faq-section .bizco-faq-btn .wp-block-button__link:hover {
    background: #fff !important;
    color: #1A7A4A !important;
  }
  .bizco-faq-section .bizco-faq-btn a:hover::after {
    transform: none;
  }
}


/* ============================================================
   HOW BIZCO WORKS -- MOBILE ORDER                      [BIZCO]
   bizco-cmp-mobile-order v1
   Phones only (<=480px). The intro copy used to be followed
   immediately by the savings-calculator CTA, which pushed the
   "Same quality products." line all the way to the bottom of
   the section. Final order: intro copy, comparison cards,
   quality line, then the CTA (centered) as the closing action.
   The two live in DIFFERENT wp-block-columns, so the columns
   are flattened with display:contents and the section itself
   becomes the flex container that orders all six children.
   Desktop and the 481-781px row layout are untouched.
   ============================================================ */
@media (max-width:480px){
  .bizco-cmp-section{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
  }
  .bizco-cmp-section > .wp-block-column{ display:contents !important; }

  /* the group's own 24px bottom margin stacked with the rule's 24px top
     margin (flex items don't collapse) -> 48 above the rule vs 24 below */
  .bizco-cmp-section .bizco-cmp-head-group{ order:1; margin-bottom:0 !important; }
  .bizco-cmp-section .bizco-cmp-rule{ order:2; }
  .bizco-cmp-section .bizco-cmp-sub{ order:3; margin-bottom:0 !important; }
  .bizco-cmp-section .bizco-cmp{
    order:4;
    margin-top:24px !important;
    margin-bottom:0 !important;   /* its own 24 would stack with the next gap */
  }
  .bizco-cmp-section .bizco-cmp-quality{ order:5; margin-top:20px !important; }
  .bizco-cmp-section .bizco-cmp-cta-wrap{
    order:6;
    margin:24px 0 0 !important;
    text-align:center !important;
  }
}


/* ============================================================
   LOOP CARD: PRICE + QTY/ADD ON ONE LINE WHEN THERE IS ROOM
   bizco-loop-price-inline v1  (2026-07-27)
   The card previously forced .bizco-loop-pricerow to
   flex-direction:column, so the price always sat on its own line
   above the qty stepper + Add to cart. Now the row is a wrapping
   flex row: the price keeps its intrinsic width and the cart gets
   `flex: 1 1 220px`. Flex line-breaking compares that 220px basis
   against the space left after the price, so the cart sits beside
   the price whenever the card can afford it and otherwise drops to
   its own line and stretches full width - no media query needed,
   it reacts to the CARD width, not the viewport.
   220px = measured natural cart width (qty 102 + gap 8 + Add to
   cart 105) plus a little slack so the button never squeezes.
   Practical effect at 1280px: 4-across cards are 266px, price ~98,
   so it stays stacked; 3-across and 2-across cards (~300-360px)
   go inline.
   Scoped to >=768px so the hand-tuned phone cards
   (bizco-cat-mobile-act-match, the <768 category stack) keep their
   own deliberate layout.
   ============================================================ */
@media (min-width: 768px) {
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 8px !important;
  }
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .price {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    align-self: center !important;
    text-align: left !important;
  }
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart {
    /* v3: basis is the TRUE minimum (qty floor 76 + 6 gap + Add to cart ~109),
       down from 220 -> 195. The row only breaks once even that will not fit. */
    flex: 1 1 190px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: center !important;
    gap: 6px !important;
  }
  /* v3: the stepper was pinned at 104px, giving a 46px input - wide enough for
     4 digits ("8888" measures 33px at 15.2px Outfit) when it only ever needs 2.
     84px puts the field at 28px, which holds "88" (17px) with ~5px either side,
     and it still gives up width as the card narrows, down to a 76px floor
     (28px - / + buttons around a 20px field). Add to cart keeps its nowrap
     label, so the saved ~20px goes straight to the button. */
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart > .bizco-loop-qty {
    flex: 0 1 82px !important;
    width: auto !important;
    min-width: 76px !important;
    max-width: 82px !important;
  }
  /* v4: capping only the WRAPPER was not enough. `.bizco-loop-qty input` carries
     a hard `width:44px` from the base rule, and the override that makes it
     flexible is scoped to search/shop only - so on category pages the field kept
     all 44px and the - / + buttons absorbed the entire shrink instead, collapsing
     to 19px. Pin the buttons so they never shrink and size the FIELD explicitly:
     26px holds "88" (17px) with ~4px either side, 28+26+28 = 82px total. */
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart > .bizco-loop-qty > .bizco-qty-dec,
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart > .bizco-loop-qty > .bizco-qty-inc {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
  }
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart > .bizco-loop-qty > input {
    flex: 0 1 26px !important;
    width: 26px !important;
    min-width: 0 !important;
    max-width: 26px !important;
  }
}

/* ============================================================
   EXPLORE BY CATEGORY -- BIGGER TILES ON MOBILE (max 767px)
   bizco-cat-mobile-room v1  *** revert = delete this block ***
   Companion to bizco-pp-mobile-room v1. The category tiles were
   the smallest thing in the browsing block: 112x67px at 390px
   with a 10px label, while the product cards beside them had
   just been widened to 144px. Same token here, so the two
   shelves read as one system again.

   MEASURED at 390px: tile 112 -> 144, photo 111x67 -> 143x86
   (about 65% more image area), label 10px -> 12.1px.
   At 767px: tile 161 -> 176, photo 160x96 -> 175x105, label
   10.4px -> 13px.

   *** GOTCHA: this MUST set `flex`, not `width`. ***
   The tiles are flex items and an existing rule
   (`@media(max-width:640px){.bizco-cat{flex:0 0 30%}}`) sets a
   flex-BASIS. flex-basis beats width when resolving a flex
   item's main size, so `width: ... !important` is silently
   ignored no matter how high the specificity -- verified by
   testing `.bizco-cat`, `.bizco-cats .bizco-cat` and
   `.bizco-cats-nav .bizco-cats .bizco-cat` with !important, all
   of which left the tile at 112px. Setting `flex` fixes it at
   plain 0,1,0 specificity.

   The aspect ratio is deliberately NOT touched: bizco-cat-shorter
   v2's 5/3 mobile crop is a design decision, and widening at a
   fixed ratio grows the photo in both directions anyway.

   The label clamp is capped at 13px because "Janitorial &
   Supplies" is the longest name -- at 14px it wraps to two
   lines, which on a short tile eats the photo. Verified 0
   labels wrapping at 320/390/767 (widest 102/112/120px against
   113/123/155px of room).
   ============================================================ */
@media (max-width: 767px) {
  .bizco-cat {
    flex: 0 0 clamp(134px, 37vw, 176px) !important;
  }
  .bizco-cat-label {
    font-size: clamp(11px, 3.1vw, 13px) !important;
  }
}
/* end bizco-cat-mobile-room v1 */

/* ===== bizco-mobile-header-compact v3 =====
   Mobile (max-width 767px) header, all three rows.

   v3 (2026-08-10) TIGHTENED THE GAP ABOVE THE SEARCH BAR at the user's
   request. It was 23.25px: 12.5px of air under the logo from row 1, plus
   10.75px above the field from row 2. Both rows centre their contents, so
   the only way to take that out is to shrink the rows themselves. 73 -> 64
   and 70 -> 62 brings the gap to 14.75px and the header to 161px. This
   deliberately overrides the "leave the 23.25px alone" note that
   bizco-mobile-header-white v1 carries further down.

   ROW 1 - white logo bar. Blocksy's global.css gives it --height:100px in
   its mobile band; v1 trimmed that to 84px and v2 to 73px. v3 takes it to
   64px, which leaves 8px of air above and below the 48px logo. The other
   two items in the row are shorter (account block 40px, hamburger 18px), so
   the logo is what sets the floor.

   ROW 2 - green search bar row. Blocksy sets --height:88px; the search
   control was 55px tall, leaving 16.5px above and below. Two changes here:
     a) the bar itself is 10% shorter - 55px -> 49.5px. The 55px was the
        1.5px form border on each edge plus a 52px input, so the input goes
        to 46.5px. The submit button carries height:3.2rem / min-height:100%
        in the base FiboSearch block, both of which would overhang a shorter
        form (the form's overflow:hidden would clip it rather than resize
        it), so it is pinned to the same 46.5px here.
     b) the surrounding air drops 16.5px -> 6.75px per side, so the row is
        62px (v2 had 70px, i.e. ~10px per side). Note the bar measures
        48.5px, not the 49.5px that arithmetic predicts: Chrome uses 1px for
        the form's specified 1.5px border.

   ROW 3 - the green promo strip stays at 35px.

   --header-height is updated to the new total (207px -> 178px -> 161px) so anything
   offsetting by it stays aligned. The offcanvas panel does NOT need a
   number here: snippet 111 measures the live header bottom edge into
   --bizco-mobmenu-top, so it follows this automatically. */
@media (max-width: 767px) {
  body[data-header*="type-1"] .ct-header [data-device="mobile"] [data-row*="top"] {
    --height: 64px !important;
  }
  body[data-header*="type-1"] .ct-header [data-device="mobile"] [data-row*="middle"] {
    --height: 62px !important;
  }
  body[data-header*="type-1"] {
    --header-height: 161px !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input {
    height: 46.5px !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-submit {
    height: 46.5px !important;
    min-height: 0 !important;
  }
}

/* ============================================================
   CATEGORY GRID -> SAME COLUMN STEPS AS SHOP/SEARCH
   bizco-grid-unify v1  (2026-07-27)
   Category archives were the only grid still using Blocksy's native
   column counts, whose tablet breakpoint is 999.98px. So 4 columns
   were held all the way down to 1000px - cards were 203px wide by
   then - and at 999px Blocksy switched to 3 columns and every card
   and image jumped to 280px. A 1px move resizing every tile by 77px.
   Shop/search already step 4/3/2/1 at 1200/860/520 (bizco-unified-grid
   v3), where the change lands while cards are still ~250px. Give the
   category grid the identical steps: nothing at all happens across
   999/1000/1001 now, and cards stay in a ~250-410px band instead of
   bottoming out at 203px.
   Covers product cards AND subcategory tiles - both are li children
   of the same ul. The <=767px subcategory rules (auto-fill 140px) and
   the <=480px single-column card rules still win, being later/more
   specific.
   ============================================================ */
body.tax-product_cat ul.products.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
  body.tax-product_cat ul.products.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 860px) {
  body.tax-product_cat ul.products.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  body.tax-product_cat ul.products.products {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   LOOP CARD REPAIR  bizco-loop-card-repair v1  (2026-07-27)

   Three separate problems, one shared cause: the mobile card block
   at max-width:767px sets up a [image | actions] card AND asks for a
   single-column list, but `bizco-unified-grid v3` is later in the file
   and more specific, so its 2-columns-to-520px and its unconditional
   .bizco-inventory-list-btn rule both won. The horizontal card was
   therefore squeezed into a half-width column from 767px down to
   521px: the actions track collapsed to ~105px, so /Case overflowed
   the card, "Add to cart" broke onto three lines and "Add to My
   Inventory" onto five. Everything came right at 520px only because
   the list finally went single-column there.

   1. Single column from 767px down - i.e. the list goes 1-up exactly
      where the card turns horizontal, instead of 247px later. Column
      steps are now 4 / 3 / 2 / 1 at 1200 / 860 / 767.
   2. The inventory button goes back to its own full-width row under
      the card on mobile (v3 had pulled it into the narrow actions
      column via grid-column:auto).
   3. Both button labels never wrap.
   Selectors use ul.products.products li.product.product (0,6,3) to
   outrank v3's (0,5,3).
   ============================================================ */

/* 1. one column as soon as the card is horizontal.
      CATEGORY ONLY: the [image | actions] card is the category
      archive's layout. On shop/search, v3 makes every card a stacked
      flex column at all widths, and those read fine two-up down to
      520px - forcing them 1-up here just blew the product image up to
      the full 650px card width. */
@media (max-width: 767px) {
  body.tax-product_cat ul.products.products {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  /* (v1 mobile inventory rule removed in v5 - see bizco-loop-card-repair v5) */

}

/* 3. never wrap either button label, at any width */
:is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
ul.products.products li.product.product .bizco-loop-add,
:is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
ul.products.products li.product.product > .bizco-inventory-list-btn {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* 4. >=768: when the cart sits inline with the price, hug the content
      and pin it to the card's right edge instead of stretching the
      Add to cart button across all the leftover space. The cart keeps
      flex-grow so that when it DOES wrap it still spans the card;
      justify-content:flex-end is what right-aligns the pair, and the
      button no longer grows into the slack. */
@media (min-width: 768px) {
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart {
    justify-content: flex-end !important;
  }
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart > .bizco-loop-add {
    flex: 0 1 auto !important;
    width: auto !important;
  }
}

/* ============================================================
   LOOP CARD REPAIR  bizco-loop-card-repair v2  (2026-07-27)
   1. cart right-aligned ONLY when it shares the price's line,
      centred when it has wrapped underneath.
   2. category mobile card: inventory button directly beneath Add to
      cart, same width, shrinking in step.
   3. a proper phone card below 480px.
   ============================================================ */

/* ------------------------------------------------------------
   1. Alignment follows the LINE, not the width.
   Flexbox gives no selector for "which wrap line am I on", so the
   card becomes a query container and the cart asks how much room the
   card has. 310px = the wrap threshold (price 98-111 + 8 gap + 190
   cart basis). Above it the cart shares the price's line -> pin right;
   below it the cart has wrapped underneath -> centre it.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
  ul.products.products li.product.product {
    container-type: inline-size;
  }
  @container (min-width: 310px) {
    :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
    ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart {
      justify-content: flex-end !important;
    }
  }
  @container (max-width: 309.98px) {
    /* v3: on its own line the cart spans the card and Add to cart takes
       the slack, instead of the pair sitting centred with dead air
       either side. The qty stepper keeps its 82px, the button fills. */
    :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
    ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart {
      justify-content: flex-start !important;
      width: 100% !important;
    }
    :is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
    ul.products.products li.product.product > .bizco-loop-pricerow > .bizco-loop-cart > .bizco-loop-add {
      flex: 1 1 auto !important;
      width: auto !important;
    }
  }
}

/* ------------------------------------------------------------
   2. 481-767px category card: [image | actions] with the inventory
   button as a THIRD grid row directly under the actions, image
   spanning both. It used to be grid-column:1/-1, i.e. a full-width
   row after the image, which is why it sat marooned at the bottom of
   the card. Both the cart cluster and the inventory button are
   width:100% of the same 320px-capped track, so they are always
   identical width and shrink together.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "title title"
      "img   act"
      "img   inv" !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
    align-items: start !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > figure {
    grid-area: img !important;
    grid-row: 2 / 4 !important;
    align-self: start !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .bizco-loop-pricerow {
    grid-area: act !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 0 0 auto !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .bizco-inventory-list-btn {
    grid-area: inv !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 0 0 auto !important;
  }
  /* everything inside the actions track fills that same 320px */
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .bizco-loop-cart,
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .bizco-loop-qty,
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .bizco-loop-add,
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .price {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ------------------------------------------------------------
   3. PHONE CARD, <=480px.
   Was: a small centred thumbnail, centred price and a narrow button
   stack - lots of dead space down the sides and nothing to scan down.
   Now a conventional mobile product row: a 104px thumbnail with the
   title beside it on top, then the buy controls across the FULL card
   width underneath. Giving the controls the whole width (instead of
   a ~180px column beside the image) is what stops the labels from
   crowding: price and qty+Add to cart share a line while they fit
   and the cart drops below the price only under ~330px, and the
   inventory button spans the card. Left-aligned throughout so the
   eye has one column to run down.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-areas:
      "img title"
      "act act"
      "inv inv" !important;
    column-gap: 14px !important;
    row-gap: 12px !important;
    padding: 14px !important;
    align-items: start !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > figure {
    grid-area: img !important;
    grid-row: auto !important;
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
    margin: 0 !important;
    justify-self: start !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .woocommerce-loop-product__title {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    align-self: start !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .bizco-loop-pricerow {
    grid-area: act !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .price {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 20px !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .bizco-loop-cart {
    flex: 1 1 190px !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: none !important;
    gap: 8px !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .bizco-loop-qty {
    flex: 0 0 82px !important;
    width: 82px !important;
    max-width: 82px !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) .bizco-loop-add {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .bizco-inventory-list-btn {
    grid-area: inv !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
/* ============================================================
   HOME PRODUCTS — TABLET/LAPTOP ROOM                     [BIZCO]
   bizco-pp-mid-room v1   *** revert = delete this block ***
   Companion to bizco-pp-mobile-room v1 (max-width 767px). That
   pass left the middle bands with the original defect.
   Measured BEFORE: 900px viewport -- 108px cards, 10px titles,
   14/20 names clipped at the 3-line cap; 1100px -- 99px cards
   (the width:10% desktop rule makes cards NARROWER than tablet
   until ~1500px), 20/20 clipped, longest name needs 8 lines.
   1. WIDTH 768-999.98: clamp(160px, 21vw, 200px)
      = 161px @768 (matches the 161px category tile there),
      189px @900, 200px @999. Type bumped to the mobile scale
      (title 12.5px was 10px; price 15px was 11px; label 11px).
   2. WIDTH 1000+: max(10%, 140px) -- a FLOOR, not a resize.
      10% of the track overtakes 140px at ~1550px viewport, so
      big desktops keep the exact size the user already approved
      (145.6px @1600, unchanged); 1000-1400 rises from ~90px to
      140px. Same selector as the tile-compact 10% rule, later
      in the file, so it wins at equal specificity.
   3. NAME CAP 3 -> 5 lines for 768-1399.98 only, by the same
      mechanism as bizco-pp-mobile-room v1: the cap is a
      max-height (line-clamp draws an ellipsis, so pp-unit v1
      dropped it), min-height:0 releases the reserved 5-line
      box, and margin-top:auto on the price keeps every price
      on the shared baseline because the flex track stretches
      all cards to the tallest. 1400+ keeps the 3-line cap the
      user called good.
   ============================================================ */
@media (min-width: 768px) and (max-width: 999.98px) {
  .bizco-pp-card {
    width: clamp(160px, 21vw, 200px) !important;
  }
  .bizco-pp-title {
    font-size: 12.5px !important;
  }
  .bizco-pp-price {
    font-size: 15px !important;
  }
  .bizco-pp-label {
    font-size: 11px !important;
  }
}
@media (min-width: 1000px) {
  .bizco-pp:not(.bizco-cats-nav) .bizco-pp-card {
    width: max(10%, 140px) !important;
  }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  /* bizco-pp-cap3 v1 (mid), owner 2026-08-28: three lines here too, so the
     shelf reads the same on a phone, a tablet and a laptop. */
  .bizco-pp-title {
    min-height: 0 !important;
    max-height: calc(1.35em * 3 + 12px) !important;
  }
  .bizco-pp-price {
    margin-top: auto !important;
  }
}
/* end bizco-pp-mid-room v1 */


/* ============================================================
   LOOP CARD REPAIR  bizco-loop-card-repair v3  (2026-07-27)
   ============================================================ */

/* 1. "+ Add to My Inventory" optically centred.
   The label was centred as an inline RUN that includes the ::before
   "+" and its 8px margin, so the words themselves measured 16px right
   of centre (99px of slack on the left, 83px on the right) - which is
   what reads as off-centre. Making the button a flex box centres the
   "+" and the label as one group with a symmetric gap, and it stays
   centred even if the label ever outgrows the button. */
:is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
ul.products.products li.product.product > .bizco-inventory-list-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
}
:is(body.search-results, body.post-type-archive-product, body.tax-product_cat)
ul.products.products li.product.product > .bizco-inventory-list-btn::before {
  margin-right: 0 !important;
}

/* 2. Phone card: stop clipping the product name.
   Beside a 104px thumbnail the title had ~192px, and a 3-line clamp
   cut "...Container with Lid - 240/Case" off mid-name. On a wholesale
   catalogue the pack size is the part people are scanning for, so the
   name now wraps in full - this is a single-column list, so uneven
   card heights cost nothing. The thumbnail drops to 96px to give the
   title a little more room. */
@media (max-width: 480px) {
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > figure {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
  }
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .woocommerce-loop-product__title {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: horizontal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }
}

/* === bizco-search-clear-gap v1: when the search bar has text, the clear X shows
   (plugin JS pins it 40px wide, flush left of the 56px submit) - pad the input so
   typed text stops left of the X instead of sliding underneath it === */
.dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-search-input {
  padding-right: 100px !important;
  text-overflow: ellipsis;
}


/* === bizco-swatch-tooltip v1 ===
   Blocksy Pro's variation swatches render a span.ct-tooltip inside
   every pill whose text is just the pill's own label (swatch-element-render.php
   builds it from element_label unless the term's tooltip_type is set to
   "none"), and variation-swatches.min.css reveals it on
   .ct-swatch-container:hover. On a touch screen a tap counts as hover, so
   tapping a size/shape pill popped up a bubble repeating what the pill already
   said. The visible label lives in .ct-swatch-content and is rendered
   independently, so hiding the tooltip loses nothing.
   Done in CSS rather than per-term admin settings because tooltip_type
   defaults to on for every NEW attribute term, and because this covers every
   place swatches render (PDP, catalog cards, filter widgets) at once.
   Scoped to .ct-swatch-container on purpose - .ct-tooltip is also used by the
   social share box, the filter widgets and the shortcuts bar. */
.ct-swatch-container .ct-tooltip {
  display: none !important;
}

/* ============================================================
   LOOP CARD REPAIR  bizco-loop-card-repair v4  (2026-07-27)
   Phone card: vertically centre the price against the qty stepper
   and Add to cart. The row already had align-items:center, but the
   older max-width:767px block pins BOTH .price and .bizco-loop-cart
   to `align-self: flex-end` (it was written for the layout where the
   price sat above a stacked button column), and align-self beats the
   parent's align-items. That bottom-aligned the 23px price against
   the 36px controls, leaving it 6px below their centre line.
   ============================================================ */
@media (max-width: 480px) {
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .bizco-loop-pricerow > .price,
  body.tax-product_cat ul.products.products li.product.product:not(.product-category) > .bizco-loop-pricerow > .bizco-loop-cart {
    align-self: center !important;
  }
}

/* ==========================================================================
   bizco-search-mobile v1  (2026-07-27)

   The FiboSearch suggestions dropdown had no height cap below 768px. The
   768-999.98px band sets max-height + overflow-y; phones were skipped, so the
   list rendered its full natural height with no scroll box and everything past
   the keyboard line was unreachable. The sticky "See all results" footer was
   sticking to a bottom edge that sat off-screen.

   Measured on a real 390px render before this block: dropdown opens at 162px,
   each row 94px (56px thumb, 12px padding, title wrapping to THREE lines in a
   203px column), roughly 290px of space above the keyboard = 3 rows.

   Height comes from snippet 112's --bizco-search-max, not from CSS: iOS does
   not shrink the layout viewport when the keyboard opens, so calc(100vh - x)
   returns the same number keyboard or no keyboard. Only visualViewport knows.
   ========================================================================== */

/* --- Price on the suggestion (ALL widths) ---------------------------------
   FiboSearch renders it as .dgwt-wcas-content-wrapp > .dgwt-wcas-meta >
   .dgwt-wcas-sp, a sibling of the title inside a wrapper that is already
   flex + space-between, so it lands right-aligned with no layout work. These
   are wholesale SKUs where price per case is the whole decision, so it belongs
   in the suggestion rather than one tap away on the product page.
   Enabled via the show_product_price setting; the index already carried
   html_price for all 63 rows, so no reindex was needed. */
.dgwt-wcas-suggestion .dgwt-wcas-meta {
  flex: 0 0 auto !important;
  padding-left: 10px !important;
  display: flex !important;
  align-items: center !important;
}
/* #D32F2F is the site's price red - same value as the PDP variation price, the
   cost-box total, "works with" and the loop cards - so the dropdown now matches
   the product cards it is competing with instead of using a neutral grey.

   The display:flex here is a FIX, not decoration. FiboSearch ships
   .dgwt-wcas-sp as display:inline while blockifying its child
   (.dgwt-wcas-has-img .dgwt-wcas-sp > * {display:block}). An inline box with a
   block child emits a phantom strut line box before that child, so the amount
   was pushed down by one whole line-height: measured at 30px above / 12.5px
   below inside a 60px row, i.e. 8.8px low, while the title next to it sat
   perfectly centred at 10.9/10.9. Making this a flex column removes the strut
   and justify-content does the centring honestly. column + flex-end keeps a
   del/ins sale pair stacked and right-aligned the way the blockification
   intended. */
.dgwt-wcas-suggestion .dgwt-wcas-sp {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #D32F2F !important;
  line-height: 1.3 !important;
  text-align: right !important;
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.dgwt-wcas-suggestion .dgwt-wcas-sp del {
  opacity: .5 !important;
  font-weight: 500 !important;
}
/* the sale price is the live one, so it keeps the red rather than turning green */
.dgwt-wcas-suggestion .dgwt-wcas-sp ins {
  text-decoration: none !important;
  color: inherit !important;
}

/* --- Touch devices: nothing is pre-selected -------------------------------
   FiboSearch tags the first result .dgwt-wcas-suggestion-selected so arrow
   keys have a starting point. There are no arrow keys on a phone, and a
   green-tinted first row reads as "already chosen". :hover is sticky after a
   tap on touch for the same reason it was on the home FAQ rows, so both go and
   :active takes over as the press feedback. The "See all results" footer is
   excluded: it is position:sticky over the scrolling list and needs to keep an
   opaque background, or rows scroll through it. */
@media (hover: none), (pointer: coarse) {
  .dgwt-wcas-suggestion:not(.dgwt-wcas-suggestion-more):hover,
  .dgwt-wcas-suggestion:not(.dgwt-wcas-suggestion-more).dgwt-wcas-suggestion-selected {
    background: transparent !important;
  }
  .dgwt-wcas-suggestion:not(.dgwt-wcas-suggestion-more):active {
    background: #E8F5EE !important;
  }
  .dgwt-wcas-suggestion-more:hover { background: #FFFFFF !important; }
  .dgwt-wcas-suggestion-more:active { background: #E8F5EE !important; }
}

/* --- Phones ------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* Scroll box sized to the visible viewport. The fallback value is for no-JS
     only; it uses dvh rather than vh so it at least tracks Safari's collapsing
     toolbar, but neither unit reacts to the keyboard - that is snippet 112's
     job. overscroll-behavior stops a flick at the end of the list from
     scrolling the page behind it. */
  .dgwt-wcas-suggestions-wrapp {
    max-height: var(--bizco-search-max, calc(100dvh - 260px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Compact rows: 94px -> 60px for a two-line name (71px for the handful of
     names long enough to still need three, e.g. the 9x9 compartment foam).
     Titles are deliberately NOT line-clamped: the pack size ("- 450/Case")
     sits at the END of these names and is the thing people scan for, same
     reasoning as the phone category cards further down this stylesheet. Room
     for two lines comes instead from dropping the constant "BIZCO Essentials"
     prefix in the dropdown (wp-content/fibosearch.php).

     The numbers below are not guesses, and the margin is about one word, so
     re-measure before widening anything. Measured with canvas measureText in
     the real Outfit 500 face inside the real 343px dropdown: the title column
     has to reach ~208px before "27 oz Kraft Folded Paper Take-Out Container -
     450/Case" fits two lines at 14.5px. The full budget, all measured:

       343  dropdown
       -2   its 1px borders
       -12  its 6px padding          = 329 row
       -14  the row's 7px padding    = 315
       -40  thumbnail
       -8   flex gap
       -56  price column (5px padding + ~51px of "$49.32" at 13.5px)
       ---
        211 for the title

     Two of those numbers are less obvious than they look.
     .dgwt-wcas-content-wrapp ships as flex:0 1 auto, so it shrink-wraps and
     silently abandons 8px of the row it could have used; it needs to grow.
     And .dgwt-wcas-si is 56px from snippet 110's #bizco-wcas-thumbs <style>,
     which prints on wp_head at priority 200 - AFTER this stylesheet, which
     goes out at 101 - so an equal-specificity !important there would win.
     Two classes (0,2,0) beats its single (0,1,0). */
  .dgwt-wcas-suggestion .dgwt-wcas-si {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  .dgwt-wcas-suggestion {
    gap: 8px !important;
    padding: 7px !important;
    border-bottom: 0 !important;   /* at 5+ visible rows the rules read as a table */
  }
  .dgwt-wcas-suggestion .dgwt-wcas-st-title {
    font-size: 14.5px !important;
    line-height: 1.32 !important;
  }
  .dgwt-wcas-suggestion .dgwt-wcas-sp {
    font-size: 13.5px !important;
  }
  .dgwt-wcas-suggestion .dgwt-wcas-meta {
    padding-left: 5px !important;
  }
  /* the row's own gap already separates thumb from text, and this has to grow
     rather than shrink-wrap or the 8px it gives up comes straight off the
     title column (see the budget above) */
  .dgwt-wcas-suggestion .dgwt-wcas-content-wrapp {
    padding-left: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Footer is permanently on screen now that the list scrolls under it, so it
     no longer needs to shout. 20px of padding was sized for a footer nobody
     could reach. */
  .dgwt-wcas-suggestion-more {
    padding: 12px !important;
  }
  .dgwt-wcas-suggestion-more .dgwt-wcas-st-more {
    font-size: 14.5px !important;
  }
}

/* --- "See all results" footer keeps its count (ALL widths) ----------------
   FiboSearch renders this row as "<label> (26)", the 26 being the real total
   from the query, and the JS builds it as .dgwt-wcas-st-more +
   .dgwt-wcas-st-more-total. The earlier styling relabelled it by setting
   font-size:0 on the row and printing "See all results..." from a ::after,
   which threw the count away with it. The count is the single most useful
   thing on that row - it tells you whether committing to the results page is
   worth it - and the footer is permanently on screen now that the list
   scrolls underneath it, so it is worth getting right. The label itself is now
   the search_see_all_results_text setting ("See all results"), so the real
   text can simply be shown. */
.dgwt-wcas-suggestion-more {
  font-size: 15px !important;   /* undo the font-size:0 relabel trick */
}
.dgwt-wcas-suggestion-more::after {
  content: none !important;
  display: none !important;
}
.dgwt-wcas-suggestion-more .dgwt-wcas-st-more {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0F9558 !important;
  text-transform: none !important;
}
.dgwt-wcas-suggestion-more .dgwt-wcas-st-more-total {
  font-weight: 500 !important;
  opacity: .75 !important;
}


/* ============================================================
   LOOP CARD REPAIR  bizco-loop-card-repair v5  (2026-07-27)
   Shop/search phone card: the "+ Add to My Inventory" button was
   capped at 300px in a 378px card and floated right, because the v1
   mobile rule (written for the category horizontal card, where a cap
   IS wanted) was scoped to all three page families. That rule is gone;
   these restate the stacked card's intent explicitly.
   Spacing: the 34px gap above the button was three stacked values -
   10px pricerow margin-bottom + 12px card flex row-gap + 12px button
   margin-top. Both margins are zeroed so the card's own 12px rhythm
   is the only separation.
   ============================================================ */
@media (max-width: 767px) {
  :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all)
  ul.products.products li.product.product > .bizco-inventory-list-btn {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all)
  ul.products.products li.product.product > .bizco-loop-pricerow {
    margin-bottom: 0 !important;
  }
}
/* ============================================================
   MEGA MENU - tile label must never fall under the thumbnail
   bizco-megamenu-tile-nowrap v1  (2026-07-28)
   WordPress core ships `.wp-block-columns{flex-wrap:wrap!important}`
   and only cancels it at `@media (min-width:782px)`. Between 768px
   (the lowest width where the desktop header is still on) and
   781.98px the two columns inside every .mega-tile become wrappable,
   and because the label column is `flex:1 1 auto` its flex base size
   is the heading's max-content width, so it drops onto a second line
   under the image. Pinning nowrap on the TILE's own columns keeps the
   label beside the thumbnail at every width. The outer 3-column row is
   deliberately not touched - it must keep wrapping for the 3->2
   collapse in the 768-999.98px band.
   ============================================================ */
.header-menu-1 .sub-menu .mega-tile.wp-block-columns,
.header-menu-1 .sub-menu .mega-tile .wp-block-columns {
  flex-wrap: nowrap !important;
}
.header-menu-1 .sub-menu .mega-tile .wp-block-column:last-child {
  min-width: 0 !important;
}
/* end bizco-megamenu-tile-nowrap v1 */

/* ============================================
   bizco-cat-hero-mobile v1
   PHONE ONLY (<=767.98px): halve the height of the
   category / shop hero banner (250px -> 125px) and
   keep the title centered over the cropped image.
   Mirrors the 768-999.98px band above, which uses 150px.
   Desktop and tablet are untouched.
   ============================================ */
@media (max-width: 767.98px) {
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] {
    position: relative !important;
    min-height: 0 !important;
    height: 125px !important;
  }

  /* shrink the image + crop to middle */
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] figure,
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] .ct-media-container {
    height: 125px !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] .ct-media-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* kill Blocksy's 250px min-height + 50px padding on the title container */
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] > .entry-header,
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] > [class*="ct-container"] {
    min-height: 0 !important;
    --min-height: 0 !important;
    padding: 0 !important;
    --container-padding: 0 !important;
  }

  /* pin the title to fill the 125px hero and center it */
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] .entry-header {
    position: absolute !important;
    inset: 0 !important;
    height: 125px !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
  }
  :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] .page-title {
    margin: 0 !important;
  }
}

/* ============================================================
   MOBILE OFFCANVAS MENU — type scale, button height, spacing
   bizco-mobmenu-tune v1                                [BIZCO]

   Tunes the panel that opens from the hamburger (767px and below). It
   comes LAST on purpose:  rule it overrides in the two
   earlier offcanvas blocks is !important, so equal specificity
   plus source order is what wins here. Keep it at the end of the
   stylesheet if you reorganise this file.

   Measured before (390px viewport):
     Quick Action buttons ....... 60.0px tall, 20px text
     section headers ............ 22.4px text
     category / quick-link rows . 20px text, 58.9px tall
     gap under the trial button . 38px (20 submenu + 18 li)
   ============================================================ */
@media (max-width: 767px) {

  /* ---- Quick Actions: Sign in / Sign Up / Start your Free Trial ----
     Shorter buttons. 17px text on a 1.3 line-height with 10px of
     padding lands at ~45px, still comfortably above the 44px
     minimum tap target. */
  #offcanvas .mobile-menu #menu-item-2324 > .sub-menu > li > .ct-menu-link {
    padding: 10px 14px !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* ---- gap under the trial button ----
     The .sub-menu's own bottom margin plus the 18px on      top-level LI stacked to 38px. 10px + 18px = 28px. */
  #offcanvas .mobile-menu #menu-item-2324 > .sub-menu {
    margin: 0 0 10px 0 !important;
  }

  /* ---- the green MAX wordmark inside the trial button ----
     Markup comes from snippet "BIZCO Mobile menu MAX wordmark"
     (nav_menu_item_title on item 2323). The PNG is 200x90, so
     width follows from the height and the ratio never drifts. */
  #offcanvas .mobile-menu .bizco-max-mark {
    display: inline-block;
    height: 1.15em;
    width: auto;
    vertical-align: -0.22em;
    margin: 0 1px;
  }

  /* ---- section headers: Product Categories / Quick Links ---- */
  #offcanvas .mobile-menu #menu-item-2317 > .ct-sub-menu-parent > .ct-menu-link,
  #offcanvas .mobile-menu #menu-item-2325 > .ct-sub-menu-parent > .ct-menu-link {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  /* ---- the tappable rows under each header ----
     16.5px on the theme's 1.65 line-height = 27.2px, + the 8px
     padding pair = ~43px rows. */
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link,
  #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link {
    font-size: 16.5px !important;
  }

  /* ---- "View All Products" (menu item 3138) ----
     Sits last under Product Categories and points at the Shop
     page, mirroring item 763 in the desktop nav. Green + a hair
     more weight so it reads as the section's see-all link rather
     than a sixth category. */
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link {
    color: #0F9558 !important;
    font-weight: 600 !important;
  }
  #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link::after {
    color: #0F9558 !important;
  }

  /* ---- kill the green row highlight on touch ----
     bizco-primary-menu-tap v1 fills a row #F0F7F3 on :hover /
     :active. On a touch screen :active fires the moment a finger
     lands, so rows lit up green during an ordinary scroll, and
     :hover then stuck to the last-touched row afterwards. There
     is no hover on these devices to style, so drop both. Mice
     (fine pointers) keep the highlight. */
  @media (hover: none), (pointer: coarse) {
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link,
    #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link,
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:hover,
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:active,
    #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:hover,
    #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:active {
      background: transparent !important;
      transition: none !important;
      -webkit-tap-highlight-color: transparent;
    }
    /* the label + "›" keep their resting colour through the touch */
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:hover,
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:active,
    #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:hover,
    #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:active {
      color: #2D2D2D !important;
    }
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:hover::after,
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:active::after,
    #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:hover::after,
    #offcanvas .mobile-menu #menu-item-2325 > .sub-menu > li > .ct-menu-link:active::after {
      color: #2D2D2D !important;
    }
    /* View All Products stays green through a touch */
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link:hover,
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link:active,
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link:hover::after,
    #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link:active::after {
      color: #0F9558 !important;
    }
  }
}




/* ============================================================
   HOME — TIGHTER GAP ABOVE "EXPLORE BY CATEGORY"        [BIZCO]
   bizco-cats-gap-desktop v1   *** revert = delete block ***
   The categories group and the products group carry the SAME
   class (.bizco-popular), so bizco-home-unify v1's shared
   clamp(48px,7vw,72px) rhythm gave both the identical top gap
   and there was no way to move one without the other. This
   unlinks the categories group by the only thing unique to it
   in the markup -- its heading (the products group is the one
   with .bizco-shopall, already singled out the same way by
   bizco-shelf-gap v1). Desktop only (>=1000px): tablet keeps
   the shared rhythm and phones keep
   bizco-section-rhythm-mobile v1's clamp(30px,8vw,40px).
   Value: 72px -> 44px at 1600. Deliberately still LARGER than
   the 34px shelf gap below it, so categories + products keep
   reading as one browsing block that sits apart from the hero.
   Needs !important + the (0,2,0) :has() specificity to beat the
   plain `.bizco-popular` !important rule in bizco-home-unify v1.
   ============================================================ */
@media (min-width: 1000px) {
  .bizco-popular:has(.bizco-cats-heading) {
    margin-top: clamp(30px, 4.2vw, 44px) !important;
  }
}


/* ============================================================
   HOME HERO -- EYEBROW CENTRED IN ITS BAND              [BIZCO]
   bizco-hero-eyebrow-center v2  *** revert = delete block ***
   Puts the kicker ("WHOLESALE SUPPLIES FOR..." / "DFW
   Wholesale . Food & Beverage") midway between the top edge of
   the green hero and the top of the headline's glyphs.

   THE KNOB IS THE ROW'S TOP MARGIN, NOT THE EYEBROW'S BOTTOM
   MARGIN. v1 set only .bizco-eyebrow{margin-bottom} and did
   nothing at all on phones, which is what made it look
   unchanged. The gap between the two is the hero column's
   Gutenberg blockGap -- `.wp-container-core-column-is-layout-*
   > * + *  { margin-block-start: var(--wp--preset--spacing--40) }`
   = 16px -- and adjacent-sibling margins COLLAPSE, so the gap is
   max(eyebrow margin-bottom, 16px). Every value v1 could set was
   below 16, so 16 always won. Here the eyebrow's bottom margin is
   zeroed and the row's top margin carries the whole gap, so one
   declaration controls it. The row is targeted via
   `.bizco-hero-inner >` rather than that generated container
   class, whose hash changes whenever the column's block
   attributes are edited.

   HOW THE VALUES WERE OBTAINED: by scanning the actual painted
   pixels of a headless-Chrome capture of the live page (green
   ink rows for the eyebrow, near-black ink rows for the
   headline) at ten widths. Do NOT re-derive these from canvas
   measureText(): its actualBoundingBoxAscent for the headline
   ran ~8px taller than the glyphs really paint, which is exactly
   how v1's numbers came out wrong.

     gap = heroPadTop + columnPadTop + Ae - Be - Ch
   Ae/Be are the eyebrow's own leading above/below its ink; Ch is
   the headline's leading gap, ~0.19 x font-size at the mobile
   row's line-height of 1.14 and ~0.138 x font-size at the
   desktop 1.04. The clamps MIRROR the live .bizco-headline
   font-size clamps -- retune them together or the centring
   drifts. Line count is irrelevant (top gap comes off the first
   line, bottom gap off the last), so the 2-line eyebrow at
   768-1439px needs no special case.

   Measured after, ink-top to ink-top, above / below:
     360  18.0/18.1    768  32.0/32.4   1280  32.0/32.9
     390  18.0/18.5    900  30.5/31.2   1600  32.0/31.4
     430  18.0/18.1   1100  32.0/31.5   1920  32.0/31.4
   ============================================================ */
.bizco-eyebrow { margin-bottom: 0 !important; }

@media (max-width: 767px) {
  /* 14px hero pad, no column pad, headline clamp(27px,8.2vw,34px) @ lh 1.14 */
  .bizco-hero-inner > .bizco-headline-row {
    margin-top: calc(13.6px - 0.19 * clamp(27px, 8.2vw, 34px)) !important;
  }
}
@media (min-width: 768px) and (max-width: 780px) {
  /* bizco-hero-pad-half v1's 8px pad + 1rem column pad, flat 38px headline */
  .bizco-hero-inner > .bizco-headline-row { margin-top: 16.4px !important; }
}
@media (min-width: 780.02px) {
  /* 0.5vh hero pad (kept as vh so it tracks window height) + 1rem column pad */
  .bizco-hero-inner > .bizco-headline-row {
    margin-top: calc(
      0.5vh + 14.3px
      - 0.138 * clamp(34px, 3.5vw, 52px)
    ) !important;
  }
}
/* end bizco-hero-eyebrow-center v2 */


/* ============================================================
   SRP PHONE TIDY-UP  bizco-srp-mobile-tidy v1  (2026-07-28)
   Two phone-only (<=767px) corrections to the search results page.
   Desktop and tablet >=768px are untouched.

   1. Category-strip scroll arrows escaped the white card.
      The arrows are absolutely positioned into the card's side
      padding gutter (bizco-cats-prev/next, left/right:-24px, 24px
      wide) which is exactly right at the desktop padding of
      12px 24px. Under 768px the card drops to 10px 16px, so a
      24px arrow pinned at -24px hangs 8px past the rounded
      border on BOTH sides - the white bar + divider line sitting
      outside the card in the screenshot. Match the arrow to the
      phone gutter (16px wide at -16px) so it sits flush inside
      the border again, and clip the card as a backstop.
      The chevron keeps its 22px size; the glyph is ~9px wide.

   2. Too much air between the product name and the price.
      The stacked card is a flex column with row-gap:12px, and
      the title also carries margin-bottom:4px from
      bizco-unified-grid v3 - so name -> price was a 16px box gap
      while price -> qty/Add-to-cart is the pricerow's own 10px.
      Optically the mismatch is wider still (the title's last line
      box and the price's 29.7px line box each add ~6px of
      leading): measured ink-to-ink, 25.5px vs 16.5px.
      Pulling the title's bottom margin to -6px makes the box gap
      6px = 15.5px ink-to-ink, i.e. the same as the price -> cart
      gap. Done on the TITLE rather than the pricerow on purpose:
      the pricerow's margin-top:auto is what bottom-aligns the
      price/cart/inventory group across a two-up row in the
      521-767px band, and overriding it would break that. A
      negative margin here only closes up once the card has no
      surplus height (i.e. the one-per-row phone layout, and the
      tallest card of a two-up row) - shorter cards in a two-up
      row still bottom-align exactly as before.
      Applies to the search results page AND the /shop archive
      (added 2026-07-28): both render the SAME card from
      bizco-unified-grid v3, so they stay identical. Category
      archives use a different card and are not touched.
   ============================================================ */
@media (max-width: 767px) {
  /* 1. (was the arrow gutter fix — arrows removed 2026-08-11) */
  .bizco-search-cats { overflow: hidden !important; }

  /* 2. name -> price gap matched to price -> cart gap */
  :is(body.search-results, body.post-type-archive-product, body.bizco-shop-all)
  ul.products.products li.product.product > .woocommerce-loop-product__title {
    margin-bottom: -6px !important;
  }
}
/* end bizco-srp-mobile-tidy v1 */


/* ============================================================
   CATEGORY ARCHIVE — PHONE CARD = THE SEARCH-RESULTS CARD
   bizco-cat-mobile-srp-card v1  (2026-07-28)
   *** revert = delete this block ***

   Below 768px the category archive was the last product grid still
   drawing the horizontal [image | actions] card inside a white
   bordered "list" wrapper. The search-results card reads better, so
   under 768px tax-product_cat now renders the identical floating
   vertical card: full-width square image on top, name (3-line
   clamp), price, qty + Add to cart on one row, then the full-width
   "+ Add to My Inventory" button — 2 up down to 521px, 1 up (capped
   420px, centred) below that, 24px gap, no white wrapper.

   Nothing at 768px and above changes. Subcategory tiles are left
   alone: the card rules carry :not(.product-category) and the list
   rule carries :not(:has(li.product-category)), so
   bizco-subcat-mobile-grid v2 still owns the top-level category
   pages (which on this site show subcategories only).

   HOW IT WORKS: the <=767px block bizco-srp-mobile-fix v15 already
   applies to all three page families; what turns it into the
   stacked card is bizco-unified-grid v3 (+ loop-card-repair v5 and
   srp-mobile-tidy v1), which are scoped to search/shop only. So the
   whole job here is to (a) restate those declarations for
   tax-product_cat and (b) out-rank the category-only overrides:
   bizco-grid-unify v1, bizco-cat-mobile-act-match v1-v4 and
   bizco-loop-card-repair v1/v2/v3/v4. The strongest of those score
   (0,6,3), so the card selectors below carry a third `.product` for
   (0,7,3) and do not depend on staying last in the file.

   Values are the ones measured on the live SRP at 767/600/520/430/
   390/360: image radius 10px, title 1.05rem/1.35 with the -6px
   bottom margin from srp-mobile-tidy v1, price 18px (line-height
   1.65 = the inherited body value the SRP computes) with a .95rem
   /Case suffix, qty 104px, Add to cart 8px 12px, inventory button
   .95rem / 11px 16px.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- the list: floating cards on the page canvas, 2 up ---- */
  body.tax-product_cat ul.products.products:not(:has(li.product-category)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* ---- the card ---- */
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    align-items: stretch !important;
    row-gap: 12px !important;
    column-gap: 18px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
    text-align: left !important;
  }

  /* image — full-width square on top */
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) > figure {
    grid-area: auto !important;
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) > figure img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  /* name — 3 lines, and the -6px pulls name->price level with
     price->cart (see srp-mobile-tidy v1 for the ink measurements) */
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) > .woocommerce-loop-product__title {
    grid-area: auto !important;
    align-self: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 -6px !important;
    text-align: left !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    max-height: none !important;
  }

  /* buy block — margin-top:auto bottom-aligns it across a two-up row */
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) > .bizco-loop-pricerow {
    grid-area: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-self: end !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: auto 0 0 0 !important;
  }

  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .price {
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    white-space: nowrap !important;
  }
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .price .bizco-loop-suffix {
    font-size: .95rem !important;
  }

  /* qty + Add to cart share one row */
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .bizco-loop-cart {
    grid-area: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .bizco-loop-qty {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }
  /* the base rule pins the field at 44px; search/shop release it in
     bizco-unified-grid v3, category never did (see the v4 note in
     bizco-loop-price-inline) — release it here too */
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .bizco-loop-qty input,
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .bizco-qty-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .bizco-qty-dec,
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .bizco-qty-inc {
    flex: 0 0 28px !important;
  }
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) .bizco-loop-add {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
  }

  /* "+ Add to My Inventory" — full-width row of its own.
     grid-area:auto only, never followed by grid-column:auto (the
     longhand would reset the shorthand and auto-place the button). */
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) > .bizco-inventory-list-btn {
    grid-area: auto !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    font-size: .95rem !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* one up, card capped and centred — same step the SRP takes */
@media (max-width: 520px) {
  body.tax-product_cat ul.products.products:not(:has(li.product-category)) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  body.tax-product_cat ul.products.products li.product.product.product:not(.product-category) {
    max-width: 420px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* end bizco-cat-mobile-srp-card v1 */

/* ============================================================
   MEGA MENU - Woo-style large-screen upgrade      [BIZCO]
   bizco-megamenu-woo v1  (2026-08-04)
   Large screens (>=1000px) only - the mega panels do not exist
   below the desktop header breakpoint, and the 768-999px tablet
   band keeps the calmer bizco-megamenu-scale v1 sizes.
   1) Bigger category-tile thumbnails + labels and section titles,
      modelled on woocommerce.com's Resources dropdown. Overrides
      bizco-megamenu-scale v1 purely by document order at equal
      specificity - none of the earlier rules were edited.
   2) A dark page tint behind the open panel: a fixed body::after
      at z-index 49, under #header (z-index 50) so the header bar
      and the panel stay clean while page content dims. Toggled
      via body:has(li.ct-active > .sub-menu) and always present,
      so opacity transitions run on BOTH open and close (a
      conditionally-created overlay could not fade out).
      pointer-events:none so hovering the dimmed page area never
      holds the menu open. Blocksy uses .sub-menu::before as its
      hover-bridge, which is why the tint is NOT on the panel.
   To revert: delete this whole block.
   ==== */
@media (min-width: 1000px) {
  /* tile label - up from clamp(15px .. 17px) */
  .mega-tile h5.wp-block-heading,
  .mega-tile h5.wp-block-heading a {
    font-size: clamp(16px, 10.5px + 0.55cqw, 20px) !important;
  }
  /* section title - up from clamp(18px .. 20px) */
  .header-menu-1 .sub-menu .mega-menu-title-row h4 {
    font-size: clamp(21px, 14.5px + 0.65cqw, 26px) !important;
  }
  /* thumbnails - up from clamp(52px .. 64px). 64 at a 1000px panel,
     ~77 at 1296, 96 from a 1728px panel (1920 viewport) on. */
  .header-menu-1 .sub-menu .mega-tile img,
  .header-menu-1 .sub-menu .mega-tile figure img {
    width: clamp(64px, 20px + 4.4cqw, 96px) !important;
  }
  /* breathing room for the bigger tiles: image-to-label gap 16 -> 20,
     tile stack gap 14 -> 18, panel padding 20 -> 24 */
  .header-menu-1 .sub-menu .mega-tile.wp-block-columns,
  .header-menu-1 .sub-menu .mega-tile .wp-block-columns {
    column-gap: 20px !important;
  }
  .header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > * {
    margin-bottom: 18px !important;
  }
  .header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > :last-child {
    margin-bottom: 0 !important;
  }
  /* the Cutlery empty-tile collapse must track the stack gap */
  .header-menu-1 .sub-menu .entry-content > .wp-block-columns:not(.mega-menu-title-row) > .wp-block-column > .mega-tile:empty {
    margin-top: -18px !important;
  }
  .header-menu-1 .sub-menu > li.menu-item:has(> .entry-content) {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* dark tint over the page while a mega panel is open.
     Lives on #header::after at z-index:-1 INSIDE the header stacking
     context (#header is position:relative; z-index:50): above all page
     content, below the header rows (z 1-3) and the panel (z 10).
     A body::after overlay at z 49 was tried first and did NOT paint
     above page content in Chrome (body is the scroll container here,
     overflow: hidden auto) - do not move this back to body. */
  #header::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
    transition: opacity .2s ease, visibility .2s ease;
  }
  #header:has(.header-menu-1 .menu > .menu-item.ct-active > .sub-menu)::after {
    opacity: 1;
    visibility: visible;
  }
}
/* end bizco-megamenu-woo v1 */

/* ============================================================
   MEGA MENU - instant panel switch                    [BIZCO]
   bizco-megamenu-instant v1  (2026-08-05)
   With the hover bridge (snippet 131) connecting the nav items,
   sweeping across the bar swaps panels constantly - and Blocksy's
   default 0.2s opacity fade + 10px translate3d slide made every
   swap look like the old panel floating up while the new one
   dropped in. This kills the transition and the slide offset on
   the top-level mega panels so open/close/switch is immediate.
   The page tint (#header::after, bizco-megamenu-woo v1) keeps its
   own fade - it stays at opacity 1 during a sweep and only fades
   when the menu is left entirely. The custom More flyout
   (snippet 73 .bizco-more-menu) is intentionally untouched.
   To revert: delete this block.
   ==== */
@media (min-width: 1000px) {
  .header-menu-1 .menu > .menu-item > .sub-menu {
    transition: none !important;
    transform: none !important;
  }
}
/* end bizco-megamenu-instant v1 */


/* ============================================================
   FOOTER/HOME MAX BANNER - BANNER MEDIUM-WIDTH GRID (768-1317px)
   Below ~1317px the CTA drops onto its own line. The old rule stacked
   [logo|copy] as one block with the CTA centred underneath, which left the
   brand and its divider hugging the top of the card and the divider only as
   tall as the copy. Rebuilt as a 3-column grid so the mark and the rule sit
   centred against the FULL height of the card, with the copy and the CTA
   sharing the right-hand column:

       [MAX]  |  Headline
              |  Subtext
              |  [ CTA ]

   display:contents on __top lifts the mark and copy into the same grid as the
   CTA (they are nested one level deeper in the markup). The divider is a grid
   item rather than __copy's left border, because a border can only be as tall
   as its own element. Home page and footer share these classes, so this fixes
   both; the home variant swaps the divider colour for its green card.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1317px) {
  .bizco-footer-banner__inner {
    display: grid !important;
    grid-template-columns: auto 2px minmax(0, 1fr) !important;
    /* the rows must be EXPLICIT: with none declared, the -1 line in
       grid-row: 1 / -1 resolves to the first line and the span
       collapses, which left the mark and the rule one row tall. */
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 26px !important;
    row-gap: 16px !important;
  }
  .bizco-footer-banner__top { display: contents !important; }

  .bizco-footer-banner__inner::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    background: rgba(46, 158, 79, 0.22);
    border-radius: 1px;
    /* bizco-max-skew-center v1 moved the counter-skew off __inner and onto
       each ROW, so a child of __inner inherits the card's -8deg slant.
       Restate it here or the rule leans while the text does not. */
    transform: skewX(8deg);
  }
  .bizco-cta-green .bizco-footer-banner__inner::before {
    background: rgba(255, 255, 255, 0.28);
  }

  .bizco-footer-banner__brand,
  .bizco-footer-banner .bizco-mark {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center !important;
  }

  .bizco-footer-banner__copy {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0 !important;
    border-left: none !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Sized to its label again: stretched to 360px it read as a slab. */
  .bizco-footer-banner__cta {
    grid-column: 3;
    grid-row: 2;
    width: auto !important;
    max-width: none !important;
    justify-self: start;
    margin: 0 !important;
    padding: 12px 26px !important;
    font-size: 15.5px !important;
  }

  /* The clamp bottomed out near 12px as the window narrowed. */
  .bizco-footer-banner__subtext {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   MEMBER BENEFITS HEADER - PHONE MAX BADGE             [BIZCO]
   bizco-mb-logo-phone v1
   On a 320px phone "What you get with BIZCO [MAX]" broke to two
   lines and the badge, at 1.34em, ran 26.8px tall on a 24px
   line: the green parallelogram overhung its line box and the
   header block doubled to 48px.
   The badge art is ~62% padding (the "MAX" glyphs are only 38%
   of the image height), so it can lose height cheaply. At 1.2em
   with the side margins dropped the line needs 277px instead of
   289px, so the title holds ONE line down to a ~315px viewport
   (was ~329px) - i.e. on every real phone - and if it ever does
   wrap, the badge (24px) now sits entirely inside its 24px line
   box instead of bleeding into the 18px gap under the header.
   Measured one-line thresholds (viewport; container is 88% of
   it): 1.34em = 329px, 1.2em + 0 margins = 315px, 1.12em =
   313px. Past ~1.2em the width saved falls off fast, so going
   smaller costs legibility and buys nothing.
   ============================================================ */
@media (max-width:479px){
  .bizco-mb-title{
    /* 2.3px back across the line; 0.1px per character at 20px */
    letter-spacing:-.02em;
  }
  .bizco-mb-logo{
    height:1.2em;
    /* Margin box = 1.2em - 2*.24em = .72em, still shorter than the
       1.2 line-height, so the badge can never grow the line box.
       `top:-.1em` from the base rule still applies and is still
       right: vertical-align:middle lands on the x-height midpoint
       and (cap-height - x-height)/2 in Outfit is ~.1em whatever
       the badge's own height is. */
    margin:-.24em 0;
  }
}

/* ===== bizco-mobile-header-white v1  (2026-08-09) =========================
   The phone header (<768px) was white / green / green: a white logo bar, a
   green search band, a green announcement strip under it. Desktop has always
   been the other way round - a grey #e9e9e9 announcement above a white
   logo+search row (the FIREWALL block ~line 3572 is what holds that in the
   768-999 tablet band). This brings the phone into line: the announcement
   takes the desktop grey and its dark text, and the search band turns white.

   Rows below 768px, measured at 390px:
     top     73px  #ffffff  logo, menu trigger, account
     middle  70px  #ffffff  search
     bottom  35px  #e9e9e9  announcement, #2D2D2D text

   The two white rows read as ONE block on purpose: the gap between them is
   wider than the air at either outer edge, which is what stops them reading
   as two rows that failed to line up. Originally that was 12.5px above the
   logo, a 23.25px gap down to the search field, 10.75px below it, and this
   block said to leave the heights alone. SUPERSEDED 2026-08-10: the user
   found the 23.25px gap too big, so bizco-mobile-header-compact v3 cut the
   rows to 64px and 62px. The proportion still holds at 8px / 14.75px /
   6.75px, and --header-height is now 161px.

   The amber (past_due / partial hold) and red (cancelled) announcement bars
   still win over this: their rules in snippet 135 are (0,4,1) with !important
   against the (0,3,1) here, and specificity is settled before source order.
   Checked on all four states that reach the phone bar.
   ========================================================================= */
@media (max-width: 767.98px) {

  /* --- the announcement strip: the desktop bar, exactly ------------------ */
  .ct-header [data-device="mobile"] [data-row*="bottom"] {
    background-color: #e9e9e9 !important;
  }
  .ct-header [data-device="mobile"] [data-row*="bottom"] .ct-header-text,
  .ct-header [data-device="mobile"] [data-row*="bottom"] .entry-content,
  .ct-header [data-device="mobile"] [data-row*="bottom"] p,
  .ct-header [data-device="mobile"] [data-row*="bottom"] span,
  .ct-header [data-device="mobile"] [data-row*="bottom"] a {
    color: #2D2D2D !important;   /* same ink as the desktop strip, line 3648 */
  }

  /* --- the search band --------------------------------------------------- */
  .ct-header [data-device="mobile"] [data-row*="middle"] {
    background-color: #ffffff !important;
  }

  /* THE FIELD HAD TO STOP BEING WHITE. On the green band a white fill was the
     entire affordance. On a white band it is nothing at all: the fill matches
     the row and the 1.5px #CFE3D6 hairline is a 1.36:1 edge, so the only thing
     left reading as a control was the green submit cap.

     So the field and the row swap jobs. The field becomes the tinted surface -
     #F2F5F7 is the theme's own palette colour 6, not a new grey - inside a
     border dark enough to actually draw an edge (#C4CFD8, 1.56:1 on white
     against the old 1.36:1). Height, width and the green cap are untouched;
     the cap is now the only saturated thing in the header and carries the
     accent on its own.

     Radius 6px -> 10px: 10px is what .dgwt-wcas-search-wrapp asks for at the
     top of this sheet and what the product cards use, and a filled field wants
     the softer corner. The input's inner curve must be 10 - 1.5 = 8.5px, same
     arithmetic as the 6px/4.5px pair at ~line 3608 - give it the full 10 and
     the border-box corner carves a crescent out of the fill. */
  .ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp {
    border-radius: 10px !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-form {
    background: #F2F5F7 !important;
    border-color: #C4CFD8 !important;
    border-radius: 10px !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input {
    background: #F2F5F7 !important;
    border-radius: 8.5px 0 0 8.5px !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-submit {
    border-radius: 0 8.5px 8.5px 0 !important;
  }
  /* #9A9A9A was 2.5:1 on the new fill. This is 4.0:1 and still clearly a
     placeholder rather than a typed value. */
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input::placeholder {
    color: #6F7A85 !important;
  }

  /* A REAL FOCUS STATE, WHICH THIS FIELD NEVER HAD. The base rule at the top
     of the sheet hangs its ring on the INPUT, which sits inside a form with
     overflow:hidden - so it was clipped away and focusing the field looked
     like nothing happened. The ring goes on the WRAPPER instead: overflow
     clips descendants, not an element's own shadow, the wrapper's only child
     is the form, and FiboSearch appends the suggestions list to <body>, so
     nothing else is affected. Brand green on white is 3.89:1, so the indicator
     clears 1.4.11 even though the resting border does not. */
  .ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp:focus-within {
    box-shadow: 0 0 0 3px rgba(15, 149, 88, .16) !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-form:focus-within {
    border-color: #0F9558 !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input:focus {
    box-shadow: none !important;   /* the clipped one, retired */
  }

  /* WHEN THE ANNOUNCEMENT IS HIDDEN THE HEADER LOSES ITS BOTTOM EDGE.
     max_trial and max_active drop the bottom row (body.bizco-noann), and with
     the search band now white the header ends flush against the page canvas -
     on /cart/ that is #FAFBFC, which is no edge at all. Translucent dark
     rather than a grey hairline: most other pages open on the deep-green title
     band (#0F5230) where a light rule would read as a scratch and this one
     disappears. inset, so it cannot change the row height.
     !important is not optional: Blocksy's generated CSS carries
     `#header [data-row]{box-shadow:var(--theme-box-shadow)}` and an ID
     selector at (1,0,1) beats everything this sheet can write. */
  body.bizco-noann .ct-header [data-device="mobile"] [data-row*="middle"] {
    box-shadow: inset 0 -1px 0 rgba(25, 42, 61, .10) !important;
  }
}
/* end bizco-mobile-header-white v1 */

/* ============================================================
   bizco-search-pill-circle v7  (2026-08-10)

   Shape of the FiboSearch bar. Nothing here touches .ct-search-box or the
   wrapper width, so the bar stays exactly as wide as it was at every
   breakpoint (measured identical at 360/390/430/620/767/768/820/1000/1280/
   1440/1920).

   The block name is a misnomer and is kept only so the history lives in one
   place: v1/v2 made this a pill with a detached circular submit, v3 squared
   both off, v4 put the submit back to a flush cap at the right end because
   the detached button read as cartoony, and v5 fixed the light seam in the
   cap's corners and made the outline darker and 2px. What survives from the
   detached era is the 10px radius, the neutral outline, the killed notch,
   the pinned icon size and the desktop focus ring.

   1. ONE RADIUS AT EVERY WIDTH. Desktop used to be a 999px pill and the
      phone band carried 6px (block around line 3600) and then 10px
      (bizco-mobile-header-white v1). All of that is superseded: 10px on the
      wrapper and form, 9px on the input, at both bands.

      9px on the input, not 10px, because the form's radius is on its BORDER
      box and its inner curve is 10 minus the border. Same arithmetic as the
      old 6/4.5 and 10/8.5 pairs. Note the border is SPECIFIED 1px because
      that is what Chrome uses either way: 1px and 1.5px both measure as a
      1px used width here, so the sheet may as well say what it renders.

      Each rule lists the mobile-scoped twin of its selector because
      `.ct-header [data-device="mobile"] .dgwt-wcas-search-form` scores
      (0,3,0) and a bare `.dgwt-wcas-search-wrapp .dgwt-wcas-search-form` at
      (0,2,0) cannot beat it, !important or not.

   2. THE SUBMIT IS A FLUSH GREEN CAP ON THE RIGHT END, 56px wide, at every
      width. `top:0; bottom:0; right:0` against `.dgwt-wcas-sf-wrapp`, which
      is the button's real containing block (it is position:relative and its
      box IS the form's padding box), so the cap lands exactly on the inner
      edge of the border on all three sides. Height stays `auto` so it
      stretches to the row rather than needing a per-band number (52px
      desktop, 46.5px phone).

      ITS RIGHT CORNERS ARE 7px, DELIBERATELY UNDER THE 8px INNER CURVE, AND
      THE FORM'S overflow:hidden TRIMS THE REST. This is the fix for the pale
      hairline the user spotted between the green and the outline, and the
      counter-intuitive part is that matching the inner curve exactly is NOT
      the answer. Measured at 4x, counting pixels in the corner lighter than
      the border:

        cap radius 9px  -> 150 seam px, up to 2.00 css px, peak 1.76x border
                           (this was the state the user reported)
        cap radius 8.5 ->  100 seam px, up to 1.50 css px, peak 1.39x  (the
                           "exact" inner curve, and it is still wrong)
        cap radius 7px  -> 100 seam px, identical to 8.5px
        cap radius 0px  -> 100 seam px, identical again

      Anything at or above the inner curve leaves the cap's own arc outside
      the clip, so the form's fill shows through between the two. Anything
      below it puts the cap's corner outside the clip path, the clip becomes
      the only visible edge, and the result bottoms out at a floor that is
      pure antialiasing (the clip's coverage blending green against the
      form's fill) and is invisible at 1x and 2x. 7px rather than 0px only so
      the cap still looks right if the form's overflow is ever changed.

      For the record, a 2px border does slightly better on that floor (75 px,
      0.75 css px, 1.34x) because it lands the border's inner edge on a whole
      pixel. Not worth it: v5 tried 2px and the user rejected the look.

      Width is 56px at both bands, which is what the bar shipped with
      originally. On desktop that is a 56 x 52 cap, near enough square.

      Every dimension has to be set explicitly because three sources fight
      over this button: the plugin ships min-width:50px / min-height:100% /
      padding:0 15px, the base block at the top of this sheet adds
      width:56px / min-width:3.5rem / height:3.2rem, and
      bizco-mobile-header-compact pins height:46.5px on the phone. Note
      `aspect-ratio:auto` is doing real work here, undoing v2/v3's
      `aspect-ratio:1/1`.

      The little left-pointing triangle that pokes out of the cap's left edge
      is the plugin's own .dgwt-wcas-search-submit:before (a border-trick
      arrow, recoloured to the button green by the plugin's Personalization
      CSS). It is a speech-bubble tail on a search button and is the single
      most toy-like thing about the control, so it stays off.

      The magnifier is pinned to a 20px square at both bands. Left alone it
      computes 28.8 x 15: Blocksy caps it with
      max-height:var(--theme-icon-size,15px), which beats the base block's
      height:1.8rem, and the 1.25 scale on top of that made a 36px-wide box.

      Two knock-on fixes:
      - the clear X is .dgwt-wcas-preloader.dgwt-wcas-close, 40px wide, and
        the plugin's JS positions it inline from the submit's own outerWidth.
        Pinned to right:56px here so it does not depend on that JS having run
        against the width we ended up with.
      - the input's padding-right was 15px at rest, which only ever worked
        because the opaque cap hid the overflow rather than preventing it.
        68px at rest (56 cap + 12 gap) and 108px when filled (+40 for the X),
        so text stops short of both instead of sliding under them.

   3. PROMINENCE COMES FROM CONTRAST, NOT LINE WEIGHT. The lineage is
      #CFE3D6 (green-tinted, 1.36:1 on white) -> #C4CFD8 (neutral, 1.58:1,
      from bizco-mobile-header-white v1, which the user found too faint) ->
      #9CA9B7 at 2px in v5 -> **#9CA9B7 at 1px in v6**.

      v5's mistake was reaching for thickness. A 2px mid-grey stroke around a
      52px field reads like a wireframe or a validation state, not a search
      box, and the user rejected it. Same colour at 1px reads as precise and
      still clears the old hairline by a wide margin: 2.39:1 on white and
      2.19:1 on the phone's #F2F5F7 fill, against #C4CFD8's 1.58:1. If it
      ever needs to be more present again, the next lever is the FILL (give
      the desktop field the phone's #F2F5F7 so it reads as a surface), not
      more pixels of stroke.

      Do not go much darker than this while the focus state is border-only:
      see section 4.

      The border-width and border-colour rule has to carry the
      `[data-device="mobile"]` twin, because bizco-mobile-header-white v1
      sets border-color at (0,3,0). The background-color rule deliberately
      does NOT carry that twin: the phone's #F2F5F7 fill must keep winning.

      The form also carries an explicit white fill, which on desktop it never
      had: it was transparent, with the white input painting over it. It is
      the surface the clipped cap antialiases against, so it must match the
      input's fill exactly or the seam comes back.

   4. FOCUS IS THE GREEN BORDER AND NOTHING ELSE (v6). Desktop had no focus
      state at all before v2: the base rule at the top of this sheet hangs
      the ring on the INPUT, which sits inside a form with overflow:hidden,
      so it was clipped away and focusing the field looked like nothing
      happened. v2 fixed that with the same 3px green glow the phone band got
      in bizco-mobile-header-white v1. The user found the glow too much, so
      v6 removes it from BOTH bands and keeps only the border turning
      #0F9558. The kill has to name the mobile twin explicitly: the phone's
      glow rule is (0,4,0) and only an equally specific, later rule beats it.

      That still satisfies 1.4.11 on its own terms - the focused border is
      3.85:1 against the white row and 3.51:1 against the phone's fill, well
      over the 3:1 an indicator needs against adjacent colours.

      THE CATCH, and the reason the resting border must not get much darker:
      with no glow, focus is carried entirely by the border changing colour.
      #9CA9B7 to #0F9558 is a 1.61:1 luminance step plus a big hue shift,
      which is perceivable. A darker resting grey erases the luminance half
      of that - #7A8896, which was considered for v6, is 1.06:1 against the
      green, i.e. a hue-only change and invisible to anyone with weak colour
      discrimination. If the resting border ever goes darker than about
      #9CA9B7, the focus state needs a second cue again.
   5. THE PHONE BAR SITS OPTICALLY CENTRED BETWEEN THE LOGO AND THE
      ANNOUNCEMENT (v7). It did not before: 14.75px of air above it against
      6.75px below. The cause is structural, not a stray margin. Both header
      rows centre their own contents, so the space above the bar is the sum of
      TWO leftovers - the top row's air below the logo (8px) plus the middle
      row's air above the field (6.75px) - while the space below it is only
      the middle row's own 6.75px. The difference is therefore always exactly
      the top row's bottom air, whatever the two row heights are:

        gapAbove - gapBelow = (topRowHeight - logoHeight) / 2 = (64 - 48)/2

      **Row heights alone cannot fix it.** Setting gapAbove = gapBelow in that
      identity solves to topRowHeight = logoHeight, i.e. the logo touching the
      top of the header with no air above it. Moving space between the two
      rows changes nothing, which is worth knowing before trying it again.

      So the field is nudged instead. `.ct-search-box` is a flex item in an
      `align-items:center` row, so a bottom margin of N moves it up by N/2 and
      the row keeps its height. **margin-bottom must equal the top row's
      leftover air, i.e. topRowHeight - logoHeight = 64 - 48 = 8px** - if
      either number changes in bizco-mobile-header-compact, this one changes
      with it. Measured 10.75px / 10.75px at 390, 430, 620 and 767.

      Below about 375px the logo scales down with the viewport (46.06px at
      360), so its leftover air grows and a fixed 8px leaves the bar about
      1px high there. Not worth chasing: it would need the logo's live height,
      which CSS cannot read.
   ============================================================ */

.dgwt-wcas-search-wrapp,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  border-radius: 10px !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input,
.ct-header [data-device="mobile"] .dgwt-wcas-search-input {
  border-radius: 9px 0 0 9px !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-form {
  background-color: #FFFFFF !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #9CA9B7 !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit,
.ct-header [data-device="mobile"] .dgwt-wcas-search-submit,
.ct-header [data-device="desktop"] .dgwt-wcas-search-submit {
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 56px !important;
  min-width: 56px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 7px 7px 0 !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::before {
  display: none !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  transform: none !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-preloader {
  right: 56px !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
  padding-right: 68px !important;
}
.dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-search-input {
  padding-right: 108px !important;
}

/* v7: optically centre the field between the logo above and the announcement
   below. 8px = the top row's leftover air (64px row - 48px logo); a flex item
   centred in its line moves up by half its bottom margin. */
@media (max-width: 767px) {
  .ct-header [data-device="mobile"] [data-row*="middle"] .ct-search-box {
    margin-bottom: 8px !important;
  }
}

/* FOCUS: the border only. The mobile twin is not optional - it is what kills
   bizco-mobile-header-white v1's (0,4,0) glow rule further up the sheet. */
.ct-header [data-device="desktop"] .dgwt-wcas-search-wrapp:focus-within,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp:focus-within {
  box-shadow: none !important;
}
.ct-header [data-device="desktop"] .dgwt-wcas-search-form:focus-within,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form:focus-within {
  border-color: #0F9558 !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus {
  box-shadow: none !important;   /* the clipped one, retired */
}
/* end bizco-search-pill-circle v7 */


/* ---- bizco-pdp-buybox-tail v1 -------------------------------------------
   WooCommerce Subscriptions prints an empty p.first-payment-date (holding an
   empty small) after the add-to-cart form on EVERY product page, and only fills
   it in for synced subscription products. On our products it stays empty but
   still carries margin-bottom:24px, which stacked on top of the card's own 24px
   padding and left ~49px of dead space under "Add to My Inventory".
   Collapse it when empty; drop its trailing margin in every case (nothing
   follows it inside the card). */
.bizco-buybox > p.first-payment-date:has(> small:empty) {
  display: none !important;
}
.bizco-buybox > p.first-payment-date {
  margin-bottom: 0 !important;
}
/* end bizco-pdp-buybox-tail v1 */

/* ---- bizco-pdp-secondary-row v2 -----------------------------------------
   "Add to My Inventory" and "Order sample" share one line under the cart row,
   and stack when the buy box is too narrow to hold both. Order sample used to
   be its own white card in the summary column; snippet 24 now wraps both
   buttons in .bizco-buy-secondary inside .ct-cart-actions (snippet 43 supplies
   the sample button through the bizco_buy_secondary_actions hook).

   THE WRAPPER IS LOAD-BEARING. v1 made the two buttons direct flex items of
   .ct-cart-actions with a 196px basis; they then packed onto the FIRST line
   next to the qty stepper, and Add to cart - flex-basis 0 - was squeezed to
   27.8px at a 1440 viewport. flex:1 1 100% on the wrapper is what claims a
   line of its own.

   The break between side-by-side and stacked is driven by the CARD's width,
   not the viewport: two 196px bases plus the 10px gap need 402px of wrapper.
   196px is measured, not picked - "Add to My Inventory" needs 16 padding +
   15 icon + 8 gap + 136.5 text + 16 padding = 191.5px, so 196 leaves 4.5px of
   slack and the label never has to wrap.

   margin-top:10px on the WRAPPER, stacked on the cart row's own 10px gap,
   preserves the 20px that has always separated the secondary actions from Add
   to cart; the buttons themselves reset the margin snippet 147 gives them
   (form.cart .bizco-inventory-list-btn is 0,2,1, hence the !important). */
.product-entry-wrapper .ct-cart-actions .bizco-buy-secondary {
  flex: 1 1 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.product-entry-wrapper .ct-cart-actions .bizco-buy-secondary .bizco-inventory-list-btn,
.product-entry-wrapper .ct-cart-actions .bizco-buy-secondary .bizco-order-sample-btn {
  flex: 1 1 196px !important;
  width: auto !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  white-space: nowrap !important;
}
.product-entry-wrapper .ct-cart-actions .bizco-buy-secondary .bizco-order-sample-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
}
/* end bizco-pdp-secondary-row v2 */

/* ============================================================
   SEARCH RESULTS — RESULTS BAR + CATEGORY PILLS
   bizco-srp-head-cats v2   (2026-08-11)
   *** revert = delete this block, reactivate snippet 77, and
       restore the old markup in snippets 62 and 63 ***

   Replaces the two things the user rejected:

   1. The results heading was a 24px bold h2 with 24px of air
      above and below — an 84px band for one short line, sitting
      on bare canvas between a hidden hero and a white card, with
      nothing under it to anchor it. Now it is a baseline row,
      term left / count right, over a 1px hairline that gives the
      line a floor. 74px on a phone, 79px on desktop.

   2. The category strip was fixed-width tiles in a horizontal
      scroller driven by the arrow buttons snippet 77 built. On a
      390px phone exactly ONE of eight tiles was fully visible and
      1,115px of the row sat off-screen; the right-hand arrow was
      a white bar painted on top of the tile underneath it. On
      desktop the arrows usually never appeared, leaving four
      tiles crammed left and ~700px of empty white.

      Now the tiles are outlined pills (photo hidden, bare count
      next to the name). Above 767px they WRAP: all eight fit one
      99px row at 1440 and every one is visible. At 767px and
      below they stay on ONE line and SWIPE — scroll-snap plus a
      fade at the right edge, no buttons anywhere. That is 96px,
      shorter than the 108px it replaces, and all eight are
      reachable instead of one.

   Everything is scoped body.search-results and carries (0,2,0)
   or better, so it beats the original single-class tile rules
   near the top of this file without depending on file order.
   ============================================================ */

/* ---- the results bar ---- */
body.search-results .bizco-search-header {
  margin: 22px 0 16px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid #E6EAEE;
}
body.search-results .bizco-search-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
body.search-results .bizco-search-heading {
  min-width: 0;
  margin: 0 !important;
  font-size: 1.1875rem;
  line-height: 1.4;
  font-weight: 600;
  color: #2D2D2D;
}
body.search-results .bizco-search-heading .bizco-search-label {
  font-weight: 500;
  color: #6B7280;
}
body.search-results .bizco-search-heading .bizco-search-term {
  font-weight: 600;
  color: #2D2D2D;
}
body.search-results .bizco-search-count {
  flex: 0 0 auto;
  font-size: .9375rem;
  font-weight: 500;
  color: #6B7280;
  white-space: nowrap;
}

/* ---- the category card ---- */
body.search-results .bizco-search-cats {
  position: relative;
  padding: 16px 20px !important;
  overflow: visible;
}
body.search-results .bizco-srp-catlabel {
  display: block;
  margin: 0 0 10px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A94A0;
}
body.search-results .bizco-search-cats-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- the pill ---- */
body.search-results .bizco-search-cat {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto !important;
  max-width: 100% !important;
  height: 36px !important;
  align-self: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  padding: 0 14px !important;
  border: 1px solid #D9E0DB !important;
  border-radius: 200px !important;
  background: #FFFFFF !important;
  color: #3F4A46 !important;
  text-decoration: none !important;
  transition: color .12s cubic-bezier(.455, .03, .515, .955),
              background .12s cubic-bezier(.455, .03, .515, .955),
              border-color .12s cubic-bezier(.455, .03, .515, .955);
}
body.search-results .bizco-search-cat-img { display: none !important; }
body.search-results .bizco-search-cat-name {
  align-self: center !important;
  max-width: 320px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #3F4A46 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.search-results .bizco-search-cat-count {
  flex: 0 0 auto;
  align-self: center !important;
  margin: 0 !important;
  font-size: .8125rem !important;
  font-weight: 400;
  line-height: 1.35 !important;
  color: #8A94A0 !important;
  white-space: nowrap !important;
}

/* Hover green is the site-wide one (#0F5230), same as every other
   control — see the bizco-hover-green block / snippet 144. */
body.search-results .bizco-search-cat:hover,
body.search-results .bizco-search-cat:focus-visible {
  border-color: #0F5230 !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px #0F5230;
}
body.search-results .bizco-search-cat:hover .bizco-search-cat-name,
body.search-results .bizco-search-cat:focus-visible .bizco-search-cat-name,
body.search-results .bizco-search-cat:hover .bizco-search-cat-count,
body.search-results .bizco-search-cat:focus-visible .bizco-search-cat-count {
  color: #0F5230 !important;
  text-decoration: none !important;
}
body.search-results .bizco-search-cat:focus-visible {
  outline: 2px solid #0F5230;
  outline-offset: 2px;
}

/* A tapped pill keeps :hover on touch until you tap elsewhere, which
   left the last-tapped category stuck green. Same reset pattern as
   bizco-faq-touch v1. */
@media (hover: none), (pointer: coarse) {
  body.search-results .bizco-search-cat:hover {
    border-color: #D9E0DB !important;
    background: #FFFFFF !important;
    box-shadow: none;
  }
  body.search-results .bizco-search-cat:hover .bizco-search-cat-name {
    color: #3F4A46 !important;
  }
  body.search-results .bizco-search-cat:hover .bizco-search-cat-count {
    color: #8A94A0 !important;
  }
}

/* ---- phone: one swiping line, no buttons ---- */
@media (max-width: 767px) {
  body.search-results .bizco-search-header { margin: 16px 0 14px !important; }
  body.search-results .bizco-search-heading { font-size: 1.0625rem; }
  body.search-results .bizco-search-count { font-size: .875rem; }

  /* The card loses its side padding so the row can run to both edges;
     the padding moves onto the row itself, which is what lets the last
     pill scroll flush to the card's right edge. */
  body.search-results .bizco-search-cats {
    padding: 14px 0 !important;
    overflow: hidden !important;
  }
  body.search-results .bizco-srp-catlabel { margin: 0 16px 10px !important; }
  body.search-results .bizco-search-cats-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px 48px 2px 16px !important;
    scrollbar-width: none !important;
  }
  body.search-results .bizco-search-cats-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.search-results .bizco-search-cat { scroll-snap-align: start; }
  body.search-results .bizco-search-cat-name { max-width: 240px !important; }

  /* The "there is more" cue that replaces the arrow button: the row's
     40px right padding keeps a pill's edge under this fade rather than
     hard against it, so something is always visibly cut off. */
  body.search-results .bizco-search-cats::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to left, #FFFFFF 30%, rgba(255, 255, 255, 0));
  }
}
/* end bizco-srp-head-cats v2 */

/* ============================================================
   bizco-search-round-field v8   (2026-08-15)

   Six formatting changes to the FiboSearch bar, all at both bands.
   Nothing here touches .ct-search-box, the wrapper width, the width
   clamp at line ~1421 or the 100% mobile widths, so the bar still
   resizes exactly the way it did.

   1. SEMICIRCULAR ENDS. 999px, not a fixed number, on the wrapper,
      the form and the input's left corners. A pill radius is clamped
      by the UA to half the box's own height, so ONE value gives the
      correct semicircle on desktop (23px inner) and on the phone
      (21px inner) and keeps following the height if it ever changes
      again. This is also why the input needs no per-band value: 999px
      clamps to exactly the form's inner curve at both bands.

   2. THE CAP'S CORNERS UNDER-SHOOT THE INNER CURVE - 18px, against a
      23px inner curve on desktop and 21px on the phone - and the
      form's overflow:hidden trims the rest. Same rule v7 established
      for the 10px rect and the reason is unchanged: a cap whose arc
      MATCHES the clip leaves the form's fill visible between the two
      as a pale hairline, while a cap whose arc sits outside the clip
      lets the clip be the only visible edge. Checked the whole
      boundary rather than just the corner: with 18px the cap's right
      edge is at or outside the clip's semicircle at every y on both
      bands (worst case 2.3px of overlap at y=5 desktop, 1.85px on the
      phone), so there is nowhere for the fill to show through.

      18px is one number for both bands on purpose. Do not "improve"
      it by matching each band's inner curve - that is the bug.

   3. OUTLINE 1px -> 2px, colour unchanged at #9CA9B7. Noted for the
      record: v5 shipped a 2px #9CA9B7 outline on the 10px RECT and
      the user rejected it as reading like a wireframe. This is a
      different shape - a 2px stroke around a semicircular field reads
      as a control rather than a validation box - and the user asked
      for the extra weight directly. If it ever reads heavy again, the
      lever is the colour, not the pixels.

      A 2px border also lands the border's inner edge on a whole pixel,
      which is the better antialiasing floor for the clipped cap (v7
      measured 75 seam px / 0.75 css px against 100 / 1.50 at 1px).

   4. THE FIELD IS LIGHT GREY, #F2F5F7, ON DESKTOP TOO. The phone band
      already had it; desktop was white. THE FORM'S FILL MUST MATCH THE
      INPUT'S EXACTLY - it is the surface the clipped cap antialiases
      against - so both are set here, and the desktop-only white fill
      v7 added is superseded. v7's note that the background rule must
      not carry the mobile twin no longer applies: the twin now wants
      the same colour.

   5. FOCUS IS THE PILL SELECTOR'S DEEP GREEN, #0F5230 - the same ring
      the PDP variation swatches and the category chips take on hover
      (see the control system, snippet 148). The pill draws 1px border
      + 1px inset ring to read as 2px without reflow; this field's
      border is already 2px, so the colour change alone lands at the
      same visual weight and no inset ring is added - a third pixel
      here would read heavier than the pills it is matching.

      Better than the #0F9558 it replaces on v7's own accessibility
      test: #9CA9B7 -> #0F5230 is a 3.81:1 luminance step (against
      1.61:1 for the bright green), so focus survives for anyone
      reading luminance rather than hue, and it is 9.13:1 on white.

   6. PLACEHOLDER FONT IS SET IN em, NOT px. 0.88em of the input's own
      size: 16.2px against the 18.4px typed text on both bands, and it
      keeps scaling under the <=360px clamp that drops the input to
      14.5px, where a hardcoded 16px would have made the placeholder
      LARGER than the text it stands in for. This rule carries the
      mobile twin because that clamp block pins the placeholder to
      `inherit !important` at (0,3,0).

   HEIGHT: 52px -> 46px desktop, 46.5px -> 42px phone. Neither row
   moves - the desktop middle row is 88px and the phone middle row is
   pinned at 62px by bizco-mobile-header-compact - so v7's optical
   centring still holds: the phone bar keeps 12px of air above and
   below (was 10.75/10.75), because the 8px nudge answers the TOP row's
   leftover air, which has not changed.

   Every rule lists the [data-device="mobile"] twin of its selector,
   for the reason v7 documents: that scope is (0,3,0) and a bare
   .dgwt-wcas-search-wrapp descendant selector at (0,2,0) cannot beat
   it, !important or not.
   ============================================================ */

/* 1. semicircular ends */
.dgwt-wcas-search-wrapp,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  border-radius: 999px !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input,
.ct-header [data-device="mobile"] .dgwt-wcas-search-input {
  border-radius: 999px 0 0 999px !important;
}

/* 2. the cap conforms: under the inner curve, clipped by the form */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit,
.ct-header [data-device="mobile"] .dgwt-wcas-search-submit,
.ct-header [data-device="desktop"] .dgwt-wcas-search-submit {
  border-radius: 0 18px 18px 0 !important;
}

/* 3. outline a little thicker */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #9CA9B7 !important;
}

/* 4. light grey field - form and input must be the same value */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  background-color: #F2F5F7 !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input,
.ct-header [data-device="mobile"] .dgwt-wcas-search-input {
  background-color: #F2F5F7 !important;
}

/* 5. focus = the deep green the pill selectors use on hover */
.ct-header [data-device="desktop"] .dgwt-wcas-search-form:focus-within,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form:focus-within {
  border-color: #0F5230 !important;
}

/* 6. placeholder a little smaller, relative so it survives the clamp */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder,
.ct-header [data-device="mobile"] .dgwt-wcas-search-input::placeholder {
  font-size: .88em !important;
}

/* height: a little less tall */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
  height: 46px !important;
}
@media (max-width: 767px) {
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input {
    height: 42px !important;
  }
}
/* end bizco-search-round-field v8 */

/* ============================================================
   bizco-search-cap-seam v8.1   (2026-08-15)

   Kills the pale hairline between the green cap and the outline.
   Most visible when the field is FOCUSED and the cap is HOVERED,
   because then the border and the cap are both #0F5230 and the only
   thing separating them is the sliver.

   THE CAUSE IS COMPOSITING, NOT GEOMETRY. v8 checked the cap's own
   arc against the clip at every y and it does sit outside it, so
   there is no gap in the shapes. What is left is the clip's own
   antialiasing: `overflow:hidden` on the form resolves each boundary
   pixel as

       alpha * (cap green) + (1 - alpha) * (whatever the form paints there)

   and the form paints #F2F5F7. So the boundary is a one-pixel ramp
   from green to LIGHT GREY, which is a pale line. v7 had this too and
   called it "a floor that is pure antialiasing"; it was invisible then
   because the form was white behind a bright green cap on a white row.
   v8 changed both ends of that: the field went light grey and the
   focused border went dark green, so the same ramp now runs between
   two dark colours and reads as a white thread.

   THE FIX IS TO CHANGE WHAT IS BEHIND THE CAP, NOT THE CAP. The form
   paints its own background straight to its BORDER box, and that
   background is NOT subject to its own overflow clip, so a green strip
   there sits under the cap and under the outline. The boundary pixel
   becomes green over green and there is nothing left to see.

   Do not try to fix this by nudging the cap's radius or its inset -
   the shapes were never the problem, and every value that closes the
   ramp on one side opens the seam on the other.

   Three details that are load bearing:

   1. `background-origin: border-box`. By default a background IMAGE is
      positioned against the PADDING box while being painted to the
      border box, so a 56px strip would be measured from the wrong edge
      and then tiled. Against the border box, 56px from the right lands
      the strip's left edge 2px INSIDE the cap's left edge on both
      bands (cap 518-574 of 576 on desktop, 272-328 of 330 on the
      phone), which is what keeps the strip from peeking out to the
      left of the cap. It must stay under the cap's width: 58px would
      line up exactly and 60px would show.

   2. The clip's leftmost boundary pixel is at the TOP and BOTTOM of
      the padding box, not at the corner - x=551 on desktop, x=307 on
      the phone. The 56px strip starts well left of both.

   3. The mobile twin is not optional here for an unusual reason: the
      phone rule further up the sheet uses the `background` SHORTHAND
      (`background:#F2F5F7!important`), which sets background-image,
      -origin and -repeat to their initial values at (0,3,0). A bare
      (0,2,0) rule loses to it even with !important.

   The hover colour is duplicated rather than driven off a variable so
   that the plugin's own 0.25s background transition on the cap has a
   matching static backdrop at both ends; mid-transition the mismatch
   is one sub-pixel of slightly-off green, which is not perceivable.
   ============================================================ */

.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  background-image: linear-gradient(to left, #0F9558 0, #0F9558 56px, rgba(0,0,0,0) 56px) !important;
  background-origin: border-box !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
}

.dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:hover) .dgwt-wcas-search-form,
.dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:focus-visible) .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:hover) .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:focus-visible) .dgwt-wcas-search-form {
  background-image: linear-gradient(to left, #0F5230 0, #0F5230 56px, rgba(0,0,0,0) 56px) !important;
}
/* end bizco-search-cap-seam v8.1 */

/* ============================================================
   bizco-search-field-stroke v9   (2026-08-15)

   Option C + focus C1 + the placeholder, all approved from
   ~/Desktop/bizco-search-focus-and-copy.html. Layered on top of v8 /
   v8.1 rather than editing them, so the reasoning in those blocks
   still reads as the history it is.

   THE ONE IDEA: THE STROKE BELONGS TO THE FIELD, NOT TO THE WHOLE
   CONTROL. It used to live on the FORM, which wraps the field AND the
   green submit, so it ran around the button and framed it as though
   the button were sitting inside the text box. Now it lives on the
   INPUT with `border-right:0`, so it stops dead where the green
   starts. That is the whole fix, and it is why the button finally
   reads as attached to the field instead of trapped in it.

   Consequences of moving it, each of which has to be set explicitly:

   1. The FORM loses its border. Its height was input + 2*border, so
      with the border gone the input has to absorb those 4px or the bar
      gets shorter: **input height 46 -> 50 desktop and 42 -> 46 phone,
      which are exactly the old FORM heights.** The bar's outer
      geometry is therefore unchanged: still 50px desktop, 46px phone,
      576px wide at 1280. `box-sizing:border-box` is set explicitly so
      those numbers stay the outer box and are not inflated by the 1px
      stroke.

   2. The input can no longer be `width:100%`, because the stroke would
      run under the cap and out the other side. It is
      `calc(100% - 48px)` against a 56px cap, i.e. **the field is
      deliberately extended 8px UNDERNEATH the green.** That 8px is
      load bearing, see section FOCUS below.

   3. Both padding-rights are re-derived from the new right edge. At
      rest the field ends 48px from the right, the cap starts 56px
      from the right, so 22px of padding leaves a 14px gap between the
      last character and the green. Filled, the clear X occupies 56 to
      96px from the right, so 60px of padding leaves the same 12px gap
      it had before. Do not carry the old 68/108 over: they were
      measured against a full width field.

   FOCUS IS C1, AND THE 8px IS HOW IT WORKS. An inset ring draws on all
   FOUR sides of a box. Painted on a field that ends exactly at the
   cap, its right hand segment lands against the green as a vertical
   line that is not there at rest, so the control changes shape the
   moment you click into it. That was the v8 focus state and it is what
   the user rejected. Because the field now runs 8px under an opaque
   cap, that fourth segment is simply covered and never renders. The
   ring is still a plain four sided inset, which is what keeps it
   correct on the pill's left arc - a hand drawn three sided border
   cannot follow a semicircular end without falling apart.

   REJECTED, for the record: C2, which moved the ring onto the whole
   bar so it wrapped the outside of the green too. Measured, the
   problem is contrast: #0F5230 on the #0F9558 cap is 2.41:1 against
   8.45:1 on the grey field, so the indicator visibly fades out over
   the half of the control it is wrapping.

   THE PLACEHOLDER now sits in the same optical slot as the value:
   16px, roman, 400, and only the colour differs (#5F6B76, 4.98:1 on
   the field, against the old #9A9A9A at 2.57:1). `font-style:normal`
   is an override of FiboSearch's OWN default - the plugin ships
   `font-style:italic` on the placeholder at (0,3,1) and nobody ever
   chose it. Outfit has no true italic, so the browser was faking an
   oblique by slanting the roman.

   `font-size:1em` supersedes v8's `.88em`. Shrinking only the hint was
   the wrong lever: it made the field change size when you typed. The
   whole field drops to 16px instead, which is also the floor below
   which iOS Safari zooms the page on focus. For the same reason the
   `@media (max-width:360px)` clamp further up is neutralised here
   rather than deleted (deleting from this sheet is how it gets
   clobbered) - at 16px it has nothing left to do.

   The string itself is NOT here. It lives in the FiboSearch option
   `dgwt_wcas_settings['search_placeholder']`, set to "Search all
   products".

   WHAT IS DELIBERATELY LEFT ALONE: `overflow:hidden` on the wrapper
   and the form. With the cap now drawing its own semicircular end
   there is nothing left to clip, and removing it would be tidier, but
   the suggestions dropdown renders correctly under the current clip
   and that is verified behaviour worth more than tidiness. v8.1's
   green backstop strip stays for the same reason, retuned from 56px to
   54px: with the form's 2px border gone, a 56px strip would line up
   exactly with the cap's left edge instead of sitting 2px inside it.
   ============================================================ */

/* ---- the form gives up the stroke ---- */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  border: 0 none !important;
}

/* ---- the field takes it, and stops at the cap ---- */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input,
.ct-search-box .dgwt-wcas-search-wrapp .dgwt-wcas-search-input,
.ct-header [data-device="mobile"] .dgwt-wcas-search-input,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
  box-sizing: border-box !important;
  width: calc(100% - 48px) !important;
  height: 50px !important;
  border: 1px solid #DCE3E9 !important;
  border-right: 0 none !important;
  border-radius: 999px 0 0 999px !important;
  background-color: #F2F5F7 !important;
  font-size: 16px !important;
  padding-left: 26px !important;
  padding-right: 22px !important;
  outline: 0 none !important;
  outline-offset: 0 !important;
}

@media (max-width: 767px) {
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input,
  .ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
    height: 46px !important;
  }
}

/* neutralises the 360px clamp above; at 16px it has nothing to do, and
   it was the only thing making iOS zoom the page on focus */
@media (max-width: 360px) {
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input,
  .ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
    font-size: 16px !important;
  }
  .ct-header [data-device="mobile"] .dgwt-wcas-search-input::placeholder {
    font-size: 1em !important;
  }
}

/* filled: clear the 40px X, which the plugin pins 56px from the right */
.dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-search-input,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-search-input {
  padding-right: 60px !important;
}

/* ---- the cap owns the right end now, so it draws a real semicircle ---- */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit,
.ct-header [data-device="mobile"] .dgwt-wcas-search-submit,
.ct-header [data-device="desktop"] .dgwt-wcas-search-submit {
  border-radius: 0 999px 999px 0 !important;
}

/* ---- FOCUS: C1. Four sided inset ring; the fourth side is under the cap ---- */
.ct-header [data-device="desktop"] .dgwt-wcas-search-form:focus-within,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form:focus-within {
  border-color: transparent !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus,
.ct-search-box .dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus,
.ct-header [data-device="mobile"] .dgwt-wcas-search-input:focus,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus {
  border-color: #0F5230 !important;
  box-shadow: inset 0 0 0 1px #0F5230 !important;
  outline: 0 none !important;
}

/* ---- the placeholder shares the value's slot; only colour differs ---- */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder,
.ct-header [data-device="mobile"] .dgwt-wcas-search-input::placeholder,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder {
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1em !important;
  color: #5F6B76 !important;
  opacity: 1 !important;
}

/* ---- v8.1 backstop, retuned 56 -> 54 now that the form has no border ---- */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-form {
  background-image: linear-gradient(to left, #0F9558 0, #0F9558 54px, rgba(0,0,0,0) 54px) !important;
}
.dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:hover) .dgwt-wcas-search-form,
.dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:focus-visible) .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:hover) .dgwt-wcas-search-form,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-submit:focus-visible) .dgwt-wcas-search-form {
  background-image: linear-gradient(to left, #0F5230 0, #0F5230 54px, rgba(0,0,0,0) 54px) !important;
}
/* end bizco-search-field-stroke v9 */

/* bizco-ui-searchpress v1 (owner 2026-10-03): after a click the search button keeps focus and FiboSearch's
   :focus/:active rule fades it to 70%, so the search box's grey showed through its left 8px. Focused or
   pressed it stays solid; keyboard focus gets the same deep green as hover (the strip under it already does). */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:focus,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:active {
  opacity: 1 !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:focus-visible {
  background: #0F5230 !important;
}
/* end bizco-ui-searchpress v1 */

/* ============================================================
   bizco-search-no-clear-x v9.1   (2026-08-15)

   Removes the clear "X" that appeared at the right of the field once
   you typed.

   WHICH ELEMENT THIS IS, because the name is misleading: the X and the
   loading spinner are the SAME element, `.dgwt-wcas-preloader`. The
   plugin swaps its classes to change what it shows.

   FIRST ATTEMPT WAS WRONG AND IS WORTH RECORDING. The plugin's own
   stylesheet targets the clickable X as
   `.dgwt-wcas-close:not(.dgwt-wcas-inner-preloader)`, so that selector
   looked like the precise way to hide the X and spare the spinner. It
   is not: on this site the live element carries **all three** classes
   at once - `dgwt-wcas-preloader dgwt-wcas-inner-preloader
   dgwt-wcas-close` - so the `:not()` excluded the very element it was
   meant to hit, and the loader circle stayed on screen. Read the real
   `className` before trusting a vendor selector to describe a state.

   So the whole preloader is hidden instead. That is also the honest
   reading of the request: nothing should appear in that spot.

   WHAT THIS COSTS: the brief loading spinner goes with it. Very little
   is lost, because the plugin gives `.dgwt-wcas-preloader`
   `z-index:-1` and since v9 the input carries an OPAQUE `#F2F5F7`
   fill over the strip it sits in, so the resting spinner was already
   invisible; and the suggestions dropdown opening is the real feedback
   that a search ran.

   THE PADDING GOES BACK TO 22px IN BOTH STATES. v9 used 60px when
   filled purely to keep text clear of a 40px X that no longer exists.
   Leaving it would make the field visibly re-flow its text the moment
   you typed the first character, which is worse than the X was. Rest
   and filled are now identical, so nothing moves.

   THE TRADE-OFF, stated: clicking the X was the only pointer-driven
   way to empty the field. Clearing is now select-all-and-delete, or
   Escape, which FiboSearch already handles. On a header search that
   people retype rather than edit, that is a fair trade, but it IS a
   removed affordance rather than pure decoration.

   The v7 rule pinning `.dgwt-wcas-preloader{right:56px}` is left in
   place. It is inert now and costs nothing, and it would matter again
   if the X were ever brought back.
   ============================================================ */

.dgwt-wcas-search-wrapp .dgwt-wcas-preloader,
.ct-header [data-device="mobile"] .dgwt-wcas-preloader,
.ct-header [data-device="desktop"] .dgwt-wcas-preloader {
  display: none !important;
}

.dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-search-input,
.ct-header [data-device="mobile"] .dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-search-input {
  padding-right: 22px !important;
}
/* end bizco-search-no-clear-x v9.1 */


/* ============================================================
   MEGA MENU: Shop all as inline text button          [BIZCO]
   bizco-megamenu-shopall v2   *** revert = delete block ***
   Restyles the existing wp-block-button in each panel's
   .mega-menu-title-row to the shipped .bizco-shopall spec
   (See all products, home page) and collapses the 18rem title
   column so the link hugs the category name at a fixed 18px.
   ============================================================ */
.header-menu-1 .sub-menu .mega-menu-title-row {
  align-items: baseline !important;
  gap: 18px !important;
}
.header-menu-1 .sub-menu .mega-menu-title-row > .wp-block-column {
  flex: 0 0 auto !important;
  width: auto !important;
  /* v2 2026-08-23: the row's align-items:baseline above NEVER applied -
     both columns carry core's .is-vertically-aligned-center, whose
     align-self:center beats the container's align-items. That vertically
     centred "Shop all" against the taller h4 box, so it floated ~2px
     (more at wide viewports, where the title clamps up to 26px) above the
     category title's baseline. Forcing align-self here puts the link's
     baseline exactly on the title's. Measured 1440: title baseline 239.0,
     link baseline 236.98 -> 239.0. */
  align-self: baseline !important;
}
.header-menu-1 .sub-menu .mega-menu-title-row .wp-block-buttons,
.header-menu-1 .sub-menu .mega-menu-title-row .wp-block-button {
  margin: 0 !important;
}
.header-menu-1 .sub-menu .mega-menu-title-row .wp-block-button__link {
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #1A7A4A !important;
  font: 600 16px/1.3 'Outfit', sans-serif !important;
  text-decoration: none !important;
  transform: none !important;
}
.header-menu-1 .sub-menu .mega-menu-title-row .wp-block-button__link:hover {
  background: none !important;
  color: #1A7A4A !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
/* end bizco-megamenu-shopall v2 */


/* ==========================================================================
   bizco-headmark v1 - 2026-08-22
   The green accent word inside headings was retired (owner: it "looks
   really ai generated"). Every heading that carried one now runs
   green rule, then grey uppercase label, then black headline.
   This is the base mark; each snippet that owns a surface tightens the
   margins for its own type size.
   The home hero .bizco-headline is DELIBERATELY excluded and keeps its
   #1A7A4A accent on "for less." -- owner's call, same day.
   ========================================================================== */
.bizco-headmark{
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: #0F9558;
  margin: 0 0 12px;
}


/* ============================================================
   HOME TRANSPARENT PRICING - MATCHED CARD HEIGHTS      [BIZCO]
   bizco-trans-match v1  (2026-08-22)
   Both subs reserve two lines so the two card headers are the
   same height at every width. Without it the cost sub fits on
   one line once the pane passes ~740px and its card ends 27px
   short of the chart's, which puts the pool of whitespace back
   under the numbers - the exact thing this pass removed.
   ============================================================ */
.bizco-trans-pane .bizco-cost-sub { min-height: 54px; }

/* ============================================================
   HOME COST BREAKDOWN - SOURCE LINE                    [BIZCO]
   bizco-cost-source v2  (2026-08-24)

   One addition to the guest-home receipt card, scoped to
   .bizco-trans-pane-cost so the product page's own cost box is
   untouched.

   LIVE MARK REMOVED, v2 (2026-08-24). The title used to share
   its row with a green dot + LIVE label. It went because the
   chart in the pane beside it draws an ILLUSTRATIVE series, and
   a live badge on one half of a two-card panel reads as a claim
   about the whole panel. .bizco-cost-head keeps its flex row
   (harmless with a single child) so the title sits where it did.

   A hairline closes the three figures, then the source line:
   a micro-label in the same family as the row labels, plus
   the product name as the card's only link. The words are
   read off the live product in snippet 107 (pack-size suffix
   stripped), so they cannot drift out of sync with the
   figures above them.

   HEIGHT: the source line adds ~50px and .bizco-trans-panel is a
   stretched grid, so the chart card grows with it. The chart svg
   is grown by the same amount in snippet 107 (viewBox AND pinned
   px height together, keeping px-per-unit at ~1.68) so nothing
   pools around the plot.
   ============================================================ */

.bizco-trans-pane-cost .bizco-cost-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.bizco-trans-pane-cost .bizco-cost-head .bizco-cost-title {
  flex: 1 1 auto;
  min-width: 0;
}
.bizco-cost-source {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid #EFF2F0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5B6660;
}
.bizco-cost-source-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A938E;
  margin-right: 9px;
}
.bizco-cost-source a {
  color: #1A7A4A;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 122, 74, 0.45);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.bizco-cost-source a:hover,
.bizco-cost-source a:focus-visible {
  color: #0F5230;
  text-decoration-color: #0F5230;
}

/* ------------------------------------------------------------
   bizco-cost-source v3 (2026-08-27) - CENTRED IN ITS OWN SPACE

   The space under the hairline was 13px above the credit line and
   the card's whole bottom padding (22-32px) below it, so the words
   sat high in a band that reads as one block of whitespace. Split
   the SAME total evenly: the cost card gives up its bottom padding
   and the credit line carries it symmetrically instead, so the
   line box lands dead centre and the card's height does not move
   by a pixel (the chart card beside it is height-matched, so any
   change here would push the plot around).

   The credit line is the pane's last child, which is what makes
   the swap exact. Keep it last.
   ------------------------------------------------------------ */
.bizco-trans-pane-cost { padding-bottom: 0; }
.bizco-trans-pane-cost .bizco-cost-source {
  padding-top: calc((13px + var(--bizco-pane-pad)) / 2);
  padding-bottom: calc((13px + var(--bizco-pane-pad)) / 2);

  /* Between about 920 and 1100px the CHART card is the taller of the two and
     stretches this one past its own content. Nothing else in the column grows
     (every child computes flex: 0 1 auto), so that slack used to pool below
     the credit line - 4.7px of it, which is enough to read as off-centre once
     the padding above and below is otherwise equal. Growing here takes all of
     it, and align-content re-centres inside whatever height we end up with.

     DO NOT REACH FOR display:grid OR display:flex HERE. Both blockify their
     children, and this line's children are the inline label and the inline
     link: they stop being one wrapping run and stack into two rows, which
     grew the card 16px at every width when it was tried. align-content on a
     BLOCK container does the same job without touching the inline flow
     (Chrome 129+, Safari 17.6+, Firefox 125+); anything older simply ignores
     it and lands back on the old start-aligned behaviour. */
  flex: 1 0 auto;
  align-content: center;
}
/* Phones: the label gets its own line so the product name wraps as
   one clean run instead of raggedly around a tracked-out label. */
@media (max-width: 560px) {
  .bizco-trans-pane-cost .bizco-cost-head { gap: 12px; }
  .bizco-cost-source { margin-top: 14px; padding-top: 11px; font-size: 12.5px; }
  .bizco-trans-pane-cost .bizco-cost-source {
    padding-top: calc((11px + var(--bizco-pane-pad)) / 2);
    padding-bottom: calc((11px + var(--bizco-pane-pad)) / 2);
  }
  .bizco-cost-source-k {
    display: block;
    margin: 0 0 2px;
    font-size: 10px;
  }
}


/* ============================================================
   HOME FAQ — "VIEW ALL FAQs" ALIGNS WITH THE LAST FAQ   [BIZCO]
   bizco-faq-cta-bottom v1  (2026-08-24, owner request)
   In the two-column layout the button sat 28px under the
   heading (rule 1 of bizco-faq-refine v1), leaving ~357px of
   empty column beneath it at 1600px. It now sits at the FOOT of
   the left column, so its bottom edge lines up with the bottom
   rule of the last FAQ row.

   The columns are stretch-aligned, so the left column already
   carries the right column's full height; margin-top:auto is all
   it takes, and the button keeps tracking the list as rows open
   and close. Scoped to 782px and up, which is where Gutenberg
   stops wrapping .wp-block-columns - the stacked order below
   that (bizco-faq-mobile v1 / refine rule 6) is untouched.
   ============================================================ */

@media (min-width: 782px) {
  .bizco-faq-section .wp-block-column:has(.bizco-faq-btn) .wp-block-buttons {
    margin-top: auto;
    margin-bottom: 0;
  }
}

/* ============================================================
   PILLS: TEXT IS ALWAYS CENTRED                          [BIZCO]
   bizco-pill-center v1  (owner 2026-08-28)
   A pill is a rounded label, so its text belongs in the middle of
   it. Most pills are only as wide as one line of their own text, so
   nothing moves; the ones that DID look wrong are the pills whose
   label wraps inside a narrow phone cell ("Not a MAX Member" in the
   membership stat), where the second line sat flush left.
   justify-content handles the flex pills, text-align the wrapped
   lines and the inline-block ones. Listed by name on purpose: the
   -pills / -pillrow CONTAINERS must keep their own alignment.
   ============================================================ */
:is(.bizco-mh-pill,
    .bizco-ntf-pill,
    .bizco-card-pill,
    .bizco-ftc-pill,
    .bizco-taxpill,
    .bizco-acct-taxpill,
    .bizco-acct-locpill,
    .bizco-ft-locpill,
    .bizco-mx-pill,
    .bizco-ret2-pill,
    .bizco-refc-pill,
    .bizco-ph2-pill,
    .bizco-subx-pill,
    .bizco-subx-cardpill,
    .bizco-rva-varpill,
    .bizco-smp-pill,
    .bizco-rst-badge) {
  justify-content: center;
  text-align: center;
}
/* end bizco-pill-center v1 */
/* p4 check */

/* ============================================================
   PHONE: NO BOX UNDER 16px, SO IPHONE SAFARI NEVER ZOOMS   [BIZCO]
   bizco-zoom v1  (fix group TEST-ZOOM-1, owner report 2026-09-22)
   On an iPhone, Safari zooms the whole page in when the customer
   taps into a box whose text is smaller than 16px, and leaves it
   zoomed after the keyboard goes. Every box a customer can type
   into is floored at 16px on a phone. Only boxes that MEASURED
   under 16px on the phone are named here, so nothing that was
   already 16px or larger changes, and a computer never matches
   the media query. The header search bar is already 16px and is
   not here. The Stripe card boxes are JavaScript (130, 145) and
   the staff console has its own stylesheet (ops.css).
   ============================================================ */
@media (max-width: 767.98px) {
  /* the quantity box on the catalogue cards (post 89 sets .95rem), on the product page, in the cart and on Rapid Restock
     (Blocksy draws every .quantity box at 0.9 of its parent: 14.4 / 12.6 / 13.05px) */
  .bizco-loop-qty input,
  .quantity input.qty,
  .bizco-rr-qty .quantity input,
  /* the search boxes on Rapid Restock, My Inventory and the samples window */
  #bizco-rr-search,
  #bizco-mi-search,
  #bizco-smp-q,
  /* My Account: account details and the password boxes (the theme's 14.5px form text), the address, business and
     location forms, the invite box on Authorized Users, the free-trial transfer choice */
  .woocommerce-account input.woocommerce-Input,
  .bizco-acct-addform input,
  .bizco-acct-addrow input,
  .bizco-acct-locblock input,
  .bizco-acct-billfields input,
  #bizco-addbiz-form input,
  select.bizco-acct-select,
  #bizco-au-email,
  #bizco-ft-transferto,
  /* the Make a Return window's reason and note */
  .bizco-ret-modal select,
  .bizco-ret-modal textarea,
  /* the add-card window's name box and the store-credit amount box on the cart */
  #bizco-ac-name,
  .bizco-cart-credit-amtrow input,
  /* the savings calculator */
  .sc-field-box input,
  .sc-stepper .sc-qty-input,
  .bizco-sc-search,
  /* the catalogue's sort choice, the native box behind the styled one */
  select.orderby {
    font-size: 16px !important;
  }
  /* the Add a business form is a grid whose one column is sized by its boxes, and a box asks for room for 20 characters
     of its own text: at 16px that is 333px against a 309px form, so the column and every box would stick 24px out of
     the card on the right. min-width:0 lets the column stay at the card's width, and every box keeps its 309px. */
  #bizco-addbiz-form input,
  #bizco-addbiz-form select {
    min-width: 0;
  }
}
/* end bizco-zoom v1 */

/* bizco-zoom v1a (fix group TEST-ZOOM-1a, owner report 2026-09-22 on account 47350): the first pass only measured boxes that
   exist when a page loads. The windows that are BUILT when they open were missed: the join / Reactivate MAX window, the
   Add-business-to-MAX window, the cart's add-card window, Make a Return, Write a review, the review-ask card, the
   eligibility checker's email box, the Rapid Restock store-credit box and the referral claim box. Same rule, same floor. */
@media (max-width: 767.98px) {
  .bizco-mx-modal input, .bizco-mx-modal textarea, .bizco-mx-modal select,
  .bizco-mxadd-ccname, .bizco-mxadd-zip,
  .bizco-ac-fields input,
  .bizco-ret-modal input,
  .bizco-review-modal input, .bizco-review-modal textarea, .bizco-review-modal select,
  #respond input, #respond textarea, #respond select,
  .bizco-rva-ta,
  .bizco-elig__email,
  #bizco-rr-creditamt, [data-bizco-credit-amt] {
    font-size: 16px !important;
  }
}
/* end bizco-zoom v1a */