/*
 * The fabric album. Loaded only on the album template.
 *
 * Two states, and the first is the default:
 *   - LIST (no script): the cover and every spread, one under another.
 *   - BOOK (.is-enhanced, added by album.js): one spread at a time, turned.
 *
 * Every inline property is logical, so the book's spine, its turning leaf
 * and its controls mirror under RTL with no second rule. The one explicit
 * mirror is the arrow glyph (.shayna-glyph-dir, main.css).
 */

.shayna-album {
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-8) var(--band-gap);
}

.shayna-album__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-block-end: var(--space-6);
}

.shayna-album__title {
  font-size: var(--fs-h1);
}

.shayna-album__intro {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-lead);
}

.shayna-album__count,
.shayna-album__eyebrow,
.shayna-album__caption {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

:lang(en) .shayna-album__eyebrow {
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- The frame and the pages ---------- */

.shayna-album__frame {
  padding: clamp(10px, 2vw, 28px);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-sand) 85%, var(--c-ink));
  box-shadow: var(--glass-shadow-md);
}

.shayna-album__book {
  position: relative;
  outline-offset: 6px;
}

.shayna-album__spreads {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shayna-album__spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 14px 25px color-mix(in srgb, var(--c-logo-black) 30%, transparent);
  scroll-margin-block-start: var(--space-5);
}

/* In the LIST state, spreads are separated like pages of a catalogue. */
.shayna-album:not(.is-enhanced) .shayna-album__spread + .shayna-album__spread {
  margin-block-start: clamp(10px, 2vw, 28px);
}

.shayna-album__page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-inline-size: 0;
  min-block-size: 520px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--c-paper-deep);
}

/* The gutter shadow falls toward the spine, which is the start page's END
   edge and the end page's START edge — in both directions. */
.shayna-album__page.is-start {
  background-image: linear-gradient(to left, color-mix(in srgb, var(--c-paper-deep) 80%, var(--c-ink)), transparent 10%);
}

.shayna-album__page.is-end {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--c-paper-deep) 80%, var(--c-ink)), transparent 10%);
  border-inline-start: 1px solid color-mix(in srgb, var(--c-line) 60%, var(--c-ink));
}

[dir="rtl"] .shayna-album__page.is-start {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--c-paper-deep) 80%, var(--c-ink)), transparent 10%);
}

[dir="rtl"] .shayna-album__page.is-end {
  background-image: linear-gradient(to left, color-mix(in srgb, var(--c-paper-deep) 80%, var(--c-ink)), transparent 10%);
}

/* ---------- Cover ---------- */

.shayna-album__cover {
  align-items: center;
  text-align: center;
}

.shayna-album__cover .shayna-logo__img {
  inline-size: min(230px, 70%);
}

.shayna-album__cover-heading {
  font-size: var(--fs-h2);
  max-inline-size: 16ch;
}

.shayna-album__cover-text {
  margin: 0;
  max-inline-size: 32ch;
}

.shayna-album__contents {
  align-items: center;
  text-align: center;
}

/* The contents page: up to six photographed fabrics, each a link to its spread. */
.shayna-album__swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shayna-album__swatch {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.shayna-album__swatch img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  transition: transform var(--dur-base) var(--ease-out);
}

.shayna-album__swatch:hover img,
.shayna-album__swatch:focus-visible img {
  transform: scale(1.04);
}

.shayna-album__swatch:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.shayna-album__swatch-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  text-align: center;
}

.shayna-album__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.shayna-album__empty {
  margin: 0;
  color: var(--color-text-dim);
}

/* ---------- A fabric spread ---------- */

.shayna-album__material {
  align-items: stretch;
  text-align: center;
}

.shayna-album__material .shayna-swatch-photo {
  inline-size: min(100%, 520px);
  margin-inline: auto;
  transform: rotate(-1.5deg);
}

.shayna-album__info {
  align-items: flex-start;
}

.shayna-album__name {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.shayna-album__price {
  margin: 0;
}

.shayna-album__price strong {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
}

.shayna-album__moq {
  display: block;
  margin-block-start: var(--space-1);
}

/* ---------- Controls ---------- */

.shayna-album__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-block-start: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen-img), var(--glass-bg-pill);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-highlight), var(--glass-shadow-sm);
  /* `fit-content` cannot shrink below the row's own preferred width, which
     overflowed a 320px phone (English "Previous"/"Next" plus the pill's own
     padding). `max-inline-size: 100%` + border-box lets the pill still hug
     its content everywhere it fits, and only gives way at the narrow end. */
  width: fit-content;
  max-inline-size: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}

