/*
 * Delivery presentation — the UK Delivery page, and the delivery block on a
 * product page.
 *
 * A SEPARATE STYLESHEET, DELIBERATELY. `style.css` carries in-progress work
 * from a parallel workstream, and appending several hundred lines to a file
 * somebody else is editing invites a conflict that neither of us would see
 * until it shipped. It is also genuinely modular: nothing here is used off the
 * delivery surfaces, and it is enqueued only where it is needed.
 *
 * Every colour, face and measure comes from the tokens already declared in
 * `style.css`. Nothing here introduces a new brand value.
 */

/* ------------------------------------------------------------- sections -- */

.lf-dsec {
  /* Generous, and generous in a way that scales: the gap between sections is
     the strongest signal a page is unhurried, and a fixed 4rem reads as
     cramped at 1920 and enormous at 390. */
  /* 6vw was 153px of padding at each end of every section on a 2560 screen —
     roughly 300px of nothing between one heading and the next. Capped so the
     page stays generous without becoming a series of empty screens. */
  /* Measured before: sections at 3.4vw plus a 311px void under the hero made a
     5104px page whose whitespace read as unfinished rather than generous.
     Proportion and typography carry the luxury; emptiness does not. */
  padding-block: clamp(2rem, 2.6vw, 3.25rem);
  border-top: 1px solid var(--lf-line);
}
.lf-dsec:first-of-type { border-top: 0; padding-top: 0; }

/*
 * The wrapper, the policy container and the first section each contributed
 * top padding, which stacked into roughly 180px of nothing between the hero
 * and the first card. The container keeps a single measured gap and the
 * section adds none.
 */
.lf-legal--wide { padding-top: 0; }

.lf-dsec h2 {
  font-family: var(--lf-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--lf-navy);
  margin: 0 0 .75rem;
}
.lf-dsec__title-sm {
  font-family: var(--lf-sans) !important;
  font-size: .78rem !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lf-taupe-mid);
  margin: 0 0 1.75rem !important;
}
.lf-dsec__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lf-dsec__intro {
  font-size: 1.02rem; line-height: 1.65; color: var(--lf-taupe-deep); margin: 0;
}

/* ------------------------------------------------------- delivery tiers -- */

.lf-doptions {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  /* One pixel of gap over a ruled background gives hairline dividers between
     cards without four borders meeting and doubling at every seam. */
  background: var(--lf-line);
  border: 1px solid var(--lf-line);
  grid-template-columns: repeat(var(--lf-opts, 3), minmax(0, 1fr));
}
.lf-doption {
  background: var(--lf-white);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex; flex-direction: column; gap: .5rem;
}
.lf-doption--free { background: var(--lf-cream); }

