/* Loviastana redesign overrides — applied AFTER the sass-compiled main.css.
   Lives in its own .css file so sass_processor's compilescss can't wipe it.
   Keep all v1.x patches here. */

/* hide the alt-text logo collage thumbnail in price-card if it overlaps */
body.ls-redesign #prices img{max-width:120px;}

/* ==========================================================================
   Loviastana redesign v1.1 — contrast & sizing corrections (2026-04-27)
   Fixes: oversized headings, dark-on-dark, white-on-white reports.
   ========================================================================== */

/* --- 1) Tame heading scale: cap clamp() max values across the board --- */
body.ls-redesign h1,body.ls-redesign .h1,body.ls-redesign .display-4,body.ls-redesign .display-3{font-size:clamp(2.1rem,3.6vw,3.4rem)!important;}
body.ls-redesign h2,body.ls-redesign .h2{font-size:clamp(1.7rem,2.6vw,2.4rem)!important;}
body.ls-redesign h3,body.ls-redesign .h3{font-size:clamp(1.25rem,1.8vw,1.7rem)!important;}
body.ls-redesign .display-1,body.ls-redesign .display-2{font-size:clamp(2.4rem,4vw,3.8rem)!important;}
/* compact headings on auth / utility pages where there's no hero artwork */
body.ls-redesign #registration-form ~ section h1,
body.ls-redesign section.position-relative.pt-5 > .container h1.h1{font-size:clamp(1.6rem,2.4vw,2.2rem)!important;line-height:1.2;}
/* price block: stop the brand titles being heading-1 sized */
body.ls-redesign #prices h3.fs-2{font-size:1.4rem!important;}

/* --- 2) Hero readability: lift body-text opacity --- */
body.ls-redesign #hero p,body.ls-redesign #hero .fs-4,body.ls-redesign #hero .lead{color:rgba(255,255,255,.92)!important;}
body.ls-redesign #hero .text-body-secondary{color:rgba(255,255,255,.85)!important;}

