/* ===========================================================================
   SALAF STATIONERY - SAGE & SKETCH
   ---------------------------------------------------------------------------
   A sage green and beige stationery shop, drawn by hand.

   The whole surface is warm paper. Green does the talking. Everything that is
   not a photograph is a doodle: wobbly outline, rounded ends, no fill.
   Type is round and friendly, never stiff.

   No faces, no people, no hands anywhere. Objects and plants only.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Sage, sampled straight from the logo: #3E3C25 is the ink of the ring and
     the brushwork, #ABA980 is the colour of the little sprigs. The rest of
     the ramp is built around those two. */
  --sage-900: #2A2917;
  --sage-800: #3E3C25;
  --sage-700: #55533A;
  --sage-600: #6B6A4B;
  --sage-500: #8A8862;
  --sage-400: #ABA980;
  --sage-300: #C2C09D;
  --sage-200: #D6D4BB;
  --sage-100: #E8E6D5;

  /* Beige: #EBDECB is the logo ground, kept as the 200 so the page sits a
     shade lighter than the mark and the mark never looks pasted on. */
  --beige-50:  #FAF6ED;
  --beige-100: #F3EBDB;
  --beige-200: #EBDECB;
  --beige-300: #DCCDB4;
  --beige-400: #C9B795;

  /* clay, used sparingly for the one thing that must be noticed */
  /* clay, warmed to sit with the olive rather than fight it */
  --clay-600: #A86A45;
  --clay-500: #C58257;
  --clay-300: #E2B291;

  /* semantic */
  --bg: var(--beige-50);
  --bg-soft: var(--beige-100);
  --bg-raised: #FFFFFF;
  --fg: #3E3C25;
  --fg-dim: #5F5C42;
  --fg-faint: #68654E;
  --line: #DDD2BA;
  --line-strong: #C4B698;
  --accent: var(--sage-700);
  --accent-soft: var(--sage-500);
  --pop: var(--clay-500);

  /* type */
  --font-display: 'Shantell Sans', 'Comic Sans MS', cursive;
  --font-body: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
  --font-ar: 'Noto Naskh Arabic', 'Traditional Arabic', serif;

  /* scale */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(0.96rem, 0.93rem + 0.14vw, 1.04rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.32vw, 1.34rem);
  --step-2:  clamp(1.42rem, 1.27rem + 0.68vw, 1.9rem);
  --step-3:  clamp(1.82rem, 1.5rem + 1.35vw, 2.7rem);
  --step-4:  clamp(2rem, 1.58rem + 1.8vw, 3.05rem);
  --step-5:  clamp(2.3rem, 1.72rem + 2.35vw, 3.65rem);

  /* space */
  --gutter: clamp(1rem, 0.72rem + 1.5vw, 2.25rem);
  --section: clamp(2rem, 4vw, 3rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --panel-padding: clamp(1rem, 2vw, 1.5rem);
  --pencil-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 12c26-6 56-8 84-6 24 2 44 5 64 9'/%3E%3Cpath d='M18 18c24-4 50-6 76-5'/%3E%3C/svg%3E");
  --max: 1440px;

  /* shape: nothing here is a plain rectangle */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t: 360ms;
  --t-slow: 780ms;
}

/* a deep green band, used two or three times a page for contrast */
.on-green {
  --bg: var(--sage-700);
  --bg-soft: var(--sage-800);
  --bg-raised: var(--sage-600);
  --fg: var(--beige-50);
  --fg-dim: #DAD7C2;
  --fg-faint: #BFBCA3;
  --line: rgba(253, 250, 243, 0.3);
  --line-strong: rgba(253, 250, 243, 0.52);
  --accent: var(--beige-100);
  --accent-soft: var(--sage-200);
  --pop: var(--clay-300);
  background: var(--bg);
  color: var(--fg);
}

/* the most common band: a shade warmer than the page */
.on-soft { --bg: var(--beige-100); background: var(--bg); }

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { overflow-x: clip; }

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
input, select { font: inherit; color: inherit; }

::selection { background: var(--sage-300); color: var(--sage-900); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* the filter sheet the doodles reference; never takes up space */
#doodle-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------- doodles -- */
.doodle { width: 100%; height: auto; overflow: visible; }
.doodle--mark { width: auto; height: 1em; }

/* The wobble. Three turbulence seeds swapped on a slow step timer give the
   boil of hand-drawn animation, which is most of this site's personality. */
.js .doodle { filter: url(#wobble1); }
.js .boil .doodle, .js .doodle.boil { animation: boil 0.54s steps(1, end) infinite; }
@keyframes boil {
  0%   { filter: url(#wobble1); }
  33%  { filter: url(#wobble2); }
  66%  { filter: url(#wobble3); }
}

/* --------------------------------------------------------------- typography */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display--xl { font-size: var(--step-5); }
.display--l  { font-size: var(--step-4); }
.display--m  { font-size: var(--step-3); }
.display--s  { font-size: var(--step-2); }

.hand { font-family: var(--font-hand); font-size: 1.45em; line-height: 1.15; color: var(--accent); }

.ar {
  font-family: var(--font-ar);
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.95;
  letter-spacing: 0;
  /* adab: Arabic is never stretched, squeezed or animated as decoration */
  font-synthesis: none;
}

/* The greeting above the headline. Naskh at a size it can be read at, which is
   the point of the house rule: the English display face is a handwritten one
   with no Arabic in it, so Arabic keeps its own proper face rather than being
   forced to imitate one. */
.ar--greeting {
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--accent);
  margin: 0 0 0.35rem;
  /* The words still read right to left, as they must. The block is pinned to
     the left so the greeting starts where the headline starts; on an
     otherwise left-aligned page, 'start' pushes it to the far right and it
     reads as though it belongs to nothing. */
  text-align: left;
}

/* Naskh carries less height than the Latin body face at the same size, so it
   is set a step larger to read as its equal rather than as a footnote. */
.ar--sign {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  color: var(--accent);
}

.ar--sign { margin-block: clamp(0.9rem, 2vw, 1.3rem) clamp(1.1rem, 2.5vw, 1.6rem); text-align: left; }

.label {
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--fg-dim); max-width: 46ch; }
.mono { font-size: var(--step--1); font-weight: 600; }

/* a marker swipe behind a word */
.swipe { position: relative; display: inline-block; z-index: 0; padding-inline: 0.12em; }
.swipe::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 24% -0.14em 10% -0.14em;
  background: var(--sage-200);
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  transform: rotate(-1.2deg);
  transform-origin: 0 50%;
}
.on-green .swipe::before { background: var(--sage-500); }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.55); }

/* Two sections running one after the other each paid for the full gap, so the
   space between them was doubled and read as a hole in the page. One of them
   is enough. The ribbon is a decoration, not a section, so what follows it
   starts close. */
.section + .section { padding-top: calc(var(--section) * 0.5); }
/* A page head pays its own bottom padding, so the section under it was paying
   the full gap again while section-to-section paid half. Three pages, three
   different gaps under the same heading. It is the same join, so it is the
   same half gap. */
.page-head + .section { padding-top: 0; }
.waveband-bleed + .section { padding-top: clamp(1.1rem, 2.4vw, 2rem); }

.rule-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.rule-row .doodle--underline { width: 90px; color: var(--accent-soft); }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); }

/* Grid and flex children default to min-width:auto, so a child with a large
   intrinsic size (an SVG with a 640-wide viewBox) can push its track wider
   than the phone and shove the whole page sideways. */
.grid > *, .hero__grid > *, .signature > *, .reviews > *, .figures > *, .trust > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }

/* doodles scattered behind a section */
.scatter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scatter__bit { position: absolute; color: var(--sage-300); opacity: 0.8; rotate: var(--rot, 0deg); }
.scatter__bit .doodle { width: clamp(18px, 2.4vw, 34px); height: auto; }
.js .scatter__bit { animation: bob 6s var(--ease) infinite; animation-delay: var(--delay, 0s); }
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

/* ------------------------------------------------------------- top ribbon */
.announce {
  position: relative;
  z-index: 81;
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  padding: 0.6rem var(--gutter);
  background: var(--sage-700);
  color: var(--beige-50);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.announce span + span { position: relative; }
.announce span + span::before { content: '✦'; position: absolute; left: -1.4rem; opacity: 0.75; }
@media (max-width: 44rem) { .announce span + span { display: none; } }

/* ---------------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2.4vw, 2rem);
  /* the bar runs the full width, but its contents line up with the centred
     page container, so the logo sits on the same left edge as the headline */
  padding-block: 0.85rem;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: color-mix(in srgb, var(--beige-50) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 2px dashed transparent;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--beige-50) 97%, transparent); }

.brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
/* the shop's own mark, cropped to the roundel on a transparent ground so it
   sits straight on the paper next to the wordmark */
.brand__mark { width: 42px; height: 42px; flex: 0 0 auto; }
@media (max-width: 56rem) { .brand__mark { width: 36px; height: 36px; } }
/* the wordmark is a two-line lockup: the name, then the trade underneath,
   tracked out so the second line sits roughly as wide as the first */
.brand__name { display: block; font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; line-height: 1.02; }
.brand__word {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.1;
  margin-top: 1px;
  color: var(--accent);
}

.nav__links { display: flex; gap: clamp(0.8rem, 1.8vw, 1.7rem); }
.nav__mobile-tools { display: none; }
.nav__link { position: relative; font-weight: 600; padding: 0.3rem 0.1rem; }
.nav__categories { position: relative; }
.nav__categories summary {
  list-style: none; cursor: pointer; font-weight: 600; padding: 0.3rem 0.1rem;
}
.nav__categories summary::-webkit-details-marker { display: none; }
.nav__categories summary::after {
  content: '';
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-inline-start: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  color: var(--accent);
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 220ms var(--ease-bounce);
}
.nav__categories[open] summary::after { transform: translateY(0.12rem) rotate(225deg); }
.nav__category-menu {
  position: absolute; inset: calc(100% + 0.75rem) auto auto 50%; transform: translateX(-50%);
  width: min(44rem, 88vw); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--beige-50); box-shadow: 0 18px 46px rgba(42, 41, 23, 0.14); z-index: 95;
}
.nav__categories:not([open]) .nav__category-menu { display: none; }
.nav__category-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-width: 0; padding: 0.65rem 0.75rem; border-radius: var(--r-s); font-weight: 600;
}
.nav__category-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem;
  padding: 0.22rem; border: 1px solid transparent; border-radius: 0.65rem;
  background: var(--sage-100); color: var(--accent);
  transform-origin: 50% 65%;
}
.nav__category-icon .doodle { width: 100%; height: 100%; overflow: visible; }
.nav__categories[open] .nav__category-icon {
  animation: category-icon-arrive 440ms var(--ease-bounce) both;
  animation-delay: calc(var(--icon-order) * 32ms);
}
.nav__category-menu .nav__category-all {
  grid-column: 1 / -1; border-bottom: 1px dashed var(--line-strong); border-radius: var(--r-s) var(--r-s) 0 0;
}
.nav__category-menu a:hover, .nav__category-menu a:focus-visible { background: var(--sage-100); color: var(--accent); }
.nav__category-menu a:hover .nav__category-icon,
.nav__category-menu a:focus-visible .nav__category-icon {
  border-color: var(--line-strong); background: var(--beige-50); animation: category-icon-wiggle 520ms var(--ease-bounce);
}
@keyframes category-icon-arrive {
  from { opacity: 0; transform: translateY(0.45rem) rotate(-7deg) scale(0.82); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes category-icon-wiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-8deg) scale(1.08); }
  70% { transform: rotate(6deg) scale(1.08); }
}
.market-controls { display: flex; align-items: center; gap: 0.55rem; margin-inline-start: clamp(0.5rem, 1vw, 1rem); }
.market-controls--footer { margin-inline-start: auto; }
.language-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-height: 42px;
  padding-inline: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--beige-50);
  color: var(--fg);
  direction: ltr;
  transition: border-color var(--t-fast) var(--ease), transform 280ms var(--ease-bounce), box-shadow 280ms var(--ease);
}
.language-toggle__globe {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  transition: rotate 320ms var(--ease-bounce), scale 320ms var(--ease-bounce);
}
.language-toggle__label { font-size: 0.74rem; font-weight: 750; white-space: nowrap; }
.language-toggle__label[lang="ar"] { font-family: var(--font-ar); font-size: 0.86rem; }
.language-toggle:hover { border-color: var(--sage-500); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(49, 52, 35, 0.12); }
.language-toggle.is-switching { transform: scale(0.9); }
.language-toggle.is-switching .language-toggle__globe { rotate: 180deg; scale: 0.82; }
.language-toggle:focus-visible { outline: 3px solid var(--clay-200); outline-offset: 2px; }
.currency-picker {
  position: relative;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  align-items: center;
  min-width: 11.5rem;
}
.currency-picker__flag {
  position: relative; z-index: 1; grid-column: 1; grid-row: 1;
  width: 1.55rem; height: 1.15rem; margin-inline-start: 0.65rem; overflow: hidden;
  border: 1px solid rgba(49, 52, 35, 0.2); border-radius: 0.22rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); pointer-events: none;
}
.currency-picker__flag img { width: 100%; height: 100%; object-fit: cover; }
.currency-picker::after {
  content: ''; position: relative; z-index: 2; grid-column: 2; grid-row: 1; justify-self: end;
  width: 0.45rem; height: 0.45rem; margin-inline-end: 0.85rem; pointer-events: none;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}
.market-controls select {
  grid-column: 1 / -1; grid-row: 1;
  min-height: 42px; width: 100%; max-width: none; padding: 0.35rem 2rem 0.35rem 2.75rem;
  border: 1px solid var(--line); border-radius: 999px; background-color: var(--beige-50);
  color: var(--fg); font: 700 0.74rem/1 var(--font-body); appearance: none;
}
/* The scalloped row of arches read as a border, not as handwriting. This is
   the same two-stroke underline the rest of the site draws, carried in as a
   mask so it still takes its colour from the link. */
.nav__link::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -5px;
  height: 9px;
  background: var(--accent);
  -webkit-mask: var(--pencil-line) no-repeat center / 100% 100%;
          mask: var(--pencil-line) no-repeat center / 100% 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t) var(--ease-bounce);
}
.nav__link:hover::after, .nav__link[aria-current='page']::after { transform: scaleX(1); }

.nav__bag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 2.5px solid var(--sage-900);
  border-radius: 999px;
  background: var(--bg-raised);
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: 3px 3px 0 var(--sage-400);
  transition: transform var(--t-fast) var(--ease-bounce), box-shadow var(--t-fast) var(--ease);
}
.nav__bag::before {
  content: '';
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6.5 8.5h11l1 12h-13l1-12ZM9 9V6.5a3 3 0 0 1 6 0V9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6.5 8.5h11l1 12h-13l1-12ZM9 9V6.5a3 3 0 0 1 6 0V9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav__bag:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sage-400); }
.nav__bag:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sage-400); }
.nav__count {
  min-width: 1.5em;
  padding: 0 0.3em;
  text-align: center;
  background: var(--accent);
  color: var(--beige-50);
  border-radius: 999px;
  font-size: 0.76rem;
}
.nav__count[data-empty='true'] { background: var(--sage-200); color: var(--sage-800); }

