/* Quantity offers - "Packs" design (product pages with packs only). */
.hx-packs { --pk-on: #4caf50; --pk-save: #1b7a3a; --pk-badge: #0d47a1; display: grid; gap: 16px; margin: 6px 0 20px; }
.hx-packs .hx-packs__t { margin: 0; color: var(--hx-ink, #111); font-size: 16px; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.hx-packs .hx-pack { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 2px solid #e2e8f0; border-radius: 16px; background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.hx-packs .hx-pack:not(:has(.hx-pack__img)) { grid-template-columns: minmax(0, 1fr) auto; }
.hx-packs .hx-pack:hover { border-color: color-mix(in srgb, var(--pk-on) 55%, #e2e8f0); }
.hx-packs .hx-pack.is-on { border-color: var(--pk-on); background: color-mix(in srgb, var(--pk-on) 16%, #fff); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--pk-on) 80%, transparent); }
.hx-packs .hx-pack:focus-within { outline: 2px solid var(--pk-on); outline-offset: 2px; }
.hx-packs .hx-pack--badge { margin-top: 8px; }
.hx-packs .hx-pack input { position: absolute; opacity: 0; pointer-events: none; }

.hx-packs .hx-pack__img { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 6px; border: 1px solid #edf0f4; border-radius: 12px; background: #fff; overflow: hidden; }
.hx-packs .hx-pack__img img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.hx-packs .hx-pack__img--2 img { max-width: 56%; }
.hx-packs .hx-pack__img--3 img { max-width: 40%; }
.hx-packs .hx-pack__img img + img { margin-inline-start: -10%; }

.hx-packs .hx-pack .hx-pack__main { display: grid; justify-items: start; gap: 6px; min-width: 0; text-align: start; }
.hx-packs .hx-pack .hx-pack__title { color: var(--hx-ink, #111); font-size: 21px; font-weight: 900; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; }
.hx-packs .hx-pack .hx-pack__save { justify-self: start; padding: 4px 12px; border-radius: 6px; background: var(--pk-save); color: #fff; font-size: 14px; font-weight: 800; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.hx-packs .hx-pack .hx-pack__save .hx-c { font-size: inherit; }
.hx-packs .hx-pack .hx-pack__sub { color: #64748b; font-size: 17px; font-weight: 700; line-height: 1.3; }

.hx-packs .hx-pack .hx-pack__price { display: grid; justify-items: end; gap: 2px; text-align: end; white-space: nowrap; }
.hx-packs .hx-pack .hx-pack__now { color: var(--hx-ink, #111); font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.hx-packs .hx-pack .hx-pack__now small, .hx-packs .hx-pack .hx-pack__now .hx-c { margin-inline-start: 2px; font-size: 16px; font-weight: 800; }
.hx-packs .hx-pack.is-on .hx-pack__now { color: var(--pk-on); }
.hx-packs .hx-pack .hx-pack__was { color: #94a3b8; font-size: 15px; font-weight: 700; }
.hx-packs .hx-pack .hx-pack__was small { font-size: 12px; }

.hx-packs .hx-pack__badge { position: absolute; top: -16px; inset-inline-end: 20px; padding: 6px 16px; border-radius: 999px; background: var(--pk-badge); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .03em; line-height: 1.4; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }

@media (max-width: 480px) {
	.hx-packs .hx-pack { gap: 10px; padding: 12px; }
	.hx-packs .hx-pack__img { width: 72px; height: 72px; }
	.hx-packs .hx-pack .hx-pack__title { font-size: 17px; }
	.hx-packs .hx-pack .hx-pack__save { padding: 3px 7px; font-size: 11px; }
	.hx-packs .hx-pack .hx-pack__sub { font-size: 14px; }
	.hx-packs .hx-pack .hx-pack__now { font-size: 27px; }
	.hx-packs .hx-pack .hx-pack__now small { font-size: 13px; }
	.hx-packs .hx-pack__badge { top: -14px; padding: 5px 12px; font-size: 11px; }
}

/* Narrow form column (tablets, small laptops): same compact sizes as phones */
.hx-packs { container-type: inline-size; }
@container (max-width: 440px) {
	.hx-packs .hx-pack { gap: 10px; padding: 12px; }
	.hx-packs .hx-pack__img { width: 72px; height: 72px; }
	.hx-packs .hx-pack .hx-pack__title { font-size: 17px; }
	.hx-packs .hx-pack .hx-pack__save { padding: 3px 7px; font-size: 11px; }
	.hx-packs .hx-pack .hx-pack__sub { font-size: 14px; }
	.hx-packs .hx-pack .hx-pack__now { font-size: 27px; }
	.hx-packs .hx-pack .hx-pack__now small { font-size: 13px; }
	.hx-packs .hx-pack__badge { top: -14px; padding: 5px 12px; font-size: 11px; }
}

/* Win over the generic offer styles of the Oippa design layer */
.hx-packs .hx-pack.hx-offer.is-on { border-color: var(--pk-on); background: color-mix(in srgb, var(--pk-on) 16%, #fff); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--pk-on) 80%, transparent); }
.hx-packs .hx-pack .hx-c { text-transform: none; }