/* --- 3) Body text on cream: prevent dark-on-darkish-cream fade --- */
body.ls-redesign .text-body-secondary,body.ls-redesign small.text-body-secondary{color:#4B5563!important;}
body.ls-redesign .lead{color:#374151!important;}
body.ls-redesign .text-muted{color:#5B6470!important;}

/* --- 4) Dashboard: ensure labels and headings have explicit dark color --- */
body.ls-redesign #dashboard h1,body.ls-redesign #dashboard h2,body.ls-redesign #dashboard h3,body.ls-redesign #dashboard h4,body.ls-redesign #dashboard h5{color:var(--ls-charcoal)!important;}
body.ls-redesign #dashboard .form-label,body.ls-redesign #dashboard label{color:var(--ls-ink)!important;font-weight:600;}
body.ls-redesign #dashboard .table{color:var(--ls-ink);}
body.ls-redesign #dashboard .table thead th{color:var(--ls-charcoal);background:var(--ls-cream-2);}

/* --- 5) Accordion (FAQ): kill the pale-teal-on-pale-teal active state --- */
body.ls-redesign .accordion-button{background:#fff!important;color:var(--ls-charcoal)!important;}
body.ls-redesign .accordion-button:not(.collapsed){background:var(--ls-cream-2)!important;color:var(--ls-charcoal)!important;box-shadow:inset 0 -1px 0 var(--ls-line);}
body.ls-redesign .accordion-button:focus{border-color:var(--ls-teal);box-shadow:0 0 0 .2rem rgba(20,184,166,.18);}
body.ls-redesign .accordion-body{color:var(--ls-ink);background:#fff;}

/* --- 6) Auth-card readability: avoid white-on-white inside cards --- */
body.ls-redesign .card .form-label,body.ls-redesign .card label{color:var(--ls-ink)!important;}
body.ls-redesign .card .form-control{color:var(--ls-ink);background:#fff;}
body.ls-redesign .card .form-control::placeholder{color:#9CA3AF;}
body.ls-redesign .card a{color:var(--ls-teal-700);}
body.ls-redesign .card .text-muted,body.ls-redesign .card small{color:#5B6470!important;}

/* --- 7) Price table: keep dark thead readable, body cells crisp --- */
body.ls-redesign #prices .table-dark th{background:var(--ls-charcoal)!important;color:#fff!important;border-color:rgba(255,255,255,.08)!important;}
body.ls-redesign #prices .table tbody td{color:var(--ls-ink);background:#fff;vertical-align:middle;}
body.ls-redesign #prices .table tbody tr:nth-child(even) td{background:var(--ls-cream);}
/* ensure inline currentColor SVGs in price cells inherit visible color */
body.ls-redesign #prices .table tbody td svg{vertical-align:-.1em;}

/* --- 8) Generic safety: links inside dark sections --- */
body.ls-redesign .bg-dark a,body.ls-redesign #hero a,body.ls-redesign #footer a.link-body-emphasis{color:#fff!important;}
body.ls-redesign .bg-dark a:hover,body.ls-redesign #hero a:hover{color:var(--ls-teal-100)!important;}

/* --- 9) Buttons inside cream cards: no white-on-white outline buttons --- */
body.ls-redesign .card .btn-outline-light{border-color:var(--ls-charcoal)!important;color:var(--ls-charcoal)!important;}
body.ls-redesign .card .btn-outline-light:hover{background:var(--ls-charcoal)!important;color:#fff!important;}

/* ==========================================================================
   Loviastana redesign v1.2 — patches for v1.1 over-reach (2026-04-27)
   v1.1's generic `.lead` and `.text-body-secondary` rules forced dark
   colours on every instance, which made copy unreadable inside the few
   genuinely-dark sections (notably #cta1, which is bg-dark+text-white).
   Restore white text in those contexts.
   ========================================================================== */

/* #cta1 sits on bg-dark — copy must stay white there */
body.ls-redesign #cta1 .lead,
body.ls-redesign #cta1 p,
body.ls-redesign #cta1 .text-body-secondary{color:rgba(255,255,255,.92)!important;}
body.ls-redesign #cta1 .h2,body.ls-redesign #cta1 h2{color:#fff!important;}

/* generic safety for any other dark wrapper a future block-*.html may use */
body.ls-redesign .bg-dark .lead,
body.ls-redesign .bg-dark p:not(.text-body-secondary):not(.text-muted),
body.ls-redesign .bg-dark .text-body-secondary,
body.ls-redesign .bg-dark .text-muted{color:rgba(255,255,255,.85)!important;}

/* block-reviews names use text-danger (Bootstrap red) — bring into brand teal */
body.ls-redesign #reviews .text-danger{color:var(--ls-teal-700)!important;}

/* feature-icon-small uses .text-bg-danger Bootstrap utility which forces
   white svg color — let the v1.1 redesign teal-on-pale-teal show through */
body.ls-redesign .feature-icon-small.text-bg-danger,
body.ls-redesign .feature-icon-small.text-bg-danger svg,
body.ls-redesign .feature-icon-small.text-bg-danger .bi{color:var(--ls-teal-700)!important;background:var(--ls-teal-100)!important;}

/* ==========================================================================
   Loviastana redesign v1.3 — brand logo states + mobile bottom nav (2026-04-27)
   ========================================================================== */

/* Header brand logo: white over the dark/transparent header on hero,
   solid charcoal once the page is scrolled and the nav becomes cream. */
body.ls-redesign header.fixed-top .navbar-brand img,
body.ls-redesign header.fixed-top .ls-brand-img{
  filter:brightness(0) invert(1)!important;
  transition:filter .25s ease;
  height:auto;max-height:48px;width:auto;
}
body.ls-redesign header.fixed-top.ls-scrolled .navbar-brand img,
body.ls-redesign header.fixed-top.ls-scrolled .ls-brand-img{
  filter:brightness(0)!important;
}
@media (max-width:575.98px){
  body.ls-redesign header.fixed-top .ls-brand-img{max-height:38px;}
}

/* Mobile bottom nav: minimal, teal-accent, safe-area aware. v2 polish:
   24px icons, 48px tap targets, sturdier glass on dark backgrounds,
   labels never ellipsize on common viewports, hidden under 340px. */
/* Persistent mobile bottom nav. Simplest possible fixed positioning;
   compositor hints removed — they were causing jitter on iOS URL-bar collapse. */
body.ls-redesign .ls-mobnav{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1030;
  background:#fff;
  border-top:1px solid var(--ls-line);
  box-shadow:0 -8px 24px rgba(15,23,42,.06);
  padding-bottom:env(safe-area-inset-bottom);
  will-change:auto;
  overflow-anchor:none;
}
@media (min-width:768px){body.ls-redesign .ls-mobnav{display:none!important;}}
/* 6 admin items at narrow viewports — tighter padding so the last one fits */
@media (max-width:399.98px){
  body.ls-redesign .ls-mobnav-link{padding:.5rem .15rem;}
  body.ls-redesign .ls-mobnav-icon{width:22px;height:22px;}
  body.ls-redesign .ls-mobnav-label{font-size:.65rem;}
}
body.ls-redesign .ls-mobnav-list{
  list-style:none;margin:0;padding:.25rem .25rem;
  display:flex;align-items:stretch;justify-content:space-around;gap:.15rem;
}
body.ls-redesign .ls-mobnav-item{flex:1 1 0;min-width:0;}
body.ls-redesign .ls-mobnav-link{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;padding:.55rem .25rem .55rem;border-radius:12px;
  min-height:48px; /* WCAG-friendly tap target */
  text-decoration:none;color:#475569; /* darker than --ls-muted for AA contrast on white */
  font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.01em;
  line-height:1.1;transition:color .15s ease,background .15s ease,transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
body.ls-redesign .ls-mobnav-link:active{transform:scale(.96);}
body.ls-redesign .ls-mobnav-link:focus-visible{outline:2px solid var(--ls-teal);outline-offset:2px;}
body.ls-redesign .ls-mobnav-link:hover{color:var(--ls-charcoal);}
body.ls-redesign .ls-mobnav-icon{width:24px;height:24px;display:block;flex-shrink:0;}
body.ls-redesign .ls-mobnav-label{
  font-size:.72rem;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* Active-state moved off the rendered class so the bottom-nav DOM is byte-
   identical across pages. The active link is matched via attribute selectors:
   body[data-page-is="X"] .ls-mobnav-link[data-page="X"]. */
body.ls-redesign[data-page-is="orders"]            .ls-mobnav-link[data-page="orders"],
body.ls-redesign[data-page-is="orders_to_storage"] .ls-mobnav-link[data-page="orders_to_storage"],
body.ls-redesign[data-page-is="maps-delivery"]     .ls-mobnav-link[data-page="maps-delivery"],
body.ls-redesign[data-page-is="maps"]              .ls-mobnav-link[data-page="maps"],
body.ls-redesign[data-page-is="zone_editor"]       .ls-mobnav-link[data-page="zone_editor"],
body.ls-redesign[data-page-is="dashboard"]         .ls-mobnav-link[data-page="dashboard"]{
  color:var(--ls-teal-700);background:var(--ls-teal-100);
}
body.ls-redesign[data-page-is="orders"]            .ls-mobnav-link[data-page="orders"] .ls-mobnav-label,
body.ls-redesign[data-page-is="orders_to_storage"] .ls-mobnav-link[data-page="orders_to_storage"] .ls-mobnav-label,
body.ls-redesign[data-page-is="maps-delivery"]     .ls-mobnav-link[data-page="maps-delivery"] .ls-mobnav-label,
body.ls-redesign[data-page-is="maps"]              .ls-mobnav-link[data-page="maps"] .ls-mobnav-label,
body.ls-redesign[data-page-is="zone_editor"]       .ls-mobnav-link[data-page="zone_editor"] .ls-mobnav-label,
body.ls-redesign[data-page-is="dashboard"]         .ls-mobnav-link[data-page="dashboard"] .ls-mobnav-label{
  font-weight:700;
}
body.ls-redesign[data-page-is="orders"]            .ls-mobnav-link[data-page="orders"]::before,
body.ls-redesign[data-page-is="orders_to_storage"] .ls-mobnav-link[data-page="orders_to_storage"]::before,
body.ls-redesign[data-page-is="maps-delivery"]     .ls-mobnav-link[data-page="maps-delivery"]::before,
body.ls-redesign[data-page-is="maps"]              .ls-mobnav-link[data-page="maps"]::before,
body.ls-redesign[data-page-is="zone_editor"]       .ls-mobnav-link[data-page="zone_editor"]::before,
body.ls-redesign[data-page-is="dashboard"]         .ls-mobnav-link[data-page="dashboard"]::before{
  content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;
  background:var(--ls-teal);border-radius:0 0 6px 6px;
}
/* Reserve room so page content never hides under the bar. */
@media (max-width:767.98px){
  body.ls-redesign{padding-bottom:calc(64px + env(safe-area-inset-bottom,0));}
}
/* Extra-narrow phones: keep icons centred, hide labels rather than wrap. */
@media (max-width:359.98px){
  body.ls-redesign .ls-mobnav-label{display:none;}
  body.ls-redesign .ls-mobnav-icon{width:26px;height:26px;}
  body.ls-redesign .ls-mobnav-link{padding:.7rem .25rem;}
}

/* ==========================================================================
   v1.4 — feature-icon SVG visibility (2026-04-27)
   ========================================================================== */
body.ls-redesign .feature-icon-small,
body.ls-redesign .feature-icon{
  background:var(--ls-teal-100)!important;
  color:var(--ls-teal-700)!important;
  background-image:none!important;
}
body.ls-redesign .feature-icon-small svg,
body.ls-redesign .feature-icon-small .bi,
body.ls-redesign .feature-icon svg,
body.ls-redesign .feature-icon .bi{
  color:var(--ls-teal-700)!important;
  fill:currentColor!important;
}
body.ls-redesign .feature-icon-small svg *,
body.ls-redesign .feature-icon svg *{ fill:currentColor!important; }
body.ls-redesign .feature-icon-small svg{ height:1em!important; width:1em!important; }

/* ==========================================================================
   v1.5 — dashboard / detail page UX (2026-04-27)
   Targets: account dashboard tables + filter chrome, document detail page,
   order detail sections, side-rail nav. All scoped under body.ls-redesign.
   ========================================================================== */

/* --- Dashboard layout: cleaner section card, breathing room ----------- */
body.ls-redesign #registration-form{padding-top:7rem!important;background:var(--ls-cream);}
body.ls-redesign #registration-form > .container > .row{
  background:#fff;border-radius:18px;padding:1.5rem 1.25rem;
  box-shadow:0 2px 8px rgba(15,23,42,.04);border:1px solid var(--ls-line);
}
body.ls-redesign #registration-form h1.h1{font-size:clamp(1.5rem,2.4vw,2rem)!important;margin-bottom:.25rem;}
body.ls-redesign #registration-form h2.h2{font-size:clamp(1rem,1.6vw,1.2rem)!important;color:var(--ls-muted);font-weight:500;margin-bottom:1.5rem;}

/* --- Dashboard side-rail nav (desktop variant of block-mobilemenu) ---- */
body.ls-redesign .nav.flex-column.nav-pills{gap:.15rem;}
body.ls-redesign .nav.flex-column.nav-pills .nav-link{
  display:flex!important;align-items:center;gap:.6rem;
  padding:.65rem .9rem!important;border-radius:10px!important;
  color:var(--ls-charcoal)!important;font-weight:500;
  transition:background .15s ease,color .15s ease,transform .12s ease;
}
body.ls-redesign .nav.flex-column.nav-pills .nav-link svg{width:1.1em;height:1.1em;flex-shrink:0;color:var(--ls-muted);}
body.ls-redesign .nav.flex-column.nav-pills .nav-link:hover{background:var(--ls-cream-2)!important;color:var(--ls-charcoal)!important;}
body.ls-redesign .nav.flex-column.nav-pills .nav-link.bg-danger,
body.ls-redesign .nav.flex-column.nav-pills .nav-link.text-white.bg-danger{
  background:var(--ls-teal-100)!important;color:var(--ls-teal-700)!important;
}
body.ls-redesign .nav.flex-column.nav-pills .nav-link.bg-danger svg{color:var(--ls-teal-700)!important;}
/* outer ul has nav-link applied as wrapper class — neutralize that */
body.ls-redesign .nav.flex-column.nav-pills > li.nav-link{padding:0!important;}

/* --- Filter form: card with subtle border + tidy labels --------------- */
body.ls-redesign form.row.row-cols-lg-auto.g-3{
  background:var(--ls-cream-2);border:1px solid var(--ls-line);
  border-radius:14px;padding:1rem 1.25rem;margin-bottom:1.5rem!important;
}
body.ls-redesign form.row.row-cols-lg-auto.g-3 .form-label{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ls-muted);font-weight:600;margin-bottom:.3rem;
}
body.ls-redesign form.row.row-cols-lg-auto.g-3 .form-control{
  border-radius:8px;border:1px solid var(--ls-line);background:#fff;
}
body.ls-redesign form.row.row-cols-lg-auto.g-3 .btn-primary{
  background:var(--ls-teal)!important;border-color:var(--ls-teal)!important;
}
body.ls-redesign form.row.row-cols-lg-auto.g-3 .btn-primary:hover{
  background:var(--ls-teal-700)!important;border-color:var(--ls-teal-700)!important;
}

/* --- Dashboard tables: card-like, hover rows, status pills ------------ */
body.ls-redesign #registration-form .table-responsive{
  background:#fff;border:1px solid var(--ls-line);border-radius:14px;
  overflow:hidden;margin-bottom:1.25rem;
}
body.ls-redesign #registration-form .table{margin-bottom:0;color:var(--ls-ink);}
body.ls-redesign #registration-form .table thead{background:var(--ls-cream);}
body.ls-redesign #registration-form .table thead th,
body.ls-redesign #registration-form .table thead td{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ls-charcoal);
  padding:.75rem 1rem;border-bottom:1px solid var(--ls-line);
}
body.ls-redesign #registration-form .table tbody tr{transition:background .12s ease;}
body.ls-redesign #registration-form .table tbody tr:hover{background:var(--ls-cream);}
body.ls-redesign #registration-form .table tbody td{
  padding:.7rem 1rem;border-color:var(--ls-line);vertical-align:middle;
}
body.ls-redesign #registration-form .table h4{
  font-size:1rem;font-weight:700;color:var(--ls-charcoal);
  margin:1.5rem 0 .75rem;display:flex;align-items:center;gap:.5rem;
}
/* Status pill helper (auto-applies to common status labels) */
body.ls-redesign #registration-form .table tbody td .status-pill,
body.ls-redesign #registration-form .table tbody td .badge{
  display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;
  border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  background:var(--ls-teal-100);color:var(--ls-teal-700);
}

/* --- Pagination chrome ------------------------------------------------- */
body.ls-redesign .pagination{gap:.25rem;}
body.ls-redesign .pagination .page-item .page-link{
  border:1px solid var(--ls-line);border-radius:8px;
  color:var(--ls-charcoal);background:#fff;font-weight:600;
  min-width:38px;text-align:center;
}
body.ls-redesign .pagination .page-item.active .page-link{
  background:var(--ls-teal);border-color:var(--ls-teal);color:#fff;
}
body.ls-redesign .pagination .page-item.disabled .page-link{color:var(--ls-muted);}

/* --- Document detail: typographic prose, breadcrumb, side meta -------- */
body.ls-redesign #catalog-about{padding-top:3.5rem!important;padding-bottom:5rem!important;background:#fff;}
body.ls-redesign #catalog-about .container{max-width:980px;}
body.ls-redesign #catalog-about p,
body.ls-redesign #catalog-about li{
  font-size:1.05rem;line-height:1.8;color:var(--ls-ink);
}
body.ls-redesign #catalog-about p strong,
body.ls-redesign #catalog-about li strong{color:var(--ls-charcoal);}
body.ls-redesign #catalog-about ul{margin:1.25rem 0;padding-left:1.5rem;}
body.ls-redesign #catalog-about ul li{margin-bottom:.4rem;}
body.ls-redesign #catalog-about a{color:var(--ls-teal-700);text-decoration:underline;text-underline-offset:3px;}
body.ls-redesign #catalog-about a:hover{color:var(--ls-teal);}

/* "Other documents" rail */
body.ls-redesign .ls-doc-rail{
  background:var(--ls-cream-2);border:1px solid var(--ls-line);
  border-radius:14px;padding:1.25rem;margin-top:2.5rem;
}
body.ls-redesign .ls-doc-rail .h6{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ls-muted);font-weight:700;margin-bottom:.75rem;
}
body.ls-redesign .ls-doc-rail ul{list-style:none;padding:0;margin:0;}
body.ls-redesign .ls-doc-rail li{margin-bottom:.4rem;}
body.ls-redesign .ls-doc-rail a{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
  border-radius:8px;color:var(--ls-charcoal);text-decoration:none;
  background:#fff;border:1px solid var(--ls-line);transition:background .15s ease;
}
body.ls-redesign .ls-doc-rail a:hover{background:var(--ls-teal-100);color:var(--ls-teal-700);text-decoration:none;}
body.ls-redesign .ls-doc-rail a.active{background:var(--ls-teal);color:#fff!important;border-color:var(--ls-teal);}

/* Breadcrumb */
body.ls-redesign .ls-breadcrumb{font-size:.85rem;color:rgba(255,255,255,.78);margin-bottom:.5rem;}
body.ls-redesign .ls-breadcrumb a{color:#fff;text-decoration:none;opacity:.8;}
body.ls-redesign .ls-breadcrumb a:hover{opacity:1;text-decoration:underline;}
body.ls-redesign .ls-breadcrumb .sep{margin:0 .35rem;opacity:.5;}

/* --- Order detail sections: cleaner blocks ---------------------------- */
body.ls-redesign #orderdetail .card,
body.ls-redesign #order-detail .card,
body.ls-redesign .order-detail-block{
  border-radius:14px;border:1px solid var(--ls-line);
  background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.04);
  margin-bottom:1.25rem;
}
body.ls-redesign #orderdetail .card-header{
  background:var(--ls-cream);border-bottom:1px solid var(--ls-line);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ls-charcoal);
}


/* ==========================================================================
   Loviastana redesign v1.3 — detail pages, account area, table/filter polish
   ========================================================================== */

/* --- Document detail (templates/home/document.html) --- */
body.ls-redesign .ls-doc-toc .card{border-radius:14px;}
body.ls-redesign .ls-doc-toc-bullet{color:var(--ls-teal);font-size:.85em;line-height:1;}
body.ls-redesign .ls-doc-prose{font-size:1.05rem;line-height:1.7;color:var(--ls-ink);}
body.ls-redesign .ls-doc-prose h2,body.ls-redesign .ls-doc-prose h3{
  font-family:'Manrope',sans-serif;font-weight:700;color:var(--ls-charcoal);
  margin-top:2rem;margin-bottom:.75rem;
}
body.ls-redesign .ls-doc-prose h2{font-size:1.6rem;}
body.ls-redesign .ls-doc-prose h3{font-size:1.25rem;}
body.ls-redesign .ls-doc-prose p{margin-bottom:1rem;color:var(--ls-ink);}
body.ls-redesign .ls-doc-prose ul,body.ls-redesign .ls-doc-prose ol{padding-left:1.4rem;margin-bottom:1rem;}
body.ls-redesign .ls-doc-prose li{margin-bottom:.4rem;}
body.ls-redesign .ls-doc-prose blockquote{
  border-left:3px solid var(--ls-teal);padding:.6rem 1rem;background:var(--ls-cream);
  border-radius:0 8px 8px 0;color:var(--ls-charcoal);margin:1.25rem 0;
}
body.ls-redesign .ls-doc-prose a{color:var(--ls-teal-700);text-decoration:underline;text-underline-offset:2px;}
body.ls-redesign .ls-doc-related .card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,42,.08);}
body.ls-redesign .bg-teal-100{background:var(--ls-teal-100)!important;}
body.ls-redesign .text-teal-700{color:var(--ls-teal-700)!important;}

