.product-view {
     padding: 48px 0 48px 0;
}

.favorite-icon-top,
.favorite-icon-side {
     width: 40px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     background-color: transparent;     /* без серого/розового круга — outline-сердечко как в Figma */
     border: none;
     border-radius: 50%;
     cursor: pointer;
     transition: background-color .15s ease, transform .15s ease;
}

.favorite-icon-top {
     position: absolute;
     top: 12px;
     right: 12px;
     background-color: transparent;
}

.favorite-icon-top:hover,
.favorite-icon-side:hover {
     background-color: rgba(33, 2, 1, .06);  /* лёгкий hover-намёк, без полного круга */
}

.favorite-icon-top img,
.favorite-icon-side img {
     width: 24px;
     height: 24px;
}

.favorite-icon-top.is-active,
.favorite-icon-side.is-active {
     background-color: transparent;
}

img {
     max-width: 100%;
     height: auto;
}

.center-column .product-title_desctop {
     text-align: start !important;
}

.product-top {
     display: flex;
     gap: 16px;
     align-items: center;
     justify-content: space-between;
}

.product-top .gallery-column {
     width: 77px;                  /* точный размер из Figma (77×106) */
     flex-shrink: 0;
     align-self: stretch;          /* галерея растягивается на полную высоту превью */
     display: flex;
     flex-direction: column;
     justify-content: flex-end;    /* миниатюры прижаты к НИЗУ превью */
}

.product-top .preview-column {
     display: flex;
     justify-content: flex-start;
     flex-direction: row;
     align-items: flex-start;       /* миниатюры и превью прижаты к ВЕРХУ, как в дизайне */
     gap: 16px;
     max-width: 400px;              /* 77 (галерея) + 16 (gap) + 290 (превью) + 17 запаса */
     width: 100%;
     flex-shrink: 0;
}

.product-top .center-column {
     flex: 1;
     min-width: 0;
}

.product-top .order-card {
     width: 380px;
     flex-shrink: 0;
}

.gallery-column .thumbs {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 14px;               /* было 10 → 14 (как в Figma чуть больший отступ между миниатюрами) */
     padding: 0;
     margin: 0;
}

.gallery-column .thumbs li {
     width: 77px;             /* точный размер из Figma — 77×106 */
     height: 106px;
     background: #fff;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 8px;            /* меньше padding под уменьшенный размер */
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
     cursor: pointer;
     transition: transform .12s ease, box-shadow .12s ease;
     overflow: hidden;
}

.gallery-column .thumbs li img {
     width: 100% !important;              /* явная ширина+высота = размер контейнера */
     height: 100% !important;
     max-width: none !important;         /* отменяем глобальное img { max-width: 100% } чтобы не конфликтовало */
     max-height: none !important;
     object-fit: contain !important;     /* пропорции бутылки сохраняются, видна целиком */
     object-position: center !important; /* строго по центру миниатюры */
     display: block !important;
}

.gallery-column .thumbs li:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.preview-column .main-image-wrap {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     padding: 24px 16px;            /* меньше падинга — даём бутылке занять больше места */
     border-radius: 8px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
     aspect-ratio: 290 / 540;       /* высокий формат как в Figma (290×540) — было 3/4 */
     max-width: 290px;
     min-width: 240px;              /* чтобы превью не схлопывалось при узком экране */
     width: 100%;
     height: auto;
}

.main-image {
     max-width: 100%;
     max-height: 100%;
     width: auto;
     height: auto;
     object-fit: contain;
     display: block;
}

.badge-sale {
     position: absolute;
     left: 10px;
     top: 10px;
     background: #780d00;
     color: #fff;
     padding: 4px 8px;
     border-radius: 4px;
     font-weight: 700;
     font-size: 14px;
}

/* На ДЕСКТОПЕ сердце-overlay на превью скрыто — в Figma desktop его нет.
   Кнопка избранного только в правой order-card (.favorite-icon-side).
   Без !important первое групповое правило .favorite-icon-top, .favorite-icon-side
   перебивало это по равной специфичности — поэтому ставим !important.
   На МОБИЛЬНОЙ оно заново включается через @media ниже (Figma скрин 1). */
.favorite-icon-top {
     display: none !important;
}

/* На мобильной возвращаем сердце-overlay в правом верхнем углу превью */
@media (max-width: 768px) {
     .favorite-icon-top {
          display: inline-flex !important;
     }
}

/* Center column (title + specs) */
.center-column {
     display: flex;
     align-items: flex-start;
}

