/* Solris Bundles — self-contained styling.
   Uses the theme's design tokens when they exist and falls back to literal
   values when they do not, so the selector is legible under any theme. */
/* A <fieldset> defaults to `min-inline-size: min-content` and will not shrink
 * below its contents — so instead of the pack rail scrolling inside it, the
 * fieldset grew to the rail's full width and pushed the whole page sideways.
 * This one line is what makes the rail scroll rather than overflow. */
.packs{border:0;padding:0;margin:var(--sp-5,1.25rem) 0;min-inline-size:0}
.packs__legend{font-size:1rem;font-weight:600;padding:0;margin-block-end:.25rem}
.packs__help{font-size:.9rem;color:var(--ink-3,#5F7190);margin-block-end:.75rem}
/* This file is the plugin's standalone fallback — it must look right with no
 * theme at all — but it must not FIGHT the theme either. It used to set
 * `grid-template-columns`, which creates EXPLICIT tracks and therefore beat
 * the theme's `grid-auto-columns` outright, so the theme's minimum card width
 * silently did nothing. Both now describe the same layout.
 *
 * One row that becomes a scroll rail when the cards no longer fit their
 * minimum. No breakpoint decides it; the number of packs and the width
 * available do. (The old `@media (max-width:479px){grid-template-columns:1fr}`
 * stacked them on a phone, which is the opposite of what this block is for.)
 */
.packs__grid{--pack-min:118px;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(var(--pack-min),1fr);
  gap:.75rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding-block:12px 4px;margin-block:-12px -4px}
.packs__grid::-webkit-scrollbar{display:none}
.pack{scroll-snap-align:center}
.pack{position:relative;display:flex;flex-direction:column;gap:2px;
  padding:1rem .75rem;border:2px solid var(--border,#E3E8F0);border-radius:var(--r-md,10px);
  background:var(--surface,#fff);cursor:pointer;text-align:center;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.pack:hover{border-color:var(--border-strong,#6B7D99)}
.pack:has(input:checked){border-color:var(--navy-800,#0E2340);background:var(--amber-100,#FEEBC2);
  box-shadow:0 0 0 4px rgb(245 166 35/.35)}
.pack.is-oos{opacity:.55;cursor:not-allowed}
.pack__name{font-size:1rem;font-weight:600}
.pack__price{font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums}
.pack__unit{font-size:.9rem;color:var(--ink-2,#3F5270);font-variant-numeric:tabular-nums}
.pack__save{display:inline-block;margin-block-start:.25rem;padding:2px 8px;border-radius:6px;
  background:var(--orange-50,#FEF0E8);color:var(--orange-600,#BF4A10);font-size:.78rem;font-weight:600}
.pack__oos{font-size:.78rem;color:var(--ink-3,#5F7190);font-weight:600}
.pack__ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:2px 9px;
  border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;white-space:nowrap}
.pack__ribbon--popular{background:var(--amber-400,#F5A623);color:var(--navy-800,#0E2340)}
.pack__ribbon--best{background:var(--navy-800,#0E2340);color:var(--amber-400,#F5A623)}
.pack__check{position:absolute;top:6px;right:6px;opacity:0;color:var(--navy-800,#0E2340)}
.pack:has(input:checked) .pack__check{opacity:1}
/* Woo's own dropdown is kept in the DOM (we mirror into it) but hidden. */
[data-packs] ~ .variations{display:none}
/* The selected panel is cream; pin its ink dark so it never goes light-on-light. */
:root[data-theme="dark"] .pack:has(input:checked),
:root[data-theme="dark"] .pack:has(input:checked) *{color:var(--navy-800,#0E2340)}