/* ============================================================
   Al-Andaluzza · Design Tokens
   Single source of truth. Consumed by Astro landing + PrestaShop
   child theme (themes/al-andaluzza/_dev/css/_custom.scss can
   `@import` this file directly through Smarty asset pipeline).
   ============================================================ */

:root {
  /* -------- Palette (locked) -------- */
  --indigo:        #2A2D5F;
  --indigo-deep:   #1F2148;
  --indigo-veil:   rgba(42, 45, 95, 0.08);
  --terracotta:    #B85A36;
  --terracotta-2:  #9E4A2B;
  --olive:         #5C6B3E;
  --olive-2:       #495630;
  --bone:          #F4ECD8;
  --bone-soft:     #FAF6EA;
  --gold-leaf:     #C4A24B;
  --gold-deep:     #9B7F33;
  --ink:           #1A1A1F;
  --ink-soft:      #3A3A45;
  --ink-muted:     #6B6B75;
  --hairline:      rgba(26, 26, 31, 0.12);
  --hairline-light:rgba(244, 236, 216, 0.16);

  /* -------- Semantic surfaces -------- */
  --surface-page:    var(--bone);
  --surface-alt:     var(--bone-soft);
  --surface-ink:     var(--indigo);
  --surface-ink-2:   var(--indigo-deep);
  --text-on-light:   var(--ink);
  --text-on-dark:    var(--bone);
  --text-muted:      var(--ink-muted);
  --accent:          var(--terracotta);
  --accent-2:        var(--olive);
  --highlight:       var(--gold-leaf);

  /* -------- Spacing — 4 px scale -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* -------- Radii -------- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* -------- Shadows -------- */
  --shadow-soft: 0 1px 2px rgba(26,26,31,0.04), 0 8px 24px rgba(42,45,95,0.06);
  --shadow-lift: 0 2px 4px rgba(26,26,31,0.06), 0 18px 40px rgba(42,45,95,0.14);
  --shadow-inset-hairline: inset 0 0 0 1px var(--hairline);

  /* -------- Type families -------- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif; /* italic via style */
  --font-arabic-display: 'Amiri', 'Cormorant Garamond', serif;
  --font-arabic-body:    'Cairo', 'Inter', sans-serif;

  /* -------- Type scale (size / line-height / letter-spacing) -------- */
  --type-display-size:    clamp(48px, 7vw, 96px);
  --type-display-lh:      1.02;
  --type-display-ls:      -0.02em;

  --type-h1-size:         clamp(36px, 4.4vw, 64px);
  --type-h1-lh:           1.08;
  --type-h1-ls:           -0.015em;

  --type-h2-size:         clamp(28px, 3.2vw, 44px);
  --type-h2-lh:           1.14;
  --type-h2-ls:           -0.01em;

  --type-h3-size:         clamp(22px, 2.2vw, 30px);
  --type-h3-lh:           1.22;
  --type-h3-ls:           -0.005em;

  --type-body-size:       17px;
  --type-body-lh:         1.62;
  --type-body-ls:         0em;

  --type-lead-size:       20px;
  --type-lead-lh:         1.55;
  --type-lead-ls:         -0.005em;

  --type-caption-size:    14px;
  --type-caption-lh:      1.5;
  --type-caption-ls:      0.01em;

  --type-micro-size:      11px;
  --type-micro-lh:        1.4;
  --type-micro-ls:        0.18em; /* tracked-out micro caps */

  /* -------- Motion -------- */
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-cubic:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-stand:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   260ms;
  --dur-slow:   520ms;

  /* -------- Layout -------- */
  --container:    1240px;
  --container-narrow: 880px;
  --gutter:       max(20px, 5vw);
  --header-h:     72px;
  --header-h-sm:  60px;

  /* -------- Directional (flip in RTL) -------- */
  --dir-start: left;
  --dir-end:   right;
  --dir-x:     1;      /* multiplier for horizontal transforms */
  --pad-inline-start: 0;
  --pad-inline-end:   0;
}

/* ============================================================
   RTL override — Arabic-first typography + mirrored directional
   tokens. Apply by setting `<html dir="rtl" lang="ar">`.
   ============================================================ */
