/*
================================================================
Space Vanta Theme 2.0
Module: Cart page — logo palette layer
Path: public/sv-cart/page-dna.css
Version: PAGE-DNA-001      (private: loaded by sections/cart/cart.html)

Colour weight for this area (the page is long, so most of it stays
warm and quiet; the summary is the one heavy object):
    warm paper 52 · silver faces 22 · gunmetal 20 · blue 6
  - the sticky summary is a gunmetal face with a seam on its top edge:
    it is the thing the eye should return to
  - Regular groups: silver heading bar, solid blue spine
  - Made to order groups: the cooler steel-blue shard face, hatched,
    dashed edge, a dark route panel
  - a few large, very pale facets sit behind the page, like the
    pieces around the S in the logo (no blur, no shadow)
Motion: seam drawn under the title once, groups revealed as facets,
a light pass over each thumbnail, the subtotal ticks. Off under
reduced motion / calm.
================================================================
*/

/* ---- backdrop facets ---- */
html .svpg { position: relative; isolation: isolate; }
html .svpg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(152deg, rgba(219, 217, 218, 0.30) 0 14%, rgba(219, 217, 218, 0) 14.1%) 100% 72px / 40% 420px no-repeat,
    linear-gradient(28deg, rgba(174, 177, 185, 0.18) 0 10%, rgba(174, 177, 185, 0) 10.1%) 0 100% / 38% 420px no-repeat;
}

/* ---- title ---- */
html .svpg__head { position: relative; padding-bottom: 18px; }
html .svpg__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 168px;
  height: 2px;
  background: var(--svd-seam-line);
  transform-origin: left center;
  animation: svd-seam-in 0.9s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html .svpg__count { color: var(--svd-g600); }

/* ---- group cards ---- */
html .svpg__shell {
  background: linear-gradient(135deg, #fffbfa 0%, #aeb1b9 22%, #f1edea 46%, #616570 74%, #dbd9da 100%);
}
html .svpg__group--regular .svpg__ghead {
  background: var(--svd-face-soft);
  box-shadow: inset 0 0 0 1px var(--svd-hair);
}
html .svpg__group--regular .svpg__label { color: var(--svd-g800); }

html .svpg__group--onDemand .svpg__ghead {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(255, 255, 255, 0) 1px 7px),
    var(--svd-face-steel);
  box-shadow: none;
}
html .svpg__group--onDemand .svpg__idx,
html .svpg__group--onDemand .svpg__label,
html .svpg__group--onDemand .svpg__gcount { color: #fff; }
html .svpg__group--onDemand .svpg__gline { background: linear-gradient(90deg, rgba(229, 255, 255, 0.7), rgba(229, 255, 255, 0)); }
html .svpg__group--onDemand .svpg__chip { color: var(--svd-ice); border-color: rgba(229, 255, 255, 0.7); }
html .svpg__group--onDemand .svpg__node { background: var(--svd-ice); border-color: var(--svd-ice); }

@keyframes svpg-facet {
  from { clip-path: polygon(16px 0, 16px 0, 16px 100%, 0 100%, 0 16px); opacity: 0; }
  to { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); opacity: 1; }
}
html .svpg__main:not(.is-settled) .svpg__lift {
  animation: svpg-facet 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--d, 0) * 1ms);
}

