/* Easy Bundle full-page visual adapter (managed offers only).
 * Entry point: layout/theme.liquid + sections/neobulle-offers.liquid registry.
 * Keep app classes/markup and native selection, pricing, inventory and cart logic.
 * Scoped variables derive from the theme; !important is limited to app-owned styles.
 * Removal/ownership: docs/releases/trousse-cleanup-2026-11-13.md.
 */
body[data-neobulle-bundle-managed] {
  --neobulle-bundle-content-width: min(var(--container-max-width), 75rem);
  --neobulle-bundle-summary-width: calc(var(--spacing-80) + var(--spacing-7));
  --neobulle-bundle-image-width: var(--spacing-24);
  --neobulle-bundle-card-height: calc(var(--spacing-28) + var(--spacing-2));
  --neobulle-bundle-meta-size: max(var(--text-xs), .75rem);
  --neobulle-bundle-small-size: max(var(--text-sm), .8125rem);
  --neobulle-bundle-label-size: max(var(--text-sm), .8125rem);
  --neobulle-bundle-body-size: max(var(--text-base), .875rem);
  --neobulle-bundle-section-size: max(var(--text-h4), 1.125rem);
  --neobulle-bundle-total-size: clamp(1.25rem, 1.7vw, 1.5rem);
  --neobulle-bundle-dialog-width: 26.25rem;
  --neobulle-bundle-product-dialog-width: 56.25rem;
  --neobulle-bundle-dialog-image-height: 27.5rem;
  --neobulle-bundle-overlay-index: 2147483000;
}