[dir="rtl"] {
  --font-display: var(--font-arabic-display);
  --font-body:    var(--font-arabic-body);
  --font-accent:  var(--font-arabic-display);

  /* Arabic reads denser — slightly relax the scale */
  --type-display-ls: 0em;
  --type-h1-ls:      0em;
  --type-h2-ls:      0em;
  --type-h3-ls:      0em;
  --type-body-lh:    1.78;
  --type-micro-ls:   0.08em;

  --dir-start: right;
  --dir-end:   left;
  --dir-x:     -1;
}

/* Brand names and code blocks stay LTR even inside RTL pages */
[dir="rtl"] .ltr,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .brand-latin {
  direction: ltr;
  unicode-bidi: embed;
}
/* ============================================================
   Al-Andaluzza · Type System
   Loads four Google Fonts (Cormorant Garamond + Inter for
   Latin; Amiri + Cairo for Arabic) and applies the type tokens
   to base HTML elements. Depends on tokens.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cairo:wght@300;400;500;600;700&display=swap');

html {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
  color: var(--text-on-light);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv02', 'cv11';
}

body {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-on-light);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: 500;
}

h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}

h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
}

h4 { font-size: 22px; line-height: 1.3; }
h5 { font-size: 18px; line-height: 1.35; }
h6 { font-size: 15px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-body); font-weight: 600; }

p {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-stand),
              border-color var(--dur-fast) var(--ease-stand);
}
a:hover {
  color: var(--terracotta-2);
  border-bottom-color: currentColor;
}

strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }

small { font-size: var(--type-caption-size); color: var(--text-muted); }

hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: var(--space-7) 0;
}

ul, ol { padding-inline-start: 1.4em; margin: 0 0 var(--space-4) 0; }
li     { margin-bottom: var(--space-2); }

/* -------- Utility text classes -------- */

.display {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
  font-weight: 500;
  margin: 0 0 var(--space-5) 0;
  text-wrap: balance;
}

.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  letter-spacing: var(--type-lead-ls);
  color: var(--ink-soft);
}

.caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-ls);
  color: var(--text-muted);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-micro-size);
  line-height: var(--type-micro-lh);
  letter-spacing: var(--type-micro-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 var(--space-3) 0;
}
.eyebrow--olive { color: var(--olive); }
.eyebrow--gold  { color: var(--gold-deep); }
.eyebrow--bone  { color: var(--bone); }

.serif-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
}

.numeric {
  font-feature-settings: 'tnum', 'lnum';
}

/* Price / weight strings stay LTR inside RTL bodies */
.price, .weight {
  unicode-bidi: embed;
  direction: ltr;
  display: inline-block;
}

/* Selection */
::selection {
  background: var(--gold-leaf);
  color: var(--indigo-deep);
}
/* ============================================================
   Al-Andaluzza · Buttons
   Three tiers: primary (terracotta), secondary (outline ink),
   ghost (text-only). Every button has a hairline gold focus
   ring so it reads "illuminated manuscript" rather than the
   default browser blue.
   ============================================================ */

