/* product: стили из инлайн-блока макета new-ui/product.html (переменные --product-* внутри).
   Подключать только на страницах с компонентами .product-* */
    /* Универсальный border-box из макета scoped на контент страницы питомника
       и лайтбокс: с «*» он ломал общий layout (в т.ч. галочки навигации хедера
       становились меньше — border-box съедает бордеры у :after-стрелок) */
    .product-page, .product-page *, .product-page *::before, .product-page *::after,
    .product-lightbox, .product-lightbox *, .product-lightbox *::before, .product-lightbox *::after {
      box-sizing: border-box;
    }

    :root {
      --product-ink: #16213a;
      --product-muted: #6f645a;
      --product-line: #f1dac8;
      --product-warm: #fff8f1;
      --product-accent: #ff7a1a;
      --product-accent-strong: #ff5b00;
      --product-accent-soft: #fff0df;
      --product-card-shadow: 0 18px 40px rgba(116, 67, 23, 0.08);
      --product-radius-xl: 30px;
      --product-radius-lg: 24px;
      --product-radius-md: 18px;
      --product-radius-sm: 14px;
    }

    .product-page {
      color: var(--product-ink);
      padding-bottom: 64px;
      /* overflow-x сознательно НЕ ставим: с ним main клипает
         тултип рейтинга (bottom: calc(100% + 12px) выходит за его верх).
         Горизонтальный guard перенесён на .product-shell. */
    }

    .product-shell {
      /* clip вместо hidden: так же режет горизонтальный вылет, но НЕ создаёт
         scroll container (hidden ломал position:sticky у сайдбара) */
      overflow-x: clip;
    }

    .product-page .catalog-title-block p {
      margin: 12px 0 0;
      max-width: 840px;
      color: var(--product-muted);
      font-size: 16px;
      line-height: 1.65;
    }

    .product-shell {
      display: grid;
      grid-auto-columns: minmax(0, 1fr);
      gap: 18px;
    }

    .product-stage,
    .product-ribbon,
    .product-overview,
    .product-docs,
    .product-map-card {
      /* border: 1px solid var(--product-line); */
      background: rgba(255, 255, 255, 0.94);
    }

    .product-stage {
      position: relative;
      display: grid;
      gap: 20px;
      border-radius: var(--product-radius-xl);
      overflow: hidden;
    }

    .product-stage::before {
      display: none;
    }

    .product-stage-gallery,
    .product-stage-main {
      position: relative;
      z-index: 1;
    }

    .product-stage-gallery {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 118px;
      gap: 16px;
      align-items: stretch;
      min-width: 0;
    }

    .product-gallery-main {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .product-hero-shot {
      position: relative;
      min-height: clamp(520px, 45vw, 690px);
      border-radius: 26px;
      overflow: hidden;
      background: #23170f;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
      /* горизонтальный свайп обрабатывает галерея, вертикальный скролл — страница */
      touch-action: pan-y;
      -webkit-user-select: none;
      user-select: none;
    }

    .product-gallery-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      transition: opacity .24s ease, transform .32s ease;
    }

    .product-hero-shot.is-changing .product-gallery-image {
      opacity: .18;
      transform: scale(1.015);
    }

    .product-gallery-shade {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(33, 20, 8, 0.04) 0%, rgba(33, 20, 8, 0.04) 44%, rgba(33, 20, 8, 0.72) 100%),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.24), transparent 38%);
      pointer-events: none;
    }

    .product-premium-flag {
      position: absolute;
      top: 14px;
      left: 14px;
      display: grid;
      gap: 4px;
      justify-items: center;
      width: 118px;
      padding: 16px 12px 22px;
      clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
      border: 1px solid rgba(150, 90, 15, 0.42);
      background: linear-gradient(180deg, #ffde7c 0%, #f7b91b 48%, #ffd363 100%);
      color: #5d3600;
      box-shadow: 0 14px 22px rgba(133, 80, 16, 0.25);
      text-align: center;
    }

    .product-premium-flag strong {
      font-size: 22px;
      line-height: 1;
    }

    .product-premium-flag span {
      font-size: 12px;
      line-height: 1.2;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .product-hero-overlay {
      position: absolute;
      right: 16px;
      bottom: 16px;
      left: 16px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
    }

    .product-media-pill {
      display: inline-flex;
      flex-direction: column;
      gap: 8px;
      padding: 14px 18px;
      border-radius: 20px;
      background: rgba(74, 47, 30, 0.72);
      color: #fff7ef;
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 24px rgba(34, 16, 4, 0.18);
    }

    .product-media-pill span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 800;
    }

    .product-circle-btn,
    .product-gallery-btn,
    .product-lightbox-btn,
    .product-lightbox-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      cursor: pointer;
      font: inherit;
    }

    .product-circle-btn {
      width: 58px;
      height: 58px;
      border: 0;
      border-radius: 50%;
      /* как у стрелок галереи: полупрозрачная, при наведении — полный цвет */
      background: rgba(255, 255, 255, 0.35);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      color: #6d3415;
      font-size: 26px;
      box-shadow: 0 14px 26px rgba(34, 16, 4, 0.18);
      transition: background .2s ease;
    }

    .product-circle-btn:hover {
      background: #fff;
    }

    .product-gallery-open {
      text-decoration: none;
    }

    /* Иконка «на весь экран» — два уголка (одинакова на всех разрешениях,
       размер меняется только в мобильном блоке) */
    .product-gallery-open {
      position: relative;
      font-size: 0;
    }

    .product-gallery-open::before,
    .product-gallery-open::after {
      content: "";
      position: absolute;
      width: 11px;
      height: 11px;
      border: 2.5px solid #6d3415;
    }

    .product-gallery-open::before {
      top: 17px;
      left: 17px;
      border-right: 0;
      border-bottom: 0;
    }

    .product-gallery-open::after {
      right: 17px;
      bottom: 17px;
      border-left: 0;
      border-top: 0;
    }

    .product-gallery-btn {
      position: absolute;
      top: 50%;
      z-index: 3;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      /* полупрозрачный круг, при наведении — полный цвет */
      background: rgba(255, 255, 255, 0.35);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      color: #6d3415;
      font-size: 0; /* текстовый глиф скрыт: шеврон рисует ::before */
      line-height: 1;
      box-shadow: 0 14px 26px rgba(34, 16, 4, 0.18);
      transform: translateY(-50%);
      transition: background .2s ease, box-shadow .2s ease;
    }

    .product-gallery-btn:hover {
      background: #fff;
      box-shadow: 0 16px 30px rgba(34, 16, 4, 0.22);
    }

    /* Шеврон вместо текстового глифа: flex центрирует ::before идеально
       (символ «‹» смещался от центра круга на ~8px из-за метрик шрифта) */
    .product-gallery-btn::before {
      content: "";
      width: 11px;
      height: 11px;
      border-left: 3px solid #6d3415;
      border-bottom: 3px solid #6d3415;
      transform: rotate(45deg);
      margin-left: 2px;
    }

    .product-gallery-btn--next::before {
      transform: rotate(225deg);
      margin-left: 0;
      margin-right: 2px;
    }

    .product-gallery-btn--prev { left: 16px; }
    .product-gallery-btn--next { right: 16px; }

    .product-gallery-counter {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(48, 29, 18, 0.72);
      color: #fff8f1;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .04em;
      backdrop-filter: blur(12px);
    }

    .product-gallery-caption {
      position: absolute;
      right: 18px;
      bottom: 18px;
      left: 18px;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      color: #fff;
    }

    .product-gallery-caption strong {
      display: block;
      margin-bottom: 5px;
      font-size: clamp(24px, 3vw, 38px);
      line-height: 1;
      letter-spacing: -.04em;
    }

    .product-gallery-caption span {
      color: #ffe8d4;
      font-size: 14px;
      font-weight: 800;
    }

    .product-gallery-progress {
      height: 4px;
      overflow: hidden;
      border-radius: 999px;
      background: #ffe7d2;
    }

    .product-gallery-progress span {
      display: block;
      width: calc((var(--active-slide, 1) / var(--slides-total, 6)) * 100%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ff6a00, #ffb84d);
      transition: width .25s ease;
    }

    .product-thumbs {
      display: grid;
      gap: 12px;
      align-content: start;
      max-height: clamp(520px, 45vw, 690px);
      overflow: auto;
      padding-right: 3px;
      scrollbar-width: thin;
      scrollbar-color: #ffc49a transparent;
    }

    .product-thumb {
      position: relative;
      height: 104px;
      min-height: 0;
      padding: 0;
      border: 2px solid transparent;
      border-radius: 18px;
      background: #fff5ec;
      box-shadow: 0 14px 24px rgba(93, 53, 18, 0.09);
      cursor: pointer;
      overflow: hidden;
      transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .product-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-thumb:hover,
    .product-thumb.is-active {
      border-color: var(--product-accent);
      transform: translateY(-1px);
      box-shadow: 0 16px 28px rgba(255, 106, 0, 0.16);
    }

    .product-thumb.is-active::after {
      content: "";
      position: absolute;
      inset: 8px;
      border: 2px solid rgba(255, 255, 255, 0.92);
      border-radius: 12px;
      pointer-events: none;
    }

    .product-gallery-dots {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .product-gallery-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #f2d8c5;
      cursor: pointer;
      transition: width .2s ease, background .2s ease;
    }

    .product-gallery-dot.is-active {
      width: 28px;
      background: var(--product-accent);
    }

    /* Полноэкранный просмотр: фото занимает максимум, кнопки — оверлеи поверх */
    .product-lightbox {
      position: fixed;
      inset: 0;
      z-index: 2147483000;
      display: none;
      background: rgba(10, 8, 6, 0.96);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .product-lightbox.is-open {
      display: block;
    }

    .product-lightbox-close {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 3;
      min-width: 118px;
      height: 46px;
      gap: 8px;
      padding: 0 18px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .02em;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .product-lightbox-close span {
      font-size: 22px;
      line-height: 1;
    }

    .product-lightbox-figure {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-width: 0;
      margin: 0;
      padding: 60px 92px 118px;
    }

    .product-lightbox-figure img {
      max-width: 100%;
      max-height: calc(100vh - 190px);
      border-radius: 8px;
      object-fit: contain;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    }

    .product-lightbox-figure figcaption {
      color: #fff8f1;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
    }

    .product-lightbox-btn {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-size: 32px;
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      transition: background .2s ease, transform .15s ease;
    }

    .product-lightbox-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-50%) scale(1.06);
    }

    .product-lightbox-close:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .product-lightbox-btn--prev {
      left: 18px;
    }

    .product-lightbox-btn--next {
      right: 18px;
    }

    .product-lightbox-thumbs {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 16px;
      z-index: 2;
      display: flex;
      gap: 8px;
      max-width: min(90vw, 960px);
      overflow-x: auto;
      padding: 4px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
    }

    .product-lightbox-thumb {
      flex: 0 0 82px;
      width: 82px;
      height: 62px;
      padding: 0;
      border: 2px solid rgba(255, 255, 255, 0.18);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      overflow: hidden;
      opacity: .68;
      transition: border-color .2s ease, opacity .2s ease, box-shadow .2s ease;
    }

    .product-lightbox-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .product-lightbox-thumb:hover,
    .product-lightbox-thumb.is-active {
      border-color: #ff9a3d;
      opacity: 1;
      box-shadow: 0 10px 24px rgba(255, 106, 0, 0.22);
    }

    @media (max-width: 760px) {
      .product-lightbox-figure {
        padding: 54px 10px 96px;
      }

      .product-lightbox-figure img {
        max-height: calc(100vh - 160px);
      }

      .product-lightbox-btn {
        width: 42px;
        height: 42px;
        font-size: 26px;
      }

      .product-lightbox-btn--prev {
        left: 8px;
      }

      .product-lightbox-btn--next {
        right: 8px;
      }

      .product-lightbox-close {
        min-width: 0;
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
      }

      .product-lightbox-thumb {
        flex-basis: 66px;
        width: 66px;
        height: 50px;
        border-radius: 9px;
      }
    }

    .product-stage-main {
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .product-feature-pills {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .product-feature-pill,
    .product-stat-card,
    .product-ribbon-item,
    .product-doc-item {
      border: 1px solid var(--product-line);
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #fff9f3 100%);
    }

    .product-feature-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 66px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 850;
      line-height: 1.25;
    }

    .product-pill-icon,
    .product-ribbon-icon,
    .product-doc-icon,
    .product-stat-icon {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(180deg, #fff7ee 0%, #ffe8d0 100%);
      color: var(--product-accent);
      font-size: 22px;
      box-shadow: inset 0 0 0 1px rgba(255, 145, 63, 0.18);
    }

    .product-stage-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 170px;
      gap: 20px;
      align-items: center;
    }

    .product-stage-heading h2 {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      font-size: clamp(34px, 4vw, 58px);
      line-height: 0.98;
      letter-spacing: -0.06em;
    }

    .product-verified-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(180deg, #ff8b33 0%, #ff6200 100%);
      color: #fff;
      font-size: 18px;
      box-shadow: 0 10px 18px rgba(255, 104, 15, 0.2);
    }

    .product-stage-heading p {
      margin: 10px 0 0;
      color: #7f7469;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.45;
    }

    .product-rating {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      margin-top: 14px;
      padding: 0 12px;
      border: 1px solid #e8edf5;
      border-radius: 8px;
      background: #fff;
      color: #111827;
      box-shadow: 0 8px 18px rgba(22, 33, 58, 0.06);
      cursor: help;
      font: inherit;
      outline: 0;
    }

    .product-rating:focus-visible {
      box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.16), 0 8px 18px rgba(22, 33, 58, 0.06);
    }

    .product-rating-stars {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      color: #ff941f;
      font-size: 19px;
      line-height: 1;
      letter-spacing: .02em;
    }

    .product-rating-stars .is-muted {
      color: #cfd6df;
    }

    .product-rating-value {
      font-size: 16px;
      line-height: 1;
      font-weight: 600;
    }

    .product-rating-tooltip {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      z-index: 9999;
      width: max-content;
      min-width: 170px;
      padding: 12px 14px;
      border: 1px solid #edf0f5;
      border-radius: 8px;
      background: #fff;
      color: #111827;
      box-shadow: 0 14px 34px rgba(22, 33, 58, 0.16);
      font-size: 14px;
      line-height: 1.45;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 6px);
      transition: opacity .16s ease, transform .16s ease;
    }

    .product-rating:hover .product-rating-tooltip,
    .product-rating.is-open .product-rating-tooltip,
    .product-rating:focus .product-rating-tooltip,
    .product-rating:focus-visible .product-rating-tooltip {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .product-rating-tooltip::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 14px;
      height: 14px;
      background: #fff;
      box-shadow: 1px 1px 0 #edf0f5;
      transform: translateX(-50%) rotate(45deg);
    }

    .product-rating-tooltip strong {
      display: block;
      margin-bottom: 4px;
      font-weight: 800;
    }

    .product-rating-tooltip span,
    .product-rating-tooltip {
      display: block;
    }

    .product-rating-tooltip span {
      white-space: nowrap;
    }

    .product-stage-logo {
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      border: 1px solid #efd9ca;
      border-radius: 50%;
      background: radial-gradient(circle at top, #fffaf5 0%, #fff3ea 100%);
      color: #753717;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    }

    .product-stage-logo strong {
      display: block;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 28px;
      font-weight: 700;
      line-height: 0.95;
    }

    .product-stage-logo span {
      display: block;
      margin-top: 6px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .product-intro {
      margin: 0;
      max-width: 760px;
      color: #2d2b32;
      font-size: 17px;
      line-height: 1.52;
    }

    .product-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .product-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid #f1dfd0;
      border-radius: 999px;
      background: #fff8f0;
      color: #854623;
      font-size: 14px;
      font-weight: 800;
    }

    .product-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .product-stat-card {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 92px;
      padding: 16px 18px;
      box-shadow: 0 12px 24px rgba(92, 50, 18, 0.05);
    }

    .product-stat-icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      font-size: 26px;
    }

    .product-stat-card strong {
      display: block;
      margin-bottom: 3px;
      font-size: 20px;
      line-height: 1.05;
    }

    .product-stat-card span {
      color: #5f5347;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
    }

    .product-stage-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 14px;
    }

    .product-cta,
    .product-favorite {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-height: 62px;
      padding: 0 22px;
      border-radius: 18px;
      font-size: 18px;
      font-weight: 900;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .product-cta {
      color: #fff;
      background: linear-gradient(90deg, #ff6900 0%, #ff9620 100%);
      box-shadow: 0 16px 28px rgba(255, 113, 16, 0.26);
    }

    .product-favorite {
      border: 1px solid #f0d9c6;
      background: #fff;
      color: var(--product-ink);
    }

    .product-cta:hover,
    .product-favorite:hover {
      transform: translateY(-1px);
    }

    /* Условия содержания */
    .product-docs {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 12px;
    }

    .product-doc-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 24px 12px;
      border-radius: 20px;
      background: #fff;
      border: 1px solid #f0e6dc;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .product-doc-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      border-color: #e0d5c8;
    }

    .product-doc-item strong {
      color: var(--product-accent-strong);
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 800;
      display: block;
      margin-bottom: 6px;
    }

    .product-doc-item span {
      color: var(--product-muted);
      font-weight: 600;
      line-height: 1.4;
      word-break: break-word;
      display: block;
      font-size: 13px;
    }

    .product-overview {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr) minmax(0, 1.1fr);
      gap: 14px;
      padding: 0;
      border-radius: 24px;
      overflow: hidden;
    }

    .product-panel {
      min-width: 0;
      padding: 20px 18px;
      background: linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
    }

    .product-panel + .product-panel {
      border-left: 1px solid var(--product-line);
    }

    .product-panel h3 {
      margin: 0 0 16px;
      font-size: 18px;
      line-height: 1.2;
    }

    .product-brand-lockup {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
      color: #6e3116;
    }

    .product-brand-lockup strong {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(34px, 3vw, 50px);
      line-height: 0.9;
      font-weight: 700;
    }

    .product-brand-lockup span {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .product-panel p {
      margin: 0;
      color: #3d3940;
      font-size: 16px;
      line-height: 1.55;
    }

    .product-faq[data-faq-hidden] {
      display: none;
    }

    .product-faq-actions {
      margin-top: 18px;
    }

    .product-faq-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      padding: 0 20px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      border: 0;
      background: var(--product-accent-soft);
      color: var(--product-accent-strong);
      transition: transform .2s ease;
    }

    .product-faq-btn:hover {
      transform: translateY(-1px);
    }

    .product-faq-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }

    .product-modal-faq-list {
      display: grid;
      gap: 12px;
    }

    /* FAQ accordion */
    .product-faq-list {
      display: grid;
      gap: 12px;
    }

    .product-faq {
      border: 1px solid #f1dfd0;
      border-radius: 16px;
      background: #fffaf6;
      overflow: hidden;
    }

    .product-faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px;
      font-size: 15px;
      font-weight: 800;
      color: var(--product-ink);
      line-height: 1.3;
    }

    .product-faq summary::-webkit-details-marker {
      display: none;
    }

    .product-faq summary::after {
      content: "+";
      flex: 0 0 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--product-accent-soft);
      color: var(--product-accent-strong);
      font-weight: 900;
      font-size: 18px;
      transition: transform .2s ease;
    }

    .product-faq[open] summary::after {
      transform: rotate(45deg);
    }

    .product-faq-body {
      padding: 0 18px 16px;
      color: #3d3940;
      font-size: 14px;
      line-height: 1.55;
    }

    /* Объявления питомника — в рамке, как «Услуги питомника» */
    .product-ads-section {
      border: 1px solid var(--product-line);
      border-radius: var(--product-radius-xl);
      background: rgba(255, 255, 255, 0.96);
      padding: 26px;
      position: relative;
      overflow: hidden;
    }

    .product-ads-section .section-head {
      margin-bottom: 18px;
    }

    .product-ad-cards {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      overflow-y: visible;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      padding: 0 1px 4px;
    }

    .product-ad-cards::-webkit-scrollbar {
      display: none;
    }

    .product-ad-card {
      flex: 0 0 calc((100% - 60px) / 4);
      scroll-snap-align: start;
      position: relative;
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid #eee6de;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 7px 18px rgba(68, 42, 25, 0.08);
      text-decoration: none;
      color: inherit;
      transition: transform 0.25s, box-shadow 0.25s;
      min-width: 0;
    }

    .product-ad-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 26px rgba(62, 38, 22, 0.13);
    }

    .product-ad-card-photo {
      width: 100%;
      height: auto;
      aspect-ratio: 198 / 94;
      object-fit: cover;
      display: block;
    }

    .product-ad-card-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      border-radius: 7px;
      padding: 6px 11px;
      font-weight: 900;
      color: #fff;
      font-size: 11px;
      background: var(--product-accent-strong);
      z-index: 2;
    }

    .product-ad-card-tag.green {
      background: #73bd32;
    }

    .product-ad-card-tag.blue {
      background: #4aa3df;
    }

    .product-ad-card-fav {
      position: absolute;
      right: 12px;
      top: 10px;
      color: #fff;
      font-size: 25px;
      text-shadow: 0 1px 5px rgba(102, 85, 68, 1);
      z-index: 2;
    }

    .product-ad-card-body {
      padding: 12px 14px 14px;
    }

    .product-ad-card-title {
      font-weight: 900;
      line-height: 1.24;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
      font-size: 15px;
      color: var(--product-ink);
    }

    .product-ad-card-price {
      color: #ff6400;
      font-weight: 900;
      white-space: nowrap;
    }

    .product-ad-card-meta {
      font-size: 12px;
      color: #8b817b;
      margin: 6px 0;
      line-height: 1.35;
    }

    .product-ad-card-badges {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .product-ad-card-badge {
      font-size: 11px;
      background: #f4f8ed;
      color: #566f35;
      border-radius: 6px;
      padding: 5px 8px;
      font-weight: 700;
    }

    /* Стрелки карусели */
    .product-carousel-btn {
      position: absolute;
      top: 45%;
      width: 42px;
      height: 42px;
      border: 1px solid #f0e2d8;
      border-radius: 50%;
      background: #fff;
      color: #9b6b4c;
      box-shadow: 0 12px 28px rgba(73, 42, 22, 0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0 3px;
      font-size: 32px;
      line-height: 1;
      font-weight: 700;
      cursor: pointer;
      transform: translateY(-50%);
      transition: 0.2s;
      z-index: 5;
    }

    .product-carousel-btn.prev {
      left: 10px;
    }

    .product-carousel-btn.next {
      right: 10px;
    }

    .product-carousel-btn:hover,
    .product-carousel-btn:focus-visible {
      color: #ff6400;
      border-color: #ffc49a;
      background: #fff4ea;
      box-shadow: 0 16px 32px rgba(255, 106, 0, 0.18);
      outline: 0;
    }

    .product-carousel-btn:disabled {
      opacity: 0.38;
      cursor: default;
      pointer-events: none;
    }

    /* ===== Двухколоночный layout ===== */
    .product-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 22px;
      align-items: start;
    }

    .product-layout-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 22px;
      min-width: 0;
    }

    .product-layout-sidebar {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-self: start;
    }

    /* ===== Описание питомника ===== */
    .product-description {
      border: 1px solid var(--product-line);
      border-radius: var(--product-radius-xl);
      background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
      padding: 32px 36px;
      position: relative;
      overflow: hidden;
      /* Типографика на секции: контент из БД — голый текст с <br>
         (без <p>), поэтому шрифт как в макете задаём здесь,
         а не только на .product-description p */
      color: #3d3940;
      font-size: 17px;
      line-height: 1.6;
    }

    .product-description::after {
      content: "";
      position: absolute;
      top: -120px;
      right: -120px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 156, 74, 0.16), transparent 65%);
      pointer-events: none;
    }

    .product-description h3 {
      margin: 0 0 18px;
      position: relative;
      z-index: 1;
      font-size: clamp(24px, 1.9vw, 32px);
      display: flex;
      align-items: center;
      gap: 14px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .product-section-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: linear-gradient(180deg, #fff5e8 0%, #ffd8b1 100%);
      color: var(--product-accent-strong);
      font-size: 22px;
      box-shadow: inset 0 0 0 1px rgba(255, 145, 63, 0.22);
      flex-shrink: 0;
    }

    .product-description p {
      margin: 0;
      position: relative;
      z-index: 1;
      color: #3d3940;
      font-size: 17px;
      line-height: 1.6;
    }

    .product-description p + p {
      margin-top: 14px;
    }

    .product-description-highlights {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
      position: relative;
      z-index: 1;
    }

    .product-description-highlights li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid #f2dccb;
      border-radius: 16px;
      background: #fff9f3;
      color: #2c2620;
      font-weight: 700;
      font-size: 15px;
      line-height: 1.3;
    }

    .product-description-highlights li::before {
      content: "✓";
      flex: 0 0 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(180deg, #ff8b33 0%, #ff6200 100%);
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 6px 12px rgba(255, 104, 15, 0.22);
    }

    /* ===== Карточки в сайдбаре ===== */
    .product-sidebar-card {
      border: 1px solid var(--product-line);
      border-radius: var(--product-radius-xl);
      background: rgba(255, 255, 255, 0.96);
      padding: 26px;
      position: relative;
      overflow: hidden;
    }

    .product-sidebar-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
    }

    .product-sidebar-card h3 {
      margin: 0 0 18px;
      font-size: 20px;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 12px;
      line-height: 1.15;
    }

    .product-sidebar-card h3 .product-section-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      font-size: 20px;
    }

    .product-sidebar-list {
      display: grid;
      gap: 12px;
    }

    .product-sidebar-item {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 6px 12px;
      align-items: baseline;
      font-size: 16px;
      padding-bottom: 12px;
      border-bottom: 1px dashed #f1dfd0;
    }

    .product-sidebar-item:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

	.product-sidebar-item strong {
		color: #231f20;
		font-size: 15px;
		letter-spacing: 0.06em;
		font-weight: 600;
	}

    .product-sidebar-item span,
    .product-sidebar-item a {
      color: var(--product-ink);
      font-weight: 500;
      line-height: 1.35;
      word-break: break-word;
      text-decoration: none;
    }

    .product-sidebar-item a {
      color: var(--product-accent-strong);
    }

    /* Телефоны: каждый на своей строке */
    .product-sidebar-item--phones span.product-phones {
      display: grid;
      gap: 5px;
    }

    .product-sidebar-item--phones .phone-line {
      display: block;
      white-space: nowrap;
    }

    .product-sidebar-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
      width: 100%;
      min-height: 54px;
      border-radius: 16px;
      background: linear-gradient(90deg, #ff6900 0%, #ff9620 100%);
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      text-decoration: none;
      transition: transform .2s ease;
    }

    .product-sidebar-cta:hover {
      transform: translateY(-1px);
    }

    .product-sidebar-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #fff4e8;
      color: #75421f;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.45;
    }

    .product-sidebar-note svg {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-top: 2px;
      color: #ff6400;
    }

    /* Цены в сайдбаре: порода + плашка в строке, стоимость под породой */
    .product-sidebar-price {
      width: 100%;
    }

    .product-price-row {
      padding: 11px 2px;
      border-bottom: 1px dashed #f1dfd0;
    }

    .product-price-row:last-child {
      border-bottom: 0;
      padding-bottom: 2px;
    }

    .product-price-row:first-child {
      padding-top: 2px;
    }

    .product-price-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .product-price-top strong {
      font-weight: 600;
      font-size: 15px;
      color: #231f20;
      min-width: 0;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    .product-price-top a {
      text-decoration: none;
    }

    .product-price-top a:hover strong {
      color: var(--product-accent-strong);
    }

    .product-sidebar-price .price-amt {
      margin-top: 5px;
      font-weight: 900;
      color: var(--product-accent-strong);
      font-size: 15px;
      line-height: 1.3;
    }

    .product-sidebar-price .price-amt em {
      color: #b3a497;
      font-size: 15px;
      font-weight: 600;
    }

    /* Цветные плашки статусов: «В наличии» / «Ожидается» */
    .product-price-badge {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .02em;
      line-height: 1.2;
      white-space: nowrap;
      min-height: 22px;
	  font-size: 15px;
    }

    .product-price-badge::before {
      content: "";
      flex: 0 0 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }

    .product-price-badge--ok {
      background: #e6f6ec;
      color: #1e7d3c;
      border: 1px solid #c3e7d0;
    }

    .product-price-badge--wait {
      background: #fff2dd;
      color: #b26a00;
      border: 1px solid #f2dcae;
    }

    .product-price-badge--order {
      background: #e9ecef;
      color: #454b52;
      border: 1px solid #d4d9de;
    }

    /* Услуги в сайдбаре */
    .product-sidebar-services {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .product-sidebar-services li {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 4px 12px;
      padding: 12px 0;
      border-bottom: 1px dashed #f1dfd0;
    }

    .product-sidebar-services li:last-child {
      border-bottom: 0;
    }

    .product-sidebar-services li strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--product-ink);
    }

    .product-sidebar-services li b {
      font-weight: 900;
      color: var(--product-accent-strong);
      font-size: 14px;
      white-space: nowrap;
    }

    .product-sidebar-services li small {
      grid-column: 1 / -1;
      color: #6f645a;
      font-size: 12px;
      line-height: 1.4;
    }

    /* ===== Сетка info-карточек (2x2) ===== */
    .product-info-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
    }

    .product-info-card {
      border: 1px solid var(--product-line);
      border-radius: var(--product-radius-xl);
      background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
      padding: 28px 30px;
      position: relative;
      overflow: hidden;
    }

    .product-info-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
    }

    .product-info-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .product-info-card-head h3 {
      margin: 0;
      font-size: 22px;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 12px;
      line-height: 1.15;
    }

    .product-info-card-head h3 .product-section-icon {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      font-size: 22px;
    }

    .product-info-link {
      margin-top: 18px;
      display: flex;
      justify-content: flex-end;
    }

    /* «Написать отзыв» — по аналогии с «Отправить» (btn primary в форме):
       та же высота, радиус и отступы, плюс иконка */
    .product-info-link a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 20px;
      border-radius: 14px;
      background: var(--product-accent-soft);
      color: var(--product-accent-strong);
      font-size: 14px;
      font-weight: 800;
      text-decoration: none;
      transition: transform .2s ease;
    }

    .product-info-link a:hover {
      transform: translateY(-1px);
    }

    .product-info-link a svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }

    @media (max-width: 640px) {
      .product-info-link a {
        width: 100%;
      }
    }

    /* Отзывы */
    .product-review-list {
      display: grid;
      gap: 14px;
    }

    .product-review {
      padding: 18px;
      border: 1px solid #f1dfd0;
      border-radius: 18px;
      background: #fffaf6;
    }

    .product-review-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .product-review-name {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      font-size: 15px;
    }

    .product-review-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(180deg, #ff8b33 0%, #ff6200 100%);
      color: #fff;
      font-weight: 900;
      font-size: 14px;
      flex-shrink: 0;
    }

    .product-review-stars {
      color: #ff941f;
      font-size: 15px;
      letter-spacing: 1px;
    }

    .product-review p {
      margin: 0;
      color: #3d3940;
      font-size: 14px;
      line-height: 1.5;
    }

    /* Условия в info-карточке */
    .product-info-card .product-conditions-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 0;
    }

    .product-info-card .product-conditions-grid span {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #fff8f0;
      border: 1px solid #f1dfd0;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.3;
      color: #2c2620;
    }

    /* Объявления в info-карточке */
    .product-ad-list {
      display: grid;
      gap: 12px;
    }

    .product-ad {
      display: grid;
      grid-template-columns: 70px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid #f1dfd0;
      border-radius: 18px;
      background: #fffaf6;
      text-decoration: none;
      color: inherit;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .product-ad:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 20px rgba(93, 53, 18, 0.08);
    }

    .product-ad-photo {
      width: 70px;
      height: 70px;
      border-radius: 14px;
      background: linear-gradient(180deg, #fff5e8 0%, #ffd8b1 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      flex-shrink: 0;
      overflow: hidden;
      border: 1px solid #f6cda5;
    }

    .product-ad-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-ad-info {
      min-width: 0;
    }

    .product-ad-info strong {
      display: block;
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 4px;
      line-height: 1.25;
      color: var(--product-ink);
    }

    .product-ad-info span {
      font-size: 12px;
      color: #6f645a;
      line-height: 1.35;
    }

    .product-ad-price {
      font-size: 18px;
      font-weight: 900;
      color: var(--product-accent-strong);
      white-space: nowrap;
    }

    .product-conditions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .product-conditions-grid span {
      padding: 14px;
      border-radius: 16px;
      background: #fff8f1;
      border: 1px solid var(--product-line);
      font-weight: 700;
    }

    .product-views-count {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 14px;
      border: 1px solid #e8edf5;
      border-radius: 8px;
      background: #fff;
      color: #6f645a;
      box-shadow: 0 8px 18px rgba(22, 33, 58, 0.06);
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .product-views-count svg {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      color: #9ca3af;
    }

    /* объявление: отступ блока просмотров от заголовка — как чип рейтинга
       в шапке питомника (.product-rating { margin-top: 14px }) */
    .product-title-bar--dec .product-title-meta {
      margin-top: 14px;
    }

    /* Сердечко «В избранное» в шапке питомника — чип как просмотры,
       состояние переключает favorites.js (класс is-active на [data-fav]) */
    .product-fav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid #e8edf5;
      border-radius: 8px;
      background: #fff;
      color: #9ca3af;
      box-shadow: 0 8px 18px rgba(22, 33, 58, 0.06);
      cursor: pointer;
      user-select: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
    }

    .product-fav-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .product-fav-btn:hover,
    .product-fav-btn:focus-visible {
      color: #ff6400;
      border-color: #ffc49a;
      background: #fff4ea;
      transform: scale(1.06);
      outline: 0;
    }

    .product-fav-btn.is-active {
      color: #ff6400;
      border-color: #ffc49a;
      background: #fff4ea;
    }

    /* Плашки «Опыт» / «Система»: иконки opit32/zareg32 вместо галочки ✓ */
    .product-description-highlights li.hl-ico::before {
      content: none;
    }

    .product-description-highlights li.hl-ico img {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #fff;
    }

    .product-fav-btn.is-active svg {
      fill: currentColor;
      stroke-width: 0;
    }

    /* Сворачивание описания по символам (>800): усечение делает
       assets/js/description.js; плашки опыта/системы — вне сворачиваемого блока */
    /* Визуальный порядок принудительный (flex+order): текст → «Смотреть все»
       → плашки. Работает даже если HTML на сервере в старом порядке */
    .product-description {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .product-description > .product-desc-text {
      order: 1;
    }

    .product-description > .product-desc-toggle {
      order: 2;
      align-self: flex-start;
      margin: 18px 0 0;
    }

    .product-description > .product-description-highlights {
      order: 3;
      margin-top: 24px;
    }

    .product-desc-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin: 0 0 0 10px;
      padding: 0 12px;
      min-height: 30px;
      border: 1px solid #ffd9b8;
      border-radius: 999px;
      background: #fff4ea;
      color: var(--product-accent-strong, #ff5b00);
      font-size: 13px;
      font-weight: 800;
      vertical-align: middle;
      white-space: nowrap;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }

    /* атрибут hidden обязан побеждать display:inline-flex выше,
       иначе кнопка видна даже на коротких описаниях */
    .product-desc-toggle[hidden] {
      display: none;
    }

    .product-desc-toggle::after {
      content: "";
      width: 8px;
      height: 8px;
      margin-left: 2px;
      border-right: 2.5px solid currentColor;
      border-bottom: 2.5px solid currentColor;
      border-radius: 1.5px;
      transform: rotate(45deg);
      transition: transform .25s ease;
    }

    .product-desc-toggle.is-open::after {
      transform: rotate(-135deg);
    }

    .product-desc-toggle:hover,
    .product-desc-toggle:focus-visible {
      background: #ffe9d4;
      border-color: #ffb570;
      outline: 0;
    }

    /* ===== Старая таблица цен (если используется) ===== */
    /* ===== Адаптив ===== */
    @media (max-width: 1100px) {
      .product-layout {
        grid-template-columns: 1fr;
      }
      .product-layout-sidebar {
        position: static;
      }
      .product-info-grid {
        grid-template-columns: 1fr;
      }
      .product-carousel-btn {
        display: none;
      }
      .product-ad-card {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: none;
      }
      .product-ad-cards {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
      }
    }

    @media (max-width: 768px) {
      .product-title-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }
    .product-title-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
	  margin-top: 12px;
    }

    /* margin-top из макетного «блока под заголовком» ломает выравнивание
       в строке с просмотрами (проседает на 14px) — на мобиле особенно заметно */
    .product-title-meta .product-rating {
      margin-top: 0;
    }
      .product-rating-tooltip {
        left: 0;
        transform: translate(0, 6px);
      }
      .product-rating:hover .product-rating-tooltip,
      .product-rating.is-open .product-rating-tooltip,
      .product-rating:focus .product-rating-tooltip,
      .product-rating:focus-visible .product-rating-tooltip {
        transform: translate(0, 0);
      }
      .product-rating-tooltip::after {
        left: 20px;
      }
      .product-carousel-btn {
        display: none;
      }
    }

    @media (max-width: 480px) {
      /* рейтинг, просмотры и сердечко — одна линия без переносов
         (компактные размеры, чтобы влезали даже на 320px) */
      .product-title-meta {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
      }
      .product-title-meta .product-rating {
        min-height: 38px;
        padding: 0 8px;
        gap: 6px;
      }
      .product-rating-stars {
        font-size: 16px;
      }
      .product-rating-value {
        font-size: 14px;
      }
      .product-views-count {
        min-height: 38px;
        padding: 0 8px;
        gap: 5px;
        font-size: 12px;
      }
      .product-views-count svg {
        width: 15px;
        height: 15px;
      }
      .product-fav-btn {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
      }
      .product-fav-btn svg {
        width: 19px;
        height: 19px;
      }
      .product-rating-tooltip {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        transform: translate(0, 6px);
      }
      .product-rating:hover .product-rating-tooltip,
      .product-rating.is-open .product-rating-tooltip,
      .product-rating:focus .product-rating-tooltip,
      .product-rating:focus-visible .product-rating-tooltip {
        transform: translate(0, 0);
      }
      .product-rating-tooltip::after {
        left: 20px;
      }
      .product-docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .product-doc-item {
        padding: 12px;
      }

      .product-doc-item strong {
        font-size: 10px;
      }

      .product-doc-item span {
        font-size: 12px;
      }

      .product-ad-cards {
        gap: 10px;
      }

      .product-ad-card {
        flex: 0 0 calc((100% - 10px) / 2);
      }

      .product-ad-card-body {
        padding: 8px;
      }

      .product-ad-card-title {
        font-size: 12px;
      }

      .product-ad-card-price {
        font-size: 12px;
      }

      .product-ad-card-photo {
        height: auto;
      }
    }

    @media (max-width: 360px) {
      .product-description {
        padding: 16px;
      }
      .product-sidebar-card {
        padding: 16px;
      }
      .product-info-card {
        padding: 16px;
      }
      .product-stage {
        padding: 12px;
      }
      .product-docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .product-doc-item {
        padding: 12px;
      }
      .product-doc-item strong {
        font-size: 9px;
      }
      .product-doc-item span {
        font-size: 11px;
      }
      .product-ad-cards {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
      }
      .product-ad-card {
        flex: 0 0 calc((100% - 10px) / 2);
      }
      .product-ad-card-photo {
        height: auto;
      }
    }

