/*!
 * HDM cart + checkout design system.
 *
 * The first section is the approved prototype stylesheet, mechanically scoped
 * under .hdm-cc so it cannot leak into the theme (see build-css.py in the task
 * handoff). The integration layer at the end adapts it to the markup that
 * WooCommerce and WAPF actually emit. Edit the integration layer by hand; treat
 * the ported section as generated.
 */

.hdm-cc{--hdm-green:#22A44B;
  --hdm-green-dk:#17833B;
  --hdm-green-tint:#EAF7EE;
  --hdm-magenta:#E0347E;
  --ink:#17242C;
  --ink-2:#3E525E;
  --slate:#6B7F8A;
  --line:#E2E9E7;
  --line-2:#F0F4F3;
  --white:#fff;
  --amber:#B5761B;
  --amber-bg:#FDF6E7;
  --red:#C7452F;
  --red-bg:#FDEEEB;

  --canvas:#F3F7F4;
  --card:#ffffff;
  --r-lg:14px;
  --r-md:10px;
  --r-sm:8px;
  --shadow:0 1px 2px rgba(23,36,44,.05), 0 8px 24px -12px rgba(23,36,44,.18);
  --shadow-lift:0 2px 4px rgba(23,36,44,.06), 0 18px 40px -20px rgba(23,36,44,.28);
  --font-display:"Quicksand", "Trebuchet MS", sans-serif;
  --font-body:"Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --base:16px;
  --gap:24px;
  --pad:28px;
  
  --edge:32px;
  --shell:1320px;}
.hdm-cc *{box-sizing:border-box}
.hdm-cc img{max-width:100%;display:block}
.hdm-cc button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.hdm-cc a{color:inherit;text-decoration:none}
.hdm-cc input, .hdm-cc select{font:inherit}
.hdm-cc :focus-visible{outline:3px solid #1D6FE0;outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
.hdm-cc *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.hdm-cc .wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--edge)}
.hdm-cc .page{padding-bottom:70px}
.hdm-cc .steps{padding-block:22px 4px}
.hdm-cc .steps ol{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.hdm-cc .steps li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--slate);font-weight:500}
.hdm-cc .steps .dot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;background:#fff;color:var(--slate);}
.hdm-cc .steps li[aria-current]{color:var(--ink);font-weight:700}
.hdm-cc .steps li[aria-current] .dot{background:var(--hdm-green);border-color:var(--hdm-green);color:#fff}
.hdm-cc .steps li.done .dot{background:var(--hdm-green-tint);border-color:var(--hdm-green-tint);color:var(--hdm-green-dk)}
.hdm-cc .steps .bar{width:44px;height:1.5px;background:var(--line)}
.hdm-cc .page-head{display:flex;align-items:flex-end;gap:20px;padding-block:20px 26px;flex-wrap:wrap}
.hdm-cc .page-head h1{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 7px;line-height:1.1;}
.hdm-cc .page-head p{margin:0;color:var(--ink-2);font-size:15px;max-width:52ch;line-height:1.5}
.hdm-cc .count{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  background:var(--hdm-green-tint);color:var(--hdm-green-dk);padding:5px 12px;border-radius:999px;
  margin-bottom:12px;letter-spacing:.01em;}
.hdm-cc .keep-shopping{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;color:var(--ink-2);padding:11px 18px;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;}
.hdm-cc .keep-shopping:hover{border-color:var(--hdm-green);color:var(--hdm-green-dk)}
.hdm-cc .grid{display:grid;grid-template-columns:minmax(0,1fr) 386px;gap:var(--gap);
  align-items:stretch}
.hdm-cc .rail{position:sticky;top:84px;align-self:start;display:flex;
  flex-direction:column;gap:16px}
.hdm-cc .col-main{display:flex;flex-direction:column;min-width:0}
.hdm-cc .col-main .promo-slot{margin-top:auto;padding-top:16px}
.hdm-cc .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.hdm-cc .card-pad{padding:var(--pad)}
.hdm-cc .sec-h{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;}
.hdm-cc .sec-sub{margin:0;color:var(--slate);font-size:14px;line-height:1.5}
.hdm-cc .sec{margin-top:44px}
.hdm-cc .items{display:flex;flex-direction:column;gap:16px}
.hdm-cc .item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:22px;display:grid;
  grid-template-columns:172px minmax(0,1fr);gap:22px;position:relative;
  animation:fadeUp .32s ease both;}
.hdm-cc .item.accessory{grid-template-columns:104px minmax(0,1fr);padding:16px 18px}
.hdm-cc .item.removing{animation:collapse .35s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes collapse{to{opacity:0;transform:translateX(24px) scale(.97)}}
.hdm-cc .item-media{background:linear-gradient(160deg,#F6FAF7,#EDF4EF);border-radius:var(--r-md);
  padding:10px;display:grid;place-items:center;align-self:start;position:relative;overflow:hidden;}
.hdm-cc .item-media img{mix-blend-mode:multiply}
.hdm-cc .save-flag{position:absolute;top:8px;left:8px;background:var(--hdm-magenta);color:#fff;
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.02em;}
.hdm-cc .item-brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hdm-green-dk);
  font-weight:700;margin-bottom:6px;}
.hdm-cc .item-name{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.25;
  letter-spacing:-.01em;margin:0 0 6px;max-width:34ch;}
.hdm-cc .item-meta{font-size:12.5px;color:var(--slate);margin:0 0 14px;display:flex;gap:14px;flex-wrap:wrap}
.hdm-cc .item-meta b{color:var(--ink-2);font-weight:600}
.hdm-cc .item-desc{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0 0 14px;max-width:56ch}
.hdm-cc .price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.hdm-cc .price-now{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em}
.hdm-cc .price-was{font-size:14.5px;color:var(--slate);text-decoration:line-through}
.hdm-cc .price-save{font-size:12.5px;font-weight:700;color:var(--hdm-magenta)}
.hdm-cc .item-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line-2)}
.hdm-cc .link-act{font-size:13.5px;font-weight:600;color:var(--slate);display:inline-flex;align-items:center;gap:6px}
.hdm-cc .link-act:hover{color:var(--ink)}
.hdm-cc .link-act.danger:hover{color:var(--red)}
.hdm-cc .line-total{margin-left:auto;text-align:right}
.hdm-cc .line-total small{display:block;font-size:11px;color:var(--slate);letter-spacing:.06em;text-transform:uppercase}
.hdm-cc .line-total b{font-family:var(--font-display);font-size:19px;font-weight:700}
.hdm-cc .qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.hdm-cc .qty button{width:40px;height:40px;display:grid;place-items:center;font-size:17px;font-weight:600;color:var(--ink-2)}
.hdm-cc .qty button:hover{background:var(--hdm-green-tint);color:var(--hdm-green-dk)}
.hdm-cc .qty button[disabled]{opacity:.35;cursor:not-allowed}
.hdm-cc .qty span{min-width:40px;text-align:center;font-weight:700;font-size:15px}
.hdm-cc .qty span.bump{animation:bump .3s ease}
@keyframes bump{50%{transform:scale(1.25);color:var(--hdm-green-dk)}}
.hdm-cc .build{border:1px solid #CFE7D8;border-radius:12px;overflow:hidden;
  margin-bottom:16px;background:#fff;
  box-shadow:0 1px 2px rgba(23,36,44,.04),0 10px 26px -20px rgba(23,60,44,.45);}
.hdm-cc .build-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;background:linear-gradient(90deg,#EAF7EE 0%,#F4FBF6 100%);
  border-bottom:1px solid #DCEEE2;}
.hdm-cc .build-ic{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;
  place-items:center;background:#fff;color:var(--hdm-green-dk);
  box-shadow:inset 0 0 0 1.5px #CFE7D8;}
.hdm-cc .build-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.hdm-cc .build-t b{font-family:var(--font-display);font-size:15px;font-weight:700}
.hdm-cc .build-t span{font-size:12px;color:var(--ink-2);font-weight:500}
.hdm-cc .build-h .btn-edit{margin-left:auto}
.hdm-cc .build-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:8px;margin:0;padding:12px 14px 14px;}
.hdm-cc .build-list div{background:#F8FBF9;border:1px solid #E9F2EC;border-radius:10px;
  padding:9px 11px 10px;display:flex;flex-direction:column;gap:3px;min-width:0;
  position:relative;}
.hdm-cc .build-list dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);min-width:0;overflow-wrap:break-word;padding-right:58px;}
.hdm-cc .build-list dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);
  min-width:0;overflow-wrap:break-word;line-height:1.32;}
.hdm-cc .build-list dd .up, .hdm-cc .build-list dd .inc{position:absolute;top:8px;right:10px;font-style:normal;white-space:nowrap;}
.hdm-cc .build-list dd .up{font-size:10.5px;font-weight:700;letter-spacing:.01em;
  color:#fff;background:var(--hdm-green);border-radius:999px;padding:2px 8px;}
.hdm-cc .build-list dd .inc{font-size:10px;font-weight:700;color:var(--slate);letter-spacing:.05em;text-transform:uppercase}
.hdm-cc .build-list .is-up{background:var(--hdm-green-tint);border-color:#CFE7D8}
.hdm-cc .config-h{display:flex;align-items:center;justify-content:space-between;
  gap:10px 14px;margin-bottom:12px;flex-wrap:wrap;}
.hdm-cc .config-h span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);font-weight:700;white-space:nowrap;line-height:1}
.hdm-cc .config-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;margin:0}
.hdm-cc .config-list div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}
.hdm-cc .config-list dt{color:var(--slate)}
.hdm-cc .config-list dd{margin:0;font-weight:600;text-align:right}
.hdm-cc .btn-edit{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:#fff;background:var(--hdm-green);padding:10px 16px;
  border-radius:var(--r-md);white-space:nowrap;flex-shrink:0;line-height:1.1;
  box-shadow:0 6px 14px -8px rgba(23,120,60,.8);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;}
.hdm-cc .btn-edit:hover{background:var(--hdm-green-dk);transform:translateY(-1px);
  box-shadow:0 9px 18px -8px rgba(23,120,60,.9)}
.hdm-cc .btn-edit svg{width:15px;height:15px}
.hdm-cc .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;border-radius:var(--r-md);transition:.16s;text-align:center;}
.hdm-cc .btn-primary{background:var(--hdm-green);color:#fff;padding:17px 24px;font-size:17px;width:100%;
  box-shadow:0 6px 18px -6px rgba(34,164,75,.7);letter-spacing:.01em;
  border-radius:var(--r-md);
  
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;}
.hdm-cc .btn-primary svg{flex-shrink:0}
.hdm-cc .btn-lg{padding:19px 28px;font-size:18px;gap:12px}
.hdm-cc .btn-lg svg{width:19px;height:19px}
.hdm-cc .btn-primary:hover{background:var(--hdm-green-dk);transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(34,164,75,.75)}
.hdm-cc .btn-primary:active{transform:translateY(0)}
.hdm-cc .btn-primary[data-busy]{pointer-events:none;opacity:.85}
.hdm-cc .btn-ghost{border:1.5px solid var(--line);background:#fff;padding:13px 20px;font-size:14.5px;color:var(--ink-2);
  border-radius:var(--r-md);}
.hdm-cc .btn-ghost:hover{border-color:var(--hdm-green);color:var(--hdm-green-dk)}
.hdm-cc .btn-sm{padding:10px 16px;font-size:13.5px}
.hdm-cc .spinner{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.hdm-cc .promo{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.hdm-cc .promo-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:15px 18px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);}
.hdm-cc .promo-toggle .chev{margin-left:auto;transition:.2s}
.hdm-cc .promo[data-open="true"] .chev{transform:rotate(180deg)}
.hdm-cc .promo-body{padding:0 18px 18px;display:none;animation:fadeUp .25s ease both}
.hdm-cc .promo[data-open="true"] .promo-body{display:block}
.hdm-cc .promo-field{display:flex;gap:9px}
.hdm-cc .promo-field input{flex:1;min-width:0;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);
  font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;}
