@charset "UTF-8";
/* Yalla Blocks — global stylesheet for the next-gen blocks engine.

   BUILD: yalla-blocks.css is a COMMITTED artifact (not built on deploy).
   After editing any partial under scss/yalla-blocks/, recompile with
   `npm run build:css` (pinned dart-sass) and commit the result. CI
   (`npm run check:css`, pull-requests pipeline) fails any PR where the
   committed yalla-blocks.css is not what the SCSS compiles to, so it can
   never ship stale.

   Loaded conditionally from the platform-wide
   _YallaModules/Core/Resources/views/frontend/global/head.blade.php
   only when features('themeBuilder')->isEnabled() — so legacy tenants
   pay no parse cost and the new selectors stay inert until they have
   markup to target.

   Two compounding safety mechanisms keep production unaffected:
     1. yalla-* BEM prefix isolation. Every selector below lives under
        the yalla- prefix (next-gen doc §15). Legacy theme CSS targets
        entirely different class names. The two stylesheets coexist.
     2. themeBuilder flag stays opt-in per tenant. New CSS only ships
        on tenants the merchant has enabled. */
/* Yalla Blocks — design token defaults.

   Phase 8 Tier-1 ships these as fallbacks in the global stylesheet.
   Phase 8.3 will move the canonical token list to _YallaModules/Themes/
   Resources/css/tokens.css compiled from theme.json settings.design.*
   per next-gen doc §14.4. Until then, themes that want to override a
   token redeclare it on :root (or a higher-specificity scope) inside
   their own stylesheet — for example lamar can set
   --yalla-color-primary: #0b5351; in its own assets/css/style.scss.

   Every selector that consumes a token reads var(--yalla-*) so the
   override path stays the same after 8.3. */
:root {
  /* Color */
  --yalla-color-on-primary: #ffffff;
  --yalla-color-surface: #ffffff;
  --yalla-color-border: #e7e7e7;
  --yalla-color-text: #0c0c0c;
  --yalla-color-text-muted: #737373;
  --yalla-color-text-subtle: #909395;
  --yalla-color-discount: #ff4538;
  --yalla-color-rating: #ffbc00;
  --yalla-color-quote: #eaeaea;
  /* Typography */
  --yalla-font-family-base: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yalla-font-size-sm: 14px;
  --yalla-font-size-base: 16px;
  --yalla-font-size-md: 18px;
  --yalla-font-size-lg: 22px;
  --yalla-font-size-xl: 25px;
  --yalla-font-weight-regular: 400;
  --yalla-font-weight-medium: 500;
  --yalla-font-weight-bold: 700;
  /* Spacing */
  --yalla-spacing-unit: 4px;
  --yalla-spacing-xs: 5px;
  --yalla-spacing-sm: 10px;
  --yalla-spacing-md: 15px;
  --yalla-spacing-lg: 25px;
  --yalla-spacing-xl: 50px;
  /* Radius */
  --yalla-radius-sm: 4px;
  --yalla-radius-md: 7px;
  --yalla-radius-lg: 10px;
  --yalla-radius-pill: 999px;
  /* Shadow */
  --yalla-shadow-card: 0 5px 15px rgba(0, 0, 0, 0.1);
  --yalla-shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
  /* Transition */
  --yalla-transition-fast: 0.2s ease;
  --yalla-transition-base: 0.3s ease;
}

/* Yalla Product Card — shared product tile component (Phase 8 parity).

   Markup: _YallaModules/Products/Resources/views/frontend/global/product-card.blade.php
   Used today by Products/Blocks/CategoryProducts, CategoryProductsSlider,
   and ThreeCategoriesProducts. Any future product-tile surface that
   @include's the partial picks up these styles automatically.

   Two variants:
     .yalla-product-card--default — vertical, full-bleed media, verbose CTA labels.
     .yalla-product-card--mini    — horizontal compact (image + body side-by-side),
                                    icon-only CTA, no badges/wishlist (the
                                    blade hides those in mini mode). */
