/* ==========================================================================
   بيان · Bayan — site theme
   Colours are sampled directly from the brand logo:
     plum  #5A0E30 (the "بيان" calligraphy)   rose  #E5819B (the light leaf)
     berry #9F4D73 (the mauve leaf)           pink  #E57E99 (the middle leaf)
   Written with CSS logical properties throughout, so the very same file
   renders correctly in Arabic (RTL) and in French/English (LTR).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --plum-900: #3a0721;
  --plum-800: #4a092b;
  --plum-700: #5c1136;
  --plum-600: #7e2a50;
  --berry-500: #9e4a71;
  --berry-400: #b8638a;
  --rose-500: #e96573;
  --rose-400: #f08f9c;
  --rose-200: #f6c3ca;
  --rose-100: #fbe7ea;
  --cream: #fbf8f9;
  --white: #fff;

  /* Ink */
  --ink: #2b1a22;
  --ink-soft: #6b4f5c;
  --ink-muted: #8d7480;

  /* Surfaces */
  --surface: var(--white);
  --surface-alt: var(--cream);
  --border: #f0dfe4;
  --border-strong: #e3c9d1;

  /* Shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation — kept soft and few; shadows are the cheapest way to make a
     page feel heavy, so there are only two. */
  --shadow-sm: 0 1px 2px rgba(74, 9, 43, .05), 0 2px 8px rgba(74, 9, 43, .04);
  --shadow-md: 0 4px 12px rgba(74, 9, 43, .07), 0 14px 34px rgba(74, 9, 43, .07);

  /* Rhythm */
  --gutter: 18px;
  --section: clamp(2.5rem, 6vw, 4.5rem);
  --max-width: 1180px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* The webfont is loaded non-blockingly; these stacks are what renders first and
   what renders forever if the font never arrives. */
html[lang="ar"] {
  --font-body: "Cairo", "Segoe UI", "Noto Naskh Arabic", "Droid Arabic Naskh", Tahoma, sans-serif;
}
html:not([lang="ar"]) {
  --font-body: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  /* Arabic needs a touch more line height to breathe. */
  overflow-wrap: break-word;
}
html[lang="ar"] body { line-height: 1.85; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* The `hidden` attribute is only honoured natively on HTML elements, so an <svg>
   carrying it stays visible unless it is enforced here. */
[hidden] { display: none !important; }

a { color: var(--plum-700); text-decoration: none; }
a:hover { color: var(--rose-500); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* Visible focus for keyboard users only — the shop has to be usable on a phone
   *and* on a laptop. */
:focus-visible {
  outline: 3px solid var(--rose-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--plum-800);
  letter-spacing: -.01em;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { line-height: 1.45; letter-spacing: 0; }

h1 { font-size: clamp(1.75rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }
h4 { font-size: 1.05rem; }

.lead { font-size: clamp(1.02rem, 2.2vw, 1.16rem); color: var(--ink-soft); }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--berry-500);
}
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: .85rem; }

.section-title { margin-bottom: .5rem; }
.section-sub { color: var(--ink-soft); max-width: 62ch; }

.muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { .container { padding-inline: 28px; } }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.section--alt { background: var(--surface-alt); }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.center > .section-sub { margin-inline: auto; }

.section-head { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--plum-800); color: var(--cream); }
.btn--primary:hover { background: var(--plum-700); color: var(--white); }

.btn--accent { background: var(--rose-500); color: var(--white); }
.btn--accent:hover { background: #d9535f; color: var(--white); }

.btn--ghost { background: transparent; color: var(--plum-800); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--rose-100); border-color: var(--rose-200); color: var(--plum-800); }

.btn--light { background: var(--cream); color: var(--plum-800); }
.btn--light:hover { background: var(--white); color: var(--plum-800); }

.btn--outline-light { background: transparent; color: var(--cream); border-color: rgba(251, 248, 249, .55); }
.btn--outline-light:hover { background: rgba(251, 248, 249, .14); color: var(--white); }

