/* =============================================================================
   Product Bundle — storefront styles

   Loaded once by both bundle surfaces (the layout widget and the standalone
   listing page). Everything used to live inline in two twig files, hardcoded to
   a purple gradient; it now derives every colour from the merchant's theme.

   THEMING CONTRACT
   ----------------
   Journal3 publishes its palette and the ACTIVE colour scheme as CSS custom
   properties (see catalog/controller/journal3/settings.php + skin.php):

     :root                    --brand_primary, --x_accent_1, --grayscale_90, …
     :root / .color-scheme-N  --j-color-scheme-<key>-h / -s / -l / -a

   Colours are stored as separate HSL channels so they can be tinted, which is
   why every token below is an hsla() of four var()s. Two consequences worth
   knowing:

     1. Drop a bundle inside a section that carries a scheme class (dark, brand,
        …) and it repaints itself — no per-placement configuration.
     2. Every channel carries a literal fallback, so the same stylesheet still
        looks deliberate on a theme that publishes none of these variables.

   The only knobs with no theme variable to inherit (radius, optional custom
   accent) arrive as inline custom properties from Presenter::styleAttributes().
   ============================================================================= */

.pb {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --pb-bg: hsla(
      var(--j-color-scheme-background-primary-h, 0),
      var(--j-color-scheme-background-primary-s, 0%),
      var(--j-color-scheme-background-primary-l, 100%),
      var(--j-color-scheme-background-primary-a, 1));
  --pb-bg-alt: hsla(
      var(--j-color-scheme-background-secondary-h, 0),
      var(--j-color-scheme-background-secondary-s, 0%),
      var(--j-color-scheme-background-secondary-l, 96%),
      var(--j-color-scheme-background-secondary-a, 1));
  --pb-bg-image: hsla(
      var(--j-color-scheme-image-background-h, 0),
      var(--j-color-scheme-image-background-s, 0%),
      var(--j-color-scheme-image-background-l, 98%),
      var(--j-color-scheme-image-background-a, 1));
  --pb-border: hsla(
      var(--j-color-scheme-background-border-h, 0),
      var(--j-color-scheme-background-border-s, 0%),
      var(--j-color-scheme-background-border-l, 0%),
      var(--j-color-scheme-background-border-a, .13));

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --pb-fg: hsla(
      var(--j-color-scheme-foreground-primary-h, 0),
      var(--j-color-scheme-foreground-primary-s, 0%),
      var(--j-color-scheme-foreground-primary-l, 13%),
      var(--j-color-scheme-foreground-primary-a, 1));
  --pb-fg-soft: hsla(
      var(--j-color-scheme-foreground-secondary-h, 0),
      var(--j-color-scheme-foreground-secondary-s, 0%),
      var(--j-color-scheme-foreground-secondary-l, 45%),
      var(--j-color-scheme-foreground-secondary-a, 1));
  --pb-fg-faint: hsla(
      var(--j-color-scheme-foreground-tertiary-h, 0),
      var(--j-color-scheme-foreground-tertiary-s, 0%),
      var(--j-color-scheme-foreground-tertiary-l, 58%),
      var(--j-color-scheme-foreground-tertiary-a, 1));

  /* ── Brand + call to action ───────────────────────────────────────────── */
  --pb-accent: hsla(
      var(--j-color-scheme-brand-primary-h, 0),
      var(--j-color-scheme-brand-primary-s, 0%),
      var(--j-color-scheme-brand-primary-l, 20%),
      var(--j-color-scheme-brand-primary-a, 1));
  --pb-accent-fg: hsla(
      var(--j-color-scheme-brand-primary-foreground-h, 0),
      var(--j-color-scheme-brand-primary-foreground-s, 0%),
      var(--j-color-scheme-brand-primary-foreground-l, 98%),
      var(--j-color-scheme-brand-primary-foreground-a, 1));
  --pb-btn: hsla(
      var(--j-color-scheme-button-background-h, 0),
      var(--j-color-scheme-button-background-s, 0%),
      var(--j-color-scheme-button-background-l, 13%),
      var(--j-color-scheme-button-background-a, 1));
  --pb-btn-fg: hsla(
      var(--j-color-scheme-button-foreground-h, 0),
      var(--j-color-scheme-button-foreground-s, 0%),
      var(--j-color-scheme-button-foreground-l, 98%),
      var(--j-color-scheme-button-foreground-a, 1));
  --pb-link: hsla(
      var(--j-color-scheme-text-link-h, 0),
      var(--j-color-scheme-text-link-s, 0%),
      var(--j-color-scheme-text-link-l, 20%),
      var(--j-color-scheme-text-link-a, 1));

  /* ── Semantic accents: savings (red) and confirmation (green) ─────────── */
  --pb-sale-bg: hsla(
      var(--j-color-scheme-pastel-red-h, 4),
      var(--j-color-scheme-pastel-red-s, 100%),
      var(--j-color-scheme-pastel-red-l, 96%),
      var(--j-color-scheme-pastel-red-a, 1));
  --pb-sale-fg: hsla(
      var(--j-color-scheme-pastel-foreground-h, 4),
      var(--j-color-scheme-pastel-foreground-s, 69%),
      var(--j-color-scheme-pastel-foreground-l, 38%),
      var(--j-color-scheme-pastel-foreground-a, 1));
  --pb-sale: var(--x_accent_1, #b32127);
  --pb-ok: var(--x_accent_2, #227160);
  --pb-ok-bg: hsla(
      var(--j-color-scheme-pastel-green-h, 120),
      var(--j-color-scheme-pastel-green-s, 33%),
      var(--j-color-scheme-pastel-green-l, 94%),
      var(--j-color-scheme-pastel-green-a, 1));
  --pb-overlay: hsla(
      var(--j-color-scheme-overlay-h, 0),
      var(--j-color-scheme-overlay-s, 0%),
      var(--j-color-scheme-overlay-l, 0%),
      var(--j-color-scheme-overlay-a, .8));

  /* ── Metrics. Spacing follows the theme scale where it publishes one. ─── */
  --pb-radius: 4px;
  --pb-radius-pill: 99px;
  --pb-gap: var(--j-gap-spacing---5, 12px);
  --pb-gap-lg: var(--j-gap-spacing---8, 24px);
  --pb-card: 148px;         /* product card width in the scroll rail */
  --pb-card-sm: 108px;

  color: var(--pb-fg);
  font-size: 14px;

  /* Presets respond to the CONTAINER, not the viewport: the same widget can sit
     in a 1200px content row or a 236px sidebar column on the same page, and a
     media query cannot tell those apart. Every breakpoint below is a @container
     query against this element. */
  container-type: inline-size;
}

/* Journal3 gives .pb children inherited typography already; make sure a bare
   theme does not leak a serif or an oversized line-height into the layouts. */
.pb *, .pb *::before, .pb *::after { box-sizing: border-box; }
.pb img { max-width: 100%; }

/* =============================================================================
   Shared primitives
   ============================================================================= */

/* Section header: title on the left, "view all" on the right. */
.pb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-gap);
  margin-bottom: var(--pb-gap);
}
.pb-head-title {
  margin: 0;
  font-size: var(--j-font_size-font-size--title-module, 20px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pb-fg);
}
.pb-head-link {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--pb-link);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity .15s;
}
.pb-head-link:hover { opacity: .7; color: var(--pb-link); }