.center-column .center-info {
     padding-top: 0;
     width: 100%;
}

.center-column .product-title {
     margin: 0 0 16px 0;
     font-size: 25px;             /* было 25px → ближе к Figma (~22px) */
     font-weight: 600;            /* было 700 → semibold, без излишней жирноты */
     font-family: 'Dihjauti', serif;
     line-height: 1.2;
     color: #2d030b;
}

/* Ensure the preview and title/price align visually */
.order-card {
     align-self: start;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
}

.product-title {
     font-family: "Dihjauti", serif;
     font-size: 24px;
     line-height: 1.2;
     font-weight: 600;
     color: #2d030b;
     margin-bottom: 8px;
}

.meta-row {
     margin-bottom: 24px;
     display: flex;
     gap: 6px;
}

.short-specs ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 4px;
}

.short-specs li {
     display: flex;
     align-items: baseline;       /* было center → baseline (текст label и value на одной базовой) */
     justify-content: flex-start;
     padding: 6px 0;              /* было 1px → 6px (просторнее, как в Figma) */
     font-size: 17px;             /* было 18 → 17 — чуть аккуратнее в плотной сетке */
     font-family: "Gill Sans Nova", sans-serif;
}

.short-specs li .spec-label {
     flex-shrink: 0;
     width: 50%;                  /* было 55 → 50 (чтобы value начинались в одной точке) */
}

.short-specs .spec-label {
     color: #978080;              /* было #978181 → #978080 (унификация с дизайн-токенами) */
     line-height: 1.3;
     font-weight: 400;
}

.short-specs .spec-value {
     color: #2d030b;
     line-height: 1.3;
     text-align: left;
     width: 50%;                  /* было 45 → 50 */
     font-weight: 400;
}

.all-specs {
     display: flex;
     align-items: center;

     gap: 6px;
     margin-top: 24px;
     color: #2d030b;
     font-weight: 500;
     text-decoration: none;
     font-size: 18px;
     font-family: "Gill Sans Nova", sans-serif;
}

.all-specs .chev {
     font-size: 14px;
     opacity: 0.8;
}

.price-panel {
     margin-top: 4px;
     gap: 10px;
}

.price-current {
     color: #780d00;
     font-size: 24px;
     display: flex;
     flex-direction: row;
     font-family: "Dihjauti", serif;
     align-items: center;
     font-weight: 400;
     white-space: nowrap;       /* "120 206 ₽" не разваливается на две строки */
     flex-shrink: 0;             /* не сжимается, если рядом счётчик +/- */
}

.price-old {
     color: #b3a8a8;
     display: flex;
     flex-direction: row;
     align-items: center;
     font-size: 18px;
     font-family: "Dihjauti", serif;
     text-decoration: line-through;
     font-weight: 400;
}

/* Align labels and values in left details list */
.product-params li {
     display: flex;
     justify-content: space-between;
     padding: 8px 12px;
     color: #333;
}

.product-params li strong {
     color: #978080;
     font-weight: 600;
}

/* Order card — белая карточка со скруглением, как в Figma */
.order-card {
     width: 380px;
     background: #fff;
     padding: 24px;
     border-radius: 12px;
}

.prod_disc {
     font-size: 18px;
     line-height: 120%;
     font-weight: 400;
     font-family: "Gill Sans Nova", sans-serif;
}

.order-card .order-panel {
     display: flex;
     flex-direction: column;
     gap: 16px;
}

.add-to-cart-wrapper {
     position: relative;
     display: flex;
     width: 100%;
     gap: 8px;
     align-items: center;
}

