/* ====================================================================
   PICKER POPUP v4 — Phase 1 Revolution
   Two-column layout: hero image (40%) | compact content (60%)
   One white surface, no internal background layers, segmented format
   selector instead of bulky cards.
   ==================================================================== */

/* Backdrop + panel — uses body.hf-ui-system prefix to beat earlier
   layer rule at line ~10833 that forces display:flex with !important. */
#hf-picker .hf-modal__backdrop,
#hf-picker .hf-ui-modal__backdrop,
body.hf-ui-system #hf-picker .hf-modal__backdrop,
body.hf-ui-system #hf-picker .hf-ui-modal__backdrop{background:rgba(13,28,52,.50)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;}
body #hf-picker .hf-modal__sheet,
body #hf-picker .hf-ui-modal__panel,
body.hf-ui-system #hf-picker .hf-modal__sheet,
body.hf-ui-system #hf-picker .hf-ui-modal__panel,
body.hf-ui-system .hf-modal--picker .hf-modal__sheet{position:relative!important;display:grid!important;grid-template-columns:42% 58%!important;grid-template-rows:auto!important;flex-direction:initial!important;width:min(1040px,calc(100vw - 48px))!important;max-width:min(1040px,calc(100vw - 48px))!important;min-height:540px!important;max-height:calc(100vh - 64px)!important;background:#ffffff!important;border-radius:20px!important;box-shadow:0 40px 80px rgba(13,28,52,.26),0 12px 28px rgba(13,28,52,.10)!important;overflow:hidden!important;padding:0!important;}

/* Premium gold accent strip — top edge of panel */
#hf-picker .hf-picker__accent{position:absolute!important;top:0!important;left:0!important;right:0!important;height:3px!important;background:linear-gradient(90deg,transparent 0%,#96d69e 22%,#79b781 50%,#96d69e 78%,transparent 100%)!important;z-index:5!important;pointer-events:none!important;}

/* ===== LEFT COLUMN — Hero image ===== */
#hf-picker .hf-picker__hero{position:relative!important;grid-column:1!important;background:#f6f8fb!important;overflow:hidden!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;min-height:540px!important;}
#hf-picker .hf-picker__hero::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(135deg,transparent 60%,rgba(13,47,87,.06) 100%)!important;pointer-events:none!important;}
#hf-picker .hf-picker__hero-img,
#hf-picker #hf-picker-thumb{width:100%!important;height:100%!important;min-height:540px!important;object-fit:cover!important;object-position:center!important;display:block!important;border:0!important;border-radius:0!important;background:#f6f8fb!important;box-shadow:none!important;}

/* ===== RIGHT COLUMN — Content ===== */
#hf-picker .hf-picker__content{grid-column:2!important;display:flex!important;flex-direction:column!important;background:#ffffff!important;overflow:hidden!important;min-height:0!important;}

/* All sections inside right column = pure white, no internal banding */
#hf-picker .hf-modal__head--picker,
#hf-picker .hf-picker__format-head,
#hf-picker .hf-picker__opts,
#hf-picker .hf-picker__footer,
#hf-picker .hf-picker__related,
#hf-picker .hf-picker__footer-meta,
#hf-picker .hf-picker__selected{background:#ffffff!important;background-image:none!important;}

/* ====================================================================
   PHASE 2 — VISUAL POLISH
   No font changes. Just refined hover, color hierarchy, microinteractions.
   ==================================================================== */

/* Hero image — slow zoom-out on open (subtle, premium) */
#hf-picker .hf-picker__hero-img,
#hf-picker #hf-picker-thumb{transform:scale(1.02)!important;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)!important;}
#hf-picker.hf-modal--open .hf-picker__hero-img,
#hf-picker.hf-modal--visible .hf-picker__hero-img,
#hf-picker.is-open .hf-picker__hero-img{transform:scale(1)!important;}

/* Header — refined champagne strip animation */
#hf-picker .hf-modal__eyebrow::before{transition:width .4s cubic-bezier(.22,.61,.36,1)!important;}
#hf-picker.hf-modal--open .hf-modal__eyebrow::before,
#hf-picker.is-open .hf-modal__eyebrow::before{width:44px!important;}

/* Title — slightly tighter for premium density */
#hf-picker .hf-modal__title{font-weight:800!important;font-size:21px!important;letter-spacing:-.022em!important;line-height:1.18!important;}

/* Format pills — refined hover lift, smoother active */
#hf-picker .hf-picker__opt{transition:border-color .22s cubic-bezier(.22,.61,.36,1),background-color .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s cubic-bezier(.22,.61,.36,1),transform .18s cubic-bezier(.22,.61,.36,1)!important;}
#hf-picker .hf-picker__opt:hover{border-color:rgba(126,196,135,.55)!important;background:#f6f8fb!important;box-shadow:0 4px 14px rgba(13,47,87,.05)!important;transform:translateY(-1px)!important;}
#hf-picker .hf-picker__opt:active{transform:translateY(0)!important;}
#hf-picker .hf-picker__opt--active{transform:none!important;}
#hf-picker .hf-picker__opt--active:hover{transform:none!important;background:#eef4fb!important;}

/* Meta line — NO italic, just lighter weight + softer color */
#hf-picker .hf-picker__opt-meta{font-style:normal!important;font-weight:500!important;color:#9099ad!important;letter-spacing:.02em!important;}
#hf-picker .hf-picker__opt--active .hf-picker__opt-meta{color:#7a8499!important;}

/* Currency symbol breathes more — bigger spacing, no font change */
#hf-picker .hf-picker__opt-currency{font-weight:600!important;color:#7ec487!important;margin-right:3px!important;font-size:12.5px!important;opacity:.85!important;}
#hf-picker .hf-picker__opt-unit{font-weight:500!important;color:#9099ad!important;opacity:.85!important;}

/* Sample limit — no italic, plain small note */
#hf-picker .hf-picker__sample-limit{font-style:normal!important;font-size:10.5px!important;color:#9099ad!important;letter-spacing:.02em!important;font-weight:500!important;display:flex!important;align-items:center!important;gap:6px!important;}
#hf-picker .hf-picker__sample-limit-dot{width:5px!important;height:5px!important;border-radius:50%!important;background:#7ec487!important;flex-shrink:0!important;}

/* Stepper — softer + smoother */
#hf-picker .hf-qty--picker{transition:box-shadow .22s ease!important;}
#hf-picker .hf-qty--picker:hover{box-shadow:inset 0 0 0 1px rgba(126,196,135,.32)!important;}
#hf-picker .hf-qty--picker .hf-qty__btn{transition:background-color .15s ease,color .15s ease!important;}
#hf-picker .hf-qty--picker .hf-qty__btn:hover{background:rgba(126,196,135,.08)!important;color:#0d2f57!important;}
#hf-picker .hf-qty--picker .hf-qty__btn:active{background:rgba(126,196,135,.16)!important;}

/* CTA — refined: gold underglow on hover, smoother lift */
#hf-picker .hf-picker__add-btn{position:relative!important;overflow:hidden!important;transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s cubic-bezier(.22,.61,.36,1),background-color .22s ease!important;}
#hf-picker .hf-picker__add-btn::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(135deg,rgba(150,214,158,.0) 0%,rgba(150,214,158,.18) 100%)!important;opacity:0!important;transition:opacity .25s ease!important;pointer-events:none!important;}
#hf-picker .hf-picker__add-btn:hover{background:#0a2344!important;transform:translateY(-2px)!important;box-shadow:0 14px 28px rgba(13,47,87,.28),0 0 0 1px rgba(126,196,135,.30)!important;}
#hf-picker .hf-picker__add-btn:hover::after{opacity:1!important;}
#hf-picker .hf-picker__add-btn:active{transform:translateY(0)!important;}
#hf-picker .hf-picker__add-btn svg{opacity:.92!important;transition:transform .22s ease!important;}
#hf-picker .hf-picker__add-btn:hover svg{transform:translateX(-1px)!important;}

/* Related-arrow buttons — softer hover */
#hf-picker .hf-picker__related-arrow{transition:background-color .15s ease,border-color .15s ease,transform .15s ease!important;}
#hf-picker .hf-picker__related-arrow:hover{transform:translateY(-1px)!important;}
#hf-picker .hf-picker__related-arrow:active{transform:translateY(0)!important;}

/* Related cards — refined hover, no harsh transform */
#hf-picker .hf-picker__rel-card{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease!important;}
#hf-picker .hf-picker__rel-card:hover{border-color:rgba(126,196,135,.50)!important;transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(13,47,87,.08)!important;}
#hf-picker .hf-picker__rel-img img{transition:transform .35s cubic-bezier(.22,.61,.36,1)!important;}
#hf-picker .hf-picker__rel-card:hover .hf-picker__rel-img img{transform:scale(1.04)!important;}
#hf-picker .hf-picker__rel-name{font-weight:700!important;font-size:11.5px!important;letter-spacing:-.005em!important;color:#0d2f57!important;}

/* X close — gentle hover scale */
#hf-picker .hf-modal__close{transition:background-color .18s ease,transform .18s ease!important;}
#hf-picker .hf-modal__close:hover{background:#dce3eb!important;transform:scale(1.05)!important;}
#hf-picker .hf-modal__close:active{transform:scale(0.98)!important;}

/* Subtle entry animation for the content column */
@keyframes hfPickerSlideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#hf-picker.hf-modal--open .hf-picker__content > *,
#hf-picker.is-open .hf-picker__content > *{animation:hfPickerSlideIn .42s cubic-bezier(.22,.61,.36,1) both!important;}
#hf-picker.hf-modal--open .hf-modal__head--picker,
#hf-picker.is-open .hf-modal__head--picker{animation-delay:.05s!important;}
#hf-picker.hf-modal--open .hf-picker__format-head,
#hf-picker.is-open .hf-picker__format-head{animation-delay:.10s!important;}
#hf-picker.hf-modal--open .hf-picker__opts,
#hf-picker.is-open .hf-picker__opts{animation-delay:.14s!important;}
#hf-picker.hf-modal--open .hf-picker__footer,
#hf-picker.is-open .hf-picker__footer{animation-delay:.18s!important;}
#hf-picker.hf-modal--open .hf-picker__related,
#hf-picker.is-open .hf-picker__related{animation-delay:.22s!important;}

/* Subtle champagne hairline at the bottom of the format selector block —
   replaces the hard navy line that was separating it from the footer */
#hf-picker .hf-picker__opts{position:relative!important;}
#hf-picker .hf-picker__opts::after{content:""!important;position:absolute!important;left:28px!important;right:28px!important;bottom:0!important;height:1px!important;background:linear-gradient(90deg,transparent 0%,rgba(126,196,135,.18) 30%,rgba(126,196,135,.18) 70%,transparent 100%)!important;pointer-events:none!important;}

/* Same gold hairline between footer (CTA row) and related section */
#hf-picker .hf-picker__related{position:relative!important;}
#hf-picker .hf-picker__related::before{content:""!important;position:absolute!important;left:28px!important;right:28px!important;top:0!important;height:1px!important;background:linear-gradient(90deg,transparent 0%,rgba(126,196,135,.18) 30%,rgba(126,196,135,.18) 70%,transparent 100%)!important;pointer-events:none!important;}

/* Reduce-motion: respect user preference */
@media (prefers-reduced-motion: reduce){
  #hf-picker .hf-picker__hero-img,
  #hf-picker #hf-picker-thumb{transform:none!important;transition:none!important;}
  #hf-picker.hf-modal--open .hf-picker__content > *,
  #hf-picker.is-open .hf-picker__content > *{animation:none!important;}
  #hf-picker .hf-picker__opt,
  #hf-picker .hf-picker__add-btn,
  #hf-picker .hf-picker__related-arrow,
  #hf-picker .hf-picker__rel-card,
  #hf-picker .hf-modal__close{transition:none!important;}
}

/* ====================================================================
   PHASE 3 — TYPOGRAFIE + RHYTHMUS
   All Poppins. Hierarchy via weight contrast (500/600/700/800/900),
   letter-spacing system, optical color tokens. No italic, no serif.
   8px baseline rhythm for vertical density.
   ==================================================================== */

/* Color + spacing tokens (scoped) */
#hf-picker{
  --hfp-ink:#0d2f57;          /* primary navy */
  --hfp-body:#5a6680;         /* body slate */
  --hfp-mute:#9099ad;         /* muted slate */
  --hfp-line:rgba(13,47,87,.08);
  --hfp-gold:#7ec487;
  --hfp-gold-bright:#96d69e;
  --hfp-gold-deep:#79b781;
  --hfp-warm:#eef4fb;
  --hfp-warm-2:#f4f8fd;
  --hfp-pad:28px;             /* horizontal frame */
  --hfp-step:8px;              /* baseline rhythm */
}

