/* ============================================================
   Plants Whisperer — Phase 5 storefront layer
   Owner-approved hybrid: previews/phase-5-owner-hybrid/app.html
   3C Native Plus = master design language on every device.
   3B Premium Editorial = large-screen composition only.

   Loaded LAST on index.html and, through the generators, on catalog.html,
   policy.html and plants/** (root-absolute href, so it resolves from any
   depth). It re-composes the existing DOM: same ids, same hooks, same
   generator anchors, same guards. Nothing here changes a contract.

   Shape language (one rule set at every breakpoint):
     touch surfaces 12px · sheets/drawers 22px · the purchase action and the
     quantity stepper are the only pills · separators are hairlines ·
     imagery is square at the viewport edge, 12px inside a grid.
   Breakpoints: 768 (the bridge: split hero, 3-col grid, sheets stay),
   1024 (top nav, 12-col editorial grid, sticky PDP photo, cart drawer).
   ============================================================ */

body.p5 {
  --p5-r-touch: 12px;
  --p5-r-sheet: 22px;
  --p5-r-pill: 999px;
  --p5-ease: cubic-bezier(.2, .8, .2, 1);
  --p5-hdr: 56px;
  --p5-pad: 20px;
  --p5-safe: env(safe-area-inset-bottom, 0px);
  --p5-dirx: -1;
  background: var(--archive-paper);
  color: var(--archive-ink);
}
html[dir='ltr'] body.p5 { --p5-dirx: 1; }
@media (min-width: 768px)  { body.p5 { --p5-pad: 32px; } }
@media (min-width: 1024px) { body.p5 { --p5-pad: 48px; --p5-hdr: 64px; } }

body.p5 .p5-surf,
body.p5 .hero-band {
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-touch);
  box-shadow: 0 2px 0 rgba(20, 33, 27, .05);
}
body.p5 .p5-eyebrow {
  display: block;
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 10.5px;
  color: var(--archive-clay-deep);
  letter-spacing: 0;
}
html[dir='ltr'] body.p5 .p5-eyebrow { text-transform: uppercase; } /* never tracked: an Arabic category name can sit inside it */

/* ============================================================
   1 · masthead
   ============================================================ */
body.p5 header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background: rgba(240, 236, 226, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--archive-line-soft);
}
html.pwa body.p5 header.nav { background: var(--archive-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.p5 .nav-inner {
  max-width: 1360px;
  height: var(--p5-hdr);
  margin: 0 auto;
  padding: 0 var(--p5-pad);
  display: flex;
  align-items: center;
  gap: 16px;
}
body.p5 .nav-inner .brand { flex: 1 1 0; min-width: 0; gap: 0; }
body.p5 .nav-inner .brand .brand-mark { display: none; }
body.p5 .brand-wm {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: var(--archive-clay-deep);
  white-space: nowrap;
  letter-spacing: 0;
}
body.p5 .nav-inner .nav-spacer { display: none; }
body.p5 .nav-inner nav.links { display: none; }
body.p5 .nav-toggles { flex: 1 1 0; justify-content: flex-end; gap: 6px; }
body.p5 .icon-toggle { width: 44px; height: 44px; border-radius: 50%; color: var(--archive-ink); }
body.p5 .icon-toggle::before { width: 44px; height: 44px; }
body.p5 .icon-toggle svg { width: 20px; height: 20px; stroke-width: 1.7; }
body.p5 .lang-toggle-desktop {
  position: relative;
  height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--p5-r-pill);
  color: var(--archive-ink);
  font-size: 12px;
  isolation: isolate;
}
/* the drawn 32px chip inside a 44px control */
body.p5 .lang-toggle-desktop::before { content: ''; position: absolute; inset: 6px 0; z-index: -1; width: auto; height: auto; min-width: 0; transform: none; border: 1px solid var(--archive-line); border-radius: var(--p5-r-pill); }
body.p5 .lang-toggle-desktop:hover::before { border-color: var(--archive-ink); }
body.p5 .cart-toggle-header { position: relative; }
body.p5 .cart-badge-header,
body.p5 .cart-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--p5-r-pill);
  background: var(--archive-clay);
  color: var(--archive-white);
  font: 500 10px/17px 'IBM Plex Mono', monospace;
  text-align: center;
  display: none;
}
body.p5 .cart-badge-header.show,
body.p5 .cart-badge.show { display: block; }
body.p5 .search-box {
  height: 40px;
  border-radius: var(--p5-r-touch);
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  padding: 0 12px;
  align-items: center;
  gap: 8px;
}
body.p5 .search-box input { border: 0; background: none; font-size: 16px; }
body.p5 .search-results { border-radius: var(--p5-r-touch); border: 1px solid var(--archive-line-soft); }
@media (min-width: 1024px) {
  body.p5 .nav-inner nav.links { display: flex; gap: 28px; font-size: 14px; flex: 0 0 auto; }
  body.p5 nav.links a { color: var(--archive-ink-soft); padding: 6px 0; border-bottom: 1.5px solid transparent; }
  body.p5 nav.links a:hover, body.p5 nav.links a.is-active { color: var(--archive-ink); border-bottom-color: var(--archive-clay); font-weight: 500; }
}

/* ============================================================
   2 · hero — stacked on the phone, split at 768, editorial at 1024
   ============================================================ */
body.p5 .hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: 1360px;
  min-height: 0;
  margin: 0 auto;
  padding: 6px var(--p5-pad) 0;
  isolation: auto;
  background: transparent;
}
body.p5 .hero::before,
body.p5 .hero::after,
body.p5 .hero-visual::before,
body.p5 .hero-visual::after { content: none; display: none; }
body.p5 .hero, body.p5 .hero-content { direction: inherit; text-align: start; }
body.p5 .hero > .hero-visual { order: -1; }
body.p5 .hero > .hero-content { order: 1; }
body.p5 .hero-visual {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  margin: 0 calc(-1 * var(--p5-pad));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--archive-paper-deep);
}
body.p5 .hero-visual picture,
body.p5 .hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  mix-blend-mode: normal;
}
body.p5 .hero-visual-meta {
  position: absolute;
  top: 14px;
  inset-inline-start: var(--p5-pad);
  inset-inline-end: auto;
  bottom: auto;
  z-index: 2;
  display: inline-block;
  width: auto;
  padding: 7px 12px;
  border-radius: var(--p5-r-pill);
  background: rgba(255, 253, 247, .92);
  color: var(--archive-ink);
  font: 500 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  text-transform: none;
  opacity: 1;
  writing-mode: horizontal-tb;
  transform: none;
}
body.p5 .hero-content {
  position: static;
  grid-column: auto;
  grid-row: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: none;
  padding: 0;
  text-align: start;
  background: transparent;
}
body.p5 .hero h1 {
  max-width: none;
  margin: 0;
  font-family: 'El Messiri', serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}
body.p5 .hero p.sub {
  max-width: 44ch;
  margin: 8px 0 0;
  color: var(--archive-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
body.p5 .hero-band {
  display: block;
  min-height: 70px;
  margin-top: 14px;
}
body.p5 .hero-band[hidden] { display: block; visibility: hidden; }
body.p5 .hero-band-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}
body.p5 .hero-band-txt b { display: block; font-size: 15px; font-weight: 600; }
body.p5 .hero-band-txt small { display: block; font-size: 12.5px; color: var(--archive-ink-soft); margin-top: 2px; }
body.p5 .hero-band-txt small .is-pickup { color: var(--archive-clay-deep); }
body.p5 .hero-band-price { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--archive-clay-deep); white-space: nowrap; }
body.p5 .hero-band-price .price-original { display: none; }
body.p5 .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
body.p5 .hero .btn-primary,
body.p5 .hero .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--p5-r-pill);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 180ms var(--p5-ease), background 180ms var(--p5-ease);
}
body.p5 .hero .btn-primary { background: var(--archive-ink); color: var(--archive-white); border: 0; box-shadow: none; }
body.p5 .hero .btn-primary::after { content: none; display: none; }
body.p5 .hero .btn-primary:hover { background: var(--archive-ink); }
body.p5 .hero .btn-ghost { background: var(--archive-white); color: var(--archive-ink); border: 1px solid var(--archive-line); }
body.p5 .hero .btn-primary:active,
body.p5 .hero .btn-ghost:active { transform: scale(.985); }
body.p5 .hero-content > * { animation: none; opacity: 1; transform: none; }
@media (min-width: 768px) {
  body.p5 .hero { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding-top: 22px; }
  body.p5 .hero-visual { grid-column: 1; grid-row: 1; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--p5-r-touch); }
  body.p5 .hero-content { grid-column: 2; grid-row: 1; }
  body.p5 .hero-visual-meta { inset-inline-start: 14px; }
  body.p5 .hero h1 { font-size: 42px; }
}
@media (min-width: 1024px) {
  body.p5 .hero { grid-template-columns: 1.15fr .85fr; gap: 56px; padding-top: 36px; }
  body.p5 .hero-visual { aspect-ratio: auto; height: 600px; }
  body.p5 .hero-content { padding-inline-end: 24px; }
  body.p5 .hero h1 { font-size: 58px; }
  body.p5 .hero p.sub { font-size: 16px; margin-top: 14px; }
  body.p5 .hero-band { max-width: 460px; }
}
@media (min-width: 1440px) {
  body.p5 .hero-visual { height: 660px; }
  body.p5 .hero h1 { font-size: 64px; }
}