.btn--block { width: 100%; }
.btn--sm { padding: .55rem 1rem; font-size: .875rem; }
.btn--lg { padding: .95rem 1.9rem; font-size: 1.02rem; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Skip link + accessibility helpers
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--plum-800);
  color: var(--cream);
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { inset-inline-start: 1rem; color: var(--cream); }

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

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 249, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--cream); }
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}
@media (min-width: 900px) { .header-bar { min-height: 78px; } }

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
  margin-inline-end: auto;
}
.brand img { height: 40px; width: auto; }
@media (min-width: 900px) { .brand img { height: 50px; } }
.brand-text { display: none; }
@media (min-width: 480px) { .brand-text { display: block; } }
.brand-name { display: block; font-weight: 700; font-size: 1.1rem; color: var(--plum-800); line-height: 1.15; }
.brand-tag { display: block; font-size: .7rem; color: var(--ink-muted); line-height: 1.3; }
@media (max-width: 899px) { .brand-tag { display: none; } }

/* --- primary navigation --- */
.nav { display: none; }
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: .25rem;
  }
}

.nav-link {
  position: relative;
  display: block;
  padding: .5rem .85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .95rem;
  color: var(--plum-800);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav-link:hover { background: var(--rose-100); color: var(--plum-800); }
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: .85rem;
  bottom: .22rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rose-500);
  transform: scaleX(0);
  transition: transform .2s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--plum-800); }

/* --- header actions --- */
.header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--plum-800);
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.icon-btn:hover { background: var(--rose-100); border-color: var(--rose-200); color: var(--plum-800); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-btn { position: relative; width: auto; padding-inline: .85rem; gap: .45rem; }
.cart-btn__label { display: none; font-weight: 700; font-size: .9rem; }
@media (min-width: 1100px) { .cart-btn__label { display: inline; } }

.cart-count {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 21px;
  height: 21px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--rose-500);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* isolate, not `direction: ltr` — the latter would flip inset-inline-end
     back to the right edge and push the badge to the wrong side in Arabic. */
  unicode-bidi: isolate;
}

.nav-toggle { display: inline-flex; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* --- social links in the header -------------------------------------------
   Only shown once there is room for them: below this the same links live in the
   footer and in the mobile drawer. */
.header-social { display: none; align-items: center; gap: .4rem; }
@media (min-width: 1080px) { .header-social { display: flex; } }
.header-social .icon-btn svg { width: 19px; height: 19px; }

/* --- language switcher --- */
.lang { position: relative; }
.lang > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 42px;
  padding-inline: .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--plum-800);
  font-weight: 700;
  font-size: .85rem;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { background: var(--rose-100); border-color: var(--rose-200); }
.lang[open] > summary { background: var(--rose-100); border-color: var(--rose-200); }
.lang svg { width: 18px; height: 18px; }

.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .5rem);
  z-index: 60;
  min-width: 10rem;
  padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
}
.lang-menu a:hover { background: var(--rose-100); color: var(--plum-800); }
.lang-menu a[aria-current="true"] { color: var(--plum-800); background: var(--rose-100); }
.lang-menu a[aria-current="true"]::after { content: "✓"; color: var(--rose-500); font-weight: 700; }

/* --- mobile drawer --- */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--cream);
  padding-block: .5rem 1rem;
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 900px) { .mobile-nav[data-open="true"] { display: none; } }

.mobile-nav a {
  display: block;
  padding: .8rem .25rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--plum-800);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a[aria-current="page"] { color: var(--rose-500); }

/* Social row at the foot of the drawer, so phones get the links too. */
.mobile-nav__social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: 1rem;
  margin-top: .5rem;
  border-top: 1px solid var(--border);
}
.mobile-nav__social span {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-inline-end: .15rem;
}
/* Higher specificity than `.mobile-nav a` above, which is written for full-width
   drawer rows and would otherwise stretch these into bars. */
.mobile-nav .mobile-nav__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--plum-800);
}
.mobile-nav .mobile-nav__social a:hover { background: var(--rose-100); border-color: var(--rose-200); }
.mobile-nav .mobile-nav__social a svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 520px at 85% -10%, var(--rose-100) 0%, transparent 62%),
    linear-gradient(180deg, var(--cream) 0%, #fdfafb 100%);
  border-bottom: 1px solid var(--border);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/img/pattern-tile.svg");
  background-size: 190px;
  opacity: .05;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
}

