/*
 * 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;
  /* Clay pale — the palette's lightest terracotta, for description text set on
     an ink or oxblood ground where clay-light would still read as an accent
     rather than as copy. Listed in the archive palette all along but never
     declared here; the ink band is its first consumer. */
  --archive-clay-pale: #e6bfa8;
  --archive-fog: #d8d8ce;
  /* 3.52:1 on paper and 4.08:1 on a card at #718078 — both below the 4.5
     AA floor for normal text, and this token carries every secondary label
     on the storefront. #6a6760 clears both (4.78 / 5.55) and is the value
     the vendor suite already corrected to, so all three surfaces now state
     secondary text in one colour. Not documented in DESIGN_SYSTEM.md §2,
     which lists no muted role; the value comes from the approved design. */
  --archive-muted: #6a6760;
  --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;
  /* The storefront had no danger token: checkout-v2.css declared its own and
     the product page, which does not load that file, had nothing. Same value
     both places (#963f49), declared once where the palette lives. */
  --archive-danger: #963f49;
  /* Badge — the count disc on the header cart. D1 states #B23A55, a lighter
     and pinker red than --archive-danger: the badge is a quantity, not an
     error, and the design keeps the two roles on separate values. Declared
     here because the header now consumes it on both storefront pages. */
  --archive-badge: #B23A55;
  --archive-display-ar: 'El Messiri', serif;
  --archive-display-en: 'Cormorant Garamond', serif;
  --archive-body: 'IBM Plex Sans Arabic', sans-serif;
  /* DIRECTIONAL, and it has to be. This token used to read
         'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace
     on the reasoning that Plex Mono carries no Arabic, so per-glyph fallback
     would reach the Arabic face before the generic monospace. Measured on the
     deployed catalog 2026-08-03, that never happened — the width of «د.ك» at
     12px:

         'IBM Plex Mono' alone .................. 21.61   ← system monospace
         monospace .............................. 21.63
         'IBM Plex Sans Arabic' alone ........... 17.90   ← the real face
         Mono, Sans Arabic, monospace ........... 21.83   ← the old token
         Sans Arabic, Mono, monospace ........... 17.90

     document.fonts.check('12px "IBM Plex Mono"', 'د') returns TRUE: the
     browser considers Plex Mono to cover the character, so fallback never
     advances past it and naming the Arabic face second does nothing at all.
     The only position that works is first — which is what every other
     script-sensitive token here already does (--pw-display, --font-editorial).

     Latin keeps Plex Mono exactly as drawn; the trade on an Arabic page is
     that digits render in Plex Sans Arabic rather than the mono face, which is
     the same trade orders-v2.css already took for the «د.ك» total. */
  --archive-mono: 'IBM Plex Sans Arabic', 'IBM Plex Mono', monospace;
  --archive-ease: cubic-bezier(0.22, 0.9, 0.24, 1);
  /* Design System, breakpoints: at ≥1360 "content caps at 1360 and centres",
     and D1 states it again in words — "Desktop at 1440 (content capped at
     1360)". 1360 is the *inner* width; 1440 is the board it sits on with a
     40px gutter either side. Blocks state their own gutter and derive the box
     from it, so every content column on the page shares one pair of edges
     instead of the four different ones this page used to have (header 1280,
     sections 1372, legend 1400, hero 1112). */
  --pw-content: 1360px;
  /* --pw-gutter is NOT redeclared here. pw-tokens.css:264 owns it, and this
     file loads after it — an identical copy here silently won the cascade, so
     editing the token file did nothing on the storefront. pw-tokens.css's own
     header warns about exactly this trap. */

  --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);
}

/* The Latin half of --archive-mono. Plex Mono first is correct here and only
   here: an LTR page has no Arabic to protect, and the mono face is the drawn
   one. See the token's own note for why the order cannot simply list both. */
html[dir='ltr'] {
  --archive-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
}

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);
  /* D1 draws flat paper under a single hairline — no tint, no blur. The bar is
     opaque, so nothing shows through and there is nothing for a blur to act on. */
  background: var(--archive-paper);
  border-bottom: 1px solid var(--archive-line);
}

.nav-inner {
  /* D1's board is 1440 with a 40px gutter, so the content is 1360 — the box is
     1440, not 1360. Capping the box at 1360 (as this first read it) left the
     header content at 1280, one gutter narrower than every section below it. */
  max-width: calc(var(--pw-content) + 80px);
  padding: 16px 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

nav.links {
  gap: 28px;
  font-size: 13.5px;
  font-weight: 400;
}

nav.links a {
  color: var(--archive-ink-soft);
  opacity: 1;
  /* An invisible hit area, not a bigger box: the header's rhythm depends on
     these sitting at their text width, and «الفهرس» measured 39px — 5px under
     the touch floor. The same pattern the storefront already uses on its icon
     toggles and the plant page's controls. */
  position: relative;
}

nav.links a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  width: 100%;
  height: 44px;
}
@media (hover: hover) {
  nav.links a:hover {
    color: var(--archive-ink);
  }
}

.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;
}

/* No boxes at all.
   The earlier rule here made the header controls 38px bordered squares, to
   satisfy the system's "44px icon and quick-add squares" note. D1 settles it:
   the three header glyphs are drawn bare at 19px on the paper, with no border
   and no fill, and the locale is text under a hairline. The square treatment
   belongs to quick-add on the cards, not to the masthead. Geometry lives in the
   pages' own header block; this file only states the colour. */
.icon-toggle {
  color: var(--archive-ink);
}
@media (hover: hover) {
  .icon-toggle:hover {
    color: var(--archive-clay-deep);
    background: transparent;
    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: 100%;
  /* index.html's pre-identity-v2 baseline block sets max-width:1180px for the
     old floating-card hero. It is kept there deliberately as a
     stylesheet-fails-to-load fallback, but this file only ever set `width`, so
     that 1180 was still winning live and holding the hero 248px narrower than
     every other section. Stating max-width here lets the migrated design win
     without touching the fallback. */
  max-width: calc(var(--pw-content) + 2 * var(--pw-gutter));
  /* 760 → 640. الارتفاع يُؤخَذ من الحشو (54/58 → 40/44) ومن ارتفاع اللوحة
     (610 → 506)، ولا يُمسّ حجم العنوان ولا النص ولا الأزرار: التصميم يقول إن
     العنوان هو الصفحة. الغرض أن ترتفع «المجموعة» إلى حافة الطيّة بدل أن تبدأ
     على بعد 1136px من أعلى الصفحة — قِيست الحالتان قبل التعديل وبعده. */
  min-height: 640px;
  margin: 0 auto;
  padding: 40px var(--pw-gutter) 44px;
  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: 64px;
  bottom: 70px;
  width: calc(50% - 48px);
  min-height: 506px;
  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: 506px;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(0.86) contrast(0.98);
}

/* The specimen caption. Geometry, position and Mono tracking are the design's
   "Photo overlay"; the material is not, and that was measured, not assumed.

   The design's overlay is paper at α.14 with blur 28 and ink text — and the
   design system says in its own words that a large glass caption "fails on any
   image without a calm lower third". This hero photograph does not have one at
   the phone crop: the caption lands on the pot and the soil. Sampling the
   actual image in 28px tiles (one blur radius each) under the caption box:

     desktop crop, brightest region   ink on α.14 glass  =  9.67:1
     desktop crop, darkest tile       ink on α.14 glass  =  4.62:1
     PHONE crop,  darkest tile        ink on α.14 glass  =  2.12:1   ← fails AA

   Reaching 4.5:1 over that tile needs α.40 — at which point it is no longer
   the photo overlay, it is a sheet veil wearing its name. So the caption keeps
   the ink fill it already had: legible over any crop, any photograph, any
   phone height. Everything else here — bottom inline-start, .12em Mono, the
   design's padding — is the design's. */
.hero-visual-meta {
  position: absolute;
  inset-inline-start: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 7px 12px;
  color: var(--archive-paper);
  background: rgba(20, 33, 27, 0.88);
  box-shadow: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-content {
  position: static;
  grid-column: 7 / 13;
  grid-row: 1;
  display: flex;
  max-width: none;
  min-width: 0;
  padding: 44px 34px 26px 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;
}

/* ONE display scale, not six.
   The hero and the five section titles each carried their own hand-tuned
   clamp, which at 1440 put the hero at 89px and the shop title at 86px — a
   1.03x step, so the page had a headline and five near-headlines and no
   hierarchy between them. The approved scale already exists: --pw-fs-hero
   (34/44/62) and --pw-fs-heading (26/30/36), extracted from the design in
   Phase 0.2 and committed then. This is where it finally gets consumed.

   Weight stays at 600/500. The design draws these at El Messiri 500 and
   Cormorant 300, and index.html loads neither — El Messiri 600;700 and
   Cormorant 500;600 are the subset. Two more font files to move one step of
   weight is not a trade the design asked for.

   Line height and tracking DO follow the design: 1.22 for the Arabic cut,
   1.02 for the Latin, no negative tracking on either. */
.hero h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: var(--pw-fs-hero);
  /* D3. Screen 01 writes it: 'El Messiri', font-weight:500, font-size:34px,
     line-height 1.22 — the leading already matched, the weight could not. */
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
  text-shadow: none;
}

html[dir='ltr'] .hero h1 {
  font-family: var(--archive-display-en);
  font-size: var(--pw-fs-hero);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
}

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

.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;
  /* Claude Design's hero CTA and checkout CTA both specify a 2px radius —
     the near-square "commerce commitment" mark, not a fully sharp corner. */
  border-radius: 2px;
  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;
}
@media (hover: hover) {
  .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);
}
@media (hover: hover) {
  .hero .btn-ghost:hover {
    color: var(--archive-paper);
    background: var(--archive-ink);
    border-color: var(--archive-ink);
    transform: none;
  }
}