/* ---- thumbnails ---- */
html .svpg__thumb-frame { background: linear-gradient(135deg, #fffbfa 0%, #aeb1b9 30%, #f1edea 55%, #898c95 100%); }
html .svpg__group--onDemand .svpg__thumb-frame { background: linear-gradient(135deg, #e5ffff 0%, #627b99 35%, #c1bdbe 60%, #485d7c 100%); }
html .svpg__thumb-img { position: relative; background: #e9e3d8; }
html .svpg__thumb-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(229, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 62%) -140% 0 / 220% 100% no-repeat;
  animation: svd-glint 1.2s 0.6s ease both;
  pointer-events: none;
}
html .svpg__main.is-settled .svpg__thumb-img::after { animation: none; }

html .svpg__item { position: relative; }
html .svpg__item::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 14%;
  bottom: 14%;
  width: 2px;
  background: var(--svd-seam-line-v);
  transform: scaleY(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html .svpg__item:hover::before,
html .svpg__item:focus-within::before { transform: scaleY(1); }

/* ---- route ---- */
html .svpg__route { position: relative; background: var(--svd-face-soft); box-shadow: inset 0 0 0 1px var(--svd-hair); }
html .svpg__route::before { content: ""; position: absolute; left: 6px; top: 0; width: 72px; height: 2px; background: var(--svd-seam-line); }
html .svpg__group--onDemand .svpg__route {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
    var(--svd-face-dark);
  box-shadow: inset 0 0 0 1px var(--svd-hair-dark);
}
html .svpg__group--onDemand .svpg__route .svpg__status { color: #fff; }
html .svpg__group--onDemand .svpg__route .svpg__note,
html .svpg__group--onDemand .svpg__route .svpg__thresh { color: rgba(255, 255, 255, 0.78); }
html .svpg__cell { background: #c9c4bb; }
html .svpg__group--onDemand .svpg__cell { background: rgba(255, 255, 255, 0.2); }
html .svpg__cell.is-on { background: linear-gradient(180deg, #4d8dff, #1d6bff); box-shadow: inset 0 1px 0 rgba(229, 255, 255, 0.9); }

/* ---- summary: the heavy object ---- */
html .svpg__plate .svpg__shell { background: linear-gradient(135deg, #aeb1b9 0%, #525864 40%, #313540 70%, #616570 100%); }
html .svpg__plate .svpg__in {
  position: relative;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 0 62%, rgba(255, 255, 255, 0.05) 62% 100%),
    var(--svd-face-deep);
  color: #fff;
}
html .svpg__plate .svpg__in::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--svd-seam-line);
}
html .svpg__sumhead { color: var(--svd-edge); }
html .svpg__sub span { color: rgba(255, 255, 255, 0.86); }
html .svpg__sub strong { color: #fff; }
html .svpg__sumrows li { color: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.14); }
html .svpg__sumrows li span:last-child { color: #fff; }
html .svpg__sumrows .svpg__mono { color: rgba(255, 255, 255, 0.62); }
html .svpg__sumrows svg { color: var(--svd-edge); }
html .svpg__duties { color: var(--svd-ice); }
html .svpg__small { color: rgba(255, 255, 255, 0.66); }
html .svpg__link { color: rgba(255, 255, 255, 0.82); }
html .svpg__link:hover { color: #fff; }
html .svpg__plate .svpg__in :focus-visible { outline-color: var(--svd-ice); }
html .svpg__plate .svpg__in .svpg__sumrows,
html .svpg__plate .svpg__in .svpg__sumrows li { border-color: rgba(255, 255, 255, 0.14); }

/* the subtotal ticks in glowing blue */
html .svpg__sub strong.is-tick { color: var(--svd-ice); }

/* ---- call to action ---- */
html .svpg .svpg__cta { position: relative; overflow: hidden; }
html .svpg .svpg__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(229, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 60%) -150% 0 / 220% 100% no-repeat;
  pointer-events: none;
}
html .svpg .svpg__ctawrap:hover .svpg__cta::after { animation: svd-glint 0.9s ease both; }

/* empty */
html .svpg__empty h2 { color: var(--svd-g800); }

/* ---- mobile: dock is a gunmetal face ---- */
@media (max-width: 899px) {
  html .svpg__dock { background: var(--svd-face-deep); color: #fff; }
  html .svpg__dock .svpg__small, html .svpg__dock span { color: rgba(255, 255, 255, 0.82); }
  html .svpg__dock strong { color: #fff; }
  html .svpg__dock::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--svd-seam-line); }
}

html[data-sv-motion="calm"] .svpg__head::after,
html[data-sv-motion="calm"] .svpg__thumb-img::after,
html[data-sv-motion="calm"] .svpg__lift,
html[data-sv-motion="calm"] .svpg__cta::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html .svpg__head::after, html .svpg__thumb-img::after, html .svpg__main:not(.is-settled) .svpg__lift,
  html .svpg .svpg__cta::after, html .svpg__item::before { animation: none !important; transition: none !important; }
}

/* ---------- v: Regular = Individual + Bundles; per-part checkout; shipping method preview ---------- */
html .svpg__sub-h { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--svd-muted, #5f574d); }
html .svpg__sub-h:first-child { margin-top: 4px; }
html .svpg__sub-h span { font-weight: 600; letter-spacing: .06em; color: var(--svd-steel, #485d7c); }
html .svpg__bundle {
  position: relative; padding: 4px 14px 10px 16px; background: var(--svd-face-soft, #efebe8);
  box-shadow: inset 0 0 0 1px var(--svd-hair, #fff), 0 0 0 1px #d6d1c8;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
html .svpg__bundle::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 2px; background: var(--svd-seam-line-v, linear-gradient(180deg, transparent, #7dadde, #e5ffff, #1d6bff, transparent)); }
html .svpg__bhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
html .svpg__pct { padding: 3px 8px; color: #fff; background: var(--svd-face-deep, #313540); font-size: 10.5px; letter-spacing: .1em; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
html .svpg__bnote { margin: 6px 0 0; font-size: 10.5px; letter-spacing: .04em; color: var(--svd-muted, #5f574d); }
html .svpg__part { margin-top: 14px; }
html .svpg__partbtn { padding: 10px 14px; border: 0; cursor: pointer; background: transparent; color: var(--svd-ink, #252321); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px #aeb6c2; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); transition: background .2s ease, color .2s ease; }
html .svpg__partbtn:hover { color: #fff; background: var(--svd-face-deep, #313540); }
html .svpg__partbtn[aria-busy="true"] { opacity: .6; pointer-events: none; }
html .svpg__methods { display: flex; gap: 6px; margin-bottom: 8px; }
html .svpg__method { padding: 6px 12px; border: 0; cursor: pointer; background: transparent; color: var(--svd-muted, #5f574d); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px #aeb6c2; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
html .svpg__method.is-on { color: #fff; background: var(--svd-face-deep, #313540); box-shadow: none; }
html .svpg__method:focus-visible, html .svpg__partbtn:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 2px; }