body[data-neobulle-bundle-managed] #main .gbbBundleWrapper.gbbFullPageBundle {
  --gbb-font-family: var(--text-font-family);
  --gbb-plus-icon-color: rgb(var(--text-primary));
  max-width: var(--neobulle-bundle-content-width);
  margin-inline: auto;
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-12);
  color: rgb(var(--text-primary));
  background: rgb(var(--background-primary));
  font-family: var(--text-font-family);
  font-style: var(--text-font-style);

  & :is(button, input, select, p, div) { font-family: inherit; }
  & :is(.gbbBundleContent, .gbbBundleHeader, .gbbBundleBody) { padding: 0; }
  & .gbbBundleContent { gap: 0; }
  & .neobulle-pack-intro { text-align: start; gap: var(--spacing-2); margin-block-end: var(--spacing-4); }

  & .neobulle-pack-intro h1 { margin: 0; font-size: clamp(var(--spacing-6), 2.6vw, var(--spacing-8)); font-weight: var(--heading-font-weight); line-height: 1.2; }
  & .neobulle-pack-intro > p:last-child { margin: 0; max-width: 65ch; font-size: var(--neobulle-bundle-body-size); line-height: 1.5; }

  /* Explicit steps, without the app's large placeholder icons and progress rail. */
  & .gbbStepNavigationContainer { margin: 0 0 var(--spacing-4); max-width: none; width: 100%; }
  & .gbbStepNavContainer { padding: 0; width: 100%; margin: 0; }
  & .gbbNavigationItemsContainer { counter-reset: neobulle-step; display: flex; gap: var(--spacing-6); justify-content: start; margin: 0; padding: 0; }
  & .gbbNavigationItem { counter-increment: neobulle-step; display: flex; flex-direction: row; align-items: center; gap: var(--spacing-2); width: auto; padding: var(--spacing-1) 0; min-height: var(--spacing-10); }
  & .gbbNavigationStepIndicator { display: grid; place-items: center; width: var(--spacing-6); height: var(--spacing-6); flex: 0 0 var(--spacing-6); border: 1px solid rgb(var(--text-primary) / .3); border-radius: 50%; background: transparent; box-shadow: none; }
  & .gbbNavigationStepIndicator::before { content: counter(neobulle-step); font-size: var(--neobulle-bundle-small-size); line-height: 1; }
  & .gbbNavigationStepIndicator[data-step-status="active"],
  & .gbbNavigationStepIndicator[data-step-status="completed"] { background: rgb(var(--text-primary)); color: rgb(var(--dialog-background)); border-color: rgb(var(--text-primary)); }
  & :is(.gbbNavigationImage, .gbbNavigationStepIndicator svg, .gbbStepsProgressBarContainer) { display: none; }
  & .gbbNavigationTitle { font-size: var(--neobulle-bundle-body-size); font-weight: var(--text-font-weight); margin: 0; }
  & [aria-current="step"] .gbbNavigationTitle { font-weight: var(--heading-font-weight); }
  & .gbbStepHeaderContainer { justify-content: start; padding: var(--spacing-2) 0 0; margin: 0; text-align: start; }
  & .gbbStepTitle { font-size: var(--neobulle-bundle-body-size) !important; line-height: 1.5; font-weight: var(--text-font-weight) !important; text-align: start; }

  /* Keep search and filters in one compact row where there is room. */
  & .gbbCategoriesContainer { gap: var(--spacing-4); }
  & .gbbCategoriesHeaderRow { position: static !important; display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); margin: 0; padding: 0; }
  & .gbbCategoriesHeaderContainer { position: static !important; flex: 1 1 20rem; min-width: 0; padding: 0 !important; }
  & .gbbCategoriesHeaderContainer:has(.gbbCategoriesTabsContainer:empty) { display: none; }
  & .gbbSearchBarContainer { flex: 0 1 19rem; width: 100%; min-height: var(--spacing-11); margin: 0; border: 1px solid rgb(var(--text-primary) / .22); border-radius: var(--rounded-input); background: rgb(var(--dialog-background)); }
  & .gbbSearchBarInput { min-width: 0; font-size: 1rem; color: rgb(var(--text-primary)); background: transparent; }
  & .gbbSearchBarInput::placeholder { color: rgb(var(--text-primary) / .7); }
  & .gbbSearchBarClear { min-width: var(--spacing-11); min-height: var(--spacing-11); }
  & .gbbCategoriesBodyContainer { grid-template-columns: minmax(0, 1fr) var(--neobulle-bundle-summary-width); gap: var(--spacing-8); align-items: start; }
  & .gbbCategoryContainer { padding: 0; }
  & .gbbProductsContainer { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: var(--spacing-3) !important; padding: 0; }
  & .gbbProductItem {
    display: grid;
    grid-template-columns: var(--neobulle-bundle-image-width) minmax(0, 1fr);
    grid-template-rows: auto auto !important;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: var(--neobulle-bundle-card-height);
    padding: 0;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgb(var(--text-primary) / .12) !important;
    border-radius: var(--rounded-sm);
    background: rgb(var(--dialog-background)) !important;
    box-shadow: none;
    outline: none;
  }
  & .gbbProductImageContainer { grid-column: 1; grid-row: 1 / -1; width: var(--neobulle-bundle-image-width); height: 100%; min-height: var(--neobulle-bundle-card-height); background: rgb(var(--background-primary)); aspect-ratio: auto; margin: 0; padding: 0; outline: none !important; }
  & .gbbProductImage { width: 100%; height: 100%; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; mix-blend-mode: multiply; border-radius: 0; }
  & .gbbProductTextContainer { grid-column: 2; grid-row: 1; align-self: end; height: auto; min-height: 0; margin: 0; padding: var(--spacing-3) var(--spacing-3) 2px !important; }
  & .gbbProductTitle { height: auto; min-height: 0; margin: 0; text-align: start; width: fit-content; }
  & .gbbProductTitleOnly { min-height: 0; padding: 0 !important; font-size: var(--neobulle-bundle-body-size) !important; line-height: 1.35 !important; font-weight: var(--heading-font-weight) !important; text-align: start !important; }
  & .gbbProductActionContainer { grid-column: 2; grid-row: 2; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 var(--spacing-2-5) var(--spacing-2-5) var(--spacing-3) !important; margin: 0; gap: var(--spacing-1-5); }
  & .gbbProductPricesContainer { display: flex; width: auto; flex: 0 0 auto; justify-content: start; gap: var(--spacing-1); margin: 0; padding: 0; text-align: start; }
  & .gbbProductPrice { font-size: var(--neobulle-bundle-label-size) !important; line-height: 1.3; font-weight: var(--heading-font-weight) !important; white-space: nowrap; }
  & .gbbProductButtonContainer { display: flex; flex: 0 0 auto; height: var(--spacing-10) !important; width: auto; min-width: var(--spacing-18); }
  & .gbbProductAddButton { display: flex; align-items: center; justify-content: center; min-height: var(--spacing-10); height: var(--spacing-10) !important; padding: 0 var(--spacing-3) !important; border: 1px solid rgb(var(--text-primary) / .3) !important; border-radius: var(--rounded-full) !important; background: transparent !important; color: rgb(var(--text-primary)) !important; font-size: var(--neobulle-bundle-small-size) !important; font-weight: var(--text-font-weight); line-height: 1; }
  & .gbbProductItem:has(.gbbQuantityStepper) { border-color: rgb(var(--text-primary) / .75) !important; background: rgb(var(--dialog-background)) !important; outline: none; }
  & .gbbQuantityStepper { width: calc(var(--spacing-24) - var(--spacing-0-5)); height: var(--spacing-10) !important; border: 1px solid rgb(var(--text-primary) / .25); border-radius: var(--rounded-full) !important; background: transparent !important; color: rgb(var(--text-primary)); }
  & :is(.gbbQuantityStepperRemoveButton, .gbbQuantityStepperAddButton) { width: var(--spacing-8) !important; height: var(--spacing-9-5) !important; flex: 0 0 var(--spacing-8) !important; color: rgb(var(--text-primary)) !important; }
  & .gbbQuantityStepper svg { width: var(--spacing-4); height: var(--spacing-4); }
  & .gbbQuantityStepper path { fill: currentColor; }
  & .gbbQuantityStepperLabel { font-size: var(--neobulle-bundle-label-size) !important; color: rgb(var(--text-primary)) !important; font-weight: var(--text-font-weight) !important; }

  /* The summary has one visual priority: the native next/add button. */
  & .gbbBundleFooter { display: flex; flex-direction: column; gap: var(--spacing-2); width: var(--neobulle-bundle-summary-width); max-width: 100%; flex: 0 0 var(--neobulle-bundle-summary-width); align-self: start; position: sticky; top: calc(var(--sticky-area-height, 0px) + var(--spacing-4)); padding: var(--spacing-5) !important; border: 1px solid rgb(var(--text-primary) / .12) !important; border-radius: var(--rounded-sm) !important; background: rgb(var(--dialog-background)) !important; box-shadow: none !important; }
  & .gbbFooterBundleInfoContainer { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: 0 0 var(--spacing-3); margin: 0; border-bottom: 1px solid rgb(var(--text-primary) / .1); }
  & .gbbBundleFooter { min-width: 0; }
  & .gbbBundleFooter :is(div, p) { min-width: 0; }
  & .gbbFooterBundleInfoContentContainer { width: auto; }
  & .gbbFooterBundleTitle { font-size: 1.125rem !important; font-weight: var(--heading-font-weight) !important; line-height: 1.25 !important; letter-spacing: -.015em; text-align: start !important; }
  & :is(.gbbFooterBundleSubtext, .gbbFooterTotalItemsInCart, .gbbFooterClearItemsIcon, .gbbEmptyProductCard) { display: none; }
  & .gbbFooterClearItemsButtonWrapper { flex: 0 0 auto; min-height: var(--spacing-10); padding: var(--spacing-1) 0; font-size: var(--neobulle-bundle-meta-size) !important; font-weight: var(--text-font-weight); color: rgb(var(--text-primary) / .75) !important; background: transparent !important; opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
  & .gbbFooterClearItemsContent { color: inherit !important; font-size: inherit !important; font-weight: var(--text-font-weight) !important; height: auto; }
  & .gbbFooterProductsContainer { min-height: 0; max-height: 28svh; overflow-y: auto; padding: 0; gap: var(--spacing-3); scrollbar-width: thin; scrollbar-color: rgb(var(--text-primary) / .3) transparent; }
  & .neobulle-pack-empty { padding: var(--spacing-1) 0 var(--spacing-3); font-size: var(--neobulle-bundle-label-size); line-height: 1.5; color: rgb(var(--text-primary) / .75); }
  & .gbbFooterProductWrapper { align-items: center; gap: var(--spacing-3); padding: 0 0 var(--spacing-2); border: 0; }
  & .gbbFooterProductImageContainer { width: var(--spacing-12); height: var(--spacing-12); flex: 0 0 var(--spacing-12); background: rgb(var(--background-primary)); border: 0 !important; border-radius: var(--rounded-xs); overflow: hidden; }
  & .gbbFooterProductImage { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  & .gbbFooterProductInfoContainer { flex: 1; min-width: 0; }
  & .gbbFooterProductTitle { white-space: normal !important; font-size: .875rem !important; line-height: 1.35 !important; font-weight: 600 !important; }
  & .gbbFooterProductPrice { font-size: var(--neobulle-bundle-small-size) !important; font-weight: var(--text-font-weight) !important; font-variant-numeric: tabular-nums; }
  & .gbbFooterProductQuantity { font-size: var(--neobulle-bundle-meta-size); font-variant-numeric: tabular-nums; }
  & .gbbFooterProductRemoveButton { display: grid; place-items: center; width: var(--spacing-10); height: var(--spacing-10); color: rgb(var(--text-primary) / .75); }
  & .gbbFooterProductRemoveButton svg { width: 13px; height: 13px; }
  & .gbbFooterActionContainer { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-3); padding-top: var(--spacing-4); margin-top: 0; border-top: 1px solid rgb(var(--text-primary) / .12); }
  & .gbbFooterTotalContainer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-3); width: 100%; }
  & .gbbBundleTotalWrapper { display: flex; flex-direction: column; align-items: start; gap: var(--spacing-1); }
  & .gbbFooterTotalValueContainer { display: flex; flex-direction: column; align-items: end; gap: 2px; }
  & .gbbDiscountContainer { margin: 0; padding: 0; gap: var(--spacing-2) !important; }
  & .gbbDiscountMessageContainer { justify-content: start; padding: 0 !important; }
  & .gbbDiscountMessage { font-size: var(--neobulle-bundle-small-size) !important; font-weight: var(--text-font-weight) !important; text-align: start !important; white-space: normal; overflow-wrap: anywhere; line-height: 1.4 !important; }
  /* The SDK offsets labels half a column beyond its shortened rail. Keep native
     fill/eligibility values, but contain the labels and center the full rail. */
  & .gbbDiscountStepsProgressBarWrapper { width: 100%; margin: 0 auto !important; padding-inline: var(--spacing-1); }
  & .gbbDiscountStepsProgressBarSteps { gap: var(--spacing-1-5); }
  & :is(.gbbDiscountStepsProgressBarStepTitleWrapper, .gbbDiscountStepsProgressBarStepSubtitleWrapper) { right: auto; justify-content: flex-end; min-width: 0; }
  & :is(.gbbDiscountStepsProgressBarStepTitle, .gbbDiscountStepsProgressBarStepSubtitle) { max-width: 100%; text-align: end; font-size: var(--neobulle-bundle-meta-size) !important; line-height: 1.35; }
  & .gbbDiscountStepsProgressBarStepTitle { font-weight: 600; }
  & .gbbDiscountStepsProgressBarStepSubtitle { color: rgb(var(--text-primary) / .75); }
  & .gbbFreeGiftSection { gap: var(--spacing-2); }
  & .gbbFreeGiftSectionTitle { font-size: var(--neobulle-bundle-small-size); font-weight: 600; }
  & .gbbFreeGiftSectionTitle::after { display: none; }
  & .gbbFreeGiftRow { border: 0 !important; border-radius: 0; background: transparent; color: rgb(var(--text-primary)); }
  & .gbbFreeGiftRowBody { padding: 0 !important; gap: var(--spacing-2); }
  & .gbbFreeGiftRowText { font-size: var(--neobulle-bundle-small-size); line-height: 1.4; }
  & .gbbFreeGiftRowIcon svg { width: var(--spacing-4); height: var(--spacing-4); }
  & .neobulle-pack-cart-notice { margin-bottom: var(--spacing-6); }
  & .neobulle-pack-cart-notice a { text-decoration: underline; }
  & .gbbFooterTotalLabel { font-size: var(--neobulle-bundle-label-size) !important; font-weight: 600; }
  & :is(.gbbFooterTotalValue, .gbbFooterDiscountedTotalValue) { font-size: var(--neobulle-bundle-total-size) !important; font-weight: var(--heading-font-weight) !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .gbbFooterButtonsWrapper { width: 100%; display: flex; flex-direction: column-reverse; align-items: stretch; gap: var(--spacing-1-5); }
  & .gbbFooterNextButton { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--spacing-12); padding: var(--spacing-3) var(--spacing-4) !important; border: 0 !important; border-radius: var(--rounded-button) !important; background: rgb(var(--button-background-primary)) !important; color: rgb(var(--button-text-primary)) !important; font-size: var(--neobulle-bundle-body-size) !important; font-weight: var(--heading-font-weight); line-height: 1.4; }
  & .gbbFooterBackButton { display: flex; align-items: center; justify-content: center; gap: var(--spacing-1-5); width: auto; height: auto; min-height: var(--spacing-9); padding: var(--spacing-1-5) !important; border: 0 !important; background: transparent !important; color: rgb(var(--text-primary)) !important; font-size: var(--neobulle-bundle-small-size); border-radius: var(--rounded-full); align-self: center; outline: none; }
  & .gbbFooterBackButton svg { width: var(--spacing-3-5); height: var(--spacing-3-5); }
  & [role="button"]:focus-visible { outline: 2px solid rgb(var(--text-primary)); outline-offset: 2px; }
  & [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
  @media (hover: hover) {
    & .gbbProductAddButton:not([aria-disabled="true"]):hover { background: rgb(var(--text-primary) / .05) !important; }
    & .gbbProductTitle:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  @media (min-width: 601px) {
    & .gbbBundleFooter { max-height: var(--neobulle-pack-available-height, calc(100svh - var(--sticky-area-height, 0px) - var(--spacing-8))); overflow-y: auto; overscroll-behavior: contain; }
    & .gbbBundleFooter > * { flex-shrink: 0; }
    & .gbbFooterBundleInfoContainer { padding-bottom: 0; }
    & .gbbFooterClearItemsButtonWrapper { min-height: var(--spacing-8); }
    /* Milestone labels and the total already describe this discount. Keep the
       extra sentence only when there is no native progress rail. */
    & .gbbDiscountContainer:has(.gbbDiscountStepsProgressBarWrapper) .gbbDiscountMessageContainer { display: none !important; }
    & .gbbBundleFooter > .gbbFooterBundleItemsContainer { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--text-primary) / .3) transparent; }
    & .gbbBundleFooter .gbbFooterProductsContainer { max-height: none; gap: var(--spacing-2); overflow: visible; }
    & .gbbFooterProductWrapper { padding-bottom: 0; }
    & .gbbFooterProductTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    & .gbbFooterActionContainer { position: static; gap: var(--spacing-2); padding-top: var(--spacing-2); background: rgb(var(--dialog-background)); }
    & .gbbBundleTotalWrapper { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--spacing-1-5); }
    & .gbbFooterTotalValueContainer { flex-direction: row-reverse; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-1-5); }
    & .gbbFooterButtonsWrapper { gap: var(--spacing-0-5); }
    & .gbbFooterBackButton { min-height: var(--spacing-6); padding-block: 0 !important; }
    /* A single discount milestone needs one caption row, not two empty tiers.
       Its native progress track/fill and both pieces of text stay intact. */
    & .gbbDiscountStepsProgressBarSteps:has(> .gbbDiscountStepsProgressBarStepItem:only-child) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: var(--spacing-1); }
    & .gbbDiscountStepsProgressBarStepItem:only-child .gbbDiscountStepsProgressBarStepTitleWrapper { grid-column: 1; grid-row: 1; justify-content: start; }
    & .gbbDiscountStepsProgressBarStepItem:only-child .gbbDiscountStepsProgressBarStepSubtitleWrapper { grid-column: 2; grid-row: 1; align-items: end; }
    & .gbbDiscountStepsProgressBarStepItem:only-child .gbbDiscountStepsProgressBarStepDotWrapper { grid-column: 1 / -1; grid-row: 2; }
  }
  @media (min-width: 1001px) {
    & .gbbStepNavigationContainer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-6); }
    & .gbbStepNavContainer { flex: 0 1 auto; width: auto; }
    & .gbbStepHeaderContainer { flex: 1 1 18rem; padding: 0; justify-content: end; }
    & .gbbStepTitle { text-align: end; }
  }
  @media (min-width: 1100px) {
    & .gbbProductsContainer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
  /* 600px is the app SDK footer switch, kept aligned with packs.js. */
  @media (min-width: 601px) and (max-width: 1000px) {
    --neobulle-bundle-summary-width: calc(var(--spacing-64) + var(--spacing-4));
    & .gbbCategoriesBodyContainer { grid-template-columns: minmax(0, 1fr) var(--neobulle-bundle-summary-width); gap: var(--spacing-5); }
    & .gbbBundleFooter { width: var(--neobulle-bundle-summary-width); flex-basis: var(--neobulle-bundle-summary-width); padding: var(--spacing-4) !important; }
    & .gbbProductsContainer { grid-template-columns: minmax(0, 1fr) !important; }
  }
  @media (max-width: 600px) {
    --neobulle-bundle-image-width: var(--spacing-20);
    --neobulle-bundle-card-height: var(--spacing-28);
    padding: var(--spacing-4) var(--spacing-4) calc(var(--neobulle-pack-footer-height, var(--spacing-48)) + var(--spacing-6));
    & .neobulle-pack-intro { gap: var(--spacing-1-5); margin-bottom: var(--spacing-3); }
    & .neobulle-pack-intro h1 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
    & .neobulle-pack-intro > p:last-child { font-size: var(--neobulle-bundle-label-size); }
    & .gbbCategoriesHeaderRow { gap: var(--spacing-3); }
    & .gbbCategoriesHeaderContainer { flex-basis: 100%; }
    & .gbbSearchBarContainer { flex-basis: 100%; }
    & .gbbNavigationItemsContainer { gap: var(--spacing-4); }
    &:has(.gbbNavigationItem:nth-child(3)) .gbbNavigationItemsContainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--spacing-18), 1fr)); gap: var(--spacing-2); align-items: start; }
    &:has(.gbbNavigationItem:nth-child(3)) .gbbNavigationItem { flex-direction: column; gap: var(--spacing-1-5); text-align: center; }
    &:has(.gbbNavigationItem:nth-child(3)) .gbbNavigationTitle { font-size: var(--neobulle-bundle-meta-size); }
    & .gbbNavigationTitle { font-size: var(--neobulle-bundle-small-size); }
    & .gbbStepHeaderContainer { padding-top: var(--spacing-2-5); }
    & .gbbStepNavigationContainer { margin-bottom: var(--spacing-4); }
    & .gbbStepTitle { font-size: var(--neobulle-bundle-label-size) !important; }
    & .gbbCategoriesBodyContainer { grid-template-columns: minmax(0, 1fr); }
    & .gbbProductsContainer { grid-template-columns: minmax(0, 1fr) !important; gap: var(--spacing-2-5) !important; }
    & .gbbProductItem { grid-template-columns: var(--neobulle-bundle-image-width) minmax(0, 1fr); height: auto; }
    & .gbbProductImageContainer { width: var(--neobulle-bundle-image-width); height: 100%; }
    & .gbbProductButtonContainer, & .gbbProductAddButton { height: var(--spacing-11) !important; min-height: var(--spacing-11); }
    & .gbbQuantityStepper { width: calc(var(--spacing-28) - var(--spacing-1)); height: var(--spacing-11) !important; }
    & :is(.gbbQuantityStepperRemoveButton, .gbbQuantityStepperAddButton) { width: var(--spacing-9-5) !important; height: calc(var(--spacing-10) + var(--spacing-0-5)) !important; flex-basis: var(--spacing-9-5) !important; }
    & .gbbBundleFooter { position: fixed; top: auto; inset-inline: 0; bottom: 0; width: 100%; max-width: none; max-height: calc(100svh - var(--spacing-16)); gap: var(--spacing-2) !important; overflow-y: auto; overscroll-behavior: contain; padding: var(--spacing-1) var(--spacing-4) max(var(--spacing-3), env(safe-area-inset-bottom)) !important; border-radius: 0 !important; border-width: 1px 0 0 !important; box-shadow: none !important; }
    & .showBoxProductsInFooter { display: none !important; }
    & .gbbProductsFooterHTMLForMobile { display: contents; }
    /* App custom CSS carries important order declarations. Keep the visual order
       explicit and prevent flex from shrinking the drawer's animated height. */
    & .gbbBundleFooter > *, & .gbbProductsFooterHTMLForMobile > * { flex-shrink: 0; }
    & .gbbCartIconWithQuantityContainer { order: -3 !important; position: static !important; transform: none; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: var(--spacing-1-5); min-height: var(--spacing-10); width: 100%; padding: 0 !important; margin: 0; border: 0; border-radius: 0 !important; background: transparent !important; color: rgb(var(--text-primary)) !important; font-size: .875rem; font-weight: 600; }
    & .gbbFooterStandaloneTotal { display: none; }
    & .gbbCartIconWithQuantityContainer * { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
    & .gbbCartIconWithQuantityContainer path { fill: currentColor; }
    & .gbbCartIconWithQuantityContainer::before { content: attr(data-selection-label); }
    & .gbbCartIconWithQuantityContainer svg { width: var(--spacing-3-5); height: var(--spacing-3-5); order: 2; }
    & .gbbCartQuantity::before { content: '('; }
    & .gbbCartQuantity::after { content: ')'; }
    & .gbbFooterActionContainer { order: 1 !important; gap: 0; border: 0; padding: 0 !important; margin: 0; }
    & .gbbDiscountContainer { order: -1 !important; }
    & .gbbFreeGiftSection { order: 0 !important; margin: 0; padding: 0; }
    & .gbbFooterButtonsWrapper { display: flex; flex-direction: row; gap: var(--spacing-2); padding-inline: 0; }
    /* The step navigation provides the mobile back action. Keep room for consent controls. */
    & .gbbFooterBackButton { display: none; }
    & .gbbFooterBackButton span { display: none; }
    & .gbbFooterNextButton { flex: 1; min-width: 0; min-height: var(--spacing-12); font-size: .875rem !important; gap: var(--spacing-3); }
    & .gbbNextButtonContent { flex: 1; min-width: 0; text-align: start; }
    & .gbbFooterNextButton .gbbFooterTotalContainer { width: auto; }
    & .gbbFooterNextButton .gbbBundleTotalWrapper { display: none; }
    & .gbbFooterNextButton .gbbFooterTotalContainer { display: flex; flex: 0 0 auto; }
    /* Stack the native old/new prices so the full-width CTA also fits at 320px. */
    & .gbbFooterNextButton .gbbFooterTotalValueContainer { flex-direction: column; align-items: end; gap: 0; }
    & .gbbFooterNextButton :is(.gbbFooterTotalValue, .gbbFooterDiscountedTotalValue) { font-size: var(--neobulle-bundle-body-size) !important; }
    & .gbbFooterPriceSeparator { display: none; }
    & .gbbCartDrawer { order: -2 !important; flex: 0 0 auto; text-align: start; margin: 0 !important; }
    & .gbbFooterBundleInfoContainer { margin: 0 0 var(--spacing-3); padding-bottom: var(--spacing-2); }
    & .gbbFooterProductsContainer { max-height: 32svh; overflow-y: auto; }
  }
}

