/* ============================================================
   PACK GRID — reference-matched (pixel-perfect)
   Loads AFTER style.css. Scoped to .pack-grid.pack-ref only,
   so it fully overrides the legacy .pack-card layout.
   ============================================================ */

.pack-grid.pack-ref{
  --ref-ink:        rgb(26,26,26);
  --ref-gold:       rgb(184,144,67);
  --ref-gold-deep:  rgb(122,90,31);
  --ref-gold-tint:  rgb(233,217,184);
  --ref-cream:      rgb(253,249,240);
  --ref-green:      rgb(10,125,58);
  --ref-neutral-4:  #a3a3a3;   /* line-through */
  --ref-neutral-5:  #737373;   /* per-bottle */
  --ref-line:       rgba(0,0,0,0.1);
  --ref-line-25:    rgba(0,0,0,0.25);
  --ref-gold-33:    rgba(184,144,67,0.333);
  --ref-gold-ring:  rgba(184,144,67,0.133);

  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  grid-template-columns:none !important;
  margin:12px 0 8px !important;
  padding:0 !important;
}

/* ---------- Card shell ---------- */
.pack-grid.pack-ref .pack-card{
  position:relative !important;
  border-width:2px !important;border-style:solid !important;
  border-color:var(--ref-line) !important;
  background:#fff !important;
  border-radius:12px !important;
  overflow:hidden !important;
  padding:0 !important;margin:0 !important;
  display:block !important;
  cursor:pointer !important;
  text-align:left !important;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease !important;
  box-shadow:none !important;
}
.pack-grid.pack-ref .pack-card:hover{
  border-color:rgba(184,144,67,.5) !important;
}
.pack-grid.pack-ref .pack-card.active{
  border-color:var(--ref-gold) !important;
  background:rgb(253, 249, 240) !important;
  box-shadow:rgba(184, 144, 67, 0.133) 0px 0px 0px 3px !important;
}
.pack-grid.pack-ref .pack-card input[type="radio"]{
  position:absolute !important;opacity:0 !important;
  pointer-events:none !important;width:0 !important;height:0 !important;
}

/* ---------- Inner (button area) — reduced padding by default, expanded on active ---------- */
.pack-grid.pack-ref .ref-pack-inner{
  display:block !important;
  padding:8px 12px !important;
  transition:padding .25s ease !important;
}
.pack-grid.pack-ref .pack-card.active .ref-pack-inner{
  padding:12px 12px 10px !important;
}

/* Badge row */
.pack-grid.pack-ref .ref-pack-badge-row{
  display:flex !important;align-items:center !important;
  height:16px !important;margin-bottom:6px !important;
}
.pack-grid.pack-ref .ref-pack-badge{
  display:inline-flex !important;align-items:center !important;
  height:16px !important;padding:0 8px !important;
  border-radius:99px !important;
  color:#fff !important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  font-size:8px !important;font-weight:900 !important;
  letter-spacing:.09em !important;line-height:1 !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
}
.pack-grid.pack-ref .ref-badge-best,
.pack-grid.pack-ref .ref-badge-starter { background:var(--ref-green) !important; }
.pack-grid.pack-ref .ref-badge-popular { background:var(--ref-gold-deep) !important; }
.pack-grid.pack-ref .ref-badge-default { background:var(--ref-gold-deep) !important; }

/* Star icon inside MOST POPULAR badge */
.pack-grid.pack-ref .ref-pack-badge-ic{
  display:inline-block !important;
  vertical-align:middle !important;
  color:#fff !important;      /* soft yellow star that pops on gold-deep bg */
  margin-right:4px !important;
  flex-shrink:0 !important;
  width: 8px;
  height: 8px;
}

/* Main row (radio + title + price) */
.pack-grid.pack-ref .ref-pack-main{
  display:flex !important;align-items:center !important;
  gap:12px !important;
}
.pack-grid.pack-ref .ref-pack-radio{
  width:16px !important;height:16px !important;
  border-radius:50% !important;
  border:1px solid var(--ref-line-25) !important;
  background:transparent !important;
  display:grid !important;place-items:center !important;
  flex-shrink:0 !important;
  color:#fff !important;
  transition:background .2s, border-color .2s !important;
}
.pack-grid.pack-ref .ref-pack-radio svg{
  display:block !important;opacity:0 !important;
  transition:opacity .2s !important;
}
.pack-grid.pack-ref .pack-card.active .ref-pack-radio{
  background:var(--ref-gold) !important;
  border-color:var(--ref-gold) !important;
}
.pack-grid.pack-ref .pack-card.active .ref-pack-radio svg{ opacity:1 !important; }

