/* 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;
  }
}