/*
 * SHAYNA — main stylesheet.
 *
 * One stylesheet for both directions. Every inline property is LOGICAL
 * (margin-inline-start, inset-inline-end, text-align: start), so RTL mirrors
 * with no second file. The only [dir="rtl"] overrides are directional glyphs.
 *
 * Breakpoint: 60rem (960px). Below it the header menu collapses behind a
 * button — but only when menu.js has run and added .is-collapsible.
 */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  font-stretch: var(--font-stretch-normal); /* Yekan Bakh defaults to 62.5% */
  line-height: var(--lh-body-en);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Liquid Glass: ambient ribbon ----------
   A fixed, full-viewport sweep of colour behind everything (a body::before
   — no markup needed) so the glass panels floating above (header, order
   box, sheets…) have something real to blur and refract — this is what
   actually reads as "glass" rather than "rounded corners on cream". Paper
   is still the loudest colour on the page (it only shows where nothing
   else sits on top), but where a panel's blur meets this ribbon, colour
   should visibly bleed through. Being `fixed` it costs nothing on scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 8% -6%, color-mix(in srgb, var(--c-gold) 40%, transparent), transparent 68%),
    radial-gradient(42rem 30rem at 96% 2%, color-mix(in srgb, var(--c-sand) 48%, transparent), transparent 66%),
    radial-gradient(38rem 30rem at 2% 88%, color-mix(in srgb, var(--c-gold) 30%, transparent), transparent 66%),
    radial-gradient(40rem 32rem at 100% 96%, color-mix(in srgb, var(--c-sand) 40%, transparent), transparent 66%),
    linear-gradient(122deg,
      transparent 0%,
      color-mix(in srgb, var(--c-gold) 26%, transparent) 22%,
      transparent 38%,
      color-mix(in srgb, var(--c-sand) 32%, transparent) 54%,
      transparent 70%,
      color-mix(in srgb, var(--c-ink) 16%, transparent) 86%,
      transparent 100%),
    var(--c-paper);
}

@media (prefers-reduced-transparency: reduce) {
  body::before {
    display: none;
  }
}

/* The family follows the element's own language, so a Persian endonym on
   an English page (and the reverse) gets its own face — never a fallback. */
[lang|="fa"] {
  font-family: var(--ff-fa);
}

[lang|="en"] {
  font-family: var(--ff-en);
}

body:lang(fa) {
  line-height: var(--lh-body-fa);
}

img,
video,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}

:lang(en) :is(h1, h2) {
  font-family: var(--ff-en-display);
  font-weight: var(--fw-regular);
}

p {
  margin-block: 0 var(--space-4);
}

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

.shayna-main:focus {
  outline: none;
}

/* The one explicit mirror: a directional glyph. */
[dir="rtl"] .shayna-glyph-dir {
  transform: scaleX(-1);
}

.screen-reader-text {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Skip link ---------- */

.shayna-skip {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--c-ink);
  color: var(--c-paper);
  text-decoration: none;
  transform: translateY(-200%);
}

.shayna-skip:focus {
  transform: none;
}

/* ---------- Links ---------- */

/* The editorial link: ink, underlined in gold, the underline thickens on
   hover. Gold is a RULE here (3.81:1 on paper, above the 3:1 non-text
   minimum), never the text colour at body size. */
.shayna-link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}

.shayna-link:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Buttons ---------- */

/* A filled ink button: paper on ink is 6.61:1. The outline variant uses
   the field border (3.34:1), the minimum for a boundary a reader must see. */
.shayna-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  padding-inline: var(--space-5);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-pill);
  /* Even the solid ink button gets a glass sheen — a glossy highlight
     sweep, like dark tinted Liquid Glass, not a flat fill. */
  background: linear-gradient(135deg,
      color-mix(in srgb, white 30%, transparent) 0%,
      transparent 45%),
    var(--c-ink);
  color: var(--c-paper);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--glass-shadow-sm);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.shayna-button:hover {
  background: linear-gradient(135deg,
      color-mix(in srgb, white 34%, transparent) 0%,
      transparent 45%),
    color-mix(in srgb, var(--c-ink) 85%, var(--c-logo-black));
  box-shadow: var(--glass-shadow-md);
  transform: translateY(-1px);
}

