/*
 * Plants Whisperer — Botanical Living Archive
 * Identity layer v2.0
 *
 * This stylesheet intentionally sits after the legacy page CSS. It changes the
 * visual language without changing the store, cart, account, or data logic.
 */

:root {
  --archive-paper: #f0ece2;
  --archive-paper-deep: #e3ddd0;
  --archive-ink: #14211b;
  --archive-ink-soft: #46544c;
  --archive-moss: #536454;
  --archive-sage: #9eaa96;
  --archive-clay: #a85f3e;
  --archive-clay-deep: #7f432d;
  --archive-clay-light: #d7a086;
  --archive-fog: #d8d8ce;
  --archive-muted: #718078;
  --archive-line: rgba(20, 33, 27, 0.22);
  --archive-line-strong: rgba(20, 33, 27, 0.36);
  --archive-line-soft: rgba(20, 33, 27, 0.11);
  --archive-white: #fffdf7;
  --archive-display-ar: 'El Messiri', serif;
  --archive-display-en: 'Cormorant Garamond', serif;
  --archive-body: 'IBM Plex Sans Arabic', sans-serif;
  --archive-mono: 'IBM Plex Mono', monospace;
  --archive-ease: cubic-bezier(0.22, 0.9, 0.24, 1);

  --ivory: var(--archive-paper);
  --card: var(--archive-white);
  --pine: var(--archive-ink);
  --pine-soft: var(--archive-ink-soft);
  --gold: var(--archive-clay);
  --gold-soft: #c78c6f;
  --gold-ink: var(--archive-clay-deep);
  --sage: var(--archive-moss);
  --line: var(--archive-line-soft);
  --accent-bg: var(--archive-ink);
  --accent-bg-2: #0e1914;
  --accent-ink: var(--archive-paper);
  --cta-green: var(--archive-ink);
  --cta-green-hover: #25382f;
  --radius-card: 2px;
  --radius-pill: 2px;
  --shadow: none;
  --shadow-hover: none;
}

html {
  scroll-behavior: smooth;
  background: var(--archive-paper);
}

body {
  background:
    linear-gradient(rgba(20, 33, 27, 0.018) 1px, transparent 1px),
    var(--archive-paper);
  background-size: 100% 48px;
  color: var(--archive-ink);
  font-family: var(--archive-body);
}

h1,
h2,
h3,
.display {
  font-family: var(--archive-display-ar);
  font-weight: 600;
  letter-spacing: 0;
}

html[dir='ltr'] h1,
html[dir='ltr'] h2,
html[dir='ltr'] h3,
html[dir='ltr'] .display {
  font-family: var(--archive-display-en);
}

::selection {
  color: var(--archive-paper);
  background: var(--archive-clay);
}

