/* ==========================================================================
   Cacao Boys box builder skin
   Restyles the WisdmLabs Custom Product Boxes plugin (cpb-styles-grid.css)
   into the Cacao Boys design system: cream surfaces, cocoa text, caramel
   accents, pill buttons, generous radii, flat (hairline borders, no shadows).
   Pure CSS: no template or plugin changes. Enqueued at priority 100, after
   the plugin stylesheet, so equal specificity resolves in our favor.
   Every rule is scoped under .cb-pdp__box (the full-width box wrapper in
   woocommerce.php), so nothing leaks onto other pages.

   Specificity notes: the plugin chains up to 6 classes deep
   (e.g. .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items
   .wcpb-addon-box-item .wcpb-addon-image img). Selectors below mirror the
   plugin's own chains plus the .cb-pdp__box prefix, which always yields
   equal-or-higher specificity with a later cascade position. The plugin's own
   !important rules are behavioral display toggles (clicked steppers, filled
   slots, icon font-family) that we intentionally leave alone.

   ONE exception uses !important, on .wcpb-addon-box-wrap: the plugin's JS
   writes an inline max-height there on window load, and an inline declaration
   cannot be beaten by specificity, only by an author !important. It is marked
   and explained at the rule. Everything else in this file stays !important-free
   and wins on specificity alone.
   ========================================================================== */

/* --- 0. Shell ------------------------------------------------------------- */
.cb-pdp__box {
  color: var(--cb-text);
}
.cb-pdp__box .cpb_notice:empty { display: none; }
.cb-pdp__box .cpb_notice {
  border-radius: var(--cb-radius-md);
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-surface);
  color: var(--cb-text);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* --- 1. Buttons: match .cb-btn pill language ------------------------------ */
.cb-pdp__box .cpb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  height: auto;
  padding: 0.75rem 1.6rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-btn-border);
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  font-family: var(--cb-font-body);
  font-weight: var(--cb-weight-heading);
  font-size: var(--cb-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  cursor: pointer;
  transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}
.cb-pdp__box .cpb-button:hover {
  background: var(--cb-btn-hover-bg);
  border-color: var(--cb-btn-hover-bg);
  color: var(--cb-btn-hover-text);
}
.cb-pdp__box .cpb-alt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  height: auto;
  padding: 0.75rem 1.6rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-btn-ghost-border);
  background: transparent;
  color: var(--cb-btn-ghost-text);
  font-weight: var(--cb-weight-heading);
  font-size: var(--cb-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  cursor: pointer;
  transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}
.cb-pdp__box .cpb-alt-button:hover {
  background: var(--cb-btn-hover-bg);
  border-color: var(--cb-btn-hover-bg);
  color: var(--cb-btn-hover-text);
}
/* Beat the plugin's deeper teal Proceed rule inside the price panel */
.cb-pdp__box .wcpb-container .wcpb-price-breakup .cpb-button {
  height: auto;
  min-height: 3rem;
  width: 100%;
  margin-top: 1.25rem;
  background: var(--cb-btn-bg);
  border-color: var(--cb-btn-border);
  color: var(--cb-btn-text);
  font-size: var(--cb-text-sm);
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .cpb-button:hover {
  background: var(--cb-btn-hover-bg);
  border-color: var(--cb-btn-hover-bg);
  color: var(--cb-btn-hover-text);
}
/* Focus states for keyboard users */
.cb-pdp__box :is(.cpb-button, .cpb-alt-button, .wcpb-plus, .wcpb-minus, .wcpb-addon-add, .wcpb-reset, .wcpb-delete, .wcpb-show-details, .wcpb-hide-details):focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 2px;
}