.nav__burger { display: none; position: relative; width: 42px; height: 42px; place-items: center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: '';
  display: block;
  width: 22px; height: 2.5px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform var(--t) var(--ease-bounce), opacity var(--t-fast) linear;
}
.nav__burger span::before { position: absolute; transform: translateY(-7px); }
.nav__burger span::after  { position: absolute; transform: translateY(7px); }
.nav.is-open .nav__burger span { transform: rotate(45deg); }
.nav.is-open .nav__burger span::before { opacity: 0; }
.nav.is-open .nav__burger span::after { transform: rotate(-90deg); }

/* -------------------------------------------------------------------- hero */
/* kept short enough that the headline, the line of copy and both buttons
   land above the fold on a laptop */
.hero { position: relative; padding-block: clamp(1.1rem, 2.6vw, 2rem) clamp(1.8rem, 4vw, 3rem); overflow: clip; }
.hero__grid { display: grid; gap: clamp(1.4rem, 3.4vw, 2.6rem); align-items: center; }
@media (min-width: 58rem) { .hero__grid { grid-template-columns: 1fr 1.05fr; } }

.hero__blob {
  position: absolute;
  z-index: -1;
  top: -16%; right: -8%;
  width: min(60vw, 700px);
  aspect-ratio: 1;
  background: var(--sage-100);
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
}
.js .hero__blob { animation: morph 18s ease-in-out infinite; }
@keyframes morph {
  0%, 100% { border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%; rotate: 0deg; }
  50%      { border-radius: 42% 58% 60% 40% / 56% 44% 56% 44%; rotate: 8deg; }
}

/* The first screen is the hero on its own: it takes the height the sticky bar
   leaves, and its contents sit in the middle of that. Only where the two
   columns sit side by side; on a phone they stack and one screen was never
   possible. svh, not vh, so a phone's shrinking address bar does not cut it. */
@media (min-width: 58rem) {
  .hero {
    min-height: calc(100svh - var(--nav-h, 74px));
    display: grid;
    align-content: center;
  }
}

.hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.hero__eyebrow .doodle--mark { color: var(--pop); }
/* the headline was running wider than the words beside it needed; a step down
   keeps it the loudest thing on the page without shouting */
.hero h1 { max-width: 100%; font-size: clamp(1.8rem, 1.35rem + 1.8vw, 2.75rem); }
.hero__headline { position: relative; }
.hero__audience { display: block; position: relative; height: 1.18em; min-width: 0; }
.hero__audience > span { position: absolute; inset-inline-start: 0; bottom: 0; white-space: nowrap; width: max-content; max-width: none; line-height: 1.18; }
.hero__audience-size { visibility: hidden; }
[data-hero-audience] { opacity: 1; transition: opacity 180ms ease; }
[data-hero-audience].is-changing { opacity: 0; }
@media(prefers-reduced-motion:reduce){[data-hero-audience]{transition:none;}}
.hero__note { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-hand); font-size: 1.35rem; color: var(--accent); margin-top: 0.35rem; }
.hero__note .doodle--arrow { width: 46px; color: var(--accent-soft); }
.hero .lede { margin-top: 0.75rem; max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.25rem; }
.is-arabic body { font-family: 'Noto Naskh Arabic', var(--font-body); }
.is-arabic .display--l,
.is-arabic .display--m,
.is-arabic .display--s,
.is-arabic .hero h1,
.is-arabic .partner-ad__content h2 {
  font-family: 'Noto Naskh Arabic', serif;
  line-height: 1.25;
  letter-spacing: 0;
}
.is-arabic .hero__note { font-family: 'Noto Naskh Arabic', serif; }
.is-arabic .hero__cta { justify-content: flex-start; }
.is-arabic .hero__grid > div:first-child { text-align: right; }
.is-arabic .hero h1,
.is-arabic .hero .lede {
  margin-left: auto;
  margin-right: 0;
}
.is-arabic .hero .ar--greeting,
.is-arabic .hero .ar--sign { text-align: right; }
.is-arabic .hero__note { direction: rtl; }
.is-arabic .hero__note .doodle--arrow { transform: scaleX(-1); }
.is-arabic .card__name { font-family: var(--font-ar); }
.is-arabic .pdp__info > h1 {
  display: block;
  font-family: var(--font-ar);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.3;
}
.is-arabic .pdp__info > h1 + .ar { display: none; }

.hero__art { position: relative; }
/* on a single-column layout the shelf leads, so the first thing on a phone
   is the picture rather than a wall of type */
@media (max-width: 57.99rem) {
  .hero__art { order: -1; margin-inline: auto; max-width: 30rem; }
  .hero__grid { gap: 1.2rem; }
}
.hero__art .doodle--shelf,
.hero__art .doodle--scene { color: var(--sage-800); width: 100%; }
.js .hero__art { animation: float 9s ease-in-out infinite; }

/* ------------------------------------------------------------ the shelf --
   Book spines, pot and leaves take their fills from these, so the whole
   illustration follows the palette rather than carrying its own colours. */
.doodle--shelf {
  --s3: var(--sage-300);
  --s4: var(--sage-400);
  --s6: var(--sage-600);
  --b3: var(--beige-300);
  --c1: var(--clay-500);
  --c3: var(--clay-300);
  --leaf: var(--sage-400);
}

/* each object lands in turn, from the board upward */
.js .doodle--shelf .shelf__book,
.js .doodle--shelf .shelf__cup,
.js .doodle--shelf .shelf__pot,
.js .doodle--shelf .shelf__sprout,
.js .doodle--shelf .shelf__open {
  transform-origin: 50% 100%;
  animation: shelfIn 620ms var(--ease-bounce) both;
  animation-delay: calc(240ms + var(--i, 0) * 70ms);
}
@keyframes shelfIn {
  from { opacity: 0; transform: translateY(22px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

.js .doodle--shelf .shelf__board { animation: shelfIn 520ms var(--ease-bounce) both; }

/* the vines swing from where they leave the pot */
.js .doodle--shelf .shelf__vine {
  transform-origin: top center;
  animation: sway 7s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes sway {
  from { transform: rotate(-1.6deg); }
  to   { transform: rotate(1.9deg); }
}

/* and the leaves breathe a little on their own */
.js .doodle--shelf .shelf__leaf {
  animation: leafBob 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 240ms);
  transform-box: fill-box;
}
@keyframes leafBob {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}

/* steam off the cup */
.js .doodle--shelf .shelf__puff {
  opacity: 0;
  stroke-width: 2;
  animation: steam 3.4s ease-in-out infinite;
  animation-delay: calc(1.2s + var(--i, 0) * 0.55s);
}
@keyframes steam {
  0%   { opacity: 0; transform: translateY(6px); }
  35%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-26px); }
}

.js .doodle--shelf .shelf__spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 700ms);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; scale: 0.7; }
  50%      { opacity: 1; scale: 1.15; }
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

/* ------------------------------------------------------------------ button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border: 2.5px solid var(--sage-900);
  border-radius: 999px;
  background: var(--sage-700);
  color: var(--beige-50);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 4px 4px 0 var(--sage-900);
  transition: transform var(--t-fast) var(--ease-bounce), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sage-900); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sage-900); }
.btn__arrow { transition: translate var(--t) var(--ease-bounce); }
.btn:hover .btn__arrow { translate: 4px 0; }

.btn--ghost { background: var(--beige-50); color: var(--sage-900); }
.btn--clay  { background: var(--clay-500); color: #3A2410; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--sage-900); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--t) var(--ease), gap var(--t) var(--ease);
}
.link:hover { background-size: 0% 2px; gap: 0.7rem; }

/* ------------------------------------------------------------ wave ribbon */
/* the tilted tape runs past both edges of the page, like a strip stuck on */
/* -------------------------------------------------- the wave ribbon ----
   A band that follows a curve, the text riding the same path. One <path> in
   <defs> used four times: the ribbon itself, the two lines of stitching, and
   the line the words sit on, so the drawing can never disagree with itself.

   The wave must stay shallow enough that the band plus its swing fits inside
   the viewBox, or the ribbon simply fills the whole box. That is the only
   number here worth being careful with. */
.waveband-bleed { overflow: hidden; }
.waveband { display: block; width: 100%; height: clamp(112px, 12vw, 158px); }
.waveband__band { fill: none; stroke: url(#wavebandInk); stroke-width: 84; }
.waveband__stitch {
  fill: none; stroke: var(--sage-200); stroke-width: 2.5;
  stroke-dasharray: 7 11; stroke-linecap: round; opacity: 0.75;
}
.waveband__text {
  fill: var(--beige-50);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  direction: ltr;
  /* An explicit optical offset also works for textPath in mobile WebKit. */
  dominant-baseline: alphabetic;
}
.is-arabic .waveband__text { font-family: var(--font-ar); dominant-baseline: central; }

/* -------------------------------------------------------------- trust row */
.trust { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .trust { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.trust span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.2rem;
  background: var(--bg-raised);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-m);
  font-weight: 600;
  font-size: 0.92rem;
}
.trust .doodle--mark { color: var(--accent-soft); flex: 0 0 auto; }

/* ------------------------------------------------------------------ cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--sage-300);
  transition: transform var(--t) var(--ease-bounce), box-shadow var(--t) var(--ease);
}
.card:hover { transform: translate(-3px, -5px) rotate(-0.7deg); box-shadow: 9px 11px 0 var(--sage-400); }

.card__frame {
  position: relative;
  /* the product photography is portrait, shot on a phone at 3:4. A landscape
     frame cropped more than a third of it away. */
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--sage-100);
  border-bottom: 2.5px solid var(--sage-900);
  overflow: hidden;
}
.card__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(var(--sage-200) 0 1.5px, transparent 1.5px 18px);
  opacity: 0.85;
}
.card__art { position: relative; z-index: 1; width: 60%; color: var(--sage-700); transition: transform var(--t-slow) var(--ease-bounce); }
.card:hover .card__art { transform: rotate(-4deg) scale(1.07); }
.card__photo { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.card__badge {
  position: absolute;
  z-index: 2;
  top: 0.75rem; left: 0.75rem;
  padding: 0.28rem 0.75rem;
  background: var(--clay-500);
  color: #3A2410;
  border: 2px solid var(--sage-900);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  rotate: -4deg;
}

.card__body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; padding: 1.1rem 1.2rem 1.2rem; }
.card__cat { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.card__cat:hover { color: var(--accent); }
.card__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.14; }
.card__name .ar { font-size: 0.92rem; color: var(--accent); display: block; }
.card__foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--line);
}
.card__price { min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.05; }
.card__was { display: block; margin: 0 0 0.16rem; font-family: var(--font-body); font-size: 0.68em; line-height: 1; color: var(--fg-faint); text-decoration: line-through; }
.card__add {
  flex: 0 0 auto;
  padding: 0.42rem 0.95rem;
  border: 2px solid var(--sage-900);
  border-radius: 999px;
  background: var(--sage-200);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.15;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-bounce), color var(--t-fast) var(--ease);
}
.card__add:hover { background: var(--sage-700); color: var(--beige-50); transform: scale(1.06); }
.card__add.is-added { background: var(--clay-500); color: #3A2410; }
.card__link { position: absolute; inset: 0; z-index: 1; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 19rem);
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0.4rem 1.4rem;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.is-arabic .rail { direction: ltr; }
.is-arabic .rail .card { direction: rtl; }
@media (max-width: 44rem) {
  .rail { grid-auto-columns: 100%; scroll-snap-stop: always; }
  .rail .card__foot { transition: opacity 160ms ease; }
  .rail .card:not(.is-current) .card__foot {
    visibility: hidden;
    opacity: 0;
  }
}

/* ------------------------------------------------------------ collections */
.collection {
  position: relative;
  display: grid;
  gap: 0.65rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  box-shadow: 5px 5px 0 var(--sage-300);
  overflow: hidden;
  transition: transform var(--t) var(--ease-bounce), box-shadow var(--t) var(--ease);
}
.collection:nth-child(2) { background: var(--sage-100); }
.collection:nth-child(3) { background: var(--beige-200); }
.collection:hover { transform: translate(-3px, -5px) rotate(0.8deg); box-shadow: 9px 11px 0 var(--sage-400); }
.collection__art { width: 46%; max-width: 128px; color: var(--sage-700); }
.collection .ar { color: var(--accent); font-size: 1.05rem; }
.collection h3 { font-size: var(--step-2); }
.collection p { color: var(--fg-dim); font-size: 0.93rem; }
/* on the card tint --fg-faint reads 4.2:1, so this one steps darker */
.collection__count { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.collection__go { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--accent); }
.collection__go .doodle--arrow { width: 34px; transition: translate var(--t) var(--ease-bounce); }
.collection:hover .collection__go .doodle--arrow { translate: 5px 0; }

/* -------------------------------------------------------------- signature */
.signature { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) { .signature { grid-template-columns: 1fr 1fr; } }
.signature__slot {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--sage-100);
  border: 2.5px dashed var(--sage-600);
  border-radius: var(--r-l);
  overflow: hidden;
  rotate: -1.5deg;
}
.signature__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.signature__hint { text-align: center; padding: 1.6rem; max-width: 26ch; }
.signature__hint .doodle--mark { width: 48px; height: auto; margin: 0 auto 0.7rem; color: var(--accent-soft); }
.signature__hint .label { display: block; margin-bottom: 0.4rem; }
.signature__hint p { font-size: 0.9rem; color: var(--fg-dim); }

/* the same dashed panel, but holding a drawing rather than waiting for a
   photograph, so it needs no hint and no dashes reading as a placeholder */
.signature__slot--art {
  border-style: solid;
  border-color: var(--sage-700);
  aspect-ratio: 4 / 3;
  background: var(--sage-100);
}
.gift__box { display: block; width: 58%; max-width: 230px; color: var(--sage-800); }
.gift__bit { position: absolute; color: var(--accent-soft); }
.gift__bit .doodle { width: 100%; height: auto; }
.gift__bit--a { width: 42px; top: 13%; left: 13%; rotate: -12deg; }
.gift__bit--b { width: 34px; bottom: 9%; right: 14%; rotate: 9deg; }
.gift__bit--c { width: 30px; top: 18%; right: 17%; rotate: 6deg; }
.js .gift__bit { animation: bob 6s var(--ease) infinite; }
.js .gift__bit--b { animation-delay: 1.3s; }
.js .gift__bit--c { animation-delay: 2.1s; }

/* ------------------------------------------------------- the shop's artwork
   The illustrations the shop draws itself, used where a page would otherwise
   have a hole in it. They float, slowly, the same as the one on the account
   page: anything quicker would be decoration that moves, which the house rule
   does not allow. */
.artbox {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--sage-100);
  border: 2.5px solid var(--sage-700);
  border-radius: var(--r-l);
}
.artbox--tall { padding: clamp(0.8rem, 2.4vw, 1.6rem); }
/* on its own, with nothing behind it */
.artbox--plain { background: none; border: 0; padding: 0; aspect-ratio: auto; }
.artbox img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
}
.artbox--plain img { max-width: min(58vw, 260px); max-height: min(38vh, 330px); width: auto; height: auto; }
.js .artbox img { animation: art-float 9s ease-in-out 600ms infinite; }
@media (prefers-reduced-motion: reduce) {
  .js .artbox img { animation: none; }
}