/* Navigation — a publishing masthead, not a floating glass capsule. */
header.nav {
  top: 0;
  /* Safe area. Measured in a real installed app on iPhone 17 Pro Max and iPad
     Pro 11": with apple-mobile-web-app-status-bar-style:default iOS reserves the
     status bar itself, so the top inset reads 0 and the masthead is already
     clear of the notch and Dynamic Island. Written as bare env() rather than
     max(): the padding here is 0 today, so a floor would change the design
     instead of protecting it. Resolves to 0 everywhere an inset does not exist,
     and grows only if the viewport is ever extended under the status bar or the
     device is rotated so the notch takes a side. */
  padding: env(safe-area-inset-top, 0px)
           env(safe-area-inset-right, 0px) 0
           env(safe-area-inset-left, 0px);
  background: color-mix(in srgb, var(--archive-paper) 94%, transparent);
  border-bottom: 1px solid var(--archive-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nav-inner {
  max-width: 1440px;
  min-height: 82px;
  padding: 0 34px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-name,
.nav-inner .brand-name {
  max-width: 150px;
  color: var(--archive-ink);
  font-family: var(--archive-display-en);
  font-size: 1.48rem;
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.025em;
}

.nav-inner .brand-name b {
  color: var(--archive-clay);
  font-weight: 600;
}

nav.links {
  gap: 34px;
  font-size: 0.8rem;
  font-weight: 600;
}

nav.links a {
  color: var(--archive-ink);
  opacity: 0.72;
}

nav.links a:hover {
  color: var(--archive-ink);
  opacity: 1;
}

nav.links a::after {
  bottom: -10px;
  height: 1px;
  background: var(--archive-clay);
}

.search-box {
  min-width: 210px;
  padding: 9px 0 9px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--archive-line);
  border-radius: 0;
}

html[dir='rtl'] .search-box {
  padding: 9px 14px 9px 0;
}

.search-box:focus-within {
  border-color: var(--archive-clay);
  box-shadow: none;
}

.icon-toggle,
.lang-toggle-desktop {
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-line);
  border-radius: 50%;
}

.lang-toggle-desktop {
  width: auto;
  padding-inline: 12px;
  border-radius: 999px;
}

.icon-toggle:hover {
  color: var(--archive-white);
  background: var(--archive-ink);
  border-color: var(--archive-ink);
  transform: none;
}

.announce-bar {
  padding: 8px 16px;
  color: var(--archive-paper);
  background: var(--archive-ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* Hero — editorial specimen spread. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  width: min(100%, 1440px);
  min-height: 760px;
  margin: 0 auto;
  padding: 54px 34px 58px;
  overflow: hidden;
  color: var(--archive-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--archive-line);
  border-radius: 0;
  box-shadow: none;
}

/* The collection mark.
   This was a 173px outlined word sitting at the hero's base with z-index:-1 and
   bottom:-0.16em — which meant it was clipped by the hero's own overflow AND
   laid behind the specimen photograph, so the phrase was never once readable in
   full. On a phone it rendered as "NG OBJECTS" with the letters sliced through
   the middle. A word nobody can read is not a watermark, it is debris, and it
   was holding 94px of bottom padding open to make room for itself.

   A herbarium sheet does not shout its collection name across the mount; it
   stamps it, small and wide-tracked, in the margin. So that is what this is now
   — the Latin counterpart to the Arabic archive line at the top of the hero,
   bookending the spread. It reads, it never collides with the plate, and the
   space it used to demand goes back to the composition. */
.hero::before {
  content: 'LIVING OBJECTS';
  position: absolute;
  left: 34px;
  bottom: 30px;
  z-index: 0;
  color: var(--archive-ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.34em;
  white-space: nowrap;
  opacity: 0.72;
  -webkit-text-stroke: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 24px 34px auto;
  height: 1px;
  background: var(--archive-line);
}

.hero-visual {
  position: absolute;
  right: 34px;
  top: 84px;
  bottom: 94px;
  width: calc(50% - 48px);
  min-height: 610px;
  overflow: visible;
  background: var(--archive-paper-deep);
  border: 1px solid var(--archive-line);
  box-shadow: 18px 18px 0 var(--archive-paper-deep);
}

.hero-visual::before {
  content: '';
  position: absolute;
  inset: 16px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(255, 253, 247, 0.58);
}

.hero-visual::after {
  content: 'PW';
  position: absolute;
  inset-inline-start: -22px;
  top: -24px;
  z-index: 3;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: var(--archive-paper);
  background: var(--archive-clay);
  font-family: var(--archive-display-en);
  font-size: 1.25rem;
  border-radius: 50%;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(0.86) contrast(0.98);
}

.hero-visual-meta {
  position: absolute;
  inset-inline-end: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 8px 10px;
  color: var(--archive-paper);
  background: rgba(20, 33, 27, 0.88);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-content {
  position: static;
  grid-column: 7 / 13;
  grid-row: 1;
  display: flex;
  max-width: none;
  min-width: 0;
  padding: 62px 34px 32px 24px;
  flex: initial;
  align-items: flex-start;
  justify-content: center;
  text-align: start;
  background: transparent;
}

html[dir='ltr'] .hero-content {
  grid-column: 1 / 7;
  grid-row: 1;
  padding: 62px 24px 32px 34px;
}

.hero-edition {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: auto;
  padding-bottom: 16px;
  color: var(--archive-ink-soft);
  border-bottom: 1px solid var(--archive-line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero .eyebrow {
  display: block;
  margin: 54px 0 18px;
  padding: 0;
  color: var(--archive-clay-deep);
  background: transparent;
  border: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: clamp(3.5rem, 6.2vw, 6.6rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-shadow: none;
}

html[dir='ltr'] .hero h1 {
  font-family: var(--archive-display-en);
  font-size: clamp(4.4rem, 7.2vw, 7.6rem);
  font-weight: 500;
  line-height: 0.79;
  letter-spacing: -0.055em;
}

.hero h1 span,
.hero h1 .accent-rare {
  color: inherit;
}

.hero-rule {
  width: 86px;
  height: 1px;
  margin: 28px 0 20px;
  background: var(--archive-clay);
}

.hero p.sub {
  max-width: 560px;
  margin: 0;
  color: var(--archive-ink-soft);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.95;
  opacity: 1;
}

.hero-actions {
  display: flex;
  width: 100%;
  gap: 12px;
  margin-top: 30px;
}

.hero .btn-primary,
.hero .btn-ghost {
  position: relative;
  display: inline-flex;
  width: auto;
  min-height: 50px;
  margin: 0;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 0;
  font-size: 0.83rem;
  font-weight: 600;
  box-shadow: none;
  /* scale is declared here rather than in the shared press block below:
     `.hero .btn-primary` outranks that block on specificity and would
     otherwise drop it, leaving the hero CTAs without an eased release. */
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease,
              scale 130ms cubic-bezier(.22, .9, .24, 1);
}

.hero .btn-primary {
  color: var(--archive-paper);
  background: var(--archive-ink);
  border: 1px solid var(--archive-ink);
}

.hero .btn-primary::after {
  display: none;
}

.hero .btn-primary:hover {
  color: var(--archive-white);
  background: var(--archive-clay-deep);
  border-color: var(--archive-clay-deep);
  transform: none;
  box-shadow: none;
}

.hero .btn-ghost {
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-line);
}

.hero .btn-ghost:hover {
  color: var(--archive-paper);
  background: var(--archive-ink);
  border-color: var(--archive-ink);
  transform: none;
}

.hero-trust {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--archive-line);
  border-bottom: 1px solid var(--archive-line);
}

.hero-trust-item {
  position: relative;
  padding: 13px 8px;
  color: var(--archive-ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  text-align: center;
}

.hero-trust-item + .hero-trust-item {
  border-inline-start: 1px solid var(--archive-line);
}

.hero-trust-item::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-end: 7px;
  background: var(--archive-clay);
  border-radius: 50%;
  vertical-align: middle;
}

@keyframes archive-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content > * {
  animation: archive-enter 700ms cubic-bezier(.22, .72, .18, 1) both;
}

.hero-content > :nth-child(2) { animation-delay: 70ms; }
.hero-content > :nth-child(3) { animation-delay: 120ms; }
.hero-content > :nth-child(4) { animation-delay: 170ms; }
.hero-content > :nth-child(5) { animation-delay: 210ms; }
.hero-content > :nth-child(6) { animation-delay: 250ms; }
.hero-content > :nth-child(7) { animation-delay: 290ms; }
.hero-content > :nth-child(8) { animation-delay: 330ms; }

/* Rarity legend — an archive index. */
.legend {
  display: grid;
  width: min(calc(100% - 68px), 1372px);
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 3fr);
  gap: 30px;
  margin: 72px auto 0;
  padding: 24px 0;
  background: transparent;
  border-top: 1px solid var(--archive-line);
  border-bottom: 1px solid var(--archive-line);
  box-shadow: none;
}

.legend-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline-end: 30px;
  color: var(--archive-ink-soft);
  border-inline-end: 1px solid var(--archive-line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: start;
}

.stakes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stake {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 10px;
  padding: 0 18px;
  align-items: center;
  justify-items: start;
  text-align: start;
}

.stake + .stake {
  border-inline-start: 1px solid var(--archive-line-soft);
}

.stake .dot {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  color: var(--archive-ink) !important;
  background: transparent !important;
  border: 1px solid var(--archive-line);
  font-family: var(--archive-display-en);
  font-size: 1rem;
}

.stake .name {
  color: var(--archive-ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.stake .desc {
  color: var(--archive-ink-soft);
  font-size: 0.64rem;
  opacity: 0.72;
}

/* New arrivals — the dark exhibition room. */
.arrival {
  position: relative;
  margin-top: 96px;
  padding: 90px 0 104px;
  color: var(--archive-paper);
  background: var(--archive-ink);
  overflow: hidden;
}

.arrival::before {
  content: '01';
  position: absolute;
  inset-inline-end: 34px;
  top: 18px;
  color: rgba(240, 236, 226, 0.06);
  font-family: var(--archive-display-en);
  font-size: 11rem;
  line-height: 1;
}

.arrival-head {
  max-width: 1372px;
  margin: 0 auto 38px;
  padding: 0 34px;
  align-items: flex-end;
}

.arrival-head h2 {
  color: var(--archive-paper);
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  font-weight: 500;
  line-height: 0.9;
}

.arrival-head h2::after {
  display: none;
}

.arrival-head .hint {
  color: var(--archive-sage);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
}

.arrival-track {
  max-width: 1440px;
  gap: 18px;
  padding: 0 34px 12px;
  scroll-padding-inline: 34px;
}

.arrival-card {
  flex: 0 0 min(330px, 82vw);
  width: min(330px, 82vw);
  color: var(--archive-ink);
  background: var(--archive-paper);
  border: 1px solid rgba(240, 236, 226, 0.18);
  border-radius: 0;
  box-shadow: none;
}

.arrival-card:hover {
  border-color: var(--archive-clay);
  box-shadow: none;
  transform: translateY(-3px);
}

.arrival-photo {
  height: auto;
  aspect-ratio: 4 / 5;
  background: var(--archive-paper-deep);
}

.arrival-photo img {
  filter: saturate(0.9);
}

.arrival-tag,
.arrival-sold,
.sale-tag {
  padding: 7px 9px;
  color: var(--archive-paper);
  background: var(--archive-clay-deep);
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0;
}

.arrival-body {
  padding: 18px;
}

.arrival-body h3 {
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 1.25rem;
  font-weight: 600;
}

html[dir='ltr'] .arrival-body h3 {
  font-family: var(--archive-display-en);
  font-size: 1.45rem;
}

.arrival-price {
  color: var(--archive-clay-deep);
}

/* Collection — quiet catalogue pages. */
.shop {
  position: relative;
  padding: 118px 0 126px;
  background: var(--archive-paper);
}

.shop::before {
  content: '02 / THE COLLECTION';
  position: absolute;
  inset-inline-start: max(34px, calc((100% - 1372px) / 2));
  top: 58px;
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
}

.shop > .wrap {
  max-width: 1440px;
  padding: 0 34px;
}

.section-head {
  max-width: 900px;
  margin: 0 0 42px;
  text-align: start;
}

.section-head h2 {
  margin: 0 0 16px;
  color: var(--archive-ink);
  font-size: clamp(3.4rem, 6vw, 6.4rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.section-head h2::after {
  display: none;
}

.section-head p {
  max-width: 580px;
  color: var(--archive-ink-soft);
  font-size: 0.9rem;
  line-height: 1.9;
  opacity: 1;
}

.segmented-wrap {
  justify-content: flex-start;
  margin-bottom: 24px;
  border-top: 1px solid var(--archive-line);
  border-bottom: 1px solid var(--archive-line);
}

.segmented {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.segmented-indicator {
  display: none;
}

.seg-btn {
  min-width: auto;
  padding: 15px 20px;
  color: var(--archive-ink-soft);
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--archive-line-soft);
  border-radius: 0;
  font-size: 0.74rem;
}

.seg-btn.active {
  color: var(--archive-paper);
  background: var(--archive-ink);
}

.brand-filter {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 34px;
  padding: 8px 0 16px;
}

.story-item {
  width: 84px;
  gap: 8px;
}

.story-ring {
  width: 68px;
  height: 68px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--archive-line);
  border-radius: 0;
}

.story-item.active .story-ring {
  background: transparent;
  border: 2px solid var(--archive-clay);
}

.story-logo,
.story-all {
  border: 5px solid var(--archive-paper);
  border-radius: 0;
}

.story-name {
  color: var(--archive-ink-soft);
  font-size: 0.65rem;
}

.story-item.active .story-name {
  color: var(--archive-clay-deep);
}

.grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 54px 18px;
}

.card {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.card:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.card-media {
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--archive-paper-deep);
  border: 1px solid var(--archive-line-soft);
  border-radius: 0;
}

.card-media::after {
  background: linear-gradient(180deg, transparent 60%, rgba(20, 33, 27, 0.15));
}

.card-img {
  filter: saturate(0.9);
  transition: transform 600ms cubic-bezier(.22, .72, .18, 1), filter 300ms ease;
}

.card:hover .card-img {
  filter: saturate(1);
  transform: scale(1.025);
}

/* The rarity seal — now the only place rarity is said.
   It carried a drop shadow, which made it the one soft, floating, sticker-like
   object on a card built entirely from flat paper and hairlines. Stamped, not
   stuck on: no shadow, and the ring is the same hairline the caption rule and
   the plate frame are drawn with, so it belongs to the archive rather than
   hovering above it. Slightly smaller too — a mark, not a badge.
   The letter stays legible over any photograph because the ink disc stays. */
.badge-seal {
  top: 10px;
  inset-inline-start: 10px;
  width: 32px;
  height: 32px;
  color: var(--archive-paper) !important;
  background: var(--archive-ink) !important;
  border: 1px solid rgba(240, 236, 226, 0.32);
  border-radius: 50%;
  box-shadow: none;
  font-family: var(--archive-display-en);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.card-body {
  padding: 15px 0 0;
}

.card-body .name-ar {
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 1.2rem;
  font-weight: 600;
}

html[dir='ltr'] .card-body .name-ar {
  font-family: var(--archive-display-en);
  font-size: 1.38rem;
}

.card:hover .name-ar {
  color: var(--archive-clay-deep);
}

.card-body .name-en {
  color: var(--archive-ink-soft);
  font-family: var(--archive-display-en);
  font-size: 0.78rem;
}

.card-body .price {
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
}

.card-body .cart-btn,
.card-body .order-btn,
.arrival-body .cart-btn,
.arrival-body .order-btn {
  min-height: 42px;
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-line);
  border-radius: 0;
  font-size: 0.72rem;
}

.card-body .cart-btn:hover,
.card-body .order-btn:hover,
.arrival-body .cart-btn:hover,
.arrival-body .order-btn:hover {
  color: var(--archive-paper);
  background: var(--archive-ink);
  border-color: var(--archive-ink);
}

.request-card {
  min-height: 100%;
  padding: 34px;
  color: var(--archive-paper);
  background: var(--archive-clay-deep);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.request-card h3 {
  color: var(--archive-paper);
  font-size: 1.8rem;
}

.request-card a {
  color: var(--archive-ink);
  background: var(--archive-paper);
  border-radius: 0;
}

/* Brand story image — cinematic but treated like a gallery print. */
.lifestyle-banner {
  width: min(calc(100% - 68px), 1372px);
  height: min(68vw, 720px);
  min-height: 520px;
  margin: 0 auto 110px;
  border: 1px solid var(--archive-line);
}

.lifestyle-banner::before {
  content: '03 / SPACES THAT BREATHE';
  position: absolute;
  inset-inline-start: 22px;
  top: 20px;
  z-index: 4;
  color: var(--archive-paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
}

.lifestyle-banner img {
  filter: saturate(0.75) contrast(0.96);
}

.lifestyle-overlay {
  background: linear-gradient(180deg, rgba(20, 33, 27, 0.06), rgba(20, 33, 27, 0.84));
}

.lifestyle-content {
  align-items: flex-start;
  padding: 0 44px 48px;
  text-align: start;
}

.lifestyle-content h2 {
  max-width: 820px;
  margin: 0 0 12px;
  color: var(--archive-paper);
  font-family: var(--archive-display-ar);
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-shadow: none;
}

html[dir='ltr'] .lifestyle-content h2 {
  font-family: var(--archive-display-en);
}

.lifestyle-content p {
  max-width: 520px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
  text-shadow: none;
}

.lifestyle-content .lifestyle-note {
  max-width: 460px;
  margin-top: 16px;
  padding-top: 16px;
  color: rgba(240, 236, 226, 0.82);
  border-top: 1px solid rgba(240, 236, 226, 0.24);
  font-size: 0.82rem;
  line-height: 1.9;
}

/* Care — a printed field guide. */
.care {
  position: relative;
  padding: 118px 34px 126px;
  color: var(--archive-ink);
  background: var(--archive-paper-deep);
  background-image: none;
}

.care::before {
  content: '04 / FIELD NOTES';
  position: absolute;
  inset-inline-start: max(34px, calc((100% - 1372px) / 2));
  top: 54px;
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
}

.care > .wrap {
  max-width: 1372px;
  padding: 0;
}

.care-head {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 54px;
  text-align: start;
}

.care-head h2 {
  margin: 0;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: clamp(3.2rem, 6vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

html[dir='ltr'] .care-head h2 {
  font-family: var(--archive-display-en);
}

.care-head h2::after {
  display: none;
}

.care-head p {
  max-width: 440px;
  margin: 0;
  color: var(--archive-ink-soft);
  font-size: 0.9rem;
  line-height: 1.9;
  opacity: 1;
}

.care-grid {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--archive-line);
  border-inline-start: 1px solid var(--archive-line);
}

.care-card {
  min-height: 380px;
  padding: 28px;
  color: var(--archive-ink);
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--archive-line);
  border-bottom: 1px solid var(--archive-line);
  border-radius: 0;
}

.care-card:hover {
  color: var(--archive-paper);
  background: var(--archive-ink);
  transform: none;
}

.care-art {
  height: 130px;
  margin: 0 0 30px;
  justify-content: flex-start;
  background: transparent;
  border-radius: 0;
}

.care-art svg {
  width: 130px;
  height: 100px;
}

.care-card h3 {
  margin: 0 0 14px;
  color: var(--archive-clay-deep);
  font-family: var(--archive-display-ar);
  font-size: 1.55rem;
  font-weight: 600;
}

html[dir='ltr'] .care-card h3 {
  font-family: var(--archive-display-en);
  font-size: 1.75rem;
}

.care-card:hover h3 {
  color: var(--archive-paper);
}

.care-card p {
  color: var(--archive-ink-soft);
  font-size: 0.8rem;
  line-height: 2;
  opacity: 1;
}

.care-card:hover p {
  color: var(--archive-paper-deep);
}

/* Inspiration — one editorial spread: a large photo, a follow-along panel,
   two supporting photos. One visual language, one photo treatment, one CTA.
   Real product photography only; JS fills .inspiration-feature/-minor and
   prefers non-featured products to avoid repeating the Arrival carousel. */
.inspiration {
  position: relative;
  padding: 96px 0;
  background: var(--archive-paper);
}

.inspiration::before {
  content: '07 / IDEAS & INSPIRATION';
  position: absolute;
  inset-inline-start: max(34px, calc((100% - 1372px) / 2));
  top: 54px;
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
}

.inspiration-head {
  max-width: 1372px;
  margin: 0 auto 40px;
  padding: 0 34px;
  text-align: start;
}

.inspiration-head h2 {
  margin: 0 0 8px;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

html[dir='ltr'] .inspiration-head h2 {
  font-family: var(--archive-display-en);
}

.inspiration-head .hint {
  color: var(--archive-ink-soft);
  font-size: 0.85rem;
}

.inspiration-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.9fr;
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  gap: 1px;
  max-width: 1372px;
  margin: 0 auto;
  padding: 0 34px;
  background: var(--archive-line-soft);
}

.inspiration-feature {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  cursor: pointer;
  overflow: hidden;
  background: var(--archive-paper-deep);
}

.inspiration-minor {
  position: relative;
  grid-column: 3;
  cursor: pointer;
  overflow: hidden;
  background: var(--archive-paper-deep);
}

.inspiration-feature img,
.inspiration-minor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 500ms cubic-bezier(0.22, 0.72, 0.18, 1);
}

.inspiration-feature:hover img,
.inspiration-minor:hover img {
  transform: scale(1.04);
}

.inspiration-tag {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 2;
  padding: 7px 12px;
  color: var(--archive-paper);
  background: rgba(20, 33, 27, 0.7);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}

.inspiration-panel {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 34px;
  background: var(--archive-paper);
  text-align: start;
}

.inspiration-eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inspiration-handle {
  margin: 0 0 14px;
  color: var(--archive-ink);
  font-family: var(--archive-mono);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 500;
  word-break: break-word;
}

.inspiration-line {
  margin: 0 0 26px;
  color: var(--archive-ink-soft);
  font-size: 0.85rem;
  line-height: 1.8;
}

.inspiration-link {
  display: inline-flex;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 22px;
  align-items: center;
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-line-strong);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.inspiration-link:hover {
  color: var(--archive-paper);
  background: var(--archive-ink);
  border-color: var(--archive-ink);
}

/* Final CTA — one confident closing statement (absorbs delivery info),
   one message, one action; bridges into the footer below. */
.final-cta {
  position: relative;
  padding: 100px 34px;
  text-align: center;
  color: var(--archive-paper);
  background: var(--archive-ink);
  border-top: 1px solid rgba(240, 236, 226, 0.14);
}

.final-cta::before {
  content: '08 / READY';
  position: absolute;
  inset-inline-start: max(34px, calc((100% - 1372px) / 2));
  top: 40px;
  color: var(--archive-clay-light);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
}

.final-cta .wrap {
  max-width: 640px;
}

.final-cta h2 {
  margin: 0 0 16px;
  color: var(--archive-paper);
  font-family: var(--archive-display-ar);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

html[dir='ltr'] .final-cta h2 {
  font-family: var(--archive-display-en);
}

.final-cta p {
  max-width: 480px;
  margin: 0 auto 32px;
  color: rgba(240, 236, 226, 0.78);
  font-size: 0.92rem;
  line-height: 1.8;
}

.final-cta .btn-primary {
  position: static;
  display: inline-flex;
  width: auto;
  min-height: 52px;
  margin: 0;
  padding: 0 30px;
  color: var(--archive-ink);
  background: var(--archive-clay-light);
  border: 1px solid var(--archive-clay-light);
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.final-cta .btn-primary::after {
  display: none;
}

.final-cta .btn-primary:hover {
  color: var(--archive-paper);
  background: var(--archive-clay-deep);
  border-color: var(--archive-clay-deep);
  transform: none;
  box-shadow: none;
}

footer {
  padding: 58px 34px 32px;
  color: var(--archive-paper);
  background: var(--archive-ink);
  background-image: none;
  border-top: 1px solid rgba(240, 236, 226, 0.16);
}

footer .wrap {
  max-width: 1372px;
  padding: 0;
}

footer .brand-name {
  color: var(--archive-paper);
  font-family: var(--archive-display-en);
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 0.85;
}

footer .brand-name b {
  color: var(--archive-clay);
  font-weight: 500;
}

footer .foot-ic {
  border-color: rgba(240, 236, 226, 0.28);
  border-radius: 50%;
}

footer .foot-links {
  padding: 16px 0;
  border-top: 1px solid rgba(240, 236, 226, 0.14);
  border-bottom: 1px solid rgba(240, 236, 226, 0.14);
}

/* Reusable surfaces follow the new material language. */
.search-results,
.sheet,
.cart-drawer,
.account-drawer {
  color: var(--archive-ink);
  background: var(--archive-paper);
  border-color: var(--archive-line);
  border-radius: 0;
}

.sheet-close {
  color: var(--archive-paper);
  background: var(--archive-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sheet-actions .order-btn {
  color: var(--archive-paper);
  background: var(--archive-ink);
  border: 1px solid var(--archive-ink);
  border-radius: 0;
}

.sheet-actions .order-btn:hover {
  color: var(--archive-white);
  background: var(--archive-clay-deep);
  border-color: var(--archive-clay-deep);
}

.sheet-actions .add-cart-btn {
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-line);
  border-radius: 0;
}

.float-wa {
  width: 52px;
  height: 52px;
  background: var(--archive-ink);
  border: 1px solid rgba(240, 236, 226, 0.4);
  box-shadow: none;
  animation: none;
}

/* Tablet. */
@media (max-width: 1040px) {
  .nav-inner {
    padding-inline: 22px;
  }

  nav.links {
    gap: 18px;
  }

  .search-box {
    min-width: 150px;
  }

  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    min-height: 680px;
    padding: 46px 22px 50px;
  }

  .hero::after {
    inset-inline: 22px;
  }

  .hero-visual {
    right: 22px;
    top: 76px;
    bottom: 78px;
    width: calc(50% - 33px);
    min-height: 540px;
  }

  .hero-content,
  html[dir='ltr'] .hero-content {
    grid-column: 2;
    grid-row: 1;
    padding: 54px 12px 24px 18px;
  }

  html[dir='ltr'] .hero-content { grid-column: 1; }

  .hero-visual img {
    min-height: 540px;
  }

  .hero h1,
  html[dir='ltr'] .hero h1 {
    font-size: clamp(3.1rem, 6vw, 4.6rem);
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero .btn-primary,
  .hero .btn-ghost {
    width: 100%;
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile — image and editorial page become two distinct panels. */
@media (max-width: 760px) {
  body {
    background-size: 100% 40px;
  }

  header.nav {
    padding: 0;
  }

  .nav-inner {
    min-height: 66px;
    padding: 0 16px;
    background: var(--archive-paper);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .brand-name,
  .nav-inner .brand-name {
    max-width: 104px;
    font-size: 1.14rem;
  }

  .menu-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--archive-ink);
    border: 1px solid var(--archive-line);
    border-radius: 50%;
    font-size: 0;
  }

  .menu-toggle::before {
    content: '≡';
    font-size: 1.25rem;
  }

  nav.links {
    top: 66px;
    inset-inline: 0;
    width: 100%;
    padding: 22px 16px 30px;
    background: var(--archive-paper);
    border: 0;
    border-bottom: 1px solid var(--archive-line);
    border-radius: 0;
    box-shadow: none;
  }

  nav.links a,
  nav.links .nav-setting-row {
    min-height: 52px;
    border-bottom-color: var(--archive-line-soft);
  }

  .hero {
    display: flex;
    width: 100%;
    min-height: calc(100dvh - 74px);
    margin: 0;
    padding: 0 16px 38px;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--archive-line);
  }

  .hero::before {
    left: 16px;
    bottom: 18px;
    font-size: 0.56rem;
    letter-spacing: 0.3em;
  }

  .hero::after {
    display: none;
  }

  .hero-content,
  html[dir='ltr'] .hero-content {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: auto;
    padding: 20px 0 16px;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* هيرو الجوال = غلاف مجلة (Compact Masthead + Full-bleed Specimen):
     ترتيب DOM موحّد ومطابق تماماً للترتيب البصري في كل الأجهزة (شريط
     الأرشيف، eyebrow، العنوان، الفاصل، الصورة، النص الفرعي، CTA، شريط
     الثقة) — صفر استخدام لـorder، فترتيب القراءة مطابق للمرئي تماماً.
     العنوان مضبوط قياسياً على سطرين (9.85vw يُبقي السطر الأطول بسطر واحد
     على كل عروض الجوال)، والصورة full-bleed بعرض الشاشة الكامل مع بقاء
     الإطار الداخلي وختم PW وتعليق العيّنة. */
  .hero-visual,
  html[dir='ltr'] .hero-visual {
    position: static;
    inset: auto;
    width: calc(100% + 32px);
    min-height: 220px;
    margin: 8px -16px 4px;
    flex: 1 1 0;
    aspect-ratio: auto;
    border-inline: 0;
    box-shadow: none;
  }

  .hero-visual::after {
    inset-inline-start: 12px;
    top: -12px;
    width: 52px;
    height: 52px;
    font-size: 1rem;
  }

  .hero-visual img {
    min-height: 0;
    object-position: 50% 45%;
  }

  .hero-visual-meta {
    inset-inline-end: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    font-size: 0.52rem;
  }

  .hero-edition {
    margin: 2px 0 0;
    padding-bottom: 5px;
    font-size: 0.53rem;
    opacity: 0.75;
  }

  .hero .eyebrow {
    margin: 6px 0 4px;
    font-size: 0.68rem;
  }

  .hero h1,
  html[dir='ltr'] .hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 9.85vw, 3.4rem);
    line-height: 0.96;
  }

  html[dir='ltr'] .hero h1 {
    line-height: 0.88;
  }

  .hero-rule {
    margin: 6px 0 0;
  }

  .hero p.sub {
    margin-top: 4px;
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 8px;
  }

  .hero .btn-primary,
  .hero .btn-ghost {
    min-height: 48px;
  }

  .hero-trust {
    margin-top: 16px;
  }

  .hero-trust-item {
    padding: 11px 3px;
    font-family: var(--archive-body);
    font-size: 0.58rem;
  }

  .legend {
    display: block;
    width: calc(100% - 32px);
    margin-top: 48px;
    padding: 0;
  }

  .legend-title {
    padding: 16px 0;
    border-inline-end: 0;
    border-bottom: 1px solid var(--archive-line);
  }

  .stakes {
    grid-template-columns: repeat(2, 1fr);
  }

  .stake {
    min-height: 82px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--archive-line-soft);
  }

  .stake:nth-child(odd) {
    border-inline-start: 0;
  }

  .arrival {
    margin-top: 48px;
    padding: 52px 0 58px;
  }

  .arrival::before {
    inset-inline-end: 16px;
    font-size: 7rem;
  }

  .arrival-head {
    margin-bottom: 24px;
    padding-inline: 16px;
  }

  .arrival-head h2 {
    font-size: 3.4rem;
    letter-spacing: -0.02em;
  }

  .arrival-track {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .arrival-card {
    flex-basis: min(300px, 82vw);
  }

  .shop {
    padding: 98px 0 88px !important;
  }

  .shop::before {
    inset-inline-start: 16px;
    top: 50px;
  }

  .shop > .wrap {
    padding: 0 16px;
  }

  .section-head h2 {
    font-size: 3.7rem;
    letter-spacing: -0.02em;
  }

  .segmented-wrap {
    overflow-x: auto;
  }

  #filters {
    width: 100%;
    min-width: 0;
    overflow-x: visible;
  }

  #filters .seg-btn {
    min-width: 0;
    padding: 13px 4px;
    flex: 1 1 0;
    font-size: 0.62rem;
    line-height: 1.25;
    white-space: normal;
  }

  .brand-filter {
    margin-inline: 0;
  }

  #grid,
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 12px;
  }

  #grid .card-media {
    aspect-ratio: 4 / 5;
  }

  #grid .card-body {
    padding: 11px 0 0;
  }

  #grid .card-body .name-ar {
    font-size: 1rem;
  }

  .lifestyle-banner {
    width: calc(100% - 32px);
    min-height: 560px;
    height: 72vh;
    margin-bottom: 72px;
  }

  .lifestyle-content {
    padding: 0 20px 26px;
  }

  .lifestyle-content h2 {
    font-size: 3.3rem;
    letter-spacing: -0.02em;
  }

  .care {
    padding: 72px 16px 64px;
  }

  .care::before {
    inset-inline-start: 16px;
    top: 50px;
  }

  .care-head {
    display: block;
    margin-bottom: 24px;
  }

  .care-head h2 {
    margin-bottom: 14px;
    font-size: 3.5rem;
    letter-spacing: -0.02em;
  }

  .care-grid {
    grid-template-columns: 1fr;
  }

  .care-card {
    min-height: auto;
    padding: 24px 20px 28px;
  }

  .care-art {
    height: 94px;
    margin-bottom: 18px;
  }

  .care-art svg {
    width: 104px;
    height: 84px;
  }

  .inspiration {
    padding: 84px 0;
  }

  .inspiration::before {
    inset-inline-start: 16px;
    top: 50px;
  }

  .inspiration-head {
    padding-inline: 16px;
  }

  .inspiration-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    padding-inline: 16px;
  }

  .inspiration-feature {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }

  .inspiration-minor {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }

  .inspiration-panel {
    grid-column: 1;
    grid-row: auto;
    padding: 32px 4px;
  }

  .final-cta {
    padding: 80px 20px;
  }

  .final-cta::before {
    inset-inline-start: 20px;
    top: 32px;
  }

  footer {
    padding-inline: 16px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  footer .brand-name {
    font-size: 3rem;
  }

  /* Phase 2A: the tab bar moved to assets/tabbar.css — one definition instead
     of a glass pill in index.html that this block quietly overrode on phones. */
}

@media (max-width: 900px) {
  /* R1: stakes wrap to 2 columns across the tablet range (761–900) so 4 columns
     stop cramming and overflowing (~41px at 768). Desktop/iPad ≥901 unchanged. */
  .stakes { grid-template-columns: repeat(2, 1fr); }
  .stake { min-width: 0; }
}

@media (max-width: 1040px) {
  /* R2: touch targets ≥44px across mobile+tablet widths (≤1040); desktop ≥1041 unchanged.
     Header icons + hamburger to a 44px circle (glyph size preserved). */
  .icon-toggle { width: 44px; height: 44px; }
  .menu-toggle { width: 44px; height: 44px; }
  footer .foot-ic { width: 44px; height: 44px; }
  /* the tab bar's own 48px floor lives in assets/tabbar.css */

  /* R4: taller, easier-to-hit search field. min-height guarantees the 44px tap area;
     it does NOT force display (mobile search stays toggle-hidden until opened). */
  .search-box { min-height: 44px; padding-block: 12px; }
}

@media (min-width: 761px) and (max-width: 1040px) {
  /* R2 (tablet only): horizontal header nav links get a 44px hit height.
     Scoped above 760px so the ≤760 mobile menu (already 52px, full-width block) is untouched. */
  nav.links a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 390px) {
  .hero-trust-item::before {
    display: none;
  }

  .stake {
    grid-template-columns: 32px 1fr;
    column-gap: 8px;
  }

  .stake .dot {
    width: 32px;
    height: 32px;
  }
}

/* Order ledger — the cart is a considered collection, not a utility popup. */
.cart-overlay {
  z-index: 115;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(8, 15, 12, 0.74);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cart-sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(620px, 100%);
  max-width: 620px;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  color: var(--archive-ink);
  background: var(--archive-paper);
  border: 0;
  border-inline-start: 1px solid rgba(240, 236, 226, 0.28);
  border-radius: 0;
  box-shadow: -32px 0 90px rgba(0, 0, 0, 0.26);
  transform: translateX(-100%);
  transition: transform 0.44s var(--archive-ease);
}

html[dir='ltr'] .cart-sheet {
  transform: translateX(100%);
}

.cart-overlay.open .cart-sheet,
html[dir='ltr'] .cart-overlay.open .cart-sheet {
  transform: translateX(0);
}

.cart-sheet > .sheet-close {
  position: absolute;
  z-index: 8;
  top: 24px;
  inset-inline-end: 24px;
  width: 42px;
  height: 42px;
  color: var(--archive-paper);
  background: transparent;
  border: 1px solid rgba(240, 236, 226, 0.38);
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.cart-sheet > .sheet-close:hover {
  color: var(--archive-white);
  background: var(--archive-clay-deep);
  transform: rotate(4deg);
}

.cart-sheet-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  padding: 30px 86px 30px 34px;
  color: var(--archive-paper);
  background: linear-gradient(rgba(240, 236, 226, 0.04) 1px, transparent 1px), var(--archive-ink);
  background-size: 100% 42px;
  border-bottom: 1px solid rgba(240, 236, 226, 0.2);
}

html[dir='rtl'] .cart-sheet-head {
  padding-inline: 34px 86px;
}

.cart-folio {
  grid-column: 1 / -1;
  color: var(--archive-clay-light);
  font-family: var(--archive-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

html[dir='rtl'] .cart-folio {
  letter-spacing: 0;
}

.cart-sheet-head h2 {
  margin: 0 0 7px;
  color: var(--archive-paper);
  font-family: var(--archive-display-ar);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

html[dir='ltr'] .cart-sheet-head h2 {
  font-family: var(--archive-display-en);
  font-size: clamp(3.2rem, 7vw, 5.3rem);
}

.cart-sheet-head p {
  max-width: 36ch;
  color: rgba(240, 236, 226, 0.68);
  font-size: 0.74rem;
  line-height: 1.8;
}

.cart-count-summary {
  align-self: end;
  color: var(--archive-paper);
  font-family: var(--archive-display-en);
  font-size: 3.5rem;
  line-height: 0.8;
}

.cart-sheet-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.cart-sheet .cart-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--archive-muted) transparent;
}

.cart-sheet .cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 20px 30px;
  border-bottom: 1px solid var(--archive-line);
}

.cart-item-index {
  align-self: start;
  padding-top: 3px;
  color: var(--archive-muted);
  font-family: var(--archive-mono);
  font-size: 0.62rem;
}

.cart-sheet .cart-thumb {
  width: 88px;
  height: 92px;
  background: var(--archive-fog);
  border: 1px solid var(--archive-line);
  border-radius: 0;
}

.cart-sheet .cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-sheet .cart-info .n {
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.25;
}

html[dir='ltr'] .cart-sheet .cart-info .n {
  font-family: var(--archive-display-en);
  font-size: 1.35rem;
}

.cart-sheet .cart-info .p {
  margin-top: 7px;
  color: var(--archive-clay-deep);
  font-family: var(--archive-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.cart-sheet .qty {
  display: grid;
  grid-template-columns: 28px 28px 28px;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--archive-line-strong);
  border-radius: 0;
}

.cart-sheet .qty button,
.cart-sheet .qty .q {
  width: 28px;
  min-width: 28px;
  height: 32px;
  border-radius: 0;
}

.cart-sheet .qty button {
  color: var(--archive-ink);
  background: transparent;
  font-size: 0.86rem;
}

.cart-sheet .qty button:hover {
  color: var(--archive-paper);
  background: var(--archive-ink);
}

.cart-sheet .qty .q {
  display: grid;
  place-items: center;
  font-family: var(--archive-mono);
  font-size: 0.68rem;
  border-inline: 1px solid var(--archive-line);
}

.cart-footer {
  max-height: 56vh;
  overflow-y: auto;
  padding: 22px 30px calc(24px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--archive-paper) 96%, var(--archive-white));
  border-top: 1px solid var(--archive-line-strong);
}

.cart-sheet .promo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin: 0 0 8px;
}

.cart-sheet .promo-row input {
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-line-strong);
  border-radius: 0;
  font-family: var(--archive-mono);
  font-size: 0.74rem;
  outline: none;
}

.cart-sheet .promo-row input:focus {
  border-color: var(--archive-clay-deep);
}

.cart-sheet .promo-btn {
  min-width: 88px;
  padding: 0 16px;
  color: var(--archive-paper);
  background: var(--archive-ink);
  border: 1px solid var(--archive-ink);
  border-radius: 0;
  font-family: var(--archive-body);
  font-size: 0.72rem;
  font-weight: 700;
}

.cart-sheet .promo-msg {
  min-height: 18px;
  margin: 0;
  font-size: 0.68rem;
}

.cart-reference-row,
.cart-sheet .cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 10px 0;
  color: var(--archive-ink-soft);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--archive-line);
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 500;
}

