/* ==========================================================================
   Noble Store — house style
   Editorial luxury: serif display, wide-tracked sans UI, oxblood accent,
   generous whitespace, imagery that does the talking.
   ========================================================================== */

:root {
  --red: #8c1d2c;
  --red-deep: #6e1421;
  --red-wash: #f7efef;
  --ink: #1a1614;
  --ink-soft: #5a514b;
  --ink-faint: #8d837c;
  --gold: #b08d57;
  --ivory: #fbf9f5;
  --paper: #ffffff;
  --line: #e6e0d6;
  --line-strong: #cfc6b8;

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --shell: 1400px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 92px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 3px;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Clipped rather than parked off-screen: a negative left offset is an LTR-only
   idiom that extends the scrollable width by 10,000px once dir="rtl" is set. */
.skip-link {
  position: absolute;
  /* Anchored, and with no padding while hidden. width:1px is content-box, so the
     12px/20px padding made the box 41px wide even in its hidden state — parked at
     x:0 in English that is invisible, but in Arabic and Kurdish an un-anchored
     absolute box starts at the right content edge, so those 41px hung off the end
     and gave every RTL page a horizontal scrollbar. */
  inset-inline-start: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  z-index: 999;
}
.skip-link:focus {
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip-path: none;
  inset-inline-start: 12px;
  top: 12px;
}

/* --- Type ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin: 0;
}

.display   { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.title     { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.subtitle  { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 20px;
}
.eyebrow--red { color: var(--red); }

.lede {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 52ch;
  font-weight: 300;
}

.rule {
  width: 42px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 26px 0;
}
.rule--center { margin-inline: auto; }

/**
 * One opening for every page: the title, and the rule under it.
 *
 * The pages used to disagree with each other. Two opened with a full-bleed
 * oxblood band and a display-sized title, two with a centred block, and each
 * carried an eyebrow above the title and a line of copy below it — an eyebrow
 * reading "Noble Store" on the store's own site, above a heading, above a
 * sentence restating the heading. Three things saying one thing, and 200px of a
 * phone screen spent before the page began.
 */
.page-head {
  text-align: center;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.page-head .rule { margin-inline: auto; }

/* --- Buttons and links --------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 38px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
  background: none;
}

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--light { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }

.btn--block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.link-underline {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 5px;
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.link-underline:hover::after { transform: scaleX(0); }

/* --- Announcement + header ------------------------------------------ */

.announce {
  background: var(--red);
  color: #fff;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 11px var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }

/* The logo stands alone — the NOBLE STORE lettering was removed, so the mark
   itself carries the identity and is sized accordingly. */
.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--red);
}
.wordmark__mark {
  height: 46px;
  width: auto;
  display: block;
  transition: height 0.45s var(--ease);
}
/* Shown until a logo is uploaded. Sized to sit in the same space the mark would. */
.wordmark--text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.site-header-shell.is-condensed .wordmark--text { font-size: 1.35rem; }
.site-footer .wordmark--text { font-size: 1.9rem; }
.hero .wordmark--text, .banner .wordmark--text { color: #fff; }
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

.icon-btn {
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.1; }

.cart-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-count[hidden] { display: none; }

.burger { display: none; }

/* --- Mobile nav ----------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 80;
  padding: 30px var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
  overflow-y: auto;
}
.mobile-nav.open { transform: translateY(0); }
.mobile-nav a {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

/* --- Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: min(84vh, 780px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: linear-gradient(140deg, #2a1013 0%, #58131e 45%, #8c1d2c 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 8, 8, 0.62) 0%, rgba(12, 8, 8, 0.18) 45%, rgba(12, 8, 8, 0.05) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(46px, 8vh, 96px);
  width: 100%;
}
.hero__inner .eyebrow { color: rgba(255, 255, 255, 0.72); }
.hero p { color: rgba(255, 255, 255, 0.86); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --- Sections -------------------------------------------------------- */

.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--tight { padding: clamp(44px, 6vw, 80px) 0; }
.section--ivory { background: var(--ivory); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 46px;
}
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- Product grid ------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 30px);
}
.card { position: relative; }
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ivory);
  margin-bottom: 18px;
}
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.card__media img + img { opacity: 0; }
.card:hover .card__media img { transform: scale(1.045); }
.card:hover .card__media img + img { opacity: 1; }

.card__flag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--paper);
  color: var(--red);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.card__flag--out { color: var(--ink-faint); }
.card__flag--order { color: var(--gold); }