/* ===== Vertical rhythm — every section sits on 8px baseline ===== */
#hf-picker .hf-modal__head--picker{padding:calc(var(--hfp-step) * 3) var(--hfp-pad) calc(var(--hfp-step) * 1.5)!important;}
#hf-picker .hf-picker__format-head{padding:calc(var(--hfp-step) * 1.5) var(--hfp-pad) var(--hfp-step)!important;margin:0!important;}
#hf-picker .hf-picker__opts{padding:0 var(--hfp-pad) calc(var(--hfp-step) * 1.75)!important;gap:var(--hfp-step)!important;}
#hf-picker .hf-picker__footer{padding:var(--hfp-step) var(--hfp-pad) calc(var(--hfp-step) * 2.25)!important;}
#hf-picker .hf-picker__qty-row{gap:calc(var(--hfp-step) * 1.5)!important;}
#hf-picker .hf-picker__related{padding:calc(var(--hfp-step) * 1.5) var(--hfp-pad) calc(var(--hfp-step) * 2.5)!important;}
#hf-picker .hf-picker__related-head{margin:0 0 calc(var(--hfp-step) * 1.25)!important;}

/* ===== Typography hierarchy via WEIGHT contrast ===== */

/* Eyebrow — light caps, generous tracking, champagne */
#hf-picker .hf-modal__eyebrow{font:600 10px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.22em!important;color:var(--hfp-gold)!important;text-transform:uppercase!important;margin:0 0 calc(var(--hfp-step) * 1.25)!important;}
#hf-picker .hf-modal__eyebrow::before{height:1px!important;background:var(--hfp-gold)!important;}

/* Title — premium navy anchor, tight tracking */
#hf-picker .hf-modal__title{font:800 21px/1.16 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:-.025em!important;color:var(--hfp-ink)!important;}

/* "Price by format" eyebrow — same scale as main eyebrow for consistency */
#hf-picker .hf-picker__format-head{font:600 10px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.22em!important;color:var(--hfp-gold)!important;text-transform:uppercase!important;}

/* Format pills */
#hf-picker .hf-picker__opt{padding:calc(var(--hfp-step) * 1.5) var(--hfp-step)!important;border-color:var(--hfp-line)!important;border-radius:11px!important;}
#hf-picker .hf-picker__opt:hover{background:var(--hfp-warm)!important;}
#hf-picker .hf-picker__opt-main{gap:calc(var(--hfp-step) * .5)!important;}
#hf-picker .hf-picker__opt-top{margin-bottom:calc(var(--hfp-step) * .25)!important;}

#hf-picker .hf-picker__opt-label{font:600 9.5px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.22em!important;color:var(--hfp-gold)!important;text-transform:uppercase!important;}
#hf-picker .hf-picker__opt-pill{font:700 7.5px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.10em!important;padding:0 7px!important;height:13px!important;}