/* Discount chip. */
.pb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--pb-radius-pill);
  background: var(--pb-sale-bg);
  color: var(--pb-sale-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pb-badge-solid { background: var(--pb-sale); color: #fff; }

/* Price atoms. */
.pb-was { text-decoration: line-through; color: var(--pb-fg-faint); font-weight: 400; }
.pb-now { color: var(--pb-fg); font-weight: 700; }
.pb-save { color: var(--pb-sale-fg); font-weight: 600; }

/* Buttons — mapped onto the theme's own button colours. */
.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: var(--pb-radius);
  background: var(--pb-btn);
  color: var(--pb-btn-fg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.pb-btn:hover { opacity: .88; color: var(--pb-btn-fg); }
.pb-btn:disabled { opacity: .5; cursor: not-allowed; }
.pb-btn-ghost {
  background: transparent;
  color: var(--pb-fg);
  border-color: var(--pb-border);
}
.pb-btn-ghost:hover { background: var(--pb-bg-alt); color: var(--pb-fg); }
.pb-btn-sm { padding: 9px 14px; font-size: 13px; }

/* Product thumbnail tile. */
.pb-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--pb-radius);
  background: var(--pb-bg-image);
  overflow: hidden;
}
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--pb-fg-faint);
  font-size: 22px;
}

