/* Mobile shell iter4 — header / drawer / gutters / tabbar */

body.xl-redesign,
html body.xl-redesign {
  background: #f6f2eb !important;
}

body.xl-redesign #container {
  background: #f6f2eb !important;
}

body.xl-redesign {
  --xl-tabbar-h: 0px;
  --xl-m-gutter: 10px;
  --xl-m-radius: 14px;
  --xl-m-gap: 24px;
  --xl-page: #f6f2eb;
}

body.xl-redesign .xl-tabbar { display: none; }
body.xl-redesign .xl-mtools { display: none; }
body.xl-redesign .xl-mphone { display: none !important; }

/* Keep the desktop catalog surface above its dimmed backdrop. */
@media (min-width: 901px) {
  body.xl-redesign .xlopni-nav__overlay {
    z-index: 900 !important;
  }
  body.xl-redesign .xl-nav__panel,
  body.xl-redesign .xlopni-nav__container.xl-nav__panel {
    z-index: 910 !important;
    isolation: isolate !important;
  }
  body.xl-redesign .xl-nav__panel-inner,
  body.xl-redesign .xl-nav__panel-inner.xl-mm {
    background: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
  body.xl-redesign .xl-mm__filter {
    cursor: pointer !important;
  }
  body.xl-redesign .xl-mm__filter.is-open > i {
    transform: rotate(90deg) !important;
  }
  body.xl-redesign .xl-mm__filter-drop {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 4px 0 10px !important;
    padding: 8px !important;
    border: 1px solid #efe6db !important;
    border-radius: 10px !important;
    background: #fffaf4 !important;
  }
  body.xl-redesign .xl-mm__filter-drop[hidden] {
    display: none !important;
  }
  body.xl-redesign .xl-mm__filter-drop a {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    color: #3b3530 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    background: #fff !important;
  }
  body.xl-redesign .xl-mm__cat > i {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body.xl-redesign {
    --xl-tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
    --xl-chat-lift: calc(var(--xl-tabbar-h) + 12px) !important;
    --xl-m-gutter: 10px;
    max-height: 99999px;
    padding-bottom: calc(var(--xl-tabbar-h) + 16px) !important;
    background: #f6f2eb !important;
  }

  body.xl-redesign .xl-utility,
  body.xl-redesign .xl-phone-block,
  body.xl-redesign .xl-perks,
  body.xl-redesign .xl-menu,
  body.xl-redesign a.xl-cta,
  body.xl-redesign .xl-cta,
  body.xl-redesign .xl-actions .xl-ib,
  body.xl-redesign .xl-search-toggle,
  body.xl-redesign .xl-cart-txt,
  body.xl-redesign .xl-logo-tag,
  body.xl-redesign .xl-age--header,
  body.xl-redesign .xl-mphone,
  body.xl-redesign .xl-cart-wrap,
  body.xl-redesign .xl-actions {
    display: none !important;
  }

  /* Header full-bleed white inside page gutters */
  body.xl-redesign .xl-header {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 1px 0 rgba(32, 29, 26, 0.08);
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
  body.xl-redesign .xl-brandrow {
    background: #fff !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body.xl-redesign .xl-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: var(--xl-m-gutter) !important;
    padding-right: var(--xl-m-gutter) !important;
    box-sizing: border-box !important;
  }
  body.xl-redesign .xl-brandrow .xl-wrap {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 56px !important;
    height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Catalog lives in brandrow (moved by JS) */
  body.xl-redesign .xl-brandrow .xl-catalog,
  body.xl-redesign .xl-brandrow button.xl-catalog,
  body.xl-redesign .xl-brandrow .xl-mmenu {
    position: static !important;
    grid-column: 1 !important;
    justify-self: start !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #ffd2ad !important;
    background: #fff7f0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    z-index: 2;
    display: inline-grid !important;
    place-items: center !important;
    box-shadow: none !important;
  }
  body.xl-redesign .xl-brandrow .xl-catalog img,
  body.xl-redesign .xl-brandrow .xl-mmenu img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    color: #fff;
  }

  body.xl-redesign .xl-brand {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body.xl-redesign .xl-logo-name {
    font-size: 17px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
  }
  body.xl-redesign .xl-sun {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  body.xl-redesign .xl-mtools {
    grid-column: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-self: end !important;
  }
  body.xl-redesign button.xl-msearch,
  body.xl-redesign a.xl-mcallback {
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #eadfd3 !important;
    background: #fff !important;
    color: #1f1c19 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  body.xl-redesign a.xl-mcallback {
    background: #fff7f0 !important;
    border-color: #ffd2ad !important;
    color: #ff6a00 !important;
  }
  body.xl-redesign button.xl-msearch.is-on {
    border-color: #ff6a00 !important;
    background: #fff7f0 !important;
    color: #ff6a00 !important;
  }
  body.xl-redesign button.xl-msearch img,
  body.xl-redesign a.xl-mcallback img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Search row: fully collapsed until toggled — no empty white bar */
  body.xl-redesign .xl-navrow {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #fff !important;
  }
  body.xl-redesign .xl-navrow > .xl-wrap > .xl-catalog,
  body.xl-redesign .xl-navrow > .xl-wrap > .xl-mmenu {
    display: none !important;
  }
  body.xl-redesign .xl-header.is-search-open .xl-navrow {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.xl-redesign .xl-header.is-search-open {
    height: auto !important;
    overflow: visible !important;
  }
  body.xl-redesign .xl-header.is-search-open .xl-navrow .xl-wrap {
    display: block !important;
    padding: 0 24px 10px !important;
    min-height: 0 !important;
  }
  body.xl-redesign .xl-search-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  body.xl-redesign .xl-search-row {
    height: 44px !important;
    min-height: 44px !important;
    background: #f3f1ee !important;
    border: 0 !important;
    border-radius: 12px !important;
  }
  body.xl-redesign .xl-search-row:focus-within {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #ff6a00, 0 0 0 3px rgba(255,106,0,.14) !important;
  }
  body.xl-redesign .xl-search-row input,
  body.xl-redesign .xl-search-row button {
    min-height: 44px !important;
    font-size: 15px !important;
  }
  body.xl-redesign #ajaxQuickFind:empty { display: none !important; }

  /* Page gutters: beige outside, white table ~10px inset */
  body.xl-redesign #container.xl-redesign,
  body.xl-redesign #container {
    background: #f6f2eb !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  body.xl-redesign table#middle {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 12px !important;
    background: #fff !important;
    border-radius: 0 0 14px 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.xl-redesign table#middle > tbody,
  body.xl-redesign table#middle > tbody > tr {
    display: block !important;
    width: 100% !important;
  }
  body.xl-redesign table#middle td.one,
  body.xl-redesign table#middle td.three { display: none !important; }
  body.xl-redesign table#middle td.two {
    display: block !important;
    width: 100% !important;
    float: none !important;
    background: #fff !important;
    padding: 0 !important;
  }
  body.xl-redesign #wrapper,
  body.xl-redesign #content {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px 20px !important;
    background: #fff !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }
  body.xl-redesign .xl-float-cart { display: none !important; }
  body.xl-redesign .xl-cookie {
    bottom: calc(var(--xl-tabbar-h) + 12px) !important;
    left: 10px !important;
    right: 10px !important;
  }
  body.xl-redesign iframe[src*="cleversite"],
  body.xl-redesign [id*="cleversite"],
  body.xl-redesign [class*="cleversite"],
  body.xl-redesign #cleversite_invite,
  body.xl-redesign #cleversite_online,
  body.xl-redesign div[id^="cleversite"] {
    bottom: var(--xl-chat-lift) !important;
  }

  /* Catalog drawer — full height, one white surface */
  body.xl-redesign.xl-nav-open { overflow: hidden !important; }
  body.xl-redesign .xlopni-nav__overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 200 !important;
    background: rgba(23, 21, 19, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.xl-redesign .xl-nav__panel,
  body.xl-redesign .xlopni-nav__container.xl-nav__panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 210 !important;
    background: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  body.xl-redesign .xl-nav__panel.xlopni-nav__container_visible,
  body.xl-redesign .xlopni-nav__container.xl-nav__panel.xlopni-nav__container_visible {
    display: block !important;
    transform: translateX(0) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.xl-redesign .xl-nav__panel-inner.xl-mm,
  body.xl-redesign .xl-nav__panel-inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: #fff !important;
    opacity: 1 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  body.xl-redesign .xl-mm__body {
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 52px 12px calc(20px + env(safe-area-inset-bottom, 0px) + var(--xl-tabbar-h)) !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }
  body.xl-redesign .xl-mm__rail,
  body.xl-redesign .xl-mm__main,
  body.xl-redesign .xl-mm__trust,
  body.xl-redesign .xl-mm__filters,
  body.xl-redesign .xl-mm__deal {
    background: #fff !important;
    border-color: #efe6db !important;
  }
  body.xl-redesign .xl-mm__rail {
    border-right: 0 !important;
    border-bottom: 1px solid #efe6db !important;
    overflow: visible !important;
    max-height: none !important;
    width: 100% !important;
    padding-bottom: 8px !important;
  }
  body.xl-redesign .xl-mm__main { overflow: visible !important; max-height: none !important; }
  body.xl-redesign .xl-mm__promo {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-height: 102px !important;
    margin-top: 14px !important;
    padding: 14px !important;
  }
  body.xl-redesign .xl-mm__promo-kicker {
    grid-column: 1 !important;
    margin: 0 0 4px !important;
  }
  body.xl-redesign .xl-mm__promo strong {
    grid-column: 1 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  body.xl-redesign .xl-mm__promo-cta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  body.xl-redesign .xl-mm__trust {
    margin-top: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #efe6db !important;
  }
  body.xl-redesign .xl-mm__close {
    width: 44px !important;
    height: 44px !important;
    top: 8px !important;
    right: 8px !important;
    position: absolute !important;
    z-index: 5 !important;
  }
  body.xl-redesign .xl-mm__cats,
  body.xl-redesign .xl-mm__cards { grid-template-columns: 1fr 1fr !important; }
  body.xl-redesign .xl-mm__card:nth-child(n+5) { display: flex !important; }

  /* Drawer filters: reveal their links inline on demand. */
  body.xl-redesign .xl-mm__filter {
    width: 100% !important;
    min-height: 44px !important;
    cursor: pointer !important;
  }
  body.xl-redesign .xl-mm__filter.is-open > i {
    transform: rotate(90deg) !important;
  }
  body.xl-redesign .xl-mm__cat > i {
    display: none !important;
  }
  body.xl-redesign .xl-mm__filter-drop {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 6px !important;
    border: 1px solid #efe6db !important;
    border-radius: 10px !important;
    background: #fffaf4 !important;
  }
  body.xl-redesign .xl-mm__filter-drop[hidden] {
    display: none !important;
  }
  body.xl-redesign .xl-mm__filter-drop a {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    color: #3b3530 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    background: #fff !important;
  }

  /* Footer accordion */
  body.xl-redesign .xl-footer {
    padding-bottom: 8px !important;
  }
  body.xl-redesign .xl-footer__main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 16px var(--xl-m-gutter) 6px !important;
  }
  body.xl-redesign .xl-footer__col.xl-footer__brand {
    margin-bottom: 16px !important;
  }
  body.xl-redesign .xl-footer__brand-name {
    font-size: 17px !important;
  }
  body.xl-redesign .xl-footer__promise {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  body.xl-redesign .xl-footer__phone {
    display: block !important;
    font-size: 17px !important;
    min-height: 40px !important;
    line-height: 40px !important;
  }
  body.xl-redesign .xl-footer a[href="/callback.php"],
  body.xl-redesign .xl-footer a[data-xl-callback] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin: 8px 0 10px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: #ff6a00 !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) .xl-footer__col-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    min-height: 42px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    list-style: none !important;
  }
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) .xl-footer__col-title::after {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid rgba(255, 255, 255, 0.7) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease !important;
    flex: 0 0 auto !important;
  }
  body.xl-redesign .xl-footer__col.is-open .xl-footer__col-title::after {
    transform: rotate(225deg) !important;
  }
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) > ul,
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) > a,
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) > span,
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) > br,
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) > .xl-footer__social,
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) > .xl-footer__projects,
  body.xl-redesign .xl-footer__col:not(.xl-footer__brand) > h4.xl-footer__col-title:not(:first-child) {
    display: none !important;
  }
  body.xl-redesign .xl-footer__col.is-open:not(.xl-footer__brand) > ul {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 0 4px !important;
  }
  body.xl-redesign .xl-footer__col.is-open:not(.xl-footer__brand) > a,
  body.xl-redesign .xl-footer__col.is-open:not(.xl-footer__brand) > span,
  body.xl-redesign .xl-footer__col.is-open:not(.xl-footer__brand) > .xl-footer__social,
  body.xl-redesign .xl-footer__col.is-open:not(.xl-footer__brand) > .xl-footer__projects,
  body.xl-redesign .xl-footer__col.is-open:not(.xl-footer__brand) > h4.xl-footer__col-title:not(:first-child) {
    display: block !important;
  }
  body.xl-redesign .xl-footer__col.is-open:not(.xl-footer__brand) > .xl-footer__social {
    display: flex !important;
  }
  body.xl-redesign .xl-footer__col ul a,
  body.xl-redesign .xl-footer__col > a {
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }
  body.xl-redesign .xl-footer__bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px var(--xl-m-gutter) !important;
  }
  body.xl-redesign .xl-footer__legal {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  body.xl-redesign .xl-footer__legal a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: 36px !important;
  }

  /* Tabbar */
  body.xl-redesign nav.xl-tabbar,
  body.xl-redesign .xl-tabbar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    height: auto;
    min-height: 56px;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #ece7e0;
    box-shadow: 0 -6px 20px rgba(32, 29, 26, 0.08);
    box-sizing: border-box;
  }
  body.xl-redesign .xl-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    text-decoration: none !important;
    color: #8a847d;
    font-size: 10px;
    font-weight: 700;
  }
  body.xl-redesign .xl-tabbar a.is-active,
  body.xl-redesign .xl-tabbar a:hover {
    color: #ff6a00;
  }
  body.xl-redesign .xl-tabbar__ico {
    width: 22px;
    height: 22px;
    display: block;
    opacity: 0.85;
  }
  body.xl-redesign .xl-tabbar a.is-active .xl-tabbar__ico {
    opacity: 1;
  }
  body.xl-redesign .xl-tabbar__cart {
    position: relative;
  }
  body.xl-redesign .xl-tabbar__badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
  }
  body.xl-redesign .xl-tabbar__badge.is-empty {
    display: none;
  }
}