/* ------------------------------------------------------------ gift wrapping */
.giftline {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  background: var(--sage-100);
  border: 2.5px dashed var(--sage-600);
  border-radius: var(--r-m);
  cursor: pointer;
}
.giftline[hidden] { display: none; }
.giftline input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--sage-800);
}
.giftline b { display: block; font-size: 0.95rem; }
.giftline i { display: block; font-style: normal; font-size: 0.85rem; color: var(--fg-dim); margin-top: 0.2rem; }
.gift-message {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--clay-100) 38%, var(--bg-raised));
}
.gift-message[hidden] { display: none; }
.gift-message.is-shown { animation: gift-message-in 380ms var(--ease-bounce) both; }
.gift-message label > span { display: block; margin-bottom: 0.35rem; font-size: 0.82rem; font-weight: 700; }
.gift-message textarea { min-height: 4.25rem; padding: 0.65rem 0.75rem; resize: vertical; background: var(--bg-raised); }
.gift-message small { justify-self: end; color: var(--fg-faint); font-size: 0.68rem; }
@keyframes gift-message-in {
  from { opacity: 0; transform: translateY(-0.45rem) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ spec tables */
.specs { border-top: 2px dashed var(--line); }
.specs div {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.72rem 0;
  border-bottom: 2px dashed var(--line);
  font-size: 0.92rem;
}
.specs span:first-child, .specs dt { font-weight: 700; color: var(--fg-faint); }
.specs span:last-child, .specs dd { text-align: right; margin: 0; }
.to-confirm { color: var(--fg-faint); font-weight: 500; }

/* related products on a static product page: plain links, no script needed */
.related-list { list-style: none; padding: 0; }
/* a long name wrapping to three lines left its card taller than its neighbours */
.related-list > li { display: flex; }
.related { height: 100%; }
.related {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-m);
  box-shadow: 4px 4px 0 var(--sage-300);
  transition: transform var(--t) var(--ease-bounce), box-shadow var(--t) var(--ease);
}
.related:hover { transform: translate(-3px, -4px); box-shadow: 8px 9px 0 var(--sage-400); }
.related__shot {
  flex: 0 0 auto;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: var(--r-s);
  border: 2px solid var(--sage-900);
  background: var(--sage-100);
  overflow: hidden;
  display: block;
}
.related__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related__text {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  min-width: 0;
}
.related__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.related__price { font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------- figures */
.figures { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figure {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-m);
  text-align: center;
}
.figure:nth-child(odd)  { rotate: -1deg; }
.figure:nth-child(even) { background: var(--sage-100); rotate: 1deg; }
.figure__v { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--accent); }
.figure__k { font-weight: 600; font-size: 0.82rem; color: var(--fg-dim); margin-top: 0.5rem; }

/* ----------------------------------------------------------------- folds */
.folds { display: grid; gap: 0.9rem; }
.fold { background: var(--bg-raised); border: 2.5px solid var(--sage-900); border-radius: var(--r-m); overflow: hidden; }
.fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { color: var(--accent); }
.fold summary i { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.fold summary i::before, .fold summary i::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t) var(--ease-bounce);
}
.fold summary i::after { transform: rotate(90deg); }
.fold[open] summary i::after { transform: rotate(0deg); }
.fold__body { padding: 0 1.3rem 1.3rem; max-width: 50rem; }
.fold__body p { color: var(--fg-dim); }

/* ----------------------------------------------------------- keep in touch */
.keep {
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--sage-100);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  box-shadow: 6px 6px 0 var(--sage-400);
}
@media (min-width: 56rem) {
  /* two columns suit the newsletter box, where a line of text sits beside its
     field. The sign-in panel is a stack of full width controls, and the same
     rule was dealing them into columns. */
  .keep:not(.keep--stack) { grid-template-columns: 1fr auto; align-items: center; }
  .keep__note { grid-column: 1 / -1; }
}
.keep__form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.keep__form input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.85rem 1.2rem;
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: 999px;
  font-weight: 600;
}
.keep__form input:focus { outline: 0; box-shadow: 0 0 0 3px var(--sage-300); }
.keep__note { min-height: 1.2em; font-size: 0.88rem; color: var(--fg-dim); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- reviews */
.reviews { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 52rem) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  box-shadow: 5px 5px 0 var(--sage-300);
}
.review:nth-child(2) { rotate: -1deg; }
.review:nth-child(3) { rotate: 1deg; }
.review__stars { color: var(--clay-500); letter-spacing: 0.2em; }
.review p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; }
.review footer { font-weight: 700; font-size: 0.8rem; color: var(--fg-faint); }

/* ------------------------------------------------------ customer messages */
.review-notes-section {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--sage-200) 42%, transparent) 0 8rem, transparent 8.1rem),
    var(--beige-100);
}
.review-notes__head {
  display: grid;
  gap: 1rem;
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.review-notes__head .rule-row { margin-bottom: 0.5rem; }
.review-notes__head > p { max-width: 34ch; color: var(--fg-dim); }
@media (min-width: 48rem) {
  .review-notes__head { grid-template-columns: 1fr auto; }
  .review-notes__head > p { text-align: end; }
}
.review-notes {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
}
.review-notes::before,
.review-notes::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 45%;
  height: 72%;
  border: 2px solid var(--sage-300);
  border-radius: var(--r-l);
  background: var(--beige-50);
}
.review-notes::before { inset: 8% auto auto -2%; rotate: -3deg; }
.review-notes::after { inset: 5% -2% auto auto; rotate: 3deg; }
.review-notes__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  background: var(--bg-raised);
  box-shadow: 7px 7px 0 var(--sage-300);
  direction: ltr;
  touch-action: pan-y;
  transition: height 520ms var(--ease);
}
.review-notes__track {
  display: flex;
  transform: translate3d(calc(var(--review-index, 0) * -100%), 0, 0);
  transition: transform 760ms var(--ease);
  will-change: transform;
}
.review-note {
  flex: 0 0 100%;
  min-width: 0;
  padding: clamp(0.65rem, 1.5vw, 1rem);
}
.review-note__card {
  position: relative;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  min-height: clamp(17rem, 34vw, 22rem);
  align-content: center;
  padding: clamp(2.7rem, 7vw, 5rem) clamp(1.4rem, 7vw, 5.5rem) clamp(1.8rem, 5vw, 3rem);
  border-radius: calc(var(--r-l) - 8px);
  background:
    linear-gradient(var(--line), var(--line)) 0 3.15rem / 100% 1px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 2.15rem, color-mix(in srgb, var(--sage-200) 45%, transparent) 2.15rem calc(2.15rem + 1px));
  color: var(--fg);
  direction: ltr;
  text-align: left;
}
.is-arabic .review-note__card { direction: rtl; text-align: right; }
.review-note__quote {
  position: absolute;
  inset: 0.25rem auto auto clamp(1rem, 4vw, 2.3rem);
  color: var(--clay-500);
  font-family: Georgia, serif;
  font-size: clamp(4.8rem, 12vw, 8rem);
  line-height: 1;
  opacity: 0.9;
}
.is-arabic .review-note__quote { inset-inline: auto clamp(1rem, 4vw, 2.3rem); }
.review-note p {
  max-width: 34ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.45;
}
.review-note--long .review-note__card {
  min-height: 0;
  padding: clamp(3.2rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2rem);
}
.review-note--long p {
  max-width: 64ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  line-height: 1.52;
}
.review-note__salam {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-ar);
  font-size: 1.15em;
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 36rem) {
  .review-note--long .review-note__card {
    min-height: 0;
    padding: 3.25rem 1rem 1.15rem;
  }
  .review-note--long p { font-size: 0.9rem; line-height: 1.48; }
}
.review-note footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1rem;
  color: var(--fg-faint);
  font-size: var(--step--1);
  font-weight: 700;
}
.review-note footer span:last-child::before { content: '✦'; margin-inline-end: 0.55rem; color: var(--clay-500); }
.review-notes__controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.3rem;
  direction: ltr;
}
.review-notes__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--sage-900);
  border-radius: 50%;
  background: var(--beige-50);
  font-size: 1.2rem;
  transition: transform var(--t-fast) var(--ease-bounce), background var(--t-fast) var(--ease);
}
.review-notes__arrow:hover { transform: translateY(-2px); background: var(--sage-100); }
.review-notes__dots { display: flex; align-items: center; gap: 0.45rem; }
.review-notes__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  background: var(--sage-300);
  transition: width var(--t) var(--ease), background var(--t) var(--ease);
}
.review-notes__dots button[aria-current='true'] { width: 28px; background: var(--clay-500); }

/* ----------------------------------------------------------------- ribbon */
.ribbon {
  position: relative;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 3rem);
  background: var(--sage-700);
  color: var(--beige-50);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  overflow: hidden;
}
.ribbon .label { color: var(--sage-200); }
.ribbon h2 { max-width: 22ch; }
.ribbon p { max-width: 44ch; color: var(--sage-200); }
.ribbon .ar { color: var(--beige-100); }
.ribbon .doodle--sprig { position: absolute; width: 70px; color: var(--sage-500); }
.ribbon .doodle--sprig:first-of-type { left: 4%; bottom: -6%; rotate: -12deg; }
.ribbon .doodle--sprig:last-of-type { right: 4%; top: -8%; rotate: 165deg; }

/* ----------------------------------------------------------------- footer */
.footer { background: var(--sage-800); color: var(--beige-100); padding-block: clamp(2.5rem, 5vw, 4rem) 1.8rem; }
.footer .brand__name, .footer a { color: var(--beige-50); }
/* on the dark green footer the olive strokes disappear, so the mark gets
   its pale plate back */
.brand__mark--footer { background: var(--sage-100); border-radius: 50%; padding: 2px; }
.footer__top { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 52rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h2, .footer h3, .footer h4, .footer__h { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.85rem; color: var(--sage-200); }
.footer li + li { margin-top: 0.1rem; }
/* WCAG 2.5.8 wants 24px of target; these links were 20px tall */
.footer li a { display: inline-flex; align-items: center; min-height: 24px; }
.footer a:hover { color: var(--clay-300); }
.footer__socials { display: flex; align-items: center; gap: .65rem; margin-top: .9rem; }
.footer__social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(253,250,243,.3); border-radius: 50%; transition: color .18s, background-color .18s; }
.footer__social svg { display: block; flex: none; }
.footer__social:hover { background: rgba(253,250,243,.08); }
.footer__social:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.salaf-wallet { margin-block: 1.5rem; padding: clamp(1rem,3vw,1.5rem); border: 1px solid var(--line-strong); border-radius: 1.25rem; background: var(--beige-50); }
.salaf-wallet h2 { font-family: var(--font-display); font-size: 1.6rem; }
.salaf-wallet h3 { margin-block: 1.5rem .75rem; font-size: 1rem; }
.salaf-wallet__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.salaf-wallet--compact { max-width: 380px; padding: 0; background: var(--sage-100); border-radius: 16px; }
.salaf-wallet__compact-link { display: grid; grid-template-columns: 28px minmax(0,1fr) auto 12px; align-items: center; gap: .65rem; padding: .9rem; min-height: 76px; color: var(--fg); text-decoration: none; }
.salaf-wallet__compact-link b { font-size: .95rem; }
.salaf-wallet__compact-link small { margin-top: .15rem; font-size: .72rem; }
.salaf-wallet--compact .salaf-wallet__balance { font-size: 1.2rem; white-space: nowrap; }
.salaf-wallet__compact-link:hover { background: rgba(255,255,255,.25); border-radius: inherit; }
.salaf-wallet__compact-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: inherit; }
.salaf-wallet__compact-status { display: block; font-size: .8rem; padding: 0 .9rem .6rem; }
.is-arabic .salaf-wallet__arrow { transform: scaleX(-1); }
.salaf-wallet__balance { font-size: clamp(1.7rem,5vw,2.3rem); }
.salaf-wallet__history > div { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.salaf-wallet small { display: block; font-size: .8rem; color: var(--sage-600); }
.salaf-wallet__history > div > :last-child { text-align: end; flex-shrink: 0; }
.salaf-wallet__history > div > :first-child { min-width: 0; overflow-wrap: anywhere; }
.salaf-wallet--checkout { margin-block: 1rem; padding: 1rem; }
.salaf-wallet__choice { display: flex; align-items: center; gap: .75rem; cursor: pointer; }
.salaf-wallet__choice input[type="checkbox"] { flex: 0 0 22px; width: 22px; min-width: 22px; max-width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--sage-700); }
.salaf-wallet__choice > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.salaf-wallet__choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.salaf-wallet__choice input:disabled { cursor: not-allowed; }
/* the links down here were 16px of target */
.footer__bottom a { display: inline-flex; align-items: center; min-height: 24px; }
.footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.2rem;
  border-top: 2px dashed rgba(253, 250, 243, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--sage-200);
}
.footer__preferences { display: flex; justify-content: center; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.footer__preferences .market-controls {
  gap: 0.25rem; margin: 0; padding: 0.3rem;
  border: 1px solid rgba(253, 250, 243, 0.2); border-radius: 999px;
  background: rgba(253, 250, 243, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(25, 26, 15, 0.16);
  direction: ltr;
}
.footer__preferences .language-toggle,
.footer__preferences .market-controls select { border-color: transparent; background-color: transparent; color: var(--beige-50); box-shadow: none; }
.footer__preferences .language-toggle { border-radius: 999px; }
.footer__preferences .language-toggle::after {
  content: ''; position: absolute; inset: 0 -0.18rem 0 auto; width: 1px;
  background: rgba(253, 250, 243, 0.16);
}
.footer__preferences .language-toggle:hover,
.footer__preferences .currency-picker:hover { background: rgba(253, 250, 243, 0.09); }
.footer__preferences .currency-picker { border-radius: 999px; color: var(--beige-50); }
.footer__preferences .currency-picker__flag { border-color: rgba(253, 250, 243, 0.28); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.24); }
@media (max-width: 34rem) {
  .footer__preferences { margin-top: 1.5rem; }
  .footer__preferences .market-controls { width: min(100%, 21rem); }
  .footer__preferences .currency-picker { min-width: 0; flex: 1; }
  .footer__preferences .language-toggle { padding-inline: 0.7rem; }
}
.footer__credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(253, 250, 243, 0.12);
  color: var(--sage-200);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}
.footer__heart { display: inline-block; margin-inline: 0.1rem; color: var(--clay-300); animation: footer-heart 2.4s ease-in-out infinite; }
.footer__credit a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.15rem; }
.footer__credit img { width: 7.2rem; height: auto; }
.footer__credit a:hover img { opacity: 0.78; }
@keyframes footer-heart { 0%, 100% { scale: 1; } 45% { scale: 1.18; } 60% { scale: 0.96; } }