.yalla-product-card {
  background-color: var(--yalla-color-surface);
  border: 1px solid var(--yalla-color-border);
  border-radius: var(--yalla-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--yalla-transition-base), transform var(--yalla-transition-base);
  /* ------- mini variant ------- */
}
.yalla-product-card:hover {
  box-shadow: var(--yalla-shadow-card-hover);
  transform: translateY(-3px);
}
.yalla-product-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--yalla-color-surface-muted);
}
.yalla-product-card__media-link {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  text-decoration: none;
}
.yalla-product-card__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.yalla-product-card__badge {
  position: absolute;
  z-index: 2;
  padding-block: 4px;
  padding-inline: var(--yalla-spacing-sm);
  font-size: 12px;
  font-weight: var(--yalla-font-weight-bold);
  border-radius: var(--yalla-radius-sm);
  background-color: var(--yalla-color-surface);
  color: var(--yalla-color-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  line-height: 1.2;
}
.yalla-product-card__badge--discount {
  inset-block-start: var(--yalla-spacing-sm);
  inset-inline-end: var(--yalla-spacing-sm);
  background-color: var(--yalla-color-discount);
  color: var(--yalla-color-on-primary);
}
.yalla-product-card__badge--qty {
  inset-block-start: var(--yalla-spacing-sm);
  inset-inline-start: var(--yalla-spacing-sm);
  background-color: var(--yalla-color-accent);
  color: var(--yalla-color-on-primary);
}
.yalla-product-card__badge--unavailable {
  inset-block-start: var(--yalla-spacing-sm);
  inset-inline-start: var(--yalla-spacing-sm);
  background-color: var(--yalla-color-text-muted);
  color: var(--yalla-color-on-primary);
}
.yalla-product-card__wishlist {
  position: absolute;
  inset-block-end: var(--yalla-spacing-sm);
  inset-inline-end: var(--yalla-spacing-sm);
  z-index: 2;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--yalla-radius-pill);
  background-color: var(--yalla-color-surface);
  border: 1px solid var(--yalla-color-border);
  color: var(--yalla-color-discount);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--yalla-shadow-card);
  transition: transform var(--yalla-transition-fast);
}
.yalla-product-card__wishlist:hover {
  transform: scale(1.08);
}
.yalla-product-card__wishlist i {
  font-size: 16px;
}
.yalla-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--yalla-spacing-xs);
  padding: var(--yalla-spacing-sm);
  flex: 1;
}
.yalla-product-card__title-link {
  text-decoration: none;
  color: inherit;
}
.yalla-product-card__title {
  font-size: var(--yalla-font-size-base);
  font-weight: var(--yalla-font-weight-medium);
  color: var(--yalla-color-text);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yalla-product-card__pricing {
  display: flex;
  align-items: center;
  gap: var(--yalla-spacing-sm);
  flex-wrap: wrap;
  margin-block: var(--yalla-spacing-xs);
}
.yalla-product-card__price {
  font-size: 20px;
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-primary);
  white-space: nowrap;
}
.yalla-product-card__original-price {
  font-size: 13px;
  color: var(--yalla-color-text-muted);
  text-decoration: line-through;
  white-space: nowrap;
}
.yalla-product-card__actions {
  margin-block-start: auto;
}
.yalla-product-card__cta {
  inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yalla-spacing-xs);
  padding-block: var(--yalla-spacing-sm);
  padding-inline: var(--yalla-spacing-md);
  border-radius: var(--yalla-radius-sm);
  font-size: var(--yalla-font-size-sm);
  font-weight: var(--yalla-font-weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: opacity var(--yalla-transition-fast), background-color var(--yalla-transition-fast);
}
.yalla-product-card__cta i {
  font-size: 14px;
}
.yalla-product-card__cta--add {
  background-color: transparent;
  border-color: var(--yalla-color-primary);
  color: var(--yalla-color-primary);
}
.yalla-product-card__cta--add:hover {
  background-color: var(--yalla-color-primary);
  color: var(--yalla-color-on-primary);
  opacity: 1;
}
.yalla-product-card__cta--external {
  background-color: var(--yalla-color-accent);
  color: var(--yalla-color-on-primary);
}
.yalla-product-card__cta--external:hover {
  opacity: 0.9;
}
.yalla-product-card__cta--disabled {
  background-color: var(--yalla-color-surface-muted);
  color: var(--yalla-color-text-muted);
  cursor: not-allowed;
}
.yalla-product-card__cta--in-cart {
  opacity: 0.7;
}
.yalla-product-card--mini {
  flex-direction: row;
  align-items: stretch;
  border: none;
  border-radius: var(--yalla-radius-sm);
  background-color: transparent;
}
.yalla-product-card--mini:hover {
  box-shadow: none;
  transform: none;
  background-color: var(--yalla-color-surface-muted);
}
.yalla-product-card--mini .yalla-product-card__media {
  flex: 0 0 80px;
  inline-size: 80px;
  block-size: 80px;
  border-radius: var(--yalla-radius-sm);
}
.yalla-product-card--mini .yalla-product-card__image {
  block-size: 100%;
  aspect-ratio: 1/1;
}
.yalla-product-card--mini .yalla-product-card__body {
  padding-block: 0;
  padding-inline: var(--yalla-spacing-sm);
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.yalla-product-card--mini .yalla-product-card__title {
  font-size: var(--yalla-font-size-sm);
}
.yalla-product-card--mini .yalla-product-card__price {
  font-size: var(--yalla-font-size-sm);
}
.yalla-product-card--mini .yalla-product-card__cta {
  inline-size: auto;
  flex: 0 0 auto;
  align-self: center;
  padding: var(--yalla-spacing-xs);
  block-size: 36px;
  inline-size: 36px;
  border-radius: var(--yalla-radius-pill);
  margin-inline: var(--yalla-spacing-xs);
}
.yalla-product-card--mini .yalla-product-card__actions {
  margin-block-start: 0;
  align-self: center;
}

/* Yalla Banner Placeholder — shared empty-state shown in the builder preview
   before a merchant uploads a banner image.
   Markup: _YallaModules/Themes/Resources/views/blocks/banner-placeholder.blade.php
   (included by every banner block's blade for sample/empty slots).

   Preview-only by construction: the markup is emitted solely from each block's
   sample() path, which the renderer runs only inside the builder / version
   preview — the published storefront never renders it (BlocksIterator §sample
   fallback). It therefore uses the builder brand accent rather than the
   storefront's own theme tokens.

   Adaptive density (matches the count of the hosting block):
     • large (1-2 banners): disc + "أضف صورة" label + size chip + idle halo.
     • mini  (3-4 banners): disc + size chip, no label, static halo.
     • tiny  (6 banners):   disc only, size in the native title tooltip.

   The placeholder fills its host slot and inherits the block's own
   aspect-ratio (grid cells); the full-width banner / carousel slide has no
   ratio of its own, so `--ratio` gives it one. No fixed pixel sizes here. */
.yalla-ph {
  /* builder accent — local, not the storefront theme tokens */
  --yalla-ph-brand: #4A50E0;
  --yalla-ph-brand-deep: #3D43C8;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 120px;
  text-align: center;
  border-radius: var(--yalla-radius-md);
  overflow: hidden;
  background: linear-gradient(180deg, #fafbff, #f3f4fc);
  border: 1px solid rgba(74, 80, 224, 0.47);
  /* full-width banner + carousel slide: no ancestor ratio, so impose ours */
  /* soft brand glow — always on */
  /* size chip — bottom corner, RTL-safe via logical inset. The dimension
     text itself stays LTR so "1600 × 500" never flips to "500 × 1600". */
  /* ---- mini: 3-4 banners — drop the label, shrink the disc ---- */
  /* ---- bare: published storefront — clean branded box for real visitors.
     Drop the merchant-only prompt ("أضف صورة") and the size chip; keep the
     disc + glow so an unconfigured banner still reads as intentional. ---- */
  /* ---- tiny: 6 banners — disc only, size lives in the title tooltip ---- */
}
.yalla-ph--ratio {
  block-size: auto;
  aspect-ratio: 16/5;
}
.yalla-ph__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(62% 80% at 50% 32%, rgba(74, 80, 224, 0.12), transparent 70%);
}
.yalla-ph__mark {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 14px;
}
.yalla-ph__disc {
  position: relative;
  inline-size: 74px;
  block-size: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--yalla-ph-brand);
  box-shadow: 0 10px 26px -10px rgba(74, 80, 224, 0.6);
  /* gentle idle halo */
}
.yalla-ph__disc::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(74, 80, 224, 0.45);
  animation: yalla-ph-halo 3.8s ease-in-out infinite;
}
.yalla-ph__icon {
  inline-size: 34px;
  block-size: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yalla-ph__label {
  font-family: var(--yalla-font-family-base);
  font-size: 16px;
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-ph-brand-deep);
}
.yalla-ph__chip {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  inset-inline-start: 12px;
  direction: ltr;
  font-family: var(--yalla-font-family-base);
  font-size: 12.5px;
  font-weight: var(--yalla-font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--yalla-ph-brand-deep);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--yalla-color-border);
  padding: 3px 11px;
  border-radius: var(--yalla-radius-pill);
}
.yalla-ph--mini .yalla-ph__label {
  display: none;
}
.yalla-ph--mini .yalla-ph__disc {
  inline-size: 56px;
  block-size: 56px;
}
.yalla-ph--mini .yalla-ph__disc::after {
  animation: none;
  opacity: 0.28;
}
.yalla-ph--mini .yalla-ph__icon {
  inline-size: 26px;
  block-size: 26px;
}
.yalla-ph--mini .yalla-ph__chip {
  bottom: 8px;
  inset-inline-start: 8px;
  font-size: 11px;
  padding: 2px 9px;
}
.yalla-ph--bare .yalla-ph__label {
  display: none;
}
.yalla-ph--bare .yalla-ph__chip {
  display: none;
}
.yalla-ph--tiny .yalla-ph__label {
  display: none;
}
.yalla-ph--tiny .yalla-ph__chip {
  display: none;
}
.yalla-ph--tiny .yalla-ph__disc {
  inline-size: 56px;
  block-size: 56px;
}
.yalla-ph--tiny .yalla-ph__disc::after {
  animation: none;
  opacity: 0.28;
}
.yalla-ph--tiny .yalla-ph__icon {
  inline-size: 26px;
  block-size: 26px;
}