/* Price line — strong weight contrast: light currency, heavy amount, light unit */
#hf-picker .hf-picker__opt-price{gap:1px!important;align-items:baseline!important;}
#hf-picker .hf-picker__opt-currency{font:500 11.5px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-gold)!important;opacity:.78!important;margin-right:2px!important;letter-spacing:0!important;}
#hf-picker .hf-picker__opt-amount{font:900 22px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-ink)!important;letter-spacing:-.018em!important;}
#hf-picker .hf-picker__opt-unit{font:500 9.5px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-mute)!important;opacity:.85!important;margin-left:2px!important;letter-spacing:.01em!important;}
#hf-picker .hf-picker__opt-price--plain{font:900 18px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;}

/* Meta sub-line — 500 weight, mute slate, no italic */
#hf-picker .hf-picker__opt-meta{font:500 10px/1.3 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-mute)!important;letter-spacing:.02em!important;text-transform:none!important;font-style:normal!important;margin-top:1px!important;}

/* Stepper — refined dimensions and font */
#hf-picker .hf-qty--picker{height:44px!important;grid-template-columns:40px 50px 40px!important;border-radius:10px!important;}
#hf-picker .hf-qty--picker .hf-qty__btn{height:44px!important;font:500 18px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-ink)!important;}
#hf-picker .hf-qty--picker .hf-qty__input{height:44px!important;font:700 14.5px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-ink)!important;letter-spacing:-.005em!important;}

/* Sample limit — 500 weight tiny note */
#hf-picker .hf-picker__sample-limit{font:500 10px/1.4 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-mute)!important;letter-spacing:.02em!important;}

/* CTA — premium navy with tightly tracked caps */
#hf-picker .hf-picker__add-btn{height:44px!important;font:700 11px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.12em!important;text-transform:uppercase!important;border-radius:10px!important;}

/* Related */
#hf-picker .hf-picker__related-title{font:600 10px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.22em!important;color:var(--hfp-gold)!important;text-transform:uppercase!important;}
#hf-picker .hf-picker__related-arrow{width:26px!important;height:26px!important;}
#hf-picker .hf-picker__related-arrow svg{width:10px!important;height:10px!important;}
#hf-picker .hf-picker__rel-card{flex:0 0 128px!important;width:128px!important;border-radius:10px!important;}
#hf-picker .hf-picker__rel-body{padding:calc(var(--hfp-step) * .875) calc(var(--hfp-step) * 1.25) calc(var(--hfp-step) * 1.25)!important;}
#hf-picker .hf-picker__rel-name{font:600 11px/1.3 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-ink)!important;letter-spacing:-.005em!important;}

/* Hairlines — extend with the new padding token so they stay aligned */
#hf-picker .hf-picker__opts::after{left:var(--hfp-pad)!important;right:var(--hfp-pad)!important;}
#hf-picker .hf-picker__related::before{left:var(--hfp-pad)!important;right:var(--hfp-pad)!important;}

/* Header eyebrow strip — keep at 28px, recolor to use token */
#hf-picker .hf-modal__eyebrow::before{width:28px!important;}
#hf-picker.hf-modal--open .hf-modal__eyebrow::before,
#hf-picker.is-open .hf-modal__eyebrow::before{width:40px!important;}

/* X close — slightly smaller, more refined */
#hf-picker .hf-modal__close{width:36px!important;height:36px!important;}
#hf-picker .hf-modal__close::before{font:400 19px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-ink)!important;}

/* ===== Active card — keep gold accent + checkmark, refine corner ===== */
#hf-picker .hf-picker__opt--active::before{width:26px!important;height:26px!important;}
#hf-picker .hf-picker__opt--active::after{top:3px!important;left:4px!important;font:900 10px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;}

/* Best Value pill — slightly more breathable position */
#hf-picker .hf-picker__opt-pill{top:7px!important;right:7px!important;}

/* ===== Mobile responsive override — tighter on small screens ===== */
@media (max-width: 880px){
  #hf-picker{--hfp-pad:20px!important;--hfp-step:7px!important;}
  #hf-picker .hf-modal__title{font-size:18px!important;}
  #hf-picker .hf-picker__opt-amount{font-size:18px!important;}
  #hf-picker .hf-picker__opt-currency{font-size:10.5px!important;}
}

/* ====================================================================
   PHASE 4 — UX MICROINTERACTIONS
   - Sample = dashed gold (low-commitment signal)
   - Keyboard focus-visible: clean champagne ring
   - CTA success state (pulse + checkmark)
   - Stepper feedback on wheel scroll
   - Active-state inertia (subtle scale on press)
   ==================================================================== */

/* Sample pill — dashed gold border to signal "low-commitment / sample" */
#hf-picker .hf-picker__opt--sample{border-style:dashed!important;border-color:rgba(126,196,135,.55)!important;background:#fff!important;}
#hf-picker .hf-picker__opt--sample:hover{border-style:dashed!important;border-color:var(--hfp-gold)!important;background:var(--hfp-warm-2)!important;}
#hf-picker .hf-picker__opt--sample.hf-picker__opt--active{border-style:solid!important;}
#hf-picker .hf-picker__opt--sample .hf-picker__opt-label{color:var(--hfp-gold-deep)!important;}

/* Keyboard focus — clean champagne ring (no native blue) */
#hf-picker .hf-picker__opt:focus-visible,
#hf-picker .hf-picker__add-btn:focus-visible,
#hf-picker .hf-qty--picker .hf-qty__btn:focus-visible,
#hf-picker .hf-qty--picker .hf-qty__input:focus-visible,
#hf-picker .hf-picker__related-arrow:focus-visible,
#hf-picker .hf-picker__rel-card:focus-visible,
#hf-picker .hf-modal__close:focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(126,196,135,.30),0 0 0 1px var(--hfp-gold) inset!important;}
#hf-picker .hf-picker__add-btn:focus-visible{box-shadow:0 0 0 3px rgba(126,196,135,.40),0 6px 16px rgba(13,47,87,.18)!important;}

/* Press-down inertia — pills, CTA, arrows */
#hf-picker .hf-picker__opt:active{transform:translateY(0) scale(.985)!important;transition:transform .08s ease!important;}
#hf-picker .hf-picker__add-btn:active{transform:translateY(0) scale(.985)!important;transition:transform .08s ease!important;}
#hf-picker .hf-picker__related-arrow:active{transform:scale(.92)!important;transition:transform .08s ease!important;}

/* CTA success state — set via JS after a successful add */
#hf-picker .hf-picker__add-btn--success{background:#16a34a!important;box-shadow:0 8px 20px rgba(22,163,74,.32)!important;}
#hf-picker .hf-picker__add-btn--success:hover{background:#15903e!important;}
#hf-picker .hf-picker__add-btn--success::after{opacity:0!important;}
@keyframes hfPickerSuccessPulse{0%{box-shadow:0 8px 20px rgba(22,163,74,.32),0 0 0 0 rgba(22,163,74,.50);}70%{box-shadow:0 8px 20px rgba(22,163,74,.32),0 0 0 14px rgba(22,163,74,0);}100%{box-shadow:0 8px 20px rgba(22,163,74,.32),0 0 0 0 rgba(22,163,74,0);}}
#hf-picker .hf-picker__add-btn--success{animation:hfPickerSuccessPulse .6s cubic-bezier(.4,0,.2,1)!important;}

/* Stepper wheel feedback — momentary highlight on the input when wheel scroll changes value */
#hf-picker .hf-qty--picker.hf-qty--bumped{box-shadow:inset 0 0 0 1.5px var(--hfp-gold)!important;transition:box-shadow .35s ease!important;}