.lf-doption__name {
  font-family: var(--lf-sans);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--lf-taupe-mid);
  margin: 0;
}
.lf-doption__price {
  font-family: var(--lf-serif);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 400; line-height: 1;
  color: var(--lf-navy);
  margin: .15rem 0 .35rem;
  /* Tabular figures so a column of prices aligns on the decimal rather than
     drifting by the width of a 1. */
  font-variant-numeric: tabular-nums lining-nums;
}
.lf-doption--free .lf-doption__price { color: var(--lf-gold); font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.lf-doption__body {
  font-size: .9rem; line-height: 1.6; color: var(--lf-taupe-deep); margin: 0;
}

/* ----------------------------------------------------------- explainer -- */

.lf-dexplain {
  background: var(--lf-cream);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: start;
}
.lf-dexplain h2 { margin: 0; }
.lf-dexplain__body { display: grid; gap: 1rem; }
.lf-dexplain__body p {
  margin: 0; font-size: 1rem; line-height: 1.7; color: var(--lf-taupe-deep);
  max-width: 40rem;
}

/* ------------------------------------------------------------ benefits -- */

.lf-dbenefits {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(3, 1fr);
}
.lf-dbenefit { display: grid; gap: .5rem; align-content: start; }
.lf-dicon { width: 1.75rem; height: 1.75rem; color: var(--lf-gold); margin-bottom: .35rem; }
.lf-dbenefit__name {
  font-family: var(--lf-serif); font-size: 1.2rem; color: var(--lf-navy); margin: 0;
}
.lf-dbenefit__body {
  font-size: .92rem; line-height: 1.65; color: var(--lf-taupe-deep); margin: 0; max-width: 24rem;
}

/* ----------------------------------------------------------- accordion -- */

.lf-acc { border-top: 1px solid var(--lf-line); max-width: 56rem; }
.lf-acc__item { border-bottom: 1px solid var(--lf-line); }
.lf-acc__h { margin: 0; font-size: inherit; font-weight: inherit; }

.lf-acc__btn {
  /* A real button, reset rather than replaced: it keeps its semantics, its
     keyboard behaviour and its focus ring. */
  appearance: none; background: none; border: 0;
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  /* 3.5rem of vertical padding keeps the target comfortably over the 44px
     minimum at every width. */
  padding: 1.35rem 0;
  font-family: var(--lf-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  color: var(--lf-navy);
  transition: color .2s var(--lf-ease);
}
.lf-acc__btn:hover { color: var(--lf-gold); }
.lf-acc__btn:focus-visible {
  outline: 2px solid var(--lf-gold); outline-offset: 3px; border-radius: 2px;
}

/* A plus that becomes a minus. Two rules, one rotated — no icon swap, so
   nothing reflows and nothing needs a second asset. */
.lf-acc__mark {
  position: relative; flex: 0 0 auto; width: .8rem; height: .8rem;
  color: var(--lf-taupe-mid);
}
.lf-acc__mark::before,
.lf-acc__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: currentColor;
  transition: transform .28s var(--lf-ease);
}
.lf-acc__mark::after { transform: rotate(90deg); }
.lf-acc__btn[aria-expanded="true"] .lf-acc__mark::after { transform: rotate(0deg); }

.lf-acc__panel { padding: 0 0 1.6rem; max-width: 46rem; }
.lf-acc__panel p {
  margin: 0; font-size: .97rem; line-height: 1.72; color: var(--lf-taupe-deep);
}

/* ------------------------------------------------------------ pathways -- */

.lf-dpaths {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--lf-line);
  border: 1px solid var(--lf-line);
  grid-template-columns: repeat(3, 1fr);
}
.lf-dpath { background: var(--lf-white); }
.lf-dpath a {
  display: grid; gap: .3rem; padding: clamp(1.4rem, 2.2vw, 2rem);
  text-decoration: none; height: 100%;
  transition: background .22s var(--lf-ease);
}
.lf-dpath a:hover { background: var(--lf-cream); }
.lf-dpath a:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: -2px; }
.lf-dpath__label {
  font-family: var(--lf-serif); font-size: 1.15rem; color: var(--lf-navy);
}
.lf-dpath__label::after { content: " →"; color: var(--lf-gold); }
.lf-dpath__body { font-size: .88rem; line-height: 1.6; color: var(--lf-taupe-deep); }

/* ============================================ product page delivery block */

/*
 * Bounded, because the column it sits in is not. On a product with no carton
 * or assembly data — a mattress, say — the three-column tab collapses to one
 * and the panel stretched the full content width with its text hugging the
 * left edge, which read as a mistake rather than a panel.
 */
.lf-pdel {
  max-width: 34rem;
  display: grid; gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--lf-cream);
  border-left: 2px solid var(--lf-gold-line);
}
.lf-pdel__head { display: flex; align-items: center; gap: .7rem; }
.lf-pdel__head .lf-dicon { width: 1.35rem; height: 1.35rem; margin: 0; }
.lf-pdel__service {
  font-family: var(--lf-serif); font-size: 1.15rem; color: var(--lf-navy); margin: 0;
}
.lf-pdel__price { font-variant-numeric: tabular-nums lining-nums; }
.lf-pdel__note { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--lf-taupe-deep); }
.lf-pdel__facts {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin: 0; padding: 0; list-style: none;
  font-size: .84rem; color: var(--lf-taupe-mid);
}
.lf-pdel__facts strong { color: var(--lf-taupe-deep); font-weight: 500; }
.lf-pdel__link {
  font-size: .86rem; color: var(--lf-navy); text-decoration: none;
  border-bottom: 1px solid var(--lf-gold-line); padding-bottom: 1px;
  justify-self: start;
}
.lf-pdel__link:hover { border-bottom-color: var(--lf-gold); }
.lf-pdel__link:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 3px; }

/* A short reassurance beside the buy button. Deliberately quiet. */
.lf-buydel {
  display: flex; align-items: center; gap: .55rem;
  margin: .9rem 0 0; font-size: .86rem; color: var(--lf-taupe-deep);
}
/* The icon carried the taupe MID tone against text at taupe DEEP, so it was
   the faintest thing in a line that is already deliberately quiet. Matching the
   text's tone keeps the line subordinate to the CTA, Klarna and rewards without
   letting it fade out of the composition altogether. */
.lf-buydel .lf-dicon { width: 1.15rem; height: 1.15rem; color: var(--lf-taupe-deep); margin: 0; flex: 0 0 auto; }
.lf-buydel a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
               text-decoration-color: var(--lf-gold-line); }