/* ============================================================
   3 · collection — 2 / 3 / editorial 12-col
   ============================================================ */
body.p5 .shop { padding: 40px 0 0; background: transparent; }
body.p5 .shop::before { content: none; display: none; }
body.p5 .shop > .wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--p5-pad); }
body.p5 .section-head { margin: 0 0 14px; padding: 0; border: 0; align-items: flex-end; }
body.p5 .section-head h2 { font-family: 'El Messiri', serif; font-size: 24px; font-weight: 600; line-height: 1.12; letter-spacing: 0; }
body.p5 .section-head h2::after { content: none; }
body.p5 .section-meta { font: 500 11px 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; color: var(--archive-ink-soft); letter-spacing: 0; }
body.p5 .grid.pw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
body.p5 .grid.pw-cards.has-featured { grid-template-columns: 1fr; }
body.p5 .grid .loading { grid-column: 1 / -1; color: var(--archive-ink-soft); }
@media (min-width: 768px) {
  body.p5 .shop { padding-top: 52px; }
  body.p5 .section-head h2 { font-size: 28px; }
  body.p5 .grid.pw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (min-width: 1024px) {
  body.p5 .shop { padding-top: 72px; }
  body.p5 .section-head h2 { font-size: 32px; }
  /* editorial merchandising: a featured plate, then rhythm — not wider phone
     cards. Every card spans 3 tracks by default; the first two carry the
     composition; the "next specimen" slot and the archive note fill the row. */
  body.p5 #coll #grid.pw-cards:not(.has-featured) { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card { grid-column: span 3; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(1) { grid-column: span 5; grid-row: span 2; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(2) { grid-column: span 4; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .p5-next { grid-column: span 3; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .p5-story { grid-column: span 7; align-self: end; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(1) .name-ar { font-size: 17px; }
}

/* --- card: image leads, SP chip on the plate, + at its corner --- */
body.p5 .card.cat-card {
  position: relative;
  container-type: inline-size;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
body.p5 .card .cat-link { display: block; text-decoration: none; color: inherit; }
body.p5 .card .card-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--p5-r-touch);
  background: var(--archive-paper-deep);
}
body.p5 .card .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--p5-ease); }
@media (hover: hover) { body.p5 .card:hover .card-img { transform: scale(1.03); } }
body.p5 .card .badge-seal { display: none; }
body.p5 .card .cat-sp {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 253, 247, .9);
  color: var(--archive-ink);
  font: 500 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
}
body.p5 .card .cat-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 9px 0 0;
}
body.p5 .card .cat-caption > .name-ar {
  flex: 0 0 100%;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
  margin: 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--archive-ink);
  white-space: normal;
}
html[dir='ltr'] body.p5 .card .cat-caption > .name-ar { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 14.5px; line-height: 1.35; }
body.p5 .card .cat-caption > .name-en { display: none; }
body.p5 .card .cat-caption > .cat-avail { margin: 0; font-size: 12.5px; color: var(--archive-ink-soft); }
body.p5 .card .cat-caption > .cat-avail::before { content: none; }
body.p5 .card .cat-caption > .cat-avail.out { color: var(--archive-clay-deep); }
body.p5 .card .cat-caption > .fulfill-chip { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; letter-spacing: 0; color: var(--archive-clay-deep); }
body.p5 .card .cat-caption > .cat-meta { flex: 0 0 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 0 0; }
body.p5 .card .cat-meta .cat-tier { font-size: 11.5px; color: var(--archive-ink-soft); letter-spacing: 0; }
body.p5 .card .cat-meta .cat-tier::before { content: none; }
body.p5 .card .cat-meta .cat-price { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--archive-ink); }
body.p5 .card .cat-add {
  position: absolute;
  inset-inline-end: 6px;
  bottom: auto;
  top: calc(125cqw - 50px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none;
  color: var(--archive-ink);
  box-shadow: none;
  font: 400 20px/1 'IBM Plex Mono', monospace;
  isolation: isolate;
  z-index: 2;
}
body.p5 .card .cat-add::before { content: ''; position: absolute; inset: 4px; z-index: -1; border: 0; border-radius: 50%; background: var(--archive-white); box-shadow: 0 2px 0 rgba(20, 33, 27, .08); }
body.p5 .card .cat-add.added { color: var(--archive-white); }
body.p5 .card .cat-add.added::before { background: var(--archive-moss); }
body.p5 .card.is-sold .card-img { opacity: .55; }

/* --- the two composition tiles the home grid draws (index.html only) --- */
body.p5 .p5-next {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 16px;
  border: 1px dashed var(--archive-line);
  border-radius: var(--p5-r-touch);
  color: var(--archive-ink-soft);
  font-size: 13px;
  text-align: center;
}
body.p5 .p5-next small { display: block; font-size: 12px; margin-top: 2px; }
body.p5 .p5-story {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-touch);
  box-shadow: 0 2px 0 rgba(20, 33, 27, .05);
  color: inherit;
  text-decoration: none;
}
body.p5 .p5-story blockquote { margin: 0; font-family: 'El Messiri', serif; font-size: 19px; line-height: 1.5; font-weight: 500; }
body.p5 .p5-story cite { font-style: normal; font-size: 12.5px; color: var(--archive-ink-soft); }
@media (min-width: 1024px) {
  body.p5 .p5-story { padding: 28px; }
  body.p5 .p5-story blockquote { font-size: 24px; }
}

/* ============================================================
   4 · ordering facts + care notebook + footer
   ============================================================ */
body.p5 .order-facts { width: 100%; max-width: 1360px; margin: 0 auto; padding: 36px var(--p5-pad) 0; }
body.p5 .order-facts::before { content: none; display: none; }
body.p5 .order-facts > .wrap { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; border-top: 1px solid var(--archive-line-soft); }
body.p5 .order-fact { padding: 14px 0; border-bottom: 1px solid var(--archive-line-soft); border-inline: 0; margin: 0; }
body.p5 .order-fact + .order-fact { border-inline-start: 0; padding-inline-start: 0; }
body.p5 .order-fact h3 { margin: 0; font-family: 'El Messiri', serif; font-size: 15px; font-weight: 600; }
body.p5 .order-fact p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--archive-ink-soft); }
@media (min-width: 768px) {
  body.p5 .order-facts > .wrap { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  body.p5 .order-fact { border-bottom: 0; }
}

body.p5 .care { padding: 52px var(--p5-pad) 0; background: transparent; color: var(--archive-ink); }
body.p5 .care::before { content: none; display: none; }
body.p5 .care > .wrap { max-width: 1360px; margin: 0 auto; padding: 0; }
body.p5 .care-head { margin: 0 0 14px; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
body.p5 .care-head h2 { margin: 0; font-family: 'El Messiri', serif; font-size: 24px; font-weight: 600; line-height: 1.12; }
body.p5 .care-head h2::after { content: none; }
body.p5 .care-head p { margin: 0; color: var(--archive-ink-soft); font-size: 14px; }
body.p5 .care-grid { display: grid; grid-template-columns: 1fr; gap: 12px; border: 0; }
body.p5 .care-card {
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-touch);
  box-shadow: 0 2px 0 rgba(20, 33, 27, .05);
  padding: 0 18px;
}
body.p5 .care-fold-h { margin: 0; }
body.p5 .care-fold {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border: 0;
  background: none;
  color: var(--archive-ink);
  font-family: 'El Messiri', serif;
  font-size: 17px;
  font-weight: 600;
  text-align: start;
}
body.p5 .care-fold[aria-expanded='true'] { border-bottom: 1px solid var(--archive-line-soft); font-weight: 600; }
body.p5 .care-body { padding: 12px 0 16px; }
body.p5 .care-art { display: none; }
body.p5 .care-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--archive-ink-soft); }
@media (min-width: 768px) {
  body.p5 .care { padding-top: 64px; }
  body.p5 .care-head h2 { font-size: 28px; }
  body.p5 .care-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  body.p5 .care { padding-top: 72px; }
  body.p5 .care-head h2 { font-size: 32px; }
  body.p5 .care-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  body.p5 .care-card { padding: 6px 24px; }
}

body.p5 .colophon {
  background: transparent;
  color: var(--archive-ink);
  padding: 48px var(--p5-pad) calc(24px + 96px + var(--p5-safe));
  border-top: 0;
}
body.p5 .colophon .wrap { max-width: 1360px; margin: 0 auto; padding: 0; }
body.p5 .col-head, body.p5 .col-cta, body.p5 .col-mark { display: none; }
body.p5 .col-tail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 18px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--archive-line-soft);
}
body.p5 .colophon .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
body.p5 .colophon .foot-links a { color: var(--archive-ink-soft); font-size: 12.5px; text-decoration: none; padding: 6px 0; }
body.p5 .colophon .foot-social { display: flex; gap: 8px; }
body.p5 .colophon .foot-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; color: var(--archive-ink); display: grid; place-items: center; background: none; isolation: isolate; }
body.p5 .colophon .foot-ic::before { content: ''; position: absolute; inset: 4px; z-index: -1; border: 1px solid var(--archive-line); border-radius: 50%; }
body.p5 .colophon .foot-ic svg { width: 16px; height: 16px; }
body.p5 .colophon .copy { flex-basis: 100%; font-size: 12.5px; color: var(--archive-ink-soft); }
@media (min-width: 1024px) {
  body.p5 .colophon { padding-bottom: 48px; }
  body.p5 .colophon .copy { flex-basis: auto; order: -1; }
}