/* Its own section, not a hero child: neither Claude Design nor the site's
   own HOMEPAGE_UX_BLUEPRINT.md §4.3 puts trust content inside the hero
   ("deferred to §4.4, immediately after"). Same width/horizontal padding
   as .hero so the band's edges still line up with the hero above it. */
.hero-trust-band {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 0 34px;
}

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

/* أهدأ وأصغر بعد جولة التنقية: ثلاث حقائق تطمئن، لا قسمٌ بصريّ ثالث بين
   البطل والمجموعة. */
.hero-trust-item {
  position: relative;
  padding: 9px 8px;
  color: var(--archive-ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-align: center;
}

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

/* The design's trust band is "three hairline-separated statements, not icon
   cards" — and it carries no bullets either. The clay discs are gone; the
   hairlines already do the separating. */

@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; }

/* 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: calc(var(--pw-content) + 2 * var(--pw-gutter));
  padding: 0 var(--pw-gutter);
}

/* The design's collection head: title and record count sharing one baseline
   over a single strong hairline. */
.section-head {
  display: flex;
  max-width: none;
  margin: 0 0 28px;
  padding-bottom: 14px;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--archive-line-strong);
  text-align: start;
}

/* الترويسة لم يعد فيها سطر وصف تحت العنوان، فالهامش السفلي الذي كان يفصلهما
   صار فراغاً بلا وظيفة. */