/* --- 2. Product header: hero image + name + base price --------------------- */
.cb-pdp__box .wcpb-product-details-wrap {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-featured-image-wrap {
  width: 50%;
  padding-top: 0;
  overflow: hidden;
  border-radius: var(--cb-radius-xl);
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-surface-alt);
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-featured-image-wrap img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-height: 24rem;
  object-fit: cover;
  object-position: center;
  margin: 0;
  display: block;
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-product-details .wcpb-product-name {
  font-size: var(--cb-text-4xl);
  font-weight: var(--cb-weight-black);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-display);
  line-height: var(--cb-leading-display);
  color: var(--cb-text);
  margin: 0 0 0.75rem;
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-product-details .wcpb-category-wrap {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-eyebrow);
  color: var(--cb-text-muted);
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-product-details .wcpb-category-wrap a:hover {
  color: var(--cb-accent-text);
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-product-details .wcpb-box-price-wrap {
  margin-top: 1.75rem;
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-product-details .wcpb-box-price-wrap .wcpb-box-price-label {
  display: block;
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-black);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-eyebrow);
  color: var(--cb-accent-text);
  margin-bottom: 0.35rem;
}
.cb-pdp__box .wcpb-product-details-wrap .wcpb-product-details .wcpb-box-price-wrap .wcpb-box-price {
  font-size: var(--cb-text-3xl);
  font-weight: var(--cb-weight-heading);
  color: var(--cb-text);
}

/* --- 3. Slots tray: the box you fill --------------------------------------- */
.cb-pdp__box .wcpb-container .wcpb-gift-box-wrap {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content {
  display: block;
  width: 100%;
  background: color-mix(in oklch, var(--cb-wheat) 45%, var(--cb-cream-light));
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-top {
  margin: 0 0 1.25rem;
  align-items: center;
  gap: 1rem;
}
/* Count as the progress readout: caramel number in a cream pill */
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-added-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-cream-light);
  font-size: var(--cb-text-base);
  color: var(--cb-text-muted);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-added-count .wcpb-added {
  font-size: var(--cb-text-2xl);
  font-weight: var(--cb-weight-black);
  color: var(--cb-accent-text);
  line-height: 1;
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-added-count .wcpb-total-present {
  font-weight: var(--cb-weight-heading);
  color: var(--cb-text);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-added-count span {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-reset {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cb-accent-2);
  gap: 0.4rem;
  transition: color var(--cb-transition);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-reset:hover {
  color: var(--cb-text);
}
/* The slot grid itself */
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: 0.75rem;
  max-height: 19rem;
  overflow: auto;
  padding: 2px;
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items .wcpb-gift-box-item {
  position: relative;
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 2px dashed var(--cb-border-strong);
  border-radius: var(--cb-radius-md);
  background: var(--cb-cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items .wcpb-gift-box-item.filled {
  border-style: solid;
  border-width: var(--cb-border-width);
  border-color: var(--cb-border);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items .wcpb-gift-box-item > img[src=""] {
  display: none;
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items .wcpb-gift-box-item > img {
  border-radius: calc(var(--cb-radius-md) - 4px);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-item.filled .wcpb-addon-image img {
  border-radius: calc(var(--cb-radius-md) - 4px);
  object-fit: cover;
}
/* Remove-a-piece button on filled slots */
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items .wcpb-gift-box-item .wcpb-delete {
  width: 1.5rem;
  height: 1.5rem;
  top: 0.25rem;
  right: 0.25rem;
  border-radius: var(--cb-radius-pill);
  background: var(--cb-cocoa);
  color: var(--cb-cream-light);
  font-size: 0.6rem;
  transition: background var(--cb-transition);
}
.cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items .wcpb-gift-box-item .wcpb-delete:hover {
  background: var(--cb-terracotta);
}
/* Expand / close links for large boxes */
.cb-pdp__box .wcpb-expand,
.cb-pdp__box .wcpb-close-box {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cb-accent-2);
  cursor: pointer;
}

/* --- 4. Layout: picker column + price panel -------------------------------- */
.cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-gift-addon-wrap {
  padding-right: clamp(1.5rem, 3vw, 3rem);
}
/* ONE SCROLL CONTEXT, part 2: the chocolate picker, at every width.
   The plugin's addHeightToAddons() runs on window load and writes an INLINE
   style on the picker:
       .wcpb-addon-box-wrap { max-height: calc(100vh - (120 + boxHeight)px) }
   which its own stylesheet pairs with `overflow: auto`. That assumes the picker
   sits BESIDE a box preview and can scroll independently. In this build the box
   preview sits ABOVE the picker at every breakpoint, so the calculation just
   subtracts the preview's height from the viewport and leaves the picker a
   short window scrolling inside a page that already scrolls. The result is the
   same on a phone and on a 27in display: cards sliced off top and bottom, no
   whole bonbon visible while you are choosing one, and it degrades further as
   the box grows or the shopper taps Expand Box.
   The slot tray was already freed for exactly this reason; this is its twin.
   Let the picker be its natural height and let the PAGE do the scrolling. The
   sticky footer keeps the running count and total in view, so nothing is lost.

   `!important` is the ONE exception to this file's no-!important rule, and it
   is unavoidable: the value is an inline style written by JS, and only an author
   !important outranks an inline declaration. It also means we win no matter when
   that load handler fires. If the plugin ever drops addHeightToAddons(), these
   two lines can go with it. */
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap {
  max-height: none !important;
  overflow: visible !important;
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-count {
  font-size: var(--cb-text-sm);
  color: var(--cb-text-muted);
  border-bottom: var(--cb-border-width) solid var(--cb-border);
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
}

/* --- 5. Addon grid: the chocolate cards ------------------------------------ */
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0.75rem 0.75rem 1rem;
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  background: var(--cb-surface);
  line-height: 1.45;
  transition: background var(--cb-transition), border-color var(--cb-transition);
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item:hover {
  background: var(--cb-surface-inset);
  border-color: var(--cb-border-strong);
}
/* Flatten the plugin's left/right split so the card reads
   image, title, stock, details, stepper (top to bottom).
   display: contents promotes the grandchildren to flex items of the card. */
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-left,
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-right {
  display: contents;
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-image {
  order: -2;
  /* A flex item of the card (.wcpb-left/.wcpb-right are display:contents), so
     without this it can be shrunk vertically by a taller sibling card in the
     same grid row, squashing the square back out of the photo. */
  flex: 0 0 auto;
  margin: 0 0 0.9rem;
  text-align: initial;
}
/* The chocolate you are choosing has to be fully visible: this is the picker,
   and a cropped dome is indistinguishable from the next cropped dome.
   Three declarations here used to fight each other. `aspect-ratio: 1/1` asked
   for a square, `max-height: 11rem` capped the height anyway, and `object-fit:
   cover` then cropped whatever did not fit. As soon as a column was wider than
   11rem (a phone at 2 columns, and every desktop breakpoint at 3 or 4) the
   frame became wide-and-short and cover sliced the top and bottom off the
   photo, cutting the base off the bonbon.
   The source shots are already square (887x887 and friends) with the bonbon
   centred on white, so the frame simply has to stay square and let the grid
   size it. `contain` rather than `cover` because these are product photos, not
   decorative fills: it guarantees the whole piece is visible even if a
   non-square shot is uploaded later, and with a square source in a square box
   it letterboxes nothing. */
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  border-radius: var(--cb-radius-md);
  display: block;
  margin: 0;
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-title {
  order: -1;
  font-size: var(--cb-text-base);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cb-text);
  margin: 0 0.35rem 0.35rem;
  line-height: 1.3;
}
.cb-pdp__box .wcpb-container .cpb-stock-status {
  margin: 0 0.35rem 0.25rem;
}
.cb-pdp__box .wcpb-container .cpb-stock-status .stock {
  margin: 0;
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-medium);
  color: var(--cb-text-muted);
}
.cb-pdp__box .wcpb-container .cpb-stock-status .stock.out-of-stock {
  color: var(--cb-terracotta);
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-details {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cb-accent-2);
  margin: 0 0.35rem 0.85rem;
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-details span:hover {
  color: var(--cb-text);
}
/* Stepper row pinned to the card foot */
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-quantity {
  order: 10;
  margin-top: auto;
  width: 100%;
  padding: 0.25rem 0.1rem 0;
}
/* Add button (shown before the first click) */
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-add {
  width: 100%;
  height: auto;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-btn-ghost-border);
  background: transparent;
  color: var(--cb-btn-ghost-text);
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item .wcpb-addon-add:hover {
  background: var(--cb-btn-hover-bg);
  border-color: var(--cb-btn-hover-bg);
  color: var(--cb-btn-hover-text);
}
/* Out of stock: soften the whole card, keep the plugin's pointer lock */
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item.out-of-stock .wcpb-addon-image img {
  opacity: 0.55;
}
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item.out-of-stock .wcpb-plus,
.cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items .wcpb-addon-box-item.out-of-stock .wcpb-addon-add,
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box.cpb-no-stock .wcpb-plus,
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box.out-of-stock .wcpb-plus {
  color: color-mix(in srgb, var(--cb-cocoa) 30%, transparent);
  border-color: var(--cb-border);
}

/* --- 6. Quantity steppers (cards, lightbox, price panel) ------------------- */
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box {
  min-width: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box .wcpb-minus,
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box .wcpb-plus {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-border-strong);
  background: var(--cb-cream-light);
  color: var(--cb-text);
  font-size: 0.7rem;
  box-shadow: none;
  transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box .wcpb-minus:hover,
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box .wcpb-plus:hover {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  color: var(--cb-cocoa);
}
.cb-pdp__box .wcpb-container .wcpb-addon-quantity-box .wcpb-value {
  min-width: 2.5rem;
  width: auto;
  height: 2.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: var(--cb-text-base);
  font-weight: var(--cb-weight-heading);
  color: var(--cb-text);
}

/* --- 7. Product lightbox (Show Details) ------------------------------------ */
.cb-pdp__box .wcpb-lightbox {
  background: color-mix(in srgb, var(--cb-cocoa) 62%, transparent);
  padding: 1rem;
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content {
  width: min(58rem, 100%);
  height: auto;
  max-height: min(85vh, 42rem);
  background: var(--cb-cream-light);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-close-lightbox {
  width: 2.5rem;
  height: 2.5rem;
  top: 0.75rem;
  right: 0.75rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-cream-light);
  color: var(--cb-text);
  font-size: 0.75rem;
  transition: background var(--cb-transition), color var(--cb-transition);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-close-lightbox:hover {
  background: var(--cb-accent);
  color: var(--cb-cocoa);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-gallary img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--cb-radius-md);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details {
  line-height: var(--cb-leading-body);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-title {
  font-size: var(--cb-text-2xl);
  font-weight: var(--cb-weight-black);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-display);
  color: var(--cb-text);
  margin-bottom: 0.75rem;
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-desc {
  font-size: var(--cb-text-base);
  line-height: 1.6;
  color: var(--cb-text-muted);
  margin-bottom: 1.25rem;
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-desc h2 {
  font-size: var(--cb-text-lg);
  color: var(--cb-text);
  margin: 0 0 0.5em;
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-label {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-eyebrow);
  color: var(--cb-text-muted);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-price-stock .wcpb-lb-price .wcpb-lb-val {
  font-size: var(--cb-text-xl);
  font-weight: var(--cb-weight-heading);
  color: var(--cb-text);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-price-stock .wcpb-lb-stock .wcpb-lb-status {
  font-size: var(--cb-text-sm);
  color: var(--cb-text-muted);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-status .stock {
  margin: 0;
  color: var(--cb-text-muted);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-status .stock.out-of-stock {
  color: var(--cb-terracotta);
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-actions {
  gap: 1rem;
  margin-top: 1rem;
}
.cb-pdp__box .wcpb-lightbox .wcpb-lightbox-content .wcpb-product-details .wcpb-lb-actions .cpb-button {
  padding: 0.75rem 1.75rem;
  min-height: 3rem;
  font-size: var(--cb-text-sm);
  font-weight: var(--cb-weight-heading);
}

/* --- 8. Price panel (desktop sidebar / mobile bottom sheet) ----------------- */
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-price-breakup-content {
  background: var(--cb-cream-light);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
@media (min-width: 769px) {
  .cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-price-breakup-content {
    position: sticky;
    top: 7rem;
  }
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-price-details {
  font-size: var(--cb-text-xl);
  font-weight: var(--cb-weight-black);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-display);
  color: var(--cb-text);
  margin-bottom: 1rem;
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-added-products {
  border-top: var(--cb-border-width) solid var(--cb-border);
  border-bottom: var(--cb-border-width) solid var(--cb-border);
}
.cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-empty {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-added-products .wcpb-cart-item {
  border-bottom-color: var(--cb-border);
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-added-products .wcpb-cart-item .wcpbl .wcpb-addon-title {
  font-size: var(--cb-text-sm);
  color: var(--cb-text);
  text-transform: none;
  letter-spacing: 0;
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-box-price {
  color: var(--cb-text-muted);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-sm);
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-total-price-wrap .wcpb-total-text {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-eyebrow);
  color: var(--cb-text-muted);
}
.cb-pdp__box .wcpb-container .wcpb-price-breakup .wcpb-total-price-wrap .wcpb-total-price {
  font-size: var(--cb-text-2xl);
  font-weight: var(--cb-weight-heading);
  color: var(--cb-text);
}
/* Mobile bottom sheet variant keeps the plugin's fixed positioning,
   but takes the brand surface, rounded top corners, and border colors. */
@media screen and (max-width: 768px) {
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-price-breakup {
    background: color-mix(in srgb, var(--cb-cocoa) 62%, transparent);
  }
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-price-breakup .wcpb-price-breakup-content {
    background: var(--cb-cream-light);
    border-radius: var(--cb-radius-lg) var(--cb-radius-lg) 0 0;
    border: none;
  }
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-price-breakup .wcpb-price-breakup-content > .wcpb-close-mb {
    background: var(--cb-cream-light);
    border: var(--cb-border-width) solid var(--cb-border);
    border-radius: var(--cb-radius-pill);
    box-shadow: none;
    color: var(--cb-text);
  }
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-price-breakup .wcpb-price-breakup-content .wcpb-total-price-wrap {
    background: var(--cb-cream-light);
    border-top: var(--cb-border-width) solid var(--cb-border);
  }
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-price-breakup .wcpb-price-breakup-content > .wcpb-box-price {
    border-bottom-color: var(--cb-border);
  }
}

/* --- 9. Sticky footer (mobile) ---------------------------------------------- */
.cb-pdp__box .wcpb-container .wcpb-sticky-footer {
  background: var(--cb-cream-light);
  border-top: var(--cb-border-width) solid var(--cb-border);
  box-shadow: none;
  height: auto;
  padding: 0.75rem 0;
}
.cb-pdp__box .wcpb-container .wcpb-sticky-footer .wcpb-footer-container {
  padding-inline: var(--cb-gutter);
}
.cb-pdp__box .wcpb-container .wcpb-sticky-footer .wcpb-footer-container .wcpb-footer-content {
  align-items: center;
}
.cb-pdp__box .wcpb-container .wcpb-sticky-footer .wcpb-footer-container .wcpb-footer-content .wcpb-footer-price {
  font-size: var(--cb-text-xl);
  font-weight: var(--cb-weight-heading);
  color: var(--cb-text);
  margin-bottom: 0.25rem;
}
.cb-pdp__box .wcpb-container .wcpb-sticky-footer .wcpb-footer-container .wcpb-footer-content .wcpb-price-text {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cb-accent-2);
}
.cb-pdp__box .wcpb-container .wcpb-sticky-footer .wcpb-footer-container .wcpb-footer-content .cpb-button {
  height: auto;
  min-height: 3rem;
  font-size: var(--cb-text-sm);
}

/* --- 10. Message + final add-to-cart section --------------------------------- */
.cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap {
  background: var(--cb-surface-alt);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  gap: 2rem;
}
.cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap .wcpb-box-message {
  width: auto;
  flex: 1 1 24rem;
  margin-right: 0;
}
.cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap .wcpb-box-message label {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-eyebrow);
  color: var(--cb-text-muted);
  margin-bottom: 0.6rem;
}
.cb-pdp__box .wcpb-message-textarea textarea {
  background: var(--cb-cream-light);
  border: var(--cb-border-width) solid var(--cb-border-strong);
  border-radius: var(--cb-radius-md);
  color: var(--cb-text);
  padding: 1rem 1.25rem;
  min-height: 7rem;
  line-height: 1.6;
  resize: vertical;
}
.cb-pdp__box .wcpb-message-textarea textarea:focus {
  /* Was a bare `outline: none` + a border-colour swap of #a09489 to #b18248,
     a 1.15:1 change that is effectively invisible (WCAG 2.4.7). Matches the
     3px ring already used by cb-forms.css / page-events.css / woo-checkout.css. */
  outline: none;
  border-color: var(--cb-caramel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-caramel) 22%, transparent);
}
.cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap .wcpb-add-to-cart-details {
  width: auto;
  flex: 1 1 18rem;
  padding-top: 0;
  gap: 1.25rem;
}
.cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap .wcpb-add-to-cart-details .cpb-button {
  width: 100%;
  height: auto;
  min-height: 3.25rem;
  font-size: var(--cb-text-sm);
  font-weight: var(--cb-weight-heading);
}
.cb-pdp__box .wcpb-box-price ins span.woocommerce-Price-amount.amount {
  font-weight: var(--cb-weight-heading);
}

/* --- 11. Confirmation dialog (reset the box) --------------------------------- */
.cb-pdp__box .wcpb-confirmation-box-wrap .wcpb-confirmation-box-content {
  background: var(--cb-cream-light);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--cb-text);
}
.cb-pdp__box .wcpb-confirmation-box-wrap .wcpb-overlay {
  background: color-mix(in srgb, var(--cb-cocoa) 62%, transparent);
}
.cb-pdp__box .wcpb-confirmation-box-wrap .wcpb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* --- 12. Tooltips, scrollbars, small chrome ---------------------------------- */
.cb-pdp__box .wcpb-full-msg {
  background: var(--cb-cocoa);
  color: var(--cb-cream-light);
  border-radius: var(--cb-radius-sm);
  font-size: var(--cb-text-xs);
  padding: 0.35rem 0.75rem;
}
.cb-pdp__box .wcpb-horizontal > .wcpb-container .wcpb-gift-box-content .wcpb-top .wcpb-reset span.wcpb-full-msg {
  background-color: var(--cb-cocoa);
  color: var(--cb-cream-light);
  border-radius: var(--cb-radius-sm);
}
.cb-pdp__box .wcpb-gift-box-items,
.cb-pdp__box .wcpb-added-products,
.cb-pdp__box .wcpb-lightbox-content {
  scrollbar-width: thin;
  scrollbar-color: var(--cb-border-strong) transparent;
}

/* --- 12b. Mobile layout ------------------------------------------------------
   The Wisdm plugin floats the picker column (75%) and price panel (25%) and
   never resets those floats in its own <=768px query, so on phones the whole
   chocolate picker stays jammed into 75% width beside a dead 25% gutter. It
   also keeps the product header image at a fixed 50%. Reset both to a clean
   full-width stack, size touch controls to 44px, and reserve space for the
   fixed mobile summary bar so it can't cover the final add-to-cart. */
@media (max-width: 768px) {
  /* Product header: image above the name, both full width. */
  .cb-pdp__box .wcpb-product-details-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }
  .cb-pdp__box .wcpb-product-details-wrap .wcpb-featured-image-wrap { width: 100%; }

  /* Kill the two-column float layout so the picker and list are full width. */
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-gift-addon-wrap,
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section .wcpb-price-breakup {
    width: 100%;
    float: none;
    padding-right: 0;
  }
  .cb-pdp__box .wcpb-container .wcpb-box-pricing-section::after { content: ""; display: block; clear: both; }

  /* Give the chocolate cards the full row and keep two comfortable columns. */
  .cb-pdp__box .wcpb-container .wcpb-addon-box-wrap .wcpb-addon-box-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  /* ONE SCROLL CONTEXT.
     The slot grid ships with `max-height: 19rem; overflow: auto`, which on a
     phone puts a short, independently-scrolling window inside a page that also
     scrolls. Two scroll contexts in the same thumb-zone is what made picking
     chocolates feel cramped: you could only ever see a few slots, and dragging
     often moved the wrong one. Let the slots flow at full length and let the
     PAGE do all the scrolling. The sticky summary bar keeps the running count
     visible, so nothing is lost by removing the inner viewport. */
  .cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items {
    max-height: none;
    overflow: visible;
    /* Slots are decorative-sized; more per row now that they aren't clipped. */
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  }
  /* NOTE: .wcpb-price-breakup-content keeps its own overflow on purpose. On
     mobile it is a fixed bottom sheet, not inline page content, so scrolling
     inside it is correct and is not the nested-scroll problem fixed above. */

  /* 44px quantity steppers + a larger remove-a-piece control. */
  .cb-pdp__box .wcpb-container .wcpb-plus,
  .cb-pdp__box .wcpb-container .wcpb-minus { width: 2.75rem; height: 2.75rem; }
  .cb-pdp__box .wcpb-container .wcpb-gift-box-content .wcpb-gift-box-items .wcpb-gift-box-item .wcpb-delete {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.7rem;
  }

  /* Message + final add-to-cart stack vertically, and clear the fixed
     summary bar pinned to the bottom of the viewport. */
  .cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 6rem;
  }
  .cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap .wcpb-box-message,
  .cb-pdp__box .wcpb-container .wcpb-message-pricing-wrap .wcpb-add-to-cart-details {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* --- 13. Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cb-pdp__box .wcpb-sticky-footer,
  .cb-pdp__box .cpb-button,
  .cb-pdp__box .cpb-alt-button,
  .cb-pdp__box .wcpb-plus,
  .cb-pdp__box .wcpb-minus {
    transition: none;
  }
}