/* --- Account area / dashboard --- */
body.ls-redesign #registration-form{padding-top:7rem!important;background:var(--ls-cream);min-height:60vh;}
body.ls-redesign #registration-form > .container{max-width:1280px;}
body.ls-redesign #registration-form h1.h1{font-size:clamp(1.5rem,2vw,1.9rem)!important;margin-bottom:.25rem;}
body.ls-redesign #registration-form h2.h2{font-size:clamp(1.1rem,1.4vw,1.3rem)!important;color:var(--ls-muted);font-weight:500;}

/* Sub-menu sidebar inside account pages (block-mobilemenu desktop list) */
body.ls-redesign .nav.flex-column.nav-pills .nav-link{
  border-radius:10px;padding:.6rem .85rem;color:var(--ls-charcoal)!important;
  display:flex;align-items:center;gap:.6rem;font-weight:500;font-size:.95rem;
  transition:background .15s ease,color .15s ease;
}
body.ls-redesign .nav.flex-column.nav-pills .nav-link:hover{background:var(--ls-cream-2);}
body.ls-redesign .nav.flex-column.nav-pills .nav-link.bg-danger,
body.ls-redesign .nav.flex-column.nav-pills .nav-link[class*="bg-danger"]{
  background:var(--ls-teal-100)!important;color:var(--ls-teal-700)!important;
  font-weight:600;box-shadow:inset 3px 0 0 var(--ls-teal);
}
body.ls-redesign .nav.flex-column.nav-pills li.nav-link{padding:0;background:transparent;}

/* Tables */
body.ls-redesign .table{border-collapse:separate;border-spacing:0;}
body.ls-redesign .table thead th{
  background:var(--ls-cream-2);color:var(--ls-charcoal);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--ls-line)!important;
  padding:.85rem .75rem;
  position:sticky;top:0;z-index:5;
}
body.ls-redesign .table tbody tr{transition:background .15s ease;}
body.ls-redesign .table tbody tr:nth-child(even) td{background:var(--ls-cream);}
body.ls-redesign .table tbody tr:hover td{background:var(--ls-teal-100);}
body.ls-redesign .table tbody td{
  padding:.75rem;vertical-align:middle;
  border-color:var(--ls-line)!important;
  color:var(--ls-ink);
}
body.ls-redesign .table-responsive{border-radius:14px;border:1px solid var(--ls-line);background:#fff;}

/* Empty-state messaging */
body.ls-redesign .ls-empty,
body.ls-redesign .table tbody tr.ls-empty-row td{
  text-align:center;color:var(--ls-muted);padding:3rem 1rem;
  font-size:.95rem;
}
body.ls-redesign .ls-empty::before{content:"";display:block;font-size:2rem;margin-bottom:.5rem;}

/* Filter bar — works on existing forms with class .ls-filterbar
   AND auto-styles any orders-page .row containing search/filter inputs. */
body.ls-redesign .ls-filterbar,
body.ls-redesign #registration-form form .row.g-2:has(input[type="search"]),
body.ls-redesign #registration-form form .row.g-3:has(input[type="search"]){
  background:#fff;border:1px solid var(--ls-line);border-radius:14px;
  padding:.75rem 1rem;margin-bottom:1rem;
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
}
body.ls-redesign .ls-filter-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ls-teal-100);color:var(--ls-teal-700);
  padding:.3rem .7rem;border-radius:999px;font-size:.85rem;font-weight:500;
}
body.ls-redesign .ls-filter-chip button.btn-close{
  --bs-btn-close-bg:none;width:.7em;height:.7em;opacity:.7;
}
body.ls-redesign .ls-filter-reset{font-size:.85rem;color:var(--ls-muted);text-decoration:none;}
body.ls-redesign .ls-filter-reset:hover{color:var(--ls-charcoal);text-decoration:underline;}

/* Mobile-friendly: account sub-menu collapses to horizontal scroll on narrow viewports */
@media (max-width:767.98px){
  body.ls-redesign .col-12.col-md-4.col-lg-3.d-none.d-md-block{display:none!important;}
}

/* Hero opacity-75 utility (used by document hero) */
body.ls-redesign .text-white.opacity-75{color:rgba(255,255,255,.85)!important;}

/* Body padding-bottom — reserve space so content does not fight the fixed nav.
   Single declaration; do NOT re-override .ls-mobnav padding-bottom here, the
   primary rule already pins it to env(safe-area-inset-bottom). Re-overriding
   was causing iOS to recompute the bar on every URL-bar collapse tick. */
@media (max-width:767.98px){
  body.ls-redesign{padding-bottom:calc(72px + env(safe-area-inset-bottom,0))!important;}
}

/* ==========================================================================
   v1.6 — orders/account parity, footer cleanups (2026-04-27)
   - #orders gets the same wrapper card chrome as #registration-form
   - btn-group filter pills retoned to teal
   - search/date inputs styled like dashboard filters
   ========================================================================== */

/* Mirror dashboard wrapper on the orders sections */
body.ls-redesign #orders{padding-top:7rem!important;background:var(--ls-cream);}
body.ls-redesign #orders > .container > .row{
  background:#fff;border-radius:18px;padding:1.5rem 1.25rem;
  box-shadow:0 2px 8px rgba(15,23,42,.04);border:1px solid var(--ls-line);
}
body.ls-redesign #orders h1.h1{font-size:clamp(1.5rem,2.4vw,2rem)!important;margin-bottom:1.25rem;}

/* Top tab pills (Моя доставка / Новые / Архив) — teal pills, no red */
body.ls-redesign #orders .btn-group .btn-danger,
body.ls-redesign #orders .btn-group .btn-outline-secondary{
  border-radius:999px!important;padding:.5rem 1.1rem;
  font-weight:600;font-size:.85rem;letter-spacing:.01em;
  background:#fff!important;color:var(--ls-charcoal)!important;
  border:1px solid var(--ls-line)!important;
  box-shadow:none!important;margin-right:.4rem;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body.ls-redesign #orders .btn-group .btn-danger:hover,
body.ls-redesign #orders .btn-group .btn-outline-secondary:hover{
  background:var(--ls-cream-2)!important;border-color:var(--ls-line)!important;
}
body.ls-redesign #orders .btn-group .btn-danger.active,
body.ls-redesign #orders .btn-group .btn-outline-secondary.active{
  background:var(--ls-teal)!important;color:#fff!important;
  border-color:var(--ls-teal)!important;
}

/* Filters card inside #orders */
body.ls-redesign #orders .card{
  background:var(--ls-cream-2)!important;border:1px solid var(--ls-line)!important;
  border-radius:14px!important;box-shadow:none!important;margin-bottom:1.5rem!important;
}
body.ls-redesign #orders .card form{padding:.5rem;}
body.ls-redesign #orders .card h2.h4{
  font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ls-muted);
  margin:0 0 .75rem;
}
body.ls-redesign #orders .card .form-label{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ls-muted);font-weight:600;margin-bottom:.3rem;
}
body.ls-redesign #orders .card .form-control,
body.ls-redesign #orders .card .form-select{
  border-radius:8px;border:1px solid var(--ls-line);background:#fff;
}

/* Submit / reset buttons inside the filter card */
body.ls-redesign #orders .card .btn-primary,
body.ls-redesign #orders .card button[type="submit"]{
  background:var(--ls-teal)!important;border-color:var(--ls-teal)!important;
  border-radius:8px;font-weight:600;
}
body.ls-redesign #orders .card .btn-primary:hover{
  background:var(--ls-teal-700)!important;border-color:var(--ls-teal-700)!important;
}

/* Stat callouts (Повторная доставка / В Доставке) — match brand */
body.ls-redesign #orders .badge.bg-warning{
  background:#FFE9C4!important;color:#92400E!important;font-weight:700;
}
body.ls-redesign #orders .badge.bg-primary{
  background:var(--ls-teal-100)!important;color:var(--ls-teal-700)!important;font-weight:700;
}
body.ls-redesign #orders .border.rounded-3{
  background:var(--ls-cream-2)!important;border:1px solid var(--ls-line)!important;
  border-radius:14px!important;padding:1rem 1.25rem!important;
}

/* Orders results table: same chrome as dashboard tables */
body.ls-redesign #orders .table-responsive{
  background:#fff;border:1px solid var(--ls-line);border-radius:14px;
  overflow:hidden;margin-bottom:1.25rem;
}
body.ls-redesign #orders .table thead{background:var(--ls-cream);}
body.ls-redesign #orders .table thead th,
body.ls-redesign #orders .table thead td{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ls-charcoal);
  padding:.7rem 1rem;border-bottom:1px solid var(--ls-line);
}
body.ls-redesign #orders .table tbody tr{transition:background .12s ease;}
body.ls-redesign #orders .table tbody tr:hover{background:var(--ls-cream);}
body.ls-redesign #orders .table tbody td{
  padding:.7rem 1rem;border-color:var(--ls-line);vertical-align:middle;
}

/* Result-count chip above table */
body.ls-redesign #orders h4.text-secondary,
body.ls-redesign #orders h4.text-muted{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ls-cream-2);border-radius:999px;
  padding:.35rem .9rem;font-size:.85rem;font-weight:600;
  color:var(--ls-charcoal)!important;border:1px solid var(--ls-line);
}


/* ==========================================================================
   v1.4 — filter chips, mobile filter bottom-sheet, account chrome polish
   ========================================================================== */

/* JS-rendered active-filter strip (.ls-filter-active) */
body.ls-redesign .ls-filter-active{
  background:#fff;border:1px solid var(--ls-line);border-radius:14px;
  padding:.6rem .85rem;
}
body.ls-redesign .ls-filter-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ls-teal-100);color:var(--ls-teal-700);
  padding:.25rem .65rem;border-radius:999px;font-size:.85rem;font-weight:500;
}
body.ls-redesign .ls-filter-chip-x{
  color:var(--ls-teal-700);font-weight:700;line-height:1;padding:0 .15rem;
}
body.ls-redesign .ls-filter-chip-x:hover{color:var(--ls-charcoal);}
body.ls-redesign .ls-filter-reset{font-size:.85rem;color:var(--ls-muted);text-decoration:none;}
body.ls-redesign .ls-filter-reset:hover{color:var(--ls-charcoal);text-decoration:underline;}

/* Result count line — pages can drop a .ls-result-count next to the table */
body.ls-redesign .ls-result-count{
  font-size:.85rem;color:var(--ls-muted);margin:.25rem 0 .75rem;
  display:flex;align-items:center;gap:.5rem;
}
body.ls-redesign .ls-result-count strong{color:var(--ls-charcoal);font-weight:700;}

/* Mobile filter bottom-sheet:
   - On <md, the GET form inside #registration-form collapses behind a
     "Фильтры" toggle button. Tapping it slides up a sheet from the bottom.
   - The toggle is auto-injected by ls-filters.js when window matches mobile.
   - Pure CSS gates the show/hide on the [data-ls-filter-open] body attribute. */