.order-card .price-panel {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.order-card .price-panel div {
     display: flex;
     gap: 12px;
     align-items: center;
}

.order-card .add-to-cart {
     width: 100%;
     height: 40px;                    /* 56px — стандартная высота под Figma скрин 3 */
     padding: 0 24px;
     border-radius: 4px;
     font-family: "Dihjauti", sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 100%;
     text-transform: uppercase;
     background-color: #210201;
     color: #fbfbfb;                  /* БЕЛЫЙ текст на тёмном фоне (был не задан → наследовался #210201, текст сливался) */
     border: none;
     cursor: pointer;
     transition: background-color .2s ease;
}

.order-card .add-to-cart:hover {
     background-color: #370610;
}

.order-card .add-to-cart.is-hidden {
     display: none !important;
}

/* Стили счётчика +/- унифицированы с каталогом (.catalog-quantity-controls):
   светло-серый фон, тёмный текст, как в остальных страницах сайта. */
.order-card .product-quantity-controls {
     display: none;
     align-items: center;
     justify-content: center;
     width: auto;
     height: 40px;
     padding: 0;
     border-radius: 4px;
     background-color: #f2f2f2;     /* было #780d00 (тёмно-бордовый) → #f2f2f2 как в каталоге */
     color: #210201;                /* было #fbfbfb (белый) → #210201 (тёмный) */
     overflow: hidden;
}

.order-card .product-quantity-controls.is-visible {
     display: flex;
}

.order-card .product-quantity-btn {
     width: 56px;
     height: 56px;
     background: transparent;
     border: none;
     color: #210201;                /* было #fbfbfb → #210201 (тёмный, читается на светлом фоне) */
     font-size: 24px;
     line-height: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     border-radius: 4px;
     transition: background-color .2s ease;
}

.order-card .product-quantity-btn:hover {
     background-color: rgba(33, 2, 1, 0.06);   /* было rgba(255,255,255,0.12) — тёмный hover на светлом фоне */
}

.order-card .product-quantity-value {
     font-family: "Dihjauti", sans-serif;
     font-size: 20px;
     font-weight: 400;
     color: #210201;                /* явно задаём тёмный, чтобы читалось на сером фоне */
     min-width: 60px;               /* было 28 → 60, как в каталоге */
     padding: 0 16px;
     text-align: center;
     line-height: 1;
}

/* Стили под Figma «Способы получения заказа»:
   - заголовок и префиксы (Забрать сегодня / Самовывоз) — Medium 500
   - продолжение фразы (из 2 винотек / с завтрашнего дня…) — Book 400 */
.order-card .order-notes {
     font-size: 16px;
     color: #060606;
     line-height: 1.2;
     font-family: "Gill Sans Nova", sans-serif;
}

.order-notes .order-notes__title,
.order-notes p {
     margin: 0 0 8px 0;
     font-size: 16px;
     font-weight: 500;            /* Medium — как в Figma */
     line-height: 1.2;
     color: #060606;
     font-family: "Gill Sans Nova", sans-serif;
}

.order-notes ul {
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 12px;                   /* отступ между строками, как в Figma */
}

.order-notes ul li {
     text-decoration: none;
     list-style-type: none;
     font-size: 16px;
     line-height: 1.2;
     font-weight: 400;            /* Book 400 — основной вес строки */
     color: #060606;
     font-family: "Gill Sans Nova", sans-serif;
}

/* Префикс типа «Забрать сегодня» / «Самовывоз» — Medium 500 */
.order-notes ul li strong {
     font-weight: 500;
}

/* Хвост типа «из 2 винотек» — обычный вес 400, явно для надёжности */
.order-notes ul li span {
     font-weight: 400;
}

.content-wrapper {
     max-width: 1140px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.page-title {
     font-size: 48px;
     font-weight: 700;
     line-height: 77px;
     text-align: center;
     color: #060606;
     margin-bottom: 36px;
}

.cart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
}

.cart-info {
     font-size: 16px;
     color: #978080;
}

.clear-cart {
     font-size: 16px;
     color: #978080;
     text-decoration: none;
}

.cart-content {
     display: flex;
     gap: 24px;
     align-items: flex-start;
}

.cart-items {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 16px;
}

.cart-item {
     background-color: #fbfbfb;
     border-radius: 8px;
     padding: 20px;
     display: flex;
     gap: 28px;
}

.item-image-container {
     width: 26%;
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 12px;
     background-color: #fbfbfb;
     border-radius: 8px;
}

.discount-badge {
     background-color: #780d00;
     color: #fbfbfb;
     font-size: 16px;
     padding: 2px 8px;
     border-radius: 5px;
     align-self: flex-start;
}

.item-image {
     width: 66px;
     height: 210px;
     align-self: center;
     margin-bottom: 12px;
}

.item-details {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 80px;
}

.item-info {
     display: flex;
     flex-direction: column;
     gap: 14px;
}

.item-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
}

.item-title {
     font-size: 25px;
     font-weight: 700;
     line-height: 27px;
     color: #2d030b;
     flex: 1;
}

.item-price-container {
     display: flex;
     flex-direction: column;
     gap: 2px;
     align-items: flex-end;
}

.item-price {
     display: flex;
     align-items: center;
     gap: 4px;
}

.price-current {
     font-size: 24px;
     gap: 0px !important;
     color: #780d00;
}

.price-old {
     font-size: 18px;
     color: #978080;
     gap: 0px !important;
     position: relative;
}