/* -------------------------------------------------------------- bag panel */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(42, 41, 23, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.bag {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 96;
  width: min(26rem, 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--beige-50);
  border-left: 3px solid var(--sage-900);
  translate: 101% 0;
  transition: translate var(--t-slow) var(--ease);
}
.bag.is-open { translate: 0 0; }
html[dir='rtl'] .bag {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 3px solid var(--sage-900);
  translate: -101% 0;
}
html[dir='rtl'] .bag.is-open { translate: 0 0; }
.bag__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--gutter); border-bottom: 2px dashed var(--line); }
.bag__head h2 { font-size: var(--step-1); }
.bag__close { font-weight: 700; color: var(--fg-dim); min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.bag__close:hover { color: var(--clay-600); }
.bag__items { overflow-y: auto; padding: 0 var(--gutter); }
.bag__empty { padding: 3rem 0; text-align: center; display: grid; gap: 1rem; justify-items: center; color: var(--fg-dim); }
.bag__empty .doodle--object { width: 110px; color: var(--sage-400); }

.line { display: grid; grid-template-columns: 58px 1fr auto; gap: 0.8rem; align-items: start; padding: 1rem 0; border-bottom: 2px dashed var(--line); }
.line__art { padding: 4px; background: var(--sage-100); border: 2px solid var(--sage-900); border-radius: var(--r-s); color: var(--sage-700); }
.line__art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r-s) - 5px); }
.line__name { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.15; }
.line__meta { display: block; font-size: 0.76rem; color: var(--fg-faint); }
.line__qty { display: inline-flex; align-items: center; margin-top: 0.45rem; border: 2px solid var(--sage-900); border-radius: 999px; overflow: hidden; }
.line__qty button { width: 26px; height: 24px; font-weight: 700; line-height: 1; }
.line__qty button:hover { background: var(--sage-200); }
.line__qty span { font-weight: 700; font-size: 0.82rem; min-width: 1.8em; text-align: center; }
.line__price { font-weight: 700; font-size: 0.9rem; }
.line__drop { display: inline-flex; align-items: center; min-height: 24px; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 700; color: var(--fg-faint); }
.line__drop:hover { color: var(--clay-600); }

.bag__foot { padding: 1.2rem var(--gutter) 1.5rem; border-top: 2px dashed var(--line); display: grid; gap: 0.9rem; }
.bag__sum { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.15rem; }
.bag__note { font-size: 0.8rem; color: var(--fg-dim); line-height: 1.5; }

/* ------------------------------------------------------------- shop page */
.page-head { position: relative; padding-block: var(--space-4) var(--space-3); }
.page-head h1 { max-width: 16ch; }
.page-head .lede { margin-top: 1rem; }

.filters {
  position: sticky;
  top: 62px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  padding-block: 1.1rem;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px dashed var(--line);
}
.chip {
  padding: 0.48rem 1rem;
  border: 2px solid var(--sage-900);
  border-radius: 999px;
  background: var(--bg-raised);
  font-weight: 700;
  font-size: 0.82rem;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-bounce), color var(--t-fast) var(--ease);
}
.chip:hover { background: var(--sage-200); transform: translateY(-2px); }
.chip[aria-pressed='true'] { background: var(--sage-700); color: var(--beige-50); }
.filters__spacer { flex: 1; }
.search { display: flex; align-items: center; gap: 0.4rem; flex: 0 1 13rem; padding: 0 0.9rem; background: var(--bg-raised); border: 2px solid var(--sage-900); border-radius: 999px; }
.search input { flex: 1; min-width: 0; padding: 0.48rem 0; background: none; border: 0; outline: 0; font-weight: 600; font-size: 0.85rem; }
.search__clear { font-weight: 700; color: var(--fg-faint); min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.search__clear:hover { color: var(--clay-600); }
/* the demo notice dismiss button, built in salaf.js with no class */
.demo-chip button { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.filters select { padding: 0.48rem 0.9rem; background: var(--bg-raised); border: 2px solid var(--sage-900); border-radius: 999px; font-weight: 700; font-size: 0.82rem; }

.count-line { padding-block: 1.4rem 0; font-weight: 700; font-size: 0.85rem; color: var(--fg-faint); }

.empty-grid {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 7vw, 5rem) 1rem;
  text-align: center;
  border: 2.5px dashed var(--line-strong);
  border-radius: var(--r-l);
}
.empty-grid .doodle--object { width: 110px; color: var(--sage-400); }
.empty-grid p { color: var(--fg-dim); max-width: 32ch; }

/* ---------------------------------------------------------- product page */
.pdp { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); padding-block: clamp(1.5rem, 4vw, 3rem) var(--section); }
@media (min-width: 58rem) { .pdp { grid-template-columns: 1fr 1fr; align-items: start; } }
.crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-weight: 600; font-size: 0.82rem; color: var(--fg-faint); }
/* breadcrumb links were under 24px of target on the product pages */
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
.crumbs a:hover { color: var(--accent); }
.crumbs i { font-style: normal; opacity: 0.6; }
.category-head .crumbs { margin-bottom: 1rem; }
.category-head__ar { display: block; width: max-content; margin-top: 0.35rem; color: var(--accent); font-size: var(--step-2); }

html[dir='rtl'] body { text-align: right; }
html[dir='rtl'] .brand { margin-right: 0; margin-left: auto; }
html[dir='rtl'] .nav__category-menu { direction: rtl; }
html[dir='rtl'] .category-head__ar { display: none; }
html[dir='rtl'] .btn__arrow, html[dir='rtl'] .collection__go svg { transform: scaleX(-1); }
html[dir='rtl'] input, html[dir='rtl'] textarea, html[dir='rtl'] select { text-align: right; }

.pdp__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--sage-100);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  box-shadow: 7px 7px 0 var(--sage-300);
  overflow: hidden;
}
.pdp__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(var(--sage-200) 0 1.5px, transparent 1.5px 22px);
  opacity: 0.85;
}
.pdp__stage .doodle--object { position: relative; z-index: 1; width: 58%; color: var(--sage-700); }
/* A fixed frame has to either crop a photograph or pad it, and which one it
   does changes with every photograph. So when there is a photograph the frame
   takes its shape instead: portrait, square or landscape, it is always exactly
   the picture, never a crop of it and never bars around it. The 4/5 above is
   only for the drawings, which need a shape of their own. */
.pdp__stage--photo { aspect-ratio: auto; }
.pdp__stage--photo img { position: static; z-index: 1; display: block; width: 100%; height: auto; }
/* the ruled-paper texture belongs under a drawing, not over a photograph */
.pdp__stage--photo::after { display: none; }
.pdp__info { display: grid; gap: 1rem; align-content: start; }
.pdp__info h1 { font-size: var(--step-3); }
.pdp__info .ar { color: var(--accent); font-size: 1.25rem; }
.pdp__price { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); }
.pdp__was { margin-right: 0.5rem; font-family: var(--font-body); font-size: 0.68em; color: var(--fg-faint); text-decoration: line-through; }
.pdp__buy { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.qty { display: inline-flex; align-items: center; background: var(--bg-raised); border: 2.5px solid var(--sage-900); border-radius: 999px; overflow: hidden; }
.qty button { width: 2.6rem; height: 2.9rem; font-weight: 700; font-size: 1.05rem; }
.qty button:hover { background: var(--sage-200); }
.qty span { font-weight: 700; min-width: 2.2em; text-align: center; }
.pdp__stock { font-weight: 700; font-size: 0.84rem; color: var(--fg-faint); }

/* -------------------------------------------------------------- 404 page */
.lost { position: relative; display: grid; place-content: center; justify-items: center; gap: 1.2rem; text-align: center; padding: clamp(3rem, 10vw, 7rem) var(--gutter); }
.lost .doodle--object { width: min(44vw, 220px); color: var(--sage-500); }
.lost p { color: var(--fg-dim); max-width: 40ch; }

/* ------------------------------------------------------------ demo notice */
.demo-chip {
  position: fixed;
  bottom: 1rem; left: 1rem;
  z-index: 70;
  max-width: min(22rem, calc(100vw - 2rem));
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.6rem 0.9rem;
  background: var(--clay-300);
  color: #3A2410;
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-m);
  box-shadow: 4px 4px 0 var(--sage-900);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}
.demo-chip b { display: block; font-weight: 800; }
.demo-chip i {
  display: block;
  font-style: normal;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--t) var(--ease), opacity var(--t) var(--ease), margin-top var(--t) var(--ease);
}
.demo-chip:hover i, .demo-chip:focus-within i { max-height: 9rem; opacity: 1; margin-top: 0.35rem; }
.demo-chip button { margin-left: auto; align-self: center; font-weight: 800; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  bottom: 1.3rem; left: 50%;
  z-index: 97;
  translate: -50% 180%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.3rem;
  background: var(--sage-700);
  color: var(--beige-50);
  border: 2.5px solid var(--sage-900);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--sage-900);
  font-weight: 700;
  font-size: 0.88rem;
  transition: translate var(--t-slow) var(--ease-bounce);
}
.toast.is-up { translate: -50% 0; }
.toast__message {
  min-width: 0;
  max-width: min(50vw, 32rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast__action {
  flex: 0 0 auto;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: var(--beige-50);
  color: var(--sage-900);
  font-weight: 800;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-bounce), background var(--t-fast) var(--ease);
}
.toast__action:hover, .toast__action:focus-visible { background: var(--clay-200); transform: translateY(-1px); }
@media (max-width: 32rem) {
  .toast { width: calc(100% - 1.5rem); justify-content: space-between; padding: 0.55rem 0.6rem 0.55rem 0.85rem; }
  .toast__message { max-width: none; }
}


/* ------------------------------------------------------------- checkout */
.checkout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 58rem) { .checkout { grid-template-columns: 1.3fr 0.7fr; } }
.checkout form { display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.checkout .grid2 { display: grid; gap: 0.9rem; }
@media (min-width: 40rem) { .checkout .grid2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.3rem; }
.field > span { font-weight: 700; font-size: 0.9rem; }
.checkout input:not([type="checkbox"]):not([type="radio"]), .checkout textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-m);
  font-weight: 500;
}
.checkout textarea { resize: vertical; }
.checkout input:not([type="checkbox"]):not([type="radio"]):focus, .checkout textarea:focus { outline: 0; box-shadow: 0 0 0 3px var(--sage-300); }
.err { color: var(--clay-600); font-weight: 700; min-height: 1.3em; }
.muted { color: var(--fg-dim); }

.checkout-page__section { padding-block: clamp(1rem, 2.5vh, 2rem); }
.checkout-page__wrap { max-width: var(--max); }
.checkout-flow { gap: clamp(1.2rem, 2.6vw, 2.25rem); }
.checkout-flow > * { min-width: 0; }
.checkout-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  margin-bottom: 0.15rem;
  counter-reset: checkout;
}
.checkout-progress li { position: relative; min-width: 0; }
.checkout-progress li::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 1rem;
  inset-inline: 50% -50%;
  border-top: 2px dashed var(--line-strong);
}
.checkout-progress li:last-child::after { display: none; }
.checkout-progress a,
.checkout-progress button {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0;
  color: var(--fg-faint);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}
.checkout-progress span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--beige-50);
  color: var(--fg-dim);
  transition: transform var(--t-fast) var(--ease-bounce), background var(--t-fast) var(--ease);
}
.checkout-progress .is-complete span { border-color: var(--sage-700); background: var(--sage-700); color: var(--beige-50); }
.checkout-progress .is-current { color: var(--fg); }
.checkout-progress .is-current span {
  border-color: var(--sage-900);
  background: var(--bg-raised);
  color: var(--fg);
  box-shadow: 3px 3px 0 var(--sage-300);
  transform: translateY(-2px);
}
.checkout-progress button:disabled { cursor: default; opacity: 0.72; }
.checkout-flow__heading { max-width: 18ch; margin-top: 0.25rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.checkout-flow__intro { max-width: 54ch; margin-top: 0.55rem; font-size: 1rem; }
.checkout-panel { display: grid; gap: 0.85rem; }
.checkout-single .checkout-progress { grid-template-columns: repeat(2,minmax(0,1fr)); }
.checkout-single #paymentDetails { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px dashed var(--rule); }
.checkout-single .summary #placeBtn { margin-top: 1rem; }
.checkout-single #savedAddressesWrap select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.checkout-panel__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 0.35rem;
}
.checkout-panel__actions--end { justify-content: flex-end; }
.checkout-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.checkout-review__block,
.checkout-review__total {
  padding: 0.85rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-s);
  background: var(--bg-raised);
}
.checkout-review__block > span,
.checkout-review__total > span {
  display: block;
  color: var(--fg-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.checkout-review__block strong { display: block; margin-top: 0.2rem; }
.checkout-review__block p { margin-top: 0.25rem; color: var(--fg-dim); font-size: 0.85rem; line-height: 1.5; }
.checkout-review__total {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout-review__total strong { font-family: var(--font-display); font-size: 1.3rem; }
.checkout-review__back {
  justify-self: center;
  color: var(--fg-dim);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
}
.checkout-page .summary { padding: clamp(1rem, 2vw, 1.35rem); border-radius: 26px; box-shadow: 4px 4px 0 var(--sage-400); }

@media (max-width: 57.99rem) {
  .checkout-flow { grid-template-columns: 1fr; }
  .checkout-flow .summary { position: static; }
}
@media (max-width: 34rem) {
  .checkout-progress a, .checkout-progress button { font-size: 0.66rem; }
  .checkout-progress span { width: 1.75rem; height: 1.75rem; }
  .checkout-progress li::after { top: 0.875rem; }
  .checkout-panel__actions { align-items: stretch; flex-direction: column-reverse; }
  .checkout-panel__actions .btn { width: 100%; }
  .checkout-review { grid-template-columns: 1fr; }
  .checkout-review__total { grid-column: 1; }
}

.summary {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--sage-100);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  box-shadow: 6px 6px 0 var(--sage-400);
}
.summary__line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.93rem; padding: 0.3rem 0; }
.summary__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.7rem;
  border-top: 2px dashed var(--line-strong);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.done { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: clamp(2rem, 6vw, 4rem) 0; }
.done .doodle--mark { width: 54px; height: auto; color: var(--accent-soft); }
.done .order-no {
  font-family: var(--font-display);
  font-size: var(--step-2);
  padding: 0.4rem 1.4rem;
  background: var(--sage-100);
  border: 2.5px solid var(--sage-900);
  border-radius: 999px;
}


/* -------------------------------------------------------------- account */
.account-gate { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 58rem) { .account-gate { grid-template-columns: 1fr 0.9fr; } }
/* everything in the sign-in panel is the same width, in one column */
.keep--stack { grid-template-columns: 1fr; align-items: stretch; gap: 1rem; }
.keep--stack #googleWrap { display: grid; gap: 0.8rem; }
.keep--stack .row[role=tablist] { justify-content: stretch; }
.keep--stack .chip { flex: 1 1 auto; justify-content: center; }
.account-gate .field > span { font-weight: 700; font-size: 0.9rem; }
.account-gate input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-m);
  font-weight: 500;
}
.account-gate input:focus { outline: 0; box-shadow: 0 0 0 3px var(--sage-300); }

