/* „Заключи цената“ (homemart-price-lock).
   Calm and trustworthy: white surface, one deep green accent for "secured" and for the amount paid now.
   Red stays reserved for the shop's own buttons and for real errors. */
.hm-pl-box, .hm-pl-summary, .hm-pl-consent, .hm-pl-bank-note, .hm-pl-dropped, .hm-pl-service, .hm-pl-qty-note {
  --pl-ink: #1f2a27; --pl-muted: #5d6b67; --pl-line: #d9e2df; --pl-surface: #fff; --pl-tint: #f4f8f6;
  --pl-accent: #0b6e57; --pl-accent-hover: #08584a; --pl-accent-soft: #e5f2ed; --pl-error: #c8102e;
  color: var(--pl-ink); line-height: 1.45;
}
.hm-pl-icon { width: 40px; height: 40px; flex: none; }

/* ───────── Product box (compact: one line + „Как работи?“) ─────────
   It draws the eye without shouting: it fades in, a soft light sweeps across it and the padlock „clicks“ every 7 s.
   No motion for visitors who ask for reduced motion. */
.hm-pl-box { position: relative; overflow: hidden; margin: 12px 0; padding: 10px 12px; border: 1px solid #c9e2d6; border-radius: 10px;
  background: linear-gradient(120deg, #f2f9f5 0%, #e3f2ea 100%); font-size: 14px; display: grid; gap: 6px;
  box-shadow: 0 1px 2px rgba(16, 40, 33, .05); animation: hm-pl-in .5s ease-out both; }
.hm-pl-box::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%);
  transform: translateX(-110%); animation: hm-pl-shine 7s ease-in-out 1.2s infinite; }
.hm-pl-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.hm-pl-row .hm-pl-icon { width: 34px; height: 34px; transform-origin: 50% 85%; animation: hm-pl-click 7s ease-in-out 1.6s infinite; }
.hm-pl-text { flex: 1; min-width: 0; }
.hm-pl-headline { font-weight: 700; font-size: 15px; line-height: 1.25; }
.hm-pl-sub { color: var(--pl-muted); font-size: 13px; line-height: 1.3; }
.hm-pl-sub b { color: var(--pl-accent); }
.hm-pl-button { flex: none; appearance: none; border: 0; border-radius: 8px; padding: 9px 16px; background: var(--pl-accent); color: #fff;
  font: inherit; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .15s;
  animation: hm-pl-pulse 7s ease-out 1.9s infinite; }