.lf-buydel a:hover { text-decoration-color: var(--lf-gold); }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1100px) {
  .lf-doptions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-dexplain { grid-template-columns: 1fr; }
  .lf-dpaths { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .lf-dbenefits { grid-template-columns: 1fr; gap: 1.75rem; }
  .lf-dpaths { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* One column, and the price steps down so a four-figure charge cannot
     overflow its card on a 390px screen. */
  .lf-doptions { grid-template-columns: 1fr; }
  .lf-doption__price { font-size: 1.9rem; }
  .lf-dsec { padding-block: 2.5rem; }
  .lf-pdel { padding: 1.15rem 1.15rem; }
  .lf-acc__btn { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-acc__mark::before, .lf-acc__mark::after,
  .lf-dpath a, .lf-acc__btn { transition: none; }
}

/* ------------------------------------------- widening the policy container */

/*
 * A policy page of prose wants a 46rem measure. A page of option cards does
 * not — four cards in 46rem are 170px each, which is what the first render
 * produced. The wide variant applies only when a page actually carries a
 * layout, and prose blocks inside it keep the readable measure they had.
 */
.lf-legal--wide { max-width: min(1180px, 100%); }
.lf-legal--wide .lf-legal__block,
.lf-legal--wide .lf-legal__banner { max-width: 46rem; }
.lf-legal--wide .lf-legal__block { margin-inline: 0; }


/* ============================================== the hero highlight + icons */

/*
 * The free-delivery panel beside the page heading, as the concept places it.
 * On its own row rather than absolutely positioned into the hero: the hero is
 * a shared template and reaching into it from a page-specific stylesheet would
 * make every other policy page's heading fragile.
 */
.lf-dhero {
  display: flex; align-items: flex-start; gap: 1.1rem;
  background: var(--lf-cream);
  border: 1px solid var(--lf-gold-line);
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 2rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  max-width: 44rem; margin-left: auto;
}
.lf-dhero__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--lf-gold-line); color: var(--lf-gold);
}
.lf-dhero__icon .lf-dicon { width: 1.5rem; height: 1.5rem; margin: 0; }
.lf-dhero__title {
  font-family: var(--lf-serif); font-size: 1.16rem; color: var(--lf-navy); margin: 0 0 .3rem;
}
.lf-dhero__body { font-size: .9rem; line-height: 1.6; color: var(--lf-taupe-deep); margin: 0; }

/* Option cards: a circular icon, the description, then the price — the order
   the concept uses, which reads as "what is it" before "what does it cost". */
.lf-doption__icon {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--lf-stone); color: var(--lf-gold);
  margin-bottom: .35rem;
}
.lf-doption--free .lf-doption__icon { background: var(--lf-white); }
.lf-doption__icon .lf-dicon { width: 1.4rem; height: 1.4rem; margin: 0; }
.lf-doption__body { flex: 1 1 auto; }
.lf-doption__price {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--lf-line);
}
.lf-doption__per {
  margin: -.15rem 0 0; font-size: .78rem; color: var(--lf-taupe-mid);
}

/* Accordion rows carry an icon and a secondary label, as the concept does. */
.lf-acc__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: .9rem;
}
.lf-acc__icon { display: inline-grid; place-items: center; color: var(--lf-gold); }
.lf-acc__icon .lf-dicon { width: 1.2rem; height: 1.2rem; margin: 0; }
.lf-acc__sub {
  font-family: var(--lf-sans); font-size: .84rem; color: var(--lf-taupe-mid);
  text-align: right; white-space: nowrap;
}
@media (max-width: 720px) {
  /* The secondary label is the first thing to go: it is a hint, and at 390px
     the question itself needs the width. */
  .lf-acc__sub { display: none; }
  .lf-acc__btn { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* ------------------------------------------------------ preparation steps */

.lf-dsteps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, 1fr);
  counter-reset: lf-step;
}
.lf-dstep { display: flex; gap: 1rem; align-items: flex-start; }
.lf-dstep__n {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--lf-gold-line); color: var(--lf-gold);
  font-family: var(--lf-serif); font-size: .95rem; line-height: 1;
}
.lf-dstep__name {
  font-family: var(--lf-serif); font-size: 1.12rem; color: var(--lf-navy); margin: 0 0 .3rem;
}
.lf-dstep__body {
  font-size: .9rem; line-height: 1.65; color: var(--lf-taupe-deep); margin: 0;
}

/* ------------------------------------------------------------------- cta */