.order-card {
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  box-shadow: 5px 5px 0 var(--sage-300);
}
.order-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.order-card__no { font-family: var(--font-display); font-size: 1.15rem; }
.order-card .summary__line { padding: 0.2rem 0; }
.order-card .summary__total { margin-top: 0.5rem; }
.status {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--sage-200);
  color: var(--sage-900);
}
.status[data-s="new"] { background: var(--clay-500); color: #3A2410; }
.status[data-s="delivered"] { background: var(--sage-700); color: var(--beige-50); }
.status[data-s="cancelled"] { background: var(--line-strong); }

/* the six digit code, spaced out so it is easy to read back from an email */
.otp {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.5em;
  text-align: center;
  text-indent: 0.5em;
}

/* ------------------------------------------------------------- skip link */
.skip {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--sage-700);
  color: var(--beige-50);
  border-radius: 999px;
  font-weight: 700;
  translate: 0 -200%;
  transition: translate var(--t) var(--ease);
}
.skip:focus-visible { translate: 0 0; }

/* ------------------------------------------------------------------ motion
   Every entrance is scoped to .js, a class the page head sets. With scripts
   off or broken, nothing is ever hidden. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease-bounce);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal='pop'] { transform: scale(0.88) rotate(-2deg); }
.js [data-reveal='pop'].is-in { transform: none; }

/* doodles draw themselves in */
.js [data-draw] .doodle path {
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
  transition: stroke-dashoffset 1.5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-draw].is-in .doodle path { stroke-dashoffset: 0; }

/* headline words drop in one at a time */
.js .split { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.js .split > i { display: inline-block; font-style: inherit; transform: translateY(108%); transition: transform 760ms var(--ease-bounce); transition-delay: var(--d, 0ms); }
.js .is-in .split > i, .js .split.is-in > i { transform: none; }

/* the marker swipe wipes in behind the word */
.js .swipe::before { transform: rotate(-1.2deg) scaleX(0); transition: transform 620ms var(--ease) 320ms; }
.js .is-in .swipe::before, .js .swipe.is-in::before { transform: rotate(-1.2deg) scaleX(1); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 56rem) {
  .nav__burger { display: grid; }
  .nav__links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--beige-50);
    border-bottom: 3px solid var(--sage-900);
    border-radius: 0 0 var(--r-l) var(--r-l);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 460ms var(--ease);
  }
  .nav.is-open .nav__links { clip-path: inset(0 0 0 0); }
  .nav__link { font-family: var(--font-display); font-size: var(--step-2); padding-block: 0.5rem; }
  .nav__categories summary { font-family: var(--font-display); font-size: var(--step-2); padding-block: 0.5rem; }
  .nav__category-menu {
    position: static; transform: none; width: 100%; grid-template-columns: 1fr 1fr;
    max-height: 48vh; overflow: auto; box-shadow: none; margin-block: 0.25rem 0.75rem;
  }
  .nav__mobile-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line-strong);
  }
  .nav__mobile-tools .market-controls { margin-inline-start: 0; }
  .nav > .market-controls { margin-inline-start: auto; }
  .market-controls select { width: 10.75rem; max-width: 10.75rem; }
  .nav__link::after { display: none; }
  .filters { top: 58px; }
  .hero__blob { top: auto; bottom: 8%; right: -32%; width: 92vw; }
}
.checkout-success {
  position: relative;
  isolation: isolate;
  max-width: 46rem;
  min-height: min(68svh, 38rem);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 4rem);
  overflow: hidden;
}
.checkout-success__halo {
  position: absolute;
  z-index: -1;
  width: min(74vw, 31rem);
  aspect-ratio: 1;
  border: 1px dashed var(--sage-300);
  border-radius: 48% 52% 44% 56% / 52% 42% 58% 48%;
  background: color-mix(in srgb, var(--sage-100) 72%, transparent);
  animation: success-halo 14s ease-in-out infinite alternate;
}
.checkout-success__note {
  max-width: 48ch;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--bg-raised) 76%, transparent);
  color: var(--fg-dim);
  font-size: 0.9rem;
}
@keyframes success-halo {
  to { rotate: 8deg; scale: 1.06; border-radius: 55% 45% 53% 47% / 46% 57% 43% 54%; }
}