.hdm-cc .promo-field input:focus{border-color:var(--hdm-green);outline:none}
.hdm-cc .promo-field button{background:var(--ink);color:#fff;padding:0 22px;border-radius:var(--r-md);font-weight:700;font-size:14.5px}
.hdm-cc .promo-field button:hover{background:var(--hdm-green-dk)}
.hdm-cc .promo-msg{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin-top:11px;padding:11px 13px;border-radius:var(--r-sm);line-height:1.45}
.hdm-cc .promo-msg.ok{background:var(--hdm-green-tint);color:var(--hdm-green-dk);font-weight:600}
.hdm-cc .promo-msg.err{background:var(--red-bg);color:var(--red);font-weight:600}
.hdm-cc .promo-msg svg{flex-shrink:0;margin-top:1px}
.hdm-cc .promo-hint{font-size:12.5px;color:var(--slate);margin:10px 0 0}
.hdm-cc .chip-applied{display:flex;align-items:center;gap:9px;background:var(--hdm-green-tint);color:var(--hdm-green-dk);
  border-radius:var(--r-md);padding:13px 16px;font-weight:700;font-size:14px;
  animation:pop .35s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.hdm-cc .chip-applied .x{margin-left:auto;color:var(--hdm-green-dk);opacity:.65;font-size:18px;line-height:1}
.hdm-cc .chip-applied .x:hover{opacity:1}
.hdm-cc .sum-h{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em}
.hdm-cc .sum-row{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:9px 0;color:var(--ink-2)}
.hdm-cc .sum-row b{font-weight:600;color:var(--ink)}
.hdm-cc .sum-row.disc{color:var(--hdm-green-dk)}
.hdm-cc .sum-row.disc b{color:var(--hdm-green-dk);font-weight:700}
.hdm-cc .sum-row .free{color:var(--hdm-green-dk);font-weight:700;letter-spacing:.04em}
.hdm-cc .sum-note{font-size:12px;color:var(--slate)}
.hdm-cc .sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin:16px 0 6px;padding-top:18px;border-top:2px solid var(--ink);}
.hdm-cc .sum-total span{font-family:var(--font-display);font-size:19px;font-weight:700}
.hdm-cc .sum-total b{font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-.025em}
.hdm-cc .saved-line{font-size:13px;font-weight:700;color:var(--hdm-magenta);margin:0 0 18px;}
.hdm-cc .secure{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;color:var(--slate);margin-top:13px;font-weight:600;}
.hdm-cc .pay-marks{display:flex;gap:6px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.hdm-cc .pay-marks > span{display:inline-flex;align-items:center;justify-content:center;
  height:26px;min-width:42px;padding:0 8px;background:#fff;
  border:1px solid var(--line);border-radius:5px;}
.hdm-cc .pm{display:inline-flex;align-items:center;gap:3px;line-height:1}
.hdm-cc .pm-visa{font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-weight:700;font-size:13px;letter-spacing:.01em;color:#1A1F71}
.hdm-cc .pm-amex{background:#006FCF;color:#fff;font-size:8.5px;font-weight:800;
  letter-spacing:.06em;padding:3px 5px;border-radius:3px}
.hdm-cc .pm-disc{font-size:8px;font-weight:800;letter-spacing:.02em;color:#231F20}
.hdm-cc .pm-disc i{width:7px;height:7px;border-radius:50%;background:#FF6000;
  margin-right:3px;display:inline-block}
.hdm-cc .pm-pp{font-family:Verdana,Geneva,sans-serif;font-style:italic;font-weight:700;
  font-size:11px;letter-spacing:-.02em}
.hdm-cc .pm-pp b{color:#003087;font-weight:700}
.hdm-cc .pm-pp em{color:#009CDE;font-style:italic;font-weight:700}
.hdm-cc .pm-klarna{background:#FFB3C7;color:#0B051D;font-size:9.5px;font-weight:800;
  letter-spacing:-.01em;padding:3px 7px;border-radius:3px}
.hdm-cc .pm-gpay b{font-size:10.5px;font-weight:600;color:#5F6368;letter-spacing:-.01em}
.hdm-cc .finance{border-top:1px dashed var(--line);margin-top:18px;padding-top:16px;
  margin-bottom:20px;display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;flex-wrap:wrap;}
.hdm-cc .finance h4{font-family:var(--font-display);font-size:15px;margin:0;font-weight:700}
.hdm-cc .finance p{margin:0 0 10px;font-size:13px;color:var(--ink-2);line-height:1.55}
.hdm-cc .finance a{font-size:13px;font-weight:700;color:var(--hdm-green-dk);border-bottom:1.5px solid currentColor}
.hdm-cc .trust-band{background:linear-gradient(180deg,#FFFFFF 0%,var(--hdm-green-tint) 100%);
  border-top:1px solid #DCEEE2;padding:38px 0 42px;margin-top:44px;}
.hdm-cc .trust-band .trust-head{text-align:center;margin-bottom:26px}
.hdm-cc .trust-band .trust-head h2{font-family:var(--font-display);font-size:22px;font-weight:700;margin:0 0 6px;
  letter-spacing:-.015em;}
.hdm-cc .trust-band .trust-head p{margin:0;font-size:14px;color:var(--slate)}
.hdm-cc .trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hdm-cc .trust > div{background:#fff;border:1px solid #DCEEE2;border-radius:16px;
  padding:26px 22px 24px;display:flex;flex-direction:column;
  align-items:flex-start;gap:14px;
  box-shadow:0 1px 2px rgba(23,36,44,.04),0 14px 30px -22px rgba(23,60,44,.5);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.hdm-cc .trust > div:hover{transform:translateY(-4px);border-color:#9FD9B6;
  box-shadow:0 2px 4px rgba(23,36,44,.05),0 24px 44px -24px rgba(23,60,44,.6);}
.hdm-cc .trust > div > div{min-width:0}
.hdm-cc .trust .ic{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:grid;
  place-items:center;color:var(--hdm-green-dk);
  background:radial-gradient(circle at 30% 25%,#FFFFFF 0%,var(--hdm-green-tint) 70%);
  box-shadow:inset 0 0 0 2px #BFE6CD,0 6px 14px -8px rgba(23,120,60,.55);
  transition:box-shadow .18s ease,color .18s ease;}
.hdm-cc .trust > div:hover .ic{color:#fff;background:var(--hdm-green);
  box-shadow:inset 0 0 0 2px var(--hdm-green),0 8px 18px -8px rgba(23,120,60,.7);}
.hdm-cc .trust .ic svg{width:24px;height:24px}
.hdm-cc .trust h4{margin:0 0 6px;font-family:var(--font-display);font-size:16.5px;
  font-weight:700;line-height:1.25;letter-spacing:-.012em}
.hdm-cc .trust p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.hdm-cc .support{background:var(--ink);color:#DCE9E4;border-radius:var(--r-lg);padding:30px 34px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.hdm-cc .support img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.hdm-cc .support h3{font-family:var(--font-display);font-size:22px;margin:0 0 6px;color:#fff;font-weight:700;letter-spacing:-.01em}
.hdm-cc .support p{margin:0;font-size:14.5px;color:#A9C0BA;line-height:1.55;max-width:46ch}
.hdm-cc .support-act{margin-left:auto;display:flex;gap:11px;flex-wrap:wrap}
.hdm-cc .support-act a{display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border-radius:var(--r-md);
  font-weight:700;font-size:15px;}
.hdm-cc .support-act .call{background:var(--hdm-green);color:#fff}
.hdm-cc .support-act .call:hover{background:var(--hdm-green-dk)}
.hdm-cc .support-act .chat{border:1.5px solid rgba(255,255,255,.28);color:#fff}
.hdm-cc .support-act .chat:hover{background:rgba(255,255,255,.1)}
.hdm-cc .xsell{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.hdm-cc .xcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column}
.hdm-cc .xcard .ph{background:#F7FAF8;border-radius:var(--r-sm);padding:8px;margin-bottom:12px;aspect-ratio:4/3;display:grid;place-items:center}
.hdm-cc .xcard .ph img{max-height:100%;width:auto;mix-blend-mode:multiply}
.hdm-cc .xcard h4{margin:0 0 6px;font-size:14px;font-weight:600;line-height:1.35;min-height:2.7em}
.hdm-cc .xcard .stars{font-size:11.5px;color:var(--amber);margin-bottom:7px;letter-spacing:.06em}
.hdm-cc .xcard .stars i{font-style:normal;color:var(--slate);margin-left:5px}
.hdm-cc .xcard .pr{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;margin-top:auto}
.hdm-cc .xcard .pr b{font-family:var(--font-display);font-size:17px;font-weight:700}
.hdm-cc .xcard .pr s{font-size:12.5px;color:var(--slate)}
.hdm-cc .xcard button{border:1.5px solid var(--hdm-green);color:var(--hdm-green-dk);border-radius:var(--r-md);
  padding:10px;font-size:13.5px;font-weight:700;width:100%;}
.hdm-cc .xcard button:hover{background:var(--hdm-green);color:#fff}
.hdm-cc .xcard button.added{background:var(--hdm-green);color:#fff;border-color:var(--hdm-green)}
.hdm-cc .empty{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:56px 48px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:center;}
.hdm-cc .empty h2{font-family:var(--font-display);font-size:32px;font-weight:700;margin:0 0 12px;letter-spacing:-.02em;line-height:1.15}
.hdm-cc .empty p{margin:0 0 24px;font-size:16px;color:var(--ink-2);line-height:1.6;max-width:44ch}
.hdm-cc .empty .btn-primary{width:auto;padding:16px 30px}
.hdm-cc .empty-cats{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hdm-cc .empty-cats a{border:1.5px solid var(--line);border-radius:999px;padding:9px 17px;font-size:14px;font-weight:600;
  color:var(--ink-2);background:#fff;}
.hdm-cc .empty-cats a:hover{border-color:var(--hdm-green);color:var(--hdm-green-dk);background:var(--hdm-green-tint)}
.hdm-cc .empty-help{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.hdm-cc .empty-help b{font-family:var(--font-display);font-size:16px}
.hdm-cc .empty-help span{font-size:14px;color:var(--slate)}
.hdm-cc .empty-art{background:linear-gradient(160deg,#F1F8F3,#E6F1EA);border-radius:var(--r-md);padding:22px;display:grid;place-items:center}
.hdm-cc .empty-art img{mix-blend-mode:multiply}
.hdm-cc .sk{background:linear-gradient(90deg,#EDF2EF 25%,#F6FAF8 37%,#EDF2EF 63%);background-size:400% 100%;animation:sh 1.3s ease infinite;border-radius:6px}
@keyframes sh{from{background-position:100% 0}to{background-position:0 0}}
.hdm-cc .sk-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:grid;grid-template-columns:172px 1fr;gap:22px}
.hdm-cc .scrim{position:fixed;inset:0;background:rgba(14,26,32,.55);opacity:0;
  pointer-events:none;transition:opacity .28s ease;z-index:190;}
.hdm-cc .drawer{position:fixed;top:0;bottom:0;right:0;width:445px;max-width:100%;background:#fff;
  z-index:195;transform:translateX(102%);visibility:hidden;pointer-events:none;
  transition:transform .34s cubic-bezier(.32,.72,0,1),visibility 0s linear .34s;
  display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);}
.hdm-cc .drawer-h{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:14px}
.hdm-cc .drawer-h h3{font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 3px}
.hdm-cc .drawer-h p{margin:0;font-size:13px;color:var(--slate)}
.hdm-cc .drawer-h .close{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--line-2);display:grid;place-items:center;font-size:17px;color:var(--ink-2)}
.hdm-cc .drawer-h .close:hover{background:var(--line)}
.hdm-cc .drawer-b{flex:1;overflow-y:auto;padding:22px 26px 30px}
.hdm-cc .opt-grp{margin-bottom:24px}
.hdm-cc .opt-grp h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
  font-weight:700;margin:0 0 10px;}
.hdm-cc .opt-list{display:flex;flex-direction:column;gap:8px}
.hdm-cc .opt{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--r-md);cursor:pointer;transition:.15s;background:#fff;width:100%;text-align:left;}
.hdm-cc .opt:hover{border-color:#BFD8C7;background:#FBFDFC}
.hdm-cc .opt[aria-checked="true"]{border-color:var(--hdm-green);background:var(--hdm-green-tint)}
.hdm-cc .opt .radio{width:19px;height:19px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;
  display:grid;place-items:center;background:#fff;}
.hdm-cc .opt[aria-checked="true"] .radio{border-color:var(--hdm-green)}
.hdm-cc .opt[aria-checked="true"] .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--hdm-green)}
.hdm-cc .opt .sw{width:19px;height:19px;border-radius:5px;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;background:#fff;font-size:11px;color:#fff}
.hdm-cc .opt[aria-checked="true"] .sw{background:var(--hdm-green);border-color:var(--hdm-green)}
.hdm-cc .opt .nm{font-size:14.5px;font-weight:600}
.hdm-cc .opt .dl{margin-left:auto;font-size:13px;font-weight:700;color:var(--hdm-green-dk);white-space:nowrap}
.hdm-cc .opt .dl.inc{color:var(--slate);font-weight:600}
.hdm-cc .swatches{display:flex;gap:10px}
.hdm-cc .swatch{width:46px;height:46px;border-radius:var(--r-md);border:2.5px solid var(--line);position:relative;cursor:pointer}
.hdm-cc .swatch[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 3px #fff inset}
.hdm-cc .swatch small{position:absolute;top:52px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--slate);font-weight:600}
.hdm-cc .swatch-row{margin-bottom:34px}
.hdm-cc .drawer-f{padding:18px 26px;border-top:1px solid var(--line);background:#FAFCFB}
.hdm-cc .drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.hdm-cc .drawer-total span{font-size:13.5px;color:var(--slate);font-weight:600}
.hdm-cc .drawer-total b{font-family:var(--font-display);font-size:24px;font-weight:700}
.hdm-cc .drawer-total b em{font-style:normal;font-size:13px;color:var(--hdm-green-dk);margin-left:8px;font-weight:700}
.hdm-cc .drawer-btns{display:grid;grid-template-columns:1fr 1.6fr;gap:11px}
.hdm-cc .drawer-btns .btn-primary{padding:15px;font-size:15.5px}
.hdm-cc .toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,26px);z-index:220;
  background:var(--ink);color:#fff;border-radius:var(--r-md);padding:14px 20px;
  display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.3s cubic-bezier(.2,1,.3,1);}
.hdm-cc .toast.show{opacity:1;transform:translate(-50%,0)}
.hdm-cc .toast .tick{width:22px;height:22px;border-radius:50%;background:var(--hdm-green);display:grid;place-items:center;flex-shrink:0}
.hdm-cc .btn-go{display:grid;justify-items:center;gap:2px;padding:14px 18px 13px;
  line-height:1.25;position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#27B152 0%,var(--hdm-green) 55%,#1C9143 100%);}
.hdm-cc .btn-go:hover{background:linear-gradient(180deg,#22A44B 0%,#1B9042 55%,#17833B 100%)}
.hdm-cc .btn-go::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 58%);}
.hdm-cc .btn-go .go-top{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:16.5px;font-weight:700;letter-spacing:.005em;}
.hdm-cc .btn-go .go-ic{display:grid;place-items:center;transition:transform .22s ease}
.hdm-cc .btn-go .go-ic svg{display:block}
.hdm-cc .btn-go:hover .go-ic{transform:translateX(3px)}
.hdm-cc .btn-go .go-amt{font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.86);white-space:nowrap;}
.hdm-cc .btn-go .go-amt b{font-weight:700;color:#fff;font-family:var(--font-display);font-size:14px}
.hdm-cc .head-go{display:none}
.hdm-cc .mbar{position:sticky;bottom:0;z-index:60;background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);padding:12px var(--edge);
  display:none;gap:14px;align-items:center;box-shadow:0 -8px 24px -12px rgba(23,36,44,.3);}
.hdm-cc .mbar .tot small{display:block;font-size:11px;color:var(--slate);font-weight:600}
.hdm-cc .mbar .tot b{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.02em}
.hdm-cc .mbar .btn-primary{width:auto;flex:1;padding:15px 18px;font-size:15.5px}
@media (max-width:640px){
.hdm-cc .drawer{width:100%;top:auto;height:92%;border-radius:22px 22px 0 0;transform:translateY(102%)}
}
.hdm-cc [data-dir="a"] .rail .card:first-child{border-top:4px solid var(--hdm-green)}
.hdm-cc [data-dir="b"]{--canvas:#EDF1F3;
  --hdm-green-tint:#E8F4EC;
  --line:#DCE3E7;
  --line-2:#EDF1F3;
  --r-lg:10px;--r-md:8px;--r-sm:6px;
  --shadow:0 1px 2px rgba(18,48,63,.06);
  --pad:26px;}
.hdm-cc [data-dir="b"] .page-head h1, .hdm-cc [data-dir="b"] .item-name, .hdm-cc [data-dir="b"] .sec-h, .hdm-cc [data-dir="b"] .sum-h{font-family:var(--font-body);letter-spacing:-.025em}
.hdm-cc [data-dir="b"] .page-head h1{font-size:31px;font-weight:700}
.hdm-cc [data-dir="b"] .item{grid-template-columns:150px minmax(0,1fr);border-top:3px solid #12303F}
.hdm-cc [data-dir="b"] .item.accessory{border-top:3px solid #C3D0D7}
.hdm-cc [data-dir="b"] .item-media{background:#F4F7F9;border:1px solid var(--line-2)}
.hdm-cc [data-dir="b"] .item-brand{font-family:var(--font-mono);color:#12303F;font-size:10.5px;letter-spacing:.14em;}
.hdm-cc [data-dir="b"] .count{background:#12303F;color:#fff;border-radius:5px;font-family:var(--font-mono);font-size:11.5px}
.hdm-cc .sheet{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:16px}
.hdm-cc .sheet-h{background:#12303F;color:#C9DBE4;padding:9px 14px;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;}
.hdm-cc .sheet-h b{color:#fff;font-weight:600;letter-spacing:.04em}
.hdm-cc .sheet-h .n{margin-left:auto;color:#7FA3B4}
.hdm-cc .sheet-row{display:grid;grid-template-columns:180px minmax(0,1fr) 96px;gap:14px;align-items:center;
  padding:11px 14px;border-top:1px solid var(--line-2);font-size:14px;background:#fff;}
.hdm-cc .sheet-row:first-of-type{border-top:0}
.hdm-cc .sheet-row dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);}
.hdm-cc .sheet-row dd{margin:0;font-weight:600}
.hdm-cc .sheet-row .val-price{text-align:right;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--hdm-green-dk);}
.hdm-cc .sheet-row .val-price.inc{color:#9AAAB3}
.hdm-cc .sheet-row.changed{background:#FFFBEF;animation:flash 1.4s ease}
@keyframes flash{0%{background:#FDF1CE}100%{background:#FFFBEF}}
.hdm-cc .sheet-f{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#F7FAFB;
  border-top:1px solid var(--line);flex-wrap:wrap;}
.hdm-cc .sheet-f .conf-total{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;color:var(--slate)}
.hdm-cc .sheet-f .conf-total b{font-family:var(--font-body);font-size:16px;color:var(--ink);margin-left:8px}
.hdm-cc [data-dir="b"] .btn-edit{background:#12303F;color:#fff;border-radius:var(--r-md);padding:9px 15px;font-size:13px;}
.hdm-cc [data-dir="b"] .btn-edit:hover{background:#1D4759}
.hdm-cc [data-dir="b"] .sum-total{border-top-color:#12303F}
.hdm-cc [data-dir="b"] .rail .card:first-child{border-top:3px solid #12303F}
.hdm-cc .compat{display:flex;gap:11px;align-items:flex-start;background:#F4F8FA;border:1px solid #DCE7ED;
  border-radius:var(--r-sm);padding:13px 15px;font-size:13px;color:var(--ink-2);line-height:1.5;}
.hdm-cc .compat b{display:block;color:var(--ink);margin-bottom:2px;font-size:13.5px}
.hdm-cc .compat svg{flex-shrink:0;margin-top:1px}
.hdm-cc [data-dir="c"]{--canvas:#FAF6F0;
  --card:#FFFDFB;
  --line:#E9E1D6;
  --line-2:#F3EDE4;
  --hdm-green-tint:#EDF6EE;
  --r-lg:20px;--r-md:14px;--r-sm:11px;
  --base:17px;
  --shadow:0 2px 4px rgba(60,44,30,.04), 0 14px 34px -18px rgba(60,44,30,.24);
  --pad:30px;}
.hdm-cc [data-dir="c"] .page-head h1{font-size:36px}
.hdm-cc [data-dir="c"] .page-head p{font-size:16.5px}
.hdm-cc [data-dir="c"] .item-name{font-size:22px}
.hdm-cc [data-dir="c"] .item-media{background:linear-gradient(160deg,#FDFAF5,#F4EDE3)}
.hdm-cc [data-dir="c"] .btn-primary{padding:20px 24px;font-size:18.5px;border-radius:var(--r-md)}
.hdm-cc [data-dir="c"] .qty button{width:46px;height:46px;font-size:19px}
.hdm-cc [data-dir="c"] .config{background:#FCFAF6;border-color:var(--line-2)}
.hdm-cc [data-dir="c"] .count{background:#FCEEF4;color:#B3255F}
.hdm-cc [data-dir="c"] .trust .ic{background:#FCEEF4;color:#B3255F}
.hdm-cc .reassure{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.hdm-cc .reassure span{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--ink-2);}
.hdm-cc .reassure svg{stroke:var(--hdm-green);fill:none;stroke-width:2.4;width:16px;height:16px;flex-shrink:0}
.hdm-cc .next-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hdm-cc .next-steps li{position:relative;padding:0 24px 0 0}
.hdm-cc .next-steps .n{width:34px;height:34px;border-radius:50%;background:var(--hdm-green);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:14px;position:relative;z-index:2;}
.hdm-cc .next-steps li:not(:last-child)::after{content:"";position:absolute;left:34px;top:17px;right:10px;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);}
.hdm-cc .next-steps h4{margin:0 0 6px;font-family:var(--font-display);font-size:16.5px;font-weight:700}
.hdm-cc .next-steps p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:30ch}
.hdm-cc .expert-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  display:flex;gap:16px;align-items:center;box-shadow:var(--shadow);}
.hdm-cc .expert-card img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex-shrink:0}
.hdm-cc .expert-card b{display:block;font-family:var(--font-display);font-size:16px;margin-bottom:3px}
.hdm-cc .expert-card p{margin:0 0 10px;font-size:13.5px;color:var(--slate);line-height:1.45}
.hdm-cc .expert-card a{font-size:15px;font-weight:700;color:var(--hdm-green-dk)}
.hdm-cc .guarantee{background:#FCEEF4;border-radius:var(--r-md);padding:16px 18px;font-size:14px;
  color:#8E1C4B;line-height:1.5;display:flex;gap:11px;align-items:flex-start;}
.hdm-cc .guarantee b{display:block;margin-bottom:3px}
@container (max-width:1080px){
.hdm-cc .grid{grid-template-columns:minmax(0,1fr) 330px}
.hdm-cc .config-list{grid-template-columns:minmax(0,1fr)}
.hdm-cc .trust, .hdm-cc .xsell{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:860px){
.hdm-cc .grid{grid-template-columns:minmax(0,1fr)}
.hdm-cc .rail{position:static}
.hdm-cc .empty{grid-template-columns:minmax(0,1fr);padding:36px 26px}
.hdm-cc .empty-art{order:-1}
.hdm-cc .next-steps{grid-template-columns:1fr;gap:22px}
.hdm-cc .next-steps li:not(:last-child)::after{display:none}
.hdm-cc .support{padding:24px}
.hdm-cc .support-act{margin-left:0;width:100%;flex-direction:column;gap:10px}
.hdm-cc .support-act a{width:100%;justify-content:center}
}
@container (max-width:620px){
.hdm-cc .page-head{padding-block:14px 20px}
.hdm-cc .page-head h1{font-size:26px}
.hdm-cc [data-dir="c"] .page-head h1{font-size:28px}
.hdm-cc .keep-shopping{margin-left:0;width:100%;justify-content:center;order:5}
.hdm-cc .head-go{display:grid;order:6;width:100%}
.hdm-cc .steps{padding-block:16px 0}
.hdm-cc .steps li span.lbl{display:none}
.hdm-cc .steps li[aria-current] span.lbl{display:inline}
.hdm-cc .steps .bar{width:26px}
.hdm-cc .item{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
.hdm-cc .item.accessory{grid-template-columns:76px minmax(0,1fr)}
.hdm-cc .item-media{max-width:190px;margin:0 auto}
.hdm-cc .item.accessory .item-media{max-width:none}
.hdm-cc .config-list{grid-template-columns:minmax(0,1fr)}
.hdm-cc .build-list{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.hdm-cc .build-h{gap:10px}
.hdm-cc .build-h .btn-edit{margin-left:0;width:100%;justify-content:center}
.hdm-cc .sheet-row{grid-template-columns:minmax(0,1fr) 84px;gap:4px 10px}
.hdm-cc .sheet-row dt{grid-column:1/-1}
.hdm-cc .trust, .hdm-cc .xsell{grid-template-columns:minmax(0,1fr)}
.hdm-cc .xsell{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:20px calc(-1 * var(--edge)) 0;padding:0 var(--edge) 8px}
.hdm-cc .xcard{min-width:210px;scroll-snap-align:start}
.hdm-cc .mbar{display:flex}
.hdm-cc .sec{margin-top:32px}
.hdm-cc .item-foot{gap:12px}
.hdm-cc .line-total{width:100%;text-align:left;margin-left:0;order:-1}
.hdm-cc .empty{padding:28px 20px}
.hdm-cc .empty h2{font-size:26px}
}
.hdm-cc .co-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:var(--gap);align-items:start;padding-bottom:60px;}
.hdm-cc .co-rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
.hdm-cc .express{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow);margin-top:16px;}
.hdm-cc .express h2{font-family:var(--font-display);font-size:15px;font-weight:700;margin:0 0 4px;}
.hdm-cc .express > p{margin:0 0 14px;font-size:13px;color:var(--slate)}
.hdm-cc .express-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hdm-cc .xbtn{height:48px;border-radius:var(--r-md);display:grid;place-items:center;
  font-weight:700;font-size:14px;transition:.16s;border:1px solid transparent;}
.hdm-cc .xbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.hdm-cc .xbtn.pp{background:#FFC439;color:#003087}
.hdm-cc .xbtn.pp i{font-style:italic;font-weight:800;letter-spacing:-.02em}
.hdm-cc .xbtn.pp i b{color:#003087}
.hdm-cc .xbtn.pp i em{color:#009CDE;font-style:italic}
.hdm-cc .xbtn.gp{background:#000;color:#fff}
.hdm-cc .xbtn.gp span{display:inline-flex;align-items:center;gap:6px}
.hdm-cc .xbtn.kl{background:#FFB3C7;color:#0B051D}
.hdm-cc .or-line{display:flex;align-items:center;gap:14px;margin:18px 0 0;
  font-size:12px;color:var(--slate);font-weight:600;}
.hdm-cc .or-line::before, .hdm-cc .or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.hdm-cc .co-back{display:flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:13px 18px;font-size:14.5px;font-weight:700;color:var(--ink-2);
  transition:.16s;}
.hdm-cc .co-back:hover{border-color:var(--hdm-green);color:var(--hdm-green-dk);background:var(--hdm-green-tint)}
.hdm-cc .co-back svg{width:16px;height:16px}
.hdm-cc .steps-wrap{display:flex;flex-direction:column;gap:12px}
.hdm-cc .cstep{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;transition:border-color .18s,box-shadow .18s;}
.hdm-cc .cstep.open{border-color:var(--line);box-shadow:var(--shadow)}
.hdm-cc .cstep.open.done{border-color:#BFE6CD}
.hdm-cc .cstep.open.done .cstep-n{background:var(--hdm-green);color:#fff;border-color:var(--hdm-green)}
.hdm-cc .cstep.done .cstep-n{background:var(--hdm-green);color:#fff;border-color:var(--hdm-green)}
.hdm-cc .cstep-h{width:100%;display:flex;align-items:center;gap:14px;
  padding:18px 22px 14px;text-align:left;}
.hdm-cc .cstep-n{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;
  place-items:center;font-size:13.5px;font-weight:700;
  border:1.5px solid var(--line-2);color:var(--slate);background:#fff;}
.hdm-cc .cstep.open .cstep-n{background:var(--ink);color:#fff;border-color:var(--ink)}
.hdm-cc .cstep-t{min-width:0;flex:1}
.hdm-cc .cstep-t b{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:700;
  letter-spacing:-.012em;line-height:1.2;}
.hdm-cc .cstep-t span{display:block;font-size:13px;color:var(--slate);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;}
.hdm-cc .cstep.open .cstep-t span{color:var(--ink-2)}
.hdm-cc .cstep-edit{font-size:13px;font-weight:700;color:var(--hdm-green-dk);flex-shrink:0;
  border-bottom:1.5px solid currentColor;line-height:1.2;}
.hdm-cc .cstep-body{padding:0 22px 22px;display:none}
.hdm-cc .cstep.open .cstep-body{display:block}
.hdm-cc .cstep-locked .cstep-h{opacity:.55;cursor:default}
.hdm-cc .f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hdm-cc .f-grid .full{grid-column:1/-1}
.hdm-cc .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.hdm-cc .field > label{font-size:13px;font-weight:600;color:var(--ink-2)}
.hdm-cc .field .req{color:var(--red)}
.hdm-cc .field input, .hdm-cc .field select, .hdm-cc .field textarea{height:48px;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  padding:0 14px;font-size:15px;background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;width:100%;}
.hdm-cc .field textarea{height:auto;padding:12px 14px;min-height:80px;resize:vertical}
.hdm-cc .field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B7F8A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right:38px;}
.hdm-cc .field input::placeholder{color:#9AABB2}
.hdm-cc .field input:focus, .hdm-cc .field select:focus, .hdm-cc .field textarea:focus{outline:none;border-color:var(--hdm-green);
  box-shadow:0 0 0 3px rgba(34,164,75,.16);}
.hdm-cc .field.bad input, .hdm-cc .field.bad select{border-color:var(--red);background:var(--red-bg)}
.hdm-cc .field .err{font-size:12px;font-weight:600;color:var(--red);display:none;
  align-items:center;gap:5px;}
.hdm-cc .field.bad .err{display:flex}
.hdm-cc .field .hint{font-size:12px;color:var(--slate)}
.hdm-cc .check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  color:var(--ink-2);cursor:pointer;line-height:1.45;}
.hdm-cc .check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex-shrink:0;
  border:1.5px solid var(--line-2);border-radius:6px;background:#fff;
  display:grid;place-items:center;cursor:pointer;margin-top:1px;}
.hdm-cc .check input:checked{background:var(--hdm-green);border-color:var(--hdm-green)}
.hdm-cc .check input:checked::after{content:"";width:10px;height:5px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-2px);}
.hdm-cc .step-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.hdm-cc .step-act .back{font-size:13.5px;font-weight:700;color:var(--slate)}
.hdm-cc .step-act .back:hover{color:var(--ink)}
.hdm-cc .opt-list{display:flex;flex-direction:column;gap:10px}
.hdm-cc .marks{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.hdm-cc .pmk{display:inline-flex;align-items:center;justify-content:center;gap:1px;
  height:26px;padding:0 8px;border-radius:5px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:800;
  font-size:11px;letter-spacing:.02em;line-height:1;}
.hdm-cc .pmk-visa{color:#1A1F71;font-style:italic;font-size:13px;letter-spacing:.06em}
.hdm-cc .pmk-mc{padding:0 5px}
.hdm-cc .pmk-mc svg{display:block}
.hdm-cc .pmk-amex{background:#016FD0;color:#fff;box-shadow:none;font-size:10.5px;letter-spacing:.04em}
.hdm-cc .pmk-disc{color:#E55C1C;font-size:9px;letter-spacing:.03em}
.hdm-cc .pmk-pp{font-style:italic;font-size:13px;letter-spacing:-.02em}
.hdm-cc .pmk-pp b{color:#003087;font-weight:800}
.hdm-cc .pmk-pp em{color:#009CDE;font-style:italic;font-weight:800}
.hdm-cc .pmk-klarna{background:#FFB3C7;color:#0B051D;box-shadow:none;font-size:12px}
.hdm-cc .pmk-gpay{background:#000;color:#fff;box-shadow:none;gap:4px;font-size:12px}
.hdm-cc .opt-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;
  align-items:start;padding:16px 18px;border:1.5px solid var(--line-2);
  border-radius:var(--r-md);cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s,box-shadow .15s;}
.hdm-cc .opt-row:hover{border-color:#9FD9B6}
.hdm-cc .opt-row.sel{border-color:var(--hdm-green);background:#F7FDF9;
  box-shadow:0 0 0 3px rgba(34,164,75,.12);}
.hdm-cc .opt-row .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);
  background:#fff;display:grid;place-items:center;margin-top:2px;}
.hdm-cc .opt-row.sel .dot{border-color:var(--hdm-green);border-width:6px}
.hdm-cc .opt-row .ot b{display:block;font-size:14.5px;font-weight:700;line-height:1.3;
  font-family:var(--font-display);}
.hdm-cc .opt-row .ot span{display:block;font-size:13px;color:var(--slate);margin-top:3px;line-height:1.45}
.hdm-cc .opt-row .op{font-weight:700;font-size:14.5px;white-space:nowrap;text-align:right}
.hdm-cc .opt-row .op.free{color:var(--hdm-green-dk);letter-spacing:.03em}
.hdm-cc .opt-row .flag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;background:var(--hdm-green-tint);color:var(--hdm-green-dk);
  border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:1px;}
.hdm-cc .pay-body{margin-top:12px;padding:16px;background:#FAFCFB;border:1px solid var(--line);
  border-radius:var(--r-md);}
.hdm-cc .card-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hdm-cc .card-row .full{grid-column:1/-1}
.hdm-cc .review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hdm-cc .review-box{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
  background:#FAFCFB;}
.hdm-cc .review-box h5{margin:0 0 6px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);font-weight:700;}
.hdm-cc .review-box p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.hdm-cc .review-box a{font-size:12.5px;font-weight:700;color:var(--hdm-green-dk);
  border-bottom:1.5px solid currentColor;}
.hdm-cc .terms{margin-top:16px;padding:14px 16px;background:var(--amber-bg);
  border:1px solid #F1DFB6;border-radius:var(--r-md);
  font-size:12.5px;color:#6B4E12;line-height:1.55;}
.hdm-cc .terms b{color:#5A400C}
.hdm-cc .place{margin-top:16px}
.hdm-cc .place .btn-primary{width:100%;height:58px;font-size:17px}
.hdm-cc .place .btn-primary[data-busy]{opacity:.75;pointer-events:none}
.hdm-cc .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}
.hdm-cc .place .fine{margin-top:10px;font-size:12px;color:var(--slate);text-align:center;line-height:1.5;}
.hdm-cc .sum-items{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.hdm-cc .sum-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start}
.hdm-cc .sum-item .th{width:64px;height:64px;border-radius:var(--r-sm);background:#F7FAF8;
  border:1px solid var(--line);overflow:hidden;position:relative;flex-shrink:0;}
.hdm-cc .sum-item .th img{width:100%;height:100%;object-fit:contain;padding:5px}
.hdm-cc .sum-item .th .q{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;padding:0 5px;}
.hdm-cc .sum-item .nm{display:block;font-size:13.5px;font-weight:700;line-height:1.35}
.hdm-cc .sum-item .cf{display:block;font-size:12px;color:var(--slate);line-height:1.45;margin-top:3px}
.hdm-cc .sum-item .pr{font-size:13.5px;font-weight:700;white-space:nowrap}
.hdm-cc .rail-promo{display:flex;gap:8px;margin:4px 0 16px;}
.hdm-cc .rail-promo input{flex:1;min-width:0;height:44px;border:1.5px solid var(--line-2);
  border-radius:var(--r-md);padding:0 12px;font-size:14px;}
.hdm-cc .rail-promo input:focus{outline:none;border-color:var(--hdm-green);
  box-shadow:0 0 0 3px rgba(34,164,75,.16)}
.hdm-cc .rail-promo button{height:44px;padding:0 18px;border-radius:var(--r-md);font-weight:700;
  font-size:14px;background:var(--ink);color:#fff;}
.hdm-cc .rail-promo button:hover{background:#0E1A20}
.hdm-cc .terms-agree{margin:12px 0 0;padding-top:11px;border-top:1px solid rgba(140,105,30,.25);
  font-size:13px;line-height:1.55;}
.hdm-cc .terms-agree a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1.5px}
.hdm-cc .terms-agree a:hover{color:var(--hdm-green-dk)}
.hdm-cc .rail-trust{border-top:1px dashed var(--line);margin-top:18px;padding-top:16px;
  display:flex;flex-direction:column;gap:11px;}
.hdm-cc .rail-trust span{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-2);
  line-height:1.45;}
.hdm-cc .rail-trust i{font-style:normal;min-width:0}
.hdm-cc .rail-trust i b{font-weight:700;color:var(--ink)}
.hdm-cc .rail-trust svg{width:15px;height:15px;stroke:var(--hdm-green-dk);fill:none;
  stroke-width:2.2;flex-shrink:0;margin-top:2px}
.hdm-cc .help-card{background:var(--ink);color:#DCE9E4;border-radius:var(--r-lg);padding:20px 22px;}
.hdm-cc .help-card b{display:block;font-family:var(--font-display);font-size:15.5px;color:#fff;
  margin-bottom:5px;}
.hdm-cc .help-card p{margin:0 0 14px;font-size:13px;color:#A9C0BA;line-height:1.55}
.hdm-cc .help-card a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:#fff;background:var(--hdm-green);padding:11px 16px;border-radius:var(--r-md);}
.hdm-cc .help-card a:hover{background:var(--hdm-green-dk)}
.hdm-cc .done-hero{background:linear-gradient(180deg,#FFFFFF 0%,var(--hdm-green-tint) 100%);
  border-bottom:1px solid #DCEEE2;padding:52px 0 46px;text-align:center;}
.hdm-cc .done-mark{width:76px;height:76px;border-radius:50%;margin:0 auto 20px;display:grid;
  place-items:center;background:var(--hdm-green);color:#fff;
  box-shadow:0 12px 30px -12px rgba(23,120,60,.8);}
.hdm-cc .done-mark svg{width:38px;height:38px}
.hdm-cc .done-hero h1{font-family:var(--font-display);font-size:34px;font-weight:700;margin:0 0 10px;
  letter-spacing:-.02em;}
.hdm-cc .done-hero > .wrap > p{margin:0 auto;max-width:52ch;color:var(--ink-2);font-size:15.5px}
.hdm-cc .done-ord{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  max-width:900px;margin:28px auto 0;text-align:left;
  background:#E4F0E9;border:1px solid #D3E8DB;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(23,36,44,.05),0 26px 50px -34px rgba(20,90,50,.65);}
.hdm-cc .done-ord div{background:#fff;padding:17px 20px 18px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.hdm-cc .done-ord small{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);font-weight:700;}
.hdm-cc .done-ord small svg{width:13px;height:13px;stroke:var(--hdm-green);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hdm-cc .done-ord b{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.012em;
  line-height:1.3;overflow-wrap:anywhere;}
.hdm-cc .done-ord .num b{color:var(--hdm-green-dk);letter-spacing:.01em}
.hdm-cc .done-ord .tot b{font-size:20px}
.hdm-cc .done-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--gap);
  padding:38px 0 60px;align-items:start;}
.hdm-cc .done-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:24px 26px;margin-bottom:16px;}
.hdm-cc .done-card h2{font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 16px;
  letter-spacing:-.015em;}
.hdm-cc .tl{display:flex;flex-direction:column;gap:0}
.hdm-cc .tl li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;position:relative;
  padding-bottom:22px}
.hdm-cc .tl li:last-child{padding-bottom:0}
.hdm-cc .tl li::before{content:"";position:absolute;left:17px;top:34px;bottom:0;width:2px;
  background:var(--line);}
.hdm-cc .tl li:last-child::before{display:none}
.hdm-cc .tl .tn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--hdm-green-tint);color:var(--hdm-green-dk);font-weight:700;
  font-size:14px;box-shadow:inset 0 0 0 1.5px #CFE7D8;z-index:1;}
.hdm-cc .tl li.now .tn{background:var(--hdm-green);color:#fff;box-shadow:none}
.hdm-cc .tl h4{margin:0 0 4px;font-family:var(--font-display);font-size:15.5px;font-weight:700;
  padding-top:7px}
.hdm-cc .tl p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.hdm-cc .tl .when{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;
  color:var(--hdm-green-dk);background:var(--hdm-green-tint);border-radius:999px;
  padding:3px 10px;}
.hdm-cc .done-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hdm-cc .done-rows .review-box{background:#fff;border-color:var(--line)}
@container (max-width:1080px){
.hdm-cc .co-grid, .hdm-cc .done-grid{grid-template-columns:minmax(0,1fr) 340px}
}
@container (max-width:860px){
.hdm-cc .co-grid, .hdm-cc .done-grid{grid-template-columns:minmax(0,1fr)}
.hdm-cc .co-rail{position:static}
.hdm-cc .pay-note{display:none}
.hdm-cc .express-btns{grid-template-columns:minmax(0,1fr)}
.hdm-cc .card-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:620px){
.hdm-cc .f-grid, .hdm-cc .review-grid, .hdm-cc .done-rows{grid-template-columns:minmax(0,1fr)}
.hdm-cc .card-row{grid-template-columns:minmax(0,1fr)}
.hdm-cc .cstep-h{padding:15px 16px;gap:11px}
.hdm-cc .cstep-body{padding:0 16px 18px}
.hdm-cc .express{padding:16px}
.hdm-cc .done-hero{padding:38px 0 34px}
.hdm-cc .done-ord{grid-template-columns:repeat(2,minmax(0,1fr))}
.hdm-cc .done-hero h1{font-size:26px}
.hdm-cc .done-card{padding:18px 16px}
.hdm-cc .opt-row{padding:14px;grid-template-columns:22px minmax(0,1fr);gap:11px}
.hdm-cc .opt-row .op{grid-column:2;text-align:left;margin-top:4px}
.hdm-cc .opt-row .marks{grid-column:2;justify-content:flex-start;margin-top:9px}
.hdm-cc .step-act .btn-primary{width:100%;justify-content:center}
.hdm-cc .done-ord{grid-template-columns:repeat(2,minmax(0,1fr))}
.hdm-cc .done-ord div{padding:14px 15px}
.hdm-cc .done-ord b{font-size:15.5px}
.hdm-cc .done-ord .tot b{font-size:17px}
}

/* ============================================================
   INTEGRATION LAYER
   Bridges the ported design system onto the markup WooCommerce
   and WAPF actually emit, and neutralises the few theme rules
   that reach inside the module.
   Everything above this point is the prototype, mechanically
   scoped; everything below is the adaptation to real markup.
   ============================================================ */

/* The design's responsive rules are @container queries, so the module root has
   to be the container. This also isolates it from the theme's own layout. */
.hdm-cc{
  container-type:inline-size;
  background:var(--canvas);
  font-family:var(--font-body);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
}
.hdm-cc *{box-sizing:border-box}
.hdm-cc img{max-width:100%;height:auto}
.hdm-cc button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.hdm-cc a{text-decoration:none;color:inherit}

/* The theme wraps page content in a narrow, padded column. The cart is a
   full-bleed layout, so that has to be undone - but ONLY on the wrappers that
   actually contain this module.
   :has() matters here. These class names are not unique to the page body: the
   site footer is also built inside a .col-full, so an unscoped reset stripped the
   footer's max-width and centring too and its contents ran the full width of the
   viewport on cart and checkout while staying correct everywhere else.
   Where :has() is unsupported the reset simply does not apply, which leaves the
   module inside the theme's normal column - narrower than intended, but nothing
   is broken, and the footer is right either way. */
.hdm-cc-page .site-content:has(.hdm-cc),
.hdm-cc-page .content-area:has(.hdm-cc),
.hdm-cc-page #primary:has(.hdm-cc),
.hdm-cc-page .entry-content:has(.hdm-cc),
.hdm-cc-page .col-full:has(.hdm-cc),
.hdm-cc-page .woocommerce:has(.hdm-cc){
  max-width:none;width:auto;margin:0;padding:0;float:none;
}
.hdm-cc-page .entry-header,
.hdm-cc-page .page-title,
.hdm-cc-page .woocommerce-breadcrumb{display:none}

/* THE gap above the page.
   WooCommerce always prints .woocommerce-notices-wrapper whether or not it has a
   notice, and the theme gives it margin-top:52px. When it is empty it has no
   height, so that margin collapses straight out through every ancestor and pushes
   the whole page down - the white band under the header that survived zeroing
   padding on all of them, because it was never padding on any of them.
   Only the EMPTY one is removed. A wrapper with a real notice in it (coupon
   applied, item removed, validation error) keeps its spacing.
   An earlier attempt at this was scoped to one exact DOM path
   (.site-content > .col-full > ...) and missed it: the live one is eleven levels
   deep, inside the Elementor containers. */
.hdm-cc-page .woocommerce-notices-wrapper:empty{display:none!important;margin:0!important}
.hdm-cc-page .widget-area,
.hdm-cc-page #secondary{display:none}

/* Shoptimizer floats .woocommerce-cart-form (float:left, width:70%) to sit the
   stock cart table beside .cart-collaterals. Our layout does its own two column
   work, and an un-cleared float intrudes on every later sibling that establishes
   a block formatting context, squeezing the support and cross-sell bands into
   whatever space is left beside it. Undo the float rather than clearing after it,
   so the bands are full width at every breakpoint. */
.hdm-cc .woocommerce-cart-form,
.hdm-cc .woocommerce-cart-form__contents,
.hdm-cc form.checkout,
.hdm-cc #customer_details,
.hdm-cc #order_review{
  float:none;width:auto;margin-left:0;margin-right:0;
}
/* The theme's own collaterals column is replaced by our rail. */
.hdm-cc .cart-collaterals{display:none}
/* Belt and braces: the design's own bands never sit beside a stray float. */
.hdm-cc > .wrap,
.hdm-cc > section{clear:both}

/* ---------- WooCommerce form fields -> the design's .field ---------- */
/* woocommerce_form_field() emits .form-row, not .field, and the checkout script
   toggles .woocommerce-invalid on it. Map both rather than re-templating every
   field, so third-party fields added by plugins inherit the styling too. */
.hdm-cc .form-row{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0}
.hdm-cc .form-row > label{font-size:13px;font-weight:600;color:var(--ink-2)}
.hdm-cc .form-row .required{color:var(--red);text-decoration:none;border:0}
.hdm-cc .form-row .optional{color:var(--slate);font-weight:500}
.hdm-cc .form-row input[type=text],
.hdm-cc .form-row input[type=email],
.hdm-cc .form-row input[type=tel],
.hdm-cc .form-row input[type=password],
.hdm-cc .form-row input[type=number],
.hdm-cc .form-row select,
.hdm-cc .form-row .select2-container .select2-selection--single,
.hdm-cc .form-row textarea{
  width:100%;height:48px;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  padding:0 14px;font-size:15px;background:#fff;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.hdm-cc .form-row textarea{height:auto;padding:12px 14px;min-height:88px;resize:vertical;line-height:1.5}
.hdm-cc .form-row select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7F8A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:38px}
.hdm-cc .form-row input::placeholder,
.hdm-cc .form-row textarea::placeholder{color:#9AABB2}
.hdm-cc .form-row input:focus,
.hdm-cc .form-row select:focus,
.hdm-cc .form-row textarea:focus{outline:none;border-color:var(--hdm-green);
  box-shadow:0 0 0 3px rgba(34,164,75,.16)}
.hdm-cc .form-row.woocommerce-invalid input,
.hdm-cc .form-row.woocommerce-invalid select,
.hdm-cc .form-row.woocommerce-invalid .select2-container .select2-selection--single{
  border-color:var(--red);background:var(--red-bg)}
.hdm-cc .form-row.woocommerce-validated input{border-color:#BFE6CD}
/* Core hides its inline field error until invalid; match the design's .err. */
.hdm-cc .form-row .woocommerce-input-wrapper{display:block;width:100%}
/* WooCommerce marks almost every address field form-row-wide, which in a two
   column grid would stack the whole form into one column. Full width is kept for
   the fields that genuinely need the room (street, company, notes) and the short
   ones are paired up, which is what the design shows. */
.hdm-cc .form-row-wide,
.hdm-cc .form-row.notes,
.hdm-cc .woocommerce-additional-fields__field-wrapper .form-row{grid-column:1/-1}
.hdm-cc .form-row#billing_city_field,
.hdm-cc .form-row#billing_state_field,
.hdm-cc .form-row#billing_postcode_field,
.hdm-cc .form-row#billing_phone_field,
.hdm-cc .form-row#shipping_city_field,
.hdm-cc .form-row#shipping_state_field,
.hdm-cc .form-row#shipping_postcode_field{grid-column:span 1}
.hdm-cc .form-row-first{grid-column:1}
.hdm-cc .form-row-last{grid-column:2}
@container (max-width:1080px){
  .hdm-cc .form-row-first,
  .hdm-cc .form-row-last,
  .hdm-cc .form-row{grid-column:1/-1}
}
.hdm-cc .f-grid{align-items:start}
.hdm-cc .ship-diff{margin:16px 0 4px}
.hdm-cc .order-notes{margin-top:16px}
.hdm-cc .shipping_address{margin-top:14px}

/* select2, which WooCommerce uses for country/state */
.hdm-cc .select2-container .select2-selection--single{display:flex;align-items:center}
.hdm-cc .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:normal;padding:0;color:var(--ink)}
.hdm-cc .select2-container--default .select2-selection--single .select2-selection__arrow{top:12px;right:8px}

/* ---------- payment methods -> the design's .opt-row ---------- */
.hdm-cc .wc_payment_methods{list-style:none;margin:0;padding:0}
.hdm-cc .wc_payment_methods > li{
  display:block;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  background:#fff;transition:border-color .15s,background .15s;overflow:hidden;
}
.hdm-cc .wc_payment_methods > li:hover{border-color:#9FD9B6}
.hdm-cc .wc_payment_methods > li.wc_payment_method > label{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:15px 16px;cursor:pointer;font-size:14.5px;font-weight:700;
  color:var(--ink);margin:0;
}
/* the radio itself becomes the design's dot */
.hdm-cc .wc_payment_methods > li input[type=radio]{
  appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line-2);background:#fff;flex-shrink:0;transition:border-width .15s,border-color .15s;
}
.hdm-cc .wc_payment_methods > li input[type=radio]:checked{border-color:var(--hdm-green);border-width:6px}
.hdm-cc .wc_payment_methods > li:has(input[type=radio]:checked){
  border-color:var(--hdm-green);background:#F7FDF9;
  box-shadow:0 0 0 1px var(--hdm-green) inset;
}
.hdm-cc .wc_payment_methods > li label img{max-height:26px;width:auto;display:inline-block;margin-left:6px}
.hdm-cc .payment_box{
  padding:2px 16px 16px 52px;font-size:13.5px;color:var(--ink-2);line-height:1.6;background:transparent;
}
.hdm-cc .payment_box p:first-child{margin-top:0}
.hdm-cc .payment_box p:last-child{margin-bottom:0}
.hdm-cc .payment_box::before{display:none}
.hdm-cc .opt-empty{padding:16px;border:1.5px dashed var(--line);border-radius:var(--r-md);background:#fff}

/* a static (non-selectable) delivery row: the choice was made on the product */
.hdm-cc .opt-row.is-static{cursor:default}
.hdm-cc .opt-row.is-static:hover{border-color:var(--hdm-green)}

/* ---------- summary tweaks ---------- */
.hdm-cc .sum-row b.muted{color:var(--slate);font-weight:600}
.hdm-cc .sum-row b.inc-note{font-size:12.5px;font-weight:700;color:var(--hdm-green-dk);text-align:right;line-height:1.35}
.hdm-cc .sum-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 6px;
  padding:9px 11px;background:var(--hdm-green-tint);border-radius:var(--r-sm);color:var(--ink-2);line-height:1.45}
.hdm-cc .sum-note svg{flex-shrink:0;color:var(--hdm-green-dk);margin-top:1px}

/* ---------- cart form plumbing ---------- */
/* The real Update cart button stays in the DOM so the form works without JS,
   but the stepper drives it, so it is only visible to assistive tech. */
.hdm-cc-formactions{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hdm-cc .item.is-busy{opacity:.55;pointer-events:none;transition:opacity .15s}
.hdm-cc .qty-fixed{padding:0 16px;height:40px;display:inline-flex;align-items:center;
  border:1.5px solid var(--line);border-radius:var(--r-md);font-weight:700;background:#fff}

/* ---------- drawer ---------- */
.hdm-cc .drawer{display:flex;flex-direction:column;transform:none;opacity:1;visibility:visible}
.hdm-cc .drawer[hidden]{display:none}
.hdm-cc .scrim[hidden]{display:none}
.hdm-cc .scrim{opacity:1;visibility:visible}
.hdm-cc .drawer-inner{display:flex;flex-direction:column;height:100%;min-height:0}
.hdm-cc .drawer-form{display:flex;flex-direction:column;height:100%;min-height:0}
.hdm-cc .hdm-cc-drawer-form{display:flex;flex-direction:column;height:100%;min-height:0}
.hdm-cc .drawer-loading{padding:40px 26px;color:var(--slate);font-size:14px;text-align:center}
body.hdm-cc-drawer-open{overflow:hidden}

/* WAPF's own field markup inside the drawer */
.hdm-cc .drawer-b .wapf-field-group{margin:0 0 22px}
.hdm-cc .drawer-b .wapf-field-label label,
.hdm-cc .drawer-b .wapf-field-label{font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);margin-bottom:8px;display:block}
.hdm-cc .drawer-b .wapf-field-container{margin-bottom:18px}
.hdm-cc .drawer-b label{font-size:14px}
.hdm-cc .drawer-b .wapf-radio-label,
.hdm-cc .drawer-b .wapf-checkbox-label{display:flex;align-items:center;gap:10px;
  padding:11px 13px;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  margin-bottom:7px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.hdm-cc .drawer-b .wapf-radio-label:hover,
.hdm-cc .drawer-b .wapf-checkbox-label:hover{border-color:#9FD9B6}
.hdm-cc .drawer-b input[type=radio],
.hdm-cc .drawer-b input[type=checkbox]{accent-color:var(--hdm-green);width:18px;height:18px;flex-shrink:0}
.hdm-cc .drawer-b select,
.hdm-cc .drawer-b input[type=text],
.hdm-cc .drawer-b input[type=number]{width:100%;height:46px;border:1.5px solid var(--line-2);
  border-radius:var(--r-md);padding:0 13px;font-size:15px;background:#fff}
.hdm-cc .drawer-b .wapf-swatch{border-radius:8px}
.hdm-cc .drawer-b .wapf-price-hint,
.hdm-cc .drawer-b .wapf--price{margin-left:auto;font-weight:700;font-size:13px;color:var(--hdm-green-dk);white-space:nowrap}
/* WAPF prints its own Product/Options/Grand total table. The drawer footer already
   shows the configured price (and stays pinned while the body scrolls), so the
   plugin's version would just be the same number twice.
   !important is required, not lazy: WAPF's script sets display on this element as
   an inline style, which no stylesheet rule can outrank without it. */
.hdm-cc .drawer-b .wapf-product-totals{display:none!important}

/* ---------- checkout plumbing ---------- */
.hdm-cc .co-grid{align-items:start}
.hdm-cc .steps-wrap{display:flex;flex-direction:column;gap:14px}
/* #payment holds sections 4 and 5, so it must not introduce a box of its own. */
.hdm-cc .hdm-cc-payment{display:flex;flex-direction:column;gap:14px;background:none;border:0;padding:0;margin:0}
.hdm-cc .hdm-cc-payment::before{display:none}
.hdm-cc .place{display:block;margin-top:20px;padding:0;border:0}
.hdm-cc .place .btn-primary,
.hdm-cc .place button#place_order{width:100%;justify-content:center}
/* The call-to-order button that replaces Place order for Amazon Pay and COD.
   The theme renders it with inline styles from the old checkout, so those are
   overridden here to give it the same footprint as the button it stands in for. */
.hdm-cc .place #call_button.hdm-cc-call-btn{
  width:100%;min-height:58px;display:flex!important;align-items:center;justify-content:center;gap:10px;
  margin:0!important;padding:16px 22px!important;border-radius:var(--r-md);
  font-family:var(--font-display);font-size:18px!important;font-weight:700;
  background:var(--hdm-green)!important;color:#fff!important;text-decoration:none;
  box-shadow:0 1px 2px rgba(23,36,44,.06),0 10px 24px -12px rgba(23,120,60,.6);
}
.hdm-cc .place #call_button.hdm-cc-call-btn:hover{background:var(--hdm-green-dk)!important}

.hdm-cc .place-total{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:14px 2px 0;font-size:14.5px;color:var(--ink-2)}
.hdm-cc .place-total b{font-family:var(--font-display);font-size:26px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.hdm-cc .place .fine{display:flex;align-items:center;justify-content:center;gap:6px;
  margin:12px 0 0;font-size:12.5px;color:var(--slate)}
.hdm-cc .terms{margin-top:6px}
.hdm-cc .woocommerce-terms-and-conditions-wrapper{margin-top:12px}
.hdm-cc .woocommerce-privacy-policy-text{font-size:12.5px;color:var(--slate)}

/* WooCommerce blocks the form with an overlay while it submits */
.hdm-cc .blockUI.blockOverlay{border-radius:var(--r-lg)}

/* notices */
.hdm-cc .woocommerce-error,
.hdm-cc .woocommerce-message,
.hdm-cc .woocommerce-info{
  list-style:none;margin:0 0 16px;padding:13px 16px;border-radius:var(--r-md);
  font-size:14px;line-height:1.5;border:1px solid var(--line);background:#fff;
}
.hdm-cc .woocommerce-error{background:var(--red-bg);border-color:#F2C6BD;color:#8A2E1E}
.hdm-cc .woocommerce-message{background:var(--hdm-green-tint);border-color:#CFE7D8;color:var(--hdm-green-dk)}
.hdm-cc .woocommerce-info{background:#EEF6FA;border-color:#CBE2EC;color:#22576B}
.hdm-cc .woocommerce-error li{margin:0}

/* order received */
.hdm-cc .rail-trust-flush{border-top:0;margin-top:0;padding-top:0}

/* ---------- responsive: the checkout rail stacks before the cart's ---------- */
@container (max-width:1080px){
  .hdm-cc .f-grid{grid-template-columns:1fr}
}
/* Respect reduced motion for the animations the design introduces. */
@media (prefers-reduced-motion:reduce){
  .hdm-cc *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================
   ROUND 2 - fixes from the first review
   ============================================================ */

/* ---------- 1. the cart sat left of centre ---------- */
/* float:none alone was not enough: the theme also sets width:70% on the cart
   form, so the grid inside it was centred in 1334px rather than the full column
   and everything above it (page head, steps) lined up 300px further right.
   !important because the theme's rule wins on load order at equal specificity. */
/* The competing width:70% is itself !important and lives in a stylesheet that
   loads after this one, so importance and source order cannot settle it. Among
   !important declarations specificity is compared first, so the selector is
   deliberately heavier (0,3,2) than anything the theme ships. */
body.hdm-cc-page .hdm-cc form.woocommerce-cart-form{
  width:auto!important;max-width:none!important;float:none!important;
}

/* ---------- 1b. white band between the header and the page ---------- */
/* main.site-main contributes 36px of padding and the theme's cart wrapper another
   40px of margin. On a full-bleed tinted page that reads as a broken gap. */
body.hdm-cc-page main.site-main{padding-top:0!important}
body.hdm-cc-page section.shoptimizer-cart-wrapper,
body.hdm-cc-page div.shoptimizer-archive{margin-top:0!important;padding-top:0!important}
/* The checkout page's content is also wrapped in an Elementor container carrying
   its own top padding, which showed as a second empty band under the header.
   Elementor v3 containers take their padding from custom properties, so the
   property has to be overridden as well as the shorthand. */
/* The container also computes to display:inline here, and an inline box wrapping
   block children generates a stray line box worth ~78px. Our page is full bleed
   and lays itself out, so these wrappers are reduced to plain blocks that add
   nothing of their own. */
/* Same scoping rule applies: only the Elementor wrappers WRAPPING this module get
   flattened. An unscoped version would reach any Elementor content elsewhere on
   the page and take its layout apart. */
body.hdm-cc-page .elementor:has(.hdm-cc),
body.hdm-cc-page .elementor .elementor-element:has(.hdm-cc),
body.hdm-cc-page .elementor .e-con-inner:has(.hdm-cc){
  --padding-block-start:0px;--padding-top:0px;
  display:block!important;max-width:none!important;width:auto!important;
  padding-top:0!important;margin-top:0!important;gap:0!important;
}
/* Amazon Pay reserves an ~80px banner at the top of the checkout for an express
   button that never mounts without credentials.
   Hidden by DEFAULT and revealed by the script only once its button really has
   mounted. The reverse (visible, then collapsed on load) is what produced the
   large empty gap above the page on first paint, followed by a visible jump when
   the script caught up. Better to never reserve the space than to reclaim it. */
body.hdm-cc-page .wc-amazon-checkout-message{display:none;margin:0!important}
body.hdm-cc-page .wc-amazon-checkout-message.hdm-cc-express-ready{display:block}

/* Whatever residual padding the theme, Elementor or a plugin banner contributes
   above the module, the band it leaves should not be a white stripe against the
   page's tint. Carrying the canvas colour up the wrappers makes the page read as
   one surface regardless of what any of them decide to add. #F3F7F4 is the
   --canvas token, written literally because the variable is scoped to .hdm-cc. */
body.hdm-cc-page .site-content:has(.hdm-cc),
body.hdm-cc-page main.site-main:has(.hdm-cc),
body.hdm-cc-page .content-area:has(.hdm-cc),
body.hdm-cc-page .shoptimizer-archive:has(.hdm-cc),
body.hdm-cc-page .elementor:has(.hdm-cc),
body.hdm-cc-page .woocommerce:has(.hdm-cc){background:#F3F7F4}
/* No footer background override here. An earlier `background:initial` was added
   defensively against the canvas tint leaking down, but the tint rules above are
   scoped with :has(.hdm-cc) and the footer does not contain the module, so it
   never inherits it. The override did, however, blank the footer's own dark
   background, leaving its nav band white on cart and checkout while the homepage
   showed it black. */

/* ---------- 2. the drawer was unclickable ---------- */
/* The site header stacks as high as z-index 100001 (its search overlay and
   mega-menu drawers). At the prototype's 195 the header's own chips sat on top of
   the panel and swallowed every click, so options could not be changed. The scrim
   also inherited pointer-events:none from the prototype's hidden state, which is
   why clicking outside never closed it. */
/* The panel and the scrim both inherit pointer-events:none from the prototype's
   hidden state, where the drawer lived permanently in the DOM and was switched on
   by a data attribute on the stage. Here it is added and removed, so both need it
   back on - without it every click on an option fell straight through the panel
   to the scrim underneath, which is exactly what "cannot change the selection"
   and "cannot close" looked like. */
.hdm-cc .scrim{z-index:100150;pointer-events:auto}
.hdm-cc .drawer{z-index:100200;pointer-events:auto}
.hdm-cc .drawer *{pointer-events:auto}
.hdm-cc .toast{z-index:100300;pointer-events:auto}

/* ---------- 8. contact fields ---------- */
/* Phone and email each get the full row. The phone input is wrapped by an
   international-telephone widget whose flag button is absolutely positioned, so
   the input needs left padding rather than the widget needing a height. */
.hdm-cc .form-row#billing_phone_field,
.hdm-cc .form-row#billing_email_field{grid-column:1/-1}
.hdm-cc .iti,
.hdm-cc .intl-tel-input{width:100%;display:block}
.hdm-cc .iti__flag-container,
.hdm-cc .intl-tel-input .flag-container{top:0;bottom:0;height:auto;display:flex;align-items:center}
.hdm-cc .iti__selected-flag,
.hdm-cc .intl-tel-input .selected-flag{height:100%;display:flex;align-items:center;padding-left:12px}

/* ---------- 19. payment rows: doubled borders, no hover feedback ---------- */
/* Each row carries its own 1.5px border, so adjacent rows rendered a 3px seam and
   the list read as broken. Collapse to a single shared border and give the whole
   row the hover treatment (the previous rule only lifted the top edge). */
.hdm-cc .wc_payment_methods{border:1.5px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:#fff}
.hdm-cc .wc_payment_methods > li{border:0;border-top:1.5px solid var(--line-2);border-radius:0}
.hdm-cc .wc_payment_methods > li:first-child{border-top:0}
.hdm-cc .wc_payment_methods > li:hover{background:#F7FDF9;border-color:transparent}
.hdm-cc .wc_payment_methods > li:has(input[type=radio]:checked){
  background:#F7FDF9;box-shadow:inset 3px 0 0 var(--hdm-green);border-color:transparent;
}
/* the selected row's neighbour should not show a seam against the highlight */
.hdm-cc .wc_payment_methods > li:has(input[type=radio]:checked) + li{border-top-color:transparent}

/* ---------- 15/16/17. express buttons and the place-order area ---------- */
/* PayPal, Google Pay and Apple Pay all replace #place_order through
   woocommerce_order_button_html with their own markup, at their own widths and
   heights, and some of it escaped the card entirely. Constrain the whole
   place-order block so every gateway's button occupies the same footprint as ours
   and stays inside the white card, below the order total. */
.hdm-cc .place{display:flex;flex-direction:column;gap:12px}
.hdm-cc .place > *{order:2}
.hdm-cc .place .place-total{order:1;margin:0 2px}
.hdm-cc .place .woocommerce-terms-and-conditions-wrapper,
.hdm-cc .place .woocommerce-privacy-policy-text{order:0}
.hdm-cc .place .fine{order:3;margin:0}
.hdm-cc .place #place_order,
.hdm-cc .place .button.alt{width:100%;min-height:58px;justify-content:center}
/* gateway-injected containers */
.hdm-cc .place #ppc-button-ppcp-gateway,
.hdm-cc .place [id^="ppc-button"],
.hdm-cc .place .paypal-buttons,
.hdm-cc .place .wc-stripe-payment-request-wrapper,
.hdm-cc .place [id^="wc-stripe"],
.hdm-cc .place .gpay-card-info-container,
.hdm-cc .place apple-pay-button{
  width:100%!important;max-width:none!important;margin:0!important;
}
.hdm-cc .place .paypal-buttons{min-height:52px}
.hdm-cc .place apple-pay-button{
  --apple-pay-button-width:100%;--apple-pay-button-height:58px;
  --apple-pay-button-border-radius:var(--r-md);height:58px;display:block;
}
.hdm-cc .place .gpay-card-info-container,
.hdm-cc .place button.gpay-card-info-container{
  width:100%!important;height:58px!important;border-radius:var(--r-md)!important;
}

/* ---------- 22. mobile: the summary belongs above the form ---------- */
@container (max-width:860px){
  .hdm-cc .co-grid{display:flex;flex-direction:column}
  .hdm-cc .co-rail{order:-1}
  .hdm-cc .co-rail .help-card,
  .hdm-cc .co-rail .co-back{order:2}
}

/* ---------- 21. delivery rows collapsed to one character per line ---------- */
/* .opt-row is a three column grid whose middle column had no min width, so at
   phone widths the text column collapsed to its narrowest word and the label
   wrapped a character at a time. */
.hdm-cc .opt-row{align-items:start}
.hdm-cc .opt-row .ot{min-width:0}
.hdm-cc .opt-row .ot b{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hdm-cc .opt-row .flag{white-space:normal}
@container (max-width:620px){
  .hdm-cc .opt-row{grid-template-columns:20px minmax(0,1fr);row-gap:6px}
  .hdm-cc .opt-row .op{grid-column:2;text-align:left}
}

/* ---------- 10. the testimonial does not belong on checkout ---------- */
/* Injected into #customer_details by the theme, between the customer's street
   address and their delivery choice. Hidden by class rather than unhooked because
   it is printed inline by a template rather than by a nameable callback. */
.hdm-cc .checkout-testimonial{display:none}

/* ---------- 11. per-product delivery groups ---------- */
.hdm-cc .deliv-group + .deliv-group{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.hdm-cc .deliv-for{
  margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);
}
.hdm-cc .deliv-group.is-busy{opacity:.55;pointer-events:none;transition:opacity .15s}
/* the radio itself is the design's dot */
.hdm-cc .opt-row .deliv-radio{
  appearance:none;-webkit-appearance:none;margin:0;width:0;height:0;position:absolute;opacity:0;
}
.hdm-cc .opt-row:has(.deliv-radio){cursor:pointer}
.hdm-cc .opt-row:has(.deliv-radio:focus-visible){outline:3px solid #1D6FE0;outline-offset:2px}
.hdm-cc .rev-deliv{display:block}
.hdm-cc .rev-deliv + .rev-deliv{margin-top:4px}

/* ---------- 13. promo code, in the step and in the rail ---------- */
.hdm-cc .hdm-cc-promo{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hdm-cc .hdm-cc-promo--step{margin:18px 0 4px}
.hdm-cc .hdm-cc-promo input{
  flex:1;min-width:0;height:46px;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  padding:0 14px;font-size:15px;background:#fff;
}
.hdm-cc .hdm-cc-promo input:focus{outline:none;border-color:var(--hdm-green);box-shadow:0 0 0 3px rgba(34,164,75,.16)}
.hdm-cc .hdm-cc-promo button[data-hdm-cc-promo-apply]{
  height:46px;padding:0 22px;border-radius:var(--r-md);background:var(--ink);color:#fff;
  font-weight:700;font-size:14.5px;flex-shrink:0;
}
.hdm-cc .hdm-cc-promo button[data-hdm-cc-promo-apply]:hover{background:#000}
.hdm-cc .hdm-cc-promo.is-busy{opacity:.6;pointer-events:none}
.hdm-cc .hdm-cc-promo .promo-msg{width:100%;margin:2px 0 0;font-size:12.5px;font-weight:600}
.hdm-cc .hdm-cc-promo .promo-msg.err{color:var(--red)}
.hdm-cc .chip-applied .x{background:none;border:0;font-size:19px;line-height:1;cursor:pointer;color:inherit}

/* ---------- undo affordance in the toast ---------- */
.hdm-cc .toast .toast-undo{
  margin-left:10px;color:#7BE6A2;font-weight:700;text-decoration:underline;white-space:nowrap;
}

/* ============================================================
   ROUND 3 - fixes from the second review
   ============================================================ */

/* ---------- name fields were a third of their column ---------- */
/* The theme floats .form-row-first / .form-row-last. A floated box inside a grid
   cell shrinks to fit its content instead of filling the cell, so First and Last
   name rendered at ~180px inside a 386px column. */
body.hdm-cc-page .hdm-cc .form-row,
body.hdm-cc-page .hdm-cc .form-row-first,
body.hdm-cc-page .hdm-cc .form-row-last,
body.hdm-cc-page .hdm-cc .form-row-wide{
  float:none!important;width:auto!important;max-width:none!important;
}

/* ---------- the phone field ---------- */
/* The country widget's button is 36px tall inside a 48px input, which left the
   white strip above the flag, and the input's 46px left padding was narrower than
   the 52px button, so the number ran underneath it. */
/* The flag button is 28px tall inside a 40px input and sits 11px below its top,
   because the widget sizes it from its own line-height rather than stretching. The
   container is absolutely positioned, so pinning it to both edges and centring
   inside it is what actually vertically centres the flag. Selectors are heavier
   than the plugin's own so they win without needing !important on every line. */
.hdm-cc .iti,
.hdm-cc .intl-tel-input{width:100%;display:block;position:relative}
.hdm-cc .iti > .iti__flag-container,
.hdm-cc .intl-tel-input > .flag-container{
  position:absolute;top:0;bottom:0;left:0;height:auto;display:flex;align-items:center;padding:0;
}
.hdm-cc .iti > .iti__flag-container > .iti__selected-flag,
.hdm-cc .intl-tel-input > .flag-container > .selected-flag{
  height:100%!important;min-height:0;display:flex;align-items:center;
  padding:0 8px 0 12px;margin:0;line-height:1;
  border-radius:var(--r-md) 0 0 var(--r-md);background:transparent;
}
.hdm-cc .iti__selected-flag .iti__flag{flex-shrink:0}
.hdm-cc .iti--allow-dropdown input[type=tel],
.hdm-cc .iti input[type=tel]{padding-left:60px!important}

/* ---------- delivery rows were 280px tall ---------- */
/* wpautop was inserting a <br> between every child of the row (now disabled in
   PHP). These rules keep the row compact regardless: the radio is taken out of
   the grid entirely, and any stray <br> is neutralised rather than becoming a
   grid item of its own. */
/* Safety net for the same problem. Even with wpautop unhooked, any filter that
   re-introduces a <br> between our structural elements must not become a grid or
   flex item. Deliberately scoped to the containers whose layout depends on their
   child list; <br> stays meaningful inside addresses and prose. */
.hdm-cc .opt-row br,
.hdm-cc .cstep-h br,
.hdm-cc .deliv-group > br,
.hdm-cc .hdm-cc-delivery > br,
.hdm-cc .build-list br,
.hdm-cc .sum-item br,
.hdm-cc .place > br,
.hdm-cc .f-grid > br,
.hdm-cc .opt-list > br{display:none}

/* WooCommerce's own coupon toggle prints outside our layout at the very bottom of
   the page. The PHP unhooks it; this covers the case where the theme re-adds it. */
body.hdm-cc-page .woocommerce-form-coupon-toggle,
body.hdm-cc-page form.checkout_coupon,
body.hdm-cc-page section.coupon-wrapper{display:none!important}
.hdm-cc .opt-row .deliv-radio{position:absolute;width:0;height:0;opacity:0;margin:0;padding:0}
.hdm-cc .opt-row{grid-template-columns:22px minmax(0,1fr) auto;gap:6px 14px;padding:14px 16px;align-items:center}
.hdm-cc .opt-row .ot b{margin:0}
.hdm-cc .opt-row .ot > span{margin-top:2px}
.hdm-cc .opt-row .op{align-self:center}

.hdm-cc .deliv-notice{
  display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;padding:11px 13px;
  background:#EEF6FA;border:1px solid #CBE2EC;border-radius:var(--r-md);
  font-size:13.5px;font-weight:600;color:#22576B;line-height:1.45;
}
.hdm-cc .deliv-notice svg{flex-shrink:0;margin-top:1px;stroke:#3B7A94}

/* ---------- promo gets its own card ---------- */
.hdm-cc .hdm-cc-promo-step .cstep-n--tag{background:var(--hdm-green-tint);color:var(--hdm-green-dk);border-color:#CFE7D8}
.hdm-cc .hdm-cc-promo-step .cstep-n--tag svg{width:15px;height:15px;fill:none;stroke:currentColor}
.hdm-cc .hdm-cc-promo--step{margin:0}

/* ---------- the quantity badge on summary thumbnails was clipped ---------- */
/* The badge is positioned outside the thumbnail's top-left corner, so the
   thumbnail must not clip it and the row needs room for it to sit in. */
.hdm-cc .sum-item .th{overflow:visible}
.hdm-cc .sum-item .th .q{z-index:2}
.hdm-cc .sum-items{padding-top:6px}
.hdm-cc .sum-item{padding-left:4px}

/* Removing a line without going back to the cart. It shares the third grid
   column with the price, stacked under it, and is deliberately quiet: this is a
   safety valve on a page where the only call to action should be paying. */
.hdm-cc .sum-item .pr{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.hdm-cc .sum-item .sum-rm{
  font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;
  color:var(--slate);text-decoration:none;border-bottom:1px solid transparent;
}
.hdm-cc .sum-item .sum-rm:hover,
.hdm-cc .sum-item .sum-rm:focus-visible{color:var(--red);border-bottom-color:currentColor}
.hdm-cc .sum-item.is-busy{opacity:.55;pointer-events:none;transition:opacity .15s}

/* Submit errors, moved out of the page header and in above the Place order
   button. Styled as a card-width alert rather than the theme's full-bleed
   notice, because here it sits inside the payment card. */
.hdm-cc .hdm-cc-notices{margin:0 0 14px;outline:none}
.hdm-cc .hdm-cc-notices ul.woocommerce-error{
  margin:0;padding:13px 15px 13px 15px;list-style:none;
  background:var(--red-bg);border:1px solid rgba(199,69,47,.35);border-left:3px solid var(--red);
  border-radius:var(--r-sm);color:#7A2517;font-size:13.5px;line-height:1.5;
}
.hdm-cc .hdm-cc-notices ul.woocommerce-error::before{content:none}
.hdm-cc .hdm-cc-notices ul.woocommerce-error li{margin:0;padding:0;list-style:none}
.hdm-cc .hdm-cc-notices ul.woocommerce-error li + li{margin-top:6px}
.hdm-cc .hdm-cc-notices ul.woocommerce-error a{color:inherit;text-decoration:underline}

/* ---------- express buttons ---------- */
/* Google Pay, PayPal and Apple Pay replace #place_order with their own markup and
   were rendering at their own size, outside the white card. They are pinned to
   the same footprint as our own button, inside the card. */
.hdm-cc .place > .gpay-card-info-container,
.hdm-cc .place > div[class*="gpay"],
.hdm-cc .place .gpay-card-info-container,
.hdm-cc .place .gpay-card-info-animation-container,
.hdm-cc .place button[class*="gpay"]{
  width:100%!important;max-width:none!important;min-width:0!important;
  height:58px!important;border-radius:var(--r-md)!important;margin:0!important;
}
.hdm-cc .place .paypal-buttons,
.hdm-cc .place [id^="ppc-button"],
.hdm-cc .place [id^="ppcp"]{width:100%!important;max-width:none!important;margin:0!important}
.hdm-cc .place .wc-stripe-payment-request-wrapper,
.hdm-cc .place .wc-stripe-googlepay-container,
.hdm-cc .place .wc-stripe-applepay-container{width:100%!important;margin:0!important}
/* the card itself must grow with whatever the gateway injects */
.hdm-cc .cstep-body{overflow:visible}
.hdm-cc .hdm-cc-payment .place{width:100%}

/* The script moves the gateway's own button into .place, where our Place order
   button would have been. Inside the card it needs no chrome of its own. */
.hdm-cc .place .hdm-cc-gateway-button{
  width:100%!important;max-width:none!important;margin:0!important;padding:0;
  background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:10px;
}
/* A container still sitting outside the card (a gateway re-created it after the
   last event) must not leave an empty white box behind. */
.hdm-cc .steps-wrap > .ppc-button-wrapper,
.hdm-cc .steps-wrap > [id^="ppc-button"],
.hdm-cc .steps-wrap > .wc-stripe-payment-request-wrapper{
  background:none;border:0;box-shadow:none;padding:0;margin:0;
}
.hdm-cc .steps-wrap > .ppc-button-wrapper:empty,
.hdm-cc .steps-wrap > [id^="ppc-button"]:empty{display:none}

/* ---------- payment method descriptions overflowed their row ---------- */
/* The gateway description sits in .payment_box, which the plugins render at full
   list width with their own padding, so long copy ("Our all-in-one checkout
   solution lets you offer PayPal, Venmo, Pay Later...") ran outside the row. */
.hdm-cc .wc_payment_methods .payment_box{
  box-sizing:border-box;max-width:100%;overflow-wrap:break-word;word-break:break-word;
}
.hdm-cc .wc_payment_methods > li{overflow:hidden}
.hdm-cc .wc_payment_methods > li > label{min-width:0}
.hdm-cc .wc_payment_methods > li > label > *{min-width:0}

/* The base .hdm-cc .payment_box indent above loses to two rules that ship with
   the site: the theme's "#payment .payment_methods li .payment_box" (an ID, so
   it wins on specificity and forces 1.3em) and PayPal's own
   ".payment_box.payment_method_ppcp-gateway" (same specificity as ours but
   later in source order, and it sets padding to 0). The visible result was
   PayPal's description starting hard against the row edge while every other
   method was indented. This selector outranks both, so all descriptions line
   up under the method name rather than under the radio.

   !important is not decoration here: PayPal's rule carries !important itself,
   so specificity alone cannot beat it. Ours is more specific AND important, so
   it wins; the theme's 1.3em rule loses on specificity as before. */
.hdm-cc #payment .payment_methods li .payment_box{
  padding:2px 16px 16px 52px!important;
}

.hdm-cc .ppcp-button-apm,
.hdm-cc .ppcp-button-rect,
.hdm-cc [id^="ppc-button"] > div{width:100%!important;max-width:none!important;margin:0!important}
.hdm-cc .paypal-buttons{width:100%!important;max-width:none!important;min-height:52px}
.hdm-cc .gpay-card-info-container,
.hdm-cc #gpay-button-online-api-id,
.hdm-cc button[class*="gpay-card-info"]{
  width:100%!important;max-width:none!important;height:54px!important;min-height:54px!important;
  border-radius:var(--r-md)!important;margin:0!important;
}
.hdm-cc apple-pay-button{
  --apple-pay-button-width:100%;--apple-pay-button-height:54px;
  --apple-pay-button-border-radius:var(--r-md);width:100%;height:54px;display:block;
}

/* ---------- 23. the step tracker lost its labels on mobile ---------- */
/* The prototype hid every label except the current step. Cart and Order confirmed
   are the two the customer most needs to see, so the labels stay and the
   connecting bars shrink instead. */
@container (max-width:620px){
  .hdm-cc .steps .lbl{display:inline;font-size:12px}
  .hdm-cc .steps .bar{width:16px}
  .hdm-cc .steps ol{gap:6px;flex-wrap:nowrap}
  .hdm-cc .steps li{font-size:12px}
}

/* ============================================================
   MINIMAL CHECKOUT CHROME
   A compact header and footer for the checkout only. The cart and the
   order-received page keep the full site chrome.
   Tokens are redeclared here rather than inherited from .hdm-cc, because the
   chrome sits outside that container and must not pick up its canvas
   background or container-query context.
   ============================================================ */
.hdm-cc-chrome{
  --cc-green:#22A44B;
  --cc-green-dk:#17833B;
  --cc-ink:#17242C;
  --cc-slate:#6B7F8A;
  --cc-line:#E2E9E7;
  --cc-shell:1320px;
  --cc-edge:32px;
  background:#fff;
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
  color:var(--cc-ink);
  /* Deliberately NOT sticky: on the one page that is a form, a persistent bar
     only costs vertical space. */
  position:static;
}
.hdm-cc-chrome *{box-sizing:border-box}
.hdm-cc-chrome-in{
  max-width:var(--cc-shell);margin:0 auto;padding:14px var(--cc-edge);
  display:flex;align-items:center;gap:20px;
}

/* ---------- header ---------- */
.hdm-cc-chrome-head{border-bottom:1px solid var(--cc-line)}
.hdm-cc-chrome-logo{display:flex;align-items:center;flex-shrink:0;line-height:0}
.hdm-cc-chrome-logo svg{height:44px;width:auto;display:block}
.hdm-cc-chrome-wordmark{
  font-family:"Quicksand","Trebuchet MS",sans-serif;font-weight:700;font-size:22px;color:var(--cc-ink);
}
.hdm-cc-chrome-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdm-cc-chrome-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:10px;
  background:var(--cc-green);color:#fff;
  font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .15s;
}
.hdm-cc-chrome-btn:hover,
.hdm-cc-chrome-btn:focus{background:var(--cc-green-dk);color:#fff}
.hdm-cc-chrome-btn-ic{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
}
.hdm-cc-chrome-btn-ic svg{stroke:#fff}
.hdm-cc-chrome-secure{
  display:flex;align-items:center;gap:7px;margin:0;flex-shrink:0;
  font-size:14px;font-weight:600;color:var(--cc-ink);
}
.hdm-cc-chrome-secure svg{stroke:var(--cc-ink)}

/* ---------- footer ---------- */
.hdm-cc-chrome-foot{border-top:1px solid var(--cc-line);margin-top:48px}
.hdm-cc-chrome-foot .hdm-cc-chrome-in{
  flex-direction:column;gap:10px;padding-top:26px;padding-bottom:30px;text-align:center;
}
.hdm-cc-chrome-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0}
.hdm-cc-chrome-links a{
  padding:0 14px;font-size:14.5px;color:var(--cc-ink);text-decoration:none;
  border-right:1px solid var(--cc-line);line-height:1.2;
}
.hdm-cc-chrome-links a:last-child{border-right:0}
.hdm-cc-chrome-links a:hover{color:var(--cc-green-dk);text-decoration:underline}
.hdm-cc-chrome-help{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:0;
  font-size:14px;color:var(--cc-slate);
}
.hdm-cc-chrome-help svg{stroke:var(--cc-slate)}
.hdm-cc-chrome-help a{color:var(--cc-green-dk);font-weight:700;text-decoration:none}
.hdm-cc-chrome-help a:hover{text-decoration:underline}
.hdm-cc-chrome-copy{margin:0;font-size:13px;color:var(--cc-slate)}

/* ---------- no dead space between the chrome and the page ---------- */
/* With the site header gone, whatever padding the theme, Elementor or a plugin
   banner contributed above the content is pure empty space under a 70px bar. */
body.hdm-cc-minimal .site-content,
body.hdm-cc-minimal main.site-main,
body.hdm-cc-minimal .content-area,
body.hdm-cc-minimal .col-full,
body.hdm-cc-minimal .shoptimizer-archive,
body.hdm-cc-minimal .woocommerce,
body.hdm-cc-minimal .entry-content,
body.hdm-cc-minimal .elementor,
body.hdm-cc-minimal .elementor .elementor-element,
body.hdm-cc-minimal .elementor .e-con-inner{
  margin-top:0!important;padding-top:0!important;
}
body.hdm-cc-minimal .hdm-cc .steps{padding-block:26px 4px}
/* the theme's own checkout heading, if it ever fires, duplicates our H1 */
body.hdm-cc-minimal .site-main > h1,
body.hdm-cc-minimal .entry-header{display:none}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .hdm-cc-chrome{--cc-edge:16px}
  .hdm-cc-chrome-head .hdm-cc-chrome-in{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .hdm-cc-chrome-logo{flex:1 1 auto}
  .hdm-cc-chrome-logo svg{height:34px}
  .hdm-cc-chrome-secure{order:2;margin-left:auto;font-size:12.5px}
  .hdm-cc-chrome-actions{order:3;flex:1 0 100%;margin-left:0;gap:8px}
  .hdm-cc-chrome-btn{flex:1;justify-content:center;padding:11px 12px;font-size:14.5px;gap:8px}
  .hdm-cc-chrome-btn-ic{width:24px;height:24px}
  .hdm-cc-chrome-btn-ic svg{width:14px;height:14px}
  .hdm-cc-chrome-foot{margin-top:0}
  .hdm-cc-chrome-links a{padding:0 10px;font-size:13.5px}
  /* the img rule further down carries the same specificity as the svg one, so
     the mobile height has to name the img too */
  .hdm-cc-chrome-logo-img,
  .hdm-cc-chrome-logo svg{height:32px}
  .hdm-cc-chrome-lbl-full{display:none}
  .hdm-cc-chrome-lbl-short{display:inline}
}
@media (max-width:420px){
  /* the number alone is the useful part once the bar is this narrow */
  .hdm-cc-chrome-btn.hdm-cc-chrome-btn--chat span:last-child{font-size:13.5px}
}

/* ============================================================
   ROUND 5 - checkout chrome and mobile review
   ============================================================ */

/* ---------- 1. the checkout logo ---------- */
.hdm-cc-chrome-logo-img{height:44px;width:auto;display:block}
.hdm-cc-chrome-logo svg{height:44px;width:auto;display:block}

/* ---------- 2. the mobile header ran off the screen ---------- */
/* Two buttons plus a logo cannot hold their natural width on a phone. Flex items
   default to min-width:auto, so they refuse to shrink below their text and push
   the bar wider than the viewport instead of wrapping. */
.hdm-cc-chrome-in{min-width:0;flex-wrap:wrap}
.hdm-cc-chrome-in > *{min-width:0}
.hdm-cc-chrome-actions{min-width:0;flex-wrap:wrap}
.hdm-cc-chrome-btn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hdm-cc-chrome-lbl-short{display:none}

/* ---------- 7. the footer sat too far from the page ---------- */
/* The page's own 70px bottom padding plus the footer's 48px top margin left a
   deep empty band, doubled visually because the page is tinted and the footer is
   white. The chrome footer sits directly under the content now. */
body.hdm-cc-minimal .hdm-cc .page{padding-bottom:28px}
.hdm-cc-chrome-foot{margin-top:0}
.hdm-cc-chrome-foot .hdm-cc-chrome-in{padding-top:22px;padding-bottom:22px;gap:8px}

/* ---------- 6. gateway buttons: gaps above and below, and clipping ---------- */
/* Every gateway's wrapper is present on the page whether or not its method is
   chosen, empty until then. They were still taking part in the flex column's gap,
   which is the empty space above and below the order button. Collapse the ones
   with nothing in them, and never clip the ones that do render - Google Pay's
   button is taller than a fixed height allows and was being cut off. */
.hdm-cc .place{gap:0;overflow:visible}
.hdm-cc .place > *{margin-bottom:0}
.hdm-cc .place > *:not(:last-child){margin-bottom:12px}
.hdm-cc .place [id^="ppc-button"],
.hdm-cc .place .ppc-button-wrapper,
.hdm-cc .place .wc-stripe-payment-request-wrapper{
  min-height:0;height:auto;overflow:visible;
}
/* a wrapper whose gateway has not rendered into it contributes nothing */
.hdm-cc .place [id^="ppc-button"]:empty,
.hdm-cc .place .ppc-button-wrapper:empty{display:none;margin:0!important}
.hdm-cc .place .gpay-card-info-container,
.hdm-cc .place #gpay-button-online-api-id,
.hdm-cc .place button[class*="gpay-card-info"]{
  height:54px!important;min-height:54px!important;max-height:none!important;
  margin:0!important;overflow:visible;
}
.hdm-cc .place .ppcp-button-apm,
.hdm-cc .place .ppcp-button-rect{overflow:visible;min-height:0}

/* ---------- narrow screens ---------- */
@container (max-width:620px){
  /* 4. the design's 32px page margin is too generous on a phone.
     Note this sets the padding on the descendants rather than redefining --edge
     on .hdm-cc: .hdm-cc IS the query container, and a container query cannot
     style the element it is querying, so changing the token there does nothing. */
  .hdm-cc .wrap{padding-left:16px;padding-right:16px}
  .hdm-cc .trust-band > .wrap,
  .hdm-cc .done-hero > .wrap{padding-left:16px;padding-right:16px}

  /* 3. the step tracker said only "2 Checkout" between two bare numbers.
     The prototype hides every label except the current step, which works when
     the steps are numbered on their own but not when the customer needs to know
     what they just left and what comes next. Specificity has to beat
     `.hdm-cc .steps li span.lbl{display:none}` (0,3,2). */
  .hdm-cc .steps li span.lbl{display:inline;font-size:11.5px}
  .hdm-cc .steps ol{gap:5px;flex-wrap:nowrap;justify-content:space-between}
  .hdm-cc .steps li{font-size:11.5px;gap:5px;min-width:0}
  .hdm-cc .steps .bar{width:auto;flex:1 1 8px;min-width:8px}
  .hdm-cc .steps .dot{width:21px;height:21px;font-size:11px;flex-shrink:0}

  /* 5. the payment rows: the gateway's marks sat on top of the title and the
     description wrapped underneath the radio. Give the row two columns and let
     the description span both. */
  /* Flex, not grid. The gateway's title is a bare text node between the radio
     and the mark images, so it cannot be addressed as a grid item - putting the
     images in column 2 landed them on top of the title. As flex items the title
     and the images share a row when they fit and the images wrap to their own
     line when they do not, which is what happens at phone widths. */
  .hdm-cc .wc_payment_methods > li.wc_payment_method > label{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
    padding:13px 14px;line-height:1.35;
  }
  .hdm-cc .wc_payment_methods > li input[type=radio]{flex:0 0 20px}
  .hdm-cc .wc_payment_methods > li.wc_payment_method > label img{
    max-height:22px;width:auto;margin:0 0 0 auto;
  }
  .hdm-cc .payment_box{font-size:13px}
  .hdm-cc #payment .payment_methods li .payment_box{padding:0 14px 14px 44px!important;font-size:13px}
}

/* ============================================================
   ROUND 5b - corrections to the block above
   These must come LAST. The rules they override were appended after the
   earlier media query, so at equal specificity source order was deciding it
   and the mobile block was losing.
   ============================================================ */

/* `page` is a class ON the module root (<div class="hdm-cc hdm-cc-checkout page">),
   not a descendant of it, so `.hdm-cc .page` never matched anything. */
body.hdm-cc-minimal .hdm-cc.page{padding-bottom:24px}

@media (max-width:860px){
  /* the label swap: exactly one of the two must be visible */
  .hdm-cc-chrome .hdm-cc-chrome-lbl-full{display:none}
  .hdm-cc-chrome .hdm-cc-chrome-lbl-short{display:inline}
  /* and the logo comes down to match the shorter bar */
  .hdm-cc-chrome .hdm-cc-chrome-logo-img,
  .hdm-cc-chrome .hdm-cc-chrome-logo svg{height:32px}
}
@media (min-width:861px){
  .hdm-cc-chrome .hdm-cc-chrome-lbl-full{display:inline}
  .hdm-cc-chrome .hdm-cc-chrome-lbl-short{display:none}
}

/* The wrappers add their own bottom padding under the page, which on a page with
   its own compact footer just reads as a dead band. Same treatment as the top. */
body.hdm-cc-minimal main.site-main,
body.hdm-cc-minimal .site-content,
body.hdm-cc-minimal .content-area,
body.hdm-cc-minimal .col-full,
body.hdm-cc-minimal .shoptimizer-archive,
body.hdm-cc-minimal .woocommerce,
body.hdm-cc-minimal .entry-content,
body.hdm-cc-minimal .elementor,
body.hdm-cc-minimal .elementor .elementor-element,
body.hdm-cc-minimal .elementor .e-con-inner{
  padding-bottom:0!important;margin-bottom:0!important;
}

/* ---------- the place-order block's spacing ---------- */
/* .place holds around a dozen children, most of them zero-height: a <noscript>,
   several hidden <input>s (nonces, gateway tokens), the call button, and one
   empty wrapper per gateway that has not rendered. Spacing them with a blanket
   margin-bottom - or with flex gap, which behaves the same way - gave each of
   those invisible items 12px, stacking up as a large dead band above and below
   the order button depending on which gateway was selected.
   So nothing carries spacing by default; only the four elements that are always
   visible do, and the gap below the button comes from .fine's top margin. That
   holds whether the button is ours, PayPal's or Google Pay's. */
.hdm-cc .place{gap:0}
.hdm-cc .place > *{margin-top:0!important;margin-bottom:0!important}
.hdm-cc .place > .woocommerce-terms-and-conditions-wrapper{margin-bottom:8px!important}
.hdm-cc .place > .place-total{margin:0 2px 14px!important}
.hdm-cc .place > .fine{margin-top:12px!important}

/* ---------- delivery is reported, not chosen, at checkout ---------- */
/* The rows are read-only now, so nothing should look clickable. */
.hdm-cc .hdm-cc-delivery .opt-row.is-static{cursor:default}
.hdm-cc .hdm-cc-delivery .opt-row.is-static:hover{border-color:var(--hdm-green)}
.hdm-cc .deliv-change{
  display:flex;gap:8px;align-items:flex-start;margin:8px 2px 0;
  font-size:13px;color:var(--slate);line-height:1.45;
}
.hdm-cc .deliv-change svg{flex-shrink:0;margin-top:2px}
.hdm-cc .deliv-change a{color:var(--hdm-green-dk);font-weight:700;text-decoration:underline}
.hdm-cc .deliv-change a:hover{color:var(--hdm-green)}