.btn {
  --btn-bg:      var(--terracotta);
  --btn-bg-hov:  var(--terracotta-2);
  --btn-fg:      var(--bone);
  --btn-border:  transparent;
  --btn-shadow:  var(--shadow-soft);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: 14px 26px;
  min-height: 48px;

  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;

  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  box-shadow: var(--btn-shadow);

  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-stand),
    color            var(--dur-fast) var(--ease-stand),
    transform        var(--dur-fast) var(--ease-out-soft),
    box-shadow       var(--dur-base) var(--ease-out-soft),
    border-color     var(--dur-fast) var(--ease-stand);
}
.btn:hover         { background: var(--btn-bg-hov); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active        { transform: translateY(0); box-shadow: var(--shadow-soft); }
.btn:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Arrow icon flips in RTL */
.btn .arrow {
  display: inline-block;
  transform: scaleX(var(--dir-x));
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.btn:hover .arrow { transform: scaleX(var(--dir-x)) translateX(2px); }

/* --- Variants ----------------------------------------------- */

.btn--secondary {
  --btn-bg: transparent;
  --btn-bg-hov: var(--indigo);
  --btn-fg: var(--indigo);
  --btn-border: var(--indigo);
  --btn-shadow: none;
}
.btn--secondary:hover { color: var(--bone); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hov: var(--indigo-veil);
  --btn-fg: var(--indigo);
  --btn-border: transparent;
  --btn-shadow: none;
  padding: 14px 14px;
}
.btn--ghost:hover { color: var(--indigo-deep); }

.btn--gold {
  --btn-bg: var(--gold-leaf);
  --btn-bg-hov: var(--gold-deep);
  --btn-fg: var(--indigo-deep);
}

.btn--bone {
  --btn-bg: var(--bone);
  --btn-bg-hov: var(--bone-soft);
  --btn-fg: var(--indigo);
}

.btn--on-dark {
  --btn-bg: var(--bone);
  --btn-bg-hov: var(--gold-leaf);
  --btn-fg: var(--indigo-deep);
}

.btn--sm { padding: 10px 18px; min-height: 38px; font-size: 13px; }
.btn--lg { padding: 18px 32px; min-height: 56px; font-size: 16px; }

.btn--block { display: flex; width: 100%; }

/* ---- Form fields (sibling of buttons) ----------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.field label {
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="search"],
.field input[type="tel"],
.field select,
.field textarea {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--ink);
  background: var(--bone-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-stand),
              background var(--dur-fast) var(--ease-stand),
              box-shadow var(--dur-fast) var(--ease-stand);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196, 162, 75, 0.28);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: var(--type-caption-size); color: var(--text-muted); }
/* ============================================================
   Al-Andaluzza · Cards
   Product card uses a mihrab-frame mask at the top so the
   photo sits inside a multi-foil arch (the niche). Hover
   lifts the card and warms the frame from indigo to
   terracotta.
   ============================================================ */

.card {
  background: var(--bone-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-stand);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(184, 90, 54, 0.35);
}

/* -------- Product card --------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bone-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-stand);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.product-card::before {
  /* faint zellige watermark in the lower-right */
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 180px; height: 180px;
  background: var(--zellige-watermark, none) no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(184, 90, 54, 0.35);
}
.product-card:hover .product-card__frame { color: var(--terracotta); }

.product-card__frame {
  /*
    Mihrab-frame container. Aspect ratio matches the SVG: 320:520
    (≈ 5:8). The image sits inside an inner rect clipped to the
    multi-foil silhouette via SVG <clipPath> referenced from the
    mihrab-frame.svg pattern.
  */
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 8;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--bone) 0%, var(--bone-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo);
  overflow: hidden;
  transition: color var(--dur-base) var(--ease-stand);
  z-index: 1;
}

.product-card__frame img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  z-index: 1;
}

.product-card__frame .mihrab {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.product-card__frame--placeholder {
  background: linear-gradient(180deg, var(--terracotta) 0%, var(--terracotta-2) 100%);
  color: var(--bone);
}
.product-card__frame--olive      { background: linear-gradient(180deg, var(--olive) 0%, var(--olive-2) 100%); color: var(--bone); }
.product-card__frame--indigo     { background: linear-gradient(180deg, var(--indigo) 0%, var(--indigo-deep) 100%); color: var(--bone); }

.product-card__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive);
  z-index: 1;
}

.product-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  z-index: 1;
}

.product-card__desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  z-index: 1;
}

.product-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  z-index: 1;
}

.product-card__weight {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  unicode-bidi: embed;
  direction: ltr;
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--indigo);
  font-feature-settings: 'tnum', 'lnum';
  unicode-bidi: embed;
  direction: ltr;
}

.product-card__price .price__cents { font-size: 18px; opacity: 0.7; }

.product-card__cta {
  margin-top: var(--space-3);
  z-index: 1;
}

/* -------- Story / quote / cert cards -------------------------- */

.story-card {
  background: var(--bone-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border-top: 3px solid var(--terracotta);
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(244, 236, 216, 0.06);
}
.cert-badge--light {
  color: var(--indigo);
  border-color: var(--hairline);
  background: transparent;
}
.cert-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-leaf);
}
/* ============================================================
   Al-Andaluzza · Dividers
   Section-level decorative breaks: the Cordoban arch (full
   width, vertical rhythm) and the zellige band (a tiled
   horizontal strip). Both colour via currentColor so they
   adopt indigo on bone or bone on indigo as needed.
   ============================================================ */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: var(--space-7) 0;
  color: var(--indigo);
}

