/* The order page (buy.html). Everything else comes from site.css. */

/* The top bar's link to this page. */
.nav a[aria-current="page"]{color:var(--accent-ink)}

.shop{padding:48px 0 88px}
.shop-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}

/* Pictures: one large, the small ones under it. js/site.js fills .thumbs and
   switches the large one ([data-gallery]). */
.shop-stage{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--box-radius)}
.shop-stage .slide{display:none;width:100%;height:100%;object-fit:cover}
.shop-stage .slide.is-on{display:block}
.shop-arrow{position:absolute;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:rgba(18,17,19,.72);color:var(--ink);cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s}
.shop-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.shop-arrow svg{width:20px;height:20px}
.shop-arrow.prev{left:14px}
.shop-arrow.next{right:14px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.thumb{display:block;aspect-ratio:1/1;padding:0;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--box-radius);cursor:pointer;opacity:.7;transition:opacity .15s,border-color .15s}
.thumb:hover{opacity:1}
.thumb[aria-current="true"]{opacity:1;border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-ink)}
.thumb img{width:100%;height:100%;object-fit:cover}
.single .shop-arrow,.single .thumbs{display:none}

.shop-info{padding-top:8px}
.shop-info h1{margin:0 0 10px;max-width:none;font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-.03em}
.shop-price{margin:0 0 26px;color:var(--dim);font-size:21px;font-weight:600}

.shop-buy{display:flex;align-items:center;justify-content:center;width:100%;max-width:440px;height:52px;margin:0;
  border:1px solid rgba(243,238,238,.4);border-radius:var(--btn-radius);background:transparent;color:var(--dim);
  font:inherit;font-size:16px;font-weight:600;cursor:default}

.shop-h2{margin:40px 0 6px;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.shop-release{max-width:440px;margin:0;color:var(--dim)}
.shop-steps{max-width:440px;margin:8px 0 10px;padding-left:1.4em;color:var(--dim)}
.shop-steps li+li{margin-top:6px}
.shop-steps li::marker{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .shop{padding:28px 0 64px}
  .shop-grid{grid-template-columns:1fr;gap:28px}
  .shop-info{padding-top:0}
}
@media (max-width:560px){
  .thumbs{gap:8px}
  .shop-buy,.shop-release,.shop-steps{max-width:none}
}