.cart-reference-row strong {
  color: var(--archive-muted);
  font-family: var(--archive-mono);
  font-size: 0.68rem;
  direction: ltr;
}

.cart-sheet .cart-total .amount {
  color: var(--archive-ink);
  font-family: var(--archive-display-en);
  font-size: 1.2rem;
  font-weight: 650;
}

.cart-sheet .cart-discount .amount {
  color: var(--archive-clay-deep);
  font-size: 1rem;
}

.cart-sheet .cart-grand-total {
  padding: 16px 0;
  color: var(--archive-ink);
  font-weight: 750;
  border-bottom: 0;
}

.cart-sheet .cart-grand-total .amount {
  color: var(--archive-clay-deep);
  font-size: 2rem;
}

.cart-sheet .checkout-btn {
  min-height: 54px;
  margin: 0;
  padding: 14px 18px;
  color: var(--archive-paper);
  background: var(--archive-ink);
  background-image: none;
  border: 1px solid var(--archive-ink);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.8rem;
}

.cart-sheet .checkout-btn:hover {
  background: var(--archive-clay-deep);
  border-color: var(--archive-clay-deep);
  box-shadow: none;
  transform: none;
}

.cart-whatsapp-alt {
  display: block;
  padding: 12px 0 4px;
  color: var(--archive-ink-soft);
  font-size: 0.7rem;
  text-align: center;
}