.price-old::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background-color: #978080;
}

.ruble-icon {
     width: 17px !important;
     height: 19px !important;
     margin-top: -2px !important;
}

.ruble-icon-small {
     width: 10px;
     height: 18px;
}

.item-tags {
     display: flex;
     gap: 12px;
}

.item-tag {
     border: 1px solid #210201;
     border-radius: 5px;
     padding: 0 8px;
     font-size: 16px;
     font-weight: 700;
     color: #210201;
}

.item-actions {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 12px;
}

.favorite-btn {
     background-color: #f2f2f2;
     border-radius: 4px;
     padding: 6px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.quantity-controls {
     display: flex;
     align-items: center;
     gap: 0;
}

.quantity-btn {
     background-color: #f2f2f2;
     border-radius: 4px;
     padding: 8px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.quantity-input {
     background-color: #f2f2f2;
     padding: 8px 16px;
     font-size: 18px;
     text-align: center;
     width: 60px;
}

/* Order summary */
.order-summary {
     width: 32%;
     background-color: #fbfbfb;
     border-radius: 8px;
     padding: 16px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
     height: fit-content;
}

.promo-section {
     display: flex;
     gap: 12px;
     margin-bottom: 16px;
}

.promo-input {
     flex: 1;
     padding: 14px;
     border-radius: 5px;
     background-color: #fbfbfb;
     font-size: 16px;
     color: #978080;
}

.promo-btn {
     background-color: #780d00;
     border-radius: 4px;
     padding: 10px;
     width: 40px;
     height: 40px;
}

.order-details {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-bottom: 16px;
}

.order-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.order-label {
     font-size: 18px;
     color: #060606;
}

.order-value {
     font-size: 18px;
     color: #060606;
     display: flex;
     align-items: center;
     gap: 4px;
}

.discount-label {
     color: #780d00;
}

.discount-value {
     color: #780d00;
}

.total-row {
     border-top: 1px solid #eceaea;
     padding-top: 8px;
     margin-top: 8px;
}

.total-label {
     font-size: 24px;
     font-weight: 700;
     color: #210201;
}

.total-value {
     font-size: 24px;
     color: #210201;
}

.checkout-btn {
     width: 100%;
     background-color: #210201;
     color: #fbfbfb;
     padding: 6px 34px;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     margin-top: 16px;
}

/* Interactive states */
button:hover {
     opacity: 0.9;
     transform: translateY(-1px);
}

.product-title_desctop {
     display: block;
}

.product-title_mobile {
     display: none;
}

/* Responsive media queries */
@media (max-width: 768px) {
     .product-title{
          font-family: 'Dihjauti', serif !important;
          font-weight: 700 !important;
          font-style: Bold !important;
          font-size: 24px !important;
          line-height: 110.00000000000001% !important;
          letter-spacing: 0% !important;
          text-align: center !important;
          color: #2D030B !important;

     }
     .product-view {
          padding: 24px 0 !important;
     }

     .product-title_desctop {
          display: none;
     }

     .product-title_mobile {
          padding-top: 32px;
          margin-bottom: 24px;
          display: block;
     }

     .page-title {
          font-size: 32px;
          line-height: 1.2;
     }

     .cart-content {
          flex-direction: column;
     }

     .order-summary {
          width: 100%;
     }

     .cart-item {
          flex-direction: column;
          gap: 16px;
     }

     .item-image-container {
          width: 100%;
          align-items: center;
     }

     .item-header {
          flex-direction: column;
          gap: 16px;
     }

     .item-actions {
          justify-content: center;
     }

     /* Мобильные правки (.main-image-wrap, .gallery-column, .thumbs li/img,
        .favorite-icon-top, .main-image, .badge-sale) перенесены в нижний блок
        @media (max-width: 768px) на строках 1261+ — чтобы не дублировать
        и не конфликтовать. Тут только размер бейджа оставлен ниже. */

     .badge-sale {
          left: 12px;
          top: 12px;
          padding: 4px 10px;
          font-size: 14px;
          border-radius: 4px;
     }

     .product-title {
          font-size: 24px !important;
          line-height: 1.2;
          margin-bottom: 10px;
     }

     .center-column .product-title {
          font-size: 24px;
          margin: 0 0 10px 0;
     }

     .meta-row {
          margin-bottom: 16px;
          gap: 6px;
     }

     .meta-item {
          padding: 2px 8px;
          font-size: 13px;
     }

     .short-specs ul {
          gap: 3px;
     }

     .short-specs li {
          padding: 1px 0;
          font-size: 15px;
          justify-content: space-between;
     }

     .short-specs li .spec-label {
          max-width: none;
          flex-shrink: 1;
     }

     .short-specs .spec-label {
          font-size: 16px;
          line-height: 1.3;
     }

     .short-specs .spec-value {
          font-size: 16px;
          line-height: 1.3;
          text-align: right !important;
          max-width: none;
          flex-shrink: 0;
     }

     .all-specs {
          margin-top: 16px;
          font-size: 16px;
     }

     .price-current {
          font-size: 24px;
     }

     .price-old {
          font-size: 18px;
     }

     .order-card {
          padding: 14px;
          border-radius: 6px;
     }

     .order-card .order-panel {
          gap: 10px;
     }

     .order-card .add-to-cart {
          padding: 10px 14px;
          font-size: 14px;
          border-radius: 4px;
     }

     .add-to-cart-wrapper {
          gap: 6px;
     }

     .cart-badge {
          min-width: 22px;
          height: 22px;
          font-size: 11px;
     }

     .order-card .order-notes {
          font-size: 14px;
          line-height: 1.4;
     }

     .order-notes p {
          margin: 0 0 6px 0;
          font-size: 14px;
     }

     .order-notes ul{
          gap: 4px;
     }

     .order-notes .order-notes__title,
     .order-notes p{
          margin: 0 0 4px 0;
     }

     .order-notes ul li {
          font-size: 16px;
          line-height: 120%;
     }

     .prod_disc {
          font-size: 16px;
          line-height: 120%;
          margin-bottom: 20px;
     }

     .product-body {
          gap: 18px;
          margin-top: 16px;
     }

     .flavor-box {
          padding: 12px;
     }

     .flavor-box h3 {
          font-size: 14px;
          margin: 0 0 8px 0;
     }

     .flavor-row {
          margin-bottom: 8px;
     }

     .flavor-head {
          font-size: 13px;
          margin-bottom: 6px;
     }

     .bar {
          height: 8px;
     }

     .product-params {
          padding: 12px;
     }

     .product-params li {
          padding: 4px 0;
     }

     .product-params li strong {
          font-size: 13px;
     }

     .product-params li span {
          font-size: 14px;
     }

     .right-panel {
          padding: 12px;
     }

     .right-panel h3 {
          font-size: 15px;
          margin: 0 0 8px 0;
     }

     .product-description {
          font-size: 14px;
          line-height: 1.4;
     }
}

/* Product view specific styles */
.product-view {
     display: flex;
     flex-direction: column;
     gap: 48px;
}

.gallery-column .thumbs {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
}

.gallery-column .thumbs li img {
     width: 80px;
     height: 90px;
     object-fit: cover;
     border-radius: 4px;
     cursor: pointer;
     border: 2px solid transparent;
}

.gallery-column .thumbs li img:hover {
     border-color: #780d00;
}



.product-card {
     background: #fbfbfb;
     padding: 24px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.meta-item {
     padding: 6px 14px;          /* шире по горизонтали — как чипы в Figma */
     border: 1px solid #210201;
     border-radius: 5px;
     font-size: 16px;
     font-weight: 500;            /* было 600 → 500 medium, как в Figma */
     color: #210201;
     line-height: 1;              /* без лишней высоты строки */
}


.short-specs ul {
     list-style: none;
     padding-left: 0;
     color: #060606;
}

.product-body {
     display: flex;
     gap: 24px;
     margin-top: 16px;
}

.left-panel {
     width: 280px;
     display: flex;
     flex-direction: column;
     gap: 14px;
}

.right-panel {
     flex: 1;
     background: #fff;
     padding: 24px;
     border-radius: 8px;
     box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.03);
}

.flavor-box {
     background: #fff;
     padding: 14px;
     border-radius: 8px;
     box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.03);
}

.flavor-box h3 {
     margin: 0 0 16px 0;
     color: #2d030b;
     font-family: "Dihjauti", sans-serif;
     font-size: 20px;
     font-weight: 700;
     line-height: 120%;
}

.flavor-row {
     margin-bottom: 12px;
}

.flavor-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     color: #060606;
     font-weight: 400;
     margin-bottom: 8px;
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     line-height: 120%;
}

