/* ========= Reset / base ========= */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Manrope', system-ui, -apple-system, sans-serif;
      color: #1a1a1a;
      background: #fff;
      font-size: 16px;
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
    a:hover { opacity: .75; }
    button { font-family: inherit; cursor: pointer; border: 0; background: none; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease, opacity .2s ease; }
    button:active { transform: scale(.97); }
    ul { list-style: none; padding: 0; margin: 0; }
    h1, h2, h3, h4, p { margin: 0; }
    :focus-visible { outline: 2px solid #404040; outline-offset: 2px; border-radius: 4px; }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 30px;
    }

    /* ========= Buttons / arrows ========= */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-weight: 600;
      font-size: 16px;
      padding: 10px 40px;
      transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease;
    }
    .btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); transform: translateY(-1px); opacity: 1; }
    .btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
    .btn--dark { background: #404040; color: #fff; }
    .btn--dark:hover { background: #2c2c2c; }
    .btn--outline {
      background: #fff;
      color: #000;
      border: 1px solid #c5c5c5;
      font-weight: 400;
      font-size: 14px;
      padding: 10px 20px;
    }
    .btn--outline:hover { border-color: #404040; background: #f5f3f1; }

    .arrows { display: flex; gap: 10px; }
    .arrow {
      width: 39px;
      height: 39px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color .25s ease, transform .15s ease;
    }
    .arrow:hover { background: #ebe7e3; }
    .arrow:active { transform: scale(.92); }
    .arrow--filled { background: #f5f3f1; }
    .arr {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-right: 1.5px solid #262626;
      border-top: 1.5px solid #262626;
    }
    .arr--right { transform: rotate(45deg); }
    .arr--left  { transform: rotate(-135deg); }
    .arr.white  { border-color: #fff; }

    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #000;
      letter-spacing: -0.12px;
      line-height: 1.45;
    }

    /* ========= Topbar ========= */
    .topbar {
      background: #f5f3f1;
      font-size: 13px;
      color: #1a1a1a;
      border-bottom: 1px solid #ececec;
    }
    .topbar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 36px;
      gap: 20px;
    }
    .topbar__group {
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .topbar a { color: #1a1a1a; }
    .topbar a:hover { opacity: .65; }
    .topbar__phone { font-weight: 500; letter-spacing: .2px; }

    /* ========= Header ========= */
    .header {
      padding: 18px 0;
      position: relative;
      z-index: 50;
      background: #fff;
    }
    .header__inner {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .header__logo {
      font-weight: 700;
      font-size: 22px;
      color: #2f2f2f;
      letter-spacing: 0.5px;
    }
    .header__catalog { padding: 10px 36px; border-radius: 8px; }
    .header__search {
      flex: 1;
      position: relative;
      max-width: 360px;
    }
    .header__search input {
      width: 100%;
      padding: 11px 38px 11px 16px;
      border: 1px solid #dbdbdb;
      border-radius: 6px;
      font-family: inherit;
      font-size: 14px;
      color: #888;
      background: #fff;
    }
    .header__search input:focus { outline: none; border-color: #888; }
    .header__search-icon {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
    }
    .header__nav {
      display: flex;
      gap: 30px;
      align-items: center;
    }
    .header__link { font-size: 15px; color: #1a1a1a; }
    .caret { font-size: 10px; }
    .header__icons {
      display: flex;
      gap: 16px;
      margin-left: auto;
      align-items: center;
    }

    /* burger – скрыта на десктопе */
    .burger-toggle { display: none; }
    .burger {
      display: none;
      width: 32px; height: 32px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
    }
    .burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: #262626;
      border-radius: 2px;
      transition: .25s;
    }

    /* ========= Hero ========= */
    .hero {
      background: #f5f3f1;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 58%;
      background-image: url('Скриншот-20260416-112603.jpg');
      background-size: cover;
      background-position: center;
      pointer-events: none;
    }
    .hero__inner {
      position: relative;
      z-index: 2;
      padding: 110px 30px 110px;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .hero__title {
      font-size: 32px;
      font-weight: 700;
      color: #1a1a1a;
      max-width: 520px;
      line-height: 1.25;
    }
    .hero__subtitle {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
      max-width: 430px;
      letter-spacing: 0.18px;
      line-height: 1.5;
    }

    /* ========= Section spacing ========= */
    .categories,
    .collections,
    .popular,
    .articles { padding: 60px 0 0; }

    .categories .container,
    .popular .container,
    .articles .container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* ========= Categories ========= */
    .categories__controls {
      display: flex;
      gap: 10px;
      align-items: center;
      width: 100%;
    }
    .filters {
      display: flex;
      gap: 10px;
      flex: 1;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }
    .filters::-webkit-scrollbar { display: none; }
    .filter {
      padding: 10px 15px;
      border: 1px solid #dbdbdb;
      border-radius: 6px;
      font-size: 14px;
      color: #000;
      background: #fff;
      white-space: nowrap;
      transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
    }
    .filter:hover { border-color: #888; }
    .filter--active {
      background: #404040;
      border-color: transparent;
      color: #fff;
    }
    .filter--active:hover { background: #2c2c2c; border-color: transparent; }
    .cat-cards {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 4 * 20px) / 4.3);
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      padding-bottom: 4px;
    }
    .cat-cards::-webkit-scrollbar { display: none; }
    .cat-cards > * { scroll-snap-align: start; }
    .cat-card {
      background: #f5f5f5;
      border-radius: 6px;
      padding: 15px 10px 15px 15px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
    }
    .cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.08); background: #fff; }
    .cat-card__img {
      aspect-ratio: 203/186;
      border-radius: 4px;
      background-size: cover;
      background-position: center;
      background-color: #e8e8e8;
      transition: transform .4s ease;
    }
    .cat-card:hover .cat-card__img { transform: scale(1.04); }
    .cat-card__title {
      font-size: 18px;
      font-weight: 600;
      color: #000;
      letter-spacing: -0.09px;
    }

    /* progress-bar */
    .progress-bar {
      position: relative;
      width: 100%;
      height: 3px;
      background: #e2e2e2;
      border-radius: 2px;
      margin-top: 10px;
      overflow: hidden;
    }
    .progress-bar span {
      position: absolute;
      left: 0; top: 0;
      height: 100%;
      width: 33%;
      background: #888;
      border-radius: 2px;
      transition: left .4s ease, width .4s ease;
    }

    /* ========= Collections ========= */
    .collections__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .collection {
      height: 377px;
      border-radius: 8px;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
      transition: transform .4s ease, box-shadow .4s ease;
      cursor: pointer;
    }
    .collection:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.18); }
    .collection__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
    }
    .collection__content {
      position: relative;
      height: 100%;
      padding: 60px 30px 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .collection--dark .collection__content { color: #fff; }
    .collection--light .collection__content { color: #262626; }
    .collection__title { font-size: 32px; font-weight: 600; }
    .collection__text { font-size: 16px; font-weight: 500; margin-top: 6px; }
    .collection__link {
      display: inline-flex;
      align-items: center;
      gap: 15px;
      font-weight: 700;
      font-size: 20px;
      transition: gap .25s ease, opacity .2s ease;
    }
    .collection__link:hover { gap: 22px; opacity: 1; }

    /* ========= Popular ========= */
    .popular__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: 100%;
      flex-wrap: wrap;
    }
    .popular__controls {
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .products {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 3 * 20px) / 3.3);
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      padding-bottom: 4px;
    }
    .products::-webkit-scrollbar { display: none; }
    .products > * { scroll-snap-align: start; }
    .product { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
    .product__img {
      height: 290px;
      border-radius: 4px;
      background-size: cover;
      background-position: center;
      background-color: #eee;
      overflow: hidden;
      transition: transform .4s ease, box-shadow .4s ease;
    }
    .product:hover .product__img { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.10); }
    .product__title { transition: color .2s ease; }
    .product:hover .product__title { color: #404040; }
    .product__title {
      font-size: 16px;
      font-weight: 500;
      color: #000;
      letter-spacing: -0.08px;
    }
    .product__price { font-size: 16px; color: #000; }
    .product__price b { font-weight: 700; }
    .product__price .muted { color: #989898; font-size: 10.5px; }

    /* ========= About ========= */
    .about {
      background: #f5f3f1;
      margin-top: 60px;
      padding: 90px 0;
    }
    .about__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;
      gap: 24px;
      flex-wrap: wrap;
    }
    .about__title {
      font-size: 32px;
      font-weight: 400;
      color: #000;
      letter-spacing: -1.6px;
      line-height: 1;
    }
    .about__title b { font-weight: 600; }
    .about__cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .advantage {
      background: #fff;
      border-radius: 16px;
      padding: 40px;
      min-height: 246px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .advantage:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.08); }
    .advantage__icon {
      height: 91px;
      display: flex;
      align-items: flex-start;
      opacity: .65;
    }
    .advantage h3 { font-size: 20px; font-weight: 700; color: #000; }
    .advantage p {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.28px;
      color: #000;
    }

    /* ========= Articles ========= */
    .articles__head {
      display: flex;
      align-items: flex-end;
      gap: 20px;
      width: 100%;
      flex-wrap: wrap;
    }
    .articles__lead {
      font-size: 16px;
      color: #000;
      max-width: 665px;
      flex: 1 1 280px;
    }
    .articles__grid {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 2 * 20px) / 2.5);
      gap: 20px;
      height: 548px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }
    .articles__grid::-webkit-scrollbar { display: none; }
    .articles__grid > * { scroll-snap-align: start; }
    .article {
      display: flex;
      flex-direction: column;
      background: #f5f3f1;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .article:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(0,0,0,.10); }
    .article__img {
      flex: 1;
      background-size: cover;
      background-position: center;
      min-height: 200px;
      transition: transform .5s ease;
    }
    .article:hover .article__img { transform: scale(1.06); }
    .article__body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .article__body h3 {
      font-size: 18px;
      font-weight: 600;
      color: #000;
      letter-spacing: -0.09px;
    }
    .article__body p { font-size: 15px; color: #000; letter-spacing: 0.3px; }

    /* ========= Print order ========= */
    .print-order {
      background: #f5f3f1;
      padding: 120px 0;
      margin-top: 60px;
    }
    .print-order__card {
      background: #fff;
      border-radius: 16px;
      padding: 30px 60px;
      display: flex;
      gap: 90px;
      align-items: stretch;
      min-height: 509px;
    }
    .print-order__img {
      width: 380px;
      flex-shrink: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .print-order__content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      gap: 30px;
    }
    .print-order__title {
      font-size: 24px;
      font-weight: 500;
      color: #000;
      margin-bottom: 20px;
    }
    .print-order__text {
      font-size: 16px;
      color: #000;
      letter-spacing: 0.32px;
      margin-bottom: 50px;
    }
    .swatch-groups { display: flex; gap: 20px; flex-wrap: wrap; }
    .swatch-group__title { font-size: 14px; color: #2a2a2a; margin-bottom: 10px; }
    .swatches { display: flex; gap: 5px; }
    .swatch {
      width: 89px;
      padding: 10px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: border-color .25s ease, background-color .25s ease, transform .15s ease;
    }
    .swatch:hover { border-color: #dbdbdb; background: #fafafa; }
    .swatch:active { transform: scale(.96); }
    .swatch--active { border-color: #404040; background: #fafafa; }
    .swatch__chip { transition: transform .25s ease; }
    .swatch:hover .swatch__chip { transform: scale(1.05); }
    .swatch__chip { width: 100%; aspect-ratio: 1/1; }
    .swatch span { font-size: 11px; color: #626262; letter-spacing: -0.055px; }
    .swatch__chip--pattern { background: #fff; }
    .pattern-dots {
      background-image: radial-gradient(#000 1.2px, transparent 1.5px);
      background-size: 8px 8px;
    }
    .pattern-stripes {
      background-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px);
    }

    /* ========= Showroom ========= */
    .showroom { padding: 60px 0; background: #f5f3f1; }
    .showroom__card {
      background: #fff;
      border: 1px solid #c5c5c5;
      border-radius: 10px;
      display: flex;
      min-height: 565px;
      overflow: hidden;
    }
    .showroom__info {
      width: 584px;
      padding: 30px 30px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }
    .showroom__title { font-size: 24px; font-weight: 600; color: #000; }
    .showroom__text { font-size: 16px; color: #404040; }
    .showroom__divider {
      border: 0;
      border-top: 1px solid #c5c5c5;
      margin: 0;
    }
    .showroom__addr-title {
      font-size: 20px;
      font-weight: 600;
      color: #000;
      margin-bottom: 10px;
    }
    .tags { display: flex; gap: 10px; flex-wrap: wrap; }
    .tag {
      background: #f5f3f1;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 14px;
      color: #000;
    }
    .showroom__details {
      display: flex;
      flex-direction: column;
      gap: 10px;
      color: #626262;
      font-size: 16px;
      margin-top: auto;
    }
    .showroom__buttons {
      display: flex;
      gap: 10px;
      width: 100%;
      flex-wrap: wrap;
    }
    .showroom__btn { flex: 1 1 200px; padding: 10px 20px; font-weight: 500; }
    .showroom__photo {
      flex: 1;
      background-size: cover;
      background-position: center;
      min-height: 300px;
    }

    /* ========= Quick links ========= */
    .quick-links { padding: 50px 0; }
    .quick-links__row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .quick-link {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 10px 20px 10px 10px;
      border: 1px solid #c5c5c5;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      color: #626262;
      width: 100%;
      transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .2s ease;
    }
    .quick-link:hover { border-color: #404040; background: #f5f3f1; color: #1a1a1a; transform: translateY(-2px); opacity: 1; }
    .quick-link__img {
      width: 83px;
      height: 49px;
      border-radius: 6px;
      background: #e5e5e5;
      flex-shrink: 0;
    }
    .quick-link__img--2 { background: #b4b4b4; }
    .quick-link__img--3 { background: #dedede; }

    /* ========= Footer ========= */
    .footer { background: #f5f3f1; }
    .footer__top {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
      gap: 30px;
      padding-top: 50px;
      padding-bottom: 30px;
    }
    .footer__logo {
      font-size: 28px;
      font-weight: 700;
      color: #2f2f2f;
      letter-spacing: 0.56px;
      margin-bottom: 16px;
    }
    .footer__brand p {
      font-size: 12px;
      color: #2f2f2f;
      letter-spacing: 0.24px;
      max-width: 260px;
      line-height: 1.5;
    }
    .footer__col h4 {
      font-size: 14px;
      font-weight: 700;
      color: #2f2f2f;
      letter-spacing: 0.14px;
      margin-bottom: 15px;
    }
    .footer__col ul { display: flex; flex-direction: column; gap: 10px; }
    .footer__col li,
    .footer__col a {
      font-size: 12px;
      color: #4e4e4e;
      letter-spacing: 0.24px;
    }
    .footer__socials { display: flex; gap: 10px; }
    .footer__socials a {
      width: 25px;
      height: 25px;
      border: 1px solid #4e4e4e;
      border-radius: 4px;
      display: inline-block;
    }
    .footer__bottom {
      border-top: 1px solid #2f2f2f;
      background: #f5f3f1;
    }
    .footer__bottom p {
      font-size: 12px;
      color: #2f2f2f;
      padding: 12px 0;
      letter-spacing: -0.06px;
    }
    .footer__sub { background: #ebe9e6; }
    .footer__sub-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 30px;
      font-size: 13px;
      color: #2f2f2f;
      gap: 16px;
      flex-wrap: wrap;
    }
    .footer__sub-left,
    .footer__sub-right {
      display: flex;
      gap: 24px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* ===========================================================
       ============ ПЛАНШЕТ <= 1024px ============
       =========================================================== */
    @media (max-width: 1024px) {
      .container { padding: 0 20px; }

      .hero__inner { padding: 90px 0 80px; min-height: 460px; }
      .hero__title { font-size: 28px; }
      .hero__subtitle { font-size: 16px; }

      .cat-cards { grid-auto-columns: calc((100% - 40px) / 3); }
      .products  { grid-auto-columns: calc((100% - 40px) / 3); }
      .about__cards { grid-template-columns: repeat(3, 1fr); }
      .articles__grid {
        grid-auto-columns: calc((100% - 20px) / 2);
        height: auto;
      }
      .article { min-height: 420px; }

      .print-order { padding: 70px 0; }
      .print-order__card {
        padding: 30px;
        gap: 40px;
      }
      .print-order__img { width: 280px; }

      .showroom__card { flex-direction: column; min-height: 0; }
      .showroom__info { width: 100%; padding: 30px; }
      .showroom__photo { min-height: 320px; }

      .quick-links__row { grid-template-columns: repeat(2, 1fr); }

      .footer__top {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    /* ===========================================================
       ================== МОБИЛЬНЫЙ <= 720px =====================
       =========================================================== */
    @media (max-width: 720px) {
      body { font-size: 15px; }
      .container { padding: 0 16px; }

      /* TOPBAR */
      .topbar { font-size: 12px; }
      .topbar__inner { min-height: 32px; gap: 10px; flex-wrap: wrap; }
      .topbar__group { gap: 14px; }
      .topbar__group:first-child a:not(:first-child) { display: none; }

      /* HEADER -> бургер */
      .header { padding: 14px 0; }
      .header__inner { gap: 12px; }
      .header__logo { font-size: 20px; }
      .header__catalog { display: none; }
      .header__search {
        order: 5;
        flex: 1 1 100%;
        max-width: none;
        margin-top: 12px;
      }
      .header__icons { gap: 12px; margin-left: auto; }
      .header__icons a:nth-child(1) { display: none; } /* профиль скрываем */
      .burger { display: flex; }
      .header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        padding: 10px 16px 20px;
        border-top: 1px solid #ececec;
        box-shadow: 0 8px 16px rgba(0,0,0,.06);
      }
      .header__nav .header__link {
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 16px;
      }
      .burger-toggle:checked ~ .header__inner .header__nav { display: flex; }
      .burger-toggle:checked ~ .header__inner .burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .burger-toggle:checked ~ .header__inner .burger span:nth-child(2) {
        opacity: 0;
      }
      .burger-toggle:checked ~ .header__inner .burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* HERO */
      .hero::after {
        position: relative;
        width: 100%;
        height: 220px;
        display: block;
      }
      .hero { display: flex; flex-direction: column-reverse; }
      .hero__inner {
        padding: 40px 0 50px;
        min-height: 0;
        gap: 20px;
      }
      .hero__title { font-size: 24px; }
      .hero__subtitle { font-size: 15px; }

      /* sections */
      .categories, .collections, .popular, .articles { padding: 40px 0 0; }

      .section-title { font-size: 20px; }

      .categories__controls { flex-direction: column; align-items: stretch; }
      .categories__controls .arrows { align-self: flex-end; }

      .cat-cards {
        grid-auto-columns: calc((100% - 12px) / 2);
        gap: 12px;
      }
      .cat-card { padding: 12px; }
      .cat-card__title { font-size: 16px; }

      /* COLLECTIONS */
      .collections__grid { grid-template-columns: 1fr; }
      .collection { height: 280px; }
      .collection__content { padding: 30px 20px; }
      .collection__title { font-size: 24px; }
      .collection__text { font-size: 14px; }
      .collection__link { font-size: 16px; }

      /* POPULAR */
      .popular__head { flex-direction: column; align-items: flex-start; }
      .popular__controls { width: 100%; justify-content: space-between; }
      .products { grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; }
      .product__img { height: 200px; }

      /* ABOUT */
      .about { padding: 50px 0; margin-top: 40px; }
      .about__head { flex-direction: column; align-items: flex-start; }
      .about__title { font-size: 24px; letter-spacing: -1px; }
      .about__cards { grid-template-columns: 1fr; }
      .advantage { padding: 24px; min-height: 0; }
      .about .btn { width: 100%; }

      /* ARTICLES */
      .articles__grid { grid-auto-columns: 100%; }
      .article { min-height: 360px; }

      /* PRINT ORDER */
      .print-order { padding: 50px 0; margin-top: 40px; }
      .print-order__card {
        flex-direction: column;
        padding: 24px;
        gap: 24px;
      }
      .print-order__img {
        width: 100%;
        height: 220px;
      }
      .print-order__content { align-items: stretch; }
      .print-order__title { font-size: 20px; margin-bottom: 12px; }
      .print-order__text { font-size: 14px; margin-bottom: 24px; }
      .swatch-groups { flex-direction: column; gap: 20px; }
      .print-order__btn { width: 100%; }

      /* SHOWROOM */
      .showroom { padding: 40px 0; }
      .showroom__info { padding: 24px; gap: 20px; }
      .showroom__title { font-size: 20px; }
      .showroom__text { font-size: 14px; }
      .showroom__addr-title { font-size: 17px; }
      .showroom__photo { min-height: 220px; }
      .showroom__buttons { flex-direction: column; }
      .showroom__btn { width: 100%; flex: none; }

      /* QUICK LINKS */
      .quick-links { padding: 30px 0; }
      .quick-links__row { grid-template-columns: 1fr; gap: 12px; }

      /* FOOTER */
      .footer__top {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 40px;
      }
      .footer__brand p { max-width: none; }
      .footer__sub-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
    }

    /* супер-малый */
    @media (max-width: 380px) {
      .cat-cards, .products { grid-auto-columns: 100%; }
      .product__img { height: 240px; }
    }