/* ==========================================================================
   MatrasPro — кастомна тема ocStore v1.0 (2026-05-17)
   Палітра: Navy + Orange + Green (CTA)
   ========================================================================== */

:root {
  --m-navy:        #1E3A5F;
  --m-navy-dark:   #142844;
  --m-navy-light:  #2C5282;
  --m-orange:      #FF8C42;
  --m-orange-dark: #E5743B;
  --m-yellow:      #FFC93C;
  --m-green:       #16A34A;
  --m-green-dark:  #15803D;
  --m-red:         #DC2626;
  --m-red-light:   #FEE2E2;
  --m-white:       #FFFFFF;
  --m-bg:          #F7F8FA;
  --m-bg-alt:      #EEF2F7;
  --m-text:        #1F2937;
  --m-muted:       #6B7280;
  --m-border:      #E5E7EB;
  --m-border-dark: #D1D5DB;
  --m-shadow:      0 1px 3px rgba(0,0,0,0.05);
  --m-shadow-md:   0 4px 12px rgba(30,58,95,0.10);
  --m-shadow-lg:   0 10px 30px rgba(30,58,95,0.15);
  --m-radius:      8px;
  --m-radius-sm:   4px;
}

/* RESET / BASE */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--m-text);
  background: var(--m-bg);
}
a { color: var(--m-navy); text-decoration: none; transition: color .15s; }
a:hover { color: var(--m-orange); text-decoration: none; }
img { max-width: 100%; height: auto; }
h1,h2,h3,h4,h5,h6 { color: var(--m-navy); font-weight: 700; line-height: 1.25; margin-top: 0; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
#top {
  background: var(--m-navy-dark);
  color: var(--m-white);
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 2px solid var(--m-orange);
}
.m-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.m-topbar__left, .m-topbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.m-topbar__pill { display: inline-flex; align-items: center; gap: 6px; opacity: 0.95; }
.m-topbar__pill i { color: var(--m-orange); }
.m-topbar__phone { color: var(--m-white); font-weight: 600; }
.m-topbar__phone:hover { color: var(--m-orange); }
#top .form-control, #top select.form-control,
#top .btn, #top button {
  background: transparent; border: 0; color: var(--m-white); padding: 0 4px;
  font-size: 13px; height: auto;
}
#top .btn-link { color: var(--m-white); }
#top form { display: inline; margin: 0; padding: 0; }
#top .dropdown-menu { background: var(--m-white); }
#top .dropdown-menu a { color: var(--m-text); }
#top ul.list-inline { margin: 0; padding: 0; display: inline-flex; gap: 6px; }
@media (max-width: 768px) {
  .m-hide-mobile { display: none !important; }
  .m-topbar { font-size: 12px; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
#header { background: var(--m-white); padding: 18px 0 0; box-shadow: var(--m-shadow); }
.m-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding-bottom: 18px;
}
.m-header__logo { display: flex; align-items: center; }
.m-header__logo img { max-height: 56px; width: auto; }
.m-logo-text {
  display: flex; flex-direction: column;
  line-height: 1.05; font-weight: 800; letter-spacing: -0.5px;
}
.m-logo-text__primary { font-size: 30px; color: var(--m-navy); }
.m-logo-text__accent  { font-size: 30px; color: var(--m-orange); }
.m-logo-text small { font-size: 11px; color: var(--m-muted); font-weight: 400; letter-spacing: 0; margin-top: 2px; }

.m-header__search { display: flex; }
#search { width: 100%; }
#search .input-group { display: flex; width: 100%; }
#search input.form-control,
#search input[type="text"] {
  flex: 1; min-width: 0;
  height: 46px; padding: 0 16px;
  border: 2px solid var(--m-navy);
  border-right: 0;
  border-radius: var(--m-radius) 0 0 var(--m-radius);
  font-size: 15px;
  background: var(--m-white);
}
#search input.form-control:focus { outline: none; box-shadow: none; border-color: var(--m-orange); }
#search .input-group-btn { display: flex; }
#search .btn-default, #search button[type="button"] {
  height: 46px; padding: 0 22px;
  background: var(--m-navy) !important; color: var(--m-white) !important;
  border: 2px solid var(--m-navy) !important;
  border-radius: 0 var(--m-radius) var(--m-radius) 0;
  font-weight: 600; cursor: pointer;
}
#search .btn-default:hover { background: var(--m-orange) !important; border-color: var(--m-orange) !important; }
#search .btn-default i { color: var(--m-white); }

.m-header__actions { display: flex; align-items: center; gap: 16px; }
.m-header__contact {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 12px; color: var(--m-muted); line-height: 1.2;
}
.m-header__contact-label { font-size: 11px; }
.m-header__contact strong { font-size: 17px; color: var(--m-navy); }
.m-header__contact i { display: none; }

#cart, .m-cart-wrapper { position: relative; }
#cart > .btn, #cart button {
  background: var(--m-orange) !important;
  border: 0 !important;
  color: var(--m-white) !important;
  height: 46px; padding: 0 18px;
  border-radius: var(--m-radius);
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
#cart > .btn:hover { background: var(--m-orange-dark) !important; }
#cart .dropdown-menu { right: 0; left: auto; min-width: 320px; padding: 16px; border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg); border: 1px solid var(--m-border); }

@media (max-width: 991px) {
  .m-header { grid-template-columns: auto 1fr; }
  .m-header__actions { grid-column: 1 / -1; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--m-border); }
}
@media (max-width: 768px) {
  .m-header__contact { display: none; }
}

/* ==========================================================================
   MAIN NAV
   ========================================================================== */
.m-nav {
  background: var(--m-navy);
  margin-top: 0;
}
.m-nav__inner { display: flex; align-items: stretch; }
#menu, .navbar { background: transparent !important; border: 0 !important; margin: 0; padding: 0; min-height: 50px; border-radius: 0; }
#menu .navbar-collapse { padding: 0; }
#menu .navbar-nav { display: flex; flex-wrap: wrap; margin: 0; padding: 0; width: 100%; }
#menu .navbar-nav > li > a {
  color: var(--m-white) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 16px 18px !important;
  background: transparent !important;
  border: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus,
#menu .navbar-nav > .active > a,
#menu .navbar-nav > .open > a {
  background: var(--m-orange) !important;
  color: var(--m-white) !important;
}
#menu .navbar-nav .dropdown-menu {
  background: var(--m-white);
  border: 0;
  border-radius: 0 0 var(--m-radius) var(--m-radius);
  box-shadow: var(--m-shadow-md);
  padding: 8px 0;
  min-width: 220px;
}
#menu .navbar-nav .dropdown-menu > li > a { color: var(--m-text); padding: 8px 18px; font-weight: 500; text-transform: none; }
#menu .navbar-nav .dropdown-menu > li > a:hover { background: var(--m-bg); color: var(--m-orange); }
#menu .dropdown-inner ul.list-unstyled { padding: 0; margin: 0; }

@media (max-width: 991px) {
  #menu .navbar-header { display: block; padding: 8px; }
  #menu .navbar-toggle { background: var(--m-orange); color: var(--m-white); display: block; margin: 0; }
  #menu .navbar-nav { flex-direction: column; }
}

/* ==========================================================================
   HOME — HERO BANNER
   ========================================================================== */
.m-home { padding: 24px 16px 48px; }

.m-hero {
  background: linear-gradient(135deg, var(--m-navy) 0%, var(--m-navy-light) 100%);
  border-radius: var(--m-radius);
  overflow: hidden;
  padding: 48px 56px;
  margin-bottom: 36px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  color: var(--m-white);
}
.m-hero::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,140,66,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.m-hero__badge {
  display: inline-block; background: var(--m-orange); color: var(--m-white);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 18px;
}
.m-hero__title { color: var(--m-white); font-size: 42px; line-height: 1.1; margin: 0 0 14px; font-weight: 800; }
.m-hero__title span { color: var(--m-orange); }
.m-hero__sub { font-size: 16px; opacity: 0.92; margin: 0 0 24px; max-width: 480px; }
.m-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.m-hero__usp { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
.m-hero__usp li { display: flex; align-items: center; gap: 8px; opacity: 0.9; }
.m-hero__usp i { color: var(--m-orange); }
.m-hero__visual {
  position: relative; display: flex; align-items: center; justify-content: center; height: 280px;
}
.m-hero__visual-mattress {
  width: 320px; height: 180px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F4F8 100%);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 -4px 0 rgba(0,0,0,0.06);
  position: relative;
  transform: perspective(800px) rotateX(8deg);
}
.m-hero__visual-mattress::before {
  content: ''; position: absolute; inset: 14px; border-radius: 10px;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(30,58,95,0.04) 18px 19px);
}
.m-hero__visual-discount {
  position: absolute; top: 20px; right: 20px;
  background: var(--m-red); color: var(--m-white);
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; letter-spacing: -1px;
  box-shadow: 0 8px 24px rgba(220,38,38,0.45);
  transform: rotate(-12deg);
}

@media (max-width: 991px) {
  .m-hero { grid-template-columns: 1fr; padding: 32px 24px; }
  .m-hero__title { font-size: 30px; }
  .m-hero__visual { height: 200px; }
  .m-hero__visual-mattress { width: 220px; height: 130px; }
}

/* ==========================================================================
   SECTION TITLES
   ========================================================================== */
.m-section-title {
  font-size: 24px; font-weight: 800; color: var(--m-navy);
  position: relative; padding-bottom: 12px; margin-bottom: 24px;
}
.m-section-title::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 56px; height: 3px; background: var(--m-orange); border-radius: 2px;
}

/* ==========================================================================
   CATEGORIES TILES
   ========================================================================== */
.m-cats { margin-bottom: 36px; }
.m-cats__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
}
.m-cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px;
  background: var(--m-white);
  border: 2px solid var(--m-border);
  border-radius: var(--m-radius);
  text-align: center;
  color: var(--m-text);
  font-weight: 600;
  font-size: 13px;
  transition: all .2s;
}
.m-cat-tile:hover {
  border-color: var(--m-orange);
  transform: translateY(-3px);
  box-shadow: var(--m-shadow-md);
  color: var(--m-navy);
}
.m-cat-tile__icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--m-navy) 0%, var(--m-navy-light) 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--m-white);
  font-size: 24px;
  transition: all .2s;
}
.m-cat-tile:hover .m-cat-tile__icon { background: linear-gradient(135deg, var(--m-orange) 0%, var(--m-orange-dark) 100%); }
.m-cat-tile small { display: block; font-size: 11px; color: var(--m-red); font-weight: 700; }
.m-cat-tile--sale .m-cat-tile__icon { background: linear-gradient(135deg, var(--m-red) 0%, #B91C1C 100%); }

@media (max-width: 1200px) { .m-cats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .m-cats__grid { grid-template-columns: repeat(3, 1fr); } .m-cat-tile { padding: 14px 8px; } .m-cat-tile__icon { width: 44px; height: 44px; font-size: 18px; } }

/* ==========================================================================
   MID BANNERS (2 паралельні)
   ========================================================================== */
.m-midbanners {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 36px 0;
}
.m-midbanner {
  display: block; padding: 32px 28px; border-radius: var(--m-radius); color: var(--m-white);
  position: relative; overflow: hidden;
  min-height: 180px;
}
.m-midbanner:hover { color: var(--m-white); transform: translateY(-2px); box-shadow: var(--m-shadow-md); }
.m-midbanner--blue { background: linear-gradient(135deg, var(--m-navy) 0%, var(--m-navy-light) 100%); }
.m-midbanner--orange { background: linear-gradient(135deg, #F97316 0%, var(--m-orange) 100%); }
.m-midbanner__eyebrow { display: inline-block; background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; }
.m-midbanner h3 { color: var(--m-white); font-size: 26px; margin: 0 0 8px; font-weight: 800; }
.m-midbanner p { margin: 0 0 16px; opacity: 0.95; font-size: 14px; max-width: 320px; }
.m-midbanner__cta { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.95; }

@media (max-width: 768px) { .m-midbanners { grid-template-columns: 1fr; } }

/* ==========================================================================
   TRUST / USP BAR
   ========================================================================== */
.m-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 36px 0;
  background: var(--m-white); padding: 28px 24px; border-radius: var(--m-radius); border: 1px solid var(--m-border);
}
.m-trust__item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.m-trust__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--m-bg-alt); color: var(--m-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.m-trust__item h4 { font-size: 15px; margin: 0; font-weight: 700; color: var(--m-navy); }
.m-trust__item p { font-size: 13px; color: var(--m-muted); margin: 0; }

@media (max-width: 991px) { .m-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .m-trust { grid-template-columns: 1fr; } }

/* ==========================================================================
   BRANDS STRIP
   ========================================================================== */
.m-brands { margin: 36px 0; }
.m-brands__strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; padding: 20px; background: var(--m-white); border-radius: var(--m-radius); border: 1px solid var(--m-border);
}
.m-brand-logo {
  font-size: 16px; font-weight: 700; color: var(--m-muted);
  padding: 10px 22px; background: var(--m-bg); border-radius: var(--m-radius-sm);
  letter-spacing: -0.3px;
  transition: all .2s;
}
.m-brand-logo:hover { background: var(--m-navy); color: var(--m-white); }

/* ==========================================================================
   SEO COPY
   ========================================================================== */
.m-seo-copy {
  background: var(--m-white); padding: 32px 36px; border-radius: var(--m-radius);
  border: 1px solid var(--m-border); margin: 36px 0;
  font-size: 14px; line-height: 1.7;
}
.m-seo-copy h2 { font-size: 22px; margin-bottom: 14px; }
.m-seo-copy h3 { font-size: 17px; margin-top: 22px; margin-bottom: 8px; color: var(--m-navy); }
.m-seo-copy p { margin: 0 0 12px; color: var(--m-text); }
.m-seo-copy strong { color: var(--m-navy); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--m-radius);
  font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.3px;
  border: 2px solid transparent; cursor: pointer;
  transition: all .15s;
  text-decoration: none; line-height: 1.2;
}
.m-btn--orange { background: var(--m-orange); color: var(--m-white) !important; border-color: var(--m-orange); }
.m-btn--orange:hover { background: var(--m-orange-dark); border-color: var(--m-orange-dark); color: var(--m-white) !important; }
.m-btn--green { background: var(--m-green); color: var(--m-white) !important; border-color: var(--m-green); }
.m-btn--green:hover { background: var(--m-green-dark); border-color: var(--m-green-dark); color: var(--m-white) !important; }
.m-btn--navy { background: var(--m-navy); color: var(--m-white) !important; border-color: var(--m-navy); }
.m-btn--navy:hover { background: var(--m-navy-dark); border-color: var(--m-navy-dark); color: var(--m-white) !important; }
.m-btn--ghost { background: transparent; color: var(--m-white) !important; border-color: rgba(255,255,255,0.4); }
.m-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--m-white); color: var(--m-white) !important; }
.m-btn--lg { padding: 14px 32px; font-size: 15px; }
.m-btn--block { display: flex; width: 100%; }