.shayna-button:active {
  transform: translateY(0);
  box-shadow: var(--glass-shadow-sm);
}

/* The outline button becomes real glass: translucent + blurred, but its
   border stays the accessible field-border ink-mix (3.34:1) — the
   decorative glass-border token is too light to serve as the boundary
   rule #3 in the brief requires. */
.shayna-button.is-outline {
  background: var(--glass-sheen-img-soft), var(--glass-bg-chip);
  color: var(--color-text);
  border-color: var(--color-field-border);
  box-shadow: var(--glass-highlight);
}

.shayna-button.is-outline:hover {
  border-color: var(--c-ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow-sm);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .shayna-button.is-outline {
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
  }
}

@media (prefers-reduced-motion: reduce) {
  .shayna-button:hover,
  .shayna-button:active {
    transform: none;
  }
}

.shayna-button:disabled,
.shayna-button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

/* Content editable from wp-admin (the Contact page's phone numbers, or
   anywhere else an editor inserts a Buttons block) gets the SAME button —
   never a second visual language for "a button" just because it came from
   the block editor rather than a template. Core's own "Outline" style
   (the block editor's built-in toggle, nothing custom registered) maps to
   the outline variant, so an editor never has to know a class name. */
.wp-block-buttons {
  gap: var(--space-3);
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  padding-inline: var(--space-5);
  padding-block: 0;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg,
      color-mix(in srgb, white 30%, transparent) 0%,
      transparent 45%),
    var(--c-ink);
  color: var(--c-paper);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  text-decoration: none;
  box-shadow: var(--glass-shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.wp-block-button__link:hover {
  box-shadow: var(--glass-shadow-md);
  transform: translateY(-1px);
  color: var(--c-paper);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--glass-sheen-img-soft), var(--glass-bg-chip);
  color: var(--color-text);
  border-color: var(--color-field-border);
  box-shadow: var(--glass-highlight);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .wp-block-button.is-style-outline .wp-block-button__link {
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link:hover {
    transform: none;
  }
}

/* A phone number inside a button carries its own digits/direction rule
   (shayna-code below), and the button itself is never mirrored — a tel:
   link reads the same way in both directions. */
.wp-block-button__link .shayna-code {
  color: inherit;
}

/* A product code is an identifier: always left-to-right, never Persian
   digits, isolated from the text around it. */
.shayna-code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--ff-en);
  letter-spacing: 0.06em;
}

/* ---------- Fabric parts shared by the album and the swatch book ---------- */

.shayna-spec {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.shayna-spec th,
.shayna-spec td {
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}

.shayna-spec th {
  inline-size: 40%;
  padding-inline-end: var(--space-4);
  color: var(--color-text-dim);
  font-weight: var(--fw-regular);
}

.shayna-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.shayna-chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.shayna-chips__dot {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-field-border);
  background-size: cover;
  background-position: center;
  box-shadow: var(--glass-highlight);
}

.shayna-chips__dot.is-empty {
  background: transparent;
}

.shayna-swatch-photo {
  margin: 0;
}

.shayna-swatch-photo__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* The illustrative weave: pinked top edge, like a cut swatch. It is
   labelled as illustrative in its caption, always. */
.shayna-swatch-photo__weave {
  aspect-ratio: 5 / 3;
  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);
  clip-path: polygon(0 3%, 3% 0, 6% 3%, 9% 0, 12% 3%, 15% 0, 18% 3%, 21% 0, 24% 3%, 27% 0, 30% 3%, 33% 0, 36% 3%, 39% 0, 42% 3%, 45% 0, 48% 3%, 51% 0, 54% 3%, 57% 0, 60% 3%, 63% 0, 66% 3%, 69% 0, 72% 3%, 75% 0, 78% 3%, 81% 0, 84% 3%, 87% 0, 90% 3%, 93% 0, 96% 3%, 100% 0, 98% 100%, 0 98%);
}

.shayna-swatch-photo figcaption {
  margin-block-start: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  text-align: center;
}

/* ---------- Layout ---------- */

.shayna-container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header ---------- */

.shayna-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  border-block-end: 1px solid var(--glass-border-soft);
  background: var(--glass-sheen-img-soft), var(--glass-bg-header);
  box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .shayna-header {
    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-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  min-block-size: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4);
}