.hero__title { margin-block: .6rem .9rem; }
.hero__text { max-width: 52ch; color: var(--ink-soft); font-size: clamp(1rem, 2.3vw, 1.14rem); }
.hero__actions { margin-top: 1.6rem; }

.hero__aside { position: relative; display: flex; justify-content: center; }
.hero__aside img { width: min(100%, 440px); height: auto; filter: drop-shadow(0 18px 40px rgba(74, 9, 43, .16)); }

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .95rem .42rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--plum-800);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.hero__chip svg { width: 17px; height: 17px; color: var(--rose-500); }

/* --------------------------------------------------------------------------
   9. Value / trust band
   -------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .value-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.value-card {
  padding: 1.4rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
}
.value-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: .9rem;
  border-radius: 13px;
  background: var(--rose-100);
  color: var(--plum-800);
}
.value-card__icon svg { width: 24px; height: 24px; }
.value-card h3 { margin-bottom: .35rem; font-size: 1.06rem; }
.value-card p { color: var(--ink-soft); font-size: .93rem; }

/* --------------------------------------------------------------------------
   10. Product grid + cards
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}
@media (min-width: 1000px) { .product-grid { gap: 1.5rem; } }

/* On the home page the three hero products get a little more room. */
.product-grid--featured { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
@media (max-width: 560px) { .product-grid--featured { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rose-200); }

.card__media {
  position: relative;
  display: block;
  background: var(--rose-100);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.card:hover .card__media img { transform: scale(1.035); }

.card__body { display: flex; flex-direction: column; flex: 1; gap: .4rem; padding: 1rem 1rem 1.1rem; }
@media (max-width: 560px) { .card__body { padding: .8rem .8rem .95rem; } }

.card__name { font-size: 1.03rem; line-height: 1.4; }
.card__name a { display: inline-block; padding-block: .25rem; color: var(--plum-800); }
.card__name a:hover { color: var(--rose-500); }

.card__desc {
  color: var(--ink-soft);
  font-size: .88rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 560px) { .card__desc { display: none; } }

.card__foot { margin-top: auto; padding-top: .75rem; display: grid; gap: .6rem; }

/* --- price --- */
.price {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  /* Keeps "1.250,500 د.ت" from being re-ordered by the bidi algorithm. */
  unicode-bidi: isolate;
}
.price__now { font-weight: 700; font-size: 1.12rem; color: var(--plum-800); font-variant-numeric: tabular-nums; }
.price__was { font-size: .85rem; color: var(--ink-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.price--lg .price__now { font-size: clamp(1.4rem, 4vw, 1.85rem); }

/* --- badges --- */
.badge {
  position: absolute;
  top: .7rem;
  inset-inline-start: .7rem;
  padding: .28rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--plum-800);
  color: var(--cream);
}
.badge--sale { background: var(--rose-500); color: var(--white); }
.badge--out { background: var(--ink-muted); color: var(--white); }

.stock {
  font-size: .82rem;
  font-weight: 600;
  color: #2f7d4f;
}
.stock--out { color: var(--rose-500); }

/* --------------------------------------------------------------------------
   11. Product detail
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding-block: 1rem;
  font-size: .85rem;
  color: var(--ink-muted);
}
.breadcrumb a { display: inline-block; padding-block: .3rem; color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--rose-500); }
.breadcrumb li { display: flex; align-items: center; gap: .45rem; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
html[dir="rtl"] .breadcrumb li + li::before { content: "/"; }

.product {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 880px) { .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.product__gallery { position: relative; }

.product__media {
  position: relative;
  background: var(--rose-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
/* All the gallery images share one box; only the active one is drawn, so the
   page never reflows as the visitor flicks between photographs. */
.product__media .gallery__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.product__media .gallery__image.is-active { opacity: 1; }
@media (min-width: 880px) { .product__gallery { position: sticky; top: 96px; } }

.gallery__thumbs {
  display: flex;
  gap: .5rem;
  margin-top: .7rem;
  overflow-x: auto;
  padding-bottom: .15rem;
  /* Horizontal scrolling only; keeps the strip usable on a phone. */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gallery__thumb {
  flex: 0 0 auto;
  width: 64px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--rose-100);
  opacity: .72;
  transition: opacity .16s var(--ease), border-color .16s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--plum-800); opacity: 1; }

.product__title { margin-block: .35rem .75rem; }
.product__short { color: var(--ink-soft); font-size: 1.03rem; }
.product__price { margin-block: 1.1rem .35rem; }
.product__tax-note { font-size: .82rem; color: var(--ink-muted); }

.buy-form { margin-top: 1.4rem; display: grid; gap: .9rem; }
@media (min-width: 520px) { .buy-form { grid-template-columns: auto 1fr; align-items: end; } }
.buy-form .btn { grid-column: 1 / -1; }
@media (min-width: 520px) { .buy-form .btn { grid-column: auto; } }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
  /* The stepper lives inside .field, which is a grid. A grid item is blockified
     and stretched by default, so without this the 134px of controls sit at the
     start of a full-width box with a large empty gap beside them. max-content
     keeps the pill hugging its own buttons. */
  justify-self: start;
  width: max-content;
}
.qty button {
  width: 40px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--plum-800);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.qty button:hover { background: var(--rose-100); }
.qty input {
  width: 54px;
  height: 44px;
  border: 0;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.spec-list {
  margin-top: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec-list div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) 1fr;
  gap: .75rem;
  padding: .7rem 1rem;
  font-size: .92rem;
}
.spec-list div + div { border-top: 1px solid var(--border); }
.spec-list dt { color: var(--ink-muted); font-weight: 600; }
.spec-list dd { margin: 0; font-weight: 600; color: var(--plum-800); }
html[lang="ar"] .spec-list dd { font-weight: 700; }

.product__section { margin-top: 2.2rem; }
.product__section h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.prose { color: var(--ink-soft); }
.prose p + p { margin-top: .85rem; }

.notice {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--rose-200);
  background: var(--rose-100);
  color: var(--plum-800);
  font-size: .92rem;
  font-weight: 600;
}
.notice svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .15rem; color: var(--rose-500); }
.notice--success { border-color: #bfe3cd; background: #eef8f1; color: #23603c; }
.notice--success svg { color: #2f7d4f; }
.notice--error { border-color: #f3c2c7; background: #fdeef0; color: #8c2733; }
.notice--error svg { color: #c0392b; }

/* --------------------------------------------------------------------------
   12. Cart
   -------------------------------------------------------------------------- */
.cart-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; } }

.cart-list { display: grid; gap: .85rem; }

.cart-row {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (min-width: 620px) { .cart-row { grid-template-columns: 96px 1fr auto; gap: 1.1rem; padding: 1rem; } }

.cart-row__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--rose-100);
  aspect-ratio: 4 / 5;
}
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-row__name { font-weight: 700; color: var(--plum-800); font-size: .98rem; line-height: 1.4; }
.cart-row__name a { display: inline-block; padding-block: .2rem; color: inherit; }
.cart-row__name a:hover { color: var(--rose-500); }
.cart-row__unit { font-size: .84rem; color: var(--ink-muted); unicode-bidi: isolate; }
.cart-row__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .55rem; }