/* ==========================================================================
   Stage 3c additions (страницы питомника и объявления)
   Новые элементы, отсутствовавшие в макете product.html: форма отзыва,
   цена объявления, ответы питомника, мелкие подписи.
   ========================================================================== */

/* --- мета заголовка --- */
.product-rating-legacy {
  display: inline-flex;
  align-items: center;
}

.product-rating-legacy .rating,
.product-rating-legacy span {
  font-size: 15px;
}

.admin-links {
  display: inline-flex;
  gap: 10px;
  font-size: 13px;
}

.admin-links a {
  color: #c0392b;
}

.muted {
  color: #9b8d85;
}

.catalog-tag-static {
  color: #777;
  font-weight: 600;
  white-space: nowrap;
}

/* --- цена объявления --- */
.product-price-big {
  font-size: 30px;
  font-weight: 800;
  color: #231f20;
  margin-bottom: 10px;
}

/* цена строкой «Цена … 100 000 ₽» — как строка «Пол … Мальчик»,
   размер шрифта цены прежний (30px) */
.product-sidebar-item--price {
  align-items: center;
}

.product-sidebar-item--price .product-price-big {
  margin-bottom: 0;
  line-height: 1.1;
  font-weight: 400;
}

/* «Пол» и следующие строки не должны липнуть к пунктиру под крупной ценой */
.product-sidebar-item--price + .product-sidebar-item {
  padding-top: 12px;
}