.card__body { text-align: center; }
.card__name {
  font-family: var(--serif);
  font-size: 19px;
  margin-bottom: 6px;
}
.card__meta {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.card__price { font-size: 13px; letter-spacing: 0.08em; }
.card__price s { color: var(--ink-faint); margin-right: 8px; }
.card__price em { font-style: normal; color: var(--red); }

.card__quick {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  width: 100%;
}
.card__media:hover .card__quick,
.card__quick:focus-visible { opacity: 1; transform: translateY(0); }

/* --- Filter bar ---------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-end: auto; }
.chip {
  border: 1px solid var(--line-strong);
  background: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.35s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.select-wrap { position: relative; }
select.control {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 30px 8px 2px;
  cursor: pointer;
  color: var(--ink);
}
.select-wrap::after {
  content: '';
  position: absolute;
  right: 8px; top: 45%;
  width: 6px; height: 6px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

/* --- Forms ---------------------------------------------------------------- */

.field { margin-bottom: 26px; }
.field label,
.label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  padding: 9px 0;
  transition: border-color 0.35s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--red);
}
.field input[type='file'] { font-size: 12px; padding: 12px 0; }
.field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 7px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 26px;
}

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  border: 1px solid var(--line-strong);
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 10px 18px;
  cursor: pointer;
  min-width: 52px;
  transition: all 0.3s var(--ease);
}
.swatch:hover { border-color: var(--ink); }
.swatch.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- Notices --------------------------------------------------------------- */

.notice {
  padding: 15px 20px;
  font-size: 13px;
  border-left: 2px solid var(--red);
  background: var(--red-wash);
  color: var(--red-deep);
  margin-bottom: 24px;
}
.notice--ok {
  border-left-color: #2f6b46;
  background: #eef5f0;
  color: #235436;
}
.notice[hidden] { display: none; }

.empty {
  text-align: center;
  padding: clamp(56px, 10vw, 110px) 20px;
  color: var(--ink-faint);
}
.empty h3 { font-size: 26px; color: var(--ink); margin-bottom: 12px; }

/* --- Cart drawer ------------------------------------------------------------ */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 12, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
  z-index: 90;
}
.scrim.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(430px, 100%);
  background: var(--paper);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: 22px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 28px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 24px 28px; }

.line-item {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.line-item img { width: 74px; height: 92px; object-fit: cover; background: var(--ivory); }
.line-item h4 { font-family: var(--serif); font-size: 17px; margin-bottom: 4px; }
.line-item .variant {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.line-item .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
}
.stepper button {
  width: 30px; height: 30px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  line-height: 1;
}
.stepper span { min-width: 30px; text-align: center; font-size: 13px; }

.link-remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-remove:hover { color: var(--red); }

.totals { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.totals div { display: flex; justify-content: space-between; font-size: 13px; }
.totals .grand {
  border-top: 1px solid var(--line);
  padding-top: 13px;
  font-size: 17px;
  font-family: var(--serif);
}

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

.site-footer {
  background: var(--ivory);
  border-top: 3px solid var(--red);
  padding: clamp(56px, 7vw, 90px) 0 34px;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 44px;
}
.footer-grid h4 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 11px; }
.footer-grid a { font-size: 13px; color: var(--ink-soft); }
.footer-grid a:hover { color: var(--red); }

.footer-base {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* Developer credit. Deliberately quiet — it should read as a signature on the
   work, not as a second brand competing with the shop's own. The cross-axis
   alignment follows the writing direction, so it sits correctly in Arabic and
   Kurdish without an RTL override. */
.credit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  line-height: 1.5;
  text-align: end;
}
.credit__label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.75;
}
.credit__name {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.credit__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.credit__contact a {
  color: var(--ink-faint);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.credit__contact a:hover { color: var(--red); border-bottom-color: var(--red); }

/* The label is a latin-tracked micro-caps style that Arabic script should not
   inherit; the name is a proper noun and stays in its own script and direction. */
:root[lang='ar'] .credit__label,
:root[lang='ckb'] .credit__label { letter-spacing: 0; text-transform: none; font-size: 12px; }
:root[lang='ar'] .credit__name,
:root[lang='ckb'] .credit__name { font-family: 'Cormorant Garamond', Georgia, serif; }
.credit__name, .credit__contact { unicode-bidi: plaintext; }

@media (max-width: 700px) {
  .footer-base { flex-direction: column; align-items: flex-start; }
  .credit { align-items: flex-start; text-align: start; }
  .credit__contact { justify-content: flex-start; }
  .footer-base__region { order: 3; }
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* --- Reveal on scroll --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Product detail ------------------------------------------------------------ */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: start;
  padding: clamp(36px, 5vw, 70px) 0;
}
.pdp__gallery { display: grid; gap: 8px; }
.pdp__main { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp__thumbs button {
  width: 74px; height: 92px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--ivory);
  cursor: pointer;
  overflow: hidden;
}
.pdp__thumbs button.active { border-color: var(--red); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info { position: sticky; top: calc(var(--header-h) + 26px); }
.pdp__price { font-size: 20px; letter-spacing: 0.06em; margin: 18px 0 26px; }
.pdp__price s { color: var(--ink-faint); margin-right: 12px; }
.pdp__price em { font-style: normal; color: var(--red); }

.accordion { border-top: 1px solid var(--line); margin-top: 34px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 19px 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-size: 15px; color: var(--ink-faint); }
.accordion details[open] summary::after { content: '−'; }
.accordion .panel { padding-bottom: 22px; color: var(--ink-soft); font-size: 14px; }

/* --- Two-column checkout -------------------------------------------------------- */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.panel {
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 38px);
  background: var(--paper);
}
.panel--ivory { background: var(--ivory); }
.panel__title {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  color: var(--ink);
}
.summary-sticky { position: sticky; top: calc(var(--header-h) + 26px); }

/* --- Success ---------------------------------------------------------------------- */

.success {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) 0;
}
.success__code {
  display: inline-block;
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: 0.14em;
  color: var(--red);
  border: 1px solid var(--line-strong);
  padding: 16px 34px;
  margin: 26px 0;
}

/* --- Responsive --------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .pdp, .checkout { grid-template-columns: 1fr; }
  .pdp__info, .summary-sticky { position: static; }
}

@media (max-width: 880px) {
  :root { --header-h: 72px; }
  /* Equal side tracks, so the mark sits on the centre of the screen.
     `auto 1fr auto` gave the middle track whatever was left over, and with two
     icons on the right against one on the left, what was left over was not
     centred — the logo sat exactly (92 - 44) / 2 = 24px to the left of the
     middle. The side tracks keep an auto floor rather than minmax(0, 1fr): if a
     very narrow screen cannot give them equal room, they go back to being uneven
     instead of squashing the icons on top of each other. */
  .header-inner { grid-template-columns: 1fr auto 1fr; gap: 12px; }
  /* Grid items stretch by default. In a 1fr track the burger grew to the full
     130px and, centring its own contents, floated the glyph 56px in from the
     edge. .header-actions needs no equivalent — it already ends flush right. */
  .header-inner .burger { justify-self: start; }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header-actions { gap: 14px; }
  .icon-btn span.label { display: none; }
  .wordmark { font-size: 21px; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .card__name { font-size: 16px; }
  .drawer { width: 100%; }
}

/* ==========================================================================
   Maison layer — the stacked utility header, carousels, full-bleed editorial
   banners, service strip and newsletter that give the site its house rhythm.
   ========================================================================== */

/* --- Utility bar (sits between the announcement and the logo row) ----------- */

.utility {
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.utility__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}
.utility__inner .region { margin-right: auto; }
.utility a { color: var(--ink-faint); transition: color 0.3s var(--ease); }
.utility a:hover { color: var(--red); }

/* --- Carousel ---------------------------------------------------------------- */

.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, calc((100% - 3 * 28px) / 4));
  gap: 28px;
  overflow-x: auto;
  /* overflow-x alone leaves the vertical axis auto, so anything overhanging the
     track raised a stub scrollbar on every row. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }

/* Cards in a carousel arrive by scrolling sideways, not by scrolling the page, so
   the reveal animation never fires for the ones off to the right — they kept their
   translateY and hung past the bottom of the track, which is what produced the
   stray vertical scroll on every row. Inside a carousel they start settled. */