.cart-row__end { display: grid; justify-items: end; gap: .5rem; text-align: end; }
html[lang="ar"] .cart-row__end { justify-items: start; text-align: start; }
.cart-row__total { font-weight: 700; color: var(--plum-800); unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.link-danger {
  display: inline-block;
  border: 0;
  background: none;
  /* Padding, not height, so the touch target grows without moving the text. */
  padding: .45rem 0;
  color: var(--rose-500);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-danger:hover { color: #c0392b; }

.summary {
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .summary { position: sticky; top: 96px; } }

.summary h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
  font-size: .95rem;
}
.summary__row + .summary__row { border-top: 1px dashed var(--border); }
.summary__row span:last-child { font-weight: 700; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.summary__row--total {
  margin-top: .3rem;
  padding-top: .9rem;
  border-top: 2px solid var(--border) !important;
  font-size: 1.12rem;
}
.summary__row--total span:last-child { font-size: 1.25rem; color: var(--plum-800); }
.summary .btn { margin-top: 1rem; }
.summary__note { margin-top: .9rem; font-size: .82rem; color: var(--ink-muted); display: flex; gap: .45rem; }
.summary__note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .2rem; color: var(--berry-500); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form-card {
  padding: clamp(1.15rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-card > h2 { font-size: 1.2rem; margin-bottom: 1.1rem; }

.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: .35rem; }
.field > label { font-weight: 600; font-size: .9rem; color: var(--plum-800); }
.field .hint { font-size: .8rem; color: var(--ink-muted); }
.field .req { color: var(--rose-500); }

.input,
.select,
.textarea {
  width: 100%;
  padding: .72rem .85rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 1rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--berry-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--berry-500);
  box-shadow: 0 0 0 3px rgba(158, 74, 113, .16);
}
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a092b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: right .9rem center;
  padding-inline-end: 2.4rem;
}
html[dir="rtl"] .select {
  background-position: left .9rem center;
  padding-inline-end: .85rem;
  padding-inline-start: 2.4rem;
}

/* Validation — the class names match what ASP.NET Core's tag helpers emit. */
.field-validation-error,
.validation-summary-errors {
  color: #b3261e;
  font-size: .84rem;
  font-weight: 600;
}
.input.input-validation-error,
.select.input-validation-error,
.textarea.input-validation-error { border-color: #d94b52; background: #fffafb; }
.input.input-validation-error:focus,
.select.input-validation-error:focus,
.textarea.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(217, 75, 82, .16); }

.field-validation-valid { display: none; }

.validation-summary-errors {
  margin-bottom: 1.2rem;
  padding: .9rem 1.1rem;
  border: 1px solid #f3c2c7;
  border-radius: var(--radius);
  background: #fdeef0;
}
.validation-summary-errors ul { list-style: none; display: grid; gap: .3rem; }
.validation-summary-errors li::before { content: "• "; }

.validation-summary-valid { display: none; }

/* --- cash-on-delivery choice --- */
.pay-option {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid var(--plum-800);
  border-radius: var(--radius);
  background: var(--rose-100);
}
.pay-option__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--white);
  color: var(--plum-800);
}
.pay-option__icon svg { width: 22px; height: 22px; }
.pay-option__title { font-weight: 700; color: var(--plum-800); display: flex; align-items: center; gap: .5rem; }
.pay-option__title .tick { color: #2f7d4f; }
.pay-option__text { font-size: .88rem; color: var(--ink-soft); margin-top: .2rem; }
.pay-option__note { font-size: .8rem; color: var(--ink-muted); margin-top: .4rem; font-style: italic; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--ink-soft);
}
.trust-row span { display: inline-flex; align-items: center; gap: .4rem; }
.trust-row svg { width: 16px; height: 16px; color: var(--berry-500); }