/* ============================================================
   5 · sheets: bottom sheet under 1024, side drawer from 1024
   ============================================================ */
body.p5 .overlay {
  z-index: 115;
  background: rgba(20, 33, 27, .42);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
body.p5 .sheet {
  width: 100%;
  max-width: none;
  max-height: 88dvh;
  border: 0;
  border-radius: var(--p5-r-sheet) var(--p5-r-sheet) 0 0;
  background: var(--archive-paper);
  background-image: none;
  color: var(--archive-ink);
  transform: translateY(102%);
  transition: transform 300ms var(--p5-ease);
}
body.p5 .overlay.open .sheet { transform: none; }
body.p5 .sheet-close {
  position: absolute;
  top: 6px;
  inset-inline-end: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--archive-ink);
  font-size: 13px;
  line-height: 1;
  isolation: isolate;
}
body.p5 .sheet-close::before { content: ''; position: absolute; inset: 4px; z-index: -1; border: 1px solid var(--archive-line-soft); border-radius: 50%; background: var(--archive-white); }
body.p5 .sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--pw-fog, #d8d8ce); margin: 10px auto 0; }

/* cart */
body.p5 .cart-overlay { align-items: flex-end; justify-content: center; padding: 0; }
body.p5 .cart-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 88dvh;
  padding: 0;
  overflow: hidden;
  border-radius: var(--p5-r-sheet) var(--p5-r-sheet) 0 0;
  background: var(--archive-paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 -1px 0 var(--archive-line-soft);
}
body.p5 .cart-sheet::before { content: ''; display: block; flex: none; width: 36px; height: 4px; border-radius: 2px; background: var(--pw-fog, #d8d8ce); margin: 10px auto 0; }
body.p5 .cart-sheet > .sheet-close { top: 8px; }
body.p5 .cart-sheet-head { display: flex; align-items: baseline; gap: 10px; flex: none; padding: 8px 20px 6px; border: 0; background: none; }
body.p5 .cart-folio, body.p5 .cart-sheet-head p { display: none; }
body.p5 .cart-sheet-head h2 { margin: 0; color: var(--archive-ink); font-family: 'El Messiri', serif; font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: 0; }
html[dir='ltr'] body.p5 .cart-sheet-head h2 { font-family: 'El Messiri', serif; }
body.p5 .cart-sheet-head > div { display: block; }
body.p5 .cart-count-summary { margin-inline-start: 4px; font: 400 13px 'IBM Plex Sans Arabic', sans-serif; color: var(--archive-ink-soft); background: none; border: 0; padding: 0; }
body.p5 .cart-sheet-body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px calc(18px + var(--p5-safe)); }
body.p5 .cart-sheet .cart-list {
  margin: 6px 0 0;
  padding: 4px 14px;
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-touch);
  box-shadow: 0 2px 0 rgba(20, 33, 27, .05);
}
body.p5 .cart-sheet .cart-item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas: 'thumb info ctl' 'thumb info rm';
  align-items: center;
  gap: 2px 12px;
  padding: 12px 0;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--archive-line-soft);
}
body.p5 .cart-sheet .cart-item:last-child { border-bottom: 0; }
body.p5 .cart-item-index { display: none; }
body.p5 .cart-sheet .cart-thumb { grid-area: thumb; width: 60px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--archive-paper-deep); border: 0; }
body.p5 .cart-sheet .cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.p5 .cart-sheet .cart-info { grid-area: info; min-width: 0; }
body.p5 .cart-sheet .cart-info .code { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--archive-ink-soft); letter-spacing: .06em; }
body.p5 .cart-sheet .cart-info .n { font-size: 14.5px; font-weight: 600; color: var(--archive-ink); line-height: 1.35; }
body.p5 .cart-sheet .cart-info .p { margin-top: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 400; color: var(--archive-ink); }
body.p5 .cart-sheet .cart-info .fulfill-chip { display: inline-block; margin-top: 2px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12px; letter-spacing: 0; color: var(--archive-clay-deep); }
body.p5 .cart-sheet .cart-item .qty {
  grid-area: ctl;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0;
  border-radius: var(--p5-r-pill);
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
}
body.p5 .cart-sheet .qty button { position: relative; width: 44px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--archive-ink); font-size: 17px; }
body.p5 .cart-sheet .qty button::after { content: none; }
body.p5 .cart-sheet .qty button:disabled { color: var(--pw-fog, #d8d8ce); }
body.p5 .cart-sheet .qty .q { min-width: 26px; text-align: center; font: 400 13px 'IBM Plex Mono', monospace; }
body.p5 .cart-sheet .cart-remove {
  grid-area: rm;
  justify-self: end;
  align-self: start;
  width: auto;
  min-width: 44px;
  height: auto;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--archive-ink-soft);
  font-size: 12px;
  line-height: 1;
}
body.p5 .cart-sheet .cart-remove::after { content: none; }
body.p5 .cart-footer { padding-top: 6px; }
body.p5 .cart-sheet .cart-grand-total,
body.p5 .cart-sheet .cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 14px 0 12px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--archive-ink-soft);
  font-size: 13px;
  font-weight: 400;
}
body.p5 .cart-sheet .cart-grand-total .amount { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; color: var(--archive-ink); letter-spacing: 0; }
body.p5 .cart-sheet .checkout-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 56px;
  margin: 0;
  padding: 0 24px;
  border-radius: var(--p5-r-pill);
  background: var(--archive-ink);
  background-image: none;
  color: var(--archive-white);
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  text-decoration: none;
}
body.p5 .cart-sheet .checkout-btn:hover { transform: none; box-shadow: none; }
body.p5 .cart-sheet .checkout-btn:active { transform: scale(.985); }
body.p5 .cart-sheet .cart-whatsapp-alt { display: block; margin: 12px 0 0; padding: 0; text-align: center; font-size: 12px; color: var(--archive-ink-soft); text-decoration: underline; background: none; border: 0; }
body.p5 .cart-sheet .promo-row { display: flex; gap: 8px; margin: 16px 0 4px; }
body.p5 .cart-sheet .promo-row input { flex: 1; height: 44px; padding: 0 14px; border: 1px solid var(--archive-line-soft); border-radius: var(--p5-r-touch); background: var(--archive-white); color: var(--archive-ink); font-size: 16px; }
body.p5 .cart-sheet .promo-btn { height: 44px; padding: 0 16px; border: 1px solid var(--archive-line); border-radius: var(--p5-r-pill); background: var(--archive-white); color: var(--archive-ink); font-size: 13px; font-weight: 600; }
body.p5 .cart-sheet .promo-msg { min-height: 0; margin: 4px 0 0; padding: 0; font-size: 12px; }
body.p5 .cart-sheet .cart-note { margin-top: 12px; font-size: 12px; color: var(--archive-ink-soft); opacity: 1; text-align: center; }
body.p5 .cart-sheet .cart-empty { padding: 28px 0; text-align: center; color: var(--archive-ink-soft); opacity: 1; font-size: 14px; }
body.p5 .cart-sheet .cart-empty span { display: none; }
@media (min-width: 768px) {
  body.p5 .cart-overlay { justify-content: center; }
  body.p5 .cart-sheet { width: calc(100% - 128px); max-width: 640px; max-height: 80dvh; }
}
@media (min-width: 1024px) {
  body.p5 .cart-overlay { align-items: stretch; justify-content: flex-end; }
  body.p5 .cart-sheet {
    width: 440px;
    max-width: 440px;
    height: 100dvh;
    max-height: none;
    padding: 20px 28px calc(24px + var(--p5-safe));
    border-radius: 0;
    transform: translateX(calc(var(--p5-dirx) * 102%));
    box-shadow: -1px 0 0 var(--archive-line-soft);
  }
  body.p5 .cart-overlay.open .cart-sheet { transform: none; }
  body.p5 .cart-sheet::before { display: none; }
  body.p5 .cart-sheet-head { padding: 0 0 8px; }
  body.p5 .cart-sheet-head h2 { font-size: 28px; }
  body.p5 .cart-sheet > .sheet-close { top: 16px; inset-inline-end: 24px; }
  body.p5 .cart-sheet-body { padding: 0; display: flex; flex-direction: column; }
  body.p5 .cart-sheet .cart-list { flex: 0 1 auto; overflow-y: auto; }
  body.p5 .cart-footer { margin-top: auto; }
}

/* account + legacy product sheets share the sheet language */
body.p5 .account-sheet { padding-top: 6px; }
body.p5 .account-sheet-head { padding: 14px 20px 4px; }
body.p5 .account-name { font-family: 'El Messiri', serif; font-size: 24px; font-weight: 600; }
@media (min-width: 768px) {
  body.p5 .account-overlay, body.p5 .product-overlay, body.p5 #policyOverlay { align-items: center; padding: 30px; }
  body.p5 .account-overlay .sheet, body.p5 .product-overlay .sheet, body.p5 #policyOverlay .sheet { max-width: 520px; border-radius: var(--p5-r-sheet); transform: translateY(24px); }
  body.p5 .overlay.open .sheet { transform: none; }
}

/* ============================================================
   6 · dock (phone + tablet), toast
   ============================================================ */
