/* ----------------------------------------------------------------------------
   Bulk order buy box. The shop's default PDP skin in theme.css does the heavy
   lifting; this file sets the vertical rhythm of the box and dresses what the
   bulk-order template adds through Liquid blocks: the anchor and the one-line
   value note under the price. No campaign skin, no new colours, tokens from
   --eg-*.

   Rhythm, top to bottom: title and pills, then the price group (price, the
   payments line, the value note) held tight, then the button with clear air
   on both sides, then delivery and stock as two short lines, then the tabs,
   then the help link.

   Loaded by sections/main-product.liquid only when template.suffix is
   'bulk-order'. Every rule nests inside the same armour selector the gel
   builder and nail drill skins use, plus the .product--bulk-order hook, so an
   override outweighs its legacy counterpart regardless of order.
   ---------------------------------------------------------------------------- */

/* The landing's closing CTA will scroll here; clear the sticky header. */
#bulk-order-buy {
  scroll-margin-block-start: calc(var(--header-height, 0px) + 24px);
}

.template-product #MainContent :is(.shopify-section[id$="__main-product"], #shopify-section-main-product) .product__info.product--bulk-order {
  /* Base step between blocks; the groups below tighten or widen it. */
  & > * + * {
    margin-block-start: 24px;
  }

  /* The anchor block renders as an empty .rte; keep it out of the rhythm. */
  & > .rte:has(> #bulk-order-buy) {
    margin: 0;
  }

  & > .rte:has(> #bulk-order-buy) + * {
    margin-block-start: 0;
  }

  /* Price group: the grid gap in the price block left a phantom row under
     the payments line, so the block flows and the lines carry their own
     8px steps. */
  & .product__price {
    display: block;
  }

  & .product__installments {
    margin-block-start: 8px;
  }

  & > .rte:has(> .bo-buy-value) {
    margin-block-start: 8px;
  }

  & .bo-buy-value {
    margin: 0;
    color: var(--eg-pdp-muted, var(--eg-muted));
    font-size: 13px;
    font-weight: 450;
    line-height: 1.45;
  }

  /* The button gets air on both sides. */
  & > .product-form-wrapper {
    margin-block-start: 28px;
  }

  /* Delivery and stock: two short lines instead of one wrapping row with a
     stray separator. */
  & > .rte:has(> .eg-purchase-summary) {
    margin-block-start: 20px;
  }

  & .eg-purchase-summary__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  & .eg-purchase-summary__sep {
    display: none;
  }

  /* Tabs: one clear step above the first, none between them, then the
     help link. */
  & > details.product__accordion:first-of-type {
    margin-block-start: 28px;
  }

  & > details.product__accordion + details.product__accordion {
    margin-block-start: 0;
  }

  & > details.product__accordion:last-of-type + * {
    margin-block-start: 20px;
  }

  @media screen and (max-width: 767px) {
    & > * + * {
      margin-block-start: 20px;
    }

    & > .product-form-wrapper {
      margin-block-start: 24px;
    }

    & > details.product__accordion:first-of-type {
      margin-block-start: 24px;
    }
  }
}

/* Reseller view of the value note: the same facts, set in ink and bold, as
   the closing line of the simplified buy box. */
.template-product #MainContent :is(.shopify-section[id$="__main-product"], #shopify-section-main-product) .product__info.product--bulk-order {
  & .bo-buy-value--reseller {
    color: var(--eg-pdp-text, var(--eg-ink));
    font-weight: 600;
  }
}