/*
 * The fabric page: the swatch book, the order box, the specifications.
 * Loaded only on a single fabric. Logical properties throughout.
 */

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

.shayna-fabric__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  font-size: var(--fs-sm);
}

.shayna-fabric__crumb {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

.shayna-fabric__title {
  font-size: var(--fs-h1);
  max-inline-size: 22ch;
}

/* ---------- Swatch book ---------- */

.shayna-swatchbook {
  margin-block-start: var(--space-7);
  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-swatchbook__cover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--c-paper-deep);
  border-block-end: 6px double color-mix(in srgb, var(--c-line) 70%, var(--c-ink));
}

.shayna-swatchbook__cover .shayna-logo__img {
  inline-size: clamp(110px, 12vw, 160px);
}

.shayna-swatchbook__label {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

.shayna-swatchbook__rivet {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--c-gold);
}

.shayna-swatchbook__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: color-mix(in srgb, var(--c-line) 60%, var(--c-ink));
}

.shayna-swatchbook__note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-paper);
}

.shayna-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  block-size: 100%;
  padding: var(--space-5);
  background: var(--c-paper-deep);
  color: var(--color-text);
  text-decoration: none;
  border-block-end: 3px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.shayna-card:hover {
  background: color-mix(in srgb, var(--c-paper-deep) 70%, var(--c-paper));
}

.shayna-card:focus-visible {
  outline-offset: -4px;
}

.shayna-card.is-selected {
  border-block-end-color: var(--c-gold);
  background: color-mix(in srgb, var(--c-paper-deep) 60%, var(--c-paper));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 55%, transparent), var(--glass-shadow-sm);
}

.shayna-card__swatch {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: polygon(0 4%, 4% 0, 8% 4%, 12% 0, 16% 4%, 20% 0, 24% 4%, 28% 0, 32% 4%, 36% 0, 40% 4%, 44% 0, 48% 4%, 52% 0, 56% 4%, 60% 0, 64% 4%, 68% 0, 72% 4%, 76% 0, 80% 4%, 84% 0, 88% 4%, 92% 0, 96% 4%, 100% 0, 100% 100%, 0 100%);
}

.shayna-card__swatch img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.shayna-card__swatch.is-solid {
  /* A pale chip colour on a pale card vanishes: a hairline gives it an edge. */
  box-shadow: inset 0 0 0 1px var(--color-field-border);
}

.shayna-card__swatch.is-weave {
  background: repeating-linear-gradient(35deg,
    color-mix(in srgb, var(--c-sand) 70%, var(--c-paper)) 0 2px,
    color-mix(in srgb, var(--c-sand) 40%, var(--c-paper)) 2px 4px);
}

.shayna-card__name {
  font-size: var(--fs-h3);
}

.shayna-card__code {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

.shayna-card__state {
  font-size: var(--fs-xs);
  visibility: hidden;
}

.shayna-card.is-selected .shayna-card__state {
  visibility: visible;
}

/* ---------- Order box and specs ---------- */

.shayna-fabric__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: var(--space-8);
  margin-block-start: var(--space-7);
}

.shayna-orderbox {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-sheen-img), var(--glass-bg-deep);
  box-shadow: var(--glass-highlight), var(--glass-shadow-md);
}

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

.shayna-orderbox__title,
.shayna-fabric__specs h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--space-5);
}

.shayna-orderbox__choice {
  font-size: var(--fs-lead);
}

.shayna-orderbox__price {
  margin-block-end: var(--space-1);
}

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

.shayna-ladder {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-end: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.shayna-ladder caption {
  caption-side: top;
  text-align: start;
  font-size: var(--fs-xs);
  padding-block-end: var(--space-2);
}

.shayna-ladder th,
.shayna-ladder td {
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
  text-align: start;
  font-weight: var(--fw-regular);
}

.shayna-ladder th {
  font-size: var(--fs-xs);
}

/* The tier the typed quantity falls in: weight AND a mark, never colour alone. */
.shayna-ladder tr.is-current td {
  font-weight: var(--fw-medium);
}

.shayna-ladder tr.is-current td:first-child::before {
  content: "";
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-inline-end: var(--space-2);
  background: var(--c-ink);
  vertical-align: middle;
}

.shayna-orderbox__total {
  margin: 0 0 var(--space-3);
  font-variant-numeric: tabular-nums;
}

.shayna-orderbox__total:empty {
  display: none;
}

.shayna-orderbox__meta,
.shayna-orderbox__count {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

.shayna-orderbox__closed {
  margin: var(--space-5) 0 0;
  font-weight: var(--fw-medium);
}

.shayna-orderbox__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.shayna-field {
  inline-size: 8rem;
  min-block-size: var(--target-min);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-xs);
  background: var(--c-paper);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-lead);
}

