/*
 * EDR buy box (US9-955).
 *
 * Layout, colour and type are applied in the HTL with shared utility classes:
 *   atomic (clientlib-site/_global-utility.scss) - flex / flex-column /
 *                items-center / items-baseline / justify-center / dn / tc /
 *                relative / absolute / overflow-hidden / pointer-none ...
 *   platform-components (global-classes.less)    - w-100 / h-100 / o-0 /
 *                flex-none / br-pill / mt4 / platform-components__visually-hidden
 *   brand      - dpc-brand-bg-default, dpc-brand-text-*, dpc-border-brand-default,
 *                dpc-transition-brand-default, dpc-button + dpc-btn-primary-brand
 *   typography - dpc-h3 / dpc-h4 / dpc-h6 / dpc-body2 / dpc-body2-bold
 * Caveat: every one of those is a single class (0,1,0). Anything the legacy PDP
 * stylesheets target with two or more classes (.pdp-tray__cta ...) beats them,
 * so those elements are still styled from here. Note also that the platform
 * spacing scale is 3/5/10/15/20/25/30/35/40/45/50px and its br* radii are rem
 * on a 62.5% root (br4 = 10px, not 16px), so most of this file's values have no
 * utility equivalent.
 * Icons are inline Figma SVGs stroked with currentColor, so they follow the
 * brand text class on their wrapper span; the wrappers only need pinning so
 * flex does not shrink them.
 * Only what those cannot express lives here: spacing, selected states and the
 * two composite widgets (pack icon, qty stepper). Note the brand's dpc-caption
 * is uppercase, so sentence-case small copy uses dpc-body2 instead.
 *
 * Show/hide is done in JS with the `dn` + `flex` utilities (see setVisible);
 * never declare `display` here for an element the JS toggles.
 */
/* Figma's off-white. The filter themes set --text-base and --text-link-base to
   #ffffff; the refresh PDP draws them at this value instead.
   delivery-messaging.less uses the same literal. */