.lf-dcta {
  background: var(--lf-navy); color: var(--lf-white);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid; gap: .6rem; justify-items: start;
}
.lf-dcta h2 { color: var(--lf-white); margin: 0; }
.lf-dcta p {
  margin: 0; font-size: 1rem; line-height: 1.7; max-width: 42rem;
  color: rgba(255, 255, 255, .82);
}
.lf-dcta a {
  color: var(--lf-gold-light); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.lf-dcta a:hover { color: var(--lf-white); }
.lf-dcta a:focus-visible { outline: 2px solid var(--lf-gold-light); outline-offset: 3px; }
/* The address printed as a link is a real target, wherever the CTA appears —
   measured at 26px here, which is not something a thumb can hit. */
.lf-dcta__addr {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  word-break: break-word;
}

@media (max-width: 900px) { .lf-dsteps { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ================================ product Delivery & Assembly, three columns */

/*
 * Not three identical cards. Delivery is the decision the customer is making
 * and carries an ivory panel; Assembly is the detail behind it; Before delivery
 * is a short instruction. Boxing all three equally would flatten a hierarchy
 * that exists for a reason.
 */
.lf-pdel3 {
  display: grid;
  grid-template-columns: minmax(0, 31fr) minmax(0, 40fr) minmax(0, 29fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/*
 * The same three-part rhythm, built from what these products actually have.
 *
 * Seven products in the catalogue — every mattress, and nothing else — carry no
 * cartons, no carton weight and no assembly value, so the Assembly column is
 * never emitted for them. The rule above still declared its third track, which
 * held 29% of the width open beside a section that did not exist.
 *
 * Closing that gap into two columns fixed the break and did not fix the page:
 * a heading and one sentence cannot hold 70% of the width, and no amount of
 * type size or padding changes that — the column was thin because it had one
 * thing to say. The third track is back, and the Access checklist is in it.
 *
 * The modifier still comes from the same condition that decides which sections
 * are emitted (`inc/delivery-ui.php`), so the tracks cannot fall out of step
 * with the children: three of each, here and in the rule above.
 */
.lf-pdel3--no-assembly {
  grid-template-columns: minmax(0, 29fr) minmax(0, 36fr) minmax(0, 35fr);
}
/*
 * NO `align-self: stretch` HERE — the columns take their natural height.
 *
 * A stretch rule briefly equalised them so the separators, which are drawn as
 * each column's left border, would span the row instead of stopping short. It
 * was removed by owner decision on 2026-09-05: three columns forced to one
 * height read as three stretched cards, and the composition is meant to be
 * asymmetric. The Delivery card is also genuinely shorter now that the returns
 * box has gone from it, and that shortness is the correct result rather than a
 * gap to close.
 *
 * The consequence is deliberate: a short column has a short rule.
 */

/* Hairline separators between columns, drawn on the columns themselves so a
   missing Assembly column cannot leave a rule with nothing beside it. */
.lf-pdel3__col + .lf-pdel3__col {
  border-left: 1px solid var(--lf-line);
  padding-left: clamp(1.5rem, 3vw, 3rem);
  margin-left: calc(-1 * clamp(1.5rem, 3vw, 3rem) / 2);
}

.lf-pdel3__panel {
  background: var(--lf-cream);
  border: 1px solid var(--lf-gold-line);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  height: 100%;
}
.lf-pdel3__col--delivery { border-left: 0; padding-left: 0; margin-left: 0; }

.lf-pdel3__icon {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--lf-gold-line); color: var(--lf-gold);
  margin-bottom: .85rem;
}
.lf-pdel3__col--delivery .lf-pdel3__icon { background: var(--lf-white); }
.lf-pdel3__icon .lf-dicon { width: 1.25rem; height: 1.25rem; margin: 0; }

.lf-pdel3__h {
  font-family: var(--lf-serif) !important;
  font-size: clamp(1.6rem, 2.1vw, 2rem) !important;
  font-weight: 400; line-height: 1.15;
  color: var(--lf-navy); margin: 0 0 .6rem !important;
}

.lf-pdel3__tier {
  font-family: var(--lf-sans);
  font-size: 1.05rem; font-weight: 500; line-height: 1.4;
  color: var(--lf-navy); margin: 0;
}
.lf-pdel3__price { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.lf-pdel3__tiernote {
  font-size: .85rem; color: var(--lf-taupe-mid); margin: .3rem 0 0;
}
.lf-pdel3__rule {
  border: 0; border-top: 1px solid var(--lf-gold-line);
  margin: 1.1rem 0; height: 0;
}

.lf-pdel3__col p {
  font-size: .95rem; line-height: 1.7; color: var(--lf-taupe-deep); margin: 0 0 .8rem;
}
.lf-pdel3__col p:last-of-type { margin-bottom: 0; }
.lf-pdel3__hint { color: var(--lf-taupe-mid) !important; font-size: .88rem !important; }

.lf-pdel3__link {
  display: inline-block; margin-top: 1.1rem;
  /* 44px of target on touch without becoming a button: measured at 39px with
     .5rem of padding, which clears WCAG AA but not the 44px most touch
     guidance asks for. */
  padding: .72rem 0;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lf-navy); text-decoration: none;
  border-bottom: 1px solid var(--lf-gold-line);
}
.lf-pdel3__link:hover { border-bottom-color: var(--lf-gold); color: var(--lf-gold); }
.lf-pdel3__link:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 3px; }

/* The specification strip. Integrated, not a row of dashboard widgets: no
   boxes, no fills — a hairline above, and the figures given room. */
.lf-pdel3__stats {
  list-style: none; margin: 1.25rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--lf-line);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem;
}
.lf-pdel3__stat { display: grid; justify-items: start; gap: .15rem; }
.lf-pdel3__stat .lf-dicon {
  width: 1.1rem; height: 1.1rem; color: var(--lf-taupe-mid); margin: 0 0 .25rem;
}
.lf-pdel3__statv {
  font-family: var(--lf-serif); font-size: 1.3rem; line-height: 1.1; color: var(--lf-navy);
  font-variant-numeric: lining-nums;
}
.lf-pdel3__statl {
  font-size: .76rem; letter-spacing: .06em; color: var(--lf-taupe-mid);
}

/* ---- the Access checklist ---- */
/*
 * Four preparations, read top to bottom.
 *
 * This replaces a row of four bare words ranged across the width, which was the
 * right information given no shape: the reader met four labels with nothing to
 * do with them. Each is now a named check and one line saying what to check,
 * which is the difference between a caption and an instruction.
 *
 * It reuses the pairing the specification strip already establishes — serif
 * name over a small quiet note — rotated from a row into a list, because these
 * are steps to work through rather than figures to compare. No boxes, no fills,
 * no card borders: the hairlines and the column rule carry the structure, the
 * same way they do in the two columns beside it.
 */
.lf-pdel3__access { list-style: none; margin: 1.15rem 0 0; padding: 0; }

.lf-pdel3__accitem {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: .8rem;
  padding: .85rem 0;
  border-top: 1px solid var(--lf-line);
}
.lf-pdel3__accitem:first-child { border-top: 0; padding-top: 0; }
.lf-pdel3__accitem:last-child { padding-bottom: 0; }

/* A ring, not a tick. These are things to check; a tick states they have been
   done, which is a claim about the reader. It is the icon circle above at small
   scale, so the column reads as part of the same family. */
.lf-pdel3__accmark {
  width: .5rem; height: .5rem; margin-top: .45rem;
  border: 1px solid var(--lf-gold); border-radius: 50%;
  align-self: start;
}
.lf-pdel3__accname {
  font-family: var(--lf-serif); font-size: 1.15rem; line-height: 1.25;
  color: var(--lf-navy);
}
/* Spans rather than paragraphs: `.lf-pdel3__col p` sets the body size and colour
   at a higher specificity than a single class, so a <p> here would have needed
   `!important` to say something quieter. The element that avoids the fight is
   better than the declaration that wins it. */
.lf-pdel3__accnote {
  grid-column: 2; margin-top: .2rem;
  font-size: .85rem; line-height: 1.55; color: var(--lf-taupe-mid);
}

/* One instruction is the whole of this column, so it is set as a statement
   rather than as body copy. `.lf-pdel3__col p` is sized for paragraphs that
   have neighbours; this one has none, and at that size it read as a caption
   under a heading instead of the thing the heading introduces. */
.lf-pdel3--no-assembly .lf-pdel3__col--before p {
  font-size: 1.02rem; line-height: 1.6; color: var(--lf-navy-80);
}

@media (max-width: 1000px) {
  /* Delivery keeps its full width; the other two share the row beneath, which
     preserves the hierarchy instead of dropping straight to one column. */
  .lf-pdel3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-pdel3__col--delivery { grid-column: 1 / -1; }
  .lf-pdel3__col--assembly { border-left: 0; padding-left: 0; margin-left: 0; }

  /* Three children again, so this case wants the same two-column step as every
     other product and takes it from the rule above. The only difference is which
     column starts the second row: Assembly for furniture, Before delivery here,
     and whichever it is must not carry a left rule with nothing to its left. */
  .lf-pdel3--no-assembly .lf-pdel3__col--before {
    border-left: 0; padding-left: 0; margin-left: 0;
  }
}
@media (max-width: 640px) {
  .lf-pdel3 { grid-template-columns: 1fr; gap: 1.75rem; }
  .lf-pdel3__col + .lf-pdel3__col {
    border-left: 0; border-top: 1px solid var(--lf-line);
    padding-left: 0; margin-left: 0; padding-top: 1.75rem;
  }
  /* Three stats in a 390px column would be 100px each; two rows reads better
     than three cramped ones. */
  .lf-pdel3__stats { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================== the editorial hero == */

.lf-dhero2 {
  display: grid;
  /* Headline left, paragraph right, principles across the foot. A three-row
     grid rather than three stacked blocks, so the paragraph aligns to the
     headline's baseline block instead of floating under it. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: end;
  padding-block: clamp(2rem, 3.6vw, 3.75rem) clamp(1.75rem, 3vw, 3rem);
  border-bottom: 1px solid var(--lf-line);
}
.lf-dhero2__eyebrow {
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lf-gold); margin: 0 0 .9rem;
}
.lf-dhero2__h {
  font-family: var(--lf-serif); font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  line-height: 1.04; letter-spacing: -0.015em;
  color: var(--lf-navy); margin: 0;
  max-width: 14ch;
}
.lf-dhero2__lede {
  font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.7;
  color: var(--lf-taupe-deep); margin: 0 0 .4rem; max-width: 36rem;
}

/* The principles row: three short statements on a hairline, spanning the full
   width beneath. Deliberately typographic — no cards, no fills — so it reads as
   a summary rather than as a second pricing section. */
.lf-dprin {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: clamp(1.5rem, 2.4vw, 2rem) 0 0;
  border-top: 1px solid var(--lf-line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.75rem);
}
.lf-dprin__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon name" "icon body";
  column-gap: .8rem; row-gap: .1rem; align-content: start;
}
.lf-dprin__icon {
  grid-area: icon; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--lf-gold-line); color: var(--lf-gold);
}
.lf-dprin__icon .lf-dicon { width: 1.05rem; height: 1.05rem; margin: 0; }
.lf-dprin__name {
  grid-area: name; font-family: var(--lf-serif); font-size: 1.12rem;
  color: var(--lf-navy); line-height: 1.25;
}
.lf-dprin__body {
  grid-area: body; font-size: .88rem; line-height: 1.5; color: var(--lf-taupe-mid);
}

.lf-crumbs--own { padding-top: 1.25rem; }

/* ============================================== free delivery, set apart == */

/*
 * IVORY, NOT NAVY. A saturated full-width band reads as a promotional strip —
 * a coupon or a sale banner — which is the opposite of what this is: a quiet
 * statement of a rule. Warm stone with a single hairline border sits with the
 * page instead of shouting over it, and the £399 carries the weight in type.
 */
.lf-dfree {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  background: var(--lf-cream);
  border: 1px solid var(--lf-gold-line);
  padding: clamp(1.6rem, 2.8vw, 2.6rem) clamp(1.5rem, 3vw, 3rem);
}
.lf-dfree__icon {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--lf-white); border: 1px solid var(--lf-gold-line);
  color: var(--lf-gold);
}
.lf-dfree__icon .lf-dicon { width: 1.7rem; height: 1.7rem; margin: 0; }
.lf-dfree__eyebrow {
  margin: 0 0 .35rem; font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--lf-gold);
}
.lf-dfree__h {
  /* The threshold is the thing to see first. */
  font-family: var(--lf-serif); font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  color: var(--lf-navy); margin: 0 0 .55rem; line-height: 1.12;
}
.lf-dfree__body {
  margin: 0; font-size: .97rem; line-height: 1.7;
  color: var(--lf-taupe-deep); max-width: 44rem;
}
.lf-dfree__assurance {
  margin: 0; padding-left: clamp(1.25rem, 2.6vw, 2.5rem);
  border-left: 1px solid var(--lf-gold-line);
  font-size: .9rem; line-height: 1.5; color: var(--lf-taupe-deep);
  max-width: 12rem;
}
.lf-dfree__cue { color: var(--lf-gold); margin-left: .3rem; }

/* ============================================================ the flow == */

.lf-dflow {
  /* `list-style: none` AND `display: grid`. Both matter: without the first the
     browser draws its own marker beside the designed "01", and without the
     second four <li> stack into a narrow column using a fraction of the width. */
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  position: relative;
}
/* Belt and braces: some resets restore a marker on ::marker specifically. */
.lf-dflow > li::marker { content: none; }

/* One hairline behind the row, with each number sitting on it — the
   progression drawn rather than implied. */
.lf-dflow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.15rem;
  border-top: 1px solid var(--lf-gold-line);
}
.lf-dflow__step { position: relative; padding-top: 3.1rem; }
.lf-dflow__n {
  position: absolute; top: 0; left: 0;
  background: var(--lf-white); padding-right: .8rem;
  font-family: var(--lf-serif); font-size: 2rem; line-height: 1.15;
  color: var(--lf-navy-line); font-variant-numeric: lining-nums;
  letter-spacing: .01em;
}
.lf-dflow__icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--lf-stone); color: var(--lf-gold);
  margin-bottom: .85rem;
}
.lf-dflow__icon .lf-dicon { width: 1.25rem; height: 1.25rem; margin: 0; }
.lf-dflow__name {
  font-family: var(--lf-serif); font-size: 1.2rem; color: var(--lf-navy);
  margin: 0 0 .35rem; line-height: 1.25;
}
.lf-dflow__body {
  font-size: .92rem; line-height: 1.62; color: var(--lf-taupe-deep); margin: 0;
  max-width: 22rem;
}