body.p5 .tabbar {
  inset-inline: 16px;
  bottom: calc(12px + var(--p5-safe));
  height: 60px;
  padding: 0 6px;
  align-items: center;
  justify-content: space-around;
  border: 1px solid var(--archive-line-soft);
  border-radius: 18px;
  background: rgba(240, 236, 226, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 0 rgba(20, 33, 27, .06);
}
html.pwa body.p5 .tabbar { background: var(--archive-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.p5 .tabbar .tab { flex: 0 1 auto; min-height: 44px; padding: 4px 12px; border-radius: var(--p5-r-touch); gap: 3px; font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--archive-ink-soft); }
body.p5 .tabbar .tab svg { width: 22px; height: 22px; stroke-width: 1.7; }
body.p5 .tabbar .tab.active, body.p5 .tabbar .tab[aria-current] { color: var(--archive-ink); font-weight: 600; }
body.p5 .tabbar .tab.active svg, body.p5 .tabbar .tab[aria-current] svg { stroke-width: 2.1; }
body.p5 .tabbar .cart-badge { top: -2px; inset-inline-end: 4px; }
body.p5 .pw-toast { bottom: calc(86px + var(--p5-safe)); border-radius: var(--p5-r-touch); }
@media (min-width: 1024px) { body.p5 .pw-toast { bottom: 24px; } }

/* ============================================================
   7 · plant page — image leads, sheet, grouped facts, sticky purchase
   ============================================================ */
body.p5 .pdnav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--p5-hdr);
  padding: 0 var(--p5-pad);
  gap: 12px;
  background: rgba(240, 236, 226, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--archive-line-soft);
}
html.pwa body.p5 .pdnav { background: var(--archive-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.p5 .pdnav-mark { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 20px; color: var(--archive-clay-deep); text-decoration: none; }
body.p5 .pdnav-mark { white-space: nowrap; }
body.p5 .pdnav-mark span, body.p5 .pdnav-mark em { display: inline; font-style: normal; font-weight: 600; margin: 0; }
body.p5 .pdnav-mark span::after { content: ' '; }
/* the plant page carries its own purchase capsule; the dock would sit on top of it */
body.p5 main.pd ~ .tabbar { display: none; }
body.p5 .pdnav-name { font-family: 'El Messiri', serif; font-size: 15px; font-weight: 600; }
body.p5 .pdnav-back { position: relative; height: 44px; padding: 0 12px 0 8px; border-radius: var(--p5-r-pill); background: none; border: 0; font-size: 13px; text-decoration: none; color: var(--archive-ink); isolation: isolate; }
body.p5 .pdnav-back::before { content: ''; position: absolute; inset: 2px 0; top: 2px; left: 0; width: auto; height: auto; transform: none; z-index: -1; border-radius: var(--p5-r-pill); background: var(--archive-white); border: 1px solid var(--archive-line-soft); }
body.p5 .pdnav-lang { position: relative; height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: var(--p5-r-pill); background: none; color: var(--archive-ink); font-size: 12px; isolation: isolate; }
body.p5 .pdnav-lang::before { content: ''; position: absolute; inset: 6px 0; top: 6px; left: 0; width: auto; height: auto; transform: none; z-index: -1; border: 1px solid var(--archive-line); border-radius: var(--p5-r-pill); }
body.p5 .pdnav-cart { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
body.p5 .pdnav-cart svg { width: 20px; height: 20px; }

body.p5 .pd { padding: 0 0 calc(110px + var(--p5-safe)); }
body.p5 .pd-screen { display: block; max-width: none; }
body.p5 .pd-gal {
  position: relative;
  height: min(62dvh, 520px);
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--archive-paper-deep);
}
body.p5 .pd-gal-stage { position: absolute; inset: 0; }
body.p5 .pd-gal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.p5 .pd-stamp--sm {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, .92);
  color: var(--archive-clay-deep);
  font: 600 14px/1 'Cormorant Garamond', serif;
  box-shadow: 0 2px 0 rgba(20, 33, 27, .08);
}
body.p5 .pd-gal-bars { position: absolute; bottom: 36px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 6px; }
body.p5 .pd-gal-bars[hidden] { display: none; }
body.p5 .pd-gal-bar { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 253, 247, .55); }
body.p5 .pd-gal-bar::after { content: none; }
body.p5 .pd-gal-bar::before { content: ''; position: absolute; inset: -19px; }
body.p5 .pd-gal-bar.is-on { background: var(--archive-white); }
body.p5 .pd-gal-thumbs { display: none; }
body.p5 .pd-decide {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: -24px 0 0;
  padding: 14px var(--p5-pad) 0;
  border-radius: var(--p5-r-sheet) var(--p5-r-sheet) 0 0;
  background: var(--archive-paper);
}
body.p5 .pd-decide::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--pw-fog, #d8d8ce); margin: 0 auto 16px; }
body.p5 .pd-stamp-row { display: none; }
body.p5 .pd-eyebrow { order: 1; }
body.p5 .pd-name { order: 2; margin: 0; font-family: 'El Messiri', serif; font-size: 28px; font-weight: 600; line-height: 1.12; text-wrap: balance; }
body.p5 .pd-latin { order: 3; margin: 4px 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--archive-ink-soft); text-align: end; }
html[dir='ltr'] body.p5 .pd-latin { text-align: start; }
body.p5 .pd-money { order: 4; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-top: 16px; }
body.p5 .pd-priceline { margin: 0; }
body.p5 .pd-price { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; color: var(--archive-ink); }
body.p5 .pd-price-was { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--archive-ink-soft); text-decoration: line-through; margin-inline-start: 8px; }
body.p5 .pd-savings { order: 4; margin: 0; flex-basis: 100%; font-size: 12.5px; color: var(--archive-moss); }
body.p5 .pd-avail { margin: 0; font-size: 12.5px; color: var(--archive-ink-soft); text-align: end; }
body.p5 .pd-avail.is-exception { color: var(--archive-clay-deep); }
body.p5 .pd-avail.is-sold { color: var(--archive-clay-deep); }
body.p5 .pd-buy { order: 5; display: none; }
body.p5 .pd-facts {
  order: 6;
  display: block;
  margin-top: 16px;
  padding: 0 16px;
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-touch);
  box-shadow: 0 2px 0 rgba(20, 33, 27, .05);
}
body.p5 .pd-facts[hidden] { display: none; }
body.p5 .pd-fact { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--archive-line-soft); font-size: 14.5px; }
body.p5 .pd-fact + .pd-fact { border-inline-start: 0; padding-inline-start: 0; margin: 0; }
body.p5 .pd-fact:last-child { border-bottom: 0; }
body.p5 .pd-fact-l { flex: none; color: var(--archive-ink-soft); font-size: 14px; letter-spacing: 0; text-transform: none; }
body.p5 .pd-fact-v { text-align: end; color: var(--archive-ink); font-size: 14.5px; }
body.p5 .pd-fact-v.is-clay { color: var(--archive-clay-deep); }
body.p5 .pd-fact-v.is-mono { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
body.p5 .pd-desc { order: 7; margin: 18px 0 0; font-size: 15px; line-height: 1.75; color: var(--archive-ink); }
body.p5 .pd-folds { order: 8; display: flex; flex-direction: column; gap: 10px; margin-top: 22px; border: 0; }
body.p5 .pd-fold-h { margin: 0; }
body.p5 .pd-fold {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-touch);
  background: var(--archive-white);
  color: var(--archive-ink);
  font-family: 'El Messiri', serif;
  font-size: 17px;
  font-weight: 600;
  text-align: start;
  box-shadow: 0 2px 0 rgba(20, 33, 27, .05);
}
body.p5 .pd-fold[aria-expanded='true'] { border-radius: var(--p5-r-touch) var(--p5-r-touch) 0 0; border-bottom-color: transparent; box-shadow: none; }
body.p5 .pd-panel {
  margin-top: -10px;
  padding: 0 16px;
  background: var(--archive-white);
  border: 1px solid var(--archive-line-soft);
  border-top: 0;
  border-radius: 0 0 var(--p5-r-touch) var(--p5-r-touch);
}
body.p5 .pd-panel > * { padding-top: 4px; }
body.p5 .pd-rows { margin: 0; }
body.p5 .pd-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--archive-line-soft); font-size: 14px; }
body.p5 .pd-row:last-child { border-bottom: 0; }
body.p5 .pd-row dt { margin: 0; color: var(--archive-ink-soft); font-size: 13px; }
/* The value is a paragraph in this two-column composition, so it aligns to the
   logical start (right in Arabic, left in English). product.css's `text-align:
   end` was written for its old one-line row of short values. */
body.p5 .pd-row dd { margin: 0; line-height: 1.65; text-align: start; }
body.p5 .pd-panel-note { margin: 0; padding: 10px 0 12px; font-size: 12px; color: var(--archive-ink-soft); }
body.p5 .pd-save { order: 9; }
body.p5 .pd-related { margin: 36px 0 0; padding: 0 var(--p5-pad); }
body.p5 .pd-related-title { margin: 0 0 14px; font-family: 'El Messiri', serif; font-size: 22px; font-weight: 600; }
body.p5 .pd-related .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }

/* the sticky purchase capsule — always present under 1024 */
body.p5 .pd-buybar {
  position: fixed;
  z-index: 60;
  inset-inline: 16px;
  bottom: calc(14px + var(--p5-safe));
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}
body.p5 .pd-buybar::before { content: ''; position: absolute; inset: -70px -16px -20px; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--archive-paper) 55%, rgba(240, 236, 226, 0)); }
body.p5 .pd-buybar[hidden] { display: none; }
body.p5 .pd-buybar-price { display: none; }
body.p5 .pd-buybar-actions { display: flex; flex: 1; gap: 10px; }
body.p5 .pd-bar-btn { margin: 0; }
body.p5 .pd-bar-add,
body.p5 .pd-btn-add {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--p5-r-pill);
  background: var(--archive-ink);
  color: var(--archive-white);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition: background 180ms var(--p5-ease), transform 180ms var(--p5-ease);
}
body.p5 .pd-bar-add:active, body.p5 .pd-btn-add:active { transform: scale(.985); }
body.p5 .pd-bar-add.is-added, body.p5 .pd-btn-add.is-added { background: var(--archive-moss); }
body.p5 .pd-btn-label { white-space: nowrap; }
body.p5 .pd-btn-price { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgba(255, 253, 247, .8); font-weight: 400; white-space: nowrap; }
body.p5 .pd-bar-wa,
body.p5 .pd-btn-wa {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--archive-line);
  border-radius: 50%;
  background: var(--archive-white);
  color: var(--archive-ink);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}
body.p5 .pd-bar-sold, body.p5 .pd-btn-sold { flex: 1; display: grid; place-items: center; height: 56px; border-radius: var(--p5-r-pill); background: var(--archive-paper-deep); color: var(--archive-ink-soft); font-weight: 600; }
body.p5 .pd-only-lg { display: none; }
@media (min-width: 768px) {
  body.p5 .pd-gal { height: min(56dvh, 560px); margin: 16px var(--p5-pad) 0; border-radius: var(--p5-r-touch); }
  body.p5 .pd-decide { margin: 18px 0 0; padding: 0 var(--p5-pad); border-radius: 0; }
  body.p5 .pd-decide::before { display: none; }
  body.p5 .pd-name { font-size: 34px; }
  body.p5 .pd-buybar { inset-inline: auto; inset-inline-end: var(--p5-pad); width: min(440px, 60vw); }
  body.p5 .pd-related .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (min-width: 1024px) {
  body.p5 .pd { padding-bottom: 64px; }
  body.p5 .pd-screen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; max-width: 1360px; margin: 0 auto; padding: 28px var(--p5-pad) 0; }
  body.p5 .pd-gal { position: sticky; top: calc(var(--p5-hdr) + 24px); height: calc(100dvh - var(--p5-hdr) - 48px); max-height: 820px; margin: 0; border-radius: 18px; }
  body.p5 .pd-decide { margin: 0; padding: 0 24px 0 0; }
  html[dir='ltr'] body.p5 .pd-decide { padding: 0 0 0 24px; }
  body.p5 .pd-name { font-size: 44px; }
  body.p5 .pd-latin { font-size: 19px; }
  body.p5 .pd-money { margin-top: 20px; }
  body.p5 .pd-price { font-size: 28px; }
  body.p5 .pd-buy { display: flex; gap: 10px; margin: 18px 0 4px; max-width: 440px; }
  body.p5 .pd-btn-add { flex: 1 1 auto; min-width: 0; padding: 0 20px; }
  body.p5 .pd-btn-wa { width: auto; height: 56px; padding: 0 16px; border-radius: var(--p5-r-pill); font-size: 13.5px; white-space: nowrap; }
  body.p5 .pd-only-sm { display: none; }
  body.p5 .pd-only-lg { display: inline; }
  body.p5 .pd-buybar { display: none; }
  body.p5 .pd-desc { font-size: 16px; max-width: 52ch; }
  body.p5 .pd-related { max-width: 1360px; margin: 56px auto 0; }
  body.p5 .pd-related .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (min-width: 1440px) {
  body.p5 .pd-screen { gap: 72px; }
  body.p5 .pd-name { font-size: 48px; }
}

/* ============================================================
   8 · motion discipline
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.p5 .sheet, body.p5 .cart-sheet, body.p5 .card .card-img, body.p5 .pd-bar-add, body.p5 .pd-btn-add, body.p5 .hero .btn-primary, body.p5 .hero .btn-ghost { transition: none; }
}

/* ============================================================
   9.1 · homepage + discovery polish — layered after Phase 5
   One system, no new fonts, no tracking on Arabic, logical properties only.
   · masthead: the glass learns a scrolled state (one observer, no scroll
     listener), the wordmark gains a size, the icon discs answer hover, press
     and keyboard.
   · hero: the owner's eyebrow (site_content.hero_eyebrow) is drawn at last,
     the display measure tightens to three lines, the actions pair up.
   · collection: the shelf count becomes a mark, captions settle, the add
     control is a glass disc, cards lift by two pixels, the «next specimen»
     slot is a shelf tile rather than a wireframe.
   · rhythm: sections breathe on one scale; the care head aligns to start.
   ============================================================ */
/* -- masthead -- */
body.p5 .nav-sentinel { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
body.p5 header.nav {
  background: rgba(240, 236, 226, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 var(--archive-line-soft);
  transition: background 220ms var(--p5-ease), box-shadow 220ms var(--p5-ease);
}
body.p5 header.nav.is-scrolled {
  background: rgba(240, 236, 226, .9);
  box-shadow: inset 0 -1px 0 var(--archive-line), 0 1px 0 rgba(255, 253, 247, .55), 0 10px 30px -18px rgba(20, 33, 27, .28);
}
html.pwa body.p5 header.nav, html.pwa body.p5 header.nav.is-scrolled { background: var(--archive-paper); box-shadow: inset 0 -1px 0 var(--archive-line-soft); }
body.p5 .brand-wm { font-size: 22px; }
body.p5 .icon-toggle { transition: color 180ms var(--p5-ease); }
body.p5 .icon-toggle::before { border-radius: 50%; background: transparent; transition: background 180ms var(--p5-ease), transform 180ms var(--p5-ease); }
@media (hover: hover) { body.p5 .icon-toggle:hover::before { background: rgba(20, 33, 27, .06); } }
body.p5 .icon-toggle:active::before { background: rgba(20, 33, 27, .1); transform: translate(-50%, -50%) scale(.94); }
body.p5 .icon-toggle:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; border-radius: 50%; }
body.p5 .lang-toggle-desktop:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; border-radius: var(--p5-r-pill); }
@media (min-width: 1024px) {
  body.p5 nav.links a { transition: color 160ms var(--p5-ease), border-color 160ms var(--p5-ease); }
  body.p5 nav.links a:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 4px; border-radius: 4px; }
}

/* -- hero -- */
body.p5 .hero-eyebrow { margin: 0 0 10px; font-family: var(--archive-mono); font-size: 11px; }   /* the token, not the family: Arabic face first where Arabic may appear */
body.p5 .hero h1 { font-size: 36px; line-height: 1.08; }
body.p5 .hero p.sub { margin-top: 10px; }
body.p5 .hero-band { margin-top: 16px; box-shadow: inset 0 1px 0 rgba(255, 253, 247, .7); }
body.p5 .hero-actions { margin-top: 14px; gap: 10px; }
body.p5 .hero .btn-primary, body.p5 .hero .btn-ghost { height: 48px; flex: 1 1 100%; }
body.p5 .hero .btn-ghost { background: rgba(255, 253, 247, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--archive-line); }
body.p5 .hero .btn-primary:focus-visible, body.p5 .hero .btn-ghost:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; }
@media (hover: hover) {
  body.p5 .hero .btn-primary:hover { background: #0d1712; transform: translateY(-1px); }
  body.p5 .hero .btn-ghost:hover { border-color: var(--archive-ink); background: var(--archive-white); }
}
@media (min-width: 768px) {
  body.p5 .hero .btn-primary, body.p5 .hero .btn-ghost { height: 50px; flex: 0 0 auto; }
  body.p5 .hero-actions { margin-top: 18px; }
}
@media (min-width: 1024px) {
  body.p5 .hero { grid-template-columns: 1fr 1fr; gap: 56px; }   /* measured: 580px keeps the EN display on three lines at 1440 */
  body.p5 .hero h1 { font-size: 54px; }
  body.p5 .hero-eyebrow { margin-bottom: 14px; }
}
@media (min-width: 1440px) { body.p5 .hero h1 { font-size: 58px; } }

/* -- collection head + tiles -- */
body.p5 .shop { padding-top: 44px; }
body.p5 .section-head { align-items: center; gap: 12px; margin-bottom: 18px; }
body.p5 .section-meta { padding: 5px 10px; border: 1px solid var(--archive-line-soft); border-radius: var(--p5-r-pill); background: rgba(255, 253, 247, .72); color: var(--archive-ink-soft); }
body.p5 .p5-next {
  border: 1px solid var(--archive-line-soft);
  background: linear-gradient(180deg, rgba(255, 253, 247, .65), rgba(227, 221, 208, .55));
  color: var(--archive-ink-soft);
}
body.p5 .p5-next::before { content: 'SP · —'; display: block; margin-bottom: 8px; font: 500 10px/1 'IBM Plex Mono', monospace; letter-spacing: 0; color: var(--archive-clay-deep); }
body.p5 .p5-story { box-shadow: none; background: rgba(255, 253, 247, .82); }
@media (min-width: 768px)  { body.p5 .shop { padding-top: 56px; } }
@media (min-width: 1024px) { body.p5 .shop { padding-top: 80px; } }

/* -- cards -- */
body.p5 .card .card-media { box-shadow: 0 1px 0 rgba(20, 33, 27, .04); transition: transform 260ms var(--p5-ease), box-shadow 260ms var(--p5-ease); }
@media (hover: hover) {
  body.p5 .card:hover .card-media { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20, 33, 27, .35); }
  body.p5 .card:hover .card-img { transform: scale(1.02); }
}
body.p5 .card .cat-caption { padding-top: 10px; gap: 3px 8px; }
body.p5 .card .cat-caption > .name-ar { font-size: 15px; }
body.p5 .card .cat-meta .cat-price { font-size: 13.5px; }
body.p5 .card .cat-caption > .fulfill-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
body.p5 .card .cat-caption > .fulfill-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
body.p5 .card .cat-add::before {
  background: rgba(255, 253, 247, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(20, 33, 27, .08);
  box-shadow: 0 2px 6px -2px rgba(20, 33, 27, .28);
  transition: transform 180ms var(--p5-ease), background 180ms var(--p5-ease);
}
@media (hover: hover) { body.p5 .card .cat-add:hover::before { transform: scale(1.06); } }
body.p5 .card .cat-add:active::before { transform: scale(.94); }
body.p5 .card .cat-add.added::before { background: var(--archive-moss); border-color: transparent; }
body.p5 .cat-link:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 4px; border-radius: var(--p5-r-touch); }

