/* La Famille Store — phone/tablet refinements (storefront and admin). */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }
@media (max-width: 991.98px) {
  body { overflow-x: clip; }
  .container,.container-fluid,.row > * { min-width: 0; }
  .site-header .navbar { gap: .4rem; }
  .site-header .navbar-collapse { flex-basis: 100%; }
  .site-header .header-search, .site-header .header-search .search-box { width: 100%; }
  .site-header .navbar-nav .nav-link { padding-block: .7rem; }
  .site-header .dropdown-menu { max-height: 45vh; overflow-y: auto; }
  .app-content .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-content .table { white-space: nowrap; }
  .app-content .table td, .app-content .table th { padding: .8rem; }
  .app-content .card-header { gap: .5rem; flex-wrap: wrap; }
  .app-content input, .app-content select, .app-content textarea { max-width: 100%; }
  .sidebar { max-width: min(82vw, 300px); }
}
@media (max-width: 575.98px) {
  .app-main, .app-content, .site-main { min-width: 0; }
  .topbar { gap: .35rem; padding-inline: .55rem; }
  .topbar-title { font-size: .9rem; flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .topbar > .ms-auto { margin-left: 0 !important; gap: .3rem !important; flex-shrink: 0; }
  .topbar #sidebarToggle { padding-inline: .45rem; }
  .topbar #lf-language-select { width: 83px; min-width: 83px; padding-left: .25rem; padding-right: 1.2rem; font-size: .74rem; }
  .topbar #themeToggle { padding: .3rem .45rem; }
  .topbar .dropdown .btn { padding: .23rem .3rem; }
  .topbar .dropdown .btn img { width: 24px; height: 24px; }
  .app-content { padding: .6rem; }
  .app-content .card-body { padding: .85rem; }
  .app-content .d-flex.justify-content-between { flex-wrap: wrap; gap: .6rem; }
  .app-content .d-flex.justify-content-between > .btn { max-width: 100%; }
  .app-content .btn { min-height: 36px; }
  .app-content .table-responsive { margin-inline: -.25rem; width: calc(100% + .5rem); }
  .app-content .table-responsive .table { font-size: .85rem; }
  .app-content .pagination { flex-wrap: wrap; }
  .app-footer { font-size: .78rem; }
  .auth-wrapper { padding: .65rem; }
  .site-header .container { padding-inline: .65rem; }
  .site-header .navbar-brand { min-width: 0; margin-right: auto; }
  .site-header .navbar-brand .brand-text { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-header .brand-logo { width: 34px; height: 34px; }
  .site-header .lf-language select { max-width: 92px; font-size: .75rem; }
  .site-header .navbar-toggler, .site-header .cart-link { min-width: 40px; min-height: 40px; }
  .site-main h1 { overflow-wrap: anywhere; }
  .site-main .row > * { min-width: 0; }
  .site-main .cart-table { min-width: 540px; }
  .site-main .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-main .form-control, .site-main .form-select { font-size: 16px; }
}
@media (max-width: 359.98px) {
  .topbar #themeToggle { display: none; }
  .topbar-title { font-size: .8rem; }
  .site-header .navbar-brand .brand-text { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .sidebar-backdrop { transition: none; } }

/* v3: full mobile admin layout and public home — override desktop rules */
@media (max-width: 767.98px) {
  .app, .app-main, .app-content, .app-content > *, .site-main, .site-main > * { min-width: 0; max-width: 100%; }
  .app-content .row > *, .site-main .row > * { min-width: 0; }
  .app-content .d-flex { min-width: 0; }
  .app-content .card, .app-content .card-body { min-width: 0; }
  .app-content .card-header { display: flex; flex-wrap: wrap; align-items: center; }
  .app-content .card-header > * { max-width: 100%; }
  .app-content .form-control, .app-content .form-select, .app-content .input-group { width: 100%; min-width: 0; }
  .app-content .btn-group { flex-wrap: wrap; }
  .app-content .btn { white-space: normal; }
  .app-content .table-responsive.mobile-card-table { overflow: visible !important; margin: 0; width: 100%; }
  .app-content .mobile-card-table table, .app-content .mobile-card-table tbody, .app-content .mobile-card-table tr,
  .app-content .mobile-card-table td { display: block; width: 100%; min-width: 0; }
  .app-content .mobile-card-table thead { display: none; }
  .app-content .mobile-card-table tbody tr { border: 1px solid var(--bs-border-color, #ddd); border-radius: 12px; margin: 0 0 12px; padding: .45rem .75rem; background: var(--bs-body-bg, #fff); box-shadow: 0 2px 8px #00000008; }
  .app-content .mobile-card-table tbody td { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; white-space: normal !important; text-align: end; border: 0; border-bottom: 1px solid var(--bs-border-color, #eee); padding: .6rem 0; overflow-wrap: anywhere; }
  .app-content .mobile-card-table tbody td:last-child { border-bottom: 0; }
  .app-content .mobile-card-table tbody td::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; font-weight: 700; text-align: start; color: var(--bs-secondary-color, #666); font-size: .78rem; }
  .app-content .mobile-card-table tbody td:only-child { display: block; text-align: start; }
  .app-content .mobile-card-table tbody td:only-child::before { content: none; }
  .app-content .mobile-card-table tbody td .btn { margin: 2px; }
  .app-content .mobile-card-table tbody td img { max-width: 64px; height: auto; }
  .topbar { height: auto; min-height: 62px; padding-block: .45rem; flex-wrap: wrap; }
  .topbar-title { flex: 1 1 45%; max-width: calc(100% - 60px); }
  .topbar > .ms-auto { width: 100%; display: flex; justify-content: flex-end; margin-left: 0 !important; }
  .topbar #lf-language-select { width: auto; min-width: 110px; max-width: 150px; }
  .site-header .navbar { display: grid !important; grid-template-columns: minmax(0,1fr) auto auto; gap: .5rem; align-items: center; }
  .site-header .navbar-brand { max-width: 100%; min-width: 0; margin: 0 !important; gap: .35rem; }
  .site-header .navbar-brand .brand-text { font-size: clamp(.72rem,3.5vw,.98rem); overflow: hidden; text-overflow: ellipsis; }
  .site-header .lf-language { grid-column: 2; grid-row: 1; }
  .site-header .lf-language select { max-width: 84px; }
  .site-header .navbar > .order-lg-last { grid-column: 3; grid-row: 1; gap: .2rem !important; }
  .site-header .navbar-collapse { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .site-header .navbar-collapse .header-search, .site-header .navbar-collapse .search-box { width: 100%; }
  .site-header .nav-link { padding: .75rem .6rem !important; }
  .site-main .hero { padding: 3.2rem 0 2.6rem; text-align: center; }
  .site-main .hero h1 { font-size: clamp(1.9rem,8vw,3rem); line-height: 1.13; overflow-wrap: anywhere; }
  .site-main .hero p.lead { font-size: 1rem; margin-inline: auto; }
  .site-main .hero .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1.25rem; }
  .site-main .hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
  .site-main .hero .btn-hero { margin: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .site-main .section { padding-block: 2.5rem; }
  .site-main .section-header { gap: .7rem; }
  .site-main .section-header h2 { font-size: clamp(1.4rem,6vw,2rem); overflow-wrap: anywhere; }
  .site-main .category-card, .site-main .product-card { min-width: 0; height: 100%; }
  .site-main .product-card img { max-width: 100%; }
  .site-main .feature-strip .row { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
  .site-main .feature-item { height: 100%; padding: .65rem .3rem; }
}
@media (max-width: 380px) {
  .site-header .navbar { grid-template-columns: minmax(0,1fr) auto; }
  .site-header .lf-language { grid-column: 1; grid-row: 2; justify-self: start; }
  .site-header .navbar > .order-lg-last { grid-column: 2; grid-row: 1 / 3; }
  .site-header .navbar-collapse { grid-row: 3; }
  .site-main .hero .hero-actions > a { width: 100%; }
  .site-main .category-card h5 { font-size: .88rem; overflow-wrap: anywhere; }
  .app-content .mobile-card-table tbody td::before { flex-basis: 34%; max-width: 34%; }
}