/* ============================================================================
   HOMES & FLOORS — CART + CHECKOUT OPTIK  (Design "Cart + Checkout v2")
   ----------------------------------------------------------------------------
   ONE stylesheet for /cart/, /checkout/ and /order-received/.

   Replaces the previous 22 inline <style> blocks in Cart.php + Checkout.php
   (~350 KB, ~1300 !important declarations that overrode one another). Every
   rule here is scoped under .hfx, so this file cannot leak into the rest of
   the site and does not need !important to win.

   Markup and JS hooks are unchanged — this is a pure repaint.

   Token source: claude.ai/design "Cart + Checkout v2".
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
.hfx{
  --hfx-bg:#f7f8f7;
  --hfx-card:#ffffff;
  --hfx-line:#e8ebe8;          /* card border            */
  --hfx-rule:#efefef;          /* inner divider          */
  --hfx-field:#d7dde0;         /* input border           */

  --hfx-ink:#16305c;           /* navy — headings/values */
  --hfx-body:#6b7883;
  --hfx-sub:#4a5b74;
  --hfx-muted:#8b95a1;
  --hfx-faint:#9aa5a0;

  --hfx-green:#3aaa4c;         /* primary CTA            */
  --hfx-green-hi:#2f9440;      /* CTA hover              */
  --hfx-green-ink:#2e7d3f;     /* green text / links     */
  --hfx-green-ink-hi:#1f5c2d;
  --hfx-green-tint:#f4faf5;    /* selected row           */
  --hfx-green-soft:#eaf5ec;    /* avatar chip            */

  --hfx-danger:#d64541;
  --hfx-danger-bg:#fdecea;
  --hfx-danger-line:#f5c6c3;
  --hfx-danger-ink:#b03a34;
  --hfx-danger-sub:#8a4a46;

  --hfx-warn-bg:#fff8e8;
  --hfx-warn-line:#f0dfae;
  --hfx-warn-ink:#7a5c14;

  --hfx-fill:#f2f5f2;          /* neutral fill           */
  --hfx-off:#e8ebe8;           /* disabled bg            */

  --hfx-r-card:8px;
  --hfx-r-opt:6px;
  --hfx-r-ctl:4px;

  --hfx-max:1120px;
  --hfx-side:356px;
  --hfx-gap:22px;

  --hfx-font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ------------------------------------------------------------------ page -- */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received{background:var(--hfx-bg)}

.hfx,
.hfx *{box-sizing:border-box}

.hfx{
  max-width:var(--hfx-max);
  margin:0 auto;
  padding:22px 20px 48px;
  font-family:var(--hfx-font);
  color:var(--hfx-ink);
  -webkit-font-smoothing:antialiased;
}
.hfx img{display:block;max-width:100%}
.hfx a{color:var(--hfx-green-ink);text-decoration:none}
.hfx a:hover{color:var(--hfx-green-ink-hi);text-decoration:underline}
.hfx input::placeholder,
.hfx textarea::placeholder{color:#a3aeb8}
.hfx :focus-visible{outline:2px solid var(--hfx-green-ink);outline-offset:2px}

@keyframes hfxFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------- pagehead -- */
/* Title on the left, step rail on the right, hairline underneath. */
.hfx .hf-pagehead{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--hfx-line);
}
.hfx .hf-pagehead__title{
  display:flex;align-items:center;gap:12px;min-width:0;
}
.hfx .hf-pagehead__title h1{
  font-size:24px;font-weight:700;color:var(--hfx-ink);
  margin:0;line-height:1.2;letter-spacing:-.01em;
}
.hfx .hf-pagehead__count{
  background:var(--hfx-ink);color:#fff;
  font-size:14px;font-weight:600;
  min-width:30px;height:30px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--hfx-r-ctl);
}

/* --------------------------------------------------------------- progress -- */
.hfx .hf-progress{margin:0}
.hfx .hf-progress__steps{display:flex;align-items:center}
.hfx .hf-progress__step{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.hfx .hf-progress__num{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;
  background:#fff;border:1.5px solid var(--hfx-field);color:var(--hfx-faint);
}
.hfx .hf-progress__step > span:not(.hf-progress__num){
  font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hfx-faint);
}

/* NOTE: setCheckoutStep() in Checkout.php swaps the BEM modifiers for
   .is-active / .is-complete, so both spellings must be styled. */
.hfx .hf-progress__step--active .hf-progress__num,
.hfx .hf-progress__step.is-active .hf-progress__num{
  background:var(--hfx-ink);border-color:var(--hfx-ink);color:#fff;
}
.hfx .hf-progress__step--active > span:not(.hf-progress__num),
.hfx .hf-progress__step.is-active > span:not(.hf-progress__num){color:var(--hfx-ink)}

.hfx .hf-progress__step--done .hf-progress__num,
.hfx .hf-progress__step.is-complete .hf-progress__num{
  background:var(--hfx-green-ink);border-color:var(--hfx-green-ink);
  color:#fff;font-size:0;
}
.hfx .hf-progress__step--done .hf-progress__num::after,
.hfx .hf-progress__step.is-complete .hf-progress__num::after{content:"✓";font-size:11px}
.hfx .hf-progress__step--done > span:not(.hf-progress__num),
.hfx .hf-progress__step.is-complete > span:not(.hf-progress__num){color:var(--hfx-green-ink)}

.hfx .hf-progress__line{
  width:26px;height:2px;margin:0 10px;background:#e3e8e4;flex:none;
}
.hfx .hf-progress__line--done{background:var(--hfx-green-ink)}
/* The old design carried a second full-width bar under the rail — the new
   optic uses only the segment lines between steps. */
.hfx .hf-progress__track{display:none}

/* ----------------------------------------------------------------- layout -- */
.hfx .hf-cart-grid,
.hfx .hf-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--hfx-side);
  gap:var(--hfx-gap);
  align-items:start;
}
.hfx .hf-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.hfx .hf-sidebar,
.hfx .hf-summary{position:sticky;top:16px}

/* ------------------------------------------------------------------ card -- */
.hfx .hf-card,
.hfx .hf-summary__card,
.hfx .hf-order,
.hfx .hf-account-pull,
.hfx .hf-notes,
.hfx .hf-terms{
  background:var(--hfx-card);
  border:1px solid var(--hfx-line);
  border-radius:var(--hfx-r-card);
  padding:20px;
}
.hfx .hf-card__title,
.hfx .hf-summary__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hfx-ink);
  margin:0;
}
.hfx .hf-card__intro{
  font-size:12.5px;color:var(--hfx-body);
  margin:6px 0 0;line-height:1.5;
}
.hfx .hf-card > .hf-card__title + *{margin-top:12px}

/* --------------------------------------------------------------- cart hero -- */
/* Hero is now a slim intro line — the loud gradient banner is gone. */
.hfx .hf-cart-hero,
.hfx .hf-checkout-hero{
  background:none;border:0;padding:0;margin:0 0 4px;color:inherit;
}
.hfx .hf-cart-hero__grid,
.hfx .hf-checkout-hero__grid{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.hfx .hf-cart-hero__eyebrow,
.hfx .hf-checkout-hero__eyebrow{
  display:none;                      /* the step rail already states the stage */
}
.hfx .hf-cart-hero__title,
.hfx .hf-checkout-hero__title{display:none}   /* title lives in .hf-pagehead */
.hfx .hf-cart-hero__sub,
.hfx .hf-checkout-hero__sub{
  font-size:12.5px;color:var(--hfx-body);margin:0;line-height:1.5;
}
.hfx .hf-cart-hero__actions,
.hfx .hf-checkout-hero__actions{display:flex;gap:9px;flex-wrap:wrap}

/* --------------------------------------------------------------- urgency -- */
.hfx .hf-urgency{
  display:flex;align-items:center;gap:9px;
  padding:10px 14px;margin-bottom:14px;
  background:var(--hfx-warn-bg);
  border:1px solid var(--hfx-warn-line);
  border-radius:var(--hfx-r-opt);
  font-size:12.5px;color:var(--hfx-warn-ink);
}
.hfx .hf-urgency svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.hfx .hf-urgency strong{font-weight:600}

/* ------------------------------------------------------------- cart items -- */
.hfx .hf-cart-list{
  background:var(--hfx-card);
  border:1px solid var(--hfx-line);
  border-radius:var(--hfx-r-card);
  padding:4px 20px;
}
.hfx .hf-cart-card{border-bottom:1px solid var(--hfx-rule)}
.hfx .hf-cart-card:last-child{border-bottom:0}
.hfx .hf-cart-item{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto;
  gap:16px;padding:16px 0;align-items:start;
}
.hfx .hf-cart-item__media{
  width:76px;height:76px;border-radius:var(--hfx-r-ctl);
  overflow:hidden;background:var(--hfx-fill);display:block;
}
.hfx .hf-cart-item__media img{width:100%;height:100%;object-fit:cover}
.hfx .hf-cart-item__body{
  min-width:0;display:flex;flex-direction:column;gap:3px;
}
.hfx .hf-cart-item__title{
  font-size:14.5px;font-weight:600;line-height:1.4;
  color:var(--hfx-ink);margin:0;text-wrap:pretty;
}
.hfx .hf-cart-item__title a{color:inherit}
.hfx .hf-cart-item__title a:hover{color:var(--hfx-green-ink);text-decoration:none}
.hfx .hf-cart-item__meta{font-size:13px;color:var(--hfx-muted)}
.hfx .hf-cart-item__meta strong{color:var(--hfx-ink);font-weight:600}
.hfx .hf-cart-item__stock{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--hfx-green-ink);
}
.hfx .hf-cart-item__stock svg{display:none}
.hfx .hf-cart-item__stock::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--hfx-green);flex:none;
}

/* quantity stepper + stock pill share one row under the meta */
.hfx .hf-cart-item__actions{
  display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap;
}
.hfx .hf-cart-item__side{
  display:flex;flex-direction:column;align-items:flex-end;
  justify-content:space-between;gap:10px;min-height:76px;
}
.hfx .hf-cart-item__status{font-size:11.5px;color:var(--hfx-muted)}
.hfx .hf-cart-item__status:empty{display:none}

.hfx .hf-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.hfx .hf-price__value,
.hfx .hf-money{font-size:17px;font-weight:700;color:var(--hfx-ink)}
.hfx .hf-price__value .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit}

/* remove is a quiet × in the top-right corner of the row */
.hfx .hf-remove{
  width:28px;height:28px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--hfx-r-ctl);background:transparent;
  color:var(--hfx-faint);font-size:15px;line-height:1;
  cursor:pointer;text-decoration:none;transition:background .15s,color .15s;
}
.hfx .hf-remove:hover{background:var(--hfx-danger-bg);color:var(--hfx-danger);text-decoration:none}

/* blocked item */
.hfx .hf-cart-card--blocked .hf-cart-item__media{opacity:.55}
.hfx .hf-cart-card--blocked .hf-cart-item__title{color:var(--hfx-danger-ink)}
.hfx .hf-cart-item__warning,
.hfx .hf-item__warning{
  display:flex;align-items:flex-start;gap:7px;margin-top:6px;
  padding:9px 11px;background:var(--hfx-danger-bg);
  border:1px solid var(--hfx-danger-line);border-radius:var(--hfx-r-opt);
  font-size:12px;color:var(--hfx-danger-ink);line-height:1.45;
}
.hfx .hf-cart-item__warning[hidden],
.hfx .hf-item__warning[hidden]{display:none}
.hfx .hf-cart-item__warning svg{width:14px;height:14px;flex:none;margin-top:1px}

/* samples footer row inside the item card */
.hfx .hf-cart-samples{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 0;flex-wrap:wrap;
}
.hfx .hf-cart-samples__text{font-size:12.5px;color:var(--hfx-body);line-height:1.5}
.hfx .hf-cart-samples__link{
  font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hfx-green-ink);white-space:nowrap;
}
.hfx .hf-cart-samples__link:hover{text-decoration:underline}

/* ---------------------------------------------------------------- stepper -- */
.hfx .hf-stepper{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--hfx-field);border-radius:var(--hfx-r-ctl);
  overflow:hidden;background:#fff;
}
.hfx .hf-stepper__btn{
  width:34px;height:34px;border:0;background:#fff;
  font-size:16px;font-weight:600;color:var(--hfx-ink);
  cursor:pointer;line-height:1;transition:background .15s;
}
.hfx .hf-stepper__btn:hover{background:var(--hfx-fill)}
/* NB: needs to out-specify the generic `.hfx input[type=number]` rule below,
   which is 0-2-1 — hence the input[type] qualifier here rather than a bare class. */
.hfx .hf-stepper input[type=number].hf-stepper__input{
  width:40px;height:34px;border:0;padding:0;
  border-left:1px solid var(--hfx-rule);
  border-right:1px solid var(--hfx-rule);
  text-align:center;font:inherit;font-size:14px;font-weight:600;
  color:var(--hfx-ink);background:#fff;padding:0;
  -moz-appearance:textfield;appearance:textfield;
}
.hfx .hf-stepper__input::-webkit-outer-spin-button,
.hfx .hf-stepper__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hfx .hf-stepper input.hf-stepper__input:focus{outline:none;box-shadow:none;border-color:transparent}
.hfx .hf-stepper:focus-within{
  border-color:var(--hfx-green-ink);
  box-shadow:0 0 0 3px rgba(58,170,76,.15);
}

/* ---------------------------------------------------------------- buttons -- */
.hfx .hf-btn,
.hfx .hf-complete-btn,
.hfx .hf-sidebar-continue__btn,
.hfx .hf-delivery-modal__btn,
.hfx .hf-payment-unavailable__btn,
.hfx .hf-item__close-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:14px 16px;
  border-radius:var(--hfx-r-ctl);border:0;cursor:pointer;
  text-decoration:none;transition:background .15s,color .15s,border-color .15s;
}
.hfx .hf-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.hfx .hf-btn:hover{text-decoration:none}