@keyframes yalla-ph-halo {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .yalla-ph__disc::after {
    animation: none;
  }
}
/* Demo-content badge — part of the yalla-ph preview family (same brand + chip
   tokens as the placeholder), shown on a block rendered with sample/demo data.
   Builder preview only: `data-yalla-sample` is stamped solely on the sample
   render path, so the rule is inert on the published storefront. Anchored to
   the block wrapper at the corner OPPOSITE the bridge's section-name badge so
   the two never collide. Disappears automatically once real data is configured
   (the marker is no longer stamped). */
[data-yalla-block-instance-id][data-yalla-sample] {
  position: relative;
}

.yalla-ph__sample {
  position: absolute;
  z-index: 5;
  top: 8px;
  inset-inline-end: 8px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  direction: rtl;
  font-family: var(--yalla-font-family-base);
  font-size: 11px;
  font-weight: var(--yalla-font-weight-bold);
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, #4A50E0, #3D43C8);
  padding: 4px 11px;
  border-radius: var(--yalla-radius-pill);
  box-shadow: 0 4px 12px -4px rgba(74, 80, 224, 0.6);
}

/* Yalla Banner — single full-width banner.
   Markup: _YallaModules/Themes/Blocks/Banner/views/blade.blade.php
   Visual contract from legacy themeSections/wideAdSection.blade.php. */