/* Smaller microcopy under title — populated by JS ("From £X.XX/m²") */
#hf-picker .hf-picker__price-anchor{display:block!important;margin-top:6px!important;font:500 11.5px/1.3 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:var(--hfp-mute)!important;letter-spacing:.01em!important;}
#hf-picker .hf-picker__price-anchor strong{font-weight:700!important;color:var(--hfp-ink)!important;}
#hf-picker .hf-picker__price-anchor[hidden]{display:none!important;}

/* Sample-limit warning state — when at cap (set by JS, optional) */
#hf-picker .hf-picker__qty-block.hf-picker__qty-block--limit-reached .hf-qty--picker{box-shadow:inset 0 0 0 1.5px rgba(220,38,38,.35)!important;}
#hf-picker .hf-picker__qty-block.hf-picker__qty-block--limit-reached .hf-picker__sample-limit-dot{background:#dc2626!important;}
#hf-picker .hf-picker__qty-block.hf-picker__qty-block--limit-reached .hf-picker__sample-limit{color:#991b1b!important;}

/* Cursor affordance — qty input shows ns-resize so users discover wheel scroll */
#hf-picker .hf-qty--picker .hf-qty__input{cursor:ns-resize!important;}

/* ====================================================================
   PHASE 5 — PATCH: fixes for issues discovered after orphan-block removal
   ==================================================================== */

/* Title — allow wrap up to 3 lines, no truncation */
body #hf-picker .hf-modal__title,
body.hf-ui-system #hf-picker .hf-modal__title{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;line-clamp:3!important;overflow:hidden!important;text-overflow:clip!important;white-space:normal!important;word-break:break-word!important;}

/* Format pills — let content fit, no overflow, allow currency to stay visible */
body #hf-picker .hf-picker__opt,
body.hf-ui-system #hf-picker .hf-picker__opt{overflow:visible!important;padding:14px 10px 12px!important;min-width:0!important;}
body #hf-picker .hf-picker__opt-price,
body.hf-ui-system #hf-picker .hf-picker__opt-price{white-space:nowrap!important;flex-wrap:nowrap!important;}
body #hf-picker .hf-picker__opt-currency,
body.hf-ui-system #hf-picker .hf-picker__opt-currency{display:inline-block!important;flex-shrink:0!important;font-size:13px!important;color:#7ec487!important;margin-right:3px!important;}
body #hf-picker .hf-picker__opt-amount,
body.hf-ui-system #hf-picker .hf-picker__opt-amount{flex-shrink:0!important;font-size:19px!important;letter-spacing:-.02em!important;}
body #hf-picker .hf-picker__opt-unit,
body.hf-ui-system #hf-picker .hf-picker__opt-unit{flex-shrink:0!important;font-size:10px!important;color:#9099ad!important;margin-left:3px!important;white-space:nowrap!important;}
body #hf-picker .hf-picker__opt-meta,
body.hf-ui-system #hf-picker .hf-picker__opt-meta{font-size:10px!important;line-height:1.3!important;color:#9099ad!important;white-space:normal!important;text-align:center!important;}

/* Sample-limit element — ALWAYS hidden (constraint communicated via MAX 2 badge below) */
body #hf-picker .hf-picker__sample-limit[hidden],
body.hf-ui-system #hf-picker .hf-picker__sample-limit[hidden],
body #hf-picker .hf-picker__sample-limit:not([hidden]),
body.hf-ui-system #hf-picker .hf-picker__sample-limit:not([hidden]){display:none!important;visibility:hidden!important;position:absolute!important;width:0!important;height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;}
body #hf-picker .hf-picker__footer,
body.hf-ui-system #hf-picker .hf-picker__footer{padding:8px var(--hfp-pad,28px) 14px!important;}

/* Best Value pill — high-end corner-badge, floating just outside top-right of pallet card */
body #hf-picker .hf-picker__opt-pill,
body.hf-ui-system #hf-picker .hf-picker__opt-pill{position:absolute!important;top:-9px!important;right:14px!important;left:auto!important;display:inline-flex!important;align-items:center!important;height:18px!important;padding:0 10px!important;background:linear-gradient(135deg,#96d69e 0%,#79b781 100%)!important;color:#fff!important;font:800 8px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.14em!important;text-transform:uppercase!important;border-radius:999px!important;white-space:nowrap!important;line-height:1!important;z-index:3!important;box-shadow:0 4px 10px rgba(126,196,135,.30)!important;}

/* Format pill — high-end structured: clean 3-row hierarchy, no overlap */
body #hf-picker .hf-picker__opt,
body.hf-ui-system #hf-picker .hf-picker__opt{position:relative!important;overflow:visible!important;padding:18px 12px 14px!important;min-width:0!important;}
body #hf-picker .hf-picker__opt-top,
body.hf-ui-system #hf-picker .hf-picker__opt-top{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:0 0 6px!important;gap:0!important;}
body #hf-picker .hf-picker__opt-label,
body.hf-ui-system #hf-picker .hf-picker__opt-label{display:block!important;width:100%!important;text-align:center!important;font:600 10px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.22em!important;color:#79b781!important;text-transform:uppercase!important;}
body #hf-picker .hf-picker__opt-main,
body.hf-ui-system #hf-picker .hf-picker__opt-main{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;gap:6px!important;width:100%!important;}
/* Soft divider line between price and meta */
body #hf-picker .hf-picker__opt--active .hf-picker__opt-main::after,
body.hf-ui-system #hf-picker .hf-picker__opt--active .hf-picker__opt-main::after{content:""!important;display:block!important;width:32px!important;height:1px!important;background:#7ec487!important;margin:4px auto 0!important;opacity:.6!important;}

/* Related cards — kill the legacy min-height & oversized body */
body #hf-picker .hf-picker__rel-img,
body.hf-ui-system #hf-picker .hf-picker__rel-img{height:auto!important;aspect-ratio:1/1!important;}
body #hf-picker .hf-picker__rel-body,
body.hf-ui-system #hf-picker .hf-picker__rel-body{min-height:0!important;padding:8px 10px 10px!important;background:#fff!important;}
body #hf-picker .hf-picker__rel-card,
body.hf-ui-system #hf-picker .hf-picker__rel-card{flex:0 0 128px!important;width:128px!important;min-height:0!important;height:auto!important;border-radius:10px!important;background:#fff!important;border:1px solid rgba(13,47,87,.08)!important;box-shadow:none!important;}

/* ====================================================================
   PHASE 6 — Unify Sample card with Box/Pallet + compact overall
   ==================================================================== */

/* SAMPLE plain-price card — match m2 cards visually:
   first character (£) tiny champagne, rest big navy. */
body #hf-picker .hf-picker__opt-price--plain,
body.hf-ui-system #hf-picker .hf-picker__opt-price--plain{display:inline-flex!important;justify-content:center!important;align-items:baseline!important;font:900 22px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:#0d2f57!important;letter-spacing:-.02em!important;}
body #hf-picker .hf-picker__opt-price--plain::first-letter,
body.hf-ui-system #hf-picker .hf-picker__opt-price--plain::first-letter{font-size:13px!important;font-weight:500!important;color:#7ec487!important;margin-right:3px!important;letter-spacing:0!important;opacity:.85!important;}

/* Box/Pallet price-amount → use same size as sample plain for visual consistency */
body #hf-picker .hf-picker__opt-amount,
body.hf-ui-system #hf-picker .hf-picker__opt-amount{font-size:22px!important;font-weight:900!important;letter-spacing:-.02em!important;color:#0d2f57!important;}

/* "Maximum 2 samples per product" — PREMIUM UX:
   Constraint is communicated upfront via a tiny corner-badge on the Sample format card.
   The separate banner row is fully hidden (saves vertical space, no popup growth). */
body #hf-picker .hf-picker__sample-limit,
body.hf-ui-system #hf-picker .hf-picker__sample-limit{display:none!important;}

/* MAX 2 badge on Sample card — IDENTICAL styling/positioning to BEST VALUE pill on Pallet.
   Floats above the card edge (top:-9px). Explicitly clears `left` to defeat the active-checkmark
   ::after rule that otherwise pins left:4px and stretches the badge full-width. */