/* Required / optional marker. */
.pb-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pb-fg-faint);
}
.pb-flag-required { color: var(--pb-fg-soft); }

/* Checkbox used for optional items, in the theme's accent. */
.pb-check {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--pb-border);
  border-radius: 3px;
  background: var(--pb-bg);
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s;
}
.pb-check:checked { background: var(--pb-accent); border-color: var(--pb-accent); }
.pb-check:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: 2px solid var(--pb-accent-fg);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* =============================================================================
   Scroll rail — the horizontal product strip shared by the row + fbt presets.
   CSS scroll-snap, no carousel library. Arrows are injected by product_bundle.js
   and stay hidden while the content fits.
   ============================================================================= */
.pb-rail-wrap { position: relative; min-width: 0; }
.pb-rail {
  display: flex;
  align-items: stretch;
  gap: var(--pb-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding-bottom: 4px;
  /* Fade the trailing edge so a cut-off card reads as "there is more". */
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.pb-rail.is-end, .pb-rail:not(.is-overflowing) {
  mask-image: none;
  -webkit-mask-image: none;
}
.pb-rail::-webkit-scrollbar { height: 4px; }
.pb-rail::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 99px; }
.pb-rail::-webkit-scrollbar-track { background: transparent; }

.pb-rail-item {
  flex: 0 0 var(--pb-card);
  width: var(--pb-card);
  scroll-snap-align: start;
  min-width: 0;
}

/* "+" glyph between products. Hidden when the row wraps to one item. */
.pb-plus {
  flex: none;
  align-self: center;
  padding-top: 18px;         /* optically centres against the image, not the text */
  color: var(--pb-fg-faint);
  font-size: 16px;
  font-weight: 400;
  user-select: none;
}

/* Arrows. */
.pb-rail-nav {
  position: absolute;
  top: calc(var(--pb-card) / 2 - 16px);
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-pill);
  background: var(--pb-bg);
  color: var(--pb-fg);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 6px hsla(0, 0%, 0%, .12);
  transition: opacity .15s;
}
.pb-rail-wrap.is-overflowing .pb-rail-nav { display: flex; }
.pb-rail-nav[disabled] { opacity: 0; pointer-events: none; }
.pb-rail-nav-prev { left: -14px; }
.pb-rail-nav-next { right: -14px; }
.pb-rail-nav svg { width: 14px; height: 14px; }

/* Product card inside the rail. */
.pb-item-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--pb-fg);
  text-decoration: none;
}
a.pb-item-name:hover { color: var(--pb-link); text-decoration: underline; }
.pb-item-price { font-size: 13px; font-weight: 600; color: var(--pb-fg); }
.pb-item-qty { font-size: 12px; color: var(--pb-fg-faint); }
.pb-item.is-excluded .pb-thumb,
.pb-item.is-excluded .pb-item-name,
.pb-item.is-excluded .pb-item-price { opacity: .4; }
.pb-item-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--pb-fg-soft);
  cursor: pointer;
}