/* --- ответ питомника на отзыв --- */
.product-review-answer {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 4px solid #ff941f;
  border-radius: 0 14px 14px 0;
  background: #fff4ea;
  color: #5e514a;
  line-height: 1.6;
  font-size: 14px;
}

.product-review-answer b {
  display: block;
  margin-bottom: 4px;
  color: var(--product-accent-strong, #ff5b00);
}

/* --- форма отзыва --- */
.leave-comment-box {
  margin: 26px 0;
  padding: 24px;
  border: 1px solid #f1e2d3;
  border-radius: 24px;
  background: #fff;
}

.leave-comment-box h2 {
  margin: 0 0 4px;
  font-size: 24px;
}

.leave-comment-box > .muted {
  margin: 0 0 14px;
}

.review-form-stars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  color: #231f20;
}

.review-form-stars .review-star input {
  position: absolute;
  opacity: 0;
}

.review-form-stars .review-star span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #eee6de;
  border-radius: 999px;
  color: #ffab19;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.review-form-stars .review-star:hover span,
.review-form-stars .review-star input:checked + span {
  border-color: #ffc49a;
  background: #fff4ea;
}

/* Базовые правила .review-form (инпуты, сетка, кнопка,success/error)
   перенесены в catalog.css — форма используется и на /contact/. */