.hm-pl-button:hover { background: var(--pl-accent-hover); transform: translateY(-1px); }
.hm-pl-button:focus-visible { outline: 3px solid rgba(11, 110, 87, .35); outline-offset: 2px; }
.hm-pl-button[disabled] { opacity: .6; cursor: progress; }
.hm-pl-chips, .hm-pl-more, .hm-pl-error { position: relative; z-index: 1; padding-left: 44px; }
.hm-pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-pl-chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--pl-line); border-radius: 999px; background: var(--pl-surface); font-weight: 400; font-size: 13px; cursor: pointer; }
.hm-pl-chip input { margin: 0; accent-color: var(--pl-accent); }
.hm-pl-chip:has(input:checked) { border-color: var(--pl-accent); color: var(--pl-accent); font-weight: 600; }
.hm-pl-badge { padding: 1px 7px; border-radius: 999px; background: var(--pl-accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; }
.hm-pl-more { font-size: 13px; }
.hm-pl-more summary { cursor: pointer; color: var(--pl-accent); font-weight: 600; width: max-content; list-style: none; }
.hm-pl-more summary::-webkit-details-marker { display: none; }
.hm-pl-more summary::after { content: " ▾"; }
.hm-pl-more[open] summary::after { content: " ▴"; }
.hm-pl-points { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 4px; color: var(--pl-ink); }
.hm-pl-points li { position: relative; padding-left: 22px; }
.hm-pl-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.hm-pl-points li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 8px; border: solid var(--pl-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hm-pl-error { color: var(--pl-error); font-size: 13px; }
.hm-pl-qty-hint { position: relative; z-index: 1; padding-left: 44px; font-size: 13px; color: #8a5a00; }
.hm-pl-qty-hint[hidden] { display: none; }
.hm-pl-error:empty { display: none; }
@keyframes hm-pl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hm-pl-shine { 0% { transform: translateX(-110%); } 16%, 100% { transform: translateX(110%); } }
@keyframes hm-pl-click { 0%, 14%, 100% { transform: none; } 3% { transform: rotate(-12deg) scale(1.15); } 6% { transform: rotate(9deg) scale(1.15); } 9% { transform: rotate(-4deg) scale(1.06); } 11% { transform: scale(1); } }
@keyframes hm-pl-pulse { 0% { box-shadow: 0 0 0 0 rgba(11, 110, 87, .45); } 14% { box-shadow: 0 0 0 9px rgba(11, 110, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(11, 110, 87, 0); } }
@media (prefers-reduced-motion: reduce) { .hm-pl-box, .hm-pl-box::after, .hm-pl-row .hm-pl-icon, .hm-pl-button { animation: none; } .hm-pl-box::after { display: none; } }
@media (max-width: 420px) { .hm-pl-button { padding: 8px 11px; font-size: 13px; } .hm-pl-sub { font-size: 12px; } }

/* ───────── Cart and checkout summary ───────── */
.hm-pl-summary { margin: 0 0 18px; padding: 18px; border: 1px solid var(--pl-line); border-radius: 12px; background: var(--pl-surface);
  box-shadow: 0 1px 2px rgba(16, 40, 33, .05), 0 6px 18px rgba(16, 40, 33, .06); display: grid; gap: 14px; }
.hm-pl-summary-head { display: flex; align-items: center; gap: 12px; }
.hm-pl-summary-icon { width: 44px; height: 44px; flex: none; }
.hm-pl-summary-title { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.hm-pl-summary-sub { color: var(--pl-muted); font-size: 14px; }
.hm-pl-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--pl-line); border-radius: 10px; overflow: hidden; }
.hm-pl-part { padding: 12px 14px; min-width: 0; }
.hm-pl-part + .hm-pl-part { border-left: 1px solid var(--pl-line); }
.hm-pl-part-label { color: var(--pl-muted); font-size: 12px; letter-spacing: .02em; }
.hm-pl-part-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-pl-part-now { background: var(--pl-accent-soft); }
.hm-pl-part-now .hm-pl-part-label { color: var(--pl-accent); font-weight: 600; }
.hm-pl-part-now .hm-pl-part-value { color: var(--pl-accent); font-size: 22px; }
.hm-pl-summary-foot { color: var(--pl-muted); font-size: 13px; display: grid; gap: 2px; }
@media (max-width: 600px) {
  .hm-pl-parts { grid-template-columns: 1fr; }
  .hm-pl-part { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .hm-pl-part + .hm-pl-part { border-left: 0; border-top: 1px solid var(--pl-line); }
  .hm-pl-part-now { order: -1; }
}

/* ───────── Totals rows ───────── */
tr.hm-pl-row-advance > td { background: #e5f2ed !important; color: #0b6e57; font-weight: 700; }
tr.hm-pl-row-advance > td:last-child { font-size: 1.12em; white-space: nowrap; }
.hm-pl-row-icon { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
.hm-pl-row-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #0b6e57; color: #fff; font-size: 10px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
tr.hm-pl-row-rest > td { color: #5d6b67; }

/* ───────── Checkout consent ───────── */
.hm-pl-consent { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--pl-line); border-radius: 10px; background: var(--pl-tint); }
.hm-pl-consent label { display: flex; gap: 10px; align-items: flex-start; font-family: inherit; font-weight: 600; margin: 0; cursor: pointer; }
.hm-pl-consent input { flex: none; margin-top: 3px; width: 18px; height: 18px; accent-color: #0b6e57; }
.hm-pl-consent-icon { width: 22px; height: 22px; flex: none; }
.hm-pl-consent.has-error { border-color: var(--pl-error); background: #fff5f6; }
.hm-pl-consent-error { margin: 6px 0 0 28px; font-size: 13px; }
.hm-pl-consent-error:empty { display: none; }

/* ───────── Bank-transfer note ───────── */
.hm-pl-bank-note { margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--pl-accent-soft); border: 1px solid #bfdccf; font-size: 14px; }
.hm-pl-bank-note b { color: var(--pl-accent); }

/* ───────── Price lock removed by a normal add-to-cart ───────── */
.hm-pl-dropped { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--pl-line); border-radius: 10px; background: var(--pl-tint); font-size: 14px; }

/* ───────── Checkout „Включени услуги“: the price lock as a pre-selected service, same look as the delivery row ───────── */
.hm-pl-service { display: flex; margin-top: 4px; }
.hm-pl-service::before { display: none !important; } /* Journal3 puts its delivery icon on every row of this section */
.hm-pl-service-icon { width: 30px; flex: none; }
.hm-pl-service-img { width: 22px; height: 22px; display: block; }
.hm-pl-service-body { min-width: 0; }
.hm-pl-service .radio { display: inline-flex; margin: 0; }
.hm-pl-service input { pointer-events: none; }
.hm-pl-service label { cursor: default; align-items: flex-start; }
.hm-pl-service label input { margin-top: 4px; }
.hm-pl-service-remove, .hm-pl-service-yes, .hm-pl-service-no { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; cursor: pointer; }
.hm-pl-service-remove { display: block; margin: 0 0 0 20px; color: #777; text-decoration: underline; }
.hm-pl-service-remove[hidden], .hm-pl-service-ask[hidden] { display: none; }
.hm-pl-service-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0 20px; padding: 8px 10px; border-radius: 6px; background: #f4f4f4; font-size: 13px; color: #333; }
.hm-pl-service-ask span { flex-basis: 100%; }
.hm-pl-service-yes { color: #c8102e; font-weight: 700; font-size: 13px; }
.hm-pl-service-no { color: #333; font-weight: 700; font-size: 13px; }

/* ───────── Price-lock cart: 1 piece ───────── */
.hm-pl-qty-one { display: inline-block; padding: 6px 10px; font-weight: 600; white-space: nowrap; }
.hm-pl-qty-note { margin: 8px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--pl-tint); border: 1px solid var(--pl-line); font-size: 13px; color: var(--pl-ink); }