/* The conclusion: statement leading, explanation beside it, so the diagram
   visibly ends rather than fading out into another paragraph. */
.lf-dconc {
  margin-top: clamp(2rem, 3.4vw, 3rem);
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid var(--lf-line);
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 3rem); align-items: start;
}
.lf-dconc__h {
  font-family: var(--lf-serif); font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.25; color: var(--lf-navy); margin: 0; max-width: 22ch;
}
.lf-dconc__body {
  margin: 0; font-size: 1rem; line-height: 1.72; color: var(--lf-taupe-deep);
}

/* ==================================================== the worked example == */

.lf-dworked {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  background: var(--lf-cream); padding: clamp(1.75rem, 3.4vw, 3rem);
}
.lf-dworked__head h2 { margin: 0 0 .7rem; }
.lf-dworked__head p { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--lf-taupe-deep); }
.lf-dworked__items { list-style: none; margin: 0 0 1rem; padding: 0; }
.lf-dworked__items li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "what amt" "note amt";
  align-items: center; gap: 0 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--lf-gold-line);
}
.lf-dworked__what { grid-area: what; font-size: .98rem; color: var(--lf-navy); }
.lf-dworked__note { grid-area: note; font-size: .8rem; color: var(--lf-taupe-mid); }
.lf-dworked__amt  {
  grid-area: amt; font-family: var(--lf-serif); font-size: 1.35rem;
  color: var(--lf-taupe-mid); font-variant-numeric: tabular-nums lining-nums;
}
.lf-dworked__result {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label value" "note value";
  align-items: center; gap: 0 1rem; margin: 0;
}
.lf-dworked__rlabel {
  grid-area: label; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--lf-taupe-mid);
}
.lf-dworked__rvalue {
  grid-area: value; font-family: var(--lf-serif); font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1; color: var(--lf-navy); font-variant-numeric: tabular-nums lining-nums;
}
.lf-dworked__rnote {
  grid-area: note; font-size: .9rem; color: var(--lf-gold);
  text-decoration: line-through; text-decoration-color: var(--lf-gold-line);
}