.hfx .hf-btn--primary,
.hfx .hf-btn--checkout,
.hfx .hf-complete-btn--primary,
.hfx .hf-sidebar-continue__btn,
.hfx .hf-delivery-modal__btn--primary{
  background:var(--hfx-green);color:#fff;
}
.hfx .hf-btn--primary:hover,
.hfx .hf-btn--checkout:hover,
.hfx .hf-complete-btn--primary:hover,
.hfx .hf-sidebar-continue__btn:hover,
.hfx .hf-delivery-modal__btn--primary:hover{background:var(--hfx-green-hi);color:#fff}

.hfx .hf-btn--ghost,
.hfx .hf-complete-btn--ghost,
.hfx .hf-delivery-modal__btn--ghost{
  background:#fff;border:1.5px solid var(--hfx-ink);color:var(--hfx-ink);
  font-weight:600;padding:13px 16px;
}
.hfx .hf-btn--ghost:hover,
.hfx .hf-complete-btn--ghost:hover,
.hfx .hf-delivery-modal__btn--ghost:hover{background:var(--hfx-ink);color:#fff}

.hfx .hf-btn[disabled],
.hfx button[disabled]{
  background:var(--hfx-off);color:var(--hfx-faint);cursor:not-allowed;
}

/* small text-link button (Edit / Order samples / discount toggle) */
.hfx .hf-order__edit,
.hfx .hf-step-edit,
.hfx .hf-account-pull__link{
  background:none;border:0;padding:0;font:inherit;
  font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hfx-green-ink);cursor:pointer;
}
.hfx .hf-order__edit:hover,
.hfx .hf-step-edit:hover,
.hfx .hf-account-pull__link:hover{text-decoration:underline}

/* --------------------------------------------------------------- summary -- */
.hfx .hf-summary__header{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.hfx .hf-summary__title{
  font-size:15px;font-weight:700;color:var(--hfx-ink);margin:0;
}
/* basket sidebar: big subtotal at the top */
.hfx .hf-summary__count{font-weight:400;text-transform:none;letter-spacing:0}
.hfx .hf-summary__lead{
  font-size:28px;font-weight:700;color:var(--hfx-ink);line-height:1.1;
  white-space:nowrap;
}
.hfx .hf-summary__lead .woocommerce-Price-amount{
  font-size:inherit;font-weight:inherit;color:inherit;
}
.hfx .hf-summary__note{
  font-size:12.5px;color:var(--hfx-muted);margin:2px 0 0;line-height:1.45;
}
.hfx .hf-summary__rows{
  display:flex;flex-direction:column;gap:9px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hfx-rule);
}
.hfx .hf-summary__row,
.hfx .hf-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font-size:12.5px;color:var(--hfx-sub);
}
.hfx .hf-summary__row strong,
.hfx .hf-row strong,
.hfx .hf-row b{font-weight:600;color:var(--hfx-ink);white-space:nowrap}
.hfx .hf-summary__divider,
.hfx .hf-div{height:1px;background:var(--hfx-rule);margin:3px 0}
.hfx .hf-summary__total,
.hfx .hf-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hfx-rule);
}
.hfx .hf-summary__total-label,
.hfx .hf-total > span:first-child{
  font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hfx-body);
}
.hfx .hf-summary__total-value,
.hfx .hf-total > :last-child,
.hfx .hf-total b{font-size:24px;font-weight:700;color:var(--hfx-ink)}
.hfx .hf-summary__buttons{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.hfx .hf-summary__buttons .hf-btn{width:100%}

.hfx .hf-shipping-free{color:var(--hfx-green-ink);font-weight:600}
.hfx .hf-shipping-calculated{color:var(--hfx-muted);font-weight:500}

.hfx .hf-summary__delivery-breakdown{
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:var(--hfx-body);
}
.hfx .hf-summary__delivery-breakdown[hidden]{display:none}

/* trust / feature list — reduced to a quiet footnote */
.hfx .hf-summary__features{
  display:flex;flex-direction:column;gap:7px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--hfx-rule);
}
.hfx .hf-summary__feature{
  display:flex;align-items:flex-start;gap:7px;
  font-size:12px;color:var(--hfx-body);line-height:1.45;
}
.hfx .hf-summary__feature svg{
  width:13px;height:13px;flex:none;margin-top:2px;
  stroke:var(--hfx-green);fill:none;stroke-width:2.5;
}
.hfx .hf-guarantee{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hfx-rule);
  font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hfx-muted);text-align:center;
}
.hfx .hf-guarantee__icon svg{
  width:14px;height:14px;stroke:var(--hfx-green);fill:none;stroke-width:2;
}
.hfx .hf-guarantee__text{font-size:11px;font-weight:600;letter-spacing:.1em}

/* ----------------------------------------------------------- empty state -- */
.hfx .hf-empty{
  background:var(--hfx-card);border:1px solid var(--hfx-line);
  border-radius:var(--hfx-r-card);padding:48px 32px;text-align:center;
}
.hfx .hf-empty__icon{
  width:52px;height:52px;border-radius:50%;background:var(--hfx-fill);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.hfx .hf-empty__icon svg{width:22px;height:22px;stroke:var(--hfx-faint);fill:none;stroke-width:1.8}
.hfx .hf-empty h2{font-size:20px;font-weight:700;color:var(--hfx-ink);margin:0 0 6px}
.hfx .hf-empty p{font-size:13.5px;color:var(--hfx-body);margin:0 0 20px;line-height:1.6}

/* ------------------------------------------------------------ mobile bar -- */
.hfx .hf-mobile-bar{display:none}

/* =========================================================================
   CHECKOUT
   ====================================================================== */

/* --------------------------------------------------------- account panel -- */
.hfx .hf-account-pull{
  display:flex;align-items:center;gap:14px;padding:14px 20px;
}
.hfx .hf-account-pull__icon{
  width:36px;height:36px;border-radius:var(--hfx-r-ctl);flex:none;
  background:var(--hfx-green-soft);color:var(--hfx-green-ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
}
.hfx .hf-account-pull__body{flex:1;min-width:0;font-size:13.5px;color:var(--hfx-ink)}
.hfx .hf-account-pull__eyebrow{
  display:block;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hfx-muted);margin-bottom:2px;
}
.hfx .hf-account-pull__meta{color:var(--hfx-body);font-size:12.5px}

/* ------------------------------------------------------------ form fields -- */
.hfx .form-row,
.hfx .hf-card p.form-row{margin:0 0 12px;padding:0;display:block}
.hfx .form-row:last-child{margin-bottom:0}
.hfx .hf-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hfx .hf-field-pair .form-row{margin-bottom:0}
.hfx .hf-card .hf-field-pair{margin-bottom:12px}

.hfx input[type=text],
.hfx input[type=email],
.hfx input[type=tel],
.hfx input[type=number],
.hfx input[type=password],
.hfx input[type=search],
.hfx select,
.hfx textarea,
.hfx .input-text{
  width:100%;box-sizing:border-box;
  padding:12px 14px;
  border:1px solid var(--hfx-field);border-radius:var(--hfx-r-ctl);
  font:inherit;font-size:13.5px;color:var(--hfx-ink);
  background:#fff;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.hfx textarea{min-height:96px;resize:vertical;line-height:1.5}
.hfx input:focus,
.hfx select:focus,
.hfx textarea:focus,
.hfx .input-text:focus{
  border-color:var(--hfx-green-ink);
  box-shadow:0 0 0 3px rgba(58,170,76,.15);
}
.hfx label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hfx-body);margin-bottom:5px;
}
/* Checkout fields keep permanent labels above the inputs. Placeholders alone
   disappear as soon as a customer types and made the form hard to scan. */
.hfx .hf-card .form-row > label{
  position:static;width:auto;height:auto;overflow:visible;
  clip:auto;white-space:normal;
}
.hfx .required{color:var(--hfx-danger);border:0}
.hfx .woocommerce-invalid input.input-text,
.hfx .woocommerce-invalid select{border-color:var(--hfx-danger)}
.hfx .hf-err-msg{display:none;font-size:11.5px;color:var(--hfx-danger);margin-top:6px}
.hfx .form-row.hf-err .hf-err-msg{display:block}
.hfx .form-row.hf-err input,
.hfx .form-row.hf-err select{border-color:var(--hfx-danger)}

.hfx .hf-country-fixed{margin-top:4px}
.hfx .hf-country-fixed__label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hfx-body);margin-bottom:5px;
}
.hfx .hf-country-fixed__box{
  padding:12px 14px;border:1px solid var(--hfx-field);
  border-radius:var(--hfx-r-ctl);background:var(--hfx-fill);
  font-size:13.5px;color:var(--hfx-body);
}
.hfx .hf-country-fixed__hint{
  display:block;font-size:12px;color:var(--hfx-muted);margin-top:8px;
}

/* ------------------------------------------------------------ step panels -- */
.hfx .hf-step-panel{display:flex;flex-direction:column;gap:14px}
.hfx .hf-step-panel.is-locked,
.hfx .hf-step-panel[aria-hidden=true]{display:none}
.hfx .hf-step-panel.is-active{display:flex}

.hfx .hf-step-confirmation{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;margin-bottom:4px;
  background:var(--hfx-green-tint);
  border:1px solid #cfe8d4;border-radius:var(--hfx-r-opt);
  font-size:12.5px;color:var(--hfx-sub);line-height:1.5;
}
.hfx .hf-step-confirmation[hidden]{display:none}
.hfx .hf-step-confirmation__icon{
  width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--hfx-green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.hfx .hf-step-confirmation__body strong{
  display:block;color:var(--hfx-ink);font-weight:600;margin-bottom:1px;
}

/* ------------------------------------------------- order summary sidebar -- */
.hfx .hf-order__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.hfx .hf-order__title{
  font-size:15px;font-weight:700;color:var(--hfx-ink);margin:0;
}
.hfx .hf-summary-list{
  display:flex;flex-direction:column;gap:9px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hfx-rule);
}
.hfx .hf-item,
.hfx .hf-summary-item{
  display:flex;justify-content:space-between;gap:12px;
  font-size:12.5px;align-items:flex-start;
}
.hfx .hf-item__img,
.hfx .hf-summary-item__img{
  width:40px;height:40px;border-radius:var(--hfx-r-ctl);flex:none;
  overflow:hidden;background:var(--hfx-fill);
}
.hfx .hf-item__img img,
.hfx .hf-summary-item__img img{width:100%;height:100%;object-fit:cover}
.hfx .hf-item__body{flex:1;min-width:0}
.hfx .hf-item__name{
  color:var(--hfx-sub);line-height:1.4;font-size:12.5px;font-weight:400;
  margin:0;text-wrap:pretty;
}
.hfx .hf-item__meta{font-size:11.5px;color:var(--hfx-muted);margin-top:2px}
.hfx .hf-item__qty,
.hfx .hf-item__qty-label{color:var(--hfx-faint)}
.hfx .hf-item__priceWrap{text-align:right;white-space:nowrap}
.hfx .hf-item__price{font-weight:600;color:var(--hfx-ink)}
.hfx .hf-item__price-label{
  display:block;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hfx-muted);
}
.hfx .hf-item__close-btn{
  width:24px;height:24px;padding:0;border-radius:var(--hfx-r-ctl);
  background:transparent;color:var(--hfx-faint);
  font-size:14px;line-height:1;flex:none;letter-spacing:0;
}
.hfx .hf-item__close-btn:hover{background:var(--hfx-danger-bg);color:var(--hfx-danger)}
.hfx .hf-item--blocked .hf-item__name{color:var(--hfx-danger-ink)}
.hfx .hf-item--removing{opacity:.45;transition:opacity .2s}
.hfx .hf-item--collapsing{
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .2s,max-height .25s;
}

/* Delivery breakdown — the real delivery UI on both cart and checkout.
   hf_delivery_render_breakdown_html() emits one row per product type:
     <div class="hf-row hf-row--delivery-line" data-type="…">
       <span>Delivery <span class="hf-row__sub">(Label)</span></span><b>£60.00</b>
     </div>
   plus a "Total Delivery" row when more than one type is deliverable, and a
   red row per type that cannot be delivered to the entered postcode. */
.hfx .hf-row--delivery-line{color:var(--hfx-body)}
.hfx .hf-row__sub{
  color:var(--hfx-muted);font-weight:400;
}
.hfx .hf-row--delivery-total{
  font-weight:600;color:var(--hfx-ink);
  margin-top:2px;padding-top:8px;border-top:1px solid var(--hfx-rule);
}
.hfx .hf-row--delivery-blocked span,
.hfx .hf-row--delivery-blocked .hf-row__sub{color:var(--hfx-danger-ink)}
/* the blocked note is a <b>, so it must out-specify `.hfx .hf-row b` (0-2-1)
   which paints every value navy — a bare class here loses and the warning
   renders in the normal price colour. */
.hfx .hf-row b.hf-row__blocked{
  color:var(--hfx-danger-ink);font-weight:500;font-size:11.5px;
  text-align:right;white-space:normal;max-width:170px;
}
.hfx .hf-row.free b{color:var(--hfx-green-ink)}

/* -------------------------------------------------------- payment methods -- */
/* NOTE: there is deliberately NO shipping-method picker on this checkout.
   Delivery is a single rate derived from the postcode — hf_delivery_zone_rules()
   maps the outward code to zone 1–5, and the woocommerce_package_rates filter
   collapses the package to one rate (hf_premium_pallet_delivery) or to none at
   all when the area is not served. The customer never chooses a method, so the
   only radio group here is the payment gateway list.
   The per-type prices land in the sidebar as .hf-row--delivery-line rows. */
.hfx .hf-payment-methods,
.hfx ul.wc_payment_methods{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
/* WooCommerce renders <input> and <label> as SIBLINGS inside the <li>
   (plus an optional .payment_box). The <li> is therefore the option row —
   styling the label as the row leaves the radio stranded on its own line. */
.hfx ul.wc_payment_methods li{
  list-style:none;margin:0;
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--hfx-r-opt);
  border:2px solid var(--hfx-line);background:#fff;
  transition:border-color .15s,background .15s;
}
.hfx ul.wc_payment_methods li:hover{border-color:#cfd6d0}
.hfx ul.wc_payment_methods li > label{
  flex:1;min-width:0;margin:0;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--hfx-ink);
  text-transform:none;letter-spacing:0;
  display:flex;align-items:center;gap:10px;
}
.hfx ul.wc_payment_methods li input[type=radio]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;flex:none;margin:0;
  border:2px solid #cfd6d0;background:#fff;cursor:pointer;
  display:grid;place-content:center;
}
.hfx ul.wc_payment_methods li input[type=radio]::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:#fff;transform:scale(0);
}
.hfx ul.wc_payment_methods li input[type=radio]:checked{
  border-color:var(--hfx-green-ink);background:var(--hfx-green-ink);
}
.hfx ul.wc_payment_methods li input[type=radio]:checked::before{transform:scale(1)}
/* selected row highlight */
.hfx ul.wc_payment_methods li:has(input:checked){
  border-color:var(--hfx-green-ink);background:var(--hfx-green-tint);
}
.hfx ul.wc_payment_methods li img{max-height:22px;width:auto;margin-left:auto}
/* the gateway's own description panel drops to a full-width row beneath */
.hfx .payment_box{
  flex-basis:100%;margin:2px 0 0;padding:12px 14px;
  background:var(--hfx-fill);border-radius:var(--hfx-r-opt);
  font-size:12.5px;color:var(--hfx-body);line-height:1.55;
}
.hfx .payment_box p:first-child{margin-top:0}
.hfx .payment_box p:last-child{margin-bottom:0}

.hfx .hf-payment-methods__inner{display:flex;flex-direction:column;gap:9px}
.hfx .hf-payment-free-order{
  padding:12px 14px;background:var(--hfx-green-tint);
  border:1px solid #cfe8d4;border-radius:var(--hfx-r-opt);
  font-size:13px;color:var(--hfx-sub);
}

/* ------------------------------------------------- payment unavailable --- */
.hfx .hf-payment-unavailable{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;background:var(--hfx-danger-bg);
  border:1px solid var(--hfx-danger-line);border-radius:var(--hfx-r-opt);
}
.hfx .hf-payment-unavailable[hidden]{display:none}
.hfx .hf-payment-unavailable__icon{
  width:20px;height:20px;flex:none;color:var(--hfx-danger);
}
.hfx .hf-payment-unavailable__body{
  flex:1;min-width:0;font-size:12.5px;color:var(--hfx-danger-sub);line-height:1.5;
}
.hfx .hf-payment-unavailable__body strong{
  display:block;font-size:13.5px;font-weight:600;
  color:var(--hfx-danger-ink);margin-bottom:3px;
}
.hfx .hf-payment-unavailable__btn{
  font-size:11px;padding:9px 14px;background:var(--hfx-danger);color:#fff;
}
.hfx .hf-payment-unavailable__btn:hover{background:var(--hfx-danger-ink);color:#fff}

/* -------------------------------------------------------- sidebar CTA ---- */
.hfx .hf-sidebar-continue{margin-top:14px}
.hfx .hf-sidebar-continue__btn{width:100%}
.hfx .hf-sidebar-continue__btn[disabled],
.hfx .hf-sidebar-continue__btn.is-locked{
  background:var(--hfx-off);color:var(--hfx-faint);cursor:not-allowed;
}
.hfx .hf-sidebar-continue__note,
.hfx .hf-place-order-note{
  display:block;font-size:11.5px;color:var(--hfx-faint);
  text-align:center;margin-top:8px;line-height:1.5;
}

.hfx .hf-final-place-order{margin-top:14px}
.hfx .hf-final-place-order button,
.hfx button#place_order{
  width:100%;background:var(--hfx-green);border:0;color:#fff;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:14px 16px;
  border-radius:var(--hfx-r-ctl);cursor:pointer;
  transition:background .15s;
}
.hfx .hf-final-place-order button:hover,
.hfx button#place_order:hover{background:var(--hfx-green-hi)}
.hfx button#place_order[disabled]{background:var(--hfx-off);color:var(--hfx-faint);cursor:not-allowed}