/* Keep the mobile purchase strip compact; opening the native selection reveals
   the detailed discount milestones without changing their eligibility or fill. */
@media (max-width: 600px) {
  body[data-neobulle-bundle-managed]:not(.gbbCartDrawerOpen) #main .gbbDiscountStepsProgressBarWrapper { display: none; }
  body[data-neobulle-bundle-managed] #gbbSdkToastNotification { bottom: calc(var(--neobulle-pack-footer-height, var(--spacing-48)) + var(--spacing-4)) !important; }
}

body[data-neobulle-bundle-managed] .gbbPreparingBundleMainContainer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--spacing-4);
  z-index: calc(var(--neobulle-bundle-overlay-index) + 1);

  & .gbbPreparingBundleContainerModal { position: static; inset: auto; transform: none; display: grid; justify-items: center; gap: var(--spacing-2); width: min(var(--neobulle-bundle-dialog-width), 100%); max-width: 100%; height: auto; min-height: var(--spacing-40); margin: 0; padding: var(--spacing-6); border-radius: var(--rounded-sm); color: rgb(var(--text-primary)); background: rgb(var(--dialog-background)); }
  & .gbbPreparingBundleHeader { margin: 0; padding: 0; width: 100%; text-align: center; font-family: var(--text-font-family); font-size: var(--neobulle-bundle-body-size); line-height: 1.5; }
  & .gbbPreparingBundleGifContainer { display: grid; place-items: center; width: 100%; height: auto; margin: 0; padding: 0; }
  & .gbbPreparingBundleGif { display: block; width: var(--spacing-24); height: var(--spacing-24); margin: 0; }
}