.flavor-number {
     color: #780d00;
     font-weight: 500;
}

.bar {
     width: 100%;
     height: 6px;
     background: #efecec;
     border-radius: 3px;
     overflow: hidden;
}

.bar-fill {
     height: 100%;
     background: #780d00;
     border-radius: 3px;
}

.product-params {
     list-style: none;
     background: #fff;
     padding: 14px;
     border-radius: 8px;
     box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.03);
}

.product-params li {
     display: flex;
     justify-content: space-between;
     align-items: start;
     flex-direction: column;
     padding: 6px 0;
}

.product-params li strong {
     color: #2D030B;
     font-family: "Dihjauti", serif;
     font-weight: 700;
     font-size: 18px;
}

.product-params li span {
     color: #896246;
     font-family: "Gill Sans Nova", sans-serif;
     font-weight: 400;
     font-size: 18px;
}

@media (max-width: 800px) {
     .product-params li {
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
     }
}

.product-params li:last-child {
     border-bottom: none;
}

.product-description {
     color: #210201;
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 150%;
}

.product-description p {
     margin-bottom: 12px;
}

.product-description p:last-child {
     margin-bottom: 0;
}

.right-panel h3 {
     font-family: "Dihjauti", sans-serif;
     font-size: 20px;
     font-weight: 700;
     line-height: 120%;
     margin-bottom: 12px;
}