/* ------------------------------------------------------------- terms ----- */
.hfx .hf-terms{padding:14px 20px}
.hfx .hf-terms__box{
  display:flex;align-items:flex-start;gap:10px;
  font-size:12.5px;color:var(--hfx-body);line-height:1.5;
}
.hfx .hf-terms__box input[type=checkbox]{
  width:16px;height:16px;flex:none;margin:1px 0 0;
  accent-color:var(--hfx-green);cursor:pointer;
}
.hfx .hf-terms label{
  text-transform:none;letter-spacing:0;font-size:12.5px;
  font-weight:400;color:var(--hfx-body);margin:0;
  position:static;width:auto;height:auto;clip:auto;
}

/* ------------------------------------------------------------- notes ----- */
.hfx .hf-notes .form-row{margin-bottom:0}
.hfx .hf-notes label{position:static;width:auto;height:auto;clip:auto}

/* ------------------------------------------------------- delivery modal --
   Kompakte Fassung, 20.08.2026.

   Vorher war der Dialog 720px breit und wurde oben von einem 768x432 grossen
   Wohnzimmerfoto beherrscht. Es war nicht einmal gebremst: die einzige Regel
   dafuer hiess `.hf-delivery-modal__hero-img img` — die Klasse sitzt aber AUF
   dem <img>, der Selektor suchte also ein Bild IM Bild und traf nie. Bild,
   Akzentstreifen, Vertrauenszeile und die Huellen __head/__head-copy sind aus
   dem Markup verschwunden; ihre Regeln stehen deshalb auch nicht mehr hier.

   WARUM HIER KEINE var(--v3-*) STEHEN. Am Dokument nachgesehen: #hf-delivery-modal
   ist ein direktes Kind von <body> und liegt damit AUSSERHALB von .hfx. Die
   Marken der Kasse sind auf .hfx definiert und vererben sich nicht dorthin —
   getComputedStyle liefert fuer --v3-line, --v3-ink, --v3-green und --hfx-green
   im Dialog allesamt den leeren String. Ein var() haette also immer nur seinen
   Rueckfallwert gezeigt: dieselbe Farbe, aber eine Angabe, die vorgibt,
   gekoppelt zu sein, obwohl sie es nicht ist. Die Werte stehen deshalb
   ausgeschrieben da — abgelesen an der laufenden Kasse, nicht geschaetzt:
   Gruen #0f7b45 (Hover #0b5d34), Text #12293D / #55677A, Kante #e4e9ed,
   ruhige Flaeche #fafbfc, Karte 6px, Bedienelement 3px.

   Aus demselben Grund bleiben die Schaltflaechen-Regeln hier stehen. Weiter
   oben gibt es `.hfx .hf-delivery-modal__btn` (0-2-0) — die greift nie, weil
   der Dialog nicht unter .hfx haengt. Loescht man die unskopierten Regeln im
   Vertrauen auf sie, stehen die beiden Knoepfe voellig ohne Form da.
   ------------------------------------------------------------------------ */
.hf-delivery-modal{
  position:fixed;inset:0;z-index:99999;
  display:none;align-items:center;justify-content:center;padding:20px;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.hf-delivery-modal.is-open{display:flex}
.hf-delivery-modal__overlay{
  position:absolute;inset:0;background:rgba(11,25,45,.55);
  backdrop-filter:blur(2px);
}
.hf-delivery-modal__dialog{
  position:relative;width:min(440px,100%);
  background:#fff;border:1px solid #e4e9ed;border-radius:0;
  padding:26px 26px 24px;box-shadow:0 24px 60px rgba(16,35,61,.22);
  animation:hfxFadeUp .28s ease both;max-height:90vh;overflow:auto;
}
.hf-delivery-modal__close{
  position:absolute;top:12px;right:12px;
  width:26px;height:26px;border:0;border-radius:3px;
  background:transparent;color:#9aa7b2;
  font-size:0;cursor:pointer;line-height:1;
}
/* Der Knopf traegt "Close" als zugaengliche Beschriftung; sichtbar ist ein
   Kreuz. font-size:0 blendet den Text aus, ::before zeichnet das Zeichen. */
.hf-delivery-modal__close::before{content:"\00d7";font-size:19px;line-height:1}
.hf-delivery-modal__close:hover{background:#fafbfc;color:#12293D}
.hf-delivery-modal__eyebrow{
  display:block;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#8c9ba6;
}
.hf-delivery-modal__title{
  font-size:17px;font-weight:600;color:#12293D;
  margin:7px 0 0;line-height:1.3;letter-spacing:-.01em;
}
.hf-delivery-modal__text,
.hf-delivery-modal__note{
  font-size:13px;color:#55677A;line-height:1.6;margin:7px 0 0;
}
.hf-delivery-modal__note-wrap{
  margin-top:14px;padding:11px 13px;
  background:#fafbfc;border:1px solid #e4e9ed;border-radius:5px;
}
.hf-delivery-modal__note-wrap .hf-delivery-modal__note{margin:0}
.hf-delivery-modal__actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.hf-delivery-modal__actions > *{flex:1;min-width:150px}
.hf-delivery-modal__content{display:flex;flex-direction:column}

/* Schaltflaechen — Stimme der neuen Kasse: 12px, 600, Versalien, 3px Radius.
   Abgelesen an .hf-sidebar-continue__btn.

   Eine Abweichung: dort sind es .18em Sperrung, hier .14em. Gemessen bei
   440px Dialogbreite braucht "CHANGE POSTCODE" mit .18em mehr Platz, als
   eine der beiden nebeneinanderliegenden Schaltflaechen hat — der Text brach
   auf zwei Zeilen um und der Knopf wurde 66px hoch. `white-space:nowrap`
   haelt das zusaetzlich fest, falls eine laengere Beschriftung dazukommt;
   dann bricht die Reihe (flex-wrap) statt des Wortes. */
.hf-delivery-modal__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  padding:14px 16px;border-radius:3px;border:0;cursor:pointer;
  text-decoration:none;transition:background .15s,color .15s,border-color .15s;
}
.hf-delivery-modal__btn--primary{background:#0f7b45;color:#fff}
.hf-delivery-modal__btn--primary:hover{background:#0b5d34;color:#fff}
.hf-delivery-modal__btn--ghost{
  background:#fff;border:1px solid #12293D;color:#12293D;padding:13px 16px;
}
.hf-delivery-modal__btn--ghost:hover{background:#12293D;color:#fff}
body.hf-modal-locked{overflow:hidden}

/* --------------------------------------------------------- next steps ---- */
.hfx .hf-next-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin-top:16px;
}
.hfx .hf-next-step{
  padding:14px 16px;background:var(--hfx-fill);
  border-radius:var(--hfx-r-opt);font-size:12.5px;
  color:var(--hfx-body);line-height:1.55;
}
.hfx .hf-next-step strong{
  display:block;color:var(--hfx-ink);font-weight:600;
  font-size:13px;margin-bottom:3px;
}
.hfx .hf-next-step b{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;margin-bottom:6px;
  background:var(--hfx-green-soft);color:var(--hfx-green-ink);
  font-size:11px;font-weight:700;
}
.hfx .hf-next-step span{display:block}

/* =========================================================================
   ORDER COMPLETE
   ====================================================================== */
.hfx.hf-complete-shell{padding-top:22px}
.hfx .hf-complete-progress{margin:0}
.hfx .hf-complete-hero,
.hfx .hf-complete-card{
  max-width:520px;margin:40px auto 0;
  background:var(--hfx-card);border:1px solid var(--hfx-line);
  border-radius:var(--hfx-r-card);padding:36px 36px 32px;
  text-align:center;animation:hfxFadeUp .4s ease both;
}
.hfx .hf-complete-hero__inner{display:block}
.hfx .hf-complete-check{
  width:56px;height:56px;border-radius:50%;
  background:var(--hfx-green);color:#fff;
  font-size:24px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
.hfx .hf-complete-check svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:3}
.hfx .hf-complete-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hfx-green-ink);
  margin-top:18px;display:block;
}
.hfx .hf-complete-title{
  font-size:24px;font-weight:700;color:var(--hfx-ink);
  margin:6px 0 0;text-wrap:balance;line-height:1.25;
}
.hfx .hf-complete-sub{
  font-size:13.5px;line-height:1.6;color:var(--hfx-body);margin:8px 0 0;
}
.hfx .hf-complete-facts{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-top:20px;padding:13px 16px;
  background:var(--hfx-fill);border-radius:var(--hfx-r-opt);
}
.hfx .hf-complete-fact{
  font-size:12px;font-weight:600;color:var(--hfx-body);white-space:nowrap;
}
.hfx .hf-complete-fact strong{
  display:block;font-size:17px;font-weight:700;color:var(--hfx-ink);
}
.hfx .hf-complete-total{font-size:17px;font-weight:700;color:var(--hfx-ink)}
.hfx .hf-complete-total .woocommerce-Price-amount{
  font-size:inherit;font-weight:inherit;color:inherit;
}
.hfx .hf-complete-actions{
  display:flex;gap:9px;justify-content:center;
  margin-top:18px;flex-wrap:wrap;
}
.hfx .hf-complete-btn{font-size:12px;padding:12px 24px}

/* order-detail cards keep a left-aligned label/value stack */
.hfx .hf-complete-grid{
  display:grid;grid-template-columns:minmax(0,1fr) var(--hfx-side);
  gap:var(--hfx-gap);margin-top:22px;text-align:left;align-items:start;
}
.hfx .hf-complete-grid > main,
.hfx .hf-complete-grid > aside{
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.hfx .hf-complete-card h2{
  font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hfx-ink);margin:0 0 12px;
}
.hfx .hf-complete-grid .hf-complete-card{
  max-width:none;margin:0;text-align:left;padding:20px;animation:none;
}
.hfx .hf-complete-grid .hf-complete-facts{
  flex-direction:column;align-items:stretch;gap:0;
  background:none;padding:0;margin-top:0;
}
.hfx .hf-complete-grid .hf-complete-fact{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--hfx-rule);
  font-size:12.5px;font-weight:400;color:var(--hfx-sub);white-space:normal;
}
.hfx .hf-complete-grid .hf-complete-fact:last-child{border-bottom:0}
.hfx .hf-complete-grid .hf-complete-fact strong{
  display:inline;font-size:12.5px;font-weight:600;text-align:right;
}
.hfx .hf-complete-card p{font-size:12.5px;color:var(--hfx-body);line-height:1.6;margin:0 0 14px}
.hfx .hf-complete-delivery{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;background:var(--hfx-fill);
  border-radius:var(--hfx-r-opt);font-size:12.5px;
  color:var(--hfx-body);line-height:1.55;text-align:left;
}
.hfx .hf-complete-delivery__icon{
  width:18px;height:18px;flex:none;color:var(--hfx-green-ink);margin-top:1px;
}
.hfx .hf-complete-delivery strong{display:block;color:var(--hfx-ink);font-weight:600;margin-bottom:2px}
.hfx .hf-complete-delivery span{display:block}
.hfx .hf-complete-final-cta{
  text-align:center;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--hfx-line);
}
.hfx .hf-complete-final-cta p{
  font-size:12.5px;color:var(--hfx-body);margin:0 0 14px;line-height:1.6;
}
.hfx .hf-summary-item strong{
  display:block;font-size:12.5px;font-weight:600;
  color:var(--hfx-ink);line-height:1.4;
}
.hfx .hf-summary-item span{
  display:block;font-size:11.5px;color:var(--hfx-muted);margin-top:2px;
}

/* =========================================================================
   WOOCOMMERCE NOTICES
   ====================================================================== */
.hfx .woocommerce-notices-wrapper:empty{display:none}
.hfx .woocommerce-error,
.hfx .woocommerce-message,
.hfx .woocommerce-info{
  list-style:none;margin:0 0 16px;padding:13px 16px;
  border-radius:var(--hfx-r-opt);font-size:13px;line-height:1.55;
  border:1px solid var(--hfx-line);background:#fff;color:var(--hfx-sub);
}
.hfx .woocommerce-error{
  background:var(--hfx-danger-bg);border-color:var(--hfx-danger-line);
  color:var(--hfx-danger-ink);
}
.hfx .woocommerce-message{
  background:var(--hfx-green-tint);border-color:#cfe8d4;color:var(--hfx-sub);
}
.hfx .woocommerce-info{
  background:var(--hfx-warn-bg);border-color:var(--hfx-warn-line);
  color:var(--hfx-warn-ink);
}
.hfx .woocommerce-error li,
.hfx .woocommerce-message li{margin:0;padding:0;list-style:none}
.hfx .woocommerce-error .button,
.hfx .woocommerce-message .button{
  float:right;background:none;border:0;padding:0;
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hfx-green-ink);
}

/* blockUI overlay while WooCommerce recalculates */
.hfx .blockUI.blockOverlay{background:rgba(247,248,247,.6)!important;opacity:1!important}

/* =========================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1024px){
  .hfx{--hfx-side:300px;--hfx-gap:18px}
}

@media (max-width:900px){
  .hfx .hf-cart-grid,
  .hfx .hf-grid,
  .hfx .hf-complete-grid{grid-template-columns:minmax(0,1fr)}
  .hfx .hf-sidebar,
  .hfx .hf-summary{position:static}
  .hfx .hf-pagehead{gap:14px}
  .hfx .hf-progress__step > span:not(.hf-progress__num){display:none}
  .hfx .hf-progress__step--active > span:not(.hf-progress__num),
  .hfx .hf-progress__step.is-active > span:not(.hf-progress__num){display:inline}
  .hfx .hf-progress__line{width:18px;margin:0 7px}
}

@media (max-width:640px){
  .hfx{padding:16px 14px 96px}
  .hfx .hf-pagehead{
    flex-direction:column;align-items:flex-start;
    padding-bottom:14px;margin-bottom:14px;
  }
  .hfx .hf-pagehead__title h1{font-size:21px}
  .hfx .hf-cart-list{padding:2px 14px}
  .hfx .hf-card,
  .hfx .hf-summary__card,
  .hfx .hf-order,
  .hfx .hf-account-pull,
  .hfx .hf-notes{padding:16px}

  /* item collapses to image + body, price/stepper move under the text */
  .hfx .hf-cart-item{
    grid-template-columns:60px minmax(0,1fr);
    gap:12px;padding:14px 0;
  }
  .hfx .hf-cart-item__media{width:60px;height:60px}
  .hfx .hf-cart-item__side{
    grid-column:1 / -1;
    flex-direction:row-reverse;align-items:center;justify-content:space-between;
    min-height:0;margin-top:2px;
  }
  .hfx .hf-field-pair{grid-template-columns:1fr}
  .hfx .hf-complete-hero,
  .hfx .hf-complete-card{padding:28px 20px 24px;margin-top:20px}
  .hfx .hf-complete-facts{flex-direction:column;align-items:flex-start;gap:6px}
  .hfx .hf-complete-actions{flex-direction:column}
  .hfx .hf-complete-actions > *{width:100%}

  /* sticky total bar returns on small screens */
  .hfx .hf-mobile-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 14px;background:#fff;
    border-top:1px solid var(--hfx-line);
    box-shadow:0 -4px 16px rgba(16,35,61,.07);
  }
  .hfx .hf-mobile-bar__label{
    display:block;font-size:10px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--hfx-muted);
  }
  .hfx .hf-mobile-bar__total{font-size:18px;font-weight:700;color:var(--hfx-ink)}
  .hfx .hf-mobile-bar .hf-btn{padding:12px 20px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .hfx *,
  .hf-delivery-modal *{animation:none!important;transition:none!important}
}

