/* =====================================================
   ACC STORE — Prints (storefront grid) and Print Detail
   (object + story + transaction). Extracted from
   /References/prints.html and /References/print-detail.html.
===================================================== */

/* ---------- Prints storefront grid ---------- */
.prints-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
  margin:0 var(--margin);
  padding-bottom:clamp(64px,8vw,110px);
}
.print-entry{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--acc-stone);
  aspect-ratio:4/3;
  text-decoration:none;
  color:inherit;
}
.print-entry .media__ph{ transition:transform 1s var(--ease); }
.print-entry:hover .media__ph{ transform:scale(1.01); }

.print-entry__overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:18px;
  text-align:center;
  background:rgba(var(--acc-ink-rgb),0);
  opacity:0;
  transition:opacity var(--transition-standard) var(--ease), background-color var(--transition-standard) var(--ease);
}
.print-entry:hover .print-entry__overlay{
  opacity:1;
  background:rgba(var(--acc-ink-rgb),.4);
}
.print-entry__title{
  font-family:var(--font-primary);
  font-weight:600;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--acc-bg);
}
.print-entry__line{
  font-family:var(--font-accent);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(var(--acc-bg-rgb),.85);
}
.print-entry__overlay .btn{ margin-top:5px; }

@media (max-width:900px){ .prints-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .prints-grid{ grid-template-columns:1fr; } }

/* ---------- Print detail: media left / sticky info right ---------- */
.detail{
  display:grid;
  grid-template-columns:1fr minmax(280px,38%);
  gap:clamp(32px,5vw,64px);
  margin:clamp(20px,3vw,36px) var(--margin) 0;
  padding-bottom:clamp(56px,7.5vw,96px);
}
.detail__media{
  display:flex;
  flex-direction:column;
  gap:var(--gutter);
}
.detail__info{
  position:sticky;
  top:clamp(28px,4vw,64px);
  align-self:start;
}
.detail__info h1{ margin-bottom:8px; }
.detail__info .category{ display:block; margin-bottom:26px; }
.detail__info .story p{
  font-family:var(--font-primary);
  font-size:14.5px;
  line-height:1.75;
  color:var(--acc-charcoal);
  opacity:.8;
  margin:0 0 16px;
}

.purchase-block{
  margin-top:clamp(28px,4vw,40px);
  padding-top:clamp(24px,3.5vw,32px);
  border-top:1px solid var(--acc-stone-line);
}
.purchase-block__facts{
  font-family:var(--font-primary);
  font-size:13.5px;
  line-height:1.7;
  color:var(--acc-charcoal);
  opacity:.7;
  margin:0 0 26px;
}
.purchase-block .section-label{ margin-bottom:14px; }
.purchase-block__price{
  font-family:var(--font-primary);
  font-weight:600;
  font-size:1.05rem;
  margin:0 0 22px;
}

/* ---------- size / material / price tiers — three understated columns,
   no buttons, cards, or fill. Small/Medium/Large replace the old plain
   "16×9 · 24×13.5 · 36×20.5" text line with real dimensions (each print's
   own aspect ratio, computed against the 24/36/45in long-edge reference)
   and the two print-medium prices for that tier. ---------- */
.sizes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,20px);
  margin:0 0 20px;
}
.sizes__name{
  font-family:var(--font-accent);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--acc-charcoal);
  margin:0 0 7px;
}
.sizes__dim{
  font-family:var(--font-primary);
  font-size:13px;
  color:var(--acc-charcoal);
  opacity:.65;
  margin:0 0 11px;
}
.sizes__price{
  font-family:var(--font-primary);
  font-size:12px;
  line-height:1.65;
  color:var(--acc-charcoal);
  opacity:.85;
  margin:0;
}
.sizes__shipping{
  font-family:var(--font-accent);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--acc-stone);
  margin:0 0 24px;
}
@media (max-width:420px){
  .sizes{ grid-template-columns:1fr; gap:16px; }
}

/* ---------- hero gallery: original photo + its three room mockups,
   swapped by the thumbnail row below or the hero's own prev/next.
   hero image swap gets a brief crossfade instead of a hard cut. ---------- */
.detail__hero{ position:relative; }
.detail__hero .media__img{
  transition:opacity .35s var(--ease), transform 1s var(--ease);
}
.hero-nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:none;
  background:rgba(var(--acc-bg-rgb),.75);
  color:var(--acc-charcoal);
  font-family:var(--font-primary);
  font-size:17px;
  line-height:1;
  padding:0;
  cursor:pointer;
  opacity:0;
  transition:opacity var(--transition-fast) ease;
}
.detail__hero:hover .hero-nav,
.detail__hero:focus-within .hero-nav{ opacity:.8; }
.hero-nav:hover{ opacity:1; }
.hero-nav--prev{ left:12px; }
.hero-nav--next{ right:12px; }

/* ---------- thumbnail row, directly under the hero ---------- */
.detail__thumbs{
  display:flex;
  gap:10px;
}
.thumb{
  flex:1;
  aspect-ratio:4/3;
  padding:0;
  border:none;
  background:var(--acc-stone);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  opacity:.55;
  transition:opacity var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.thumb__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.thumb:hover{ opacity:.85; }
.thumb.is-selected{
  opacity:1;
  box-shadow:inset 0 0 0 1.5px var(--acc-charcoal);
}

@media (max-width:860px){
  .detail{ grid-template-columns:1fr; }
  .detail__info{ position:static; margin-top:clamp(32px,4.5vw,48px); }
}

/* ---------- Acrylic — quiet editorial explainer, sitting between the
   primary product area and More Prints. Same shared reference image
   on every print page (it's demonstrating the material, not this
   particular photograph), mirrors .detail's asymmetric two-column
   rhythm rather than introducing a new grid. ---------- */
.acrylic-feature{
  display:grid;
  grid-template-columns:1fr minmax(280px,38%);
  gap:clamp(32px,5vw,64px);
  align-items:center;
  margin:clamp(56px,7.5vw,96px) var(--margin);
}
.acrylic-feature__info .section-label{ margin-bottom:18px; }
.acrylic-feature__info p{
  font-family:var(--font-primary);
  font-size:14.5px;
  line-height:1.75;
  color:var(--acc-charcoal);
  opacity:.8;
  margin:0 0 16px;
}
.acrylic-feature__specs{
  margin:22px 0 0 !important;
  line-height:1.7;
}
@media (max-width:860px){
  .acrylic-feature{ grid-template-columns:1fr; margin:clamp(48px,6.5vw,72px) var(--margin); }
}

/* ---------- continue exploring ---------- */
.continue{
  padding:clamp(56px,7.5vw,96px) var(--margin) clamp(48px,6.5vw,88px);
  text-align:center;
}
.continue h2{ margin-bottom:clamp(28px,4vw,44px); }
.more-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
  text-align:left;
}
.more-cell{ display:block; text-decoration:none; color:inherit; }
.more-cell .media{ aspect-ratio:4/3; }
.more-cell__label{
  padding-top:12px;
  font-family:var(--font-primary);
  font-size:12px;
  font-weight:600;
  color:var(--acc-charcoal);
  opacity:.75;
}
@media (max-width:700px){ .more-grid{ grid-template-columns:1fr; } }