/* ======================================================== the timeline == */

.lf-dtime {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.75rem, 2vw, 1.75rem);
  /* One rule running behind the row, so the steps read as a sequence rather
     than five columns that happen to be adjacent. */
  position: relative;
}
.lf-dtime::before {
  content: ""; position: absolute; left: 0; right: 0; top: .55rem;
  border-top: 1px solid var(--lf-line);
}
.lf-dtime__step { position: relative; padding-top: 1.9rem; }
.lf-dtime__n {
  position: absolute; top: 0; left: 0;
  background: var(--lf-white); padding-right: .6rem;
  font-family: var(--lf-serif); font-size: 1rem; color: var(--lf-gold);
  font-variant-numeric: lining-nums;
}
.lf-dtime__name {
  font-family: var(--lf-serif); font-size: 1.08rem; color: var(--lf-navy); margin: 0 0 .25rem;
}
.lf-dtime__body { font-size: .87rem; line-height: 1.55; color: var(--lf-taupe-mid); margin: 0; }
.lf-dtime__note {
  margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--lf-line);
  font-size: .97rem; line-height: 1.7; color: var(--lf-taupe-deep); max-width: 52rem;
}

/* ======================================================== the coverage == */

.lf-dcov {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}
.lf-dcov h2 { margin: 0; grid-row: span 2; }
.lf-dcov__block { padding-left: 1.25rem; border-left: 2px solid var(--lf-line); }
.lf-dcov__block--primary { border-left-color: var(--lf-gold); }
.lf-dcov__block + .lf-dcov__block { margin-top: 1.5rem; }
.lf-dcov__name {
  font-family: var(--lf-serif); font-size: 1.3rem; color: var(--lf-navy); margin: 0 0 .3rem;
}
.lf-dcov__block--primary .lf-dcov__name { font-size: 1.7rem; }
.lf-dcov__body { font-size: .95rem; line-height: 1.7; color: var(--lf-taupe-deep); margin: 0; }