/* -- rhythm -- */
body.p5 .order-facts { padding-top: 44px; }
body.p5 .care-head { align-items: flex-start; text-align: start; }

/* -- motion is optional -- */
@media (prefers-reduced-motion: reduce) {
  body.p5 header.nav, body.p5 .icon-toggle, body.p5 .icon-toggle::before, body.p5 nav.links a,
  body.p5 .card .card-media, body.p5 .card .cat-add::before { transition: none; }
  body.p5 .card:hover .card-media, body.p5 .card:hover .card-img, body.p5 .card .cat-add:hover::before,
  body.p5 .hero .btn-primary:hover, body.p5 .icon-toggle:active::before { transform: none; }
}

/* ============================================================
   9.2 · plant page — the decision row, facts at a glance, quiet folds
   Same language as 9.1: glass on the nav and the secondary action only,
   hairlines instead of cards, the Phase 5 radius scale, no new fonts, no
   tracking on Arabic, logical properties only. The engine is untouched: every
   id, class and state it sets (is-added · is-sold · is-exception · is-condensed)
   is read here, never rewritten.
   ============================================================ */
/* -- product nav: the masthead's material and scrolled state, one wordmark line -- */
body.p5 .pdnav {
  background: rgba(240, 236, 226, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 var(--archive-line-soft);
  transition: background 220ms var(--p5-ease), box-shadow 220ms var(--p5-ease);
}
body.p5 .pdnav.is-scrolled, body.p5 .pdnav.is-condensed {
  background: rgba(240, 236, 226, .9);
  box-shadow: inset 0 -1px 0 var(--archive-line), 0 1px 0 rgba(255, 253, 247, .55), 0 10px 30px -18px rgba(20, 33, 27, .28);
}
html.pwa body.p5 .pdnav, html.pwa body.p5 .pdnav.is-scrolled { background: var(--archive-paper); box-shadow: inset 0 -1px 0 var(--archive-line-soft); }
body.p5 .pdnav-mark { display: inline-flex; flex-direction: row; align-items: center; gap: .28em; flex: 0 0 auto; width: auto; max-width: none; font-size: 22px; white-space: nowrap; }
@media (min-width: 1041px) { body.p5 .pdnav-mark { flex-direction: row; align-items: center; gap: .28em; font-size: 22px; } }
body.p5 .pdnav-mark span::after { content: none; }
body.p5 .pdnav-back { transition: background 180ms var(--p5-ease); }
body.p5 .pdnav-back:focus-visible, body.p5 .pdnav-lang:focus-visible, body.p5 .pdnav-cart:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
body.p5 .pdnav-cart::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: transparent; transition: background 180ms var(--p5-ease); }
@media (hover: hover) { body.p5 .pdnav-cart:hover::before { background: rgba(20, 33, 27, .06); } }

/* -- imagery: the Phase 5 radius, a soft foot under the phone plate -- */
body.p5 .pd-gal::after { content: ''; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(to top, rgba(20, 33, 27, .18), rgba(20, 33, 27, 0)); pointer-events: none; }
@media (min-width: 768px) { body.p5 .pd-gal::after { content: none; } }
@media (min-width: 1024px) { body.p5 .pd-gal { border-radius: var(--p5-r-touch); } }

/* -- the decision row: price, then a legible availability line with a state dot -- */
body.p5 .pd-money {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--archive-line-soft);
}
body.p5 .pd-price { font-size: 26px; }
body.p5 .pd-savings { order: 0; }
body.p5 .pd-avail {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--archive-ink);
  text-align: start;
}
body.p5 .pd-avail::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--archive-moss); transform: translateY(-1px); }
body.p5 .pd-avail.is-exception { color: var(--archive-ink); }
body.p5 .pd-avail.is-exception::before { background: var(--archive-clay); }
body.p5 .pd-avail.is-sold { color: var(--archive-clay-deep); }
body.p5 .pd-avail.is-sold::before { background: var(--archive-clay-deep); }

/* -- facts at a glance: three small label-over-value stacks, no card -- */
body.p5 .pd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 16px;
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--archive-line-soft);
  border-radius: 0;
  box-shadow: none;
}
body.p5 .pd-fact { flex: 0 1 auto; flex-direction: column; gap: 3px; padding: 0; border: 0; }
body.p5 .pd-fact-l { font-family: var(--archive-mono); font-size: 10.5px; color: var(--archive-clay-deep); }
html[dir='ltr'] body.p5 .pd-fact-l { text-transform: uppercase; }
body.p5 .pd-fact-v { text-align: start; font-size: 14.5px; }
body.p5 .pd-fact-v.is-mono { font-size: 12.5px; color: var(--archive-ink-soft); }
body.p5 .pd-desc { margin-top: 20px; }

/* -- the folds: hairline rows, no stacked cards; the panel is an editorial list -- */
body.p5 .pd-folds { gap: 0; margin-top: 24px; border-top: 1px solid var(--archive-line-soft); }
body.p5 .pd-fold {
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--archive-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16.5px;
  transition: color 160ms var(--p5-ease);
}
body.p5 .pd-fold[aria-expanded='true'] { border-radius: 0; border-bottom-color: transparent; box-shadow: none; }
body.p5 .pd-fold:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { body.p5 .pd-fold:hover { color: var(--archive-clay-deep); } }
body.p5 .pd-fold-sign { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--archive-line); color: var(--archive-clay-deep); font-size: 15px; }
body.p5 .pd-panel { margin: 0; padding: 0 0 6px; background: transparent; border: 0; border-bottom: 1px solid var(--archive-line-soft); border-radius: 0; }
body.p5 .pd-panel > * { padding-top: 0; }
body.p5 .pd-row { grid-template-columns: 108px minmax(0, 1fr); padding: 10px 0; border-bottom: 1px dashed var(--archive-line-soft); }
body.p5 .pd-row:last-child { border-bottom: 0; }
body.p5 .pd-row dt { font-family: var(--archive-mono); font-size: 10.5px; color: var(--archive-clay-deep); padding-top: 3px; }
html[dir='ltr'] body.p5 .pd-row dt { text-transform: uppercase; }
body.p5 .pd-row dd { font-size: 14.5px; }
body.p5 .pd-save { margin-top: 14px; }

/* -- the purchase action: unmistakable, and its answer visible on the button itself -- */
body.p5 .pd-btn-add, body.p5 .pd-bar-add { box-shadow: 0 10px 24px -14px rgba(20, 33, 27, .45); }
body.p5 .pd-btn-add:focus-visible, body.p5 .pd-bar-add:focus-visible, body.p5 .pd-btn-wa:focus-visible, body.p5 .pd-bar-wa:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; }
@media (hover: hover) {
  body.p5 .pd-btn-add:hover, body.p5 .pd-bar-add:hover { background: #0d1712; transform: translateY(-1px); }
  body.p5 .pd-btn-wa:hover, body.p5 .pd-bar-wa:hover { border-color: var(--archive-ink); background: var(--archive-white); }
}
body.p5 .pd-btn-add.is-added, body.p5 .pd-bar-add.is-added { background: var(--archive-moss); box-shadow: none; }
body.p5 .pd-btn-price { color: rgba(255, 253, 247, .88); }
body.p5 .pd-btn-wa, body.p5 .pd-bar-wa {
  background: rgba(255, 253, 247, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 160ms var(--p5-ease), background 160ms var(--p5-ease);
}
/* phone: the secondary is a labelled pill beside the primary, not a 56px disc */
body.p5 .pd-bar-wa { width: auto; padding: 0 16px; border-radius: var(--p5-r-pill); font-size: 13px; white-space: nowrap; }
/* a short foot: the bar softens its own edge, it must not veil the price sitting above it at first paint */
body.p5 .pd-buybar::before { inset: -34px -16px -20px; background: linear-gradient(to top, var(--archive-paper) 40%, rgba(240, 236, 226, 0)); }

/* -- related: honest at any count — cards never stretch to fill four tracks -- */
@media (min-width: 1024px) { body.p5 .pd-related .cat-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); } }

/* -- motion is optional -- */
@media (prefers-reduced-motion: reduce) {
  body.p5 .pdnav, body.p5 .pdnav-back, body.p5 .pdnav-cart::before, body.p5 .pd-fold, body.p5 .pd-btn-wa, body.p5 .pd-bar-wa { transition: none; }
  body.p5 .pd-btn-add:hover, body.p5 .pd-bar-add:hover { transform: none; }
}