.shayna-field[aria-invalid="true"] {
  border-color: var(--c-ink);
  border-width: 2px;
}

.shayna-orderbox__eq {
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
}

.shayna-orderbox__msg {
  min-block-size: 1.5em;
  margin: var(--space-3) 0;
  font-size: var(--fs-sm);
}

/* An error is said in words and marked with a rule — never by colour
   alone, and never in a colour this palette cannot carry at body size. */
.shayna-orderbox__msg.is-error {
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--c-ink);
  font-weight: var(--fw-medium);
}

.shayna-orderbox__form .shayna-button[hidden] {
  display: none;
}

.shayna-fabric__sheet {
  margin-block-start: var(--space-5);
}

.shayna-fabric__description {
  margin-block-start: var(--band-gap);
  max-inline-size: var(--container-narrow);
}

.shayna-fabric__description h2 {
  margin-block-start: 0;
}

.shayna-fabric__content {
  max-inline-size: none;
}

@media (max-width: 47.99rem) {
  .shayna-fabric__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .shayna-swatchbook__cards {
    grid-template-columns: 1fr 1fr;
  }

  .shayna-swatchbook__cover {
    padding: var(--space-4);
  }

  .shayna-card {
    padding: var(--space-4);
  }

  .shayna-orderbox {
    padding: var(--space-5);
  }
}

/* ---------- A colour's photographs: a swipeable strip ---------- */

.shayna-gallery {
  margin-block: var(--space-6);
}

.shayna-gallery__strip {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}

.shayna-gallery__strip[hidden] {
  display: none;
}

.shayna-gallery__strip li {
  flex: 0 0 min(34rem, 86%);
  scroll-snap-align: start;
}

.shayna-gallery__strip img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.shayna-gallery__strip li.is-video a {
  position: relative;
}

.shayna-gallery__strip video {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--c-ink);
  pointer-events: none;
}

.shayna-gallery__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  inline-size: 4rem;
  block-size: 4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.4rem;
  padding-inline-start: 0.2rem;
}

.shayna-lightbox__video {
  max-inline-size: 96vw;
  max-block-size: 90dvh;
  margin: auto;
  display: block;
}

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

.shayna-gallery__strip a {
  display: block;
  cursor: zoom-in;
}

/* ---------- The lightbox ---------- */

.shayna-lightbox {
  inline-size: 100vw;
  block-size: 100dvh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--c-ink) 96%, transparent);
  color: var(--c-paper);
}

.shayna-lightbox::backdrop {
  background: transparent;
}

.shayna-lightbox__stage {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  overflow: auto;
}

.shayna-lightbox__img {
  display: block;
  max-inline-size: 96vw;
  max-block-size: 90dvh;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  cursor: zoom-in;
}

.shayna-lightbox.is-zoomed .shayna-lightbox__img {
  max-inline-size: none;
  max-block-size: none;
  cursor: zoom-out;
}

.shayna-lightbox.is-zoomed .shayna-lightbox__stage {
  place-items: start;
}

.shayna-lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-paper) 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-ink) 55%, transparent);
  color: var(--c-paper);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.shayna-lightbox__btn:focus-visible {
  outline: 2px solid var(--c-paper);
  outline-offset: 2px;
}

.shayna-lightbox__close {
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
}

.shayna-lightbox__prev {
  inset-block-start: 50%;
  inset-inline-start: var(--space-4);
}

.shayna-lightbox__next {
  inset-block-start: 50%;
  inset-inline-end: var(--space-4);
}

.shayna-lightbox__count {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline: 0;
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  pointer-events: none;
}