/* OpenCart default buttons override */
.btn-primary, .btn-info {
  background: var(--m-orange) !important;
  border-color: var(--m-orange-dark) !important;
  color: var(--m-white) !important;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  border-radius: var(--m-radius); padding: 10px 22px;
}
.btn-primary:hover, .btn-info:hover { background: var(--m-orange-dark) !important; color: var(--m-white) !important; }
.btn-default { background: var(--m-white); border: 2px solid var(--m-border-dark); color: var(--m-text); border-radius: var(--m-radius); }
.btn-default:hover { border-color: var(--m-navy); color: var(--m-navy); }
#button-cart { background: var(--m-green) !important; border-color: var(--m-green-dark) !important; }
#button-cart:hover { background: var(--m-green-dark) !important; }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.m-breadcrumb, .breadcrumb {
  background: transparent !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  font-size: 13px; color: var(--m-muted);
  border-radius: 0;
}
.m-breadcrumb > li + li::before, .breadcrumb > li + li::before { content: '→'; color: var(--m-border-dark); padding: 0 8px; }
.m-breadcrumb a, .breadcrumb a { color: var(--m-muted); }
.m-breadcrumb a:hover, .breadcrumb a:hover { color: var(--m-orange); }
.m-breadcrumb > .active, .breadcrumb > .active { color: var(--m-text); font-weight: 600; }

/* ==========================================================================
   CATEGORY PAGE
   ========================================================================== */
.m-category { padding: 0 16px 48px; }
.m-category__head { margin-bottom: 24px; }
.m-category__title { font-size: 28px; margin: 0 0 8px; }
.m-category__desc { color: var(--m-muted); font-size: 14px; max-width: 800px; }

.m-subcats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.m-subcat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--m-white); border: 1px solid var(--m-border);
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--m-text);
}
.m-subcat-pill:hover { border-color: var(--m-orange); color: var(--m-orange); }
.m-subcat-pill img { width: 24px; height: 24px; object-fit: contain; }

.m-category__layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: flex-start; }
@media (max-width: 991px) { .m-category__layout { grid-template-columns: 1fr; } .m-sidebar { display: none; } }

/* SIDEBAR (column_left) */
.m-sidebar { background: var(--m-white); padding: 22px 20px; border-radius: var(--m-radius); border: 1px solid var(--m-border); }
.m-sidebar .panel, .m-sidebar .box { background: transparent; border: 0; box-shadow: none; margin-bottom: 24px; }
.m-sidebar .panel-heading, .m-sidebar .box-heading, .m-sidebar h3, .m-sidebar h4 {
  font-size: 14px; font-weight: 700; color: var(--m-navy);
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 0 0 10px; margin: 0 0 12px; border-bottom: 2px solid var(--m-orange);
  background: transparent;
}
.m-sidebar .list-group { border: 0; }
.m-sidebar .list-group-item, .m-sidebar ul.list-group > li {
  background: transparent; border: 0; border-bottom: 1px solid var(--m-border);
  padding: 8px 0; font-size: 14px;
}
.m-sidebar .list-group-item a, .m-sidebar ul.list-group > li > a { color: var(--m-text); }
.m-sidebar .list-group-item a:hover { color: var(--m-orange); }
.m-sidebar .list-group-item.active { background: transparent; color: var(--m-orange); font-weight: 700; }
.m-sidebar input[type="checkbox"], .m-sidebar input[type="radio"] { margin-right: 6px; }

/* TOOLBAR */
.m-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--m-white); padding: 14px 18px; border-radius: var(--m-radius); border: 1px solid var(--m-border);
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.m-toolbar__count { font-size: 14px; color: var(--m-muted); }
.m-toolbar__count strong { color: var(--m-navy); }
.m-toolbar__right { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.m-select, select.form-control {
  height: 38px; border: 1px solid var(--m-border-dark); border-radius: var(--m-radius-sm); padding: 0 12px; background: var(--m-white); font-size: 14px;
}

/* PRODUCTS GRID */
.m-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .m-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .m-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px)  { .m-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */
.m-card {
  background: var(--m-white);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  transition: all .2s;
}
.m-card:hover {
  border-color: var(--m-orange);
  box-shadow: var(--m-shadow-md);
  transform: translateY(-2px);
}

.m-card__badges {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.m-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--m-radius-sm);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-badge--new { background: #0EA5E9; color: var(--m-white); }
.m-badge--sale { background: var(--m-red); color: var(--m-white); }
.m-badge--delivery { background: #0284C7; color: var(--m-white); font-size: 10px; padding: 3px 8px; }
.m-badge--hit { background: var(--m-yellow); color: var(--m-navy); }

.m-card__image {
  display: block; padding: 18px;
  height: 220px;
  background: var(--m-bg);
  position: relative;
}
.m-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.m-card:hover .m-card__image img { transform: scale(1.05); }
.m-card__image-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-bg-alt) 100%);
  border-radius: var(--m-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--m-border-dark); font-size: 48px;
}