/* =============================================================================
   Preset: row — one bundle per row, products left, offer panel right
   ============================================================================= */
.pb-deal {
  display: flex;
  align-items: stretch;
  gap: var(--pb-gap-lg);
  padding: var(--pb-gap-lg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
}
.pb-deal + .pb-deal { margin-top: var(--pb-gap); }

.pb-deal-main { flex: 1 1 auto; min-width: 0; }
.pb-deal-title {
  margin: 0 0 2px;
  font-size: var(--j-font_size-font-size--title-item, 16px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pb-fg);
  text-decoration: none;
}
.pb-deal-meta {
  margin-bottom: var(--pb-gap);
  font-size: 12px;
  color: var(--pb-fg-faint);
}

/* Offer panel. */
.pb-deal-offer {
  flex: 0 0 264px;
  align-self: flex-start;
  padding: 18px;
  border-radius: var(--pb-radius);
  background: var(--pb-bg-alt);
}
.pb-offer-badge { margin-bottom: 12px; }
.pb-offer-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--pb-fg-soft);
}
.pb-offer-line + .pb-offer-line { border-top: 1px dashed var(--pb-border); }
.pb-offer-total { padding: 9px 0 11px; }
.pb-offer-total .pb-offer-label { font-size: 14px; font-weight: 700; color: var(--pb-fg); }
.pb-offer-total .pb-now { font-size: 22px; letter-spacing: -.02em; }
.pb-offer-addons { font-size: 12px; color: var(--pb-fg-faint); }
.pb-offer-actions { margin-top: 14px; }
.pb-offer-note {
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--pb-fg-faint);
  text-align: center;
}

@container (max-width: 900px) {
  .pb-deal { flex-direction: column; gap: var(--pb-gap); padding: var(--pb-gap); }
  .pb-deal-offer { flex: 1 1 auto; align-self: stretch; }
  /* Set on the descendant, not .pb: a container cannot restyle itself. */
  .pb-deal, .pb-fbt { --pb-card: var(--pb-card-sm); }
}

/* Sidebar-width columns: shrink the cards again and let the offer panel breathe. */
@container (max-width: 460px) {
  /* The title and "view all" cannot share a line at this width without one of
     them being pushed out of the column. */
  .pb-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pb-head-title { font-size: var(--j-font_size-font-size--title-item, 16px); }
  .pb-deal, .pb-fbt { --pb-card: 96px; }
  .pb-deal, .pb-fbt { padding: var(--pb-gap); }
  .pb-deal-offer { padding: 14px; }
  .pb-offer-total .pb-now { font-size: 19px; }
  .pb-rail-nav-prev { left: -10px; }
  .pb-rail-nav-next { right: -10px; }
}

/* =============================================================================
   Preset: fbt — Amazon-style "frequently bought together"
   Images joined by +, then a per-item checklist, then one total and CTA.
   ============================================================================= */
.pb-fbt {
  padding: var(--pb-gap-lg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
}
.pb-fbt + .pb-fbt { margin-top: var(--pb-gap); }
.pb-fbt-title {
  margin: 0 0 var(--pb-gap);
  font-size: var(--j-font_size-font-size--title-item, 16px);
  font-weight: 700;
  color: var(--pb-fg);
}
.pb-fbt-body {
  display: flex;
  align-items: flex-start;
  gap: var(--pb-gap-lg);
}
.pb-fbt-list {
  flex: 0 0 300px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pb-fbt-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  font-size: 13px;
  line-height: 1.45;
}
.pb-fbt-row + .pb-fbt-row { border-top: 1px solid var(--pb-border); }
.pb-fbt-row.is-excluded { opacity: .45; }
.pb-fbt-row-text { flex: 1; min-width: 0; }
.pb-fbt-row-name { color: var(--pb-fg); text-decoration: none; }
.pb-fbt-row-name:hover { color: var(--pb-link); text-decoration: underline; }
.pb-fbt-row-price { flex: none; font-weight: 600; color: var(--pb-fg); }
.pb-fbt-foot {
  margin-top: var(--pb-gap);
  padding-top: var(--pb-gap);
  border-top: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-gap);
  flex-wrap: wrap;
}
.pb-fbt-total { font-size: 14px; color: var(--pb-fg-soft); }
.pb-fbt-total .pb-now { font-size: 20px; margin-left: 6px; }
.pb-fbt-total .pb-was { margin-left: 6px; font-size: 14px; }
.pb-fbt-foot .pb-btn { width: auto; min-width: 220px; }