body #hf-picker .hf-picker__opt--sample,
body.hf-ui-system #hf-picker .hf-picker__opt--sample{position:relative!important;}
body #hf-picker .hf-picker__opt--sample::after,
body.hf-ui-system #hf-picker .hf-picker__opt--sample::after{content:"MAX 2"!important;position:absolute!important;top:-9px!important;right:14px!important;left:auto!important;bottom:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:18px!important;padding:0 10px!important;background:linear-gradient(135deg,#96d69e 0%,#79b781 100%)!important;color:#fff!important;font:800 8px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.14em!important;text-transform:uppercase!important;border-radius:999px!important;border:0!important;white-space:nowrap!important;z-index:3!important;box-shadow:0 4px 10px rgba(126,196,135,.30)!important;text-shadow:none!important;text-indent:0!important;transform:none!important;}
/* On the active Sample, hide the gold corner-accent ::before (we use MAX 2 ribbon instead) */
body #hf-picker .hf-picker__opt--sample.hf-picker__opt--active::before,
body.hf-ui-system #hf-picker .hf-picker__opt--sample.hf-picker__opt--active::before{display:none!important;content:none!important;}
/* Also suppress the active-state divider line on Sample (cleaner with the floating pill) */
body #hf-picker .hf-picker__opt--sample.hf-picker__opt--active .hf-picker__opt-main::after,
body.hf-ui-system #hf-picker .hf-picker__opt--sample.hf-picker__opt--active .hf-picker__opt-main::after{display:none!important;}

/* + button at limit — subtle disabled state + tooltip via title attr (JS-driven class) */
body #hf-picker .hf-picker__add-btn--locked,
body.hf-ui-system #hf-picker .hf-picker__add-btn--locked{opacity:.55!important;cursor:not-allowed!important;background:#5a6680!important;}
body #hf-picker .hf-picker__add-btn--locked:hover,
body.hf-ui-system #hf-picker .hf-picker__add-btn--locked:hover{transform:none!important;background:#5a6680!important;box-shadow:0 6px 16px rgba(13,47,87,.18)!important;}

/* ====================================================================
   LAYOUT-STABILITY GUARD — no vertical shift between format states.
   Locks dimensions so switching to Sample doesn't push the popup up/down.
   ==================================================================== */
/* Kill any padding-bottom side-effects from older :has() rules */
body #hf-picker .hf-picker__qty-row,
body.hf-ui-system #hf-picker .hf-picker__qty-row,
body #hf-picker .hf-picker__qty-row:has(.hf-picker__sample-limit:not([hidden])),
body.hf-ui-system #hf-picker .hf-picker__qty-row:has(.hf-picker__sample-limit:not([hidden])){padding-bottom:0!important;padding-top:0!important;}
/* Kill the reached/pulse animations that bump position */
body #hf-picker .hf-picker__sample-limit--reached,
body.hf-ui-system #hf-picker .hf-picker__sample-limit--reached,
body #hf-picker .hf-picker__sample-limit--pulse,
body.hf-ui-system #hf-picker .hf-picker__sample-limit--pulse{animation:none!important;box-shadow:none!important;}
/* Stepper buttons in limit-reached state — same dimensions as normal state */
body #hf-picker .hf-picker__qty-block--limit-reached,
body.hf-ui-system #hf-picker .hf-picker__qty-block--limit-reached{padding:0!important;margin:0!important;transform:none!important;}
body #hf-picker .hf-qty__btn--locked,
body.hf-ui-system #hf-picker .hf-qty__btn--locked{width:auto!important;height:auto!important;padding:0!important;margin:0!important;transform:none!important;}
/* Format pills can't shift each other when activated */
body #hf-picker .hf-picker__opt,
body.hf-ui-system #hf-picker .hf-picker__opt{transform:none!important;}
body #hf-picker .hf-picker__opt--active,
body.hf-ui-system #hf-picker .hf-picker__opt--active{transform:none!important;margin:0!important;}
/* Active card uses identical border-width as inactive — color-only change */
body #hf-picker .hf-picker__opt,
body.hf-ui-system #hf-picker .hf-picker__opt{border-width:1.5px!important;}
body #hf-picker .hf-picker__opt--active,
body.hf-ui-system #hf-picker .hf-picker__opt--active{border-width:1.5px!important;}

/* ===== Compact pass — tighten all section paddings by ~25% ===== */
body #hf-picker .hf-modal__head--picker,
body.hf-ui-system #hf-picker .hf-modal__head--picker{padding:18px 24px 10px!important;}
body #hf-picker .hf-modal__title,
body.hf-ui-system #hf-picker .hf-modal__title{font-size:19px!important;line-height:1.18!important;}
body #hf-picker .hf-picker__format-head,
body.hf-ui-system #hf-picker .hf-picker__format-head{padding:8px 24px 4px!important;}
body #hf-picker .hf-picker__opts,
body.hf-ui-system #hf-picker .hf-picker__opts{padding:0 24px 12px!important;gap:8px!important;}
body #hf-picker .hf-picker__opt,
body.hf-ui-system #hf-picker .hf-picker__opt{padding:14px 10px 12px!important;}
body #hf-picker .hf-picker__footer,
body.hf-ui-system #hf-picker .hf-picker__footer{padding:6px 24px 14px!important;}
body #hf-picker .hf-picker__qty-row,
body.hf-ui-system #hf-picker .hf-picker__qty-row{gap:10px!important;}
body #hf-picker .hf-picker__qty-block,
body.hf-ui-system #hf-picker .hf-picker__qty-block{gap:8px!important;}
body #hf-picker .hf-qty--picker,
body.hf-ui-system #hf-picker .hf-qty--picker{display:inline-grid!important;grid-template-columns:42px 50px 42px!important;height:42px!important;width:auto!important;border-radius:11px!important;overflow:visible!important;}
/* Buttons must FILL the grid cell — older rule forces 48px and gets clipped */
body #hf-picker .hf-qty--picker .hf-qty__btn,
body.hf-ui-system #hf-picker .hf-qty--picker .hf-qty__btn{width:100%!important;min-width:0!important;max-width:none!important;height:42px!important;font-size:18px!important;border-radius:0!important;padding:0!important;flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important;}
body #hf-picker .hf-qty--picker .hf-qty__input,
body.hf-ui-system #hf-picker .hf-qty--picker .hf-qty__input{width:100%!important;min-width:0!important;height:42px!important;font-size:14px!important;padding:0!important;}

/* Flatten qty-block so stepper + CTA align cleanly on a single row.
   Sample-limit element stays display:none (constraint moved to format card). */
body #hf-picker .hf-picker__qty-row,
body.hf-ui-system #hf-picker .hf-picker__qty-row{grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto!important;}
body #hf-picker .hf-picker__qty-block,
body.hf-ui-system #hf-picker .hf-picker__qty-block{display:contents!important;}
body #hf-picker .hf-picker__qty-row .hf-qty--picker,
body.hf-ui-system #hf-picker .hf-picker__qty-row .hf-qty--picker{grid-column:1!important;grid-row:1!important;}
body #hf-picker .hf-picker__qty-row .hf-picker__cta-group,
body.hf-ui-system #hf-picker .hf-picker__qty-row .hf-picker__cta-group{grid-column:2!important;grid-row:1!important;}
body #hf-picker .hf-picker__add-btn,
body.hf-ui-system #hf-picker .hf-picker__add-btn{height:42px!important;font-size:11px!important;padding:0 18px!important;}
body #hf-picker .hf-picker__related,
body.hf-ui-system #hf-picker .hf-picker__related{padding:10px 24px 18px!important;}
body #hf-picker .hf-picker__related-head,
body.hf-ui-system #hf-picker .hf-picker__related-head{margin-bottom:8px!important;}
body #hf-picker .hf-modal__sheet,
body #hf-picker .hf-ui-modal__panel,
body.hf-ui-system #hf-picker .hf-modal__sheet,
body.hf-ui-system #hf-picker .hf-ui-modal__panel{min-height:480px!important;}
body #hf-picker .hf-picker__hero,
body.hf-ui-system #hf-picker .hf-picker__hero{min-height:480px!important;}
body #hf-picker .hf-picker__hero-img,
body #hf-picker #hf-picker-thumb,
body.hf-ui-system #hf-picker .hf-picker__hero-img,
body.hf-ui-system #hf-picker #hf-picker-thumb{min-height:480px!important;}