.shayna-logo {
  display: block;
  flex: none;
  line-height: 0;
}

.shayna-logo__img {
  display: block;
  inline-size: clamp(140px, 10vw + 80px, 200px);
  block-size: auto;
}

.shayna-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* A dropdown under an item that has children (the fabric types). */
.shayna-menu--header .menu-item-has-children {
  position: relative;
}

.shayna-menu--header .menu-item-has-children > a::after {
  content: "";
  margin-inline-start: var(--space-2);
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  opacity: 0.6;
}

.shayna-menu--header .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(-1 * var(--space-4));
  z-index: 20;
  display: none;
  min-inline-size: 14rem;
  margin: 0;
  padding: var(--space-3);
  list-style: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-sheen-img-soft), var(--glass-bg-paper);
  box-shadow: var(--glass-highlight), var(--glass-shadow-md);
}

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

.shayna-menu--header .menu-item-has-children:hover > .sub-menu,
.shayna-menu--header .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

.shayna-menu--header .sub-menu a {
  display: flex;
  inline-size: 100%;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm, 8px);
  white-space: nowrap;
}

.shayna-menu--header .sub-menu a:hover,
.shayna-menu--header .sub-menu a:focus-visible {
  background: color-mix(in srgb, var(--c-paper) 70%, transparent);
}

.shayna-header__tools {
  display: flex;
  gap: var(--space-2);
}

.shayna-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border-soft);
  background: var(--glass-sheen-img-soft), var(--glass-bg-chip);
  box-shadow: var(--glass-highlight);
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

/* Icon only: the word stays for screen readers and as the tooltip. */
.shayna-tool span {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.shayna-tool:hover,
.shayna-tool:focus-visible {
  border-color: var(--color-accent);
}

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

.shayna-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shayna-menu a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}

:lang(en) .shayna-menu a {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The 60% rule, carried from Sarir: among peers the active one is full ink
   and its siblings dim — as focus, not decoration. */
.shayna-menu:has(a:hover, a:focus-visible, [aria-current="page"]) a {
  color: var(--color-text-dim);
}

.shayna-menu a:is(:hover, :focus-visible, [aria-current="page"]) {
  color: var(--color-text);
}

.shayna-menu a[aria-current="page"] {
  border-block-end-color: var(--color-accent);
}

/* ---------- Language switcher ---------- */

.shayna-lang {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  list-style: none;
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen-img-soft), var(--glass-bg-chip);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-highlight);
}

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

.shayna-lang li + li {
  border-inline-start: 0;
}

.shayna-lang__item {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  justify-content: center;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.shayna-lang__item.is-current {
  color: var(--color-text-dim);
  background: var(--glass-sheen-img-soft), color-mix(in srgb, var(--c-paper) 80%, transparent);
  box-shadow: var(--glass-highlight);
}

a.shayna-lang__item:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.35em;
}

/* ---------- Mobile menu ---------- */

.shayna-header__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen-img-soft), var(--glass-bg-chip);
  box-shadow: var(--glass-highlight);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

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

/* A three-line hamburger; the word stays in the DOM for screen readers
   (menu.js still swaps Menu/Close) but is not drawn. */
.shayna-header__toggle {
  padding-inline: 0;
  justify-content: center;
  inline-size: var(--target-min);
}

.shayna-header__toggle-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.shayna-header__toggle-icon {
  position: relative;
  inline-size: 18px;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background var(--dur-base) var(--ease-out);
}

.shayna-header__toggle-icon::before,
.shayna-header__toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

.shayna-header__toggle-icon::before {
  inset-block-start: -6px;
}

.shayna-header__toggle-icon::after {
  inset-block-start: 6px;
}

.shayna-header__toggle[aria-expanded="true"] .shayna-header__toggle-icon {
  background: transparent;
}