.m-card__body {
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.m-card__title {
  font-size: 14px; font-weight: 600; line-height: 1.35;
  margin: 0;
  min-height: 56px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-card__title a { color: var(--m-text); }
.m-card__title a:hover { color: var(--m-orange); }

.m-card__price { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.m-card__price-old { color: var(--m-muted); text-decoration: line-through; font-size: 13px; }
.m-card__price-now { color: var(--m-navy); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.m-card__price-now--sale { color: var(--m-red); }

.m-card .m-btn--green { margin-top: auto; }

/* Default OC product-thumb fallback */
.product-thumb {
  background: var(--m-white); border: 1px solid var(--m-border); border-radius: var(--m-radius);
  overflow: hidden; transition: all .2s;
}
.product-thumb:hover { border-color: var(--m-orange); box-shadow: var(--m-shadow-md); }

/* PAGINATION */
.m-pager { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; flex-wrap: wrap; gap: 12px; }
.m-pager__results { font-size: 13px; color: var(--m-muted); }
.pagination { margin: 0; }
.pagination > li > a, .pagination > li > span {
  color: var(--m-navy); border: 1px solid var(--m-border); padding: 8px 14px; font-weight: 600;
}
.pagination > .active > a, .pagination > .active > span, .pagination > li > a:hover {
  background: var(--m-orange) !important; border-color: var(--m-orange) !important; color: var(--m-white) !important;
}

/* EMPTY */
.m-empty {
  background: var(--m-white); padding: 60px 24px; border-radius: var(--m-radius);
  border: 1px dashed var(--m-border-dark);
  text-align: center; color: var(--m-muted);
}
.m-empty i { font-size: 48px; color: var(--m-border-dark); margin-bottom: 12px; }
.m-empty p { margin: 0 0 16px; font-size: 15px; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.m-product-page { padding: 0 16px 48px; }
.m-product__main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  background: var(--m-white); padding: 28px; border-radius: var(--m-radius); border: 1px solid var(--m-border);
  margin-bottom: 24px;
}
@media (max-width: 991px) { .m-product__main { grid-template-columns: 1fr; } }

.m-product__gallery .m-gallery__main img { width: 100%; max-height: 480px; object-fit: contain; border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); padding: 14px; background: var(--m-bg); }
.m-gallery__placeholder {
  height: 480px; background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-bg-alt) 100%);
  border-radius: var(--m-radius); display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--m-border-dark); gap: 16px;
}
.m-gallery__placeholder i { font-size: 80px; }
.m-gallery__placeholder span { color: var(--m-muted); font-size: 14px; }
.m-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.m-gallery__thumbs a { display: block; width: 72px; height: 72px; border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); padding: 4px; background: var(--m-white); }
.m-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.m-product__share { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.m-product__badge { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: var(--m-radius-sm); font-size: 12px; font-weight: 700; }

.m-product__title { font-size: 26px; margin: 0 0 16px; line-height: 1.2; }
.m-product__meta { list-style: none; padding: 0; margin: 0 0 18px; font-size: 14px; }
.m-product__meta li { padding: 4px 0; }
.m-product__meta strong { color: var(--m-muted); font-weight: 500; width: 130px; display: inline-block; }
.m-stock--in { color: var(--m-green); font-weight: 700; }
.m-stock--out { color: var(--m-red); font-weight: 700; }

.m-product__pricing {
  background: var(--m-bg); padding: 18px 22px; border-radius: var(--m-radius);
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px;
}
.m-product__price-old { color: var(--m-muted); text-decoration: line-through; font-size: 18px; }
.m-product__price-now { color: var(--m-navy); font-size: 32px; font-weight: 800; letter-spacing: -0.8px; }
.m-product__price-now--sale { color: var(--m-red); }

.m-product__options { margin-bottom: 18px; }
.m-product__buy { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

.m-qty { display: inline-flex; align-items: stretch; border: 2px solid var(--m-border-dark); border-radius: var(--m-radius); overflow: hidden; }
.m-qty__btn { width: 38px; background: var(--m-bg); border: 0; font-size: 18px; font-weight: 700; cursor: pointer; color: var(--m-navy); }
.m-qty__btn:hover { background: var(--m-orange); color: var(--m-white); }
.m-qty__input { width: 52px; text-align: center; border: 0; border-left: 1px solid var(--m-border); border-right: 1px solid var(--m-border); height: 46px; font-weight: 700; font-size: 16px; }
.m-qty__input:focus { outline: none; }

.m-product__buy .m-btn--lg { flex: 1; height: 50px; }

.m-product__quickorder { font-size: 14px; padding: 12px 16px; background: var(--m-bg-alt); border-radius: var(--m-radius-sm); margin-bottom: 18px; }
.m-product__quickorder-phone { color: var(--m-navy); font-weight: 700; font-size: 16px; margin-left: 8px; }

.m-product__usp { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; color: var(--m-muted); }
.m-product__usp i { color: var(--m-orange); margin-right: 6px; }

/* TABS */
.m-tabs { background: var(--m-white); border-radius: var(--m-radius); border: 1px solid var(--m-border); overflow: hidden; margin-bottom: 24px; }
.m-tabs__nav { list-style: none; padding: 0; margin: 0; display: flex; border-bottom: 2px solid var(--m-border); }
.m-tabs__nav li { margin: 0; }
.m-tabs__nav a { display: block; padding: 16px 22px; font-weight: 700; color: var(--m-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.m-tabs__nav li.active a { color: var(--m-navy); border-bottom-color: var(--m-orange); }
.m-tabs__panes { padding: 24px 28px; }
.m-tabs__panes .tab-pane { display: none; }
.m-tabs__panes .tab-pane.active { display: block; }
.m-attr-table { width: 100%; font-size: 14px; }
.m-attr-table td { padding: 8px 12px; border-bottom: 1px solid var(--m-border); }
.m-attr-table td:first-child { color: var(--m-muted); width: 40%; }

.m-related { margin-top: 36px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.m-footer {
  background: var(--m-navy-dark);
  color: var(--m-white);
  padding: 48px 0 20px;
  margin-top: 48px;
}
.m-footer__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 32px;
}
@media (max-width: 991px) { .m-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 600px) { .m-footer__grid { grid-template-columns: 1fr; } }

.m-footer__logo { display: inline-block; font-weight: 800; font-size: 28px; margin-bottom: 12px; line-height: 1; }
.m-footer__logo .m-logo-text__primary { color: var(--m-white); }
.m-footer__about { font-size: 14px; opacity: 0.8; margin-bottom: 16px; max-width: 280px; }

.m-footer__social { display: flex; gap: 10px; }
.m-social-link {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.08); color: var(--m-white) !important;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.m-social-link:hover { background: var(--m-orange); }

.m-footer__col h5 {
  color: var(--m-orange);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  font-weight: 800;
}
.m-footer__col ul { list-style: none; padding: 0; margin: 0; }
.m-footer__col ul li { margin-bottom: 8px; font-size: 13px; }
.m-footer__col ul a { color: rgba(255,255,255,0.8) !important; }
.m-footer__col ul a:hover { color: var(--m-orange) !important; }

.m-footer__contacts li { display: flex; align-items: flex-start; gap: 8px; }
.m-footer__contacts i { color: var(--m-orange); width: 14px; margin-top: 3px; }
.m-footer__contacts a { color: var(--m-white) !important; }
.m-footer__contacts a:hover { color: var(--m-orange) !important; }

.m-footer__pay { margin-top: 18px; }
.m-footer__pay h6 { color: rgba(255,255,255,0.7); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.m-pay-logos { display: flex; flex-wrap: wrap; gap: 6px; }
.m-pay-logo {
  background: rgba(255,255,255,0.95); color: var(--m-navy-dark);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 3px;
  letter-spacing: -0.2px;
}

.m-footer__bar {
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; opacity: 0.7;
}
.m-footer__powered a { color: var(--m-orange) !important; font-weight: 700; }

/* ==========================================================================
   ALERTS / MODALS / MISC
   ========================================================================== */
.alert { border-radius: var(--m-radius); padding: 12px 16px; }
.alert-success { background: #DCFCE7; border: 1px solid var(--m-green); color: #14532D; }
.alert-warning { background: #FEF3C7; border: 1px solid var(--m-yellow); color: #78350F; }
.alert-danger  { background: var(--m-red-light); border: 1px solid var(--m-red); color: #7F1D1D; }

.form-control { border: 1px solid var(--m-border-dark); border-radius: var(--m-radius-sm); height: 38px; padding: 0 12px; }
.form-control:focus { border-color: var(--m-orange); outline: none; box-shadow: 0 0 0 3px rgba(255,140,66,0.15); }

/* Required for tabs (Bootstrap default JS hooks) */
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
/* ========================================================================
   MatrasPro — Hero slide banners (inline SVG, без зовнішніх PNG)
   Версія v2 — 2026-05-17
   ======================================================================== */

/* Hero slideshow container — slick-style slider can be added later */
.m-hero { padding: 0; min-height: 380px; position: relative; overflow: hidden; }
.m-hero__slide {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  padding: 48px 56px; gap: 24px; min-height: 380px;
}

/* Hero illustration — replaces simple gradient box */
.m-hero__visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 320px;
}
.m-hero__visual svg { width: 100%; max-width: 460px; height: auto; }

/* Slide 1 — Mattress with discount badge */
.m-hero--slide1 { background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%); color: #fff; }

/* Slide 2 — Memory topper */
.m-hero--slide2 { background: linear-gradient(135deg, #FF8C42 0%, #F97316 100%); color: #fff; }

/* Slide 3 — Free delivery */
.m-hero--slide3 { background: linear-gradient(135deg, #142844 0%, #1E3A5F 100%); color: #fff; }

/* Common slide elements */
.m-hero__slide-eyebrow {
  display: inline-block; background: rgba(255,255,255,0.18); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 16px;
}
.m-hero--slide2 .m-hero__slide-eyebrow { background: rgba(255,255,255,0.25); }
.m-hero__slide-title { font-size: 42px; line-height: 1.1; margin: 0 0 14px; font-weight: 800; color: #fff; }
.m-hero__slide-title span { color: #FF8C42; }
.m-hero--slide2 .m-hero__slide-title span { color: #1E3A5F; }
.m-hero__slide-sub { font-size: 16px; opacity: 0.92; margin: 0 0 24px; max-width: 480px; }

@media (max-width: 991px) {
  .m-hero__slide { grid-template-columns: 1fr; padding: 32px 24px; }
  .m-hero__slide-title { font-size: 28px; }
  .m-hero__visual { height: 220px; }
}
/* ==========================================================================
   MatrasPro v3 — Polish CSS (banks-ready)
   - Hero carousel з auto-rotate
   - Mega menu з підкатегоріями
   - Sticky left sidebar
   - Кращі категорійні tiles з SVG
   - "100 днів на тест" коректне відображення
   ========================================================================== */

/* ========================= HERO CAROUSEL ========================= */
.m-hero-carousel {
  position: relative; overflow: hidden;
  border-radius: var(--m-radius);
  min-height: 380px;
  margin: 24px 0 36px;
}
.m-hero__track { position: relative; min-height: 380px; }
.m-hero-slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  padding: 48px 56px; gap: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
  color: #fff;
}
.m-hero-slide.active { opacity: 1; pointer-events: auto; }
.m-hero-slide--navy   { background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%); }
.m-hero-slide--orange { background: linear-gradient(135deg, #F97316 0%, #FF8C42 100%); }
.m-hero-slide--green  { background: linear-gradient(135deg, #15803D 0%, #16A34A 100%); }
.m-hero-slide__content { z-index: 2; }
.m-hero-slide__visual  { display: flex; align-items: center; justify-content: center; height: 280px; }
.m-hero-slide__visual svg { width: 100%; max-width: 460px; height: auto; }

.m-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: rgba(255,255,255,0.2);
  color: #fff; font-size: 28px; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  z-index: 3;
}
.m-hero__nav:hover { background: rgba(255,255,255,0.4); }
.m-hero__nav--prev { left: 16px; }
.m-hero__nav--next { right: 16px; }

.m-hero__dots {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.m-hero__dot {
  width: 32px; height: 4px; background: rgba(255,255,255,0.4);
  border: 0; cursor: pointer; padding: 0; border-radius: 2px;
  transition: background 0.2s;
}
.m-hero__dot.active { background: #fff; width: 44px; }

@media (max-width: 991px) {
  .m-hero-slide { grid-template-columns: 1fr; padding: 32px 24px; }
  .m-hero__slide-title { font-size: 26px; }
  .m-hero-slide__visual { height: 180px; }
  .m-hero__nav { display: none; }
}

/* ========================= MEGA MENU ========================= */
#menu .navbar-nav { position: relative; }
#menu .navbar-nav > li { position: static; }
#menu .navbar-nav > li > .dropdown-menu,
.m-mega-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border: 0; border-top: 3px solid var(--m-orange);
  border-radius: 0 0 var(--m-radius) var(--m-radius);
  padding: 24px 28px;
  display: none;
  box-shadow: var(--m-shadow-md);
  z-index: 100;
  margin-top: 0;
  min-width: 100%;
}
#menu .navbar-nav > li:hover > .dropdown-menu,
#menu .navbar-nav > li.open > .dropdown-menu,
#menu .navbar-nav > li:hover .m-mega-menu,
.m-mega-menu.open { display: block; }

.m-mega-menu__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 32px;
  max-width: 1280px; margin: 0 auto;
}
.m-mega-menu__col-title {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  color: var(--m-navy); margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 2px solid var(--m-orange);
  letter-spacing: 0.3px;
}
.m-mega-menu__link {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; color: var(--m-text);
  font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  background: transparent !important;
}
.m-mega-menu__link:hover { color: var(--m-orange) !important; background: transparent !important; }
.m-mega-menu__link-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--m-bg); color: var(--m-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.m-mega-menu__link:hover .m-mega-menu__link-icon { background: var(--m-orange); color: #fff; }
.m-mega-menu__count { font-size: 12px; color: var(--m-muted); margin-left: auto; }

/* Hide default OC dropdown-inner styling */
#menu .dropdown-inner { display: block; }
#menu .dropdown-inner ul.list-unstyled { padding: 0; margin: 0 0 16px; }
#menu .dropdown-inner ul.list-unstyled > li:first-child { font-weight: 800; text-transform: uppercase; font-size: 12px; color: var(--m-navy); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 2px solid var(--m-orange); }
#menu .dropdown-inner ul.list-unstyled > li > a { padding: 4px 0; color: var(--m-text); font-weight: 500; }
#menu .dropdown-inner ul.list-unstyled > li > a:hover { color: var(--m-orange); background: transparent; }
#menu .dropdown-menu .see-all { display: none; }

@media (max-width: 991px) {
  #menu .navbar-nav > li > .dropdown-menu { position: static; box-shadow: none; padding: 12px 24px; }
  .m-mega-menu__inner { grid-template-columns: 1fr 1fr; }
}

/* ========================= STICKY LEFT SIDEBAR ========================= */
.m-sidebar {
  position: sticky; top: 16px;
  align-self: flex-start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.m-sidebar::-webkit-scrollbar { width: 6px; }
.m-sidebar::-webkit-scrollbar-thumb { background: var(--m-border-dark); border-radius: 3px; }
.m-sidebar .panel, .m-sidebar .box, .m-sidebar > div { margin-bottom: 18px; }

/* ========================= CATEGORY TILES — IMPROVED ========================= */
.m-cat-tile {
  background: var(--m-white);
  border: 2px solid var(--m-border);
  border-radius: 12px;
  padding: 18px 12px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--m-text);
  transition: all 0.2s ease;
  min-height: 130px;
}
.m-cat-tile:hover {
  border-color: var(--m-orange);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255,140,66,0.15);
  color: var(--m-navy);
}
.m-cat-tile__icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F0F4F8 0%, #E2E8F0 100%);
  border-radius: 12px;
  transition: all 0.2s;
  padding: 8px;
}
.m-cat-tile__icon svg { width: 100%; height: 100%; }
.m-cat-tile:hover .m-cat-tile__icon {
  background: linear-gradient(135deg, #FFF6EB 0%, #FFE4CC 100%);
  transform: scale(1.05);
}
.m-cat-tile span { font-weight: 600; font-size: 13px; line-height: 1.25; }
.m-cat-tile small { display: block; color: var(--m-red); font-weight: 800; font-size: 11px; margin-top: 2px; }

.m-cat-tile--sale .m-cat-tile__icon { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); }

@media (max-width: 1200px) { .m-cats__grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 600px) {
  .m-cats__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .m-cat-tile { padding: 12px 8px; min-height: 110px; }
  .m-cat-tile__icon { width: 48px; height: 48px; }
}

/* ========================= UNIVERSAL POLISH ========================= */
/* prevent text overflow at narrow viewports */
.m-card__title, .m-cat-tile span { word-wrap: break-word; overflow-wrap: anywhere; }

/* improve search button alignment */
.m-header__search { min-width: 0; }
#search .input-group { width: 100%; }

/* fix breadcrumb overlap */
.m-breadcrumb, .breadcrumb { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* product card consistent height */
.m-card { min-height: 420px; }
@media (max-width: 600px) { .m-card { min-height: 360px; } }
/* ===== Hero carousel with real PNG backgrounds ===== */
.m-hero-carousel { min-height: 440px; }
.m-hero__track    { min-height: 440px; }

.m-hero-slide {
  display: flex; align-items: center;
  padding: 56px 64px;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 440px;
  color: #fff;
}
.m-hero-slide__content {
  z-index: 2;
  max-width: 540px;
  padding: 0 16px;
}

/* Slide-specific backgrounds */
.m-hero-slide--sale     { background-image: linear-gradient(90deg, rgba(20,40,68,0.85) 0%, rgba(20,40,68,0.3) 50%, rgba(20,40,68,0) 70%), url('/image/catalog/banners/hero-1-sale.png'); }
.m-hero-slide--memory   { background-image: linear-gradient(90deg, rgba(249,115,22,0.92) 0%, rgba(249,115,22,0.45) 50%, rgba(249,115,22,0) 75%), url('/image/catalog/banners/hero-2-memory.png'); }
.m-hero-slide--delivery { background-image: linear-gradient(90deg, rgba(20,40,68,0.88) 0%, rgba(20,40,68,0.35) 55%, rgba(20,40,68,0) 75%), url('/image/catalog/banners/hero-3-delivery.png'); }
.m-hero-slide--kids     { background-image: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(220,235,245,0.4) 50%, rgba(220,235,245,0) 75%), url('/image/catalog/banners/hero-4-kids.png'); color: #1E3A5F; }
.m-hero-slide--ortho    { background-image: linear-gradient(90deg, rgba(20,40,68,0.88) 0%, rgba(20,40,68,0.35) 55%, rgba(20,40,68,0) 75%), url('/image/catalog/banners/hero-5-ortho.png'); }

.m-hero-slide--kids .m-hero__slide-title       { color: #1E3A5F; }
.m-hero-slide--kids .m-hero__slide-title span  { color: #EC4899; }
.m-hero-slide--kids .m-hero__slide-eyebrow     { background: #EC4899; color: #fff; }
.m-hero-slide--kids .m-btn--ghost              { color: #1E3A5F !important; border-color: rgba(30,58,95,0.3); }

.m-hero__slide-title { font-size: 44px; line-height: 1.08; font-weight: 800; margin: 0 0 14px; color: #fff; }
.m-hero__slide-title span { color: #FF8C42; }
.m-hero__slide-sub   { font-size: 17px; opacity: 0.96; margin: 0 0 26px; }

@media (max-width: 991px) {
  .m-hero-slide { padding: 36px 24px; min-height: 320px; background-position: bottom right; }
  .m-hero-slide__content { max-width: 100%; padding: 0; }
  .m-hero__slide-title { font-size: 26px; }
  .m-hero-slide { background-size: 90% auto; background-position: right bottom; }
  .m-hero-slide::before {
    content:''; position:absolute; inset:0;
    background: inherit;
  }
}

/* ========== FIX 2026-05-18: slide 2 + slide 5 text/CTA collision ========== */

/* SLIDE 2 (memory): "анатомічна підтримка" was orange-on-orange → make navy для контрасту */
.m-hero-slide--memory .m-hero__slide-title span {
  color: #1E3A5F !important;
  font-weight: 800;
}

/* SLIDE 5 (ortho): PNG має truck/shield/14 icons знизу зліва — піднімаємо контент щоб CTA не накривав */
.m-hero-slide--ortho {
  align-items: flex-start;
  padding-top: 56px;
  padding-bottom: 110px; /* більше місця знизу під PNG-іконки */
}
.m-hero-slide--ortho .m-hero-slide__content {
  margin-top: 0;
}

/* На slide 4 (kids) — теж: PNG має ведмедика і хмарки, текст темний, треба text-shadow для читабельності на світлому */
.m-hero-slide--kids .m-hero__slide-title { text-shadow: 0 2px 4px rgba(255,255,255,0.6); }

/* Загальний: subline на світліших слайдах теж захист */
.m-hero-slide--memory .m-hero__slide-sub,
.m-hero-slide--ortho .m-hero__slide-sub {
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Збільшити gradient на slide 5 щоб іконки за PNG менш виділялись (підстраховка) */
.m-hero-slide--ortho {
  background-image: linear-gradient(90deg, rgba(20,40,68,0.95) 0%, rgba(20,40,68,0.6) 40%, rgba(20,40,68,0.15) 65%, rgba(20,40,68,0) 80%), url("/image/catalog/banners/hero-5-ortho.png") !important;
}

/* Slide 2 memory — посилимо gradient щоб білий title був контрастним */
.m-hero-slide--memory {
  background-image: linear-gradient(90deg, rgba(229,116,59,0.95) 0%, rgba(229,116,59,0.5) 45%, rgba(229,116,59,0.1) 70%), url("/image/catalog/banners/hero-2-memory.png") !important;
}
/* ========== FIX 2026-05-18: slide 2 + slide 5 ========== */

/* SLIDE 2 memory: span "анатомічна підтримка" orange-on-orange → navy */
.m-hero-slide--memory .m-hero__slide-title span {
  color: #1E3A5F !important;
  font-weight: 800;
}

/* SLIDE 5 ortho: PNG has truck/shield/14 icons bottom-left → move content up, more bottom-padding */
.m-hero-slide--ortho {
  align-items: flex-start;
  padding-top: 56px;
  padding-bottom: 110px;
}

/* Slide 4 kids: white-ish background, title navy — add light shadow */
.m-hero-slide--kids .m-hero__slide-title {
  text-shadow: 0 2px 4px rgba(255,255,255,0.6);
}

/* Better gradient на slide 5 — стіронімо PNG-icons тіньою */
.m-hero-slide--ortho {
  background-image: linear-gradient(90deg, rgba(20,40,68,0.95) 0%, rgba(20,40,68,0.6) 40%, rgba(20,40,68,0.15) 65%, rgba(20,40,68,0) 80%), url("/image/catalog/banners/hero-5-ortho.png") !important;
}

/* Memory — посилимо gradient зліва */
.m-hero-slide--memory {
  background-image: linear-gradient(90deg, rgba(229,116,59,0.95) 0%, rgba(229,116,59,0.5) 45%, rgba(229,116,59,0.1) 70%), url("/image/catalog/banners/hero-2-memory.png") !important;
}

/* subline захист на світліших */
.m-hero-slide--memory .m-hero__slide-sub,
.m-hero-slide--ortho .m-hero__slide-sub {
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
/* ========== FIX 2026-05-18 v6 ========== */

/* HEADER: телефон в один рядок + search-bar не зсувається */
.m-header__contact strong {
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: -0.3px;
}
.m-header__contact { white-space: nowrap; }
.m-header { gap: 18px; }
.m-header__search { min-width: 0; max-width: 100%; }
#search { width: 100%; max-width: 100%; }
#search .input-group { display: flex; flex-wrap: nowrap; width: 100%; }
#search input.form-control { flex: 1 1 auto; min-width: 0; }
#search .input-group-btn { flex-shrink: 0; }

@media (max-width: 1280px) {
  .m-header { grid-template-columns: auto 1fr auto !important; }
  .m-header__contact-label { display: none; }
}
@media (max-width: 991px) {
  .m-header__contact { display: none; }
}

/* SLIDE 5 ortho — новий PNG 03:52:29 не має truck/shield/14 icons → contention зник.
   Лишаємо контент на bottom-left як стандарт. */
.m-hero-slide--ortho {
  align-items: center !important;
  padding-top: 56px !important;
  padding-bottom: 56px !important;
  background-image: linear-gradient(90deg, rgba(20,40,68,0.85) 0%, rgba(20,40,68,0.4) 50%, rgba(20,40,68,0) 70%), url("/image/catalog/banners/hero-5-ortho.png") !important;
}

/* SLIDE 1 sale — новий PNG 03:50:43 має -65% red badge top-right + 2 матраси.
   Gradient зліва щоб texts читалось */
.m-hero-slide--sale {
  background-image: linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 70%), url("/image/catalog/banners/hero-1-sale.png") !important;
  background-color: #FF6B35;
  color: #1E3A5F;
}
.m-hero-slide--sale .m-hero__slide-title { color: #1E3A5F; }
.m-hero-slide--sale .m-hero__slide-title span { color: #DC2626; }
.m-hero-slide--sale .m-hero__slide-eyebrow { background: #DC2626; color: #fff; }
.m-hero-slide--sale .m-hero__slide-sub { color: #1E3A5F; text-shadow: 0 1px 3px rgba(255,255,255,0.5); }
.m-hero-slide--sale .m-btn--ghost { color: #1E3A5F !important; border-color: rgba(30,58,95,0.3); }

/* SLIDE 2 memory — новий PNG 03:55:18 показує latex topper з рукою на orange */
.m-hero-slide--memory {
  background-image: linear-gradient(90deg, rgba(229,116,59,0.95) 0%, rgba(229,116,59,0.5) 40%, rgba(229,116,59,0.05) 65%), url("/image/catalog/banners/hero-2-memory.png") !important;
}
.m-hero-slide--memory .m-hero__slide-title span { color: #FFFFFF !important; text-decoration: underline; text-decoration-color: #1E3A5F; text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* SLIDE 4 kids — новий PNG 03:57:54 більш ніжний, текст darker */
.m-hero-slide--kids {
  background-image: linear-gradient(90deg, rgba(255,255,255,0.75) 0%, rgba(220,235,245,0.3) 50%, rgba(220,235,245,0) 70%), url("/image/catalog/banners/hero-4-kids.png") !important;
  color: #1E3A5F;
}
.m-hero-slide--kids .m-hero__slide-title { color: #1E3A5F; text-shadow: 0 1px 2px rgba(255,255,255,0.8); }
.m-hero-slide--kids .m-hero__slide-title span { color: #EC4899; }
.m-hero-slide--kids .m-hero__slide-sub { color: #1E3A5F; text-shadow: 0 1px 2px rgba(255,255,255,0.7); }
.m-hero-slide--kids .m-hero__slide-eyebrow { background: #EC4899; color: #fff; }
.m-hero-slide--kids .m-btn--ghost { color: #1E3A5F !important; border-color: rgba(30,58,95,0.3); }
/* ========== v7 FIXES 2026-05-18 ========== */

/* HEADER: чотири-колонкова сітка (logo / search / phone / cart) */
.m-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  align-items: center;
  gap: 22px !important;
  padding-bottom: 18px;
}
.m-header__phone {
  display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; color: var(--m-text); line-height: 1.15;
  white-space: nowrap;
  padding-right: 8px;
}
.m-header__phone:hover { color: var(--m-orange); }
.m-header__phone-label { font-size: 11px; color: var(--m-muted); }
.m-header__phone strong { font-size: 18px; color: var(--m-navy); font-weight: 800; letter-spacing: -0.3px; }
.m-header__phone small { font-size: 10px; color: var(--m-muted); margin-top: 1px; }

@media (max-width: 1280px) {
  .m-header__phone small { display: none; }
  .m-header__phone strong { font-size: 15px; }
}
@media (max-width: 991px) {
  .m-header { grid-template-columns: auto 1fr auto !important; }
  .m-header__phone { display: none; }
}

/* SEARCH bar — input + button одна лінія */
#search { display: flex !important; }
#search .input-group {
  display: flex !important; flex-wrap: nowrap !important; width: 100%;
  align-items: stretch;
}
#search .input-group > input.form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 46px;
  border-right: 0;
  border-radius: var(--m-radius) 0 0 var(--m-radius);
}
#search .input-group-btn {
  flex-shrink: 0 !important;
  display: flex !important;
  width: auto !important;
}
#search .input-group-btn > button {
  height: 46px;
  padding: 0 22px;
  border-radius: 0 var(--m-radius) var(--m-radius) 0 !important;
  white-space: nowrap;
}

/* TOP BAR: лише lang (без currency) */
.m-topbar__right form[action*="currency"] { display: none !important; }
.m-topbar__right .pull-left,
.m-topbar__right .pull-right { float: none !important; }

/* LANG SWITCHER — простий dropdown */
.m-topbar__right .btn-link, .m-topbar__right form button {
  background: transparent; color: #fff; border: 0; padding: 0 6px; font-size: 13px;
  cursor: pointer;
}
.m-topbar__right .btn-link:hover, .m-topbar__right form button:hover { color: var(--m-orange); }

/* SIDEBAR FILTER fix — шире контейнер + text wrap */
.m-category__layout { grid-template-columns: 280px 1fr !important; gap: 24px; }
.m-sidebar { width: 280px !important; max-width: 280px; }
.m-sidebar .list-group-item,
.m-sidebar input[type="checkbox"] + label,
.m-sidebar .checkbox label,
.m-sidebar .panel-body label {
  display: flex !important; align-items: flex-start;
  font-size: 13px !important;
  line-height: 1.35 !important;
  padding: 4px 0 !important;
  white-space: normal !important;
  word-break: normal !important;
}
.m-sidebar .panel-heading, .m-sidebar h3, .m-sidebar h4 {
  font-size: 13px !important;
  padding: 0 0 8px !important;
}
.m-sidebar .panel { margin-bottom: 14px !important; }
.m-sidebar .panel-body { padding: 0 !important; }
.m-sidebar .checkbox { padding-left: 0 !important; margin: 0 !important; }
.m-sidebar .checkbox input[type="checkbox"] { margin-right: 6px; margin-top: 4px; flex-shrink: 0; }

/* Category sidebar (categories tree) — не розбивати назви */
#column-left ul.list-group > li {
  white-space: normal !important;
  word-break: normal !important;
}
#column-left ul.list-group > li > a,
#column-left .list-group-item {
  display: block !important;
  padding: 6px 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
#column-left .list-group-item.active { color: var(--m-orange); font-weight: 700; }

/* Subcategory active state */
.m-subcats { gap: 8px; }
.m-subcat-pill { padding: 8px 16px; font-size: 13px; }

/* No-image placeholder fix — use SVG mattress silhouette via CSS */
.m-card__image img[src*="no_image"],
.m-card__image img[src*="placeholder"] {
  opacity: 0.3;
  filter: hue-rotate(180deg);
}
/* ========== v8: PNG line-art icons замість inline SVG ========== */

.m-cat-tile__icon {
  background-size: 75% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.m-cat-tile__icon svg { display: none !important; }

.m-cat-tile__icon--mattress  { background-image: url('/image/catalog/banners/cat-mattress.png'); }
.m-cat-tile__icon--topper    { background-image: url('/image/catalog/banners/cat-topper.png'); }
.m-cat-tile__icon--pillow    { background-image: url('/image/catalog/banners/cat-pillow.png'); }
.m-cat-tile__icon--blanket   { background-image: url('/image/catalog/banners/cat-blanket.png'); }
.m-cat-tile__icon--protector { background-image: url('/image/catalog/banners/cat-protector.png'); }
.m-cat-tile__icon--access    { background-image: url('/image/catalog/banners/cat-accessory.png'); }
.m-cat-tile__icon--kids      { background-image: url('/image/catalog/banners/cat-kids.png'); }
.m-cat-tile__icon--sale      { background-image: url('/image/catalog/banners/cat-sale.png'); }

/* Trust bar icons */
.m-trust__icon { background-size: 75% !important; background-repeat: no-repeat !important; background-position: center !important; }
.m-trust__icon i { display: none !important; }
.m-trust__item:nth-child(1) .m-trust__icon { background-image: url('/image/catalog/banners/trust-delivery.png'); }
.m-trust__item:nth-child(2) .m-trust__icon { background-image: url('/image/catalog/banners/trust-guarantee.png'); }
.m-trust__item:nth-child(3) .m-trust__icon { background-image: url('/image/catalog/banners/trust-payment.png'); }
.m-trust__item:nth-child(4) .m-trust__icon { background-image: url('/image/catalog/banners/trust-return.png'); }

/* Filter sidebar — better collapsible groups */
.m-sidebar .panel {
  background: #FFFFFF !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-sm) !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
}
.m-sidebar .panel-heading {
  background: #FAFBFC !important;
  border-bottom: 1px solid var(--m-border) !important;
  padding: 10px 14px !important;
  border-radius: var(--m-radius-sm) var(--m-radius-sm) 0 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--m-navy) !important;
}
.m-sidebar .panel-body {
  padding: 10px 14px !important;
  font-size: 13px;
  max-height: 200px;
  overflow-y: auto;
}
.m-sidebar .panel-body .checkbox {
  margin: 4px 0 !important;
}
.m-sidebar .panel-body label {
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  font-weight: 500;
  color: var(--m-text);
}
.m-sidebar .panel-body label:hover { color: var(--m-orange); }

/* Filter "button-filter" — apply */
#button-filter {
  background: var(--m-orange) !important;
  border-color: var(--m-orange) !important;
  color: #fff !important;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
#button-filter:hover { background: var(--m-orange-dark) !important; }
/* ========== v9: cart + checkout matras-styling ========== */

.m-cart-page { padding: 0 16px 48px; }
.m-cart-page__title {
  font-size: 28px; color: var(--m-navy); font-weight: 800;
  margin: 16px 0 22px;
}
.m-cart-page__weight {
  display: inline-block; margin-left: 8px;
  font-size: 14px; color: var(--m-muted); font-weight: 500;
}

.m-cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 991px) { .m-cart-layout { grid-template-columns: 1fr; } }

.m-cart-main { min-width: 0; }

.m-cart-items { display: flex; flex-direction: column; gap: 12px; }
.m-cart-item {
  background: #FFFFFF;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 16px;
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 16px;
  align-items: center;
  transition: box-shadow .15s;
}
.m-cart-item:hover { box-shadow: var(--m-shadow-md); }

.m-cart-item__image {
  width: 96px; height: 96px; border-radius: var(--m-radius-sm);
  overflow: hidden; background: var(--m-bg);
  display: flex; align-items: center; justify-content: center;
}
.m-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.m-cart-item__placeholder { font-size: 36px; color: var(--m-border-dark); }

.m-cart-item__name {
  display: block;
  font-size: 15px; font-weight: 700; color: var(--m-navy);
  text-decoration: none;
  margin-bottom: 4px;
  line-height: 1.3;
}
.m-cart-item__name:hover { color: var(--m-orange); }
.m-cart-item__nostock { color: var(--m-red); font-size: 12px; font-weight: 600; }
.m-cart-item__model {
  font-size: 12px; color: var(--m-muted);
}
.m-cart-item__options { font-size: 12px; color: var(--m-muted); margin: 4px 0 0; padding-left: 16px; }

.m-cart-item__qty { min-width: 150px; }
.m-cart-item__qty .input-group input.form-control {
  height: 36px; text-align: center; font-weight: 700; border-color: var(--m-border-dark);
}
.m-cart-item__qty .btn { height: 36px; padding: 0 10px; }

.m-cart-item__price { text-align: right; min-width: 130px; }
.m-cart-item__unit {
  font-size: 12px; color: var(--m-muted); text-decoration: none;
}
.m-cart-item__total {
  font-size: 18px; font-weight: 800; color: var(--m-navy);
  letter-spacing: -0.3px;
}

@media (max-width: 600px) {
  .m-cart-item { grid-template-columns: 64px 1fr; grid-template-areas: "img body" "img price" "qty qty"; }
  .m-cart-item__image { grid-area: img; width: 64px; height: 64px; }
  .m-cart-item__body { grid-area: body; }
  .m-cart-item__price { grid-area: price; text-align: left; }
  .m-cart-item__qty { grid-area: qty; min-width: 0; }
}

/* Cart extras (coupon / shipping) — collapsible */
.m-cart-extras {
  background: #FFFFFF;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 0;
  margin-top: 18px;
}
.m-cart-extras > summary {
  padding: 14px 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--m-navy);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.m-cart-extras > summary::-webkit-details-marker { display: none; }
.m-cart-extras > summary::after { content: '+'; margin-left: auto; font-size: 18px; }
.m-cart-extras[open] > summary::after { content: '−'; }
.m-cart-extras__body { padding: 0 18px 18px; }

/* Cart Empty */
.m-cart-empty {
  background: #FFFFFF; border: 1px solid var(--m-border); border-radius: var(--m-radius);
  padding: 60px 24px; text-align: center;
}
.m-cart-empty i { color: var(--m-border-dark); margin-bottom: 12px; }
.m-cart-empty h2 { color: var(--m-navy); margin-bottom: 8px; }
.m-cart-empty p { color: var(--m-muted); margin-bottom: 20px; }

/* Right Sidebar — Summary */
.m-cart-summary { position: sticky; top: 16px; }
.m-cart-summary__inner {
  background: #FFFFFF;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 22px;
}
.m-cart-summary__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--m-navy);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--m-border);
}
.m-cart-summary__totals {
  list-style: none; padding: 0; margin: 0 0 18px;
}
.m-cart-summary__totals li {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 14px;
}
.m-cart-summary__totals li.m-cart-summary__grand {
  border-top: 1px solid var(--m-border);
  margin-top: 6px; padding-top: 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--m-navy);
}
.m-cart-summary__totals li.m-cart-summary__grand strong { color: var(--m-orange); }

.m-cart-summary__continue {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: var(--m-muted);
  font-size: 13px;
  text-decoration: none;
}
.m-cart-summary__continue:hover { color: var(--m-orange); }

.m-cart-summary__trust {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px dashed var(--m-border);
  font-size: 13px;
  color: var(--m-muted);
  line-height: 1.7;
}
.m-cart-summary__trust div { display: flex; align-items: center; gap: 8px; }
.m-cart-summary__trust i { color: var(--m-orange); width: 14px; }

/* Alerts within cart */
.m-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--m-radius);
  margin: 0 0 18px;
}
.m-alert--info { background: #FFF6EB; border: 1px solid #FFD8A8; color: #B85C0A; }
.m-alert--success { background: #DCFCE7; border: 1px solid var(--m-green); color: #14532D; }
.m-alert--danger { background: #FEE2E2; border: 1px solid var(--m-red); color: #7F1D1D; }

/* CHECKOUT page — refresh panel-default styling */
#checkout-checkout .panel {
  background: #FFFFFF !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}
#checkout-checkout .panel-heading {
  background: linear-gradient(135deg, var(--m-navy) 0%, var(--m-navy-light) 100%) !important;
  color: #fff !important;
  border-radius: var(--m-radius) var(--m-radius) 0 0 !important;
  padding: 14px 20px !important;
  border-bottom: 0 !important;
}
#checkout-checkout .panel-heading h4 { color: #fff !important; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.3px; margin: 0; }
#checkout-checkout .panel-heading a { color: #fff !important; text-decoration: none; }
#checkout-checkout .panel-heading a:hover { color: var(--m-orange) !important; }
#checkout-checkout .panel-body { padding: 22px !important; }
#checkout-checkout .form-control { border: 1px solid var(--m-border-dark); }
#checkout-checkout .form-control:focus { border-color: var(--m-orange); }
#checkout-checkout .btn-primary { background: var(--m-orange) !important; border-color: var(--m-orange) !important; }
#checkout-checkout #button-confirm { background: var(--m-green) !important; border-color: var(--m-green-dark) !important; font-size: 16px; padding: 14px 28px; font-weight: 700; text-transform: uppercase; }
#checkout-checkout #button-confirm:hover { background: var(--m-green-dark) !important; }
/* ========== v10: simplify checkout — guest-only, hide step 1 ========== */

/* Hide step 1 entirely — registration/login choice */
#accordion > div.panel:nth-child(1) { display: none !important; }

/* Step labels: rename via CSS — fallback if backend doesn't relabel */
#checkout-checkout h1 { font-size: 26px; color: var(--m-navy); font-weight: 800; margin: 18px 0 22px; }
#checkout-checkout h1::after { content: ''; }  /* strip trailing period via JS too */

/* Renumber visible steps via counter */
#checkout-checkout #accordion { counter-reset: step; }
#checkout-checkout #accordion > div.panel:not(:nth-child(1)) .panel-heading h4.panel-title { counter-increment: step; }
#checkout-checkout #accordion > div.panel:not(:nth-child(1)) .panel-heading h4.panel-title::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--m-orange); color: #fff;
  font-weight: 800; font-size: 14px;
  margin-right: 12px;
  vertical-align: middle;
}

/* Hide "КРОК N:" prefix added by OC3 language */
#checkout-checkout .panel-heading h4.panel-title a,
#checkout-checkout .panel-heading h4.panel-title {
  text-transform: none !important;
  font-size: 16px !important;
}

/* Layout: two columns (form + order summary) */
#checkout-checkout > .row {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 991px) {
  #checkout-checkout > .row { grid-template-columns: 1fr; }
}
#checkout-checkout #content { float: none; width: auto !important; padding: 0; }
#checkout-checkout #content.col-sm-12,
#checkout-checkout #content.col-sm-9 { width: auto !important; max-width: none !important; }

/* Order summary aside */
.m-checkout-summary {
  position: sticky; top: 16px;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 22px;
  align-self: flex-start;
}
.m-checkout-summary__title {
  font-size: 16px; font-weight: 800; color: var(--m-navy);
  text-transform: uppercase; letter-spacing: 0.3px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--m-border);
}
.m-checkout-summary__items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.m-checkout-summary__item { display: flex; gap: 10px; align-items: center; }
.m-checkout-summary__item img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid var(--m-border); }
.m-checkout-summary__item-name { flex: 1; font-size: 12px; color: var(--m-text); }
.m-checkout-summary__item-qty { font-size: 11px; color: var(--m-muted); }
.m-checkout-summary__item-price { font-size: 13px; font-weight: 700; color: var(--m-navy); white-space: nowrap; }

.m-checkout-summary__totals { list-style: none; padding: 0; margin: 14px 0 18px; border-top: 1px solid var(--m-border); padding-top: 12px; }
.m-checkout-summary__totals li {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 13px;
}
.m-checkout-summary__totals li.m-grand {
  border-top: 1px solid var(--m-border);
  margin-top: 6px; padding-top: 10px;
  font-size: 17px; font-weight: 800; color: var(--m-navy);
}
.m-checkout-summary__totals li.m-grand strong { color: var(--m-orange); }
.m-checkout-summary__trust {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--m-border);
  font-size: 12px; color: var(--m-muted); line-height: 1.7;
}
.m-checkout-summary__trust div { display: flex; align-items: center; gap: 6px; }
.m-checkout-summary__trust i { color: var(--m-orange); width: 12px; }

/* ========== v11: checkout layout fix + force-open all panels ========== */

#checkout-checkout > .row > #content { order: 1; }
#checkout-checkout > .row > .m-checkout-summary { order: 2; }

/* Force-open all visible panels (kill accordion) */
#checkout-checkout #accordion .panel-collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}

/* Hide accordion-toggle chevron / make headings non-clickable */
#checkout-checkout #accordion .panel-heading a.accordion-toggle { pointer-events: none; }
#checkout-checkout #accordion .panel-heading a.accordion-toggle .fa-caret-down,
#checkout-checkout #accordion .panel-heading .fa-caret-down { display: none !important; }

/* Make panels look like cards, not accordion */
#checkout-checkout #accordion .panel-heading { border-radius: var(--m-radius) var(--m-radius) 0 0 !important; }
#checkout-checkout #accordion .panel { box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; }
#checkout-checkout #accordion .panel-body { padding: 22px !important; }

/* Counter numbering on each visible panel */
#checkout-checkout #accordion { counter-reset: step; }
#checkout-checkout #accordion > div.panel:not(:nth-child(1)) .panel-heading h4.panel-title { counter-increment: step; }

/* Override h1 — strip dot via JS, hide column_left/right */
.column-left, .column-right { display: none !important; }

/* ========== v12: hide unused checkout fields (company / addr2 / postcode / country / region) ========== */
#collapse-payment-address input[name="company"],
#collapse-payment-address input[name="address_2"],
#collapse-payment-address input[name="postcode"],
#collapse-payment-address select[name="country_id"],
#collapse-payment-address select[name="zone_id"],
#collapse-shipping-address input[name="shipping_company"],
#collapse-shipping-address input[name="shipping_address_2"],
#collapse-shipping-address input[name="shipping_postcode"],
#collapse-shipping-address select[name="shipping_country_id"],
#collapse-shipping-address select[name="shipping_zone_id"] {
  display: none !important;
}
/* Hide their labels too (parent .form-group) */
#collapse-payment-address .form-group:has(input[name="company"]),
#collapse-payment-address .form-group:has(input[name="address_2"]),
#collapse-payment-address .form-group:has(input[name="postcode"]),
#collapse-payment-address .form-group:has(select[name="country_id"]),
#collapse-payment-address .form-group:has(select[name="zone_id"]),
#collapse-shipping-address .form-group:has(input[name="shipping_company"]),
#collapse-shipping-address .form-group:has(input[name="shipping_address_2"]),
#collapse-shipping-address .form-group:has(input[name="shipping_postcode"]),
#collapse-shipping-address .form-group:has(select[name="shipping_country_id"]),
#collapse-shipping-address .form-group:has(select[name="shipping_zone_id"]) {
  display: none !important;
}

/* Rename "Адреса 1" → "Адреса" */
#collapse-payment-address label[for*="address-1"]::after,
#collapse-shipping-address label[for*="address-1"]::after { content: ''; }

/* ========== v13: sidebar overhaul (categories + filters) + card upgrade ========== */

/* OVERRIDE v8/v9 sidebar styles that caused overflow + "- " mess */
.m-sidebar .panel-body { max-height: none !important; overflow: visible !important; }

/* CATEGORIES PANEL */
.m-cat-panel { background: #fff !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-sm) !important; margin-bottom: 12px !important; box-shadow: none !important; }
.m-cat-panel > .panel-heading {
  background: var(--m-navy) !important;
  color: #fff !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px;
  border-bottom: 0 !important;
}
.m-cat-panel > .panel-body { padding: 8px 0 !important; }
.m-cat-list { list-style: none; padding: 0; margin: 0; }
.m-cat-item { border-bottom: 1px solid #F1F3F5; }
.m-cat-item:last-child { border-bottom: 0; }
.m-cat-link {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-text);
  text-decoration: none;
  transition: all .15s;
}
.m-cat-link:hover { background: #FFF6EB; color: var(--m-orange); padding-left: 18px; }
.m-cat-item--active > .m-cat-link { background: #FFF6EB; color: var(--m-orange); border-left: 3px solid var(--m-orange); padding-left: 11px; }

.m-cat-sub { list-style: none; padding: 6px 0 8px 14px; margin: 0; border-top: 1px solid #F1F3F5; background: #FAFBFC; }
.m-cat-sub li { padding: 0; }
.m-cat-sub a {
  display: block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--m-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.m-cat-sub a:hover { color: var(--m-orange); border-left-color: var(--m-orange); }
.m-cat-sub--active a { color: var(--m-orange); font-weight: 700; border-left-color: var(--m-orange); }

/* FILTER PANEL */
.m-filter-panel {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.m-filter-panel__head {
  background: var(--m-navy);
  color: #fff;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-filter-panel__head i { margin-right: 6px; color: var(--m-orange); }
.m-filter-panel__body { padding: 4px 0; }
.m-filter-panel__foot { padding: 12px 14px; border-top: 1px solid var(--m-border); background: #FAFBFC; }

.m-filter-group { border-bottom: 1px solid #F1F3F5; }
.m-filter-group:last-child { border-bottom: 0; }
.m-filter-group__title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--m-navy);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.m-filter-group__title::-webkit-details-marker { display: none; }
.m-filter-group__title::after { content: '+'; font-size: 18px; color: var(--m-orange); font-weight: 700; }
.m-filter-group[open] .m-filter-group__title::after { content: '−'; }
.m-filter-group__body { padding: 4px 14px 12px; max-height: 220px; overflow-y: auto; }
.m-filter-row {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--m-text);
  cursor: pointer;
}
.m-filter-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--m-orange); flex-shrink: 0; }
.m-filter-row:hover { color: var(--m-orange); }
.m-filter-row input:checked + span { color: var(--m-orange); font-weight: 600; }

/* === PRODUCT CARD UPGRADE === */
.m-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.m-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  border-color: var(--m-orange);
}
.m-card__img {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #F7F8FA 0%, #ECEEF1 100%);
  overflow: hidden;
}
.m-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .3s; }
.m-card:hover .m-card__img img { transform: scale(1.05); }

.m-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.m-card__badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-card__badge--free { background: #1565D8; color: #fff; }
.m-card__badge--sale { background: var(--m-red); color: #fff; }
.m-card__badge--new { background: var(--m-green); color: #fff; }
.m-card__badge--hit { background: var(--m-orange); color: #fff; }

.m-card__body { padding: 14px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.m-card__name {
  font-size: 14px; font-weight: 700; color: var(--m-navy);
  text-decoration: none;
  line-height: 1.35;
  min-height: 38px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-card__name:hover { color: var(--m-orange); }
.m-card__meta { font-size: 11px; color: var(--m-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.m-card__meta span { background: #F1F3F5; padding: 2px 6px; border-radius: 3px; }

.m-card__prices { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.m-card__price-old { font-size: 13px; color: var(--m-muted); text-decoration: line-through; }
.m-card__price-now { font-size: 18px; font-weight: 800; color: var(--m-navy); letter-spacing: -0.3px; }
.m-card__price-now--sale { color: var(--m-red); }
.m-card__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--m-green); color: #fff;
  border: none; border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.m-card__btn:hover { background: var(--m-green-dark); }
.m-card__btn:active { transform: scale(0.97); }

/* No-image placeholder (matras SVG via background) */
.m-card__img.m-card__img--noimg {
  background: linear-gradient(135deg, #F7F8FA 0%, #E5E7EB 100%) !important;
}
.m-card__img.m-card__img--noimg::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 228 228'><defs><pattern id='q' width='14' height='14' patternUnits='userSpaceOnUse' patternTransform='rotate(35)'><path d='M0 7h14M7 0v14' stroke='%231E3A5F22' stroke-width='0.7'/></pattern></defs><g transform='translate(20,90)'><polygon points='0,100 188,100 168,70 20,70' fill='%23F0F2F5' stroke='%23D1D5DB' stroke-width='1'/><rect x='0' y='100' width='188' height='32' fill='%23B5BCC8'/><polygon points='0,100 188,100 168,70 20,70' fill='url(%23q)'/></g><text x='114' y='60' text-anchor='middle' font-family='sans-serif' font-size='13' fill='%239CA3AF' font-weight='600'>Фото скоро</text></svg>") center/75% no-repeat;
  pointer-events: none;
}

/* Old default C-shape image — hide it when src is missing/placeholder */
.m-card__img img[src*="placeholder"],
.m-card__img img[src*="no_image"] { display: none; }

/* ========== v14: hard sidebar width fix ========== */
.m-sidebar, .m-sidebar > * { box-sizing: border-box; }
.m-sidebar .m-cat-panel,
.m-sidebar .m-filter-panel {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
.m-sidebar .m-cat-panel > .panel-heading,
.m-sidebar .m-cat-panel > .panel-body,
.m-sidebar .m-filter-panel__head,
.m-sidebar .m-filter-panel__body,
.m-sidebar .m-filter-panel__foot {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box;
}

/* Kill the legacy .panel-heading width restrictions */
.m-cat-panel > .panel-heading {
  background: var(--m-navy) !important;
  color: #fff !important;
  padding: 11px 14px !important;
  border-bottom: 0 !important;
  border-radius: var(--m-radius-sm) var(--m-radius-sm) 0 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  width: 100% !important;
}

/* Ensure cat-list items wrap properly */
.m-cat-link, .m-cat-sub a {
  white-space: normal !important;
  word-wrap: break-word;
}

/* Old "(NNN)" count text — Topers (82), Pillows (50), etc — kept readable */
.m-cat-link span, .m-cat-sub a span { display: inline; color: var(--m-muted); font-weight: 500; margin-left: 4px; }

/* No useless empty li from PHP module rendering (the bare "-" dashes that we still see floating in HTML between groups) */
.m-cat-list li:empty { display: none; }

/* ========== v15: product detail page polish ========== */

/* badges row under gallery */
.m-product__badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.m-product__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; border-radius: 4px; }
.m-badge--delivery { background: #DBEAFE; color: #1E40AF; }
.m-badge--sale { background: var(--m-red); color: #fff; }

/* meta row (code / manufacturer / stock) */
.m-product__meta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 18px; font-size: 13px; color: var(--m-muted); }
.m-product__meta-item strong { color: var(--m-text); font-weight: 600; margin-right: 4px; }
.m-stock--in { color: var(--m-green); font-weight: 600; }
.m-stock--in .fa-circle { color: var(--m-green); font-size: 8px; vertical-align: middle; }
.m-stock--out { color: var(--m-red); font-weight: 600; }
.m-stock--out .fa-circle { color: var(--m-red); font-size: 8px; }

/* pricing */
.m-product__pricing {
  background: linear-gradient(135deg, #FFF6EB 0%, #FFEDD5 100%);
  border: 1px solid #FFD8A8;
  border-radius: var(--m-radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.m-product__price-now { font-size: 32px; font-weight: 800; color: var(--m-navy); letter-spacing: -0.5px; }
.m-product__price-now--sale { color: var(--m-red); }
.m-product__price-old { display: inline-block; margin-right: 10px; font-size: 18px; color: var(--m-muted); text-decoration: line-through; }
.m-product__pay-instalments { margin-top: 8px; font-size: 12px; color: var(--m-muted); }
.m-product__pay-instalments strong { color: var(--m-navy); }

/* option pills (radio) */
.m-option-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.m-option-pill { position: relative; cursor: pointer; }
.m-option-pill input { position: absolute; opacity: 0; pointer-events: none; }
.m-option-pill span { display: inline-block; padding: 8px 14px; border: 1px solid var(--m-border); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--m-text); transition: all .15s; }
.m-option-pill input:checked + span { background: var(--m-navy); color: #fff; border-color: var(--m-navy); }
.m-option-pill:hover span { border-color: var(--m-orange); }

/* buy row */
.m-product__buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.m-product__cta { flex: 1; min-width: 180px; }
.m-product__cta-buy1click { background: #fff; color: var(--m-orange); border: 2px solid var(--m-orange); }
.m-product__cta-buy1click:hover { background: var(--m-orange); color: #fff; }

/* qty */
.m-qty { display: inline-flex; border: 1px solid var(--m-border-dark); border-radius: 6px; overflow: hidden; }
.m-qty__btn { width: 38px; height: 44px; border: 0; background: #FAFBFC; font-size: 20px; font-weight: 700; color: var(--m-navy); cursor: pointer; }
.m-qty__btn:hover { background: #FFF6EB; color: var(--m-orange); }
.m-qty__input { width: 50px; height: 44px; text-align: center; border: 0; border-left: 1px solid var(--m-border); border-right: 1px solid var(--m-border); font-weight: 700; font-size: 15px; }

/* USP list */
.m-product__usp { list-style: none; padding: 14px 18px; margin: 18px 0 0; background: #FAFBFC; border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.m-product__usp li { padding: 6px 0; font-size: 13px; color: var(--m-text); display: flex; align-items: center; gap: 10px; }
.m-product__usp i { color: var(--m-orange); width: 16px; text-align: center; }

/* Features strip — 4 columns under main */
.m-product__features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 32px 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
}
@media (max-width: 767px) { .m-product__features { grid-template-columns: repeat(2, 1fr); } }
.m-feat { text-align: center; padding: 10px; }
.m-feat__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: #FFF6EB;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  font-size: 22px; color: var(--m-orange);
}
.m-feat__title { font-weight: 700; color: var(--m-navy); font-size: 14px; margin-bottom: 4px; }
.m-feat__sub { font-size: 12px; color: var(--m-muted); line-height: 1.4; }

/* Tabs */
.m-tabs { background: #fff; border: 1px solid var(--m-border); border-radius: var(--m-radius); margin: 24px 0; overflow: hidden; }
.m-tabs__nav { display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--m-border); overflow-x: auto; }
.m-tabs__nav li { flex-shrink: 0; }
.m-tabs__nav a { display: block; padding: 14px 22px; font-size: 14px; font-weight: 700; color: var(--m-muted); text-decoration: none; border-bottom: 3px solid transparent; transition: all .15s; white-space: nowrap; }
.m-tabs__nav a:hover { color: var(--m-orange); }
.m-tabs__nav li.active a { color: var(--m-navy); border-bottom-color: var(--m-orange); background: #FFF6EB; }
.m-tabs__panes { padding: 24px; }
.m-tabs__panes .tab-pane { display: none; }
.m-tabs__panes .tab-pane.active { display: block; }

/* Specification table */
.m-attr-group-title { font-size: 16px; font-weight: 700; color: var(--m-navy); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--m-border); }
.m-attr-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.m-attr-table tr { border-bottom: 1px solid #F1F3F5; }
.m-attr-table tr:nth-child(odd) { background: #FAFBFC; }
.m-attr-name { padding: 10px 14px; font-weight: 600; color: var(--m-text); width: 40%; }
.m-attr-val { padding: 10px 14px; color: var(--m-muted); }

/* Delivery info grid */
.m-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) { .m-info-grid { grid-template-columns: 1fr; } }
.m-info-box { background: #FAFBFC; border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); padding: 16px; }
.m-info-box h4 { font-size: 14px; font-weight: 700; color: var(--m-navy); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--m-border); }
.m-info-box h4 i { color: var(--m-orange); margin-right: 6px; }
.m-info-box ul { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--m-text); line-height: 1.6; }
.m-info-box li { padding: 3px 0; }
.m-info-box li::before { content: '— '; color: var(--m-orange); }

/* FAQ */
.m-faq { background: #fff; border: 1px solid var(--m-border); border-radius: 6px; margin: 8px 0; }
.m-faq summary {
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 700; font-size: 14px; color: var(--m-navy);
  display: flex; align-items: center;
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--m-orange); font-weight: 700; }
.m-faq[open] summary::after { content: '−'; }
.m-faq p { padding: 0 18px 16px; margin: 0; font-size: 14px; color: var(--m-text); line-height: 1.6; }

/* 1-click modal */
.m-modal { border: 0; border-radius: var(--m-radius); padding: 0; max-width: 420px; width: 92%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.m-modal::backdrop { background: rgba(15, 23, 42, 0.7); }
.m-modal form { padding: 28px; position: relative; }
.m-modal__close { position: absolute; top: 10px; right: 14px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 24px; color: var(--m-muted); cursor: pointer; }
.m-modal__close:hover { color: var(--m-red); }
.m-modal h3 { margin: 0 0 6px; color: var(--m-navy); font-size: 20px; font-weight: 800; }
.m-modal p { margin: 0 0 18px; color: var(--m-muted); font-size: 13px; }
.m-modal input { width: 100%; padding: 12px 14px; border: 1px solid var(--m-border-dark); border-radius: 6px; font-size: 14px; margin-bottom: 10px; }
.m-modal input:focus { outline: 0; border-color: var(--m-orange); }
.m-modal small { display: block; margin-top: 10px; font-size: 11px; color: var(--m-muted); text-align: center; }

/* Outline button variant */
.m-btn--outline { background: transparent; color: var(--m-navy); border: 2px solid var(--m-navy); }
.m-btn--outline:hover { background: var(--m-navy); color: #fff; }

/* Related grid bottom of product page */
.m-section-title { font-size: 22px; font-weight: 800; color: var(--m-navy); margin: 32px 0 18px; }

/* ========== v16: re-anchor category icons (kill stray gradients) ========== */
.m-cat-tile__icon {
  background: transparent !important;
  background-image: var(--m-cat-icon-bg) !important;
  background-size: 75% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.m-cat-tile__icon--mattress  { --m-cat-icon-bg: url('/image/catalog/banners/cat-mattress.png?v=2'); }
.m-cat-tile__icon--topper    { --m-cat-icon-bg: url('/image/catalog/banners/cat-topper.png?v=2'); }
.m-cat-tile__icon--pillow    { --m-cat-icon-bg: url('/image/catalog/banners/cat-pillow.png?v=2'); }
.m-cat-tile__icon--blanket   { --m-cat-icon-bg: url('/image/catalog/banners/cat-blanket.png?v=2'); }
.m-cat-tile__icon--protector { --m-cat-icon-bg: url('/image/catalog/banners/cat-protector.png?v=2'); }
.m-cat-tile__icon--access    { --m-cat-icon-bg: url('/image/catalog/banners/cat-accessory.png?v=2'); }
.m-cat-tile__icon--kids      { --m-cat-icon-bg: url('/image/catalog/banners/cat-kids.png?v=2'); }
.m-cat-tile__icon--sale      { --m-cat-icon-bg: url('/image/catalog/banners/cat-sale.png?v=2'); }

/* ========== v17: mid-banner illustrations + mini-cart restyle + own-prod badge ========== */
.m-midbanner { position: relative; overflow: hidden; }
.m-midbanner--blue {
  background-image: url('/image/catalog/banners/mid-banner-orto.png') !important;
  background-size: cover !important; background-position: center right !important;
}
.m-midbanner--orange {
  background-image: url('/image/catalog/banners/mid-banner-memory.png') !important;
  background-size: cover !important; background-position: center right !important;
}
.m-midbanner__inner { position: relative; z-index: 2; }
.m-midbanner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 85%);
  z-index: 1;
}
.m-meta-own { background: #FFF6EB; color: var(--m-orange); border: 1px solid #FFD8A8; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.m-meta-own .fa-star { font-size: 10px; }

/* MINI-CART dropdown restyle */
#cart .dropdown-menu { min-width: 380px !important; background: #fff !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius) !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important; padding: 12px !important; }
#cart .dropdown-menu .table { margin-bottom: 12px !important; border: 0 !important; }
#cart .dropdown-menu .table > tbody > tr > td { padding: 10px 6px !important; vertical-align: middle !important; border-top: 1px solid #F1F3F5 !important; border-bottom: 0 !important; font-size: 13px; }
#cart .dropdown-menu .table > tbody > tr:first-child > td { border-top: 0 !important; }
#cart .dropdown-menu .table td:nth-child(3) { font-weight: 700; color: var(--m-navy); text-align: center; }
#cart .dropdown-menu .table td:nth-child(4) { font-weight: 700; color: var(--m-navy); text-align: right; white-space: nowrap; }
#cart .dropdown-menu .table td:first-child img { border-radius: 6px; border: 1px solid var(--m-border); width: 48px; height: 48px; object-fit: cover; }
#cart .dropdown-menu .table td:nth-child(2) a { color: var(--m-navy) !important; font-weight: 600; text-decoration: none; font-size: 13px; }
#cart .dropdown-menu .table td:nth-child(2) a:hover { color: var(--m-orange) !important; }
#cart .dropdown-menu .table .btn-danger { background: transparent !important; border: 0 !important; color: var(--m-muted) !important; padding: 4px 8px !important; width: 28px; height: 28px; border-radius: 4px; }
#cart .dropdown-menu .table .btn-danger:hover { background: #FEE2E2 !important; color: var(--m-red) !important; }
#cart .dropdown-menu .table:last-of-type tr td { font-size: 12px !important; color: var(--m-muted) !important; padding: 4px 6px !important; }
#cart .dropdown-menu .table:last-of-type tr:last-child td { border-top: 1px solid var(--m-border) !important; padding-top: 10px !important; font-size: 15px !important; font-weight: 800 !important; color: var(--m-navy) !important; }
#cart .dropdown-menu .table:last-of-type tr:last-child td:last-child { color: var(--m-orange) !important; }
#cart .dropdown-menu p.text-right { display: flex !important; gap: 10px !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--m-border) !important; }
#cart .dropdown-menu p.text-right a { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.3px; border-radius: 6px !important; text-decoration: none !important; white-space: normal !important; text-align: center !important; line-height: 1.2; }
#cart .dropdown-menu p.text-right a:first-child { background: #fff !important; color: var(--m-navy) !important; border: 1.5px solid var(--m-navy) !important; }
#cart .dropdown-menu p.text-right a:first-child:hover { background: var(--m-navy) !important; color: #fff !important; }
#cart .dropdown-menu p.text-right a:last-child { background: var(--m-green) !important; color: #fff !important; border: 0 !important; }
#cart .dropdown-menu p.text-right a:last-child:hover { background: var(--m-green-dark) !important; }

/* ========== v18: language toggle (no flags) ========== */
.m-lang-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.2);
}
.m-lang-btn {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  border-radius: 4px;
  transition: all .15s;
  letter-spacing: 0.3px;
}
.m-lang-btn:hover { color: #fff; }
.m-lang-btn--active { background: var(--m-orange); color: #fff; }

/* Remove all standard language dropdown leftovers */
#form-language .dropdown-menu { display: none !important; }
#form-language .btn-link { display: none !important; }

/* ========== v18: language toggle (no flags) ========== */
.m-lang-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.2);
}
.m-lang-btn {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  border-radius: 4px;
  transition: all .15s;
  letter-spacing: 0.3px;
}
.m-lang-btn:hover { color: #fff; }
.m-lang-btn--active { background: var(--m-orange); color: #fff; }

/* Remove all standard language dropdown leftovers */
#form-language .dropdown-menu { display: none !important; }
#form-language .btn-link { display: none !important; }

/* ========== v19: cookie consent banner ========== */
.m-cookie-consent {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--m-navy);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
  font-size: 13px;
}
.m-cookie-consent__text { flex: 1; line-height: 1.5; }
.m-cookie-consent__text a { color: var(--m-orange); text-decoration: underline; }
.m-cookie-consent .m-btn { white-space: nowrap; }
@media (max-width: 600px) {
  .m-cookie-consent { flex-direction: column; gap: 10px; padding: 12px; text-align: center; }
}

/* ========== v20: custom one-page simple checkout ========== */

.m-simple-checkout { padding: 0 16px 60px; max-width: 1280px; margin: 0 auto; }
.m-simple-checkout__title {
  font-size: 28px; color: var(--m-navy); font-weight: 800;
  margin: 18px 0 22px;
}
.m-simple-checkout__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: flex-start;
}
@media (max-width: 991px) { .m-simple-checkout__layout { grid-template-columns: 1fr; } }

.m-simple-checkout__main { background: transparent; }

/* Form sections */
.m-form-section {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 20px 24px;
  margin-bottom: 14px;
}
.m-form-section__title {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 800; color: var(--m-navy);
  margin: 0 0 16px;
}
.m-form-section__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--m-orange); color: #fff;
  font-size: 13px; font-weight: 800;
}
.m-form-grid { display: grid; gap: 12px; }
.m-form-grid--2col { grid-template-columns: 1fr 1fr; }
.m-form-grid--np { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .m-form-grid--2col, .m-form-grid--np { grid-template-columns: 1fr; } }

.m-field { position: relative; }
.m-field label {
  display: block;
  font-size: 12px; font-weight: 700; color: var(--m-text);
  margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.m-field__optional { color: var(--m-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.m-field input, .m-field select, .m-form-section textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--m-border-dark);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.m-field input:focus, .m-field select:focus, .m-form-section textarea:focus {
  outline: 0;
  border-color: var(--m-orange);
  box-shadow: 0 0 0 3px rgba(231,111,30,0.1);
}
.m-form-section textarea { resize: vertical; min-height: 60px; }

/* Form note */
.m-form-note { margin-top: 10px; font-size: 12px; color: var(--m-muted); display: flex; align-items: center; gap: 6px; }
.m-form-note i { color: var(--m-orange); }

/* NP autocomplete dropdown */
.m-np-suggestions {
  position: absolute; z-index: 100;
  top: calc(100% + 2px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
  max-height: 220px;
  overflow-y: auto;
}
.m-np-suggestion {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #F1F3F5;
}
.m-np-suggestion:last-child { border-bottom: 0; }
.m-np-suggestion:hover { background: #FFF6EB; color: var(--m-orange); }

/* Payment options */
.m-payment-options { display: flex; flex-direction: column; gap: 8px; }
.m-pay-opt { position: relative; cursor: pointer; }
.m-pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.m-pay-opt__box {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 2px solid var(--m-border);
  border-radius: 8px;
  background: #fff;
  transition: all .15s;
}
.m-pay-opt__box i { font-size: 22px; color: var(--m-navy); width: 28px; text-align: center; }
.m-pay-opt__box strong { display: block; font-size: 14px; color: var(--m-navy); font-weight: 700; }
.m-pay-opt__box span { display: block; font-size: 12px; color: var(--m-muted); margin-top: 2px; }
.m-pay-opt:hover .m-pay-opt__box { border-color: var(--m-orange); }
.m-pay-opt input:checked + .m-pay-opt__box {
  border-color: var(--m-orange);
  background: #FFF6EB;
}
.m-pay-opt input:checked + .m-pay-opt__box i { color: var(--m-orange); }

/* Submit */
.m-simple-checkout__submit { margin-top: 20px; }
.m-simple-checkout__submit small { display: block; text-align: center; margin-top: 12px; font-size: 12px; color: var(--m-muted); }
.m-simple-checkout__submit small a { color: var(--m-orange); }
.m-btn--xl { padding: 16px 28px !important; font-size: 16px !important; font-weight: 800 !important; }

/* Summary aside */
.m-simple-summary {
  position: sticky; top: 16px;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 22px;
}
.m-simple-summary__title {
  font-size: 16px; font-weight: 800; color: var(--m-navy);
  text-transform: uppercase; letter-spacing: 0.3px;
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--m-border);
}
.m-simple-summary__items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.m-simple-summary__item { display: flex; gap: 10px; align-items: center; }
.m-simple-summary__item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--m-border); }
.m-simple-summary__name { flex: 1; font-size: 12px; color: var(--m-text); line-height: 1.3; }
.m-simple-summary__name small { color: var(--m-muted); }
.m-simple-summary__price { font-size: 13px; font-weight: 700; color: var(--m-navy); white-space: nowrap; }

.m-simple-summary__totals { list-style: none; padding: 0; margin: 14px 0 18px; border-top: 1px solid var(--m-border); padding-top: 12px; }
.m-simple-summary__totals li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.m-simple-summary__totals li.m-simple-summary__grand {
  border-top: 1px solid var(--m-border);
  margin-top: 6px; padding-top: 10px;
  font-size: 17px; font-weight: 800; color: var(--m-navy);
}
.m-simple-summary__grand strong { color: var(--m-orange); }
.m-simple-summary__trust {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--m-border);
  font-size: 12px; color: var(--m-muted); line-height: 1.7;
}
.m-simple-summary__trust div { display: flex; align-items: center; gap: 6px; }
.m-simple-summary__trust i { color: var(--m-orange); width: 12px; }

/* Error block */
.m-simple-checkout #m-simple-errors {
  margin-top: 14px;
}

/* ========== v21: floating call FAB (left bottom) ========== */
.m-call-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 9998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--m-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(231, 111, 30, 0.4);
  transition: transform .15s, box-shadow .15s;
  animation: m-call-pulse 2s infinite;
}
.m-call-fab:hover {
  transform: scale(1.08);
  color: #fff;
  box-shadow: 0 12px 32px rgba(231, 111, 30, 0.55);
}
.m-call-fab i { animation: m-call-shake 4s infinite; }

@keyframes m-call-pulse {
  0% { box-shadow: 0 0 0 0 rgba(231, 111, 30, 0.4), 0 8px 24px rgba(231, 111, 30, 0.4); }
  70% { box-shadow: 0 0 0 18px rgba(231, 111, 30, 0), 0 8px 24px rgba(231, 111, 30, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(231, 111, 30, 0), 0 8px 24px rgba(231, 111, 30, 0.4); }
}
@keyframes m-call-shake {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(-15deg); }
  94% { transform: rotate(15deg); }
  96% { transform: rotate(-10deg); }
  98% { transform: rotate(10deg); }
}

@media (max-width: 600px) {
  .m-call-fab { left: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 20px; }
}

/* ========== v22: polish call FAB + KeyCRM chat position ========== */

/* ---- CALL FAB — bigger, with label, brand-aligned ---- */
.m-call-fab {
  position: fixed;
  left: 22px;
  bottom: 90px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 22px 0 16px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--m-orange) 0%, #E76F1E 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 30px rgba(231,111,30,0.45);
  transition: transform .18s, box-shadow .18s;
  animation: m-call-pulse 2.5s infinite;
  cursor: pointer;
}
.m-call-fab::before {
  content: '';
  display: inline-flex;
  width: 36px; height: 36px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  align-items: center; justify-content: center;
  position: relative;
}
.m-call-fab i.fa-phone {
  position: absolute;
  width: 36px; height: 36px;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  pointer-events: none;
  animation: m-call-ring 3s infinite;
}
.m-call-fab__text {
  display: inline-block;
  line-height: 1.1;
  padding-left: 28px;
}
.m-call-fab__text small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.m-call-fab:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(231,111,30,0.6);
}
.m-call-fab:active { transform: translateY(0); }

@keyframes m-call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,111,30,0.55), 0 10px 30px rgba(231,111,30,0.45); }
  70%  { box-shadow: 0 0 0 22px rgba(231,111,30,0),  0 10px 30px rgba(231,111,30,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(231,111,30,0),     0 10px 30px rgba(231,111,30,0.45); }
}
@keyframes m-call-ring {
  0%, 88%, 100% { transform: translateY(-50%) rotate(0); }
  90% { transform: translateY(-50%) rotate(-22deg); }
  92% { transform: translateY(-50%) rotate(22deg); }
  94% { transform: translateY(-50%) rotate(-15deg); }
  96% { transform: translateY(-50%) rotate(12deg); }
}

@media (max-width: 600px) {
  .m-call-fab {
    bottom: 78px; left: 12px;
    padding: 0 16px 0 12px;
    height: 50px;
  }
  .m-call-fab__text {
    display: none;
    padding-left: 16px;
  }
  .m-call-fab::before { margin-right: 0; width: 30px; height: 30px; }
  .m-call-fab i.fa-phone { width: 30px; height: 30px; left: 10px; font-size: 14px; }
}

/* ---- KeyCRM CHAT — reposition (bottom-right, slightly higher; respect cookie banner) ---- */
iframe[src*="chat.key.live"],
iframe[src*="key.live"] {
  bottom: 80px !important;
  right: 18px !important;
  z-index: 9998 !important;
}

/* When cookie banner visible — push both widgets up */
body:has(.m-cookie-consent:not([style*="display:none"]):not([style*="display: none"])) .m-call-fab { bottom: 150px; }
body:has(.m-cookie-consent:not([style*="display:none"]):not([style*="display: none"])) iframe[src*="key.live"] { bottom: 140px !important; }

/* Callback modal trigger styling — same as buy-1-click */
.m-callback-modal h3 { color: var(--m-navy); }

/* ========== v23: stack widgets bottom-right — Binotel above KeyCRM chat ========== */

/* Kill our custom call-fab — Binotel covers calls */
.m-call-fab { display: none !important; }

/* KeyCRM chat — bottom right, lowest */
iframe[src*="chat.key.live"],
iframe[src*="key.live"],
div[id^="keycrm-chat"],
#keycrm-chat-widget {
  bottom: 18px !important;
  right: 18px !important;
  z-index: 9998 !important;
}

/* Binotel widget — stacked ABOVE KeyCRM chat */
iframe[src*="binotel.com"],
iframe[src*="widgets.binotel"],
div[id^="bn-"],
div[class*="binotel"],
.bn-widget {
  bottom: 110px !important;
  right: 18px !important;
  z-index: 9998 !important;
}

/* When cookie banner visible — push both up extra */
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) iframe[src*="key.live"] {
  bottom: 88px !important;
}
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) iframe[src*="binotel"] {
  bottom: 180px !important;
}

/* ========== v24: custom call FAB — visible, left-bottom ========== */
.m-call-fab {
  display: inline-flex !important;  /* unhide from v23 */
  position: fixed !important;
  left: 22px !important;
  bottom: 22px !important;
  z-index: 9999 !important;          /* above chat widgets */
  align-items: center;
  height: 56px;
  padding: 0 22px 0 8px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--m-orange) 0%, #E76F1E 100%) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 30px rgba(231,111,30,0.45);
  transition: transform .18s, box-shadow .18s;
  animation: m-call-pulse 2.5s infinite;
  cursor: pointer;
}
.m-call-fab i.fa-phone {
  display: inline-flex;
  width: 40px; height: 40px;
  margin-right: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  align-items: center; justify-content: center;
  font-size: 17px;
  animation: m-call-ring 3s infinite;
}
.m-call-fab__text { display: inline-block; line-height: 1.1; padding-right: 8px; }
.m-call-fab__text small { display: block; font-size: 10px; font-weight: 500; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.m-call-fab:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(231,111,30,0.6); }

@keyframes m-call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,111,30,0.55), 0 10px 30px rgba(231,111,30,0.45); }
  70%  { box-shadow: 0 0 0 22px rgba(231,111,30,0),  0 10px 30px rgba(231,111,30,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(231,111,30,0),     0 10px 30px rgba(231,111,30,0.45); }
}
@keyframes m-call-ring {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-22deg); }
  92% { transform: rotate(22deg); }
  94% { transform: rotate(-15deg); }
  96% { transform: rotate(12deg); }
}

@media (max-width: 600px) {
  .m-call-fab { left: 12px !important; bottom: 12px !important; padding: 0 14px 0 6px; }
  .m-call-fab__text { display: none; }
  .m-call-fab i.fa-phone { margin-right: 0; width: 36px; height: 36px; }
}

/* ========== v25: clean call FAB (bulletproof) ========== */
a.m-call-fab {
  position: fixed !important;
  left: 22px !important;
  bottom: 22px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  height: 60px !important;
  padding: 0 22px 0 8px !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, #E76F1E 0%, #F08C2E 100%) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(231,111,30,0.45);
  white-space: nowrap;
  cursor: pointer;
  animation: m-call-pulse 2.5s infinite;
  overflow: visible !important;
}
a.m-call-fab:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(231,111,30,0.6); }
.m-call-fab__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: #fff;
}
.m-call-fab__icon i { animation: m-call-ring 3s infinite; }
.m-call-fab__label {
  flex: 1 1 auto;
  display: inline-flex; flex-direction: column;
  line-height: 1.1;
  font-size: 14px; color: #fff;
}
.m-call-fab__label strong { font-weight: 700; }
.m-call-fab__num { font-size: 11px; opacity: 0.9; font-weight: 500; margin-top: 2px; letter-spacing: 0.3px; }

@keyframes m-call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,111,30,0.55), 0 10px 30px rgba(231,111,30,0.45); }
  70%  { box-shadow: 0 0 0 22px rgba(231,111,30,0),  0 10px 30px rgba(231,111,30,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(231,111,30,0),     0 10px 30px rgba(231,111,30,0.45); }
}
@keyframes m-call-ring {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-22deg); }
  92% { transform: rotate(22deg); }
  94% { transform: rotate(-15deg); }
  96% { transform: rotate(12deg); }
}

@media (max-width: 600px) {
  a.m-call-fab { left: 12px !important; bottom: 12px !important; padding: 0 14px 0 6px !important; height: 52px !important; }
  .m-call-fab__icon { width: 38px; height: 38px; font-size: 16px; }
  .m-call-fab__label strong { font-size: 13px; }
  .m-call-fab__num { display: none; }
}

/* ========== v26: kill old width 56px on m-call-fab ========== */
a.m-call-fab,
.m-call-fab {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 60px !important;
}

/* ========== v27: FAB → right-bottom above KeyCRM chat ========== */
a.m-call-fab, .m-call-fab {
  left: auto !important;
  right: 22px !important;
  bottom: 90px !important;       /* above KeyCRM chat (which is at 18px) */
}

/* KeyCRM chat stays bottom-right base */
iframe[src*="chat.key.live"],
iframe[src*="key.live"] {
  bottom: 18px !important;
  right: 18px !important;
  z-index: 9998 !important;
}

/* Cookie banner adjustments */
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) a.m-call-fab {
  bottom: 160px !important;
}
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) iframe[src*="key.live"] {
  bottom: 88px !important;
}

@media (max-width: 600px) {
  a.m-call-fab { right: 12px !important; bottom: 78px !important; }
}

/* ========== v28: lift FAB above KeyCRM auto-greeting popup ========== */
a.m-call-fab, .m-call-fab {
  bottom: 220px !important;   /* KeyCRM popup is ~180px tall */
}
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) a.m-call-fab {
  bottom: 290px !important;
}
@media (max-width: 600px) {
  a.m-call-fab { bottom: 200px !important; }
}

/* ========== v29: round FAB + flipper-style callback modal ========== */

/* FAB — round 56px phone-only, bottom-right */
button.m-call-fab, .m-call-fab {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  left: auto !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  max-width: 56px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: linear-gradient(135deg, #E76F1E 0%, #F08C2E 100%) !important;
  color: #fff !important;
  font-size: 22px !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(231,111,30,0.45);
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: m-call-pulse 2.5s infinite;
  transition: transform .15s, box-shadow .15s;
}
button.m-call-fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(231,111,30,0.6); }
button.m-call-fab:active { transform: scale(0.95); }
button.m-call-fab i { animation: m-call-ring 3s infinite; }

/* KeyCRM chat → ABOVE the FAB */
iframe[src*="chat.key.live"],
iframe[src*="key.live"] {
  bottom: 90px !important;
  right: 22px !important;
  z-index: 9998 !important;
}
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) button.m-call-fab { bottom: 92px !important; }
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) iframe[src*="key.live"] { bottom: 160px !important; }

/* ---- CALLBACK MODAL (flipper-style) ---- */
.m-callback-modal {
  border: 0;
  border-radius: 14px;
  padding: 0;
  max-width: 580px;
  width: 92%;
  box-shadow: 0 24px 60px rgba(15,23,42,0.35);
  background: #fff;
}
.m-callback-modal::backdrop { background: rgba(15,23,42,0.75); }
.m-callback-form { padding: 0; position: relative; }
.m-callback-modal__close {
  position: absolute; top: 14px; right: 18px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  font-size: 28px; line-height: 1; color: #94a3b8;
  cursor: pointer;
}
.m-callback-modal__close:hover { color: var(--m-red); }

.m-callback-modal__head { padding: 36px 36px 18px; text-align: center; }
.m-callback-modal__head h3 {
  font-size: 22px; font-weight: 500;
  color: var(--m-navy);
  margin: 0;
  line-height: 1.4;
}
.m-callback-modal__hl {
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(231,111,30,0.25) 60%);
}

.m-callback-modal__body { padding: 0 36px 28px; }
.m-callback-modal__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0;
  border: 1px solid var(--m-border-dark);
  border-radius: 8px;
  overflow: hidden;
}
.m-callback-modal__row input[name="phone"] {
  padding: 14px 18px;
  border: 0;
  font-size: 15px;
  outline: none;
  background: #fff;
}
.m-callback-modal__row input[name="phone"]::placeholder { color: #94a3b8; }

#m-callback-submit {
  border: 0;
  background: var(--m-navy);
  color: #fff;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
#m-callback-submit:hover { background: #1a2c4a; }
#m-callback-submit:disabled { background: #94a3b8; cursor: not-allowed; }

.m-callback-modal__timer {
  padding: 14px 20px;
  background: #fff;
  border-left: 1px solid var(--m-border);
  font-size: 18px; font-weight: 600;
  color: var(--m-navy);
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: center;
}

.m-callback-modal__hint {
  display: block;
  margin-top: 8px;
  font-size: 12px; color: #94a3b8;
}
.m-callback-modal__stats {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #F1F3F5;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 12px; color: var(--m-muted);
}
.m-callback-modal__stats strong { color: var(--m-navy); font-weight: 600; }

.m-callback-modal__footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #F1F3F5;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #94a3b8;
}
.m-callback-modal__footer a { color: var(--m-orange); }
.m-callback-modal__powered { font-weight: 700; letter-spacing: 0.3px; }

.m-callback-modal__success {
  padding: 50px 36px;
  text-align: center;
}
.m-callback-modal__success i {
  font-size: 56px; color: var(--m-green);
  margin-bottom: 14px;
}
.m-callback-modal__success h3 { color: var(--m-navy); margin: 0 0 6px; }
.m-callback-modal__success p { color: var(--m-muted); margin: 0; }

@keyframes m-call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,111,30,0.55), 0 8px 24px rgba(231,111,30,0.45); }
  70%  { box-shadow: 0 0 0 18px rgba(231,111,30,0),   0 8px 24px rgba(231,111,30,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(231,111,30,0),      0 8px 24px rgba(231,111,30,0.45); }
}
@keyframes m-call-ring {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-22deg); }
  92% { transform: rotate(22deg); }
  94% { transform: rotate(-15deg); }
  96% { transform: rotate(12deg); }
}