/* ---------------------------------------------------------------- print -- */
@media print{
  .hfx .hf-progress,
  .hfx .hf-mobile-bar,
  .hfx .hf-summary__buttons,
  .hfx .hf-complete-actions{display:none}
  .hfx{max-width:none;padding:0}
}


/* ---- basket summary, quality pass (2026-08-05) ------------------------------
   Three concrete defects from the live page:
     1. "UK delivery" wrapped onto two lines while its value
        ("Will be calculated in the next step") ran the full width — the row was
        a plain flex with both sides free to shrink.
     2. Subtotal, VAT and total carried nearly the same weight, so the eye had no
        order to follow.
     3. The new VAT row needed a treatment that reads as an explanation, not as
        another charge.
   No !important, scoped to the cart, consistent with the rest of this file. */

.hf-summary__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, auto) 1fr;
	align-items: baseline;
	gap: 8px 16px;
	padding: 9px 0;
}

.hf-summary__row > span {
	white-space: nowrap;
	font-size: 13.5px;
	color: #5b6b7d;
}

.hf-summary__row > strong {
	justify-self: end;
	text-align: right;
	font-size: 14px;
	font-weight: 600;
	color: #16305c;
	font-variant-numeric: tabular-nums;
}

/* an estimate is not a number — it must not compete with one */
.hf-summary__row .hf-shipping-calculated {
	font-size: 12.5px;
	font-weight: 500;
	font-style: normal;
	color: #8b95a1;
	text-align: right;
	line-height: 1.4;
	white-space: normal;
}

/* the VAT line explains the total; it is deliberately quieter than the total */
.hf-summary__row--vat > span,
.hf-summary__row--vat > strong {
	font-size: 12.5px;
	font-weight: 500;
	color: #8b95a1;
}

.hf-summary__row--vat { padding-top: 2px; margin-top: -4px; }
.hf-summary__row--vat[hidden] { display: none; }

.hf-summary__vatnote {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8b95a1;
}

/* one clear hierarchy: subtotal reads first, total reads last and loudest */
.hf-summary__lead {
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #16305c;
	font-variant-numeric: tabular-nums;
}

.hf-summary__total {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 16px;
}

.hf-summary__total-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #5b6b7d;
	white-space: nowrap;
}

.hf-summary__total-value {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #16305c;
	font-variant-numeric: tabular-nums;
}

.hf-summary__divider { margin: 14px 0 12px; }

@media (max-width: 420px) {
	.hf-summary__row { grid-template-columns: 1fr; gap: 2px; }
	.hf-summary__row > strong,
	.hf-summary__row .hf-shipping-calculated { justify-self: start; text-align: left; }
}

/* ---- basket rows, quality pass (2026-08-05) --------------------------------
   The rows already carried 16px of padding, so "no space between products" was
   not a missing gap — it was `align-items:start` on the row grid. That stops
   .hf-cart-item__side from filling the row height, so its own
   `justify-content:space-between` has nothing to distribute: the price collapsed
   to the top, level with the title, while the stepper sat at the bottom left.
   Two disconnected halves read as one dense block.

   Stretch the side column and the price drops to the baseline of the stepper,
   which is where the eye expects to compare quantity against line total. */

.hfx .hf-cart-item {
	align-items: stretch;
	padding: 22px 0;
	gap: 18px;
}

.hfx .hf-cart-item__side {
	align-self: stretch;
	justify-content: space-between;
	min-height: 0;
}

/* the remove control is secondary — it should not be the first thing scanned */
.hfx .hf-remove { opacity: .55; transition: opacity .15s ease, background .15s ease; }
.hfx .hf-cart-card:hover .hf-remove,
.hfx .hf-remove:focus-visible { opacity: 1; }

/* ONE type scale for the row. It carried four sizes (14.5 / 13 / 12 / 11.5) with
   no relationship; three steps with a clear job each read as deliberate. */
.hfx .hf-cart-item__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.hfx .hf-cart-item__meta,
.hfx .hf-cart-item__stock,
.hfx .hf-cart-item__status {
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
}