/* --------------------------------------------------------------------------
   14. Order confirmation
   -------------------------------------------------------------------------- */
.confirm-hero { text-align: center; max-width: 44rem; margin-inline: auto; }
.confirm-hero__icon {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: #eef8f1;
  color: #2f7d4f;
}
.confirm-hero__icon svg { width: 40px; height: 40px; }

.order-ref {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.2rem;
  padding: .6rem 1.1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-weight: 700;
  color: var(--plum-800);
}
.order-ref code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.02rem;
  letter-spacing: .03em;
  direction: ltr;
  unicode-bidi: isolate;
}

.order-lines { display: grid; gap: .6rem; margin-bottom: 1rem; }
.order-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.order-line__name { color: var(--ink-soft); }
.order-line__name b { color: var(--plum-800); }
.order-line__amount { font-weight: 700; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   15. Contact + about
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: start;
}
@media (min-width: 880px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px) { .split--wide-start { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.info-list { display: grid; gap: .25rem; }
.info-item {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.info-item + .info-item { margin-top: .6rem; }
.info-item__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--rose-100);
  color: var(--plum-800);
}
.info-item__icon svg { width: 21px; height: 21px; }
.info-item__label { font-size: .8rem; font-weight: 700; color: var(--berry-500); }
.info-item__value { font-weight: 600; color: var(--plum-800); unicode-bidi: isolate; }
.info-item__value a { color: inherit; }
.info-item__value a:hover { color: var(--rose-500); }

.faq { display: grid; gap: .6rem; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.1rem;
  font-weight: 700;
  color: var(--plum-800);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--rose-500);
  line-height: 1;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body { padding: 0 1.1rem 1.1rem; color: var(--ink-soft); font-size: .94rem; }

.stat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 2rem;
}
.stat {
  padding: 1.2rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.stat__value { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--plum-800); line-height: 1.1; }