/* Below ~400px the three-item pill (button, position, button) no longer
   fits at its normal size in English — tighten gap and padding rather than
   let it wrap, which would break the pill shape. */
@media (max-width: 25rem) {
  .shayna-album__controls {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }

  .shayna-album__controls .shayna-button {
    padding-inline: var(--space-3);
  }

  .shayna-album__position {
    min-inline-size: 7ch;
  }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .shayna-album__controls {
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
  }
}

.shayna-album__controls[hidden],
.shayna-album__hint[hidden] {
  display: none;
}

.shayna-album__position {
  min-inline-size: 9ch;
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
}

.shayna-album__hint {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

/* ---------- BOOK state ---------- */

.shayna-album.is-enhanced .shayna-album__book {
  touch-action: pan-y;
}

/* Every spread shares one grid cell, so the book is as tall as the spread
   on show and a turn never reflows the page around it. */
.shayna-album.is-enhanced .shayna-album__spreads {
  display: grid;
}

.shayna-album.is-enhanced .shayna-album__spread {
  grid-area: 1 / 1;
}

.shayna-album.is-enhanced .shayna-album__spread[hidden] {
  display: none;
}

/* The turning leaf, built by album.js for the length of one turn. */
.shayna-album__turn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  perspective: 2200px;
  pointer-events: none;
}

.shayna-album__turn > * {
  grid-row: 1;
  min-inline-size: 0;
}

.shayna-album__turn-still.is-start,
.shayna-album__leaf.is-start {
  grid-column: 1;
}

.shayna-album__turn-still.is-end,
.shayna-album__leaf.is-end {
  grid-column: 2;
}

.shayna-album__leaf {
  position: relative;
  transform-style: preserve-3d;
}

.shayna-album__leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.shayna-album__leaf-face > .shayna-album__page,
.shayna-album__turn-still > .shayna-album__page {
  block-size: 100%;
  box-shadow: 0 0 30px color-mix(in srgb, var(--c-logo-black) 20%, transparent);
}

.shayna-album__leaf-face.is-back {
  transform: rotateY(180deg);
}

/* ---------- Narrow: one page at a time, the photo above the details ---------- */

@media (max-width: 47.99rem) {
  .shayna-album__spread {
    grid-template-columns: 1fr;
  }

  .shayna-album__page {
    min-block-size: 0;
  }

  .shayna-album__page.is-start,
  .shayna-album__page.is-end,
  [dir="rtl"] .shayna-album__page.is-start,
  [dir="rtl"] .shayna-album__page.is-end {
    background-image: none;
    border: 0;
  }

  .shayna-album__page.is-end {
    padding-block-start: 0;
  }

  /* The contents page is a nicety of a two-page spread; on one column the
     cover alone is the opening. */
  .shayna-album.is-enhanced .shayna-album__contents {
    display: none;
  }

  .shayna-album__controls {
    gap: var(--space-3);
  }

  .shayna-album__controls .shayna-button {
    padding-inline: var(--space-4);
  }
}

/* Count, filter button and list-view button sit together in the corner. */
.shayna-album__tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.shayna-afilter {
  position: relative;
}

.shayna-afilter > summary {
  list-style: none;
  cursor: pointer;
}

.shayna-afilter > summary::-webkit-details-marker {
  display: none;
}

.shayna-afilter[open] > summary {
  background: rgba(0, 0, 0, 0.08);
}

.shayna-afilter__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 30;
  inline-size: min(22rem, calc(100vw - 2 * var(--space-4)));
  max-block-size: min(70vh, 34rem);
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-lg);
  background: var(--glass-sheen-img-soft), var(--c-paper);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

@media (max-width: 40rem) {
  .shayna-album__head {
    position: relative;
  }

  .shayna-afilter {
    position: static;
  }

  .shayna-afilter__panel {
    inset-inline: 0;
    inline-size: auto;
  }
}

.shayna-iconbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}

.shayna-iconbutton:hover,
.shayna-iconbutton:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}