/* /shop: the merch front door. Builds on v3.css tokens and pages.css (.head, .involve, .btn). Phone first. */

.shop-hero{padding-block:56px 40px;border-bottom:1px solid var(--hair)}
.shop-hero-in{display:grid;gap:36px;align-items:center}
.shop-hero h1{font-size:clamp(40px,6.4vw,84px);letter-spacing:-.02em;line-height:.98;max-width:12ch}
.shop-hero h1 .dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--red);margin-left:.08em}
.shop-hero .lead{color:#DCE8F5;margin:22px 0 28px;max-width:46ch}
.shop-hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.shop-hero-link{color:#F7F8FA;font-weight:600;text-decoration:none;border-bottom:2px solid var(--sky)}
.shop-hero-link:hover{border-bottom-color:#F7F8FA}
.shop-hero-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shop-hero-pics img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.shop-hero-pics img:nth-child(2){transform:translateY(-18px)}
@media (min-width:900px){
  .shop-hero{padding-block:88px 72px}
  .shop-hero-in{grid-template-columns:1fr 1.05fr;gap:56px}
}

.shop-band{padding-block:64px 24px}
.shop-band h2{margin-bottom:26px}
.shop-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.shop-cols{grid-template-columns:repeat(2,1fr)}
.shop-feat{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.shop-cols{grid-template-columns:repeat(4,1fr);gap:18px}.shop-feat{grid-template-columns:repeat(3,1fr);gap:18px}}
@media (min-width:1100px){.shop-feat{grid-template-columns:repeat(6,1fr)}}

/* collection tiles: the photo with the name over a navy fade */
.shop-tile{position:relative;display:block;border-radius:14px;overflow:hidden;isolation:isolate;text-decoration:none;color:#F7F8FA;border:1px solid rgba(167,199,231,.22);background:#12264B}
.shop-tile img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .35s ease}
.shop-tile::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(11,26,54,.92) 0%,rgba(11,26,54,.5) 32%,rgba(11,26,54,0) 58%)}
.shop-tile-words{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 16px 18px;display:grid;gap:4px}
.shop-tile-words b{font-size:clamp(17px,2vw,21px);font-weight:800;line-height:1.15}
.shop-tile-words b::after{content:" \2192";color:#A7C7E7}
.shop-tile-words small{font-size:13px;color:#C9D6E8;line-height:1.35}
.shop-tile:hover img{transform:scale(1.04)}
.shop-tile:hover{border-color:#A7C7E7}
.shop-tile:focus-visible{outline:3px solid #A7C7E7;outline-offset:3px}

/* featured product cards */
.shop-featured{border-top:1px solid var(--hair);margin-top:40px}
.shop-card{display:grid;gap:8px;text-decoration:none;color:#F7F8FA}
.shop-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:12px;border:1px solid rgba(167,199,231,.22);transition:transform .3s ease,border-color .15s}
.shop-card-name{font-weight:700;font-size:15px;line-height:1.3}
.shop-card-go{font-size:13px;font-weight:600;color:#A7C7E7}
.shop-card-go::after{content:" \2192"}
.shop-card:hover img{transform:translateY(-3px);border-color:#A7C7E7}
.shop-card:focus-visible{outline:3px solid #A7C7E7;outline-offset:3px;border-radius:12px}

.shop-why{margin-top:48px}
.shop-fine{color:var(--ink-2);margin-top:14px}

@media (prefers-reduced-motion:reduce){.shop-tile img,.shop-card img{transition:none}.shop-tile:hover img{transform:none}}