.cart-whatsapp-alt:hover {
  color: var(--archive-clay-deep);
}

.cart-sheet .clear-btn {
  margin-top: 4px;
  color: var(--archive-muted);
  font-size: 0.68rem;
  text-decoration: none;
}

.cart-sheet .cart-note {
  max-width: 52ch;
  margin: 6px auto 0;
  color: var(--archive-muted);
  font-size: 0.62rem;
  line-height: 1.7;
}

.cart-sheet .cart-empty {
  display: grid;
  place-content: center;
  gap: 18px;
  min-height: 100%;
  padding: 60px 30px;
  color: var(--archive-ink-soft);
  text-align: center;
  opacity: 1;
}

.cart-sheet .cart-empty span {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  color: var(--archive-paper);
  background: var(--archive-ink);
  border-radius: 50%;
  font-family: var(--archive-display-en);
  font-size: 1.8rem;
}

.cart-sheet .cart-empty p {
  max-width: 34ch;
  font-size: 0.82rem;
  line-height: 1.8;
}

@media (max-width: 560px) {
  .cart-sheet {
    width: 100%;
    border-inline-start: 0;
    box-shadow: none;
  }

  .cart-sheet > .sheet-close {
    top: max(16px, env(safe-area-inset-top));
    inset-inline-end: 16px;
  }

  .cart-sheet-head {
    gap: 18px;
    padding: calc(22px + env(safe-area-inset-top)) 70px 22px 20px;
  }

  html[dir='rtl'] .cart-sheet-head {
    padding-inline: 20px 70px;
  }

  .cart-sheet-head h2 {
    font-size: 2.65rem;
  }

  html[dir='ltr'] .cart-sheet-head h2 {
    font-size: 3.2rem;
  }

  .cart-count-summary {
    font-size: 2.8rem;
  }

  .cart-sheet .cart-item {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 106px;
    padding: 16px;
  }

  .cart-item-index {
    position: absolute;
    top: 8px;
    inset-inline-start: 7px;
    z-index: 2;
    padding: 2px 4px;
    color: var(--archive-paper);
    background: var(--archive-ink);
  }

  .cart-sheet .cart-thumb {
    width: 68px;
    height: 74px;
  }

  .cart-sheet .cart-info .n {
    font-size: 1rem;
  }

  .cart-sheet .qty {
    grid-template-columns: 26px 26px 26px;
  }

  .cart-sheet .qty button,
  .cart-sheet .qty .q {
    width: 26px;
    min-width: 26px;
  }

  .cart-footer {
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  }
}