@media (max-width:767.98px){
  body.ls-redesign #registration-form form[method="get"]{
    position:fixed;inset:auto 0 0 0;z-index:1050;
    background:#fff;border-radius:18px 18px 0 0;
    box-shadow:0 -16px 48px rgba(15,23,42,.18);
    padding:1.25rem 1rem calc(1rem + env(safe-area-inset-bottom,0));
    transform:translateY(100%);transition:transform .25s ease;
    max-height:80vh;overflow-y:auto;
  }
  body.ls-redesign[data-ls-filter-open] #registration-form form[method="get"]{
    transform:translateY(0);
  }
  body.ls-redesign[data-ls-filter-open]::after{
    content:"";position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1049;
  }
  body.ls-redesign .ls-filter-fab{
    position:fixed;right:1rem;bottom:calc(80px + env(safe-area-inset-bottom,0));
    z-index:1041;
    background:var(--ls-teal);color:#fff!important;
    border-radius:999px;padding:.7rem 1.1rem;font-weight:600;
    box-shadow:0 10px 24px rgba(20,184,166,.35);
    display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  }
}
@media (min-width:768px){
  body.ls-redesign .ls-filter-fab{display:none;}
}

/* Account chrome — when the page uses _account_chrome.html, ensure consistent gutters */
body.ls-redesign #registration-form > .container > .row{gap:1rem 0;}
body.ls-redesign #registration-form .col-12.col-md-8.col-lg-9{padding-left:1.25rem;}
@media (max-width:767.98px){
  body.ls-redesign #registration-form .col-12.col-md-8.col-lg-9{padding-left:.75rem;padding-right:.75rem;}
}

/* Card components used for both dashboard tiles and orders rows */
body.ls-redesign .ls-card-row{
  background:#fff;border:1px solid var(--ls-line);border-radius:12px;
  padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center;
  gap:.75rem;margin-bottom:.5rem;transition:transform .15s ease,box-shadow .15s ease;
}
body.ls-redesign .ls-card-row:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.06);}

/* ==========================================================================
   v1.5 — compact filter bar + full-width map chrome (2026-04-27)
   ========================================================================== */

/* COMPACT filter bar on dashboard / orders pages.
   Targets the GET form inside #registration-form. Halves vertical padding
   on desktop while preserving 40px+ tap targets on touch. */
@media (min-width:768px){
  body.ls-redesign #registration-form form[method="get"]{
    padding:.55rem .85rem;
  }
  body.ls-redesign #registration-form form[method="get"] .form-control,
  body.ls-redesign #registration-form form[method="get"] .form-select{
    padding:.35rem .65rem;font-size:.875rem;height:auto;min-height:34px;
  }
  body.ls-redesign #registration-form form[method="get"] .btn{
    padding:.35rem .85rem;font-size:.875rem;
  }
  body.ls-redesign #registration-form form[method="get"] .row{
    --bs-gutter-x:.5rem;--bs-gutter-y:.4rem;
  }
  body.ls-redesign .ls-filter-active{padding:.4rem .65rem;}
  body.ls-redesign .ls-filter-chip{padding:.18rem .55rem;font-size:.78rem;}
  body.ls-redesign .ls-filter-reset{font-size:.78rem;}
}
@media (max-width:767.98px){
  /* Touch targets stay roomy on mobile */
  body.ls-redesign #registration-form form[method="get"] .form-control,
  body.ls-redesign #registration-form form[method="get"] .form-select{
    min-height:40px;
  }
}

/* MAP pages full-width chrome.
   Pages /orders/map/, /orders/map-delivery/, /zone-editor/ keep the
   account-chrome (#registration-form + sidebar) but the map column
   breaks out of the standard container so the map gets all available px. */
body.ls-redesign #registration-form.ls-fullwidth-map{padding-bottom:0!important;}
body.ls-redesign #registration-form.ls-fullwidth-map > .container{max-width:100%;padding-left:1rem;padding-right:1rem;}
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col{padding-left:.25rem;padding-right:.25rem;}
body.ls-redesign #editor-map,
body.ls-redesign .ls-map-frame{
  width:100%;
  height:calc(100vh - 200px);
  min-height:480px;border-radius:14px;border:1px solid var(--ls-line);
  background:var(--ls-cream);
}
@media (max-width:767.98px){
  body.ls-redesign #editor-map,
  body.ls-redesign .ls-map-frame{
    height:60vh;min-height:380px;border-radius:0;border-left:0;border-right:0;
  }
  body.ls-redesign #registration-form.ls-fullwidth-map > .container{padding-left:0;padding-right:0;}
}

/* New homepage section: "Кому подходит" */
body.ls-redesign #for-whom .ls-tile{
  background:#fff;border:1px solid var(--ls-line);border-radius:18px;
  padding:1.5rem 1.25rem;height:100%;
  transition:transform .2s ease,box-shadow .2s ease;
}
body.ls-redesign #for-whom .ls-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.08);}
body.ls-redesign #for-whom .ls-tile-emoji{font-size:2.2rem;line-height:1;margin-bottom:.75rem;}
body.ls-redesign #for-whom .ls-tile h3{
  font-family:'Manrope',sans-serif;font-size:1.05rem;font-weight:700;
  margin-bottom:.4rem;color:var(--ls-charcoal);
}
body.ls-redesign #for-whom .ls-tile p{font-size:.92rem;color:var(--ls-muted);margin-bottom:0;}

/* New homepage section: "Почему Астана" */
body.ls-redesign #why-astana{background:var(--ls-cream);}
body.ls-redesign #why-astana .ls-why-card{
  background:#fff;border:1px solid var(--ls-line);border-radius:18px;
  padding:2rem;
}
body.ls-redesign #why-astana .ls-why-stats{
  display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.25rem;
}
body.ls-redesign #why-astana .ls-why-stat .num{
  font-family:'Manrope',sans-serif;font-size:1.6rem;font-weight:800;
  color:var(--ls-teal-700);line-height:1;
}
body.ls-redesign #why-astana .ls-why-stat .lab{font-size:.82rem;color:var(--ls-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.25rem;}
body.ls-redesign #why-astana .ls-why-map img{
  width:100%;height:auto;border-radius:14px;
  border:1px solid var(--ls-line);object-fit:cover;
}

/* ==========================================================================
   v1.8 — hero gradient restoration, padding/spacing fixes, zone editor (2026-04-27)
   ========================================================================== */

/* 1) Hero gradient on every hero-like section. Inner pages (about, contact,
   services, login, register, password reset, document detail) use
   `<section class="position-relative pt-5">` not `id="hero"`, so the
   gradient rule on #hero alone never reaches them. Apply the same
   charcoal→teal gradient + hide the .hero-bg image overlay so the look
   matches the homepage hero. */
body.ls-redesign section.position-relative.pt-5{
  background:linear-gradient(135deg,var(--ls-charcoal) 0%,var(--ls-charcoal-soft) 60%,#0B7A6F 100%)!important;
  color:#fff;
  padding-top:8rem!important;
  padding-bottom:4rem!important;
  overflow:hidden;
}
body.ls-redesign section.position-relative.pt-5 .hero-bg,
body.ls-redesign section.position-relative.pt-5 > .position-absolute{
  display:none!important;
}
/* keep heading colours aligned to the dark gradient */
body.ls-redesign section.position-relative.pt-5 h1,
body.ls-redesign section.position-relative.pt-5 .h1,
body.ls-redesign section.position-relative.pt-5 .display-4{color:#fff!important;}
body.ls-redesign section.position-relative.pt-5 p,
body.ls-redesign section.position-relative.pt-5 .lead,
body.ls-redesign section.position-relative.pt-5 .fs-4{color:rgba(255,255,255,.92)!important;}
/* exception: the auth/dashboard pages use #registration-form which is
   ALSO a hero-like wrapper but expects light theme. Override back. */
body.ls-redesign section#registration-form{background:var(--ls-cream)!important;color:var(--ls-ink);}

/* 2) Top padding for dashboard / orders / maps — header is ~58 px, leave
   ~22 px breathing room. */
body.ls-redesign #registration-form,
body.ls-redesign #orders,
body.ls-redesign #maps{
  padding-top:5rem!important;  /* was 7rem */
}

/* 3) Map pages: smaller map, more breathing room */
body.ls-redesign #editor-map,
body.ls-redesign #maps #map,
body.ls-redesign #map-delivery #map{
  height:60vh!important;       /* was 75vh */
  min-height:460px;
}
body.ls-redesign #registration-form.ls-fullwidth-map{padding-bottom:2.5rem!important;}
body.ls-redesign #registration-form.ls-fullwidth-map > .container{
  padding-left:1.25rem!important;padding-right:1.25rem!important;
}
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col{
  padding-left:.5rem!important;padding-right:.5rem!important;
}

/* 4) Zone editor zone buttons: keep them inside their column, no overflow */
body.ls-redesign #zones-list .zone-item{
  padding:.45rem .55rem!important;
  word-break:break-word;
}
body.ls-redesign #zones-list .zone-row-top{
  flex-wrap:wrap!important;
  gap:.35rem!important;
}
body.ls-redesign #zones-list .zone-row-top .zone-name{
  flex:1 1 100%;
  font-size:.85em!important;
  line-height:1.25;
}
body.ls-redesign #zones-list .zone-row-btns{
  flex-wrap:wrap!important;
  gap:.25rem!important;
  margin-top:.4rem!important;
  width:100%;
}
body.ls-redesign #zones-list .zone-row-btns .btn,
body.ls-redesign #zones-list .zone-btn{
  padding:.15rem .45rem!important;
  font-size:.68rem!important;
  line-height:1.2!important;
  border-radius:6px!important;
  min-width:0!important;
}
/* The "+ Новая зона" header button — make it not stretch wider than panel */
body.ls-redesign .zone-panel .btn-danger.btn-sm{
  font-size:.78rem!important;
  padding:.3rem .7rem!important;
  white-space:nowrap;
}
body.ls-redesign .zone-panel{
  padding:.85rem!important;
  border-radius:12px!important;
}

/* 5) Homepage cleanup: cap and constrain card art so newly-added blocks
   look proportional, ensure feature-icon-small pills size correctly. */
body.ls-redesign #trust-strip,
body.ls-redesign #why-us,
body.ls-redesign #coverage{padding-top:4rem;padding-bottom:4rem;}
body.ls-redesign #why-us .card,
body.ls-redesign #coverage .card{
  border:1px solid var(--ls-line)!important;
  border-radius:14px!important;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.04);
}
body.ls-redesign #why-us .feature-icon-small,
body.ls-redesign #coverage .feature-icon-small{
  width:48px!important;height:48px!important;
  font-size:1.4rem!important;flex-shrink:0;
}
body.ls-redesign #trust-strip .badge.bg-danger,
body.ls-redesign #why-us .badge.bg-danger,
body.ls-redesign #coverage .badge.bg-danger{
  background:var(--ls-teal-100)!important;
  color:var(--ls-teal-700)!important;
  font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;font-size:.7rem;
  padding:.4rem .9rem;
}

/* keep heromini image inside its column on small screens */
body.ls-redesign #hero .minihero img{max-width:100%;height:auto;}

/* mobile: tighten map column gutters so the map actually fills */
@media (max-width:767.98px){
  body.ls-redesign #registration-form.ls-fullwidth-map > .container{
    padding-left:.5rem!important;padding-right:.5rem!important;
  }
  body.ls-redesign #editor-map,
  body.ls-redesign #maps #map,
  body.ls-redesign #map-delivery #map{
    height:55vh!important;min-height:380px;
  }
}

/* ==========================================================================
   v1.7 — regression fixes (2026-04-27)
   1) zone-list: handled in templates/home/zone_editor.html inline <style>
   2) map heights: tightened — 65vh desktop, 55vh mobile, 16-24px column padding
   3) top-spacing: --ls-header-h variable, replaces all per-page 7rem hacks
   4) homepage img dimensions: card image consistency
   5) hero: restored richer multi-stop gradient with overlay
   ========================================================================== */