.stat__label { font-size: .84rem; color: var(--ink-muted); margin-top: .3rem; }

/* --------------------------------------------------------------------------
   16. Call-to-action band + story band
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  background: var(--plum-800);
  color: var(--cream);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/img/pattern-tile.svg");
  background-size: 170px;
  opacity: .07;
  pointer-events: none;
}
.band__inner { position: relative; padding-block: clamp(2.5rem, 6vw, 4rem); }
.band h2 { color: var(--cream); }
.band p { color: rgba(251, 248, 249, .82); }
.band .btn-row { margin-top: 1.5rem; }

.story { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) { .story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--rose-100);
}

/* --------------------------------------------------------------------------
   17. Shop toolbar
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.toolbar__count { font-size: .9rem; color: var(--ink-muted); font-weight: 600; }

.toolbar__sort {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* Wrapping plus a shrinkable select is what keeps the sort form inside the card
     on a narrow phone. Without both, the select's intrinsic width pushed the Apply
     button past the card edge and made the whole page scroll sideways. */
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  flex: 1 1 auto;
}
.toolbar__sort label { font-size: .88rem; font-weight: 600; color: var(--plum-800); white-space: nowrap; }
.toolbar__sort .select {
  width: auto;
  min-width: 0;
  flex: 1 1 8rem;
  max-width: 18rem;
  padding-block: .5rem;
  font-size: .9rem;
}

@media (max-width: 600px) {
  /* One row each: the count above, the controls below. */
  .toolbar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .toolbar__count { order: -1; }
  .toolbar__sort { justify-content: stretch; }

  /* A small flex basis matters: with `auto` the wrapping decision is made from the
     select's widest option, and Arabic's "السعر: من الأقل إلى الأعلى" is long enough
     to push the Apply button onto its own row. Starting from 6rem lets it wrap only
     when genuinely necessary, then grow to fill whatever is left. */
  .toolbar__sort .select { flex: 1 1 6rem; max-width: none; }

  /* Hide the words "sort by" but keep them for a screen reader: the select then has
     room to sit beside the Apply button instead of pushing it onto its own row. */
  .toolbar__sort label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

.delivery-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .75rem;
  padding: .7rem 1rem;
  background: var(--rose-100);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius);
  color: var(--plum-800);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  unicode-bidi: isolate;
}
.delivery-strip svg { width: 18px; height: 18px; color: var(--rose-500); flex: 0 0 auto; }

.empty-state {
  text-align: center;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1rem;
  max-width: 32rem;
  margin-inline: auto;
}
.empty-state__icon {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--rose-100);
  color: var(--berry-500);
}
.empty-state__icon svg { width: 42px; height: 42px; }
.empty-state p { color: var(--ink-soft); margin-top: .5rem; }
.empty-state .btn { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--plum-900);
  color: rgba(251, 248, 249, .78);
  margin-top: auto;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/img/pattern-tile.svg");
  background-size: 150px;
  opacity: .05;
  pointer-events: none;
}
.site-footer__inner { position: relative; padding-block: clamp(2.25rem, 5vw, 3.25rem) 1.5rem; }

.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 2.5rem; } }

.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.footer-brand img {
  height: 48px;
  width: auto;
  padding: .3rem .5rem;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.footer-brand strong { color: var(--cream); font-size: 1.15rem; }

.site-footer p { font-size: .9rem; }
.site-footer h3 {
  color: var(--cream);
  font-size: .95rem;
  margin-bottom: .85rem;
  letter-spacing: .02em;
}
html[lang="ar"] .site-footer h3 { letter-spacing: 0; }

.footer-links { display: grid; gap: .1rem; }
.footer-links a {
  display: block;
  /* Comfortable on a thumb: most visitors arrive on a phone. */
  padding-block: .5rem;
  color: rgba(251, 248, 249, .78);
  font-size: .92rem;
}
.footer-links a:hover { color: var(--rose-400); }
.footer-links > span { display: block; padding-block: .5rem; }

.social-row { display: flex; gap: .5rem; margin-top: 1rem; }
.social-row a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(251, 248, 249, .1);
  color: var(--cream);
  transition: background-color .16s var(--ease);
}
.social-row a:hover { background: var(--rose-500); color: var(--white); }
.social-row svg { width: 19px; height: 19px; }

