/* Shop + collection pages */
.shop-head { padding-bottom: var(--s-6); }
.shop-head .section-head p { justify-self: start; }
@media (min-width: 800px) { .shop-head .section-head p { justify-self: end; text-align: right; } }
.page-shop .toolbar, .page-collection .toolbar { top: var(--header-h-compact); }
a.chip { text-decoration: none; }
a.chip[aria-current="page"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.shop-note { display: grid; gap: var(--s-5); padding-top: var(--s-7); border-top: 1px solid var(--line); }
@media (min-width: 800px) { .shop-note { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.shop-note__item { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-4); align-items: start; }
.shop-note__item svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.shop-note__item strong { display: block; font-weight: 500; margin-bottom: 4px; }

/* Collection hero */
.coll-hero { position: relative; min-height: 56svh; display: grid; align-items: end; color: var(--paper); overflow: hidden; isolation: isolate; }
.coll-hero__media { position: absolute; inset: 0; z-index: -1; }
.coll-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04) translateY(calc(var(--scroll-y, 0) * 0.1px)); opacity: 0; transition: opacity 1.2s var(--ease-out); }
.coll-hero__media img.is-loaded { opacity: 1; }
.coll-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(19 19 18 / .3), rgb(19 19 18 / .05) 40%, rgb(19 19 18 / .7)); }
.coll-hero__inner { display: grid; gap: var(--s-3); padding-block: calc(var(--header-h) + var(--s-6)) var(--s-7); }
.coll-hero__inner .crumbs { color: rgb(244 243 239 / .7); margin-bottom: var(--s-4); }
.coll-hero__inner .crumbs li[aria-current] { color: var(--paper); }
.coll-hero__inner p { max-width: 48ch; opacity: .9; }

.coll-more__grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .coll-more__grid { grid-template-columns: repeat(3, 1fr); } }