/* ============================================ pathways follow their count */

.lf-dpaths { grid-template-columns: repeat(var(--lf-paths, 3), minmax(0, 1fr)); }

/* ================================================================ the CTA */

.lf-dcta { justify-items: start; gap: .8rem; }
.lf-dcta__lede { color: rgba(255,255,255,.78); font-size: 1.05rem; margin: 0; }
.lf-dcta__btn {
  display: inline-block; margin-top: .6rem;
  padding: .95rem 2rem;
  background: var(--lf-gold); color: var(--lf-navy);
  font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--lf-gold);
  transition: background .2s var(--lf-ease), color .2s var(--lf-ease);
}
.lf-dcta__btn:hover { background: transparent; color: var(--lf-gold-light); }
.lf-dcta__btn:focus-visible { outline: 2px solid var(--lf-gold-light); outline-offset: 3px; }

/* ============================================================ responsive */

@media (max-width: 1000px) {
  .lf-dhero2 { grid-template-columns: 1fr; }
  .lf-dhero2__h { max-width: 18ch; }
  .lf-dflow { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  /* The rule spans the whole row and cannot survive a wrap. */
  .lf-dflow::before { display: none; }
  .lf-dflow__n { background: none; padding-right: 0; }
  .lf-dconc { grid-template-columns: 1fr; }
  .lf-dfree { grid-template-columns: auto minmax(0, 1fr); }
  .lf-dfree__assurance {
    grid-column: 2; padding-left: 0; padding-top: .9rem; max-width: none;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.18);
  }
  .lf-dworked { grid-template-columns: 1fr; }
  .lf-dtime { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .lf-dtime::before { display: none; }
  .lf-dcov { grid-template-columns: 1fr; }
  .lf-dcov h2 { grid-row: auto; }
}
@media (max-width: 640px) {
  /* Three principles in a 390px row would be 110px each. Stacked, they stay
     readable and the icons keep their alignment. */
  .lf-dprin { grid-template-columns: 1fr; gap: 1.1rem; }
  .lf-dfree { grid-template-columns: 1fr; gap: 1rem; }
  .lf-dfree__assurance { grid-column: 1; }
  /* Vertical sequences: an arrow pointing right is wrong once the steps stack. */
  /* Single column, numbers leading down the left so 01 → 04 still reads as a
     sequence, and the icons stand down to keep each step compact. */
  .lf-dflow { grid-template-columns: 1fr; gap: 1.5rem; }
  .lf-dflow__step { padding-top: 0; padding-left: 3.2rem; }
  .lf-dflow__n { top: -.15rem; font-size: 1.7rem; }
  .lf-dflow__icon { display: none; }
  .lf-dtime { grid-template-columns: 1fr; gap: 1.4rem; }
  .lf-dtime__step { padding-top: 0; padding-left: 2.4rem; }
  .lf-dtime__n { top: .1rem; }
  .lf-dworked__rvalue { font-size: 2.2rem; }
  .lf-dcta__btn { width: 100%; text-align: center; }
}

/* ------------------------------------------- the return-cost disclosure -- */

/*
 * PRE-CONTRACT INFORMATION, NOT A WARNING.
 *
 * It appears on the product page, in the basket summary and above the place
 * order button, and it has to read as something useful rather than as a
 * penalty notice — so: warm ground, a brass rule, no icon, no yellow, no
 * border-box shout. The amount is the one thing set large enough to be read at
 * a glance, because the amount is the disclosure.
 */
.lf-retcost {
  margin: 1.15rem 0 0;
  padding: 1rem 1.15rem;
  background: #FBF9F6;
  border: 1px solid #EAE4DC;
  border-left: 2px solid var(--lf-gold-rule);
  border-radius: 10px;
}
/* 12.16px. Small enough to read as a label, not so small it stops being
   readable — measured at 11.84px on the first pass. */
.lf-retcost__k {
  margin: 0 0 .45rem;
  font-size: .76rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lf-gold);
}
.lf-retcost__lead {
  margin: 0; font-size: .95rem; line-height: 1.6; color: var(--lf-taupe-deep);
}
/* Kept on one line with the sentence that introduces it — an amount that wraps
   onto its own line reads as a heading rather than as part of the statement. */
