/* La Famille Store v5: real mobile viewport containment + symmetric Arabic admin navigation.
   Loaded LAST for both store and admin. Does not alter PHP, forms or database data. */
html { max-width:100%; overflow-x:clip; }
body { min-width:0; max-width:100%; overflow-x:clip; overscroll-behavior-x:none; }
.site-header, .site-main, .site-footer, .app, .app-main {
  min-width:0; max-width:100%;
}
.site-header, .site-main, .site-footer { overflow-x:clip; }
.site-header .navbar, .site-header .navbar-collapse,
.site-main section, .site-main .container, .site-main .row > *,
.site-main .section-header, .site-main .hero-actions,
.site-main .newsletter-card, .site-main .cta-banner-inner,
.site-main .product-card, .site-main .product-body,
.app-content, .app-content .row > * { min-width:0; }
.site-main .row, .site-main .d-flex { max-width:calc(100% + var(--bs-gutter-x, 0px)); }
.site-main .hero h1, .site-main .hero p, .site-main h2,
.site-main h3, .site-main .category-card h5,
.site-main .product-card .product-name, .site-main .feature-item {
  overflow-wrap:anywhere;
}
.site-main .hero-decor { pointer-events:none; }
.site-main img, .site-main svg, .site-footer img { max-width:100%; }

/* Arabic: sidebar lives ON THE RIGHT on desktop and slides in FROM THE RIGHT on phones.
   Match the panel's visual side with the transform direction, independent of Bootstrap RTL. */
html[dir="rtl"] .app { direction:rtl !important; }
html[dir="rtl"] .sidebar {
  inset:0 0 0 auto !important;
  left:auto !important;
  right:0 !important;
  border-right:0 !important;
  border-left:1px solid #e5e7eb;
  direction:rtl;
  text-align:right;
}
html[dir="rtl"][data-bs-theme="dark"] .sidebar { border-left-color:#334155; }
html[dir="rtl"] .sidebar-nav, html[dir="rtl"] .sidebar-brand,
html[dir="rtl"] .sidebar-nav .nav-link { direction:rtl; text-align:right; }
html[dir="rtl"] .sidebar-nav .nav-link { flex-direction:row; }
html[dir="rtl"] .sidebar-nav .nav-link .ms-auto { margin-left:0 !important; margin-right:auto !important; }
html[dir="rtl"] .app-main {
  margin-left:0 !important;
  margin-right:var(--sidebar-width) !important;
  direction:rtl;
}
html[dir="rtl"] .topbar { direction:rtl; }
html[dir="rtl"] .topbar > .ms-auto { margin-left:0 !important; margin-right:auto !important; }
html[dir="rtl"] .topbar .dropdown-menu { text-align:right; }
html[dir="rtl"] .app-content, html[dir="rtl"] .app-footer { direction:rtl; text-align:right; }
html[dir="rtl"] #lf-language-select { direction:ltr; text-align:left; }

@media (max-width:991.98px) {
  html[dir="rtl"] .app-main { margin-left:0 !important; margin-right:0 !important; }
  html[dir="rtl"] .sidebar {
    transform:translate3d(101%,0,0) !important;
    width:min(280px,86vw);
    max-width:86vw;
    visibility:hidden;
    pointer-events:none;
  }
  html[dir="rtl"] .sidebar.open {
    transform:translate3d(0,0,0) !important;
    visibility:visible;
    pointer-events:auto;
  }
  html:not([dir="rtl"]) .sidebar:not(.open) { visibility:hidden; pointer-events:none; }
  html:not([dir="rtl"]) .sidebar.open { visibility:visible; pointer-events:auto; }
  html[dir="rtl"] .topbar { direction:rtl; }
  html[dir="rtl"] .topbar #sidebarToggle { grid-column:1; justify-self:start; }
  html[dir="rtl"] .topbar-title { text-align:right; }
  .site-header .navbar-brand, .site-header .navbar > .order-xxl-last,
  .site-header .lf-language, .site-header .navbar-collapse { min-width:0; }
  .site-header .navbar > .order-xxl-last { flex-shrink:0; }
}
@media (max-width:420px) {
  .site-header .navbar { grid-template-columns:minmax(0,1fr) auto !important; }
  .site-header .navbar-brand { grid-column:1; grid-row:1; width:100%; }
  .site-header .navbar > .order-xxl-last { grid-column:2; grid-row:1; }
  .site-header .lf-language { grid-column:1/-1; grid-row:2; width:100%; margin:0; }
  .site-header .lf-language select { width:100%; max-width:100%; }
  .site-header .navbar-collapse { grid-column:1/-1; grid-row:3; }
  .site-header .brand-text { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .site-main .cta-banner-inner, .site-main .newsletter-card { max-width:100%; }
}
@supports not (overflow:clip) { html,body,.site-header,.site-main,.site-footer { overflow-x:hidden; } }