@container (max-width: 767px) {
  .pb-fbt-body { flex-direction: column; gap: var(--pb-gap); }
  .pb-fbt-list { flex: 1 1 auto; width: 100%; }
  .pb-fbt-foot { flex-direction: column; align-items: stretch; }
  .pb-fbt-foot .pb-btn { width: 100%; min-width: 0; }
}

/* =============================================================================
   Preset: compact — narrow vertical list for column_left / column_right
   ============================================================================= */
.pb-compact {
  /* Sized for a sidebar. The cap keeps it looking deliberate if it is dropped
     into a full-width slot instead of stretching a list across the page. */
  max-width: 420px;
  padding: var(--pb-gap);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
}
.pb-compact + .pb-compact { margin-top: var(--pb-gap); }
.pb-compact-title {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pb-fg);
  text-decoration: none;
  display: block;
}
.pb-compact-meta { margin-bottom: 10px; font-size: 11px; color: var(--pb-fg-faint); }
.pb-compact-list { margin: 0 0 12px; padding: 0; list-style: none; }
.pb-compact-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.35;
}
.pb-compact-row + .pb-compact-row { border-top: 1px solid var(--pb-border); }
.pb-compact-row .pb-thumb { flex: none; width: 40px; }
.pb-compact-row-name {
  flex: 1;
  min-width: 0;
  color: var(--pb-fg);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pb-compact-row-price { flex: none; font-weight: 600; }
.pb-compact-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--pb-border);
}
.pb-compact-price .pb-now { font-size: 17px; }
.pb-compact-price .pb-was { font-size: 12px; }

/* =============================================================================
   Preset: grid — cards, used by the standalone listing page
   ============================================================================= */
.pb-grid {
  display: grid;
  /* min() keeps a single card from overflowing a column narrower than 260px. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--pb-gap-lg);
}
.pb-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
  overflow: hidden;
  transition: box-shadow .2s;
}
.pb-card:hover { box-shadow: 0 6px 20px hsla(0, 0%, 0%, .08); }
.pb-card-badge { position: absolute; top: 12px; right: 12px; z-index: 1; }
.pb-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 18px;
  background: var(--pb-bg-alt);
  min-height: 116px;
}
.pb-card-media .pb-thumb {
  width: 62px;
  border-radius: var(--pb-radius-pill);
  border: 2px solid var(--pb-bg);
  margin-left: -16px;
}
.pb-card-media .pb-thumb:first-child { margin-left: 0; }
.pb-card-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-left: -16px;
  border: 2px solid var(--pb-bg);
  border-radius: var(--pb-radius-pill);
  background: var(--pb-accent);
  color: var(--pb-accent-fg);
  font-size: 13px;
  font-weight: 700;
}
.pb-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.pb-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pb-fg);
  text-decoration: none;
}
.pb-card-meta { margin-bottom: 12px; font-size: 12px; color: var(--pb-fg-faint); }
.pb-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: auto 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pb-border);
}
.pb-card-price .pb-now { font-size: 18px; }

/* =============================================================================
   Listing page chrome
   ============================================================================= */
.pb-page-head {
  padding: 34px 0 30px;
  margin-bottom: var(--pb-gap-lg);
  border-bottom: 1px solid var(--pb-border);
  text-align: center;
}
.pb-page-head h1 {
  margin: 0 0 6px;
  font-size: var(--j-font_size-font-size--title-section, 28px);
  font-weight: 700;
  color: var(--pb-fg);
}
.pb-page-head p { margin: 0 0 20px; color: var(--pb-fg-soft); }
.pb-search { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.pb-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 15px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
  color: var(--pb-fg);
  font-size: 14px;
}
.pb-search input:focus { outline: none; border-color: var(--pb-accent); }
.pb-search .pb-btn { width: auto; padding-left: 22px; padding-right: 22px; }

.pb-empty { padding: 60px 20px; text-align: center; color: var(--pb-fg-faint); }
.pb-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--pb-gap-lg);
}
.pb-pagination a, .pb-pagination span {
  padding: 8px 14px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-fg);
  text-decoration: none;
}
.pb-pagination a:hover { background: var(--pb-bg-alt); color: var(--pb-fg); }
.pb-pagination .is-active { background: var(--pb-btn); color: var(--pb-btn-fg); border-color: transparent; }

