/* ──────────────────────────────────────────────
   Spliff Pack Mix — Frontend CSS v2.0.0
   ────────────────────────────────────────────── */

/* =========================
   Pack Grid
   ========================= */
.product-pack-grid{display:flex;gap:15px;justify-content:space-between;margin-top:20px;margin-bottom:15px;width:100%;align-items:center}
.product-pack{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#F9F9F9;padding:15px;text-align:center;width:100%;max-width:200px;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.1);pointer-events:auto;z-index:10;transition:border-color .2s,box-shadow .2s}
.product-pack.selected{border:1px solid #1B1B1B}

/* Discount badge */
.product-pack .pack-discount{position:absolute;top:0;left:0;width:100%;height:36px;background:#000;color:#fff;font-weight:800;letter-spacing:.5px;z-index:2;display:flex;align-items:center;justify-content:center}
.pack-image img{width:100%;height:auto;border-radius:5px}

/* Image zone */
.product-pack .pack-image{padding-top:40px;height:90px;display:flex;align-items:center;justify-content:center;padding-bottom:8px}
.product-pack .pack-image img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto}

/* Qty label */
.product-pack h3{margin:6px 0 8px;line-height:1.1;text-align:center}

/* Price lines */
.pack-price{font-size:16px;font-weight:700;color:#1B1B1B;display:block;text-align:center;margin:0 0 8px}
.pack-price .pp-regular,.pack-price .pp-final{display:block;line-height:1.2}
.pack-price .pp-regular.pp-invisible{visibility:hidden;text-decoration:none;animation:none !important;color:inherit}
.old-price{text-decoration:line-through;color:#1B1B1B;font-size:14px}

/* =========================
   Selection Animations
   ========================= */
:root{--spc-primary:#1B1B1B;--spc-neon:#5a8bff}
@keyframes spcPulseBadge{0%,100%{background:var(--spc-primary)}50%{background:var(--spc-neon)}}
@keyframes spcPulsePrice{0%,100%{color:var(--spc-primary)}50%{color:var(--spc-neon)}}
.product-pack.selected .pack-discount{animation:spcPulseBadge 1.1s ease-in-out infinite;color:#fff}
.product-pack.selected .pack-price .pp-regular:not(.pp-invisible){animation:spcPulsePrice 1.1s ease-in-out infinite;text-decoration:line-through;opacity:.9}

/* =========================
   Swatch Badges (flavor counters)
   ========================= */
.spc-badge{position:absolute;top:6px;right:6px;min-width:22px;height:22px;border-radius:999px;background:#111;color:#fff;display:none;align-items:center;justify-content:center;font-size:11px;padding:0 6px}
.spc-over .spc-badge{display:inline-flex}

/* =========================
   Inline Help
   ========================= */
.spc-help-inline{display:block;margin-top:4px;color:#1B1B1B;font:inherit;opacity:.95;white-space:normal}

/* Savings message */
.spliff-ppg-msg{margin-left:.35em;font-weight:700;font-size:14px;color:var(--spc-primary);white-space:nowrap}
.spliff-ppg-val{animation:spcPulsePrice 1.1s ease-in-out infinite;font-weight:700}

/* =========================
   Scoped overrides (was inline <style>)
   ========================= */
body.spc-packmix table.variations th.label > label,
body.spc-packmix table.variations td.label > label{display:none !important}
body.spc-packmix table.variations th.label > .woo-selected-variation-item-name,
body.spc-packmix table.variations td.label > .woo-selected-variation-item-name{display:none !important}
body.spc-packmix table.variations th.label::before,
body.spc-packmix table.variations th.label::after,
body.spc-packmix table.variations td.label::before,
body.spc-packmix table.variations td.label::after,
body.spc-packmix table.variations th.label > label::before,
body.spc-packmix table.variations th.label > label::after,
body.spc-packmix table.variations td.label > label::before,
body.spc-packmix table.variations td.label > label::after,
body.spc-packmix .spc-help-inline::before,
body.spc-packmix .spc-help-inline::after{content:"" !important}
body.spc-packmix .spc-help-inline{margin-left:0 !important;padding-left:0 !important;display:inline-block !important}

/* =========================
   Responsive
   ========================= */
@media (min-width:768px){
  .product-pack .pack-image{height:200px}
  .product-pack h3{margin-top:8px}
}
@media (min-width:1024px){
  .spc-help-inline{display:inline;margin-top:0;margin-left:.25em;white-space:nowrap}
  .spc-add-pack-active .spc-help-inline:not(:empty)::before{content:" — "}
}
@media (max-width:900px){
  .product-pack{flex:1 1 calc(33.333% - 5px);max-width:calc(33.333% - 5px);min-height:180px}
  .product-pack-grid .product-pack:first-child{max-width:calc(33.333% - 5px)}
  .pack-price{flex-direction:column}
  .old-price{display:block}
}