/* ============================================================
   9.3 · cart: a purchase surface, not a utility panel
   Rows on hairlines instead of a boxed list; the name and the price are the
   ink; remove is a word, not a 12px glyph; the total block is decisive and
   the one action carries the 9.2 button material. The toast steps aside while
   the sheet is open. Cart data and renderCart() are untouched: this layer
   styles the markup the engine already emits.
   ============================================================ */
body.p5 .cart-sheet .cart-list { margin: 4px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
body.p5 .cart-sheet .cart-item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--archive-line-soft); }
body.p5 .cart-sheet .cart-item:last-child { border-bottom: 1px solid var(--archive-line-soft); }
body.p5 .cart-sheet .cart-thumb { width: 64px; height: 76px; border-radius: 10px; }
body.p5 .cart-sheet .cart-info .code { font-family: var(--archive-mono); font-size: 10.5px; color: var(--archive-clay-deep); }
body.p5 .cart-sheet .cart-info .n { font-size: 15px; line-height: 1.3; }
body.p5 .cart-sheet .cart-info .p { margin-top: 5px; font-size: 13.5px; font-weight: 500; }
body.p5 .cart-sheet .cart-info .fulfill-chip { margin-top: 3px; font-size: 12px; }
body.p5 .cart-sheet .cart-item .qty { height: 40px; background: var(--archive-white); border-color: var(--archive-line); }
body.p5 .cart-sheet .qty button { width: 40px; height: 38px; font-size: 16px; transition: background 160ms var(--p5-ease); }
@media (hover: hover) { body.p5 .cart-sheet .qty button:not(:disabled):hover { background: rgba(20, 33, 27, .06); } }
body.p5 .cart-sheet .qty button:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: -3px; }
body.p5 .cart-sheet .qty .q { min-width: 24px; font-size: 13.5px; }
/* the remove control speaks: its accessible name is drawn as the label, the glyph steps back */
body.p5 .cart-sheet .cart-remove { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 44px; min-height: 36px; padding: 6px 2px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 0; color: var(--archive-ink-soft); white-space: nowrap; overflow-wrap: normal; word-break: normal; }
body.p5 .cart-sheet .cart-remove::after { content: attr(aria-label); position: static; inset: auto; font-size: 12px; line-height: 1; white-space: nowrap; overflow-wrap: normal; word-break: normal; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20, 33, 27, .3); }
body.p5 .cart-sheet .cart-remove:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { body.p5 .cart-sheet .cart-remove:hover { color: var(--archive-clay-deep); } body.p5 .cart-sheet .cart-remove:hover::after { text-decoration-color: currentColor; } }
/* the decision block */
body.p5 .cart-footer { padding-top: 4px; }
body.p5 .cart-sheet .cart-grand-total, body.p5 .cart-sheet .cart-total { padding: 16px 0 14px; color: var(--archive-ink-soft); font-size: 13px; }
body.p5 .cart-sheet .cart-grand-total .amount { font-size: 24px; letter-spacing: 0; }
body.p5 .cart-sheet .checkout-btn { box-shadow: 0 10px 24px -14px rgba(20, 33, 27, .55); transition: background 180ms var(--p5-ease), transform 180ms var(--p5-ease), box-shadow 180ms var(--p5-ease); }
@media (hover: hover) { body.p5 .cart-sheet .checkout-btn:hover { background: #0d1712; transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(20, 33, 27, .6); } }
body.p5 .cart-sheet .checkout-btn:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; }
body.p5 .cart-sheet .cart-whatsapp-alt { margin-top: 14px; font-size: 12.5px; text-underline-offset: 3px; text-decoration-color: rgba(20, 33, 27, .3); }
body.p5 .cart-sheet .promo-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--archive-line-soft); }
body.p5 .cart-sheet .promo-row input { background: var(--archive-white); font-family: var(--archive-mono); font-size: 16px; }
body.p5 .cart-sheet .promo-row input::placeholder { font-family: 'IBM Plex Sans Arabic', sans-serif; text-transform: none; color: rgba(20, 33, 27, .42); }
body.p5 .cart-sheet .promo-row input:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
body.p5 .cart-sheet .promo-btn:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
body.p5 .cart-sheet .promo-msg { font-size: 12.5px; }
body.p5 .cart-sheet .promo-msg.ok { color: var(--archive-moss); }
body.p5 .cart-sheet .cart-note { margin-top: 14px; font-size: 12px; line-height: 1.6; }
body.p5 .cart-sheet .cart-empty { padding: 44px 12px 36px; font-size: 15px; line-height: 1.7; color: var(--archive-ink); }
/* the confirmation toast yields to the open sheet — it was covering the total */
body.p5 .cart-overlay.open ~ .pw-toast { opacity: 0; pointer-events: none; }
@media (min-width: 1024px) {
  body.p5 .cart-sheet .cart-list { margin-top: 0; }
  body.p5 .cart-footer { margin-top: auto; padding-top: 0; }
  body.p5 .cart-sheet .cart-grand-total { padding-top: 18px; border-top: 1px solid var(--archive-line); }
}
@media (prefers-reduced-motion: reduce) {
  body.p5 .cart-sheet .checkout-btn, body.p5 .cart-sheet .qty button { transition: none; }
  body.p5 .cart-sheet .checkout-btn:hover { transform: none; }
}

/* ============================================================
   9.4 · consistency: one header height on the phone, secondary links reachable
   ============================================================ */
/* the base gave the home masthead a 66px floor; every other surface stands at --p5-hdr */
body.p5 .nav-inner { min-height: var(--p5-hdr); }
/* the hairline is already drawn as an inset shadow (9.1); the transparent 1px border only added a pixel of height over every other surface */
body.p5 header.nav { border-bottom: 0; }
/* the WhatsApp alternative under the cart action is a real control: give it a 36px row */
body.p5 .cart-sheet .cart-whatsapp-alt { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; margin-top: 10px; }
body.p5 .cart-sheet .cart-whatsapp-alt:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   A1 · product discovery — search, filters, sort
   Phase 9 material: paper ground, one white surface per control, hairlines,
   the pill radius, the clay focus ring. No new palette, no new family, and
   nothing glassy except the sheet the rest of the storefront already uses.
   ============================================================ */
body.p5 .disco { margin: 4px 0 18px; }
body.p5 .disco[hidden] { display: none; }
body.p5 .disco-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }

/* the field: one hairline box, the glyph inside it, a clear control that only
   exists while there is something to clear */
body.p5 .disco-search {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-pill);
  background: var(--archive-white);
  transition: border-color 160ms var(--p5-ease), box-shadow 160ms var(--p5-ease);
}
body.p5 .disco-search:focus-within { border-color: var(--archive-ink); box-shadow: 0 0 0 1px var(--archive-ink); }
body.p5 .disco-search > svg { flex: none; width: 17px; height: 17px; color: var(--archive-ink-soft); }
body.p5 .disco-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--archive-ink);
  font: inherit;
  font-size: 16px;               /* iOS: never zoom on focus */
  outline: none;
}
body.p5 .disco-search input::placeholder { color: rgba(20, 33, 27, .42); }
body.p5 .disco-search input::-webkit-search-cancel-button { display: none; }
body.p5 .disco-x {
  position: relative;               /* the reach below is measured from the button, not from the field */
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  margin-inline-end: -6px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--archive-ink-soft);
  font-size: 12px; line-height: 1;
}
/* `display: grid` above outranks the UA's [hidden] rule, so it is restated here:
   without it the button keeps its box AND its hit area while hidden, and the
   overlay swallows every tap meant for the field behind it. */
body.p5 .disco-x[hidden] { display: none; }
body.p5 .disco-x::before { content: ''; position: absolute; inset: -6px; }   /* 44px reach, drawn size unchanged */
body.p5 .disco-x:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
@media (hover: hover) { body.p5 .disco-x:hover { color: var(--archive-ink); } }

/* filters button + sort: the same pill, so neither outranks the other */
body.p5 .disco-btn,
body.p5 .disco-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--archive-line);
  border-radius: var(--p5-r-pill);
  background: var(--archive-white);
  color: var(--archive-ink);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
body.p5 .disco-btn[hidden] { display: none; }
body.p5 .disco-btn > svg, body.p5 .disco-sort > svg { flex: none; width: 16px; height: 16px; color: var(--archive-ink-soft); }
body.p5 .disco-btn:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
body.p5 .disco-sort:focus-within { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
@media (hover: hover) {
  body.p5 .disco-btn:hover, body.p5 .disco-sort:hover { border-color: var(--archive-ink); }
}
/* the count rides the button, in the mono token (Arabic-first) */
body.p5 .disco-badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--p5-r-pill);
  background: var(--archive-ink);
  color: var(--archive-white);
  font-family: var(--archive-mono);
  font-size: 11px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body.p5 .disco-badge[hidden] { display: none; }
/* a real <select>: the OS picker on a phone, full keyboard support, no JS menu */
body.p5 .disco-sort { padding-inline-end: 12px; }
body.p5 .disco-sort select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none;
  color: inherit; font: inherit; font-weight: 600;
  padding: 0; margin: 0;
  outline: none;
  max-width: 42vw;
  text-overflow: ellipsis;
}
@media (min-width: 768px) { body.p5 .disco-sort select { max-width: none; } }

