/*
=====================================================
Space Vanta — Collection page (1.0)
Fixed signature: chamfer / blue edge-light / layered offset / shards.
Per-category themes only change: background tone, rhythm, motion.
Theme is chosen by data-sv-theme on .svc (breakfast | snacks | home | care).
=====================================================
*/

/* ---------- base + theme tokens ---------- */
.svc {
  --svc-bg: var(--sv-base);
  --svc-wash: #E8E2D6;
  --svc-gap: 20px;
  --svc-cols: 4;
  --svc-ease: cubic-bezier(.4, 0, .2, 1);
  --svc-dur: 360ms;

  background: var(--svc-bg);
  color: var(--sv-ink);
  font-family: var(--sv-font-body);
  font-size: 16px;
  line-height: 1.5;
  padding-block: clamp(16px, 3vw, 40px) clamp(48px, 7vw, 96px);
}
.svc[data-sv-theme="breakfast"] { --svc-bg: #F6EFE4; --svc-wash: #F1D9B0; --svc-gap: 24px; --svc-ease: cubic-bezier(.22, 1, .36, 1); --svc-dur: 520ms; }
.svc[data-sv-theme="snacks"]    { --svc-bg: #F4E8DC; --svc-wash: #E9B8A0; --svc-gap: 16px; --svc-ease: cubic-bezier(.2, .7, .2, 1);   --svc-dur: 260ms; }
.svc[data-sv-theme="home"]      { --svc-bg: #EEF0F2; --svc-wash: #C9D1D9; --svc-gap: 24px; --svc-ease: cubic-bezier(.4, 0, .2, 1);    --svc-dur: 360ms; }
.svc[data-sv-theme="care"]      { --svc-bg: #F2F6FA; --svc-wash: #CFE0F5; --svc-gap: 32px; --svc-cols: 3; --svc-ease: ease;          --svc-dur: 600ms; }

.svc *, .svc *::before, .svc *::after { box-sizing: border-box; }
.svc :where(a) { color: inherit; text-decoration: none; }
.svc ul, .svc ol { margin: 0; padding: 0; list-style: none; }
.svc h1, .svc h2, .svc p { margin: 0; }
.svc img { display: block; max-width: 100%; }

.svc__wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

.svc-sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- signature: chamfered plate with edge-light ---------- */
.svc-plate {
  --c: var(--sv-cut);
  position: relative;
  filter: drop-shadow(0 18px 26px rgba(27, 32, 38, .15)) drop-shadow(0 2px 4px rgba(27, 32, 38, .10));
}
.svc-plate__face {
  background: var(--sv-silver-1);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.svc-plate::before, .svc-plate::after {
  content: ""; position: absolute; pointer-events: none;
  width: calc(var(--c) * 1.4142); height: 2px;
  background: linear-gradient(90deg, transparent, var(--sv-blue) 22%, var(--sv-blue) 78%, transparent);
  box-shadow: 0 0 10px 1px var(--sv-glow);
  transform: rotate(45deg);
}
.svc-plate::before { top: calc(var(--c) / 2 - 1px);    right: calc(var(--c) * -.2071); }
.svc-plate::after  { bottom: calc(var(--c) / 2 - 1px); left:  calc(var(--c) * -.2071); }

.svc-panel {
  --c: var(--sv-cut);
  filter: drop-shadow(0 14px 22px rgba(27, 32, 38, .14)) drop-shadow(0 1px 3px rgba(27, 32, 38, .10));
}
.svc-panel__face {
  background: var(--sv-surface);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}

/* ---------- buttons ---------- */
.svc-btn {
  display: inline-block; padding: 12px 22px; font: 600 15px/1.2 var(--sv-font-body);
  color: #fff; cursor: pointer; border: 0;
  background: linear-gradient(225deg, transparent 9px, var(--sv-blue-ink) 0);
  transition: background-color var(--svc-dur) var(--svc-ease);
}
.svc-btn:hover { background: linear-gradient(225deg, transparent 9px, #1946B3 0); }
.svc-btn--ghost {
  color: var(--sv-ink); background: transparent; border: 1px solid var(--sv-ink);
}
.svc-btn--ghost:hover { background: var(--sv-ink); color: #fff; }
.svc a:focus-visible, .svc summary:focus-visible, .svc-btn:focus-visible {
  outline: 2px solid var(--sv-blue-ink); outline-offset: 3px;
}

/* ---------- hero ---------- */
.svc-hero { padding-block: 4px 0; }
.svc-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--sv-ink-2); margin-bottom: 18px; }
.svc-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--sv-silver-3); }
.svc-crumbs a:hover { color: var(--sv-ink); text-decoration: underline; }
.svc-crumbs [aria-current] { color: var(--sv-ink); }

.svc-hero__stage { position: relative; display: block; }
.svc-hero__plate { --c: 18px; }
.svc-hero__plate .svc-plate__face img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }

.svc-hero__panel { position: relative; z-index: 2; margin: -26px 14px 0; }
.svc-hero__panel .svc-panel__face { padding: 22px 22px 24px; }
.svc-hero__title {
  font: 600 clamp(1.9rem, 1.1rem + 3vw, 3rem)/1.05 var(--sv-font-display);
  letter-spacing: -.02em; margin-bottom: 18px;
}

.svc-shard { display: none; }

@media (min-width: 900px) {
  .svc-hero__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding-bottom: 36px; }
  .svc-hero__plate { --c: 28px; grid-column: 1 / 9; grid-row: 1; }
  .svc-hero__panel { grid-column: 8 / 13; grid-row: 1; margin: 0 0 -36px; }
  .svc-hero__panel .svc-panel__face { padding: 32px 32px 34px; }

  .svc-shard {
    display: block; position: absolute; pointer-events: none; z-index: 1;
    background: linear-gradient(135deg, var(--sv-silver-1), var(--sv-silver-2) 55%, var(--sv-silver-3));
    animation: svc-assemble 760ms cubic-bezier(.2, .8, .2, 1) both;
  }
  .svc-shard--a { left: -22px; bottom: 6px; width: 128px; height: 66px; clip-path: polygon(0 100%, 34% 0, 100% 26%, 62% 100%); --dx: -30px; --dy: 22px; }
  .svc-shard--b { left: calc(66.66% - 70px); top: -18px; width: 92px; height: 56px; clip-path: polygon(0 40%, 70% 0, 100% 100%, 20% 86%); --dx: 24px; --dy: -18px; animation-delay: 90ms; }
}
.svc-hero__plate, .svc-hero__panel { animation: svc-in 520ms ease both; }
.svc-hero__panel { animation-delay: 120ms; }
/* image already carries the title: wide plate and a small floating button plate instead of a big empty panel */
.svc-hero--titled .svc-hero__panel .svc-panel__face { padding: 16px 18px; }
@media (min-width: 900px) {
  .svc-hero--titled .svc-hero__plate { grid-column: 1 / 11; }
  .svc-hero--titled .svc-hero__panel { grid-column: 9 / 13; justify-self: end; margin: 0 0 -30px; }
  .svc-hero--titled .svc-hero__panel .svc-panel__face { padding: 18px 20px; }
}
/* no collection image: the panel becomes the hero, with a large title */
.svc-hero--noimage .svc-hero__panel { margin: 0; }
.svc-hero--noimage .svc-hero__panel .svc-panel__face { padding: 30px 26px 32px; }
@media (min-width: 900px) {
  .svc-hero--noimage .svc-hero__stage { padding-bottom: 0; }
  .svc-hero--noimage .svc-hero__panel { grid-column: 1 / 9; margin: 0; }
  .svc-hero--noimage .svc-hero__panel .svc-panel__face { padding: 52px 48px 54px; }
  .svc-hero--noimage .svc-hero__title { font-size: clamp(2.8rem, 2rem + 2.4vw, 4rem); margin-bottom: 26px; }
}
@keyframes svc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes svc-assemble { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } to { opacity: 1; transform: none; } }

/* ---------- shipping strip ---------- */
.svc-ship { margin-top: clamp(40px, 6vw, 56px); }
.svc-ship__bar { min-height: 56px; padding-block: 12px; border-block: 1px solid var(--sv-line); font-size: 14px; color: var(--sv-ink-2); }
.svc-ship__line { color: var(--sv-ink); }
.svc-ship__more { margin-top: 6px; }
.svc-ship__more summary { cursor: pointer; width: fit-content; color: var(--sv-blue-ink); font-weight: 600; }
.svc-ship__detail { margin-top: 10px; display: grid; gap: 8px; }
.svc-ship__detail li { color: var(--sv-ink-2); }
.svc-ship__detail strong { color: var(--sv-ink); font-weight: 600; }
.svc-ship__note { margin-top: 8px; font-size: 13px; }
@media (min-width: 900px) { .svc-ship__bar { min-height: 44px; } }

/* ---------- product grid ---------- */
.svc-products { margin-top: clamp(24px, 4vw, 40px); scroll-margin-top: 96px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 900px) {
  .svc-grid { grid-template-columns: repeat(var(--svc-cols), minmax(0, 1fr)); gap: calc(var(--svc-gap) * 1.6) var(--svc-gap); }
}

.svc-card { min-width: 0; }
.svc-card__frame {
  --c: var(--sv-cut);
  position: relative;
  filter: drop-shadow(0 6px 10px rgba(27, 32, 38, .10));
  transition: transform var(--svc-dur) var(--svc-ease), filter var(--svc-dur) var(--svc-ease);
}
.svc-card__media {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #ECE8E1;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__edge {
  position: absolute; pointer-events: none; opacity: .45;
  top: calc(var(--c) / 2 - 1px); right: calc(var(--c) * -.2071);
  width: calc(var(--c) * 1.4142); height: 2px; transform: rotate(45deg);
  background: linear-gradient(90deg, transparent, var(--sv-blue) 22%, var(--sv-blue) 78%, transparent);
  box-shadow: 0 0 8px 1px var(--sv-glow);
  transition: opacity var(--svc-dur) var(--svc-ease);
}

/* second image layer (loaded on first interaction by svc-collection.js) */
.svc-card__shard { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--svc-dur) var(--svc-ease); }
.svc-card__shard img { width: 100%; height: 100%; object-fit: cover; }
.svc[data-sv-theme="snacks"] .svc-card__shard {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--sv-glow));
}
.svc[data-sv-theme="snacks"] .svc-card__shard img {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: clip-path var(--svc-dur) var(--svc-ease);
}