.section-head h2 {
  margin: 0;
  color: var(--archive-ink);
  font-size: var(--pw-fs-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

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


/* العدّاد حقيقي — render() يكتب عدد اللوحات المعروضة الآن. صار وحده بعد أن
   ذهب «الفهرس الكامل» مع وجهته، وهبط إلى حجم علامة الرفّ: يقرأه من يريد، ولا
   يحتاج أحد أن يفكّه ليشتري نبتة.

   الهدوء من الحجم والمحرف، لا من الشفافية: `opacity:.72` عليه هبط بالتباين إلى
   3.53:1 عند 9.6px — مقيساً، وتحت حدّ AA (4.5:1) للنص الصغير. الشفافية على نصّ
   بحجم علامة أرخص وسيلة لكسر إمكانية الوصول. */
.section-meta {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  flex: none;
  color: var(--archive-ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.card {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
@media (hover: hover) {
  .card:hover {
    box-shadow: none;
    transform: none;
  }
}


/* D1(a). The sheet draws the hairline on the CARD, over a #fffdf7 plate, and
   leaves the image bare inside it. DESIGN_SYSTEM §5 put the border on the
   image instead; Claude Design is the authority, so it moves. */
.card,
.cat-card {
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
}

.card-media {
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--archive-paper-deep);
  border: 0;
  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;
}
@media (hover: hover) {
  .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. */
/* D1(b)+(c). Restored to the sheet: 32px at 9/9, the rarity colour carried by
   the inline style, a #fffdf7 letter, Mono 12/600, no ring.
   It had been 36px on an ink disc — 36 came from DESIGN_SYSTEM §5, and the ink
   was this file's own decision so the letter would stay legible over any
   photograph. Claude Design is the authority on both, and on the seal's colour
   §5 agreed with the sheet all along: "لون خلفيتها = لون رتبة الندرة".
   The background !important is what was overriding the tier colour. */
.badge-seal {
  top: 9px;
  inset-inline-start: 9px;
  width: 32px;
  height: 32px;
  color: var(--archive-white);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-family: var(--archive-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

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

/* D3. The sheet writes this one explicitly — Screen 01's card:
   font-family:'El Messiri';font-weight:500;font-size:16px. It was 600 only
   because 500 was not among the weights the font request declared. */
.card-body .name-ar {
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 1.2rem;
  font-weight: 500;
}

html[dir='ltr'] .card-body .name-ar {
  font-family: var(--archive-display-en);
  font-size: 1.38rem;
}
@media (hover: hover) {
  .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);
  /* ends in «د.ك» — see the note on .cat-price in card.css */
  font-family: var(--archive-mono);
  font-size: 0.82rem;
}

.card-body .cart-btn,
.card-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;
}
@media (hover: hover) {
  .card-body .cart-btn:hover,
  .card-body .order-btn:hover {
    color: var(--archive-paper);
    background: var(--archive-ink);
    border-color: var(--archive-ink);
  }
}

/* ===== ترتيب الطلب =====
   ثلاث حقائق تأتي بعد الشبكة مباشرة، لمن انتهى من الاختيار وبدأ يسأل «وبعدين؟».
   ليست شريط ثقة ثانياً: شريط البطل جملةٌ عن هوية المتجر، وهذا شرحُ المعاملة
   نفسها — اختيار، توصيل، دفع — فموضعه بعد النباتات لا قبلها. ويُرسَم كحاشية
   ورقة عيّنة: عنوان مونو صغير وسطر تحته، بلا بطاقات ولا أيقونات ولا صندوق.

   الرقم 03: القسم يقع بين «02 / THE COLLECTION» و«04 / FIELD NOTES»، وكان 03
   قبله لقسم ذهب — فالتسلسل يعود متصلاً بدل أن يقفز من 02 إلى 04. */
.order-facts {
  width: min(100%, calc(var(--pw-content) + 2 * var(--pw-gutter)));
  margin: 0 auto;
  padding: 58px var(--pw-gutter) 62px;
}

.order-facts::before {
  content: '03 / ORDERING';
  display: block;
  margin-bottom: 26px;
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
}

.order-facts > .wrap {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--archive-line-strong);
}

.order-fact {
  padding: 20px 26px 4px 0;
}

html[dir='ltr'] .order-fact { padding: 20px 0 4px 26px; }

.order-fact + .order-fact {
  padding-inline-start: 26px;
  border-inline-start: 1px solid var(--archive-line);
}

html[dir='ltr'] .order-fact + .order-fact { padding-inline-end: 26px; }

/* مونو لاتيني على عنوان عربي يكسر الوصل — التصحيح موجود في مجموعة
   `html[lang="ar"]` أعلاه، وهذا العنوان مُدرَجٌ فيها بالاسم. */
.order-fact h3 {
  margin: 0 0 10px;
  color: var(--archive-ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.order-fact p {
  max-width: 34ch;
  margin: 0;
  color: var(--archive-ink-soft);
  font-size: 0.82rem;
  line-height: 1.85;
}

/* Care — a printed field guide. */
.care {
  position: relative;
  /* 118/126 → 84/80: القسم صار قائمة طيّات لا شبكة بطاقات، ولا يحتاج هواء
     الشبكة. الحدّ الأدنى للحشو العلوي ≈80 لأن علامة «04» مثبّتة عند top:54. */
  padding: 84px 34px 80px;
  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: var(--pw-content);
  padding: 0;
}

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

.care-head h2 {
  margin: 0;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: var(--pw-fs-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

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;
}

/* قائمة طيّات <details> بعمود واحد على كل العروض — أكورديون بعمودين يمدّ صفّ
   الجار المغلق حين يُفتح أحدهما فيظهر فراغٌ بلا خطّ تحته. عمودٌ واحد هو ما
   تفعله طيّات صفحة النبتة، ومنها تُستعار العلامة.
   انقلاب البطاقة إلى الحبر عند التحويم ذهب: كان لبطاقة كاملة، وعلى صفّ طيّة
   يقلب لوحةً مفتوحة بأكملها. طيّات صفحة النبتة بلا تحويم أصلاً. */
.care-grid {
  display: grid;
  max-width: none;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--archive-line);
}

.care-card {
  color: var(--archive-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--archive-line);
  border-radius: 0;
}

/* العنوان يلفّ الزرّ (= .pd-fold-h / .pd-fold على صفحة النبتة): يبقى عنواناً
   لقارئ الشاشة، والزرّ هو ما يُضغط. صفٌّ بارتفاع 56 (فوق حدّ اللمس 44)،
   والإشارة الوحيدة «+/−» مونو بلون الطين — نفس .pd-fold-sign بلا شيفرون. */
.care-fold-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.care-fold {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0;
  color: var(--archive-ink);
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--archive-display-ar);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
}
html[dir='ltr'] .care-fold {
  font-family: var(--archive-display-en);
  font-size: 1.4rem;
}
.care-fold:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; }
.care-fold[aria-expanded='true'] { font-weight: 600; border-bottom: 1px solid var(--archive-line); }

.care-fold-sign {
  flex: none;
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  line-height: 1;
}
.care-fold-sign::after { content: '+'; }
.care-fold[aria-expanded='true'] .care-fold-sign::after { content: '−'; }

.care-body {
  padding: 18px 0 26px;
}
.care-body[hidden] { display: none; }

/* لا حركة ارتفاع؛ تلاشٍ قصير للجسم يكفي كي لا يقفز المحتوى، ويُلغى مع
   prefers-reduced-motion كسائر الحركة في هذا الملف. */
@keyframes care-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.care-card.is-open > .care-body { animation: care-open 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .care-card.is-open > .care-body { animation: none; }
}

.care-art {
  display: flex;
  align-items: center;
  height: 96px;
  margin: 0 0 16px;
  justify-content: flex-start;
  background: transparent;
  border-radius: 0;
}

.care-art svg {
  width: 120px;
  height: 90px;
}

.care-card p {
  max-width: 62ch;
  margin: 0;
  color: var(--archive-ink-soft);
  font-size: 0.85rem;
  line-height: 1.95;
  opacity: 1;
}

.final-cta .btn-primary,
.colophon .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,
.colophon .btn-primary::after {
  display: none;
}
@media (hover: hover) {
  .final-cta .btn-primary:hover,
.colophon .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: var(--pw-content);
  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 {
  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;
}
@media (hover: hover) {
  .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;
}



/* 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: 592px;
    padding: 34px 22px 38px;
  }

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

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

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

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

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

  .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;
  }

  /* The .menu-toggle and drawer rules that lived here are gone with the
     hamburger — artboard "01 Home" gives the phone header no menu at all. */

  .hero {
    display: flex;
    width: 100%;
    /* كان `100dvh - 74px` (الشاشة ناقص الترويسة) فيملأ الطيّة كغلاف مجلة،
       ويهبط أول نبتة إلى 1051px على شاشة 812. الطرح الآن يشمل شريط الطمأنة
       وترويسة المجموعة أيضاً، فتظهر كلمة «المجموعة» وأعلى اللوحة الأولى داخل
       الطيّة: الغلاف يبقى غلافاً، لكنه يقول إن تحته نباتات. */
    min-height: calc(100dvh - 290px);
    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 موحّد ومطابق تماماً للترتيب البصري في كل الأجهزة — صفر
     استخدام لـorder، فترتيب القراءة مطابق للمرئي تماماً. الصورة أولاً
     (الصورة، العنوان، النص الفرعي، CTA، شريط الثقة) مطابقةً لترتيب
     Claude Design Screen 01 حرفياً — لا شريط أرشيف ولا eyebrow ولا فاصل
     زخرفي فوق العنوان بالتصميم، فحُذفت العناصر الثلاثة (لم تكن موجودة
     بالتصميم إطلاقاً، لا مجرد إعادة ترتيب).
     العنوان مضبوط قياسياً على سطرين (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-start: 16px;
    bottom: 14px;
    max-width: calc(100% - 32px);
    font-size: 0.52rem;
  }

  /* 34px is the design's own phone value, and the phone is where this scale
     originates. The explicit <br> still holds the headline to two lines. */
  .hero h1,
  html[dir='ltr'] .hero h1 {
    max-width: 100%;
    font-size: var(--pw-fs-hero);
    line-height: 1.22;
  }

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

  .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-band {
    padding: 0 16px;
  }

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

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

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

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

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

  #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;
  }

  /* ثلاثة أعمدة على 375 تعطي كل حقيقة ~100px — سطرٌ من كلمتين لا يُقرأ.
     تتكدّس صفوفاً بفاصل أفقي بدل الرأسي، فتبقى الحقائق الثلاث ثلاثاً. */
  .order-facts {
    padding: 38px 16px 40px;
  }

  .order-facts::before {
    margin-bottom: 18px;
  }

  .order-facts > .wrap {
    grid-template-columns: 1fr;
  }

  .order-fact,
  html[dir='ltr'] .order-fact {
    padding: 16px 0 14px;
  }

  .order-fact + .order-fact,
  html[dir='ltr'] .order-fact + .order-fact {
    padding-inline: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--archive-line);
  }

  .order-fact p {
    max-width: none;
  }

  .care {
    /* العلوي يبقى 72 كما كان: الترويسة لاصقة بارتفاع 67 على الهاتف، وقفزة
       «نصائح العناية» تُنزل القسم تحتها مباشرة — قياس 60 كان يُخفي 7px من
       العنوان. السفلي وحده يهبط. */
    padding: 72px 16px 56px;
  }

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

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

  .care-head h2 {
    margin-bottom: 14px;
  }

  .care-fold { min-height: 52px; font-size: 1.1rem; }
  html[dir='ltr'] .care-fold { font-size: 1.2rem; }

  .care-body { padding: 14px 0 22px; }

  .care-art {
    height: 84px;
    margin-bottom: 14px;
  }

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

  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: 1040px) {
  /* R2: touch targets ≥44px across mobile+tablet widths (≤1040); desktop ≥1041 unchanged.
     The header icons left this rule in Phase 1: growing the box to 44px would
     have inflated the bare 19px glyph D1 specifies and broken the row's 28px
     rhythm. They carry their 44px target on a transparent ::before instead, at
     every width rather than only below 1040. The hamburger is gone entirely. */
  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;
  }
}

/* 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;
  /* glassSpec, Sheet veil: "Scrim behind: ink α.28". This was rgba(8,15,12,.74)
     with the blur switched off — nearly three times the design's density, and
     the only sheet in the app that did it. The catalogue filter sheet has
     carried the spec correctly all along; the two now match. */
  background: rgba(20, 33, 27, 0.28);
}

.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);
  /* glassSpec, Sheet veil: #fffdf7 α.90, blur 18 · sat 150. At α.90 the fill is
     itself the spec's stated "Fallback: solid" where backdrop-filter is
     unavailable, which is why no @supports branch is needed — the same reason
     the filter sheet ships without one. */
  background: rgba(255, 253, 247, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  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;
}
@media (hover: hover) {
  .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: var(--pw-fs-heading);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

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

.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;
  /* Fifth track added for the explicit remove control. */
  grid-template-columns: 26px 88px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 20px 30px;
  background: var(--archive-white);
  border-bottom: 1px solid var(--archive-line-soft);
}

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

/* Screen 05's own thumbnail is 88×104 at the sheet's 390 baseline — the
   design has no separate desktop bag spec, so this one size is the literal
   value everywhere, not just above the old 760px mobile-shrink breakpoint
   that used to override it down to 68×74. */
.cart-sheet .cart-thumb {
  width: 88px;
  height: 104px;
  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;
}

/* The design puts the archive number above the name in every bag row, the
   same mono record line the card and the passport carry. The vendor half of
   its label ("SP-014 · VERDANT STUDIO") is NOT here: DECISIONS A7/B1 is
   white-label, customers never see which vendor holds a specimen. */
