/* =============================================================================
   DPL Product Page — gallery, info panel, trust bar, accordions, help button
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Product layout — wider info panel (+20%)
   --------------------------------------------------------------------------- */

@media screen and (min-width: 990px) {
  .product--large:not(.product--no-media) .product__media-wrapper {
    max-width: 58%;
    width: calc(58% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .product--large:not(.product--no-media) .product__info-wrapper {
    max-width: 42%;
    width: calc(42% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

/* ---------------------------------------------------------------------------
   Gallery — match collection card radius (10px)
   --------------------------------------------------------------------------- */

/* Main viewer — the actual rendered container */
.product-media-container {
  border-radius: 20px;
  overflow: hidden;
}

/* Inner media div also needs clipping in case it overflows the container */
.product-media-container .product__media {
  border-radius: 20px;
  overflow: hidden;
}

/* Thumbnail buttons */
.thumbnail-list__item button.thumbnail {
  border-radius: 20px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Product info — reset Dawn's generic block spacing
   --------------------------------------------------------------------------- */

/* Dawn adds 1.5rem between every block and 2.5rem for form/description */
.product__info-container > * + * {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

.product__info-container .product-form,
.product__info-container .product__description {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* Title → price: tighter 8px */
.product__title {
  margin-bottom: 0 !important;
}

.product__title + * {
  margin-top: 8px !important;
}

/* Price → next block (inventory/description): 12px */
#price-{{ section.id }} + * {
  margin-top: 12px !important;
}

/* Variant picker label → pills: 8px internal */
.product-form__input {
  margin-top: 0;
  margin-bottom: 0;
}

/* Variant picker block → quantity row: 16px */
.product-form__quantity {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* Trust bar: 20px top */
.dpl-trust-bar {
  margin-top: 20px !important;
}

/* ---------------------------------------------------------------------------
   Product title
   --------------------------------------------------------------------------- */

.product__title h1 {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  color: #0D0D0D;
  line-height: 1.2;
  margin: 0;
}

/* Hide the duplicate <h2> Dawn renders for non-template context */
.product__title .h1 {
  display: none;
}

/* ---------------------------------------------------------------------------
   Price badges
   --------------------------------------------------------------------------- */

/* Never show the sale badge */
.price__badge-sale {
  display: none !important;
}

/* Sold-out badge — red */
.price__badge-sold-out {
  background: #D0021B !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

/* ---------------------------------------------------------------------------
   Price
   --------------------------------------------------------------------------- */

/* Align badge vertically with the price */
#price-{{ section.id }} .price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price--large .price__regular .price-item--regular {
  font-size: 26px;
  font-weight: 400;
  color: #0D0D0D;
}

.price--large .price__sale .price-item--sale {
  font-size: 26px;
  font-weight: 400;
  color: #0D0D0D;
}

.price--large .price__sale .price-item--regular {
  font-size: 16px;
  font-weight: 400;
  color: #ADADAD;
  text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Variant picker — pill buttons
   --------------------------------------------------------------------------- */

.product-form__input--pill .swatch__input:checked + .swatch__label,
fieldset.product-form__input .product-form__radio:checked + label {
  background: #0D0D0D;
  color: #FFFFFF;
  border-color: #0D0D0D;
}

/* Override Dawn's default pill / button variant styles */
.product-form__input--pill label,
.variant-input-wrap label,
fieldset.product-form__input label {
  border: 1px solid #E5E5E5;
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 400;
  color: #4B4B4B;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.product-form__input--pill label:hover,
.variant-input-wrap label:hover,
fieldset.product-form__input label:hover {
  border-color: #ADADAD;
  color: #0D0D0D;
}

/* Price on the chip — the buyer should not have to click a size to find out what it costs */
.product-form__chip-sep {
  margin: 0 5px;
  opacity: 0.45;
}

.product-form__chip-price {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

fieldset.product-form__input .product-form__radio:checked + label .product-form__chip-price {
  opacity: 0.9;
}

/* Per-mg comparison under the size chips */
.dpl-value-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #6B6B6B;
}

.dpl-value-note__badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(255, 154, 1, 0.12);
  color: #B36C00;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Quantity + Add to Cart — same row layout
   --------------------------------------------------------------------------- */

/* Fixed quantity column width: 3× 44px buttons = 132px */
:root {
  --dpl-qty-width: 132px;
  --dpl-qty-gap: 10px;
}

/* Grid: [quantity col] [buy-buttons col] */
@media screen and (min-width: 750px) {
  .product__info-container {
    display: grid;
    grid-template-columns: var(--dpl-qty-width) 1fr;
    column-gap: var(--dpl-qty-gap);
    align-items: start;
  }

  /* Every child spans both columns by default */
  .product__info-container > * {
    grid-column: 1 / -1;
  }

  /* Quantity: left column */
  .product-form__quantity {
    grid-column: 1;
  }

  /* Buy-buttons block: right column, same row as quantity */
  .product-form__quantity + div {
    grid-column: 2;
    margin-top: 0 !important;
  }

  /* Buy It Now: pull back left to span full row width */
  .shopify-payment-button {
    margin-left: calc(-1 * (var(--dpl-qty-width) + var(--dpl-qty-gap)));
    width: calc(100% + var(--dpl-qty-width) + var(--dpl-qty-gap));
  }
}

/* Remove Dawn's max-width cap so buttons fill their column */
.product-form__buttons {
  max-width: none;
}

/* Hide "Quantity" label text — the ± controls are self-explanatory */
.product-form__quantity .form__label {
  display: none;
}

/* Quantity control */
.quantity {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 20px;
  height: 44px;
  overflow: hidden;
}

.quantity__button {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 400;
  color: #0D0D0D;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.quantity__button:hover {
  background: #F7F7F7;
}

.quantity__input {
  width: 44px;
  height: 44px;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #0D0D0D;
  background: none;
  -moz-appearance: textfield;
}

.quantity__input::-webkit-inner-spin-button,
.quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* ---------------------------------------------------------------------------
   Buy buttons — full-width stacked
   --------------------------------------------------------------------------- */

.product-form__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Add to Cart */
.product-form__submit {
  width: 100%;
  height: 44px;
  background: #0D0D0D;
  color: #FFFFFF;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}

.product-form__submit:hover:not([disabled]) {
  background: #2A2A2A;
}

.product-form__submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dynamic checkout (Buy It Now) */
.shopify-payment-button__button {
  border-radius: 20px !important;
  height: 44px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.shopify-payment-button__button--unbranded {
  background: #FF9A01 !important;
  color: #FFFFFF !important;
}

.shopify-payment-button__button--unbranded:hover {
  background: #D97F00 !important;
}

/* ---------------------------------------------------------------------------
   DPL Trust bar
   --------------------------------------------------------------------------- */

.dpl-trust-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  padding: 18px 0;
  margin: 20px 0;
}

.dpl-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.dpl-trust-item__icon {
  width: 28px;
  height: 28px;
  color: #FF9A01;
}

.dpl-trust-item__icon svg {
  width: 28px;
  height: 28px;
}

.dpl-trust-item__label {
  font-size: 15px;
  font-weight: 100;
  color: #4B4B4B;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Accordions
   --------------------------------------------------------------------------- */

.product__accordion.accordion {
  border-top: 1px solid #E5E5E5;
}

.product__accordion.accordion:last-of-type {
  border-bottom: 1px solid #E5E5E5;
}

/* Override Dawn accordion heading size for product page */
.product__accordion .accordion__title {
  font-size: 14px;
  font-weight: 500;
  color: #0D0D0D;
  margin: 0;
}

.product__accordion details summary {
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

.product__accordion details summary::-webkit-details-marker {
  display: none;
}

.product__accordion .accordion__content {
  padding: 0 0 16px;
  font-size: 14px;
  color: #4B4B4B;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Help button
   --------------------------------------------------------------------------- */

.dpl-help-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 400;
  color: #0D0D0D;
  cursor: pointer;
  text-decoration: none;
  margin-top: 16px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.dpl-help-button:hover {
  border-color: #0D0D0D;
  color: #0D0D0D;
  text-decoration: none;
}

.dpl-help-button__icon {
  width: 16px;
  height: 16px;
  color: #FF9A01;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Remove "view full details" link (redundant on product page)
   --------------------------------------------------------------------------- */

.product__view-details {
  display: none;
}

/* ---------------------------------------------------------------------------
   Product description
   --------------------------------------------------------------------------- */

.product__description {
  font-size: 14px;
  color: #4B4B4B;
  line-height: 1.65;
  margin: 12px 0;
}

.product__description p {
  margin: 0 0 10px;
}

.product__description p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Scarcity / inventory status
   --------------------------------------------------------------------------- */

.product__inventory--low {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #D0021B;
  margin: 0;
}

.product__inventory-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #D0021B;
}

/* ---------------------------------------------------------------------------
   Pre-order delivery estimate (under the buy button)
   --------------------------------------------------------------------------- */

.dpl-preorder-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #6B6B6B;
}

.dpl-preorder-note__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 20px;
  background: rgba(255, 154, 1, 0.12);
  color: #B36C00;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dpl-preorder-note__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #B36C00;
}

/* ---------------------------------------------------------------------------
   Related products section
   --------------------------------------------------------------------------- */

.related-products .title-wrapper h2 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: #0D0D0D;
}

/* Full grey card style for related products */
.related-products .dpl-card {
  background: #F7F7F7;
  border-radius: 20px;
  overflow: hidden;
}

.related-products .dpl-card__image-wrap {
  border-radius: 0;
  aspect-ratio: 1 / 1;
}

.related-products .dpl-card__body {
  padding: 12px 14px 14px;
}

.related-products .dpl-card__type {
  font-size: 11px;
  font-weight: 400;
  color: #ADADAD;
  margin: 0 0 4px;
  text-transform: capitalize;
}

.related-products .dpl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.related-products .dpl-card__cart-form {
  margin: 0;
}

.related-products .dpl-card__cart-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0D0D0D;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.related-products .dpl-card__cart-btn:hover {
  background: #2A2A2A;
}

/* Related products column widths.
   These used to be a single un-scoped 25% rule, which forced four cards per row at every width —
   on a phone that squashed them until they distorted. Each breakpoint is now sized for the
   column-gap actually in effect there (12px mobile, 16px from 750px up). */
@media screen and (max-width: 749px) {
  .related-products .product-grid.grid--2-col-tablet-down .grid__item {
    width: calc(50% - 12px / 2);
    max-width: calc(50% - 12px / 2);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .related-products .product-grid.grid--2-col-tablet-down .grid__item {
    width: calc(50% - 16px / 2);
    max-width: calc(50% - 16px / 2);
  }
}

@media screen and (min-width: 990px) {
  .related-products .product-grid.grid--4-col-desktop .grid__item {
    width: calc(25% - 16px * 3 / 4);
    max-width: calc(25% - 16px * 3 / 4);
  }
}

/* ---------------------------------------------------------------------------
   Add-on-only product page — shown instead of the buy form for the free items
   --------------------------------------------------------------------------- */

.dpl-addon-only {
  max-width: 60ch;
  padding: 48px 0 64px;
}

.dpl-addon-only__title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  color: #0D0D0D;
  line-height: 1.2;
  margin: 0 0 12px;
}

.dpl-addon-only__body {
  font-size: 15px;
  font-weight: 400;
  color: #6B6B6B;
  line-height: 1.6;
  margin: 0 0 24px;
}

.dpl-addon-only__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 20px;
  background: #0D0D0D;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.dpl-addon-only__cta:hover {
  background: #2A2A2A;
  color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Upsell Koala — the "Bestel meer & bespaar" discount widget
   ---------------------------------------------------------------------------
   THIRD-PARTY MARKUP. Deliberately coupled to the class names of the "Upsell
   Koala Bundles / Discount" app. An app update can rename any of these, at which
   point these rules silently stop applying and the widget reverts to the app's
   own orange defaults. Re-read the class names off the rendered page and update
   the selectors here — do not patch the app's assets.

   SCOPE TO .koala-deal, NOT TO THE ELEMENT NAME. Each Koala deal type renders a
   different custom element — <koala-volume-discounts-embed> for volume
   discounts, <koala-quantity-breaks-embed> for quantity breaks, and so on — but
   they all carry class="koala-deal" on the root. Scoping to the element name is
   what broke this block once already: switching deal type in the app admin left
   every rule dead and the widget half-styled. <koala-quantity-selector> is the
   exception; it has no .koala-deal class and the app's JS hoists it out of the
   embed to sit beside it in the form, so it is named separately throughout.

   Both tier layouts are covered, because the deal type decides which appears:
     - list  — ul.koala-deal__tiers__list  > li.koala-deal__tiers__list-item
               > input.koala-deal__tier__input + label.koala-deal__tier
     - table — table.koala-deal__tiers__table > tr.koala-deal__tier > td

   The app is CSS-custom-property driven and its own rules are only (0,1,0), so
   nearly all of this is done by redefining its variables from a (0,2,0)
   selector — no !important. The single exception is flagged below.

   The app also re-declares tier variables in a per-tier rule keyed by tier UUID
   (".tier-<uuid>", on the list item / row), so the tier variables are set again
   on those elements to win on the same element.
   --------------------------------------------------------------------------- */

/* Tier appearance. Set on the root and again on the tier itself so it beats the
   app's per-tier ".tier-<uuid>" rule. */
.product__info-container .koala-deal,
.product__info-container koala-quantity-selector,
.product__info-container .koala-deal__tiers__list-item,
.product__info-container .koala-deal__tier {
  /* Unselected tier: the variant size chip's border treatment and radius.
     Selected tier: solid black with white text, exactly like a selected chip. */
  --border-radius: 20px;
  --border-width: 1px;
  --border-selected-width: 1px;
  --border-color: #E5E5E5;
  --border-selected-color: #0D0D0D;
  --bg-color: #FFFFFF;
  --bg-selected-color: #0D0D0D;
  --title-color: #0D0D0D;
  --title-selected-color: #FFFFFF;
  --title-font-size: 13px;
  --title-font-weight: 500;
  --subtitle-color: #6B6B6B;
  --subtitle-selected-color: #ADADAD;
  --price-color: #0D0D0D;
  --price-selected-color: #FFFFFF;
  --price-font-size: 13px;
  --price-font-weight: 500;
  --regular-price-color: #6B6B6B;
  --regular-price-selected-color: #9A9A9A;
  --regular-price-font-size: 12px;
  --regular-price-font-weight: 400;
  /* Discount badge: the GRATIS pill from the free-extras list, and the solid
     accent once the tier is the active one. */
  --badge-bg-color: rgba(255, 154, 1, 0.12);
  --badge-text-color: #B36C00;
  --badge-bg-selected-color: #FF9A01;
  --badge-text-selected-color: #FFFFFF;
  --badge-font-size: 10px;
  --badge-font-weight: 500;
  /* The radio keeps a white face (the app forces that with !important), so the
     ring and dot are the ink colour rather than the card colour. */
  --radio-color: #E5E5E5;
  --radio-selected-color: #0D0D0D;
}

/* Block chrome and the app's own quantity stepper. */
.product__info-container .koala-deal,
.product__info-container koala-quantity-selector {
  /* Drop the app's card so the widget sits flush in the content column like
     .dpl-addons and the add-to-cart button, instead of reading as a foreign
     panel dropped into the page. */
  --block-bg-color: transparent;
  --block-border-color: transparent;
  --block-padding: 0;
  --block-border-radius: 0;
  /* Headings: same type as .dpl-addons__title ("GRATIS INBEGREPEN…") */
  --block-title-color: #ADADAD;
  --block-title-font-size: 11px;
  --block-title-font-weight: 500;
  --quantity-selector-label-color: #ADADAD;
  --quantity-selector-label-font-size: 11px;
  --quantity-selector-label-font-weight: 500;
  /* Stepper buttons — round, per the no-radius-below-20px rule */
  --quantity-button-border-radius: 100px;
  --quantity-button-background-color: #F7F7F7;
  --quantity-button-text-color: #0D0D0D;
}

/* .koala-deal sets `border: 1px solid var(--block-border-color)`. Zeroing the
   colour alone still leaves 2px of box, which makes the tier list narrower than
   the add-to-cart button below it. */
.product__info-container .koala-deal {
  border: 0;
}

/* Hoisted out of the embed by the app's JS, so it needs its own rhythm. */
.product__info-container koala-quantity-selector {
  display: block;
  margin: 16px 0;
}

/* Block heading, left-aligned like every other label in the column. The app
   centres it between two full-width rules that are only `visibility: hidden`,
   so they still consume the row — remove them outright. */
.product__info-container .koala-deal__title {
  justify-content: flex-start;
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.product__info-container .koala-deal__title::before,
.product__info-container .koala-deal__title::after {
  display: none;
}

.product__info-container .koala-deal__quantity-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* Label and stepper on one row. The app's 16px gap plus its heavy 14px label is
   what pushed the label onto two lines in the narrow desktop column. */
.product__info-container .koala-deal__tier__quantity-container {
  gap: 12px;
}

.product__info-container .koala-deal__quantity-input {
  color: #0D0D0D;
  font-size: 13px;
  font-weight: 500;
}

/* ---- table tier layout (volume-discounts deal type) ---------------------- */

/* The tier list reads as one bordered card in the page's own radius language */
.product__info-container .koala-deal__tiers__table {
  width: 100%;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #E5E5E5;
}

/* !important is forced here, and only here. The app ships
     .koala-deal__tiers__table { border-spacing: 1px !important }
   which leaves a 1px gap between every cell; against the card background that
   gap draws a visible vertical seam down the middle of the table and makes the
   table 2px narrower than the button below it. An !important declaration can
   only be beaten by another !important, so specificity alone cannot fix it. */
.product__info-container .koala-deal__tiers__table {
  border-spacing: 0 !important;
}

.product__info-container .koala-deal__tiers__table .koala-deal__tier > td {
  padding: 12px 16px;
  background: #FFFFFF;
}

/* Hairline between tiers. Done with an inset shadow rather than a border because
   the app sets `.koala-deal__tiers__table td { border: none !important }` and a
   border here would need !important to land. */
.product__info-container .koala-deal__tiers__table .koala-deal__tier:not(:first-child) > td {
  box-shadow: inset 0 1px 0 #EFEFEF;
}

/* ---- desktop: collapse the empty quantity column ------------------------- */

/* Above 750px this theme lays the info panel out as [quantity | buy buttons]
   (see --dpl-qty-width above). When Upsell Koala's own stepper is switched on it
   hides .product-form__quantity with an inline display:none and puts its stepper
   in the form instead — which leaves column 1 empty and insets the widget AND
   the add-to-cart button by 142px from everything else in the panel.

   So collapse the grid to a single column, but only in exactly that case. The
   :has(koala-quantity-selector) test keys off the cause rather than off a
   hardcoded assumption, so this reverses itself automatically if the app's
   stepper is switched back off and the theme's own selector returns to column 1.

   Do NOT instead pull the widget leftwards with a negative margin. That was
   tried, and it drew the widget straight over the quantity stepper the moment
   the theme's own selector came back. */
@media screen and (min-width: 750px) {
  .product__info-container:has(koala-quantity-selector) {
    grid-template-columns: 1fr;
  }

  /* The buy-buttons block is pinned to column 2 by the rule above; with one
     column that would create a phantom second column. */
  .product__info-container:has(koala-quantity-selector) .product-form__quantity + div {
    grid-column: 1 / -1;
  }

  /* Buy It Now no longer needs to reach back across a column that isn't there. */
  .product__info-container:has(koala-quantity-selector) .shopify-payment-button {
    margin-left: 0;
    width: 100%;
  }
}