.hfx .hf-price__value {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--hfx-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* the stepper is an input, not a headline — match it to the meta line */
.hfx .hf-stepper input[type=number].hf-stepper__input {
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* breathing room where the list meets the sample note below it */
.hfx .hf-cart-card:last-child { padding-bottom: 4px; }

@media (max-width: 600px) {
	.hfx .hf-cart-item { padding: 18px 0; gap: 14px; }
	.hfx .hf-cart-item__side { align-self: auto; }
	.hfx .hf-price__value { font-size: 16px; }
}


/* ============================================================================
   Cart + Checkout v2 — the row detail and the summary inset
   ----------------------------------------------------------------------------
   Added when the live cart was compared against the design file line by line.
   Namespace .hfx, no !important — same discipline as the rest of this file.
   ========================================================================== */

/* format badge + SKU share one row under the title */
.hfx .hf-cart-item__tags{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:1px;
}
.hfx .hf-cart-item__unit{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#3d5468;background:#eef1f5;padding:3px 8px;border-radius:3px;
  white-space:nowrap;
}
.hfx .hf-cart-item__unit--sample{
  color:var(--hfx-green-ink);background:var(--hfx-green-soft);
}
.hfx .hf-cart-item__sku{font-size:11.5px;color:#9aa5b0}

/* £ each · £/m² · covers — the line that makes a pallet price readable */
.hfx .hf-cart-item__econ{
  font-size:13px;color:var(--hfx-muted);margin-top:2px;line-height:1.45;
}
.hfx .hf-cart-item__econ strong{color:var(--hfx-ink);font-weight:600}
.hfx .hf-cart-item__econ:empty{display:none}

/* the grey inset under the subtotal */
.hfx .hf-summary__facts{
  display:flex;flex-direction:column;gap:6px;
  margin-top:10px;padding:10px 12px;
  background:#f7f9f7;border-radius:0;
}
.hfx .hf-summary__fact{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;font-size:12.5px;
}
.hfx .hf-summary__fact[hidden]{display:none}
/* the label holds its line; if anything has to wrap it is the value on the
   right, never "UK delivery" breaking across two lines */
.hfx .hf-summary__fact > span{color:var(--hfx-body);white-space:nowrap}
.hfx .hf-summary__fact > strong{
  font-weight:600;color:var(--hfx-ink);text-align:right;
  font-variant-numeric:tabular-nums;
}
.hfx .hf-summary__fact--next > strong,
.hfx .hf-summary__fact .hf-shipping-calculated{
  font-weight:400;color:var(--hfx-muted);
}
.hfx .hf-summary__facts .hf-summary__delivery-breakdown[hidden]{display:none}

/* discount code */
.hfx .hf-summary__promo{margin-top:14px}
.hfx .hf-summary__promo-toggle{
  background:none;border:0;padding:0;font:inherit;
  font-size:12.5px;font-weight:600;color:var(--hfx-green-ink);cursor:pointer;
}
.hfx .hf-summary__promo-toggle:hover{text-decoration:underline}
.hfx .hf-summary__promo-toggle[hidden]{display:none}
.hfx .hf-summary__promo-form{display:flex;gap:7px}
.hfx .hf-summary__promo-form[hidden]{display:none}
.hfx .hf-summary__promo-input{
  flex:1;min-width:0;padding:10px 12px;
  border:1px solid var(--hfx-field);border-radius:var(--hfx-r-ctl);
  font:inherit;font-size:13px;color:var(--hfx-ink);outline:none;
}
.hfx .hf-summary__promo-input:focus{
  border-color:var(--hfx-green-ink);
  box-shadow:0 0 0 3px rgba(58,170,76,.15);
}
.hfx .hf-summary__promo-apply{
  background:var(--hfx-ink);border:0;color:#fff;font:inherit;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:0 14px;border-radius:var(--hfx-r-ctl);cursor:pointer;
}
.hfx .hf-summary__promo-apply:hover{background:#1d3f77}
.hfx .hf-summary__promo-chips{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;
}
.hfx .hf-summary__chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 9px;border-radius:3px;
  background:var(--hfx-green-soft);color:var(--hfx-green-ink);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.hfx .hf-summary__chip a{color:inherit;font-size:13px;line-height:1;opacity:.7}
.hfx .hf-summary__chip a:hover{opacity:1;text-decoration:none}

/* Project total only appears when it is not the subtotal repeated, and the
   block that carries the divider disappears with it */
.hfx .hf-summary__total[hidden]{display:none}
.hfx .hf-summary__rows[hidden]{display:none}

/* ---- rows that read as separate items --------------------------------------
   The padding on `.hf-cart-item` never reached the live page. The shell theme
   emits, inline, this reset:

       body #content, … , body article, body article.page, … {
         padding-top:0 !important; padding-bottom:0 !important; … }

   `body article` matches <article class="hf-cart-item"> directly, and an
   !important declaration can only be answered with another !important — no
   amount of specificity gets past it. Measured against the full live stylesheet
   stack the row computed padding 0px/0px, while the same markup against three
   local stylesheets computed the 32px this file asks for. That gap is why the
   first two attempts at "more spacing" changed nothing on the site.

   So the padding moves one level out, onto `.hf-cart-card` — a <div>, which
   that selector list does not reach. Same result, no !important arms race, and
   the hairline now sits at the outer edge of the padding where it belongs.

   The divider colour also changes: #efefef on #ffffff is roughly 6% contrast and
   disappears at normal viewing distance. #e3e7ea is still a hairline. Only the
   cart rows are affected — `--hfx-rule` keeps its value everywhere else. */
.hfx .hf-cart-item{padding:0}
.hfx .hf-cart-card{padding:32px 0;border-bottom-color:#e3e7ea}
.hfx .hf-cart-card:last-child{padding-bottom:24px}

/* The 600px rule further up this file targets .hf-cart-item, which now carries
   no padding at all — the phone value has to move to the card as well. */
@media (max-width: 600px){
  .hfx .hf-cart-item{padding:0}
  .hfx .hf-cart-card{padding:22px 0}
  .hfx .hf-cart-card:last-child{padding-bottom:16px}
}

/* ==========================================================================
   1.7.76 — checkout composition + order summary polish
   ========================================================================== */

/* A quantity control should stay flat when clicked; the former focus halo read
   as a permanent drop shadow on the cart screenshot. Keyboard focus remains
   visible on the individual control through the global focus outline. */
html body .hfx .hf-stepper,
html body .hfx .hf-stepper:focus-within,
html body .hfx .hf-stepper__btn,
html body .hfx .hf-stepper input[type=number].hf-stepper__input{
  box-shadow:none !important;
  filter:none !important;
}

/* More separation between the account strip, form panels and right rail. */
.hfx.hf-checkout-shell{
  --hfx-side:380px;
  --hfx-gap:22px;
}
.hfx.hf-checkout-shell > .hf-account-pull{margin-bottom:20px}
.hfx.hf-checkout-shell .hf-main{gap:20px}
.hfx.hf-checkout-shell .hf-step-panel{gap:20px}
.hfx.hf-checkout-shell .hf-card{padding:26px}

/* One sans-serif hierarchy throughout the checkout, independent of theme h2
   rules. Labels stay visible after values have been entered. */
html body .hfx.hf-checkout-shell .hf-card__title,
html body .hfx.hf-checkout-shell .hf-order__title{
  margin:0;
  font-family:var(--hfx-font) !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  color:var(--hfx-ink) !important;
}
.hfx.hf-checkout-shell .hf-card__intro{
  margin:7px 0 20px;
  font-size:13px;
  line-height:1.55;
}
.hfx.hf-checkout-shell .hf-card > .hf-card__title + .hf-card__intro{margin-top:7px}
.hfx.hf-checkout-shell .hf-card > .hf-card__title + input[type=hidden] + .hf-field-pair,
.hfx.hf-checkout-shell .hf-card > .hf-card__title + .hf-field-pair{margin-top:20px}
.hfx.hf-checkout-shell .form-row,
.hfx.hf-checkout-shell .hf-card p.form-row{margin-bottom:16px}
.hfx.hf-checkout-shell .hf-field-pair{gap:14px}
.hfx.hf-checkout-shell .hf-card .hf-field-pair{margin-bottom:16px}
.hfx.hf-checkout-shell .hf-card .form-row > label,
.hfx.hf-checkout-shell .hf-country-fixed__label{
  margin:0 0 7px;
  font-family:var(--hfx-font) !important;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#536174;
}
.hfx.hf-checkout-shell input[type=text],
.hfx.hf-checkout-shell input[type=email],
.hfx.hf-checkout-shell input[type=tel],
.hfx.hf-checkout-shell select,
.hfx.hf-checkout-shell .input-text{
  min-height:48px;
  padding:12px 14px;
}

/* Order summary: product first, totals second, with a deliberate divider
   between each reading task. */
.hfx.hf-checkout-shell .hf-order{
  overflow:hidden;
  padding:0;
}
.hfx.hf-checkout-shell .hf-order__head{
  align-items:center;
  padding:20px 22px 16px;
  border-bottom:1px solid var(--hfx-line);
}
.hfx.hf-checkout-shell .hf-item{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 24px;
  align-items:start;
  gap:13px;
  padding:18px 22px;
  border-bottom:1px solid var(--hfx-line);
}
.hfx.hf-checkout-shell .hf-item__img{
  width:52px;
  height:52px;
  border-radius:4px;
}
.hfx.hf-checkout-shell .hf-item__name{
  color:var(--hfx-ink);
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
}
.hfx.hf-checkout-shell .hf-item__format{
  display:inline-flex;
  margin-top:6px;
  padding:3px 7px;
  border-radius:3px;
  background:var(--hfx-green-soft);
  color:var(--hfx-green-ink);
  font-size:9.5px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hfx.hf-checkout-shell .hf-item__meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  font-size:11.5px;
}
.hfx.hf-checkout-shell .hf-item__qty{
  display:flex;
  align-items:baseline;
  gap:4px;
}
.hfx.hf-checkout-shell .hf-item__qty strong{color:var(--hfx-sub);font-weight:600}
.hfx.hf-checkout-shell .hf-item__price-label{margin-bottom:2px;font-size:9px}
.hfx.hf-checkout-shell .hf-item__price{font-size:13px;font-weight:700}
.hfx.hf-checkout-shell .hf-item__close-btn{
  align-self:start;
  width:24px;
  height:24px;
  border:1px solid transparent;
}
.hfx.hf-checkout-shell .hf-order > .hf-row{margin:18px 22px 0}
.hfx.hf-checkout-shell .hf-delivery-section{margin:8px 22px 0}
.hfx.hf-checkout-shell .hf-delivery-section .hf-row + .hf-row{margin-top:7px}
.hfx.hf-checkout-shell .hf-order > .hf-div{margin:16px 22px 0}
.hfx.hf-checkout-shell .hf-order > .hf-total{
  margin:0 22px;
  padding:18px 0 22px;
  border-top:0;
}
.hfx.hf-checkout-shell .hf-order > .hf-total > :last-child{
  font-size:25px;
  font-variant-numeric:tabular-nums;
}
.hfx.hf-checkout-shell .hf-sidebar-continue{margin-top:16px}
.hfx.hf-checkout-shell .hf-sidebar-continue__note{margin-top:9px}

@media (max-width:1024px){
  .hfx.hf-checkout-shell{--hfx-side:340px;--hfx-gap:18px}
}
@media (max-width:900px){
  .hfx.hf-checkout-shell > .hf-account-pull{margin-bottom:16px}
  .hfx.hf-checkout-shell .hf-sidebar{margin-top:2px}
}
@media (max-width:640px){
  .hfx.hf-checkout-shell .hf-card{padding:20px 16px}
  .hfx.hf-checkout-shell .hf-item{grid-template-columns:48px minmax(0,1fr) 24px;padding:16px}
  .hfx.hf-checkout-shell .hf-item__img{width:48px;height:48px}
  .hfx.hf-checkout-shell .hf-order__head{padding:18px 16px 14px}
  .hfx.hf-checkout-shell .hf-order > .hf-row{margin-left:16px;margin-right:16px}
  .hfx.hf-checkout-shell .hf-delivery-section,
  .hfx.hf-checkout-shell .hf-order > .hf-div,
  .hfx.hf-checkout-shell .hf-order > .hf-total{margin-left:16px;margin-right:16px}
}

/* ==========================================================================
   1.7.78 — basket polish: match the compact mini-basket quantity control
   ========================================================================== */
.hfx.hf-cart-shell .hf-cart-list{
  padding:4px 20px;
  border-color:#e2e7e4;
}
.hfx.hf-cart-shell .hf-cart-card{border-bottom-color:#e3e7ea}
.hfx.hf-cart-shell .hf-cart-item__actions{gap:12px;margin-top:10px}

html body .hfx.hf-cart-shell .hf-stepper{
  display:grid !important;
  grid-template-columns:26px 38px 26px !important;
  align-items:stretch !important;
  width:90px !important;
  height:30px !important;
  min-height:30px !important;
  border:1px solid rgba(18,43,76,.18) !important;
  border-radius:0 !important;
  background:#fff !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
html body .hfx.hf-cart-shell .hf-stepper__btn{
  width:26px !important;
  min-width:26px !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  color:var(--hfx-ink) !important;
  font-family:var(--hfx-font) !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:28px !important;
  box-shadow:none !important;
}
html body .hfx.hf-cart-shell .hf-stepper input[type=number].hf-stepper__input{
  width:38px !important;
  min-width:38px !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 !important;
  border:0 !important;
  border-left:1px solid rgba(18,43,76,.08) !important;
  border-right:1px solid rgba(18,43,76,.08) !important;
  border-radius:0 !important;
  background:#fff !important;
  color:var(--hfx-ink) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  line-height:28px !important;
  box-shadow:none !important;
}
@media (hover:hover){
  html body .hfx.hf-cart-shell .hf-stepper__btn:hover{
    background:#fff !important;
    color:var(--hfx-green-ink) !important;
  }
}
html body .hfx.hf-cart-shell .hf-stepper__btn:disabled{
  background:#fff !important;
  color:#c3cad4 !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}
html body .hfx.hf-cart-shell .hf-stepper:focus-within{
  border-color:rgba(18,43,76,.32) !important;
  box-shadow:none !important;
}

@media (max-width:640px){
  .hfx.hf-cart-shell .hf-cart-list{padding-left:14px;padding-right:14px}
}

/* ===== Zustimmungsfeld AGB/Datenschutz (2026-08-19) =========================
   Fehlerbild: Auf der Kasse stand statt eines Kontrollkaestchens ein grosses
   schwarzes Dreieck, und ein Klick zeigte keinerlei Wirkung.

   Ursache: Das Markup in Checkout.php baut das Kaestchen als
   <div class="hf-terms__box"><svg><polyline .../></svg></div> und haelt das
   echte <input type=checkbox> per display:none daneben. Fuer dieses SVG gab es
   in dieser Datei als einzigem SVG der Kasse keine Regel — jedes andere
   (.hf-btn svg, .hf-urgency svg, .hf-empty__icon svg ...) setzt width/height,
   fill:none und stroke. Ohne diese Angaben gilt der SVG-Standard: fill
   schwarz, stroke keiner, Groesse "auto". Die Haken-Polyline 20,6 → 9,17 →
   4,12 wird dadurch als gefuelltes Dreieck gezeichnet und auf die volle
   Kartenbreite aufgezogen — auf der Live-Seite gemessene 582 x 582 px.

   Zweitens war .hf-terms ein Block, das Kaestchen stand also ueber dem Text
   statt daneben. Und weder .hf-terms.on (vom Skript beim Klick gesetzt) noch
   .req hatten eine Darstellung — der Kunde bekam keine Rueckmeldung, ob er
   zugestimmt hat, waehrend WooCommerce die Bestellung ohne Zustimmung
   ablehnt. Das war der eigentliche Grund, warum die Kasse "nicht ging".

   Rueckgaengig: diesen Block loeschen. */
.hfx .hf-terms{
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;-webkit-user-select:none;user-select:none;
}
.hfx .hf-terms__box{
  width:20px;height:20px;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--hfx-field);border-radius:5px;
  background:#fff;
  transition:background .12s,border-color .12s;
}
.hfx .hf-terms__box svg{
  width:12px;height:12px;flex:none;
  fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:opacity .12s;
}
.hfx .hf-terms.on .hf-terms__box{background:var(--hfx-green);border-color:var(--hfx-green)}
.hfx .hf-terms.on .hf-terms__box svg{opacity:1}
.hfx .hf-terms.err .hf-terms__box{border-color:var(--hfx-danger);background:var(--hfx-danger-bg)}
.hfx .hf-terms:focus-visible{outline:2px solid var(--hfx-green);outline-offset:2px}
.hfx .hf-terms a{color:var(--hfx-green-ink);text-decoration:underline}
.hfx .hf-terms a:hover{color:var(--hfx-green-ink-hi)}
.hfx .hf-terms .req{
  display:inline-block;margin-left:6px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--hfx-danger-ink);
}
.hfx .hf-terms.on .req{display:none}

/* ===== Zahlungsschritt: messbar halten statt display:none (2026-08-19) ======
   Fehlerbild: Im Zahlungsschritt liessen sich die Kartenfelder nicht ausfuellen,
   Klarna fehlte, und die Express-Schaltflaechen erschienen erst nach etwa einer
   Sekunde.

   Ursache, auf der Live-Seite gemessen: Das Stripe-Zahlungs-Element wird beim
   Laden der Seite eingehaengt — zu diesem Zeitpunkt steht der Zahlungsschritt
   aber auf display:none (Regel weiter oben: .hf-step-panel.is-locked). Ein
   Element in einem display:none-Behaelter misst Breite und Hoehe null:

     .wc-stripe-upe-element                       537 x 0 px
     #wc-stripe-express-checkout-element-applePay 353 x 0 px
     .payment_box                                 592 x 68 px

   Und es misst nicht nach: Nach dem Einblenden blieb die Hoehe null. Was der
   Kunde als "Kartenformular" sieht, ist der Platzhalter-Rahmen von Stripe, nicht
   das echte Eingabefeld — deshalb laesst sich dort nichts eintippen. Aus dem
   gleichen Grund zeichnet das Element seine Reiter (u. a. Klarna) nie fertig.

   Ein spaeteres update_checkout hilft hier nicht: Diese Vorlage haelt den
   Zahlungsblock ausserhalb des per AJAX ersetzten Bereichs, WooCommerce
   erneuert ihn also nicht, und Stripe haengt sich nie neu ein.

   Loesung: Der Zahlungsschritt bleibt im Layout — mit echter Breite, damit
   Stripe korrekt messen kann — steht aber ausserhalb des Sichtfelds und nimmt
   keine Eingaben an, solange die Lieferpruefung laeuft. Sichtbar wird er
   unveraendert erst mit .is-active.

   Rueckgaengig: diesen Block loeschen. */
.hfx .hf-step-panel--payment.is-locked,
.hfx .hf-step-panel--payment[aria-hidden=true]{
  display:flex;
  position:absolute;
  left:-100000px;
  top:0;
  width:640px;
  opacity:0;
  pointer-events:none;
}
.hfx .hf-step-panel--payment.is-active{
  position:static;
  width:auto;
  opacity:1;
  pointer-events:auto;
}

/* Express-Zahlungen (Apple Pay, Google Pay, Link) stehen jetzt im
   Zahlungsschritt. Der Trenner "— OR —" von Stripe ergibt nur Sinn, wenn
   darunter das Kartenfeld folgt — hier ist das der Fall. */
.hfx .hf-express-slot{margin:0 0 4px}
.hfx .hf-express-slot:empty{display:none}

/* ============================================================================
   KASSE v3 — Optik-Ebene (2026-08-19)
   ----------------------------------------------------------------------------
   Umsetzung der Entwuerfe "Checkout Delivery" und "Checkout Payment v2".
   Loest die v2-Ebene ab: dieselbe Bauweise — eine nachgestellte Ebene, die nur
   ueberschreibt, was der Entwurf anders loest — aber die kuehle Palette der
   neuen Vorlagen statt des warmen Graus von v2.

   Die Palette liegt bewusst noch einmal als eigener Satz Variablen vor. Die
   Regeln oben rechnen mit --hfx-*; wuerde man die umdefinieren, aenderte sich
   auch der Warenkorb und die Bestellbestaetigung, die diese Datei mitbenutzen.

   NICHT enthalten: das Innere des Stripe-Zahlungsfeldes. Kartennummer, Ablauf
   und Pruefziffer liegen in einem iframe von Stripe; CSS von hier kommt dort
   nicht hinein. Diese Flaeche laesst sich nur ueber die Appearance-Angaben des
   Stripe-Plugins angleichen — eigener Schritt, siehe Uebergabenotiz.
   ========================================================================== */

.hfx{
  /* Seite und Karte teilen sich jetzt dasselbe Weiss. Damit die Karten nicht
     im Nichts schwimmen, tragen sie unten einen Hauch Schatten — die Kante
     allein traegt auf weissem Grund nicht. */
  --v3-bg:#ffffff;
  --v3-card:#ffffff;
  --v3-line:#e4e9ed;          /* Kartenrand, Trennlinien */
  --v3-field:#cfd8de;         /* Feldrand                */
  --v3-fill:#fafbfc;          /* ruhige Flaeche          */
  --v3-off:#edf0f2;           /* gesperrte Schaltflaeche */

  --v3-ink:#12293D;           /* Ueberschriften, Werte   */
  --v3-body:#55677A;
  --v3-muted:#8c9ba6;         /* Feldbeschriftungen      */
  --v3-faint:#9aa7b2;         /* Platzhalter, gesperrt   */

  --v3-green:#0f7b45;
  --v3-green-hi:#0b5d34;
  --v3-tint:#f5faf6;
  --v3-tint-line:#dde9e1;
  --v3-danger:#c0392b;

  --v3-r-card:6px;
  --v3-r-ctl:5px;
  --v3-max:1180px;
  --v3-side:372px;
  --v3-gap:28px;
}

/* ---- Seite ---------------------------------------------------------------- */
.hfx.hf-checkout-shell{background:var(--v3-bg);color:var(--v3-ink)}
body.woocommerce-checkout{background:var(--v3-bg)}
.hfx.hf-checkout-shell a{color:var(--v3-green)}
.hfx.hf-checkout-shell a:hover{color:var(--v3-green-hi)}
.hfx .hf-checkout-shell,
.hfx.hf-checkout-shell{max-width:var(--v3-max)}

/* ---- Seitenkopf: Titel links, Schrittleiste rechts ------------------------ */
.hfx .hf-pagehead{border-bottom:0;padding-bottom:0;margin-bottom:var(--v3-gap)}
.hfx .hf-pagehead__title h1{
  font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--v3-ink);
}
.hfx .hf-progress__steps{gap:14px}
.hfx .hf-progress__step{gap:9px}
.hfx .hf-progress__num{
  width:22px;height:22px;border-radius:50%;
  background:transparent;color:var(--v3-faint);border:1px solid var(--v3-field);
  font-size:11px;font-weight:500;
}
.hfx .hf-progress__step > span:not(.hf-progress__num){
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v3-faint);
}
/* erledigt: gruen gefuellt, Ziffer weicht dem Haken */
.hfx .hf-progress__step--done .hf-progress__num,
.hfx .hf-progress__step.is-complete .hf-progress__num{
  background:var(--v3-green);border-color:var(--v3-green);color:#fff;font-size:0;
}
.hfx .hf-progress__step--done .hf-progress__num::after,
.hfx .hf-progress__step.is-complete .hf-progress__num::after{content:"✓";font-size:11px}
.hfx .hf-progress__step--done > span:not(.hf-progress__num),
.hfx .hf-progress__step.is-complete > span:not(.hf-progress__num){color:var(--v3-body)}
/* laufend: navy gefuellt */
.hfx .hf-progress__step--active .hf-progress__num,
.hfx .hf-progress__step.is-active .hf-progress__num{
  background:var(--v3-ink);border-color:var(--v3-ink);color:#fff;
}
.hfx .hf-progress__step--active > span:not(.hf-progress__num),
.hfx .hf-progress__step.is-active > span:not(.hf-progress__num){
  color:var(--v3-ink);font-weight:600;
}
.hfx .hf-progress__line{width:26px;height:1px;background:var(--v3-field);margin:0}
.hfx .hf-progress__line--done{background:var(--v3-field)}

/* ---- Raster --------------------------------------------------------------- */
.hfx .hf-grid{
  grid-template-columns:minmax(0,1fr) var(--v3-side);
  gap:var(--v3-gap);align-items:start;
}
.hfx .hf-main{gap:20px}
.hfx .hf-sidebar{position:sticky;top:28px;display:flex;flex-direction:column;gap:16px}
.hfx .hf-step-panel{gap:20px}

/* ---- Karten --------------------------------------------------------------- */
.hfx.hf-checkout-shell .hf-card,
.hfx.hf-checkout-shell .hf-notes,
.hfx.hf-checkout-shell .hf-summary__card,
.hfx.hf-checkout-shell .hf-order,
.hfx .hf-card,
.hfx .hf-notes,
.hfx .hf-summary__card,
.hfx .hf-order{
  background:var(--v3-card);
  border:1px solid var(--v3-line);
  border-radius:var(--v3-r-card);
  padding:30px 32px 32px;
  box-shadow:0 1px 2px rgba(18,41,61,.04),0 8px 24px -20px rgba(18,41,61,.30);
}
.hfx .hf-card__title{
  font-size:19px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  color:var(--v3-ink);
}
.hfx .hf-card__intro{
  font-size:14px;line-height:1.6;color:var(--v3-body);margin-top:8px;
}
.hfx .hf-card > .hf-card__title + *{margin-top:22px}
.hfx .hf-card > .hf-card__intro + *{margin-top:22px}
/* Der Zahlungsschritt staffelt seine Abschnitte im Entwurf durchgaengig mit
   26px — Einleitung, bestaetigte Lieferung, Express, Zahlungsarten. */
.hfx .hf-card--payment > .hf-card__intro + *,
.hfx .hf-card--payment > .hf-step-confirmation + *{margin-top:26px}

/* Aufzaehlungszeile mit gruenem Punkt — im Entwurf unter Land und Kartenfeld. */
.hfx .hf-note{
  display:flex;align-items:flex-start;gap:9px;margin:18px 0 0;
  font-size:12.5px;line-height:1.6;color:var(--v3-body);
}
.hfx .hf-note::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--v3-green);
  flex:none;margin-top:6px;
}

/* ---- Felder --------------------------------------------------------------- */
.hfx .form-row label{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v3-muted);margin-bottom:8px;
}
.hfx .form-row .required,
.hfx .form-row abbr.required{color:var(--v3-danger);text-decoration:none}
/* WooCommerce haengt "(optional)" selbst an — im Entwurf steht es heller und
   leichter als die Beschriftung davor. */
.hfx .form-row label .optional{color:var(--v3-faint);font-weight:500}
.hfx .form-row input.input-text,
.hfx .form-row select,
.hfx .form-row textarea{
  height:50px;padding:0 14px;
  border:1px solid var(--v3-field);border-radius:var(--v3-r-ctl);
  background:#fff;font-size:15px;color:var(--v3-ink);
}
.hfx .form-row textarea{height:auto;min-height:110px;padding:14px;line-height:1.6}
.hfx .form-row input.input-text::placeholder,
.hfx .form-row textarea::placeholder{color:var(--v3-faint)}
.hfx .form-row input.input-text:focus,
.hfx .form-row select:focus,
.hfx .form-row textarea:focus{
  border-color:var(--v3-green);outline:none;
  box-shadow:0 0 0 3px rgba(15,123,69,.10);
}
.hfx #billing_postcode{text-transform:uppercase}

/* ---- Land: feststehend, mit Merkzeichen ----------------------------------- */
.hfx .hf-country-fixed__label{
  display:block;margin-bottom:8px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v3-muted);
}
.hfx .hf-country-fixed__box{
  height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--v3-fill);border:1px solid var(--v3-line);border-radius:var(--v3-r-ctl);
  padding:0 14px;font-size:15px;color:var(--v3-ink);
}
.hfx .hf-country-fixed__chip{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v3-green);
}