.yalla-banner {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-md);
}
.yalla-banner__link {
  display: block;
  inline-size: 100%;
}
.yalla-banner__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  border-radius: var(--yalla-radius-md);
}

/* Yalla Banners — wide banner SLIDER (multiple full-width banners).
   Markup: _YallaModules/Themes/Blocks/Banners/views/blade.blade.php
   Init:   assets/global/js/global.js (yallaInitBanners — swiper, autoplay,
           per-instance pagination + nav). One full-width slide at a time,
           natural image height via swiper autoHeight (mirrors the single
           `.yalla-banner`). */
.yalla-banners {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-md);
  /* Pagination bullets — distinctive pill, sitting on a dark translucent
     backdrop so the dots stay visible over a banner of any colour (incl. one
     matching the bullet colour). Centred + shrink-wrapped (RTL-safe via
     inset-inline: 0 + margin-inline: auto + width: max-content). */
  /* Prev / next arrows — circular, surface chip, primary glyph. */
}
.yalla-banners__slider {
  position: relative;
  inline-size: 100%;
  border-radius: var(--yalla-radius-md);
  overflow: hidden;
}
.yalla-banners__slide {
  inline-size: 100%;
}
.yalla-banners__link {
  display: block;
  inline-size: 100%;
}
.yalla-banners__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}
.yalla-banners__pagination.swiper-pagination {
  position: absolute;
  inset-block-end: var(--yalla-spacing-md);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: calc(100% - 2 * var(--yalla-spacing-md));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.35);
  backdrop-filter: blur(2px);
  z-index: 2;
}
.yalla-banners__pagination.swiper-pagination .swiper-pagination-bullet {
  inline-size: 11px;
  block-size: 11px;
  margin: 0 !important;
  border-radius: 999px;
  background: var(--yalla-color-on-primary);
  opacity: 0.55;
  transition: inline-size 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.yalla-banners__pagination.swiper-pagination .swiper-pagination-bullet-active {
  inline-size: 30px;
  opacity: 1;
  background: var(--yalla-color-on-primary);
}
.yalla-banners__nav.swiper-button-prev, .yalla-banners__nav.swiper-button-next {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--yalla-color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: var(--yalla-color-primary);
  transition: opacity 0.15s ease;
}
.yalla-banners__nav.swiper-button-prev::after, .yalla-banners__nav.swiper-button-next::after {
  font-size: 16px;
  font-weight: var(--yalla-font-weight-bold);
}
.yalla-banners__nav.swiper-button-prev.swiper-button-disabled, .yalla-banners__nav.swiper-button-next.swiper-button-disabled {
  opacity: 0;
}

/* Yalla Two Banners — 2-up grid.
   Markup: _YallaModules/Themes/Blocks/TwoBanners/views/blade.blade.php
   Visual contract from legacy themeSections/twoAdsSection.blade.php
   (aspect-ratio 750 / 570). */
.yalla-two-banners {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-sm);
}
.yalla-two-banners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--yalla-spacing-sm);
}
@media (max-width: 575.98px) {
  .yalla-two-banners__grid {
    gap: var(--yalla-spacing-xs);
  }
}
.yalla-two-banners__cell {
  aspect-ratio: 750/570;
  overflow: hidden;
  border-radius: var(--yalla-radius-md);
}
.yalla-two-banners__link {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.yalla-two-banners__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Yalla Three Banners — 3-up grid.
   Markup: _YallaModules/Themes/Blocks/ThreeBanners/views/blade.blade.php
   Visual contract from legacy themeSections/threeAdsSection.blade.php
   (aspect-ratio 465 / 650 — taller portrait tile). */
.yalla-three-banners {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-sm);
}
.yalla-three-banners__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yalla-spacing-sm);
}
@media (max-width: 575.98px) {
  .yalla-three-banners__grid {
    gap: var(--yalla-spacing-xs);
  }
}
.yalla-three-banners__cell {
  aspect-ratio: 465/650;
  overflow: hidden;
  border-radius: var(--yalla-radius-md);
}
.yalla-three-banners__link {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.yalla-three-banners__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Yalla Four Banners — 4-up grid.
   Markup: _YallaModules/Themes/Blocks/FourBanners/views/blade.blade.php
   Visual contract from legacy themeSections/fourAdsSection.blade.php
   (square tiles 350x350; collapse to 2-up on mobile). */
.yalla-four-banners {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-sm);
}
.yalla-four-banners__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--yalla-spacing-sm);
}
@media (max-width: 575.98px) {
  .yalla-four-banners__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--yalla-spacing-xs);
  }
}
.yalla-four-banners__cell {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--yalla-radius-md);
}
.yalla-four-banners__link {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.yalla-four-banners__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Yalla Six Banners — 6-up grid.
   Markup: _YallaModules/Themes/Blocks/SixBanners/views/blade.blade.php
   Visual contract from legacy themeSections/sixAdsSection.blade.php
   (square tiles 250x250; 6 cols at desktop, 3 at tablet, 2 at mobile). */
.yalla-six-banners {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-sm);
}
.yalla-six-banners__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--yalla-spacing-sm);
}
@media (max-width: 991.98px) {
  .yalla-six-banners__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 575.98px) {
  .yalla-six-banners__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--yalla-spacing-xs);
  }
}
.yalla-six-banners__cell {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--yalla-radius-md);
}
.yalla-six-banners__link {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.yalla-six-banners__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Yalla Features — 3-up icon/title/description card grid.
   Markup: _YallaModules/Themes/Blocks/Features/views/blade.blade.php
   Visual contract from legacy themeSections/websiteFeatures.blade.php
   + global _storeFeatures.scss. */
.yalla-features {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-xl);
}
.yalla-features__head {
  text-align: center;
  margin-block-end: var(--yalla-spacing-lg);
}
.yalla-features__title {
  font-size: var(--yalla-font-size-xl);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-heading);
  margin: 0;
}
.yalla-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yalla-spacing-sm);
}
@media (max-width: 767.98px) {
  .yalla-features__grid {
    grid-template-columns: 1fr;
  }
}
.yalla-features__card {
  background-color: var(--yalla-color-surface);
  border: 1px solid var(--yalla-color-border, rgba(17, 24, 39, 0.06));
  border-radius: var(--yalla-radius-md);
  /* Content-driven height: an icon-only (no title/description) card stays
     compact until the merchant fills it in, then grows naturally. */
  padding: var(--yalla-spacing-md);
  text-align: center;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.yalla-features__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.07);
  border-color: transparent;
}
.yalla-features__icon {
  inline-size: 56px;
  block-size: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--yalla-color-surface-muted);
  border-radius: var(--yalla-radius-md);
  font-size: 20px;
  margin-inline: auto;
  margin-block-end: var(--yalla-spacing-sm);
  /* Image-icon variant: the merchant uploaded an image instead of picking a
     Font Awesome glyph. Drop the muted chip background and let the image fill
     the box (contained, never cropped). */
}
.yalla-features__icon i,
.yalla-features__icon svg {
  font-size: 20px;
  color: var(--yalla-color-heading);
}
.yalla-features__icon--image {
  background-color: transparent;
}
.yalla-features__icon img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.yalla-features__content {
  inline-size: 100%;
}
.yalla-features__card-title {
  font-size: var(--yalla-font-size-md);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-text);
  margin: 0 0 var(--yalla-spacing-xs);
}
.yalla-features__card-description {
  font-size: var(--yalla-font-size-sm);
  color: var(--yalla-color-text-subtle);
  margin: 0;
}