/* active filters: one chip each, each removable, clear-all only when it saves a tap */
body.p5 .disco-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.p5 .disco-active[hidden] { display: none; }
body.p5 .disco-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-pill);
  background: var(--archive-paper-deep, #e3ddd0);
  color: var(--archive-ink);
  font-size: 12.5px;
  max-width: 100%;
}
body.p5 .disco-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.p5 .disco-chip-x { flex: none; font-size: 10px; color: var(--archive-ink-soft); }
body.p5 .disco-chip:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
@media (hover: hover) { body.p5 .disco-chip:hover { border-color: var(--archive-ink); } }
body.p5 .disco-chip--clear { background: none; font-weight: 600; }

/* nothing matched: the recovery is on the screen, not in the customer's memory */
body.p5 .disco-none { grid-column: 1 / -1; padding: 40px 8px; text-align: center; }
body.p5 .disco-none-t { margin: 0; font-family: 'El Messiri', serif; font-size: 19px; font-weight: 600; color: var(--archive-ink); }
body.p5 .disco-none-p { margin: 8px auto 0; max-width: 42ch; font-size: 13.5px; line-height: 1.7; color: var(--archive-ink-soft); }
body.p5 .disco-none-btn {
  margin-top: 16px; min-height: 44px; padding: 0 22px;
  border: 1px solid var(--archive-line); border-radius: var(--p5-r-pill);
  background: var(--archive-white); color: var(--archive-ink);
  font-size: 13.5px; font-weight: 600;
}
body.p5 .disco-none-btn:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
@media (hover: hover) { body.p5 .disco-none-btn:hover { border-color: var(--archive-ink); } }

/* the sheet: the cart's material and geometry, its own content */
body.p5 .disco-sheet .sheet-body { padding: 4px 20px calc(20px + var(--p5-safe)); }
body.p5 .disco-sheet h2 { margin: 0 0 4px; font-family: 'El Messiri', serif; font-size: 22px; font-weight: 600; }
body.p5 .disco-group { padding: 16px 0; border-bottom: 1px solid var(--archive-line-soft); }
body.p5 .disco-group:last-of-type { border-bottom: 0; }
body.p5 .disco-group h3 {
  margin: 0 0 10px;
  font-family: var(--archive-mono);
  font-size: 10.5px; font-weight: 500;
  color: var(--archive-clay-deep);
}
html[dir='ltr'] body.p5 .disco-group h3 { text-transform: uppercase; }
body.p5 .disco-opts { display: flex; flex-wrap: wrap; gap: 8px; }
body.p5 .disco-opt {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--archive-line-soft);
  border-radius: var(--p5-r-pill);
  background: var(--archive-white);
  color: var(--archive-ink-soft);
  font-size: 13.5px;
  transition: background 160ms var(--p5-ease), color 160ms var(--p5-ease), border-color 160ms var(--p5-ease);
}
/* selected is weight + ink fill, never colour alone */
body.p5 .disco-opt[aria-checked='true'] {
  background: var(--archive-ink);
  border-color: var(--archive-ink);
  color: var(--archive-white);
  font-weight: 600;
}
body.p5 .disco-opt:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
@media (hover: hover) { body.p5 .disco-opt:not([aria-checked='true']):hover { border-color: var(--archive-ink); color: var(--archive-ink); } }
body.p5 .disco-sheet-acts { display: flex; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--archive-line-soft); }
body.p5 .disco-clear {
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--archive-line); border-radius: var(--p5-r-pill);
  background: var(--archive-white); color: var(--archive-ink);
  font-size: 13.5px; font-weight: 600;
}
body.p5 .disco-done {
  flex: 1;
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--p5-r-pill);
  background: var(--archive-ink); color: var(--archive-white);
  font-size: 14.5px; font-weight: 600;
}
body.p5 .disco-clear:focus-visible, body.p5 .disco-done:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; }
@media (hover: hover) {
  body.p5 .disco-clear:hover { border-color: var(--archive-ink); }
  body.p5 .disco-done:hover { background: #0d1712; }
}

/* 768+: the three controls settle onto one line and the field stops spanning */
@media (min-width: 768px) {
  body.p5 .disco-bar { grid-template-columns: minmax(0, 1fr) auto auto; }
  body.p5 .disco-search { grid-column: auto; max-width: 420px; }
  body.p5 .disco { margin-bottom: 22px; }
}
@media (min-width: 1024px) {
  body.p5 .disco-overlay { align-items: center; justify-content: center; padding: 30px; }
  body.p5 .disco-sheet { width: 100%; max-width: 520px; height: auto; max-height: 80dvh; border-radius: var(--p5-r-sheet); transform: translateY(24px); }
  body.p5 .disco-overlay.open .disco-sheet { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.p5 .disco-search, body.p5 .disco-opt { transition: none; }
}

/* ============================================================
   A2 · favorites — the saved control on the card
   Same disc material as the card's add control, on the opposite corner of the
   plate. Saved is a filled heart, unsaved an outline: a shape difference, so
   the state survives without colour. aria-pressed carries it to a reader.
   ============================================================ */
body.p5 .card { position: relative; }
body.p5 .cat-fav {
  position: absolute;
  inset-inline-end: 6px;
  top: 6px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--archive-ink);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
/* the drawn disc is 36px inside the 44px target — the same trick .cat-add uses */
body.p5 .cat-fav::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 253, 247, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 0 rgba(20, 33, 27, .08);
  transition: background 160ms var(--p5-ease);
}
body.p5 .cat-fav svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 160ms var(--p5-ease), stroke 160ms var(--p5-ease), transform 160ms var(--p5-ease);
}
body.p5 .cat-fav[aria-pressed='true'] { color: var(--archive-clay-deep); }
body.p5 .cat-fav[aria-pressed='true'] svg { fill: currentColor; stroke: currentColor; }
body.p5 .cat-fav:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: -2px; }
body.p5 .cat-fav:active svg { transform: scale(.9); }
@media (hover: hover) {
  body.p5 .cat-fav:hover::before { background: var(--archive-white); }
  body.p5 .cat-fav:hover svg { stroke: var(--archive-clay-deep); }
}
/* on the hero variant the control is part of the action row, not an overlay */
body.p5 .cat-fav.fs-fav { position: static; inset: auto; }
/* the saved view's own card is a link now; its heart stays a button on top */
body.p5 .account-fav-item { display: block; text-decoration: none; color: inherit; }
body.p5 .account-fav-heart { z-index: 2; }
body.p5 .account-fav-item:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; border-radius: var(--p5-r-touch); }
/* the plant page's save line: a quiet secondary, never a third button */
body.p5 .pd-save:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; border-radius: var(--p5-r-pill); }
@media (prefers-reduced-motion: reduce) {
  body.p5 .cat-fav::before, body.p5 .cat-fav svg { transition: none; }
  body.p5 .cat-fav:active svg { transform: none; }
}

/* ============================================================
   A3 · share a plant — the second quiet secondary
   Same register as the save line: a text control past the fold, not a third
   button competing with the purchase pair. The two sit on one row and wrap
   to two on a narrow phone rather than shrinking below the touch floor.
   ============================================================ */
body.p5 .pd-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  order: 9;                 /* the slot .pd-save used to hold on its own */
  margin-top: 14px;
}
/* the row owns the spacing now, so the child drops its own */
body.p5 .pd-secondary .pd-save { order: 0; margin-top: 0; }
body.p5 .pd-share {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--archive-ink-soft);
  font: inherit;
  font-size: 14px;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 33, 27, .28);
  cursor: pointer;
  transition: color 160ms var(--p5-ease), text-decoration-color 160ms var(--p5-ease);
}
body.p5 .pd-share[hidden] { display: none; }
body.p5 .pd-share:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; border-radius: var(--p5-r-pill); }
@media (hover: hover) {
  body.p5 .pd-share:hover { color: var(--archive-ink); text-decoration-color: currentColor; }
}
@media (min-width: 1024px) { body.p5 .pd-share { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { body.p5 .pd-share { transition: none; } }

/* ============================================================
   A4 · saved plants as a destination
   The saved list already lives in the account sheet; A4 gives it a landing
   (the heading takes focus when /#saved or the save toast opens it) and a
   way forward from empty. The way forward is a text link in the sheet's own
   register — not a button, not a card — with a phone-sized target.
   ============================================================ */
body.p5 .account-empty-note { display: grid; gap: 6px; justify-items: start; }
body.p5 .account-empty-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--archive-clay-deep);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
@media (hover: hover) { body.p5 .account-empty-cta:hover { color: var(--archive-ink); } }
body.p5 .account-empty-cta:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; border-radius: var(--p5-r-pill); }
/* the landing point: the section caption, focusable only when it is the destination */
body.p5 .account-saved-cap:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 4px; }
/* Desktop: Phase 5 caps this sheet at 520px (§5) but identity-v2 still lays it
   out as its old 980px two-column drawer above 760px, so the rows and the saved
   grid were squeezed into the ~130px right column. Inside the modal the sheet
   is one column: head, then a scrolling body — the same shape as on the phone. */
@media (min-width: 761px) {
  body.p5 .account-sheet { display: flex; flex-direction: column; height: auto; max-height: 88dvh; }
  body.p5 .account-sheet-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 28px calc(28px + var(--p5-safe)); }
  body.p5 .account-fav-grid { gap: 20px 16px; }
}
/* the list's loading / failure notes share the empty note's register; the retry
   is the same text link, as a button */
body.p5 .account-retry { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }