/* Quick buy (design qbx 29-31 Oct, ported). Loaded by sandbox elivena-quick-buy.php. Sizes in px like the design. */
.qbx-root { --qbx-ink: var(--deep-field, #000070); --qbx-ink-2: #4A4868; --qbx-line: rgba(0, 0, 112, .14); --qbx-lav: #F3EEFD; --qbx-ok: #0B6A63;
  position: fixed; inset: 0; z-index: 2147483000; font-family: Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--qbx-ink); }
.qbx-root[hidden] { display: none; }
.qbx-scrim { position: absolute; inset: 0; background: rgba(13, 9, 38, .44); opacity: 0; transition: opacity .38s ease; }
.qbx-root.is-in .qbx-scrim { opacity: 1; }
.qbx-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: min(92dvh, 900px); background: #fff;
  border-radius: 24px 24px 0 0; box-shadow: 0 -24px 60px -24px rgba(13, 9, 38, .45); transform: translateY(104%);
  transition: transform .46s cubic-bezier(.2, .8, .2, 1); outline: none; }
.qbx-root.is-in .qbx-panel { transform: none; }
.qbx-root.is-out .qbx-panel { transition-duration: .34s; transition-timing-function: cubic-bezier(.4, 0, .9, .6); }
/* top row: the drag handle (phone) and Close; the content scrolls under it, never under the button */
.qbx-top { position: relative; flex: none; height: 56px; touch-action: none; cursor: grab; }
.qbx-grab { position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(0, 0, 112, .18); }
.qbx-scroll { box-shadow: inset 0 1px 0 transparent; transition: box-shadow .2s ease; }
.qbx-x { position: absolute; top: 10px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--qbx-lav); color: var(--qbx-ink); cursor: pointer; transition: background .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.qbx-x svg { width: 18px; height: 18px; }
.qbx-x:hover { background: #E6DEFB; transform: rotate(90deg); }
.qbx-scroll { overflow: auto; overscroll-behavior: contain; padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.qbx-panel.is-scrolled .qbx-top { box-shadow: 0 1px 0 rgba(0, 0, 112, .1); }
@media (min-width: 768px) {
  .qbx-panel { left: auto; top: 12px; right: 12px; bottom: 12px; width: 468px; max-height: none; border-radius: 24px; transform: translateX(calc(100% + 24px));
    box-shadow: 0 30px 80px -30px rgba(13, 9, 38, .55); }
  .qbx-grab { display: none; }
  .qbx-top { cursor: default; height: 60px; }
  .qbx-x { top: 14px; right: 14px; }
  .qbx-scroll { padding: 0 28px 28px; }
}

/* head: the card's own photo, COA tag, name, category and dose */
.qbx-head { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; }
.qbx-shot { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--qbx-lav); }
.qbx-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qbx-id { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.qbx-coa { padding: 3px 9px; border: 1px solid rgba(11, 106, 99, .4); border-radius: 999px; background: none; font-family: inherit; font-weight: 600; font-size: 12px; line-height: 1.3; color: var(--qbx-ok); cursor: pointer; }
.qbx-coa:hover { background: rgba(11, 106, 99, .08); }
.qbx-id h2 { margin: 2px 0 0; font-family: inherit; font-weight: 600; font-size: 25px; line-height: 1.1; letter-spacing: -.025em; color: var(--qbx-ink); text-wrap: balance; }
.qbx-cat { margin: 0; font-size: 14px; color: var(--qbx-ink-2); }

/* groups */
.qbx-group { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.qbx-group legend { padding: 0; margin: 0 0 9px; font-size: 14px; font-weight: 600; color: var(--qbx-ink); }
.qbx-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.qbx-tile { position: relative; display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 52px; padding: 6px 4px; border: 1px solid var(--qbx-line);
  border-radius: 12px; background: #fff; cursor: pointer; text-align: center; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.qbx-tile:hover { border-color: rgba(0, 0, 112, .36); }
.qbx-tile input, .qbx-plan input, .qbx-once input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qbx-tile span { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.qbx-tile small { font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 112, .22); color: var(--qbx-ink-2); }
.qbx-tile small:empty { display: none; }
.qbx-qty .qbx-tile { min-height: 60px; }
.qbx-tile:has(input:checked) { border-color: var(--qbx-ink); background: var(--qbx-lav); box-shadow: inset 0 0 0 1px var(--qbx-ink); }
.qbx-tile:has(input:checked) small { background: var(--qbx-ink); color: #fff; box-shadow: none; }
:is(.qbx-tile, .qbx-plan, .qbx-once):has(input:focus-visible) { outline: 2px solid #6F5BFF; outline-offset: 2px; }

/* plans: the chosen one opens its bill line and checks, like the reference */
.qbx-plans { display: grid; gap: 8px; }
.qbx-plan, .qbx-once { position: relative; display: block; padding: 14px 16px; border: 1px solid var(--qbx-line); border-radius: 16px; background: #fff; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.qbx-plan:hover, .qbx-once:hover { border-color: rgba(0, 0, 112, .36); }
.qbx-plan:has(input:checked), .qbx-once:has(input:checked) { border-color: var(--qbx-ink); background: var(--qbx-lav); box-shadow: inset 0 0 0 1px var(--qbx-ink); }
.qbx-plan-top, .qbx-once { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qbx-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(0, 0, 112, .4); background: #fff; transition: box-shadow .2s ease, background-color .2s ease; }
:is(.qbx-plan, .qbx-once):has(input:checked) .qbx-dot { border-color: var(--qbx-ink); background: var(--qbx-ink); box-shadow: inset 0 0 0 3px #fff; }
.qbx-plan-top > b, .qbx-once > b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.qbx-chip { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0, 0, 112, .3); }
.qbx-plan--best .qbx-chip { box-shadow: none; background: linear-gradient(90deg, #ECA370, #EEDDC3); color: #0D0926; }
.qbx-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0 30px; font-variant-numeric: tabular-nums; }
.qbx-plan-price b { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.qbx-plan-price s, .qbx-plan-price small { font-size: 13px; color: var(--qbx-ink-2); }
.qbx-plan-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1); }
.qbx-plan-more > * { overflow: hidden; min-height: 0; }
.qbx-plan:has(input:checked) .qbx-plan-more { grid-template-rows: 1fr; }
.qbx-bill { display: block; margin: 4px 0 0 30px; font-size: 13px; color: var(--qbx-ink-2); text-wrap: pretty; }
.qbx-plan-more ul { display: grid; gap: 6px; margin: 0; padding: 10px 0 0 30px; list-style: none; }
.qbx-plan-more ul { margin-top: 12px; border-top: 1px solid rgba(0, 0, 112, .1); }
.qbx-plan-more li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; color: var(--qbx-ink); }
.qbx-plan-more li svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--qbx-ok); }
.qbx-once { padding: 12px 16px; }
.qbx-once-p { margin-left: auto; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* CTA: Deep Field pill, slides into the main gradient on hover like every primary CTA of the site */
.qbx-cta { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin: 20px 0 0; padding: 0 24px; border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1; color: #fff; cursor: pointer; font-variant-numeric: tabular-nums;
  background: var(--hm2-main-btn, linear-gradient(90deg, #000070 0%, #000070 54.5%, #3D2C96 64%, #AC2F6C 76%, #E25C50 88%, #ECA370 100%)) 0 0 / 220% 100% no-repeat border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 32px -18px rgba(0, 0, 112, .6), 0 -18px 22px 4px rgba(255, 255, 255, .92); transition: background-position .7s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease; }
.qbx-cta:is(:hover, :focus-visible) { background-position: 100% 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 20px 40px -16px rgba(172, 47, 108, .5), 0 -18px 22px 4px rgba(255, 255, 255, .92); }
/* the CTA stays in reach while the sheet scrolls (the reference keeps Add to cart in view); a white veil behind it */
.qbx-cta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1; }
.qbx-cta:focus-visible { outline: 2px solid #6F5BFF; outline-offset: 3px; }
.qbx-cta[aria-busy="true"] span { opacity: .55; }
.qbx-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--qbx-ink-2); }
.qbx-facts li { display: flex; align-items: center; gap: 7px; }
.qbx-facts svg { width: 18px; height: 18px; color: var(--qbx-ink); }
.qbx-more { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--qbx-ink);
  text-decoration: underline; text-decoration-color: rgba(0, 0, 112, .3); text-underline-offset: 4px; }
.qbx-more svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.qbx-more:hover svg { transform: translateX(3px); }
.qbx-qa { margin: 22px 0 0; border-top: 1px solid rgba(0, 0, 112, .1); }
.qbx-qa details { border-bottom: 1px solid rgba(0, 0, 112, .1); }
.qbx-qa summary { position: relative; display: block; padding: 15px 32px 15px 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.qbx-qa summary::-webkit-details-marker { display: none; }
.qbx-pm { position: absolute; right: 2px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.qbx-pm::before, .qbx-pm::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease; }
.qbx-pm::after { transform: rotate(90deg); }
.qbx-qa details[open] .qbx-pm::after { transform: rotate(0); }
.qbx-qa details > div { padding: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--qbx-ink-2); }
.qbx-qa details > div p { margin: 0 0 8px; }
.qbx-ruo { margin: 18px 0 0; font-size: 12px; text-align: center; color: var(--qbx-ink-2); }
@media (max-width: 380px) {
  .qbx-tile span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .qbx-panel, .qbx-scrim, .qbx-plan-more, .qbx-cta, .qbx-x { transition: none !important; }
}
/* ---------- Quick add (31 Oct 2026, Thomas; reference: nativepet.com quick add). Not a side cart: a centered quick add,
   two columns from 900 (product and details on the left, the buy box on a soft grey on the right), one column below
   (bottom sheet on phone). Dosage is a dropdown, quantity four small buttons with the discount sitting on their top edge,
   one-time purchase is the product page's underlined link. Add to cart closes it and opens the cart drawer. ---------- */
.qbx-panel { overflow: hidden; }
.qbx-panel > .qbx-x { position: absolute; top: 12px; right: 12px; z-index: 3; }
.qbx-scroll { flex: 1 1 auto; min-height: 0; }
.qbx-top { height: 22px; cursor: grab; }
.qbx-grab { top: 9px; }
.qbx-l { padding-top: 6px; }
.qbx-head { grid-template-columns: 84px 1fr; padding-right: 44px; }
.qbx-desc { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--qbx-ink-2); text-wrap: pretty; }
.qbx-r { margin: 22px -20px 0; padding: 22px 20px 24px; background: #F7F7FA; border-block: 1px solid rgba(0, 0, 112, .08); }
.qbx-r > .qbx-group:first-child { margin-top: 0; }
.qbx-lbl { display: block; margin: 0 0 9px; font-size: 14px; font-weight: 600; color: var(--qbx-ink); }
.qbx-sel { position: relative; display: block; }
.qbx-sel select { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 50px; margin: 0; padding: 0 46px 0 16px; border: 1px solid var(--qbx-line); border-radius: 12px;
  background: #fff; font: 600 15px/1 Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--qbx-ink); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.qbx-sel select:hover { border-color: rgba(0, 0, 112, .36); }
.qbx-sel select:focus-visible { outline: none; border-color: var(--qbx-ink); box-shadow: 0 0 0 3px rgba(111, 91, 255, .25); }
.qbx-sel select:disabled { opacity: 1; cursor: default; }
.qbx-sel select:disabled + .qbx-chev { display: none; }
.qbx-chev { position: absolute; right: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--qbx-ink); pointer-events: none; }
/* quantity: small buttons, the discount on the top edge; the chosen one filled Deep Field */
.qbx-qty { padding-top: 10px; gap: 8px; }
.qbx-qty .qbx-tile { min-height: 50px; padding: 8px 4px 6px; overflow: visible; }
.qbx-qty .qbx-tile span { font-size: 15px; }
.qbx-qty .qbx-tile small { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 8px; background: #fff; font-size: 10.5px; line-height: 1.2; white-space: nowrap; }
.qbx-qty .qbx-tile:has(input:checked) { border-color: var(--qbx-ink); background: var(--qbx-ink); box-shadow: none; color: #fff; }
.qbx-qty .qbx-tile:has(input:checked) small { background: linear-gradient(90deg, #ECA370, #EEDDC3); color: #0D0926; box-shadow: none; }
/* one-time purchase: the product page's underlined link (Peach underline when chosen) */
.qbx-once-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qbx-once2 { display: block; margin: 14px auto 0; padding: 4px 2px; border: 0; background: none; font: 600 14px/1.2 Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--qbx-ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; cursor: pointer; font-variant-numeric: tabular-nums; }
.qbx-once2[aria-pressed="true"] { text-decoration-color: #ECA370; text-decoration-thickness: 3px; }
.qbx-once2:focus-visible { outline: 2px solid #6F5BFF; outline-offset: 3px; border-radius: 4px; }
.qbx-r .qbx-cta { margin-top: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 32px -18px rgba(0, 0, 112, .6), 0 -12px 12px 0 rgba(247, 247, 250, .92); }
.qbx-r .qbx-cta:is(:hover, :focus-visible) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 20px 40px -16px rgba(172, 47, 108, .5), 0 -12px 12px 0 rgba(247, 247, 250, .92); }
.qbx-acc .qbx-qa { margin-top: 6px; border-top: 0; }
.qbx-acc .qbx-more { margin-top: 20px; }
@media (max-width: 380px) { .qbx-qty .qbx-tile span { font-size: 13.5px; } .qbx-qty { gap: 6px; } }
@media (max-width: 767px) {
  .qbx-qty .qbx-tile { min-height: 44px; padding: 7px 2px 5px; border-radius: 10px; }
  .qbx-qty .qbx-tile span { font-size: 14px; }
  .qbx-sel select { height: 46px; }
}
/* tablet: one column, centered */
@media (min-width: 768px) {
  .qbx-panel { left: 50%; top: 50%; right: auto; bottom: auto; width: min(560px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); border-radius: 20px;
    opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.985); transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
  .qbx-root.is-in .qbx-panel { opacity: 1; transform: translate(-50%, -50%); }
  .qbx-root.is-out .qbx-panel { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.985); }
  .qbx-top { display: none; }
  .qbx-panel > .qbx-x { top: 16px; right: 16px; }
  .qbx-l { padding-top: 32px; }
  .qbx-r { margin-inline: -28px; padding-inline: 28px; }
}
/* desktop: two columns */
@media (min-width: 900px) {
  .qbx-panel { width: min(1040px, calc(100vw - 64px)); max-height: min(760px, calc(100dvh - 64px)); }
  .qbx-scroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "l r" "acc r"; padding: 0; }
  .qbx-l { grid-area: l; padding: 40px 40px 0; }
  .qbx-acc { grid-area: acc; padding: 4px 40px 36px; }
  .qbx-r { grid-area: r; margin: 0; padding: 60px 40px 36px; border-block: 0; border-left: 1px solid rgba(0, 0, 112, .08); }
  .qbx-head { grid-template-columns: 96px 1fr; padding-right: 0; }
  .qbx-id h2 { font-size: 28px; }
  .qbx-desc { margin-top: 20px; }
}

/* 31 Oct, round 2 (Thomas): Add to cart and the two facts stay in view (a sticky foot on the grey), every label sits
   10px above its control, the details start closed, no link out of the quick add */
.qbx-r .qbx-group legend, .qbx-lbl { margin: 0 0 10px !important; }
.qbx-qty { padding-top: 0 !important; }
.qbx-qty .qbx-tile small { top: -9px; }
.qbx-foot { position: sticky; bottom: 0; z-index: 2; margin: 16px -20px -24px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: #F7F7FA;
  box-shadow: 0 -16px 16px -4px rgba(247, 247, 250, .95); }
.qbx-foot .qbx-cta { position: static; margin: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 32px -18px rgba(0, 0, 112, .6) !important; }
.qbx-foot .qbx-cta:is(:hover, :focus-visible) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 20px 40px -16px rgba(172, 47, 108, .5) !important; }
.qbx-foot .qbx-facts { margin-top: 12px; }
@media (min-width: 768px) { .qbx-foot { margin-inline: -28px; padding-inline: 28px; } }
@media (min-width: 900px) {
  .qbx-r { padding: 48px 40px 0; }
  .qbx-foot { margin: 16px -40px 0; padding: 14px 40px 22px; }
  .qbx-r .qbx-group { margin-top: 20px; }
  .qbx-r > .qbx-group:first-child { margin-top: 0; }
}
/* the sticky foot sits on the sheet's bottom edge: the scroll box keeps no bottom padding, the details carry it */
.qbx-scroll { padding-bottom: 0 !important; }
.qbx-acc { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 767px) { .qbx-foot .qbx-facts { gap: 4px 12px; font-size: 12px; flex-wrap: nowrap; white-space: nowrap; } .qbx-foot .qbx-facts svg { width: 16px; height: 16px; } .qbx-foot { padding-top: 12px; } }
@media (min-width: 900px) { .qbx-acc { padding-bottom: 36px; } }
/* 31 Oct, round 3 (Thomas: "tudo caber em uma única tela, sem scroll"): from 900 the buy column is compacted so the whole
   buy box, one-time purchase included, fits the modal without scrolling (checked at 1280x720, 1366x768, 1440x900) */
@media (min-width: 900px) {
  .qbx-panel { max-height: calc(100dvh - 40px); }
  .qbx-panel > .qbx-x { top: 14px; right: 14px; width: 36px; height: 36px; }
  .qbx-r { padding: 26px 36px 0; }
  .qbx-r .qbx-group { margin-top: 16px; }
  .qbx-r .qbx-group legend, .qbx-r .qbx-lbl { margin: 0 0 8px !important; font-size: 13.5px; }
  .qbx-r .qbx-dose-g { padding-right: 44px; }
  .qbx-sel select { height: 44px; font-size: 14.5px; }
  .qbx-qty .qbx-tile { min-height: 44px; padding: 6px 4px 4px; }
  .qbx-qty .qbx-tile span { font-size: 14.5px; }
  .qbx-plans { gap: 6px; }
  .qbx-plan { padding: 11px 14px; border-radius: 14px; }
  .qbx-plan-top > b { font-size: 15px; }
  .qbx-chip { font-size: 11.5px; padding: 2px 8px; }
  .qbx-plan-price { margin-top: 3px; }
  .qbx-plan-price b { font-size: 21px; }
  .qbx-bill { margin-top: 2px; font-size: 12.5px; }
  .qbx-plan-more ul { gap: 3px; margin-top: 8px; padding-top: 8px; }
  .qbx-plan-more li { font-size: 13px; line-height: 1.3; }
  .qbx-plan-more li svg { width: 14px; height: 14px; }
  .qbx-once2 { margin-top: 10px; font-size: 13.5px; }
  .qbx-foot { margin: 10px -36px 0; padding: 10px 36px 16px; box-shadow: none; }
  .qbx-foot .qbx-cta { height: 50px; font-size: 15.5px; }
  .qbx-foot .qbx-facts { margin-top: 10px; }
  .qbx-l { padding: 32px 36px 0; }
  .qbx-acc { padding: 0 36px 28px; }
  .qbx-desc { margin-top: 16px; font-size: 14.5px; }
  .qbx-acc .qbx-qa summary { padding: 13px 32px 13px 0; font-size: 14.5px; }
}
/* phone: the reference order (product, description, grey buy box, one-time link, Add to cart, facts, then the details);
   the sheet opens almost full height so the buy box reads in one go */
@media (max-width: 767px) {
  .qbx-panel { max-height: calc(100dvh - 24px); }
  .qbx-head { grid-template-columns: 72px 1fr; gap: 14px; }
  .qbx-id h2 { font-size: 22px; }
  .qbx-cat { font-size: 13px; }
  .qbx-desc { margin-top: 12px; font-size: 14px; }
  .qbx-r { margin-top: 18px; padding-top: 18px; }
  .qbx-r .qbx-group { margin-top: 16px; }
  .qbx-r .qbx-group legend, .qbx-r .qbx-lbl { margin: 0 0 8px !important; font-size: 13.5px; }
  .qbx-plan { padding: 12px 14px; }
  .qbx-plan-price b { font-size: 21px; }
  .qbx-plan-more li { font-size: 13px; }
  .qbx-once2 { margin-top: 12px; }
}
/* Elivena port: overrides from the design's last layer, plus six quantity tiers (1/3/6/12/20/50) */
html.qbx-open, html.qbx-open body { overflow: hidden; }
.qbx-panel .qbx-tile:has(input:checked) { background: #F3EEFD !important; color: var(--qbx-ink) !important; border-color: var(--qbx-ink) !important; box-shadow: inset 0 0 0 1px var(--qbx-ink) !important; }
.qbx-panel .qbx-tile:has(input:checked) * { color: var(--qbx-ink) !important; }
.qbx-panel .qbx-x, .qbx-panel .qbx-x:hover { background: none; box-shadow: none; border: 0; transform: none; }
.qbx-panel .qbx-x:hover { opacity: .7; }
.qbx-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; font-size: 11px; }
.qbx-id h2 a, .qbx-shot { color: inherit; text-decoration: none; }
.qbx-coa { cursor: default; }
.qbx-err { margin: 10px 0 0; font-size: 13px; color: #B3261E; text-align: center; }
.qbx-cta[aria-busy="true"] { cursor: progress; }
.qbx-root button { font-family: inherit; }
.qbx-root ul { margin: 0; }
.qbx-qty[data-n="5"], .qbx-qty[data-n="6"] { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; padding-top: 10px !important; }
@media (min-width: 768px) { .qbx-qty[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .qbx-qty[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 899px) { .qbx-qty[data-n="6"] .qbx-tile span { font-size: 13.5px; } }
.qbx-qty .qbx-tile small { top: -9px; }
.elivena-atc[aria-busy="true"] { opacity: .7; cursor: progress; }
.qbx-tile { color: var(--qbx-ink); }
.qbx-tile:not(:has(input:checked)) span { color: var(--qbx-ink); }
@media (max-width: 767px) { .qbx-foot .qbx-facts { flex-wrap: wrap !important; white-space: normal !important; gap: 4px 14px !important; } }