/* Shop page */
.page-hero--shop { padding-bottom: clamp(96px, 11vw, 136px); }
.shop-hero__photo img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 30% 60%; box-shadow: var(--sh-2); }
.page-hero--shop .hero__note { margin-top: 1.25rem; }

/* Benefit tiles overlapping the hero */
.shop-tiles-wrap { position: relative; z-index: 2; margin-top: calc(clamp(96px, 11vw, 136px) * -0.5); }
.shop-tiles { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 640px) { .shop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .shop-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-tile { display: flex; gap: 14px; align-items: flex-start; padding: 20px; box-shadow: var(--sh-2); }
.shop-tile .icon-chip { margin: 0; flex: none; }
.shop-tile h2 { font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em; }
.shop-tile p { margin-top: 4px; font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }

/* Product types */
.types { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.type { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 68px; padding: 12px 16px; border-radius: var(--r); background: var(--tint); font-weight: 700; line-height: 1.3; }
.type small { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 500; color: var(--ink-3); text-wrap: balance; }
.type .icon-chip { flex: none; width: 38px; height: 38px; margin: 0; border-radius: 12px; background: #fff; }
.type .icon-chip .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.type--link { justify-content: space-between; background: var(--p600); color: #fff; text-decoration: none; transition: background-color var(--t-color), box-shadow var(--t-shadow), translate var(--t-lift); }
.type--link:hover { background: var(--p700); color: #fff; }
@media (hover: hover) { .type--link:hover { box-shadow: 0 8px 22px rgba(76, 29, 149, 0.26); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .type--link:hover { translate: 0 -2px; } }
.types > li:last-child { display: block; }
@media (max-width: 380px) { .types { grid-template-columns: 1fr; } }
@media (min-width: 381px) and (max-width: 479px) {
  .type { gap: 10px; padding: 12px; font-size: 0.97rem; }
  .type .icon-chip { width: 30px; height: 30px; border-radius: 10px; }
  .type .icon-chip .icon { width: 16px; height: 16px; }
}

/* Prints on white mats */
.prints { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .prints { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.print { margin: 0; padding: 16px 12px 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); text-align: center; }
.print--wide { grid-column: span 2; }
.print__mat { display: grid; place-items: center; height: 208px; }
.print__mat img { width: auto; max-width: 100%; height: auto; box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(29, 11, 62, 0.14); }
.print figcaption { margin-top: 14px; font-size: 0.95rem; font-weight: 700; line-height: 1.3; }

/* Bracelets */
.bracelets { display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bracelet { margin: 0; padding: 12px 12px 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); text-align: center; }
.bracelet__mat { display: grid; place-items: center; height: 132px; border-radius: var(--r); background: var(--tint); }
.bracelet__mat img { width: auto; height: auto; max-width: 100%; border-radius: 6px; }
.bracelet figcaption { margin-top: 12px; padding-inline: 4px; font-size: 0.95rem; font-weight: 700; line-height: 1.3; }

/* In-person states */
.states { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.states li { display: inline-flex; align-items: center; gap: 8px; padding: 0.55em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 700; }
.section--dark .states li { color: #fff; }
.states .icon { color: var(--amber); }
.shop-tiles-wrap + .section { padding-top: clamp(40px, 5vw, 64px); }
.section .link-arrow { min-height: 44px; }