/* Product dossier — a full editorial product experience, not a quick-view card. */
.product-overlay {
  z-index: 120;
  align-items: center;
  padding: 24px;
  background: rgba(8, 15, 12, 0.86);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.product-sheet {
  width: min(1420px, 100%);
  max-width: 1420px;
  height: min(900px, calc(100dvh - 48px));
  max-height: none;
  overflow: hidden;
  color: var(--archive-ink);
  background: var(--archive-paper);
  border: 1px solid rgba(240, 236, 226, 0.32);
  border-radius: 0;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.36);
  transform: translateY(22px) scale(0.992);
  transition: transform 0.46s var(--archive-ease);
}

.product-overlay.open .product-sheet {
  transform: translateY(0) scale(1);
}

.product-sheet > .sheet-close {
  position: absolute;
  z-index: 10;
  top: 20px;
  inset-inline-end: 20px;
  width: 46px;
  height: 46px;
  color: var(--archive-paper);
  background: var(--archive-ink);
  border: 1px solid rgba(240, 236, 226, 0.34);
  border-radius: 50%;
  font-family: var(--archive-body);
  font-size: 0.96rem;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease,
              scale 130ms cubic-bezier(.22, .9, .24, 1);
}

.product-sheet > .sheet-close:hover {
  color: var(--archive-white);
  background: var(--archive-clay-deep);
  transform: rotate(4deg);
}