/* "YOU MIGHT ALSO LIKE" eyebrow — small champagne caps, not big bold */
body #hf-picker .hf-picker__related-title,
body.hf-ui-system #hf-picker .hf-picker__related-title{font:600 10px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.22em!important;color:#7ec487!important;text-transform:uppercase!important;}

/* Related cards — hide all the noisy elements (orphan rules restored) */
body #hf-picker .hf-picker__rel-meta,
body.hf-ui-system #hf-picker .hf-picker__rel-meta,
body #hf-picker .hf-picker__rel-trust,
body.hf-ui-system #hf-picker .hf-picker__rel-trust,
body #hf-picker .hf-picker__rel-details,
body.hf-ui-system #hf-picker .hf-picker__rel-details,
body #hf-picker .hf-picker__rel-badge,
body.hf-ui-system #hf-picker .hf-picker__rel-badge{display:none!important;}

/* Related cards — tight size, no min-height, simple body */
body #hf-picker .hf-picker__rel-card,
body.hf-ui-system #hf-picker .hf-picker__rel-card{flex:0 0 128px!important;width:128px!important;min-height:0!important;border-radius:10px!important;background:#fff!important;border:1px solid rgba(13,47,87,.08)!important;box-shadow:none!important;}
body #hf-picker .hf-picker__rel-card:hover,
body.hf-ui-system #hf-picker .hf-picker__rel-card:hover{border-color:rgba(126,196,135,.50)!important;box-shadow:0 8px 20px rgba(13,47,87,.08)!important;}
body #hf-picker .hf-picker__rel-img,
body.hf-ui-system #hf-picker .hf-picker__rel-img{aspect-ratio:1/1!important;background:#f2f4f7!important;overflow:hidden!important;}
body #hf-picker .hf-picker__rel-img img,
body.hf-ui-system #hf-picker .hf-picker__rel-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
body #hf-picker .hf-picker__rel-body,
body.hf-ui-system #hf-picker .hf-picker__rel-body{padding:8px 10px 10px!important;}
body #hf-picker .hf-picker__rel-name,
body.hf-ui-system #hf-picker .hf-picker__rel-name{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font:600 11px/1.3 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:#0d2f57!important;letter-spacing:-.005em!important;min-height:0!important;}

/* ====================================================================
   CONFIRMATION MODAL v4 — Two-column layout (matches picker)
   Hero image LEFT (42%) | content RIGHT (58%) on one white surface.
   Same panel proportions, gold accent strip, premium feel.
   ==================================================================== */

/* Backdrop — same dimmed blur as picker */
#hf-confirm .hf-modal__backdrop,
#hf-confirm .hf-ui-modal__backdrop,
body.hf-ui-system #hf-confirm .hf-modal__backdrop,
body.hf-ui-system #hf-confirm .hf-ui-modal__backdrop{background:rgba(13,28,52,.50)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;}