/* Yalla Testimonials — swiper-driven review carousel.
   Markup: _YallaModules/Themes/Blocks/Testimonials/views/blade.blade.php
   Visual contract from legacy themeSections/testimonials.blade.php
   + global _testimonial.scss.

   Note: the markup keeps legacy class names (.swiper, .swiper-slide,
   .testimonial-card, ...) alongside the new yalla-* classes so the
   shared swiper init JS keeps working unchanged. New rules target the
   yalla-* layer only. */
.yalla-testimonials {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-xl);
}
.yalla-testimonials__title {
  text-align: center;
  font-size: var(--yalla-font-size-xl);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-heading);
  margin: 0 0 var(--yalla-spacing-lg);
}
.yalla-testimonials__slider {
  inline-size: 100%;
  position: relative;
}
.yalla-testimonials__slider .swiper-slide,
.yalla-testimonials__slider .swiper-wrapper {
  block-size: max-content;
}
.yalla-testimonials__card {
  background: var(--yalla-color-surface);
  border-radius: var(--yalla-radius-lg);
  box-shadow: var(--yalla-shadow-card);
  padding: var(--yalla-spacing-lg) var(--yalla-spacing-md);
  position: relative;
  transition: transform var(--yalla-transition-base);
}
.yalla-testimonials__card:hover {
  transform: translateY(-5px);
}
.yalla-testimonials__quote {
  font-size: 30px;
  color: var(--yalla-color-quote);
  position: absolute;
  inset-block-start: var(--yalla-spacing-sm);
  inset-inline-start: var(--yalla-spacing-sm);
}
.yalla-testimonials__text {
  color: var(--yalla-color-text);
  font-size: var(--yalla-font-size-base);
  font-weight: var(--yalla-font-weight-medium);
  margin-block-start: var(--yalla-spacing-sm);
  inline-size: 90%;
  min-block-size: 65px;
}
.yalla-testimonials__content {
  display: flex;
  align-items: center;
  gap: var(--yalla-spacing-md);
  margin-block-start: var(--yalla-spacing-sm);
}
.yalla-testimonials__avatar {
  inline-size: 50px;
  block-size: 50px;
  border-radius: var(--yalla-radius-pill);
  flex-shrink: 0;
  object-fit: cover;
}
.yalla-testimonials__customer {
  inline-size: 100%;
}
.yalla-testimonials__author {
  font-size: var(--yalla-font-size-md);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-heading);
  margin: 0;
}
.yalla-testimonials__rating {
  color: var(--yalla-color-rating);
  font-size: var(--yalla-font-size-base);
}

