@import url("/site/assets/fonts/moss-fonts.css");

body .acc-wrap { max-width: 840px; }

:root {
  --moss-ink: #1a1613;
  --moss-cream: #f7f3ec;
  --moss-paper: #fffdf9;
  --moss-muted: #6f675f;
  --moss-line: #e7e0d5;
  --moss-gold: #765b38;
  --moss-serif: "Prata", Georgia, serif;
  --moss-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body {
  max-width: 100%;
  overflow-x: clip;
}

.moss-catalog-title { margin: 6px 0 22px; }

/* Project header: the brand stays recognisable while navigation is independent
   from the system theme version installed on the client. */
.moss-site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 300;
  color: var(--moss-ink);
  background: rgb(252 251 249 / .9);
  border-block-end: 1px solid var(--moss-line);
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
  backdrop-filter: saturate(1.15) blur(14px);
}
.moss-site-header-in {
  position: relative;
  width: min(1280px, 100%);
  min-height: 72px;
  margin-inline: auto;
  padding-inline: 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.moss-site-logo {
  flex: 0 0 auto;
  color: var(--moss-ink);
  font: 400 24px/1 var(--moss-serif);
  letter-spacing: .06em;
  text-decoration: none;
}
.moss-site-logo span { color: var(--moss-gold); }
.moss-site-nav { display: flex; align-items: center; gap: 24px; }
.moss-menu-main { display: flex; align-items: center; gap: 26px; }
.moss-menu-main > a {
  position: relative;
  padding-block: 26px;
  color: var(--moss-ink);
  font: 600 10.5px/1.2 var(--moss-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.moss-menu-main > a::after {
  content: "";
  position: absolute;
  inset: auto 0 18px;
  height: 1px;
  background: var(--moss-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .18s ease;
}
.moss-menu-main > a:hover::after,
.moss-menu-main > a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.moss-menu-phone, .moss-menu-quick { display: none; }
.moss-header-search {
  position: absolute;
  inset: 100% 24px auto;
  padding: 10px 18px;
  background: rgb(252 251 249 / .98);
  border: 1px solid var(--moss-line);
  box-shadow: 0 20px 40px -30px rgb(26 22 19 / .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.moss-search-open .moss-header-search {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.moss-header-search .ms { max-width: none; }
.moss-header-search .ms-form { min-height: 42px; }
.moss-header-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.moss-header-icon, .moss-header-actions .m-cart {
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--moss-ink);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.moss-header-icon svg, .moss-header-actions .m-cart svg { width: 20px; height: 20px; }
.moss-header-icon:hover, .moss-header-actions .m-cart:hover { color: var(--moss-gold); }
.moss-header-actions .m-cart-sum { display: none; }
/* Счётчик избранного использует тот же контракт и ту же геометрию, что корзина. */
.moss-header-actions .m-favorites .m-cart-ic { position: relative; display: inline-flex; }
.moss-header-actions .m-favorites .m-cart-count {
  top: -7px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  color: #fff;
  background: var(--moss-gold);
  font: 700 10px/1 var(--moss-sans);
}
.moss-menu-button { display: none; }
.moss-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* MOSS does not expose storefront filters. Hiding the trigger together with
   the drawer prevents an empty black backdrop on old core builds. */
[data-component="catalog"] {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
.mc-filters-toggle, .mc-filters, .mc-backdrop {
  display: none !important;
}

/* Избранное — самостоятельная витрина, а не растянутая на весь экран выдача. */
.moss-favorites-page {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding-block: 8px 48px;
}
.moss-favorites-page .m-h1 { margin-block: 0 26px; }
.moss-favorites-page [data-mu-favorites] { min-width: 0; }

/* Width containment for old system builds. Intentional photo carousels keep
   their own horizontal scroll; the page and commerce controls never do. */
.m-wrap, .mc-main, .mc-grid, .mc-card, .mc-card-p,
.mu-cart-page, .mu-cart-table, .mu-cart-aside,
.co-page, .co-form {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 860px) {
  [data-component="catalog"] .mc-bar,
  [data-mu-catalog] .mc-bar {
    padding: 10px 0 18px;
    border-block-end: 1px solid var(--moss-line);
  }
  [data-component="catalog"] .mc-total,
  [data-mu-catalog] .mc-total {
    color: var(--moss-muted);
    font: 600 11px/18px var(--moss-sans);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  [data-component="catalog"] .mc-sort-btn,
  [data-mu-catalog] .mc-sort-btn {
    min-height: 44px;
    padding-inline: 14px;
    color: var(--moss-ink);
    background: var(--moss-paper);
    border-color: var(--moss-line);
    border-radius: 4px;
    box-shadow: none;
    font: 600 12px/18px var(--moss-sans);
    letter-spacing: .035em;
  }
  [data-component="catalog"] .mc-sort-btn:focus-visible,
  [data-mu-catalog] .mc-sort-btn:focus-visible {
    border-color: var(--moss-gold);
    box-shadow: 0 0 0 3px rgb(168 137 95 / .14);
  }
  .moss-site-header-in {
    min-height: 64px;
    padding-inline: 14px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .moss-menu-button {
    grid-column: 1;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    display: grid;
    place-items: center;
    color: var(--moss-ink);
    background: transparent;
    cursor: pointer;
  }
  .moss-menu-button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }
  .moss-menu-button path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .2s ease, opacity .15s ease;
  }
  .moss-nav-open .moss-menu-button path:first-child { transform: translateY(6px) rotate(45deg); }
  .moss-nav-open .moss-menu-button path:nth-child(2) { opacity: 0; }
  .moss-nav-open .moss-menu-button path:last-child { transform: translateY(-6px) rotate(-45deg); }
  .moss-site-logo {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: 22px;
  }
  .moss-header-actions {
    grid-column: 3;
    margin: 0;
    gap: 4px;
    justify-self: end;
  }
  .moss-account-link { display: none; }
  .moss-header-icon, .moss-header-actions .m-cart { width: 40px; height: 44px; }
  .moss-site-nav {
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100dvh - 64px);
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
    display: block;
    overflow-y: auto;
    color: var(--moss-ink);
    background: var(--moss-paper);
    border-block-end: 1px solid var(--moss-line);
    box-shadow: 0 22px 38px -28px rgb(26 22 19 / .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .moss-nav-open .moss-site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .moss-menu-main { display: grid; gap: 0; }
  .moss-menu-main > a {
    min-height: 50px;
    padding: 15px 4px;
    display: flex;
    align-items: center;
    border-block-end: 1px solid var(--moss-line);
    font-size: 12px;
  }
  .moss-menu-main > a::after { inset: auto auto -1px 4px; width: 42px; }
  .moss-menu-phone {
    margin: 18px 4px 8px;
    display: inline-block;
    color: var(--moss-ink);
    font: 400 20px/1.3 var(--moss-serif);
    text-decoration: none;
  }
  .moss-menu-quick {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .moss-menu-quick > a {
    min-width: 0;
    min-height: 72px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--moss-ink);
    background: var(--moss-cream);
    border: 1px solid var(--moss-line);
    border-radius: 5px;
    font: 600 10px/1.2 var(--moss-sans);
    letter-spacing: .04em;
    text-decoration: none;
  }
  .moss-menu-quick svg { width: 20px; height: 20px; }
  .moss-header-search {
    inset: 100% 0 auto;
    padding: 10px 14px;
    border-inline: 0;
    border-radius: 0;
  }

  /* Full-width cart row: product owns the first line, controls and total the
     second. This also overrides old desktop grids left on production. */
  .mu-cart-page {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  .mu-cart-table, .mu-cart-aside { width: 100%; min-width: 0; }
  .mu-crow {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "prod prod rm" "qty qty line";
    gap: 10px 12px !important;
  }
  .mu-crow.mu-chead { display: none; }
  .mu-crow > .mu-cprod { grid-area: prod; min-width: 0; }
  .mu-crow > .mu-cqty { grid-area: qty; justify-self: start; }
  .mu-crow > .mu-cprice { display: none; }
  .mu-crow > .mu-cline { grid-area: line; justify-self: end; text-align: right; }
  .mu-crow > .mu-crm { grid-area: rm; align-self: start; }
  .mu-cart-aside { position: static !important; }

  /* Two product columns leave 134px for controls at 390px. Compact the
     stepper instead of letting its intrinsic 148px width leak out of cards. */
  .mc-card .mc-cartctl {
    --mcc-h: 38px;
    --mcc-gap: 4px;
    --mcc-pad: 2px;
    width: auto;
    min-width: 0;
    max-width: calc(100% - 28px);
  }
  .mc-card .mcc-on { min-width: 0; gap: 4px; }
  .mc-card .mcc-step { min-width: 0; }
  .mc-card .mcc-step button { width: 32px; }
  .mc-card .mcc-n { min-width: 22px; font-size: 13px; }
  .co-page, .co-form { width: 100%; overflow-x: clip; }
}

@media (max-width: 380px) {
  .moss-header-actions { gap: 0; }
  .moss-header-icon, .moss-header-actions .m-cart { width: 38px; }
  .moss-menu-quick { grid-template-columns: 1fr 1fr; }
  .moss-menu-quick > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .moss-site-nav, .moss-header-search, .moss-menu-button path { transition: none; }
}