@media (max-width: 32rem) {
  .nav { gap: 0.45rem; }
  .brand__text { display: none; }
  .market-controls { gap: 0.45rem; }
  .language-toggle { width: 34px; min-height: 34px; }
  .language-toggle__globe { width: 19px; height: 19px; }
  .market-controls select {
    width: 9.6rem;
    max-width: 9.6rem;
    min-height: 34px;
    padding: 0.3rem 1.3rem 0.3rem 0.45rem;
  }
  .nav__bag { gap: 0.4rem; padding: 0.45rem 0.75rem; font-size: 0.82rem; }
  .nav__count { font-size: 0.76rem; }
  .nav__burger { width: 34px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .split > i { transform: none; }
  .js [data-draw] .doodle path { stroke-dashoffset: 0; }
  .js .swipe::before { transform: rotate(-1.2deg) scaleX(1); }
  .js .doodle { filter: none; }
  .js .boil .doodle, .js .doodle.boil { animation: none; }
  .js .doodle--shelf * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav, .bag, .scrim, .demo-chip, .announce, .toast, .scatter { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------ paying ----
   No gateway, so the shop shows its UPI details and the customer pays from
   whatever app they already use. Plain blocks, nothing clever. */
.pay { border: 0; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.pay legend { padding: 0; margin-bottom: 0.2rem; }
.pay__choices { display: grid; gap: 0.5rem; }
.pay__choice {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: 0.55rem 0.85rem;
  border: 2.5px solid var(--sage-900); border-radius: var(--r-m);
  background: var(--beige-50); cursor: pointer;
}
.pay__choice input { width: auto; margin: 0; accent-color: var(--sage-700); }
.pay__choice:has(input:checked) { background: var(--sage-100); box-shadow: 3px 3px 0 var(--sage-300); }
.pay__detail { display: grid; gap: 0.7rem; padding: 0.9rem; background: var(--sage-100); border-radius: var(--r-m); }
.pay__id { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pay__id code {
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  padding: 0.45rem 0.7rem; background: var(--beige-50);
  border: 2px dashed var(--sage-400); border-radius: var(--r-s);
  word-break: break-all;
}
.pay__detail img { border: 2.5px solid var(--sage-900); border-radius: var(--r-m); background: #fff; }
.gateway-methods {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--bg-raised) 72%, var(--sage-100));
}
.gateway-methods[hidden] { display: none; }
.gateway-methods p { display: grid; gap: 0.1rem; margin: 0; }
.gateway-methods p b { font-size: 0.82rem; }
.gateway-methods p span { color: var(--fg-dim); font-size: 0.7rem; line-height: 1.4; }
.gateway-methods ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.gateway-method {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: #25251d;
  font: 800 0.66rem/1 var(--font-body);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--sage-300) 55%, transparent);
}
.gateway-method--upi { color: #165e46; letter-spacing: 0.05em; }
.gateway-method--visa { color: #163a96; font-style: italic; letter-spacing: 0.04em; }
.gateway-method--rupay { color: #173d86; }
.gateway-method--mastercard { gap: 0.3rem; }
.gateway-method--mastercard i {
  position: relative;
  width: 22px;
  height: 13px;
  background: radial-gradient(circle at 35% 50%, #e94b35 0 43%, transparent 45%),
    radial-gradient(circle at 65% 50%, #efa63a 0 43%, transparent 45%);
}

.international-contact {
  width: min(31rem, calc(100% - 2rem));
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  background: var(--beige-50);
  color: var(--fg);
  text-align: center;
  box-shadow: 7px 7px 0 var(--sage-400);
}
.international-contact[open] { animation: international-contact-in 380ms var(--ease-bounce) both; }
.international-contact::backdrop { background: rgba(31, 32, 22, 0.58); backdrop-filter: blur(4px); }
.international-contact__close {
  position: absolute;
  inset: 0.75rem 0.75rem auto auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-raised);
  font-size: 1.25rem;
}
html[dir='rtl'] .international-contact__close { inset: 0.75rem auto auto 0.75rem; }
.international-contact__art { position: relative; display: grid; place-items: center; width: 5rem; margin: 0 auto 0.65rem; color: var(--sage-700); }
.international-contact__art svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.international-contact__art i { position: absolute; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--clay-500); animation: international-dot 2s ease-in-out infinite; }
.international-contact__art i:nth-of-type(1) { inset: 9% 16% auto auto; }
.international-contact__art i:nth-of-type(2) { inset: auto auto 12% 13%; animation-delay: 320ms; }
.international-contact__art i:nth-of-type(3) { inset: 46% auto auto 5%; animation-delay: 640ms; }
.international-contact h2 { margin-top: 0.25rem; font-size: clamp(1.65rem, 5vw, 2.2rem); }
.international-contact > p:not(.label) { max-width: 38ch; margin: 0.55rem auto 0; color: var(--fg-dim); line-height: 1.6; }
.international-contact__number { display: flex; justify-content: center; gap: 0.55rem; flex-wrap: wrap; margin: 0.9rem 0; padding: 0.55rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-s); background: var(--sage-100); }
.international-contact__number b { direction: ltr; unicode-bidi: isolate; }
.international-contact__whatsapp { width: 100%; justify-content: center; background: #315c42; }
.international-contact__whatsapp svg { width: 1.2rem; fill: currentColor; }
.international-contact__later { margin-top: 0.8rem; color: var(--fg-dim); font-size: 0.78rem; font-weight: 700; text-decoration: underline; }
@keyframes international-contact-in { from { opacity: 0; transform: translateY(1rem) scale(0.96); } }
@keyframes international-dot { 50% { transform: scale(1.6); opacity: 0.45; } }

/* ------------------------------------------------- the order went through --
   The one moment in the shop worth a little ceremony. The stamp comes down
   like a seal being pressed, the sparks scatter once and settle, and the
   lines arrive in the order you would read them. Objects only, no sound, and
   anyone who has asked for less motion simply gets the end state. */
.done__burst {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(5rem, 16vw, 7rem);
  aspect-ratio: 1;
  margin: 0 auto 0.4rem;
}
.done__seal {
  position: relative;
  z-index: 1;
  color: var(--sage-700);
  animation: seal-press 620ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.done__spark {
  position: absolute;
  width: 26%;
  color: var(--clay-500, var(--accent));
  opacity: 0;
  animation: spark-out 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.done__spark:nth-child(1) { --x: -150%; --y: -120%; animation-delay: 260ms; }
.done__spark:nth-child(2) { --x:  160%; --y: -100%; animation-delay: 330ms; width: 20%; }
.done__spark:nth-child(3) { --x: -175%; --y:   95%; animation-delay: 300ms; width: 19%; }
.done__spark:nth-child(4) { --x:  145%; --y:  125%; animation-delay: 380ms; }
.done__spark:nth-child(5) { --x:    0%; --y: -185%; animation-delay: 420ms; width: 17%; }

@keyframes seal-press {
  0%   { transform: scale(1.7) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(0.94) rotate(2deg);  opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes spark-out {
  0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0.85; }
}

/* each line arrives after the one above it */
.done__step {
  animation: done-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(360ms + (var(--i) * 90ms));
}
@keyframes done-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* the number is the thing they will come back for, so it lands last and hard */
.done__no {
  animation: done-stamp 560ms cubic-bezier(0.34, 1.4, 0.5, 1) both;
  animation-delay: calc(360ms + (var(--i) * 90ms));
}
@keyframes done-stamp {
  0%   { transform: scale(1.35); opacity: 0; letter-spacing: 0.25em; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; letter-spacing: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .done__seal, .done__spark, .done__step, .done__no { animation: none; opacity: 1; transform: none; }
  .done__spark { opacity: 0.85; transform: translate(var(--x), var(--y)); }
}

/* ----------------------------------------------------- following an order --
   A line with the journey on it. Steps that have happened are filled in and
   dated; the next one pulses gently so the eye lands on it; the rest wait.
   Nothing here claims a step has happened until the database says so. */
.track { display: grid; gap: 1rem; max-width: 46rem; }
.track__meta { display: grid; gap: 0.6rem; color: var(--fg-soft); }

.steps { list-style: none; margin: 0.6rem 0 0; padding: 0 0 0 1.6rem; display: grid; gap: 0; }
.step { position: relative; padding: 0 0 1.5rem 1.2rem; }
.step:last-of-type { padding-bottom: 0; }

/* the line between the dots, drawn only as far as the order has got */
.step::before {
  content: ''; position: absolute; left: -0.36rem; top: 1.1rem; bottom: -0.2rem;
  width: 2.5px; background: var(--sage-300);
}
/* the parcel sits inside the list, so :last-child is not the last step */
.step:last-of-type::before { display: none; }
.step--done::before { background: var(--sage-700); }

.step__dot {
  position: absolute; left: -1rem; top: 0.15rem;
  width: 1.3rem; aspect-ratio: 1; border-radius: 50%;
  border: 2.5px solid var(--sage-900); background: var(--beige-50);
}
.step--done .step__dot { background: var(--sage-700); }
.step--done .step__dot::after {
  content: ''; position: absolute; inset: 0.26rem;
  border-radius: 50%; background: var(--beige-50);
}
.step--next .step__dot { background: var(--clay-300, var(--sage-200)); }

.step__body { display: grid; gap: 0.1rem; }
.step__name { font-family: var(--font-display); font-size: 1.05rem; }
.step--waiting .step__name { color: var(--fg-faint); }
.step__at { font-size: 0.85rem; color: var(--fg-faint); }

/* each step settles in from the top, in the order it happened */
.step { animation: step-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the step it is waiting on breathes, so the page has one live thing on it */
.step--next .step__dot { animation: step-wait 2.4s ease-in-out infinite; }
@keyframes step-wait {
  0%, 100% { box-shadow: 0 0 0 0 var(--sage-300); }
  50%      { box-shadow: 0 0 0 0.45rem transparent; }
}

.steps--cancelled .step__dot, .steps--cancelled .step::before { filter: grayscale(1); opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .step { animation: none; opacity: 1; transform: none; }
  .step--next .step__dot { animation: none; }
}

/* ------------------------------------------------- the parcel on its way --
   The journey draws itself: each finished leg of the line fills downward,
   the dots light as the parcel passes them, and the parcel comes to rest on
   the step the order has actually reached. It never runs ahead of the data.
   An object, never a figure, and still for anyone who asks for less motion. */
.steps { position: relative; }

/* the line fills in rather than simply being there */
.step--done::before {
  transform-origin: top;
  animation: leg-draw 460ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(260ms + (var(--i) * 150ms));
}
@keyframes leg-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* the dot is hollow until the parcel gets there */
.step--done .step__dot { background: var(--beige-50); transition: background 260ms ease; }
.step--done.step--lit .step__dot { background: var(--sage-700); }
.step--done .step__dot::after { opacity: 0; transition: opacity 260ms ease; }
.step--done.step--lit .step__dot::after { opacity: 1; }

.parcel {
  position: absolute;
  left: -1.95rem;
  top: 0;
  width: 2.05rem;
  color: var(--sage-700);
  transform: translateY(0);
  animation: parcel-travel 1100ms cubic-bezier(0.45, 0, 0.2, 1) 220ms both,
             parcel-bob 2.8s ease-in-out 1400ms infinite;
}
.parcel svg { display: block; width: 100%; height: auto; }

@keyframes parcel-travel {
  from { transform: translateY(0) rotate(-7deg); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: translateY(var(--stop, 0)) rotate(0deg); opacity: 1; }
}
/* once it arrives it keeps the faintest movement, the way a thing in transit does */
@keyframes parcel-bob {
  0%, 100% { transform: translateY(var(--stop, 0)) rotate(0deg); }
  50%      { transform: translateY(calc(var(--stop, 0px) - 3px)) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .parcel { animation: none; transform: translateY(var(--stop, 0)); }
  .step--done::before { animation: none; transform: none; }
  .step--done .step__dot { background: var(--sage-700); }
  .step--done .step__dot::after { opacity: 1; }
}
.parcel--still { animation: none; transform: translateY(var(--stop, 0)); }

/* --------------------------------------------------- a closer look -------
   Hovering a product lifts the photograph slightly inside its frame, the way
   you would move a thing nearer to see it. The frame clips, so nothing grows
   outside its card and no layout shifts. Pointer devices only, because on a
   phone hover means a tap and the card is already a link. */
@media (hover: hover) and (pointer: fine) {
  .card__photo,
  .pdp__stage--photo img,
  .related__shot img {
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .card:hover .card__photo,
  .related:hover .related__shot img { transform: scale(1.07); }
  .pdp__stage--photo:hover img { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .card__photo,
  .pdp__stage--photo img,
  .related__shot img { transition: none; }
  .card:hover .card__photo,
  .related:hover .related__shot img,
  .pdp__stage--photo:hover img { transform: none; }
}

/* ------------------------------------------------------ browse by kind ---
   One row per category on the front page, so the whole shop is visible from
   the first screen without anybody having to go looking for it. */
.catrow + .catrow { margin-top: clamp(1.8rem, 4vw, 2.8rem); }
.catrow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.catrow__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.1;
}

/* ----------------------------------------------------- SalafiMatch feature */
.partner-ad-section { padding-top: 0; }
.partner-ad {
  --match-bg: #faf6fc;
  --match-soft: #f2e5f7;
  --match-ink: #46304f;
  --match-purple: #7a3390;
  position: relative;
  min-height: clamp(31rem, 47vw, 38rem);
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--match-purple) 28%, transparent);
  border-radius: var(--r-l);
  background: var(--match-bg);
  color: var(--match-ink);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--match-purple) 16%, transparent);
}
.partner-ad__visual { position: absolute; inset: 0; overflow: hidden; }
.partner-ad__hero { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.partner-ad__motion { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.partner-ad__ring, .partner-ad__thread { fill: none; vector-effect: non-scaling-stroke; }
.partner-ad__ring { stroke: rgba(122, 51, 144, 0.28); stroke-width: 1.5; transform-origin: 980px 118px; }
.partner-ad__ring--one { stroke-dasharray: 8 7; animation: match-ring 14s linear infinite; }
.partner-ad__ring--two { stroke: rgba(214, 45, 89, 0.16); stroke-dasharray: 2 10; animation: match-ring-back 18s linear infinite; }
.partner-ad__thread {
  stroke: rgba(122, 51, 144, 0.34);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: match-thread 5.5s var(--ease) infinite;
}
.partner-ad__heart { fill: #e3264f; opacity: 0.96; }
@keyframes match-ring { to { rotate: 360deg; } }
@keyframes match-ring-back { to { rotate: -360deg; } }
@keyframes match-thread {
  0%, 12% { stroke-dashoffset: 480; opacity: 0; }
  38%, 72% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: -480; opacity: 0; }
}
@keyframes match-logo { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.partner-ad__content {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(0.8rem, 1.5vw, 1.1rem);
  width: min(48%, 36rem);
  min-height: inherit;
  margin-right: auto;
  margin-left: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.partner-ad__logo { width: min(13rem, 70%); height: auto; margin-bottom: clamp(0.4rem, 1vw, 0.9rem); animation: match-logo 6s ease-in-out infinite; }
.partner-ad__content h2 { color: var(--match-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.4rem, 4.2vw, 4.35rem); font-weight: 400; line-height: 1.01; letter-spacing: -0.045em; }
.partner-ad__headline, .partner-ad__headline-top { display: block; }
.partner-ad__headline-bottom { display: grid; margin-top: 0.07em; white-space: nowrap; }
.partner-ad__phrase {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.34em);
  animation: match-word 15s var(--ease) infinite both;
}
.partner-ad__phrase strong { color: var(--match-purple); font-weight: inherit; }
.partner-ad__phrase:nth-child(2) { animation-delay: -12s; }
.partner-ad__phrase:nth-child(3) { animation-delay: -9s; }
.partner-ad__phrase:nth-child(4) { animation-delay: -6s; }
.partner-ad__phrase:nth-child(5) { animation-delay: -3s; }
@keyframes match-word {
  0%, 18% { opacity: 1; transform: translateY(0); }
  19%, 96% { opacity: 0; transform: translateY(-0.28em); }
  98% { opacity: 0; transform: translateY(0.34em); }
  100% { opacity: 1; transform: translateY(0); }
}
.partner-ad__content > p { max-width: 39ch; color: color-mix(in srgb, var(--match-ink) 78%, white); font-size: clamp(0.95rem, 1.6vw, 1.2rem); line-height: 1.55; }
.partner-ad__facts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.partner-ad__facts span {
  padding: 0;
  color: var(--match-ink);
  font-size: 0.72rem;
  font-weight: 500;
  opacity: .8;
}
.partner-ad__facts span + span::before { content: '·'; margin-inline-end: .45rem; opacity: .55; }
.partner-ad__button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin-top: 0.25rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--match-purple);
  color: #fff;
  font-weight: 800;
  transition: transform var(--t-fast) var(--ease-bounce), background var(--t-fast) var(--ease);
}
.partner-ad__button:hover { transform: translateY(-2px); background: #67257c; }
.partner-ad__button:focus-visible { outline: 3px solid #d62d59; outline-offset: 3px; }
@media (min-width: 44.01rem) {
  .is-arabic .partner-ad__content {
    margin-right: auto;
    margin-left: 0;
    justify-items: start;
    text-align: right;
  }
  .is-arabic .partner-ad__content h2 {
    max-width: 9ch;
    font-size: clamp(2.3rem, 3.8vw, 3.8rem);
    line-height: 1.08;
  }
  .is-arabic .partner-ad__headline-bottom,
  .is-arabic .partner-ad__phrase {
    direction: rtl;
    unicode-bidi: isolate;
  }
  .is-arabic .partner-ad__facts { justify-content: flex-start; }
  .is-arabic .partner-ad__button { direction: rtl; }
  .is-arabic .partner-ad__button span {
    display: inline-block;
    transform: scaleX(-1);
  }
}
@media (max-width: 44rem) {
  .partner-ad {
    display: grid;
    min-height: 0;
    background:
      radial-gradient(circle at 92% 92%, rgba(214, 45, 89, 0.09), transparent 34%),
      radial-gradient(circle at 8% 8%, rgba(122, 51, 144, 0.08), transparent 32%),
      var(--match-bg);
  }
  .partner-ad__content {
    width: 100%;
    min-height: 0;
    justify-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem 1.1rem;
    text-align: center;
  }
  .partner-ad__logo { width: min(11rem, 62%); margin-bottom: 0.2rem; }
  .partner-ad__content h2 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 0.98; }
  .partner-ad__content > p { max-width: 34ch; font-size: 0.9rem; line-height: 1.48; }
  .partner-ad__visual {
    position: relative;
    inset: auto;
    order: 2;
    height: 8.5rem;
    border-top: 1px solid rgba(122, 51, 144, 0.1);
  }
  .partner-ad__hero {
    position: absolute;
    right: -3rem;
    bottom: -5rem;
    width: 34rem;
    max-width: none;
    height: auto;
  }
  .partner-ad__motion { display: none; }
  .partner-ad__facts { justify-content: center; gap: 0.35rem; }
  .partner-ad__facts span { padding: 0.34rem 0.52rem; font-size: 0.66rem; }
  .partner-ad__button {
    justify-content: center;
    min-height: 40px;
    margin-top: 0.2rem;
    padding: 0.52rem 0.82rem;
    font-size: 0.88rem;
  }
}
@media (max-width: 22.5rem) {
  .partner-ad__content h2 { font-size: 2.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-ad__ring, .partner-ad__thread, .partner-ad__logo, .footer__heart { animation: none; }
  .partner-ad__thread { stroke-dashoffset: 0; opacity: 0.7; }
  .partner-ad__phrase { animation: none; opacity: 0; transform: none; }
  .partner-ad__phrase:last-child { opacity: 1; }
}

/* ------------------------------------------- the account page drawing ----
   The founder's own artwork, shrunk to a web sized WebP, sitting above the
   words rather than under them. It settles in once and then breathes, and
   holds still for anyone who has asked for less movement. */
/* the drawing spans the same column as the words under it, so their left and
   right edges line up rather than the picture floating narrower than the text */
.account-art { margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem); width: 100%; }
.account-art img {
  display: block;
  width: 100%;
  height: auto;
  animation: art-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both,
             art-float 7s ease-in-out 900ms infinite;
}
@keyframes art-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .account-art img { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------ the sign-in page on one screen --
   Header, illustration, words, the panel and the footer all have to sit in a
   laptop window without scrolling. Everything here is sized against the
   window's height rather than fixed, so a short screen gets a smaller picture
   and tighter padding while a tall one gets the full thing. Only applied
   where the two columns sit side by side; on a phone they stack and one
   screen was never possible. */
@media (min-width: 58rem) {
  .account-page .section { padding-block: clamp(0.55rem, 2.4vh, 3rem); }

  /* The picture keeps its shape; its width is capped so its height behaves.
     The sign-in panel is the taller of the two columns, so the picture can
     grow into that slack without pushing the page past one screen. */
  .account-page .account-art {
    max-width: min(100%, calc(42vh * 1.818));
    margin-bottom: clamp(0.7rem, 1.6vh, 1.4rem);
  }
  .account-page #guest h1 { font-size: clamp(1.65rem, 4.2vh, 2.9rem); }
  .account-page #guest .lede { font-size: clamp(0.95rem, 1.9vh, 1.1rem); margin-top: 0.5rem; }
  .account-page .account-gate {
    gap: clamp(1.2rem, 3vw, 3rem);
    align-items: center;
    /* the panel was wider than its contents needed; the picture takes the slack */
    grid-template-columns: 1.35fr 0.85fr;
  }

  /* The whole thing sits in the middle of the window rather than hanging from
     the header, so the space above and below it is even. The column takes
     whatever the header and footer leave, measured rather than guessed: a
     guess at their heights is what pushed this page past one screen. */
  .account-page body,
  body.account-page,
  body.short-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .account-page main,
  .short-page main {
    flex: 1 1 auto;
    display: grid;
    align-content: center;
  }
  /* image, heading and words share one width and that block is centred in its
     column, so the two halves of the page balance */
  .account-page .account-gate > div:first-child {
    display: grid;
    justify-items: start;
    align-content: center;
  }

  .account-page .keep--stack {
    padding: clamp(1rem, 2.6vh, 2.2rem);
    gap: clamp(0.5rem, 1.3vh, 1rem);
  }
  .account-page .account-gate input { padding-block: clamp(0.5rem, 1.3vh, 0.8rem); }
  .account-page .keep--stack .btn { padding-block: clamp(0.5rem, 1.3vh, 0.85rem); }

}

/* On a phone the category chips wrapped to five rows and took 322px, which is
   most of the first screen before a single product shows. One row that swipes
   sideways instead, the same way the home page rail works. The search box
   drops under it so it keeps its full width. */
.filters__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }

@media (max-width: 52rem) {
  .filters { flex-wrap: wrap; padding-block: 0.75rem; gap: 0.5rem; }
  .filters__chips {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* the gutter is paid back as padding, so the first chip is not clipped */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .filters__chips::-webkit-scrollbar { display: none; }
  .filters__chips .chip { flex: 0 0 auto; }
  .filters__spacer { display: none; }
  .filters .search { flex: 1 1 auto; }
}

/* the parcel beside the gift wrapping tick box. The bow lifts and settles when
   the box is ticked, which is the only moment it has anything to say; it is
   still the rest of the time, because a drawing that moves on its own is
   decoration and the house rule does not allow it. */
.giftline__art { flex: none; width: 34px; color: var(--sage-700); }
.giftline__art .doodle { width: 100%; height: auto; }
.giftline__art .doodle__bow { transform-origin: 24px 16px; }
.giftline input:checked ~ .giftline__art { color: var(--accent); }
.js .giftline input:checked ~ .giftline__art .doodle__bow {
  animation: bow-tie 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .giftline input:checked ~ .giftline__art .doodle {
  animation: parcel-nudge 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bow-tie {
  0%   { transform: scale(0.4) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.14) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes parcel-nudge {
  0%, 100% { translate: 0 0; }
  45%      { translate: 0 -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .giftline input:checked ~ .giftline__art .doodle__bow,
  .js .giftline input:checked ~ .giftline__art .doodle { animation: none; }
}

/* ------------------------------------------------------------- the bag page
   The same bag as the drawer, with room to read it. */
.cart-page__section { padding-block: clamp(1rem, 2.5vh, 2rem); }
.cart-page__wrap { max-width: var(--max); }
.cart-page__title {
  line-height: 1.2;
  max-width: 19ch;
  margin-top: 0.25rem;
  font-size: clamp(1.9rem, 2.3vw, 2.8rem);
}
.cart-page__layout {
  gap: clamp(1.1rem, 2.2vw, 2rem);
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
}
@media (min-width: 66rem) {
  .cart-page__layout { grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.75fr); }
}
.cart-page .summary {
  top: 76px;
  gap: 0.55rem;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border-radius: 26px;
  box-shadow: 4px 4px 0 var(--sage-400);
}
.cart-page .summary > h2 { font-size: clamp(1.65rem, 2.3vw, 2rem); }
.cart-page .giftline {
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-width: 2px;
  border-radius: 16px;
}
.cart-page .giftline__art { width: 29px; }
.cart-page .giftline b { font-size: 0.88rem; }
.cart-page .giftline i { font-size: 0.78rem; line-height: 1.5; }
.cart-page .summary__line { padding: 0.18rem 0; font-size: 0.86rem; }
.cart-page .summary__total { padding-top: 0.55rem; font-size: 1.05rem; }
.cart-page .summary .mono { line-height: 1.45; }
.cart-page__continue { margin-top: 0.9rem; font-size: 0.92rem; }
.cart-extras {
  display: grid;
  gap: 0.4rem;
  max-width: 34rem;
  margin-top: 1.15rem;
}
.cart-extras .giftline {
  padding: 0.7rem 0.8rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--sage-100) 55%, var(--bg-raised));
}
.shipping-nudge {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--sage-300);
  border-radius: var(--r-s);
  background: var(--beige-50);
  font-size: 0.78rem;
  animation: shipping-nudge-in 440ms var(--ease-bounce) both;
}
.shipping-nudge b { line-height: 1.35; }
.shipping-nudge a { width: max-content; color: var(--accent); font-weight: 700; text-decoration: underline; }
.shipping-nudge__track { height: 0.42rem; overflow: hidden; border-radius: 999px; background: var(--sage-200); }
.shipping-nudge__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--clay-500);
  animation: shipping-progress 700ms var(--ease) both;
}
@keyframes shipping-nudge-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }
@keyframes shipping-progress { from { width: 0; } }
.cart-recommendations { grid-column: 1 / -1; width: 100%; margin-top: clamp(0.2rem, 1vw, 0.75rem); }
.cart-recommendations__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.cart-recommendations__head h2 { margin-top: 0.18rem; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.cart-recommendations__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
@media (min-width: 66rem) {
  .cart-recommendations__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cart-recommendation {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg-raised);
}
.cart-recommendation__image { width: 3.5rem; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--sage-100); }
.cart-recommendation__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-recommendation__copy { display: grid; min-width: 0; line-height: 1.3; }
.cart-recommendation__copy > a { min-width: 0; }
.cart-recommendation__copy b { display: block; font-size: 0.78rem; white-space: normal; overflow-wrap: anywhere; }
.cart-recommendation__copy span { margin-top: 0.2rem; color: var(--fg-dim); font-size: 0.74rem; }
.cart-recommendation__add {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--sage-900);
  border-radius: 50%;
  font-weight: 700;
}
.cart-recommendation__add:hover { background: var(--sage-100); transform: translateY(-1px); }
.cart-lines { display: grid; gap: 0.9rem; }
.cart-line {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: clamp(0.65rem, 1.4vw, 1rem);
  align-items: center;
  padding: clamp(0.65rem, 1.4vw, 0.85rem);
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: 24px;
  box-shadow: 4px 4px 0 var(--sage-300);
}
.cart-line__shot {
  display: grid;
  place-items: center;
  width: clamp(60px, 7vw, 76px);
  aspect-ratio: 1;
  background: var(--sage-100);
  border-radius: var(--r-m);
  overflow: hidden;
}
.cart-line__shot img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__shot .doodle { width: 72%; height: auto; color: var(--sage-700); }
.cart-line__text { display: grid; gap: 0.15rem; min-width: 0; }
.cart-line__name { font-size: 0.95rem; font-weight: 700; line-height: 1.35; }
.cart-line__name:hover { text-decoration: underline; }
.cart-line__meta { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cart-line__each { font-size: 0.82rem; color: var(--fg-dim); }
.cart-line__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 2px solid var(--sage-900);
  border-radius: 999px;
  padding: 0.1rem;
}
.cart-line__qty button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 700;
  background: none;
}
.cart-line__qty button:hover { background: var(--sage-100); }
.cart-line__qty > span { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-line__end { display: grid; gap: 0.3rem; justify-items: end; }
.cart-line__price { font-size: 0.92rem; font-weight: 700; white-space: nowrap; }
.cart-line__drop { font-size: 0.76rem; color: var(--fg-faint); text-decoration: underline; }
.cart-line__drop:hover { color: var(--clay-600, var(--accent)); }

/* on a phone the photograph and the words share the top row, and the counter
   and the price sit under them, so nothing is squeezed to nothing */
@media (max-width: 34rem) {
  .cart-page__section { padding-block: 0.75rem 1.4rem; }
  .cart-page__title { font-size: clamp(1.65rem, 9vw, 2.25rem); }
  .cart-page__layout { margin-top: 0.85rem; }
  .cart-lines { gap: 0.7rem; }
  .cart-line { grid-template-columns: auto 1fr; }
  .cart-line__qty { grid-column: 1; justify-self: start; }
  .cart-line__end { grid-column: 2; }
  .cart-page .summary { position: static; border-radius: 22px; }
  .cart-recommendations__grid { grid-template-columns: 1fr; }
}

.bag__full {
  display: block;
  margin-top: 0.7rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
}

/* ------------------------------------------------- waiting for a photograph
   The frame already looks like a page of ruled paper, so the wait is drawn as
   somebody tapping a pen on it: three ink dots rising and falling in turn,
   with a soft band of light passing over the page behind them. Marks and
   paper, no figure, and it stops the instant the photograph arrives. */
.shot-load {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  pointer-events: none;
}
.shot-load i {
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: var(--sage-600);
  opacity: 0.45;
}
.js .shot-load i { animation: ink-tap 1.1s var(--ease) infinite; }
.js .shot-load i:nth-child(2) { animation-delay: 0.16s; }
.js .shot-load i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ink-tap {
  0%, 70%, 100% { transform: translateY(0) scale(0.85); opacity: 0.32; }
  35%           { transform: translateY(-0.42rem) scale(1); opacity: 0.9; }
}

/* the light passing over the page */
.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg,
    transparent 34%,
    color-mix(in srgb, var(--beige-50) 70%, transparent) 50%,
    transparent 66%);
  background-size: 280% 100%;
  pointer-events: none;
}
.js .is-loading::before { animation: page-sheen 1.5s linear infinite; }
@keyframes page-sheen {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* the photograph itself arrives rather than appearing */
.is-loading img { opacity: 0; }
.is-shown img {
  animation: shot-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes shot-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .js .shot-load i,
  .js .is-loading::before,
  .is-shown img { animation: none; }
  .is-loading img { opacity: 1; }
}

/* A frame whose photograph never arrived. The product page normally lets the
   frame take the photograph's own shape, which leaves it with no shape at all
   when there is no photograph, so the ruled page comes back and holds the
   space until a real one is put in. */
.is-photoless { aspect-ratio: 4 / 5; }
.pdp__stage--photo.is-photoless::after { display: block; }
.is-photoless::before { display: none; }

/* ------------------------------------------------------- the photograph strip
   The other photographs of the same thing, under the main one. Real buttons,
   so a keyboard reaches them, and the whole strip is in the page's own HTML,
   so a browser with no JavaScript shows every photograph instead of one. */
.shots {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.2rem;
}
.shots::-webkit-scrollbar { display: none; }
.shot {
  flex: 0 0 auto;
  width: clamp(56px, 11vw, 78px);
  aspect-ratio: 1;
  padding: 0;
  background: var(--sage-100);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-m);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-bounce);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot:hover { opacity: 1; transform: translateY(-2px); }
.shot.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .shot { transition: none; }
}

/* ------------------------------------------------- an order you can open
   The card is the link. A customer looking for "where is my parcel" should
   not have to find a small word to click. */
.order-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--t) var(--ease-bounce), box-shadow var(--t) var(--ease);
}
.order-card--link:hover {
  transform: translate(-2px, -3px);
  box-shadow: 8px 9px 0 var(--sage-300);
}
.order-card--link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.order-card__track {
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.order-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
}
.order-card__go .btn__arrow { transition: translate var(--t) var(--ease-bounce); }
.order-card--link:hover .order-card__go .btn__arrow { translate: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .order-card--link, .order-card__go .btn__arrow { transition: none; }
}

/* ========================================================== ON A PHONE ====
   Measured on a 390px screen across every page. Nothing here changes how the
   site looks on a laptop; it only makes the things you tap big enough to hit.

   The rule being met is 44px, which is what a fingertip actually covers. Six
   kinds of control were under it, the worst at 24px, and every one of them is
   something a customer has to hit to get anywhere: the Add button, the footer
   links, the bag's close button. */
@media (max-width: 52rem) {

  /* "Add" on every product card: was 35px */
  .card__add {
    min-height: 44px;
    padding-inline: 1rem;
  }

  /* the footer link columns: was 24px, and they sat almost touching */
  .footer li a {
    min-height: 44px;
    padding-block: 0.1rem;
  }
  .footer li + li { margin-top: 0; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }

  /* every quiet text link, "Go have a look", "See everything": was 29px */
  .link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* inside a sentence it must stay inline, or the line breaks around it */
  p .link, li .link, .lede .link { display: inline; min-height: 0; }

  /* the bag drawer */
  .bag__close { min-height: 44px; min-width: 44px; }
  .bag__full {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* the little × that clears the shop search: was 24px wide */
  .search__clear { min-width: 44px; min-height: 44px; }

  /* the quantity steppers on the cart page */
  .cart-line__qty button { width: 40px; height: 40px; }

  /* the breadcrumb on a product page sits in one line of small links */
  .crumbs a { min-height: 44px; }
}

/* the last few, found by measuring rather than guessing */
@media (max-width: 52rem) {
  /* the logo, which is the way home from every page: was 36px */
  .brand { min-height: 44px; }

  /* any menu link, however the page happened to mark it up */
  .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }

  /* the shop's sort dropdown: was 36px */
  .filters select, .filters .search { min-height: 44px; }
  .filters .search input { min-height: 40px; }

  /* breadcrumbs are short words, so they need width as well as height */
  .crumbs a { padding-inline: 0.6rem; min-width: 44px; justify-content: center; }
  .crumbs { margin-inline: -0.6rem; }
}

/* the fact rows on a phone: the value was pressed against the right edge and
   long answers wrapped into it */
@media (max-width: 34rem) {
  .specs div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding-block: 0.6rem;
  }
  .specs div > span:last-child,
  .specs div > dd { text-align: left; color: var(--fg-dim); }
  .specs dt { font-weight: 700; }
}


/* ------------------------------------------------------------- our story
   The founder's own words, set wider and quieter than the rest of the page,
   the way a letter reads. The marks in it are the shop's own drawings, not
   emoji, because nothing on this site is a picture borrowed from elsewhere. */
.story {
  position: relative;
  max-width: none;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--bg-raised);
  border: 2.5px solid var(--sage-900);
  border-radius: var(--r-l);
  box-shadow: 7px 7px 0 var(--sage-300);
}
.story p {
  color: var(--fg-dim);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.75;
  margin-top: 1rem;
}
.story p.story__open {
  margin-top: 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  padding-bottom: clamp(1.2rem, 2.5vw, 1.9rem);
  border-bottom: 2px dashed var(--line);
  max-width: 46ch;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem);
  line-height: 1.4;
}
.story__line {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--fg);
  font-weight: 600;
}
.story__sparkle { flex: none; width: 22px; color: var(--accent); margin-top: 0.25rem; }
.story__sparkle .doodle { width: 100%; height: auto; }
.story p.story__close {
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    font-family: var(--font-hand);
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem);
    color: var(--accent);
    line-height: 1.35;
    justify-self: center;
    max-width: 26ch;
    text-align: center;
  }