.carousel__track .reveal {
  opacity: 1;
  transform: none;
}

.carousel__nav {
  position: absolute;
  top: min(28vw, 240px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.carousel__nav:hover { border-color: var(--red); background: #fff; }
.carousel__nav svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.2; }
.carousel__nav--prev { left: -14px; }
.carousel__nav--next { right: -14px; }
.carousel__nav[disabled] { opacity: 0; pointer-events: none; }

/* --- Full-bleed editorial banner ---------------------------------------------- */

.banner {
  position: relative;
  min-height: min(76vh, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ivory);
}
.banner__media {
  position: absolute;
  inset: 0;
}
.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14, 9, 9, 0.62) 0%, rgba(14, 9, 9, 0.22) 55%, transparent 100%);
}
.banner--right .banner__media::after {
  background: linear-gradient(to left, rgba(14, 9, 9, 0.62) 0%, rgba(14, 9, 9, 0.22) 55%, transparent 100%);
}
.banner__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(50px, 8vw, 90px) var(--gutter);
  width: 100%;
  color: #fff;
}
.banner--right .banner__inner { display: flex; justify-content: flex-end; }
.banner__copy { max-width: 40ch; }
.banner__copy .eyebrow { color: rgba(255, 255, 255, 0.7); }
.banner__copy p { color: rgba(255, 255, 255, 0.88); margin: 18px 0 30px; }

/* A banner tinted in the house red rather than photographed. */
.banner--house { background: var(--red); }
.banner--house .banner__media { display: none; }
.banner--house .banner__inner { text-align: center; }
.banner--house .banner__copy { max-width: 56ch; margin: 0 auto; }

/* --- Service strip -------------------------------------------------------------- */