.product-sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(410px, 0.78fr);
  width: 100%;
  height: 100%;
}

.product-sheet-visual {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  padding: 26px;
  color: var(--archive-paper);
  background:
    linear-gradient(rgba(240, 236, 226, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 236, 226, 0.045) 1px, transparent 1px),
    var(--archive-ink);
  background-size: 56px 56px;
  border-inline-end: 1px solid var(--archive-line);
}

.product-sheet-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.product-sheet-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 70px clamp(34px, 4vw, 68px) 30px;
  scrollbar-width: thin;
  scrollbar-color: var(--archive-muted) transparent;
}

.product-sheet-footer {
  position: relative;
  z-index: 3;
  padding: 18px clamp(34px, 4vw, 68px) 24px;
  background: color-mix(in srgb, var(--archive-paper) 96%, var(--archive-white));
  border-top: 1px solid var(--archive-line-strong);
}

.dossier-index,
.dossier-caption {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

html[dir='rtl'] .dossier-index,
html[dir='rtl'] .dossier-caption {
  letter-spacing: 0;
}

.dossier-index {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(240, 236, 226, 0.24);
}

.dossier-index span:last-child {
  color: var(--archive-clay-light);
  font-family: var(--archive-mono);
  direction: ltr;
}

.product-sheet .sheet-hero {
  position: relative;
  height: auto;
  min-height: 0;
  margin: 22px 0;
  overflow: hidden;
  background: var(--archive-fog);
  border: 1px solid rgba(240, 236, 226, 0.18);
}

.product-sheet .sheet-hero::before,
.product-sheet .sheet-hero::after {
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  content: '';
  pointer-events: none;
  border-color: rgba(240, 236, 226, 0.62);
  border-style: solid;
}

.product-sheet .sheet-hero::before {
  top: 14px;
  inset-inline-end: 14px;
  border-width: 1px 1px 0 0;
}

.product-sheet .sheet-hero::after {
  bottom: 14px;
  inset-inline-start: 14px;
  border-width: 0 0 1px 1px;
}

.product-sheet .sheet-hero img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.002);
}

.product-sheet .sheet-hero > svg {
  width: min(240px, 42%);
  height: auto;
}

.product-sheet .sheet-hero .fav-btn {
  top: 18px;
  inset-inline-start: 18px;
  z-index: 5;
  width: 44px;
  height: 44px;
  color: var(--archive-ink);
  background: var(--archive-paper);
  border: 1px solid rgba(20, 33, 27, 0.2);
  border-radius: 50%;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.product-sheet .sheet-hero .fav-btn svg {
  width: 19px;
  height: 19px;
}

.dossier-caption {
  padding-top: 16px;
  color: rgba(240, 236, 226, 0.72);
  border-top: 1px solid rgba(240, 236, 226, 0.24);
}

.dossier-caption span:last-child {
  white-space: nowrap;
}

.dossier-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--archive-line-strong);
}

.product-sheet .sheet-badges {
  display: flex;
  gap: 8px;
  margin: 0;
}

.product-sheet .sheet-badges .badge {
  min-height: 26px;
  padding: 5px 10px;
  color: var(--archive-white);
  border: 0;
  border-radius: 0;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}

.dossier-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--archive-ink);
  font-size: 0.72rem;
  font-weight: 700;
}

.dossier-availability::before {
  width: 7px;
  height: 7px;
  content: '';
  background: var(--archive-sage);
  border-radius: 50%;
}

.dossier-availability.is-sold {
  color: var(--archive-clay-deep);
}

.dossier-availability.is-sold::before {
  background: var(--archive-clay);
}

.dossier-title-block {
  padding: clamp(34px, 5vh, 58px) 0 24px;
}

.dossier-overline {
  display: block;
  margin-bottom: 14px;
  color: var(--archive-clay-deep);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[dir='rtl'] .dossier-overline {
  letter-spacing: 0;
}

.product-sheet .sheet-body h2 {
  max-width: 680px;
  margin: 0;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: clamp(2.6rem, 4.2vw, 5.3rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

html[dir='ltr'] .product-sheet .sheet-body h2 {
  font-family: var(--archive-display-en);
  font-size: clamp(3.15rem, 5vw, 6.6rem);
  letter-spacing: -0.045em;
}

.product-sheet .sheet-body .latin {
  margin: 12px 0 0;
  color: var(--archive-muted);
  font-family: var(--archive-display-en);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.3;
  opacity: 1;
}

.product-sheet .sheet-price {
  margin: 0 0 clamp(30px, 5vh, 50px);
  color: var(--archive-clay-deep);
  font-family: var(--archive-display-en);
  font-size: clamp(2rem, 3vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.product-sheet .sheet-price .price-original {
  color: var(--archive-muted);
  font-size: 0.5em;
  font-weight: 500;
}

.product-sheet .sheet-price .price-sale {
  color: var(--archive-clay-deep);
}

.dossier-section {
  padding: 26px 0 30px;
  border-top: 1px solid var(--archive-line-strong);
}

.dossier-section[hidden] {
  display: none;
}

.dossier-section h3 {
  margin-bottom: 12px;
  color: var(--archive-ink);
  font-size: 0.78rem;
  font-weight: 750;
}

.product-sheet .sheet-body .desc {
  max-width: 62ch;
  margin: 0;
  color: var(--archive-ink-soft);
  font-size: 0.92rem;
  line-height: 2;
}

.dossier-ledger {
  margin: 0;
  border-top: 1px solid var(--archive-line-strong);
}

.dossier-ledger > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.76fr) minmax(0, 1.24fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--archive-line);
}

.dossier-ledger dt,
.dossier-ledger dd {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.6;
}

.dossier-ledger dt {
  color: var(--archive-muted);
}

.dossier-ledger dd {
  color: var(--archive-ink);
  font-weight: 700;
}

.product-sheet .sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 0;
}

.product-sheet .sheet-actions > * {
  min-height: 54px;
  margin: 0;
}

.product-sheet .sheet-actions .order-btn,
.product-sheet .sheet-actions .add-cart-btn,
.product-sheet .sheet-actions .sold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 0;
  font-family: var(--archive-body);
  font-size: 0.8rem;
  font-weight: 750;
}

.product-sheet .sheet-actions .add-cart-btn {
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-ink);
}

.product-sheet .sheet-actions .add-cart-btn:hover,
.product-sheet .sheet-actions .add-cart-btn.added {
  color: var(--archive-paper);
  background: var(--archive-clay-deep);
  border-color: var(--archive-clay-deep);
}

.product-sheet .sheet-actions .sold-btn {
  grid-column: 1 / -1;
  color: var(--archive-muted);
  background: transparent;
  border: 1px solid var(--archive-line-strong);
}

.dossier-assurance {
  margin: 14px auto 0;
  color: var(--archive-muted);
  font-size: 0.68rem;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 980px) {
  .product-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .product-sheet {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    border: 0;
    box-shadow: none;
  }

  .product-sheet-grid {
    display: block;
    height: auto;
  }

  .product-sheet-visual {
    display: grid;
    grid-template-rows: auto minmax(340px, 50dvh) auto;
    min-height: 0;
    padding: 18px;
    border-inline-end: 0;
  }

  .product-sheet-body {
    display: block;
    overflow: visible;
    padding: 0;
  }

  .product-sheet-scroll {
    overflow: visible;
    padding: 32px clamp(22px, 6vw, 58px) 32px;
  }

  .product-sheet-footer {
    padding: 20px clamp(22px, 6vw, 58px) calc(28px + env(safe-area-inset-bottom));
  }

  .product-sheet > .sheet-close {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    inset-inline-end: 14px;
  }
}