.story .ar { color: var(--accent); font-size: 1.1em; }

/* ===================================================== the Our Story page ==
   The page had a slogan floating in an empty box and headings with nothing
   under them. These give the words a shape to sit in, and one flourish that
   draws itself once. */

/* the ink line under the opening, drawn left to right as it arrives */
.inkline {
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
  max-width: 420px;
  color: var(--accent-soft);
}
.inkline .doodle { width: 100%; height: auto; display: block; }


/* A line of Naskh is taller than a line of Latin. Inline in a paragraph that
   left two lines tight and two loose, which read as broken spacing. Giving the
   whole paragraph the taller line keeps one rhythm down the block, and the
   Arabic still gets the room its descenders need. */
p:has(> .ar) { line-height: 1.95; }
p > .ar { line-height: inherit; }

/* -------------------------------------- the Our Story opening, set calmer
   The heading and the opening line were larger than this page needs; it is a
   letter, not a shopfront. */
.page-head--lean h1 {
  max-width: 18ch;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
}
.page-head--lean .lede {
  max-width: 54ch;
  font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.12rem);
  /* it was set airier than the heading beside it, which read as two unrelated
     blocks rather than one opening */
  line-height: 1.62;
}

/* Set like a letter rather than two facing columns. Standing the opening and
   the closing beside each other left a hole down the middle of the left side,
   because one was three lines and the other was two. So the statement runs
   across the top, the telling of it sits in two columns underneath where the
   page is wide enough to carry them, and the last line signs off at the foot.
   Nothing here touches the words. */
/* Flowed columns put the two long paragraphs on the left and the two short
   ones on the right, which left a hole under the right column. Two paragraphs
   of similar length in a fixed pair of columns sit level instead, and the
   sentence the whole letter turns on is given the full width rather than
   being buried as the top of a column. */
.story { display: grid; }
@media (min-width: 58rem) {
  .story { padding: clamp(2rem, 3.5vw, 3.2rem) clamp(2.2rem, 4vw, 3.6rem); }
  .story__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }
}
.story__body p { margin-top: 0; margin-bottom: 1.15rem; }
@media (min-width: 58rem) { .story__body p { margin-bottom: 0; } }

/* the thesis of the letter, set apart from the telling of it. The rules run
   the whole width of the card; holding the text short with padding rather
   than a max-width is what keeps every rule on the page the same length. */
.story p.story__line {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 2px dashed var(--line);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
}

/* last paragraph and the sign-off share a line, so the foot of the letter is
   weighted on both sides instead of trailing off at the left. */
.story__foot { margin-top: clamp(1.4rem, 2.6vw, 2rem); display: grid; gap: 1.2rem; }
@media (min-width: 58rem) {
  .story p.story__open { max-width: none; padding-right: 16%; }
  .story p.story__line { padding-right: 26%; }
  .story__foot { grid-template-columns: 1fr auto; align-items: end; gap: clamp(2rem, 4vw, 3.4rem); }
  .story p.story__coda { margin: 0; max-width: 42ch; }
}
.story p.story__coda { margin-top: 0; }

/* A fact nobody has answered yet is not worth a row. "To be confirmed" five
   times over reads as a shop that has not thought about shipping, when really
   it is one that has not written it down. The row appears the moment the
   answer is filled in. */
.specs div:has(.to-confirm) { display: none; }

/* The heading had the whole page to itself and used a third of it, which is
   what read as a hole on the right. Setting the opening line beside it fills
   the row without stretching either one past a comfortable measure. */
.page-head--split .wrap { display: grid; gap: clamp(1rem, 3vw, 3rem); }
.page-head__kicker { margin: 0 0 0.2rem; }
@media (min-width: 58rem) {
  .page-head--split .wrap {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(2.4rem, 5vw, 5.5rem);
    row-gap: clamp(1.1rem, 2.2vw, 1.8rem);
    /* joined at the first line rather than at the foot: the heading and the
       opening sentence now start on the same line of the page. Hanging them
       from their feet was what left the hole under the label. */
    align-items: baseline;
  }
  .page-head__kicker { grid-column: 1 / -1; }
  .page-head--split .lede { margin-top: 0; padding-bottom: 0; }
}

/* A letter is signed at the right, not in the middle. The sign-off carries
   its own margin in the base rule, which inside the foot row only opened a
   hole above it. */
.story p.story__close { justify-self: end; text-align: right; margin-top: 0; }

/* No per-paragraph entrance here. The card already fades in as a whole via
   data-reveal. Staggering the paragraphs meant holding the founder's own
   words at opacity zero until a second condition fired, and anything that can
   leave her story invisible is not worth the flourish. */

/* The picture box was stretching to the row and starting above the heading
   beside it, because a heading's glyphs sit below the top of its line box. */
.brand-row { align-items: start; }
.brand-row > div > h2:first-child { margin-top: -0.12em; }



/* The same three declarations were written inline on every column intro. */
.col__intro { color: var(--fg-dim); margin-top: 0.8rem; max-width: 52ch; }

/* Actions belong at the foot of what they follow. These sat between a
   paragraph and a list of contact details and cut the column in half. */
.btn-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* Mobile shopping: compact products, a quiet illustration and clear controls.
   Desktop card sizes, partner photography and footer layout stay as before. */
