/* ==========================================================================
   SAKANA — product detail page (layout only; gallery and buy box are in
   components.css because Quick Look uses them too)
   ========================================================================== */

.pdp__nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 20px;
  padding: 8px var(--g) 6px;
}
.pdp__nav .crumbs { display: none; }

.pdp__top { display: grid; gap: 20px; }
.pdp__top > .gallery .gallery__thumbs { padding-inline: var(--g); }
.pdp__info { padding-inline: var(--g); display: grid; gap: 12px; align-content: start; }
.pdp__titlerow { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pdp__title {
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -0.01em;
}
.pdp__desc { max-inline-size: 52ch; font-size: 16px; }
.pdp__ship { font-size: 14px; color: var(--soft); }
.pdp__ship a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .pdp__ship a:hover { color: var(--accent); } }
.pdp__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--soft); }
.pdp__more a { padding: 6px 12px; border: 1px solid var(--line); color: var(--ink); min-block-size: 36px; display: inline-flex; align-items: center; }
@media (hover: hover) { .pdp__more a:hover { border-color: var(--accent); color: var(--accent); } }

@media (min-width: 960px) {
  .pdp__nav .crumbs { display: flex; }
  .pdp__top {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px;
    padding: 6px var(--g) 0; align-items: start;
  }
  .pdp__top > .gallery {
    grid-column: 1 / 7; position: sticky; inset-block-start: calc(var(--header-h-compact) + 16px);
    grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start;
  }
  .pdp__top > .gallery .gallery__thumbs { order: 0; flex-direction: column; padding: 0; overflow: visible; }
  .pdp__top > .gallery .gallery__thumbs button { inline-size: 100%; }
  .pdp__top > .gallery .gallery__track { aspect-ratio: 1; max-block-size: calc(100svh - 150px); }
  .pdp__top > .gallery .gallery__main { max-inline-size: calc(100svh - 150px); }
  .pdp__info { grid-column: 7 / 13; padding-inline: 1vw 0; max-inline-size: 560px; }
}

.related { padding-block-start: var(--section); }

/* Mobile buy bar --------------------------------------------------------------- */

.buybar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--g) calc(8px + env(safe-area-inset-bottom));
  padding-inline-start: 8px;
  background: var(--paper); border-block-start: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.4s var(--ease);
}
.buybar.is-on { transform: none; }
.buybar__info { flex: 1; min-inline-size: 0; display: grid; line-height: 1.3; }
.buybar__title { font-family: var(--f-serif); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-size: 14px; color: var(--soft); }
.buybar .btn { min-block-size: 44px; padding-inline: 18px; }
@media (min-width: 960px) { .buybar { display: none; } }

/* Mobile: keep the footer clear of the sticky buy bar, and lift transient
   notices above the bar while it is showing. */
@media (max-width: 959px) {
  body[data-page="product"] { padding-block-end: 72px; }
  body:has(.buybar.is-on) .added-host { inset-block-end: 80px; }
  body:has(.buybar.is-on) .toast { inset-block-end: 84px; }
}