@media (max-width: 640px) {
  .review-form-cols {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v14: адрес, условия содержания, отзывы, форма отзыва,
   популярное, карта — доводка блоков страницы питомника
   ============================================================ */

/* --- Метро в сайдбаре: стиль как в карточках каталога --- */
.product-sidebar-item--metro span.product-metro-list {
  display: grid;
  gap: 6px;
}

/* Копии правил каталога (.kennel-cards .kennel-card …), там они заскоплены
   под карточки списка — на странице питомника нужен свой скоуп */
.product-sidebar-item--metro .kennel-metro {
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #231f20;
  font-weight: 700;
}

.product-sidebar-item--metro .kennel-metro-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9b8d85;
}

.product-sidebar-item--metro .metro-m {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #cbdce9;
  color: #231f20;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 8px;
}

/* --- Условия содержания: карточки-плитки без заголовка --- */
.product-docs {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.product-doc-item {
  min-height: 118px;
  justify-content: center;
  padding: 20px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
}

/* --- Отзывы --- */
.product-reviews-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 12px;
  border: 1px solid #ffd9b8;
  border-radius: 999px;
  background: #fff4ea;
  color: var(--product-accent-strong, #ff5b00);
  font-size: 13px;
  font-weight: 900;
}

.product-review {
  box-shadow: 0 10px 24px rgba(116, 67, 23, 0.05);
}

.product-review-stars {
  font-size: 16px;
}

/* --- Форма отзыва --- */
.product-page .leave-comment-box {
  margin: 15px 0;
  padding: 30px 32px;
  border: 1px solid var(--product-line, #f1dac8);
  border-radius: var(--product-radius-xl, 30px);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
  box-shadow: 0 18px 40px rgba(116, 67, 23, 0.06);
}

.product-page .leave-comment-box h2 {
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: -0.02em;
}

.product-page .leave-comment-box > .muted {
  color: var(--product-muted, #6f645a);
  font-size: 17px;
}

.review-form-stars {
  margin: 4px 0 16px;
}

.review-form-stars > span {
  color: #8c7a68;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.review-form-stars .review-star span {
  padding: 8px 14px;
  font-size: 16px;
  letter-spacing: 2px;
}

.review-form-stars .review-star:hover span,
.review-form-stars .review-star input:checked + span {
  border-color: #ffb570;
  background: #fff4ea;
  color: var(--product-accent-strong, #ff5b00);
  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.12);
}

.product-page .review-form textarea,
.product-page .review-form input[type="text"],
.product-page .review-form input[type="email"] {
  padding: 14px 16px;
  border: 1px solid #eee0d2;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-page .review-form textarea:focus,
.product-page .review-form input[type="text"]:focus,
.product-page .review-form input[type="email"]:focus {
  border-color: #ffb570;
  box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.12);
  outline: 0;
}

.product-page .review-form .review-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.product-page .review-form .btn.primary {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background: var(--product-accent-soft);
  color: var(--product-accent-strong);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.product-page .review-form .btn.primary:hover {
  transform: translateY(-1px);
}

.product-page .review-form .btn.primary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.product-page .btn.primary {
    background: linear-gradient(135deg, #ff8b15, #ff6400);
    color: #fff;
    box-shadow: none;
}

@media (max-width: 640px) {
  .product-page .review-form .review-form-actions .btn.primary {
    width: 100%;
  }
}

/* --- Популярное (бывший «Путеводитель»): чипы как на главной --- */
.product-page .product-popular {
  margin: 26px 0 8px;
}

.product-page .product-popular .popular {
  gap: 10px;
}

.product-page .product-popular .popular-label {
  font-size: 15px;
  font-weight: 900;
}

.product-page .product-popular .popular > a {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid #eee4dc;
  border-radius: 999px;
  background: #fff;
  color: #635a55;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}

.product-page .product-popular .popular > a:hover,
.product-page .product-popular .popular > a:focus-visible {
  color: #ff6400;
  border-color: #ffc49a;
  background: #fff4ea;
  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.12);
  outline: 0;
}

/* --- Карта --- */
.product-map-card {
  overflow: hidden;
  border: 1px solid var(--product-line, #f1dac8);
  border-radius: var(--product-radius-xl, 30px);
  background: #fff;
  box-shadow: 0 18px 40px rgba(116, 67, 23, 0.06);
}

.product-map-card #map2,
.product-map-card iframe {
  display: block;
  height: 400px;
}

.product-map-card iframe {
  width: 100%;
  border: 0;
}

.product-map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid #f5e8db;
  background: #fff;
}

.product-map-meta p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--product-ink, #16213a);
  font-size: 15px;
  font-weight: 700;
}

.product-map-meta p svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: #ff6900;
}

.product-map-meta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--product-accent-soft);
  color: var(--product-accent-strong);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease;
}

.product-map-meta a:hover {
  transform: translateY(-1px);
}

.product-map-meta a svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  /* Галерея на мобиле: фото на всю ширину основной структуры,
     превью — под фото горизонтальной лентой.
     626–760px: у main боковой паддинг 0 — компенсация не нужна */
  .product-stage {
    margin: 0;
    width: 100%;
    padding: 0 0 12px;
    border-radius: 0;
    background: transparent;
  }


  .product-stage-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .product-hero-shot {
    min-height: 0;
    height: clamp(220px, 64vw, 420px);
    border-radius: 16px;
  }

  .product-thumbs {
    display: flex;
    gap: 10px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 16px 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .product-thumb {
    flex: 0 0 92px;
    height: 92px;
    scroll-snap-align: start;
  }

  /* Стрелки галереи на мобиле: компактнее, с отступом от краёв фото.
     font-size не поднимаем: базовый font-size:0 скрывает текстовый «‹»,
     иначе он дублируется вместе с CSS-шевроном ::before */
  .product-gallery-btn {
    width: 42px;
    height: 42px;
  }

  .product-gallery-btn--prev {
    left: 14px;
  }

  .product-gallery-btn--next {
    right: 14px;
  }

  /* Плашка «Премиум питомник»: компактная, только корона */
  .product-premium-flag {
    top: 10px;
    left: 10px;
    width: auto;
    gap: 0;
    padding: 7px 10px 12px;
  }

  .product-premium-flag span {
    display: none;
  }

  .product-premium-flag strong {
    font-size: 18px;
  }

  /* Кнопка полноэкранного просмотра: меньше, иконка та же (два уголка) */
  .product-gallery-open {
    width: 42px;
    height: 42px;
  }

  .product-gallery-open::before,
  .product-gallery-open::after {
    width: 8px;
    height: 8px;
  }

  .product-gallery-open::before {
    top: 13px;
    left: 13px;
  }

  .product-gallery-open::after {
    right: 13px;
    bottom: 13px;
  }

  .product-map-card #map2,
  .product-map-card iframe {
    height: 280px;
  }


  /* Плашки «Опыт»/«Система» — друг под другом на всю ширину */
  .product-description-highlights {
    grid-template-columns: 1fr;
  }
}




/* ============================================================
   ≤1100px: сетка одноколоночная. Контакты и Цены — сразу после
   «Описания», до «Условий содержания». Контейнеры сетки делаем
   display:contents и расставляем порядок через order.
   ============================================================ */
@media (max-width: 1100px) {
  .product-page .product-shell,
  .product-page .product-layout,
  .product-page .product-layout-main,
  .product-page .product-layout-sidebar {
    display: contents;
  }

  .product-page .breadcrumbs { order: 1; }
  .product-page .product-title-bar { order: 2; }
  .product-page .catalog-tags { order: 3; }
  .product-page .product-stage { order: 4; }
  .product-page .product-description { order: 5; }
  .product-page #price { order: 5; }
  .product-page #contacts { order: 6; }
  .product-page #prices { order: 7; }
  .product-page .product-sidebar-card[aria-label="Услуги питомника"] { order: 9; }
  .product-page .product-docs { order: 8; margin-bottom: 18px; }
  .product-page .product-ads-section { order: 10; }
.product-page .product-info-grid { order: 11; }
.product-page .product-info-card#faq { order: 12; }
.product-page .leave-comment-box { order: 12; }
  .product-page .product-map-card { order: 13; }
  .product-page .product-popular { order: 14; }
  .product-page .section[aria-label="Категории питомника"] { order: 15; }
  .product-page .section[aria-label="Похожие объявления"] { order: 16; }
  .product-page .section[aria-label="Полезное"] { order: 17; }
  .product-page div[id^="yandex_rtb_"] { order: 18; }
}


/* «Услуги питомника» в левой колонке (после «Условий содержания») */
.product-layout-main .product-services-main {
  margin-top: 18px;
}

.product-layout-main .product-services-main .product-sidebar-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-layout-main .product-sidebar-services li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #f2dccb;
  border-radius: 16px;
  background: #fff9f3;
  min-width: 0;
  overflow-wrap: break-word;
}

.product-layout-main .product-sidebar-services li small {
  color: #8a7a6e;
  font-size: 12px;
  line-height: 1.4;
}




/* «Услуги питомника»: крупный шрифт, описания с переносами */
.product-layout-main .product-sidebar-services li strong {
  font-size: 18px;
}

.product-layout-main .product-sidebar-services li b {
  font-size: 14px;
}

.product-layout-main .product-sidebar-services li small {
  font-size: 17px;
  line-height: 1.6;
  color: #3d3940;
}

/* кнопка «Смотреть» у обрезанных описаний */
.product-sidebar-services .service-more {
  display: inline-block;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--product-accent-strong, #ff5b00);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.product-sidebar-services .service-more:hover {
  color: #ff6400;
}


/* Условия содержания: иконки из /images/uslovya/ */
.product-doc-item .product-doc-ico {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: 8px;
}


/* «Отзывы», «Вопрос-ответ», «Добавить отзыв», «Объявления» —
   ширина левой колонки (как «Услуги питомника») + единая типографика */
.product-info-grid,
.leave-comment-box,
.product-ads-section {
  font-size: 17px;
  line-height: 1.6;
  color: #3d3940;
}

@media (min-width: 1101px) {
  .product-page .leave-comment-box,

  /* 1101px+: единый вертикальный ритм между блоками — 22px
     (совпадает с gap колонки main и margin-bottom сетки) */
  .product-page > .product-ads-section,
  .product-page > .leave-comment-box,
  .product-page > .product-map-card,
  .product-page > .product-popular,
  .product-page > section.section,
  .product-page > div[id^="yandex_rtb_"] {
    margin-top: 0px !important;
  }
  
  /* внутри main-колонки убрать лишние поля, дублирующие grid-gap */
  .product-page .product-docs {
    margin-bottom: 0;
  }

  .product-page .product-layout-main .product-services-main {
    margin-top: 0;
  }

  /* «Контакты»: при прокрутке прижимается к верху окна (только десктоп,
     двухколоночный layout; top такой же, как был у сайдбара) */
  .product-page #sticky {
    position: sticky;
    top: 80px;
	margin-bottom: 15px;
  }
}