.pdp-tray.edw-buy-box {
  /* Every dpc-border-brand-default in here (pack + order cards, selects,
       stepper) resolves --ui-border-color, which pdp-colors.less sets to #FAFCFF.
       On the dark card the Figma draws all of them as a dim ramp line;
       overriding the token once re-points the lot. */
  --ui-border-color: var(--pdp-color-ramp-800);
  /* Same trick for the whites: the section labels, pack names, order card
       titles and the promo title all inherit these rather than declaring a
       colour, so re-pointing the tokens once covers the lot. Anything already
       pinned to a ramp step (prices, badges, promo copy) is unaffected.
       --text-offset is deliberately left alone - that token is its own #f5f5f5. */
  --text-base: #fafcff;
  --text-link-base: #fafcff;
  box-sizing: border-box;
  border-radius: 16px;
  /* Section spacing is 16px throughout: this 4px plus a 12px margin on each
       section that needs one (pack section, subscribe panel, price card, terms,
       CTA). Hidden sections drop out of the gap, so one-time mode stays at 16 too. */
  gap: 4px;
  /* -------------------------------------------------- sections */
  /* Only the pack section needs the gap to the cards below it. The order section
       is followed by the subscribe panel or the price card, which carry their own
       margin, so one here would stack on top of theirs. Named rather than
       :first-child because the pack section is hidden outright when a product has a
       single variant. */
  /* -------------------------------------------------- selection cards */
  /* Border width and padding are identical in both states so the two cards in a
       row share one content box - that is what lines the glyphs, titles and
       badges up across them. Selection changes colour only: border, ground and
       text. (dpc-border-brand-default supplies 1px; the 2px keeps the selected
       outline heavy without moving anything.) */
  /* Figma sizes all four cards to 105px. min-height rather than height so a long
       translated title can still grow the card; the markup's justify-center centres
       the content so the extra height splits evenly above and below it. */
  /* Figma export sizes, pinned in CSS: the width/height attributes on an
       inline svg lose to any stylesheet rule that sizes `svg`, which collapses
       these to the surrounding font size. Same guard as .edw-buy-box__pack-icon. */
  /* Secondary lines stay ramp-300 in both states */
  /* Matches the badge's 20px box on the sibling card so the two sit on one line:
       dpc-disclaimer's 16px line plus the same 2px above and below. */
  /* the badge follows the card: brand pill when chosen, muted when not */
  /* Figma pack outlines, 26px square; pinned so the svg is not shrunk
       as a flex item and so the stroke inherits the card's text colour */
  /* Sale chip on the price row is the same pill as the card badge. Figma's card
       badge is 20px: dpc-disclaimer's 16px line plus 2px above and below. Padding
       rather than a fixed height because the card's Sale badge is shown and hidden
       with the dn utility, so this rule cannot declare display. The price chip
       drops the vertical padding below and sets its own 22px. */
  /* The sale chip on the price row is a light tint rather than the solid brand
       fill the subscribe badge carries, so it reads as a flag next to the price
       instead of competing with the card it sits above. In both modes it stacks
       over the price line (flex-column / items-start on the price markup). */
  /* The icon font glyph sits inside its em box with padding, so at the chip's
       12px it draws noticeably smaller than the label. 16px matches Figma and
       still fits the 22px chip. The brand only ships the light icon face, so 600
       is a synthesized weight; it brings the stroke up to the label's. */
  /* -------------------------------------------------- subscribe panel */
  /* The panel only renders in subscribe mode, so the gap to the order cards above
       belongs to it rather than to a margin on the section above, which would apply
       in one-time mode too. */
  /* The select is stretched over the whole control and given room at the top for
       the overlaid label, so clicking anywhere in the block opens the dropdown -
       a <label> wrapper alone only moves focus in most browsers. */
  /* position, padding and cursor come from relative / pa0 / cursor-point on the markup */
  /* -------------------------------------------------- price */
  /* chip over price line */
  /* the headline figure and, for a multi-filter pack, its per-filter price, which
       wraps under the figure (2px) rather than crowd the breakdown toggle */
  /* -------------------------------------------------- price card (US9-1014) */
  /* The subscribe-mode card and the Sale chip icon are at the end of this file;
       see the note there. */
  /* The struck base price that opens the savings line */
  /* A <button> for the disclosure semantics, stripped back to the disclaimer type
       around it (padding and cursor come from the pa0 / cursor-point utilities).
       min-height keeps the 24px target size the details link had. */
  /* drawn the same way as the select chevrons: two borders of a rotated square */
  /* laid out by the flex / flex-column utilities on the markup */
  /* the total: rule above; type is dpc-body2-bold on the markup */
  /* -------------------------------------------------- one-time qty */
  /* the note is the one-time counterpart of the savings line and sits in the same
       slot, so it takes the same 2px and the same ramp step rather than
       dpc-brand-text-offset's --text-offset */
  /* Filled rather than outlined: the pill carries the ground itself, so the markup
       drops dpc-border-brand-default instead of zeroing a border here. The price row's
       items-center centres it against the price. */
  /* -------------------------------------------------- cta */
  /* buyBox.js stamps .dpc-button + .dpc-btn-primary-brand on the rendered CTA,
       but two legacy sheets outrank them here, so the button is finished off in
       this block:
         - everydrop's own `.button` (edv2.common util/global-classes.less) paints
           @button-color-primary-brand-background (#8CD5EA) at the same single-class
           specificity as .dpc-btn-primary-brand, hence the colours below. They are
           the same custom properties the atomic class reads, so the button still
           follows the filter theme.
         - dp.productdetail's pdp-tray.css uses two-class selectors, which beat both
           the atomic rules and any utility class: `.pdp-tray__cta { flex-basis: 67% }`
           above 48rem (the v2 tray put the qty select in the remaining third; the buy
           box hides it) and `.pdp-tray__cta .button { width: auto; padding: 0 }`.
           The padding repeats the brand's medium button token. */
  /* Adopted into the card by buyBox.js (adoptDeliveryMessaging); the component's
       own styling lives in productdetailrefresh/less/delivery-messaging.less. */
  /* -------------------------------------------------- promo */
  /* Radius and ground come straight from the Figma panel: dpc-border-radius-brand-default
       resolves smaller than 10px, and the ground is a ramp step rather than
       dpc-brand-bg-offset's --ui-background-offset, so both are set here and the
       markup drops the atomic classes. min-height rather than height so a longer
       translation grows the panel instead of spilling out of it. */
  /* No `display` here on purpose - setMode toggles this panel and now adds the
       atomic `flex` alongside `dn`, so declaring display would outrank `dn` and the
       panel could never hide. flex-direction / justify-content only take effect once
       the JS has added `flex`, which is exactly when the panel is visible. */
  /* Two even columns rather than flex justify-between, which pinned the list to the
       right edge and left the gap in the middle. Figma splits the panel down the
       centre, so the icon rows start mid-panel and the trailing space sits after
       them. The markup drops flex/justify-between accordingly. */
  /* the rows read as one unit - glyph and copy share the same ramp step */
  /* the foot carries dpc-brand-text-offset, so the colour is set on the element
       rather than by re-pointing --text-offset, which is its own token */
  /* -------------------------------------------------- shared stubs */
  /* The header is an empty <p> until pdp-tray.ts marks the product out of stock,
       and an empty element still contributes its margin - 8px of dead space above
       the promo in the ordinary in-stock case. So the gap rides on the text itself
       and only exists once the tray adds .show. */
  /* The selects stay side by side down to 440px and stack below it, where a
       half-width box is too narrow for the frequency copy to read. Wider than that,
       a long value ends in an ellipsis rather than forcing the stack. */
}
.pdp-tray.edw-buy-box * {
  box-sizing: border-box;
}
.pdp-tray.edw-buy-box .edw-buy-box__section--packs {
  margin-bottom: 12px;
}
.pdp-tray.edw-buy-box .edw-buy-box__label {
  margin: 0 0 10px;
  font-weight: 700;
}
.pdp-tray.edw-buy-box .edw-buy-box__packs,
.pdp-tray.edw-buy-box .edw-buy-box__order-types {
  gap: 12px;
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card,
.pdp-tray.edw-buy-box .edw-buy-box__order-card {
  flex: 1 1 0;
  gap: 4px;
  height: auto;
  min-height: 105px;
  padding: 5px;
  border-width: 2px;
  border-radius: 12px;
  /* filled rather than transparent; the selected state lifts it to ramp-800 */
  background: var(--pdp-color-ramp-900);
  cursor: pointer;
  color: var(--pdp-color-ramp-300);
  font: inherit;
  /* The radio is opacity:0 and stretched under the card, so focus lands on the
           input and never on this label: `&:focus-visible` here matched nothing.
           :has() moves the state onto the card, which is the only part a keyboard
           user can see. :focus-visible, not :focus-within, keeps it off mouse clicks. */
  /* Wrapper is a fixed 26px row so the 21px subscribe glyph and the 26px
           cart glyph still sit on a common centre line across the two cards. */
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card:hover,
.pdp-tray.edw-buy-box .edw-buy-box__order-card:hover {
  border-color: var(--pdp-color-ramp-300);
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card:has(:focus-visible),
.pdp-tray.edw-buy-box .edw-buy-box__order-card:has(:focus-visible) {
  outline: none;
  outline-offset: 0px;
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card .edw-buy-box__order-icon,
.pdp-tray.edw-buy-box .edw-buy-box__order-card .edw-buy-box__order-icon {
  height: 26px;
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card .edw-buy-box__order-icon svg,
.pdp-tray.edw-buy-box .edw-buy-box__order-card .edw-buy-box__order-icon svg {
  flex: none;
}
.pdp-tray.edw-buy-box .edw-buy-box__order-card--subscribe .edw-buy-box__order-icon svg {
  width: 21px;
  height: 21px;
}
.pdp-tray.edw-buy-box .edw-buy-box__order-card--onetime .edw-buy-box__order-icon svg {
  width: 26px;
  height: 26px;
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card--selected,
.pdp-tray.edw-buy-box .edw-buy-box__order-card--selected {
  border-color: var(--pdp-color-ramp-450);
  background: var(--pdp-color-ramp-800);
  color: var(--text-base);
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-price,
.pdp-tray.edw-buy-box .edw-buy-box__order-sub {
  color: var(--pdp-color-ramp-300);
}
.pdp-tray.edw-buy-box .edw-buy-box__order-sub {
  padding: 2px 0;
}
.pdp-tray.edw-buy-box .edw-buy-box__order-card:not(.edw-buy-box__order-card--selected) .edw-buy-box__order-badge {
  background: var(--pdp-color-ramp-800);
  color: var(--pdp-color-ramp-300);
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-icon {
  height: 26px;
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-icon svg {
  flex: none;
  width: 26px;
  height: 26px;
}
.pdp-tray.edw-buy-box .edw-buy-box__order-badge,
.pdp-tray.edw-buy-box .edw-buy-box__price-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pdp-color-ramp-450);
  color: var(--text-base);
}
.pdp-tray.edw-buy-box .edw-buy-box__price-badge {
  background: var(--pdp-color-ramp-100);
  color: var(--pdp-color-ramp-600);
  height: 20px;
  /* overrides the shared badge padding, so it cannot be a utility; display and
           alignment come from flex / items-center / justify-center */
  padding-top: 0;
  padding-bottom: 0;
  gap: 2px;
  font-weight: 700;
}
.pdp-tray.edw-buy-box .edw-buy-box__price-badge-icon {
  font-size: 16px;
  font-weight: 600;
}
.pdp-tray.edw-buy-box .edw-buy-box__subscribe-panel {
  margin-top: 12px;
}
.pdp-tray.edw-buy-box .edw-buy-box__price-card {
  margin-top: 12px;
}
.pdp-tray.edw-buy-box .edw-buy-box__selects {
  gap: 12px;
}
.pdp-tray.edw-buy-box .edw-buy-box__select-wrap {
  flex: 1 1 0;
  height: 64px;
  border-radius: 8px;
  background: var(--pdp-color-ramp-800);
  /* Hover lifts the ground a step, the same affordance the stepper buttons
           use. Both are filled ramp-800 controls, where the pack and order cards
           above are outlined transparent ones - so this follows the stepper rather
           than borrowing the cards' border-colour hover. */
  /* the native arrow is drawn by the OS and cannot be themed, so the
           select is stripped below and the Figma chevron drawn here.
           Aligned with the selected value rather than the whole control: the
           select's 26px top / 8px bottom padding puts the value's centre at 41px
           of 64, and the rotated square's visible V sits in its lower half, so
           the box starts 1px below the control's midpoint. */
}
.pdp-tray.edw-buy-box .edw-buy-box__select-wrap:hover {
  background: var(--pdp-color-ramp-700);
}
.pdp-tray.edw-buy-box .edw-buy-box__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  margin-top: 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.pdp-tray.edw-buy-box .edw-buy-box__select-label {
  top: 10px;
  left: 10px;
  color: var(--pdp-color-ramp-300);
  font-weight: 700;
}
.pdp-tray.edw-buy-box .edw-buy-box__select {
  /* stretched over the whole control so every part of it opens the dropdown;
           top pad clears the overlaid label, right pad clears the chevron (14px
           inset + its ~11px rotated width) with room to spare, and a value too long
           for the box ends in an ellipsis there instead of running under it */
  /* the stretch (absolute top-0 left-0 w-100 h-100) and cursor-point are
           utilities on the markup. border stays here: the shorthand also resets
           border-color, which the bn utility does not. */
  padding: 26px 34px 8px 10px;
  /* overflow-hidden + nowrap on the markup make this ellipsis take effect */
  text-overflow: ellipsis;
  border: 0;
  background: transparent;
  color: #fafcff;
  appearance: none;
  -webkit-appearance: none;
  /* an outline traces the element's own border-radius, and this select is a
           square box stretched over the wrap - so it carries the wrap's 8px purely
           to keep the focus ring from cutting the rounded corners */
  border-radius: 8px;
  /* native dropdown list is drawn by the OS: force a readable pairing */
}
.pdp-tray.edw-buy-box .edw-buy-box__select:focus-visible {
  outline: 2px solid var(--pdp-color-ramp-300);
}
.pdp-tray.edw-buy-box .edw-buy-box__select option {
  color: #15191d;
  background: #ffffff;
}
.pdp-tray.edw-buy-box .edw-buy-box__price {
  gap: 4px;
}
.pdp-tray.edw-buy-box .edw-buy-box__price-line {
  gap: 2px 8px;
}
.pdp-tray.edw-buy-box .edw-buy-box__price-value {
  line-height: 1.1;
}
.pdp-tray.edw-buy-box .edw-buy-box__savings {
  margin-top: 2px;
  color: var(--pdp-color-ramp-100);
  /* the amount only; the percentage keeps the disclaimer weight */
}
.pdp-tray.edw-buy-box .edw-buy-box__savings .edw-buy-box__savings-amount {
  font-weight: 700;
}
.pdp-tray.edw-buy-box .edw-buy-box__savings:empty {
  display: none;
}
.pdp-tray.edw-buy-box .edw-buy-box__savings-strike {
  margin-right: 8px;
  color: var(--pdp-color-ramp-300);
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-toggle {
  gap: 10px;
  min-height: 24px;
  border: 0;
  background: none;
  color: inherit;
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-toggle:hover,
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-toggle:focus-visible {
  color: var(--text-link-highlight);
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-toggle[aria-expanded="true"] .edw-buy-box__breakdown-chevron {
  transform: translateY(2px) rotate(-135deg);
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pdp-color-ramp-600);
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-list {
  gap: 10px;
  margin: 0;
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-list dt,
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-list dd {
  margin: 0;
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-row--discount {
  color: var(--pdp-color-ramp-300);
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-row--today {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--pdp-color-ramp-600);
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-note {
  margin: 18px 0 0;
  color: var(--pdp-color-ramp-300);
  /* Figma keeps See Details in the note's own colour and weight; only the
           underline marks it as a link */
}
.pdp-tray.edw-buy-box .edw-buy-box__breakdown-note .edw-buy-box__details-link {
  color: inherit;
  font-weight: inherit;
}
.pdp-tray.edw-buy-box .edw-buy-box__onetime-note {
  margin-top: 2px;
  color: var(--pdp-color-ramp-300);
}
.pdp-tray.edw-buy-box .edw-buy-box__stepper {
  background: var(--pdp-color-ramp-800);
}
.pdp-tray.edw-buy-box .edw-buy-box__stepper-btn {
  width: 36px;
  height: 32px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  /* one step off the pill's own ramp-800, which the hover used to be */
}
.pdp-tray.edw-buy-box .edw-buy-box__stepper-btn:hover {
  background: var(--pdp-color-ramp-700);
}
.pdp-tray.edw-buy-box .edw-buy-box__stepper-btn:focus-visible {
  outline: 2px solid var(--pdp-color-ramp-300);
  outline-offset: -2px;
}
.pdp-tray.edw-buy-box .edw-buy-box__qty-value {
  min-width: 28px;
}
.pdp-tray.edw-buy-box .pdp-tray__prd-actions {
  margin-top: 12px;
}
.pdp-tray.edw-buy-box .pdp-tray__cta {
  flex-basis: 100%;
  /* loader.less strokes the spinner #000000, which was legible on the light
           legacy button but not on the brand one. */
}
.pdp-tray.edw-buy-box .pdp-tray__cta .button {
  width: 100%;
  padding: 12px 15px;
  background: var(--primary-brand-background);
  border-color: var(--primary-brand-border);
  color: var(--primary-brand-text);
}
.pdp-tray.edw-buy-box .pdp-tray__cta .button:hover,
.pdp-tray.edw-buy-box .pdp-tray__cta .button:active {
  background: var(--primary-brand-background-highlight);
  border-color: var(--primary-brand-border-highlight);
  color: var(--primary-brand-text-highlight);
}
.pdp-tray.edw-buy-box .pdp-tray__cta .digital-platform-loading-button--loader {
  border-color: var(--primary-brand-text);
  border-left-color: transparent;
}
.pdp-tray.edw-buy-box .delivery-messaging {
  margin-top: 12px;
}
.pdp-tray.edw-buy-box .edw-buy-box__promo {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  min-height: 115px;
  background: var(--pdp-color-ramp-800);
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-save {
  color: var(--pdp-color-ramp-400);
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-head {
  gap: 2px;
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 8px;
  color: var(--pdp-color-ramp-400);
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-list li {
  gap: 8px;
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-list .edw-buy-box__promo-icon {
  height: 16px;
  color: var(--pdp-color-ramp-400);
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-list .edw-buy-box__promo-icon svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.pdp-tray.edw-buy-box .edw-buy-box__promo-foot {
  gap: 12px;
  color: #fafcff;
}
.pdp-tray.edw-buy-box .out-of-stock-v2__header {
  margin: 0;
}
.pdp-tray.edw-buy-box .out-of-stock-v2__header .pdp-tray__out-of-stock-txt {
  display: none;
}
.pdp-tray.edw-buy-box .out-of-stock-v2__header .pdp-tray__out-of-stock-txt.show {
  display: block;
  margin-top: 8px;
}
@media (max-width: 599px) {
  .pdp-tray.edw-buy-box {
    max-width: none;
  }
}
@media (max-width: 439px) {
  .pdp-tray.edw-buy-box {
    /* flex-basis governs the main axis, so once the row becomes a column the
           `flex: 1 1 0` above resolves as a zero height and beats the declared 64px:
           the control collapses and its label lands on top of the price row. Sizing
           from content here puts the height back. */
  }
  .pdp-tray.edw-buy-box .edw-buy-box__selects {
    flex-direction: column;
  }
  .pdp-tray.edw-buy-box .edw-buy-box__select-wrap {
    flex: none;
  }
}
/*
 * Subscription details modal.
 * .dpc-modal / .dpc-modal-content / .dpc-modal-close and the active-state toggling
 * come from atomic; the overlay geometry is supplied here from the --modal* custom
 * properties that atomic's _modal.scss defines (an authored modal gets these from
 * its dialog instead).
 *
 * Per Figma this is a full-screen takeover, not a panel on a scrim: the overlay
 * paints the brand background (dpc-brand-bg-default) instead of --modalBackground
 * and the content is a transparent, top-aligned column centred on it. The close
 * button is the first item in that column, so it centres with everything else
 * rather than pinning to a corner.
 */
.edw-buy-box-modal.dpc-modal {
  top: 0;
  left: 0;
  padding: var(--modalPaddingTop) var(--modalPaddingRight) var(--modalPaddingBottom) var(--modalPaddingLeft);
  /* Not atomic's --modalZindex (1000): the takeover has to clear the authored
       sticky utility nav, which runs at --mobileZIndex: 2000000003. */
  z-index: 2000000004;
  /* Corner glows. Out-of-flow boxes never add to their parent's layout height,
       but they do add to its scrollable overflow - and each of these is a full
       viewport offset half a viewport outside the box, so on a scrolling takeover
       they added about a screen of dead scroll. Fixed rather than absolute keeps
       them out of that calculation entirely (fixed boxes are excluded from any
       ancestor's scrollable area) and lands them in the same place, since the
       overlay is itself pinned to the viewport. */
}
.edw-buy-box-modal.dpc-modal:after,
.edw-buy-box-modal.dpc-modal:before {
  content: "";
  position: fixed;
  transform: rotate(59deg);
  width: 100vw;
  height: 100vh;
  border-radius: 110vw;
  opacity: 0.2;
  background: var(--pdp-color-ramp-400);
  filter: blur(125px);
  z-index: -1;
  pointer-events: none;
}
.edw-buy-box-modal.dpc-modal:before {
  top: -50%;
  right: -50%;
}
.edw-buy-box-modal.dpc-modal:after {
  bottom: -50%;
  left: -50%;
}
.edw-buy-box-modal__content {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 32px 40px;
  gap: 20px;
  /* Colour, radius, padding and type come from the atomic
       .dpc-button + .dpc-btn-primary-brand pair in the HTL; only the gap
       between the close glyph and its label belongs to this modal. */
  /* 20px column gap + this margin = the ~56px Figma leaves under Close. */
}
.edw-buy-box-modal__content .dpc-modal-close {
  gap: 6px;
}
.edw-buy-box-modal__content .edw-buy-box-modal__icon {
  margin-top: 36px;
}
.edw-buy-box-modal__content .edw-buy-box-modal__icon svg {
  flex: none;
  width: 68px;
  height: 68px;
}
.edw-buy-box-modal__content .edw-buy-box-modal__title {
  margin: 0;
}
/* Square, ramp-800 ground, ramp-500 rule. The ramp steps are named directly
   rather than through --ui-background-offset / --ui-border-color: those two
   resolve differently under .dpc-theme-01 (ramp-300, and #f5f5f5 for controls
   in the buy box), which is not what this table wants in any theme. Overriding
   --ui-border-color here also feeds the divider on the --refill cell. */
.edw-buy-box-modal__savings {
  --ui-border-color: var(--pdp-color-ramp-500);
  background: var(--pdp-color-ramp-800);
}
.edw-buy-box-modal__savings-cell {
  flex: 1 1 0;
  gap: 4px;
  padding: 14px 12px;
  /* divider only; the table itself is square so nothing needs clipping */
}
.edw-buy-box-modal__savings-cell--refill {
  border-width: 0 0 0 1px;
}
/* Sits between the price card and the CTA while Subscribe is selected. The link to
   the terms page is inside the dictionary string, so it is styled here rather than on
   the markup. */
/* Scoped to the tray so the size below actually lands: dpc-disclaimer is a single
   class, and so was this rule, so which of the two won came down to clientlib order
   rather than anything in this file. Colour and margin were unaffected either way -
   the utility sets neither - but font-size is a straight collision. */
.pdp-tray.edw-buy-box .edw-buy-box__terms {
  margin-top: 12px;
  /* A step under dpc-disclaimer's 0.75rem. Its line-height is a percentage (133%),
       so it follows the smaller size and nothing else needs adjusting. */
  font-size: 10px;
  /* Per Figma the whole paragraph is ramp-300, so the colour is set here rather than
       with dpc-brand-text-offset on the markup: that utility resolves to --text-offset,
       which is white on this ground. */
  color: var(--pdp-color-ramp-300);
  /* the embedded terms link is the same colour as the sentence, underlined */
}
.pdp-tray.edw-buy-box .edw-buy-box__terms a {
  color: inherit;
  text-decoration: underline;
}
.pdp-tray.edw-buy-box .edw-buy-box__terms a:hover,
.pdp-tray.edw-buy-box .edw-buy-box__terms a:focus {
  color: var(--text-link-highlight);
}
.edw-buy-box-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 16px;
  /* The row icons are ramp-400; only the large header glyph above stays on
       --text-emphasis (ramp-300), so these cannot use dpc-brand-text-emphasis. */
}
.edw-buy-box-modal__list li {
  gap: 14px;
}
.edw-buy-box-modal__list .edw-buy-box-modal__list-icon {
  width: 35px;
  height: 35px;
  color: var(--pdp-color-ramp-400);
}
.edw-buy-box-modal__list .edw-buy-box-modal__list-icon svg {
  flex: none;
  width: 35px;
  height: 35px;
}
@media (max-width: 599px) {
  .edw-buy-box-modal__content {
    padding: 0 20px 32px;
  }
}
/*
 * Switching to another pack refetches the product, so the price and CTA are briefly
 * stale. This dims the parts that are about to change and blocks further clicks, which
 * is the equivalent of the legacy tray's setSpinner() during a variant reload.
 */
.pdp-tray.edw-buy-box--switching .edw-buy-box__price-row,
.pdp-tray.edw-buy-box--switching .edw-buy-box__savings,
.pdp-tray.edw-buy-box--switching .edw-buy-box__breakdown,
.pdp-tray.edw-buy-box--switching .pdp-tray__prd-actions {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.pdp-tray.edw-buy-box--switching .edw-buy-box__packs,
.pdp-tray.edw-buy-box--switching .edw-buy-box__order-types,
.pdp-tray.edw-buy-box--switching .pdp-tray__cta {
  pointer-events: none;
}
@keyframes edw-buy-box-skeleton {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* hold the skeleton at its resting value rather than pulsing */
  .pdp-tray.edw-buy-box .edw-buy-box__pack-card--placeholder::before,
  .pdp-tray.edw-buy-box .edw-buy-box__pack-card--placeholder::after,
  .pdp-tray.edw-buy-box .edw-buy-box__price:empty::before,
  .pdp-tray.edw-buy-box .edw-buy-box__savings:empty::before {
    animation: none;
    opacity: 0.35;
  }
  .pdp-tray.edw-buy-box--switching .edw-buy-box__price-row,
  .pdp-tray.edw-buy-box--switching .edw-buy-box__savings,
  .pdp-tray.edw-buy-box--switching .edw-buy-box__breakdown,
  .pdp-tray.edw-buy-box--switching .pdp-tray__prd-actions {
    transition: none;
  }
}
/*
 * The details link is disclaimer type, which leaves it 16px tall against the 24px
 * minimum target size (WCAG 2.5.8). Growing the box to 24 keeps the type where the
 * design puts it while giving the pointer something to hit.
 *
 * Guarded with :not(.dn) because this selector carries three classes and would
 * otherwise outrank the single-class .dn utility setMode toggles, which is what left
 * the price-row link on screen in one-time mode next to the promo box's own copy.
 */
.pdp-tray.edw-buy-box .edw-buy-box__details-link:not(.dn) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/*
 * First-paint skeleton (US9-955).
 *
 * The tray's shape is known from singlesource before the combinedAvailability call
 * returns, so the boxes JS fills are given their final size up front instead of
 * appearing and pushing the CTA down. Measured against the real controls: a pack card
 * is 105px, the price row 40px, and the CTA 42px plus its margin.
 *
 * Each rule carries the full prefix instead of re-opening .pdp-tray.edw-buy-box,
 * which would compile that selector a second time; the details-link rule above is
 * written the same way. The reservations are scoped to :empty for the same reason -
 * they only have to hold the box open until renderPrice fills it, and the filled
 * content already exceeds them.
 */
.pdp-tray.edw-buy-box .edw-buy-box__pack-card--placeholder {
  /* One per variant, replaced wholesale by the real cards. Sized by the shared
       .edw-buy-box__pack-card rule above, so the two can never drift apart.

       Drawn as a skeleton rather than an empty outline: a bare dashed box reads as
       broken content, where blocks standing in for the icon and the label read as
       content on its way. The two pseudo-elements sit where buildPackCard puts the
       icon and the pack name, so nothing moves when the real card replaces this. */
  min-height: 105px;
  justify-content: center;
  gap: 10px;
  border-color: var(--pdp-color-ramp-700);
  pointer-events: none;
  /* the 26px pack icon */
  /* the pack name, offset so the two blocks do not pulse in lockstep */
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card--placeholder::before,
.pdp-tray.edw-buy-box .edw-buy-box__pack-card--placeholder::after {
  content: "";
  display: block;
  border-radius: 4px;
  background: var(--pdp-color-ramp-700);
  animation: edw-buy-box-skeleton 1.4s ease-in-out infinite;
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card--placeholder::before {
  width: 26px;
  height: 26px;
}
.pdp-tray.edw-buy-box .edw-buy-box__pack-card--placeholder::after {
  width: 64px;
  height: 14px;
  animation-delay: 0.2s;
}
/* The price is written by renderPrice. :empty means this clears itself the moment
   it runs, with no class for the JS to remember to remove.

   The bar is absolutely positioned so it contributes nothing to layout. In flow, an
   empty block sized nothing like the real price text moved the whole row when the
   content arrived (layout shift measured 0.0074 -> 0.0455 when the row was baseline
   aligned). Out of flow, the skeleton is paint-only and the row never moves.

   position: relative rides along with the reservation rather than sitting in its own
   .edw-buy-box__price rule, which would be a second one of those: it exists only to
   anchor the ::before below, and that renders only while this is empty. */
.pdp-tray.edw-buy-box .edw-buy-box__price:empty {
  position: relative;
  min-height: 35px;
}
.pdp-tray.edw-buy-box .edw-buy-box__price:empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 34px;
  border-radius: 4px;
  background: var(--pdp-color-ramp-700);
  animation: edw-buy-box-skeleton 1.4s ease-in-out infinite;
}
/* The savings line is deliberately absent from the skeleton above. It collapses when
   empty (`&:empty { display: none }` in the savings block), so a reserve or a bar on it
   can never render, and the delivery pills below it measured worse when reserved
   (buy box shift 0.0074 -> 0.0101) as well as leaving a gap on one-time purchases. */
/* Filled by renderPrice once the payload lands. Never empty - it holds the price,
   the details link and the stepper - so this one is not :empty scoped. */
.pdp-tray.edw-buy-box .edw-buy-box__price-row {
  min-height: 40px;
}
/* pdp-tray.ts injects the button, so nothing holds this open until it does. */
.pdp-tray.edw-buy-box .pdp-tray__prd-actions:empty {
  min-height: 58px;
}
/*
 * Price card, subscribe mode (US9-1014).
 *
 * Written with the full prefix and kept at the end of the file because these
 * selectors outrank the switching-state and skeleton rules above that end in the
 * same element; placed earlier they would trip no-descending-specificity.
 *
 * The card takes the same ramp-800 ground and 8px radius as the selects directly
 * above it, so it reads as part of that control group. The left inset matches the
 * select labels (12px); the right one matches the select chevrons' right: 14px, so
 * the See Breakdown chevron sits in the same column as theirs.
 */
.pdp-tray.edw-buy-box .edw-buy-box__price-card--subscribe {
  padding: 10px 14px 14px 12px;
  border-radius: 8px;
  background: var(--pdp-color-ramp-800);
}