/* ---- Bestellhinweise: Kopfzeile mit Pfeil, aufklappbar -------------------- */
.hfx .hf-notes details > summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;cursor:pointer;
}
.hfx .hf-notes details > summary::-webkit-details-marker{display:none}
.hfx .hf-notes__label{display:flex;flex-direction:column;gap:3px}
.hfx .hf-notes__title{font-size:15px;font-weight:600;color:var(--v3-ink)}
.hfx .hf-notes__opt{font-size:13px;font-weight:500;color:var(--v3-faint)}
.hfx .hf-notes__hint{font-size:12.5px;color:var(--v3-body)}
.hfx .hf-notes__chev{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--v3-line);
  display:flex;align-items:center;justify-content:center;flex:none;
  color:var(--v3-body);transition:transform .2s ease;
}
.hfx .hf-notes__chev svg{width:12px;height:12px;display:block}
.hfx .hf-notes details[open] .hf-notes__chev{transform:rotate(180deg)}
.hfx .hf-notes details[open] > summary{margin-bottom:16px}

/* ---- bestaetigte Lieferung ------------------------------------------------ */
.hfx .hf-step-confirmation{
  align-items:flex-start;justify-content:space-between;
  background:var(--v3-tint);border:1px solid var(--v3-tint-line);
  border-radius:var(--v3-r-ctl);padding:18px 20px;
  font-size:13px;color:var(--v3-body);
}
.hfx .hf-step-confirmation__icon{
  width:22px;height:22px;border-radius:50%;background:var(--v3-green);color:#fff;
  font-size:11px;font-weight:400;margin-top:1px;
}
.hfx .hf-step-confirmation__body{display:flex;flex-direction:column;gap:4px;flex:1}
.hfx .hf-step-confirmation__body strong{
  font-size:14.5px;font-weight:600;color:var(--v3-ink);margin:0;
}
.hfx .hf-step-edit{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v3-green);background:none;border:0;padding:0;cursor:pointer;
  white-space:nowrap;
}
.hfx .hf-step-edit:hover{color:var(--v3-green-hi);text-decoration:underline}

/* ---- Express-Zahlungen ---------------------------------------------------- */
.hfx .hf-express-slot{margin:0}
/* Die Beschriftung ist erzeugter Inhalt. Seit der Behaelter ein Flex-Kasten
   ist, zaehlt sie als Element IN der Reihe und schob die Knoepfe nach rechts.
   Sie belegt deshalb ausdruecklich eine ganze Zeile. */
.hfx .hf-express-slot::before{
  content:"Express checkout";display:block;flex:1 1 100%;margin:0;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--v3-muted);
}
/* Express-Zahlungen — am echten Dokument nachgesehen, 2026-08-19.
   ----------------------------------------------------------------------------
   Zweimal danebengelegen, deshalb hier der geprueffte Aufbau. Ausgelesen auf
   der laufenden Kasse, nicht aus dem Quelltext eines Plugins geschlossen:

     .hf-express-slot                              display:flex
     ├── div.lloyds-custom-loader                  leer
     ├── div.woocommerce-notices-wrapper           leer
     ├── div#wc-stripe-express-checkout-element    ← die Knoepfe
     │   ├── div#…-applePay   .StripeElement
     │   └── div#…-googlePay  .StripeElement
     └── p#wc-stripe-express-checkout-button-separator

   Die Wallet-Knoepfe kommen also von STRIPE, nicht von Lloyds Cardnet. Cardnet
   liefert auf dieser Seite den Kartenbereich und die MOTO-Meldung; seine
   eigenen Wallet-Knoepfe (#apple-pay-button, #google-pay-button) stehen nicht
   im Dokument. Die Regeln dafuer bleiben weiter unten stehen — sie greifen,
   falls die Wallets des Gateways eingeschaltet werden, und stoeren sonst nicht.

   Entscheidend: die beiden Knoepfe sind eigene <div> im Dokument, KEIN
   gemeinsamer iframe. Sie lassen sich nebeneinander stellen. */
.hfx .hf-express-slot{
  display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;
}
/* Leere Behaelter — Ladeanzeige, Meldungsbereich — wuerden sonst eine Spalte
   belegen und eine Luecke hinterlassen. */
.hfx .hf-express-slot > *:empty{display:none}
.hfx .hf-express-slot > *{flex:1 1 190px;min-width:0}

/* Der Behaelter von Stripe bekommt eine eigene Zeile und teilt sie unter
   seinen Knoepfen auf. Die Spurenzahl richtet sich nach dem Platz: zwei
   Wallets nebeneinander, drei ebenso, auf dem Telefon untereinander. */
.hfx .hf-express-slot > #wc-stripe-express-checkout-element{
  flex:1 1 100%;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;align-items:stretch;
}
.hfx .hf-express-slot > #wc-stripe-express-checkout-element > .StripeElement{
  min-width:0;
}

/* Volle Zeile: Meldungen und der Trenner. */
.hfx .hf-express-slot > .woocommerce-info,
.hfx .hf-express-slot > .woocommerce-message,
.hfx .hf-express-slot > .woocommerce-error,
.hfx .hf-express-slot > .woocommerce-notices-wrapper,
.hfx .hf-express-slot > #wc-stripe-express-checkout-button-separator{
  flex:1 1 100%;
}

/* Platz reservieren, solange die Knoepfe noch laden. Ohne reservierte Hoehe
   springt der Inhalt darunter in dem Moment nach unten, in dem sie erscheinen
   — genau das laesst es "spaet" wirken. */
.hfx .hf-express-slot:has(#wc-stripe-express-checkout-element),
.hfx .hf-express-slot:has(#apple-pay-button),
.hfx .hf-express-slot:has(#google-pay-button){min-height:56px}

/* Wallet-Knoepfe von Lloyds Cardnet — nur aktiv, wenn dessen Wallets
   eingeschaltet sind. Das Gateway gibt Apple Pay als <button> und Google Pay
   als <div> mit style-Attribut aus; daher !important nur dort. */
.hfx .hf-express-slot > #apple-pay-button,
.hfx .hf-express-slot > #google-pay-button{
  width:auto !important;height:56px !important;
  margin:0 !important;border-radius:0 !important;
}
.hfx .hf-express-slot > #apple-pay-button{background-size:auto 42% !important}

/* Stripes Trenner traegt "OR" — der Entwurf schreibt "or pay by". Der Text
   kommt aus dem Stripe-Plugin und laesst sich von hier nicht aendern, nur
   ersetzen.

   Ohne Linie (20.08.2026). Bis hierher war die Linie der 1px hohe Hintergrund
   des Elements, und das Wort lag als ::before mit einer Flaeche in Kartenfarbe
   darueber und schnitt sie auf. Beides faellt weg: kein Hintergrund, keine
   Ueberdeckung, keine absolute Lage. Uebrig bleibt eine zentrierte Zeile.

   `font-size:0` bleibt stehen — es unterdrueckt Stripes eigenes "— OR —",
   einen reinen Textknoten. Der Nachbarselektor `> *` erreicht ihn nicht, weil
   Textknoten keine Elemente sind. Das ::before setzt seine Schriftgroesse
   deshalb selbst.

   KEIN margin hier — es waere wirkungslos. Stripe schreibt dem <p> ein
   `style="margin-top:1.5em"` ins Dokument, und ein Attribut schlaegt jede
   Regel dieser Datei. Gemessen wird davon trotzdem nichts: `1.5em` rechnet
   gegen die EIGENE Schriftgroesse des Elements, und die steht hier auf 0 —
   also 0px. Der Abstand kommt vom `gap:12px` des Flex-Behaelters
   .hf-express-slot. Die alte Fassung trug `margin:26px 0 4px` und hat damit
   nie etwas bewirkt; am Dokument nachgemessen am 20.08.2026. */
.hfx #wc-stripe-express-checkout-button-separator{
  position:static;height:auto;
  background:none;font-size:0;text-align:center;
}
.hfx #wc-stripe-express-checkout-button-separator > *{display:none}
.hfx #wc-stripe-express-checkout-button-separator::before{
  content:"or pay by";
  position:static;display:block;transform:none;
  background:none;padding:0;white-space:nowrap;
  font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;color:var(--v3-faint);
}

/* ---- Zahlungsarten -------------------------------------------------------- */
.hfx .hf-payment-methods{
  margin-top:26px;border:0;border-radius:0;background:none;padding:0;gap:0;overflow:visible;
}
.hfx .hf-payment-methods > .woocommerce-checkout-payment{border:0;background:none}
.hfx ul.wc_payment_methods{
  border:1px solid var(--v3-line);border-radius:var(--v3-r-ctl);
  background:var(--v3-card);padding:0;margin:0;gap:0;overflow:hidden;
}
.hfx ul.wc_payment_methods li{
  border:0;border-radius:0;padding:16px 18px;background:transparent;gap:12px;
}
.hfx ul.wc_payment_methods li + li{border-top:1px solid var(--v3-line)}
.hfx ul.wc_payment_methods li:has(input:checked){background:var(--v3-fill)}
.hfx ul.wc_payment_methods li > label{
  font-size:14.5px;font-weight:500;color:var(--v3-ink);
}
.hfx ul.wc_payment_methods li input[type=radio]{
  width:16px;height:16px;border:1.5px solid var(--v3-field);background:#fff;
}
.hfx ul.wc_payment_methods li input[type=radio]::before{
  width:8px;height:8px;background:var(--v3-green);
}
.hfx ul.wc_payment_methods li input[type=radio]:checked{
  border-color:var(--v3-green);background:#fff;
}
/* Kartenlogos: WooCommerce liefert sie als <img> hinter der Beschriftung. */
.hfx ul.wc_payment_methods li img{
  max-height:25px;width:auto;margin-left:auto;border-radius:0;
}
.hfx ul.wc_payment_methods li label img + img{margin-left:7px}
/* Das Feld der Zahlungsart: volle Breite, durch eine Linie abgesetzt. */
.hfx .payment_box{
  background:#fff;border:0;border-top:1px solid var(--v3-line);
  flex-basis:auto;width:calc(100% + 36px);
  margin:16px -18px -16px;padding:22px 18px 24px;border-radius:0;
  font-size:13px;color:var(--v3-body);
}

/* ---- Kartenfelder von Lloyds Cardnet (Payment.js) ------------------------
   Das Gateway hat zwei Integrationen, und nur eine laesst sich gestalten:

     Checkout Solution  — ein fertiges Bedienelement von Cardnet in EINEM
                          iframe. Kopfzeile "Card", die drei Felder in einer
                          Reihe, Markenzeichen im Feld. Alles davon liegt im
                          iframe; von hier ist nichts erreichbar.

     Payment.js         — nur die Eingaben selbst liegen in iframes, das
                          Geruest steht im Dokument und ist gestaltbar.

   ACHTUNG, im Test gefunden: die Vorlage des Gateways (public/views/
   lloyds-payment-fields.php) verpackt ihre Felder in ein eigenes

       <form id="form" class="wc-payment-form">

   Dieses Formular steht INNERHALB von WooCommerces <form name="checkout">.
   Verschachtelte Formulare sind in HTML nicht erlaubt: der Browser wirft das
   innere <form> beim Einlesen weg und haengt seine Kinder an die Umgebung.
   Ein Selektor auf `form#form.wc-payment-form` findet deshalb NIE etwas —
   im Quelltext steht es, im Dokument nicht.

   Angesetzt wird darum am Zahlungsfeld selbst, erkennbar am Feld fuer die
   Kartennummer. Uebrig bleibt diese Reihenfolge:

       <div class="payment_box">
         <div></div>                       leer
         <div>       Card Number  #cc-card
         <div class="col1">  Exp Date  #cc-exp
         <div class="col2">  CVV       #cc-cvv

   Daraus wird die Anordnung des Entwurfs: Kartennummer ueber die volle
   Breite, Ablauf und Pruefziffer nebeneinander. Greift nur bei Payment.js —
   mit der Checkout Solution gibt es kein #cc-card und nichts aendert sich. */
.hfx .payment_box:has(#cc-card){
  display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;
}
.hfx .payment_box:has(#cc-card) > div{
  grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;margin:0;
}
/* Das leere <div> am Anfang und der Aufraeumer am Ende wuerden je eine
   Rasterzelle belegen und die Spalten verschieben. */