/*
@media (max-width: 1101px) {
  .product-page .leave-comment-box {
	margin: 0px 0;
  }
}
*/

.product-review p,
.product-faq-body,
.product-faq summary {
  font-size: 17px;
  line-height: 1.6;
}

.product-review-name {
  font-size: 17px;
}


/* отзыв: кнопка «Смотреть» у обрезанных текстов */
.product-review .service-more {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--product-accent-strong, #ff5b00);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.product-review .service-more:hover {
  color: #ff6400;
}


/* «Условия содержания» — горизонтальный слайдер (как «Последние отзывы»
   на главной: catalog-slider + catalog-track + стрелки) */
.product-docs {
  position: relative;
  display: block;
  margin-bottom: 18px;
}

/* Стрелки слайдера «Условия содержания»: держим целиком внутри блока
   (не выпирать за край и не проваливаться под карточки/соседние слои) */
.product-page .product-docs .carousel-btn {
  z-index: 40 !important;
}

.product-page .product-docs .carousel-btn.prev {
  left: 6px !important;
}

.product-page .product-docs .carousel-btn.next {
  right: 6px !important;
}

.product-docs-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 8px;
}

.product-docs-track::-webkit-scrollbar {
  display: none;
}

.product-docs .product-doc-item {
  flex: 0 0 170px;
  min-height: 168px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 16px 10px;
  border: 1px solid #f0e6db;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(68, 42, 25, .07);
  transition: .25s;
}