/* Tidio's mobile sidebar has an invisible hit area over the product controls.
   Suppress the floating widget only in this offer's mobile builder. */
@media (max-width: 600px) {
  body[data-neobulle-bundle-managed] #tidio-chat { display: none !important; }
}

/* Native app modals are portalled outside the bundle. The SDK hook stamps only
   this offer's modal roots, so these rules never reach another offer or app. */
.gbbModal[data-neobulle-bundle-managed] {
  font-family: var(--text-font-family);
  color: rgb(var(--text-primary));
  z-index: var(--neobulle-bundle-overlay-index);
  place-items: center;
  & :is(button, input, select, p, div) { font-family: inherit; }
  & .gbbModalDialog { position: relative !important; inset: auto !important; transform: none !important; margin: auto; outline: none; background: rgb(var(--dialog-background)) !important; border-radius: var(--rounded-sm) !important; box-shadow: var(--shadow-lg); }
  & .gbbProductVariantModalContainer { width: min(var(--neobulle-bundle-product-dialog-width), calc(100vw - var(--spacing-12))); max-width: none; min-width: 0; max-height: calc(100svh - var(--spacing-16)); padding: var(--spacing-8) !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--spacing-6); overflow-y: auto; }
  & .gbbProductVariantModalImageTitleContainer { display: block; width: 100%; min-width: 0; height: auto; }
  & .gbbCarousel { display: flex; flex-direction: column-reverse; gap: var(--spacing-3); width: 100%; }
  & .gbbVariantModalImageWrapper { width: 100%; height: min(var(--neobulle-bundle-dialog-image-height), 56svh); background: rgb(var(--background-primary)); border-radius: var(--rounded-xs); }
  & .gbbVariantModalImage { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: var(--rounded-xs); }
  & .gbbVariantModalThumbList { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; max-height: none !important; height: calc(var(--spacing-12) + var(--spacing-1)); gap: var(--spacing-1-5); overflow-x: auto; }
  & .gbbVariantModalThumb { width: var(--spacing-12); height: var(--spacing-12); flex: 0 0 var(--spacing-12); border: 1px solid transparent; border-radius: var(--rounded-xs); background: rgb(var(--background-primary)); overflow: hidden; }
  & .gbbVariantModalThumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  & .gbbVariantModalThumb[aria-pressed="true"] { border-color: rgb(var(--text-primary)); }
  & .gbbProductVariantModalDetailsContainer { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: start; gap: var(--spacing-4); padding: var(--spacing-3) 0 0; }
  & .gbbVariantModalTitle { font-size: max(var(--text-h3), 1.375rem) !important; line-height: 1.3; font-weight: var(--heading-font-weight) !important; margin: 0; }
  & .gbbProductDescriptionText { font-size: var(--neobulle-bundle-body-size) !important; line-height: 1.6; max-height: 48svh; overflow-y: auto; padding-inline-end: var(--spacing-2); }
  & .gbbProductDescriptionText :is(p, ul) { margin-bottom: var(--spacing-3); }
  & .gbbProductDescriptionText ul { padding-inline-start: var(--spacing-4-5); list-style: disc; }
  & :is(.gbbProductVariantModalClose, .gbbModalCloseButton) { position: absolute; top: var(--spacing-2); right: var(--spacing-2); width: var(--spacing-10); height: var(--spacing-10); display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(var(--dialog-background)); opacity: 1; color: rgb(var(--text-primary)); }
  & :is(.gbbProductVariantModalClose, .gbbModalCloseButton) svg { width: var(--spacing-4); height: var(--spacing-4); }
  & :is(.gbbProductVariantModalClose, .gbbModalCloseButton) path { fill: currentColor; }
  & :is(.gbbCarouselPrev, .gbbCarouselNext) { width: var(--spacing-9); height: var(--spacing-9); display: grid; place-items: center; border-radius: 50%; background: rgb(var(--dialog-background) / .9); color: rgb(var(--text-primary)); font-size: max(var(--text-lg), 1rem); }
  & .gbbModalContainer { width: min(var(--neobulle-bundle-dialog-width), calc(100vw - var(--spacing-8))); padding: var(--spacing-7) !important; }
  & .gbbModalTitle { font-size: max(var(--text-h3), 1.375rem) !important; line-height: 1.3; font-weight: var(--heading-font-weight); margin-bottom: var(--spacing-3); }
  & .gbbModalDescription { font-size: var(--neobulle-bundle-body-size); line-height: 1.6; }
  & .gbbModalFooter { display: flex; align-items: stretch; flex-direction: column-reverse; gap: var(--spacing-2); margin-top: var(--spacing-6); }
  & :is(.gbbModalConfirmButton, .gbbModalCancelButton) { display: flex; align-items: center; justify-content: center; width: 100%; align-self: stretch; min-height: var(--spacing-11); padding: var(--spacing-2-5) var(--spacing-4); border: 1px solid rgb(var(--text-primary) / .25); border-radius: var(--rounded-button); font-size: var(--neobulle-bundle-body-size); }
  & .gbbModalConfirmButton { background: rgb(var(--button-background-primary)); color: rgb(var(--button-text-primary)); border-color: transparent; }
  & .gbbProductVariantAddButton { display: flex; align-items: center; justify-content: center; min-height: var(--spacing-11); padding: var(--spacing-2-5) var(--spacing-5) !important; border-radius: var(--rounded-button) !important; background: rgb(var(--button-background-primary)) !important; color: rgb(var(--button-text-primary)) !important; font-size: var(--neobulle-bundle-body-size) !important; }
  & .gbbQuantityStepper { height: var(--spacing-11) !important; border: 1px solid rgb(var(--text-primary) / .25); border-radius: var(--rounded-full) !important; background: transparent !important; color: rgb(var(--text-primary)); }
  & :is(.gbbQuantityStepperRemoveButton, .gbbQuantityStepperAddButton) { width: var(--spacing-9-5) !important; height: calc(var(--spacing-10) + var(--spacing-0-5)) !important; color: inherit !important; }
  & .gbbQuantityStepperLabel { color: inherit !important; font-size: var(--neobulle-bundle-body-size) !important; }
  & .gbbQuantityStepper svg { width: var(--spacing-4); height: var(--spacing-4); }
  & .gbbQuantityStepper path { fill: currentColor; }
  & .gbbModalDeleteIcon { display: none; }
  & [role="button"]:focus-visible { outline: 2px solid rgb(var(--text-primary)); outline-offset: 2px; }
  @media (max-width: 768px) {
    & .gbbProductVariantModalContainer { width: calc(100vw - var(--spacing-6)); max-height: calc(100svh - var(--spacing-8)); padding: var(--spacing-6) var(--spacing-4) !important; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); }
    & .gbbVariantModalImageWrapper { height: var(--spacing-60); }
    & .gbbVariantModalTitle { font-size: var(--neobulle-bundle-total-size) !important; }
    & .gbbProductDescriptionText { max-height: none; overflow: visible; }
    & .gbbProductVariantModalDetailsContainer { padding-top: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    &, & * { animation: none !important; transition: none !important; }
  }
}

body[data-neobulle-bundle-colors="false"] #main .gbbBundleWrapper.gbbFullPageBundle {
  & .gbbProductItem { height: auto; min-height: calc(var(--spacing-32) + var(--spacing-1)); }
  & .gbbProductImageContainer { height: 100%; min-height: calc(var(--spacing-32) + var(--spacing-0-5)); background: rgb(var(--background-primary)); }
  & .gbbProductImage { object-fit: contain !important; }
  & .gbbProductActionContainer { flex-wrap: wrap; }
}