.tabs-info {
     margin-top: 24px;
}

.tabs-info h4 {
     font-family: "Dihjauti", sans-serif;
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 8px;
}

.tabs-info p {
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     line-height: 150%;
     color: #210201;
}

@media (max-width: 768px) {
     /* На мобильной .product-top становится «прозрачным» через display: contents:
        его дети (preview, center, order-card) становятся прямыми flex-детьми
        .product-view вместе с .prod_disc и .product-body. Это позволяет
        переупорядочить через `order` без правки HTML.

        Желаемый порядок: preview → center → prod_disc → order-card → product-body */
     .product-view {
          display: flex;
          flex-direction: column;
          gap: 24px;
     }

     .product-top {
          display: contents;        /* контейнер «исчезает», дети — siblings .product-view */
     }

     .preview-column     { order: 1; }
     .center-column      { order: 2; }
     .prod_disc          { order: 3; }
     .order-card         { order: 4; }
     .product-body       { order: 5; }

     /* Колонка-превью — вертикальный стек, центрирован.
        Сбрасываем десктопные max-width:400 / justify-content:flex-start / row. */
     .product-top .preview-column {
          flex-direction: column;
          max-width: 100%;
          width: 100%;
          align-items: center;
          gap: 12px;
     }

     /* Заголовок-мобильный — по центру вверху, как в Figma скрин 1 */
     .product-title_mobile {
          width: 100%;
          text-align: center;
          padding: 0;
          margin: 0 0 8px 0;
          font-family: 'Dihjauti', serif;
          font-size: 24px;
          font-weight: 600;
          line-height: 1.2;
          color: #2d030b;
          order: 0;
     }

     /* Главное превью — по центру, до 290px шириной */
     .preview-column .main-image-wrap {
          order: 1;
          width: 100%;
          max-width: 100%;
          padding: 20px;
          aspect-ratio: 290 / 540;
          height: auto;
     }

     /* Галерея — ГОРИЗОНТАЛЬНАЯ строка ПОД главным фото.
        Сбрасываем десктопные align-self:stretch / flex-direction:column / justify-content:flex-end. */
     .product-top .gallery-column {
          order: 2;
          width: 100%;
          align-self: auto;        /* сброс stretch */
          display: block;          /* сброс flex column */
          margin: 0;
          padding: 0;
          height: auto;
     }

     .gallery-column .thumbs {
          display: flex;
          flex-direction: row !important;   /* перебиваем глобальный flex-column */
          justify-content: center;          /* миниатюры центрированы под фото */
          flex-wrap: wrap;
          gap: 12px;
          margin-top: 0;
          padding: 0;
     }

     .gallery-column .thumbs li {
          width: 80px;             /* мобильная Figma — компактные миниатюры */
          height: 90px;
          /* padding: 6px; */
          border-radius: 5px;
     }

     /* Center column — на всю ширину
        (порядок задан выше через .center-column { order: 2 }). */
     .product-top .center-column {
          width: 100%;
     }

     /* Order-card — белая карточка как в Figma скрин 3
        (порядок задан выше через .order-card { order: 4 } — после prod_disc). */
     .product-top .order-card {
          width: 100%;
          background: #fff;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.03);
     }

     .order-card .product-quantity-controls.is-visible {
        background-color: #f2f2f2 !important;
     }

     .left-panel {
          width: 100%;
     }

     .product-body {
          flex-direction: column;
     }
}