/* Yalla Category Products — heading + product grid layout.
   Markup: _YallaModules/Products/Blocks/CategoryProducts/views/blade.blade.php

   Per-card styling lives in _product-card.scss (the shared
   yalla-product-card component). This partial only handles the
   block-level layout: heading, view-all link, and the responsive
   product grid. */
.yalla-category-products {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-md);
}
.yalla-category-products__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yalla-spacing-md);
  margin-block-end: var(--yalla-spacing-md);
}
.yalla-category-products__title-link {
  text-decoration: none;
  color: inherit;
}
.yalla-category-products__title {
  font-size: var(--yalla-font-size-lg);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-heading);
  margin: 0;
}
.yalla-category-products__view-all {
  color: var(--yalla-color-primary);
  font-weight: var(--yalla-font-weight-medium);
  text-decoration: none;
  font-size: var(--yalla-font-size-sm);
}
.yalla-category-products__view-all:hover {
  text-decoration: underline;
}
.yalla-category-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--yalla-spacing-md);
}
@media (max-width: 991.98px) {
  .yalla-category-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767.98px) {
  .yalla-category-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--yalla-spacing-sm);
  }
}

/* Yalla Category Products Slider — heading + horizontal swiper rail layout.
   Markup: _YallaModules/Products/Blocks/CategoryProductsSlider/views/blade.blade.php

   Per-card styling lives in _product-card.scss. This partial only handles
   the block-level layout: heading and view-all link.
   Swiper is initialized by the existing smSwiper init in global.js.
   Nav buttons use .swiper-button-next/.swiper-button-prev — styled per theme.
   Theme colour rules live in _theme-colors.scss. */
