/* =========================================================================
   Stillwater Day Spa - My account (account.html) and Packages (packages.html).
   Only what these pages add on top of css/style.css; every colour comes from
   its :root tokens (espresso / gold / ivory).
   ========================================================================= */

/* ---------- visits left per service (My packages, Check a package) ---------- */
.c-items{ list-style:none; margin:.45rem 0 0; padding:0; display:grid; gap:.2rem; max-width:26rem; }
.c-items li{ display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; color:var(--ink-soft);
  padding:.25rem 0; border-bottom:1px dashed var(--line-soft); }
.c-items li:last-child{ border-bottom:0; }
.c-items li b{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.c-items li.is-empty{ opacity:.55; }
.pk-left{ margin-top:.9rem; max-width:none; }

/* ---------- package cards with a photo ---------- */
.pk-grid--rich{ grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr)); gap:1.25rem; }
.pk-card--rich{ padding:0; overflow:hidden; gap:0; }
.pk-img{ display:block; width:100%; max-width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--surface-2); }
.pk-body{ position:relative; display:grid; gap:.4rem; align-content:start; padding:1.15rem 1.3rem 1.35rem; }
.pk-save{ justify-self:start; font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:.15rem .65rem; }
.pk-blurb{ font-size:.9rem; color:var(--ink-soft); margin:0; }
.pk-items{ list-style:none; margin:.2rem 0 .3rem; padding:.55rem 0 0; border-top:1px solid var(--line-soft); display:grid; gap:.25rem; }
.pk-items li{ font-size:.88rem; color:var(--ink); }
.pk-items li b{ color:var(--accent); font-weight:500; margin-right:.2rem; font-variant-numeric:tabular-nums; }
.pk-was{ font-size:.95rem; color:var(--ink-soft); margin-left:.35rem; }
.pk-includes{ font-size:.85rem; color:var(--ink-soft); margin:.45rem 0 0; }
.pk-code-big{ font-size:.95rem; color:var(--ink-soft); margin:0 0 .85rem; }
.pk-code-big b{ font-family:var(--font-display); font-size:1.55rem; font-weight:600; color:var(--ink); letter-spacing:.06em; margin-left:.25rem; }

/* ---------- how packages work / bridal terms ---------- */
.pk-steps{ margin:0; padding-left:1.25rem; display:grid; gap:.85rem; color:var(--ink-soft); }
.pk-steps li::marker{ color:var(--accent); font-family:var(--font-display); font-weight:600; }
.pk-steps b{ color:var(--ink); font-weight:500; }
.pk-steps a{ color:var(--accent); }
.pk-terms .info-list li{ align-items:baseline; gap:1rem; }
.pk-terms .info-list .k{ flex:none; min-width:6.5rem; }
.pk-terms .info-list li span:last-child{ text-align:right; }

@media (max-width:520px){
  .pk-terms .info-list li{ flex-direction:column; gap:.15rem; }
  .pk-terms .info-list li span:last-child{ text-align:left; }
  .pk-code-big b{ display:block; margin:.2rem 0 0; }
}

/* A link to one package (packages.html#two-event) stops its card just below the sticky header. */
.pk-card{ scroll-margin-top: 96px; }