.hfx .payment_box:has(#cc-card) > div:empty,
.hfx .payment_box:has(#cc-card) > .clear{display:none}
.hfx .payment_box:has(#cc-card) > div.col1{grid-column:1 / 2}
.hfx .payment_box:has(#cc-card) > div.col2{grid-column:2 / 3}

.hfx .payment_box label.control-label{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--v3-muted);
}
/* Der Rahmen gehoert um den Behaelter, nicht in den iframe — dort sitzt nur
   noch der Text der Eingabe. */
.hfx .payment_box .payment-fields{
  height:50px;padding:0 12px;
  border:1px solid var(--v3-field);border-radius:var(--v3-r-ctl);
  background:#fff;display:flex;align-items:center;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.hfx .payment_box .payment-fields iframe{
  width:100%;height:100%;border:0;display:block;
}
/* Payment.js setzt diese Klassen am Behaelter, waehrend getippt wird. */
.hfx .payment_box .payment-fields.focus{
  border-color:var(--v3-green);box-shadow:0 0 0 3px rgba(15,123,69,.10);
}
.hfx .payment_box .payment-fields.invalid{border-color:var(--v3-danger)}

.hfx .hf-payment-free-order{
  padding:16px 18px;background:var(--v3-tint);
  border:1px solid var(--v3-tint-line);border-radius:var(--v3-r-ctl);
  font-size:13px;color:var(--v3-body);
}

/* Eine einzige Zahlungsart braucht weder Auswahlknopf noch Kopfzeile noch
   Rahmen — das ist Verpackung um genau ein Element. Stripe bringt unter
   "Payment options" seine eigene Auswahl (Card, Klarna) schon mit; die
   Kasse legte bisher einen zweiten Rahmen darum. Bei zwei oder mehr
   Zahlungsarten bleibt die Liste wie gehabt. */
.hfx ul.wc_payment_methods:has(> li:only-child){
  border:0;border-radius:0;background:none;overflow:visible;
}
.hfx ul.wc_payment_methods > li:only-child{padding:0;background:none;border:0}
.hfx ul.wc_payment_methods > li:only-child > input[type=radio],
.hfx ul.wc_payment_methods > li:only-child > label{display:none}
.hfx ul.wc_payment_methods > li:only-child .payment_box{
  flex:1 1 100%;width:100%;margin:0;padding:0;border:0;background:none;
}

/* WooCommerce und die Zahlungserweiterungen legen ihre Felder gern in ein
   <fieldset> mit eigenem Rahmen. Innerhalb des Zahlungsfeldes ist das eine
   Umrandung zu viel; leere Behaelter hinterlassen ausserdem den schmalen
   doppelt umrandeten Streifen. */
.hfx .payment_box fieldset,
.hfx .payment_box .wc-payment-form,
.hfx .payment_box .wc-credit-card-form{
  border:0;padding:0;margin:0;background:none;
}
.hfx .payment_box > p:empty,
.hfx .payment_box > div:empty,
.hfx .payment_box fieldset:empty{display:none}

/* ---- Rechtstext, AGB, Einwilligung ---------------------------------------- */
/* Das alles steht in WooCommerces .place-order — die Bestellschaltflaeche
   selbst liefert der Filter leer aus, sie steht in der Seitenleiste. */
.hfx .woocommerce-checkout-payment .place-order{
  display:flex;flex-direction:column;gap:18px;
  margin-top:26px;padding-top:26px;border-top:1px solid var(--v3-line);
}
.hfx .woocommerce-privacy-policy-text p,
.hfx .hf-privacy-text{
  font-size:13.5px;line-height:1.7;color:var(--v3-body);margin:0;
}
.hfx .woocommerce-terms-and-conditions-wrapper{margin:0}
.hfx.hf-checkout-shell .woocommerce-terms-and-conditions-wrapper .form-row > label.woocommerce-form__label-for-checkbox,
.hfx .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox{
  display:block;position:relative;margin:0;padding:0 0 0 32px;
  font-size:14px;font-weight:400;line-height:1.5;letter-spacing:0;
  text-transform:none;color:var(--v3-ink);cursor:pointer;
}
.hfx .woocommerce-terms-and-conditions-wrapper .form-row{margin:0;padding:0}
.hfx input#terms{
  appearance:none;-webkit-appearance:none;
  position:absolute;left:0;top:1px;
  width:20px;height:20px;flex:none;margin:0;
  border:1.5px solid var(--v3-field);border-radius:4px;background:#fff;
  cursor:pointer;display:grid;place-content:center;
}
.hfx input#terms::before{
  content:"✓";font-size:11px;color:#fff;transform:scale(0);
}
.hfx input#terms:checked{background:var(--v3-green);border-color:var(--v3-green)}
.hfx input#terms:checked::before{transform:scale(1)}
.hfx .required-indicator,
.hfx .woocommerce-terms-and-conditions-wrapper abbr.required,
.hfx .woocommerce-terms-and-conditions-checkbox-text .required{
  color:var(--v3-faint);text-decoration:none;font-weight:400;
  border:0;font-size:13px;
}
/* Die Beschriftung ist der Zeilenrahmen; die Textspanne darin bleibt Text. */
.hfx .woocommerce-terms-and-conditions-checkbox-text{display:inline}

/* Einwilligungskasten — ueberarbeitet 20.08.2026.
   ----------------------------------------------------------------------------
   Der Dienst bringt eigenes CSS mit (class-hf-core-consent-checkout.php). Auf
   dieser Kasse gewinnt es nicht: dort steht `.hf-consent` (0-1-0), hier
   `.hfx .hf-consent` (0-2-0). Wer den Kasten an der Kasse aendern will, aendert
   ihn HIER — die Werte im Dienst gelten nur ausserhalb der .hfx-Huelle, also
   im Konto. Beide tragen jetzt dieselben Zahlen.

   Was vorher schwach war und woran es lag:
     - Der Kasten lag als graue Platte (--v3-fill) auf der weissen Karte. Zwei
       Grautoene uebereinander wirken wie ein Rest, nicht wie ein Angebot.
     - Das Abzeichen war eine fast schwarze Scheibe (#0C2B36) mit gruenem
       Haken darin — der kraeftigste Punkt im ganzen Schritt, fuer eine
       Nebensache. Es las sich wie eine Warnung.
     - Die Abwahl-Zeile hatte weder Flaeche noch Rand: eine anklickbare Zeile,
       der man nicht ansieht, dass sie anklickbar ist.
     - Ueberschrift, Text und Fussnote lagen dicht beieinander in Groesse und
       Farbe — keine Rangfolge.

   Jetzt: weisse Flaeche mit Haarlinie und dem Hauch Schatten der Karten,
   ein leises gruenes Abzeichen, eine Zeile mit erkennbarer Schaltflaeche samt
   Tastaturring, und drei klar getrennte Textgroessen. */
.hfx .hf-consent{
  margin:0;padding:18px 20px;
  border:1px solid var(--v3-line);border-radius:var(--v3-r-card);
  background:var(--v3-card);
  box-shadow:0 1px 2px rgba(16,35,61,.03),0 10px 24px -18px rgba(16,35,61,.22);
}
.hfx .hf-consent::before{display:none}
.hfx .hf-consent__head{gap:9px;margin:0 0 6px}
/* Zusage, keine Warnung: gruener Haken auf hellgruener Scheibe. */
.hfx .hf-consent__icon{width:20px;height:20px;background:#e8f2ec}
.hfx .hf-consent__icon svg{width:11px;height:11px}
.hfx .hf-consent__icon svg path{stroke:var(--v3-green)}
.hfx .hf-consent__title{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--v3-ink)}
.hfx .hf-consent__text{font-size:13.5px;line-height:1.6;color:var(--v3-body);margin:0 0 12px}
/* Die 0-5-0-Auswahl bleibt in der Gruppe: sie stammt aus einer aelteren
   Schicht und wuerde eine Regel mit 0-2-0 sonst ueberstimmen. */
.hfx.hf-checkout-shell .hf-card .hf-consent .form-row > label,
.hfx .hf-consent label,
.hfx .hf-consent .woocommerce-form__label{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border:1px solid var(--v3-line);border-radius:var(--v3-r-ctl);
  background:var(--v3-fill);
  margin:0;font-size:13.5px;font-weight:400;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--v3-ink);cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.hfx.hf-checkout-shell .hf-card .hf-consent .form-row > label:hover,
.hfx .hf-consent label:hover,
.hfx .hf-consent .woocommerce-form__label:hover{
  border-color:var(--v3-field);background:var(--v3-card);box-shadow:none;
}
/* Der Ring gehoert an die Zeile, nicht an das Kaestchen: angeklickt wird die
   ganze Zeile, und mit der Tastatur muss sichtbar sein, wo man steht. */
.hfx .hf-consent label:focus-within,
.hfx .hf-consent .woocommerce-form__label:focus-within{
  border-color:var(--v3-green);box-shadow:0 0 0 3px rgba(15,123,69,.10);
}
.hfx .hf-consent .optional{color:var(--v3-faint)}
.hfx .hf-consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;margin:0;flex:none;
  border:1.5px solid var(--v3-field);border-radius:4px;background:#fff;
  cursor:pointer;display:grid;place-content:center;
  transition:background .12s ease,border-color .12s ease;
}
.hfx .hf-consent input[type=checkbox]::before{content:"✓";font-size:11px;color:#fff;transform:scale(0)}
.hfx .hf-consent input[type=checkbox]:checked{background:var(--v3-green);border-color:var(--v3-green)}
.hfx .hf-consent input[type=checkbox]:checked::before{transform:scale(1)}
.hfx .hf-consent input[type=checkbox]:focus-visible{outline:none}
.hfx .hf-consent__note{font-size:12px;line-height:1.55;color:var(--v3-muted);margin:12px 0 0;opacity:1}
.hfx .hf-consent__note strong{color:var(--v3-green);font-weight:600}

/* ---- Seitenleiste: Bestelluebersicht -------------------------------------- */
/* Die Uebersicht traegt ihre Innenabstaende in den Zeilen, nicht an der Karte —
   sonst laegen Kopfzeile und Summenblock nicht an den Raendern an. */
.hfx.hf-checkout-shell .hf-order,
.hfx .hf-order{padding:0;overflow:hidden}
.hfx.hf-checkout-shell .hf-order__head,
.hfx .hf-order__head{
  padding:22px 24px 18px;border-bottom:1px solid var(--v3-line);align-items:center;
}
.hfx .hf-order__title{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--v3-ink)}
.hfx .hf-order__edit{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.hfx.hf-checkout-shell .hf-order,
.hfx .hf-order{--v3-thumb:68px;padding:0;overflow:hidden}
.hfx .hf-order .hf-item{
  display:grid;grid-template-columns:var(--v3-thumb) minmax(0,1fr) 24px;
  align-items:start;gap:14px;margin:0;
  padding:20px 24px;border-bottom:1px solid var(--v3-line);
}
.hfx .hf-order .hf-item__img{
  width:var(--v3-thumb);height:var(--v3-thumb);
  border-radius:0;border:1px solid var(--v3-line);
}
.hfx .hf-order .hf-item__name{font-size:13.5px;font-weight:500;line-height:1.45;color:var(--v3-ink)}
.hfx .hf-order .hf-item__meta{
  display:flex;align-items:baseline;justify-content:space-between;margin-top:8px;
}
.hfx .hf-order .hf-item__qty,
.hfx .hf-order .hf-item__qty-label{font-size:12.5px;color:var(--v3-body)}
.hfx .hf-order .hf-item__qty strong{font-weight:500;color:var(--v3-body)}
.hfx .hf-order .hf-item__price{
  font-size:15px;font-weight:600;color:var(--v3-ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.hfx .hf-order .hf-item__price-label{color:var(--v3-faint)}

/* Die Preiszeilen tragen die Rechnung — sie duerfen nicht wie Kleingedrucktes
   aussehen. Groesser, mehr Luft, und die Betraege in Ziffern gleicher Breite:
   dadurch stehen die Nachkommastellen exakt untereinander, statt je nach
   Ziffernbreite zu tanzen. Das ist der Unterschied, den man nicht benennt,
   aber sieht. */
.hfx .hf-order .hf-row,
.hfx .hf-order .hf-delivery-section{
  padding:0 24px;font-size:14.5px;color:var(--v3-body);
}
.hfx .hf-order .hf-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:8px 24px;line-height:1.5;
}
.hfx .hf-order .hf-row:first-of-type{padding-top:20px}
/* Beschriftung leise, Betrag laut. Vorher trugen beide dieselbe Farbe und fast
   dasselbe Gewicht — die Zeile hatte keine Rangfolge und las sich flach. */
.hfx .hf-order .hf-row > span:first-child{color:#6B7C8F}
.hfx .hf-order .hf-row b{
  color:#101B2B;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* Die Lieferzeile traegt eine Beschreibung ("Wood Flooring, SPC & Porcelain
   Tiles"). Sie darf umbrechen, der Betrag daneben nie.

   20.08.2026: aus der Klammer wird eine Bildunterschrift. In runden Klammern
   und in derselben Zeilenfarbe las sich der Zusatz wie ein nachtraeglicher
   Einschub; als Versalzeile darunter ist er das, was er ist — die Angabe,
   WOFUER der Betrag gilt. Die Klammern sind auch im Markup weg. */
.hfx .hf-order .hf-row > span{min-width:0}
.hfx .hf-order .hf-row .hf-row__sub{
  display:block;margin-top:4px;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#8595A6;line-height:1.45;
}
.hfx .hf-order .hf-row b.hf-row__pending{color:var(--v3-green);font-weight:500;white-space:nowrap}
.hfx .hf-order .hf-delivery-section{padding:0 0 22px;border-bottom:1px solid var(--v3-line)}
.hfx .hf-div{display:none}

/* Die Endsumme ist die eine Zahl, wegen der die Seite existiert. Sie bekommt
   entsprechend Raum: mehr Hoehe, groessere Ziffern, und die Beschriftung als
   ruhige Kapitaelchenzeile daneben. */
/* 20.08.2026: der Verlauf ist weg. Er lief von einem blassen Gruen ins Weisse
   und endete oben an einer harten Kante — aus zwei Schritten Abstand sah das
   nach einem Fleck aus, nicht nach einer Flaeche. Jetzt eine ruhige Flaeche mit
   einer Haarlinie darueber: die Kante ist gewollt statt ein Nebenprodukt.
   Werte wie im Dashboard-Master (#FBFCFD auf #EEF2F6). */
.hfx.hf-checkout-shell .hf-order > .hf-total,
.hfx .hf-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px 24px 24px;margin:0;border:0;border-radius:0;
  border-top:1px solid #EEF2F6;background:#FBFCFD;
}
.hfx.hf-checkout-shell .hf-order > .hf-total > span:first-child,
.hfx .hf-total > span:first-child,
.hfx .hf-total span{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#8595A6;
}
.hfx.hf-checkout-shell .hf-order > .hf-total > :last-child,
.hfx .hf-total > :last-child,
.hfx .hf-total b{
  font-size:36px;font-weight:600;letter-spacing:-.025em;color:var(--v3-ink);
  line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* ---- Seitenleiste: die eine Schaltflaeche --------------------------------- */
.hfx .hf-sidebar-continue{margin:0;display:flex;flex-direction:column;gap:16px}
/* Kantig statt Pille. Die Flaeche traegt einen feinen Verlauf und eine um eine
   Spur dunklere Kante — das ist der Unterschied zwischen "gruen angemalt" und
   einer Schaltflaeche, die eine Oberflaeche hat. Bewusst OHNE Anheben beim
   Ueberfahren: der kurze Sprung samt Leuchten wirkt billig. Stattdessen wird
   die Flaeche satter und der Schatten tiefer; beim Druecken kehrt er sich um. */
.hfx .hf-sidebar-continue__btn,
.hfx button#place_order.hf-sidebar-continue__btn{
  width:100%;height:60px;padding:0 18px;
  border:1px solid #0b5c34;border-radius:3px;
  background:linear-gradient(180deg,#12894f 0%,#0f7b45 100%);
  color:#fff;font:inherit;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 2px rgba(18,41,61,.10),
    0 12px 24px -14px rgba(11,92,52,.60);
  transition:background .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hfx .hf-sidebar-continue__btn:hover:not([disabled]):not(.is-locked),
.hfx button#place_order.hf-sidebar-continue__btn:hover:not([disabled]):not(.is-locked){
  background:linear-gradient(180deg,#0f7b45 0%,#0b5d34 100%);
  border-color:#094c2b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 4px rgba(18,41,61,.12),
    0 18px 32px -16px rgba(11,92,52,.70);
}
.hfx .hf-sidebar-continue__btn:active:not([disabled]):not(.is-locked),
.hfx button#place_order.hf-sidebar-continue__btn:active:not([disabled]):not(.is-locked){
  background:#0b5d34;border-color:#094c2b;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.22);
}
.hfx .hf-sidebar-continue__btn:focus-visible,
.hfx button#place_order.hf-sidebar-continue__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,123,69,.30),inset 0 1px 0 rgba(255,255,255,.16);
}
/* Gesperrt: flach, ohne Verlauf, ohne Schatten — nichts daran soll klickbar
   aussehen. */
.hfx .hf-sidebar-continue__btn[disabled],
.hfx .hf-sidebar-continue__btn.is-locked,
.hfx button#place_order.hf-sidebar-continue__btn[disabled],
.hfx button#place_order.hf-sidebar-continue__btn.is-locked{
  background:var(--v3-off);border-color:var(--v3-line);color:var(--v3-faint);
  box-shadow:none;
}
.hfx .hf-sidebar-continue__btn[disabled]{cursor:not-allowed}
.hfx .hf-sidebar-continue__note,
.hfx .hf-place-order-note{
  display:block;margin:0;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--v3-faint);
}

/* ---- schmale Fenster ------------------------------------------------------ */
@media (max-width:900px){
  .hfx .hf-grid{grid-template-columns:1fr}
  .hfx .hf-sidebar{position:static}
  .hfx .hf-card,
  .hfx .hf-notes{padding:24px 20px}
  .hfx .hf-pagehead{gap:16px}
  .hfx .hf-progress__steps{flex-wrap:wrap;gap:10px}
  .hfx .hf-progress__line{display:none}
}

/* ============================================================================
   ZAHLUNGSSCHRITT — Anordnung (20.08.2026)
   ----------------------------------------------------------------------------
   Was hier NICHT geht, zuerst: das Innere des Kartenfeldes und die Zeilen
   "Credit / Debit Card" und "Klarna" liegen in Stripes iframe. Die Liste
   drumherum ist bereits flachgelegt (siehe :only-child weiter oben) — der
   sichtbare Rahmen gehoert Stripe.

   Sein Aussehen zieht sich das Plugin allerdings AUS UNSERER SEITE: in
   upe-classic.js steht fuer den klassischen Checkout
     upeThemeInputSelector: "#billing_first_name"
     upeThemeLabelSelector: ".woocommerce-checkout .form-row label"
     backgroundSelectors:   [".payment_box", "#payment", "form.checkout", "body"]
   Stripe uebernimmt also Rahmen, Radius und Schrift unserer Formularfelder.
   Wer das Kartenfeld anders haben will, aendert diese Felder — nicht dieses
   Stylesheet. Bewusst nicht mitgemacht: das haette in einem Zug jedes Feld der
   Kasse umgestellt, ohne dass jemand das Ergebnis im iframe sehen kann.

   Geaendert wird deshalb nur, was uns gehoert: die Gruppierung. Die drei
   Wallet-Knoepfe, der Trenner und das Zahlungsfeld sollen als EIN Block lesen,
   nicht als drei lose Teile mit viel Luft dazwischen.
   ========================================================================== */

/* Ueberschrift dichter an ihre Knoepfe. Sie beschriftet die Reihe darunter —
   der alte Abstand liess sie zum vorigen Block gehoeren. */
.hfx .hf-express-slot::before{margin-bottom:2px}
.hfx .hf-express-slot{gap:10px}

/* Der MOTO-Hinweis des Gateways steht nur fuer angemeldete Administratoren im
   Dokument; Kunden sehen ihn nie. Trotzdem sass er als grosses gelbes Feld
   zwischen Ueberschrift und Wallet-Knoepfen und bestimmte die Anordnung. Hier
   wird er zu einer leisen Zeile — sichtbar fuer den, den es angeht. */
.hfx .hf-express-slot .woocommerce-info,
.hfx .hf-express-slot .woocommerce-message{
  margin:0;padding:8px 12px;
  background:#fafbfc;border:1px solid #e4e9ed;border-left:3px solid #cfd8de;
  border-radius:0;
  font-size:11.5px;line-height:1.5;color:#8c9ba6;
  list-style:none;
}
.hfx .hf-express-slot .woocommerce-info::before,
.hfx .hf-express-slot .woocommerce-message::before{content:none;display:none}
.hfx .hf-express-slot .woocommerce-info a,
.hfx .hf-express-slot .woocommerce-message a{color:#55677A}

/* Trenner und Zahlungsfeld ruecken zusammen: der Abstand ueber "or pay by"
   trennt die Gruppen, der darunter gehoert zum Feld. */
.hfx .hf-payment-methods{margin-top:14px}

/* ============================================================================
   ZAHLUNGSSCHRITT — Zeile, Waerme, Tiefe (20.08.2026, spaeter Abend)
   ----------------------------------------------------------------------------
   Auftrag des Eigentuemers: "Klarna neben den Punkt, nicht darunter" und
   "insgesamt trist, nicht herzlich".

   Werte aus "Checkout Payment v2.dc.html" (Claude Design) ausgelesen. Der
   Entwurf ist WAERMER als das, was live steht — er hat Tiefe, die in der
   Umsetzung fehlte, nicht andere Farben. Die Marken (--v3-*) stimmen bereits.

   NICHT gemacht: den Verlauf am Summenblock zurueckholen. Er wurde am
   20.08.2026 bewusst entfernt ("lief von blassem Gruen ins Weisse und endete
   an einer harten Kante — aus zwei Schritten Abstand ein Fleck"). Diese
   Beobachtung bleibt richtig. Stattdessen die FLACHE Toenung des Entwurfs:
   dieselbe Waerme, ohne Kante, weil es nichts zu verlaufen gibt.

   NICHT moeglich: "18+, T&Cs apply. Credit subject to status." entfernen. Am
   Dokument gemessen — der Text steht NULLMAL im DOM, er liegt in Stripes
   iframe (`__privateStripeFrame…`), also cross-origin. Von hier kommt weder
   CSS noch JS dorthin. Er ist ausserdem die vorgeschriebene
   Verbraucherkredit-Warnung fuer Klarnas BNPL in UK und gehoert dorthin.
   ========================================================================== */

/* ---- Radio und Beschriftung auf EINER Zeile ------------------------------ */
/* `!important` ist hier kein Faulheitsmittel, sondern das einzige Mittel.
   Fremdes JS (jQuery `.show()`) schreibt zeitweise `style="display:block"`
   direkt auf das <li>. Ein Inline-Style schlaegt jede Spezifitaet; nur
   `!important` schlaegt ihn. Am Dokument nachgewiesen: das style-Attribut ist
   mal leer, mal "display: block;" — deshalb stand "Klarna" mal neben und mal
   unter dem Punkt. Ein Fehler, der beim Hinsehen verschwindet.

   Der Entwurf legt beide ausdruecklich auf eine Zeile:
   `display:flex; align-items:center; gap:12px`. */
.hfx ul.wc_payment_methods li.wc_payment_method{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
/* Das Feld der Zahlungsart faellt darunter auf volle Breite. Ohne das saesse
   es in derselben Flex-Zeile neben der Beschriftung. */
.hfx ul.wc_payment_methods li.wc_payment_method > .payment_box{
  flex-basis:100%;
  order:99;
}
/* Die Beschriftung nimmt den freien Platz, die Logos bleiben rechts.
   
   `:not(:only-child)` ist hier der Kern, nicht Kosmetik. Weiter oben steht seit
   laengerem `ul.wc_payment_methods > li:only-child > label{display:none}` — bei
   genau EINER Zahlungsart braucht es keine Beschriftung, das Feld darunter ist
   die Zahlungsart. Diese Regel hier hat dieselbe Spezifitaet und steht spaeter,
   also hat ihr `display:flex` die Ausblendung ueberschrieben: "Payment options"
   stand ab 1.10.21 wieder da, mit der gruenen Toenung der gewaehlten Zeile
   darum. Eingefuehrt wurde sie fuer die Klarna-Zeile, wo es zwei Zahlungsarten
   gibt — dort ist sie richtig, hier war sie ein Nebeneffekt. */
.hfx ul.wc_payment_methods li.wc_payment_method:not(:only-child) > label{
  flex:1 1 auto;min-width:0;margin:0;display:flex;align-items:center;gap:10px;
}
/* Und aus demselben Grund traegt eine einzelne Zahlungsart auch keine Toenung
   und keine gruene Kante: es gibt nichts zu waehlen, also nichts zu markieren. */
.hfx ul.wc_payment_methods li.wc_payment_method:only-child:has(input:checked){
  background:none;box-shadow:none;
}

/* ---- Gewaehlte Zahlungsart sichtbar machen ------------------------------- */
/* Vorher #fafbfc auf #ffffff — ein Unterschied, den man suchen muss. Der
   Entwurf faerbt die gewaehlte Zeile; hier zusaetzlich eine gruene Kante
   links, damit die Wahl auch ohne Farbwahrnehmung ablesbar bleibt. */
.hfx ul.wc_payment_methods li.wc_payment_method:has(input:checked){
  background:var(--v3-tint);
  box-shadow:inset 3px 0 0 var(--v3-green);
}
.hfx ul.wc_payment_methods li.wc_payment_method:has(input:checked) > label{
  font-weight:600;color:var(--v3-ink);
}
/* Das Feld darunter behaelt Weiss, damit Stripes Element auf ruhigem Grund
   sitzt — der Entwurf macht es genauso. */
.hfx ul.wc_payment_methods li.wc_payment_method:has(input:checked) > .payment_box{
  background:#fff;
}

/* ---- Zahlartenlogos als Chip statt als nacktes Bild ---------------------- */
/* Der Entwurf zeigt sie als 38x25-Plaettchen mit Innenglanz und feinem
   Schatten. WooCommerce liefert ein <img>; die Fassung darum ist unsere. */
.hfx ul.wc_payment_methods li.wc_payment_method img{
  max-height:25px;width:auto;margin-left:auto;
  border-radius:0;
  box-shadow:0 1px 2px rgba(18,41,61,.12);
}

/* ---- Endsumme: warm statt grau ------------------------------------------ */
/* Die eine Zahl, wegen der die Seite existiert, sass auf #FBFCFD mit einer
   grauen Beschriftung. Der Entwurf toent die Flaeche gruen und schreibt
   "TOTAL" in Gruen. Flach, ohne Verlauf — siehe Kopf dieses Blocks. */
.hfx.hf-checkout-shell .hf-order > .hf-total,
.hfx .hf-total{
  border-top:1px solid var(--v3-tint-line);
  background:var(--v3-tint);
}
.hfx.hf-checkout-shell .hf-order > .hf-total > span:first-child,
.hfx .hf-total > span:first-child,
.hfx .hf-total span{color:var(--v3-green)}

/* ---- Bestaetigte Lieferung: etwas mehr Gegenwart ------------------------- */
.hfx .hf-delivery-section,
.hfx .hf-delivery-confirmed{
  border-radius:var(--v3-r-ctl);
}

/* ---- Gesperrter Bestellknopf: ruhig, aber nicht kalt --------------------- */
/* Er ist der groesste Block der Seite, solange die Bedingungen nicht
   angehakt sind. #edf0f2 daneben laesst die ganze Spalte grau wirken. Weiter
   deutlich gesperrt — nur nicht mehr blechern. */
.hfx .hf-sidebar-continue__btn[disabled],
.hfx .hf-sidebar-continue__btn.is-locked,
.hfx button#place_order.hf-sidebar-continue__btn[disabled],
.hfx button#place_order.hf-sidebar-continue__btn.is-locked{
  background:#F1F5F2;
  border-color:var(--v3-tint-line);
  color:#7C8B83;
}

/* ---- Ein Hauch Tiefe auf den Karten ------------------------------------- */
/* Der Entwurf setzt Karte und Seite auf dasselbe Weiss und traegt den
   Unterschied ueber einen sehr flachen Schatten. Ohne ihn steht alles auf
   einer Ebene, und genau das liest sich flach. */
.hfx.hf-checkout-shell .hf-card,
.hfx.hf-checkout-shell .hf-order{
  box-shadow:0 1px 2px rgba(18,41,61,.04), 0 12px 28px -22px rgba(18,41,61,.28);
}

/* ============================================================================
   ZAHLUNGSARTEN — keine Kartenlogos (21.08.2026)
   ----------------------------------------------------------------------------
   Auf Wunsch des Eigentuemers. Das Stripe-Plugin haengt hinter die Beschriftung
   "Credit / Debit Card" eine Reihe Markenzeichen (Visa, Mastercard, Amex,
   Discover), die je nach Breite als Karussell laeuft. Sie tragen nichts bei:
   welche Karten gehen, entscheidet sich im Zahlungsfeld darunter, und eine
   wandernde Bilderreihe neben einem Auswahlpunkt lenkt vom Auswaehlen ab.

   Ausgeblendet, nicht entfernt: das Markup gehoert dem Gateway. `display:none`
   nimmt sie aus dem Fluss UND aus dem Screenreader — beides richtig, denn ohne
   Text sagen sie ohnehin nichts.

   NICHT betroffen: das Klarna-Plaettchen traegt die Beschriftung der Zahlungsart
   selbst und bleibt deshalb stehen.
   ========================================================================== */
/* Breit gefasst statt auf eine Klasse gewettet: das Gateway hat die Huelle um
   diese Bilder schon mehrfach umbenannt (`stripe-icon`,
   `payment-methods--logos`, `wc-stripe-card-icons-container`). Jedes Bild in
   der Beschriftung DIESER Zahlungsart ist ein Markenzeichen — Text steht dort
   als Text, nicht als Grafik. `.payment_method_stripe` trifft nur die
   Kartenzeile; Klarna hat ein eigenes <li> und behaelt sein Plaettchen. */
.hfx ul.wc_payment_methods li.payment_method_stripe > label img,
.hfx ul.wc_payment_methods li.payment_method_stripe > img,
.hfx ul.wc_payment_methods li.payment_method_stripe .payment-methods--logos,
.hfx ul.wc_payment_methods li.payment_method_stripe .wc-stripe-card-icons-container{
  display:none !important;
}

/* ============================================================================
   EXPRESS-KNOEPFE — Platz reservieren statt springen (21.08.2026)
   ----------------------------------------------------------------------------
   Gemessen: `stripe.js` startet bei 1266 ms und laeuft 254 ms. Apple Pay,
   Google Pay und Link koennen davor nicht da sein. Das laesst sich verkuerzen
   (preload, Kopfbereich — siehe Checkout.php), aber nicht auf null bringen:
   ob eine Brieftasche verfuegbar ist, entscheidet das Geraet.

   Was sich vollstaendig abstellen laesst, ist der SPRUNG. Bisher stand hier
   `min-height:56px` — die Hoehe EINER Knopfreihe ohne die Beschriftung
   darueber. Sobald die Knoepfe kamen, wuchs der Block und alles darunter
   rutschte. Genau das liest sich als "laedt noch mal nach".

   Reserviert wird jetzt die volle Hoehe: Beschriftung (rund 16px + 10px
   Abstand) plus Knopfreihe (56px). Kommt nichts, greift `:empty` weiter oben
   und der Block verschwindet ganz — reserviert wird also nur dort, wo auch
   etwas kommen kann.
   ========================================================================== */
.hfx .hf-express-slot{
  min-height:82px;
  align-content:start;
}
/* Der Behaelter des Gateways misst sich selbst auf 0, solange Stripe nicht
   fertig ist. Ohne eine Mindesthoehe faellt die reservierte Flaeche in sich
   zusammen, sobald er eingehaengt wird — der Sprung waere zurueck, nur eine
   Zehntelsekunde spaeter. */
.hfx .hf-express-slot > #wc-stripe-express-checkout-element{
  min-height:56px;
}

/* =========================================================================
   KONVERSIONS-HAERTUNG (01.09.2026, Eigentuemer: "Struktur von Basket und
   Checkout zu weich -- man muss deutlicher sehen, wo die Produkte sind und
   wo man auf Checkout drueckt; der Footer ist staerker als der Inhalt").
   Additiv ans Dateiende: gewinnt bei gleicher Spezifitaet die Kaskade.
   Marken-Werte wie ueberall: Navy #0a1f3a, Gruen #37c84b (Text darauf
   Navy), Gruentext #15803D, Linien #d8dee5. Kantig. */

/* Die Produktliste: jede Position eine klar gerahmte Karte statt weicher
   Trennlinien-Liste. */
.hfx .hf-cart-item{
  background:#fff;
  border:1px solid #d8dee5;
  padding:14px;
  margin-bottom:10px;
}
.hfx .hf-cart-item:last-child{margin-bottom:0}

/* Die Summen-Box traegt einen deutlichen Rahmen und die gruene Kante --
   das Auge findet sie sofort. */
.hfx .hf-summary{
  border:1.5px solid #0a1f3a;
  border-top:4px solid #37c84b;
  background:#fff;
  padding:18px 16px;
}
.hfx .hf-summary__eyebrow{color:#15803D;font-weight:700}

/* DER Knopf der Seite: satt, gross, unuebersehbar. */
.hfx .hf-btn--checkout{
  background:#37c84b;
  color:#0a1f3a;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  min-height:54px;
  border:0;
  box-shadow:0 12px 26px -10px rgba(55,200,75,.55);
  transition:transform .15s,background .15s;
}
.hfx .hf-btn--checkout:hover{background:#2fae3f;color:#0a1f3a;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .hfx .hf-btn--checkout{transition:none}
  .hfx .hf-btn--checkout:hover{transform:none}
}

/* Feld-Diaet (01.09.2026): Company + Bestellnotiz hinter dem Aufklapper.
   Die Klasse setzt hf-checkout-diet.php nur, wenn beide Felder leer sind. */
.hfx .hf-ckd-hidden{display:none}
.hfx .hf-ckd-toggle{
  display:inline-flex;gap:6px;align-items:baseline;
  background:none;border:0;cursor:pointer;padding:2px 0 14px;
  font-family:inherit;font-size:13px;font-weight:700;color:#15803D;
  border-bottom:0;text-decoration:none;
}
.hfx .hf-ckd-toggle span{font-weight:400;color:#66707d}
.hfx .hf-ckd-toggle:hover{color:#0a1f3a}