/* ===========================================================================
   Hot Products USA - responsive layer
   ---------------------------------------------------------------------------
   This stylesheet is used ONLY by the new dealer-portal pages. It does not
   alter Style.css, so every existing page keeps rendering exactly as it does
   today.

   The visual language is lifted directly from the live site:
     #6282B5  nav blue / buttons        (Style.css .btn-system, _header.php)
     #42558b  body ink                  (Style.css .Body)
     #F6E51B  footer link yellow        (Style.css .Footer a)
     #000000  the 2px grid between nav cells
     Verdana  body copy                 (Style.css .Body)
     Geneva   nav labels, bold uppercase (Style.css .Menu_White)
   =========================================================================== */

:root{
  --nav-blue:#6282B5;
  --nav-blue-dark:#557397;
  --ink-blue:#42558b;
  --ink-deep:#0d2b4e;
  --foot-yellow:#F6E51B;
  --grid-black:#000000;
  --rule:#d7dee7;
  --rule-soft:#e2e8ee;
  --ground:#ffffff;
  --ground-alt:#f7f9fb;
  --muted:#7b8b9c;
  --ok:#1e6b41;
  --ok-bg:#dcefe2;
  --warn:#8a5a10;
  --warn-bg:#fdf0d5;
  --bad:#922b21;
  --bad-bg:#fbdcd9;
  --info:#14548f;
  --info-bg:#d6e9fb;
  --radius:5px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body.hp{
  margin:0;
  background:var(--ground);
  color:var(--ink-blue);
  font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1.55;
}

/* ---------- container ---------------------------------------------------- */
.hp-wrap{
  max-width:1060px;
  margin:0 auto;
  padding:0 22px;
}

/* Header band (utility strip + nav + masthead) is capped to the same width as
   the content column. Without this the nav grid stretches edge to edge on wide
   monitors and the masthead looks oversized next to the page body. */
.hp-head{
  max-width:1060px;
  margin:0 auto;
  /* The legacy pages do not all declare a page font: Style.css's body rule has
     no font-family at all, and only catalog.php adds one inline. Everywhere
     else the account strip therefore fell back to the browser default Times
     New Roman while the nav (which sets Geneva itself) looked correct. The
     header band now carries its own font so it renders identically on every
     page, whatever the page-level stylesheet does. */
  font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
}

/* ---------- navigation: the signature blue grid -------------------------- */
.hp-nav{
  background:var(--grid-black);
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:2px;
}
.hp-nav a,
.hp-nav .hp-navbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:34px;
  padding:7px 3px;
  background:var(--nav-blue);
  color:#fff;
  text-decoration:none;
  font-family:Geneva,Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:bold;
  text-transform:uppercase;
  line-height:1.25;
  white-space:nowrap;
  border:0;
  cursor:pointer;
}
.hp-nav a:hover,
.hp-nav .hp-navbtn:hover{ background:var(--nav-blue-dark); }
.hp-nav a.is-active{ background:var(--ink-deep); }

/* the hamburger is never a grid cell on desktop */
.hp-burger{ display:none; }

/* admin strip, mirrors the existing admin nav */
.hp-nav.admin{ grid-template-columns:repeat(8,minmax(0,1fr)); }

/* ---------- masthead ----------------------------------------------------- */
.hp-masthead{
  display:block;
  width:100%;
  height:auto;
  border:0;
}

/* ---------- page body ---------------------------------------------------- */
.hp-page{ padding:20px 0 30px; }

.hp-page h1{
  font-family:Verdana,Geneva,Arial,sans-serif;
  font-size:20px;
  line-height:1.3;
  color:var(--ink-deep);
  margin:0 0 6px;
  letter-spacing:-.2px;
}
.hp-page h2{
  font-family:Verdana,Geneva,Arial,sans-serif;
  font-size:15px;
  color:var(--ink-deep);
  margin:26px 0 8px;
  padding-bottom:5px;
  border-bottom:1px solid var(--rule);
}
.hp-page h3{
  font-size:13px;
  color:var(--ink-deep);
  margin:18px 0 6px;
}
.hp-lede{
  font-size:13px;
  color:var(--ink-blue);
  line-height:1.6;
  margin:0 0 20px;
  max-width:660px;
}
.hp-muted{ color:var(--muted); font-size:11.5px; }
.hp-page p{ margin:0 0 10px; }