.yalla-category-products-slider {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-md);
}
.yalla-category-products-slider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yalla-spacing-md);
  margin-block-end: var(--yalla-spacing-md);
}
.yalla-category-products-slider__title-link {
  text-decoration: none;
  color: inherit;
}
.yalla-category-products-slider__title {
  font-size: var(--yalla-font-size-lg);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-heading);
  margin: 0;
}
.yalla-category-products-slider__view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--yalla-radius-pill);
  border: 1px solid currentColor;
  color: var(--yalla-color-primary);
  font-weight: var(--yalla-font-weight-medium);
  text-decoration: none;
  font-size: var(--yalla-font-size-sm);
  white-space: nowrap;
  transition: background-color var(--yalla-transition-fast), color var(--yalla-transition-fast);
}
.yalla-category-products-slider__view-all:hover {
  background-color: currentColor;
  color: #fff;
  text-decoration: none;
}
.yalla-category-products-slider__rail {
  position: relative;
  overflow: hidden;
}
.yalla-category-products-slider__slide {
  inline-size: 240px;
  box-sizing: border-box;
  block-size: auto;
}
@media (max-width: 575.98px) {
  .yalla-category-products-slider__slide {
    inline-size: 180px;
  }
}

/* Yalla Three Categories — "Modern Soft" design.
   Markup: _YallaModules/Products/Blocks/ThreeCategoriesProducts/views/blade.blade.php

   Structural and default-colour rules only. Per-variant theme colours
   (.pink, .blue, etc.) live in _theme-colors.scss. */
