/* ==========================================================================
   AL-AHED GROUP — GoDaddy surface layer.
   Loaded after app.css. Only component treatment lives here; all colour,
   type, spacing and radius values come from the tokens in app.css.
   Reference measurements taken from godaddy.com:
     header        black #111 bar, white label, sentence-case nav
     nav link      radius 8px, weight 600, hover = translucent white pill
     button        radius 6-12px, weight 700, sentence case, no letter-spacing
     input         radius 6px, 1px solid #D4DBE0
     card          1px solid #D4DBE0, radius 12px, soft shadow on hover
     kicker        12px, weight 700, uppercase, letter-spacing .1em
     h1            47px / 700 / leading 1.1     body 16px / 1.5
   ========================================================================== */

/* ---------- 1. Type ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.hero__title, .brand__name, .h1, .h2, .h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -.02em;
}
h1 { line-height: 1.1; }
h2 { line-height: 1.15; }
h3, h4 { line-height: 1.25; letter-spacing: -.01em; }
p, li, td, th, .lead { font-weight: 400; }
.lead { line-height: 1.65; }

.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gd-teal);
}
[dir='rtl'] .kicker { letter-spacing: .02em; }
.kicker--bare { color: var(--gd-muted); }
.section--navy .kicker, .hero .kicker { color: var(--gd-teal-400); }

/* ---------- 2. Buttons --------------------------------------------------- */
.btn {
  padding: .9rem 1.5rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--r-md);
  border-width: 1.5px;
  --btn-bg: var(--gd-ink);
  --btn-fg: #fff;
  --btn-bd: var(--gd-ink);
}
.btn:hover { box-shadow: var(--shadow-2); }
.btn--gold {                      /* primary action → GoDaddy teal */
  --btn-bg: var(--gd-teal);
  --btn-fg: #fff;
  --btn-bd: var(--gd-teal);
}
.btn--gold:hover { --btn-bg: #076165; --btn-bd: #076165; }
.btn--red { --btn-bg: var(--gd-red); --btn-fg: #fff; --btn-bd: var(--gd-red); }
.btn--red:hover { --btn-bg: #b61401; --btn-bd: #b61401; }
.btn--ghost { --btn-bg: #fff; --btn-fg: var(--gd-ink); --btn-bd: var(--gd-border); }
.btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--gd-ink); --btn-bd: var(--gd-ink); }
.btn--onnavy { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.btn--onnavy:hover { --btn-bg: #fff; --btn-fg: var(--gd-ink); --btn-bd: #fff; }
.btn--quiet { text-transform: none; letter-spacing: 0; font-weight: 700; }
.btn--quiet:hover { --btn-fg: var(--gd-teal); }
.btn--sm { padding: .6rem 1rem; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn--pill { border-radius: var(--r-full); padding-inline: 1.75rem; }
.btn--block { width: 100%; }

/* ---------- 3. Utility strip + header ------------------------------------ */
.util {
  background: var(--gd-ink);
  color: #c9ced4;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.util__inner { min-height: 38px; }
.util a { color: #e9ebee; text-decoration: none; }
.util a:hover { color: var(--gd-teal-400); }
.util__dot { color: rgba(255,255,255,.35); }

.site-header {
  background: var(--gd-ink);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: none;
}
.site-header.is-stuck { box-shadow: 0 6px 20px -12px rgba(0,0,0,.55); }
.site-header__inner { min-height: var(--header-h); }

.brand__mark { width: 46px; }
.brand__name { color: #fff; font-size: 1.05rem; letter-spacing: -.01em; }
.brand__sub { color: var(--gd-teal-400); font-size: .6rem; }

.nav a {
  color: #f2f3f5;
  font-weight: 600;
  border-radius: var(--r-md);
  padding: .6rem .85rem;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav a[aria-current='page'] { color: #fff; background: rgba(255,255,255,.12); }
.nav a[aria-current='page']::after { display: none; }

.lang-toggle {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: var(--r-md);
  font-weight: 700;
}
.lang-toggle:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.10); }
.burger { border-color: rgba(255,255,255,.4); }
.burger span, .burger span::before, .burger span::after { background: #fff; }
.header-actions .btn--gold { --btn-bg: var(--gd-teal); }

/* mobile drawer — GoDaddy keeps it black with a white close button */
.drawer { background: var(--gd-ink); }
.drawer nav a { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.2rem,4.4vw,1.6rem); }
.drawer nav a:hover { color: var(--gd-teal-400); }

/* ---------- 4. Hero ------------------------------------------------------ */
.hero { background: var(--gd-ink); }
.hero__media::after {
  background:
    linear-gradient(100deg, rgba(17,17,17,.94) 4%, rgba(17,17,17,.86) 32%, rgba(17,17,17,.48) 64%, rgba(17,17,17,.28) 100%),
    linear-gradient(0deg, rgba(17,17,17,.90), rgba(17,17,17,.10) 62%);
}
[dir='rtl'] .hero__media::after {
  background:
    linear-gradient(260deg, rgba(17,17,17,.94) 4%, rgba(17,17,17,.86) 32%, rgba(17,17,17,.48) 64%, rgba(17,17,17,.28) 100%),
    linear-gradient(0deg, rgba(17,17,17,.90), rgba(17,17,17,.10) 62%);
}
.hero__title { font-size: var(--fs-display-1); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
.hero__lead { color: #d3d7db; }
.hero--home .hero__inner { min-height: clamp(520px, 72vh, 760px); }
@media (max-width: 980px) {
  .hero__media::after { background: linear-gradient(180deg, rgba(17,17,17,.80), rgba(17,17,17,.94) 55%, var(--gd-ink)); }
  [dir='rtl'] .hero__media::after { background: linear-gradient(180deg, rgba(17,17,17,.80), rgba(17,17,17,.94) 55%, var(--gd-ink)); }
}

/* advantage stamp → GoDaddy teal panel */
.stamp {
  border: 1px solid rgba(27,219,219,.42);
  background: rgba(9,117,122,.24);
  border-radius: var(--r-lg);
}
.stamp__value { font-family: var(--font-sans); font-weight: 800; color: var(--gd-teal-400); letter-spacing: -.03em; }
.stamp__label { color: #dbe6e6; }

/* ---------- 5. Cards, badges, sections ----------------------------------- */
.card {
  border: 1px solid var(--gd-border);
  border-radius: var(--r-lg);
  box-shadow: none;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.card--hover:hover, .card--flush:hover {
  box-shadow: var(--shadow-3);
  border-color: var(--gd-ink);
  transform: translateY(-2px);
}
.card--navy { background: var(--gd-ink); border-color: var(--gd-ink); }
.card--gold-edge { border-top: 3px solid var(--gd-teal); }

.badge {
  border-radius: var(--r-full);
  font-weight: 700;
  padding: .34rem .7rem;
  font-size: var(--fs-micro);
  letter-spacing: .01em;
}
.badge--gold { background: var(--gd-teal-100); color: var(--gd-teal); border-color: transparent; }
.badge--navy { background: var(--gd-ink); color: #fff; }
.badge--ok { background: #e3f4e9; color: var(--gd-green); }
.badge--warn { background: #fdf1e0; color: var(--gd-gold); }
.badge--red { background: #fdece9; color: var(--gd-red); }

.section--ivory { background: var(--gd-warm); }
.section--navy { background: var(--gd-ink); }
.section--hairline { border-top: 1px solid var(--gd-border); }

.notice { border-radius: var(--r-lg); }
.notice--navy { background: var(--gd-soft); border-color: var(--gd-border); color: var(--gd-grey); }
.notice--gold { background: var(--gd-teal-100); border-color: transparent; color: #054f53; }

.brandcard {
  border: 1px solid var(--gd-border);
  border-radius: var(--r-lg);
  background: #fff;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.brandcard:hover { box-shadow: var(--shadow-3); border-color: var(--gd-ink); transform: translateY(-2px); }
.brandcard__name { font-weight: 800; color: var(--gd-ink); }

.step { border-color: var(--gd-border); }
.step__num, .step .card__num { color: var(--gd-teal); }

/* ---------- 6. Forms ------------------------------------------------------ */
.field__label { font-weight: 700; color: var(--gd-ink); font-size: var(--fs-sm); }
.field input, .field select, .field textarea,
input:not([type]), input[type='text'], input[type='email'], input[type='tel'], input[type='search'],
input[type='password'], input[type='number'], select, textarea {
  border: 1.5px solid var(--gd-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--gd-ink);
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gd-teal);
  box-shadow: 0 0 0 3px rgba(9,117,122,.16);
}

/* ---------- 7. Tables, footer -------------------------------------------- */
.table-wrap { border: 1px solid var(--gd-border); border-radius: var(--r-lg); }
table.data thead th {
  background: var(--gd-soft);
  color: var(--gd-grey);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}
table.data tbody tr:hover { background: #fafbfc; }

.site-footer { background: var(--gd-ink); color: #a7adb4; }
.site-footer__name { color: #fff; font-family: var(--font-sans); font-weight: 800; }
.site-footer a { color: #dfe3e7; }
.site-footer a:hover { color: var(--gd-teal-400); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.10); }

/* ---------- 8. Product cards --------------------------------------------
   The catalogue is now a picture grid rather than a price table: one pack
   shot per line, brand + name, packing, status. Prices stay behind the gate.
   ------------------------------------------------------------------------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 1.15rem;
}
.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gd-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.pcard:hover { box-shadow: var(--shadow-3); border-color: var(--gd-ink); transform: translateY(-3px); }
.pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fff 55%, #f4f6f8 100%);
  display: grid;
  place-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--gd-border-soft);
}
.pcard__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--dur-3) var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.045); }
.pcard__flag {
  position: absolute;
  inset-block-start: .6rem;
  inset-inline-start: .6rem;
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.pcard__body { padding: .9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.pcard__brand {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gd-muted);
}
[dir='rtl'] .pcard__brand { letter-spacing: .01em; }
.pcard__name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--gd-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__meta {
  margin-top: auto;
  padding-top: .55rem;
  font-size: var(--fs-micro);
  color: var(--gd-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.pcard__code { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: #9aa3ad; }
.pcard__price {
  font-weight: 800;
  color: var(--gd-teal);
  font-size: 1rem;
}
.pcard__lock {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--gd-muted);
}

/* ---------- 9. Product detail page --------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
.pdp__media {
  position: relative;
  background: linear-gradient(180deg, #fff 52%, #f2f4f7 100%);
  border: 1px solid var(--gd-border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  place-items: center;
  min-height: 380px;
}
.pdp__media img { max-width: 100%; max-height: 520px; object-fit: contain; }
.pdp__facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pdp__title { font-size: var(--fs-display-2); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.pdp__sub { color: var(--gd-muted); margin-top: .5rem; font-size: var(--fs-lead); }
.pdp__price {
  margin-top: 1.5rem;
  border: 1px solid var(--gd-border);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem;
  background: #fff;
}
.pdp__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .4rem; }
.pdp__price-row + .pdp__price-row { border-top: 1px dashed var(--gd-border); }
.pdp__price-label { font-size: var(--fs-sm); color: var(--gd-muted); font-weight: 600; }
.pdp__price-value { font-size: 1.4rem; font-weight: 800; color: var(--gd-ink); letter-spacing: -.02em; }
.pdp__price-value--carton { color: var(--gd-teal); }
.pdp__locked {
  margin-top: 1.5rem;
  border: 1px solid var(--gd-border);
  border-radius: var(--r-lg);
  background: var(--gd-soft);
  padding: 1.15rem 1.25rem;
}
.spec { border-top: 1px solid var(--gd-border); margin-top: 2rem; }
.spec__row { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--gd-border); font-size: var(--fs-sm); }
@media (max-width: 560px) { .spec__row { grid-template-columns: 1fr; gap: .15rem; } }
.spec__key { color: var(--gd-muted); font-weight: 600; }
.spec__val { color: var(--gd-ink); font-weight: 600; }

/* ---------- 10. Storefront cards get the same picture treatment ---------- */
.storecard__media img { width: 100%; height: auto; }
/* ---------- 11. Breadcrumbs ---------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: var(--fs-xs); color: var(--gd-muted);
}
.crumbs a { color: var(--gd-muted); text-decoration: none; }
.crumbs a:hover { color: var(--gd-ink); text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--gd-ink); font-weight: 600; }
.crumbs span[aria-hidden] { color: var(--gd-border); }

/* ---------- 12. Section head --------------------------------------------- */
.shead {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  align-items: end; justify-content: space-between; margin-bottom: 1.75rem;
}
.shead h2 { margin: .4rem 0 0; }

/* ---------- 13. Category tiles ------------------------------------------- */
.catgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 1.15rem;
}
.cattile {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--gd-border); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.cattile:hover { box-shadow: var(--shadow-3); border-color: var(--gd-ink); transform: translateY(-3px); }
.cattile__media {
  aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff 40%, #eef1f4 100%);
  border-bottom: 1px solid var(--gd-border-soft);
}
.cattile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.cattile:hover .cattile__media img { transform: scale(1.045); }
.cattile__body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.cattile__name { font-weight: 800; color: var(--gd-ink); }
.cattile__count { font-size: var(--fs-micro); color: var(--gd-muted); }

/* ---------- 14. Product page thumbnails ---------------------------------- */
.pdp__thumbs { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.pdp__thumb {
  width: 78px; height: 78px; border: 1.5px solid var(--gd-border);
  border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff 60%, #f2f4f7 100%); padding: .3rem;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pdp__thumb:hover { border-color: var(--gd-ink); transform: translateY(-2px); }
.pdp__thumb.is-active { border-color: var(--gd-ink); }
.pdp__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- 15. Mobile tightening ---------------------------------------- */
@media (max-width: 640px) {
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .8rem; }
  .pcard__body { padding: .7rem .75rem .85rem; }
  .pcard__name { font-size: .875rem; }
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .cattile__name { font-size: .9rem; }
  .pdp__media { min-height: 290px; padding: 1.25rem; }
}

/* ---------- 16. Bidirectional details ------------------------------------ */
/* Latin phone numbers inside an RTL page must not be re-ordered by the
   bidi algorithm, otherwise +20 111 691 1106 renders as 1106 691 111 20+. */
a[href^='tel:'],
.util a[href^='tel:'],
.stafffoot a[href^='tel:'] { direction: ltr; unicode-bidi: isolate; }

/* The brand marquee sat at #9aa3ad (≈2.6:1 on white) — too faint to read.
   GoDaddy's own wordmark strips are heavy and near-black, so match that. */
.marquee__item { color: var(--gd-grey); font-weight: 700; letter-spacing: -.01em; }
.marquee__item:hover { color: var(--gd-teal); }

/* ==========================================================================
   فئات التنسيق القادمة من استوديو التصميم
   ========================================================================== */

/* أحجام العناوين */
.fs-xl h1, .fs-xl h2, .fs-xl h3 { font-size: 1.3em; }
.fs-lg h1, .fs-lg h2, .fs-lg h3 { font-size: 1.15em; }
.fs-sm h1, .fs-sm h2, .fs-sm h3 { font-size: .92em; }
.fs-xs h1, .fs-xs h2, .fs-xs h3 { font-size: .82em; }

/* التباعد الرأسي */
.pad-air   { padding-block: clamp(4rem, 8vw, 7rem) !important; }
.pad-tight { padding-block: clamp(1.6rem, 3vw, 2.6rem) !important; }

/* الخطوط */
.ff-display h1, .ff-display h2, .ff-display h3, .ff-display h4,
.ff-display p, .ff-display span, .ff-display li { font-family: var(--font-display) !important; }
.ff-body h1, .ff-body h2, .ff-body h3, .ff-body h4,
.ff-body p, .ff-body span, .ff-body li { font-family: var(--font-sans) !important; }
.ff-serif h1, .ff-serif h2, .ff-serif h3, .ff-serif h4,
.ff-serif p, .ff-serif li { font-family: 'Fraunces', Georgia, serif !important; }
.ff-amiri h1, .ff-amiri h2, .ff-amiri h3, .ff-amiri h4,
.ff-amiri p, .ff-amiri li { font-family: 'Amiri', Georgia, serif !important; }
.ff-mono h1, .ff-mono h2, .ff-mono h3, .ff-mono h4,
.ff-mono p, .ff-mono li { font-family: var(--font-mono) !important; }

/* الخامات والخلفيات */
.tone-ivory { background: var(--ivory) !important; }
.tone-plain { background: #fff !important; }
.tone-navy  { background: linear-gradient(120deg, var(--navy-950), var(--navy-700)) !important; color: var(--ivory); }
.tone-navy h1, .tone-navy h2, .tone-navy h3, .tone-navy h4, .tone-navy p, .tone-navy li, .tone-navy span { color: var(--ivory); }
.tone-navy .lead, .tone-navy .muted { color: rgba(255,255,255,.82) !important; }
.tone-navy .kicker { color: var(--gd-teal-400) !important; }
.tone-teal  { background: linear-gradient(120deg, var(--gd-teal), #0a5b5e) !important; color: #fff; }
.tone-teal h1, .tone-teal h2, .tone-teal h3, .tone-teal h4, .tone-teal p, .tone-teal li, .tone-teal span { color: #fff; }
.tone-teal .kicker { color: rgba(255,255,255,.85) !important; }

/* ألوان مخصّصة من المصمّم */
[style*="--sec-color"] h1, [style*="--sec-color"] h2, [style*="--sec-color"] h3,
[style*="--sec-color"] h4, [style*="--sec-color"] p, [style*="--sec-color"] li,
[style*="--sec-color"] span { color: var(--sec-color); }
[style*="--sec-bg"] { background: var(--sec-bg) !important; }

/* ---------- 20. Companies & brands ---------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .62);
  margin-bottom: 1.1rem;
}
.crumbs a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

.brandcard__cats {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .75rem 0 .25rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--gd-cream, #f6f7f9);
  border: 1px solid var(--gd-border);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--gd-ink);
  white-space: nowrap;
}
.chip b { font-weight: 800; color: var(--gd-teal); }
.chip--more { background: var(--gd-teal); border-color: var(--gd-teal); color: #fff; }

/* category tile on a brand page */
.catcard {
  padding: var(--sp-3);
  border: 1px solid var(--gd-border);
  border-radius: var(--r-lg);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.catcard:hover { box-shadow: var(--shadow-3); border-color: var(--gd-ink); transform: translateY(-2px); }
.catcard__name { font-weight: 800; color: var(--gd-ink); font-size: 1.05rem; }
.catcard__meta { margin-top: auto; padding-top: .5rem; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--gd-teal); font-weight: 700; }