/* ============================================================================
   Bully Bundles - product category (PLP) redesign
   ============================================================================
   Layered on top of Divi + WooCommerce + the Barn2 product table. Enqueued
   only on is_product_category() pages (see add_custom_category_scripts() in
   functions.php), after the theme stylesheet so the !important overrides win.

   Gate classes:
     body.bb-plp-redesign  - set server-side by bb_plp_body_class() in
                             functions.php, so it applies from first paint.
                             Gates page chrome, hero and the bottom-of-page
                             sections. The script removes it if it stands down.
     body.bb-plp-chart     - set only once the product table has been split
                             into odor boxes. Gates the Featured/All Options
                             view switching, so a failed transform leaves the
                             original single table visible and usable rather
                             than a half-styled page.
     body.bb-plp-fallback  - set when the transform bails out. Hands back the
                             Barn2 table, which is hidden until one of these
                             two classes lands (see section 1).

   Derived from the prototype in requirements/bully-bundles-category-page-
   handoff/, rewritten against the live DOM (Barn2 renders one table; the
   boxes, grouped headers and tabs are all built at runtime).
   ============================================================================ */


/* ============================================================
   1. Page chrome
   ============================================================ */

/* Keep the Barn2 table out of sight from first paint until the chart replaces
   it, so a reload does not flash the old layout. Keyed on tax-product_cat,
   which WordPress always renders, rather than bb-plp-redesign, which the
   script can take away. The wrapper does not exist until DataTables builds
   it, so the bare table is covered too. Hidden rather than display:none so
   DataTables can still measure its columns. opacity does the real work:
   custom.css sets visibility:visible on "thead tr th.all, .col-add-to-cart",
   which punches the header row and Buy column through a hidden parent, and
   opacity cannot be overridden from below. If the script never runs at all,
   the animation hands the table back after 8s. */
body.tax-product_cat:not(.bb-plp-chart):not(.bb-plp-fallback) table.wc-product-table,
body.tax-product_cat:not(.bb-plp-chart):not(.bb-plp-fallback) .wc-product-table-wrapper {
  visibility: hidden;
  opacity: 0;
  animation: bb-plp-reveal 0s linear 8s forwards;
}
@keyframes bb-plp-reveal { to { visibility: visible; opacity: 1; } }

/* The same for everything under the pill strip: the hero is restructured by
   the script too, so hold the whole block back and fade it in once, finished.
   The pills (rendered server-side) stay put, which is what the eye tracks
   when moving between categories. Same 8s escape hatch as the table. */
body.tax-product_cat:not(.bb-plp-chart):not(.bb-plp-fallback) #left-area > .cat-siblings ~ * {
  visibility: hidden;
  opacity: 0;
  animation: bb-plp-reveal 0s linear 8s forwards;
}
@keyframes bb-plp-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  body.bb-plp-chart #left-area > .cat-siblings ~ * { animation: bb-plp-fade-in 0.2s ease-out; }
}

/* One panel per category this page view has built (see "Switching
   categories in place" in category-redesign.js); only the current one shows. */
body.bb-plp-redesign .bb-plp-panel[hidden] { display: none !important; }
body.bb-plp-chart #left-area > .bb-plp-panel.bb-plp-panel--swapped { animation: none; }

/* Crossfade between category pages instead of blanking (Safari 18.2+,
   Chrome 126+; others just navigate normally). Both pages have to opt in, and
   this file only loads on category pages, so it only applies pill to pill. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: 0.2s; }
}

/* The announcement bar + logo bar are ~84px of fixed chrome but the page
   reserved ~111px, leaving a white gap before the content starts. */
body.bb-plp-redesign.woocommerce-page.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container { padding-top: 92px !important; }
body.bb-plp-redesign #top-header { background-color: #d8d8d6 !important; }
body.bb-plp-redesign #main-header { background-color: #ececea !important; box-shadow: none !important; margin-top: 0 !important; }

/* Mobile: the header is position:absolute (it scrolls away rather than being
   fixed) and Divi's hard-coded "#main-header { top: 30px }" does not match the
   real announcement-bar height, leaving a white strip between the two grey
   bars. Put both in normal flow so they stack flush and drop the padding. */
@media (max-width: 980px) {
  body.bb-plp-redesign #top-header { position: static !important; }
  body.bb-plp-redesign #main-header { position: static !important; top: auto !important; margin: 0 !important; }
  body.bb-plp-redesign.woocommerce-page.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container { padding-top: 0 !important; }
}

/* Breadcrumb is redundant on the category template: the logo is Home, the H1
   repeats the term name and the sibling strip handles cross-category nav. It
   stays on product pages, where the hierarchy is real. A JSON-LD
   BreadcrumbList should be emitted in <head> so the SERP trail survives. */
body.bb-plp-redesign .woocommerce-breadcrumb,
body.bb-plp-redesign #left-area .woocommerce-breadcrumb { display: none !important; }

body.bb-plp-redesign .bb-hidden { display: none !important; }

/* Condense the product area but keep it centred on the page - equal ~75px
   gutters rather than a full-bleed table or a lopsided left-aligned block. */
body.bb-plp-redesign .cat-siblings,
body.bb-plp-redesign .woocommerce-products-header,
body.bb-plp-redesign .odor-boxes,
body.bb-plp-redesign .best-value-view,
body.bb-plp-redesign .best-value-view > .bv-more { max-width: 930px; margin-left: auto !important; margin-right: auto !important; }
body.bb-plp-redesign .odor-boxes .odor-box,
body.bb-plp-redesign .best-value-view .odor-box { max-width: none !important; }


/* ============================================================
   2. Sibling-category strip
   ============================================================
   One compact row of the top-level categories directly under the header, so a
   wholesale buyer can jump between ranges - and build a multi-category order -
   without going back to the main menu. Current term is marked and not a link;
   every other pill, "Current Specials" included, is identical quiet grey. */
.cat-siblings { margin-top: 12px; margin-bottom: 12px; }
.cat-siblings ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 7px; list-style: none; margin: 0; padding: 0; }
#left-area .cat-siblings ul { margin: 0 !important; padding: 0 !important; }
#left-area .cat-siblings li { list-style: none !important; margin: 0; padding: 0; }
#left-area .cat-siblings li::before { content: none !important; }
#left-area .cat-siblings a,
#left-area .cat-siblings span.is-current {
  display: inline-block; padding: 5px 12px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  color: #4a5b52 !important; text-decoration: none;
  background: #f1f4f2; border: 1px solid #e3e9e5; border-radius: 999px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#left-area .cat-siblings a:hover { background: #e6efe9; color: #2f6b49 !important; border-color: #cfe0d5; }
/* span.is-current, matching the base rule above - without the element the base
   rule outranks this one and the current pill stays grey. */
#left-area .cat-siblings span.is-current { background: #2f6b49; border-color: #2f6b49; color: #fff !important; cursor: default; }


/* ============================================================
   3. Hero
   ============================================================ */

body.bb-plp-redesign .woocommerce-products-header { margin: 0 auto 4px !important; padding: 0 !important; }

/* Top-align the two hero columns. Centred, opening the "About" disclosure grew
   the right column and re-centred BOTH, so the image visibly jumped. */