.product-docs .product-doc-item:hover {
  transform: translateY(-3px);
  border-color: #ffc49a;
  box-shadow: 0 14px 26px rgba(255, 106, 0, .13);
}

.product-docs .product-doc-ico {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 8px;
}

.product-docs .product-doc-item strong {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--product-accent-strong, #ff5b00);
  margin-bottom: 4px;
}

.product-docs .product-doc-item span {
  font-size: 12px;
  color: #5e514a;
  font-weight: 600;
  line-height: 1.35;
}


/* «Пока отзывов нет» — пустое состояние с иконкой */
.product-reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 18px;
  border: 1px dashed #f2dccb;
  border-radius: 16px;
  background: #fff9f3;
  text-align: center;
}

.product-reviews-empty-ico {
  line-height: 0;
  color: #ffc49a;
}

.product-reviews-empty-ico svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-reviews-empty strong {
  font-size: 18px;
  color: #2c2620;
}

.product-reviews-empty p {
  margin: 0;
  color: #8a7a6e;
  font-size: 17px;
  line-height: 1.5;
}


/* ============================================================
   /* Все ширины: страница — flex-колонка, единый вертикальный ритм 22px.
   (На >1100px двухколоночная часть живёт внутри shell.) */
.product-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-page > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* «продвинутые» из layout-контейнеров блоки (display:contents) —
   не прямые дети main, обнуляем отдельно */