@media (max-width: 600px) {
  button.m-call-fab { right: 14px !important; bottom: 14px !important; width: 52px !important; height: 52px !important; }
  iframe[src*="key.live"] { bottom: 78px !important; right: 14px !important; }
  .m-callback-modal__head { padding: 28px 20px 14px; }
  .m-callback-modal__head h3 { font-size: 18px; }
  .m-callback-modal__body { padding: 0 20px 22px; }
  .m-callback-modal__row { grid-template-columns: 1fr; }
  #m-callback-submit { padding: 14px; }
  .m-callback-modal__timer { display: none; }
}

/* ========== v30: FAB sits ABOVE KeyCRM popup (220px) ========== */
button.m-call-fab, .m-call-fab {
  bottom: 220px !important;   /* clears KeyCRM auto-greeting bubble (~180px tall) */
  right: 22px !important;
  z-index: 99999 !important;  /* above KeyCRM */
}

/* KeyCRM stays at its own default position (bottom-right), undo my prior override */
iframe[src*="chat.key.live"],
iframe[src*="key.live"] {
  bottom: 0 !important;
  right: 0 !important;
}

body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) button.m-call-fab {
  bottom: 290px !important;
}

@media (max-width: 600px) {
  button.m-call-fab { bottom: 200px !important; right: 14px !important; }
}