@media (max-width: 560px) {
  .product-sheet-visual {
    grid-template-rows: auto minmax(260px, 42dvh) auto;
    padding: 14px;
  }

  .dossier-index,
  .dossier-caption {
    font-size: 0.58rem;
  }

  .dossier-index {
    padding-inline-end: 54px;
  }

  .product-sheet .sheet-hero {
    margin-block: 14px;
  }

  .product-sheet .sheet-hero .fav-btn {
    top: 12px;
    inset-inline-start: 12px;
    width: 40px;
    height: 40px;
  }

  .dossier-caption span:first-child {
    max-width: 190px;
  }

  .product-sheet-body {
    padding: 0;
  }

  .product-sheet-scroll {
    padding: 26px 18px 22px;
  }

  .product-sheet-footer {
    padding: 16px 18px calc(26px + env(safe-area-inset-bottom));
  }

  .dossier-heading {
    align-items: flex-start;
  }

  .dossier-title-block {
    padding-block: 22px 14px;
  }

  .product-sheet .sheet-body h2,
  html[dir='ltr'] .product-sheet .sheet-body h2 {
    font-size: clamp(2.65rem, 14vw, 4.1rem);
  }

  .product-sheet .sheet-price {
    margin-bottom: 22px;
    font-size: 2.25rem;
  }

  .dossier-ledger > div {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 12px;
  }

  .product-sheet .sheet-actions {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .product-sheet .sheet-actions .order-btn {
    order: 2;
  }

  .product-sheet .sheet-actions .add-cart-btn {
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .hero-content > * {
    animation: none !important;
  }

  .card-img,
  .arrival-card,
  .care-card,
  .inspiration-feature img,
  .inspiration-minor img,
  .product-sheet {
    transition: none !important;
  }
}

/* Search archive — results read like catalogue entries, not autocomplete rows. */
.search-results {
  top: calc(100% + 15px);
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 110px));
  overflow-y: auto;
  background: var(--archive-paper);
  border: 1px solid var(--archive-line-strong);
  border-radius: 0;
  box-shadow: 20px 24px 70px rgba(20, 33, 27, 0.18);
}

.search-result-item {
  display: grid;
  grid-template-columns: 30px 58px minmax(0, 1fr) 24px;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--archive-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--archive-line-soft);
  border-radius: 0;
  font-family: var(--archive-body);
  text-align: start;
  transition: color 180ms ease, background 180ms ease;
}

.search-result-item:last-child {
  border-bottom: 0;
}

.search-result-item:hover,
.search-result-item:active,
.search-result-item:focus-visible {
  color: var(--archive-paper);
  background: var(--archive-ink);
  outline: 0;
}

.search-result-index,
.search-result-latin,
.search-result-arrow,
.search-result-empty > span {
  font-family: var(--archive-mono);
}

.search-result-index {
  color: var(--archive-clay);
  font-size: 0.58rem;
}

.search-result-thumb {
  width: 58px;
  height: 66px;
  border-radius: 0;
  background: var(--archive-paper-deep);
  object-fit: cover;
}

.search-result-placeholder {
  display: grid;
  place-items: center;
  color: var(--archive-muted);
  font-family: var(--archive-display-en);
  font-size: 0.8rem;
}

.search-result-info {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.search-result-latin {
  overflow: hidden;
  color: var(--archive-muted);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-item:hover .search-result-latin,
.search-result-item:focus-visible .search-result-latin {
  color: rgba(240, 236, 226, 0.52);
}

.search-result-name {
  color: inherit;
  font-size: 0.82rem;
}

.search-result-price {
  margin-top: 2px;
  color: var(--archive-clay);
  font-family: var(--archive-mono);
  font-size: 0.65rem;
}

.search-result-arrow {
  font-size: 1rem;
}

.search-result-empty {
  display: grid;
  gap: 10px;
  padding: 34px 24px;
  color: var(--archive-ink-soft);
  text-align: start;
}

.search-result-empty > span {
  color: var(--archive-clay);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.search-result-empty > strong {
  font-family: var(--archive-display-ar);
  font-size: 1.25rem;
  font-weight: 600;
}

html[dir='ltr'] .search-result-empty > strong {
  font-family: var(--archive-display-en);
}

/* Customer file — favorites and orders become one private living archive. */
.account-overlay {
  z-index: 118;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(8, 15, 12, 0.76);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.account-sheet {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  width: min(980px, 100%);
  max-width: 980px;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  background: var(--archive-paper);
  border: 0;
  border-inline-start: 1px solid rgba(240, 236, 226, 0.28);
  border-radius: 0;
  box-shadow: -32px 0 90px rgba(0, 0, 0, 0.28);
  transform: translateX(-100%);
  transition: transform 0.44s var(--archive-ease);
}

html[dir='ltr'] .account-sheet {
  transform: translateX(100%);
}

.account-overlay.open .account-sheet,
html[dir='ltr'] .account-overlay.open .account-sheet {
  transform: translateX(0);
}

.account-sheet > .sheet-close {
  position: absolute;
  z-index: 8;
  top: 24px;
  inset-inline-end: 24px;
  width: 42px;
  height: 42px;
  color: var(--archive-paper);
  background: transparent;
  border: 1px solid rgba(240, 236, 226, 0.38);
  border-radius: 50%;
  font-size: 0.82rem;
}

.account-sheet > .sheet-close:hover {
  color: var(--archive-ink);
  background: var(--archive-paper);
}

.account-sheet-head {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px clamp(28px, 4vw, 58px) 52px;
  color: var(--archive-paper);
  background:
    linear-gradient(rgba(240, 236, 226, 0.06) 1px, transparent 1px),
    var(--archive-ink);
  background-size: 100% 48px;
}

.account-folio,
.account-section-index,
.account-section-count,
.order-card-index {
  font-family: var(--archive-mono);
}

.account-folio {
  color: var(--archive-clay-light);
  font-size: 0.58rem;
}

.account-identity {
  display: grid;
  gap: 24px;
}

.account-monogram {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid rgba(240, 236, 226, 0.34);
  border-radius: 50%;
  color: var(--archive-paper);
  font-family: var(--archive-display-en);
  font-size: 1.7rem;
}

.account-identity h2 {
  margin: 0 0 7px;
  color: var(--archive-paper);
  font-family: var(--archive-display-ar);
  font-size: clamp(3.1rem, 5vw, 5.5rem);
  font-weight: 600;
  line-height: 0.9;
}

html[dir='ltr'] .account-identity h2 {
  font-family: var(--archive-display-en);
}

#accountEmail {
  overflow-wrap: anywhere;
  color: rgba(240, 236, 226, 0.54);
  font-family: var(--archive-mono);
  font-size: 0.62rem;
}

.account-intro {
  max-width: 310px;
  color: rgba(240, 236, 226, 0.64);
  font-size: 0.78rem;
  line-height: 1.9;
}

.account-sheet-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 76px clamp(24px, 4vw, 56px) calc(40px + env(safe-area-inset-bottom));
}

.account-section + .account-section {
  margin-top: 64px;
}

.account-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--archive-line-strong);
}

.account-section-index {
  display: block;
  margin-bottom: 7px;
  color: var(--archive-clay);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
}

.account-section-head h3 {
  margin: 0;
  color: var(--archive-ink);
  font-size: 1.65rem;
}

.account-section-count {
  color: var(--archive-muted);
  font-size: 0.68rem;
}

.account-fav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--archive-line-soft);
}

.account-fav-item {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  aspect-ratio: 0.88;
  background: var(--archive-paper-deep);
  border-radius: 0;
}

.account-fav-item::after {
  position: absolute;
  inset: 36% 0 0;
  z-index: 1;
  background: linear-gradient(transparent, rgba(8, 15, 12, 0.84));
  content: '';
  pointer-events: none;
}

.account-fav-item > img,
.account-fav-item > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--archive-ease);
}

.account-fav-item:hover > img,
.account-fav-item:hover > svg {
  transform: scale(1.035);
}

.account-fav-index {
  position: absolute;
  z-index: 3;
  top: 15px;
  inset-inline-start: 15px;
  color: var(--archive-paper);
  font-family: var(--archive-mono);
  font-size: 0.55rem;
}

.account-fav-caption {
  position: absolute;
  z-index: 3;
  inset-inline: 16px;
  bottom: 16px;
  display: grid;
  gap: 2px;
  color: var(--archive-paper);
}

.account-fav-caption strong {
  font-size: 0.78rem;
}

.account-fav-caption small {
  overflow: hidden;
  color: rgba(240, 236, 226, 0.54);
  font-family: var(--archive-display-en);
  font-size: 0.74rem;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-fav-item .rm {
  position: absolute;
  z-index: 4;
  top: 11px;
  inset-inline-end: 11px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  color: var(--archive-paper);
  background: rgba(8, 15, 12, 0.46);
  border: 1px solid rgba(240, 236, 226, 0.28);
  border-radius: 50%;
  font-family: var(--archive-body);
  font-size: 0.62rem;
}

.account-empty-note {
  grid-column: 1 / -1;
  padding: 34px 0;
  color: var(--archive-muted);
  font-size: 0.78rem;
}

.account-orders-list {
  border-bottom: 1px solid var(--archive-line-soft);
}

.account-sheet .order-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 0;
  color: var(--archive-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--archive-line-soft);
  border-radius: 0;
  text-decoration: none;
}

.account-sheet .order-card:last-child {
  border-bottom: 0;
}

.order-card-index {
  color: var(--archive-clay);
  font-size: 0.55rem;
}