/* (3) Header height as a single source of truth.
   Fixed-top transparent header. Real measured heights from the rendered nav:
   - Desktop: ~72px (logo + nav padding)
   - Mobile : ~64px (smaller logo) */
:root{
  --ls-header-h: 72px;
}
@media (max-width:767.98px){
  :root{ --ls-header-h: 64px; }
}

/* Account / orders / map pages: top-padding = header + 16px breathing room.
   Replaces the scattered "padding-top:7rem !important" rules from older v1.x. */
body.ls-redesign #registration-form,
body.ls-redesign #orders,
body.ls-redesign #catalog-about{
  padding-top:calc(var(--ls-header-h) + 16px)!important;
}

/* (2) Map sizing — controlled, not full viewport */
body.ls-redesign #editor-map,
body.ls-redesign .ls-map-frame{
  height:65vh;
  min-height:480px;
  max-height:calc(100vh - var(--ls-header-h) - 120px);
}
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col{
  padding-left:1rem;padding-right:1rem;
}
@media (max-width:767.98px){
  body.ls-redesign #editor-map,
  body.ls-redesign .ls-map-frame{
    height:55vh;min-height:380px;border-radius:0;border-left:0;border-right:0;
  }
  body.ls-redesign #registration-form.ls-fullwidth-map > .container,
  body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col{
    padding-left:.5rem;padding-right:.5rem;
  }
}

/* (5) Hero gradient — richer brand-teal multi-stop.
   Was a 3-stop charcoal→grey→dark-teal; restored to 4-stop charcoal→
   dark-teal→mid-teal→bright-teal so the brand colour comes through. */
body.ls-redesign #hero{
  background:
    linear-gradient(135deg,
      #0F172A 0%,
      #134E4A 38%,
      #0F766E 72%,
      #14B8A6 100%
    )!important;
}
/* If the hero <img class="hero-bg"> is shown on a page (some inner pages keep
   it visible — the redesign hides it on /), darken it with a teal overlay so
   the white headline copy stays readable. */
body.ls-redesign #hero .hero-bg{
  display:block!important;
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.18;z-index:0;
}
body.ls-redesign #hero > .container{position:relative;z-index:1;}

/* (4) Card / image consistency on homepage and other detail pages.
   Cap image heights inside .card so no single img blows out a row. */
body.ls-redesign #trust-strip .card,
body.ls-redesign #why-us .card,
body.ls-redesign #coverage .card{
  border:1px solid var(--ls-line);border-radius:14px;
  background:#fff;padding:1.25rem;
}
body.ls-redesign #why-us .card{padding:1.5rem;}
body.ls-redesign #why-us .card .feature-icon-small{
  background:var(--ls-teal-100)!important;color:var(--ls-teal-700)!important;
  border:none!important;
}
body.ls-redesign #coverage .card{padding:1rem;}

/* Generic responsive image safety — never let an <img> overflow its parent. */
body.ls-redesign img{max-width:100%;height:auto;}
/* Exception: hero-bg covers its parent and uses object-fit. */
body.ls-redesign #hero .hero-bg,
body.ls-redesign .ls-why-map img{height:auto;max-width:100%;}
body.ls-redesign .minihero img{
  width:100%;max-width:520px;height:auto;
  border-radius:24px;object-fit:cover;
  transform:rotate(-1.5deg);
}

/* ==========================================================================
   v1.9 — header transparent-state buttons + global mobile nav (2026-04-27)
   ========================================================================== */

/* When the header is over the dark hero (no .ls-scrolled), the red "Регистрация"
   pill should read white-on-transparent like its outline sibling. Once the
   header gains the cream backdrop on scroll, restore the teal solid fill. */
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-danger,
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-primary{
  background:transparent!important;
  border:1.5px solid rgba(255,255,255,.7)!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-danger:hover,
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-primary:hover{
  background:#fff!important;
  border-color:#fff!important;
  color:var(--ls-charcoal)!important;
}
/* SVG inside header buttons follow text colour */
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn svg{color:inherit;fill:currentColor!important;}

/* ==========================================================================
   v1.8 — header button white when transparent + canonical bottom-nav (2026-04-27)
   ========================================================================== */

/* Header "Регистрация" button: WHITE in transparent (top-of-page) state,
   reverts to charcoal when the header collapses to the cream/scrolled state. */
body.ls-redesign header.fixed-top.transparent .btn-outline-danger,
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-outline-danger,
body.ls-redesign header.fixed-top:not(.shrink) .btn-outline-danger{
  color:#fff!important;
  border-color:#fff!important;
  background:transparent!important;
}
body.ls-redesign header.fixed-top.transparent .btn-outline-danger svg,
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-outline-danger svg{
  color:#fff!important;fill:#fff!important;
}
/* Hover on the transparent button → solid white pill, dark text */
body.ls-redesign header.fixed-top.transparent .btn-outline-danger:hover,
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-outline-danger:hover{
  background:#fff!important;color:var(--ls-charcoal)!important;
}
body.ls-redesign header.fixed-top.transparent .btn-outline-danger:hover svg,
body.ls-redesign header.fixed-top:not(.ls-scrolled) .btn-outline-danger:hover svg{
  color:var(--ls-charcoal)!important;fill:var(--ls-charcoal)!important;
}
/* Scrolled / solid header — restore the charcoal outline pill */
body.ls-redesign header.fixed-top.ls-scrolled .btn-outline-danger,
body.ls-redesign header.fixed-top.shrink .btn-outline-danger{
  color:var(--ls-charcoal)!important;
  border-color:var(--ls-charcoal)!important;
}

/* Canonical mobile bottom-nav (lovidostavka spec).
   The nav uses Bootstrap utility classes (bg-white / bg-danger / border / nav)
   so most styling comes from Bootstrap; we only adjust:
     - z-index high enough to clear floating chat widgets
     - cap text size on very narrow phones
     - keep .bg-danger active state on-brand teal (already set elsewhere). */
body.ls-redesign #mobile-accmenu{
  z-index:1040;
  /* compositor stability — preserve from earlier glitch fix */
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout paint;
}
body.ls-redesign #mobile-accmenu .nav-link{font-size:.78rem;line-height:1.1;padding:.55rem .25rem;min-height:48px;}
@media (max-width:359.98px){
  body.ls-redesign #mobile-accmenu .nav-link{font-size:0;padding:.55rem .35rem;}
  body.ls-redesign #mobile-accmenu .nav-link svg{margin-right:0!important;width:1.1em;height:1.1em;}
}
/* The site-wide .bg-danger is overridden to brand teal in v1.0; the active
   bottom-nav cell inherits that automatically. Keep text white. */
body.ls-redesign #mobile-accmenu .nav-link.bg-danger,
body.ls-redesign #mobile-accmenu .nav-link.text-white{color:#fff!important;}
/* Reserve content space so it never hides under the bar */
@media (max-width:767.98px){
  body.ls-redesign{padding-bottom:calc(64px + env(safe-area-inset-bottom,0))!important;}
}

/* ==========================================================================
   v2.0 — heading scale -15% across the board (2026-04-27)
   Earlier patches still cap the clamp() max but at sizes the user finds
   slightly too large. Dial each step down by ~15%.
   ========================================================================== */
body.ls-redesign h1, body.ls-redesign .h1,
body.ls-redesign .display-4, body.ls-redesign .display-3{
  font-size:clamp(1.75rem,3vw,2.85rem)!important;     /* was 3.4rem max */
}
body.ls-redesign h2, body.ls-redesign .h2{
  font-size:clamp(1.45rem,2.2vw,2.05rem)!important;   /* was 2.4rem max */
}
body.ls-redesign h3, body.ls-redesign .h3{
  font-size:clamp(1.1rem,1.5vw,1.45rem)!important;    /* was 1.7rem max */
}
body.ls-redesign h4, body.ls-redesign .h4{
  font-size:clamp(1rem,1.25vw,1.15rem)!important;
}
body.ls-redesign h5, body.ls-redesign .h5{
  font-size:clamp(.92rem,1.05vw,1rem)!important;
}
body.ls-redesign h6, body.ls-redesign .h6{
  font-size:.85rem!important;
}
/* Display utilities — pull them in as well */
body.ls-redesign .display-1{font-size:clamp(2rem,3.5vw,3.2rem)!important;}
body.ls-redesign .display-2{font-size:clamp(1.85rem,3.2vw,2.85rem)!important;}
body.ls-redesign .display-5{font-size:clamp(1.5rem,2.4vw,2.2rem)!important;}

/* Hero-specific override so the first-fold headline doesn't disappear */
body.ls-redesign #hero h1,
body.ls-redesign #hero .h1,
body.ls-redesign #hero .display-4{
  font-size:clamp(2rem,3.4vw,3.1rem)!important;
}

/* ==========================================================================
   v1.9 — global heading scale + new "Нам доверяют" block (2026-04-27)
   v1.1 had clamp() rules with `!important` that capped headings; v1.9
   tightens those caps another ~12% so the whole site reads less shouty.
   ========================================================================== */

/* Heading scale — single source of truth, supersedes the v1.1 clamp() values. */
body.ls-redesign h1,body.ls-redesign .h1,body.ls-redesign .display-3,body.ls-redesign .display-4{
  font-size:clamp(1.6rem,3.2vw,2.6rem)!important;
  line-height:1.18;
}
body.ls-redesign h2,body.ls-redesign .h2{
  font-size:clamp(1.35rem,2.3vw,1.95rem)!important;
  line-height:1.2;
}
body.ls-redesign h3,body.ls-redesign .h3{
  font-size:clamp(1.1rem,1.6vw,1.45rem)!important;
  line-height:1.25;
}
body.ls-redesign h4,body.ls-redesign .h4{
  font-size:clamp(1rem,1.3vw,1.2rem)!important;
  line-height:1.3;
}
body.ls-redesign h5,body.ls-redesign .h5{
  font-size:clamp(.95rem,1.1vw,1.05rem)!important;
}
body.ls-redesign h6,body.ls-redesign .h6{
  font-size:clamp(.88rem,1vw,.95rem)!important;
}
body.ls-redesign .display-1,body.ls-redesign .display-2{
  font-size:clamp(2rem,4vw,3rem)!important;
}

/* "Нам доверяют" trust block — 4 testimonial cards. Replaces the previous
   row of bare text labels. */
body.ls-redesign #trust-strip{background:#fff;}
body.ls-redesign #trust-strip .ls-trust-card{
  background:var(--ls-cream);
  border:1px solid var(--ls-line);
  border-radius:18px;
  padding:1.25rem 1.25rem 1.5rem;
  height:100%;
  display:flex;flex-direction:column;gap:.75rem;
}
body.ls-redesign #trust-strip .ls-trust-stars{
  color:#F59E0B;font-size:1rem;letter-spacing:1px;line-height:1;
}
body.ls-redesign #trust-strip .ls-trust-quote{
  color:var(--ls-charcoal);font-size:.95rem;line-height:1.55;flex:1;margin:0;
}
body.ls-redesign #trust-strip .ls-trust-author{
  display:flex;align-items:center;gap:.6rem;margin-top:auto;
}
body.ls-redesign #trust-strip .ls-trust-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--ls-teal-100);color:var(--ls-teal-700);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  flex-shrink:0;
}
body.ls-redesign #trust-strip .ls-trust-name{
  font-weight:700;color:var(--ls-charcoal);font-size:.92rem;line-height:1.2;
}
body.ls-redesign #trust-strip .ls-trust-role{
  color:var(--ls-muted);font-size:.78rem;line-height:1.2;
}