.shayna-header__toggle[aria-expanded="true"] .shayna-header__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.shayna-header__toggle[aria-expanded="true"] .shayna-header__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 59.99rem) {
  .shayna-header.is-collapsible .shayna-header__inner {
    flex-wrap: wrap;
  }

  .shayna-header.is-collapsible .shayna-header__toggle {
    display: inline-flex;
  }

  .shayna-header.is-collapsible .shayna-header__nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding-block: var(--space-4) var(--space-2);
    border-block-start: 1px solid var(--color-rule);
  }

  /* The switcher pill wraps its own two labels, as on desktop, instead of
     stretching across the stacked menu. */
  .shayna-header.is-collapsible .shayna-header__tools {
    flex-wrap: wrap;
  }

  .shayna-header.is-collapsible .shayna-lang {
    align-self: flex-start;
    inline-size: fit-content;
  }

  .shayna-header.is-collapsible:not(.is-open) .shayna-header__nav {
    display: none;
  }

  .shayna-header.is-collapsible .shayna-menu {
    flex-direction: column;
  }

  .shayna-header.is-collapsible .shayna-menu--header .sub-menu {
    position: static;
    display: block;
    padding: 0 0 0 0;
    padding-inline-start: var(--space-4);
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .shayna-header.is-collapsible .shayna-menu--header .menu-item-has-children > a::after {
    display: none;
  }

  .shayna-header.is-collapsible .shayna-menu a {
    inline-size: 100%;
    font-size: var(--fs-base);
    border-block-end-color: transparent;
  }

  .shayna-header.is-collapsible .shayna-menu a[aria-current="page"] {
    border-inline-start: 2px solid var(--color-accent);
    padding-inline-start: var(--space-3);
  }
}

/* ---------- Banner media (a page's optional top picture or video) ---------- */

.shayna-banner {
  position: relative;
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  block-size: calc(var(--banner-vh, 55) * 1svh);
  min-block-size: 12rem;
  overflow: hidden;
}

.shayna-banner__media {
  position: absolute;
  inset: 0;
}

.shayna-banner__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--banner-focus, center);
}

@media (max-width: 60rem) {
  .shayna-banner {
    block-size: calc(var(--banner-vh-m, var(--banner-vh, 55)) * 1svh);
  }

  .shayna-banner__img {
    object-position: var(--banner-focus-m, var(--banner-focus, center));
  }
}

/* The pause / play button banner.js adds over a playing video. */
.shayna-banner-toggle {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen-img-soft), var(--glass-bg-paper);
  box-shadow: var(--glass-highlight);
  color: var(--color-text);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* ---------- Pages ---------- */

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

.shayna-page__head {
  margin-block-end: var(--space-7);
}

.shayna-page__title {
  font-size: var(--fs-h1);
  color: var(--color-text);
}

.shayna-page__content > * + * {
  margin-block-start: var(--space-5);
}

.shayna-page__content h2 {
  font-size: var(--fs-h2);
  margin-block-start: var(--space-8);
}

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

/* ---------- Footer ---------- */

.shayna-footer {
  border-block-start: 1px solid var(--color-rule);
}

.shayna-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-7) var(--gutter);
}

.shayna-footer .shayna-logo__img {
  inline-size: 150px;
}

.shayna-footer__menu .shayna-menu {
  justify-content: center;
}

.shayna-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-5);
}

.shayna-footer__copy {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

/* A standalone link, not running text — the same 44px target as the home
   page's rail-head link, not the sentence-inline exemption the Contact
   page's phone/email links use. */
.shayna-footer__legal {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

.shayna-footer__legal:hover,
.shayna-footer__legal:focus-visible {
  color: var(--color-text);
}

@media (max-width: 59.99rem) {
  .shayna-footer__inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .shayna-footer__menu .shayna-menu {
    justify-content: start;
  }

  .shayna-footer__links {
    justify-content: flex-start;
  }

  .shayna-footer__copy {
    text-align: start;
  }
}

/* ---------- Liquid Glass: reduced transparency, belt and braces ----------
   tokens.css already flattens every --glass-bg-* to a solid colour under
   this preference; this turns the blur itself off too, site-wide, in one
   place, for every glass surface defined across the stylesheets. */
@media (prefers-reduced-transparency: reduce) {
  .shayna-header,
  .shayna-button.is-outline,
  .shayna-lang,
  .shayna-header__toggle,
  .shayna-orderbox,
  .shayna-drawer,
  .shayna-offer,
  .shayna-offer__confirm,
  .shayna-track__form,
  .shayna-track__card,
  .shayna-track__banner,
  .shayna-album__controls {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}