body.bb-plp-redesign .term-description { display: flex !important; align-items: flex-start; gap: 30px; margin: 0 !important; }

/* Crops only the "Loved by thousands" strip baked into the bottom of every
   category's 602x400 header image (it is rendered as text instead). At 372px
   wide the photos, names and gram ranges all end by 214px and the strip starts
   at 235px, in all six images, so the ratio - not a fixed height - keeps the
   cut in that gap at any width. The image keeps its natural height and the
   frame's overflow does the cropping. */
body.bb-plp-redesign .term-description > p:first-child { display: block !important; flex: 0 0 auto; width: 372px; height: auto; aspect-ratio: 372 / 224; overflow: hidden; border-radius: 7px; float: none !important; margin: 0 !important; line-height: 0; }
body.bb-plp-redesign .term-description > p:first-child img.mobile-header { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; }

/* min-height matches the photo and the text is centred against it, whatever
   height the heading, tagline, About and tabs add up to for this category. */
body.bb-plp-redesign .term-description .category-block { display: flex !important; flex-direction: column; justify-content: center; flex: 1 1 auto; height: auto !important; min-height: 224px !important; padding-top: 0 !important; margin: 0 !important; }
body.bb-plp-redesign .term-description .category-block .product-category-image.desktop-header { display: none !important; }
body.bb-plp-redesign .term-description .category-block .product-category-text { display: block !important; height: auto !important; min-height: 0 !important; }
body.bb-plp-redesign .term-description .product-category-text h1 { font-size: 30px !important; line-height: 1.15 !important; padding: 0 !important; margin: 0 0 6px !important; height: auto !important; min-height: 0 !important; }
body.bb-plp-redesign .term-description .product-category-text > p { padding: 0 !important; margin: 0 0 5px !important; height: auto !important; min-height: 0 !important; font-size: 15px !important; }
/* The comp's hero is heading, tagline, About and tabs only. The category
   description (Products > Categories in admin) also carries an intro line and
   a "Packaged in..." line as plain paragraphs; they stay in admin and are
   hidden here. */
body.bb-plp-redesign .term-description .product-category-text > p:not(.loved-line) { display: none !important; }