/* Panel — two-column grid, same shell + dimensions as picker */
body #hf-confirm .hf-cm,
body #hf-confirm .hf-ui-modal__panel,
body.hf-ui-system #hf-confirm .hf-cm,
body.hf-ui-system #hf-confirm .hf-ui-modal__panel,
body.hf-ui-system .hf-modal--confirm .hf-cm{position:relative!important;display:grid!important;grid-template-columns:42% 58%!important;grid-template-rows:auto!important;flex-direction:initial!important;width:min(1040px,calc(100vw - 48px))!important;max-width:min(1040px,calc(100vw - 48px))!important;min-height:480px!important;max-height:calc(100vh - 64px)!important;background:#ffffff!important;border-radius:20px!important;box-shadow:0 40px 80px rgba(13,28,52,.26),0 12px 28px rgba(13,28,52,.10)!important;overflow:hidden!important;padding:0!important;transform:none!important;opacity:1!important;}

/* Premium gold accent strip — top edge of panel */
#hf-confirm .hf-cm__accent{position:absolute!important;top:0!important;left:0!important;right:0!important;height:3px!important;background:linear-gradient(90deg,transparent 0%,#96d69e 22%,#79b781 50%,#96d69e 78%,transparent 100%)!important;z-index:5!important;pointer-events:none!important;}

/* LEFT COLUMN — Hero image */
#hf-confirm .hf-cm__hero{position:relative!important;grid-column:1!important;background:#f6f8fb!important;overflow:hidden!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;min-height:480px!important;}
#hf-confirm .hf-cm__hero::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(135deg,transparent 60%,rgba(13,47,87,.06) 100%)!important;pointer-events:none!important;}
#hf-confirm .hf-cm__hero-img{width:100%!important;height:100%!important;min-height:480px!important;object-fit:cover!important;object-position:center!important;display:block!important;border:0!important;border-radius:0!important;background:#f6f8fb!important;box-shadow:none!important;transform:scale(1.02)!important;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)!important;}
#hf-confirm .hf-cm__hero-img:not([src]),
#hf-confirm .hf-cm__hero-img[src=""]{visibility:hidden!important;}
#hf-confirm.hf-modal--open .hf-cm__hero-img,
#hf-confirm.hf-modal--visible .hf-cm__hero-img,
#hf-confirm.is-open .hf-cm__hero-img{transform:scale(1)!important;}

/* RIGHT COLUMN — Content */
#hf-confirm .hf-cm__content{grid-column:2!important;display:flex!important;flex-direction:column!important;background:#ffffff!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;max-height:calc(100vh - 64px)!important;}

/* All sections inside right column = pure white, no internal banding */
#hf-confirm .hf-cm__head,
#hf-confirm .hf-cm__product,
#hf-confirm .hf-cm__actions,
#hf-confirm .hf-cm__related{background:#ffffff!important;background-image:none!important;}

/* Header — compact, similar to picker */
#hf-confirm .hf-cm__head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;padding:18px 24px 8px!important;border-bottom:none!important;flex-shrink:0!important;}
#hf-confirm .hf-cm__head-copy{flex:1!important;min-width:0!important;}
#hf-confirm .hf-cm__eyebrow{display:block!important;margin:0 0 6px!important;font:700 9.5px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#7ec487!important;position:relative!important;padding-left:0!important;}
#hf-confirm .hf-cm__heading{margin:0 0 6px!important;font:800 19px/1.18 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:-.022em!important;color:#0d2f57!important;}
#hf-confirm .hf-cm__subline{margin:0 0 10px!important;font:500 12.5px/1.45 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:#5a6478!important;letter-spacing:.005em!important;}
#hf-confirm .hf-cm__trust{display:flex!important;flex-wrap:wrap!important;gap:6px 10px!important;font:600 9.5px/1.2 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#9099ad!important;}
#hf-confirm .hf-cm__trust span{display:inline-flex!important;align-items:center!important;gap:6px!important;}
#hf-confirm .hf-cm__trust span + span::before{content:"·"!important;color:rgba(126,196,135,.5)!important;margin-right:6px!important;font-size:13px!important;}
#hf-confirm .hf-cm__head-right{display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important;}
#hf-confirm .hf-cm__close-text{display:none!important;}
/* Close button — same approach as picker: hide "Close" text via text-indent,
   render × via ::before pseudo-element with content. Robust and proven. */
body #hf-confirm .hf-modal__close,
body #hf-confirm .hf-modal__close--confirm,
body.hf-ui-system #hf-confirm .hf-modal__close,
body.hf-ui-system #hf-confirm .hf-modal__close--confirm{width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;padding:0!important;border-radius:50%!important;overflow:hidden!important;text-indent:-999px!important;white-space:nowrap!important;background:#f6f8fb!important;border:1px solid rgba(13,47,87,.10)!important;color:#0d2f57!important;box-shadow:none!important;position:relative!important;flex-shrink:0!important;cursor:pointer!important;transition:background-color .18s ease,border-color .18s ease,transform .18s ease!important;font-size:0!important;letter-spacing:0!important;}
body #hf-confirm .hf-modal__close::before,
body #hf-confirm .hf-modal__close--confirm::before,
body.hf-ui-system #hf-confirm .hf-modal__close::before,
body.hf-ui-system #hf-confirm .hf-modal__close--confirm::before{content:"×"!important;position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;text-indent:0!important;font:400 22px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:#0d2f57!important;background:none!important;width:auto!important;height:auto!important;transform:none!important;}
body #hf-confirm .hf-modal__close::after,
body #hf-confirm .hf-modal__close--confirm::after,
body.hf-ui-system #hf-confirm .hf-modal__close::after,
body.hf-ui-system #hf-confirm .hf-modal__close--confirm::after{content:none!important;display:none!important;}
body #hf-confirm .hf-modal__close:hover,
body #hf-confirm .hf-modal__close--confirm:hover,
body.hf-ui-system #hf-confirm .hf-modal__close:hover,
body.hf-ui-system #hf-confirm .hf-modal__close--confirm:hover{background:#dce3eb!important;border-color:rgba(126,196,135,.42)!important;transform:scale(1.05)!important;}

/* Product card — image hidden (hero shows it), compact single row */
#hf-confirm .hf-cm__product{padding:4px 24px 8px!important;flex-shrink:0!important;}
#hf-confirm .hf-cm__product-card{display:block!important;padding:10px 12px!important;background:linear-gradient(180deg,#f6f8fb 0%,#ebf0f6 100%)!important;border:1px solid rgba(126,196,135,.20)!important;border-radius:12px!important;box-shadow:0 2px 8px rgba(13,47,87,.04)!important;grid-template-columns:unset!important;}
#hf-confirm .hf-cm__product-img-link{display:none!important;}
#hf-confirm .hf-cm__product-img{display:none!important;}
#hf-confirm .hf-cm__product-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;min-width:0!important;}
#hf-confirm .hf-cm__product-info{min-width:0!important;display:flex!important;flex-direction:column!important;gap:3px!important;}
#hf-confirm .hf-cm__product-name{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font:700 13px/1.3 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:-.01em!important;color:#0d2f57!important;text-decoration:none!important;margin:0!important;}
#hf-confirm .hf-cm__product-name:hover{opacity:.78!important;}
#hf-confirm .hf-cm__product-var{font:600 9.5px/1.2 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#9099ad!important;margin:0!important;}
#hf-confirm .hf-cm__product-stock{display:none!important;}
/* Qty controller — fresh design, no inline-style dependency */
body #hf-confirm .hf-cm__purchase,
body.hf-ui-system #hf-confirm .hf-cm__purchase{display:flex!important;align-items:center!important;justify-content:flex-end!important;}
body #hf-confirm .hf-cm__qty,
body.hf-ui-system #hf-confirm .hf-cm__qty{display:inline-grid!important;grid-template-columns:40px 52px 40px!important;align-items:stretch!important;justify-items:stretch!important;height:40px!important;min-height:40px!important;max-height:40px!important;border:1px solid rgba(13,47,87,.12)!important;border-radius:12px!important;background:#ffffff!important;overflow:hidden!important;box-shadow:0 1px 2px rgba(13,47,87,.04)!important;padding:0!important;margin:0!important;gap:0!important;column-gap:0!important;row-gap:0!important;width:auto!important;transition:border-color .15s ease!important;}
body #hf-confirm .hf-cm__qty:hover,
body.hf-ui-system #hf-confirm .hf-cm__qty:hover{border-color:rgba(126,196,135,.45)!important;}
body #hf-confirm .hf-cm__qty--syncing,
body.hf-ui-system #hf-confirm .hf-cm__qty--syncing{border-color:rgba(126,196,135,.55)!important;}
body #hf-confirm .hf-cm__qty-btn,
body.hf-ui-system #hf-confirm .hf-cm__qty-btn{width:100%!important;min-width:0!important;max-width:none!important;height:40px!important;border:0!important;border-radius:0!important;background:#ffffff!important;color:#0d2f57!important;font:500 18px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;padding:0!important;margin:0!important;box-shadow:none!important;outline:0!important;transition:background-color .12s ease,color .12s ease,transform .08s ease!important;user-select:none!important;-webkit-user-select:none!important;-webkit-tap-highlight-color:transparent!important;}
body #hf-confirm .hf-cm__qty-btn:hover,
body.hf-ui-system #hf-confirm .hf-cm__qty-btn:hover{background:rgba(126,196,135,.10)!important;color:#0a2344!important;}
body #hf-confirm .hf-cm__qty-btn:active,
body.hf-ui-system #hf-confirm .hf-cm__qty-btn:active{background:rgba(126,196,135,.18)!important;transform:scale(.94)!important;}
body #hf-confirm .hf-cm__qty-btn:disabled,
body #hf-confirm .hf-cm__qty-btn[aria-disabled="true"],
body.hf-ui-system #hf-confirm .hf-cm__qty-btn:disabled,
body.hf-ui-system #hf-confirm .hf-cm__qty-btn[aria-disabled="true"]{color:rgba(13,47,87,.32)!important;cursor:not-allowed!important;background:#ffffff!important;}
body #hf-confirm .hf-cm__qty-input,
body.hf-ui-system #hf-confirm .hf-cm__qty-input{width:100%!important;min-width:0!important;max-width:none!important;height:40px!important;border:0!important;border-left:1px solid rgba(13,47,87,.08)!important;border-right:1px solid rgba(13,47,87,.08)!important;border-radius:0!important;background:#ffffff!important;text-align:center!important;font:700 14px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:#0d2f57!important;outline:0!important;box-shadow:none!important;padding:0!important;margin:0!important;-moz-appearance:textfield!important;-webkit-appearance:none!important;appearance:none!important;}
body #hf-confirm .hf-cm__qty-input::-webkit-outer-spin-button,
body #hf-confirm .hf-cm__qty-input::-webkit-inner-spin-button,
body.hf-ui-system #hf-confirm .hf-cm__qty-input::-webkit-outer-spin-button,
body.hf-ui-system #hf-confirm .hf-cm__qty-input::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}
body #hf-confirm .hf-cm__qty--pending,
body.hf-ui-system #hf-confirm .hf-cm__qty--pending{opacity:.6!important;pointer-events:none!important;}

/* Actions — side by side, full-width row */
#hf-confirm .hf-cm__actions{display:flex!important;flex-direction:row!important;align-items:stretch!important;justify-content:stretch!important;gap:8px!important;padding:2px 24px 10px!important;flex-shrink:0!important;flex-wrap:nowrap!important;}
#hf-confirm .hf-cm__btn{flex:1 1 0!important;min-width:0!important;height:42px!important;padding:0 14px!important;border-radius:11px!important;font:700 10.5px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.10em!important;text-transform:uppercase!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;white-space:nowrap!important;}
#hf-confirm .hf-cm__btn--cart{background:#0d2f57!important;color:#fff!important;border:none!important;box-shadow:0 6px 16px rgba(13,47,87,.16)!important;order:1!important;}
#hf-confirm .hf-cm__btn--cart:hover{background:#0a2344!important;transform:translateY(-2px)!important;box-shadow:0 10px 22px rgba(13,47,87,.24),0 0 0 1px rgba(126,196,135,.30)!important;}
#hf-confirm .hf-cm__btn--continue{background:#fff!important;color:#0d2f57!important;border:1px solid rgba(13,47,87,.12)!important;box-shadow:0 2px 6px rgba(13,47,87,.04)!important;order:2!important;}
#hf-confirm .hf-cm__btn--continue:hover{border-color:rgba(126,196,135,.55)!important;background:#f6f8fb!important;transform:translateY(-1px)!important;}
#hf-confirm .hf-cm__actions-note{display:none!important;}

/* Related — 4-up grid, no scroll arrows (only 4 products anyway) */
body #hf-confirm .hf-cm__related,
body.hf-ui-system #hf-confirm .hf-cm__related{padding:12px 24px 20px!important;border-top:none!important;margin-top:0!important;flex:1 1 auto!important;display:flex!important;flex-direction:column!important;min-height:0!important;position:relative!important;}
#hf-confirm .hf-cm__related::before{content:""!important;position:absolute!important;left:24px!important;right:24px!important;top:0!important;height:1px!important;background:linear-gradient(90deg,transparent 0%,rgba(126,196,135,.18) 30%,rgba(126,196,135,.18) 70%,transparent 100%)!important;pointer-events:none!important;}
body #hf-confirm .hf-cm__related-head,
body.hf-ui-system #hf-confirm .hf-cm__related-head{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;margin-bottom:10px!important;flex-shrink:0!important;}
body #hf-confirm .hf-cm__related-title,
body.hf-ui-system #hf-confirm .hf-cm__related-title{margin:0!important;font:600 10px/1 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;letter-spacing:.22em!important;color:#7ec487!important;text-transform:uppercase!important;}
/* No nav — only 4 products visible at once */
body #hf-confirm .hf-cm__related-nav,
body.hf-ui-system #hf-confirm .hf-cm__related-nav{display:none!important;}

/* Related track — 4-column grid, no overflow */
body #hf-confirm .hf-cm__related-track-wrap,
body.hf-ui-system #hf-confirm .hf-cm__related-track-wrap{overflow:visible!important;}
body #hf-confirm .hf-cm__related-track,
body.hf-ui-system #hf-confirm .hf-cm__related-track{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important;padding:0!important;scroll-behavior:auto!important;}
#hf-confirm .hf-cm__related-track::-webkit-scrollbar{display:none!important;}

/* Related cards — fill grid cell, auto height (image + title only) */
body #hf-confirm .hf-cm__rel-card,
body.hf-ui-system #hf-confirm .hf-cm__rel-card{flex:none!important;width:100%!important;height:auto!important;min-height:0!important;border-radius:10px!important;background:#fff!important;border:1px solid rgba(13,47,87,.08)!important;box-shadow:none!important;text-decoration:none!important;overflow:hidden!important;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease!important;display:flex!important;flex-direction:column!important;}
body #hf-confirm .hf-cm__rel-card:hover,
body.hf-ui-system #hf-confirm .hf-cm__rel-card:hover{border-color:rgba(126,196,135,.50)!important;transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(13,47,87,.08)!important;}
/* Larger image — slightly taller than wide for image-forward feel */
body #hf-confirm .hf-cm__rel-img,
body.hf-ui-system #hf-confirm .hf-cm__rel-img{aspect-ratio:1/1.15!important;background:#f2f4f7!important;overflow:hidden!important;position:relative!important;flex:0 0 auto!important;}
body #hf-confirm .hf-cm__rel-img img,
body.hf-ui-system #hf-confirm .hf-cm__rel-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;transition:transform .35s cubic-bezier(.22,.61,.36,1)!important;}
body #hf-confirm .hf-cm__rel-card:hover .hf-cm__rel-img img,
body.hf-ui-system #hf-confirm .hf-cm__rel-card:hover .hf-cm__rel-img img{transform:scale(1.04)!important;}
/* Body: minimal padding, no min-height, no gap — title only, nothing else */
body #hf-confirm .hf-cm__rel-body,
body.hf-ui-system #hf-confirm .hf-cm__rel-body{padding:8px 9px 10px!important;display:block!important;gap:0!important;flex:0 0 auto!important;min-height:0!important;height:auto!important;background:#fff!important;}
body #hf-confirm .hf-cm__rel-name,
body.hf-ui-system #hf-confirm .hf-cm__rel-name{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font:600 11px/1.3 var(--hfui-font,"Poppins",system-ui,sans-serif)!important;color:#0d2f57!important;letter-spacing:-.005em!important;min-height:0!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;}
body #hf-confirm .hf-cm__rel-meta,
body.hf-ui-system #hf-confirm .hf-cm__rel-meta,
body #hf-confirm .hf-cm__rel-trust,
body.hf-ui-system #hf-confirm .hf-cm__rel-trust,
body #hf-confirm .hf-cm__rel-details,
body.hf-ui-system #hf-confirm .hf-cm__rel-details,
body #hf-confirm .hf-cm__rel-badge,
body.hf-ui-system #hf-confirm .hf-cm__rel-badge,
body #hf-confirm .hf-cm__rel-price,
body.hf-ui-system #hf-confirm .hf-cm__rel-price{display:none!important;}

/* Subtle entry animation for content column children */
@keyframes hfConfirmSlideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#hf-confirm.hf-modal--open .hf-cm__content > *,
#hf-confirm.is-open .hf-cm__content > *{animation:hfConfirmSlideIn .42s cubic-bezier(.22,.61,.36,1) both!important;}
#hf-confirm.hf-modal--open .hf-cm__head,
#hf-confirm.is-open .hf-cm__head{animation-delay:.05s!important;}
#hf-confirm.hf-modal--open .hf-cm__product,
#hf-confirm.is-open .hf-cm__product{animation-delay:.10s!important;}
#hf-confirm.hf-modal--open .hf-cm__actions,
#hf-confirm.is-open .hf-cm__actions{animation-delay:.14s!important;}
#hf-confirm.hf-modal--open .hf-cm__related,
#hf-confirm.is-open .hf-cm__related{animation-delay:.18s!important;}

/* Reduce-motion: respect user preference */
@media (prefers-reduced-motion: reduce){
  #hf-confirm .hf-cm__hero-img{transform:none!important;transition:none!important;}
  #hf-confirm.hf-modal--open .hf-cm__content > *,
  #hf-confirm.is-open .hf-cm__content > *{animation:none!important;}
  #hf-confirm .hf-cm__btn,
  #hf-confirm .hf-cm__related-arrow,
  #hf-confirm .hf-cm__rel-card,
  #hf-confirm .hf-modal__close--confirm{transition:none!important;}
}

/* Responsive — single column on narrow screens */
@media (max-width:860px){
  body #hf-confirm .hf-cm,
  body #hf-confirm .hf-ui-modal__panel,
  body.hf-ui-system #hf-confirm .hf-cm,
  body.hf-ui-system #hf-confirm .hf-ui-modal__panel,
  body.hf-ui-system .hf-modal--confirm .hf-cm{grid-template-columns:1fr!important;grid-template-rows:180px auto!important;min-height:0!important;max-height:calc(100vh - 32px)!important;width:min(520px,calc(100vw - 32px))!important;max-width:min(520px,calc(100vw - 32px))!important;}
  #hf-confirm .hf-cm__hero,
  #hf-confirm .hf-cm__hero-img{min-height:180px!important;max-height:220px!important;}
  #hf-confirm .hf-cm__head{padding:14px 18px 8px!important;}
  #hf-confirm .hf-cm__product{padding:4px 18px 8px!important;}
  #hf-confirm .hf-cm__actions{padding:2px 18px 10px!important;flex-direction:column!important;}
  #hf-confirm .hf-cm__btn{width:100%!important;flex:none!important;}
  #hf-confirm .hf-cm__related{padding:10px 18px 14px!important;}
}