.services {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.service {
  padding: clamp(34px, 4vw, 52px) 26px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.service:first-child { border-left: 0; }
.service svg {
  width: 28px;
  height: 28px;
  stroke: var(--red);
  fill: none;
  stroke-width: 1;
  margin-bottom: 18px;
}
.service h3 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.service p {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 auto 12px;
  max-width: 32ch;
  line-height: 1.7;
}

/* --- Newsletter -------------------------------------------------------------------- */

.newsletter {
  background: var(--ivory);
  padding: clamp(52px, 7vw, 86px) 0;
  text-align: center;
}
.newsletter form {
  display: flex;
  gap: 0;
  max-width: 460px;
  margin: 30px auto 0;
  border-bottom: 1px solid var(--line-strong);
}
.newsletter input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  padding: 12px 2px;
  color: var(--ink);
}
.newsletter input:focus { outline: none; }
.newsletter button {
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px 4px 12px 20px;
  cursor: pointer;
  color: var(--red);
  white-space: nowrap;
}
.newsletter button:hover { color: var(--red-deep); }
.newsletter .note { font-size: 12px; color: var(--ink-faint); margin-top: 16px; }
.newsletter .note[hidden] { display: none; }

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

.social {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}
.social a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.social a:hover { border-color: var(--red); background: var(--red); }
.social svg { width: 15px; height: 15px; stroke: var(--ink-soft); fill: none; stroke-width: 1.2; }
.social a:hover svg { stroke: #fff; }

/* --- Card additions -------------------------------------------------------------------- */

.card__material {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  max-width: 30ch;
  margin-inline: auto;
  line-height: 1.5;
}
.card__cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  font-family: var(--sans);
  border-bottom: 1px solid currentColor;
}
.card__cta:hover { color: var(--red-deep); }

/* --- Maison responsive ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .carousel__track { grid-auto-columns: minmax(220px, calc((100% - 2 * 24px) / 3)); gap: 24px; }
  .carousel__nav--prev { left: 0; }
  .carousel__nav--next { right: 0; }
}

/**
 * Touch targets.
 *
 * Everything in the header was drawn at mouse scale: the menu, search and bag
 * icons came out 30x30, and the language buttons 26px tall inside a 30px bar.
 * That is under half the area a fingertip needs, on the three controls every
 * visit starts with — and on a trilingual shop, the language switcher is the
 * first thing a good share of visitors reach for.
 *
 * Keyed to pointer type as well as width, because the thing that decides this is
 * whether a finger or a cursor is doing the pointing, not how wide the screen is.
 */
@media (max-width: 880px), (pointer: coarse) {
  /* All five of them: menu, search, bag, and the two drawer closes — every one
     is chrome you only ever touch, and the drawer closes are mobile-only. */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  /* The padding inside each button now does the separating. */
  .header-actions { gap: 4px; }

  .utility__inner { height: 44px; }
  .lang-switch button {
    min-height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
  }

  /* "Add to bag" sat at 28px, the shortest control on the busiest screen. */
  .card__cta { padding-block: 12px; }

  /* Sort, brand and search: 33px and 39px, sat side by side, so the wrong one
     was easy to hit. Padding rather than height, so the underline stays put. */
  select.control { padding-block: 13px; }
  /* Qualified past .filter-row__search input, which is defined further down the
     file and would otherwise win on source order. */
  .filter-row .filter-row__search input { padding-block: 13px; }

  /* The A-Z index: 26 letters at 30x31 each, the fiddliest thing on the site to
     hit. 40px rather than 44 on purpose — at 44 the alphabet takes a row more
     than it needs to, and these sit in a block you read as much as touch. */
  .brand-index { gap: 4px; }
  .brand-index button {
    min-width: 40px;
    min-height: 40px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Footer links stacked at 19px tall with 11px between them: four navigation
     lists where the gap between two links was smaller than the links. Padding on
     the anchor rather than the item, so the target grows with the row.

     Scoped to `li a`, not `a`. The social buttons live in the same grid, and a
     bare .footer-grid a outranks .social a on source order — it replaced their
     `display: grid` and added 9px of padding, which knocked the glyph out of the
     middle of its circle and down towards the bottom. */
  .footer-grid li { margin-bottom: 2px; }
  .footer-grid li a { display: inline-block; padding-block: 9px; }

  /* Minus and plus were 30x30 and 30px apart, on a control people tap several
     times in a row and rarely look at while doing it. */
  .stepper button { width: 44px; height: 44px; font-size: 17px; }
  .stepper span { min-width: 40px; }

  /* "Remove" was 50x15 — the smallest control in the bag, and the only one that
     destroys something. It keeps its quiet styling and gains the room around it. */
  .link-remove { padding-block: 12px; }

  /* Round social buttons, drawn at 34px. */
  .social a { width: 44px; height: 44px; }
}

@media (max-width: 880px) {
  .utility__inner { gap: 14px; font-size: 9px; }
  .utility .hide-sm { display: none; }
  .carousel__track { grid-auto-columns: minmax(200px, calc((100% - 18px) / 2)); gap: 18px; }
  .carousel__nav { display: none; }
  .banner { min-height: auto; }
  .banner--right .banner__inner { justify-content: flex-start; }
  .services__inner { grid-template-columns: 1fr; }
  .service { border-left: 0; border-top: 1px solid var(--line); }
  .service:first-child { border-top: 0; }
}

@media (max-width: 560px) {
  .carousel__track { grid-auto-columns: 74%; }
}

/* ==========================================================================
   Brands and the deeper category tree
   ========================================================================== */

.card__brand {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 7px;
}

/* --- Filter rows ------------------------------------------------------------ */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.filter-row:last-of-type { border-bottom: 0; }
.filter-row__label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-width: 96px;
}
.filter-row[hidden] { display: none; }
/* Logical, not `margin: 0 0 0 auto` — that pins the search box to the right in
   Arabic and Kurdish too, where it belongs on the left. */
.filter-row__search { margin: 0; margin-inline-start: auto; min-width: 190px; }
/* Was inline on the input, where it outranked the taller touch target below. */
.filter-row__search input {
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 0;
}

.chip__count {
  color: var(--ink-faint);
  margin-left: 6px;
  font-size: 9px;
}
.chip.active .chip__count { color: rgba(255, 255, 255, 0.6); }

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 22px;
}
.active-filters[hidden] { display: none; }
.pill-filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--red);
  color: var(--red);
  background: var(--red-wash);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--sans);
}
.pill-filter::after { content: '×'; font-size: 14px; line-height: 1; }
.pill-filter:hover { background: var(--red); color: #fff; }

/* --- Brands index -------------------------------------------------------------- */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.brand-tile {
  background: var(--paper);
  padding: 40px 26px;
  text-align: center;
  transition: background 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 168px;
}
.brand-tile:hover { background: var(--ivory); }
.brand-tile h3 {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.brand-tile .count {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.brand-tile .cats {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 10px;
}

.brand-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 40px;
}
.brand-index button {
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.brand-index button:hover,
.brand-index button.active { color: var(--red); border-bottom-color: var(--red); }

/* --- Product detail brand line ---------------------------------------------------- */

.pdp__brand {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  display: inline-block;
  border-bottom: 1px solid transparent;
}
a.pdp__brand:hover { border-bottom-color: var(--red); }

@media (max-width: 880px) {
  .filter-row__label { min-width: 100%; margin-bottom: 10px; }

  /* Category and Type wrapped onto four or five lines each on a phone, so the
     filters filled the screen and the first product started below the fold. One
     line per group that scrolls sideways keeps every option a single tap away
     and gives the grid the screen back.

     The rail bleeds to the edge of the viewport rather than stopping at the
     gutter, so a chip cut off by the screen edge is what tells you there is more
     — which is why there is no fade or arrow. Full-bleed works in both
     directions, so RTL needs nothing extra. */
  .chips {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Room for the focus ring, which a tight overflow box would clip. */
    padding-block: 3px;
  }
  .chips::-webkit-scrollbar { width: 0; height: 0; }
  .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* 10px on glass is a small target and a hard read. */
    font-size: 11px;
    letter-spacing: 0.16em;
    padding: 11px 17px;
  }

  /* Search first and full width: it is the fastest way through a catalogue on a
     phone. Brand and sort then share the line below it rather than becoming a
     third and fourth full-width control. */
  .filter-row__search { order: -1; flex: 1 1 100%; margin: 0 0 12px; min-width: 0; }
  .filter-row .select-wrap { flex: 1 1 0; min-width: 0; }
  .filter-row .select-wrap .control { width: 100%; }

  .brand-tile { min-height: 132px; padding: 28px 18px; }
  .brand-tile h3 { font-size: 20px; }
}

/* ==========================================================================
   Pinned header, language switcher, right-to-left
   ========================================================================== */

/* The wrapper is the sticky element — a sticky child of a wrapper only as tall
   as itself has nowhere to travel, so it never pins. */
.site-header-shell {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--paper);
}
.site-header-shell .site-header { position: static; }

/* Past the fold the announcement and utility rows fold away and the logo row
   tightens, so the navigation stays without eating the screen. */
.site-header-shell .announce,
.site-header-shell .utility {
  overflow: hidden;
  transition: max-height 0.45s var(--ease), opacity 0.3s var(--ease),
              padding 0.45s var(--ease);
  max-height: 60px;
  opacity: 1;
}
.site-header-shell.is-condensed .announce,
.site-header-shell.is-condensed .utility {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.site-header-shell .header-inner {
  transition: height 0.45s var(--ease);
}
.site-header-shell.is-condensed .header-inner { height: 68px; }
.site-header-shell.is-condensed { box-shadow: 0 1px 16px rgba(26, 22, 20, 0.07); }
.site-header-shell.is-condensed .wordmark__mark { height: 32px; }

/* The footer and sign-in card give the mark more room than the header does. */
.site-footer .wordmark__mark { height: 64px; }
/* .wordmark centres itself, which is right in the header — the logo is the middle
   column of a three-column grid. In the footer it sits in a column that aligns to
   the reading direction, so centring left it adrift of the tagline and the social
   buttons beside it.
   Two rules, not one logical property: .wordmark is pinned to direction:ltr in
   RTL further down, because the logotype is latin and must not mirror. That also
   pins flex-start to the physical left, so RTL needs saying explicitly. */
.site-footer .wordmark { justify-content: flex-start; }
:root[dir='rtl'] .site-footer .wordmark { justify-content: flex-end; }
.signin__card .wordmark__mark { height: 72px; }

/* Anchors and sticky panels must clear the pinned header. */
.pdp__info, .summary-sticky { top: 104px; }

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

.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch button {
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 5px 9px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lang-switch button:hover { color: var(--red); }
.lang-switch button.active { color: var(--red); border-bottom-color: var(--red); }
.lang-switch button + button { border-left: 1px solid var(--line-strong); }

.lang-switch--block { display: flex; gap: 0; }
.lang-switch--block button { font-size: 13px; padding: 10px 16px; }

/* Arabic and Kurdish read better a touch larger at these small sizes. */
:root[lang='ar'] .lang-switch button,
:root[lang='ckb'] .lang-switch button { font-size: 12px; letter-spacing: 0; }

/* --- Arabic-script typography --------------------------------------------------

   Jost and Cormorant Garamond carry no Arabic glyphs, so Arabic and Kurdish were
   silently falling back to a system face that renders noticeably smaller at the
   same pixel size. Two fixes, applied together:

   1. Real Arabic-script families (Noto Naskh for display, Noto Kufi for interface).
   2. The letterspaced-uppercase micro-labels — 9 to 11px with 0.2em+ tracking —
      are an LTR convention. Tracking pulls apart connected Arabic letterforms and
      uppercase means nothing, so both are dropped and the sizes are raised.
   ------------------------------------------------------------------------------ */

:root[lang='ar'],
:root[lang='ckb'] {
  --serif: 'Noto Naskh Arabic', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Noto Kufi Arabic', 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

:root[lang='ar'] body,
:root[lang='ckb'] body { font-size: 16px; line-height: 1.9; }

/* Never letterspace or uppercase a connected script. */
:root[lang='ar'] .eyebrow,      :root[lang='ckb'] .eyebrow,
:root[lang='ar'] .nav a,        :root[lang='ckb'] .nav a,
:root[lang='ar'] .btn,          :root[lang='ckb'] .btn,
:root[lang='ar'] .link-underline, :root[lang='ckb'] .link-underline,
:root[lang='ar'] .chip,         :root[lang='ckb'] .chip,
:root[lang='ar'] .card__brand,  :root[lang='ckb'] .card__brand,
:root[lang='ar'] .card__meta,   :root[lang='ckb'] .card__meta,
:root[lang='ar'] .card__cta,    :root[lang='ckb'] .card__cta,
:root[lang='ar'] .card__quick,  :root[lang='ckb'] .card__quick,
:root[lang='ar'] .card__flag,   :root[lang='ckb'] .card__flag,
:root[lang='ar'] .field label,  :root[lang='ckb'] .field label,
:root[lang='ar'] .label,        :root[lang='ckb'] .label,
:root[lang='ar'] .panel__title, :root[lang='ckb'] .panel__title,
:root[lang='ar'] .filter-row__label, :root[lang='ckb'] .filter-row__label,
:root[lang='ar'] .pill-filter,  :root[lang='ckb'] .pill-filter,
:root[lang='ar'] .announce,     :root[lang='ckb'] .announce,
:root[lang='ar'] .utility,      :root[lang='ckb'] .utility,
:root[lang='ar'] .footer-grid h4, :root[lang='ckb'] .footer-grid h4,
:root[lang='ar'] .footer-base,  :root[lang='ckb'] .footer-base,
:root[lang='ar'] .service h3,   :root[lang='ckb'] .service h3,
:root[lang='ar'] .newsletter button, :root[lang='ckb'] .newsletter button,
:root[lang='ar'] .brand-tile .count, :root[lang='ckb'] .brand-tile .count,
:root[lang='ar'] .brand-tile .cats,  :root[lang='ckb'] .brand-tile .cats,
:root[lang='ar'] .accordion summary, :root[lang='ckb'] .accordion summary,
:root[lang='ar'] .link-remove,  :root[lang='ckb'] .link-remove,
:root[lang='ar'] .line-item .variant, :root[lang='ckb'] .line-item .variant,
:root[lang='ar'] select.control, :root[lang='ckb'] select.control,
:root[lang='ar'] .icon-btn,     :root[lang='ckb'] .icon-btn,
:root[lang='ar'] .pdp__brand,   :root[lang='ckb'] .pdp__brand,
:root[lang='ar'] .swatch,       :root[lang='ckb'] .swatch {
  letter-spacing: 0;
  text-transform: none;
}

/* Raised from the 9–11px the latin micro-labels use. */
:root[lang='ar'] .eyebrow,      :root[lang='ckb'] .eyebrow      { font-size: 14px; }
:root[lang='ar'] .nav a,        :root[lang='ckb'] .nav a        { font-size: 15px; }
:root[lang='ar'] .btn,          :root[lang='ckb'] .btn          { font-size: 15px; padding: 15px 34px; }
:root[lang='ar'] .link-underline, :root[lang='ckb'] .link-underline { font-size: 14px; }
:root[lang='ar'] .chip,         :root[lang='ckb'] .chip         { font-size: 14px; padding: 9px 18px; }
:root[lang='ar'] .card__brand,  :root[lang='ckb'] .card__brand  { font-size: 13px; }
:root[lang='ar'] .card__meta,   :root[lang='ckb'] .card__meta   { font-size: 13px; }
:root[lang='ar'] .card__material, :root[lang='ckb'] .card__material { font-size: 14px; }
:root[lang='ar'] .card__cta,    :root[lang='ckb'] .card__cta    { font-size: 14px; }
:root[lang='ar'] .card__quick,  :root[lang='ckb'] .card__quick  { font-size: 14px; }
:root[lang='ar'] .card__flag,   :root[lang='ckb'] .card__flag   { font-size: 12px; }
:root[lang='ar'] .card__price,  :root[lang='ckb'] .card__price  { font-size: 15px; }
:root[lang='ar'] .field label,  :root[lang='ckb'] .field label,
:root[lang='ar'] .label,        :root[lang='ckb'] .label        { font-size: 13px; }
:root[lang='ar'] .panel__title, :root[lang='ckb'] .panel__title { font-size: 15px; }
:root[lang='ar'] .filter-row__label, :root[lang='ckb'] .filter-row__label { font-size: 13px; }
:root[lang='ar'] .pill-filter,  :root[lang='ckb'] .pill-filter  { font-size: 13px; }
:root[lang='ar'] .announce,     :root[lang='ckb'] .announce     { font-size: 13px; padding-block: 10px; }
:root[lang='ar'] .utility,      :root[lang='ckb'] .utility      { font-size: 13px; }
:root[lang='ar'] .utility__inner, :root[lang='ckb'] .utility__inner { height: 40px; }
:root[lang='ar'] .footer-grid h4, :root[lang='ckb'] .footer-grid h4 { font-size: 14px; }
:root[lang='ar'] .footer-grid a, :root[lang='ckb'] .footer-grid a { font-size: 15px; }
:root[lang='ar'] .footer-base,  :root[lang='ckb'] .footer-base  { font-size: 13px; }
:root[lang='ar'] .service h3,   :root[lang='ckb'] .service h3   { font-size: 15px; }
:root[lang='ar'] .service p,    :root[lang='ckb'] .service p    { font-size: 15px; }
:root[lang='ar'] .newsletter button, :root[lang='ckb'] .newsletter button { font-size: 15px; }
:root[lang='ar'] .brand-tile .count, :root[lang='ckb'] .brand-tile .count { font-size: 13px; }
:root[lang='ar'] .brand-tile .cats,  :root[lang='ckb'] .brand-tile .cats  { font-size: 13px; }
:root[lang='ar'] .accordion summary, :root[lang='ckb'] .accordion summary { font-size: 15px; }
:root[lang='ar'] .accordion .panel,  :root[lang='ckb'] .accordion .panel  { font-size: 15px; }
:root[lang='ar'] .link-remove,  :root[lang='ckb'] .link-remove  { font-size: 13px; }
:root[lang='ar'] .line-item .variant, :root[lang='ckb'] .line-item .variant { font-size: 13px; }
:root[lang='ar'] select.control, :root[lang='ckb'] select.control { font-size: 14px; }
:root[lang='ar'] .icon-btn,     :root[lang='ckb'] .icon-btn     { font-size: 14px; }
:root[lang='ar'] .pdp__brand,   :root[lang='ckb'] .pdp__brand   { font-size: 14px; }
:root[lang='ar'] .swatch,       :root[lang='ckb'] .swatch       { font-size: 14px; }
:root[lang='ar'] .hint,         :root[lang='ckb'] .hint         { font-size: 14px; }
:root[lang='ar'] .lede,         :root[lang='ckb'] .lede         { font-size: 17px; }
:root[lang='ar'] .totals div,   :root[lang='ckb'] .totals div   { font-size: 15px; }

/* Naskh sits small in its em box, so display type needs a little more room. */
:root[lang='ar'] .display, :root[lang='ckb'] .display { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.35; }
:root[lang='ar'] .title,   :root[lang='ckb'] .title   { line-height: 1.4; }
:root[lang='ar'] .subtitle, :root[lang='ckb'] .subtitle { line-height: 1.45; }
:root[lang='ar'] .card__name, :root[lang='ckb'] .card__name { font-size: 20px; line-height: 1.5; }

/* The wordmark and prices stay latin, so they keep their latin treatment. */
:root[lang='ar'] .wordmark, :root[lang='ckb'] .wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.3em;
}
:root[lang='ar'] .success__code, :root[lang='ckb'] .success__code {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* --- Bidirectional text ---------------------------------------------------------

   Stock is owner-written and may be in any script, so it must not inherit the
   page direction. Without isolation "Tiffany & Co." renders as ".Tiffany & Co"
   on an RTL page, because the trailing full stop is a neutral character that
   gets pulled to the other end of the line.

   `plaintext` resolves each of these on its own first strong character, so a
   latin name reads left-to-right and an Arabic one reads right-to-left, on the
   same page, without either being tagged.
   ------------------------------------------------------------------------------ */

.card__name,
.card__brand,
.card__material,
.card__meta,
.pdp__brand,
.line-item h4,
.brand-tile h3,
.order__items li,
.swatch,
[data-heading] {
  unicode-bidi: plaintext;
}

/* Prices are composed by the site, not typed by the owner, so they keep one
   reading order in every language: amount first, then currency. */
.card__price,
.pdp__price,
.totals span,
.order__total,
.success__code {
  direction: ltr;
  unicode-bidi: isolate;
}
:root[dir='rtl'] .card__price { text-align: center; }

/* --- Right-to-left ------------------------------------------------------------ */

:root[dir='rtl'] body { text-align: right; }

/* The wordmark is a latin logotype — it stays left-to-right in every language. */
:root[dir='rtl'] .wordmark { direction: ltr; }

:root[dir='rtl'] .utility__inner .region { margin-right: 0; margin-left: auto; }
/* .header-actions is flex-end already, and flex-end follows the direction: the
   physical right in English, the physical left in Arabic and Kurdish. Forcing
   flex-start here did the opposite — it pulled the search and bag icons back
   towards the middle, leaving 71px of air at the edge against 33px on the other
   side of the header. */
:root[dir='rtl'] .toolbar .spacer { margin-left: 0; margin-right: auto; }
:root[dir='rtl'] .order__total { margin-left: 0; margin-right: auto; }
/* .chips mirrors itself now — it uses margin-inline-end. An override here would
   also outrank the mobile rail's negative margin and stop it reaching the edge
   of the screen in Arabic and Kurdish only. */

:root[dir='rtl'] .nav a::after,
:root[dir='rtl'] .link-underline::after { transform-origin: left; }
:root[dir='rtl'] .link-underline:hover::after { transform: scaleX(0); }

/* The drawer comes in from the left so it doesn't fight the reading direction. */
:root[dir='rtl'] .drawer { right: auto; left: 0; transform: translateX(-100%); }
:root[dir='rtl'] .drawer.open { transform: translateX(0); }
:root[dir='rtl'] .line-item { grid-template-columns: 1fr 74px; }
:root[dir='rtl'] .line-item img { order: 2; }

:root[dir='rtl'] .carousel__track { direction: rtl; }
:root[dir='rtl'] .carousel__nav--prev { left: auto; right: -14px; }
:root[dir='rtl'] .carousel__nav--next { right: auto; left: -14px; }
:root[dir='rtl'] .carousel__nav svg { transform: scaleX(-1); }

:root[dir='rtl'] .banner__media::after {
  background: linear-gradient(to left, rgba(14, 9, 9, 0.62) 0%, rgba(14, 9, 9, 0.22) 55%, transparent 100%);
}
:root[dir='rtl'] .banner--right .banner__media::after {
  background: linear-gradient(to right, rgba(14, 9, 9, 0.62) 0%, rgba(14, 9, 9, 0.22) 55%, transparent 100%);
}
:root[dir='rtl'] .banner--right .banner__inner { justify-content: flex-start; }
:root[dir='rtl'] .banner:not(.banner--right):not(.banner--house) .banner__inner {
  display: flex; justify-content: flex-end;
}

:root[dir='rtl'] .notice { border-left: 0; border-right: 2px solid var(--red); }
:root[dir='rtl'] .notice--ok { border-right-color: #2f6b46; }
:root[dir='rtl'] .service { border-left: 0; border-right: 1px solid var(--line); }
:root[dir='rtl'] .service:first-child { border-right: 0; }
:root[dir='rtl'] .newsletter button { padding: 12px 20px 12px 4px; }
:root[dir='rtl'] .lang-switch button + button {
  border-left: 0; border-right: 1px solid var(--line-strong);
}
:root[dir='rtl'] .select-wrap::after { right: auto; left: 8px; }
:root[dir='rtl'] select.control { padding: 8px 2px 8px 30px; }
:root[dir='rtl'] .accordion summary { flex-direction: row-reverse; }

@media (max-width: 880px) {
  :root[dir='rtl'] .service { border-right: 0; border-top: 1px solid var(--line); }
  .site-header-shell.is-condensed .header-inner { height: 60px; }
  .pdp__info, .summary-sticky { top: 84px; }
}