.svc-card__info { padding-top: 12px; display: grid; gap: 6px; }
.svc-card__title {
  font: 500 15px/1.35 var(--sv-font-body); color: var(--sv-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-card__price { font: 600 15px/1.2 var(--sv-font-body); font-variant-numeric: tabular-nums; color: var(--sv-ink); }

.svc[data-sv-theme="home"] .svc-card { padding-bottom: 14px; border-bottom: 1px solid var(--sv-line); }

@media (hover: hover) {
  .svc-card:hover .svc-card__frame,
  .svc-card:has(.svc-card__title:focus-visible) .svc-card__frame {
    transform: translateY(-6px);
    filter: drop-shadow(0 16px 20px rgba(27, 32, 38, .16));
  }
  .svc-card:hover .svc-card__edge,
  .svc-card:has(.svc-card__title:focus-visible) .svc-card__edge { opacity: 1; }

  .svc-card.is-alt-ready:hover .svc-card__shard,
  .svc-card.is-alt-ready:has(.svc-card__title:focus-visible) .svc-card__shard { opacity: 1; }

  /* snacks: the frame splits along a diagonal and shows the second image */
  .svc[data-sv-theme="snacks"] .svc-card:hover .svc-card__frame { transform: translateY(-2px); }
  .svc[data-sv-theme="snacks"] .svc-card.is-alt-ready:hover .svc-card__shard img,
  .svc[data-sv-theme="snacks"] .svc-card.is-alt-ready:has(.svc-card__title:focus-visible) .svc-card__shard img {
    clip-path: polygon(30% 0, 78% 0, 60% 100%, 12% 100%);
  }

  /* home: precise, no overshoot */
  .svc[data-sv-theme="home"] .svc-card:hover .svc-card__frame { transform: translateY(-3px); }

  /* care: still, light grows */
  .svc[data-sv-theme="care"] .svc-card:hover .svc-card__frame,
  .svc[data-sv-theme="care"] .svc-card:has(.svc-card__title:focus-visible) .svc-card__frame {
    transform: none; filter: drop-shadow(0 8px 22px rgba(47, 107, 255, .24));
  }
  .svc[data-sv-theme="care"] .svc-card__edge { opacity: .4; }
  .svc[data-sv-theme="care"] .svc-card:hover .svc-card__edge { opacity: 1; }
}

/* shuffle: hide the grid until it is reordered; a timer reveals it anyway if the script never runs */
.svc-grid[data-svc-shuffle]:not(.is-shuffled) { opacity: 0; animation: svc-reveal 0s linear 1.2s forwards; }
@keyframes svc-reveal { to { opacity: 1; } }

.svc-empty { padding: 48px 0; color: var(--sv-ink-2); }

/* editorial tile inside the grid */
.svc-tile { grid-column: span 2; min-width: 0; }
.svc-tile__link { display: block; height: 100%; }
.svc-tile .svc-panel { height: 100%; }
.svc-tile .svc-panel__face { height: 100%; min-height: 220px; padding: 26px; background: var(--svc-wash); display: grid; align-content: end; gap: 8px; }
.svc-tile__title { font: 600 1.4rem/1.15 var(--sv-font-display); letter-spacing: -.01em; }
.svc-tile__text { color: var(--sv-ink); max-width: 34ch; }
.svc-tile__link:focus-visible { outline-offset: -6px; }

/* ---------- pager ---------- */
.svc-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.svc-pager:not(:has(a)) { display: none; }
.svc-pager__now { color: var(--sv-ink-2); font-size: 14px; }

/* ---------- core business entrances (bundle / made to order / scene) ---------- */
.svc-xlinks { margin-top: clamp(56px, 8vw, 104px); }
.svc-xlinks:not(:has(a)) { display: none; }
.svc-xlinks__grid { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .svc-xlinks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
  .svc-xlinks__grid > :nth-child(2) { margin-top: -18px; } /* the middle plate sits one level higher */
}

.svc-xcard { --c: var(--sv-cut); position: relative; display: block; padding: 0 22px 22px 0; }
.svc-xcard__stack i {
  position: absolute; top: 0; left: 0; right: 22px; bottom: 22px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: transform var(--svc-dur) var(--svc-ease);
}
.svc-xcard__stack i:nth-child(1) { background: linear-gradient(135deg, var(--sv-silver-2), var(--sv-silver-3)); transform: translate(22px, 22px); opacity: .55; }
.svc-xcard__stack i:nth-child(2) { background: linear-gradient(135deg, var(--sv-silver-1), var(--sv-silver-2)); transform: translate(11px, 11px); }

.svc-xcard .svc-panel { position: relative; z-index: 2; transition: transform var(--svc-dur) var(--svc-ease); }
.svc-xcard .svc-panel::after {
  content: ""; position: absolute; pointer-events: none; opacity: .55;
  right: calc(var(--c) * -.2071); bottom: calc(var(--c) / 2 - 1px);
  width: calc(var(--c) * 1.4142); height: 2px; transform: rotate(-45deg);
  background: linear-gradient(90deg, transparent, var(--sv-blue) 22%, var(--sv-blue) 78%, transparent);
  box-shadow: 0 0 8px 1px var(--sv-glow);
  transition: opacity var(--svc-dur) var(--svc-ease);
}
.svc-xcard .svc-panel__face { padding: 26px 26px 28px; display: grid; gap: 8px; justify-items: start; }
.svc-glyph { width: 56px; height: 56px; margin-bottom: 10px; overflow: visible; }
.svc-glyph .g-ink { fill: var(--sv-ink); }
.svc-glyph .g-s2 { fill: var(--sv-silver-2); }
.svc-glyph .g-s3 { fill: var(--sv-silver-3); }
.svc-glyph .g-edge { stroke: var(--sv-blue); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--sv-glow)); }
.svc-xcard__title { font: 600 1.2rem/1.2 var(--sv-font-display); letter-spacing: -.01em; }
.svc-xcard__text { color: var(--sv-ink-2); font-size: 15px; max-width: 34ch; }
.svc-xcard__go { margin-top: 10px; font: 600 14px/1.2 var(--sv-font-body); color: var(--sv-ink); box-shadow: inset 0 -2px 0 var(--sv-blue); padding-bottom: 3px; }
.svc-xcard:focus-visible { outline-offset: 6px; }