.pack-grid.pack-ref .ref-pack-title-wrap{
  flex:1 !important;min-width:0 !important;
}
.pack-grid.pack-ref .ref-pack-title{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  color:var(--ref-ink) !important;
  font-size:13px !important;font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  margin:0 !important;
}
.pack-grid.pack-ref .ref-pack-price-wrap{
  flex-shrink:0 !important;
  display:flex !important;flex-direction:column !important;
  align-items:flex-end !important;
}
.pack-grid.pack-ref .ref-pack-price-row{
  display:flex !important;align-items:baseline !important;gap:4px !important;
}
.pack-grid.pack-ref .ref-pack-strike{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  font-size:9px !important;font-weight:500 !important;
  color:var(--ref-neutral-4) !important;
  text-decoration:line-through !important;
  font-variant-numeric:tabular-nums !important;
}
.pack-grid.pack-ref .ref-pack-price{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  font-size:13px !important;font-weight:900 !important;
  color:var(--ref-ink) !important;
  font-variant-numeric:tabular-nums !important;
}
.pack-grid.pack-ref .ref-pack-per{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  font-size:9px !important;font-weight:500 !important;
  color:var(--ref-neutral-5) !important;
  font-variant-numeric:tabular-nums !important;
  margin-top:2px !important;
}

/* ---------- Expand (INCLUDED WITH THIS PACK) ---------- */
.pack-grid.pack-ref .ref-pack-expand{
  display:grid !important;
  grid-template-rows:0fr !important;
  opacity:0 !important;
  transition:grid-template-rows .3s ease, opacity .3s ease !important;
  overflow:hidden !important;
}
.pack-grid.pack-ref .pack-card.active .ref-pack-expand{
  grid-template-rows:1fr !important;
  opacity:1 !important;
}
.pack-grid.pack-ref .ref-pack-expand > .ref-pack-expand-inner{
  overflow:hidden !important;
  padding:0 12px 12px !important;
}
.pack-grid.pack-ref .ref-pack-expand-inner{
  border-top:1px solid var(--ref-gold-33) !important;
  padding-top:4px !important;
}
.pack-grid.pack-ref .ref-pack-inc-title{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  color:var(--ref-gold-deep) !important;
  font-size:10px !important;font-weight:900 !important;
  letter-spacing:.14em !important;
  margin:8px 0 8px !important;
  text-transform:uppercase !important;
}
.pack-grid.pack-ref .ref-pack-perks{
  list-style:none !important;
  margin:0 !important;padding:0 !important;
  display:flex !important;flex-direction:column !important;
  gap:6px !important;
}
.pack-grid.pack-ref .ref-pack-perks li{
  display:flex !important;align-items:center !important;gap:8px !important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  color:var(--ref-ink) !important;
  font-size:11px !important;font-weight:600 !important;
  line-height:1.35 !important;
}
.pack-grid.pack-ref .ref-pack-check{
  color:var(--ref-gold-deep) !important;
  flex-shrink:0 !important;
  display:block !important;
}

/* ---------- Nuke legacy .pack-card styles that would leak through ---------- */
.pack-grid.pack-ref .pack-card::before,
.pack-grid.pack-ref .pack-card::after{ display:none !important; }
.pack-grid.pack-ref .pack-tag,
.pack-grid.pack-ref .pack-title,
.pack-grid.pack-ref .pack-icons,
.pack-grid.pack-ref .pack-price-row,
.pack-grid.pack-ref .strike,
.pack-grid.pack-ref .pack-price,
.pack-grid.pack-ref .total-price,
.pack-grid.pack-ref .pack-save,
.pack-grid.pack-ref .extra-text,
.pack-grid.pack-ref .pack-per-bottle,
.pack-grid.pack-ref .pack-included{ display:none !important; }

/* ---------- Also hide the old mobile-only strength-selector "mb-section-lbl" duplicate above the grid, keep the ref one ---------- */
/* (no-op — kept for future reference; ref uses same mb-section-lbl label) */

/* Responsive: identical layout at all sizes (matches reference which is same on desktop + mobile) */
@media (max-width: 900px){
  .pack-grid.pack-ref{gap:12px !important}
}
@media (max-width: 480px){
  .pack-grid.pack-ref{gap:10px !important;margin:10px 0 6px !important}
  .pack-grid.pack-ref .ref-pack-inner{padding:7px 10px !important}
  .pack-grid.pack-ref .pack-card.active .ref-pack-inner{padding:10px 12px 8px !important}
  .pack-grid.pack-ref .ref-pack-expand > .ref-pack-expand-inner{padding:0 10px 10px !important}
}