/* What's Included: "Every Package, Line by Line" (v07, the same file on all five sites). Coloured by each site's own
   shared names (--leaf, --card, --rule, --muted, --petal, --petal-text), so it looks at home on every brand. */
.pk-all { margin: 0 0 clamp(36px, 6vw, 64px); }
.pk-all > h2 { margin: 0 0 8px; }
.pk-intro { color: var(--muted); margin: 0 0 18px; max-width: 62ch; }
.pk { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; margin: 0 0 10px; overflow: hidden; }
.pk summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 18px; padding: 16px 20px; cursor: pointer; list-style: none; }
.pk summary::-webkit-details-marker { display: none; }
.pk summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform .2s; }
.pk[open] summary::after { transform: rotate(225deg); margin: 4px 4px 0 0; }
.pk summary:hover .pk-name { text-decoration: underline; text-underline-offset: 3px; }
.pk summary:focus-visible { outline: 3px solid var(--petal); outline-offset: -3px; }
.pk-name { font-weight: 700; font-size: 1.15rem; color: var(--leaf); }
.pk-price { font-weight: 700; color: var(--leaf); white-space: nowrap; }
.pk-count { grid-column: 1 / -1; grid-row: 2; justify-self: start; font-size: 0.875rem; font-weight: 600; color: var(--petal-text); }
.pk-body { border-top: 1px solid var(--rule); padding: 18px 20px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.pk-group h3 { font-size: 1rem; margin: 0 0 8px; color: var(--leaf); }
.pk-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pk-ticks li { position: relative; padding-left: 26px; line-height: 1.45; font-size: 0.9375rem; }
.pk-ticks li::before { content: ""; position: absolute; left: 4px; top: .3em; width: 6px; height: 11px; border-right: 2.5px solid var(--petal-text); border-bottom: 2.5px solid var(--petal-text); transform: rotate(40deg); }
.pk-explained { margin: 0 0 18px; }
@media (max-width: 720px) {
  .pk-body { grid-template-columns: 1fr; }
  .pk summary { padding: 14px 16px; gap: 4px 12px; }
  .pk-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pk summary::after { transition: none; } }