/* ---------- breadcrumb --------------------------------------------------- */
.hp-crumb{
  font-size:11px;
  color:var(--muted);
  margin:0 0 12px;
}
.hp-crumb a{ color:var(--nav-blue); text-decoration:none; }
.hp-crumb a:hover{ text-decoration:underline; }

/* ---------- stepper ------------------------------------------------------ */
.hp-steps{
  display:flex;
  margin:0 0 22px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
}
.hp-steps .s{
  flex:1;
  padding:9px 6px;
  text-align:center;
  font-size:10.5px;
  line-height:1.3;
  color:var(--muted);
  background:var(--ground-alt);
  border-right:1px solid var(--rule-soft);
}
.hp-steps .s:last-child{ border-right:0; }
.hp-steps .s b{ display:block; font-size:11px; color:var(--ink-blue); }
.hp-steps .s.on{ background:var(--nav-blue); color:#fff; }
.hp-steps .s.on b{ color:#fff; }

/* ---------- cards / panels ---------------------------------------------- */
.hp-card{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:#fff;
  margin:0 0 16px;
  overflow:hidden;
}
.hp-card > .hd{
  background:var(--ground-alt);
  border-bottom:1px solid var(--rule-soft);
  padding:9px 14px;
  font-size:11.5px;
  font-weight:bold;
  color:var(--ink-deep);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.hp-card > .bd{ padding:14px; }

/* ---------- form -------------------------------------------------------- */
.hp-form fieldset{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:0 14px 14px;
  margin:0 0 18px;
  background:#fff;
}
.hp-form legend{
  font-size:11.5px;
  font-weight:bold;
  color:var(--ink-deep);
  text-transform:uppercase;
  letter-spacing:.4px;
  padding:0 6px;
}
.hp-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 16px;
}
.hp-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.hp-grid .full{ grid-column:1 / -1; }

.hp-field{ display:flex; flex-direction:column; min-width:0; }
.hp-field label{
  font-size:11px;
  font-weight:bold;
  color:var(--ink-deep);
  margin:0 0 4px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.hp-field label .req{ color:#b03a2e; }
.hp-field .hint{
  font-size:10.5px;
  color:var(--muted);
  margin:4px 0 0;
  font-weight:normal;
  text-transform:none;
  letter-spacing:0;
}
.hp-field input[type=text],
.hp-field input[type=email],
.hp-field input[type=tel],
.hp-field input[type=url],
.hp-field input[type=number],
.hp-field input[type=date],
.hp-field input[type=password],
.hp-field select,
.hp-field textarea{
  width:100%;
  font-family:Verdana,Geneva,Arial,sans-serif;
  font-size:14px;
  color:var(--ink-blue);
  background:#fff;
  border:1px solid #b9c5d3;
  border-radius:3px;
  padding:8px 9px;
  min-height:38px;
  line-height:1.4;
}
.hp-field textarea{ min-height:84px; resize:vertical; }
.hp-field input:focus,
.hp-field select:focus,
.hp-field textarea:focus{
  outline:2px solid rgba(98,130,181,.45);
  outline-offset:0;
  border-color:var(--nav-blue);
}
.hp-field input:disabled,
.hp-field select:disabled{ background:#f1f4f7; color:#8b98a6; }

/* radio / checkbox groups */
.hp-choice{ display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:2px; }
.hp-choice label{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:normal; text-transform:none;
  letter-spacing:0; color:var(--ink-blue); margin:0; cursor:pointer;
}
.hp-choice input[type=radio],
.hp-choice input[type=checkbox]{ width:16px; height:16px; margin:0; }

.hp-ack{
  display:flex; gap:9px; align-items:flex-start;
  font-size:12px; color:var(--ink-blue); margin:0 0 10px; line-height:1.5;
}
.hp-ack input{ width:17px; height:17px; margin:1px 0 0; flex:none; }

/* ---------- buttons ----------------------------------------------------- */
.hp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:10px 20px;
  border:1px solid var(--nav-blue);
  border-radius:3px;
  background:var(--nav-blue);
  color:#fff;
  font-family:Verdana,Geneva,Arial,sans-serif;
  font-size:12px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.1) inset;
}
.hp-btn:hover{ background:var(--nav-blue-dark); border-color:var(--nav-blue-dark); }
.hp-btn:active{ box-shadow:inset 0 2px 4px rgba(0,0,0,.25); }
.hp-btn.ghost{
  background:#fff; color:var(--ink-blue); border-color:#b9c5d3; box-shadow:none;
}
.hp-btn.ghost:hover{ background:var(--ground-alt); border-color:var(--nav-blue); color:var(--ink-deep); }
.hp-btn.danger{ background:#b03a2e; border-color:#b03a2e; }
.hp-btn.danger:hover{ background:#922b21; border-color:#922b21; }
.hp-btn.ok{ background:#2e7d52; border-color:#2e7d52; }
.hp-btn.ok:hover{ background:#256343; border-color:#256343; }
.hp-btn.sm{ min-height:30px; padding:6px 12px; font-size:10.5px; }
.hp-btn:disabled{ opacity:.55; cursor:not-allowed; }

.hp-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:20px 0 0;
  padding-top:16px;
  border-top:1px solid var(--rule);
}
.hp-actions .spacer{ flex:1 1 auto; }

/* ---------- tables that become cards on a phone ------------------------- */
.hp-t{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  background:#fff;
}
.hp-t thead th{
  background:var(--ink-deep);
  color:#fff;
  text-align:left;
  padding:8px 10px;
  font-size:10.5px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.4px;
  white-space:nowrap;
}
.hp-t tbody td{
  padding:8px 10px;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
}
.hp-t tbody tr:nth-child(even) td{ background:var(--ground-alt); }
.hp-t tbody tr:hover td{ background:#eef3f9; }
.hp-t td.num{ text-align:right; white-space:nowrap; }
.hp-t td.act{ white-space:nowrap; text-align:right; }
.hp-t .empty{ text-align:center; color:var(--muted); padding:22px 10px; }

/* ---------- status chips ------------------------------------------------ */
.hp-chip{
  display:inline-block;
  padding:2px 8px;
  border-radius:10px;
  font-size:9.5px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space:nowrap;
}
.hp-chip.pending{ background:var(--warn-bg); color:var(--warn); }
.hp-chip.in_review{ background:var(--info-bg); color:var(--info); }
.hp-chip.info_needed{ background:#fdeacd; color:#8a5a10; }
.hp-chip.approved{ background:var(--ok-bg); color:var(--ok); }
.hp-chip.rejected{ background:var(--bad-bg); color:var(--bad); }
.hp-chip.submitted{ background:var(--info-bg); color:var(--info); }
.hp-chip.confirmed{ background:var(--warn-bg); color:var(--warn); }
.hp-chip.shipped{ background:var(--ok-bg); color:var(--ok); }
.hp-chip.cancelled{ background:#e8ebee; color:#5b6875; }
.hp-chip.active{ background:var(--ok-bg); color:var(--ok); }
.hp-chip.suspended{ background:var(--bad-bg); color:var(--bad); }

/* ---------- key/value summary grid -------------------------------------- */
.hp-kv{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 20px;
  margin:0;
}
.hp-kv > div{ min-width:0; }
.hp-kv dt{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--muted);
  margin:0 0 2px;
}
.hp-kv dd{
  margin:0;
  font-size:12.5px;
  color:var(--ink-blue);
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* ---------- stat tiles -------------------------------------------------- */
.hp-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 20px;
}
.hp-stat{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--ground-alt);
  padding:10px 12px;
}
.hp-stat .n{
  font-size:22px;
  font-weight:bold;
  color:var(--ink-deep);
  line-height:1.15;
}
.hp-stat .l{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
}

/* ---------- notices ----------------------------------------------------- */
.hp-note{
  border-left:4px solid var(--nav-blue);
  background:#f3f7fc;
  padding:10px 13px;
  margin:0 0 16px;
  font-size:12px;
  line-height:1.55;
  color:var(--ink-blue);
}
.hp-note.ok{ border-left-color:#2e7d52; background:#f0f8f2; }
.hp-note.warn{ border-left-color:#d98b1f; background:#fdf6ec; }
.hp-note.bad{ border-left-color:#c0392b; background:#fdf0ef; }
.hp-note b{ color:var(--ink-deep); }

.hp-err{
  border:1px solid #e6b8b2;
  background:#fdf0ef;
  border-radius:var(--radius);
  padding:10px 13px;
  margin:0 0 16px;
  font-size:12px;
  color:var(--bad);
}
.hp-err ul{ margin:6px 0 0; padding-left:18px; }
.hp-err li{ margin:0 0 3px; }

.hp-ok{
  border:1px solid #b8dcc4;
  background:#f0f8f2;
  border-radius:var(--radius);
  padding:12px 14px;
  margin:0 0 16px;
  font-size:12.5px;
  color:var(--ok);
}

/* ---------- file drop --------------------------------------------------- */
.hp-drop{
  border:2px dashed #b9c5d3;
  border-radius:var(--radius);
  background:var(--ground-alt);
  padding:18px 14px;
  text-align:center;
  font-size:11.5px;
  color:var(--muted);
}
.hp-drop strong{ display:block; color:var(--ink-blue); font-size:12px; margin-bottom:3px; }
.hp-drop input[type=file]{
  display:block;
  margin:8px auto 0;
  font-size:11px;
  max-width:100%;
}
.hp-drop.has-file{ border-color:#2e7d52; background:#f0f8f2; color:var(--ok); }

/* ---------- footer ------------------------------------------------------ */
.hp-foot{
  background:var(--nav-blue);
  color:#fff;
  text-align:center;
  padding:14px 16px;
  font-size:10.5px;
  line-height:1.6;
  margin-top:34px;
}
.hp-foot a{ color:var(--foot-yellow); text-decoration:none; }
.hp-foot a:hover{ text-decoration:underline; }

/* ---------- pagination -------------------------------------------------- */
.hp-pager{ display:flex; gap:6px; align-items:center; margin:14px 0 0; flex-wrap:wrap; font-size:11.5px; }
.hp-pager a,.hp-pager span{
  display:inline-block; padding:5px 10px; border:1px solid var(--rule);
  border-radius:3px; text-decoration:none; color:var(--ink-blue); background:#fff;
}
.hp-pager a:hover{ background:var(--ground-alt); border-color:var(--nav-blue); }
.hp-pager .cur{ background:var(--nav-blue); color:#fff; border-color:var(--nav-blue); }

/* ---------- toolbar ----------------------------------------------------- */
.hp-toolbar{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--ground-alt);
}
.hp-toolbar .hp-field{ flex:0 1 190px; }
.hp-toolbar .hp-field label{ font-size:10px; }

/* ---------- login card -------------------------------------------------- */
.hp-auth{
  max-width:400px;
  margin:34px auto 0;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
}
.hp-auth .hd{
  background:var(--nav-blue);
  color:#fff;
  padding:12px 16px;
  font-size:12px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.hp-auth .bd{ padding:18px 16px; }

/* ===========================================================================
   BREAKPOINTS
   =========================================================================== */

/* --- tablet ------------------------------------------------------------- */
@media (max-width:860px){
  .hp-wrap{ padding:0 16px; }
  .hp-page h1{ font-size:18px; }
  .hp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp-grid.three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --- phone -------------------------------------------------------------- */
@media (max-width:760px){

  body.hp{ font-size:14px; }

  .hp-wrap{ padding:0 14px; }

  /* nav collapses to a single full-width menu bar */
  .hp-nav{
    grid-template-columns:1fr;
    gap:1px;
  }
  .hp-nav a,
  .hp-nav .hp-navbtn{ display:none; }
  .hp-nav a.show,
  .hp-nav .hp-navbtn.show{
    display:flex;
    justify-content:flex-start;
    padding:13px 16px;
    font-size:13px;
    min-height:46px;
    white-space:normal;
    text-align:left;
  }
  .hp-burger{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--nav-blue);
    color:#fff;
    padding:12px 16px;
    min-height:46px;
    cursor:pointer;
    border:0;
    width:100%;
    font-family:Geneva,Arial,sans-serif;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .hp-burger .ico{ font-size:19px; line-height:1; }


  /* The admin strip has no hamburger of its own. Rather than hiding it
     outright on a phone (which strands admins on whatever page they landed
     on), let it scroll horizontally as a compact row of tabs. */
  .hp-head{ max-width:100%; }
  /* The admin strip has no hamburger of its own. Hiding it outright would
     strand admins on whatever page they landed on, so it wraps into a few
     rows of compact tabs instead. Wrapping (rather than a horizontal
     scroller) keeps the min-content width small, which stops the legacy
     layout table from stretching past the viewport. */
  .hp-nav.admin{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
    width:100%;
    max-width:100%;
  }
  .hp-nav.admin a{
    display:flex !important;
    flex:1 1 auto;
    justify-content:center;
    padding:9px 10px;
    min-height:40px;
    font-size:11px;
    white-space:nowrap;
  }

  /* type scales up - 10px Verdana is unreadable on a phone */
  .hp-page{ padding:16px 0 24px; }
  .hp-page h1{ font-size:19px; }
  .hp-page h2{ font-size:14.5px; }
  .hp-lede{ font-size:13.5px; }

  /* stepper becomes a compact progress line */
  .hp-steps{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hp-steps .s{ flex:0 0 auto; min-width:92px; padding:8px 10px; font-size:10px; }

  /* forms go single column, 16px inputs to stop iOS auto-zoom */
  .hp-grid,
  .hp-grid.three{ grid-template-columns:1fr; gap:14px; }
  .hp-form fieldset{ padding:0 12px 14px; }
  .hp-field input[type=text],
  .hp-field input[type=email],
  .hp-field input[type=tel],
  .hp-field input[type=url],
  .hp-field input[type=number],
  .hp-field input[type=date],
  .hp-field input[type=password],
  .hp-field select,
  .hp-field textarea{
    font-size:16px;      /* <-- prevents the iOS focus zoom */
    min-height:46px;
    padding:10px 11px;
  }
  .hp-field label{ font-size:11.5px; }
  .hp-choice{ gap:10px 16px; }
  .hp-choice label{ font-size:13px; min-height:34px; }
  .hp-ack{ font-size:12.5px; }
  .hp-ack input{ width:20px; height:20px; }

  /* buttons full width and thumb-sized */
  .hp-btn{
    width:100%;
    min-height:48px;
    font-size:12.5px;
    padding:12px 16px;
  }
  .hp-btn.sm{ width:auto; min-height:38px; padding:8px 14px; font-size:11px; }
  .hp-actions{ flex-direction:column-reverse; gap:9px; }
  .hp-actions .spacer{ display:none; }
  .hp-actions > *{ width:100%; }
  .hp-actions .hp-btn.sm{ width:100%; }

  /* tables become stacked cards */
  .hp-t thead{ display:none; }
  .hp-t,
  .hp-t tbody,
  .hp-t tr,
  .hp-t td{ display:block; width:100%; }
  .hp-t tr{
    border:1px solid var(--rule);
    border-radius:6px;
    margin:0 0 10px;
    padding:4px 0;
    background:#fff;
  }
  .hp-t tbody tr:nth-child(even) td,
  .hp-t tbody tr:hover td{ background:transparent; }
  .hp-t tbody tr:nth-child(even){ background:var(--ground-alt); }
  .hp-t tbody td{
    border:0;
    padding:6px 12px;
    text-align:left;
    white-space:normal;
  }
  .hp-t tbody td:before{
    content:attr(data-l);
    display:block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--muted);
    margin-bottom:1px;
  }
  .hp-t td.num,
  .hp-t td.act{ text-align:left; }
  .hp-t .empty{ padding:18px 12px; }

  /* summary grid to one column */
  .hp-kv{ grid-template-columns:1fr; gap:9px; }
  .hp-kv dd{ font-size:13.5px; }

  .hp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hp-stat .n{ font-size:20px; }

  .hp-toolbar{ flex-direction:column; align-items:stretch; gap:10px; }
  .hp-toolbar .hp-field{ flex:1 1 auto; }
  .hp-toolbar .hp-btn{ width:100%; }

  .hp-auth{ margin:18px auto 0; max-width:none; }
  .hp-foot{ font-size:11px; padding:14px 12px; margin-top:26px; }

  .hp-card > .bd{ padding:12px; }
}

/* --- very small phone --------------------------------------------------- */
@media (max-width:380px){
  .hp-wrap{ padding:0 11px; }
  .hp-page h1{ font-size:17.5px; }
  .hp-stats{ grid-template-columns:1fr; }
}

/* --- print -------------------------------------------------------------- */
@media print{
  .hp-nav,.hp-burger,.hp-foot,.hp-actions,.hp-toolbar{ display:none !important; }
  body.hp{ font-size:10pt; }
  .hp-card{ break-inside:avoid; }
}

/* ---------- heading aliases --------------------------------------------- */
/* pages use .hp-h1/.hp-h2 so headings can be styled without touching h1/h2 */
.hp-h1{
  font-family:Verdana,Geneva,sans-serif;
  font-size:21px; line-height:1.25; font-weight:bold;
  color:var(--ink); margin:0 0 6px; letter-spacing:-.2px;
}
.hp-h2{
  font-family:Verdana,Geneva,sans-serif;
  font-size:14px; line-height:1.3; font-weight:bold;
  color:var(--ink); margin:0 0 10px;
  padding-bottom:7px; border-bottom:1px solid var(--rule);
}
.hp-card > .hp-h2:first-child{ margin-top:0; }

/* ---------- toolbar right-hand action group ----------------------------- */
.hp-toolbar-actions{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-left:auto;
}

/* ---------- repeating order line rows ----------------------------------- */
.hp-line{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) 92px minmax(0,1.4fr) 34px;
  gap:9px; align-items:end;
  padding:10px 0;
  border-bottom:1px dashed var(--rule);
}
.hp-line:last-child{ border-bottom:0; }
.hp-line .hp-field{ margin:0; }
.hp-line .hp-qty input{ text-align:center; }
.hp-line .hp-del{
  width:34px; min-width:34px; height:38px; padding:0;
  font-size:17px; line-height:1;
}

@media (max-width:760px){
  .hp-line{
    grid-template-columns:minmax(0,1fr) 78px;
    gap:8px;
    padding:12px 0;
  }
  .hp-line .hp-field:nth-child(3){ grid-column:1 / -1; }
  .hp-line .hp-del{ grid-column:2; grid-row:1; justify-self:end; width:38px; min-width:38px; height:46px; }
  .hp-toolbar-actions{ margin-left:0; width:100%; }
  .hp-toolbar-actions .hp-btn{ width:100%; }
  .hp-h1{ font-size:19px; }
}
@media (max-width:380px){
  .hp-h1{ font-size:17.5px; }
  .hp-line{ grid-template-columns:minmax(0,1fr) 68px; }
}