/* Stats strip below testimonials (sister-style) */
body.ls-redesign #trust-strip .ls-trust-stats{
  margin-top:2rem;border-top:1px solid var(--ls-line);padding-top:1.5rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
@media (max-width:575.98px){
  body.ls-redesign #trust-strip .ls-trust-stats{grid-template-columns:repeat(2,1fr);}
}
body.ls-redesign #trust-strip .ls-trust-stat .num{
  font-family:'Manrope',sans-serif;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;
  color:var(--ls-teal-700);line-height:1;
}
body.ls-redesign #trust-strip .ls-trust-stat .lab{
  color:var(--ls-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.35rem;
}

/* ==========================================================================
   v2.1 — fit-all-items + harder anti-jerk for .ls-mobnav (2026-04-27)
   ========================================================================== */

/* Compact 6-item bar: Заказы, Отгрузка, Доставки, Отгрузки, Зоны, Кабинет
   on shipments page admin view. Shrink padding + icon + label so all fit. */
body.ls-redesign .ls-mobnav-list{
  padding:.2rem .15rem!important;gap:.05rem!important;
  flex-wrap:nowrap;
}
body.ls-redesign .ls-mobnav-item{
  flex:1 1 0!important;min-width:0!important;
}
body.ls-redesign .ls-mobnav-link{
  padding:.45rem .1rem .5rem!important;
  font-size:.65rem!important;
  letter-spacing:0!important;
  border-radius:10px!important;
}
body.ls-redesign .ls-mobnav-icon{width:20px!important;height:20px!important;}
body.ls-redesign .ls-mobnav-label{
  font-size:.62rem!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;line-height:1.1;
}

/* If still tight on extra-narrow viewports, hide labels and rely on icon */
@media (max-width:399.98px){
  body.ls-redesign .ls-mobnav .ls-mobnav-label{display:none!important;}
  body.ls-redesign .ls-mobnav .ls-mobnav-icon{width:24px!important;height:24px!important;}
  body.ls-redesign .ls-mobnav .ls-mobnav-link{padding:.65rem .1rem!important;}
}

/* Stronger anti-jerk: lock transform, prevent transitions on scroll, and
   anchor to dynamic viewport bottom on browsers that support svh. The
   `bottom:0` will fall back where svh isn't supported. */
body.ls-redesign .ls-mobnav,
body.ls-redesign #mobile-accmenu{
  transition:none!important;
  animation:none!important;
  /* dynamic viewport unit for iOS Safari with disappearing toolbar */
  bottom:0;
  /* keep its own layer regardless of class state changes */
  transform:translate3d(0,0,0)!important;
  will-change:transform;
  /* solid bg removes any backdrop-filter recompute on scroll */
  background:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  /* drop the heavy box-shadow that was triggering layer reattach on Safari */
  box-shadow:0 -2px 8px rgba(15,23,42,.05)!important;
}

/* ==========================================================================
   v2.2 — map pages: remove top space above the map (2026-04-27)
   The map templates wrap content in `.container.mt-lg-5` (Bootstrap 3rem
   top margin) inside a `py-5` section that also has the v1.8 5rem override
   on padding-top. That stacks ~8-9rem of empty space above the map area.
   Trim it down to the header-clearance gap only.
   ========================================================================== */
body.ls-redesign #registration-form.ls-fullwidth-map{
  padding-top:5rem!important;
  padding-bottom:1rem!important;
}
body.ls-redesign #registration-form.ls-fullwidth-map > .container{
  margin-top:0!important;   /* defeats Bootstrap mt-lg-5 */
  padding-top:0!important;
}
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col{
  padding-top:.25rem!important;
}
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col h1,
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col h2,
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col .h1,
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col .h2{
  margin-top:0!important;margin-bottom:.5rem!important;
}
body.ls-redesign #registration-form.ls-fullwidth-map #map,
body.ls-redesign #registration-form.ls-fullwidth-map #editor-map{
  margin-top:.25rem!important;
}
@media (max-width:991.98px){
  body.ls-redesign #registration-form.ls-fullwidth-map{padding-top:4.25rem!important;}
}

/* ==========================================================================
   v1.10 — map pages: kill the duplicated top gap (2026-04-27)
   /orders/map/ + /orders/map-delivery/ + /zone-editor/ all have:
     <section id="registration-form" class="py-5 ls-fullwidth-map">  → padding-top
     <div class="container mt-lg-5">                                  → 48px margin-top on ≥lg
   Net: ~136px between fixed header and map. The `#registration-form` rule
   already provides the calc(var(--ls-header-h) + 16px) clearance, so the
   inner mt-lg-5 is redundant. Zero it on map pages only — other pages keep
   their existing rhythm.
   ========================================================================== */
body.ls-redesign #registration-form.ls-fullwidth-map > .container{
  margin-top:0!important;
  padding-top:0;
}
/* py-5 on the section adds 3rem top + bottom; the registration-form rule
   replaces top via !important. Trim the bottom too on map pages so the map
   column doesn't get an extra 3rem under it before the footer. */
body.ls-redesign #registration-form.ls-fullwidth-map{
  padding-bottom:1.5rem!important;
}
/* The map column itself: small consistent 12px gap from the page header. */
body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col{
  margin-top:.75rem;
}
@media (max-width:767.98px){
  body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col{margin-top:.5rem;}
}
/* Map element itself: drop any inherited top-padding so its top edge sits
   flush against the page-header / filter bar gap. */
#map { padding-top: 0 !important; }

/* ==========================================================================
   v2.3 — shipments page parity (2026-04-27)
   The Отгрузка page (#orders on orders_to_storage.html) now has the same
   markup as the deliveries page — card-wrapped filter form, plain h1.
   Add a few extra rules so the table chrome fully matches.
   ========================================================================== */

/* Trim Bootstrap's mt-lg-5 on non-fullwidth orders pages so the section
   doesn't get an extra 3rem margin above the title */
body.ls-redesign #orders > .container.mt-lg-5{
  margin-top:0!important;
}

/* Ensure the table inside #orders fills the column edge-to-edge */
body.ls-redesign #orders .table-responsive,
body.ls-redesign #orders > .container > .row > .col-12 > .table-responsive,
body.ls-redesign #orders .col-12.col-md-8.col-lg-9 .table-responsive{
  width:100%;border:1px solid var(--ls-line);border-radius:14px;
  background:#fff;overflow:hidden;margin-bottom:1.25rem;
}
body.ls-redesign #orders table{margin-bottom:0;width:100%;}
body.ls-redesign #orders table thead{background:var(--ls-cream);}
body.ls-redesign #orders table thead th{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ls-charcoal);
  padding:.7rem 1rem;border-bottom:1px solid var(--ls-line);white-space:nowrap;
}
body.ls-redesign #orders table tbody tr{transition:background .12s ease;}
body.ls-redesign #orders table tbody tr:hover{background:var(--ls-cream);}
body.ls-redesign #orders table tbody td{
  padding:.65rem 1rem;border-color:var(--ls-line);vertical-align:middle;
}

/* Bulk-action bar (#bulk-actions) — match brand chrome */
body.ls-redesign #orders #bulk-actions{
  background:var(--ls-cream-2);border:1px solid var(--ls-line);
  border-radius:12px;padding:.75rem 1rem;
}

/* QR-scanner toggle buttons inline in the form — give them brand outline */
body.ls-redesign #orders .card .btn-outline-secondary{
  border-radius:8px;border-color:var(--ls-line)!important;
  color:var(--ls-charcoal)!important;background:#fff!important;
}
body.ls-redesign #orders .card .btn-outline-secondary:hover{
  background:var(--ls-cream-2)!important;color:var(--ls-charcoal)!important;
}

/* v2.4 — zero top padding on the map container itself */
#map{padding-top:0!important;}

/* v2.5 — make sure Отгрузка table can horizontally scroll on phones */
body.ls-redesign #orders .table-responsive{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;
}
@media (max-width:767.98px){
  body.ls-redesign #orders table thead th,
  body.ls-redesign #orders table tbody td{
    padding:.45rem .55rem!important;font-size:.82rem!important;
    white-space:nowrap;
  }
  body.ls-redesign #orders table tbody td p.card-text{
    white-space:normal;font-size:.78rem;margin:.15rem 0!important;
  }
}

/* =====================================================================
   v3.0 — comprehensive mobile-adaptive pass (2026-05-01)
   1) Wider page widths on mobile (use full viewport with tight gutters)
   2) ALL tables horizontally scrollable with touch on small viewports
   3) Smaller table cell padding/font on mobile
   4) Map container: no top margin/padding, 96vh max height, 100% width
   5) Admin/dashboard pages adaptive — fix overflow on small screens
   ===================================================================== */