.footer-bottom {
  position: relative;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(251, 248, 249, .14);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
}
.footer-bottom span { unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.text-end { text-align: end; }
.text-sm { font-size: .87rem; }
.text-xs { font-size: .8rem; }

/* --------------------------------------------------------------------------
   20. QR landing page (/link)
   --------------------------------------------------------------------------
   A standalone page with no site header or footer, opened on a phone straight
   from a camera app. It reuses the tokens above so the brand still reads
   correctly, but the layout is its own: one centred column of large,
   thumb-sized cards.
   -------------------------------------------------------------------------- */
.linkpage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 2rem 1.25rem 2.5rem;
  background:
    radial-gradient(900px 420px at 50% -8%, var(--rose-100) 0%, transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, #fdfafb 100%);
}
.linkpage::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/img/pattern-tile.svg");
  background-size: 190px;
  opacity: .05;
  pointer-events: none;
}

.linkpage__inner {
  position: relative;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
}

.linkpage__brand { text-align: center; margin-bottom: 1.75rem; }
.linkpage__brand img {
  width: 148px;
  height: auto;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 10px 24px rgba(74, 9, 43, .14));
}
.linkpage__brand h1 { font-size: 1.4rem; margin-bottom: .3rem; }
.linkpage__brand p { color: var(--ink-soft); font-size: .95rem; }

.linkpage__section {
  margin: 1.6rem 0 .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--berry-500);
  text-align: center;
}
html[lang="ar"] .linkpage__section { letter-spacing: 0; text-transform: none; font-size: .88rem; }

.linkcard {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.05rem;
  margin-bottom: .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  /* Comfortably above the 44px minimum touch target. */
  min-height: 64px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              border-color .16s var(--ease), background-color .16s var(--ease);
}
.linkcard:hover,
.linkcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--rose-200);
}
.linkcard:active { transform: translateY(0); }

.linkcard--primary {
  background: var(--plum-800);
  border-color: var(--plum-800);
  box-shadow: 0 6px 18px rgba(74, 9, 43, .22);
}
.linkcard--primary .linkcard__title { color: var(--cream); }
.linkcard--primary .linkcard__text { color: rgba(251, 248, 249, .76); }
.linkcard--primary .linkcard__icon { background: rgba(251, 248, 249, .14); color: var(--cream); }
.linkcard--primary .linkcard__chevron { color: rgba(251, 248, 249, .6); }
.linkcard--primary:hover { background: var(--plum-700); border-color: var(--plum-700); }

.linkcard__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--rose-100);
  color: var(--plum-800);
}
.linkcard__icon svg { width: 23px; height: 23px; }
.linkcard__icon--facebook { background: #e7f0fd; color: #1877f2; }
.linkcard__icon--instagram { background: #fdeaf0; color: #c8377f; }

.linkcard__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.linkcard__title { font-weight: 700; color: var(--plum-800); font-size: 1rem; line-height: 1.35; }
.linkcard__text {
  font-size: .84rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A handle such as @bayen.tn has to read left-to-right, but it should still sit
   on the same side as the rest of the card's text in Arabic. */
.linkcard__text[dir="ltr"] { text-align: start; }
html[dir="rtl"] .linkcard__text[dir="ltr"] { text-align: right; }

.linkcard__chevron { flex: 0 0 auto; color: var(--border-strong); }
.linkcard__chevron svg { width: 20px; height: 20px; }
/* The chevron should point the way the language reads. */
html[dir="rtl"] .linkcard__chevron { transform: scaleX(-1); }

.linkpage__footer {
  margin-top: auto;
  padding-top: 2rem;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-muted);
}
.linkpage__footer p + p { margin-top: .15rem; }

/* --------------------------------------------------------------------------
   21. Motion preferences + print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .card:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
  .linkcard:hover, .linkcard:focus-visible { transform: none; }
}

@media print {
  .site-header, .site-footer, .btn, .toolbar { display: none !important; }
  body { background: #fff; }
  .summary { position: static; box-shadow: none; border-color: #ccc; }
}