/* Packages page · product-card treatment (preview 2026-11-12)
   Reference: spaced-caps spec line, giant pale word behind a cut-out product,
   colored backdrop ending on an off-white panel with a soft floor shadow,
   big price, labelled dots, dark full-width pill. No new copy: all decorative
   words come from data-* attributes holding text already on the same card,
   rendered via CSS with empty alt text so screen readers skip them. */
.cart-wrap .pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cart-wrap .pkg[data-pc]{
  --bgA:#0b1f4d;--bgB:#1d5fa6;--word:rgba(255,255,255,.16);--dot1:#13285b;--panel:#f6f4ef;
  padding:0!important;overflow:hidden;border-radius:30px!important;border:0!important;background:var(--panel)!important;
  box-shadow:0 1px 0 rgba(13,29,69,.05),0 30px 60px -36px rgba(13,29,69,.55)!important;grid-column:auto!important;
  transition:transform .25s ease,box-shadow .25s ease;outline:3px solid transparent;outline-offset:3px}
.cart-wrap .pkg[data-pc]:hover{transform:translateY(-3px)}
.cart-wrap .pkg[data-pc]:has(input:checked){outline-color:var(--signal)}
.cart-wrap .pkg[data-pc]:has(input:focus-visible){outline-color:var(--signal);outline-style:dashed}
/* per-package water tints (cohesive navy → aqua family) */
.cart-wrap .pkg[data-pc="soft"]{--bgA:#0a1b45;--bgB:#1c5aa0}
.cart-wrap .pkg[data-pc="essentials"]{--bgA:#0d2a5e;--bgB:#2a7ab6}
.cart-wrap .pkg[data-pc="soft-carb"]{--bgA:#0c2730;--bgB:#2c6a74}
.cart-wrap .pkg[data-pc="soft-carb-ro"]{--bgA:#0a2848;--bgB:#3a9fc6}
.cart-wrap .pkg[data-pc="ro"]{--bgA:#17688e;--bgB:#9fd8ea;--word:rgba(255,255,255,.34)}
.cart-wrap .pkg[data-pc="premium"]{--bgA:#050b20;--bgB:#22406f;--word:rgba(214,226,245,.14)}

/* radio + flag sit on the backdrop */
.cart-wrap .pkg[data-pc] input{top:20px!important;right:20px!important;width:24px!important;height:24px!important;z-index:6;accent-color:var(--signal)}
.cart-wrap .pkg[data-pc] .pkg-flag{order:1;position:static;align-self:flex-start;margin:0 22px 8px!important;background:var(--ink)!important;color:#fff!important;font-size:.7rem;letter-spacing:.16em;padding:.35em .9em}

/* stage */
.cart-wrap .pkg[data-pc] .pkg-head{display:contents!important}
.cart-wrap .pkg[data-pc] .pkg-head picture{position:relative!important;display:block;width:auto!important;height:auto!important;flex:none;aspect-ratio:4/4.4;container-type:inline-size;overflow:hidden;
  background:
   radial-gradient(46% 7% at 50% 89%,rgba(13,29,69,.40),rgba(13,29,69,0) 72%),
   linear-gradient(180deg,transparent 0 74%,var(--panel) 74% 100%),
   radial-gradient(circle at 12% 64%,rgba(255,255,255,.35) 0 2.5px,transparent 3.5px),
   radial-gradient(circle at 18% 52%,rgba(255,255,255,.28) 0 4px,transparent 5px),
   radial-gradient(circle at 86% 40%,rgba(255,255,255,.30) 0 3px,transparent 4px),
   radial-gradient(circle at 91% 58%,rgba(255,255,255,.22) 0 5px,transparent 6px),
   radial-gradient(circle at 80% 22%,rgba(255,255,255,.25) 0 2px,transparent 3px),
   radial-gradient(circle at 8% 30%,rgba(255,255,255,.22) 0 3px,transparent 4px),
   radial-gradient(70% 45% at 20% 10%,rgba(255,255,255,.20),transparent 70%),
   radial-gradient(55% 35% at 85% 60%,rgba(255,255,255,.12),transparent 70%),
   linear-gradient(165deg,var(--bgA) 0%,var(--bgB) 74%)}
/* wave where water meets the off-white panel */
.cart-wrap .pkg[data-pc] .pkg-head picture::after{content:"";position:absolute;left:0;right:0;top:calc(74% - 18px);height:20px;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12C60 2 120 2 200 10s140 10 200 0V20H0z' fill='%23f6f4ef'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
/* spaced-caps spec line (left/right) */
.cart-wrap .pkg[data-pc]::before,.cart-wrap .pkg[data-pc]::after{position:absolute;top:22px;z-index:5;max-width:44%;
  font-size:.66rem;line-height:1.5;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.cart-wrap .pkg[data-pc]::before{content:attr(data-spec-l) / "";left:22px}
.cart-wrap .pkg[data-pc]::after{content:attr(data-spec-r) / "";right:58px;text-align:right}
/* giant pale word behind the product */
.cart-wrap .pkg[data-pc] .pkg-head picture::before{content:attr(data-word) / "";position:absolute;left:0;right:0;top:22%;z-index:0;text-align:center;white-space:nowrap;
  font-weight:800;line-height:.8;letter-spacing:-.05em;color:var(--word);
  font-size:min(calc(150cqw / var(--wlen)),56cqw)}
/* product cut-out overlapping the word, soft shadow on the panel */
.cart-wrap .pkg[data-pc] .pkg-img{position:absolute!important;z-index:2;left:50%;bottom:9%;transform:translateX(-50%);
  width:auto!important;max-width:86%!important;height:74%!important;object-fit:contain!important;border-radius:0!important;aspect-ratio:auto!important;
  filter:drop-shadow(0 22px 18px rgba(13,29,69,.32)) drop-shadow(0 4px 4px rgba(13,29,69,.25))}
.cart-wrap .pkg[data-pc] .pkg-name{position:static;display:block;padding:0 22px 0!important;margin-top:-4px;font-size:1.45rem!important;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink)!important}
/* price */
.cart-wrap .pkg[data-pc] .pkg-price{display:block;padding:10px 22px 0;margin:0!important;font-size:2.4rem!important;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--ink)!important}
.cart-wrap .pkg[data-pc] .pkg-price.q{font-size:1.15rem!important;letter-spacing:-.015em;line-height:1.25}
.cart-wrap .pkg[data-pc] .pkg-promo{display:block;padding:6px 22px 0;margin:0!important;font-family:var(--serif);font-style:italic;font-size:1.05rem!important;font-weight:400!important;color:var(--ink)!important}
.cart-wrap .pkg[data-pc] .pkg-desc{display:block;padding:10px 22px 0;margin:0;font-size:.9rem;color:var(--muted)}
/* "swatches": the card's own bullets as labelled dots */
.cart-wrap .pkg[data-pc] .svc-points{display:flex;flex-wrap:wrap;gap:8px 16px;padding:14px 22px 0!important;margin:0!important;columns:auto!important;list-style:none}
.cart-wrap .pkg[data-pc] .svc-points li{position:relative;padding:0 0 0 20px!important;margin:0!important;font-size:.82rem;line-height:1.35;font-weight:500;color:var(--ink)}
.cart-wrap .pkg[data-pc] .svc-points li::before{content:""!important;position:absolute;left:0;top:.15em!important;width:13px!important;height:13px!important;border-radius:50%;
  background:var(--bgA)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 0 1px rgba(13,29,69,.18)}
.cart-wrap .pkg[data-pc] .svc-points li:nth-child(3n+2)::before{background:var(--bgB)!important}
.cart-wrap .pkg[data-pc] .svc-points li:nth-child(3n+3)::before{background:#c9d6df!important}
/* dark full-width pill = the card's existing "Financing available" link */
.cart-wrap .pkg[data-pc] a.fin-pkg{order:99;display:flex!important;align-items:center;justify-content:space-between;width:auto!important;margin:auto 18px 18px!important;
  padding:15px 16px 15px 22px!important;border-radius:999px!important;border:0!important;background:var(--ink)!important;color:#fff!important;font-size:.95rem!important;font-weight:600;text-decoration:none!important;align-self:stretch!important}
.cart-wrap .pkg[data-pc] a.fin-pkg::after{content:"" / "";width:30px;height:30px;border-radius:50%;flex:none;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-6 6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.cart-wrap .pkg[data-pc] a.fin-pkg:hover{background:#000!important}
.cart-wrap .pkg[data-pc] .svc-points{margin-bottom:18px!important}
@media(max-width:860px){.cart-wrap .pkg-grid{grid-template-columns:1fr;gap:20px}}
@media(prefers-reduced-motion:reduce){.cart-wrap .pkg[data-pc]{transition:none}}

.cart-wrap .pkg[data-pc] .pkg-head picture{order:0}
.cart-wrap .pkg[data-pc] .pkg-name{order:2}
.cart-wrap .pkg[data-pc] .pkg-price{order:3}
.cart-wrap .pkg[data-pc] .pkg-promo{order:4}
.cart-wrap .pkg[data-pc] .pkg-desc{order:5}
.cart-wrap .pkg[data-pc] .svc-points{order:6}