.yalla-three-categories {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-xl);
  /* ---- Column card ---- */
  /* ---- Header ---- */
  /* ---- Products ---- */
  /* ---- Footer ---- */
}
.yalla-three-categories__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yalla-spacing-md);
}
@media (max-width: 991.98px) {
  .yalla-three-categories__row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .yalla-three-categories__row {
    grid-template-columns: 1fr;
  }
}
.yalla-three-categories__column {
  background-color: var(--yalla-color-surface);
  border-radius: var(--yalla-radius-lg);
  box-shadow: var(--yalla-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  gap: 0;
  transition: box-shadow var(--yalla-transition-base);
}
.yalla-three-categories__column:hover {
  box-shadow: var(--yalla-shadow-card-hover);
}
.yalla-three-categories__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background-color: var(--yalla-color-surface);
}
.yalla-three-categories__head-start {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
  flex: 1;
}
.yalla-three-categories__dot {
  display: inline-block;
  inline-size: 11px;
  block-size: 11px;
  border-radius: var(--yalla-radius-pill);
  background-color: var(--yalla-color-primary);
  flex-shrink: 0;
}
.yalla-three-categories__title-link {
  text-decoration: none;
  color: inherit;
  min-inline-size: 0;
}
.yalla-three-categories__title {
  font-size: var(--yalla-font-size-md);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-heading);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yalla-three-categories__view-all {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: var(--yalla-radius-pill);
  background-color: transparent;
  color: var(--yalla-color-primary);
  border: 1.5px solid var(--yalla-color-primary);
  font-size: 12px;
  font-weight: var(--yalla-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--yalla-transition-fast), color var(--yalla-transition-fast);
}
.yalla-three-categories__view-all:hover {
  background-color: var(--yalla-color-primary);
  color: #fff;
  text-decoration: none;
}
.yalla-three-categories__accent {
  block-size: 3px;
  background-color: var(--yalla-color-primary);
  flex-shrink: 0;
}
.yalla-three-categories__products {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-block: var(--yalla-spacing-xs);
  /* Card row */
  /* Smaller image */
  /* Body: grid — [title+price col] / [button col] side by side */
  /* Actions: span both rows, centered — button on the far end (left in RTL) */
  /* Cart button: square with rounded corners. Colours from _theme-colors.scss. */
}
.yalla-three-categories__products .yalla-product-card--mini {
  padding: 11px 16px;
  gap: 10px;
}
.yalla-three-categories__products .yalla-product-card--mini + .yalla-product-card--mini {
  border-block-start: 1px solid var(--yalla-color-border);
}
.yalla-three-categories__products .yalla-product-card__media {
  flex: 0 0 52px !important;
  inline-size: 52px !important;
  block-size: 52px !important;
  border-radius: var(--yalla-radius-md) !important;
}
.yalla-three-categories__products .yalla-product-card__body {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 12px !important;
  padding: 0 !important;
  flex: 1;
}
.yalla-three-categories__products .yalla-product-card__title-link {
  grid-column: 1;
  grid-row: 1;
}
.yalla-three-categories__products .yalla-product-card__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
}
.yalla-three-categories__products .yalla-product-card__pricing {
  grid-column: 1;
  grid-row: 2;
  margin-block: 0 !important;
}
.yalla-three-categories__products .yalla-product-card__price {
  font-size: 16px !important;
  font-weight: 700 !important;
}
.yalla-three-categories__products .yalla-product-card__actions {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
  margin-block-start: 0 !important;
}
.yalla-three-categories__products .yalla-product-card__cta--add {
  inline-size: 38px !important;
  block-size: 38px !important;
  border-radius: var(--yalla-radius-md) !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.yalla-three-categories__products .yalla-product-card__cta--add span {
  display: none !important;
}
.yalla-three-categories__products .yalla-product-card__cta--add i {
  font-size: 15px;
}
.yalla-three-categories__footer {
  padding: 12px 16px;
  border-block-start: 1px solid var(--yalla-color-border);
}
.yalla-three-categories__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--yalla-spacing-xs);
  inline-size: 100%;
  padding: 10px var(--yalla-spacing-md);
  background-color: transparent;
  color: var(--yalla-color-primary);
  border: 1.5px solid var(--yalla-color-primary);
  border-radius: var(--yalla-radius-md);
  text-decoration: none;
  font-weight: var(--yalla-font-weight-bold);
  font-size: var(--yalla-font-size-sm);
  transition: background-color var(--yalla-transition-fast), color var(--yalla-transition-fast);
}
.yalla-three-categories__more:hover {
  background-color: var(--yalla-color-primary);
  color: #fff;
  text-decoration: none;
}

/* Yalla Heading — standalone title + optional subtitle, with alignment
   and size modifiers.
   Markup: _YallaModules/themes/Blocks/Heading/views/blade.blade.php */
.yalla-heading {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-lg);
  /* Alignment */
  /* Size — title scale */
}
.yalla-heading__title {
  font-family: var(--yalla-font-family-base);
  font-weight: var(--yalla-font-weight-bold);
  color: var(--yalla-color-text);
  line-height: 1.3;
  margin: 0;
}
.yalla-heading__subtitle {
  font-size: var(--yalla-font-size-md);
  color: var(--yalla-color-text-subtle);
  margin: var(--yalla-spacing-xs) 0 0;
}
.yalla-heading--right {
  text-align: right;
}
.yalla-heading--center {
  text-align: center;
}
.yalla-heading--left {
  text-align: left;
}
.yalla-heading--sm .yalla-heading__title {
  font-size: var(--yalla-font-size-lg);
}
.yalla-heading--md .yalla-heading__title {
  font-size: var(--yalla-font-size-xl);
}
.yalla-heading--lg .yalla-heading__title {
  font-size: calc(var(--yalla-font-size-xl) * 1.3);
}
.yalla-heading--xl .yalla-heading__title {
  font-size: calc(var(--yalla-font-size-xl) * 1.7);
}
@media (max-width: 767.98px) {
  .yalla-heading--lg .yalla-heading__title, .yalla-heading--xl .yalla-heading__title {
    font-size: var(--yalla-font-size-xl);
  }
}

/* Yalla HTML Embed — wrapper around raw merchant-authored markup.
   Markup: _YallaModules/themes/Blocks/HtmlEmbed/views/blade.blade.php

   Intentionally minimal: the merchant's own HTML owns its styling. We only
   give the block vertical rhythm and guard against wide embeds (iframes,
   tables, oversized images) breaking the page layout. */
.yalla-html-embed {
  display: block;
  inline-size: 100%;
  margin-block: var(--yalla-spacing-lg);
  overflow-x: auto;
}
.yalla-html-embed img,
.yalla-html-embed iframe,
.yalla-html-embed video {
  max-inline-size: 100%;
}