.order-card-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.order-card-copy strong {
  overflow: hidden;
  font-family: var(--archive-mono);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card-copy small {
  color: var(--archive-muted);
  font-size: 0.62rem;
}

.account-sheet .order-status {
  padding: 4px 8px;
  color: var(--archive-ink-soft);
  background: transparent;
  border: 1px solid var(--archive-line);
  border-radius: 0;
  font-size: 0.56rem;
}

.account-sheet .order-status.delivered {
  color: var(--archive-moss);
  background: transparent;
}

.account-sheet .order-status.cancelled {
  color: var(--archive-clay-deep);
  background: transparent;
}

.order-card-total {
  font-family: var(--archive-mono);
  font-size: 0.68rem;
}

.account-archive-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 2px;
  color: var(--archive-ink);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.account-archive-link:hover {
  color: var(--archive-clay-deep);
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid var(--archive-line-strong);
}

.account-settings-btn,
.account-signout-btn {
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 0;
  font-family: var(--archive-body);
  font-size: 0.72rem;
  font-weight: 600;
}

.account-settings-btn {
  color: var(--archive-paper);
  background: var(--archive-ink);
  border: 1px solid var(--archive-ink);
}

.account-signout-btn {
  color: var(--archive-clay-deep);
  background: transparent;
  border: 1px solid var(--archive-line-strong);
}

@media (max-width: 760px) {
  .search-results {
    inset-inline: 0;
    width: auto;
  }

  .search-result-item {
    grid-template-columns: 24px 50px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 11px 9px;
  }

  .search-result-thumb {
    width: 50px;
    height: 58px;
  }

  .account-sheet {
    display: block;
    width: 100%;
    overflow-y: auto;
  }

  .account-sheet-head {
    min-height: 370px;
    padding: 32px 22px 36px;
  }

  .account-sheet > .sheet-close {
    top: 20px;
    inset-inline-end: 20px;
  }

  .account-identity {
    gap: 18px;
  }

  .account-monogram {
    width: 60px;
    height: 60px;
    font-size: 1.35rem;
  }

  .account-identity h2 {
    font-size: 3.6rem;
  }

  .account-sheet-content {
    overflow: visible;
    padding: 46px 18px calc(34px + env(safe-area-inset-bottom));
  }

  .account-fav-item {
    min-height: 210px;
  }

  .account-sheet .order-card {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .account-sheet .order-status {
    display: none;
  }

  .account-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-sheet,
  .account-fav-item > img,
  .account-fav-item > svg,
  .search-result-item {
    transition: none !important;
  }
}

/* ============================================================
   iOS Safari input zoom floor
   ------------------------------------------------------------
   Safari zooms the entire page whenever a focused field renders
   under 16px, and every control on this site sat at 13.6-14.7px.
   The page then stays zoomed until the reader pinches back out —
   worst on checkout, where five fields follow one another.

   A floor, not a redesign: 16px is the threshold Safari checks,
   so anything already larger is untouched.
   ============================================================ */
@media (max-width: 1024px) {
  /* :is() carries the highest specificity of its arguments, so one selector
     covers all three controls and still outranks page rules like
     `.field textarea { font-size: 0.9rem }` that would otherwise win. */
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    font-size: 16px;
  }
}

/* ============================================================
   Press feedback
   ------------------------------------------------------------
   iOS answers on touch-down, not on release. Without that answer a
   control reads as a web page no matter how it is styled.

   Uses the independent `scale` property rather than `transform`,
   because the cards already carry a reveal offset (translateY) and
   writing `transform` would wipe it mid-animation. `scale` composes
   with it and stays on the compositor, so this costs no layout and
   no paint.

   Buttons shrink; links dim. That is the distinction iOS itself
   makes between a control and a row. Nothing here changes colour,
   shadow, size, or position at rest.
   ============================================================ */
:is(button, [role='button'], summary, .tab, .cat-add, .cart-btn,
    .sheet-close, .icon-toggle, .seg-btn, .rail-row, .strip-btn,
    .btn-primary, .btn-ghost, .checkout-btn, .fav-btn, .card, .cat-card) {
  transition: scale 130ms cubic-bezier(.22, .9, .24, 1), opacity 130ms ease;
}

:is(button, [role='button'], summary, .cat-add, .cart-btn, .sheet-close,
    .icon-toggle, .seg-btn, .rail-row, .strip-btn, .btn-primary,
    .btn-ghost, .checkout-btn, .fav-btn):active {
  scale: 0.97;
}

/* A card presses as one surface — unless the finger landed on a control
   inside it, which would otherwise shrink twice. */
:is(.card, .cat-card):active:not(:has(:is(button, a, [role='button']):active)) {
  scale: 0.985;
}

/* Tab bar items take a slightly firmer press: they are small, and iOS
   tab bars respond distinctly. */
.tab:active { scale: 0.94; }

/* Text links dim instead of shrinking. */
:is(a:not(.tab):not(.btn-primary):not(.btn-ghost):not(.cat-add):not(.card):not(.cat-card),
    .pd-ask, .foot-ic, .cat-link, .account-archive-link):active {
  opacity: 0.6;
}

/* The grey flash WebKit paints over any tapped element is the single most
   web-like artefact left on the page. Removing it reveals the press states
   above; it is a user-agent overlay, not part of the palette. */
:is(a, button, [role='button'], summary, .card, .cat-card, .tab, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  :is(button, [role='button'], summary, .card, .cat-card, .tab, .cat-add,
      .cart-btn, .sheet-close, .icon-toggle, .seg-btn, .rail-row,
      .btn-primary, .checkout-btn):active {
    scale: 1;
    opacity: 0.72;
  }
}

/* ============================================================================
   Launch hardening — the 44x44 floor, applied to the controls that were under it
   ----------------------------------------------------------------------------
   Measured across 30 page/viewport combinations before launch. These are the
   controls a finger has to hit that were smaller than Apple's 44pt minimum.
   Nothing here changes how anything looks: each rule adds height around
   existing content and, where the box grows, pulls the margin back by half so
   the text stays optically where it was.

   This block sits at the end of the file on purpose. index.html carries an
   inline <style> at line 152 and loads this sheet afterwards, so an appended
   rule of equal specificity wins — which is how .sheet-close and .cart-btn get
   corrected without editing the inline block they come from.
   ============================================================================ */

/* rarity filters — 38px */
.seg-btn { min-height: 44px; }

/* sheet close buttons — 34x34, and they are the only way out of a sheet */
.sheet-close { min-width: 44px; min-height: 44px; }

/* add-to-cart on cards — 42px, two short */
.cart-btn { min-height: 44px; }

/* The search field's wrapper already claims 44px, but the input inside it was
   21px and the input is what actually takes the tap — padding on the wrapper
   does not focus it. Moving the height onto the input makes the whole visible
   field the target, and the wrapper keeps its 44px because the input now fills
   it. */
@media (max-width: 760px) {
  .search-box { padding-block: 0; }
  .search-box input { min-height: 44px; }
}

/* Second pass — the controls the first sweep surfaced once the obvious ones
   were out of the way. Same principle: height only, no visual redesign.
   Buttons and inputs already centre their content, so min-height is enough;
   the two links get inline-flex so the height has something to centre. */

/* header controls: language, notifications, cart, account — all 38x38 */
.icon-toggle { min-width: 44px; min-height: 44px; }

/* search fields — the header box on every width (the ≤760 rule above only
   covered the phone) and the archive's own rail search */
.search-box input,
.rail-search-wrap input { min-height: 44px; }

/* archive grid/list view toggle — 40x34 */
.cat-view button { min-width: 44px; min-height: 44px; }

/* the WhatsApp fallback in an empty archive — 89x20, and on an empty
   storefront it is the only thing left to tap */
.empty-wa a { display: inline-flex; align-items: center; min-height: 44px; }

/* one pixel short, both of them */
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }
.request-card a { min-height: 44px; display: inline-flex; align-items: center; }

/* Two standalone link groups were still under the 44px floor on the deployed
   build. Both are block-level navigation, not inline links in a sentence, so
   the WCAG 2.5.8 inline exemption does not cover them.

   Header nav: the 44px rule existed only for 761–1040px, so desktop kept a
   30px box. Measured at 900px the header is already 83px tall around a 44px
   nav, and at 1440px the nav is a 30px box centred in the same 83px header —
   so lifting it to 44 reproduces the layout that already ships at tablet
   width. The header does not grow and the hover underline sits exactly where
   it does at 900px.

   Height only, not width. Two of these words render 37-40px wide, and
   nav.links a::after is the hover underline at width:100% — padding the box
   out to 44 would draw the rule wider than the word it underlines. WCAG 2.5.8
   is satisfied without it: the targets are 37-40 x 44 with a 34px gap, so
   nothing crowds them. Widening would need a span around the text in
   index.html and both generators; not worth it to chase one axis. */
@media (min-width: 1041px) {
  nav.links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Footer links: 24px tall at every width. The strip measures 58px (16px
   padding + 24px link + 16px padding + 2px borders). Growing the link to 44
   and pulling the padding to 6px keeps that strip at 58px, so the row stays
   visually put while the tap area nearly doubles.

   These also take min-width, which the header nav deliberately does not: the
   footer links carry no ::after underline, so widening the box cannot pull a
   rule out past the end of the word. Gap drops 22px -> 20px to absorb the
   5px the narrow link gains, holding the row at its measured 128px. */
footer .foot-links { padding: 6px 0; gap: 20px; }
footer .foot-links a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}