@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 — 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 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-radius: var(--yalla-radius-md);
  padding: var(--yalla-spacing-lg);
  text-align: center;
  display: block;
}
.yalla-features__icon {
  inline-size: 60px;
  block-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--yalla-color-surface-muted);
  border-radius: var(--yalla-radius-md);
  font-size: 22px;
  margin-inline: auto;
  margin-block-end: var(--yalla-spacing-md);
}
.yalla-features__icon i,
.yalla-features__icon svg {
  font-size: 20px;
  color: var(--yalla-color-heading);
}
.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;
}