.lf-retcost__amt {
  white-space: nowrap;
  font-family: var(--lf-serif); font-size: 1.15rem;
  color: var(--lf-navy); letter-spacing: -0.01em;
}
/*
 * 14.4px, not 13.9. These two sentences are pre-contract information — the
 * faulty-goods separation is the part that stops a customer reading a
 * collection charge as something they pay when goods arrive broken — and
 * information that has to be given is information that has to be readable.
 */
.lf-retcost__extra,
.lf-retcost__fault {
  margin: .5rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--lf-taupe-mid);
}
.lf-retcost__link {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; margin-top: .35rem;
  font-size: .89rem; color: var(--lf-navy); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--lf-gold-line);
  transition: box-shadow .25s var(--lf-ease);
}
.lf-retcost__link:hover { box-shadow: inset 0 -1px 0 var(--lf-gold); }
.lf-retcost__link:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 3px; }
.lf-retcost__link span { transition: transform .25s var(--lf-ease); }
.lf-retcost__link:hover span { transform: translateX(3px); }

/* In the basket summary and at checkout it sits inside an existing panel, so it
   drops its own ground and keeps only the brass rule. */
.lf-retcost--basket, .lf-retcost--checkout {
  background: transparent; border: 0;
  border-left: 2px solid var(--lf-gold-rule);
  border-radius: 0;
  padding: .1rem 0 .1rem 1rem;
  margin-top: 1.1rem;
}
.lf-retcost--checkout { margin: 0 0 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .lf-retcost__link, .lf-retcost__link span { transition: none; }
}

/* The returns line beside the buy button: same shape as the delivery line
   above it, one step quieter, because delivery is what most people are
   looking for and this is what they need to know anyway. */
.lf-buydel--ret { color: var(--lf-taupe-deep); }
.lf-buydel--ret .lf-dicon { opacity: 1; }