/* ========== v31: sticky header + scroll-to-top + FAB centering ========== */

/* Sticky top utility bar + header */
nav#top {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--m-navy);
}
header#header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 1px 0 var(--m-border);
  transition: box-shadow .2s;
}
body.m-scrolled header#header { box-shadow: 0 4px 16px rgba(15,23,42,0.08); }

/* Fix FAB phone icon centering (kill any inherited line-height issues) */
button.m-call-fab { line-height: 1 !important; }
button.m-call-fab i.fa-phone {
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform-origin: 50% 50% !important;
}

/* Drop FAB closer to KeyCRM (KeyCRM popup is ~180px tall, leave ~10px gap) */
button.m-call-fab, .m-call-fab {
  bottom: 200px !important;
}
body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) button.m-call-fab {
  bottom: 268px !important;
}

/* SCROLL-TO-TOP button — small round, left-bottom */
.m-scroll-top {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--m-navy);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15,23,42,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: opacity .25s, transform .25s, visibility .25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m-scroll-top:hover {
  background: var(--m-orange);
  transform: translateY(-2px) scale(1);
}
.m-scroll-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.m-scroll-top i { line-height: 1; }

body:has(.m-cookie-consent:not([style*="display: none"]):not([style*="display:none"])) .m-scroll-top {
  bottom: 90px;
}

@media (max-width: 600px) {
  .m-scroll-top { left: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 14px; }
  button.m-call-fab { bottom: 180px !important; }
}

/* ========== v32: bullet-proof FAB phone-icon centering ========== */
button.m-call-fab { position: fixed !important; overflow: visible !important; }
button.m-call-fab i.fa-phone {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 22px !important;
  animation: m-call-ring 3s infinite !important;
  transform-origin: 50% 50% !important;
}

/* Override the ring animation to preserve translate(-50%,-50%) base + add rotation on top */
@keyframes m-call-ring {
  0%, 88%, 100% { transform: translate(-50%, -50%) rotate(0); }
  90% { transform: translate(-50%, -50%) rotate(-22deg); }
  92% { transform: translate(-50%, -50%) rotate(22deg); }
  94% { transform: translate(-50%, -50%) rotate(-15deg); }
  96% { transform: translate(-50%, -50%) rotate(12deg); }
}