/* --- 1) Wider mobile page widths -------------------------------------- */
@media (max-width: 767.98px){
  body.ls-redesign .container,
  body.ls-redesign section > .container,
  body.ls-redesign section > .container-md,
  body.ls-redesign section > .container-lg,
  body.ls-redesign section > .container-xl{
    max-width: 100% !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  body.ls-redesign .container-fluid{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  /* keep header/footer chrome compact too */
  body.ls-redesign header.fixed-top .container,
  body.ls-redesign footer .container{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  /* avoid row negative margins blowing horizontal scroll */
  body.ls-redesign .row{
    --bs-gutter-x: .75rem;
  }
}
@media (max-width: 399.98px){
  body.ls-redesign .container,
  body.ls-redesign .container-fluid{
    padding-left: .35rem !important;
    padding-right: .35rem !important;
  }
}

/* --- 2) Universal table horizontal-scroll wrapper --------------------- */
/* Bootstrap supplies .table-responsive but we harden it for touch. Scoped
   beyond ls-redesign so admin / legacy pages also pick it up. */
.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.table-responsive-xl,
.ls-table-scroll-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
}

/* Safety net: if any <table.table> escaped its wrapper, give it
   a horizontal scroll container via display:block on mobile. */
@media (max-width: 767.98px){
  body.ls-redesign table.table:not(.table-no-scroll){
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
  }
  /* Tables inside an explicit .table-responsive wrapper keep the
     normal table layout — wrapper handles scroll. */
  body.ls-redesign .table-responsive > table.table,
  body.ls-redesign .ls-table-scroll-wrap > table{
    display: table;
    width: 100%;
  }

  /* CRITICAL: force cells to NOT wrap on mobile so the table grows past
     the viewport width and the wrapper's overflow-x actually engages.
     Without this, cells shrink-and-wrap and you get crammed unreadable
     columns instead of a scrollable table. Use .text-wrap on a cell
     to opt back into wrapping (e.g. address columns). */
  .table-responsive table thead th,
  .table-responsive table tbody td,
  .table-responsive table tbody th,
  .table-responsive table tfoot td,
  .ls-table-scroll-wrap table thead th,
  .ls-table-scroll-wrap table tbody td,
  .ls-table-scroll-wrap table tbody th,
  .ls-table-scroll-wrap table tfoot td{
    white-space: nowrap;
  }
  .table-responsive table td.text-wrap,
  .table-responsive table th.text-wrap,
  .ls-table-scroll-wrap table td.text-wrap,
  .ls-table-scroll-wrap table th.text-wrap{
    white-space: normal;
  }

  /* Visual cue that a table is horizontally scrollable on mobile.
     Right-edge gradient hints "more content this way". */
  .table-responsive,
  .ls-table-scroll-wrap{
    background-image: linear-gradient(to right, transparent 90%, rgba(0,0,0,.06));
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 18px 100%;
    background-attachment: local;
  }
}

/* --- 2d) Let .table-responsive actually overflow on tablet + mobile ----- */
/* Bootstrap .col-* are flex children with min-width:auto by default, so a
   col containing a wide table grows to the table's intrinsic width and the
   wrapper's overflow-x never engages. Force min-width:0 on the wrapper and
   common flex ancestors at ≤991.98px (tablet + mobile). Also drop any
   table-layout:fixed at the same breakpoint — fixed layout suppresses the
   intrinsic width and breaks horizontal scrolling. */
@media (max-width: 991.98px){
  body.ls-redesign .table-responsive,
  body.ls-redesign .ls-table-scroll-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.ls-redesign .table-responsive > table.table,
  body.ls-redesign .ls-table-scroll-wrap > table{
    table-layout: auto !important;
  }
  body.ls-redesign .row,
  body.ls-redesign .row > [class*="col-"],
  body.ls-redesign [class*="col-"] > .table-responsive,
  body.ls-redesign [class*="col-"] > .mt-4,
  body.ls-redesign [class*="col-"] > .mt-3,
  body.ls-redesign [class*="col-"] > div > .table-responsive{
    min-width: 0;
  }
}

/* --- 3) Smaller padding/font on mobile tables ------------------------- */
@media (max-width: 767.98px){
  body.ls-redesign table.table thead th,
  body.ls-redesign table.table tbody td,
  body.ls-redesign table.table tbody th,
  body.ls-redesign table.table tfoot td{
    padding: .4rem .5rem !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
  }
  body.ls-redesign table.table .btn,
  body.ls-redesign table.table .btn-sm{
    padding: .2rem .45rem;
    font-size: .72rem;
  }
  /* Long-text columns can wrap to keep total width sane */
  body.ls-redesign table.table td.text-wrap,
  body.ls-redesign table.table th.text-wrap{
    white-space: normal !important;
  }
}
@media (max-width: 399.98px){
  body.ls-redesign table.table thead th,
  body.ls-redesign table.table tbody td,
  body.ls-redesign table.table tbody th{
    padding: .3rem .4rem !important;
    font-size: .74rem !important;
  }
}

/* --- 4) Map container mobile sizing ----------------------------------- */
/* Public + admin pages render maps in #map (Yandex) or #editor-map
   (Leaflet zone editor). On mobile: drop margins/padding on the map
   wrapper, fill width, cap height at 96vh. */
@media (max-width: 767.98px){
  body.ls-redesign #map,
  body.ls-redesign #editor-map,
  body.ls-redesign .ls-map-frame{
    width: 100% !important;
    max-width: 100% !important;
    height: 96vh !important;
    max-height: 96vh !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  body.ls-redesign #registration-form.ls-fullwidth-map .ls-map-col,
  body.ls-redesign #registration-form .ls-map-col{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* and the section that wraps it shouldn't add extra top spacing */
  body.ls-redesign #registration-form.ls-fullwidth-map{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* --- 5) Admin / dashboard pages — adaptive sweep ---------------------- */
@media (max-width: 767.98px){
  /* Dashboard headings tighten so they don't push above-the-fold cards
     off-screen. */
  body.ls-redesign #orders h1,
  body.ls-redesign #orders h2,
  body.ls-redesign #orders .page-header h1,
  body.ls-redesign section .page-header h1{
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  /* Long action-button rows (Отгрузка, Создать заказ, Скачать ...)
     wrap cleanly instead of overflowing. */
  body.ls-redesign .page-header + form + .mb-3,
  body.ls-redesign section .mb-3 > .btn,
  body.ls-redesign section .mb-3 > .btn + .btn{
    margin-bottom: .35rem;
  }
  body.ls-redesign section .mb-3{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }
  body.ls-redesign section .mb-3 .btn{
    flex: 0 1 auto;
    font-size: .82rem;
    padding: .35rem .6rem;
  }
  /* Input groups in admin forms (search box + button) shouldn't
     overflow narrow viewports. */
  body.ls-redesign .input-group{
    flex-wrap: wrap;
  }
  body.ls-redesign .input-group > .form-control{
    min-width: 0;
    flex: 1 1 60%;
  }
  /* Pagination wraps instead of horizontal-scroll. */
  body.ls-redesign .pagination,
  body.ls-redesign nav .pagination{
    flex-wrap: wrap;
    gap: .15rem;
    justify-content: center;
  }
  body.ls-redesign .pagination .page-link,
  body.ls-redesign .pagination a,
  body.ls-redesign .pagination span{
    font-size: .8rem;
    padding: .25rem .5rem;
  }
  /* Card / stat blocks don't blow horizontal */
  body.ls-redesign .card,
  body.ls-redesign .card-body{
    overflow-wrap: anywhere;
  }
  /* PDF / qr-code action button strips on order detail */
  body.ls-redesign #orders .row > .col,
  body.ls-redesign #orders .row > [class*="col-"]{
    min-width: 0;
  }
  /* Forms: long labels & selects breathe; selects don't overflow */
  body.ls-redesign form .form-control,
  body.ls-redesign form .form-select,
  body.ls-redesign form .form-label{
    max-width: 100%;
  }
  body.ls-redesign form .row > [class*="col-"]{
    margin-bottom: .5rem;
  }
  /* Pre-formatted code / address blocks shouldn't extend the viewport */
  body.ls-redesign pre,
  body.ls-redesign code{
    white-space: pre-wrap;
    word-break: break-word;
  }
  /* Modal dialogs keep margins minimal so content fits */
  body.ls-redesign .modal-dialog{
    margin: .35rem;
  }
  body.ls-redesign .modal-body{
    padding: .85rem;
  }
}

/* Stock Django admin (/admin/) — already has responsive.css, but
   tighten table cell padding & ensure horizontal scroll in change-list. */
@media (max-width: 767.98px){
  #content-main #changelist .results,
  #content-main .module table{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    max-width: 100%;
  }
  #content-main #changelist table thead th,
  #content-main #changelist table tbody td{
    padding: .35rem .45rem !important;
    font-size: .78rem !important;
  }
}

/* =====================================================================
   Mobile content density pass — order / dashboard / shipment / map
   ---------------------------------------------------------------------
   Goal: maximise horizontal content area on phones by clawing back the
   gutter/padding budget Bootstrap ships with by default. Targets:
     - section#orders, #registration-form, #history, #prices, #maps,
       #shipments  → main content sections on most pages
     - section.py-5 (with no id)  → shipment_list/detail/new/template
                                    (plus any other generic content
                                    section)
   Desktop (≥ md) is unaffected.
   ===================================================================== */
@media (max-width: 767.98px){
  /* 1) Section vertical breathing: 3rem (py-5) → .65rem on mobile.
        Phones already scroll vertically, no need for huge gaps. */
  body.ls-redesign section#orders.py-5,
  body.ls-redesign section#registration-form.py-5,
  body.ls-redesign section#history.py-5,
  body.ls-redesign section#prices.py-5,
  body.ls-redesign section#maps,
  body.ls-redesign section#shipments.py-5,
  body.ls-redesign main > section.py-5,
  body.ls-redesign main > section.py-5.my-5{
    padding-top: .65rem !important;
    padding-bottom: .65rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* mt-lg-5 / mt-5 inside the same sections collapse on mobile */
  body.ls-redesign section#orders > .container.mt-lg-5,
  body.ls-redesign section#registration-form > .container.mt-lg-5,
  body.ls-redesign section#registration-form > .container.mt-5,
  body.ls-redesign section#history > .container.mt-lg-5,
  body.ls-redesign section.py-5 > .container.mt-lg-5{
    margin-top: 0 !important;
  }

  /* 2) Container horizontal padding: 12px → 4px on mobile so content
        gets ~16px more usable width. */
  body.ls-redesign section#orders > .container,
  body.ls-redesign section#registration-form > .container,
  body.ls-redesign section#history > .container,
  body.ls-redesign section#prices > .container,
  body.ls-redesign section#shipments > .container,
  body.ls-redesign section.py-5 > .container{
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }

  /* 3) Row gutters inside content sections: 24px → 6px. */
  body.ls-redesign section#orders > .container > .row,
  body.ls-redesign section#registration-form > .container > .row,
  body.ls-redesign section#history > .container > .row,
  body.ls-redesign section#shipments > .container > .row,
  body.ls-redesign section.py-5 > .container > .row{
    --bs-gutter-x: .375rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4) The main col (col-12 col-md-8 col-lg-9) padding: 12px → 4px. */
  body.ls-redesign section#orders > .container > .row > .col-12,
  body.ls-redesign section#registration-form > .container > .row > .col-12,
  body.ls-redesign section#history > .container > .row > .col-12,
  body.ls-redesign section#shipments > .container > .row > .col-12,
  body.ls-redesign section.py-5 > .container > .row > .col-12,
  body.ls-redesign section#orders > .container > .row > [class*="col-"],
  body.ls-redesign section#registration-form > .container > .row > [class*="col-"],
  body.ls-redesign section.py-5 > .container > .row > [class*="col-"]{
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }

  /* 5) Headings: shrink 1.2rem to fit the full title on a 320px line. */
  body.ls-redesign section#orders h1,
  body.ls-redesign section#orders h2,
  body.ls-redesign section#registration-form h1,
  body.ls-redesign section#registration-form h2,
  body.ls-redesign section#history h1,
  body.ls-redesign section#history h2,
  body.ls-redesign section#shipments h1,
  body.ls-redesign section#shipments h2,
  body.ls-redesign section.py-5 h1,
  body.ls-redesign section.py-5 h2,
  body.ls-redesign .page-header h1,
  body.ls-redesign .page-header h2{
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    margin-bottom: .5rem !important;
    word-break: break-word;
  }
  body.ls-redesign section h3,
  body.ls-redesign section h4{
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    margin-bottom: .35rem !important;
  }

  /* 6) Cards & stat blocks: tighter padding (default 1rem → .55rem). */
  body.ls-redesign section .card,
  body.ls-redesign section .card-body,
  body.ls-redesign section .ls-stat-card,
  body.ls-redesign section .ls-summary-card{
    padding: .55rem .65rem !important;
  }
  body.ls-redesign section .card + .card,
  body.ls-redesign section .row > [class*="col-"] + [class*="col-"]{
    margin-top: .35rem;
  }
  body.ls-redesign section .card-title,
  body.ls-redesign section .card-header{
    font-size: .92rem !important;
    padding: .4rem .55rem !important;
    margin-bottom: .25rem !important;
  }

  /* 7) Form rows (`.row.g-3`, `row-cols-lg-auto.g-3`): collapse gutters
        and bottom margin so search/filter forms hug content. */
  body.ls-redesign section form.row,
  body.ls-redesign section form .row{
    --bs-gutter-x: .35rem !important;
    --bs-gutter-y: .35rem !important;
    margin-bottom: .5rem !important;
  }
  body.ls-redesign section form .form-label{
    font-size: .78rem;
    margin-bottom: .15rem;
  }
  body.ls-redesign section form .form-control,
  body.ls-redesign section form .form-select{
    font-size: .9rem;
    padding: .35rem .55rem;
  }

  /* 8) Action-button strips (Создать / Скачать / Отгрузка...) wrap
        & shrink so they don't push the page sideways. */
  body.ls-redesign section .btn,
  body.ls-redesign section .btn-group .btn{
    font-size: .82rem;
    padding: .35rem .6rem;
  }

  /* 9) Map page: edge-to-edge map on mobile (kill all wrapper padding). */
  body.ls-redesign section#registration-form.ls-fullwidth-map,
  body.ls-redesign section#registration-form.ls-fullwidth-map > .container,
  body.ls-redesign section#registration-form.ls-fullwidth-map > .container > .row,
  body.ls-redesign section#registration-form.ls-fullwidth-map > .container > .row > .ls-map-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 10) Shipment-list specific: the `<section class="py-5 my-5">` outer
         margins on top of py-5 = ~6rem of empty white space on mobile.
         Already collapsed by rule (1) above, this just makes sure no
         child .my-5 / .my-4 reintroduces it. */
  body.ls-redesign main > section.py-5 .my-5,
  body.ls-redesign main > section.py-5 .my-4{
    margin-top: .35rem !important;
    margin-bottom: .35rem !important;
  }
}

/* Ultra-narrow phones (<400px): tighten further so e.g. iPhone SE 1st-gen
   and Galaxy Fold inner display still get readable density. */
@media (max-width: 399.98px){
  body.ls-redesign section#orders > .container,
  body.ls-redesign section#registration-form > .container,
  body.ls-redesign section#history > .container,
  body.ls-redesign section.py-5 > .container{
    padding-left: .15rem !important;
    padding-right: .15rem !important;
  }
  body.ls-redesign section#orders > .container > .row > [class*="col-"],
  body.ls-redesign section#registration-form > .container > .row > [class*="col-"],
  body.ls-redesign section.py-5 > .container > .row > [class*="col-"]{
    padding-left: .15rem !important;
    padding-right: .15rem !important;
  }
  body.ls-redesign section h1,
  body.ls-redesign section h2,
  body.ls-redesign .page-header h1{
    font-size: 1.1rem !important;
  }
  body.ls-redesign section .card,
  body.ls-redesign section .card-body{
    padding: .4rem .5rem !important;
  }
}

/* ===========================================================================
   v2.0 — global mobile density (2026-05-02)
   The earlier sprints scoped most density rules to specific section IDs
   (#orders, #registration-form, #history). This block extends the same
   treatment globally so dashboards, shipment pages, order create/edit, and
   any new page under body.ls-redesign get a denser layout without each
   needing its own selector. Desktop layout is untouched — every rule is
   inside an @media query.
   =========================================================================== */

/* Page-level overflow guard. Prevents a runaway child element from forcing
   a horizontal scrollbar on the whole page. Tables already get their own
   wrapper-scoped overflow-x (sprint 2). */
html, body{overflow-x:hidden;}

/* Tablet + small (≤991.98px): wider content area via tighter container
   padding and shrunk Bootstrap row gutters. Cuts vertical wasted space
   from utility-class section paddings (.py-5, .my-5, .mt-5, .mb-5). */
@media (max-width: 991.98px){
  body.ls-redesign .container{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  body.ls-redesign .row{
    --bs-gutter-x: .5rem;
  }
  body.ls-redesign .row > [class*="col-"]{
    padding-left: .25rem;
    padding-right: .25rem;
  }
  body.ls-redesign main section.py-5,
  body.ls-redesign section.py-5{
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  body.ls-redesign .my-5{margin-top:1rem !important; margin-bottom:1rem !important;}
  body.ls-redesign .mt-5{margin-top:1rem !important;}
  body.ls-redesign .mb-5{margin-bottom:1rem !important;}
  body.ls-redesign .py-4{padding-top:.75rem !important; padding-bottom:.75rem !important;}
  body.ls-redesign .px-4{padding-left:.5rem !important; padding-right:.5rem !important;}
  body.ls-redesign .card-body{padding:.6rem .75rem !important;}
}

/* Phones (≤575.98px): denser still. Heading floor below the existing
   clamp() lower bound — for tiny viewports we want even tighter than what
   the responsive clamp produces. */
@media (max-width: 575.98px){
  body.ls-redesign{font-size:14px;}
  body.ls-redesign h1, body.ls-redesign .h1{font-size:1.35rem !important;}
  body.ls-redesign h2, body.ls-redesign .h2{font-size:1.15rem !important;}
  body.ls-redesign h3, body.ls-redesign .h3{font-size:1rem !important;}
  body.ls-redesign h4, body.ls-redesign .h4{font-size:.95rem !important;}
  body.ls-redesign .form-control,
  body.ls-redesign .form-select,
  body.ls-redesign .input-group-text,
  body.ls-redesign .btn{
    padding:.35rem .55rem;
    font-size:.85rem;
  }
  body.ls-redesign .btn-sm{padding:.2rem .4rem; font-size:.78rem;}
  body.ls-redesign .card-body{padding:.5rem .6rem !important;}
  body.ls-redesign .container{
    padding-left:.35rem !important;
    padding-right:.35rem !important;
  }
  body.ls-redesign .row{--bs-gutter-x:.35rem;}
  body.ls-redesign .alert{padding:.5rem .65rem; font-size:.85rem;}
}

/* =====================================================================
   Sprint 4 — zone-editor map cap + fit-wider + denser table cells
   ---------------------------------------------------------------------
   - #editor-map: hard cap at 70vh on every viewport so the zone editor
     never grows past 70% of the screen height (was 55–60vh on mobile,
     unbounded on desktop).
   - Mobile (≤767.98px): claw back the last bit of side padding so
     content gets even more horizontal room.
   - Table cells: reduce padding + line-height + per-cell margin so
     more columns fit before the wrapper has to scroll.
   ===================================================================== */
body.ls-redesign #editor-map{
  max-height: 70vh !important;
}
@media (max-width: 767.98px){
  body.ls-redesign #editor-map,
  body.ls-redesign .ls-zone-editor #editor-map{
    height: 70vh !important;
    max-height: 70vh !important;
    min-height: 320px !important;
  }

  /* Fit-wider: take container/row/col padding to near-zero. The earlier
     density pass set these to .25rem; this pulls them lower. */
  body.ls-redesign .container,
  body.ls-redesign .container-fluid{
    padding-left: .15rem !important;
    padding-right: .15rem !important;
  }
  body.ls-redesign .row{
    --bs-gutter-x: .25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.ls-redesign .row > [class*="col-"]{
    padding-left: .1rem !important;
    padding-right: .1rem !important;
  }

  /* Denser table cells. Earlier rules set .4rem .5rem on mobile cells;
     this halves the horizontal padding so more columns fit before the
     scroll wrapper has to engage, and removes any inherited margin. */
  body.ls-redesign table.table thead th,
  body.ls-redesign table.table tbody td,
  body.ls-redesign table.table tbody th,
  body.ls-redesign table.table tfoot td,
  body.ls-redesign .table-responsive table thead th,
  body.ls-redesign .table-responsive table tbody td,
  body.ls-redesign .table-responsive table tbody th,
  body.ls-redesign .table-responsive table tfoot td,
  body.ls-redesign .ls-table-scroll-wrap table thead th,
  body.ls-redesign .ls-table-scroll-wrap table tbody td,
  body.ls-redesign .ls-table-scroll-wrap table tbody th,
  body.ls-redesign .ls-table-scroll-wrap table tfoot td{
    padding: .2rem .3rem !important;
    font-size: .76rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  body.ls-redesign table.table{
    border-spacing: 0 !important;
    margin-bottom: .35rem !important;
  }
}

@media (max-width: 575.98px){
  body.ls-redesign #editor-map{
    height: 70vh !important;
    max-height: 70vh !important;
  }
  body.ls-redesign .container,
  body.ls-redesign .container-fluid{
    padding-left: .1rem !important;
    padding-right: .1rem !important;
  }
  body.ls-redesign .row{ --bs-gutter-x: .15rem !important; }
  body.ls-redesign .row > [class*="col-"]{
    padding-left: .05rem !important;
    padding-right: .05rem !important;
  }
  body.ls-redesign table.table thead th,
  body.ls-redesign table.table tbody td,
  body.ls-redesign .table-responsive table thead th,
  body.ls-redesign .table-responsive table tbody td,
  body.ls-redesign .ls-table-scroll-wrap table thead th,
  body.ls-redesign .ls-table-scroll-wrap table tbody td{
    padding: .15rem .25rem !important;
    font-size: .72rem !important;
  }
}

/* =====================================================================
   Sprint 5 — zero out .row / col padding on mobile so content uses
   every horizontal pixel. Most pages render single-column on mobile
   (col-12 collapses col-md-8/lg-9), so col padding is pure deadweight
   margin on the content edges. This rule covers .row globally with !important
   to beat the per-section rules earlier in the file.

   Multi-col rows (`.row.g-1` / `.row.gx-1` etc.) keep their explicit
   gutter — Bootstrap's gutter utility classes still work.
   ===================================================================== */
@media (max-width: 767.98px){
  body.ls-redesign .row:not(.g-1):not(.gx-1):not(.g-2):not(.gx-2):not(.g-3):not(.gx-3){
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.ls-redesign .row:not(.g-1):not(.gx-1):not(.g-2):not(.gx-2):not(.g-3):not(.gx-3) > [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Bootstrap gutter helpers keep visible spacing between siblings on
     forms/grids that explicitly opted in. */
  body.ls-redesign .row.g-1 > [class*="col-"],
  body.ls-redesign .row.gx-1 > [class*="col-"]{
    padding-left: .15rem !important;
    padding-right: .15rem !important;
  }
  body.ls-redesign .row.g-2 > [class*="col-"],
  body.ls-redesign .row.gx-2 > [class*="col-"]{
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }
  body.ls-redesign .row.g-3 > [class*="col-"],
  body.ls-redesign .row.gx-3 > [class*="col-"]{
    padding-left: .35rem !important;
    padding-right: .35rem !important;
  }
}

/* =====================================================================
   Sprint 6 — switch mobile tables from horizontal-scroll to wrap-fit
   ---------------------------------------------------------------------
   Earlier sprints made tables horizontally scrollable on mobile by
   forcing `white-space: nowrap` on cells. Per latest dispatch: prefer
   100%-width fit with wrapping, so users see all data without dragging.

   Strategy:
     1. Force every mobile table to `width: 100%; max-width: 100%`.
     2. Override the inherited `white-space: nowrap` with
        `white-space: normal; word-break: break-word; overflow-wrap: anywhere`.
     3. Use `table-layout: auto` so columns size to content; the table
        no longer overflows the viewport, so wrapper scroll is moot.
     4. Add a `.ls-table-allow-scroll` opt-in for tables that genuinely
        need to keep horizontal scrolling (numeric grids, etc.).
   ===================================================================== */
@media (max-width: 767.98px){
  body.ls-redesign table,
  body.ls-redesign table.table,
  body.ls-redesign .table-responsive > table,
  body.ls-redesign .ls-table-scroll-wrap > table{
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    display: table !important;
    overflow-x: visible !important;
  }
  body.ls-redesign table thead th,
  body.ls-redesign table tbody td,
  body.ls-redesign table tbody th,
  body.ls-redesign table tfoot td,
  body.ls-redesign table.table thead th,
  body.ls-redesign table.table tbody td,
  body.ls-redesign table.table tbody th,
  body.ls-redesign table.table tfoot td,
  body.ls-redesign .table-responsive table thead th,
  body.ls-redesign .table-responsive table tbody td,
  body.ls-redesign .table-responsive table tbody th,
  body.ls-redesign .table-responsive table tfoot td,
  body.ls-redesign .ls-table-scroll-wrap table thead th,
  body.ls-redesign .ls-table-scroll-wrap table tbody td,
  body.ls-redesign .ls-table-scroll-wrap table tbody th,
  body.ls-redesign .ls-table-scroll-wrap table tfoot td{
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    vertical-align: top !important;
  }
  /* Wrappers no longer need to scroll, but keep them as a no-op so
     legacy markup doesn't introduce horizontal layout shifts. */
  body.ls-redesign .table-responsive,
  body.ls-redesign .ls-table-scroll-wrap{
    overflow-x: visible !important;
    background-image: none !important;  /* drop the right-edge scroll-hint */
  }

  /* Opt-in escape hatch: mark a wrapper with .ls-table-allow-scroll
     to keep the old nowrap+scroll behaviour on a specific table. */
  body.ls-redesign .ls-table-allow-scroll{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.ls-redesign .ls-table-allow-scroll table thead th,
  body.ls-redesign .ls-table-allow-scroll table tbody td{
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}