/* =============================================================================
   Modal — configure options / confirm before adding to cart.
   Built by product_bundle.js at <body> level to escape theme stacking contexts.
   ============================================================================= */
.pb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--pb-overlay);
}
.pb-overlay.is-open { display: flex; }
.pb-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
  color: var(--pb-fg);
  overflow: hidden;
  animation: pb-in .22s ease;
}
@keyframes pb-in {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-modal { animation: none; }
  .pb-rail { scroll-behavior: auto; }
}

.pb-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--pb-border);
}
.pb-modal-head h2 { margin: 0 0 2px; font-size: 17px; font-weight: 700; color: var(--pb-fg); }
.pb-modal-sub { font-size: 12px; color: var(--pb-fg-faint); }
.pb-modal-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-pill);
  background: transparent;
  color: var(--pb-fg);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.pb-modal-close:hover { background: var(--pb-bg-alt); }
.pb-modal-body { flex: 1; overflow-y: auto; padding: 4px 20px; }
.pb-modal-foot { padding: 14px 20px 18px; border-top: 1px solid var(--pb-border); }

.pb-modal-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
}
.pb-modal-row + .pb-modal-row { border-top: 1px solid var(--pb-border); }
.pb-modal-row.is-excluded { opacity: .42; }
.pb-modal-row .pb-thumb { flex: none; width: 84px; }
.pb-modal-row-info { flex: 1; min-width: 0; }
.pb-modal-row-name {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-fg);
  text-decoration: none;
}
.pb-modal-row-name:hover { color: var(--pb-link); text-decoration: underline; }
.pb-modal-row-price { margin-bottom: 7px; font-size: 13px; color: var(--pb-fg-soft); }
.pb-modal-opts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pb-field {
  padding: 8px 11px;
  max-width: 200px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
  color: var(--pb-fg);
  font-size: 13px;
}
.pb-field:focus { outline: none; border-color: var(--pb-accent); }
.pb-field.is-invalid { border-color: var(--pb-sale); }
.pb-opt-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--pb-fg-soft);
  cursor: pointer;
}

.pb-error { min-height: 18px; margin-top: 8px; font-size: 13px; text-align: center; color: var(--pb-sale); }
.pb-loading { padding: 46px 20px; text-align: center; color: var(--pb-fg-faint); }

.pb-success { padding: 26px 0 18px; text-align: center; }
.pb-success-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pb-radius-pill);
  background: var(--pb-ok-bg);
  color: var(--pb-ok);
  font-size: 26px;
}
.pb-success h3 { margin: 0 0 5px; font-size: 18px; font-weight: 700; color: var(--pb-fg); }
.pb-success p { margin: 0; font-size: 13px; color: var(--pb-fg-soft); }
.pb-success-actions { display: flex; gap: 10px; }
.pb-success-actions .pb-btn { flex: 1; }