@media (hover: hover) {
  .svc-xcard:hover .svc-panel { transform: translate(-4px, -4px); }
  .svc-xcard:hover .svc-panel::after { opacity: 1; }
  .svc-xcard:hover .svc-xcard__stack i:nth-child(1) { transform: translate(34px, 34px); }
  .svc-xcard:hover .svc-xcard__stack i:nth-child(2) { transform: translate(17px, 17px); }
}

/* ---------- sibling categories: floating plates, coloured by destination ---------- */
.svc-sibs { margin-top: clamp(48px, 7vw, 88px); }
.svc-sibs:not(:has(a)) { display: none; }
.svc-sibs ul {
  display: flex; gap: 18px; overflow-x: auto; padding: 18px 10px 22px; margin: -18px -10px -22px;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.svc-sibs li {
  --c: 14px; flex: 0 0 min(72%, 240px); position: relative; isolation: isolate; scroll-snap-align: start;
  filter: drop-shadow(0 6px 10px rgba(27, 32, 38, .10));
  transition: transform var(--svc-dur) var(--svc-ease), filter var(--svc-dur) var(--svc-ease);
}
@media (min-width: 900px) {
  .svc-sibs ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; overflow: visible; scroll-snap-type: none; }
  .svc-sibs li { flex: none; }
}
.svc-sibs li::before {
  content: ""; position: absolute; pointer-events: none; z-index: 2; opacity: .45;
  top: calc(var(--c) / 2 - 1px); right: calc(var(--c) * -.2071);
  width: calc(var(--c) * 1.4142); height: 2px; transform: rotate(45deg);
  background: linear-gradient(90deg, transparent, var(--sv-blue) 22%, var(--sv-blue) 78%, transparent);
  box-shadow: 0 0 8px 1px var(--sv-glow);
  transition: opacity var(--svc-dur) var(--svc-ease);
}
.svc-sibs li::after { /* ghost plate behind the current category */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(135deg, var(--sv-silver-2), var(--sv-silver-3));
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
  transform: translate(9px, 9px);
  transition: opacity var(--svc-dur) var(--svc-ease);
}
.svc-sib {
  --tile-wash: #E8E2D6;
  position: relative; display: grid; align-content: end; min-height: 96px; padding: 18px 20px;
  background: var(--tile-wash); color: var(--sv-ink);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
.svc-sib::after { /* fragment in the corner */
  content: ""; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px;
  background: rgba(27, 32, 38, .09); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.svc-sib[data-svc-tile="breakfast"] { --tile-wash: #F1D9B0; }
.svc-sib[data-svc-tile="snacks"]    { --tile-wash: #E9B8A0; }
.svc-sib[data-svc-tile="home"]      { --tile-wash: #C9D1D9; }
.svc-sib[data-svc-tile="care"]      { --tile-wash: #CFE0F5; }
.svc-sib__name { font: 600 1.05rem/1.2 var(--sv-font-display); letter-spacing: -.005em; }
.svc-sibs li:has(a[aria-current="page"]) { transform: translateY(-10px); filter: drop-shadow(0 16px 20px rgba(27, 32, 38, .18)); }
.svc-sibs li:has(a[aria-current="page"])::before { opacity: 1; }
.svc-sibs li:has(a[aria-current="page"])::after { opacity: .75; }
.svc-sib[aria-current="page"] { background: var(--sv-ink); color: #fff; }
.svc-sib[aria-current="page"]::after { background: rgba(255, 255, 255, .12); }
.svc-sib:focus-visible { outline-offset: -6px; outline-color: var(--sv-blue); }
@media (hover: hover) {
  .svc-sibs li:hover:not(:has(a[aria-current="page"])) { transform: translateY(-6px); filter: drop-shadow(0 12px 16px rgba(27, 32, 38, .16)); }
  .svc-sibs li:hover::before { opacity: 1; }
}

/* ---------- collection text (SEO) ---------- */
.svc-prose { margin-top: clamp(48px, 7vw, 88px); }
.svc-prose h2 { font: 600 1.35rem/1.2 var(--sv-font-display); margin-bottom: 14px; }
.svc-prose__body { max-width: 68ch; color: var(--sv-ink-2); }
.svc-prose__body p { margin: 0 0 1em; }
.svc-prose__body a { color: var(--sv-blue-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc *, .svc *::before, .svc *::after { animation: none !important; transition: none !important; }
  .svc-card:hover .svc-card__frame,
  .svc-xcard:hover .svc-panel,
  .svc-sibs li:hover:not(:has(a[aria-current="page"])) { transform: none !important; }
  .svc-grid[data-svc-shuffle]:not(.is-shuffled) { animation: svc-reveal 0s linear 1.2s forwards !important; }
}