/* The tagline pulled out of the cropped hero image. */
body.bb-plp-redesign .term-description .product-category-text .loved-line { font-size: 12px !important; font-style: italic; color: #7bbf99 !important; margin: 4px 0 0 !important; }
body.bb-plp-redesign .term-description .product-category-text .loved-line .loved-heart { font-style: normal; color: #3aa564; font-size: 12px; vertical-align: baseline; }
body.bb-plp-redesign .term-description .product-category-text .view-toggle { margin: 11px 0 0 !important; }

/* "About" disclosure - the four-bullet blurb, collapsed by default. */
.term-description .desc-more { margin: 3px 0 !important; height: auto !important; min-height: 0 !important; }
.term-description .desc-more > summary { display: inline-block; list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: #3f8a63; text-decoration: none; }
.term-description .desc-more > summary::-webkit-details-marker { display: none; }
.term-description .desc-more > summary::after { content: " \25BE"; }
.term-description .desc-more[open] > summary::after { content: " \25B4"; }
.term-description .desc-more > summary:hover { text-decoration: none; }
.term-description .desc-more ul { margin-top: 8px; }

@media (max-width: 760px) {
  body.bb-plp-redesign .term-description { display: block !important; }
  body.bb-plp-redesign .term-description .category-block { padding-top: 0 !important; min-height: 0 !important; }
  body.bb-plp-redesign .term-description > p:first-child { width: auto; max-width: 340px; margin: 0 0 10px !important; }
}


/* ============================================================
   4. Featured / All Options tabs
   ============================================================ */

.view-toggle { display: inline-flex; border: 1.5px solid #74bc91; border-radius: 8px; overflow: hidden; margin: 2px 0 22px; }
.view-toggle button { border: 0; background: #fff; padding: 9px 20px; font-family: inherit; font-weight: 700; font-size: 13px; color: #0f5132; cursor: pointer; }
.view-toggle button + button { border-left: 1px solid #cbe6d6; }
.view-toggle button.on { background: #74bc91; color: #fff; }

/* Only switch views once the chart has actually been built. */
body.bb-plp-chart[data-bbview='best'] .odor-boxes:not(.best-value-view) { display: none; }
body.bb-plp-chart[data-bbview='all'] .best-value-view { display: none; }

.best-value-view .odor-box--featured { margin-bottom: 0; }
/* Same head background as every other box - a distinct tint made the green
   bar visibly change shade when toggling tabs. */
.odor-box--featured .odor-box__head { background: #f4f7f5; border-bottom-color: #74bc91; }
.bv-more { margin: 12px 4px 4px; font-size: 13px; color: #666; }
.best-value-view > .bv-more { margin: 5px 4px 24px; border-top: 0; padding-top: 0; }
.bv-see-all { border: 0; background: none; color: #0f5132; font-weight: 700; font-family: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }


/* ============================================================
   5. Odor boxes
   ============================================================ */

.odor-boxes { margin: 0 0 8px; }
body.bb-plp-redesign .best-value-view,
body.bb-plp-redesign .odor-boxes { margin-top: -10px !important; }
.odor-box {
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  background-clip: padding-box;
  /* Never overflow:hidden - that traps the sticky <thead>. The body padding
     keeps content clear of the rounded bottom instead. */
  margin-bottom: 30px;
}
.odor-box__head {
  display: flex;
  align-items: baseline;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 8px 16px 7px;
  background: #f4f7f5;
  border-bottom: 2px solid #74bc91;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  min-height: 0;
}
.odor-box__title { margin: 0; padding-bottom: 2px; font-size: 20px; line-height: 1.25; font-weight: 700; color: #111; flex: 0 0 auto; }

/* Featured only: the value descriptor sits right after the title, quieter and
   green. Per-category editable text - see CONFIG.FEATURED_BLURB. */
.odor-box__sub--keep {
  display: inline !important; order: 1; flex: 0 1 auto;
  font-size: 12.5px !important; font-weight: 600 !important; color: #3f8a63 !important; line-height: 1.3 !important;
  margin: 0 !important; text-align: left !important;
}
/* "Free shipping - Sold in multiples of 50 sticks" pushed to the right edge of
   every box head, identical on both tabs so it does not shift when toggling. */
.odor-box__head .odor-box__sub:not(.odor-box__sub--keep),
.odor-box__head .odor-box__note--sub {
  display: inline !important; order: 2; flex: 0 0 auto; width: auto !important;
  margin: 0 0 0 auto !important; text-align: right !important;
  font-family: inherit !important;
  font-size: 13px !important; font-weight: 600 !important; color: #555 !important; line-height: 1.3 !important;
}
/* Its two halves sit directly in the head row, so when the line does not fit
   beside the title only "Sold in multiples of..." wraps: the title and "Free
   shipping" keep the top row, and the script's is-wrapped class gives the rest
   its own right-aligned row and drops the dot. */
.odor-box__head .odor-box__sub.odor-box__ship { display: contents !important; }
.odor-box__ship > strong { order: 2; margin-left: auto; white-space: nowrap; font-weight: 700; }
.odor-box__ship-rest { order: 2; text-align: right; }
.odor-box__ship-sep { margin-right: 10px; }
.odor-box__ship.is-wrapped .odor-box__ship-rest { flex-basis: 100%; }
.odor-box__ship.is-wrapped .odor-box__ship-sep { display: none; }
/* The "More Choices" availability note drops to its own line below the row. */
.odor-box__head .odor-box__note:not(.odor-box__note--sub) { order: 3; flex-basis: 100% !important; width: 100% !important; margin: 3px 0 0 !important; font-weight: 400 !important; color: #666 !important; text-align: left !important; }
.odor-box__note { flex-basis: 100%; width: 100%; margin: 3px 0 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: #666; }

/* The box's own border is the single closing line, directly under the last
   product row - no gap, no doubled border. */
.odor-box__body { overflow: visible; padding: 0; }
.odor-box__table tbody tr:last-child > td { border-bottom: 0 !important; }
.odor-box .wc-product-table-wrapper { margin: 0 !important; overflow: visible; }

#content-area .wc-product-table-wrapper table.odor-box__table {
  width: 100% !important;
  table-layout: fixed;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  visibility: visible !important;
}

/* --- frozen column headers, desktop and mobile --- */
.odor-box__table thead,
.odor-box__table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 84px;
  z-index: 5;
}
.odor-box__table thead th {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  font-weight: 700;
  text-align: left;
  padding: 9px;
  vertical-align: middle;
}

/* The two boxes that drop the Odor column show the odor level only in the box
   head, so pin the head too, stacked just above the frozen column row. The
   shape-grouped boxes likewise carry Shape | Length only in the head. The
   other boxes keep their column, which already freezes with the header. */
.odor-box--very-low .odor-box__head,
.odor-box--low-medium .odor-box__head,
.odor-box--shape .odor-box__head {
  position: -webkit-sticky; position: sticky;
  top: 84px; z-index: 7;
}
/* --bb-thead-top is measured off the box head by syncStickyOffsets() so the two
   sticky rows always meet. The fallback is the value for an unwrapped head at
   the desktop chrome offset (84px + 44px head, less 1px of overlap). */
.odor-box--very-low .odor-box__table thead,
.odor-box--very-low .odor-box__table thead th,
.odor-box--low-medium .odor-box__table thead,
.odor-box--low-medium .odor-box__table thead th,
.odor-box--shape .odor-box__table thead,
.odor-box--shape .odor-box__table thead th {
  top: var(--bb-thead-top, 127px);
}
/* "Rings | 3″": the length reads as a qualifier of the shape. */
.odor-box__title-sub { font-size: 0.8em; font-weight: 600; color: #444; }

/* --- product thumbnail --- */
/* Raw images are ~90-100px and were spilling past the cell and the box border. */
.odor-box__table td.col-image .product-thumbnail-wrapper { width: 74px; height: 74px; overflow: hidden; display: block; position: relative; border-radius: 6px; }
.odor-box__table td.col-image img { width: 74px !important; height: 74px !important; object-fit: cover !important; display: block; }
/* The theme pins the "Sale!" ::after at top:-67px;left:60%, which overflow:hidden
   then shaves. Re-pin it as a compact tag fully inside the thumbnail. */
.odor-box__table td.col-image .product-thumbnail-wrapper::after {
  position: absolute !important;
  top: 3px !important; right: 3px !important; left: auto !important; bottom: auto !important;
  margin: 0 !important; padding: 1px 4px !important;
  font-size: 11px !important; line-height: 1.35 !important; font-weight: 700 !important;
  background: #fff !important; color: #74bc91 !important;
  border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
  z-index: 3 !important;
}


/* ============================================================
   6. Row layout - each row reads as one product
   ============================================================
   Thickness / Weight / Odor stay separate columns, but there are no vertical
   dividers between them (only a faint one before the pricing group and before
   Buy: "what it is" vs "what it costs" vs "buy it"), generous padding, one
   hairline rule between products, and a full-row hover. */

.odor-box__table tbody td,
.odor-box__table thead th { border-right: 0 !important; border-left: 0 !important; padding: 13px 6px !important; vertical-align: middle !important; }
.odor-box__table tbody td.col-buy,
.odor-box__table thead th.col-buy { border-left: 1px solid #ececec !important; }
.odor-box__table tbody td.col-50-100,
.odor-box__table thead th.col-50-100,
.odor-box__table thead th.grp-tiers { border-left: 1px solid #ececec !important; }
.odor-box__table tbody tr td { border-bottom: 0 !important; }
.odor-box__table tbody tr { border-bottom: 1px solid #e3e3e3 !important; }
.odor-box__table tbody tr:last-child { border-bottom: 0 !important; }
.odor-box__table tbody tr:hover td { background: #f2f7f4 !important; }

.odor-box__table tbody td.col-thickness { font-weight: 700 !important; font-size: 14.5px !important; color: #111 !important; }
.odor-box__table tbody td.col-thickness a,
.odor-box__table tbody td.col-thickness span[data-slug] { color: #111 !important; }
.odor-box__table tbody td.col-odor { font-size: 14px !important; font-weight: 700 !important; color: #333 !important; }
.odor-box__table tbody td.col-weight-range { font-size: 13px !important; font-weight: 400 !important; color: #999 !important; }

/* Thickness + Weight read as one grouped column under a single "Thickness &
   Range" header: no right padding on the name, a small left pad on the range,
   so the wider gap falls before Odor instead. */
.odor-box__table tbody td.col-thickness { padding-left: 4px !important; padding-right: 0 !important; }
.odor-box__table tbody td.col-weight-range { padding-left: 5px !important; padding-right: 4px !important; }
.odor-box__table thead th.col-thickness--grouped { line-height: 1.15 !important; padding-left: 4px !important; padding-right: 4px !important; }


/* ============================================================
   7. Tier pricing columns
   ============================================================ */

/* The site's Divi custom CSS prepends a "$" to every tier cell via ::before,
   because the Barn2 cells hold a bare number. The redesign renders the symbol
   inside .tier-val instead, so drop the pseudo-element on all five tier
   columns - otherwise a cell with no price shows a lone "$". */
.odor-box__table tbody td.col-50-100::before,
.odor-box__table tbody td.col-100-200::before,
.odor-box__table tbody td.col-250-450::before,
.odor-box__table tbody td.col-500-950::before,
.odor-box__table tbody td.col-1000::before { content: "" !important; }

.odor-box__table tbody td.col-50-100,
.odor-box__table tbody td.col-100-200,
.odor-box__table tbody td.col-250-450,
.odor-box__table tbody td.col-500-950,
.odor-box__table tbody td.col-1000 { text-align: center !important; position: relative; }
/* Every price sits in an identical inline-block box (transparent unless it is
   the active tier) and the per-gram / stock notes are taken out of flow, so
   all prices in a row share one baseline and one horizontal centre. */
.odor-box__table td .tier-val { display: inline-block; padding: 2px 6px; border-radius: 3px; }
.odor-box__table td.tier-active .tier-val { background: #ecf5f0; color: #0f5132 !important; font-weight: 700; }
.odor-box__table td.tier-clickable { cursor: pointer; }
.odor-box__table td.tier-clickable:hover:not(.tier-active) { background: #f3f6f4; }
.odor-box__table td.tier-clickable:focus-visible { outline: 2px solid #74bc91; outline-offset: -2px; }
.odor-box__table td.tier-unreachable { cursor: default; }
.odor-box__table td.tier-unreachable .tier-val { color: #bcbcbc !important; text-decoration: line-through; font-weight: 400; }

.odor-box:not(.bulk-open) .odor-box__table .col-500-950,
.odor-box:not(.bulk-open) .odor-box__table .col-1000 { display: none; }

.odor-box__table thead th.grp-tiers { padding: 4px 4px 3px; }
.tier-head { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.tier-head__label { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a7a7a; line-height: 1.1; }
/* The header cell carries one padding while each price cell carries its own,
   so equal slices of the header's content box do not land on the columns.
   Pull the number row out to the cell's edges (the 6px matches the th
   padding) and the labels centre on the same line as the prices. */
.tier-head__nums { display: flex; margin: 0 -6px; }
.tier-head__nums > span { flex: 1 1 0; min-width: 0; box-sizing: border-box; text-align: center; font-weight: 700; font-size: 13px; color: #111; line-height: 1.1; }
/* "1,000+" is the one label wide enough to reach the toggle, which sits on
   the right edge of that column. Centre that label in the space beside the
   button, and shift its prices by the same amount so they stay underneath it. */
.odor-box.bulk-open .tier-head__nums > span:last-child { position: relative; left: -11px; }
.odor-box.bulk-open .odor-box__table td.col-1000 .tier-val,
.odor-box.bulk-open .odor-box__table td.col-1000 .pg-rate { transform: translateX(-11px); }

/* Toggle pinned to the RIGHT edge of the tier group, just after the last
   visible tier. That edge is a stable anchor - the group spans the same width
   in both states (only its sub-column count changes), so the button does not
   move and can be clicked again immediately. */
.odor-box__bulk-toggle { position: absolute; bottom: 0; right: 0; left: auto; top: auto; width: 16px; height: 16px; padding: 0; border: 1px solid #a9d3bd; border-radius: 50%; background: #fff; color: #3f8a63; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.odor-box__bulk-toggle:hover { background: #eef7f1; }
.odor-box__bulk-toggle:focus-visible { outline: 2px solid #74bc91; outline-offset: 1px; }

.pg-rate { position: absolute; left: 0; right: 0; top: 50%; margin-top: 10px; font-size: 9.5px; font-weight: 600; color: #3f8a63; letter-spacing: 0; white-space: nowrap; text-align: center; }

/* Qty 25 sub-line, which category.js renders into the 50 cell of 25-minimum
   products. Out of flow like the per-gram rate, so the 50 price stays on the
   same line as the other tiers instead of being pushed up by it. Its colour
   comes from the cell, which is what colours this row's prices (black, sale
   green, sold-out grey) - category.js hardcodes green for any sale row. */
.odor-box__table td.col-50-100 .tier-25-line {
  position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; transform: translateX(-50%);
  margin: 11px 0 0 !important; padding: 1px 5px; border-radius: 3px;
  white-space: nowrap; line-height: 1.2 !important; text-align: center !important;
}
.odor-box__table td.col-50-100 .tier-25-line,
.odor-box__table td.col-50-100 .tier-25-line span { color: inherit !important; font-weight: 500; }
.odor-box__table td.col-50-100 .tier-25-line .tier-25-label,
.odor-box__table td.col-50-100 .tier-25-line .tier-25-price { display: inline !important; margin: 0 !important; }
.odor-box__table td.col-50-100 .tier-25-line .tier-25-label { font-size: 10.5px !important; }
.odor-box__table td.col-50-100 .tier-25-line .tier-25-price { font-size: 12.5px !important; }
.odor-box__table td.col-50-100:has(.tier-25-line) .pg-rate { margin-top: 29px; }
/* At a quantity under 50 the sub-line is the price being paid. */
.odor-box__table td.tier-25-active .tier-25-line { background: #ecf5f0; }
.odor-box__table td.tier-25-active .tier-25-line,
.odor-box__table td.tier-25-active .tier-25-line span { color: #0f5132 !important; font-weight: 700; }

/* Collapsed and expanded widths both sum to 100 and share identical
   image/thickness/weight/odor/buy values, so the tier group occupies exactly
   the same span either way - only its internal division changes. */
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(1) { width: 13% !important; }   /* image */
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(2) { width: 9.5% !important; }  /* thickness */
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(3) { width: 7% !important; }    /* weight */
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(4) { width: 12.5% !important; } /* odor */
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(5) { width: 11.5% !important; }
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(6) { width: 11.5% !important; }
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(7) { width: 11.5% !important; }
.odor-box:not(.bulk-open) .odor-box__table colgroup col:nth-child(8) { width: 23.5% !important; } /* buy */

/* Very Low / Low-Medium drop the Odor column - 7-column collapsed layout. */
.odor-box--very-low:not(.bulk-open) .odor-box__table colgroup col:nth-child(1),
.odor-box--low-medium:not(.bulk-open) .odor-box__table colgroup col:nth-child(1) { width: 13% !important; }
.odor-box--very-low:not(.bulk-open) .odor-box__table colgroup col:nth-child(2),
.odor-box--low-medium:not(.bulk-open) .odor-box__table colgroup col:nth-child(2) { width: 13% !important; }
.odor-box--very-low:not(.bulk-open) .odor-box__table colgroup col:nth-child(3),
.odor-box--low-medium:not(.bulk-open) .odor-box__table colgroup col:nth-child(3) { width: 10% !important; }
.odor-box--very-low:not(.bulk-open) .odor-box__table colgroup col:nth-child(4),
.odor-box--low-medium:not(.bulk-open) .odor-box__table colgroup col:nth-child(4),
.odor-box--very-low:not(.bulk-open) .odor-box__table colgroup col:nth-child(5),
.odor-box--low-medium:not(.bulk-open) .odor-box__table colgroup col:nth-child(5),
.odor-box--very-low:not(.bulk-open) .odor-box__table colgroup col:nth-child(6),
.odor-box--low-medium:not(.bulk-open) .odor-box__table colgroup col:nth-child(6) { width: 13.5% !important; }
.odor-box--very-low:not(.bulk-open) .odor-box__table colgroup col:nth-child(7),
.odor-box--low-medium:not(.bulk-open) .odor-box__table colgroup col:nth-child(7) { width: 23.5% !important; }


/* ============================================================
   8. Buy cell - desktop
   ============================================================ */

.col-buy .quantity { width: auto !important; line-height: 1; }
/* No right padding: the native spin button is laid out inside it, so any value
   here holds the arrows off the right edge of the field. */
.odor-box__table td.col-buy input[name="quantity"] { width: 50px !important; min-width: 50px !important; padding: 2px 0 2px 3px !important; text-align: left; }
/* Last-of-stock rows: one possible quantity, shown in a read-only box. */
#content-area .odor-boxes .odor-box__table td.col-buy input.qty-fixed { text-align: center !important; padding: 2px 0 !important; cursor: default; outline: none; }

/* Desktop keeps the browser's own number spinner, which is what this cell has
   always used - custom.css forces it permanently visible site-wide with
   ::-webkit-*-spin-button { opacity: 1 }. The redesign only adds its own
   stepper at mobile widths, so there is nothing to draw here. */

.row-total { margin: -3px 0 0; font-size: 12px; font-weight: 700; color: #111; text-align: center; white-space: nowrap; line-height: 1.1; }

/* custom.css zooms the add button to 0.85 but disabled buttons to 0.8, and the
   cart loader disables the button for the whole request, so the button (and
   the row) shrank while the spinner showed. Hold the disabled state at 0.85. */
.odor-boxes .odor-box__table td.col-buy button.single_add_to_cart_button:disabled { zoom: 0.85; -moz-transform: scale(0.85); }

/* Limited-stock note: one line, always in the same spot above the qty stepper,
   rather than under whichever tier price it happened to constrain (which put
   it in a different column on every row and read as scattered). It sits in
   the .quantity box and hangs above it, so it is pinned to the stepper's left
   edge even when something wider than the stepper and button joins the cell
   and widens .add-to-cart-button. The padding holds its line open. */
.odor-box__table td.col-buy .add-to-cart-button.has-stock-note { padding-top: 14px; }
.odor-box__table td.col-buy .quantity { position: relative; }
.odor-box__table td.col-buy .stock-note {
  display: block; position: absolute; left: 0; bottom: 100%; margin: 0 0 2px; font-size: 10.5px; font-weight: 600;
  color: #a06a00; white-space: nowrap; line-height: 1.15; text-align: left;
}


/* "View Cart" and the discount line sit below the stepper box rather than in
   it (moved by keepCartMessageOutOfBuyBox), centred on the cell. */
.odor-box__table td.col-buy form.cart > a.added_to_cart { display: table; margin: 4px auto 0; }
.odor-box__table td.col-buy form.cart > .desktop-cart-wrapper { margin-top: 4px; }


/* ============================================================
   9. Sold-out rows
   ============================================================ */

.odor-box__table tr.bb-soldout > td,
.odor-box__table tr.bb-soldout > th { background-color: #f4f4f4 !important; color: #9b9b9b !important; }
.odor-box__table tr.bb-soldout a { color: #9b9b9b !important; }
.odor-box__table tr.bb-soldout img { filter: grayscale(1); opacity: .5; }
.odor-box__table tr.bb-soldout .add-to-cart-wrapper a { filter: grayscale(1); opacity: .75; }
.odor-box__table tr.bb-soldout td.col-thickness,
.odor-box__table tr.bb-soldout td.col-thickness a,
.odor-box__table tr.bb-soldout td.col-thickness span[data-slug] { color: #7d7d7d !important; }

/* Suppress the "Sale!" flash on a sold-out row - the Sold Out badge replaces it. */
.odor-box__table tr.bb-soldout .product-thumbnail-wrapper::after { content: "" !important; display: none !important; }
.odor-box__table tr.bb-soldout .product-thumbnail-wrapper { position: relative; }
.odor-box__table tr.bb-soldout .product-thumbnail-wrapper::before {
  content: "Sold Out";
  position: absolute; top: 0; left: 0; z-index: 3;
  font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: #b0b0b0; border: 1px solid #b0b0b0; border-radius: 3px;
  padding: 2px 4px; white-space: nowrap; filter: none; opacity: .9;
}

.restock-note { margin-top: 5px; font-size: 10px; line-height: 1.25; color: #969696 !important; text-align: center; }
/* "Get Notified" on top, the estimate below it, the pair pinned to the bottom
   of the cell. The #content-area .odor-boxes prefix is needed to out-weigh
   the mobile rules forcing .add-to-cart-wrapper to block. */
#content-area .odor-boxes .odor-box__table tr.bb-soldout td.col-buy { vertical-align: bottom !important; }
#content-area .odor-boxes .odor-box__table tr.bb-soldout td.col-buy .add-to-cart-wrapper {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important; gap: 6px !important;
}
#content-area .odor-boxes .odor-box__table tr.bb-soldout td.col-buy .restock-note { margin: 0 !important; }


/* ============================================================================
   10. MOBILE (<= 600px) - design target iPhone 15 (393px CSS width)
   ============================================================================
   The table stays a genuine table (products down, tiers across) and fits with
   NO horizontal scroll: the gram range moves under the thickness name
   (.wt-inline, added by JS), the Weight / Stock / 500+ / 1,000+ columns and the
   bulk toggle are dropped, and the Buy cell gets a big -/+ stepper with Add
   stacked below. The #content-area prefix out-weighs the theme's own baked
   "#content-area table.wc-product-table" mobile rules.
   ============================================================================ */

.wt-inline { display: none; }          /* gram range inlined under the name - mobile only */
.qty-btn { display: none; }            /* stepper buttons - shown on both breakpoints, styled differently */
.custom-qty-wrapper { display: inline; }
.mobile-sale-badge { display: none; }  /* real DOM sale ribbon replacing the desktop ::after */

@media (max-width: 600px) {
  /* --- hero --- */
  body.bb-plp-redesign #left-area .term-description > p:first-child { margin-bottom: 6px !important; }
  .cat-siblings { margin-bottom: 8px !important; }
  /* Every category visible at once - wrap to two compact centred rows rather
     than a horizontal scroller. */
  .cat-siblings ul { flex-wrap: wrap !important; justify-content: center; gap: 5px 5px; overflow: visible; }
  .cat-siblings li { flex: 0 0 auto; }
  #left-area .cat-siblings a,
  #left-area .cat-siblings span.is-current { font-size: 11.5px; padding: 4px 9px; }

  body.bb-plp-redesign #left-area .product-category-text .loved-line { display: block !important; font-size: 11px !important; font-style: italic; color: #7bbf99 !important; margin: 3px 0 4px !important; }
  body.bb-plp-redesign #left-area .product-category-text h1 { font-size: 24px !important; line-height: 1.15 !important; margin: 0 0 2px !important; }
  body.bb-plp-redesign #left-area .product-category-text > p:not(.loved-line) { font-size: 15px !important; margin: 0 0 8px !important; }

  /* "About" (shortened from "About our 6" Straight sticks") sits on the title's
     line rather than stranded at the far right; opening it drops the detail as
     a popover so the "About" text itself never moves. The popover spans the
     text block, not the "About" link: on a short title like "Current Specials"
     the link sits mid-screen and a link-anchored popover ran off the left. */
  body.bb-plp-redesign #left-area .term-description .product-category-text { position: relative; display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  body.bb-plp-redesign #left-area .term-description .product-category-text h1 { order: 0 !important; flex: 0 1 auto; padding-right: 0 !important; }
  body.bb-plp-redesign #left-area .term-description .product-category-text .desc-more { order: 1 !important; flex: 0 0 auto; position: static !important; margin: 0 !important; height: auto !important; min-height: 0 !important; }
  body.bb-plp-redesign #left-area .term-description .product-category-text .loved-line { order: 2 !important; flex-basis: 100%; width: 100%; }
  body.bb-plp-redesign #left-area .term-description .product-category-text > p:not(.loved-line) { order: 2 !important; flex-basis: 100%; width: 100%; }
  /* The bordered tab box wraps only the two buttons - it must not stretch to
     the page edge even though it sits on its own row. */
  body.bb-plp-redesign #left-area .term-description .product-category-text .view-toggle { order: 3 !important; flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; margin-top: 8px !important; }
  .term-description .desc-more .desc-more__full { display: none; }
  .term-description .desc-more > summary { font-size: 13px; white-space: nowrap; }
  /* top: auto keeps the popover at its static position - directly under the
     "About" line - while left/right pin it to the text block's edges. */
  .term-description .desc-more[open] > *:not(summary) {
    position: absolute; top: auto; left: 0; right: 0; width: auto; max-width: none;
    background: #fff; border: 1px solid #d9e6df; border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    padding: 10px 13px 10px 30px !important; margin: 5px 0 0; text-align: left; z-index: 30;
  }

  /* --- box head: title left, shipping line right, notes below --- */
  #content-area .odor-boxes .odor-box__head { padding: 8px 12px !important; min-height: 0 !important; align-items: baseline !important; align-content: flex-start !important; gap: 2px 6px !important; }
  #content-area .odor-boxes .odor-box__title { font-size: 14px !important; flex: 0 0 auto !important; white-space: nowrap !important; }
  #content-area .odor-boxes .odor-box__head .odor-box__sub:not(.odor-box__sub--keep),
  #content-area .odor-boxes .odor-box__head .odor-box__note--sub { display: inline !important; font-size: 12px !important; flex: 0 0 auto !important; width: auto !important; order: 1 !important; text-align: right !important; margin: 0 0 0 auto !important; line-height: 1.3 !important; font-weight: 600 !important; color: #555 !important; }
  #content-area .odor-boxes .odor-box__sub--keep { display: block !important; order: 2 !important; flex-basis: 100% !important; width: 100% !important; font-size: 12px !important; font-weight: 600 !important; color: #3f8a63 !important; line-height: 1.3 !important; margin: 2px 0 0 !important; text-align: left !important; }
  #content-area .odor-boxes .odor-box__head .odor-box__note:not(.odor-box__note--sub) { font-size: 12px !important; line-height: 1.3 !important; flex-basis: 100% !important; width: 100% !important; order: 3 !important; margin: 2px 0 0 !important; text-align: left !important; }
  #content-area .odor-boxes .odor-box__head .odor-box__sub.odor-box__ship { display: contents !important; }
  #content-area .odor-boxes .odor-box__ship > strong,
  #content-area .odor-boxes .odor-box__ship-rest { order: 1; }
  #content-area .odor-boxes .odor-box__ship-sep { margin-right: 6px; }

  /* overflow-x CLIP (not hidden) trims sub-pixel spill without turning the
     wrapper into a scroll container - which is what lets the sticky thead
     keep working here too. */
  #content-area .odor-boxes .odor-box__body,
  #content-area .odor-boxes .wc-product-table-wrapper { overflow-x: clip !important; overflow-y: visible !important; }
  #content-area .odor-boxes .odor-box__table { table-layout: fixed !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; }

  /* The mobile site header is in normal flow (it scrolls away), so the frozen
     column row sticks to the very top of the viewport. */
  #content-area .odor-boxes .odor-box__table thead,
  #content-area .odor-boxes .odor-box__table thead th { top: 0 !important; z-index: 6 !important; }
  #content-area .odor-boxes .odor-box__table thead th { box-shadow: 0 1px 0 rgba(0, 0, 0, .12) !important; }
  #content-area .odor-boxes .odor-box--very-low .odor-box__head,
  #content-area .odor-boxes .odor-box--low-medium .odor-box__head,
  #content-area .odor-boxes .odor-box--shape .odor-box__head {
    position: -webkit-sticky !important; position: sticky !important;
    top: 0 !important; z-index: 8 !important;
  }
  #content-area .odor-boxes .odor-box--very-low .odor-box__table thead,
  #content-area .odor-boxes .odor-box--very-low .odor-box__table thead th,
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table thead,
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table thead th,
  #content-area .odor-boxes .odor-box--shape .odor-box__table thead,
  #content-area .odor-boxes .odor-box--shape .odor-box__table thead th { top: var(--bb-thead-top, 35px) !important; }

  /* Fixed layout takes its widths from the <colgroup>. These sum to less than
     the box, so the browser scales them up proportionally to fill it exactly.
     The collapsed weight column is 0.5px, not 0: Safari treats a zero-width
     col as unsized and hands it all the leftover width instead of scaling. */
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(1) { width: 56px !important; }   /* image */
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(2) { width: 62px !important; }   /* thickness + inlined range */
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(3) { width: 0.5px !important; }  /* weight - collapsed */
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(4) { width: 40px !important; }   /* odor */
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(5) { width: 34px !important; }
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(6) { width: 34px !important; }
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(7) { width: 34px !important; }
  #content-area .odor-boxes .odor-box__table colgroup col:nth-child(8) { width: 106px !important; }  /* buy */
  /* Odor column dropped - the freed ~44px goes to the name and the prices. */
  #content-area .odor-boxes .odor-box--very-low .odor-box__table colgroup col:nth-child(2),
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table colgroup col:nth-child(2) { width: 70px !important; }
  #content-area .odor-boxes .odor-box--very-low .odor-box__table colgroup col:nth-child(3),
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table colgroup col:nth-child(3) { width: 0.5px !important; }
  #content-area .odor-boxes .odor-box--very-low .odor-box__table colgroup col:nth-child(4),
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table colgroup col:nth-child(4),
  #content-area .odor-boxes .odor-box--very-low .odor-box__table colgroup col:nth-child(5),
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table colgroup col:nth-child(5),
  #content-area .odor-boxes .odor-box--very-low .odor-box__table colgroup col:nth-child(6),
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table colgroup col:nth-child(6) { width: 44px !important; }
  #content-area .odor-boxes .odor-box--very-low .odor-box__table colgroup col:nth-child(7),
  #content-area .odor-boxes .odor-box--low-medium .odor-box__table colgroup col:nth-child(7) { width: 106px !important; }

  #content-area .odor-boxes .odor-box__table .odor-box__bulk-toggle,
  #content-area .odor-boxes .odor-box__table .tier-head__label { display: none !important; }
  /* Desktop pulls the number row out by the desktop cell padding. Mobile
     padding is 2px, so that offset would shift the numbers off their columns. */
  .tier-head__nums { margin: 0 !important; }
  .odor-box.bulk-open .tier-head__nums > span:last-child { left: 0; }
  .odor-box.bulk-open .odor-box__table td.col-1000 .tier-val,
  .odor-box.bulk-open .odor-box__table td.col-1000 .pg-rate { transform: none; }
  .tier-head { padding: 0 !important; }
  #content-area .odor-boxes .odor-box__table th.col-500-950, #content-area .odor-boxes .odor-box__table td.col-500-950,
  #content-area .odor-boxes .odor-box__table th.col-1000, #content-area .odor-boxes .odor-box__table td.col-1000 { display: none !important; }

  /* The "Thickness & Range" header keeps its colspan=2 from desktop, but the
     range is inlined into the name here. display:none on the Weight column
     would drop it from the column count and shift every header after it out
     of alignment with its data, so it stays a real zero-width column. */
  #content-area .odor-boxes .odor-box__table th.col-weight-range,
  #content-area .odor-boxes .odor-box__table td.col-weight-range {
    display: table-cell !important; width: 0 !important; max-width: 0 !important;
    padding: 0 !important; border: 0 !important; overflow: hidden !important;
    font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  }
  .wt-inline { display: block !important; font-weight: 400 !important; font-size: 12px !important; color: #777 !important; margin-top: 1px !important; }

  /* This density reads better with real gridlines than the roomy no-divider
     desktop treatment. */
  #content-area .odor-boxes .odor-box__table td,
  #content-area .odor-boxes .odor-box__table th {
    padding: 6px 2px !important; font-size: 11px !important; vertical-align: middle !important; height: auto !important; border: 1px solid #ececec !important;
  }
  #content-area .odor-boxes .odor-box__table td.col-thickness { font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; overflow-wrap: break-word !important; overflow: hidden !important; }
  /* Sold-out variants carry much longer names ("Mid/Thick - Imperfect
     Appearance") - shrink just that cell so each word fits inside the column
     instead of spilling over the next gridline. */
  #content-area .odor-boxes .odor-box__table tr.bb-soldout td.col-thickness,
  #content-area .odor-boxes .odor-box__table tr.bb-soldout td.col-thickness .wt-inline { font-size: 9px !important; }
  /* Odor stays at 10px on purpose: "Low-Medium" already fills its column at
     that size and clips at 11px+. */
  #content-area .odor-boxes .odor-box__table th.col-odor,
  #content-area .odor-boxes .odor-box__table td.col-odor { font-size: 10px !important; line-height: 1.2 !important; }
  #content-area .odor-boxes .odor-box__table th.col-50-100, #content-area .odor-boxes .odor-box__table td.col-50-100,
  #content-area .odor-boxes .odor-box__table th.col-100-200, #content-area .odor-boxes .odor-box__table td.col-100-200,
  #content-area .odor-boxes .odor-box__table th.col-250-450, #content-area .odor-boxes .odor-box__table td.col-250-450 {
    font-size: 13px !important; text-align: center !important; background: #fafafa !important; padding-left: 1px !important; padding-right: 1px !important;
  }
  #content-area .odor-boxes .odor-box__table th.grp-tiers { background: #fafafa !important; padding: 0 !important; }
  #content-area .odor-boxes .odor-box__table .tier-head__nums > span { font-size: 12px !important; }
  /* The desktop tier chip's side padding pushed "$2.51" past the cell edge at
     this column width and the price clipped. No pill on mobile. */
  #content-area .odor-boxes .odor-box__table td .tier-val,
  #content-area .odor-boxes .odor-box__table td.tier-active .tier-val { padding: 0 !important; background: transparent !important; }
  /* "Qty 25 $4.44" does not fit the column on one line here, so stack it. */
  #content-area .odor-boxes .odor-box__table td.col-50-100 .tier-25-line { left: 0 !important; right: 0 !important; bottom: auto !important; transform: none !important; margin-top: 9px !important; padding: 0 !important; background: transparent !important; }
  #content-area .odor-boxes .odor-box__table td.col-50-100 .tier-25-line .tier-25-label { display: block !important; font-size: 8.5px !important; }
  #content-area .odor-boxes .odor-box__table td.col-50-100 .tier-25-line .tier-25-price { display: block !important; font-size: 10.5px !important; }

  #content-area .odor-boxes .odor-box__table td.col-image .product-thumbnail-wrapper { width: 54px !important; height: 54px !important; overflow: hidden !important; display: block !important; position: relative !important; border-radius: 6px; }
  #content-area .odor-boxes .odor-box__table td.col-image img { width: 54px !important; height: 54px !important; object-fit: cover !important; }
  #content-area .odor-boxes .odor-box__table td.col-image .product-thumbnail-wrapper::after { display: none !important; }

  /* Per-gram rate and stock note are dropped at this size - the tier chip
     itself is the point. */
  #content-area .odor-boxes .odor-box__table td .pg-rate,
  #content-area .odor-boxes .odor-box__table td .stock-note { display: none !important; }

  /* --- buy cell: stepper, subtotal and Add as one evenly-spaced column --- */
  #content-area .odor-boxes .odor-box__table td.col-buy .add-to-cart-wrapper,
  #content-area .odor-boxes .odor-box__table td.col-buy form.cart { display: block !important; margin: 0 !important; padding: 0 !important; }
  /* Every level of the buy stack is pinned to a fixed width so nothing in it
     can change size when the qty or the running total changes - the column
     cannot move because there is no slack for it to move into. */
  #content-area .odor-boxes .odor-box__table td.col-buy .add-to-cart-button {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 5px !important; margin: 0 !important; padding: 0 !important; text-align: center !important; width: 100% !important;
  }
  #content-area .odor-boxes .odor-box__table td.col-buy .wdp_bulk_table_content,
  #content-area .odor-boxes .odor-box__table td.col-buy .multi-cart-check { display: none !important; }
  #content-area .odor-boxes .odor-box__table td.col-buy .quantity { display: block !important; width: 100% !important; text-align: center !important; line-height: 1 !important; margin: 0 !important; }
  /* A rigid 3-track grid: 28 | 44 | 28. Each control is locked to its track so
     the qty box cannot move sideways whatever the value. */
  #content-area .odor-boxes .odor-box__table td.col-buy .custom-qty-wrapper {
    display: grid !important; grid-template-columns: 28px 44px 28px !important;
    align-items: center !important; justify-items: center !important;
    width: 100px !important; margin: 0 auto !important; column-gap: 0 !important;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  #content-area .odor-boxes .odor-box__table td.col-buy .row-total { display: block !important; width: 100% !important; overflow: hidden !important; margin: 0 !important; text-align: center !important; font-size: 12.5px !important; font-weight: 700 !important; color: #444 !important; line-height: 1.1 !important; }
  /* Scoped to the wrapper: the stepper is only built when the chart is built
     at a mobile width, so a desktop page dragged narrow still has the plain
     native spinner here and must keep it rather than lose its arrows. */
  #content-area .odor-boxes .odor-box__table td.col-buy .custom-qty-wrapper input[name="quantity"] {
    grid-column: 2 !important;
    width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 36px !important;
    background: #f0f0f0 !important; border: 0 !important; text-align: center !important;
    padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
    /* 16px, not smaller: iOS Safari force-zooms the page when a text field with
       font-size < 16px takes focus. */
    font-size: 16px !important;
    -moz-appearance: textfield !important; -webkit-appearance: none !important; appearance: none !important;
    border-radius: 0 !important;
  }
  /* Without this reset, mobile Chrome draws its own spinner inside the input,
     squeezed into the same 44px box as our +/- buttons; the two fighting for
     that space makes the rendered width inconsistent row to row. */
  /* Same box as the stepper's middle track, without the -/+ either side. */
  #content-area .odor-boxes .odor-box__table td.col-buy input.qty-fixed {
    display: block !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 36px !important;
    margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important;
    background: #f0f0f0 !important; border: 0 !important; border-radius: 0 !important; text-align: center !important;
    font-size: 16px !important; -webkit-appearance: none !important; appearance: none !important;
  }
  #content-area .odor-boxes .odor-box__table td.col-buy .custom-qty-wrapper input[name="quantity"]::-webkit-outer-spin-button,
  #content-area .odor-boxes .odor-box__table td.col-buy .custom-qty-wrapper input[name="quantity"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important; margin: 0 !important;
  }
  .qty-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 36px !important;
    padding: 0 !important; background: transparent !important; border: 0 !important; color: #74bc91 !important; font-size: 21px !important; line-height: 1 !important;
    cursor: pointer !important; flex: 0 0 auto !important; margin: 0 !important;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-appearance: none; appearance: none;
  }
  .qty-btn.qty-minus { grid-column: 1 !important; }
  .qty-btn.qty-plus { grid-column: 3 !important; }
  #content-area .odor-boxes .odor-box__table td.col-buy .single_add_to_cart_button,
  #content-area .odor-boxes .odor-box__table td.col-buy .button.alt,
  #content-area .odor-boxes .odor-box__table td.col-buy a.button {
    /* Full-width to match the prominence the button has on the live site. The
       margin:auto matters for the sold-out "Get Notified" link, which is not
       inside the flex-centred .add-to-cart-button and would otherwise sit at
       the cell's left edge as a plain block. */
    display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important;
    padding: 14px 4px !important; height: auto !important; font-size: 14px !important; line-height: 1.2 !important; border-radius: 8px !important;
  }
  /* "Get Notified When Restocked" wraps to two or three lines here - keep it a
     step below Add so a row you cannot buy from does not shout louder than the
     ones you can. */
  #content-area .odor-boxes .odor-box__table tr.bb-soldout td.col-buy a.button { font-size: 11px !important; line-height: 1.15 !important; }
  /* The name wraps tall on sold-out rows, so pin the button to the bottom. */
  #content-area .odor-boxes .odor-box__table tr.bb-soldout td.col-buy { vertical-align: bottom !important; }
  /* A sold-out row is often also on sale; show only the Sold Out badge. */
  #content-area .odor-boxes .odor-box__table tr.bb-soldout .mobile-sale-badge { display: none !important; }

  /* Real DOM sale badge, styled to match the desktop one (white fill, thin
     green border and text) rather than the solid-fill "button" look. */
  .mobile-sale-badge {
    display: block !important; position: absolute !important; top: 2px !important; left: 2px !important;
    background: #fff !important; color: #74bc91 !important; border: 1px solid #74bc91 !important;
    font-size: 8px !important; font-weight: 700 !important; padding: 1px 4px !important;
    border-radius: 4px !important; line-height: 1.3 !important; letter-spacing: 0 !important;
    z-index: 2 !important; white-space: nowrap !important; box-shadow: none !important;
  }

  #content-area .best-value-view > .bv-more { margin: 10px 2px 20px !important; }
}


/* ============================================================
   11. "Customer Love" testimonials
   ============================================================ */

.bb-testimonials { background: #f4f7f5; border: 1px solid #e2ece7; border-radius: 14px; margin: 8px auto 14px; padding: 34px 22px 28px; text-align: center; font-family: Quicksand, "Segoe UI", -apple-system, sans-serif; }
.bb-testimonials__inner { max-width: 760px; margin: 0 auto; }
.bb-testimonials__title { font-family: Quicksand, "Segoe UI", sans-serif; font-size: 30px; font-weight: 700; color: #0f5132; margin: 0 0 6px; letter-spacing: .01em; line-height: 1.15; }
.bb-testimonials__stars { margin: 0 0 20px; line-height: 1; }
.bb-testimonials__starrow { color: #74bc91; font-size: 18px; letter-spacing: 2px; }
.bb-testimonials__starnote { color: #5b6b62; font-size: 13px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
.bb-testimonials__stage { position: relative; padding: 0 6px; }
.bb-testimonials__mark { position: absolute; left: -2px; top: -26px; font-family: Georgia, "Times New Roman", serif; font-size: 70px; line-height: 1; color: #cfe6da; pointer-events: none; user-select: none; }
/* Fixed height so the arrows and dots never move as you click through. A rare
   long quote scrolls inside the box; every line stays reachable. */
.bb-testimonials__list { list-style: none; margin: 0; padding: 0; height: 150px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
#left-area .bb-testimonials__list li::before { content: none !important; }
.bb-testimonial { display: none; }
.bb-testimonial.is-active { display: block; }
.bb-testimonial__quote { margin: 0 auto 14px; max-width: 640px; padding: 0; border: 0; font-size: 19px; line-height: 1.55; font-weight: 600; font-style: italic; color: #2f3b34; }
.bb-testimonial__by { margin: 0; font-size: 15px; font-weight: 700; font-style: normal; color: #3f8a63; }
.bb-testimonials__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0 0; }
.bb-testimonials__arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #74bc91; background: #fff; color: #3f8a63; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; font-family: inherit; }
.bb-testimonials__arrow:hover { background: #74bc91; color: #fff; }
.bb-testimonials__dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 220px; }
.bb-testimonials__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #cbd8d1; cursor: pointer; transition: background .15s, transform .15s; }
.bb-testimonials__dots button[aria-selected="true"] { background: #3f8a63; transform: scale(1.3); }

@media (max-width: 600px) {
  .bb-testimonials { padding: 26px 14px 22px; margin: 6px auto 12px; border-radius: 12px; }
  .bb-testimonials__title { font-size: 23px; }
  .bb-testimonials__starnote { display: block; margin: 4px 0 0; }
  .bb-testimonials__list { height: 200px; }
  .bb-testimonial__quote { font-size: 16px; line-height: 1.5; }
  .bb-testimonials__mark { font-size: 54px; top: -16px; }
}


/* ============================================================
   12. Bottom of page - guarantee card and wholesale-inquiry line
   ============================================================
   Order above the site footer: testimonials, guarantee card, inquiry line. */

/* The old category-links list duplicated the new sibling strip and only
   appeared after scrolling past everything. The "Interested in pricing..."
   paragraph in the same block is kept. */
body.bb-plp-redesign .bottom-text-for-category > p:not(.footer-top) { display: none !important; }

.bb-guarantee { background: #74bc91; border-radius: 14px; margin: 0 auto 14px; padding: 22px 26px; text-align: center; font-family: Quicksand, "Segoe UI", -apple-system, sans-serif; }
.bb-guarantee__inner { max-width: 600px; margin: 0 auto; }
.bb-guarantee__title { font-family: Quicksand, "Segoe UI", sans-serif; font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 6px; letter-spacing: .01em; line-height: 1.25; }
.bb-guarantee__body { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: #fff; }
.bb-guarantee__contact { margin: 0; font-size: 12.5px; color: #eafbf1; }
.bb-guarantee__contact a { color: #fff !important; font-weight: 700; text-decoration: underline; }

/* A plain unstyled <p> left at its natural full-bleed width visibly overran
   the footer's own content grid directly beneath it. */
body.bb-plp-redesign .footer-top { max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; }

@media (max-width: 600px) {
  .bb-guarantee { padding: 18px 16px; margin: 0 auto 12px; border-radius: 12px; }
  .bb-guarantee__title { font-size: 17px; }
  .bb-guarantee__body { font-size: 12.5px; }
  .bb-guarantee__contact { font-size: 12px; }
}