.product-page .product-description,
.product-page #contacts,
.product-page #prices,
.product-page .product-sidebar-card[aria-label="Услуги питомника"],
.product-page .product-docs {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* галерея: позволяем сжиматься (иначе min-content фото распирает) */
.product-page .product-stage,
.product-page .product-stage-gallery,
.product-page .product-gallery-main,
.product-page .product-hero-shot,
.product-page .product-thumbs,
.product-page .product-docs-track {
  min-width: 0;
  max-width: 100%;
}

.product-page .product-gallery-image {
  max-width: 100%;
}


/* ≤1100px: отступы для перенесённых карточек и условий */
@media (max-width: 1100px) {
  .product-layout-main .product-sidebar-card,
  .product-layout-main .product-docs {
    margin-bottom: 18px;
  }
}

/* 761–1100px: единый вертикальный ритм как на мобильных (≤760px) —
   страница flex-колонка с gap 12px, блоки друг под другом.
   Порядок остаётся DOM-порядком (order обнуляем: на этом диапазоне
   мобильная перестановка сайдбара не нужна) */
@media (min-width: 761px) and (max-width: 1100px) {
  .product-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .product-page > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* «продвинутые» из layout-контейнеров блоки (display:contents) —
     не прямые дети main: обнуляем поля и мобильные order, чтобы
     порядок остался DOM-порядком (на 761–1100px перестановка не нужна) */
  .product-page .product-stage,
  .product-page .product-description,
  .product-page #price,
  .product-page #contacts,
  .product-page #prices,
  .product-page .product-sidebar-card[aria-label="Услуги питомника"],
  .product-page .product-docs,
  .product-page .product-info-grid,
  .product-page .product-info-card#faq {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* галерея: позволяем сжиматься (иначе min-content фото распирает) */
  .product-page .product-stage,
  .product-page .product-stage-gallery,
  .product-page .product-gallery-main,
  .product-page .product-hero-shot,
  .product-page .product-thumbs,
  .product-page .product-docs-track {
    min-width: 0;
    max-width: 100%;
  }

  .product-page .product-gallery-image {
    max-width: 100%;
  }
}


/* Отзывы: скрытые (сверх 3 последних) — раскрываются кнопкой «Посмотреть все отзывы» */
.product-review[data-review-hidden] {
  display: none;
}


/* Мобила: звёзды рейтинга — на новой строке под именем */
@media (max-width: 760px) {
  .product-review-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}