.featured-merchants-host { container-type: inline-size; box-sizing: border-box; width: 100%; max-width: none; min-width: 0; padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
.featured-merchants-probe { width: 100%; height: 1px; margin: 0; padding: 0; pointer-events: none; }
.featured-merchants-view { --featured-unit: max(1px, calc(100cqw / 430)); --featured-card-width: calc(90 * var(--featured-unit)); --featured-card-height: calc(60 * var(--featured-unit)); --featured-grid-gap: calc(8 * var(--featured-unit)); --featured-rows: 2; box-sizing: border-box; min-width: 0; margin: .6rem 12px .8rem; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
/* Keep the same sizing reference, so desktop dimensions are exactly 70% of
   their previous size rather than shrinking again because of the new inset. */
@media (min-width: 1024px) {
  .featured-merchants-view { --featured-unit: calc(70cqw / 430); margin-inline: 24px; padding: 16px; }
}
.featured-merchants-view[data-rows="1"] { --featured-rows: 1; }
.featured-merchants-title { margin: 0 0 .45rem; font-size: 1rem; font-weight: 800; line-height: 1.4; text-align: center; }
.featured-merchants-message { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: .5rem; color: var(--muted); font-size: .75rem; line-height: 1.4; text-align: center; }
.featured-merchants-viewport { position: relative; width: 100%; height: calc(var(--featured-rows) * var(--featured-card-height) + (var(--featured-rows) - 1) * var(--featured-grid-gap)); margin-inline: auto; overflow: hidden; isolation: isolate; border-radius: 8px; }
.featured-merchants-frame { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, var(--featured-card-width))); grid-template-rows: repeat(var(--featured-rows), var(--featured-card-height)); row-gap: var(--featured-grid-gap); column-gap: 0; align-content: start; justify-content: space-between; }
.featured-merchants-view[data-layout="ranked"] .featured-merchants-frame { display: flex; flex-direction: column; gap: var(--featured-grid-gap); justify-content: flex-start; }
.featured-merchants-row { min-width: 0; width: 100%; height: var(--featured-card-height); flex: none; }
.featured-merchants-row-grid { display: grid; grid-template-columns: repeat(3, minmax(0, var(--featured-card-width))); justify-content: space-between; gap: 0; }
.featured-merchants-view [hidden] { display: none !important; }
.featured-merchant-card { box-sizing: border-box; display: flex; align-items: center; min-width: 0; width: 100%; height: var(--featured-card-height); padding: calc(4 * var(--featured-unit)); gap: calc(4 * var(--featured-unit)); border: 1px solid var(--line); border-radius: calc(8 * var(--featured-unit)); background: var(--surface); color: var(--text); text-align: start; text-decoration: none; overflow: hidden; }
.featured-merchant-card:hover { border-color: var(--card-outline); background: var(--surface-2); }
.featured-merchant-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.featured-merchant-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: calc(22 * var(--featured-unit)); height: calc(22 * var(--featured-unit)); overflow: hidden; border-radius: 50%; background: var(--brand-soft); color: var(--text); font-size: calc(10 * var(--featured-unit)); font-weight: 800; }
.featured-merchant-avatar img, .featured-merchant-avatar svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured-merchant-text { display: flex; flex-direction: column; gap: calc(2 * var(--featured-unit)); flex: 1; min-width: 0; }
.featured-merchant-title { display: flex; align-items: center; gap: calc(2 * var(--featured-unit)); min-width: 0; }
.featured-merchant-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: calc(13 * var(--featured-unit)); font-size: calc(10 * var(--featured-unit)); }
.featured-merchant-sector, .featured-merchant-governorate { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: calc(9 * var(--featured-unit)); line-height: calc(12 * var(--featured-unit)); }
.featured-merchant-verified { flex: none; display: inline-flex; width: calc(12 * var(--featured-unit)); height: calc(12 * var(--featured-unit)); }
.featured-merchant-verified svg { display: block; width: 100%; height: 100%; stroke: none; }
.featured-merchants-controls { display: flex; justify-content: center; align-items: center; gap: .3rem; margin-top: .3rem; }
.featured-merchants-control { min-width: 44px; min-height: 44px; padding: .25rem .4rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); color: var(--text); font: inherit; font-size: .7rem; cursor: pointer; }
.featured-merchants-control:disabled { opacity: .55; cursor: default; }.featured-merchants-counter { min-width: 2.5rem; color: var(--muted); text-align: center; font-size: .7rem; }
.featured-merchants-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.featured-merchants-frame[data-motion="enter"] { animation: featured-merchants-enter 280ms ease-out both; }
.featured-merchants-frame[data-motion="exit"] { animation: featured-merchants-exit 280ms ease-out both; pointer-events: none; }
@keyframes featured-merchants-enter { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes featured-merchants-exit { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.home-categories-jump { display: none; }
.home-categories-jump[hidden] { display: none !important; }
#category-grid { scroll-margin-block-start: 80px; }
@media (max-width: 780px) {
  .home-categories-jump { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-block: .6rem .3rem; color: var(--text); text-decoration: none; }
  .home-categories-jump h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
  .home-categories-jump .eyebrow { font-size: .65rem; }
  .category-desktop-heading { display: none; }
  #categories-section { padding-block-start: .4rem; }
  #categories-section .section-heading { justify-content: flex-end; margin-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .featured-merchants-frame { animation: none !important; } }