.divider--arch {
  height: 160px;
  width: 100%;
  background-image: url('/assets/patterns/arch-cordoba.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  /* SVG already strokes in currentColor — but background-image
     can't pick that up. Use mask + currentColor instead: */
  -webkit-mask: url('/assets/patterns/arch-cordoba.svg') no-repeat center bottom / contain;
          mask: url('/assets/patterns/arch-cordoba.svg') no-repeat center bottom / contain;
  background-image: none;
  background-color: currentColor;
}

.divider--rule {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--ink-muted);
}
.divider--rule::before,
.divider--rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.divider--rule .ornament {
  width: 18px; height: 18px;
  color: var(--gold-leaf);
}

/* Zellige band — tile the pattern horizontally as a 60 px tall strip */
.divider--zellige {
  height: 60px;
  width: 100%;
  color: var(--gold-leaf);
  -webkit-mask: url('/assets/patterns/zellige-1.svg') repeat-x left center / 60px 60px;
          mask: url('/assets/patterns/zellige-1.svg') repeat-x left center / 60px 60px;
  background: currentColor;
  margin: 0;
}
.divider--zellige.alt {
  -webkit-mask-image: url('/assets/patterns/zellige-2.svg');
          mask-image: url('/assets/patterns/zellige-2.svg');
}

/* Tileable section background using zellige-1 at very low contrast */
.bg-zellige {
  background-color: var(--bone);
  background-image: url('/assets/patterns/zellige-1.svg');
  background-repeat: repeat;
  background-size: 140px 140px;
  background-blend-mode: multiply;
  position: relative;
}
.bg-zellige::after {
  /* veil the pattern so it reads as watermark */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,236,216,0.55) 0%, rgba(244,236,216,0.92) 100%);
  pointer-events: none;
}
.bg-zellige > * { position: relative; z-index: 1; }
/* ============================================================
   Al-Andaluzza · Langpop chip
   Adapted from the Kawkav i18n chip pattern. A 12 px tracked
   language code + chevron, opening a small popover with the
   four languages: ES / EN / FR / AR. Cookie-driven, but the
   stylesheet here is presentation only — JS lives inline in
   header.html for v0; landing/shop will replace with their
   own runtime.
   ============================================================ */

.langpop {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.langpop__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-stand),
              color var(--dur-fast) var(--ease-stand);
  opacity: 0.85;
}
.langpop__trigger:hover { opacity: 1; }
.langpop__trigger:focus-visible {
  outline: 2px solid var(--gold-leaf);
  outline-offset: 2px;
}

.langpop__chevron {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-stand);
}
.langpop[aria-expanded="true"] .langpop__chevron {
  transform: rotate(-135deg) translateY(-2px);
}

.langpop__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 168px;
  padding: 6px;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-stand),
              transform var(--dur-fast) var(--ease-stand);
  z-index: 200;
  list-style: none;
  margin: 0;
}
.langpop[aria-expanded="true"] .langpop__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.langpop__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  width: 100%;
  cursor: pointer;
  text-align: start;
  letter-spacing: 0.02em;
}
.langpop__option:hover { background: var(--indigo-veil); }
.langpop__option[aria-current="true"] { color: var(--terracotta); }
.langpop__option[aria-current="true"]::after {
  content: "·";
  margin-inline-start: auto;
  color: var(--gold-leaf);
  font-size: 22px;
  line-height: 0.5;
}

.langpop__code {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink-muted);
  min-width: 24px;
}

/* RTL flip: menu opens to the start (left in RTL) */
[dir="rtl"] .langpop__menu { inset-inline-end: 0; }

/* Suggestion banner (lightweight; for landing only, optional) */
.langpop-suggest {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--indigo);
  color: var(--bone);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-body);
  font-size: 13px;
  z-index: 250;
}
.langpop-suggest .btn { padding: 8px 14px; min-height: 0; font-size: 12px; }