.partner-ad__garden { display: none; }
.is-arabic { --font-display: 'Noto Naskh Arabic', serif; --font-hand: 'Noto Naskh Arabic', serif; }
.is-arabic .label, .is-arabic .card__cat, .is-arabic .brand__word { letter-spacing: 0; }
.is-arabic .card__name { line-height: 1.5; }
/* Preserve the whole product photograph within the available first view. */
.pdp { row-gap: clamp(1rem, 2.5vh, 1.5rem); padding-top: clamp(1rem, 2.5vh, 1.5rem); }
.pdp__stage--photo { width: fit-content; max-width: 100%; margin-inline: auto; }
.pdp .shots { justify-content: center; }
.card__photo { object-fit: contain; }
.card__frame:has(.card__photo) { background: var(--bg-raised); }
.card__frame:has(.card__photo)::after { display: none; }
.pdp__stage--photo img, .pdp__stage--photo:hover img {
  width: auto; max-width: 100%; height: auto;
  max-height: max(10rem, calc(100svh - var(--nav-h, 74px) - 12rem));
  object-fit: contain; transform: none;
}
@media (max-width: 57.99rem) {
  .pdp__stage--photo img { max-height: 52svh; }
}
@media (max-width: 56rem) {
  .nav__burger { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .nav__bag, .nav__category-menu a { min-height: 44px; }
  .nav__links { visibility: hidden; max-height: calc(100dvh - 7rem); overflow-y: auto; }
  .nav.is-open .nav__links { visibility: visible; }
  .nav__mobile-tools { margin-top: 1rem; padding-top: 1rem; }
  .nav__mobile-tools .market-controls {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.65rem; width: 100%; margin: 0; direction: ltr;
  }
  .nav__mobile-tools .language-toggle {
    width: auto; min-width: 0; min-height: 46px; padding-inline: 0.7rem;
    border-radius: 0.8rem; background: var(--bg-raised);
  }
  .nav__mobile-tools .language-toggle__label { font-size: 0.9rem; }
  .nav__mobile-tools .currency-picker { min-width: 0; width: 100%; }
  .nav__mobile-tools .currency-picker select {
    width: 100%; max-width: none; min-height: 46px; font-size: 1rem;
    padding: 0.5rem 1.8rem 0.5rem 2.7rem; border-radius: 0.8rem;
    background: var(--bg-raised); color: var(--fg);
  }
  .nav__mobile-tools .currency-picker__flag { margin-inline-start: 0.75rem; }
  .nav__mobile-tools .currency-picker::after { margin-inline-end: 0.8rem; }
  .footer__preferences[hidden] { display: none; }
}
@media (max-width: 44rem) {
  .grid--3:has(> .card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.7rem; }
  .card { min-width: 0; border-width: 1.5px; border-radius: 1rem; box-shadow: 3px 3px 0 var(--sage-300); }
  .card__frame { border-bottom-width: 1.5px; }
  .card__body { gap: 0.4rem; padding: 0.65rem; }
  .card__cat { font-size: 0.6rem; letter-spacing: 0.06em; overflow-wrap: anywhere; }
  .card__name { font-size: clamp(0.85rem, 3.3vw, 1.05rem); line-height: 1.3; overflow-wrap: anywhere; }
  .card__badge { top: 0.4rem; left: 0.4rem; padding: 0.2rem 0.45rem; font-size: 0.6rem; border-width: 1px; }
  .card__foot { gap: 0.3rem; padding-top: 0.6rem; border-top-width: 1px; }
  .card__price { font-size: clamp(0.85rem, 3.3vw, 1.05rem); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
  .card__add { min-width: 44px; min-height: 44px; padding: 0.3rem 0.45rem; font-size: 0.72rem; border-width: 1.5px; }
  .rail { grid-auto-columns: minmax(12rem, 68%); gap: 0.85rem; }
  .rail .card__foot, .rail .card:not(.is-current) .card__foot { visibility: visible; opacity: 1; }
  .rail .card__name { font-size: 1.1rem; }
  .partner-ad__hero { display: none; }
  .partner-ad__visual { height: auto; aspect-ratio: 440 / 160; color: var(--match-purple); background: transparent; border-top: 0; }
  .partner-ad__facts span { padding: 0; font-size: 0.68rem; }
  .partner-ad__facts { column-gap: .5rem; row-gap: .3rem; }
  .partner-ad__garden { display: block; width: 100%; height: 100%; }
  .match-garden__sprig { transform-box: fill-box; transform-origin: 50% 100%; animation: garden-sway 6s ease-in-out infinite alternate; }
  .match-garden__sprig--right { animation-delay: -3s; }
  .match-garden__rings { animation: garden-float 5s ease-in-out infinite; }
  .match-garden__spark { animation: garden-glow 4s ease-in-out infinite; }
  .footer { padding-block: 2rem 1rem; }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.4rem 1rem; }
  .footer__top > :first-child { grid-column: 1 / -1; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(253,250,243,.16); }
  .footer .brand { gap: 0.65rem; }
  .footer .brand__mark { width: 2.4rem; height: 2.4rem; }
  .footer .brand__name { font-size: 1.35rem; }
  .footer__top > :first-child p { font-size: 0.9rem; line-height: 1.65; max-width: 36ch; }
  .footer h2, .footer h3, .footer h4, .footer__h { margin-bottom: 0.45rem; font-size: 1rem; }
  .footer li a { min-height: 44px; padding-block: 0.45rem; font-size: 0.85rem; line-height: 1.4; }
  .footer__bottom {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 0.35rem 0.75rem; margin-top: 1.4rem; padding-top: 1rem;
    border-top: 1px solid rgba(253,250,243,.16); font-size: 0.72rem;
  }
  .footer__credit { margin-top: 0.65rem; padding-top: 0.65rem; font-size: 0.68rem; letter-spacing: 0; }
  .footer__credit img { width: 6rem; }
}
@media (max-width: 22.5rem) {
  .grid--3 > .card .card__foot { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .grid--3 > .card .card__add { width: 100%; }
}
@keyframes garden-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes garden-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes garden-glow { 0%,100% { opacity: .3; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .match-garden__sprig, .match-garden__rings, .match-garden__spark { animation: none; }
}

/* Footer navigation: quiet ink, clear link rhythm, compact preferences. */
.footer__top { gap: 2rem; }
.footer__top > div { min-width: 0; }
.footer__top > div:not(:first-child) { border-inline-start: 1px solid rgba(253,250,243,.16); padding-inline-start: 1.5rem; }
.footer__top ul { display: grid; gap: .25rem; }
.footer__top li a { min-height: 44px; padding-block: .5rem; text-decoration-thickness: 1px; text-underline-offset: .35rem; }
.footer__top li a:hover { text-decoration: underline; }
.footer__bottom { border-top: 1px solid rgba(253,250,243,.2); gap: .5rem 1.5rem; align-items: center; }
.footer__preferences { justify-content: flex-end; margin-top: 1.5rem; }
.footer__preferences .market-controls { border-radius: 1rem; box-shadow: none; padding: .25rem; gap: .25rem; }
.footer__preferences .language-toggle::after { display: none; }
.footer__preferences .language-toggle { min-height: 44px; border-radius: .75rem; }
.currency-picker__trigger {
  grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; min-height: 44px;
  padding: .75rem 2rem .75rem 2.75rem; border: 1px solid var(--line);
  border-radius: .75rem; background: var(--bg-raised); color: var(--fg);
  font: 700 .8rem/1.4 var(--font-body); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.currency-picker select[hidden] { display: none; }
/* Native fallback must also have explicit readable option colours. */
.market-controls select option { color: var(--sage-900); background: var(--beige-50); }
.footer__preferences .currency-picker__trigger { color: var(--beige-50); background: transparent; border-color: transparent; }
.currency-picker__trigger:focus-visible, .currency-dialog button:focus-visible { outline: 2px solid var(--clay-500); outline-offset: 3px; }
.currency-dialog {
  width: min(26rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100dvh - 3rem));
  margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 1.25rem;
  background: var(--beige-50); color: var(--sage-900); box-shadow: 0 1rem 4rem rgba(42,41,23,.2);
  overflow: hidden;
}
.currency-dialog[open] { display: flex; flex-direction: column; }
.currency-dialog::backdrop { background: rgba(42,41,23,.45); }
.currency-dialog__head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.currency-dialog__head h2 { margin: 0; font: 700 1.25rem/1.4 var(--font-display); }
.currency-dialog__close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; font-size: 1.5rem; }
.currency-dialog__options { overflow-y: auto; overscroll-behavior: contain; padding: .5rem; scrollbar-color: var(--sage-400) var(--beige-50); }
.currency-dialog__option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 48px; padding: .75rem; border-radius: .65rem; text-align: start; font: 500 .9rem/1.4 var(--font-body); color: var(--sage-900); background: transparent; }
.currency-dialog__option:hover { background: var(--sage-100); }
.currency-dialog__option[aria-pressed="true"] { background: var(--sage-100); font-weight: 700; }
.currency-dialog__code { font-size: .75rem; color: var(--sage-700); direction: ltr; }
@media (max-width: 56rem) {
  .nav__mobile-tools .currency-picker__trigger { font-size: 1rem; min-height: 46px; }
}
@media (max-width: 44rem) {
  .footer__top { gap: 1.25rem 1rem; }
  .footer__top > div:not(:first-child) { padding-inline-start: 0; border-inline-start: 0; }
  .footer__preferences { justify-content: stretch; }
  .currency-dialog { border-radius: 1.25rem; }
}

.currency-dialog__search { flex-shrink: 0; width: calc(100% - 2rem); margin: 1rem 1rem .5rem; min-height: 44px; border: 1px solid var(--line-strong); border-radius: .75rem; padding: .65rem .75rem; background: var(--beige-50); color: var(--sage-900); font: inherit; }
.currency-dialog__count { flex-shrink: 0; padding-inline: 1.25rem; font-size: .75rem; }
.currency-dialog__option[hidden], .currency-picker__flag[hidden] { display: none; }

.cart-extras { max-width: none; }
@media (min-width: 58rem) {
  .cart-extras:has(.gift-message:not([hidden])) { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; gap: .5rem .75rem; }
  .cart-extras > .label { grid-column: 1 / -1; }
  .cart-extras .giftline { margin: 0; max-width: none; align-content: start; }
  .cart-extras .gift-message { margin: 0; min-width: 0; }
  .cart-extras .gift-message textarea { width: 100%; font-family: var(--font-body); }
}

.free-bookmark { display: flex; gap: .75rem; align-items: center; padding: .75rem; border: 1px solid var(--line-strong); border-radius: 1rem; background: var(--sage-100); }
.free-bookmark img { width: 3rem; height: 4rem; object-fit: contain; border-radius: .5rem; }
.free-bookmark > div { display: grid; gap: .25rem; min-width: 0; flex: 1; }
.free-bookmark span { font-size: .8rem; overflow-wrap: anywhere; }
.free-bookmark strong { font-size: .8rem; white-space: nowrap; }

.cart-offers { display: grid; gap: .5rem; margin-block: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .82rem; }
.cart-offers__coupon { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cart-offers__coupon input { min-width: 0; width: 100%; flex: 1 1 8rem; min-height: 44px; }
.cart-offers__coupon button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: .75rem; padding: .5rem .75rem; }
.cart-offers__consent { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.cart-offers__consent input { flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: .2rem; }
.cart-offers [role="status"] { font-size: .78rem; }
.cart-offers [hidden] { display: none; }
.cart-resume-notice { padding: 1rem; background: var(--sage-100); text-align: center; }


.salaf-wallet__history { max-height: 22rem; overflow: auto; }
.salaf-wallet__pending { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line-strong); overflow-wrap: anywhere; }
.salaf-wallet__pending .btn { margin-block: .35rem; }

/* One compact footer layout; the ApexStack credit styling remains unchanged. */
.footer { padding-block-start: 2rem; }
.footer__top { grid-template-columns: minmax(0,1.35fr) repeat(2,minmax(0,1fr)); gap: clamp(1.25rem,3vw,2.5rem); }
.footer__top > div:not(:first-child) { border-inline-start: 0; padding-inline-start: 0; }
.footer__top > :first-child { grid-column: auto; padding-bottom: 0; border-bottom: 0; }
.footer__top ul { gap: 0; }
.footer__top li + li { margin-top: 0; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; padding-top: .75rem; }
.footer__legal { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.5rem; }
.footer__legal > span:last-child { font-size: .76rem; opacity: .85; }
.footer__bottom .footer__preferences { margin: 0; justify-content: flex-end; }
@media(max-width:47.99rem){
 .footer__top { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
 .footer__top > :first-child { grid-column: 1 / -1; }
 .footer__bottom { margin-top: 1rem; padding-top: .65rem; }
 .footer__legal { width: 100%; justify-content: space-between; gap: .25rem 1rem; }
 .footer__legal > span:last-child { flex-basis: 100%; font-size: .72rem; }
}
.cart-signin { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; padding: 1rem 1.5rem; margin-block: 1.5rem; border: 1px solid var(--line-strong); border-radius: 1rem; background: var(--sage-100); }
.cart-signin[hidden] { display: none; }
.cart-signin p { margin: 0; min-width: 0; }
.cart-signin .btn { min-height: 44px; flex-shrink: 0; font-size: .9rem; padding: .65rem 1rem; box-shadow: none; }
@media(max-width:47.99rem){ .cart-signin { padding: 1rem; align-items: stretch; } .cart-signin .btn { justify-content: center; width: 100%; } }
#orders,#salafWallet { scroll-margin-top: 6rem; }

.cart-offers[hidden] { display: none; }

.credits__section { padding-top: 0; }
.credits__layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.credits__value { display: inline-flex; align-items: baseline; gap: .75rem; padding: .8rem 1.2rem; margin-bottom: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--sage-100); }
.credits__value strong { font-family: var(--font-display); font-size: 1.75rem; }
.credits__steps { padding-inline-start: 1.4rem; margin-block: 1rem 1.5rem; }
.credits__steps li { padding-inline-start: .4rem; margin-bottom: 1rem; }
.credits__steps b { display: block; margin-bottom: .2rem; }
.credits__guide h2 { font-family: var(--font-display); font-size: var(--step-2); }
.credits__account { min-width: 0; }
.credits__account .salaf-wallet { margin: 0; }
.credits__guide .folds { margin-top: 1.5rem; }
@media(max-width:47.99rem){ .credits__layout { grid-template-columns: minmax(0,1fr); } .credits__account { order: -1; } }

/* Account is a dashboard; order history has its own destination. */
.account-page #member:not([hidden]) { display: grid; grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: var(--space-3); align-items: start; }
.account-page #member > .panel__head,
.account-page #member > h2,
.account-page #member > #addresses { grid-column: 1 / -1; margin: 0 !important; }
.account-page #member .salaf-wallet--compact { margin: 0; display: flex; flex-direction: column; align-self: stretch; }
.account-page #member .salaf-wallet__compact-link { min-height: 88px; flex: 1; }
.account-page #member .account-actions { margin: 0; }
.account-page #addresses .empty-grid { padding: var(--panel-padding); text-align: start; justify-items: start; gap: var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--r-m); }
.account-page #addresses .empty-grid p { max-width: none; }
@media(max-width:47.99rem) { .account-page #member:not([hidden]) { grid-template-columns: minmax(0,1fr); } }