.cart-sheet .cart-info .code {
  margin-bottom: 5px;
  color: var(--archive-ink-soft);
  font-family: var(--archive-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

/* Claude Design sets the bag row's name at Cormorant Garamond 500/18/1.15,
   the same size in either script. Weight was 600, and the Latin face carried
   its own larger size (1.35rem) with no comment explaining the bump — not a
   documented deviation elsewhere in this codebase, so corrected to the
   sheet's literal, flat across both directions. */
.cart-sheet .cart-info .n {
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.15;
}

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

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

.cart-sheet .qty {
  display: grid;
  grid-template-columns: 32px 34px 32px;
  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: auto;
  min-width: 0;
  height: 32px;
  border-radius: 0;
}

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

/* 32 + 6 + 6 = 44. The stepper keeps the design's drawn size; the target
   underneath it clears DS §10. */
.cart-sheet .qty button::after {
  content: '';
  position: absolute;
  inset: -6px;
}
@media (hover: hover) {
  .cart-sheet .qty button:hover:not(:disabled) {
    color: var(--archive-paper);
    background: var(--archive-ink);
  }
}

/* At the stock ceiling the + carried the disabled attribute but no styling, so it
   looked identical to a live control — and on a pointer it still inverted to solid
   ink on hover, actively inviting a click that does nothing. It now reads as
   unavailable and stops responding to the cursor. Recoloured rather than faded,
   the way .adm-sh-acts button:disabled already handles this. */
.cart-sheet .qty button:disabled {
  color: var(--archive-muted);
  background: var(--archive-fog);
  cursor: not-allowed;
}

/* An explicit way out of the order. Removing a line used to mean pressing − until
   the quantity reached zero, which is a side effect of a counter rather than an
   action — and assistive tech was told "decrease quantity" on the very press that
   deleted the row. Same 44px target and square corners as the stepper. */
.cart-sheet .cart-remove {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--archive-muted);
  background: transparent;
  font-family: var(--archive-mono);
  font-size: 0.86rem;
  line-height: 1;
  cursor: pointer;
}
/* 32 + 6 + 6 = 44 — the same overlay the stepper uses to clear the touch floor. */
.cart-sheet .cart-remove::after {
  content: '';
  position: absolute;
  inset: -6px;
}
@media (hover: hover) {
  .cart-sheet .cart-remove:hover { color: var(--archive-danger); }
}
.cart-sheet .cart-remove:focus-visible {
  outline: 2px solid var(--archive-clay);
  outline-offset: -2px;
}

/* The header badge is the desktop counterpart of the tab-bar badge, which has
   bumped on every increase since the tab bar shipped. This one changed its number
   in silence: updateBadge() only ever added .bump to the phone element, and this
   badge carries a different class. Same keyframe, same duration. */
.cart-badge-header.bump {
  animation: cart-bump 450ms cubic-bezier(.22, .9, .24, 1);
}

/* The saved-plant heart had a focus ring and inherited the global press scale but
   no hover at all — pointing at it only triggered the card's image zoom, so the
   control gave no sign it was the thing under the cursor. */
@media (hover: hover) {
  .account-fav-heart:hover { color: var(--archive-danger); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-badge-header.bump { animation: none; }
}


.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-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;
}

/* DS §3: "أي بيانات/أسعار... تُكتب بخط Mono فقط، أبداً بالخط الأساسي."
   These amounts were set in Cormorant — the display face — at 1.2rem and
   2rem. The design draws the same two lines in Mono at 13.5px and 17px. */
.cart-sheet .cart-total .amount {
  color: var(--archive-ink);
  font-family: var(--archive-mono);
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.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: 1.06rem;
  font-weight: 600;
}

/* Clay, not ink. The design is consistent about this: screen 04 draws "add
   to bag" in ink because it is reversible, and screen 05 draws the checkout
   button in clay because "clay fill is reserved for the single commerce
   commitment". This is the one button on the storefront that changes. */
.cart-sheet .checkout-btn {
  min-height: 48px;
  margin: 0;
  padding: 14px 18px;
  color: var(--archive-white);
  background: var(--archive-clay-deep);
  background-image: none;
  border: 1px solid var(--archive-clay-deep);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.8rem;
}
@media (hover: hover) {
  .cart-sheet .checkout-btn:hover {
    background: var(--archive-ink);
    border-color: var(--archive-ink);
    box-shadow: none;
    transform: none;
  }
}


/* DS §10 touch floor. Both of these are bare text links about 35px tall;
   padding that would fix it would also push them off the CTA they belong
   under, so the target is grown with a transparent overlay instead. */
.cart-whatsapp-alt {
  position: relative;
  display: block;
  padding: 12px 0 4px;
  color: var(--archive-ink-soft);
  font-size: 0.7rem;
  text-align: center;
}

.cart-whatsapp-alt::after,
.cart-sheet .clear-btn::after {
  content: '';
  position: absolute;
  inset: -5px 0;
}
@media (hover: hover) {
  .cart-whatsapp-alt:hover {
    color: var(--archive-clay-deep);
  }
}


.cart-sheet .clear-btn {
  position: relative;
  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-count-summary {
    font-size: 2.8rem;
  }

  /* The sheet body is one scrolling column on the phone: the list, then the
     promo/total/checkout footer right after it. The drawer's desktop
     composition (list track 1fr, footer pinned to the bottom edge) survives
     above 560 only — at 375 it left a 209px blank band between a single row
     and the promo field, and at 320 the 1fr track was shorter than the row
     itself, so the price scrolled out of sight inside the list. The empty
     state keeps the centred track: it has no footer to follow. */
  .cart-sheet-body {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cart-sheet-body:has(.cart-empty) {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  /* min-height:auto, not the drawer's 0: inside a block body the list must
     keep its content height, otherwise the row scrolls inside a track that is
     shorter than itself (320: an 80px track under a 168px row). */
  .cart-sheet .cart-list {
    min-height: auto;
    overflow: visible;
    padding-bottom: 8px;
  }
  .cart-sheet .cart-list .cart-item:last-child {
    border-bottom: 0;
  }
  .cart-footer {
    max-height: none;
    overflow: visible;
  }
  /* One row of four tracks does not fit a phone: the second track was 68px
     under an 88px thumbnail (the image ran 8px into the name column), and at
     320 the name column came out 52px wide. Two rows instead — the photograph
     spans both, the name and price sit beside it, the stepper and the remove
     control take the row beneath. .cart-item-index stays absolute, on the
     thumbnail's top-start corner. */
  .cart-sheet .cart-item {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "thumb info"
      "thumb ctl";
    align-items: start;
    gap: 10px 14px;
    min-height: 0;
    padding: 16px;
  }
  .cart-sheet .cart-thumb { grid-area: thumb; }
  .cart-sheet .cart-info { grid-area: info; }
  .cart-sheet .cart-item .qty {
    grid-area: ctl;
    justify-self: start;
    align-self: end;
  }
  .cart-sheet .cart-remove {
    grid-area: ctl;
    justify-self: end;
    align-self: end;
  }
  .cart-item-index {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 2;
    padding: 2px 4px;
    color: var(--archive-paper);
    background: var(--archive-ink);
  }
  .cart-sheet .cart-info .n {
    font-size: 1.125rem;
  }

  /* The design's stepper is 32 / 34 / 32. The old 26px cells were both
     smaller than that and far under the DS §10 touch floor — a 26x32 target
     for the one control that changes what someone is about to pay for. The
     cells take the design's size and the buttons take a transparent 44px
     overlay on top of it. */
  .cart-sheet .qty {
    grid-template-columns: 32px 34px 32px;
  }

  .cart-sheet .qty button,
  .cart-sheet .qty .q {
    width: auto;
    min-width: 0;
  }

  .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;
  /* glassSpec scrim: ink α.28. Not the Dialog row's α.34 — that row is
     "centred, max 480px", and this sheet is 1420. It is a sheet by class and
     by size, so it takes the sheet scrim. */
  background: rgba(20, 33, 27, 0.28);
}

.product-sheet {
  width: min(1420px, 100%);
  max-width: 1420px;
  height: min(900px, calc(100dvh - 48px));
  max-height: none;
  overflow: hidden;
  color: var(--archive-ink);
  /* glassSpec, Sheet veil: #fffdf7 α.90, blur 18 · sat 150. */
  background: rgba(255, 253, 247, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  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);
}
@media (hover: hover) {
  .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;
}

/* glassSpec, Floating action: "#fffdf7 α.82, blur 20 — 36px disc over imagery
   — save, share, close. 44px touch via padding." This was a 44px solid paper
   disc with a hairline: the right touch size but the wrong surface, and the
   wrong disc. The button keeps 44 for the finger and the visible disc drops to
   the design's 36, drawn on ::before — the same split .account-fav-heart
   already uses for its 26px pane. No outer shadow, per the same spec block. */
.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);
}

/* .added is the add-to-cart confirmation. It is the only signal a
   phone gets that the tap landed, so it stays outside the guard. */
.product-sheet .sheet-actions .add-cart-btn.added {
  color: var(--archive-paper);
  background: var(--archive-clay-deep);
  border-color: var(--archive-clay-deep);
}
@media (hover: hover) {
  .product-sheet .sheet-actions .add-cart-btn:hover {
    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;
  }

  .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,
  .care-card,
  .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;
}

/* :active is the touch press and :focus-visible is the keyboard
   path — neither may be guarded. Only :hover moves. */
.search-result-item:active,
.search-result-item:focus-visible {
  color: var(--archive-paper);
  background: var(--archive-ink);
  outline: 0;
}
@media (hover: hover) {
  .search-result-item:hover {
    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:focus-visible .search-result-latin {
  color: rgba(240, 236, 226, 0.52);
}
@media (hover: hover) {
  .search-result-item:hover .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;
  /* glassSpec, Sheet veil scrim: ink α.28 — same correction as the cart. */
  background: rgba(20, 33, 27, 0.28);
}

.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;
  /* glassSpec, Sheet veil: #fffdf7 α.90, blur 18 · sat 150. */
  background: rgba(255, 253, 247, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  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;
}
@media (hover: hover) {
  .account-sheet > .sheet-close:hover {
    color: var(--archive-ink);
    background: var(--archive-paper);
  }
}


/* ---------- Screen 08: head and settings rows ----------
   The sheet puts this head on PAPER, not ink: the member's name in Cormorant
   28 on a 1.1 leading, one Mono line under it, and a hairline across the
   bottom. It replaces a full-height ink panel carrying a 76px monogram, a
   folio number, a clamped 3.1–5.5rem name, the email and an intro paragraph —
   none of which screen 08 draws. */
.account-sheet-head {
  flex: none;
  padding: 8px 16px 18px;
  color: var(--archive-ink);
  background: var(--archive-paper);
  border-bottom: 1px solid var(--archive-line);
}

.account-name {
  margin: 0;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}
html[dir='ltr'] .account-name { font-family: var(--archive-display-en); font-weight: 400; }

.account-since {
  margin: 6px 0 0;
  color: var(--archive-muted);
  font-family: var(--archive-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.account-since:empty { display: none; }

/* The settings block: a #fffdf7 panel of 52px rows on hairlines, each an icon,
   a label, an optional Mono value and a chevron. Two rows, not four —
   Addresses and Care reminders have nothing behind them and are not drawn.
   52 is the sheet's height and clears the 44 touch floor on its own. */
.account-rows {
  background: var(--archive-white);
  border-bottom: 1px solid var(--archive-line);
}

.account-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  color: var(--archive-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--archive-line-soft);
  border-radius: 0;
  font-family: inherit;
  font-size: 14.5px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.account-rows > .account-row:last-child { border-bottom: 0; }
@media (hover: hover) { .account-row:hover { background: var(--archive-paper); } }
.account-row:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: -2px; }

.account-row > svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--archive-ink-soft);
}

.account-row-label { flex: 1 1 auto; }

.account-row-value {
  flex: none;
  color: var(--archive-muted);
  font-family: var(--archive-mono);
  font-size: 11px;
}

.account-row-go {
  width: 16px !important;
  height: 16px !important;
  /* #718078 is the retired value — 3.52:1 on paper, below AA. See line 25. */
  color: var(--archive-muted, #6a6760) !important;
}

/* ---------- Screen 08: the saved section head ----------
   `SAVED SPECIMENS` in Mono 9.5 at .14em in clay, with a plain count beside
   it. It replaces the `A / COLLECTION` index letter, the 1.65rem heading and
   the zero-padded `00` counter, none of which the sheet draws. */
.account-saved-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.account-saved-cap {
  color: var(--archive-clay-deep);
  font-family: var(--archive-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account-saved-count {
  color: var(--archive-muted);
  font-family: var(--archive-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.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-fav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  margin: 0;
  background: none;
}

.account-fav-item {
  position: relative;
  overflow: hidden;
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  border-radius: 0;
  cursor: pointer;
}

.account-fav-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--archive-paper-deep);
}

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

/* The sheet's heart is a 26px pane of frosted paper with a filled ink heart.
   It is also the only control on this card, so the 26 the sheet draws is the
   MARK and the 44 a finger needs is the button — the same split the catalogue
   card's ＋ uses, and for the same reason. */
.account-fav-heart {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-end: 0;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--archive-ink);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* The pane is the sheet's 26 at 8/8; the button around it is the 44 a finger
   needs. It cannot hang outside like the catalogue's ＋ does — the media box
   clips, for the hover zoom — so the button sits flush in the corner and the
   pane and the glyph are placed inside it instead. */
.account-fav-heart::before {
  content: '';
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 26px;
  height: 26px;
  z-index: -1;
  background: rgba(255, 253, 247, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* centred on the pane (8 + 13 = 21), not on the button */
.account-fav-heart svg {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 14px;
  height: 14px;
}
.account-fav-heart:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: -2px; }

.account-fav-caption {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border-top: 1px solid var(--archive-line-soft);
}

.account-fav-name {
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}
html[dir='ltr'] .account-fav-name { font-family: var(--archive-display-en); }

.account-fav-price {
  margin: 0;
  color: var(--archive-clay-deep);
  font-family: var(--archive-mono);
  font-size: 11.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

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

.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 {
  /* A5: clay-deep on the sheet's ink ground measures 2.17:1 — under the 4.5:1
     floor for normal text. clay-light is the same family one step up the
     palette (DESIGN_SYSTEM §2) and measures 7.33:1 there, so the button still
     reads as the clay-toned secondary beside the paper-on-ink settings button.
     Colour only; size, border and weight are untouched. */
  color: var(--archive-clay-light);
  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;
  }

  /* Screen 08's head is the same two lines at every width — a 370px ink panel
     was the old composition, and the sheet draws no phone variant of it. */
  .account-sheet-head {
    min-height: 0;
    padding: 8px 16px 18px;
  }

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

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

  /* The saved card is square at every width; a 210px floor fought the
     aspect-ratio and forced the card wider than its own grid track. */
  .account-fav-item {
    min-height: 0;
  }

  .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, .rail-row, .strip-btn,
    .btn-primary, .btn-ghost, .checkout-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, .rail-row, .strip-btn, .btn-primary,
    .btn-ghost, .checkout-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. */
/* .pd-ask left this list with the six-chapter product page: the WhatsApp
   enquiry is a full button in the "One Screen" handoff, and it takes its press
   from product.css with the other purchase controls. */
:is(a:not(.tab):not(.btn-primary):not(.btn-ghost):not(.cat-add):not(.card):not(.cat-card),
    .foot-ic, .cat-link, .account-row):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, .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.
   ============================================================================ */

/* 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: search, account, cart. The 44px floor moved onto the
   transparent ::before in the pages' header block — a min-width here would
   stretch the box D1 draws at 19px and push the row's 28px gaps apart. */

/* 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; }

/* 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;
}

/* ============================================================
   D1 Desktop home — the desktop sheet's own display sizes
   ============================================================
   "Desktop and Tablet.dc.html", screen `D1 Desktop home · 1440`, writes the
   hero at 58px/300 and the section heading ("Recently catalogued") at 34px/400.
   The phone sheet writes the same hero at 34px/500 in El Messiri, and those two
   are not in conflict: the phone sheet is drawn in Arabic and D1 in English, so
   each names the face that can set its own script.

   This block is a desktop-only override and deliberately does NOT touch
   --pw-fs-hero or --pw-fs-heading. Those are the single display scale approved
   in `defaafe`, they serve every width, and the phone end of that scale is the
   number the phone sheet pins. Retuning the clamp would move every width in
   between — widths neither sheet specifies.

   Size applies to both scripts: 58 and 34 are the desktop sheet's scale and
   carry no script of their own.

   Weight applies to LTR only, and that is not a stylistic choice. El Messiri is
   loaded at 400;500;600;700 — it has no 300 — so `font-weight:300` on the
   Arabic hero would resolve to 400, against the phone sheet's explicit 500.
   The Arabic desktop weight is left exactly as approved.
   ============================================================ */
@media (min-width: 1025px) {
  .hero h1 { font-size: 58px; }
  html[dir='ltr'] .hero h1 { font-size: 58px; font-weight: 300; }

  .section-head h2 { font-size: 34px; }
  html[dir='ltr'] .section-head h2 { font-size: 34px; font-weight: 400; }
}

/* ============================================================
   Toast — Design System §FEEDBACK
   ============================================================
   The sheet draws it literally: ink ground #14211b, paper text, padding
   13px 15px, gap 11, a 16px check stroked in clay-light at width 2, a 13.5px
   label taking the remaining width, and a Mono 11px action in the same clay.
   Its copy in the sheet is "Added to your bag" — the one moment the storefront
   had no feedback for at all; add-to-cart only nudged the badge.

   Motion comes from the same file's table: "Toast in / auto-out — 220ms / 4s".
   ============================================================ */
.pw-toast {
  position: fixed;
  z-index: 130;
  inset-inline: 16px;
  bottom: calc(var(--pw-tabbar-h, 66px) + 14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 420px;
  margin-inline: auto;
  padding: 13px 15px;
  color: var(--archive-paper);
  background: var(--archive-ink);
  border-radius: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.22s var(--archive-ease), transform 0.22s var(--archive-ease);
}

/* Above 1024 the tab bar is gone, so the toast sits on the page's own margin. */
@media (min-width: 1024px) {
  .pw-toast {
    inset-inline: auto 34px;
    margin-inline: 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

.pw-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pw-toast svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* قاعدة [hidden] في ورقة المتصفّح الافتراضية محصورة بنطاق HTML، فلا تطابق
   عنصر <svg> إطلاقاً — قياسٌ في Chromium وWebKit أظهر علامة الصحّ ظاهرةً رغم
   وجود السمة. رسائل الفشل تطفئ العلامة، فتلزم القاعدة صراحةً. */
.pw-toast svg[hidden] {
  display: none;
}

.pw-toast-label {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.4;
}

.pw-toast-action {
  padding: 0;
  color: var(--archive-clay-light);
  background: none;
  border: 0;
  font-family: var(--archive-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  /* The label is 23x17 — the smallest control left on the storefront. The hit
     area is grown to 44px with a pseudo-element rather than padding, so the
     toast's own layout and the label's optical position stay exactly as they
     are. Same pattern as the other compact controls in this file. */
  position: relative;
}

.pw-toast-action::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* Arabic has no Mono face — IBM Plex Mono carries no Arabic and would fall
   through to the system monospace. Same limit, and same handling, as the
   catalogue sheet's eyebrow: keep the size, colour and role, drop the family
   and its Latin tracking where the font does not cover the script. */
html[dir='rtl'] .pw-toast-action {
  font-family: inherit;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pw-toast { transition: opacity 0.22s linear; transform: none; }
  .pw-toast.show { transform: none; }
}

/* ============================================================
   Phase 3 — the interaction state matrix
   ============================================================
   Design System `states`, the authority for every row below:

     Primary button  d ink fill, paper text · h lift 3px + 750ms sheen
                     p no lift, opacity .9 · f 2px clay ring, offset 3
                     x fog fill, muted text
     Ghost button    d 1.5px ink border · h fills to ink · p ink, opacity .9
                     f 2px clay ring, offset 3 · x border α.22, muted

   The sheen and the lift were not missing — index.html implements both, and
   its sweep already runs at exactly `.75s`, the motion table's figure. This
   file had switched both off (`::after{display:none}`, `transform:none`) with
   no explanatory comment, which by this project's own convention marks drift
   rather than a decision. They are restored, not rebuilt.
   ============================================================ */

/* --- hover: the lift and the sheen the design asks for -------------------- */
@media (hover: hover) {
  .hero .btn-primary:hover,
  .final-cta .btn-primary:hover,
.colophon .btn-primary:hover {
    transform: translateY(-3px);
  }
  .hero .btn-primary:hover::after,
  .final-cta .btn-primary:hover::after,
  .colophon .btn-primary:hover::after {
    transform: translateX(290%) skewX(-18deg);
  }
}

/* The sweep needs a positioned host, or it is not clipped by the host's own
   overflow:hidden and escapes the page. `.hero .btn-primary` is already
   relative; `.final-cta .btn-primary` is explicitly `position:static` above —
   it resets the baseline's relative — so re-enabling the sheen there without
   this sent the pseudo-element 399px past the button and gave Arabic mobile
   273px of horizontal scroll. Stated on the sheen's own rule so the two can
   never drift apart again. */
.hero .btn-primary,
.final-cta .btn-primary,
.colophon .btn-primary {
  position: relative;
  overflow: hidden;
}

/* The sweep itself. Re-declared here rather than left to index.html so the
   storefront's ink and clay grounds get a paper-toned sheen instead of the
   baseline's white one. */
.hero .btn-primary::after,
.final-cta .btn-primary::after,
.colophon .btn-primary::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 60%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 253, 247, 0.34),
    transparent
  );
  transform: translateX(-190%) skewX(-18deg);
  pointer-events: none;
  transition: transform 750ms ease;
}

.hero .btn-primary > *,
.final-cta .btn-primary > *,
.colophon .btn-primary > * {
  position: relative;
  z-index: 1;
}

/* --- pressed: "no lift, opacity .9" — not a scale ------------------------- */
/* The global :active rule scales every control 0.97. The matrix gives these
   two an opacity press instead, so it is overridden for them alone. */
.btn-primary:active,
.btn-ghost:active {
  scale: 1;
  transform: none;
  opacity: 0.9;
}

/* --- focus: 2px clay ring, offset 3 --------------------------------------- */
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--archive-clay);
  outline-offset: 3px;
}

/* --- disabled: fog fill, muted text --------------------------------------- */
/* Was rgba(27,36,23,.15) on --pine-soft: a tinted ink wash, where the matrix
   asks for the palette's own fog and muted tokens. */
.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--archive-muted);
  background: var(--archive-fog);
  border-color: var(--archive-fog);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-ghost.disabled,
.btn-ghost:disabled {
  color: var(--archive-muted);
  background: transparent;
  border: 1.5px solid var(--archive-line);
  cursor: not-allowed;
  pointer-events: none;
}

/* --- ghost default: 1.5px ink, not a 1px hairline ------------------------- */
.hero .btn-ghost {
  border: 1.5px solid var(--archive-ink);
}

/* ...and the disabled border stays α.22, which the rule above would otherwise
   win back on specificity. */
.hero .btn-ghost.disabled,
.hero .btn-ghost:disabled {
  border-color: var(--archive-line);
}

@media (prefers-reduced-motion: reduce) {
  .hero .btn-primary:hover,
  .final-cta .btn-primary:hover,
.colophon .btn-primary:hover { transform: none; }
  .hero .btn-primary::after,
  .final-cta .btn-primary::after,
.colophon .btn-primary::after { display: none; }
}

/* --- Text field -----------------------------------------------------------
   `states`: d fog fill, no border · h hairline .22 · a 1.5px clay border
             f 1.5px clay + ring · x fog, muted text
   The INPUTS panel draws the same thing at 44px: a #d8d8ce fill with no
   border at rest, and #fffdf7 behind a 1.5px #a85f3e border on focus. D2's
   catalogue header repeats the fill — "width:280px;height:38px;background:
   #d8d8ce".

   This was a transparent box under a 1px underline — the one component whose
   default state inverted the spec, since the design gives the field a fill
   and takes the border away.
   -------------------------------------------------------------------------- */
.search-box {
  padding: 0 14px;
  background: var(--archive-fog);
  border: 0;
  border-radius: 0;
}

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

@media (hover: hover) {
  .search-box:hover {
    box-shadow: inset 0 0 0 1px var(--archive-line);
  }
}

.search-box:focus-within {
  background: var(--archive-white);
  border: 0;
  box-shadow:
    inset 0 0 0 1.5px var(--archive-clay),
    0 0 0 2px rgba(168, 95, 62, 0.22);
}

.search-box input::placeholder {
  color: var(--archive-muted);
  opacity: 1;
}

/* ============================================================
   Arabic script in the mono micro-labels.

   These labels are set in IBM Plex Mono with tracking — the design's own
   treatment, and right for Latin. Arabic is a joined script, so the tracking
   pulls its letterforms apart: «نباتات داخلية مختارة بعناية», the line under
   the hero, rendered as «نـبـاتـات داخـلـيـة مـخـتـارة بـعـ__نـايـة».

   Only labels whose text is actually translated are listed. The always-Latin
   marks — LIVING OBJECTS, THE COLLECTION / 02, «٠١ / THE FULL ARCHIVE», the
   binomials and the SP- codes — keep their tracking, because that tracking is
   the design. Declared here rather than in each screen's own stylesheet
   because identity-v2.css loads on every storefront page, and
   html[lang="ar"] outranks the single-class rules it corrects.

   Precedent: 885d9b0, the same per-script correction on the header.
   ============================================================ */
html[lang="ar"] .hero-trust-item,
html[lang="ar"] .section-meta,
html[lang="ar"] .order-fact h3,
html[lang="ar"] .account-saved-cap,
html[lang="ar"] .pw-cards:not(.is-list) .cat-tier,
html[lang="ar"] .cat-tier,
html[lang="ar"] .cat-count,
html[lang="ar"] .mast-counter-label,
html[lang="ar"] .rh-sort-btn span,
html[lang="ar"] .ink-rarity-label,
html[lang="ar"] .pd-fact-l,
html[lang="ar"] .checkout-steps li,
html[lang="ar"] .section-kicker{
  font-family: var(--archive-body);
  letter-spacing: normal;
}


/* ============================================================
   TRANSPARENCY AND CONTRAST PREFERENCES
   Audited 2026-08-03: the site honoured prefers-reduced-motion in 57 places
   and neither of these in any. Both are user settings a real person turns on
   for a reason — vestibular comfort is only one of three, and the other two
   were unanswered while five translucent sheets were shipping.

   The translucent surfaces are the sheets: .cart-sheet, .product-sheet,
   .account-sheet (here) and .cat-sheet, .cat-sheet-foot (catalog.css). Each
   already declares a solid background under its blur, so turning the blur off
   loses nothing but the effect — the layout, the colour and the contrast all
   hold. Raising the alpha to 1 is what actually makes them opaque.
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  .cart-sheet,
  .product-sheet,
  .account-sheet {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--archive-white, #fffdf7);
  }

  .account-fav-heart::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--archive-white, #fffdf7);
  }
}

/* prefers-contrast: more asks for near-solid grounds and a defined edge, so
   the sheets lose their translucency too and gain a real border rather than
   relying on a shadow to separate them from the page. */
@media (prefers-contrast: more) {
  .cart-sheet,
  .product-sheet,
  .account-sheet {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--archive-white, #fffdf7);
    border: 1px solid var(--archive-ink, #14211b);
  }

  /* Hairlines drawn at low alpha vanish first at high contrast. */
  .card,
  .cat-card {
    border-color: var(--archive-ink, #14211b);
  }
}


/* ============================================================
   C3 · Arabic display typography            (round-2 approved)
   ============================================================
   Round-2 preview C3 was approved as *principles on the existing
   scale*: the Claude Design display scale stays exactly as it is —
   --pw-fs-hero / --pw-fs-heading and the D1 desktop override above
   are untouched, and this block sets no font-size at all.

   Two properties are corrected, both script-specific:

   1) Tracking. Arabic is cursive; letter-spacing pulls joined
      letters apart. The Latin sheets track their headings for a
      reason, so the authored values stay for html[dir='ltr'] and are
      neutralised for RTL only — the pattern .cart-folio already uses
      at the `html[dir='rtl']` rule above.
   2) Leading. line-height:1 (0.94 on the specimen title) seats the
      ascender of one Arabic line inside the descender of the line
      above. 1.14 clears it and leaves the Latin sheets untouched.

   Headings here swap to English under [dir='ltr'] via i18n, so
   scoping to [dir='rtl'] is what makes this correct rather than
   blanket. Elements that are Arabic in BOTH directions (.pd-name)
   are fixed at the rule itself, in product.css.
   ============================================================ */
html[dir='rtl'] .section-head h2,
html[dir='rtl'] .care-head h2,
html[dir='rtl'] .cart-sheet-head h2,
html[dir='rtl'] .product-sheet .sheet-body h2 {
  letter-spacing: 0;
  line-height: 1.14;
}


/* ============================================================
   Featured Specimen — approved preview E2 (open / no framing)
   ============================================================
   Presentation and merchandising, NOT rarity. This is deliberately not
   .plate-spread and inherits none of its Treasure-only semantics
   (DESIGN_SYSTEM §6): every tier is valid here, and the tier only
   colours a 7px dot. Common, Rare and Treasure all render identically
   apart from that dot.

   Appearance rule lives in render() and is the smallest one that needs
   no new data: the DEFAULT, unfiltered home grid holding exactly one
   specimen. A filter that narrows to one result keeps the ordinary
   card, which is the same principle §6 already states for expanded
   plates. Swapping the trigger later — say, p.featured at any inventory
   size — changes that one condition and leaves this component alone.

   E2's composition is open: no panel, no enclosing frame, no shadow and
   no radius. The image is the hero and carries only a hairline above
   and below; everything else is one quiet line beneath it.

   #grid carries id-level rules with !important in this file, so
   §11.11 requires matching that specificity to switch the grid off.
   ============================================================ */
#grid.has-featured {
  display: block !important;
}

.featured-specimen {
  --fs-tier: var(--tier-common);
}

.fs-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.fs-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--fs-tier);
}
.fs-kicker {
  font-family: var(--archive-mono);
  font-size: var(--pw-fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--archive-ink-soft);
}
/* Arabic label: never tracked (C3), and hidden on an LTR page where the
   Latin kicker beside it already says the same thing. */
.fs-kicker-ar {
  font-size: var(--pw-fs-caption);
  color: var(--archive-ink-soft);
  letter-spacing: 0;
}
html[dir='ltr'] .fs-kicker-ar { display: none; }

.fs-media {
  display: block;
  /* .card-img is `position:absolute; inset:0` (index.html), which is what makes
     the shared fade work inside .card-media. Reusing that class here means this
     box has to be the positioned ancestor, or the image resolves against the
     section and covers it whole. */
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--archive-paper-deep);
  border-block: 1px solid var(--archive-line-soft);
  border-radius: 0;
}
.fs-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 26px;
}
.fs-idn { display: block; text-decoration: none; color: inherit; }
.fs-name {
  display: block;
  font-family: var(--archive-display-ar);
  font-size: var(--pw-fs-hero);
  font-weight: 500;
  line-height: 1.14;      /* C3 */
  letter-spacing: 0;      /* C3: never track Arabic */
  color: var(--archive-ink);
}
html[dir='ltr'] .fs-name { font-family: var(--archive-display-en); }
.fs-latin {
  display: block;
  margin-top: 4px;
  font-family: var(--archive-display-en);
  font-style: italic;
  font-size: var(--pw-fs-title);
  line-height: 1.2;
  color: var(--archive-ink-soft);
}
.fs-idn:hover .fs-name { color: var(--archive-clay-deep); }

.fs-acq { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.fs-code {
  font-family: var(--archive-mono);
  font-size: var(--pw-fs-label);
  letter-spacing: 0.2em;
  color: var(--archive-clay-deep);
  font-variant-numeric: tabular-nums;
}
.fs-price {
  font-family: var(--archive-mono);
  font-size: var(--pw-fs-title);
  font-variant-numeric: tabular-nums;
  color: var(--archive-ink);
}
.fs-avail {
  font-size: var(--pw-fs-caption);
  color: var(--archive-clay-deep);
}
.fs-cta { min-height: 48px; }

/* Phone: composed rather than stacked. The plate turns portrait, the
   name leads on its own line, and price and code sit on one baseline
   with the action taking the full measure beneath them. */
@media (max-width: 760px) {
  .fs-media { aspect-ratio: 4 / 5; }
  .fs-line {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-top: 20px;
  }
  .fs-acq {
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--archive-line-soft);
  }
  .fs-cta { width: 100%; justify-content: center; }
}


/* ============================================================
   Colophon — the page's single ending      (approved preview C2)
   ============================================================
   Replaces the stacked .final-cta + footer, which met as two ink
   slabs joined by one hairline and read as 719px of undifferentiated
   dark at 1280 (758 at 375). One block now, its rhythm made by
   hairlines rather than padding: 483px at 1280, 516px at 375.

   The CTA row only exists on the home page, because .final-cta only
   ever existed there. Every other page renders the same colophon
   without it, so the ending is one component site-wide.

   Archive metadata is derived at runtime from the specimens already
   loaded — no new field, RPC or numbering. See pwRenderColophon().
   ============================================================ */
.colophon {
  background: var(--archive-ink);
  color: var(--archive-paper);
  padding: 54px 34px 30px;
  border-top: 1px solid rgba(240, 236, 226, 0.14);
}
.colophon .wrap { max-width: var(--pw-content); margin-inline: auto; }
.col-rule { font-family: var(--archive-mono); font-size: var(--pw-fs-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240, 236, 226, 0.55); }
/* Arabic never carries tracking (C3); it also drops on an LTR page,
   where the Latin half beside it already says the same thing. */
.col-rule-ar { font-family: var(--archive-body); font-size: var(--pw-fs-caption);
  letter-spacing: 0; color: rgba(240, 236, 226, 0.55); }
html[dir='ltr'] .col-rule-ar { display: none; }

.col-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding-bottom: 26px; border-bottom: 1px solid rgba(240, 236, 226, 0.14); }
.col-head-line { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.col-cta { display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap; padding: 30px 0; }
.col-cta h2 { margin: 0; max-width: 15ch; color: var(--archive-paper);
  font-family: var(--archive-display-ar); font-size: var(--pw-fs-heading);
  font-weight: 500; line-height: 1.14; letter-spacing: 0; }
html[dir='ltr'] .col-cta h2 { font-family: var(--archive-display-en); }
.col-cta p { max-width: 44ch; margin: 8px 0 0; color: rgba(240, 236, 226, 0.72);
  font-size: 0.9rem; line-height: 1.8; }

.col-mark { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid rgba(240, 236, 226, 0.14); }
.col-mark .brand-name { color: var(--archive-paper); font-family: var(--archive-display-en);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem); font-weight: 500; line-height: 0.86; }
.col-meta { display: grid; grid-template-columns: auto auto; gap: 6px 30px;
  align-self: flex-end; margin: 0; }
.col-meta dt { font-family: var(--archive-mono); font-size: var(--pw-fs-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 236, 226, 0.45); }
.col-meta dd { margin: 0; font-family: var(--archive-mono); font-size: 12px;
  color: rgba(240, 236, 226, 0.85); font-variant-numeric: tabular-nums; }
/* Arabic values leave the Latin mono face and its tracking (C3). */
.col-meta dd .ar { font-family: var(--archive-body); letter-spacing: 0; font-size: var(--pw-fs-caption); }

.col-tail { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(240, 236, 226, 0.14);
  margin-top: 26px; padding-top: 16px; }
.colophon .foot-links { display: flex; gap: 26px; padding: 0; border: 0;
  font-size: var(--pw-fs-caption); }
.colophon .foot-links a { color: rgba(240, 236, 226, 0.8); }
.colophon .foot-social { display: flex; gap: 12px; }
/* These three were scoped to `footer` and stopped matching when the element
   became <section class="colophon">. Restated here at the same values, so the
   social marks keep their size and the links keep the 44px floor. */
.colophon .foot-links a { min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; }
.colophon .foot-ic { width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--archive-paper); border: 1px solid rgba(240, 236, 226, 0.28); border-radius: 50%; }
.colophon .foot-ic svg { width: 17px; height: 17px; }
/* The line reads "© 2026 Plants Whisperer · الكويت" — mixed script, so it
   carries no tracking at all (C3). Mono face is kept. */
