/**
 * DeliveryTimePro Frontend Styles
 * Using BEM methodology for CSS
 */

/* Phosphor Icons load as a bundled dependency (assets/vendor/phosphor) —
   enqueued in class-dtp-public.php; no external CDN per wp.org guidelines. */

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Overlays / drawers — above Weglot (~10001), Tax Switch, and Bricks off-canvas defaults (~1000). */
:root {
  --dtp-overlay-z-index: 100050;
  --dtp-address-drawer-width: min(30rem, 100vw);
  --dtp-text-m: 1rem;
  /* Theme radius only — never invent roundness. Square themes (e.g. TT5 Add to cart) stay 0. */
  --dtp-theme-radius: var(--radius, var(--btn-radius, 0));
}

/* Calculator component */
.dtp-calculator {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  color: var(--dtp-text-color, inherit);
  --dtp-text-s: var(--text-s, 0.875rem);
  /* Fulfilment results (cards, controls, strips): prefer ACSS extra-small, then ACSS small, then rem fallback. */
  --dtp-fulfilment-text-size: var(--text-xs, var(--text-s, 0.8125rem));
  --dtp-card-padding: var(--space-xs, 1.25rem);
  --dtp-surface-bg: var(--dtp-method-bg-color, #ffffff);
  --dtp-surface-border: var(--dtp-method-border-color, #e8e8e6);
  --dtp-on-surface: var(--dtp-text-color, inherit);
  --dtp-on-surface-muted: var(--dtp-muted-text-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-link-color: var(--dtp-primary-color, currentColor);
  --dtp-input-bg-color: var(--bg-ultra-light, var(--bg-light, var(--dtp-surface-bg, #ffffff)));
  --dtp-input-text-color: var(--text-dark, var(--dtp-on-surface, currentColor));
  --dtp-input-placeholder-color: var(--text-muted, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
  --dtp-input-border-color: var(--border-color, var(--dtp-border-color, #e8e8e6));
  --dtp-skeleton-bg: #e6e6e4;
  --dtp-skeleton-shimmer: rgba(255, 255, 255, 0.6);
  --dtp-skeleton-card-bg: #fafaf9;
  --dtp-skeleton-strip-bg: #e8e8e6;
  --dtp-skeleton-strip-height: 3.75rem;
  --dtp-method-selected-border-color: var(--dtp-method-name-color, var(--dtp-on-surface, #101010));
  --dtp-method-selected-ring-color: color-mix(in srgb, var(--dtp-method-selected-border-color, #101010) 12%, transparent);
  --dtp-method-selected-bg: color-mix(in srgb, var(--dtp-method-selected-border-color, #101010) 4%, #ffffff);
  --dtp-method-card-surface-bg: var(
    --bg-ultra-light,
    var(
      --dtp-method-selected-surface-color,
      var(--dtp-method-selected-bg, color-mix(in srgb, var(--dtp-method-selected-border-color, #101010) 4%, #ffffff))
    )
  );
  --dtp-method-selected-pill-bg: color-mix(in srgb, var(--dtp-link-color, #101010) 9%, #ffffff);
  /* Soft elevation — not a hard 2px ring (reads as a border). */
  --dtp-method-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
  --dtp-method-selected-shadow: 0 2px 4px rgba(15, 23, 42, 0.07), 0 8px 20px rgba(15, 23, 42, 0.08);
  --dtp-calculator-initial-gap: var(
    --acss-space-m,
    var(--acss-space-3, var(--space-m, 1rem))
  );
  /* Tight by default (shortcode / builders); product placement opts in below. */
  --dtp-fulfilment-bottom-gap: 0;
  container-type: inline-size;
  container-name: dtp-calculator;
}

.dtp-calculator[data-dtp-layout-context="product"] {
  --dtp-fulfilment-bottom-gap: var(
    --acss-space-m,
    var(--acss-space-3, var(--space-m, 1rem))
  );
}

.dtp-calculator__results {
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
}

/* Tax Switch (and similar): soft busy state while fulfilment HTML re-fetches — avoids full skeleton flash */
.dtp-calculator__results.dtp-is-tax-display-refresh,
[data-dtp-hero-results].dtp-is-tax-display-refresh {
  opacity: 0.58;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .dtp-calculator__results.dtp-is-tax-display-refresh,
  [data-dtp-hero-results].dtp-is-tax-display-refresh {
    transition: none;
  }
}

.dtp-calculator__results .dtp-pickup-info,
.dtp-calculator__results .dtp-pickup-info__name,
.dtp-calculator__results .dtp-pickup-info__address {
  font-size: inherit;
}

.dtp-calculator[data-theme="light"],
.dtp-calculator--theme-light,
.dtp-hero-postcode[data-theme="light"],
.dtp-hero-postcode--theme-light {
  --dtp-text-color: var(--text-dark, #101010);
  --dtp-muted-text-color: var(--text-muted, #4a4a47);
  --dtp-method-bg-color: var(--bg-light, #ffffff);
  --dtp-method-selected-border-color: var(
    --acss-color-heading,
    var(--text-dark, var(--dtp-method-name-color, #101010))
  );
  --dtp-method-selected-ring-color: color-mix(
    in srgb,
    var(--dtp-method-selected-border-color, #101010) 12%,
    transparent
  );
  --dtp-method-selected-bg: var(
    --bg-ultra-light,
    var(
      --dtp-method-selected-surface-color,
      color-mix(in srgb, var(--dtp-method-selected-border-color, #101010) 4%, #ffffff)
    )
  );
  --dtp-method-card-surface-bg: var(--dtp-method-selected-bg);
  --dtp-surface-bg: var(--bg-light, #ffffff);
  --dtp-method-border-color: var(--dtp-color-border-subtle, #e8e8e6);
  --dtp-tabs-group-bg: var(--bg-ultra-light, #f3f4f6);
  --dtp-tabs-group-text: var(--text-dark, #101010);
  --dtp-tabs-active-bg-color: var(--text-dark, #101010);
  --dtp-tabs-active-text-color: var(--text-light, #fafaf9);
  --dtp-tabs-focus-ring: rgba(15, 23, 42, 0.35);
  --dtp-tabs-active-focus-ring: rgba(248, 250, 252, 0.55);
}

.dtp-calculator[data-theme="dark"],
.dtp-calculator--theme-dark,
.dtp-hero-postcode[data-theme="dark"],
.dtp-hero-postcode--theme-dark {
  --dtp-text-color: var(--text-light, #fafaf9);
  --dtp-muted-text-color: color-mix(in srgb, var(--text-light, #fafaf9) 70%, transparent);
  --dtp-method-bg-color: var(--dtp-card-dark-bg, var(--bg-dark, #111111));
  --dtp-method-selected-border-color: color-mix(
    in srgb,
    var(--text-light, #fafaf9) 34%,
    var(--dtp-method-bg-color, var(--dtp-card-dark-bg, #111111)) 66%
  );
  --dtp-method-selected-ring-color: color-mix(
    in srgb,
    var(--dtp-method-selected-border-color, rgba(248, 250, 252, 0.35)) 14%,
    transparent
  );
  --dtp-method-selected-bg: var(
    --bg-base,
    var(
      --dtp-method-selected-surface-color,
      color-mix(in srgb, var(--dtp-method-selected-border-color, rgba(248, 250, 252, 0.35)) 12%, transparent)
    )
  );
  --dtp-method-card-surface-bg: var(--dtp-method-selected-bg);
  --dtp-method-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.22);
  --dtp-method-selected-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 10px 24px rgba(0, 0, 0, 0.28);
  --dtp-surface-bg: var(--dtp-card-dark-bg, var(--bg-dark, #111111));
  --dtp-method-border-color: color-mix(in srgb, var(--text-light, #fafaf9) 24%, transparent);
  --dtp-link-color: var(--link-light, var(--text-light, #fafaf9));
  --dtp-tabs-group-bg: var(--bg-base, var(--bg-dark, #1f2937));
  --dtp-tabs-group-text: var(--text-light, #fafaf9);
  --dtp-tabs-active-bg-color: var(--text-light, #fafaf9);
  --dtp-tabs-active-text-color: var(--text-dark, #101010);
  --dtp-tabs-focus-ring: rgba(248, 250, 252, 0.45);
  --dtp-tabs-active-focus-ring: rgba(15, 23, 42, 0.45);
  --dtp-skeleton-bg: color-mix(in srgb, var(--text-light, #fafaf9) 14%, transparent);
  --dtp-skeleton-shimmer: color-mix(in srgb, var(--text-light, #fafaf9) 24%, transparent);
  --dtp-skeleton-card-bg: color-mix(in srgb, var(--text-light, #fafaf9) 8%, transparent);
  --dtp-skeleton-strip-bg: color-mix(in srgb, var(--text-light, #fafaf9) 16%, transparent);
  --dtp-skeleton-strip-height: 3.75rem;
}

.dtp-hero-postcode[data-theme="dark"] .dtp-hero-postcode__results-host,
.dtp-hero-postcode--theme-dark .dtp-hero-postcode__results-host {
  --dtp-hero-results-heading-color: var(--text-light, #fafaf9);
  --dtp-hero-results-text-color: var(--text-light, #fafaf9);
  --dtp-hero-results-muted-color: color-mix(in srgb, var(--text-light, #fafaf9) 70%, transparent);
  --dtp-hero-results-link-color: var(--link-light, var(--text-light, #fafaf9));
  --dtp-hero-results-link-hover-color: var(--link-light-hover, var(--text-light, #fafaf9));
  /* Tab chrome must not inherit parent currentColor / brand hues */
  --dtp-tabs-border-color: var(--dtp-hero-results-border-color, rgba(248, 250, 252, 0.22));
  --dtp-tabs-active-bg-color: var(--text-light, #fafaf9);
  --dtp-tabs-active-text-color: var(--text-dark, #101010);
  --dtp-tabs-focus-ring: rgba(248, 250, 252, 0.45);
  --dtp-tabs-active-focus-ring: rgba(15, 23, 42, 0.45);
}

.dtp-hero-postcode[data-theme="light"] .dtp-hero-postcode__results-host,
.dtp-hero-postcode--theme-light .dtp-hero-postcode__results-host {
  --dtp-hero-results-heading-color: var(--text-dark, #101010);
  --dtp-hero-results-text-color: var(--text-dark, #101010);
  --dtp-hero-results-muted-color: var(--text-muted, #4a4a47);
  --dtp-hero-results-link-color: var(--link-color, var(--primary, currentColor));
  --dtp-hero-results-link-hover-color: var(--link-color-hover, var(--primary-hover, var(--link-color, currentColor)));
  --dtp-tabs-border-color: var(--dtp-hero-results-border-color, rgba(15, 23, 42, 0.14));
  --dtp-tabs-active-bg-color: var(--text-dark, #101010);
  --dtp-tabs-active-text-color: var(--text-light, #fafaf9);
  --dtp-tabs-focus-ring: rgba(15, 23, 42, 0.35);
  --dtp-tabs-active-focus-ring: rgba(248, 250, 252, 0.55);
}

/* Dark hero/calculator: light input surface for contrast on dark sections (incl. theme="auto" on dark Bricks heroes). */
.dtp-calculator[data-theme="dark"],
.dtp-calculator--theme-dark,
.dtp-calculator[data-theme="auto"],
.dtp-hero-postcode[data-theme="dark"],
.dtp-hero-postcode--theme-dark,
.dtp-hero-postcode[data-theme="auto"] {
  --dtp-input-bg-color: var(--bg-ultra-light, var(--bg-light, #ffffff));
  --dtp-input-text-color: var(--text-dark, #101010);
  --dtp-input-placeholder-color: var(--text-muted, #6e6e6b);
  --dtp-input-border-color: var(--border-color, var(--dtp-border-color, #e8e8e6));
  --dtp-postcode-hint-label-color: var(--text-muted, #6e6e6b);
  --dtp-postcode-hint-example-color: color-mix(in srgb, var(--text-muted, #6e6e6b) 62%, #fff);
}

/* Bricks Builder editor mode compatibility */
body.bricks-is-frontend .dtp-calculator,
body[class*="bricks"] .dtp-calculator {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

body.bricks-is-frontend .dtp-calculator.dtp-calculator--has-results:not([data-mode="form_only"]),
body[class*="bricks"] .dtp-calculator.dtp-calculator--has-results:not([data-mode="form_only"]) {
  gap: 0 !important;
}

/* Hide results container when aria-hidden is true (initial state and after clear) */
.dtp-calculator__results[aria-hidden="true"] {
  display: none;
}

/* Calculator header — title/lede only; hidden once the full calculator has fulfilment results */
.dtp-calculator__header {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
}

/* Below-threshold free-shipping strip.
   Previously a solid #101010 block, which duplicated the selected tab's black — two identical
   heavy blocks in one panel, only one of them clickable. Tinted instead so the strip sits in the
   same family as the success (green) and countdown (peach) rows, leaving the tab as the only
   solid element. Derived from currentColor so it adapts to light and dark surfaces.
   Zero-specificity :where() means any theme or user override still wins.
   Set these two tokens back to #101010 / #fafaf9 (or add the --solid class) for the old block. */
:where(.dtp-calculator, .dtp-hero-postcode__notice, .dtp-free-shipping-widget) {
  --dtp-free-shipping-strip-bg: color-mix(in srgb, currentColor 6%, transparent);
  --dtp-free-shipping-strip-text: currentColor;
}

/* Opt back in to the original solid black strip. */
.dtp-free-shipping-progress--solid,
:where(.dtp-calculator, .dtp-hero-postcode__notice) .dtp-free-shipping-progress--solid {
  --dtp-free-shipping-strip-bg: #101010;
  --dtp-free-shipping-strip-text: #fafaf9;
}

/* Skeleton reservation heights live here (single source of truth) rather than as
   px constants duplicated in PHP and JS. Markup only sets modifier classes; tune sizes here.
   Values are measured against the live cards — see docs/ui/fulfilment-card-skeleton.md. */
.dtp-loading-skeleton {
  /* Re-measured 2026-09-01 against the live delivery card at 603px wide: band, availability
     panel with its earliest line, cutoff row, method row. This is the number that reserves —
     the zone rows inside the card are only visual approximations.
     251px with the description inline; the --no-delivery-desc variant below is the same card
     without that row, which is what every state except `shown` renders.
     Was 274px, when the hours link was a third row in the availability panel. It sits on the
     method row now, where it costs nothing: the row was already 17.5px tall. */
  --dtp-skeleton-delivery-min: 251px;
  /*
   * Zone heights, measured off the live card so the rows land where the content will.
   * The total is reserved by the min-heights above; these place the shapes inside it.
   */
  /* 72.8px: the headline date and one line of secondary context. Was 6rem/96px, with the
     hours link under them. */
  --dtp-skeleton-avail-height: 4.55rem;
  --dtp-skeleton-urgency-height: 2.9375rem;
  /* Measured 2026-09-01: 304px (band, address + details body, availability panel with its
     cutoff row). Was 236px, then 316px before the stray margin came off the address cell —
     re-measured after that, because the two move together. See the note in
     docs/ui/fulfilment-card-skeleton.md: the two pickup states could not be told apart on
     the test store, because no collection point there surfaces a description, so both
     reserve the same. */
  --dtp-skeleton-pickup-min: 304px;
}

.dtp-loading-skeleton--no-delivery-desc {
  /* Measured 2026-09-01: 225.4px. Was 248.6px with the hours link in the panel, and 173px
     before that, from before the card grew its earliest-delivery line at all. */
  --dtp-skeleton-delivery-min: 225px;
}

.dtp-loading-skeleton--no-pickup-desc {
  /* Same 304px: the card measured on the test store had no description rendering, so this
     is the no-description height. If a store is confirmed to show collection-point
     descriptions inline, the base above wants re-measuring — on delivery one line of
     description costs 25.5px. */
  --dtp-skeleton-pickup-min: 304px;
}

/* Postcodes/ZIPs are case-insensitive but conventionally uppercase, and the value is
   normalised server-side anyway — so display typing in uppercase to match what is stored.
   Display-only: the submitted value is untouched. Placeholders keep their own casing. */
.dtp-calculator__input,
.dtp-postcode-field input[type="text"] {
  text-transform: uppercase;
}

.dtp-calculator__input::placeholder,
.dtp-postcode-field input[type="text"]::placeholder {
  text-transform: none;
}

/* Advisory under the pickup list: the chosen store keeps its card, and the nudge toward a
   closer branch sits outside it as plain text so two store names never share a row. */
.dtp-pickup-nearest-note {
  margin: 0.5rem 0 0;
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  color: var(--dtp-muted-text-color, #6e6e6b);
}

.dtp-pickup-nearest-note .dtp-pickup-use-nearest {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Current store reads as status, matching the delivery modal's "Selected" exactly — same size
   and weight, so it does not shout next to the store name. */
.dtp-pickup-modal__item-select.is-selected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.125rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.dtp-pickup-modal__item--selected {
  background: color-mix(in srgb, currentColor 4%, transparent);
}

/* Own visually-hidden utility — the theme's screen-reader-text may not exist. */
.dtp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Compact-trigger summary skeleton: shown only when the script is about to copy the live
   times up from the server-rendered results, so the line resolves once instead of visibly
   rewriting itself. Hydration replaces the summary's contents, removing this node. */
/* Two-line summary (delivery + pickup): stack the bars like the live lines, second one
   shorter so it reads as text rather than a block. */
.dtp-product-fulfilment-trigger__summary--multi .dtp-product-fulfilment-trigger__summary-skeleton {
  display: block;
  width: min(16rem, 72%);
}

.dtp-product-fulfilment-trigger__summary--multi .dtp-product-fulfilment-trigger__summary-skeleton
  + .dtp-product-fulfilment-trigger__summary-skeleton {
  width: min(12rem, 56%);
}

.dtp-product-fulfilment-trigger__summary-skeleton {
  display: inline-block;
  width: min(14rem, 60%);
  height: 0.85em;
  vertical-align: middle;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--dtp-skeleton-base, rgba(17, 17, 17, 0.08)) 25%,
    var(--dtp-skeleton-sheen, rgba(17, 17, 17, 0.14)) 37%,
    var(--dtp-skeleton-base, rgba(17, 17, 17, 0.08)) 63%
  );
  background-size: 400% 100%;
  animation: dtp-skeleton-sweep var(--dtp-skeleton-sweep-duration, 1.2s) ease-in-out infinite;
}

@keyframes dtp-skeleton-sweep {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .dtp-product-fulfilment-trigger__summary-skeleton {
    animation: none;
  }
}

/* Vertical rhythm inside the calculator surface: lede -> fields, and fields -> results.
   The surface is a plain block, so spacing must come from the blocks themselves —
   theme-agnostic (does not rely on --content-gap existing). */
.dtp-calculator__header {
  margin-bottom: var(--dtp-surface-stack-gap, 0.75rem);
}
/*
 * The gap belongs between the form and the results, not above the module.
 *
 * It separates two of the calculator's own parts, which is the stylesheet's job — but with
 * the form hidden, because the shopper's postcode is already known, the results become the
 * first thing in the box and the same rule turns into leading outer margin. Whoever placed
 * the element owns the space around it, and a margin set in here is invisible in the
 * builder, so it reads as the theme misbehaving rather than as the plugin.
 *
 * `:not(:first-child)` ties it to what it is actually for: something above to be separated
 * from. Naming it `--dtp-surface-stack-gap` never made it acceptable.
 */
/*
 * The gap hangs off the form, not the results.
 *
 * It separates two of the calculator's own parts, which is the stylesheet's job. But with a
 * postcode already known the form is hidden and the results lead the box, and a top margin
 * there becomes leading space on the module — visible on the page, invisible in the
 * builder, so it reads as the theme misbehaving.
 *
 * :not(:first-child) did not fix that: a hidden form is still a child, so the results were
 * never first and the rule always matched. Hung off the form instead, a display:none form
 * contributes no margin at all, so the gap simply is not there — no selector has to reason
 * about what is visible.
 */
.dtp-calculator:not(.dtp-calculator--has-results) .dtp-calculator__form {
  margin-bottom: var(--dtp-surface-stack-gap, 0.75rem);
}


/* Full calculator: guest Clear is not shown inline (change-address modal only). */
.dtp-calculator:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset[data-action="clear"] {
  display: none !important;
}

/* Full calculator with results: hide country + postcode + CHECK (edit via change-address drawer/modal). Logged-in Reset remains when enabled. */
.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__country,
.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__button,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__country,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__button {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * The same hide, before the scripts run
 *
 * `--has-results` lands on the element, and nothing can put it there until the page
 * has been parsed — by which point the form has been painted and the card replacing
 * it reads as a flicker. That state used to be baked into the markup by the server
 * reading the visitor's cookie, which made one page two and is why a page cache had
 * to skip these pages entirely.
 *
 * So the head sets a class on <html> from the same cookie instead, and this reproduces
 * the one thing that matters at first paint: the form does not appear for someone who
 * has already used it. The other forty rules on `--has-results` are the settled state
 * and arrive with the script, which is soon enough — they are not what flickers.
 * ------------------------------------------------------------------------ */
html.arwoo-has-postcode .dtp-calculator:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__country,
html.arwoo-has-postcode .dtp-calculator:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__input,
html.arwoo-has-postcode .dtp-calculator:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
html.arwoo-has-postcode .dtp-calculator:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__button {
  display: none !important;
}

body.bricks-is-frontend .dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__country,
body[class*="bricks"] .dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__country,
body.bricks-is-frontend .dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__country,
body[class*="bricks"] .dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__country,
body.bricks-is-frontend .dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
body[class*="bricks"] .dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
body.bricks-is-frontend .dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
body[class*="bricks"] .dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
body.bricks-is-frontend .dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__button,
body[class*="bricks"] .dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__button,
body.bricks-is-frontend .dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__button,
body[class*="bricks"] .dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__button {
  display: none !important;
}

.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row {
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
}

body.bricks-is-frontend .dtp-calculator.dtp-calculator--loading:not([data-mode="form_only"]),
body[class*="bricks"] .dtp-calculator.dtp-calculator--loading:not([data-mode="form_only"]),
body.bricks-is-frontend .dtp-calculator.dtp-calculator--has-results:not([data-mode="form_only"]),
body[class*="bricks"] .dtp-calculator.dtp-calculator--has-results:not([data-mode="form_only"]) {
  gap: 0 !important;
}

.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__header,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__header {
  display: none;
}

/* No extra column gap between hidden field row and results (theme/builder flex gap included). */
.dtp-calculator--loading:not([data-mode="form_only"]),
.dtp-calculator--has-results:not([data-mode="form_only"]) {
  gap: 0;
}

.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form {
  gap: 0;
}

.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__results .dtp-loading-skeleton,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__results .dtp-loading-skeleton {
  margin-top: 0;
}

.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__results .dtp-tabs,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__results .dtp-tabs {
  margin-top: 0;
}

/* Reset / Clear reads as a text action once results are shown (not a second primary button). */
.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--dtp-link-color, var(--dtp-primary-color, #101010));
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  filter: none !important;
  justify-content: flex-start;
}

.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset:hover,
.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset:focus-visible,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset:hover,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset:focus-visible {
  color: var(--dtp-primary-hover-color, #1d4ed8);
  background: transparent !important;
  filter: none !important;
}

.dtp-calculator--loading:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset:focus-visible,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dtp-link-color, var(--dtp-primary-color, #101010)) 35%, transparent);
  outline-offset: 2px;
}

/* Calculator title */
.dtp-calculator__title {
  margin: 0;
  color: var(--dtp-title-color, #1e293b);
  font-weight: 600;
}

.dtp-calculator__lede {
  margin: 0;
  color: var(--dtp-muted-text-color, #4a4a47);
  font-size: 0.95rem;
}

.dtp-calculator__copy {
  display: grid;
  gap: var(
    --dtp-copy-gap,
    var(
      --acss-paragraph-spacing,
      var(--acss-space-xs, var(--space-xs, 0.5rem))
    )
  );
}

.dtp-calculator__form {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  margin: 0;
}

.dtp-calculator__form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap, 0.75rem);
  /* Stretch so the ZIP field matches Check height — block themes often leave
     `.input-text` nearly unpadded while `.button` keeps full theme padding. */
  align-items: stretch;
}

.dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
.dtp-calculator__form-row > .dtp-postcode-field,
.dtp-hero-postcode__form-row > .dtp-calculator__input,
.dtp-hero-postcode__form-row > .dtp-hero-postcode__input,
.dtp-hero-postcode__form-row > .dtp-postcode-field {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
}

.dtp-calculator__form-row > .dtp-calculator__country,
.dtp-hero-postcode__form-row > .dtp-calculator__country,
.dtp-hero-postcode__form-row > .dtp-hero-postcode__country {
  flex: 0 1 12rem;
  min-width: 8.5rem;
  max-width: 16rem;
  width: auto;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

.dtp-calculator__country,
.dtp-address-modal__country,
.dtp-hero-postcode__country {
  box-sizing: border-box;
  min-height: 2.75rem;
  /* Native carets ignore padding-end — paint our own so label never kisses the arrow. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem 0.5rem;
  padding-inline: 0.75rem 2.25rem;
  padding-block: var(--dtp-input-padding-block, var(--btn-padding-block, 0.75rem));
  line-height: var(--btn-line-height, 1.2);
  text-overflow: ellipsis;
}

.dtp-calculator__form-row > .dtp-calculator__button,
.dtp-hero-postcode__form-row > .dtp-calculator__button,
.dtp-hero-postcode__form-row > .dtp-hero-postcode__button {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 6.75rem;
  white-space: nowrap;
  margin: 0;
}

.dtp-calculator__form-row > .dtp-calculator__reset {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  white-space: nowrap;
  /* Text-link Clear should not stretch to the button's height. */
  align-self: center;
}

/* Shortcode button_layout="stacked" — full-width input, then Check, then Clear */
.dtp-calculator--button-layout-stacked .dtp-calculator__form-row {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.dtp-calculator--button-layout-stacked .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
.dtp-calculator--button-layout-stacked .dtp-calculator__form-row > .dtp-calculator__button,
.dtp-calculator--button-layout-stacked .dtp-calculator__form-row > .dtp-calculator__reset {
  flex: 1 0 100%;
  width: 100% !important;
  max-width: 100%;
}

.dtp-calculator--button-layout-stacked .dtp-calculator__form-row > .dtp-calculator__button {
  min-width: 0;
}

/* Layout only — colour, radius, text-transform, and weight come from theme
   `.button` / `.wp-element-button` (same surface as Add to cart). Shared by
   calculator, hero, and any shortcode that reuses `.dtp-calculator__button`. */
.dtp-calculator__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}

/* Submit: the theme owns the background via its own button classes, but a Woo/Bricks
   `.woocommerce .button { color: var(--text-light) }` rule lands later in the cascade
   with matching specificity — which turned the label near-black on the red fill wherever
   the drawer renders inside `.woocommerce`. Take the text colour from the theme's own
   button token so it always contrasts with the theme's own button background. */
.dtp-calculator .dtp-calculator__form .dtp-calculator__button,
.dtp-calculator .dtp-calculator__form button.dtp-calculator__button.wp-element-button,
.woocommerce .dtp-calculator .dtp-calculator__form .dtp-calculator__button,
.dtp-address-modal .dtp-address-modal__submit,
.dtp-address-modal button.dtp-address-modal__submit.wp-element-button,
.woocommerce .dtp-address-modal .dtp-address-modal__submit,
.dtp-address-drawer .dtp-address-drawer__submit,
.woocommerce .dtp-address-drawer .dtp-address-drawer__submit,
body.bricks-is-frontend .dtp-address-modal .dtp-address-modal__submit,
body[class*="bricks"] .dtp-address-modal .dtp-address-modal__submit {
  color: var(--btn-text-color, var(--dtp-button-text-color, #ffffff)) !important;
}

/* Reset/Clear: always a text link (not a second primary). Bricks/Woo often ship
   `.woocommerce .button` later in the cascade with matching specificity — use
   form-scoped selectors + !important on theme-owned properties. */
.dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button,
.dtp-calculator .dtp-calculator__form button.dtp-calculator__reset.wp-element-button,
.woocommerce .dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button,
.woocommerce .dtp-calculator .dtp-calculator__form button.dtp-calculator__reset,
body.bricks-is-frontend .dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button,
body[class*="bricks"] .dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button {
  /* No !important: JS toggles visibility via inline display:none when reset/clear should hide. */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--dtp-link-color, var(--dtp-primary-color, #101010)) !important;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  filter: none !important;
  cursor: pointer;
}

.dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button:hover,
.dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button:focus-visible,
.dtp-calculator .dtp-calculator__form button.dtp-calculator__reset.wp-element-button:hover,
.dtp-calculator .dtp-calculator__form button.dtp-calculator__reset.wp-element-button:focus-visible,
.woocommerce .dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button:hover,
.woocommerce .dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button:focus-visible,
body[class*="bricks"] .dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button:hover,
body[class*="bricks"] .dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button:focus-visible {
  color: var(--dtp-primary-hover-color, #1d4ed8) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.dtp-calculator .dtp-calculator__form .dtp-calculator__reset.button:focus-visible,
.dtp-calculator .dtp-calculator__form button.dtp-calculator__reset.wp-element-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dtp-link-color, var(--dtp-primary-color, #101010)) 35%, transparent);
  outline-offset: 2px;
}

/* Form-only: full-width row + text link; selectors beat `.woocommerce .dtp-calculator__form .button` above. */
.dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset,
.woocommerce .dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset.button,
body[class*="bricks"] .dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset.button {
  flex: 1 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--dtp-link-color, var(--dtp-primary-color, #101010)) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  filter: none !important;
}

.dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset:hover,
.dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset:focus-visible,
.woocommerce .dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset.button:hover,
.woocommerce .dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset.button:focus-visible {
  color: var(--dtp-primary-hover-color, #1d4ed8) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.dtp-calculator__feedback {
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: var(--dtp-success-bg, #ecfdf5);
  border: 1px solid color-mix(in srgb, var(--dtp-success-color, #16a34a) 26%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--dtp-success-bg, #ecfdf5) 82%, #ffffff);
  color: var(--dtp-success-color, #166534);
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.dtp-calculator__feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Bricks Builder editor mode - ensure form row displays properly */
body.bricks-is-frontend .dtp-calculator__form-row,
body[class*="bricks"] .dtp-calculator__form-row {
  display: flex !important;
  width: 100% !important;
}

/* Layout + height parity with Check. Chrome uses ACSS/theme tokens (--border-color,
   --bg-light, --dtp-theme-radius); theme `.input-text` may override when present. */
.dtp-calculator__input,
.dtp-hero-postcode__input {
  flex: 1;
  min-width: 150px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-block: var(--dtp-input-padding-block, var(--btn-padding-block, 0.75rem));
  padding-inline: var(--dtp-input-padding-inline, var(--btn-padding-inline, 1rem));
  line-height: var(--btn-line-height, 1.2);
  font-size: inherit;
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  color: var(--dtp-input-text-color, inherit);
  background-color: var(--dtp-input-bg-color, var(--bg-ultra-light, var(--bg-light, #ffffff)));
  border: 1px solid var(--dtp-input-border-color, var(--border-color, var(--dtp-border-color, #e8e8e6)));
}

.dtp-calculator__input::placeholder,
.dtp-hero-postcode__input::placeholder {
  color: var(--dtp-input-placeholder-color, var(--text-muted, color-mix(in srgb, currentColor 65%, transparent)));
  opacity: 1;
}

/* Composite hint overlay: bold prompt + muted country example (updates with country select). */
.dtp-postcode-field {
  position: relative;
  display: flex;
  min-width: 0;
  width: 100%;
}

.dtp-postcode-field__input {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
}

.dtp-postcode-field__hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-inline: var(--dtp-input-padding-inline, var(--btn-padding-inline, 1rem));
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dtp-postcode-field__label {
  font-weight: 500;
  color: var(--dtp-postcode-hint-label-color, var(--dtp-input-placeholder-color, var(--text-muted, #6e6e6b)));
}

.dtp-postcode-field__example {
  font-weight: 400;
  color: var(--dtp-postcode-hint-example-color, color-mix(in srgb, var(--text-muted, #6e6e6b) 62%, #fff));
}

/* The visible "Enter Postcode e.g. CF14 2NZ" text is this overlay, not a native
   placeholder — the input's placeholder attribute is deliberately empty so the label and
   example can be styled separately.

   That makes `:placeholder-shown` unsafe to key off here. Engines disagree about whether an
   EMPTY placeholder counts as "shown": Chromium says yes, so `:not(:placeholder-shown)` was
   false and the overlay displayed; WebKit treats an empty placeholder as nothing to show, so
   `:not(:placeholder-shown)` matched, the overlay was hidden, and the field rendered blank on
   iPhone and iPad. Visibility now comes from the JS-toggled --filled class, which behaves the
   same everywhere. */
.dtp-postcode-field:focus-within .dtp-postcode-field__hint,
.dtp-postcode-field--filled .dtp-postcode-field__hint {
  display: none;
}

.dtp-postcode-field .dtp-postcode-field__input {
  background-color: var(--dtp-input-bg-color, var(--bg-ultra-light, var(--bg-light, #ffffff)));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  min-height: 2.75rem;
}

.dtp-hero-postcode__form-row {
  align-items: stretch;
}

.dtp-hero-postcode__form-row > .dtp-postcode-field {
  display: flex;
  align-items: stretch;
}

.dtp-hero-postcode__form-row > .dtp-hero-postcode__button,
.dtp-hero-postcode__form-row > .dtp-calculator__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 2.75rem;
}

.dtp-postcode-field .dtp-calculator__input,
.dtp-postcode-field .dtp-hero-postcode__input {
  flex: 1 1 auto;
}

.dtp-calculator__country,
.dtp-hero-postcode__country {
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  color: var(--dtp-input-text-color, inherit);
  background-color: var(--dtp-input-bg-color, var(--bg-ultra-light, var(--bg-light, #ffffff)));
  border: 1px solid var(--dtp-input-border-color, var(--border-color, var(--dtp-border-color, #e8e8e6)));
}

/* Bricks: keep layout resilient; leave chrome to theme/framework when present. */
body.bricks-is-frontend .dtp-calculator__input,
body[class*="bricks"] .dtp-calculator__input {
  flex: 1 1 auto !important;
  min-width: 150px !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Check/Clear button group layout */
.dtp-calculator__buttons {
  display: flex;
  gap: var(--grid-gap, 0.5rem);
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}

.dtp-calculator__buttons button {
  flex: 1 1 auto;
  min-width: 100px;
}

/* Shipping methods */
.dtp-shipping-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap, 1rem);
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
}

/* Tabbed interface removed - using simple headings instead */

/* Section headings - inherit spacing from theme/framework */
.dtp-section-heading:first-child {
  margin-top: 0;
}

.dtp-section-title {
  margin: 0;
  padding: 0.5rem 0;
  color: var(--dtp-section-title-color, var(--dtp-on-surface, currentColor));
  font-size: 1.125rem;
  font-weight: 600;
}

.dtp-calculator__results .dtp-section-title {
  font-size: 1em;
}

.dtp-shipping-method {
  box-sizing: border-box;
  padding: var(--dtp-card-padding, 1.25rem) !important;
  border: 0;
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  background-color: var(--dtp-method-bg-color, #ffffff);
  box-shadow: var(--dtp-method-card-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06));
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.dtp-shipping-method:hover {
  transform: translateY(-1px);
  box-shadow: var(--dtp-method-selected-shadow, 0 2px 4px rgba(15, 23, 42, 0.07), 0 8px 20px rgba(15, 23, 42, 0.08));
}

.dtp-shipping-method:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--dtp-primary-color, currentColor);
}

.dtp-shipping-method__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-xs, 0.75rem);
  row-gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.dtp-delivery-method > .dtp-shipping-method__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.625rem;
  row-gap: 0.375rem;
  align-items: start;
}

.dtp-delivery-method .dtp-shipping-method__icon {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

.dtp-delivery-method .dtp-shipping-method__icon i {
  font-size: 1.125em;
  line-height: 1;
  color: var(--dtp-description-color, #6e6e6b);
}

.dtp-delivery-method .dtp-shipping-method__header {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}

.dtp-delivery-method .dtp-shipping-method__description {
  grid-column: 2;
  grid-row: 2;
}

/*
 * Name and its hours control share the first column, so the price keeps the second.
 *
 * A wrapper rather than a third grid track: with `minmax(0, 1fr)` on the name, a track of
 * its own would put the link hard against the price at the far side of the row, which is
 * not what "beside the method" means.
 */
.dtp-shipping-method__title {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--dtp-method-title-gap, var(--space-xs, 0.5rem));
  row-gap: 0.125rem;
}

.dtp-shipping-method__name {
  min-width: 0;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dtp-method-name-color, var(--dtp-on-surface, currentColor));
  overflow-wrap: anywhere;
}

.dtp-shipping-method__cost {
  color: var(--dtp-method-name-color, var(--dtp-on-surface, currentColor));
  font-weight: 600;
  display: inline;
  line-height: 1.35;
  white-space: nowrap;
  justify-self: end;
  align-self: start;
  max-width: max-content;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.dtp-shipping-method__cost--free,
.dtp-delivery-modal__item-cost.dtp-shipping-method__cost--free {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dtp-tabs__tab-hint-distance {
  text-transform: none;
  letter-spacing: normal;
}

.dtp-shipping-method__cost-unavailable {
  color: var(--dtp-method-price-muted-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
  font-weight: 600;
  font-style: italic;
  display: inline;
  line-height: 1.35;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.dtp-shipping-method__threshold {
  margin-bottom: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-info-bg-color, #eff6ff);
  color: var(--dtp-info-text-color, var(--dtp-on-surface, currentColor));
  border-left: 3px solid var(--dtp-info-border-color, var(--primary, #3b82f6));
}

.dtp-free-shipping-progress {
  /* No outer margin. This block is only ever emitted by [arwoo_free_shipping_progress],
     which means somebody placed it — so the space around it belongs to whatever they
     placed it in, not to us. A margin here is invisible in the builder and fights the
     content gap the site already has. The in-card variants below set their own, because
     there the plugin owns the container too. */
  border: 1px solid var(--dtp-progress-border-color, var(--dtp-color-border-subtle, #e6e6e4));
  /* Inherit the theme's corner treatment (same token the trigger and inputs use) rather than
     hardcoding a radius — a hardcoded 10px looks wrong beside square themes like Twenty Twenty-Five.
     The in-card band overrides this to 0 for its full-bleed strip. */
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  padding: 0.75rem 0.875rem;
  background: var(--dtp-progress-bg-color, var(--dtp-method-bg-color, #ffffff));
}

.dtp-free-shipping-progress__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  font-weight: 400;
  color: var(--dtp-progress-heading-color, var(--dtp-text-color, #101010));
  margin-bottom: 0.625rem;
}

.dtp-free-shipping-progress__heading i {
  font-size: 1.125em;
  flex: 0 0 auto;
}

.dtp-free-shipping-progress__copy {
  min-width: 0;
  line-height: 1.35;
}

.dtp-free-shipping-progress__amount {
  font-weight: 700;
  white-space: nowrap;
}

.dtp-free-shipping-progress__tax-suffix {
  font-size: var(
    --text-2xs,
    var(--acss-text-2xs, var(--text-xs, 0.75rem))
  );
  font-weight: 400;
  margin-left: var(--acss-space-1, var(--space-3xs, 0.25rem));
  white-space: nowrap;
  opacity: 0.92;
}

.dtp-free-shipping-progress__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--dtp-progress-bar-track-color, #e6e6e4);
  overflow: visible;
}

.dtp-free-shipping-progress__bar > span:first-child {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--dtp-progress-bar-fill-color, var(--dtp-text-color, #101010));
  transition: width 0.2s ease;
}

.dtp-free-shipping-progress__goal {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  color: #34d399;
  background: #065f46;
  border-radius: 999px;
  transform: translate(35%, -50%);
  box-shadow: 0 0 0 2px #065f46;
}

/*
 * An outline control, not a primary button.
 *
 * It used to carry the theme's `.button wp-element-button`, which is by definition the
 * theme's *primary* style — so on every theme it rendered as an exact twin of Add to cart,
 * competing with the page's actual primary action from higher up the page. Switching
 * shipping rate is a secondary choice a shopper may well decline.
 *
 * That also brings it in line with the band around it, which was deliberately de-escalated
 * from a solid block for the same reason (see `--success` below). The band said "this needs
 * no shouting" and then held the loudest control on the card.
 *
 * `button.` rather than the bare class: with the theme's button classes gone, a theme that
 * styles the bare `button` element would otherwise win on nothing more than element
 * specificity.
 */
button.dtp-free-shipping-progress__switch {
  margin-top: var(--dtp-fulfilment-switch-space, var(--space-xxs, 0.625rem));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  padding: var(--dtp-fulfilment-switch-padding, 0.3125rem 0.6875rem);
  border: 1px solid var(--dtp-fulfilment-switch-border, var(--arwoo-success-text, #065f46));
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  background: transparent;
  box-shadow: none;
  color: var(--dtp-fulfilment-switch-ink, var(--arwoo-success-text, #065f46));
  font-family: inherit;
  font-size: var(--dtp-fulfilment-switch-size, var(--text-xs, 0.8125rem));
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  transition: background-color 0.15s ease;
}

button.dtp-free-shipping-progress__switch:hover,
button.dtp-free-shipping-progress__switch:focus-visible {
  background: var(--dtp-fulfilment-switch-hover-bg, var(--arwoo-success-goal-bg, #d1fae5));
  color: var(--dtp-fulfilment-switch-ink, var(--arwoo-success-text, #065f46));
  border-color: var(--dtp-fulfilment-switch-border, var(--arwoo-success-text, #065f46));
}

.dtp-free-shipping-progress--success {
  background: var(--dtp-progress-success-bg-color, #f7fffb);
  border-color: var(--dtp-progress-success-border-color, #bfe9d2);
}

.dtp-free-shipping-progress--success .dtp-free-shipping-progress__heading {
  color: var(--dtp-progress-success-heading-color, #166534);
}

.dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar > span:first-child {
  background: var(--dtp-progress-success-fill-color, #16a34a);
}

/* Full-viewport confetti burst (pointer-events none; removed after animation). */
.dtp-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: calc(var(--dtp-overlay-z-index, 100050) + 10);
}

.dtp-free-shipping-widget .dtp-free-shipping-progress {
  margin-top: 0;
}

.dtp-free-shipping-widget__empty {
  color: var(--dtp-description-color, #6e6e6b);
}

/* In-card progress: top band on delivery card (full-bleed horizontally, AOV-first). */
.dtp-delivery-method .dtp-free-shipping-progress {
  margin: calc(var(--dtp-card-padding, 1.25rem) * -1) calc(var(--dtp-card-padding, 1.25rem) * -1) 0.75rem;
  /* Tinted rows delineate themselves — a border on top of the colour change reads as a heavy
     double edge. Dividers are kept only between rows that share the same background. */
  border: 0;
  border-radius: 0;
  padding: 0.875rem var(--dtp-card-padding, 1.25rem) 0.8125rem;
  background: var(--dtp-free-shipping-strip-bg, #101010);
  color: var(--dtp-free-shipping-strip-text, #fafaf9);
}

/* Pickup hero band when aligned with delivery free-shipping strip (split / auto): same footprint, real content. */
.dtp-pickup-method__fulfilment-band {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /*
   * Bleed up and sideways only. The bottom is the band system's to say — see
   * `.dtp-fulfilment-band` below — and a shorthand that asserts it here just loses the
   * cascade silently while still reading like the answer.
   */
  margin-block-start: calc(var(--dtp-card-padding, 1.25rem) * -1);
  margin-inline: calc(var(--dtp-card-padding, 1.25rem) * -1);
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0;
  padding: 0.875rem var(--dtp-card-padding, 1.25rem) 0.8125rem;
  min-height: 0;
  box-sizing: border-box;
  background: var(--dtp-free-shipping-strip-bg, #101010);
  color: var(--dtp-free-shipping-strip-text, #fafaf9);
}

/*
 * The location's cost, far right in the top strip.
 *
 * It shares the distance chip's shape rather than inventing a second one — both are
 * metadata about the location pinned to the right of its name, and a price that sits
 * differently from the distance beside it reads as two unrelated things.
 */
.dtp-pickup-method__fulfilment-band__cost {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin-inline-start: auto;
  line-height: 1.3;
  font-weight: 700;
  font-size: 0.9375em;
  color: inherit;
  text-align: right;
  white-space: nowrap;
}

.dtp-pickup-method__fulfilment-band__cost .dtp-shipping-method__cost,
.dtp-pickup-method__fulfilment-band__cost .amount,
.dtp-pickup-method__fulfilment-band__cost bdi {
  font: inherit;
  color: inherit;
}

.dtp-pickup-method__fulfilment-band-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125em;
  line-height: 1;
  /* Same fix as the delivery strip icon: #d6d6d3 was for the old dark band and is washed out
     on the tinted one. Inherit the row's text so it matches the other row icons. */
  color: var(--dtp-free-shipping-strip-icon, currentColor);
}

.dtp-pickup-method__fulfilment-band__main {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1 auto;
  min-width: 0;
}

.dtp-pickup-method__fulfilment-band__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.dtp-pickup-method__fulfilment-band__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.375rem;
  row-gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}

.dtp-pickup-method__fulfilment-band__name {
  min-width: 0;
  line-height: 1.3;
  font-weight: 600;
  color: inherit;
  overflow-wrap: anywhere;
}

.dtp-pickup-method__fulfilment-band__status {
  line-height: 1.35;
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit;
  opacity: 0.88;
}

.dtp-pickup-method__fulfilment-band__status::before {
  content: "·";
  margin-right: 0.375rem;
  opacity: 0.65;
}

.dtp-pickup-method__fulfilment-band__distance {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35em;
  line-height: 1.3;
  font-weight: 600;
  font-size: 0.9375em;
  color: inherit;
  text-align: right;
  white-space: nowrap;
}

.dtp-pickup-method__fulfilment-band__distance-icon {
  flex-shrink: 0;
  font-size: 1em;
  line-height: 1;
  opacity: 0.9;
}

.dtp-pickup-method__fulfilment-band__hint {
  display: block;
  line-height: 1.35;
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit;
  opacity: 0.88;
}

.dtp-delivery-method .dtp-free-shipping-progress__heading {
  color: inherit;
  margin-bottom: 0.5rem;
}

.dtp-delivery-method .dtp-free-shipping-progress__heading i {
  /* Match the row's own text like every other row icon. The old #d6d6d3 was chosen for the
     solid dark strip and reads as washed-out grey now the strip is tinted. */
  color: var(--dtp-free-shipping-strip-icon, currentColor);
}

.dtp-delivery-method .dtp-free-shipping-progress__copy,
.dtp-delivery-method .dtp-free-shipping-progress__amount,
.dtp-delivery-method .dtp-free-shipping-progress__tax-suffix {
  color: inherit;
}

.dtp-delivery-method .dtp-free-shipping-progress__bar {
  background: rgba(148, 163, 184, 0.35);
}

.dtp-delivery-method .dtp-free-shipping-progress__bar > span:first-child {
  background: var(--dtp-free-shipping-strip-text, #fafaf9);
}

.dtp-delivery-method button.dtp-free-shipping-progress__switch {
  /* Only spacing here — the outline treatment is set once above. */
  margin-top: 0.75rem;
}

/* Unlocked (free shipping earned).
   Tinted rather than a solid block: this state confirms something already achieved and needs no
   action, so it should not out-shout the selected tab (a control) or the countdown (the row that
   actually drives action). Saturated green is kept for the progress fill only, so colour still
   carries the meaning. Every value is a token — set them to the solid values (see the
   `--solid` modifier below) to restore the full-block treatment. */
.dtp-delivery-method .dtp-free-shipping-progress--success {
  --arwoo-success-bg: #ecfdf5;
  --arwoo-success-border: rgba(6, 95, 70, 0.22);
  --arwoo-success-text: #065f46;
  --arwoo-success-icon: #065f46;
  --arwoo-success-track: rgba(6, 95, 70, 0.14);
  --arwoo-success-track-ring: rgba(6, 95, 70, 0.12);
  --arwoo-success-fill: #059669;
  --arwoo-success-goal-text: #065f46;
  --arwoo-success-goal-bg: #d1fae5;
  --arwoo-success-goal-ring: #ecfdf5;

  background: var(--dtp-free-shipping-success-bg, var(--arwoo-success-bg));
}

/* Opt back in to the original solid emerald block. */
.dtp-delivery-method .dtp-free-shipping-progress--success.dtp-free-shipping-progress--solid {
  --arwoo-success-bg: #065f46;
  --arwoo-success-border: rgba(110, 231, 183, 0.45);
  --arwoo-success-text: #ecfdf5;
  --arwoo-success-icon: #6ee7b7;
  --arwoo-success-track: rgba(6, 95, 70, 0.55);
  --arwoo-success-track-ring: rgba(167, 243, 208, 0.28);
  --arwoo-success-fill: #34d399;
  --arwoo-success-goal-text: #6ee7b7;
  --arwoo-success-goal-bg: #047857;
  --arwoo-success-goal-ring: #065f46;
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__heading {
  color: var(--dtp-free-shipping-success-text, var(--arwoo-success-text));
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__copy,
.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__amount,
.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__tax-suffix {
  color: var(--dtp-free-shipping-success-text, var(--arwoo-success-text));
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__heading i {
  color: var(--arwoo-success-icon);
}

/* Unlocked bar: saturated fill on a muted track — the one place the strong green lives. */
.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar {
  background: var(--arwoo-success-track);
  box-shadow: inset 0 0 0 1px var(--arwoo-success-track-ring);
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar > span:first-child {
  background: var(--arwoo-success-fill);
  box-shadow: none;
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__goal {
  color: var(--arwoo-success-goal-text);
  background: var(--arwoo-success-goal-bg);
  box-shadow: 0 0 0 2px var(--arwoo-success-goal-ring);
}

.dtp-delivery-method .dtp-free-shipping-progress--switchable .dtp-free-shipping-progress__bar {
  display: none;
}

.dtp-shipping-method__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Equal-height side-by-side grid only — not tabs/hero (flex-grow left a dead gap under the title). */
.dtp-fulfilment-grid__panel--delivery .dtp-shipping-method > .dtp-shipping-method__body,
.dtp-fulfilment-grid__panel--collection .dtp-pickup-location--active > .dtp-shipping-method__body {
  flex: 1 1 auto;
}

.dtp-shipping-method__description {
  margin-bottom: 0;
  color: var(--dtp-description-color, #6e6e6b);
  max-width: 65ch;
  line-height: 1.5;
}

.dtp-shipping-method__header + .dtp-shipping-method__description {
  margin-top: 0;
}

/* When no ETA panel follows, keep a small trailing gap inside the card body. */
.dtp-shipping-method__body:last-child .dtp-shipping-method__description {
  margin-bottom: 0.75rem;
}

.dtp-shipping-method__delivery-info {
  margin-top: 0.75rem;
  margin-bottom: var(--dtp-delivery-info-bottom-gap, 0.625rem);
  padding: 0.875rem 0.9375rem;
  font-weight: 500;
}

.dtp-shipping-method__delivery-info:not(.dtp-availability-panel) {
  border-radius: 0.5rem;
  border: 1px solid
    var(
      --dtp-success-panel-border-color,
      color-mix(in srgb, var(--dtp-success-color, #16a34a) 22%, transparent)
    );
  background-color: var(
    --dtp-success-panel-bg,
    #d1fae5
  );
  box-shadow:
    inset 0 0 0 1px
      var(
        --dtp-success-panel-inner-ring,
        color-mix(in srgb, #ffffff 55%, transparent)
      ),
    0 1px 2px rgba(15, 23, 42, 0.04);
  color: var(--success-dark, var(--dtp-success-text-color, #065f46));
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}

.dtp-loading-skeleton {
  margin-top: 8px;
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
  /* Mirror live fulfilment cards / tabs — inherit theme radius, never invent roundness. */
  --dtp-skeleton-card-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  --dtp-skeleton-chip-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
}

/* Tab strip — shown for tabs layout skeleton (matches live .dtp-tabs__list). */
.dtp-skeleton-tabs {
  display: none;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  width: 100%;
  padding: 0.375rem;
  margin: 0 0 12px;
  border-radius: var(--dtp-skeleton-card-radius);
  background: var(
    --dtp-tabs-group-bg,
    color-mix(in srgb, currentColor 8%, transparent)
  );
}

.dtp-skeleton--tab-pill {
  width: 100%;
  /*
   * As tall as `.dtp-tabs__tab`, which is two lines — the channel and its price hint —
   * inside 8px of padding. At 2.375rem the pill stood in for a single-line tab that does
   * not exist, and the strip came up 11px short of the one replacing it.
   */
  height: 3.0625rem;
  border-radius: var(--dtp-skeleton-chip-radius);
}

.dtp-skeleton--tab-pill--active {
  opacity: 1;
}

.dtp-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/*
 * Layout-aware skeletons (must match product_fulfilment_layout / data-dtp-fulfilment-layout).
 * Tabs: tab strip + one visible panel at every width (not only narrow containers).
 * Side-by-side / auto: two columns (stack only when the container is narrow).
 */
.dtp-loading-skeleton--tabbed .dtp-skeleton-tabs {
  display: grid;
}

.dtp-loading-skeleton--tabbed .dtp-skeleton-grid--tabbed {
  grid-template-columns: minmax(0, 1fr);
}

/* The live tabbed block ends with `.dtp-tabs { margin-bottom: … }`, so the skeleton has to
   end with the same or the card lifts by that much on hydration. Same token, not a copy of
   its computed value. Tabbed only: the split layout has no `.dtp-tabs` to mirror. */
.dtp-loading-skeleton--tabbed {
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
}

.dtp-loading-skeleton--tabbed .dtp-skeleton-grid--tabbed .dtp-skeleton-panel:nth-child(n + 2) {
  display: none;
}

.dtp-loading-skeleton--split .dtp-skeleton-grid--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Single channel: the live result is one section with no tab strip, so reserve exactly
   that. No .dtp-skeleton-tabs is emitted in this mode, and .dtp-skeleton-tabs is
   display:none by default, so nothing reserves height for a strip that never arrives. */
.dtp-loading-skeleton--single .dtp-skeleton-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.dtp-loading-skeleton--single .dtp-skeleton-grid--single .dtp-skeleton-panel:nth-child(n + 2) {
  display: none;
}

.dtp-skeleton-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.dtp-skeleton-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  margin-bottom: 0.5rem;
}

.dtp-skeleton--controls-label {
  height: 12px;
  width: min(160px, 55%);
  max-width: 100%;
}

.dtp-skeleton--controls-link {
  height: 10px;
  width: 5.5rem;
  flex-shrink: 0;
}

.dtp-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--dtp-skeleton-bg, #e6e6e4);
  border-radius: var(--dtp-skeleton-chip-radius, var(--dtp-theme-radius, 0));
}

.dtp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--dtp-skeleton-shimmer, rgba(255, 255, 255, 0.6)), transparent);
  animation: dtp-shimmer-sweep var(--dtp-skeleton-sweep-duration, 1.2s) ease-in-out infinite;
}

.dtp-skeleton--card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: var(--dtp-skeleton-delivery-min, 268px);
  width: 100%;
  border-radius: var(--dtp-skeleton-card-radius, var(--dtp-theme-radius, 0));
  border: 0;
  box-shadow: var(--dtp-method-card-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06));
  background-color: var(--dtp-skeleton-card-bg, #fafaf9);
  position: relative;
  overflow: hidden;
}

/*
 * The fulfilment band, as a row rather than a painted rectangle.
 *
 * It was an absolutely positioned ::before: it took no space, so the rows below flowed up
 * underneath and overlapped it, and it stood in for two live rows — a line of copy and a
 * progress meter — with one flat block. Both are fixed by it being what it represents.
 */
.dtp-skeleton--card__band {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  height: var(--dtp-skeleton-strip-height, 3.75rem);
  padding: 0.875rem var(--dtp-card-padding, 1.25rem);
  background: var(--dtp-skeleton-strip-bg, #e8e8e6);
  border-bottom: 1px solid rgba(148, 163, 184, 0.26);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.dtp-skeleton--card__band-lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The copy line, then the meter under it — the two rows the live band draws. */
.dtp-skeleton--card__band-heading {
  height: 12px;
  width: min(72%, 22rem);
  max-width: 100%;
}

.dtp-skeleton--card__band-bar {
  height: 6px;
  width: 100%;
}

/* Last in the card now, and divided from the countdown above it. */
.dtp-skeleton--card__body {
  border-top: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 12%, transparent));
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* The reserved strip belonged to the old top position; the body no longer leads. */
  padding: 0.875rem var(--dtp-card-padding, 1.25rem);
  box-sizing: border-box;
  gap: var(--dtp-skeleton-body-gap, 0.4375rem);
  /*
   * Top, not centre. In the split grid both cards stretch to the taller one, so this zone
   * absorbs the slack — and the live card leaves that slack at the bottom with its method
   * row sitting straight under the divider. Centring floated the row into the middle of
   * whatever space was spare.
   */
  justify-content: flex-start;
}

/*
 * The method row is one line, like the header it stands in for.
 *
 * It carried a bottom margin whether or not a description followed, which pushed the body
 * past the height the live one has. The gap on the body handles the description case and
 * collapses to nothing without it.
 */
.dtp-skeleton--card__method-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.625rem;
  min-height: 1.09375rem;
}

/*
 * Fixed pixels, not `em`.
 *
 * At 1.125em this measured 24.5px, because the row inherits whatever font-size the theme
 * puts on the card — 21.76px here — and the placeholder grew with it. That made the method
 * row 26.5px against a live header of 17.5, which pushed the body 9px taller and the whole
 * card past its reservation. The sibling `.dtp-skeleton--row-icon` is 15px for the same
 * reason: a placeholder stands in for a fixed shape, so it cannot be sized in the units of
 * text it does not contain.
 */
.dtp-skeleton--card-method-icon {
  align-self: center;
  width: 15px;
  height: 15px;
  margin-top: 0;
  border-radius: var(--dtp-skeleton-chip-radius, var(--dtp-theme-radius, 0));
}

.dtp-skeleton--card-name {
  min-width: 0;
  height: 14px;
  border-radius: var(--dtp-skeleton-chip-radius, var(--dtp-theme-radius, 0));
}

.dtp-skeleton--card-cost {
  justify-self: end;
  align-self: start;
  width: 3.25rem;
  height: 14px;
  border-radius: var(--dtp-skeleton-chip-radius, var(--dtp-theme-radius, 0));
}

.dtp-skeleton--card-desc {
  width: 88%;
  max-width: min(65ch, 100%);
  height: 12px;
  margin-bottom: 0.625rem;
  border-radius: var(--dtp-skeleton-chip-radius, var(--dtp-theme-radius, 0));
}

.dtp-skeleton--card-desc--method {
  width: min(72%, 65ch);
  margin-left: calc(1.125em + 0.625rem);
}

.dtp-skeleton--card-desc--address-2 {
  width: min(72%, 65ch);
  margin-bottom: 0.5rem;
}

/* Neutral Get it by block — mirrors .dtp-availability-panel__content (hairline separator). */
/* First in the card now, so nothing to divide it from — the rule moved down with it. */
/* Measured against the live availability panel's content: 96px at 603px wide. */
.dtp-skeleton--card__availability {
  height: var(--dtp-skeleton-avail-height, 6rem);
  padding: 0.875rem var(--dtp-card-padding, 1.25rem);
}

/* Leading icon placeholder — the live rows all open with a small round icon. */
.dtp-skeleton--row-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: 2px;
}

.dtp-skeleton--card__availability {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.dtp-skeleton--card__availability-lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dtp-skeleton--card__get-it-by {
  width: min(72%, 65ch);
  max-width: 100%;
  height: 18px;
}

/* Secondary "Earliest shipping …" / "View shipping hours" lines. */
.dtp-skeleton--card__avail-detail {
  width: min(86%, 70ch);
  max-width: 100%;
  height: 13px;
}

.dtp-skeleton--card__avail-detail--short {
  width: min(46%, 34ch);
}

/* Amber Order within footer — mirrors .dtp-availability-panel__urgency. */
/*
 * The countdown's amber panel is gone from the card, so it goes from its placeholder.
 *
 * A skeleton is a promise about what is coming. This one promised a bright band that no
 * longer arrives — the loudest thing on the card for as long as it showed, and then
 * nothing. It keeps the top rule the real row has, and the same padding, so the swap
 * from placeholder to content moves nothing.
 */
/* And against the cutoff row it stands in for: 46.5px. */
.dtp-skeleton--card__urgency {
  height: var(--dtp-skeleton-urgency-height, 2.9375rem);
  padding: 0.875rem var(--dtp-card-padding, 1.25rem) 0.8125rem;
  border-top: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 12%, transparent));
}

.dtp-skeleton--card__urgency-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dtp-skeleton--card__urgency-line {
  width: min(58%, 18rem);
  max-width: 100%;
  height: 12px;
}

/* The countdown's meter placeholder went with the meter itself. */

/* Pickup: address row uses method-row skeleton (icon + address + optional cost). */
.dtp-skeleton--card--pickup {
  min-height: var(--dtp-skeleton-pickup-min, 236px);
}

.dtp-skeleton--card-notes {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.dtp-skeleton--card-note-line {
  height: 10px;
  border-radius: var(--dtp-skeleton-chip-radius, var(--dtp-theme-radius, 0));
}

.dtp-skeleton--card-note-line--short {
  width: min(78%, 65ch);
}

.dtp-skeleton--card-note-line--ghost {
  height: 8px;
  width: min(62%, 65ch);
  opacity: 0.55;
}

/*
 * Named apart because `dtp-shimmer` was declared twice, animating different properties.
 *
 * This block animates `transform`; a later one animates `left`, and the later one won for
 * every consumer of the name. So the skeleton sheen — which is `position: absolute; inset: 0`
 * and parked at `translateX(-100%)` — had its `left` animated while that transform stayed
 * put: the highlight swept a longer, offset path than it was drawn for, and did it on the
 * layout path rather than the compositor, on an overlay covering most of the card.
 *
 * Three elements shared the name and wanted three different properties. Each now has its
 * own.
 */
@keyframes dtp-shimmer-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@media (max-width: 860px) {
  .dtp-skeleton-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtp-skeleton--card {
    min-height: max(212px, calc(var(--dtp-skeleton-delivery-min, 268px) - 16px));
  }

  .dtp-skeleton--card--pickup {
    min-height: max(192px, calc(var(--dtp-skeleton-pickup-min, 236px) - 16px));
  }
}

.dtp-availability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--dtp-success-panel-icon-bg, var(--dtp-success-color, #15803d));
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.dtp-shipping-method__delivery-info .dtp-delivery-date,
.dtp-shipping-method__delivery-info strong {
  margin-left: 0;
}

.dtp-delivery-phrase {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 4px;
}

.dtp-pickup-availability-phrase {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 4px;
}

.dtp-delivery-label,
.dtp-delivery-date,
.dtp-pickup-availability-label,
.dtp-pickup-availability-value {
  white-space: nowrap;
}

.dtp-pickup-availability-label,
.dtp-pickup-availability-value {
  margin-left: 0;
}

.dtp-delivery-time-window,
.dtp-pickup-time-window {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875em;
  font-weight: 400;
  color: var(--dtp-color-text-muted, #6e6e6b);
  line-height: 1.35;
}

.dtp-delivery-time-window__range,
.dtp-pickup-time-window__range {
  display: inline;
}

.dtp-fulfilment-context-line {
  display: block;
  flex-basis: 100%;
  margin-top: 0.15rem;
  margin-left: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.35;
  color: var(--dtp-description-color, var(--dtp-on-surface-muted, color-mix(in srgb, inherit 70%, transparent)));
}

.dtp-fulfilment-hours-link {
  display: inline;
  margin-top: 0.25rem;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.dtp-availability-panel .dtp-availability-badge::after {
  content: none;
}

.dtp-fulfilment-single--delivery {
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 0);
}

.dtp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.dtp-shipping-method__header .dtp-shipping-method__name.dtp-sr-only + .dtp-shipping-method__cost {
  grid-column: 1 / -1;
  justify-self: end;
}

.dtp-pickup-location-controls,
.dtp-fulfilment-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 0.5rem;
  padding-block: 2px;
  color: var(--dtp-muted-text-color, #4a4a47);
}

.dtp-fulfilment-controls__label,
.dtp-pickup-location-controls__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin-right: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: visible;
}

.dtp-fulfilment-controls__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: inherit;
  color: inherit;
}

.dtp-pickup-location-controls__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: inherit;
  color: inherit;
}

.dtp-fulfilment-controls__label .dtp-fulfilment-controls__toggle--postcode {
  flex: 0 0 auto;
  margin-left: 0;
  display: inline-flex;
  vertical-align: baseline;
}

.dtp-pickup-location-controls__label .dtp-pickup-location-controls__toggle--postcode {
  flex: 0 0 auto;
  margin-left: 0;
  display: inline-flex;
  vertical-align: baseline;
}

.dtp-pickup-location-controls__label .dtp-pickup-location-controls__toggle--primary {
  margin-left: 0;
}

.dtp-pickup-location-controls--single {
  justify-content: flex-start;
}

.dtp-pickup-location-controls__actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  max-width: 100%;
  margin-left: auto;
}

.dtp-fulfilment-controls__actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  max-width: 100%;
  margin-left: auto;
}

.dtp-pickup-location-controls__toggle,
.dtp-fulfilment-controls__toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto !important;
  max-width: max-content;
  background: none;
  border: 0;
  margin-left: auto;
  padding: 0;
  color: var(--dtp-muted-text-color, #4a4a47);
  font-weight: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  gap: 0.35rem;
  line-height: 1.35;
}

.dtp-fulfilment-controls__actions .dtp-fulfilment-controls__toggle,
.dtp-pickup-location-controls__actions .dtp-pickup-location-controls__toggle {
  margin-left: 0;
}

.dtp-fulfilment-controls__toggle,
.dtp-pickup-location-controls__toggle {
  align-self: center;
}

.dtp-fulfilment-controls__toggle--change {
  /* Sits beside "Shipping to 10001" and does the same job, so it matches it: same muted colour
     and weight, with the underline carrying the affordance. Colour + bold + underline was three
     signals for one secondary action. */
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: inherit;
  color: inherit;
}

.dtp-fulfilment-controls__toggle--change:hover,
.dtp-fulfilment-controls__toggle--change:focus-visible {
  color: var(--dtp-link-hover-color, var(--dtp-link-color, var(--dtp-primary-color, currentColor)));
}

.dtp-pickup-location-controls__toggle:focus-visible,
.dtp-fulfilment-controls__toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dtp-link-color, var(--dtp-primary-color, #101010)) 35%, transparent);
  outline-offset: 2px;
}

.dtp-fulfilment-controls__toggle i,
.dtp-pickup-location-controls__toggle i {
  font-size: 1.125em;
  line-height: 1;
}

.dtp-fulfilment-controls__toggle span,
.dtp-pickup-location-controls__toggle span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dtp-pickup-location-controls__toggle:hover,
.dtp-pickup-location-controls__toggle:focus-visible,
.dtp-fulfilment-controls__toggle:hover,
.dtp-fulfilment-controls__toggle:focus-visible {
  color: var(--dtp-text-color, #101010);
}

.dtp-delivery-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap, 1rem);
}

.dtp-delivery-method {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Do not use height:100% here. In single-column hero/results the parent
     sizes from this card; percentage height + content-box padding let the
     painted card extend past the parent's layout box, so siblings like
     hero "Continue shopping" overlap the card bottom. Equal-height grids
     opt in below. */
}

.dtp-fulfilment-grid__panel--delivery .dtp-delivery-method {
  height: 100%;
  box-sizing: border-box;
}

.dtp-delivery-methods--modal .dtp-delivery-method:not(.dtp-delivery-method--active) {
  display: none;
}

.dtp-pickup-locations:not(.dtp-pickup-locations--expanded) .dtp-pickup-location:not(.dtp-pickup-location--active) {
  display: none;
}

.dtp-pickup-locations.dtp-pickup-locations--unselected:not(.dtp-pickup-locations--expanded) .dtp-pickup-location--preview {
  display: flex;
}

.dtp-tabs__panel--collection .dtp-pickup-location--preview,
.dtp-fulfilment-grid__panel--collection .dtp-pickup-location--preview,
.dtp-fulfilment-grid .dtp-pickup-location--preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  height: auto;
}

.dtp-pickup-locations--expanded .dtp-pickup-location {
  display: block;
}

.dtp-delivery-modal,
.dtp-pickup-modal,
.dtp-schedule-modal,
.dtp-address-modal {
  position: fixed;
  inset: 0;
  z-index: var(--dtp-overlay-z-index, 100050);
  display: none;
  pointer-events: none;
}

.dtp-delivery-modal--open,
.dtp-pickup-modal--open,
.dtp-schedule-modal--open,
.dtp-address-modal--open {
  display: block;
  pointer-events: auto;
}

/*
 * Displayed, but not yet moved.
 *
 * The open class above carries both the reveal and the slide. A panel going from
 * `display: none` straight to its open transform has no previous frame to animate from, so
 * it arrives instantly however the transition is written — which is why one drawer appeared
 * to slide and another to snap, when both were the same component. The script adds this
 * class first, flushes layout, then adds the open class, so the closed transform is a frame
 * the browser can leave.
 */
.dtp-delivery-modal--revealing,
.dtp-pickup-modal--revealing,
.dtp-schedule-modal--revealing,
.dtp-address-modal--revealing {
  display: block;
  pointer-events: auto;
}

.dtp-delivery-modal__backdrop,
.dtp-pickup-modal__backdrop,
.dtp-schedule-modal__backdrop,
.dtp-address-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.dtp-delivery-modal__panel,
.dtp-pickup-modal__panel,
.dtp-schedule-modal__panel,
.dtp-address-modal:not(.dtp-address-drawer) .dtp-address-modal__panel {
  position: relative;
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow: auto;
  margin: 10vh auto 0;
  background: #ffffff;
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  padding: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  color: #101010;
  /* Light modal surface — reset tokens inherited from dark hero/calculator ancestors. */
  --dtp-text-color: #101010;
  --dtp-on-surface: #101010;
  --dtp-on-surface-muted: #6e6e6b;
  --dtp-description-color: #6e6e6b;
  --dtp-muted-text-color: #6e6e6b;
  --dtp-info-text-color: #101010;
  --dtp-info-details-color: #6e6e6b;
}

/* Address change: off-canvas drawer (desktop) / bottom sheet (mobile) — not centered modal */
.dtp-address-drawer .dtp-address-modal__backdrop {
  opacity: 0;
  transition: opacity 0.22s ease;
}

.dtp-address-drawer.dtp-address-modal--open .dtp-address-modal__backdrop {
  opacity: 1;
}

.dtp-address-drawer .dtp-address-modal__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: var(--dtp-address-drawer-width, min(520px, 100vw));
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  background: #ffffff;
  color: #101010;
  border-radius: 0;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-overflow-scrolling: touch;
  /* Light drawer surface — reset tokens inherited from dark hero/calculator ancestors. */
  --dtp-text-color: #101010;
  --dtp-on-surface: #101010;
  --dtp-on-surface-muted: #6e6e6b;
  --dtp-description-color: #6e6e6b;
  --dtp-muted-text-color: #6e6e6b;
  --dtp-info-text-color: #101010;
  --dtp-info-details-color: #6e6e6b;
  --dtp-input-text-color: #101010;
  --dtp-input-bg-color: #ffffff;
  --dtp-input-placeholder-color: #6e6e6b;
  --dtp-input-border-color: var(--border-color, #e8e8e6);
  --dtp-postcode-hint-label-color: #6e6e6b;
  --dtp-postcode-hint-example-color: color-mix(in srgb, #6e6e6b 62%, #fff);
  --heading-color: #101010;
  --text-dark: #101010;
  --text-muted: #6e6e6b;
  --text-light: #101010;
  --link-color: var(--primary, #b91c1c);
  --dtp-link-color: var(--primary, #b91c1c);
  --dtp-primary-color: var(--primary, #b91c1c);
}

.dtp-address-drawer.dtp-address-modal--open .dtp-address-modal__panel {
  transform: translateX(0);
}

.dtp-address-drawer .dtp-address-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 30px 0;
  border-bottom: 0;
}

.dtp-address-drawer .dtp-address-modal__body {
  padding: 12px 30px 30px;
}

.dtp-address-drawer .dtp-address-modal__footer {
  display: none;
}

.dtp-address-drawer .dtp-address-modal__close {
  position: static;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #374151;
  cursor: pointer;
}

.dtp-address-drawer .dtp-address-modal__close .ph,
.dtp-product-fulfilment-drawer__back .ph {
  font-size: 1.25rem;
  line-height: 1;
}

.dtp-address-drawer .dtp-address-modal__close:hover,
.dtp-address-drawer .dtp-address-modal__close:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  outline: none;
}

.dtp-address-drawer .dtp-address-modal__close:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color, #101010) 35%, transparent);
}

@media (max-width: 640px) {
  .dtp-address-drawer .dtp-address-modal__panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: min(88vh, 520px);
    max-height: min(88dvh, 520px);
    border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0))) var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0))) 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.16);
    transform: translateY(100%);
  }

  .dtp-address-drawer.dtp-address-modal--open .dtp-address-modal__panel {
    transform: translateY(0);
  }

  /* Product compact / auto-mobile fulfilment drawer — full viewport height sheet. */
  .dtp-product-fulfilment-drawer .dtp-address-modal__panel {
    top: 0;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.2);
  }

  .dtp-product-fulfilment-drawer .dtp-address-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Address drawer + product fulfilment drawer — stack country, postcode, then Check */
.dtp-address-drawer__form-row,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
}

.dtp-address-drawer__form-row .dtp-address-modal__label,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row .dtp-address-modal__label {
  flex: 0 0 auto;
}

.dtp-address-drawer__form-row .dtp-calculator__country,
.dtp-address-drawer__form-row .dtp-address-modal__country,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-calculator__country,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-address-modal__country {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  align-self: stretch;
  min-height: 2.75rem;
}

.dtp-address-drawer__form-row .dtp-address-modal__input,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-address-modal__input {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  align-self: stretch;
  min-height: 2.75rem;
}

/* Drawer form-rows stack vertically (flex-flow: column), so the shared
   `.dtp-calculator__form-row > .dtp-postcode-field { flex: 1 1 14rem }` rule —
   intended as a horizontal width basis in the inline/hero row layout — would
   otherwise apply 14rem as a *vertical* flex-basis and stretch the postcode
   input to ~224px tall. Pin the field shell to its content height here. */
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-postcode-field,
.dtp-address-drawer__form-row > .dtp-postcode-field {
  flex: 0 0 auto;
}

.dtp-address-drawer__submit,
.dtp-address-drawer__form-row [data-dtp-address-submit],
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-calculator__button {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
}

.dtp-address-drawer__secondary {
  margin: 6px 0 2px;
}

.dtp-address-drawer__clear,
.dtp-address-drawer__secondary [data-dtp-address-clear],
.dtp-address-drawer .dtp-address-modal__panel .dtp-address-drawer__clear,
.dtp-address-drawer .dtp-address-modal__panel [data-dtp-address-clear],
.dtp-address-drawer .dtp-address-drawer__clear[class*="btn--"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--dtp-link-color, var(--dtp-primary-color, var(--primary, #b91c1c))) !important;
  font-size: var(--text-m, var(--dtp-text-m, 0.875rem));
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  cursor: pointer;
  filter: none !important;
  appearance: none;
}

.dtp-address-drawer__clear:hover,
.dtp-address-drawer__clear:focus-visible,
.dtp-address-drawer__secondary [data-dtp-address-clear]:hover,
.dtp-address-drawer__secondary [data-dtp-address-clear]:focus-visible {
  color: var(--dtp-primary-hover-color, var(--primary-hover, #991b1b)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.dtp-address-drawer__clear:focus-visible,
.dtp-address-drawer__secondary [data-dtp-address-clear]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dtp-link-color, var(--dtp-primary-color, #b91c1c)) 35%, transparent);
  outline-offset: 2px;
}

.dtp-address-drawer .dtp-address-modal__privacy {
  margin: 14px 0 0;
  padding-top: 2px;
  max-width: 100%;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.5;
  color: var(--text-muted, var(--dtp-muted-text-color, #6e6e6b));
  overflow-wrap: break-word;
}

.dtp-address-drawer .dtp-address-modal__privacy .dtp-address-modal__policy-link {
  color: var(--link-color, var(--dtp-link-color, var(--primary, #b91c1c)));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dtp-address-drawer .dtp-address-modal__privacy .dtp-address-modal__policy-link:hover,
.dtp-address-drawer .dtp-address-modal__privacy .dtp-address-modal__policy-link:focus-visible {
  color: var(--dtp-primary-hover-color, var(--primary-hover, #991b1b));
}

@media (prefers-reduced-motion: reduce) {
  .dtp-address-drawer .dtp-address-modal__panel,
  .dtp-address-drawer .dtp-address-modal__backdrop {
    transition: none;
  }
}

html.dtp-address-drawer-open {
  overflow: hidden;
}

.dtp-delivery-modal__close,
.dtp-pickup-modal__close,
.dtp-schedule-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* Modal titles are h4 — leave typography to the theme (no forced uppercase / h2 tokens). */
.dtp-delivery-modal__title,
.dtp-pickup-modal__title,
.dtp-schedule-modal__title {
  margin: 0 2.5rem 1.25rem 0;
}

/* Drawer title: match ACSS text-m scale (Bricks off-canvas parity). */
.dtp-address-drawer .dtp-address-modal__title {
  margin: 0;
  font-family: var(--heading-font-family, inherit);
  font-size: var(--text-m, var(--dtp-text-m, 1rem));
  font-weight: var(--h2-font-weight, var(--heading-font-weight, 700));
  line-height: var(--h2-line-height, 1.25);
  letter-spacing: var(--h2-letter-spacing, 0.06em);
  text-transform: uppercase;
  color: var(
    --heading-color,
    var(--acss-color-heading, var(--text-dark, #101010))
  );
}

.dtp-address-drawer .dtp-address-modal__help,
.dtp-product-fulfilment-drawer .dtp-address-modal__help {
  margin: 0 0 14px;
  font-size: var(--text-s, var(--dtp-text-s, 0.875rem));
  line-height: 1.55;
  color: var(
    --dtp-muted-text-color,
    var(--text-muted, var(--acss-color-text, #4a4a47))
  );
}

.dtp-address-drawer .dtp-address-modal__label,
.dtp-product-fulfilment-drawer .dtp-address-modal__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dtp-address-modal__help {
  margin: -4px 0 12px;
  font-size: var(--dtp-text-s, 0.875rem);
  line-height: 1.5;
  color: var(--dtp-muted-text-color, #4a4a47);
}

.dtp-address-modal__label {
  display: block;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--dtp-muted-text-color, #4a4a47);
}

/* Same padding/height tokens as `.dtp-calculator__input` / country select.
   Border/radius/colours still inherit theme `.input-text`. */
.dtp-address-drawer .dtp-address-modal__panel input.dtp-address-modal__input[type="text"],
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-address-modal__panel input.dtp-address-modal__input[type="text"],
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-address-modal__input[type="text"] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 2.75rem;
  padding-block: var(--dtp-input-padding-block, var(--btn-padding-block, 0.75rem));
  padding-inline: var(--dtp-input-padding-inline, var(--btn-padding-inline, 1rem));
  line-height: var(--btn-line-height, 1.2);
  color: var(--dtp-input-text-color, #101010);
  background-color: var(--dtp-input-bg-color, #ffffff);
}

.dtp-address-drawer .dtp-postcode-field__input,
.dtp-product-fulfilment-drawer .dtp-postcode-field__input {
  color: var(--dtp-input-text-color, #101010);
  background-color: var(--dtp-input-bg-color, #ffffff);
}

.dtp-address-drawer .dtp-address-modal__panel input.dtp-address-modal__input[type="text"]::placeholder {
  color: var(--dtp-input-placeholder-color, color-mix(in srgb, currentColor 65%, transparent));
  opacity: 1;
}

.dtp-address-modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-s, 8px);
}

/*
 * Address modal actions: prefer ACSS btn--* utilities on the element (Bricks/ACSS).
 * Do not use BEM modifiers containing "btn--" — ACSS matches [class*="btn--"] globally.
 * Layout + typography alignment only — ACSS (or theme .button when inactive) owns surfaces.
 * Hero link CTAs omit Woo `.button` when ACSS is active (see dtp_primary_cta_link_classes()).
 */
.dtp-address-modal__panel .dtp-address-modal__actions [class*="btn--"],
.dtp-calculator .dtp-calculator__form .dtp-calculator__button[class*="btn--"],
.dtp-hero-postcode .dtp-hero-postcode__button[class*="btn--"],
.dtp-hero-postcode .dtp-hero-postcode__cta-primary[class*="btn--"],
.dtp-address-drawer .dtp-address-drawer__submit[class*="btn--"],
.dtp-address-drawer [data-dtp-address-submit][class*="btn--"],
.dtp-product-fulfilment-drawer .dtp-calculator__button[class*="btn--"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--btn-font-family, inherit);
  font-size: var(--btn-font-size, var(--text-m, 1rem));
  font-weight: var(--btn-font-weight, 600);
  font-style: var(--btn-font-style, normal);
  line-height: var(--btn-line-height, 1.2);
  letter-spacing: var(--btn-letter-spacing, normal);
  text-transform: var(--btn-text-transform, none);
  text-decoration: var(--btn-text-decoration, none);
  appearance: none;
  cursor: pointer;
}

.dtp-hero-postcode .dtp-hero-postcode__cta-buttons > a.dtp-hero-postcode__cta-primary[class*="btn--"] {
  text-decoration: none;
}

/* Fallback below only applies when neither ACSS btn--* nor theme Woo button classes are present. */
.dtp-address-modal:not(.dtp-address-drawer) .dtp-address-modal__panel .dtp-address-modal__clear:not([class*="btn--"]):not(.button):not(.wp-element-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--btn-padding-block, 0.5rem) var(--btn-padding-inline, 1rem);
  border-radius: var(--btn-radius, 0.375rem);
  font-size: var(--btn-font-size, var(--dtp-text-s, 0.875rem));
  font-weight: var(--btn-font-weight, 500);
  cursor: pointer;
  appearance: none;
  background: var(--btn-outline-background-color, transparent);
  color: var(--btn-outline-text-color, var(--btn-text-color, var(--dtp-text-color, #101010)));
  border: var(--btn-border-width, 1px) var(--btn-border-style, solid)
    var(--btn-outline-border-color, var(--btn-border-color, var(--dtp-color-border-subtle, #d1d5db)));
  box-shadow: none;
  text-transform: var(--btn-text-transform, none);
}

.dtp-address-modal:not(.dtp-address-drawer) .dtp-address-modal__panel .dtp-address-modal__clear:not([class*="btn--"]):not(.button):not(.wp-element-button):hover,
.dtp-address-modal:not(.dtp-address-drawer) .dtp-address-modal__panel .dtp-address-modal__clear:not([class*="btn--"]):not(.button):not(.wp-element-button):focus-visible {
  background: var(--btn-outline-background-color-hover, rgba(15, 23, 42, 0.06));
  border-color: var(--btn-outline-border-color-hover, var(--dtp-text-color, #374151));
  color: var(--btn-outline-text-color-hover, var(--btn-text-color, var(--dtp-text-color, #101010)));
}

.dtp-address-modal__panel .dtp-address-modal__submit:not([class*="btn--"]):not(.button):not(.wp-element-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--btn-padding-block, 0.5rem) var(--btn-padding-inline, 1rem);
  border-radius: var(--btn-radius, 0.375rem);
  font-size: var(--btn-font-size, var(--dtp-text-s, 0.875rem));
  font-weight: var(--btn-font-weight, 500);
  cursor: pointer;
  appearance: none;
  background: var(--btn-background, var(--button-color, var(--dtp-primary-color, #101010)));
  color: var(--btn-text-color, var(--button-text, var(--dtp-button-text-color, #ffffff)));
  border: var(--btn-border-width, 1px) var(--btn-border-style, solid)
    var(--btn-border-color, var(--button-color, var(--dtp-primary-color, #101010)));
  box-shadow: none;
  text-transform: var(--btn-text-transform, none);
}

.dtp-address-modal__panel .dtp-address-modal__submit:not([class*="btn--"]):not(.button):not(.wp-element-button):hover,
.dtp-address-modal__panel .dtp-address-modal__submit:not([class*="btn--"]):not(.button):not(.wp-element-button):focus-visible {
  background: var(--btn-background-hover, var(--dtp-primary-hover-color, #1f2937));
  border-color: var(--btn-border-color-hover, var(--dtp-primary-hover-color, #1f2937));
  color: var(--btn-text-color-hover, var(--button-text, var(--dtp-button-text-color, #ffffff)));
}

.dtp-address-modal:not(.dtp-address-drawer) .dtp-address-modal__panel .dtp-address-modal__clear:not([class*="btn--"]):not(.button):not(.wp-element-button):focus-visible,
.dtp-address-modal__panel .dtp-address-modal__submit:not([class*="btn--"]):not(.button):not(.wp-element-button):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-color, var(--dtp-primary-color, #101010)) 35%, transparent);
  outline-offset: 2px;
}

.dtp-delivery-modal__list,
.dtp-pickup-modal__list {
  display: grid;
  gap: 12px;
}

.dtp-schedule-modal__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: 0 0 14px;
  padding: 0.75rem 0.875rem;
  border-radius: var(--dtp-theme-radius, var(--radius, 8px));
  border: 1px solid #e6e6e4;
  background: #fafaf9;
}

.dtp-schedule-modal__status--open {
  border-color: color-mix(in srgb, #059669 28%, #e6e6e4);
  background: color-mix(in srgb, #059669 8%, #ffffff);
}

.dtp-schedule-modal__status--closed {
  border-color: #e6e6e4;
  background: #fafaf9;
}

.dtp-schedule-modal__status-title {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 650;
  color: #101010;
}

.dtp-schedule-modal__status--open .dtp-schedule-modal__status-title {
  color: #047857;
}

.dtp-schedule-modal__status-detail {
  font-size: var(--text-xs, 0.8125rem);
  font-weight: 500;
  color: #6e6e6b;
}

.dtp-schedule-modal__list {
  display: grid;
  gap: 8px;
}

.dtp-schedule-modal__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.dtp-schedule-modal__row:last-child {
  border-bottom: 0;
}

.dtp-schedule-modal__row.is-today {
  margin: 0 -0.5rem;
  padding: 8px 0.5rem;
  /*
   * The same radius chain as the status bar directly above it. This was a hardcoded 6px,
   * so on a theme with rounder corners the highlighted day and the "Open now" bar it sits
   * under disagreed by a couple of pixels — small, but it is the one row that is supposed
   * to look deliberate.
   */
  border-radius: var(--dtp-theme-radius, var(--radius, 8px));
  border-bottom-color: transparent;
  background: color-mix(in srgb, #059669 9%, #ffffff);
}

.dtp-schedule-modal__row.is-today + .dtp-schedule-modal__row {
  border-top: 1px solid #eef2f7;
}

.dtp-schedule-modal__row.is-today .dtp-schedule-modal__day {
  color: #047857;
}

.dtp-schedule-modal__day {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  color: #101010;
}

.dtp-schedule-modal__hours {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
  color: #101010;
  text-align: right;
  white-space: nowrap;
}

.dtp-schedule-modal__row.is-closed .dtp-schedule-modal__hours {
  color: #6e6e6b;
  font-style: italic;
}

.dtp-schedule-modal__note {
  margin: 12px 0 0;
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.4;
  color: #6e6e6b;
}

.dtp-delivery-modal__item,
.dtp-pickup-modal__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.875rem 1rem;
  border: 1px solid #e6e6e4;
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  padding: 12px;
}

.dtp-delivery-modal__item[data-dtp-delivery-select] {
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dtp-delivery-modal__item[data-dtp-delivery-select]:hover,
.dtp-delivery-modal__item[data-dtp-delivery-select]:focus-visible {
  border-color: color-mix(in srgb, var(--dtp-link-color, var(--dtp-primary-color, currentColor)) 35%, #e6e6e4);
  outline: none;
}

.dtp-delivery-modal__item[data-dtp-delivery-select]:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dtp-link-color, var(--dtp-primary-color, #101010)) 28%, transparent);
}

.dtp-delivery-modal__item-main,
.dtp-pickup-modal__item-main {
  min-width: 0;
}

.dtp-delivery-modal__item-meta,
.dtp-pickup-modal__item-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.625rem;
  min-width: max-content;
}

.dtp-delivery-modal__item-name,
.dtp-pickup-modal__item-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.dtp-delivery-modal__item-desc {
  margin: 0 0 0.35rem;
  font-size: var(--text-xs, 0.8125rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--dtp-description-color, #6e6e6b);
}

.dtp-delivery-modal__item-eta {
  margin-top: 0.25rem;
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.4;
  color: var(--dtp-muted-text-color, color-mix(in srgb, currentColor 70%, transparent));
}

.dtp-delivery-modal__item-cost {
  font-size: var(--dtp-text-s, 0.875rem);
  color: #374151;
  margin-bottom: 0;
  text-align: right;
  white-space: nowrap;
}

.dtp-delivery-modal__item-note {
  font-size: var(--text-xs, 0.8125rem);
  color: #6e6e6b;
  margin-bottom: 8px;
}

.dtp-delivery-modal__item.is-disabled {
  background: var(--dtp-modal-disabled-row-bg, #f3f4f6);
  cursor: default;
}

/* ---------------------------------------------------------------------------
 * The chosen option looks chosen
 *
 * A grey border one shade darker than the others was the whole of it, so which row
 * was active could only be read by comparing it against its neighbours — and the
 * word doing the real work sat in the far corner as body copy.
 *
 * Green because this is a confirmation, not an accent: it says "this is the one
 * you're getting", and it is the one colour a shopper does not have to learn. The
 * accent resolves through the store's own token first, then Automatic.css's success
 * colour, so on an ACSS site it is the same green as every other affirmative state.
 * ------------------------------------------------------------------------ */
.dtp-delivery-modal__item.is-selected {
  --dtp-modal-selected-accent: var(--dtp-selected-accent, var(--success, #16a34a));
  border-color: var(--dtp-modal-selected-accent);
  /* Two rings rather than a thicker border, so nothing reflows when a row is picked. */
  box-shadow: 0 0 0 1px var(--dtp-modal-selected-accent);
  background: color-mix(in srgb, var(--dtp-modal-selected-accent) 7%, transparent);
}

/* ---------------------------------------------------------------------------
 * The mark
 *
 * An empty ring on every choosable row and a filled tick on the chosen one — the
 * shape a radio has, which is what this list is. The tick is drawn from two borders
 * rather than set in the icon font: it is 8px of geometry, and a glyph that has to
 * arrive over the network can land after the row it belongs to.
 * ------------------------------------------------------------------------ */
.dtp-delivery-modal__item-mark {
  --dtp-modal-mark-size: 1.375rem;
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  inline-size: var(--dtp-modal-mark-size);
  block-size: var(--dtp-modal-mark-size);
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  pointer-events: none; /* the card is the hit target */
}

.dtp-delivery-modal__item[data-dtp-delivery-select]:hover .dtp-delivery-modal__item-mark {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.dtp-delivery-modal__item.is-selected .dtp-delivery-modal__item-mark {
  border-color: var(--dtp-modal-selected-accent);
  background: var(--dtp-modal-selected-accent);
}

.dtp-delivery-modal__item.is-selected .dtp-delivery-modal__item-mark::after {
  content: "";
  position: absolute;
  /* Optically centred: a tick's mass sits low and left of the box that contains it. */
  inset-block-start: 45%;
  inset-inline-start: 50%;
  inline-size: 0.3125rem;
  block-size: 0.5625rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .dtp-delivery-modal__item-mark {
    transition: none;
  }
}

.dtp-delivery-modal__item-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.125rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  pointer-events: none; /* card is the hit target */
}

.dtp-delivery-modal__item.is-selected .dtp-delivery-modal__item-select {
  text-decoration: none;
  opacity: 0.85;
}

.dtp-delivery-modal__item-select.is-disabled {
  text-decoration: none;
  opacity: 0.65;
  font-weight: 500;
}

.dtp-pickup-modal__item-address,
.dtp-pickup-modal__item-details {
  font-size: var(--dtp-text-s, 0.875rem);
  color: #4a4a47;
  margin-bottom: 6px;
}

/* Pickup distance (cards + modal) — muted secondary line */
.dtp-pickup-distance {
  font-size: inherit;
  line-height: 1.35;
  color: var(--dtp-description-color, #6e6e6b);
  margin-top: 0.25rem;
  margin-bottom: 0.375rem;
}

.dtp-pickup-modal__item-distance {
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.35;
  color: var(--dtp-description-color, #6e6e6b);
  margin-bottom: 6px;
}

/* Text-link actions: Woo/ACSS `.button` often sets `text-decoration: none !important` — scope to modal roots (hero + calculator) */
.dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button,
.dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button,
.woocommerce .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button,
.woocommerce .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button,
body.bricks-is-frontend .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button,
body.bricks-is-frontend .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button,
body[class*="bricks"] .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button,
body[class*="bricks"] .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  margin: 0;
  padding: 0.125rem 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  line-height: 1.35;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
  filter: none !important;
}

.dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:hover,
.dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
.dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:hover,
.dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible,
.woocommerce .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:hover,
.woocommerce .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
.woocommerce .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:hover,
.woocommerce .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible,
body[class*="bricks"] .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:hover,
body[class*="bricks"] .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
body[class*="bricks"] .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:hover,
body[class*="bricks"] .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  filter: none !important;
}

.dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
.dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible,
.woocommerce .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
.woocommerce .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible,
body[class*="bricks"] .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
body[class*="bricks"] .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 32%, transparent);
  outline-offset: 2px;
}

/* No ACSS/Woo disabled token stack here: match Woo classic + DTP stepper — fade whole control */
.dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:disabled,
.dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:disabled,
.woocommerce .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:disabled,
.woocommerce .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:disabled,
body[class*="bricks"] .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button:disabled,
body[class*="bricks"] .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button:disabled {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-underline-offset: 3px;
  cursor: not-allowed;
  filter: none !important;
  box-shadow: none !important;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .dtp-delivery-modal__item,
  .dtp-pickup-modal__item {
    grid-template-columns: 1fr;
  }

  .dtp-delivery-modal__item-meta,
  .dtp-pickup-modal__item-meta {
    justify-items: start;
    min-width: 0;
  }

  .dtp-delivery-modal__item-cost {
    text-align: left;
  }

  .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button,
  .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button,
  .woocommerce .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button,
  .woocommerce .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button,
  body[class*="bricks"] .dtp-delivery-modal .dtp-delivery-modal__item-select.button.wp-element-button,
  body[class*="bricks"] .dtp-pickup-modal .dtp-pickup-modal__item-select.button.wp-element-button {
    width: 100%;
  }
}

/* Icons added via HTML <i> tags for reliability */

.dtp-shipping-method--selected {
  border: 0 !important;
  background-color: var(--dtp-method-selected-bg) !important;
  box-shadow: var(--dtp-method-selected-shadow) !important;
  outline: none !important;
  transform: none !important;
}

.dtp-shipping-method--selected:hover,
.dtp-shipping-method--selected:active,
.dtp-shipping-method--selected:focus,
.dtp-shipping-method--selected:focus-visible {
  border: 0 !important;
  background-color: var(--dtp-method-selected-bg) !important;
  box-shadow: var(--dtp-method-selected-shadow) !important;
  outline: none !important;
  transform: none !important;
}

.dtp-shipping-method--selection-flash {
  animation: dtp-selection-flash 650ms ease-out;
}

@keyframes dtp-selection-flash {
  0% {
    background-color: color-mix(in srgb, var(--dtp-method-selected-border-color, #101010) 8%, #ffffff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dtp-method-selected-border-color, #101010) 55%, transparent);
  }

  45% {
    background-color: color-mix(in srgb, var(--dtp-method-selected-border-color, #101010) 6%, #ffffff);
    box-shadow: 0 0 0 2px var(--dtp-method-selected-border-color, currentColor);
  }

  100% {
    background-color: var(--dtp-method-selected-bg);
    box-shadow: var(--dtp-method-selected-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtp-shipping-method--selection-flash {
    animation: none;
  }
}

.dtp-delivery-date {
  font-weight: 600;
}

/* Empty message */
.dtp-shipping-methods__empty {
  padding: 1rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-warning-bg-color, #fff7ed);
  color: var(--dtp-warning-text-color, #9a3412);
}

/* Additional homepage layout fixes */
.dtp-calculator *,
.dtp-calculator *::before,
.dtp-calculator *::after {
  box-sizing: border-box !important;
}

/* Ensure form works in constrained containers */
.dtp-calculator__form-row {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

.dtp-calculator__input {
  min-width: 120px !important;
  flex-shrink: 1 !important;
}

/* Ensure form works in constrained containers */

/* Responsive adjustments */
@media (max-width: 480px) {
  .dtp-calculator__buttons {
    flex-direction: column;
    margin-top: 0.5rem;
  }
  
  .dtp-calculator__buttons button {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .dtp-calculator__buttons button:last-child {
    margin-bottom: 0;
  }
  
  .dtp-shipping-method__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Homepage and container-specific fixes for form_only mode */
.dtp-calculator {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dtp-calculator__form {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.dtp-calculator__form-row {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure form inputs work in any container (layout only — do not restyle theme fields). */
.dtp-calculator__input,
#dtp-calculator-form-input,
#dtp-calculator-input {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.dtp-tabs__tab {
  font-family: inherit !important;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .dtp-shipping-method {
    border: 2px solid black;
  }
}

/* Shortcode postcode link styling */
.dtp-postcode-link {
  color: var(--dtp-primary-color, #3b82f6);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.dtp-postcode-link:hover,
.dtp-postcode-link:focus {
  color: var(--dtp-primary-hover-color, #1d4ed8);
  text-decoration: none;
}

.dtp-postcode-link:focus-visible {
  outline: 2px solid var(--dtp-primary-color, #3b82f6);
  outline-offset: 2px;
}

/* Specific styling for "enter postcode" links in dynamic tags */
/* .dtp-enter-postcode-link inherits from .dtp-postcode-link above */
/* Users can override with more specific selectors if needed */

/* Modern stepper styles for number inputs */
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Wrapper for inputs with steppers */
.dtp-stepper-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dtp-border-color, #e8e8e6);
  border-radius: 0.375rem;
  background: white;
  overflow: hidden;
}

.dtp-stepper-wrapper input[type="number"] {
  border: 0;
  text-align: center;
  width: 60px;
  padding: 0.5rem 0.75rem;
  margin: 0;
  box-shadow: none;
  font-size: var(--text, 1rem);
}

.dtp-stepper-button {
  background: var(--dtp-bg-color, #fafaf9);
  border: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dtp-secondary-color, #6e6e6b);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dtp-stepper-button:hover {
  background: var(--dtp-primary-color, #3b82f6);
  color: white;
}

.dtp-stepper-button:active {
  background: var(--dtp-primary-hover-color, #101010);
  color: white;
}

.dtp-stepper-button:first-child {
  border-right: 1px solid var(--dtp-border-color, #e8e8e6);
}

.dtp-stepper-button:last-child {
  border-left: 1px solid var(--dtp-border-color, #e8e8e6);
}

.dtp-stepper-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--dtp-bg-color, #fafaf9);
  color: var(--dtp-secondary-color, #6e6e6b);
}

.dtp-stepper-button:disabled:hover {
  background: var(--dtp-bg-color, #fafaf9);
  color: var(--dtp-secondary-color, #6e6e6b);
}

.dtp-stepper-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Accessibility enhancements for steppers */
.dtp-stepper-button:focus-visible {
  outline: 2px solid var(--dtp-primary-color, #3b82f6);
  outline-offset: -2px;
}

/* Dynamic content loading states - simplified for server-side rendering */
.dtp-dynamic-delivery-cutoff,
.dtp-dynamic-pickup-cutoff,
.dtp-dynamic-pickup-cutoff-store {
    display: inline-block;
    min-width: 100px;
    text-align: left;
}

/* Only keep loading states for cutoff times and pickup (still dynamic) */
.dtp-dynamic-delivery-cutoff:not(.dtp-loaded),
.dtp-dynamic-pickup-cutoff:not(.dtp-loaded),
.dtp-dynamic-pickup-cutoff-store:not(.dtp-loaded) {
    color: #666;
    font-style: italic;
    opacity: 0.8;
    position: relative;
}

.dtp-dynamic-delivery-cutoff:not(.dtp-loaded)::after,
.dtp-dynamic-pickup-cutoff:not(.dtp-loaded)::after,
.dtp-dynamic-pickup-cutoff-store:not(.dtp-loaded)::after {
    content: "...";
    animation: dtp-loading-dots 1.5s infinite;
}

@keyframes dtp-loading-dots {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
}

.dtp-dynamic-delivery-cutoff.dtp-loaded,
.dtp-dynamic-pickup-cutoff.dtp-loaded,
.dtp-dynamic-pickup-cutoff-store.dtp-loaded {
    opacity: 1;
    font-style: normal;
    color: inherit;
}

.dtp-dynamic-delivery-cutoff.dtp-error,
.dtp-dynamic-pickup-cutoff.dtp-error,
.dtp-dynamic-pickup-cutoff-store.dtp-error {
    color: #d63384;
    font-style: italic;
}

/* Improved delivery information styling */
.dtp-delivery-info {
    background: var(--dtp-info-bg-color, #eff6ff);
    border: 1px solid var(--dtp-border-color, #e8e8e6);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
}

.dtp-delivery-info .dtp-delivery-date {
    font-weight: 600;
    color: var(--dtp-info-text-color, var(--dtp-on-surface, currentColor));
}

.dtp-delivery-info .dtp-cutoff-info {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

/* Enhanced pickup information */
.dtp-pickup-info {
    background: var(--dtp-success-bg-color, #ecfdf5);
    border: 1px solid var(--dtp-success-color, #10b981);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
}

.dtp-pickup-info .dtp-pickup-availability {
    font-weight: 600;
    color: var(--dtp-success-text-color, #065f46);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .dtp-dynamic-delivery-date,
    .dtp-dynamic-delivery-cutoff,
    .dtp-dynamic-pickup-cutoff,
    .dtp-dynamic-pickup-cutoff-store {
        min-width: 80px;
        font-size: 14px;
    }
    
    .dtp-delivery-info,
    .dtp-pickup-info {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Pickup info */
.dtp-pickup-info {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-info-bg-color, color-mix(in srgb, currentColor 8%, transparent));
  color: var(--dtp-info-text-color, var(--dtp-on-surface, currentColor));
  font-size: var(--dtp-text-s, 0.875rem);
}

.dtp-pickup-info__name {
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: var(--text, 1rem);
  color: var(--dtp-info-title-color, var(--dtp-on-surface, currentColor));
}

.dtp-pickup-info__address {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
  font-size: var(--dtp-text-s, 0.875rem);
  line-height: 1.4;
  color: var(
    --dtp-pickup-address-color,
    var(--dtp-description-color, #6e6e6b)
  );
}

.dtp-pickup-info__address-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.125rem;
  min-width: 0;
  width: 100%;
}

.dtp-pickup-info__address-text {
  min-width: 0;
  color: inherit;
}

.dtp-pickup-info__distance {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--dtp-text-s, 0.875rem);
  line-height: 1.4;
  color: var(--dtp-description-color, #6e6e6b);
  white-space: nowrap;
  justify-self: end;
  text-align: right;
}

.dtp-pickup-info__icon,
.dtp-pickup-method .dtp-pickup-info__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
  color: var(--dtp-description-color, #6e6e6b);
}

.dtp-pickup-info__icon i,
.dtp-pickup-method .dtp-pickup-info__icon i {
  font-size: 1.125em;
  line-height: 1;
}

/* Legacy: icon class on the Phosphor element itself */
.dtp-pickup-info__icon.ph,
.dtp-pickup-method .dtp-pickup-info__icon.ph {
  font-size: 1.125rem;
  line-height: 1;
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dtp-pickup-info__icon svg,
.dtp-pickup-info__icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Global pickup service overview — once per pickup panel, not per location card. */
.dtp-pickup-service-summary,
.dtp-fulfilment-service-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 0.75rem 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--dtp-info-bg-color, color-mix(in srgb, currentColor 6%, transparent));
  color: var(--dtp-info-text-color, var(--dtp-description-color, #6e6e6b));
  /* Supporting note, not primary copy: prefer the framework's xs step when one
     is defined, else fall back to the plugin scale. */
  font-size: var(--text-xs, var(--dtp-text-xs, 0.8125rem));
  line-height: 1.45;
}

.dtp-pickup-service-summary--below-cards,
.dtp-fulfilment-service-summary--below-cards,
.dtp-pickup-service-summary--collapsed,
.dtp-fulfilment-service-summary--collapsed {
  margin: 0.75rem 0 0;
}

.dtp-pickup-service-summary--collapsed,
.dtp-fulfilment-service-summary--collapsed {
  display: block;
  padding: 0;
  background: transparent;
}

.dtp-pickup-service-summary__summary,
.dtp-fulfilment-service-summary__summary {
  display: inline;
  cursor: pointer;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--dtp-link-color, var(--dtp-primary-color, currentColor));
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
}

.dtp-pickup-service-summary--collapsed .dtp-pickup-service-summary__summary::-webkit-details-marker,
.dtp-fulfilment-service-summary--collapsed .dtp-fulfilment-service-summary__summary::-webkit-details-marker {
  display: none;
}

.dtp-pickup-service-summary--collapsed .dtp-pickup-service-summary__text,
.dtp-fulfilment-service-summary--collapsed .dtp-fulfilment-service-summary__text {
  margin-top: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--dtp-info-bg-color, color-mix(in srgb, currentColor 6%, transparent));
  color: var(--dtp-info-text-color, var(--dtp-description-color, #6e6e6b));
}

.dtp-pickup-service-summary__icon,
.dtp-fulfilment-service-summary__icon {
  flex: 0 0 auto;
  margin-top: 0.125rem;
  font-size: 1.125em;
  line-height: 1;
  opacity: 0.85;
}

.dtp-pickup-service-summary__text,
.dtp-fulfilment-service-summary__text {
  min-width: 0;
  flex: 1 1 auto;
}

.dtp-pickup-service-summary__text p,
.dtp-fulfilment-service-summary__text p {
  margin: 0 0 0.5rem 0;
}

.dtp-pickup-service-summary__text p:last-child,
.dtp-fulfilment-service-summary__text p:last-child {
  margin-bottom: 0;
}

.dtp-pickup-info__details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 20%, transparent));
  color: var(--dtp-info-details-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.4;
}

.dtp-pickup-info__details-icon {
  flex: 0 0 auto;
  font-size: 1.125em; /* match the other pickup-panel leading icons (map-pin, check, clock, storefront) */
  line-height: 1;
  color: inherit;
  opacity: 0.85;
}

.dtp-pickup-info__details-text {
  min-width: 0;
  flex: 1 1 auto;
}

.dtp-pickup-info__details em {
  font-style: italic;
}

/* Separate pickup availability section (moved out from nested position) */
.dtp-pickup-availability {
  margin-top: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.25rem;
  background-color: var(--dtp-success-bg-color, #ecfdf5);
  color: var(--dtp-success-text-color, #065f46);
  font-size: var(--dtp-text-s, 0.875rem);
  border: 1px solid var(--dtp-success-text-color, #065f46);
}

.dtp-pickup-availability strong {
  font-weight: 600;
  color: var(--dtp-success-text-color, #065f46);
}

/* More locations link */
.dtp-pickup-info__more-locations {
  margin-top: 0.75rem;
  text-align: center;
}

.dtp-pickup-info__more-locations a {
  color: var(--dtp-link-color, var(--dtp-primary-color, currentColor));
  text-decoration: none;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
}

.dtp-pickup-info__more-locations a:hover {
  text-decoration: underline;
}

/* Additional pickup locations */
.dtp-additional-locations {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: var(--dtp-additional-surface-bg, color-mix(in srgb, currentColor 6%, transparent));
  border-radius: 0.25rem;
}

.dtp-additional-locations .dtp-pickup-location {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 14%, transparent));
}

.dtp-additional-locations .dtp-pickup-location:last-child {
  border-bottom: none;
}

.dtp-pickup-location h5 {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  color: var(--dtp-info-title-color, var(--dtp-on-surface, currentColor));
  margin: 0 0 0.25rem 0;
}

.dtp-pickup-location p {
  margin: 0;
  color: var(--dtp-info-text-color, var(--dtp-on-surface, currentColor));
  font-size: var(--text-xs, 0.8125rem);
}

.dtp-pickup-location__details {
  margin-top: 0.25rem !important;
  font-style: italic;
  color: var(--dtp-info-details-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
}

/* Checkout delivery info */
.dtp-checkout-delivery-info {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-success-bg-color, #ecfdf5);
  color: var(--dtp-success-text-color, #065f46);
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
}

.dtp-delivery-date {
  font-weight: 600;
}

/* Empty message */
.dtp-shipping-methods__empty {
  padding: 1rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-warning-bg-color, #fff7ed);
  color: var(--dtp-warning-text-color, #9a3412);
}

/* Pickup method specific styling */
.dtp-pickup-method .dtp-shipping-method__header {
  margin-bottom: 0.35rem;
}

/* Hero band + fee: address and price share one row (matches delivery method name/cost grid). */
/*
 * One column. The second held the cost, which now sits in the band above, and a
 * `1fr auto` grid with nothing in its second track still reserves the gutter — so the
 * address wrapped early against an edge that was not there.
 */
.dtp-pickup-method__primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-xs, 0.75rem);
  margin: 0;
}

.dtp-pickup-method__primary-grid .dtp-pickup-info__address--primary-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  min-width: 0;
  line-height: 1.4;
}

/*
 * The address when it stands on its own in the card body, which is a flex column with no
 * row gap — so each child owns its own space.
 *
 * `:not()` rather than relying on order. The primary-grid rule above deliberately zeroes
 * this margin, because there the grid owns the spacing, but both selectors weigh (0,2,0)
 * and this one is nine lines later — so it won, and the cell it was meant to leave alone
 * got a margin anyway. Excluding the cell makes the two stop competing at all.
 *
 * Symmetric, because it was 0.25rem above and 0.5rem below. The bottom half was also a
 * second owner of the same gap: `.dtp-pickup-info__details` underneath already brings its
 * own top margin, its own top padding and a rule, so the two margins stacked to 16px before
 * the divider. Matching the top leaves the details in charge of the space above itself.
 */
.dtp-pickup-method .dtp-pickup-info__address:not(.dtp-pickup-info__address--primary-cell) {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0.25rem 0;
  line-height: 1.4;
}

.dtp-pickup-method .dtp-pickup-info__details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--dtp-color-border-subtle, rgba(226, 232, 240, 0.5));
  color: var(
    --dtp-info-details-color,
    var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent))
  );
  line-height: 1.4;
}

.dtp-pickup-method .dtp-pickup-info__details-icon {
  flex: 0 0 auto;
  font-size: 1.125em; /* match the other pickup-panel leading icons (map-pin, check, clock, storefront) */
  line-height: 1;
  color: inherit;
  opacity: 0.85;
}

.dtp-pickup-method .dtp-pickup-info__details-text {
  min-width: 0;
  flex: 1 1 auto;
}

.dtp-pickup-method .dtp-pickup-info__details em {
  font-style: italic;
}

.dtp-pickup-method .dtp-pickup-info__details--before-availability {
  margin: 0.5rem 0 0;
  padding-top: 0;
  border-top: 0;
}

.dtp-pickup-method .dtp-pickup-info__details--after-availability {
  margin: 0.75rem 0 0;
  padding-top: 0;
  border-top: 0;
}

/* Enhanced pickup availability button styling */
/* Pickup availability inherits delivery-info styling for consistency */
.dtp-pickup-availability-integrated {
  /* No custom styling - matches .dtp-shipping-method__delivery-info */
}

/* Loading state for auto-triggered calculator results */
.dtp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--dtp-secondary-color, #6e6e6b);
  background-color: var(--dtp-loading-bg, #fafaf9);
  border-radius: 0.375rem;
  border: 1px solid var(--dtp-border-color, #e8e8e6);
}

/* Temporary results container for form-only calculators */
.dtp-temporary-results {
  margin-top: 1rem;
  animation: dtp-fade-in 0.2s ease-in-out;
}

@keyframes dtp-fade-in {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.dtp-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid var(--dtp-primary-color, #3b82f6);
  border-radius: 50%;
  animation: dtp-spin 1s linear infinite;
}

/* Enhanced loading states for cache compatibility */
.dtp-enhanced-loading {
  background: linear-gradient(135deg, var(--dtp-loading-bg, #fafaf9) 0%, #ffffff 100%);
  border-color: var(--dtp-primary-color, #3b82f6);
  color: var(--dtp-primary-color, #3b82f6);
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.dtp-enhanced-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: dtp-shimmer-slide var(--dtp-skeleton-sweep-duration, 1.2s) infinite;
}

.dtp-enhanced-loading::after {
  border-width: 3px;
  border-top-color: var(--dtp-primary-color, #3b82f6);
  border-right-color: transparent;
  border-bottom-color: var(--dtp-primary-color, #3b82f6);
  border-left-color: transparent;
  animation: dtp-enhanced-spin 0.8s ease-in-out infinite;
}

/* Enhanced error states */
.dtp-enhanced-error {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border-color: #ef4444;
  color: #dc2626;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.dtp-enhanced-error p {
  margin: 0 0 0.5rem 0;
}

.dtp-enhanced-error small {
  color: #6e6e6b;
  font-size: var(--text-xs, 0.75rem);
}

.dtp-retry-btn {
  background: var(--dtp-primary-color, #3b82f6);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: var(--dtp-text-s, 0.875rem);
  cursor: pointer;
  margin-top: 0.75rem;
  transition: background-color 0.2s ease;
}

.dtp-retry-btn:hover {
  background: var(--dtp-primary-hover, #101010);
}

.dtp-retry-btn:active {
  transform: translateY(1px);
}

@keyframes dtp-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dtp-enhanced-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* The one consumer that really does travel by `left`: it sets left/width, not inset. */
@keyframes dtp-shimmer-slide {
  0% { left: -100%; }
  100% { left: 100%; }
}
/* Privacy-Safe Skeleton Loading */
.dtp-skeleton-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
  background-size: 200% 100% !important;
  animation: dtp-skeleton-shimmer 1.5s infinite !important;
  color: transparent !important;
}

@keyframes dtp-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Privacy protection - ensure no personal data visible during loading */
.dtp-calculator__input[data-server-postcode]:not(.dtp-skeleton-loading) {
  transition: all 0.3s ease;
}

/* ============================================
   HERO POSTCODE COMPONENT
   Homepage hero section postcode capture
   Uses container queries for modern responsive design
   ============================================ */

.dtp-hero-postcode {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  container-type: inline-size;
  container-name: hero-postcode;
  color: var(--dtp-text-color, inherit);
  /* Match fulfilment cards / calculator results: ACSS --text-xs first */
  --dtp-fulfilment-text-size: var(--text-xs, var(--text-s, 0.8125rem));
  --dtp-text-s: var(--dtp-fulfilment-text-size);
  --dtp-on-surface: var(--dtp-text-color, inherit);
  --dtp-on-surface-muted: var(--dtp-muted-text-color, color-mix(in srgb, currentColor 70%, transparent));
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
}

.dtp-hero-postcode__copy {
  display: grid;
  gap: var(
    --dtp-hero-copy-gap,
    var(
      --acss-paragraph-spacing,
      var(--acss-space-xs, var(--space-xs, 0.5rem))
    )
  );
}

/* Form Container */
.dtp-hero-postcode__form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.dtp-hero-postcode__title {
  margin: 0;
  font-family: var(--heading-font-family, inherit);
  font-size: var(--text-m, var(--h2-font-size, var(--dtp-text-m, 1rem)));
  font-weight: var(--h2-font-weight, var(--heading-font-weight, 700));
  line-height: var(--h2-line-height, 1.25);
  letter-spacing: var(--h2-letter-spacing, 0.06em);
  text-transform: uppercase;
  color: var(
    --dtp-hero-title-color,
    var(
      --acss-color-heading,
      var(--acss-heading, var(--heading-color, var(--acss-h2, var(--dtp-title-color, inherit))))
    )
  );
}

.dtp-hero-postcode__subtitle {
  margin: 0;
  font-size: var(--text-s, var(--dtp-text-s, 0.875rem));
  line-height: 1.5;
  color: var(
    --dtp-hero-subtitle-color,
    var(--text-muted, var(--acss-color-text, var(--acss-text, inherit)))
  );
}

/* Form */
.dtp-hero-postcode__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.dtp-hero-postcode__form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap, 0.75rem);
  align-items: stretch;
  margin: 0;
  padding: 0;
}

/* Theme/Woo `.input-text` often ships margin-bottom — collapses as dead space in flex rows. */
.dtp-hero-postcode__form-row > .dtp-calculator__input,
.dtp-hero-postcode__form-row > .dtp-hero-postcode__input,
.dtp-hero-postcode__form-row > .dtp-postcode-field,
.dtp-hero-postcode__form-row > .dtp-calculator__button,
.dtp-hero-postcode__form-row > .dtp-hero-postcode__button,
.dtp-hero-postcode__form-row > .dtp-calculator__country,
.dtp-hero-postcode__form-row > .dtp-hero-postcode__country {
  margin: 0;
}

.dtp-hero-postcode__input {
  /* Flex sizing shared with `.dtp-calculator__input` via form-row selectors above. */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Layout only — inherit theme `.button` / `.wp-element-button` (same as calculator Check). */
.dtp-hero-postcode__button,
.dtp-hero-postcode__cta-primary {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  text-align: center;
}

/* With fulfilment results: match full calculator — hide hero title/copy, postcode, and CHECK */
.dtp-hero-postcode--loading .dtp-hero-postcode__copy,
.dtp-hero-postcode--has-results .dtp-hero-postcode__copy {
  display: none;
}

.dtp-hero-postcode--loading .dtp-hero-postcode__form-row > .dtp-hero-postcode__input,
.dtp-hero-postcode--loading .dtp-hero-postcode__form-row > .dtp-postcode-field,
.dtp-hero-postcode--loading .dtp-hero-postcode__form-row > .dtp-hero-postcode__button,
.dtp-hero-postcode--loading .dtp-hero-postcode__form-row > .dtp-calculator__country,
.dtp-hero-postcode--has-results .dtp-hero-postcode__form-row > .dtp-hero-postcode__input,
.dtp-hero-postcode--has-results .dtp-hero-postcode__form-row > .dtp-postcode-field,
.dtp-hero-postcode--has-results .dtp-hero-postcode__form-row > .dtp-hero-postcode__button,
.dtp-hero-postcode--has-results .dtp-hero-postcode__form-row > .dtp-calculator__country {
  display: none !important;
}

body.bricks-is-frontend .dtp-hero-postcode--loading .dtp-hero-postcode__form-row > .dtp-hero-postcode__input,
body[class*="bricks"] .dtp-hero-postcode--loading .dtp-hero-postcode__form-row > .dtp-hero-postcode__input,
body.bricks-is-frontend .dtp-hero-postcode--has-results .dtp-hero-postcode__form-row > .dtp-hero-postcode__input,
body[class*="bricks"] .dtp-hero-postcode--has-results .dtp-hero-postcode__form-row > .dtp-hero-postcode__input {
  display: none !important;
}

.dtp-hero-postcode--loading .dtp-hero-postcode__form-row,
.dtp-hero-postcode--has-results .dtp-hero-postcode__form-row {
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* Collapse idle form once loading/results render in the stacked slot. */
.dtp-hero-postcode--loading .dtp-hero-postcode__form,
.dtp-hero-postcode--has-results .dtp-hero-postcode__form {
  display: none;
}

.dtp-hero-postcode--loading,
.dtp-hero-postcode--has-results {
  gap: 0;
}

/* Hidden until submit — avoids empty grid slot padding on initial hero. */
.dtp-hero-postcode__results-slot {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-width: 0;
}

.dtp-hero-postcode--loading .dtp-hero-postcode__results-slot,
.dtp-hero-postcode--has-results .dtp-hero-postcode__results-slot {
  display: grid;
}

.dtp-hero-postcode__results-slot > .dtp-hero-postcode__loading,
.dtp-hero-postcode__results-slot > .dtp-hero-postcode__notice {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
}

/* Error and Loading States */
.dtp-hero-postcode__error,
.dtp-calculator__error,
.dtp-shipping-methods__error {
  padding: 0.75rem 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  color: #dc2626;
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  text-align: center;
}

.dtp-calculator__error {
  width: 100%;
  margin-top: 0.75rem;
}

.dtp-hero-postcode__error {
  width: 100%;
  margin-top: 0;
}

.dtp-hero-postcode__error:not(:empty) {
  margin-top: 0.75rem;
}

.dtp-hero-postcode__loading {
  width: 100%;
  margin-top: 0;
}

.dtp-hero-postcode__loading .dtp-loading-skeleton {
  margin-top: 0;
  margin-bottom: 0;
}

.dtp-hero-postcode__loading .dtp-skeleton-panel {
  gap: 0;
}

.dtp-hero-postcode__loading .dtp-skeleton--card {
  min-height: max(212px, calc(var(--dtp-skeleton-delivery-min, 268px) - 8px));
}

.dtp-hero-postcode__loading .dtp-skeleton--card--pickup {
  min-height: max(192px, calc(var(--dtp-skeleton-pickup-min, 236px) - 8px));
}

.dtp-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--dtp-primary-color, #3b82f6);
  border-right-color: transparent;
  border-radius: 50%;
  animation: dtpSpin 0.6s linear infinite;
}

@keyframes dtpSpin {
  to { transform: rotate(360deg); }
}

/* Notice Banner - shown BELOW form with card styling */
.dtp-hero-postcode__notice {
  --dtp-hero-notice-pad-y: 1rem;
  --dtp-hero-notice-pad-x: 1.125rem;
  padding: var(--dtp-hero-notice-pad-y) var(--dtp-hero-notice-pad-x);
  border-radius: 0.875rem;
  margin-top: 1.5rem;
  border: 1px solid var(--dtp-color-border-subtle, rgba(148, 163, 184, 0.35));
  background: var(--dtp-color-bg-card, #fafaf9);
  color: var(--dtp-color-text-primary, #101010);
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  box-shadow: 0 12px 26px -20px rgba(2, 6, 23, 0.6), 0 4px 12px -10px rgba(2, 6, 23, 0.45);
}

/* Status-based styling */
.dtp-hero-postcode__notice[data-status="both"],
.dtp-hero-postcode__notice[data-status="delivery_only"] {
  border-color: rgba(34, 197, 94, 0.34);
  background: var(--dtp-success-bg, #ecfdf5);
  border-color: color-mix(in srgb, var(--dtp-success-color, #16a34a) 32%, transparent);
  background: color-mix(in srgb, var(--dtp-success-bg, #ecfdf5) 85%, #ffffff);
  color: var(--dtp-color-text-primary, #101010);
}

.dtp-hero-postcode__notice[data-status="collection_only"] {
  border-color: rgba(217, 119, 6, 0.34);
  background: #fffbeb;
  color: var(--dtp-color-text-primary, #101010);
}

.dtp-hero-postcode__notice[data-status="none"] {
  border-color: rgba(234, 88, 12, 0.3);
  background: #fff7ed;
  color: var(--dtp-color-text-primary, #101010);
}

.dtp-hero-postcode__notice[data-status="results"] {
  padding: 0;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Do not inherit legacy notice banner #101010 — follow hero/section contrast tokens. */
  color: inherit;
  /* Fixed modals inside injected HTML must not be trapped: transform/overflow on an ancestor breaks position:fixed */
  overflow: visible;
  transform: none;
}

.dtp-hero-postcode__notice-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}

/* Legacy/orphan close controls from older hero notice markup can render as a floating "X". */
.dtp-hero-postcode__notice > .dtp-hero-postcode__notice-close,
.dtp-hero-postcode__notice-header {
  display: none !important;
}

.dtp-hero-postcode__notice-close {
  padding: 0.375rem;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  border-radius: 0.25rem;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dtp-hero-postcode__notice-close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.08);
}

/* Status List - separate items for delivery and collection */
.dtp-hero-postcode__status-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.dtp-hero-postcode__status-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  background: rgba(255, 255, 255, 0.75);
  padding: 0.625rem 0.75rem;
}

.dtp-hero-postcode__status-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.dtp-hero-postcode__status-text {
  flex: 1;
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  font-weight: 580;
  line-height: 1.35;
  color: var(--dtp-color-text-primary, #101010);
}

.dtp-hero-postcode__methods {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.dtp-hero-postcode__method-group {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  background: rgba(255, 255, 255, 0.78);
  padding: 0.625rem 0.75rem;
}

.dtp-hero-postcode__method-heading {
  margin: 0 0 0.5rem;
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 640;
  color: var(--dtp-color-text-tertiary, #6e6e6b);
}

.dtp-hero-postcode__method-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.dtp-hero-postcode__method-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
}

.dtp-hero-postcode__method-name {
  font-weight: 560;
  color: var(--dtp-color-text-primary, #101010);
}

.dtp-hero-postcode__method-meta {
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  color: var(--dtp-color-text-tertiary, #6e6e6b);
}

.dtp-hero-postcode__method-item.is-unavailable .dtp-hero-postcode__method-name {
  opacity: 0.72;
}

/* Secondary CTA + Continue: text links (same weight as calculator Clear / change-address).
   Not outline/primary — the fulfilment card is already the primary UI. */
.dtp-hero-postcode__continue,
.dtp-hero-postcode__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--dtp-link-color, currentColor);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Match in-card section gap (0.75rem) above and below — equal inset with method text. */
.dtp-hero-postcode__notice[data-status="results"] > .dtp-hero-postcode__continue,
.dtp-hero-postcode__results-slot .dtp-hero-postcode__continue {
  box-sizing: border-box;
  margin-block: 0.75rem;
  margin-inline: var(--dtp-card-padding, 1.25rem);
  padding: 0;
}

.dtp-hero-postcode__continue:hover,
.dtp-hero-postcode__continue:focus-visible,
.dtp-hero-postcode__cta-secondary:hover,
.dtp-hero-postcode__cta-secondary:focus-visible {
  color: var(--dtp-link-hover-color, var(--dtp-link-color, currentColor));
}

.dtp-hero-postcode__cta-buttons + .dtp-hero-postcode__continue {
  margin-top: 0.75rem;
}

.dtp-hero-postcode__results-host {
  container-type: inline-size;
  container-name: dtp-calculator;
  color: var(--dtp-hero-results-text-color, inherit);
  --dtp-fulfilment-text-size: var(--text-xs, var(--text-s, 0.8125rem));
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
  --dtp-method-bg-color: var(--dtp-hero-results-card-bg, var(--dtp-surface-bg, #ffffff));
  --dtp-method-border-color: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-method-name-color: var(--dtp-hero-results-heading-color, inherit);
  --dtp-text-color: var(--dtp-hero-results-text-color, inherit);
  --dtp-on-surface: var(--dtp-text-color, inherit);
  --dtp-on-surface-muted: var(
    --dtp-hero-results-muted-color,
    var(--dtp-muted-text-color, color-mix(in srgb, currentColor 70%, transparent))
  );
  --dtp-muted-text-color: var(--dtp-hero-results-muted-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-description-color: var(--dtp-hero-results-muted-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-color-border-subtle: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-progress-border-color: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-progress-bg-color: transparent;
  --dtp-progress-heading-color: var(--dtp-hero-results-heading-color, currentColor);
  --dtp-progress-bar-track-color: color-mix(in srgb, currentColor 24%, transparent);
  --dtp-progress-bar-fill-color: var(--dtp-hero-results-heading-color, currentColor);
  --dtp-progress-switch-border-color: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-progress-switch-bg-color: transparent;
  --dtp-progress-switch-text-color: var(--dtp-hero-results-text-color, currentColor);
  /* Avoid color-mix(..., currentColor): parent/hero brand color would tint tab borders */
  --dtp-tabs-border-color: var(--dtp-hero-results-border-color, rgba(15, 23, 42, 0.14));
  --dtp-tabs-bg-color: transparent;
  --dtp-tabs-text-color: var(--dtp-hero-results-text-color, currentColor);
  --dtp-info-bg-color: transparent;
  --dtp-info-text-color: var(--dtp-hero-results-text-color, currentColor);
  --dtp-info-title-color: var(--dtp-hero-results-heading-color, currentColor);
  --dtp-info-details-color: var(--dtp-hero-results-muted-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-link-color: var(--dtp-hero-results-link-color, currentColor);
  --dtp-link-hover-color: var(--dtp-hero-results-link-hover-color, var(--dtp-link-color, currentColor));
}

/* Hero results inherit card contrast tokens; availability strong/links scoped in .dtp-shipping-method rules. */
.dtp-hero-postcode__results-host .dtp-shipping-method {
  color: var(--dtp-info-text-color, var(--dtp-text-color, inherit));
}

.dtp-hero-postcode[data-theme="auto"] .dtp-hero-postcode__results-host {
  --dtp-hero-results-text-color: var(--dtp-text-color, currentColor);
  --dtp-hero-results-muted-color: var(--dtp-muted-text-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-hero-results-link-color: var(--dtp-link-color, currentColor);
  --dtp-hero-results-heading-color: var(--dtp-text-color, currentColor);
}

.dtp-hero-postcode__results-host .dtp-shipping-methods {
  margin-top: 0;
  margin-bottom: 0;
}

.dtp-hero-postcode__results-host .dtp-tabs {
  margin-top: 0;
  margin-bottom: 0;
}

.dtp-hero-postcode__results-host .dtp-pickup-locations {
  margin-bottom: 0;
}

.dtp-hero-postcode__results-host .dtp-pickup-service-summary--collapsed {
  margin-top: 0.5rem;
}

.dtp-hero-postcode__progress {
  margin-top: 0.875rem;
}

/* Hero in-card threshold strip: ACSS token -> DTP token -> fallback */
.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress {
  margin: 0 calc(var(--dtp-hero-notice-pad-x) * -1) calc(var(--dtp-hero-notice-pad-y) * -1);
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0 0 0.875rem 0.875rem;
  padding: 0.875rem var(--dtp-hero-notice-pad-x) 0.8125rem;
  background: var(--dtp-free-shipping-strip-bg, #101010);
  color: var(--dtp-free-shipping-strip-text, #fafaf9);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__heading {
  color: inherit;
  margin-bottom: 0.5rem;
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__heading i {
  color: var(--dtp-free-shipping-strip-icon, #d6d6d3);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__copy,
.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__amount,
.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__tax-suffix {
  color: inherit;
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__bar {
  background: rgba(148, 163, 184, 0.35);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__bar span {
  background: var(--dtp-free-shipping-strip-text, #fafaf9);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success {
  background: #065f46;
  border-top-color: rgba(110, 231, 183, 0.45);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success .dtp-free-shipping-progress__heading i {
  color: #6ee7b7;
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar {
  background: rgba(6, 95, 70, 0.55);
  box-shadow: inset 0 0 0 1px rgba(167, 243, 208, 0.28);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar span {
  background: #34d399;
  box-shadow: none;
}

/* CTA Buttons Container (inside notice) */
.dtp-hero-postcode__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
}

/* Primary CTA reuses `.dtp-calculator__button` + theme `.button` — layout only here. */
.dtp-hero-postcode__cta-primary {
  flex: 1 1 auto;
  min-width: 150px;
}

.dtp-hero-postcode__cta-buttons .dtp-hero-postcode__cta-secondary {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  justify-content: flex-start;
}

/* Modern Container Queries for Responsive Design */
/* Prevents overflow issues regardless of parent container width */
@container hero-postcode (min-width: 500px) {
  .dtp-hero-postcode__form-row {
    flex-direction: row;
  }
  
  .dtp-hero-postcode__cta-buttons {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  
  .dtp-hero-postcode__cta-primary,
  .dtp-hero-postcode__cta-secondary {
    flex: 0 1 auto;
  }
}

@container hero-postcode (max-width: 499px) {
  .dtp-hero-postcode__form-row {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  
  .dtp-hero-postcode__form-row .dtp-hero-postcode__input,
  .dtp-hero-postcode__form-row .dtp-calculator__country,
  .dtp-hero-postcode__form-row .dtp-hero-postcode__country,
  .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Row is column here, so the base `flex: 1 1 14rem` would apply 14rem as a
       HEIGHT and then grow, stretching the field to ~224px. Reset it. */
    flex: 0 0 auto;
  }
  /* The stretched element is the `.dtp-postcode-field` WRAPPER, not the input: it is a
     direct child of this row, so the base `flex: 1 1 14rem` resolves to a 224px HEIGHT
     once the row flips to column (computed flex read literally `1 1 224px`). The input
     then simply fills its 224px parent. Reset the wrapper; the input follows. */
  .dtp-hero-postcode__form-row > .dtp-postcode-field,
  body.bricks-is-frontend .dtp-hero-postcode__form-row > .dtp-postcode-field,
  body[class*="bricks"] .dtp-hero-postcode__form-row > .dtp-postcode-field,
  .dtp-hero-postcode__form-row .dtp-calculator__input,
  .dtp-hero-postcode__form-row .dtp-hero-postcode__input,
  body[class*="bricks"] .dtp-hero-postcode__form-row .dtp-calculator__input {
    /* No grow: stops the 14rem basis becoming a height in a column row.
       Explicit width: with no grow, the wrapper would otherwise shrink to its
       content instead of filling the row. */
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }


  /* Full-width row: themes often use flex + justify-content:start on buttons; keep label centred */
  .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .dtp-hero-postcode__notice-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .dtp-hero-postcode__notice-message {
    width: 100%;
  }
  
  .dtp-hero-postcode__notice-change {
    width: 100%;
  }
  
  .dtp-hero-postcode__cta-buttons {
    flex-direction: column;
  }
  
  .dtp-hero-postcode__cta-primary,
  .dtp-hero-postcode__cta-secondary {
    width: 100%;
  }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    .dtp-hero-postcode__form-row {
      flex-direction: row;
    }
    
    .dtp-hero-postcode__cta-buttons {
      flex-direction: row;
      flex-wrap: nowrap;
    }
    
    .dtp-hero-postcode__cta-primary,
    .dtp-hero-postcode__cta-secondary {
      flex: 0 1 auto;
    }
  }
  
  @media (max-width: 639px) {
    .dtp-hero-postcode__form-row {
      flex-direction: column;
      flex-wrap: nowrap;
    }
    
    .dtp-hero-postcode__form-row .dtp-hero-postcode__input,
    .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      /* Column direction: stop flex-basis being read as a height. */
      flex: 0 0 auto;
    }
    /* The stretched element is the `.dtp-postcode-field` WRAPPER, not the input: it is a
       direct child of this row, so the base `flex: 1 1 14rem` resolves to a 224px HEIGHT
       once the row flips to column (computed flex read literally `1 1 224px`). The input
       then simply fills its 224px parent. Reset the wrapper; the input follows. */
    .dtp-hero-postcode__form-row > .dtp-postcode-field,
    body.bricks-is-frontend .dtp-hero-postcode__form-row > .dtp-postcode-field,
    body[class*="bricks"] .dtp-hero-postcode__form-row > .dtp-postcode-field,
    .dtp-hero-postcode__form-row .dtp-calculator__input,
    .dtp-hero-postcode__form-row .dtp-hero-postcode__input,
    body[class*="bricks"] .dtp-hero-postcode__form-row .dtp-calculator__input {
      /* No grow: stops the 14rem basis becoming a height in a column row.
         Explicit width: with no grow, the wrapper would otherwise shrink to its
         content instead of filling the row. */
      flex: 0 0 auto !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
    }


    .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    
    .dtp-hero-postcode__notice-header {
      flex-direction: column;
    }
    
    .dtp-hero-postcode__notice-change {
      width: 100%;
    }
    
    .dtp-hero-postcode__cta-buttons {
      flex-direction: column;
    }
  }
}

/* Bricks Builder Compatibility */
body.bricks-is-frontend .dtp-hero-postcode,
body[class*="bricks"] .dtp-hero-postcode {
  display: flex !important;
  flex-direction: column !important;
}

body.bricks-is-frontend .dtp-hero-postcode__form-row,
body[class*="bricks"] .dtp-hero-postcode__form-row {
  display: flex !important;
  gap: 0.75rem !important;
}

body.bricks-is-frontend .dtp-hero-postcode--has-results .dtp-hero-postcode__form-row,
body[class*="bricks"] .dtp-hero-postcode--has-results .dtp-hero-postcode__form-row {
  gap: 0 !important;
}

/* Override Bricks Builder's width: 100% on close button */
body.bricks-is-frontend .dtp-hero-postcode__notice-close,
body[class*="bricks"] .dtp-hero-postcode__notice-close,
.dtp-hero-postcode__notice-close {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  display: inline-flex !important;
}

/* Enhanced loading state for privacy-safe initialization */
.dtp-calculator.dtp-privacy-loading .dtp-calculator__input {
  background: linear-gradient(90deg, #fafaf9 25%, #f1f5f9 50%, #fafaf9 75%);
  background-size: 200% 100%;
  animation: dtp-skeleton-shimmer 1.2s infinite;
}

/* Fulfilment tabs (desktop = 2-col panels, narrow = Shipping/Pickup tabs) */
.dtp-tabs {
  margin-top: 8px;
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
}

.dtp-tabs__list {
  display: none;
}

.dtp-tabs--single-panel .dtp-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  width: 100%;
  padding: 0.375rem;
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  background: var(
    --dtp-tabs-group-bg,
    color-mix(in srgb, currentColor 8%, transparent)
  );
  margin-bottom: 12px;
}

.dtp-tabs__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.dtp-tabs__panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dtp-tabs--single-panel .dtp-tabs__panels {
  display: block;
}

.dtp-tabs--single-panel .dtp-tabs__panel {
  display: none;
  min-height: 0;
}

.dtp-tabs--single-panel .dtp-tabs__panel--active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Single-panel tab switch: reserve height on the panels wrap, not inner card lists. */
.dtp-tabs--single-panel .dtp-tabs__panel .dtp-delivery-methods,
.dtp-tabs--single-panel .dtp-tabs__panel .dtp-shipping-methods,
.dtp-tabs--single-panel .dtp-tabs__panel .dtp-pickup-locations {
  flex: 0 0 auto;
}

.dtp-tabs__panel .dtp-delivery-methods,
.dtp-tabs__panel .dtp-shipping-methods,
.dtp-tabs__panel .dtp-pickup-locations {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.dtp-tabs__panel--delivery .dtp-shipping-method,
.dtp-tabs__panel--collection .dtp-pickup-location--active {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
}

/*
 * Side by side means equal height, and `auto` is side by side.
 *
 * The grid already stretches the two panels to the taller one — but the card inside stopped
 * at its own content, so the shorter column's card ended early and the panel showed bare
 * page beneath it. It read as a bug that appeared on interaction, because on first paint the
 * collection card is a `--preview` and the two happened to match; selecting a store gave it
 * its real content and the columns fell out of step.
 *
 * `.dtp-fulfilment-grid__panel--*` has said exactly this since the split layout was built.
 * `auto` renders tabs markup rather than that grid, so it never picked the rule up — the
 * same intent had to be spelled twice, and only one copy existed.
 *
 * Not in single-panel mode, and not below the stacking breakpoint: with one panel visible
 * there is nothing to be equal to, and growing the card only leaves a dead gap under the
 * title. Switched off again in the (max-width: 560px) block further down.
 */
.dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--delivery .dtp-shipping-method,
.dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--collection .dtp-pickup-location--active {
  flex: 1 1 auto;
  min-height: 100%;
}

/* The slack goes where the split layout puts it: into the body, so the method row sits at
   the foot of the card rather than leaving a gap after it. */
.dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--delivery .dtp-shipping-method > .dtp-shipping-method__body,
.dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--collection .dtp-pickup-location--active > .dtp-shipping-method__body {
  flex: 1 1 auto;
}

.dtp-tabs .dtp-pickup-location--active {
  display: flex;
}

.dtp-tabs--single-panel .dtp-tabs__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Segmented control, not a row of outlined buttons: the tinted track is the container, the
     selected item is the only filled surface, and unselected items stay transparent. An outline
     on every tab competed with the selection and read as three boxes rather than one control.
     Set --dtp-tabs-border-color to bring the outline back. */
  border: 1px solid var(--dtp-tabs-border-color, transparent);
  background: var(--dtp-tabs-bg-color, transparent);
  color: var(
    --dtp-tabs-text-color,
    var(--dtp-tabs-group-text, currentColor)
  );
  padding: 8px 12px;
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.dtp-tabs--single-panel .dtp-tabs__tab:not(.dtp-tabs__tab--active) {
  color: var(--dtp-tabs-inactive-text-color, var(--dtp-muted-text-color, #4a4a47));
}

.dtp-tabs--single-panel .dtp-tabs__tab:not(.dtp-tabs__tab--active):hover {
  background: var(--dtp-tabs-hover-bg-color, color-mix(in srgb, currentColor 6%, transparent));
  color: var(--dtp-tabs-text-color, currentColor);
}

.dtp-tabs--single-panel .dtp-tabs__tab--active,
.dtp-tabs--single-panel .dtp-tabs__tab--active:hover,
.dtp-tabs--single-panel .dtp-tabs__tab--active:active {
  background: var(
    --dtp-tabs-active-bg-color,
    #101010
  );
  color: var(
    --dtp-tabs-active-text-color,
    #fafaf9
  );
  border-color: transparent;
  box-shadow: none;
}

.dtp-tabs--single-panel .dtp-tabs__tab--active:focus:not(:focus-visible) {
  outline: none;
}

.dtp-tabs--single-panel .dtp-tabs__tab:focus-visible {
  outline: 2px solid var(--dtp-tabs-focus-ring, rgba(15, 23, 42, 0.35));
  outline-offset: 2px;
  border-color: var(
    --dtp-tabs-border-color,
    rgba(15, 23, 42, 0.14)
  );
  box-shadow: none;
}

.dtp-tabs--single-panel .dtp-tabs__tab--active:focus-visible {
  outline: 2px solid var(--dtp-tabs-active-focus-ring, rgba(248, 250, 252, 0.55));
  outline-offset: 2px;
  box-shadow: none;
}

.dtp-fulfilment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 0);
}

/* Tuck split cards under the controls row (no duplicate “form row” whitespace). */
.dtp-calculator__results .dtp-fulfilment-grid {
  margin-top: 0;
}

.dtp-fulfilment-grid__panel {
  display: flex;
  flex-direction: column;
}

.dtp-fulfilment-grid__panel--delivery .dtp-shipping-method,
.dtp-fulfilment-grid__panel--collection .dtp-pickup-location--active {
  height: 100%;
}

.dtp-fulfilment-grid__panel .dtp-section-heading {
  margin-top: 0;
}

@media (max-width: 860px) {
  .dtp-fulfilment-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container dtp-calculator (max-width: 560px) {
  /* Side-by-side skeleton stacks; tabs skeleton is already single-column. */
  .dtp-loading-skeleton--split .dtp-skeleton-grid--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) {
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.625rem;
  }

  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 10px;
  }

  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) .dtp-calculator__input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin-bottom: 0;
  }

  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-address-modal__input {
    flex: 0 0 auto !important;
    width: 100%;
    margin-bottom: 0;
  }

  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) > .dtp-calculator__button,
  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) > .dtp-calculator__reset {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-calculator__button {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none;
    white-space: nowrap;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
    width: 100%;
    padding: 0.375rem;
    border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
    background: var(
      --dtp-tabs-group-bg,
      color-mix(in srgb, currentColor 8%, transparent)
    );
    margin-bottom: 12px;
  }

  .dtp-tabs__tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid var(
      --dtp-tabs-border-color,
      rgba(15, 23, 42, 0.14)
    );
    background: var(--dtp-tabs-bg-color, transparent);
    color: var(
      --dtp-tabs-text-color,
      var(--dtp-tabs-group-text, currentColor)
    );
    padding: 8px 12px;
    border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  }

  .dtp-tabs__tab--active,
  .dtp-tabs__tab--active:hover,
  .dtp-tabs__tab--active:active {
    /* Do not fall back to --dtp-text-color (hero/brand can set it to primary red) */
    background: var(
      --dtp-tabs-active-bg-color,
      #101010
    );
    color: var(
      --dtp-tabs-active-text-color,
      #fafaf9
    );
    border-color: transparent;
    box-shadow: none;
  }

  .dtp-tabs__tab--active:focus:not(:focus-visible) {
    outline: none;
  }

  .dtp-tabs__tab:focus-visible {
    outline: 2px solid var(--dtp-tabs-focus-ring, rgba(15, 23, 42, 0.35));
    outline-offset: 2px;
    border-color: var(
      --dtp-tabs-border-color,
      rgba(15, 23, 42, 0.14)
    );
    box-shadow: none;
  }

  .dtp-tabs__tab--active:focus-visible {
    outline: 2px solid var(--dtp-tabs-active-focus-ring, rgba(248, 250, 252, 0.55));
    outline-offset: 2px;
    box-shadow: none;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panels {
    display: block;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel {
    display: none;
    min-height: 0;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--active {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Stacked: one panel at a time, so there is nothing to equalise against. */
  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--delivery .dtp-shipping-method,
  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--collection .dtp-pickup-location--active {
    flex: 0 1 auto;
    min-height: 0;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--delivery .dtp-shipping-method > .dtp-shipping-method__body,
  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--collection .dtp-pickup-location--active > .dtp-shipping-method__body {
    flex: 0 1 auto;
  }

  /* Narrow auto/tabs: same single-panel UX — suppress redundant card selection ring */
  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-shipping-method--selected,
  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-shipping-method--selected:hover,
  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-shipping-method--selected:focus {
    box-shadow: none !important;
  }
}

@container hero-postcode (max-width: 560px) {
  .dtp-hero-postcode__loading .dtp-loading-skeleton--split .dtp-skeleton-grid--split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container dtp-calculator (max-width: 430px) {
  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) {
    flex-wrap: wrap !important;
  }

  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Wrapped row: the field wrapper takes its own full-width line too. */
  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) > .dtp-postcode-field {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) .dtp-calculator__input {
    /* 0 0 auto, not 1 0 100%: the latter also stretches when a host theme
       flips the row to column. width:100% still forces its own line. */
    flex: 0 0 auto !important;
    width: 100%;
    /* Row supplies gap: 10px — an extra margin double-spaced the field. */
    margin-bottom: 0;
  }

  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-calculator__input,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-postcode-field,
  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-address-modal__input {
    flex: 0 0 auto !important;
    width: 100%;
    margin-bottom: 0;
  }

  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) > .dtp-calculator__button,
  .dtp-calculator__form-row:not(.dtp-address-drawer__form-row) > .dtp-calculator__reset {
    flex: 1 0 100%;
    width: 100% !important;
    max-width: 100%;
  }

  .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-calculator__button {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none;
  }

  .dtp-calculator--button-layout-inline .dtp-calculator__form-row {
    flex-wrap: wrap !important;
  }

  .dtp-calculator--button-layout-inline .dtp-calculator__input {
    flex: 1 0 100% !important;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .dtp-calculator--button-layout-inline .dtp-calculator__form-row > .dtp-calculator__button {
    flex: 1 0 100%;
    width: 100% !important;
    max-width: 100%;
  }

  .dtp-calculator--button-layout-inline[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100%;
  }

  .dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__form-row > .dtp-calculator__reset {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

.dtp-pickup-location-select {
  margin-bottom: 12px;
}

.dtp-pickup-location-select label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.dtp-pickup-location-select select {
  width: 100%;
  max-width: 100%;
}

.dtp-pickup-location {
  display: none;
}

.dtp-pickup-location--active {
  display: block;
}

.dtp-delivery-prefix {
  font-weight: 600;
  margin-right: 4px;
}

/* Final fulfilment equal-height enforcement (must stay last) */
.dtp-fulfilment-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.dtp-fulfilment-grid__panel {
  min-height: 100%;
}

.dtp-fulfilment-grid__panel .dtp-shipping-methods,
.dtp-fulfilment-grid__panel .dtp-delivery-methods,
.dtp-fulfilment-grid__panel .dtp-pickup-locations {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.dtp-fulfilment-grid__panel--delivery .dtp-shipping-method,
.dtp-fulfilment-grid__panel--collection .dtp-pickup-location--active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  height: auto;
}

.dtp-fulfilment-grid .dtp-pickup-location--active {
  display: flex;
}

/* Use theme/default button styling for Check/Clear */

/* --- Fulfilment card enhancements (bands, availability, hints) --- */

/*
 * `.dtp-fulfilment-band` is the class the renderers add when a block is indoors, so it
 * is where "indoors" is spelled out once rather than per block.
 *
 * A block styled to stand alone ends with a margin, because outdoors it is followed by
 * whatever the page put next. Indoors it is followed by another band that butts against
 * it, and that margin becomes a strip of empty card between two fills. The free-delivery
 * bar had 12px of it and the pickup location row had another 12px — the same fault
 * twice, fixed once here so the next band inherits the answer instead of the bug.
 */
.dtp-fulfilment-band,
.dtp-pickup-method__fulfilment-band,
.dtp-free-shipping-progress.dtp-fulfilment-band--delivery {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * One rule between bands, and none against a filled one
 *
 * Two faults, one system. The method row lost its divider when it moved below the
 * countdown — nothing separated the two — while the availability panel kept one even
 * when it followed the free-delivery band, which already has a surface of its own. A
 * line between two adjacent fills divides nothing; it just draws.
 *
 * So: a band takes a top rule from its predecessor, unless that predecessor is painted.
 * `+` states the relationship rather than each band carrying an assumption about where
 * it sits — which is exactly what broke when the order changed.
 * ------------------------------------------------------------------------ */
/* The rules that draw between bands now live after the borderless reset — see below. */

/*
 * …and the row it divides has to reach the same edges, or the rule stops short.
 *
 * The panel cancels the card's padding with a negative inline margin; the method row
 * never did, because until the reorder it sat above the panel and nothing was drawn
 * between them. So its rule ran the width of the text rather than the width of the
 * card, and the row sat hard against the countdown with no space of its own.
 */
/*
 * Either side of the panel, not just after it.
 *
 * The delivery card puts this row below the panel and the pickup card puts it above,
 * and only the first was named — so the pickup address row was the one block in either
 * card that was not a band: no bleed, no padding of its own, 0px above the text and 8px
 * below it against 14/14 everywhere else. Its spacing came from whatever margin the grid
 * inside it happened to carry.
 */
.dtp-shipping-method > .dtp-availability-panel + .dtp-shipping-method__body,
.dtp-shipping-method > .dtp-shipping-method__body:has(+ .dtp-availability-panel),
.dtp-pickup-location--active > .dtp-availability-panel + .dtp-shipping-method__body,
.dtp-pickup-location--active > .dtp-shipping-method__body:has(+ .dtp-availability-panel) {
  margin-inline: calc(var(--dtp-card-padding, 1.25rem) * -1);
  padding: 0.875rem var(--dtp-card-padding, 1.25rem);
}

/*
 * …and the band's padding is the only thing spacing it, so the grid inside stops adding
 * its own. One owner per axis: 14 + 8 below against 14 above is the lopsided row again,
 * in a different card.
 */
.dtp-shipping-method > .dtp-shipping-method__body:has(+ .dtp-availability-panel) > .dtp-pickup-method__primary-grid,
.dtp-pickup-location--active > .dtp-shipping-method__body:has(+ .dtp-availability-panel) > .dtp-pickup-method__primary-grid {
  margin-block-end: 0;
}

/*
 * …and when that band ends the card, it ends the card.
 *
 * The card's bottom padding is there to inset content. A band is not inset — it reaches
 * both edges and carries its own padding — so beneath the last one the card's padding
 * was simply a strip of empty surface below a fill. The panel already cancels it when
 * the panel is last; the method row now does the same, because since the reorder the
 * row is what's last on the delivery side.
 */
.dtp-shipping-method > .dtp-availability-panel + .dtp-shipping-method__body:last-child,
.dtp-pickup-location--active > .dtp-availability-panel + .dtp-shipping-method__body:last-child {
  margin-block-end: calc(var(--dtp-card-padding, 1.25rem) * -1);
}

/*
 * The trailing gap under a description belongs to the inset body, not to the band.
 *
 * `.dtp-shipping-method__body:last-child .dtp-shipping-method__description` adds 0.75rem
 * "when no ETA panel follows" — but a panel now *precedes* this body, and the body has
 * padding of its own. On any store whose shipping method has a description, that margin
 * lands inside the band and pushes its floor 12px past its ceiling.
 */
.dtp-availability-panel + .dtp-shipping-method__body:last-child .dtp-shipping-method__description {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
 * A widget indoors is a band
 *
 * `.dtp-free-shipping-progress` is styled for life on its own — its own border, its
 * own radius, and a padding of its own choosing. That is right for the shortcode. It
 * is wrong inside the fulfilment card, where every other block is a full-bleed band
 * sharing `--dtp-card-padding`, and it is why the card had three different left edges
 * and a rule that stopped short of both sides.
 *
 * `.dtp-fulfilment-band` is the marker the renderer already adds indoors, so the fix
 * belongs on it: drop the standalone chrome, adopt the card's padding. The shortcode,
 * which never carries this class, is untouched.
 * ------------------------------------------------------------------------ */
.dtp-free-shipping-progress.dtp-fulfilment-band {
  border: 0;
  border-radius: 0;
  padding-inline: var(--dtp-card-padding, 1.25rem);
}

.dtp-calculator[data-theme="dark"] .dtp-fulfilment-band,
.dtp-calculator--theme-dark .dtp-fulfilment-band,
.dtp-hero-postcode[data-theme="dark"] .dtp-fulfilment-band,
.dtp-hero-postcode--theme-dark .dtp-fulfilment-band {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dtp-fulfilment-band__row,
.dtp-pickup-method__fulfilment-band__row,
.dtp-free-shipping-progress__heading {
  font-size: 0.9375em;
  line-height: 1.35;
}

.dtp-pickup-method__fulfilment-band__hint,
.dtp-free-shipping-progress__copy {
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.9;
  margin-top: 0.0625rem;
}

.dtp-pickup-method__fulfilment-band__actions {
  display: block;
  margin-top: 0.375rem;
}

.dtp-fulfilment-directions-link {
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: inherit;
}

.dtp-fulfilment-directions-link:hover,
.dtp-fulfilment-directions-link:focus-visible {
  opacity: 0.88;
}

.dtp-pickup-method__fulfilment-band__distance--pending:not([hidden]) {
  min-width: 3.5rem;
  min-height: 0.875rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 12%, transparent) 0%,
    color-mix(in srgb, currentColor 28%, transparent) 50%,
    color-mix(in srgb, currentColor 12%, transparent) 100%
  );
  background-size: 200% 100%;
  /* Sized for a moving background, so it takes the background-position keyframes. */
  animation: dtp-skeleton-shimmer var(--dtp-skeleton-sweep-duration, 1.2s) ease-in-out infinite;
  color: transparent;
}

/* Results fulfilment cards — no hard border; soft elevation instead of a selection ring */
.dtp-shipping-methods--display .dtp-shipping-method,
.dtp-hero-postcode__results-host .dtp-shipping-method,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-shipping-method,
.dtp-tabs__panel .dtp-shipping-method,
.dtp-fulfilment-grid__panel .dtp-shipping-method {
  --dtp-fulfilment-card-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  border: 0;
  box-shadow: var(--dtp-method-card-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06));
  border-radius: var(--dtp-fulfilment-card-radius);
  overflow: hidden;
  background-color: var(
    --dtp-method-card-surface-bg,
    var(--dtp-method-selected-bg, var(--dtp-method-bg-color, #ffffff))
  );
}

.dtp-shipping-methods--display .dtp-shipping-method:hover,
.dtp-hero-postcode__results-host .dtp-shipping-method:hover,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-shipping-method:hover,
.dtp-tabs__panel .dtp-shipping-method:hover,
.dtp-fulfilment-grid__panel .dtp-shipping-method:hover,
.dtp-shipping-methods--display .dtp-shipping-method:focus,
.dtp-hero-postcode__results-host .dtp-shipping-method:focus,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-shipping-method:focus,
.dtp-tabs__panel .dtp-shipping-method:focus,
.dtp-fulfilment-grid__panel .dtp-shipping-method:focus {
  transform: none;
  box-shadow: var(--dtp-method-selected-shadow, 0 2px 4px rgba(15, 23, 42, 0.07), 0 8px 20px rgba(15, 23, 42, 0.08));
}

.dtp-shipping-methods--display .dtp-shipping-method--selected,
.dtp-hero-postcode__results-host .dtp-shipping-method--selected,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-shipping-method--selected,
.dtp-tabs__panel .dtp-shipping-method--selected,
.dtp-fulfilment-grid__panel .dtp-shipping-method--selected {
  border: 0 !important;
  background-color: var(
    --dtp-method-card-surface-bg,
    var(--dtp-method-selected-bg, var(--dtp-method-bg-color, #ffffff))
  ) !important;
  box-shadow: var(--dtp-method-selected-shadow) !important;
}

/* Tab mode: tab strip is the selection affordance — one visible card per tab, no card ring */
.dtp-tabs--single-panel .dtp-shipping-method--selected,
.dtp-tabs--single-panel .dtp-shipping-method--selected:hover,
.dtp-tabs--single-panel .dtp-shipping-method--selected:focus {
  box-shadow: none !important;
}

/* Clip dark fulfilment bands to card radius (no square top corners) */
.dtp-shipping-methods--display .dtp-shipping-method > .dtp-fulfilment-band:first-child,
.dtp-shipping-methods--display .dtp-shipping-method > .dtp-free-shipping-progress:first-child,
.dtp-hero-postcode__results-host .dtp-shipping-method > .dtp-fulfilment-band:first-child,
.dtp-hero-postcode__results-host .dtp-shipping-method > .dtp-free-shipping-progress:first-child,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-shipping-method > .dtp-fulfilment-band:first-child,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-shipping-method > .dtp-free-shipping-progress:first-child,
.dtp-tabs__panel .dtp-shipping-method > .dtp-fulfilment-band:first-child,
.dtp-tabs__panel .dtp-shipping-method > .dtp-free-shipping-progress:first-child,
.dtp-fulfilment-grid__panel .dtp-shipping-method > .dtp-fulfilment-band:first-child,
.dtp-fulfilment-grid__panel .dtp-shipping-method > .dtp-free-shipping-progress:first-child {
  border-top-left-radius: var(--dtp-fulfilment-card-radius);
  border-top-right-radius: var(--dtp-fulfilment-card-radius);
}

/*
 * Nested panels inside results cards keep no chrome of their own.
 *
 * The `border: 0` that used to be here was doing nothing that `.dtp-availability-panel`
 * does not already do in its own base rule — and it was doing one thing besides: the
 * `:not([data-mode="form_only"])` in the third selector counts toward specificity, so
 * this group outranked the band system's adjacency rules and erased the line between the
 * pickup address row and the panel beneath it. The delivery card was unaffected only
 * because its equivalent join lands on `__body`, which this never named. One card had
 * every join ruled and the other had one missing, from a duplicated reset.
 *
 * The shadow is the part that is actually needed here.
 */
.dtp-shipping-methods--display .dtp-shipping-method .dtp-availability-panel,
.dtp-hero-postcode__results-host .dtp-shipping-method .dtp-availability-panel,
.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-shipping-method .dtp-availability-panel,
.dtp-tabs__panel .dtp-shipping-method .dtp-availability-panel,
.dtp-fulfilment-grid__panel .dtp-shipping-method .dtp-availability-panel {
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * One rule between bands, and none against a filled one — and it has to come last
 *
 * A band takes a top rule from its predecessor, unless that predecessor is painted.
 * `+` states the relationship rather than each band carrying an assumption about where
 * it sits, which is what broke when the order changed.
 *
 * This block sits *below* the borderless reset above, and that placement is the rule,
 * not tidiness. Both are three classes, so they tie on specificity and the later one
 * wins — with these written first, `border: 0` silently erased the line between the
 * pickup address row and the panel under it while the identical adjacency on the
 * delivery card, which lands on `__body` rather than the panel, drew fine. One card
 * had every join ruled and the other had a join missing, from one ordering.
 * ------------------------------------------------------------------------ */
.dtp-shipping-method > .dtp-availability-panel + .dtp-shipping-method__body,
.dtp-shipping-method > .dtp-shipping-method__body + .dtp-availability-panel,
.dtp-pickup-location--active > .dtp-availability-panel + .dtp-shipping-method__body,
.dtp-pickup-location--active > .dtp-shipping-method__body + .dtp-availability-panel {
  border-block-start: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 12%, transparent));
}

/* A line between two fills divides nothing; it just draws. */
.dtp-free-shipping-progress + .dtp-availability-panel,
.dtp-free-shipping-progress + .dtp-shipping-method__body,
.dtp-pickup-method__fulfilment-band + .dtp-availability-panel,
.dtp-pickup-method__fulfilment-band + .dtp-shipping-method__body {
  border-block-start: 0;
}

.dtp-availability-panel {
  container-type: inline-size;
  container-name: dtp-availability-panel;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  box-shadow: none;
  border-radius: var(--dtp-theme-radius, var(--radius, var(--btn-radius, 0)));
  overflow: hidden;
  font-weight: 500;
}

/* In-card footer band: full-bleed L/R/bottom (mirrors free-shipping strip at top). */
/*
 * The sideways bleed is unconditional; only the bottom one depends on position.
 *
 * This was one rule keyed on `:last-child`, written when the panel was the final thing
 * in a method. Moving the date above the method row in 1.1.2 stopped it being last, so
 * it silently lost its negative margins and sat one card-padding further in than the
 * band above it — the double indent, and a `:last-child` encoding "and it is at the
 * bottom" as though that were the same fact.
 *
 * Splitting them says what each is actually for: a panel bleeds to the card's edges
 * wherever it sits, and cancels the card's bottom padding only when it is the last
 * thing there.
 */
.dtp-shipping-method > .dtp-shipping-method__body > .dtp-availability-panel,
.dtp-shipping-method > .dtp-availability-panel,
.dtp-pickup-location--active > .dtp-shipping-method__body > .dtp-availability-panel,
.dtp-pickup-location--active > .dtp-availability-panel {
  /*
   * Bleed sideways, nothing vertically. The 0.75rem top and the 10px bottom were gaps
   * between bands that now meet on a rule — the bottom one is what left the countdown
   * sitting in more space below than above it.
   */
  margin-block: 0;
  margin-inline: calc(var(--dtp-card-padding, 1.25rem) * -1);
  border-radius: 0;
}

.dtp-shipping-method > .dtp-shipping-method__body > .dtp-availability-panel:last-child,
.dtp-shipping-method > .dtp-availability-panel:last-child,
.dtp-pickup-location--active > .dtp-shipping-method__body > .dtp-availability-panel:last-child,
.dtp-pickup-location--active > .dtp-availability-panel:last-child {
  margin-block-end: calc(var(--dtp-card-padding, 1.25rem) * -1);
}

.dtp-shipping-method__delivery-info.dtp-availability-panel {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

/*
 * The pickup card stacks wherever it appears.
 *
 * Inside the tabs it already did, and looked right. Outside them — the layout a postcode
 * gets when it reaches collection but not delivery — the same card was laid out as a row:
 * marker band, address body and availability panel side by side, `nowrap`, with flex's
 * default `min-width: auto` so none of them would shrink. At a product column's width they
 * overflowed and the panel, last in line, was squeezed to nothing; it still had text, so it
 * wrapped one character per line into 400px of empty card. Pickup-only postcodes are the
 * shoppers furthest from the yard, and that was the card they saw.
 *
 * rc.26 tried to fix this by letting the row wrap. That worked here and broke the tabbed
 * card, because there the container is a column and `flex-wrap: wrap` makes a column wrap
 * into further columns — the panel inflated from 149px to 400px and the pickup tab grew to
 * more than twice the height of the delivery one. Matching the direction the tabbed card
 * already uses fixes both from the same cause instead of two rules pulling opposite ways:
 * both now measure 241px with a 149px panel.
 *
 * min-width: 0 stays. It is what stops a flex child refusing to shrink below its content,
 * which is the trap underneath all of this.
 */
.dtp-pickup-location > * {
  min-width: 0;
}

/*
 * A channel the shop offers but this postcode cannot have.
 *
 * Dimmed rather than hidden, because "no delivery to you" and "we do not deliver" are
 * different things and only one of them is usually true. Kept focusable so the reason can
 * be read; `--unavailable` is a state, not a disabled control.
 */
.dtp-tabs__tab--unavailable {
  opacity: var(--dtp-tab-unavailable-opacity, 0.55);
}

.dtp-channel-unavailable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dtp-channel-unavailable-gap, var(--space-xxs, 0.5rem));
  padding: var(--dtp-order-progress-stage-gap, var(--space-xs, 0.75rem));
}

.dtp-channel-unavailable__lead {
  margin: 0;
  font-weight: 600;
  color: var(--dtp-color-text-primary, inherit);
}

.dtp-channel-unavailable__alternative {
  margin: 0;
  color: var(--dtp-color-text-muted, #6e6e6b);
}

.dtp-channel-unavailable__change {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.dtp-channel-unavailable__change:hover,
.dtp-channel-unavailable__change:focus-visible {
  color: var(--dtp-link-color, var(--primary, inherit));
}

.dtp-shipping-methods > .dtp-pickup-locations .dtp-pickup-location {
  flex-direction: column;
}

/*
 * The content block leads the card now, so it divides nothing above it.
 *
 * Its top rule and the panel's top margin both date from when the panel followed the
 * method row. Left in place they drew a line under the free-delivery bar and left a
 * band of empty card between the two — a separator with nothing on one side of it.
 */
/*
 * The panel brings no outer spacing of its own, first child or not.
 *
 * These were keyed on `:first-child`, which is wrong whenever the free-delivery bar is
 * present — the bar is first, the panel second, and the rule silently stopped applying
 * on exactly the cards that show it. That left the 12px margin and the content's top
 * border in place: an empty band and a line under a bar that already has a surface.
 *
 * Position is the wrong thing to ask. What separates two bands is stated by the
 * adjacency rules above, so the panel simply carries nothing.
 */
.dtp-shipping-method > .dtp-availability-panel > .dtp-availability-panel__content {
  border-block-start: 0;
}

/*
 * ...and no top padding either, but only when nothing precedes it.
 *
 * This one *is* a question of position, unlike the rules above. The content's top padding
 * is what separates it from the free-delivery bar; with no bar the panel leads the card and
 * that padding lands on top of the card's own, giving 28px above "Get it by" against 14px
 * of card padding everywhere else. The card looked top-heavy on exactly the postcodes with
 * no free-delivery progress to show.
 *
 * So `:first-child` is correct here for the same reason it was wrong there: when the bar is
 * present the panel is second, the rule does not apply, and the separation is kept.
 */
.dtp-shipping-method > .dtp-availability-panel:first-child > .dtp-availability-panel__content {
  padding-block-start: 0;
}

.dtp-availability-panel__content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem var(--dtp-card-padding, 1.25rem);
  min-width: 0;
  border-top: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 12%, transparent));
}

/* Availability lead: icon column aligns with method row; copy column holds primary + details. */
.dtp-availability-panel__lead-copy,
.dtp-availability-panel__lead-copy .dtp-availability-panel__primary,
.dtp-availability-panel__lead-copy .dtp-availability-panel__details,
.dtp-availability-panel__lead-copy .dtp-availability-panel__context,
.dtp-availability-panel__lead-copy .dtp-availability-panel__footer,
.dtp-availability-panel__lead-copy .dtp-fulfilment-context-line,
.dtp-availability-panel__lead-copy .dtp-fulfilment-hours-link {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.dtp-availability-panel__lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  min-width: 0;
}

.dtp-availability-panel__lead-copy {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.dtp-availability-panel .dtp-availability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin-right: 0;
  margin-top: 0.125rem;
  border-radius: 0;
  background: transparent;
}

.dtp-availability-panel .dtp-availability-badge i {
  flex: 0 0 auto;
  font-size: 1.125em;
  line-height: 1;
  color: var(--dtp-description-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
}

.dtp-availability-panel__context .dtp-fulfilment-context-line {
  color: var(--dtp-description-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
}

.dtp-availability-panel .dtp-fulfilment-hours-link {
  color: var(--dtp-link-color, var(--dtp-text-color, var(--dtp-on-surface, currentColor)));
}

/*
 * Availability copy inherits fulfilment card contrast via tokens on .dtp-shipping-method /
 * .dtp-hero-postcode__results-host — not ACSS/Bricks primary on nested strong/button.
 */
.dtp-shipping-method .dtp-availability-panel__content {
  color: var(--dtp-info-text-color, var(--dtp-text-color, inherit));
}

.dtp-shipping-method .dtp-availability-panel__primary .dtp-pickup-availability-value,
.dtp-shipping-method .dtp-availability-panel__primary .dtp-delivery-date,
.dtp-shipping-method .dtp-availability-panel__primary .dtp-delivery-label,
.dtp-shipping-method .dtp-availability-panel__primary .dtp-pickup-availability-label,
body.bricks-is-frontend .dtp-shipping-method .dtp-availability-panel__primary strong.dtp-pickup-availability-value,
body.bricks-is-frontend .dtp-shipping-method .dtp-availability-panel__primary strong.dtp-delivery-date,
body[class*="bricks"] .dtp-shipping-method .dtp-availability-panel__primary strong.dtp-pickup-availability-value,
body[class*="bricks"] .dtp-shipping-method .dtp-availability-panel__primary strong.dtp-delivery-date {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.dtp-shipping-method .dtp-availability-panel__context .dtp-fulfilment-context-line {
  color: var(--dtp-info-details-color, var(--dtp-description-color, color-mix(in srgb, currentColor 72%, transparent)));
}

.dtp-shipping-method .dtp-availability-panel button.dtp-fulfilment-hours-link {
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dtp-link-color, inherit);
  font: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  appearance: none;
}

/*
 * The same reset as the panel copy, at the same specificity: outside the panel a bare
 * <button> is fair game for every theme's button styling, and the base class alone loses.
 */
.dtp-shipping-method .dtp-shipping-method__title button.dtp-fulfilment-hours-link {
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  /* Secondary to the method it belongs to: quieter, and a size down. */
  font-size: var(--dtp-method-hours-link-size, var(--text-xs, 0.8125rem));
  font-weight: 500;
  line-height: 1.35;
  color: var(--dtp-link-color, var(--dtp-description-color, inherit));
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}

.dtp-shipping-method .dtp-shipping-method__title button.dtp-fulfilment-hours-link:hover,
.dtp-shipping-method .dtp-shipping-method__title button.dtp-fulfilment-hours-link:focus-visible {
  color: var(--dtp-link-hover-color, var(--dtp-link-color, inherit));
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dtp-shipping-method .dtp-availability-panel button.dtp-fulfilment-hours-link:hover,
.dtp-shipping-method .dtp-availability-panel button.dtp-fulfilment-hours-link:focus-visible {
  color: var(--dtp-link-hover-color, var(--dtp-link-color, inherit));
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dtp-availability-panel--success,
.dtp-availability-panel--warning,
.dtp-availability-panel--neutral {
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.dtp-availability-panel__urgency {
  --dtp-urgency-accent: #ea580c;
  /* The text has to move with the state too — a grey bar under red type reads as a bug. */
  --dtp-urgency-ink: #9a3412;
  /* Even block padding — the odd 0.8125rem bottom was leaving the row lopsided. */
  padding: 0.875rem var(--dtp-card-padding, 1.25rem);
  border-top: 1px solid color-mix(in srgb, var(--dtp-urgency-accent) 24%, transparent);
  box-shadow: none;
  /*
   * No fill.
   *
   * The countdown already had an icon, a coloured value and a meter; the tint was a
   * fourth device saying the same thing, and on a dark card it resolved to the
   * brightest surface on screen — a nudge outshouting the button it is nudging
   * towards. The rule above and the colour below are enough to separate it.
   */
  /*
   * A surface mixed from the text colour, not a fixed tint.
   *
   * Removing the fill outright left the countdown floating with nothing to separate it,
   * and on a dark ground the calm state had no contrast to sit against. Six per cent of
   * the current ink is faint on white and faint on black — the same relationship either
   * way, which is what a near-white panel could never be.
   */
  background: var(--dtp-urgency-surface, color-mix(in srgb, currentColor 6%, transparent));
  color: var(--dtp-urgency-ink, #9a3412);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.dtp-availability-panel__details {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  width: 100%;
  min-width: 0;
}

.dtp-availability-panel__primary {
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
}

.dtp-availability-panel__primary .dtp-delivery-label,
.dtp-availability-panel__primary .dtp-delivery-date,
.dtp-availability-panel__primary .dtp-pickup-availability-label,
.dtp-availability-panel__primary .dtp-pickup-availability-value {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.dtp-availability-panel__primary .dtp-delivery-phrase,
.dtp-availability-panel__primary .dtp-pickup-availability-phrase {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25rem;
  row-gap: 0.125rem;
}

.dtp-availability-panel__primary .dtp-pickup-availability-label,
.dtp-availability-panel__primary .dtp-delivery-label {
  font-weight: 500;
}

.dtp-availability-panel__primary .dtp-pickup-availability-value,
.dtp-availability-panel__primary .dtp-delivery-date {
  font-weight: 700;
}

.dtp-availability-panel__context .dtp-fulfilment-context-line {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-left: 0;
}

.dtp-availability-panel__urgency .dtp-fulfilment-cutoff__heading i {
  color: var(--dtp-urgency-accent, #ea580c);
}

/* ---------------------------------------------------------------------------
 * Only the figure carries the state
 *
 * "Order within" is true at every point on the clock; the number is the part whose
 * meaning changes as it falls. Colouring the whole line made the label shout in the
 * urgent state and vanish in the calm one — at 22 hours the entire row went pale enough
 * on a dark card to read as switched off.
 *
 * The label keeps the card's own text colour. The value takes the state.
 * ------------------------------------------------------------------------ */
.dtp-availability-panel__urgency .dtp-fulfilment-cutoff__label {
  color: inherit;
}

/* Colour alone, now the pill has gone — the ring and fill were the box in another form. */
.dtp-availability-panel__urgency .dtp-fulfilment-cutoff__value {
  color: var(--dtp-urgency-ink, #9a3412);
}

.dtp-availability-panel__urgency .dtp-fulfilment-cutoff__meter {
  background: color-mix(in srgb, var(--dtp-urgency-accent, #ea580c) 30%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dtp-urgency-accent, #ea580c) 20%, transparent);
}

.dtp-availability-panel__urgency .dtp-fulfilment-cutoff__meter span {
  background: var(--dtp-urgency-accent, #ea580c);
}

.dtp-fulfilment-cutoff__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dtp-fulfilment-cutoff__heading i {
  flex: 0 0 auto;
  font-size: 1.125em;
  line-height: 1;
}

.dtp-fulfilment-cutoff__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.375rem;
  min-width: 0;
  font-weight: 500;
  color: inherit;
}

.dtp-fulfilment-cutoff__label {
  opacity: 0.92;
}

/* ---------------------------------------------------------------------------
 * The method row as its own disclosure
 *
 * When the description is collapsed, the row a shopper would click is already on the
 * card — the method name and its price. Making that the summary saves the second line
 * a "Details" link would cost and puts the control on the thing it describes.
 *
 * The default marker is removed rather than restyled: it sits at the far left of the
 * summary box, which here is the icon column, so it would point at the wrong thing.
 * ------------------------------------------------------------------------ */
.dtp-shipping-method__disclosure {
  min-width: 0;
}

.dtp-shipping-method__summary {
  display: flex;
  align-items: center;
  gap: var(--dtp-method-summary-gap, 0.5rem);
  cursor: pointer;
  list-style: none;
}

.dtp-shipping-method__summary::-webkit-details-marker {
  display: none;
}

.dtp-shipping-method__summary > .dtp-shipping-method__header {
  flex: 1 1 auto;
  min-width: 0;
}

/* Drawn rather than typed, so it inherits the row's colour and needs no icon font. */
.dtp-shipping-method__chevron {
  flex: 0 0 auto;
  inline-size: 0.5em;
  block-size: 0.5em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.dtp-shipping-method__disclosure[open] .dtp-shipping-method__chevron {
  transform: rotate(45deg);
}

.dtp-shipping-method__summary:focus-visible {
  outline: 2px solid var(--dtp-color-border-focus, currentColor);
  outline-offset: 3px;
  border-radius: var(--dtp-note-radius, var(--card-radius, var(--radius, 0.375rem)));
}

@media (prefers-reduced-motion: reduce) {
  .dtp-shipping-method__chevron { transition: none; }
}

/*
 * A countdown is a number, not a badge.
 *
 * This was a pill — padding and a full radius — which reads as a status tag, the same
 * shape the card uses for things that are true rather than things that are running out.
 * The weight and the urgency colour already carry the emphasis; the box was a third
 * device saying what two already said, and it boxed the one value on the card that
 * changes while you look at it.
 *
 * `tabular-nums` stays, and matters more without the box: it is what stops the line
 * shifting as "2 hr 5 min" becomes "2 hr 15 min".
 */
.dtp-fulfilment-cutoff__value {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/*
 * The countdown's meter is gone; the free-delivery one stays.
 *
 * Two bars in one card cancel: nothing tells you which to read. The one that survives
 * is the one that measures something the shopper can act on — spend £250 more. A bar
 * draining over twenty-three hours moves imperceptibly and says nothing the number
 * beside it does not already say.
 *
 * Removed in CSS rather than in the renderer so the element, its data attributes and
 * the script that ticks them are untouched: a store that wants the meter back sets
 * `--dtp-cutoff-meter-display: block`.
 */
.dtp-fulfilment-cutoff__meter {
  display: var(--dtp-cutoff-meter-display, none);
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.dtp-fulfilment-cutoff__meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  transition: width 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .dtp-fulfilment-cutoff__meter span {
    transition: none;
  }
}

.dtp-availability-panel__footer {
  display: block;
  margin-top: 0;
}

.dtp-availability-panel__footer .dtp-fulfilment-hours-link {
  display: inline;
  margin: 0;
  vertical-align: baseline;
}

.dtp-fulfilment-cutoff {
  /*
   * The block separates its own two parts, so a part that isn't there separates nothing.
   *
   * The heading used to carry `margin-bottom: 0.5rem` to stand off the meter. The meter
   * is `display: none` by default, and a margin does not know that — so the countdown sat
   * 22px above the band's floor and 14px below its ceiling, and the row read as sitting
   * too low in a band whose padding was already even.
   *
   * A gap is the same 8px when both parts are present and nothing at all when one is
   * hidden, which is the fact being expressed. It also restores itself for free on a
   * store that turns the meter back on with `--dtp-cutoff-meter-display`.
   */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: inherit;
  line-height: inherit;
}

.dtp-tabs__tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.dtp-tabs__tab-label {
  line-height: 1.2;
}

.dtp-tabs__tab-hint {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.78;
}

.dtp-tabs__tab--active .dtp-tabs__tab-hint {
  opacity: 0.92;
}

.dtp-fulfilment-compare {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 16%, transparent));
  background: color-mix(in srgb, currentColor 3%, transparent);
}

.dtp-fulfilment-compare__copy {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--dtp-muted-text-color, color-mix(in srgb, currentColor 72%, transparent));
}

/* Product page — compact fulfilment trigger + drawer shell */
.dtp-product-fulfilment-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--dtp-theme-radius, var(--radius, 0.625rem));
  background: color-mix(in srgb, currentColor 3%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.dtp-product-fulfilment-trigger:hover,
.dtp-product-fulfilment-trigger:focus-visible {
  border-color: color-mix(in srgb, currentColor 24%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.dtp-product-fulfilment-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  outline-offset: 2px;
}

.dtp-product-fulfilment-trigger__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 78%, transparent);
}

.dtp-product-fulfilment-trigger__icon .ph {
  font-size: 1.125rem;
  line-height: 1;
}

.dtp-product-fulfilment-trigger__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.dtp-product-fulfilment-trigger__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.dtp-product-fulfilment-trigger__summary {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--dtp-muted-text-color, color-mix(in srgb, currentColor 68%, transparent));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.dtp-product-fulfilment-trigger__summary--multi {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.dtp-product-fulfilment-trigger__summary-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtp-product-fulfilment-trigger__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  color: color-mix(in srgb, currentColor 55%, transparent);
}

.dtp-product-fulfilment-trigger__chevron .ph {
  font-size: 1.125rem;
  line-height: 1;
}

.dtp-calculator--product-display-compact .dtp-product-fulfilment-trigger,
.dtp-calculator--product-display-auto .dtp-product-fulfilment-trigger {
  display: flex;
}

.dtp-product-fulfilment-drawer .dtp-calculator__surface {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
}

.dtp-product-fulfilment-drawer .dtp-address-modal__header {
  align-items: center;
}

.dtp-product-fulfilment-drawer__heading {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.dtp-product-fulfilment-drawer__heading .dtp-address-modal__title {
  min-width: 0;
  margin: 0;
}

.dtp-product-fulfilment-drawer__back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #374151;
  cursor: pointer;
}

.dtp-product-fulfilment-drawer__back[hidden] {
  display: none !important;
}

.dtp-product-fulfilment-drawer .dtp-address-modal__close .ph {
  font-size: 1.25rem;
  line-height: 1;
}

.dtp-product-fulfilment-drawer__back:hover,
.dtp-product-fulfilment-drawer__back:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  outline: none;
}

.dtp-product-fulfilment-drawer__back:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color, #101010) 35%, transparent);
}

.dtp-product-fulfilment-drawer .dtp-address-modal__close {
  margin: 0;
}

/* In-drawer method/pickup pickers — same card list as centred modal (list is reparented here). */
.dtp-fulfilment-drawer-picker {
  overflow: visible;
  --dtp-text-color: #101010;
  --dtp-on-surface: #101010;
  --dtp-on-surface-muted: #6e6e6b;
  --dtp-description-color: #6e6e6b;
  --dtp-muted-text-color: #6e6e6b;
  --dtp-info-text-color: #101010;
  --dtp-info-details-color: #6e6e6b;
}

.dtp-fulfilment-drawer-picker .dtp-delivery-modal__list,
.dtp-fulfilment-drawer-picker .dtp-pickup-modal__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.dtp-fulfilment-drawer-picker .dtp-delivery-modal__item,
.dtp-fulfilment-drawer-picker .dtp-pickup-modal__item {
  overflow: visible;
}

.dtp-fulfilment-drawer-picker .dtp-delivery-modal__item-name,
.dtp-fulfilment-drawer-picker .dtp-pickup-modal__item-name {
  font-family: inherit;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: #101010;
  margin-bottom: 4px;
}

/* In-drawer delivery/pickup hours — same step pattern as method/location pickers. */
.dtp-fulfilment-drawer-schedule {
  overflow: visible;
}

.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__content {
  margin: 0;
  padding: 0;
}

.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__status {
  margin-top: 0;
}

.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__list {
  overflow: visible;
}

.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__row {
  overflow: visible;
}

.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__day,
.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__hours {
  overflow: visible;
  text-overflow: clip;
}

/* In the drawer the today row drops the negative-margin bleed (it overflowed there), so every
   row carries the same inline padding instead — otherwise only the highlighted day was indented
   and its text fell out of line with the rest of the week. The status banner and footnote use
   the same value so all text in the panel shares one left edge. */
.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__row {
  padding-inline: 0.875rem;
}

.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__row.is-today {
  margin-inline: 0;
  padding-inline: 0.875rem;
}

.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__note {
  padding-inline: 0.875rem;
}

/* Mirror the day rows: label left, value hard right — the header then reads as a summary of the
   same two columns rather than a separate blob. */
.dtp-fulfilment-drawer-schedule .dtp-schedule-modal__status,
.dtp-schedule-modal__status {
  justify-content: space-between;
}

.dtp-schedule-modal__status .dtp-schedule-modal__status-detail {
  margin-left: auto;
  text-align: right;
}

.dtp-product-fulfilment-drawer--schedule-step .dtp-address-modal__body {
  padding-top: 16px;
  overflow-x: visible;
}

.dtp-product-fulfilment-drawer--schedule-step .dtp-product-fulfilment-drawer__heading .dtp-address-modal__title {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

/* Sub-step titles (change address, select method) — action scale, not hero uppercase. */
.dtp-product-fulfilment-drawer--substep .dtp-product-fulfilment-drawer__heading .dtp-address-modal__title {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.dtp-fulfilment-drawer-picker .dtp-pickup-modal__item-select.button.wp-element-button,
.woocommerce .dtp-fulfilment-drawer-picker .dtp-pickup-modal__item-select.button.wp-element-button,
body.bricks-is-frontend .dtp-fulfilment-drawer-picker .dtp-pickup-modal__item-select.button.wp-element-button,
body[class*="bricks"] .dtp-fulfilment-drawer-picker .dtp-pickup-modal__item-select.button.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  margin: 0;
  padding: 0.125rem 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  line-height: 1.35;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  filter: none !important;
}

.dtp-product-fulfilment-drawer--substep .dtp-address-modal__body {
  padding-top: 16px;
}

.dtp-product-fulfilment-drawer__step {
  overflow: visible;
}

.dtp-product-fulfilment-drawer__step[hidden] {
  display: none !important;
}

.dtp-product-fulfilment-drawer .dtp-address-drawer__form-row,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
}

/* Off-canvas copy lives in drawer chrome — hide duplicate calculator header when the sheet is open. */
.dtp-calculator--product-display-compact .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__header,
.dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__header {
  display: none;
}

/* Auto display: compact drawer on narrow viewports, inline module on desktop */
@media (min-width: 783px) {
  .dtp-calculator--product-display-auto .dtp-product-fulfilment-trigger {
    display: none;
  }

  .dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer {
    position: static;
    inset: auto;
    visibility: visible;
    pointer-events: auto;
    z-index: auto;
  }

  .dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer .dtp-address-modal__backdrop,
  .dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer .dtp-address-modal__header,
  .dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer .dtp-address-modal__help {
    display: none;
  }

  .dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer .dtp-address-modal__panel {
    position: static;
    inset: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    transform: none !important;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer .dtp-address-modal__body {
    padding: 0;
  }
}

@media (max-width: 782px) {
  .dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer:not(.dtp-address-modal--open) .dtp-calculator__surface {
    visibility: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.dtp-calculator--product-display-compact:not(.dtp-calculator--product-display-auto) .dtp-product-fulfilment-drawer:not(.dtp-address-modal--open) .dtp-calculator__surface {
  visibility: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.dtp-calculator--product-display-compact .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__surface,
.dtp-calculator--product-display-auto .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__surface {
  visibility: visible;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ---------------------------------------------------------------------------
   Postcode field: one rule for every stacked context.

   `.dtp-postcode-field` is a wrapper around the input and a direct child of the
   form row. The base rule gives it `flex: 1 1 14rem`. That is right while the row
   is horizontal, but every stacked context below flips the row to column, and then
   the 14rem basis is read on the MAIN axis — i.e. as a 224px HEIGHT — with grow
   filling whatever is left. Removing grow alone then leaves it shrink-to-content
   on the cross axis, so it stops filling the row's width.

   Pin both axes wherever the row stacks: hero at mobile, the product-fulfilment
   and address drawers, and the stacked button layout. Horizontal rows are left
   untouched so the inline field + button layout still works.
   --------------------------------------------------------------------------- */
.dtp-address-drawer__form-row > .dtp-postcode-field,
.dtp-address-modal .dtp-address-drawer__form-row > .dtp-postcode-field,
.dtp-calculator--button-layout-stacked .dtp-calculator__form-row > .dtp-postcode-field,
.dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-postcode-field,
body[class*="bricks"] .dtp-address-drawer__form-row > .dtp-postcode-field,
body[class*="bricks"] .dtp-calculator--button-layout-stacked .dtp-calculator__form-row > .dtp-postcode-field,
body[class*="bricks"] .dtp-product-fulfilment-drawer.dtp-address-modal--open .dtp-calculator__form-row > .dtp-postcode-field {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* The input always fills its wrapper, whichever context the wrapper sits in. */
.dtp-postcode-field > .dtp-calculator__input,
.dtp-postcode-field > .dtp-hero-postcode__input,
.dtp-postcode-field > .dtp-address-modal__input,
body[class*="bricks"] .dtp-postcode-field > .dtp-calculator__input,
body[class*="bricks"] .dtp-postcode-field > .dtp-address-modal__input {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}


/* ---------------------------------------------------------------------------
   Dynamic Bricks tag: updating state.

   Each tag re-fetches its own value after a postcode change, so between the change
   and the response it would sit there showing the previous postcode's date. That
   reads as "my change did nothing", followed by a jump. Shimmer the tag instead,
   sized to the text it is replacing so nothing reflows. JS clears the class on the
   first content mutation, with a 4s backstop.
   --------------------------------------------------------------------------- */
.dtp-tag-updating {
  position: relative;
  color: transparent !important;
  background-image: linear-gradient(
    90deg,
    var(--dtp-skeleton-bg, #e6e6e4) 0%,
    var(--dtp-skeleton-shimmer, rgba(255, 255, 255, 0.6)) 50%,
    var(--dtp-skeleton-bg, #e6e6e4) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--dtp-theme-radius, 0.25rem);
  animation: dtp-tag-updating-shimmer 1.1s ease-in-out infinite;
  /* Deliberately NOT setting display/min-width/height: the tag's own transparent text
     already holds the box at exactly its previous size, so the shimmer swaps in with
     zero reflow. Forcing inline-block here grew the line box 14px -> 23px. */
}

/* Any child text (the tags wrap their value in spans/links) hides with the parent. */
.dtp-tag-updating * {
  color: transparent !important;
  visibility: hidden;
}

@keyframes dtp-tag-updating-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dtp-tag-updating {
    animation: none;
    background-image: none;
    background-color: var(--dtp-skeleton-bg, #e6e6e4);
  }
}

/* Order after-order message ------------------------------------------------
   Rendered after the order table on the confirmation page, the account order
   view and the order email. It is the merchant talking, not order data, so it
   is set apart as a note rather than left to read as stray text under the
   buttons — but deliberately a light one: a heavy card here competes with the
   order totals directly above it.

   OWNS ITS OWN INTERNAL LAYOUT, on purpose. Automatic.css turns every direct
   div child of a <section> into a flex column with `gap: var(--content-gap)`,
   and WooCommerce renders this note exactly there. A margin between the
   paragraphs therefore landed on top of that gap and the two added up. Setting
   display/gap here means one declaration controls the spacing: the class
   selector outranks ACSS's `section > div:where(...)`, so this wins wherever
   that rule applies and behaves identically where it does not.

   Spacing is em-based rather than taken from the ACSS space scale. That scale
   is section rhythm — its *smallest* step is ~1.9rem — so borrowing it for the
   inside of a small note gives a bloated box on ACSS sites and a tight one
   everywhere else. Radius and colour are genuinely shared design decisions and
   do come from the site, via --card-radius/--radius and --primary.

   Email clients drop all of this; paragraph separation there comes from the
   wpautop() markup, which they honour. */
.dtp-order-post-purchase-message {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dtp-note-gap, 0.75em);
  margin-top: var(--dtp-surface-stack-gap, 1rem);
  padding: var(--dtp-note-padding, 0.875em 1em);
  border-radius: var(--dtp-note-radius, var(--card-radius, var(--radius, 0.375rem)));
  background-color: var(--dtp-info-bg-color, color-mix(in srgb, currentColor 5%, transparent));
  color: var(--dtp-info-text-color, var(--dtp-on-surface, currentColor));
  border-left:
    var(--dtp-note-accent-width, 3px) solid
    var(--dtp-info-border-color, var(--primary, #3b82f6));
}

/* The gap above is the single source of separation — zero the theme's own
   paragraph margins so they cannot add to it. */
.dtp-order-post-purchase-message > p {
  margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * Opening hours block (Bricks element and shortcode)
 *
 * The rows themselves are styled with the storefront's schedule modal, which is
 * where the today highlighting already lives. Only the disclosure is new.
 * ------------------------------------------------------------------------ */

.dtp-service-hours__summary {
	cursor: pointer;
	/* The marker is the affordance; without it a collapsed summary reads as a heading. */
	list-style: revert;
}

.dtp-service-hours__disclosure > .dtp-service-hours--table {
	margin-block-start: var(--dtp-service-hours-gap, var(--content-gap, 0.75rem));
}

.dtp-service-hours__heading {
	margin: 0 0 var(--dtp-service-hours-gap, var(--content-gap, 0.5rem));
	font-size: var(--dtp-service-hours-heading-size, var(--text-m, 1.05em));
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * "Order within" urgency states
 *
 * The panel's whole appearance derives from --dtp-urgency-accent plus a text
 * colour, so a state only has to redefine those. Amber stays the default, which
 * means a browser without :has() sees exactly what it saw before rather than
 * something broken.
 *
 * Calm is deliberately neutral. Amber can only mean "soon" if most cards are not
 * amber — when every countdown wore it, the colour carried no information and
 * the eye stopped reading it.
 * ------------------------------------------------------------------------ */

/*
 * The calm state kept its own fill after the base one was removed, so a countdown with
 * hours left still painted a near-white panel while an urgent one — a different rule —
 * did not. One component, two states, and only one of them had been changed.
 */
.dtp-availability-panel__urgency:has(.dtp-fulfilment-cutoff--calm) {
	--dtp-urgency-accent: var(--dtp-color-muted, #64748b);
	/*
	 * A dark-surface value. `--dtp-calm-text` is a slate picked for the white panel this
	 * row used to sit on; with the panel gone it was being asked to sit on the card
	 * itself, where it read as a disabled row rather than a calm one.
	 */
	--dtp-urgency-ink: var(--dtp-calm-ink, currentColor);
}

.dtp-availability-panel__urgency:has(.dtp-fulfilment-cutoff--urgent) {
	--dtp-urgency-accent: #dc2626;
	--dtp-urgency-ink: #991b1b;
	color: #991b1b;
}

/*
 * The meter keeps a visible accent even when calm, so the block still reads as a
 * countdown rather than as another grey row.
 */
.dtp-fulfilment-cutoff--calm .dtp-fulfilment-cutoff__meter span {
	background: color-mix(in srgb, var(--dtp-urgency-accent) 55%, transparent);
}

/*
 * Only the final state draws attention to itself, and only gently. A countdown
 * that pulses for twenty hours is hostile, and one that pulses at all is a
 * problem for anyone who asked not to be moved.
 */
@media (prefers-reduced-motion: no-preference) {
	.dtp-fulfilment-cutoff--urgent .dtp-fulfilment-cutoff__meter span {
		animation: dtp-cutoff-pulse 2s ease-in-out infinite;
	}
}

@keyframes dtp-cutoff-pulse {
	50% { opacity: 0.65; }
}

/*
 * The hours block sizes itself.
 *
 * Dropped into a builder container that shrink-wraps — a flex column with
 * align-items other than stretch, which is a common default — the block collapsed
 * to the width of its longest line and wrapped the rest. Same failure the
 * confirmation map had, and the same fix: width is load-bearing, with a max-width
 * the merchant controls rather than a measured value baked in here.
 */
.dtp-service-hours-block {
	width: 100%;
	max-width: var(--dtp-service-hours-max-width, none);
	/* Two values, because margin-inline takes two. */
	/*
	 * Two values, because margin-inline takes two — the fallback was four, which is
	 * invalid, so the declaration was being dropped whenever no alignment was set.
	 */
	margin-inline: var(--dtp-service-hours-margin, 0 auto);
	text-align: var(--dtp-service-hours-align, inherit);
}

/* ---------------------------------------------------------------------------
 * Leader rules
 *
 * The dotted line between a day and its times, as a menu or a contents page
 * draws it. Scoped to the element's own wrapper: the full-week layout borrows
 * the storefront modal's row markup, and the modal should not sprout dots.
 *
 * Drawn on a pseudo-element that grows into the gap rather than on a border of
 * the row, so it stops at the text on both sides and sits on the baseline
 * instead of under the whole line.
 * ------------------------------------------------------------------------ */

.dtp-service-hours-block--leader .dtp-service-hours__row,
.dtp-service-hours-block--leader .dtp-schedule-modal__row {
	display: flex;
	align-items: baseline;
	gap: var(--dtp-service-hours-leader-gap, 0.5em);
}

.dtp-service-hours-block--leader .dtp-service-hours__day,
.dtp-service-hours-block--leader .dtp-schedule-modal__day {
	display: flex;
	align-items: baseline;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--dtp-service-hours-leader-gap, 0.5em);
}

.dtp-service-hours-block--leader .dtp-service-hours__day::after,
.dtp-service-hours-block--leader .dtp-schedule-modal__day::after {
	content: "";
	flex: 1 1 auto;
	/*
	 * Sits on the baseline, which is where a menu or a contents page puts it — the dots
	 * are a row of type, not a rule beneath the line. The small lift only keeps them clear
	 * of descenders; a token rather than a control, because this is a typographic detail
	 * to tune per theme, not a decision a merchant needs to make.
	 */
	transform: translateY(var(--dtp-service-hours-leader-offset, -0.12em));
	border-block-end: var(--dtp-service-hours-leader-weight, 1px) var(--dtp-service-hours-leader-style, dotted) currentColor;
	opacity: var(--dtp-service-hours-leader-opacity, 0.4);
}

.dtp-service-hours-block--leader .dtp-service-hours__time,
.dtp-service-hours-block--leader .dtp-schedule-modal__hours {
	flex: 0 0 auto;
}

.dtp-service-hours-block--leader-dashed { --dtp-service-hours-leader-style: dashed; }
.dtp-service-hours-block--leader-solid  { --dtp-service-hours-leader-style: solid; }

/*
 * A week of opening hours is a list, so it stays a <ul> — but the bullets are the
 * theme's decoration rather than information, and every theme draws them
 * differently, so the same element looked different on every site. Styled off,
 * semantics kept. Anyone who genuinely wants them back has Bricks' own Style tab.
 */
ul.dtp-service-hours {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.dtp-service-hours .dtp-service-hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dtp-service-hours-gap, var(--content-gap, 0.75rem));
}

/*
 * The hours element's link layout.
 *
 * Honours the same width and alignment properties the list and table layouts do, so the
 * Appearance controls mean the same thing whichever layout is chosen — a control that
 * works on three of four layouts is worse than one that does not exist.
 */
.dtp-service-hours-modal-link {
	width: 100%;
	max-width: var(--dtp-service-hours-max-width, none);
	margin-inline: var(--dtp-service-hours-margin, 0 auto);
	text-align: var(--dtp-service-hours-align, inherit);
}

/* -------------------------------------------------------------------------
 * Order addresses (Bricks element / shortcode)
 * ---------------------------------------------------------------------- */

/*
 * Two addresses are a comparison, so they belong side by side — but this element is
 * dropped into somebody else's column, and a column can be any width. `auto-fit` with a
 * `min()` floor answers that without a media or container query: two tracks whenever
 * there is room for two, one when there is not, and a single address always fills the
 * width. Nothing to configure per breakpoint, and it is correct inside a 300px sidebar
 * and a full-width footer alike.
 */
.dtp-order-addresses {
	display: grid;
	gap: var( --dtp-order-addresses-gap, var( --content-gap, 1.5rem ) );
	grid-template-columns: repeat(
		auto-fit,
		minmax( min( 100%, var( --dtp-order-addresses-min, 14rem ) ), 1fr )
	);
}

/* One track, whatever the width — for a narrow column where the wrap is not wanted. */
.dtp-order-addresses--stacked {
	grid-template-columns: 1fr;
}

.dtp-order-addresses__heading {
	margin-block: 0 var( --dtp-order-addresses-heading-gap, 0.35em );
}

/* Browsers italicise <address>; a postal address is not an aside. */
.dtp-order-addresses__address {
	font-style: normal;
	margin-block: 0;
}

/* Placed by hand — by the shortcode or the Bricks element — so the container owns the
   space above it. The automatic placement after the order table keeps its stack gap,
   because nothing else there is going to separate it from the table. */
.dtp-order-post-purchase-message--placed {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Order message element
 * ---------------------------------------------------------------------- */

/* The element is a wrapper for the renderer's own markup; it carries no spacing of its
   own, because in a builder the container owns placement. */
.dtp-order-message > .dtp-order-post-purchase-message {
	margin-block: 0;
}

/* Plain: the words without the panel, for a layout that already provides one. */
.dtp-order-message--plain > .dtp-order-post-purchase-message {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}