/* Hapi · Hộp mua hàng */
.hp-buy {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-s, 1rem);
  padding: var(--hp-space-l, 2rem);
  background: var(--hp-paper, #fffdf7);
  border: 1px solid var(--hp-line, #eadfc8);
  border-radius: var(--hp-radius-l, 20px);
  box-shadow: var(--hp-shadow-m);
  color: var(--hp-ink, #1f2a24);
}
.hp-buy__icon { flex: 0 0 auto; width: 20px; height: 20px; }

.hp-buy__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--hp-space-2xs) var(--hp-space-xs); }
.hp-buy__price { margin: 0; font-size: var(--hp-text-3xl); font-weight: 700; line-height: 1.1; color: var(--hp-red, #c62828); letter-spacing: -0.01em; }
.hp-buy__price .woocommerce-Price-currencySymbol { font-size: 0.6em; vertical-align: 0.35em; margin-left: 0.1em; }
.hp-buy__regular { color: var(--hp-text); font-size: var(--hp-text-l); }
.hp-buy__badge { padding: 0.2em 0.6em; border-radius: var(--hp-radius-pill); background: var(--hp-red); color: #fff; font-size: var(--hp-text-s); font-weight: 600; }
.hp-buy__unit { margin: calc(var(--hp-space-xs) * -1) 0 0; color: var(--hp-text); font-size: var(--hp-text-s); }
.hp-buy [hidden] { display: none !important; }

.hp-buy__form { display: flex; flex-direction: column; gap: var(--hp-space-s); margin: 0; }
.hp-buy__options { margin: 0; padding: 0; border: 0; min-width: 0; }
.hp-buy__label { margin: 0 0 var(--hp-space-2xs); padding: 0; font-size: var(--hp-text-s); font-weight: 600; color: var(--hp-green, #0f5132); }
.hp-buy__chips { display: flex; flex-wrap: wrap; gap: var(--hp-space-2xs); }
.hp-buy__chip { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.5rem; min-height: var(--hp-tap, 44px); padding: 0.45rem 1rem; border: 1.5px solid var(--hp-line); border-radius: var(--hp-radius-s, 12px); background: #fff; cursor: pointer; transition: border-color var(--hp-dur-fast) var(--hp-ease), background-color var(--hp-dur-fast) var(--hp-ease), box-shadow var(--hp-dur-fast) var(--hp-ease); }
.hp-buy__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hp-buy__chip-label { font-weight: 600; line-height: 1.2; color: var(--hp-ink); }
.hp-buy__chip-save { margin-top: 2px; font-size: var(--hp-text-xs); font-weight: 600; color: var(--hp-green); }
.hp-buy__chip:hover { border-color: var(--hp-sage, #a7c4a0); }
.hp-buy__chip:has(input:checked) .hp-buy__chip-label { color: var(--hp-green); }
.hp-buy__chip:has(input:checked) { border-color: var(--hp-green); background: var(--hp-green-soft, #e4eee3); box-shadow: inset 0 0 0 1px var(--hp-green); }
.hp-buy__chip:has(input:focus-visible) { outline: 2px solid var(--hp-green); outline-offset: 2px; }
.hp-buy__chip.is-out { opacity: 0.5; cursor: not-allowed; }
.hp-buy__chip.is-out .hp-buy__chip-label { text-decoration: line-through; }

.hp-buy__actions { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--hp-space-xs); }
.hp-buy__qty { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--hp-line); border-radius: var(--hp-radius-pill); background: #fff; overflow: hidden; }
.hp-buy__step { display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; background: none; color: var(--hp-green); cursor: pointer; }
.hp-buy__step:hover { background: var(--hp-green-soft); }
.hp-buy__qty-input { width: 2.75rem; height: 100%; padding: 0; border: 0 !important; background: none !important; text-align: center; font: inherit; font-weight: 600; color: var(--hp-ink); -moz-appearance: textfield; box-shadow: none !important; }
.hp-buy__qty-input::-webkit-outer-spin-button, .hp-buy__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hp-buy__cart, .hp-buy__now { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0 1.5rem; border-radius: var(--hp-radius-pill); font: inherit; font-weight: 600; font-size: var(--hp-text-m); cursor: pointer; transition: transform var(--hp-dur-fast) var(--hp-ease), background-color var(--hp-dur-fast) var(--hp-ease), box-shadow var(--hp-dur-fast) var(--hp-ease); }
.hp-buy__cart { white-space: nowrap; border: 0; background: var(--hp-red, #c62828); color: #fff; box-shadow: var(--hp-shadow-cta); }
.hp-buy__cart:hover { background: var(--hp-red-dark, #a11f1f); transform: translateY(-1px); }
.hp-buy__now { white-space: nowrap; border: 1.5px solid var(--hp-green); background: transparent; color: var(--hp-green); }
.hp-buy__now:hover { background: var(--hp-green); color: #fff; }
.hp-buy__cart:focus-visible, .hp-buy__now:focus-visible, .hp-buy__step:focus-visible { outline: 2px solid var(--hp-green); outline-offset: 2px; }
.hp-buy.is-busy .hp-buy__cart, .hp-buy.is-busy .hp-buy__now { opacity: 0.7; pointer-events: none; }
.hp-buy.is-added .hp-buy__cart { background: var(--hp-green); box-shadow: none; }

.hp-buy__status { margin: 0; min-height: 1.25em; font-size: var(--hp-text-s); color: var(--hp-green); }
.hp-buy__status:empty { min-height: 0; }
.hp-buy__soldout { margin: 0; padding: var(--hp-space-xs) var(--hp-space-s); border-radius: var(--hp-radius-s); background: var(--hp-gold-soft, #fbf1d9); color: var(--hp-brown, #8b5e3c); }

.hp-buy__zalo { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; color: var(--hp-green); font-size: var(--hp-text-s); font-weight: 600; text-decoration: none; }
.hp-buy__zalo:hover span { text-decoration: underline; text-underline-offset: 3px; }

.hp-buy__assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hp-space-xs); margin: var(--hp-space-2xs) 0 0; padding: var(--hp-space-s) 0 0; border-top: 1px dashed var(--hp-line); list-style: none; }
.hp-buy__assure-item { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; }
.hp-buy__assure-item .hp-buy__icon { margin-top: 2px; color: var(--hp-green); }
.hp-buy__assure-item strong { display: block; font-size: var(--hp-text-s); line-height: 1.3; color: var(--hp-ink); }
.hp-buy__assure-item small { display: block; font-size: var(--hp-text-xs); line-height: 1.4; color: var(--hp-text); }

.hp-buy__sticky { display: none; }
@media (max-width: 1100px) {
  .hp-buy__actions { grid-template-columns: auto minmax(0, 1fr); }
  .hp-buy__now { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hp-buy { padding: var(--hp-space-m); }
  .hp-buy__cart, .hp-buy__now { padding: 0 1rem; }
  .hp-buy__sticky:not([hidden]) { position: fixed; inset: auto 0 0 0; z-index: 90; display: flex; align-items: center; gap: var(--hp-space-xs); padding: 0.6rem var(--hp-gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: var(--hp-paper); border-top: 1px solid var(--hp-line); box-shadow: 0 -8px 24px -16px rgba(31, 42, 36, 0.35); transform: translateY(110%); transition: transform var(--hp-dur) var(--hp-ease); }
  .hp-buy__sticky.is-visible { transform: none; }
  .hp-buy__sticky-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .hp-buy__sticky-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--hp-text-s); color: var(--hp-text); }
  .hp-buy__sticky-price { font-weight: 700; color: var(--hp-red); }
  .hp-buy__sticky .hp-buy__cart { min-height: 46px; padding: 0 1.25rem; }
}
@media (max-width: 520px) {
  .hp-buy__assure { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .hp-buy__actions .hp-buy__cart .hp-buy__icon { display: none; }
  .hp-buy__step { width: 38px; }
  .hp-buy__qty-input { width: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-buy *, .hp-buy__sticky { transition: none !important; }
}