.colophon .copy { font-family: var(--archive-mono); font-size: var(--pw-fs-label);
  letter-spacing: 0; color: rgba(240, 236, 226, 0.55); margin: 0; }

/* Phone: the same composition, re-rowed. No type is reduced —
   every size here is the desktop size. Only rows and padding change. */
@media (max-width: 760px) {
  .colophon { padding: 28px 16px 20px; }
  .col-head { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 15px; }
  .col-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 0; }
  .col-cta .btn-primary { width: 100%; }
  .col-mark { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px; }
  .col-meta { align-self: stretch; display: flex; flex-wrap: wrap; gap: 6px 26px; }
  .col-meta dt, .col-meta dd { align-self: center; }
  .col-meta dd { margin-inline-start: 8px; }
  .col-tail { margin-top: 16px; padding-top: 12px; gap: 10px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .col-tail .copy { grid-column: 1 / -1; }
  /* A grid item's automatic minimum size is its content's min-content, not 0
     — the one CSS Grid quirk that turns "1fr" into "at least this wide". Three
     links each floored at 44px by the touch-target rule above, plus two 26px
     gaps, cannot report a min-content narrower than 191.8px; the sibling
     `auto` column (two 44px social marks + a gap = 100px) and the row's own
     10px gap are fixed on top of that. 191.8 + 100 + 10 = 301.8px is what the
     grid then insists on fitting into `.wrap`'s content box — 288px at 320,
     the narrowest width this stylesheet still targets. It fits everywhere the
     grid-template-columns comment above was actually measured (375+); it does
     not fit here, and the excess became page-level horizontal scroll: 320
     rendered `document.documentElement.scrollWidth` at 342px, all of it this
     one row's overflow (confirmed by removing the row: scrollWidth = 320).
     `min-width: 0` lets the track answer to the space `auto` and the gap
     actually leave it, and `flex-wrap: wrap` lets the row it contains use
     that answer — the third link (its own text the widest single word here)
     moves to a second line instead of forcing the first. Neither touches a
     single px/rem in the sheet's own type or spacing tokens.

     This is not new at 320 specifically — the third link already sits on its
     own row at every width from 340 to 430; `flex-wrap` just gives 320 a
     THIRD row instead of letting the column force overflow. The row returns
     to a single line only past 760, where `.col-tail` reverts to the desktop
     `display: flex; flex-wrap: wrap` rule above and this block no longer
     applies. */
  .col-tail .foot-links { min-width: 0; flex-wrap: wrap; }
  .colophon .foot-ic { width: 44px; height: 44px; }
}


/* ============================================================
   A4 — genus filters with no stock            (approved: C)
   ============================================================
   Eight of the nine genera hold nothing today. They stay visible and
   stay clickable — the empty state they lead to is not a dead end, it
   offers a WhatsApp request, which for a rare-plant archive turns a
   miss into a demand signal. Hiding them would also make the taxonomy
   read as smaller than it is.

   What changes is order and weight: stocked genera first, then the
   rest, each group keeping its sort_order. A genus that gains stock
   moves back into the first group by itself — the split is computed
   from the counts already in memory, so nothing has to be maintained.

   The dimming was colour alone, which 1.4.1 does not accept on its
   own, so each empty chip also carries a visually-hidden status. It is
   NOT aria-disabled: the control genuinely works.
   ============================================================ */
.pw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The catalogue drew stocked and empty genera identically; the home row
   already dimmed. Same treatment on both surfaces now.

   The dim value is NOT the home row's. That row sits on paper, so
   ink-soft at 42% reads 6.76:1 there. This rail sits on ink — its own
   chips are drawn in the paper family — so the same colour measured
   2.08:1, dark on dark. Dimming here has to come from the paper family
   instead, and 0.52 is the dimmest alpha that still clears 4.5:1
   (4.77:1), leaving these chips plainly secondary to the available ones
   at 0.6 (5.89:1). They stay clickable, so the exemption WCAG grants
   inactive controls does not apply to them. */
.ink-genus-item.is-empty { color: rgba(240, 236, 226, 0.52); }
.ink-genus-item.is-empty .ink-count { color: rgba(240, 236, 226, 0.52); }


/* ============================================================
   Buttons inherit the page's face
   ============================================================
   A <button> does not inherit font-family — it takes the UA's, which
   is why three controls were rendering in Arial on a page that never
   asks for it:

     .btn-primary            the featured specimen's add action, the
                             only <button> carrying this class; the
                             hero and colophon ones are <a> and were
                             always correct.
     .ink-seal               the rarity seal. Its collector variant asks
                             for `font-family: inherit` so the ★ escapes
                             the Latin mono face, but inherit from a
                             <button> resolves to the UA font, not the
                             body's. (‎.coll-seal‎ was the home page's own
                             seal; it went with the collection row.)

   Setting it on the hosts fixes the mark's inherit chain at the same
   time, which is why this is one rule and not two.
   ============================================================ */
.btn-primary,
.ink-seal {
  font-family: inherit;
}