/**
 * mmb26 — Product Detail Page Styles
 * Vanilla CSS with mmb26 design system variables
 * Dark mode ready
 */

/* =========================================================================
   LAYOUT: Two-column desktop, single-column mobile
   ========================================================================= */

/* Clip Bootstrap row negative-margin bleed without breaking sticky/fixed children */
.component-product-detail-container {
    overflow-x: clip;
}

.component-product-detail-cols-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 8px;
}

.component-product-detail-rightcol-container,
.component-product-detail-leftcol-container {
    width: 100%;
    min-width: 0;
}

/* Hide desktop images container on mobile */
.component-product-detail-images-desktop-container {
    display: none;
}

/* Hide mobile image block (used as mobile-only in old template) */
.component-product-detail-images-container {
    display: block;
}

/* =========================================================================
   TITLE
   ========================================================================= */

.component-product-detail-title-container h1 {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 4px;
}

/* =========================================================================
   ARTICLE + DELIVERY TIME
   ========================================================================= */

.component-product-detail-article-container {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.component-product-detail-article-container strong {
    color: var(--text);
}

/* =========================================================================
   PRODUCT IMAGES (Mobile + Desktop)
   ========================================================================= */

/* Slider wrapper */
.component-product-detail-images-content-container .component-product-gallery {
    position: relative;
    padding: 0;
}

.component-product-detail-images-content-container .component-product-gallery img {
    border-radius: 0;
}

/* Main image area */
.component-product-detail-images-content-container .slider {
    width: 100%;
    margin-bottom: 8px;
}

.component-product-detail-images-content-container .slider .main-image {
    height: 280px;
    position: relative;
    text-align: center;
    border-radius: var(--radius);
}

.component-product-detail-images-content-container .slider .main-image > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 8px;
}

.component-product-detail-images-content-container .slider .main-image img {
    cursor: zoom-in !important;
    object-fit: contain;
    display: block;
    max-height: 100%;
    max-width: 100%;
    border-radius: var(--radius);
}

.component-product-detail-images-content-container .slider .main-image img.no-zoom {
    cursor: default !important;
}

/* Notice badges (Уценка, Новинка, etc.) */
.component-product-detail-images-content-container .notice {
    line-height: 1;
    font-size: 0.75rem;
    position: absolute;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: #fff;
    z-index: 2;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--accent, #c39);
}

.component-product-detail-images-content-container .notice--promo {
    background: var(--color-success, #28a745);
}

.notice__parent {
    position: relative;
}

.component-product-detail-images-content-container .slider .main-image .notice__parent .notice {
    top: 8px;
    left: 8px;
}

/* Additional thumbnails */
.component-product-detail-images-content-container .slider .additional-images-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: auto;
    margin-top: 6px;
    margin-bottom: 12px;
    scrollbar-width: thin;
}

.component-product-detail-images-content-container .slider .additional-images {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.component-product-detail-images-content-container .slider .additional-images ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.component-product-detail-images-content-container .slider .additional-images li {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.component-product-detail-images-content-container .slider .additional-images .additional-image {
    display: block;
    position: relative;
    float: none;
    flex-shrink: 0;
    width: 72px;
    height: 52px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    opacity: 0.7;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.15s, border-color 0.15s;
}

.component-product-detail-images-content-container .slider .additional-images .additional-image:hover,
.component-product-detail-images-content-container .slider .additional-images .additional-image.active {
    opacity: 1;
    border-color: var(--color-primary);
}

.component-product-detail-images-content-container .slider .additional-images .additional-image img {
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
    max-width: 100%;
}

/* Navigation dots */
.component-product-detail-images-content-container .slider .navigation {
    text-align: center;
    padding-top: 8px;
}

.component-product-detail-images-content-container .slider .navigation ol {
    padding: 0;
    list-style: none;
    display: inline-flex;
    gap: 6px;
}

.component-product-detail-images-content-container .slider .navigation li {
    display: inline-block;
}

.component-product-detail-images-content-container .slider .navigation .item {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.component-product-detail-images-content-container .slider .navigation .item.current {
    background: var(--color-primary);
}

/* Download photo link */
.component-product-detail-images-content-container .component-product-gallery a.download_photo {
    line-height: 1;
    font-size: 0.75rem;
    position: absolute;
    padding: 6px 10px;
    background: var(--color-primary);
    color: #fff;
    top: 8px;
    right: 8px;
    z-index: 2;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s;
}

.component-product-detail-images-content-container .component-product-gallery a.download_photo:hover {
    background: var(--color-primary-hover);
}

/* BF badge */
.component-product-detail-images-content-container .bf-item {
    display: none;
}

/* =========================================================================
   DESCRIPTION
   ========================================================================= */

.component-product-detail-description-container {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.component-product-detail-description-container img {
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   ATTENTION / NOTICE BLOCKS (delivery info, prepay notices)
   ========================================================================= */

.component-product-detail-container .attention {
    display: block;
    text-decoration: none;
    background: var(--warning-bg);
    font-size: 0.85rem;
    padding: 10px 14px;
    margin: 0 0 12px;
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-sm);
    color: var(--warning-text);
    line-height: 1.5;
}

.component-product-detail-container .attention::before {
    content: '';
    position: static;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23d97706' stroke-width='1.5'/%3E%3Cline x1='10' y1='9.5' x2='10' y2='14' stroke='%23d97706' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.5' r='0.9' fill='%23d97706'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.component-product-detail-container .attention.lightyellow {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.component-product-detail-container .attention a {
    color: var(--color-primary);
}

.component-product-detail-container .attention1 {
    background: var(--warning-strong-bg);
    border-color: var(--warning-strong-border);
    color: var(--warning-strong-text);
    border-style: solid;
    border-width: 1px;
}

.component-product-detail-container .attention1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5L1.5 17h17L10 2.5z' stroke='%23d97706' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8' x2='10' y2='12' stroke='%23d97706' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.5' r='0.9' fill='%23d97706'/%3E%3C/svg%3E");
}

/* =========================================================================
   PRICE & BUY BLOCK (order-container / item-config)
   ========================================================================= */

.component-product-detail-order-container.page-catalog-item {
    box-shadow: none;
    padding: 0;
}

.component-product-detail-order-container.page-catalog-item .item-content {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 14px;
}

.component-product-detail-order-container .item-content .buy {
    padding: 0;
}

/* Price display */
.component-product-detail-order-container .buy .price {
    width: 100%;
    padding: 0;
}

.component-product-detail-order-container .buy .price .old {
    display: block;
    color: var(--text-muted);
    font-size: 0.95rem;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.component-product-detail-order-container .buy .price .old s {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* FormatPrice разбивает сумму на span'ы — линия должна быть на тексте, а не только на <s> */
.component-product-detail-order-container .buy .price .old s,
.component-product-detail-order-container .buy .price .old s * {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px;
}

.component-product-detail-order-container .buy .price .old .rub {
    color: var(--text-muted);
}

.component-product-detail-order-container .buy .price .actual {
    color: var(--magenta);
    font-size: 1.75rem;
    font-weight: 700;
}

.component-product-detail-order-container .buy .price .actual .actual_price {
    color: var(--magenta) !important;
}

.component-product-detail-order-container .buy .price .rub {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 2px;
}

/* Price last part (formatted) */
.price-last-part {
    /* kept from original formatting */
}

/* Stock indicator (delivery notice) */
.stock-indicator {
    color: rgba(0, 0, 0, 0.2);
}

:root.dark-mode .stock-indicator {
    color: rgba(255, 255, 255, 0.3);
}

/* Buttons */
.component-product-detail-order-container .buy .button-wrapper {
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
}

.component-product-detail-order-container .buy .button-wrapper .btn {
    display: block;
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
    line-height: 1.4;
}

.component-product-detail-order-container .buy .button-wrapper .btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.component-product-detail-order-container .buy .button-wrapper .btn-primary:hover {
    background: var(--color-primary-hover);
}

.component-product-detail-order-container .buy .button-wrapper .btn-success {
    background: var(--green);
    color: #fff;
}

.component-product-detail-order-container .buy .button-wrapper .btn-success:hover {
    background: var(--green-dark);
}

/* Covers selection button (tissue/cabinet config) */
.btn-covers-select {
    display: inline-block;
    margin: 15px 0;
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(to bottom, var(--yellow, #f0c040) -25%, var(--green, #699921) 100%);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-covers-select:hover {
    opacity: 0.9;
}

.component-product-detail-order-container .buy .button-wrapper .btn-light {
    background: var(--bg-light);
    color: var(--text);
    border: 1px solid var(--border);
}

.component-product-detail-order-container .buy .button-wrapper .btn-light:hover {
    background: var(--bg-tertiary);
}

/* Credit / installment buttons */
.component-product-detail-order-container .buy .wrap-credit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.component-product-detail-order-container .buy .ibutton {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--white, #fff);
    background: var(--color-primary, #2563eb);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.component-product-detail-order-container .buy .ibutton:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.component-product-detail-order-container .buy .ibutton:active {
    transform: translateY(0);
}

.component-product-detail-order-container .buy .ibutton div {
    padding: 0 12px;
}

/* Яндекс Сплит */
.component-product-detail-order-container .buy .button-wrapper.credit-split .ibutton,
.component-product-detail-order-container .buy .button-wrapper.credit-split .ibutton--yandex-split {
    background: #55d48e;
    color: #1a1a1a;
}

.component-product-detail-order-container .buy .button-wrapper.credit-split .ibutton:hover,
.component-product-detail-order-container .buy .button-wrapper.credit-split .ibutton--yandex-split:hover {
    background: #4bc47f;
    color: #1a1a1a;
}

/* Bank credit button variant */
.component-product-detail-order-container .buy .button-wrapper.credit .ibutton {
    background: linear-gradient(135deg, #ffdd00 0%, #f9a800 100%);
    color: #1a1a1a;
}

.component-product-detail-order-container .buy .button-wrapper.credit .ibutton:hover {
    background: linear-gradient(135deg, #f9a800 0%, #e09000 100%);
}

.component-product-detail-order-container .buy .button-wrapper .btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px dashed var(--border);
}

.component-product-detail-order-container .buy .button-wrapper .btn-outline:hover {
    border-color: var(--text-muted);
}

.component-product-detail-order-container .buy .button-wrapper .btn-block {
    display: block;
    width: 100%;
}

.component-product-detail-order-container .buy .button-wrapper .btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.component-product-detail-order-container .buy .buy-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Price row */
.component-product-detail-order-container .buy .buy-layout-price {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.component-product-detail-order-container .buy .buy-layout-price-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    line-height: 1;
}

.component-product-detail-order-container .buy .buy-layout-price .price {
    padding: 0;
    width: 100%;
}

.component-product-detail-order-container .buy .buy-layout-price .price .old {
    display: block;
    margin-bottom: 2px;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.component-product-detail-order-container .buy .buy-layout-price .price .old s,
.component-product-detail-order-container .buy .buy-layout-price .price .old s * {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px;
}

.component-product-detail-order-container .buy .buy-layout-price .price .actual {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

/* Favorite + Buy on one row */
.component-product-detail-order-container .buy .buy-layout-primary {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.component-product-detail-order-container .buy .buy-layout-buy {
    flex: 1;
    min-width: 0;
}

.component-product-detail-order-container .buy .buy-layout-buy .btn {
    height: 100%;
    min-height: 44px;
}

.component-product-detail-order-container .buy .buy-layout-buy .btn.btn-success {
    background: var(--green) !important;
    color: #fff !important;
    border: none !important;
}

.component-product-detail-order-container .buy .buy-layout-buy .btn.btn-success:hover {
    background: var(--green-dark) !important;
}

/* On desktop: primary + secondary side by side */
@media (min-width: 768px) {
    .component-product-detail-order-container .buy .buy-layout {
        display: grid;
        grid-template-areas:
            "price price"
            "primary secondary"
            "credit credit";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 8px;
    }

    .component-product-detail-order-container .buy .buy-layout-price   { grid-area: price; }
    .component-product-detail-order-container .buy .buy-layout-primary  { grid-area: primary; }
    .component-product-detail-order-container .buy .buy-layout-secondary { grid-area: secondary; }
    .component-product-detail-order-container .buy .buy-layout-credit   { grid-area: credit; }
}

/* 1-click row */
.component-product-detail-order-container .buy .buy-layout-secondary {
    width: 100%;
}

.component-product-detail-order-container .buy .buy-layout-secondary .btn.btn-light {
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.component-product-detail-order-container .buy .buy-layout-secondary .btn.btn-light:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
}

/* Credit row */
.component-product-detail-order-container .buy .buy-layout-credit {
    margin-top: 4px;
}

.component-product-detail-order-container .buy .buy-layout-credit-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Desktop: две кнопки кредита в один ряд (узже, как верхний ряд из 2 кнопок) */
@media (min-width: 768px) {
    .component-product-detail-order-container .buy .buy-layout-credit .wrap-credit {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 0;
    }

    .component-product-detail-order-container .buy .buy-layout-credit .button-wrapper {
        width: 100%;
        margin-bottom: 0;
    }

    .component-product-detail-order-container .buy .buy-layout-credit .ibutton {
        height: 38px;
        line-height: 38px;
        font-size: 0.8125rem;
    }

    .component-product-detail-order-container .buy .buy-layout-credit .ibutton div {
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Только Тинькофф (без Сплита) — как одна колонка из двух, по центру */
    .component-product-detail-order-container .buy .buy-layout-credit .wrap-credit .button-wrapper:only-child {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
}

/* Favorite heart */
.favorite-like.favorite-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-light);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    flex-shrink: 0;
}

.favorite-like.favorite-detail:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.favorite-like.favorite-detail .ico {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--text-muted);
    transition: stroke 0.15s;
}

.favorite-like.favorite-detail:hover .ico {
    stroke: var(--red);
}

.favorite-like.favorite-detail.fav-disabled .ico {
    fill: var(--red);
    stroke: var(--red);
}

/* Favorite in title area */
.component-product-detail-title-container {
    margin-bottom: 12px;
}

/* =========================================================================
   DELIVERY BLOCK
   ========================================================================= */

.component-product-detail-delivery-container {
    margin-bottom: 8px;
}

.component-product-detail-delivery-container .attention::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23699' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12'/%3E%3C/svg%3E");
}

/* =========================================================================
   CATEGORIES / BREADCRUMB LINKS
   ========================================================================= */

.component-product-detail__category {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

.component-product-detail__category-title {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.component-product-detail__category-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.component-product-detail__category-list li {
    width: auto;
    margin: 10px 6px 0;
    display: flex;
}

.component-product-detail__category-link {
    display: block;
    padding: 4px 8px;
    font-size: 0.8rem;
    line-height: 1.2rem;
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.component-product-detail__category-link[href]:hover {
    color: #fff;
    text-decoration: none;
    background: var(--accent, #c39);
    border-color: var(--accent, #c39);
}

/* Category block at page bottom (SEO cross-linking, low visual weight) */
.component-product-detail__category--footer {
    padding: 16px 8px 24px;
    max-width: var(--container);
    margin: 0 auto;
    border-top: 1px solid var(--border);
}

.component-product-detail__category--footer .component-product-detail__category-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.component-product-detail__category--footer .component-product-detail__category-link {
    font-size: 0.78rem;
    padding: 3px 7px;
    opacity: 0.65;
    transition: opacity 0.15s;
}

.component-product-detail__category--footer .component-product-detail__category-link[href]:hover {
    opacity: 1;
}

/* =========================================================================
   REVIEWS TEASER (2-3 random 5-star reviews with photos)
   ========================================================================= */

.v26-reviews-teaser-container:empty {
    display: none;
}

.v26-reviews-teaser-container {
    padding-top: 12px;
}

.v26-reviews-teaser {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.v26-reviews-teaser__header {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.v26-reviews-teaser__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.v26-reviews-teaser__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v26-reviews-teaser__item {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.v26-reviews-teaser__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.v26-reviews-teaser__item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.v26-reviews-teaser__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.v26-reviews-teaser__item-header .v26-reviews-teaser__stars {
    display: inline-flex;
    gap: 1px;
    margin-left: auto;
}

.v26-reviews-teaser__photos {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.v26-reviews-teaser__photos img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.v26-reviews-teaser__photo {
    display: block;
    cursor: zoom-in;
}

.v26-reviews-teaser__photo:hover img {
    border-color: var(--accent, #c39);
}

.v26-reviews-teaser__text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.v26-reviews-teaser__cta {
    display: block;
    margin-top: 14px;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background 0.15s, border-color 0.15s;
}

.v26-reviews-teaser__cta:hover {
    background: var(--accent, #c39);
    border-color: var(--accent, #c39);
    color: #fff;
}

/* =========================================================================
   SERIES MINI CARDS (horizontal scroll)
   ========================================================================= */

.series-mini-cards-wrapper-inner {
    padding-top: 12px;
}

.series-mini-cards-wrapper {
    margin-bottom: 16px;
    overflow: visible;
}

.series-mini-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    cursor: grab;
    touch-action: pan-x;
    -ms-touch-action: pan-x;
}

.series-mini-cards::-webkit-scrollbar {
    height: 4px;
}

.series-mini-cards::-webkit-scrollbar-track {
    background: transparent;
}

.series-mini-cards::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.series-mini-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 120px;
    text-decoration: none;
    color: var(--text);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.series-mini-card:hover {
    border-color: var(--accent, #c39);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.series-mini-card__photo {
    width: 120px;
    height: 90px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.series-mini-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.series-mini-card__prices {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.series-mini-card__old-price {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    line-height: 1.2;
}

.series-mini-card__price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

@media (min-width: 768px) {
    .series-mini-card {
        width: 140px;
    }

    .series-mini-card__photo {
        width: 140px;
        height: 105px;
    }

    .series-mini-cards {
        gap: 12px;
    }
}

/* =========================================================================
   PARAMS / CONFIGURATION BLOCK
   ========================================================================= */

.component-product-detail-params-container {
    background: var(--surface-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 0 16px;
    padding: 0;
    overflow: hidden;
}

.component-product-detail-params-params-container {
    box-shadow: none;
}

.component-product-detail-params-params-loader-container {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

/* Configuration labels */
.component-product-detail-container .label-block.mini {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0 6px 6px 0;
}

.component-product-detail-container .label-block.mini .label-container {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 60px;
    height: 50px;
    margin-bottom: 4px;
    position: relative;
}

.component-product-detail-container .label-block.mini .label-container img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.component-product-detail-container .label-block.mini .label-container .price {
    font-size: 0.65rem;
    text-align: center;
    padding: 2px;
}

.component-product-detail-container .label-inline {
    display: inline-flex;
    align-items: center;
    margin: 0 10px 6px 0;
    font-size: 0.85rem;
    cursor: pointer;
}

.component-product-detail-container .label-inline input[type="radio"] {
    margin-right: 6px;
    accent-color: var(--color-primary);
}

.component-product-detail-container .label-inline-text-container {
    color: var(--text);
}

/* =========================================================================
   ITEM-READY-CHOOSE (variants / configurations)
   ========================================================================= */

.component-product-detail-container .item-ready-choose .item-choose {
    background: var(--surface-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.component-product-detail-container .item-ready-choose .item-choose.checked {
    border-color: var(--color-primary);
}

.component-product-detail-container .item-ready-choose .item-choose .item-title {
    background: var(--bg-light);
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    color: var(--text);
}

.component-product-detail-container .item-ready-choose .item-choose .item-content {
    background: var(--surface-primary);
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 12px;
    gap: 12px;
}

.component-product-detail-container .item-ready-choose .table-container-outer {
    flex: 1 1 200px;
    font-size: 0.8rem;
    min-width: 200px;
    color: var(--text-secondary);
}

.component-product-detail-container .item-ready-choose .table-container-outer table {
    width: 100%;
}

.component-product-detail-container .item-ready-choose .table-container-outer tr {
    border-bottom: 1px solid var(--border);
}

.component-product-detail-container .item-ready-choose .table-container-outer td {
    padding: 3px 8px 4px 0;
}

.component-product-detail-container .item-ready-choose .table-container-outer td strong {
    font-weight: 400;
    color: var(--text);
}

.component-product-detail-container .item-ready-choose .item-image {
    flex: 0 0 auto;
    width: 160px;
    height: 100px;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-light);
}

.component-product-detail-container .item-ready-choose .item-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.component-product-detail-container .item-ready-choose .item-price .actual {
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
}

.component-product-detail-container .item-ready-choose .item-price .old {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: line-through;
}

.component-product-detail-container .item-ready-choose .item-labels span {
    padding: 4px 10px;
    font-size: 0.8rem;
    color: #fff;
    display: inline-block;
    border-radius: var(--radius-sm);
}

.component-product-detail-container .item-ready-choose .item-labels .item-label-in-stock {
    background: #f0ad4e;
    color: #000;
}

.component-product-detail-container .item-ready-choose .item-labels .item-label-delivery {
    background: var(--green);
}

.component-product-detail-container .item-ready-choose .item-labels .item-label-hit {
    background: var(--magenta);
}

.component-product-detail-container .item-ready-choose .item-all-container {
    width: 100%;
    margin-top: 8px;
    text-align: center;
}

.component-product-detail-container .item-ready-choose .label-choose {
    position: relative;
    display: inline-block;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--text);
}

.component-product-detail-container .item-ready-choose .label-choose input[type="radio"] {
    margin-right: 6px;
    accent-color: var(--color-primary);
}

/* =========================================================================
   CREDIT DIALOG (native <dialog>)
   ========================================================================= */

#creditDialog,
#splitDialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 540px;
    width: 92%;
    margin: 0;
}

#creditDialog::backdrop,
#splitDialog::backdrop {
    background: rgba(0,0,0,0.5);
}

.credit-dialog__inner {
    padding: 28px 28px 24px;
    background: var(--surface-primary);
    color: var(--text);
    border-radius: 12px;
    position: relative;
}

.credit-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.credit-dialog__close:hover {
    background: var(--bg-secondary);
}

.credit-dialog__header {
    margin-bottom: 20px;
}

.credit-dialog__title {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
}

.credit-dialog__steps {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.credit-dialog__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    text-align: center;
    color: var(--text-secondary);
    width: 140px;
}

.credit-dialog__step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #2563eb);
    flex-shrink: 0;
}

.credit-dialog__form {
    padding: 0;
}

.credit-dialog__banks {
    padding: 8px 0;
    margin-bottom: 16px;
}

.credit-dialog__banks--hidden {
    display: none;
}

.credit-dialog__bank {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 8px;
    transition: border-color 0.15s, background 0.15s;
}

.credit-dialog__bank:hover {
    background: var(--bg-secondary);
    border-color: var(--color-primary, #2563eb);
}

.credit-dialog__bank input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary, #2563eb);
}

.credit-dialog__bank-logo {
    flex-shrink: 0;
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-dialog__bank-logo img {
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

.credit-dialog__bank-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.credit-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.credit-dialog__actions .btn-yandex-split {
    background: #55d48e;
    color: #1a1a1a;
    border: none;
    font-weight: 600;
}

.credit-dialog__actions .btn-yandex-split:hover {
    background: #4bc47f;
    color: #1a1a1a;
}

.credit-dialog__actions .btn-success {
    padding: 10px 28px;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.credit-dialog__helper {
    background: none;
    border: none;
    color: var(--color-primary, #2563eb);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
}

.credit-dialog__helper:hover {
    opacity: 0.8;
}

.credit-dialog__footer {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-secondary, #999);
    margin-top: 16px;
    opacity: 0.7;
}

/* =========================================================================
   FAST ORDER FORM / CALLBACK
   ========================================================================= */

#fast-order-form {
    display: none;
    max-width: 400px;
}

.callback-form {
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.callback-form .callback-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    margin-bottom: 8px;
    background: var(--bg);
    color: var(--text);
}

.callback-form .callback-submit {
    width: 100%;
    padding: 12px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.callback-form .callback-submit:hover {
    background: var(--color-primary-hover);
}

/* =========================================================================
   GD CONTAINER (Related / Recommended products)
   ========================================================================= */

.component-product-detail-gd-container {
    margin-bottom: 16px;
}

/* =========================================================================
   POPUPS (Tissue select, etc.)
   ========================================================================= */

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup-wrapper {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface-primary);
    z-index: 1001;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    max-width: 95vw;
    max-height: 95vh;
    overflow: auto;
}

.popup {
    position: relative;
    padding: 24px;
    border-radius: var(--radius-lg);
}

.popup-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
    line-height: 32px;
}

.popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.5rem;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-primary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.popup-close:hover {
    background: var(--bg-light);
    color: var(--text);
    border-color: var(--text-muted);
}

.popup-close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.3rem;
    font-weight: 500;
}

.popup-warning {
    color: var(--red);
}

.popup-warning--inline {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.85;
}

/* =========================================================================
   FIELDSET BLOCKS (Configuration form elements)
   ========================================================================= */

.component-product-detail-container .fieldset-block {
    margin: 12px 0;
    padding: 16px 0 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    position: relative;
}

.component-product-detail-container .fieldset-block legend,
.component-product-detail-container .fieldset-block .fieldset-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: none;
    background: var(--bg);
    padding: 0 8px;
    position: absolute;
    top: -10px;
    left: 13px;
    line-height: 20px;
}

/* Warning variant for "Важно" sections */
.component-product-detail-container .fieldset-block .fieldset-title--warning {
    background: var(--color-danger, #dc3545);
    color: var(--white, #fff);
    border-radius: var(--radius-sm);
    padding: 2px 10px;
    border-bottom: none;
}

:root.dark-mode .component-product-detail-container .fieldset-block .fieldset-title--warning {
    background: var(--color-danger, #dc3545);
    color: var(--white, #fff);
}

.component-product-detail-container .fieldset-block .fieldset-body {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 22px;
}

/* --- Configuration option labels (radio/checkbox blocks) --- */
.component-product-detail-container .item-configuration .label-block,
.component-product-detail-container .item-configuration .config-item {
    display: inline-block;
    vertical-align: top;
    width: 176px;
    margin-right: 10px;
    margin-top: 2px;
    cursor: pointer;
    font-size: 0.875rem;
}

.component-product-detail-container .item-configuration .label-block input[type="checkbox"],
.component-product-detail-container .item-configuration .label-block input[type="radio"],
.component-product-detail-container .item-configuration .label-inline input[type="radio"] {
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: middle;
}

.component-product-detail-container .item-configuration .label-block .label-block-title-container,
.component-product-detail-container .item-configuration .label-inline .label-inline-text-container {
    vertical-align: middle;
}

.component-product-detail-container .item-configuration .label-inline {
    display: inline-block;
    margin-right: 30px;
    margin-top: 3px;
    cursor: pointer;
}

/* --- Config option container (image box) --- */
.component-product-detail-container .item-configuration .label-block .label-container,
.component-product-detail-container .item-configuration .config-item .config-container {
    width: 100%;
    height: 116px;
    border: 2px solid transparent;
    text-align: center;
    margin-bottom: 5px;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-secondary);
}

.component-product-detail-container .item-configuration .label-block .label-container {
    border: 2px solid var(--border);
    padding: 2px;
    height: 122px;
    margin-bottom: 3px;
}

.component-product-detail-container .item-configuration .label-block .label-container .label-border {
    width: 100%;
    height: 100%;
    text-align: center;
}

.component-product-detail-container .item-configuration .label-block:hover .label-container,
.component-product-detail-container .item-configuration .label-block.checked .label-container {
    border-color: var(--accent, #c39);
}

.component-product-detail-container .item-configuration .label-block .label-container img,
.component-product-detail-container .item-configuration .config-item .config-container img {
    max-width: 97%;
    max-height: 97%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    object-fit: contain;
}

/* --- Price badge on config option --- */
.component-product-detail-container .item-configuration .label-block .label-container .price {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 2px;
    color: var(--white, #fff);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 16px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.5);
}

.component-product-detail-container .item-configuration .label-block:hover .label-container .price,
.component-product-detail-container .item-configuration .label-block.checked .label-container .price {
    background: var(--accent, #c39);
}

/* --- Mini config options --- */
.component-product-detail-container .item-configuration .label-block.mini {
    width: 126px;
}

.component-product-detail-container .item-configuration .label-block.mini .label-container {
    height: 88px;
}

.component-product-detail-container .item-configuration .config-item.mini {
    width: 120px;
}

.component-product-detail-container .item-configuration .config-item.mini .config-container {
    height: 82px;
    border: 0;
}

.component-product-detail-container .item-configuration .label-block.mini.no-border-center-text {
    text-align: center;
    cursor: default;
}

.component-product-detail-container .item-configuration .label-block.mini.no-border-center-text:hover .label-container {
    border-color: var(--border);
}

/* --- Column layout for config options (col3) --- */
.component-product-detail-container .item-configuration .fieldset-block .fieldset-body .col3 {
    width: 183px;
    padding-right: 19px;
    display: block;
    float: left;
}

.component-product-detail-container .item-configuration .fieldset-block .fieldset-body .col3.last {
    width: 168px;
    padding-right: 0;
}

.component-product-detail-container .item-configuration .fieldset-block .fieldset-body .col3_select,
.component-product-detail-container .item-configuration .fieldset-block .fieldset-body .col3_text {
    width: 100%;
    padding-right: 18px;
    margin-bottom: 8px;
}

.component-product-detail-container .item-configuration .fieldset-block .fieldset-body .col3_select select {
    width: 100%;
    max-width: 250px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
}

/* --- Quantity spinner --- */
.component-product-detail-container .item-configuration .fieldset-block .fieldset-body .item-quantity {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 62px;
    z-index: 3;
}

/* Количество в «Дополнительно»: сетка как в старом шаблоне (поле слева, +/- справа столбиком) */
.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity {
    width: 76px;
    min-width: 76px;
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    grid-template-rows: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner input[type="text"] {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    height: auto;
    text-align: center;
    border: none;
    border-right: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 2px;
    background: var(--bg);
    color: var(--text);
    -moz-appearance: textfield;
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner input[type="text"]::-webkit-inner-spin-button,
.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner input[type="text"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s, color 0.15s;
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner > span::before {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner .spin-up::before {
    content: '+';
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner .spin-down::before {
    content: '\2212';
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner > span:hover {
    background: var(--accent, #c39);
    color: var(--white, #fff);
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner .spin-up {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px solid var(--border);
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner .spin-down {
    grid-column: 2;
    grid-row: 2;
}

/* --- Dependency chain icon --- */
.chainIcon {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    opacity: 0.4;
}

.col3.isDepended,
.col3_select.isDepended,
.col3_text.isDepended {
    position: relative;
}

.col3.isDepended .chainIcon,
.col3_select.isDepended .chainIcon,
.col3_text.isDepended .chainIcon {
    top: 2px;
    left: -14px;
    position: absolute;
    z-index: 10;
}

/* --- Characteristic list items (col1) --- */
.component-product-detail-container .item-configuration .fieldset-body .col1 {
    padding: 4px 0;
    font-size: 0.875rem;
    line-height: 22px;
    color: var(--text-secondary);
    border-bottom: none;
}

.component-product-detail-container .item-configuration .fieldset-body .col1:last-child {
    border-bottom: none;
}

.component-product-detail-container .item-configuration #param_additional_chars .label-block {
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .component-product-detail-container .item-configuration #param_additional_chars .fieldset-body {
        display: flex;
        flex-wrap: wrap;
        gap: 0 10px;
    }

    .component-product-detail-container .item-configuration #param_additional_chars .label-block {
        width: calc(50% - 5px);
        margin-right: 0;
    }
}

/* --- Responsive configurator --- */
@media (max-width: 991px) {
    .component-product-detail-container .item-configuration .label-block,
    .component-product-detail-container .item-configuration .config-item {
        width: 140px;
    }

    .component-product-detail-container .item-configuration #param_additional_chars .label-block {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .component-product-detail-container .item-configuration .label-block,
    .component-product-detail-container .item-configuration .config-item {
        width: 120px;
        margin-right: 6px;
    }

    .component-product-detail-container .item-configuration .label-block .label-container {
        height: 100px;
    }

    .component-product-detail-container .fieldset-block {
        padding: 16px 12px 12px;
    }

    .component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity {
        width: 88px;
        min-width: 88px;
    }

    .component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner {
        height: 44px;
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner input[type="text"] {
        font-size: 1rem;
    }

    .component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner > span::before {
        font-size: 18px;
    }
}

/* Dark mode configurator overrides */
:root.dark-mode .component-product-detail-container .item-configuration .label-block .label-container,
:root.dark-mode .component-product-detail-container .item-configuration .config-item .config-container {
    background: var(--bg-tertiary, #1a1a2e);
    border-color: var(--border);
}

:root.dark-mode .component-product-detail-container .item-configuration .label-block:hover .label-container,
:root.dark-mode .component-product-detail-container .item-configuration .label-block.checked .label-container {
    border-color: var(--accent, #c39);
}

:root.dark-mode .component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner {
    border-color: var(--border);
}

:root.dark-mode .component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner input[type="text"] {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border);
}

:root.dark-mode .component-product-detail-container .item-configuration #param_additional_chars .label-block .item-quantity .spinner > span {
    background: var(--bg-tertiary, #1a1a2e);
    color: var(--text-secondary);
}

/* =========================================================================
   TISSUE/CABINET COVER SELECT POPUP
   ========================================================================= */

/* Popup overlay */
.cabinet-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(2px);
}

/* Popup wrapper */
.cabinet-popup-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    max-width: 95vw;
    max-height: 95vh;
    overflow: auto;
}

/* Main popup container */
.tissue-select.popup {
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.3));
    width: 1100px;
    max-width: 95vw;
}

.tissue-select.popup .popup-inner {
    width: 100%;
    padding: 0;
}

/* Top section: product preview + selected options */
.tissue-select .tissue-top {
    display: flex;
    padding-bottom: 8px;
    gap: 12px;
    min-height: 0;
    align-items: center;
}

.tissue-product {
    display: none;
    flex-shrink: 0;
    width: 300px;
    text-align: center;
    line-height: 200px;
    overflow: hidden;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.tissue-product img {
    max-width: 300px;
    max-height: 200px;
    vertical-align: middle;
    object-fit: contain;
}

/* Hide technical cabinet cover inputs before configurator init */
#param_cabinets > input._cabinetCoversCategories-fieldset-block-input-for-add-js {
    display: none;
}

.tissue-params {
    flex: 1;
    min-width: 0;
}

/* Selected tissue items (shown at top) */
.tissue-params .tissue-selected {
    display: none;
    margin: 0 0 12px;
}

.fieldset-block .tissue-params .tissue-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: transparent;
    border-radius: var(--radius-sm);
}

.tissue-params .tissue-item,
.tissue-params .cabinet-tissue-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0;
}

/* Tissue picture thumbnail */
.tissue-params .tissue-picture,
.tissue-params .cabinet-tissue-picture {
    height: 110px;
    width: 132px;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: contain;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s;
    position: relative;
    overflow: hidden;
}

.tissue-params .tissue-picture.is-placeholder,
.tissue-params .cabinet-tissue-picture.is-placeholder {
    background: linear-gradient(135deg, #f4f4f4 0%, #ececec 100%);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
}

.tissue-params .tissue-picture.is-placeholder .tissue-name,
.tissue-params .cabinet-tissue-picture.is-placeholder .tissue-name {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0;
}

.tissue-params .tissue-picture:hover {
    border-color: var(--accent, #c39);
}

.tissue-select .tissue-top .tissue-params .selected .tissue-picture {
    border-color: var(--accent, #c39);
}

/* Tissue title */
.tissue-params .tissue-title {
    line-height: 22px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    padding: 4px 0;
    position: relative;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tissue-params .icon-close-gray {
    position: absolute;
    right: -4px;
    top: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.tissue-params .icon-close-gray:hover {
    opacity: 1;
}

.tissue-params .disabled .tissue-title {
    color: var(--text-muted);
    opacity: 0.5;
}

.tissue-params .disabled .icon-close-gray {
    opacity: 0.15;
    cursor: default;
}

/* Tissue prices */
.tissue-params .tissue-prices {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding-top: 2px;
}

.tissue-params .tissue-prices .price-value,
.tissue-params .tissue-prices .price-value i {
    color: var(--text);
    font-weight: 700;
}

/* Total block */
.tissue-params .total-block {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
    margin-top: 8px;
}

.tissue-select .tissue-top .tissue-params .total-block {
    margin-top: 0;
    padding: 8px 12px;
}

.tissue-params .total-block .total-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.tissue-params .total-block .total-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.tissue-params .confirm-block {
    padding: 10px 0 0;
    text-align: center;
}

/* Middle section: category tabs */
.tissue-select .tissue-middle {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}

.tissue-select .tissue-middle .categories-select {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: auto;
}

.tissue-select .tissue-middle .categories-select .tabs-hint {
    flex-shrink: 0;
    width: 190px;
    padding: 10px;
    background: var(--yellow, #fc0);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.4;
}

.tissue-select .tissue-middle .categories-select .categories-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    align-items: stretch;
    align-self: stretch;
    margin-bottom: -10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tissue-select .tissue-middle .categories-select .categories-tabs .categoty-tab {
    scroll-snap-align: start;
}

.tissue-select .tissue-middle .categories-select .categoty-tab {
    flex-shrink: 0;
    width: 71px;
    padding: 6px 4px;
    text-align: center;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tissue-select .tissue-middle .categories-select .categoty-tab:hover {
    background: var(--bg-tertiary);
}

.tissue-select .tissue-middle .categories-select .categoty-tab.selected {
    background: var(--surface-primary);
    border-color: var(--border);
    cursor: default;
}

.tissue-select .tissue-middle .categories-select .categoty-tab .category-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 28px;
}

.tissue-select .tissue-middle .categories-select .categoty-tab.selected .category-num {
    color: var(--accent, #c39);
}

.tissue-select .tissue-middle .categories-select .categoty-tab .category-price {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 20px;
}

/* Список разделов под табами (окно обивки — вынесен из .tissue-middle, как блок табов в cabinet) */
.tissue-select .tissue-select-sections {
    padding: 0 16px 10px;
    /*margin-top: -10px;*/
    background: var(--bg-secondary);
}

.tissue-select .tissue-select-sections .categories-list {
    border: 1px solid var(--border);
    border-top: none;
    background: var(--surface-primary);
    padding: 10px 14px;
    font-size: 0.8rem;
    line-height: 1.35;
    min-height: 0;
}

.tissue-select .tissue-select-sections .categories-list .categories-list-inner {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px 16px;
}

.tissue-select .tissue-select-sections .categories-list .js-link-div {
    flex: 0 0 auto;
}

.tissue-select .tissue-select-sections .categories-list a {
    color: var(--color-primary, #693);
    text-decoration: none;
}

.tissue-select .tissue-select-sections .categories-list a:hover {
    text-decoration: underline;
}

.tissue-select .tissue-select-sections .categories-list .selected span {
    color: var(--text);
    font-weight: 700;
    cursor: default;
}

.tissue-search-block {
    padding-top: 8px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
}

.tissue-search-block--standalone {
    padding-top: 0;
    border-top: none;
}

.tissue-search-block input[type="text"] {
    display: block;
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    outline: none;
    background: var(--surface-primary);
    color: var(--text);
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tissue-search-block input[type="text"]::placeholder {
    color: var(--text-muted);
}

.tissue-search-block input[type="text"]:focus {
    border-color: var(--magenta);
    box-shadow: 0 0 0 2px rgba(204, 51, 153, 0.15);
}

/* Bottom section: large tissue pictures grid */
.tissue-select .tissue-bottom {
    padding: 12px 16px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}

.tissue-select .tissue-bottom .tissues-pictures-wrapper {
    max-height: 500px;
    overflow-y: auto;
}

.tissue-select .tissue-bottom .tissues-pictures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.tissue-select .tissue-bottom .tissue-picture {
    height: 162px;
    width: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tissue-select .tissue-bottom .tissue-picture img {
    height: 162px;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}

.tissue-select .tissue-bottom .tissue-picture:hover {
    border-color: var(--accent, #c39);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tissue-select .tissue-bottom .tissue-picture.selected {
    border-color: var(--accent, #c39);
    border-width: 2px;
    cursor: default;
}

/* Tissue name overlay */
.tissue-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    color: var(--white, #fff);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 6px;
}

/* Dark mode tissue popup */
:root.dark-mode .cabinet-popup-overlay {
    background: rgba(0, 0, 0, 0.75);
}

:root.dark-mode .tissue-select.popup {
    background: var(--bg-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

:root.dark-mode .tissue-select .tissue-middle,
:root.dark-mode .tissue-select .tissue-select-sections,
:root.dark-mode .tissue-select .tissue-bottom {
    background: var(--bg-secondary);
}

:root.dark-mode .tissue-select .tissue-select-sections .categories-list {
    background: var(--bg-primary);
}

:root.dark-mode .tissue-select .tissue-middle .categories-select .categoty-tab.selected {
    background: var(--bg-primary);
}

/* =========================================================================
   TISSUE POPUP — MOBILE RESPONSIVE
   ========================================================================= */

@media (max-width: 767px) {
    /* Fullscreen popup on mobile */
    .popup-overlay,
    .cabinet-popup-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    .popup-wrapper,
    .cabinet-popup-wrapper {
        max-width: 100vw;
        max-height: 100vh;
        width: 100vw;
        height: 100vh;
        transform: none;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .tissue-select.popup {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    .tissue-select.popup,
    .popup-wrapper .popup {
        padding: 0;
    }

    .tissue-select.popup .popup-inner {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }

    /* Title — compact on mobile */
    .popup-title {
        font-size: 1.2rem;
        margin-bottom: 8px;
        padding: 12px 12px 0 12px;
    }

    .popup-warning--inline {
        display: block;
        margin-top: 2px;
        font-size: 1rem;
    }

    /* Close button — top right */
    .popup-close {
        top: 8px;
        right: 8px;
        z-index: 3;
    }

    /* Search — sticky at top */
    .tissue-search-block {
        flex-shrink: 0;
    }

    /* Hide tabs hint on mobile — saves space */
    .tissue-select .tissue-middle .categories-select .tabs-hint {
        display: none;
    }

    /* Category tabs — full width, no hint offset */
    .tissue-select .tissue-middle .categories-select {
        gap: 0;
    }

    .tissue-select .tissue-middle .categories-select .categories-tabs {
        flex: 1;
        min-width: 0;
    }

    /* Fabric grid — 2 columns on mobile */
    .tissue-select .tissue-bottom .tissues-pictures {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .tissue-select .tissue-bottom .tissue-picture {
        height: 120px;
    }

    .tissue-select .tissue-bottom .tissue-picture img {
        height: 120px;
    }

    /* Middle section — no fixed padding, use space */
    .tissue-select .tissue-middle {
        padding: 8px 12px;
        flex-shrink: 0;
    }

    .tissue-select .tissue-select-sections {
        padding: 0 12px 8px;
        flex-shrink: 0;
    }

    /* Bottom section — fills remaining space */
    .tissue-select .tissue-bottom {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px 12px;
    }

    /* Remove max-height constraint on mobile — let tissue-bottom handle scroll */
    .tissue-select .tissue-bottom .tissues-pictures-wrapper {
        max-height: none;
        overflow: visible;
    }

    /* Tissue top — sticky at bottom on mobile */
    .tissue-select .tissue-top {
        flex-shrink: 0;
        min-height: auto;
        padding: 8px 12px;
        border-top: 1px solid var(--border);
        order: 10;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .tissue-select .tissue-top .tissue-product {
        display: none;
    }

    .tissue-params .tissue-selected {
        display: flex !important;
    }

    .tissue-params .tissue-item,
    .tissue-params .cabinet-tissue-item {
        width: 99px;
    }

    .tissue-params .tissue-picture,
    .tissue-params .cabinet-tissue-picture {
        width: 98px;
        height: 88px;
    }

    .tissue-params .total-block {
        margin-top: 0;
        padding: 4px 0;
        background: transparent;
    }

    .tissue-params .confirm-block {
        padding: 0;
    }

    /* Hide tissue-name overlay on small previews */
    .tissue-select .tissue-top .tissue-picture .tissue-name {
        display: none;
    }

    /* Popup title section */
    .tissue-select .tissue-top ~ .popup-title,
    .tissue-select .popup-inner > .popup-title {
        flex-shrink: 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet: slightly smaller grid */
    .tissue-select .tissue-bottom .tissues-pictures {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .tissue-select .tissue-bottom .tissue-picture {
        height: 130px;
    }

    .tissue-select .tissue-bottom .tissue-picture img {
        height: 130px;
    }
}

/* =========================================================================
   SECTION TITLES & ITEM TITLES
   ========================================================================= */

/* Configurator section title (e.g., "Параметры товара") */
.component-product-detail-container .item-configuration .item-title {
    background: var(--accent, #c39);
    color: var(--white, #fff);
    line-height: 38px;
    font-size: 1rem;
    font-weight: 700;
    padding: 4px 20px;
    margin-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.component-product-detail-container .item-configuration .item-title.active {
    position: relative;
}

/* Configurator section content */
.component-product-detail-container .item-configuration .item-content {
    padding: 20px;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* =========================================================================
   UTILITY OVERRIDES
   ========================================================================= */

/* .hidden utility (used by configurator to hide selects, elements) */
.component-product-detail-container .hidden {
    display: none !important;
}

/* .d-none utility (Bootstrap-like, used by configuration block toggle) */
.component-product-detail-container .d-none {
    display: none !important;
}

/* .box-shadow utility — убрана тень внутри product detail */
.component-product-detail-container .box-shadow {
    box-shadow: none;
}

/* .def-cursor (default cursor for non-clickable labels) */
.component-product-detail-container .def-cursor {
    cursor: default;
}

/* .d-md-flex (flex on medium+) */
.component-product-detail-container .d-md-flex {
    display: flex;
}

/* .configuration wrapper (main configurator summary "Вы выбрали") */
.component-product-detail-container .configuration {
    padding: 12px 0;
}

.component-product-detail-container .configuration .title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.component-product-detail-container .configuration table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.component-product-detail-container .configuration table td {
    padding: 4px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.component-product-detail-container .configuration table td.t-right,
.component-product-detail-container .configuration table td.hereMayBeTRight {
    padding-left: 6px;
}

.component-product-detail-container .configuration table tr:last-child td {
    border-bottom: none;
}

/* =========================================================================
   SOCIAL SHARE ("Поделиться")
   ========================================================================= */

.component-product-detail-container .share__block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0 0;
}

.component-product-detail-container .share__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.component-product-detail-container .share__icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.component-product-detail-container .share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    padding: 0;
}

.component-product-detail-container .share__btn svg {
    display: block;
}

.component-product-detail-container .share__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--bg-light);
}

.component-product-detail-container .share__btn--vk:hover {
    color: #0077ff;
    border-color: #0077ff;
}

.component-product-detail-container .share__btn--ok:hover {
    color: #ee8208;
    border-color: #ee8208;
}

.component-product-detail-container .share__btn--telegram:hover {
    color: #28a5e5;
    border-color: #28a5e5;
}

.component-product-detail-container .share__btn--whatsapp:hover {
    color: #25d366;
    border-color: #25d366;
}

/* Dark mode */
:root.dark-mode .component-product-detail-container .share__btn {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text-muted);
}

:root.dark-mode .component-product-detail-container .share__btn:hover {
    background: var(--bg-light);
}

/* Override default skillline:share component styles (no colored badges, no Font Awesome) */
.component-product-detail-container .share__social {
    display: none;
}

.component-product-detail-container .social__block .title {
    display: none;
}

/* .additional-img (variant of additional image) */
.component-product-detail-container .additional-img {
    max-width: 100%;
    height: auto;
}

/* .displaynone utility (used by attention blocks) */
.component-product-detail-container .displaynone {
    display: none !important;
}

/* .clear utility for floats */
.component-product-detail-container .clear {
    clear: both;
}

/* .img-fluid utility (responsive images, replaces Bootstrap .img-fluid) */
.component-product-detail-container .img-fluid,
.component-product-detail-container img.img-fluid {
    max-width: 100%;
    height: auto;
}

/* .rounded-0 utility (no border-radius, used on buttons) */
.component-product-detail-container .rounded-0 {
    border-radius: 0 !important;
}

/* .text-center utility */
.component-product-detail-container .text-center {
    text-align: center;
}

/* .mb-2, .mb-3 margins */
.component-product-detail-container .mb-2 { margin-bottom: 0.5rem; }
.component-product-detail-container .mb-3 { margin-bottom: 1rem; }

/* Override Bootstrap-like row/col for mmb26 */
.component-product-detail-container .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.component-product-detail-container .col-12,
.component-product-detail-container .col-6,
.component-product-detail-container .col-md-4,
.component-product-detail-container .col-md-6 {
    padding: 0;
    box-sizing: border-box;
}

.component-product-detail-container .col-12 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.component-product-detail-container .col-6 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.component-product-detail-container .mb-1 { margin-bottom: 4px; }
.component-product-detail-container .mb-2 { margin-bottom: 8px; }
.component-product-detail-container .mb-3 { margin-bottom: 12px; }
.component-product-detail-container .mt-2 { margin-top: 8px; }
.component-product-detail-container .pt-1 { padding-top: 4px; }

.component-product-detail-container .d-flex {
    display: flex;
}

.component-product-detail-container .mr-auto { margin-right: auto; }
.component-product-detail-container .ml-auto { margin-left: auto; }
.component-product-detail-container .mr-2 { margin-right: 8px; }
.component-product-detail-container .ml-1 { margin-left: 4px; }

.component-product-detail-container .float-sm-left { float: left; }
.component-product-detail-container .float-sm-right { float: right; }

.component-product-detail-container .text-nowrap { white-space: nowrap; }
.component-product-detail-container .text-center { text-align: center; }
.component-product-detail-container .text-muted { color: var(--text-muted); }

.component-product-detail-container .d-inline-block { display: inline-block; }

/* displaynone helper */
.displaynone { display: none !important; }

/* clear */
.clear { clear: both; }

/* Alert overrides */
.component-product-detail-container .alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-size: 0.85rem;
}

.component-product-detail-container .alert-danger {
    background: #fde8e8;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* =========================================================================
   MOBILE FIXED BOTTOM BAR
   ========================================================================= */

.component-product-detail-mobile-fixedbottom-container {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 12px 16px 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--border);
}

.is-show-product-detail-mobile-fixedbottom .component-product-detail-mobile-fixedbottom-container {
    display: block;
}

.is-show-product-detail-mobile-fixedbottom body {
    padding-bottom: 3.4rem;
}

.component-product-detail-mobile-fixedbottom-content-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.component-product-detail-mobile-fixedbottom-price-container {
    flex: 1 1 auto;
}

.component-product-detail-mobile-fixedbottom-btn-container {
    flex: 0 0 auto;
}

.fb-price-layout {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-price-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    line-height: 1;
}

.fb-price-values {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.component-product-detail-mobile-fixedbottom-price-old {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    display: none;
    line-height: 1.2;
}

.component-product-detail-mobile-fixedbottom-price-old s,
.component-product-detail-mobile-fixedbottom-price-old s * {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px;
}

.component-product-detail-mobile-fixedbottom-price-old .rub {
    color: var(--text-muted);
}

.component-product-detail-mobile-fixedbottom-price-old.for-show {
    display: block;
}

.fb-price-actual {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.component-product-detail-mobile-fixedbottom-price {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--magenta) !important;
}

.fb-price-actual .rub {
    font-size: 0.85rem;
    color: var(--magenta);
}

.component-product-detail-mobile-fixedbottom-btn-container .btn {
    padding: 12px 28px !important;
    background: var(--green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background 0.15s !important;
}

.component-product-detail-mobile-fixedbottom-btn-container .btn:hover {
    background: var(--green-dark) !important;
    color: #fff !important;
}

/* =========================================================================
   TOOLTIP (jsTooltip)
   ========================================================================= */

.jsTooltip {
    cursor: help;
    position: relative;
}

/* TipTip Plugin Styles */
#tiptip_holder {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

#tiptip_holder.tip_top {
    padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
    padding-top: 5px;
}

#tiptip_holder.tip_right {
    padding-left: 5px;
}

#tiptip_holder.tip_left {
    padding-right: 5px;
}

#tiptip_content {
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    padding: 8px 12px;
    background: var(--text);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    max-width: 320px;
}

#tiptip_arrow,
#tiptip_arrow_inner {
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    height: 0;
    width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
    border-top-color: var(--text);
    bottom: -6px;
}

#tiptip_holder.tip_bottom #tiptip_arrow {
    border-bottom-color: var(--text);
    top: -6px;
}

#tiptip_holder.tip_right #tiptip_arrow {
    border-right-color: var(--text);
    left: -6px;
}

#tiptip_holder.tip_left #tiptip_arrow {
    border-left-color: var(--text);
    right: -6px;
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
    border-top-color: var(--text);
    bottom: -5px;
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
    border-bottom-color: var(--text);
    top: -5px;
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
    border-right-color: var(--text);
    left: -5px;
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
    border-left-color: var(--text);
    right: -5px;
}

.jsTooltip[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.75rem;
    font-weight: normal;
    white-space: normal;
    width: min(320px, calc(100vw - 20px));
    border-radius: var(--radius-sm);
    z-index: 100;
    box-shadow: var(--shadow-hover);
    line-height: 1.4;
}

.jsTooltip[data-title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 5px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text);
    z-index: 101;
}

/* Article container tooltip adjustments */
.component-product-detail-article-container .jsTooltip[data-title]:hover::after {
    left: auto;
    right: 0;
    transform: none;
    bottom: calc(100% + 8px);
    width: 280px;
    max-width: calc(100vw - 20px);
}

.component-product-detail-article-container .jsTooltip[data-title]:hover::before {
    left: auto;
    right: 8px;
    transform: none;
    bottom: calc(100% + 3px);
    border-top-color: var(--text);
    border-bottom-color: transparent;
}

/* =========================================================================
   RECOMMENDATIONS / RELATED / WATCHED
   ========================================================================= */

.component-product-detail-other-configurations-container,
.component-product-detail-gd-container {
    padding: 16px 0;
}

/* =========================================================================
   LOZAD (Lazy loading placeholder)
   ========================================================================= */

.lozad {
    opacity: 1;
}

.lozad[data-loaded="true"] {
    opacity: 1;
}

/* =========================================================================
   COLORBOX OVERRIDES
   ========================================================================= */

/* =========================================================================
   RESPONSIVE: TABLET (>= 476px)
   ========================================================================= */

@media (min-width: 476px) {
    .component-product-detail-images-content-container .slider .main-image {
        height: 340px;
    }

    .component-product-detail-images-content-container .slider .additional-images-wrapper {
        /* height auto already from base, just bump thumb size */
    }

    .component-product-detail-images-content-container .slider .additional-images .additional-image {
        width: 100px;
        height: 64px;
    }
}

/* =========================================================================
   RESPONSIVE: TABLET (>= 768px)
   ========================================================================= */

@media (min-width: 768px) {
    .component-product-detail-title-container h1 {
        font-size: 1.5rem;
    }

    .component-product-detail-images-content-container .slider .main-image {
        height: 380px;
    }

    /* Desktop fixed bottom bar — centered, max-width */
    .component-product-detail-mobile-fixedbottom-container {
        padding: 10px 24px 14px;
        border-radius: 12px 12px 0 0;
    }

    .component-product-detail-mobile-fixedbottom-content-container {
        max-width: 960px;
        margin: 0 auto;
    }

    .component-product-detail-mobile-fixedbottom-price-all,
    .component-product-detail-mobile-fixedbottom-price {
        font-size: 1.3rem !important;
    }

    .component-product-detail-mobile-fixedbottom-btn-container .btn {
        padding: 12px 40px !important;
    }

    .component-product-detail-mobile-fixedbottom-btn-container .fb-btn-text-mobile { display: none; }
    .component-product-detail-mobile-fixedbottom-btn-container .fb-btn-text-desktop { display: inline !important; }

    .component-product-detail-order-container .buy .button-wrapper .btn-primary,
    .component-product-detail-order-container .buy .button-wrapper .btn-success {
        display: inline-block;
        width: auto;
        padding: 12px 40px;
    }

}

/* =========================================================================
   RESPONSIVE: DESKTOP (>= 992px) — Two-column layout
   ========================================================================= */

@media (min-width: 992px) {
    .component-product-detail-container {
        padding-top: 12px;
    }

    .component-product-detail-cols-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 16px;
        padding: 0;
    }

    .component-product-detail-leftcol-container {
        order: 1;
        flex: 53 1 0;
        max-width: none;
        min-width: 0;
        padding-right: 0;
    }

    .component-product-detail-rightcol-container {
        order: 2;
        flex: 47 1 0;
        max-width: none;
        min-width: 0;
        padding-left: 0;
        margin: 0;
    }

    /* Desktop: show desktop containers, hide mobile */
    .component-product-detail-images-desktop-container {
        display: block;
    }

    .component-product-detail-images-container {
        display: none;
    }


    /* Desktop image slider — outer card handles shadow; inner is plain */
    .component-product-detail-images-content-container .component-product-gallery {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .component-product-detail-images-content-container .slider .main-image {
        height: 420px;
    }

    /* Show all thumbnails on desktop — flexbox wrap, no overflow clip */
    .component-product-detail-images-content-container .slider .additional-images-wrapper {
        overflow: visible;
        height: auto;
        margin-top: 10px;
        padding: 10px;
    }

    .component-product-detail-images-content-container .slider .additional-images {
        flex-wrap: wrap;
        gap: 8px;
    }

    .component-product-detail-images-content-container .slider .additional-images .additional-image {
        float: none;
        margin: 0;
        width: 80px;
        height: 60px;
    }

    /* Hide navigation on desktop (all thumbs visible) */
    .component-product-detail-images-content-container .slider .navigation {
        display: none;
    }

    /* Right column group styling */
    .component-product-detail-rightcol-container .component-product-detail-rightcol-group1-container {
        padding: 16px 20px 20px;
        box-shadow: var(--shadow);
        background: var(--surface-primary);
        border-radius: var(--radius);
        margin-bottom: 16px;
    }

    /* Params container styling */
    .component-product-detail-params-params-container {
        box-shadow: var(--shadow);
        background: var(--surface-primary);
        border-radius: var(--radius);
    }

    /* Order of sections in right column */
    .component-product-detail-rightcol-container .component-product-detail-delivery-container {
        order: 5;
    }

    .component-product-detail-rightcol-container .component-product-detail-description-container {
        order: 10;
    }

    /* Desktop image container min-height placeholder */
    .component-product-detail-images-desktop-container .component-product-detail-images-desktop-target-container:empty {
        min-height: 380px;
    }

    .component-product-detail-images-desktop-container .component-product-detail-block-container-inner {
        box-shadow: var(--shadow);
        background: var(--surface-primary);
        border-radius: var(--radius);
    }

    /* Categories section */
    .component-product-detail__category {
        padding-top: 20px;
    }

    .component-product-detail__category-title {
        font-size: 0.85rem;
    }
}

/* =========================================================================
   RESPONSIVE: LARGE DESKTOP (>= 1200px)
   ========================================================================= */

@media (min-width: 1200px) {
    .component-product-detail-images-content-container .slider .main-image {
        height: 480px;
    }
}

/* =========================================================================
   DARK MODE OVERRIDES
   ========================================================================= */

:root.dark-mode .component-product-detail-order-container .buy .price .actual {
    color: var(--text-primary);
}

:root.dark-mode .component-product-detail-container .attention::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23fbbf24' stroke-width='1.5'/%3E%3Cline x1='10' y1='9.5' x2='10' y2='14' stroke='%23fbbf24' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.5' r='0.9' fill='%23fbbf24'/%3E%3C/svg%3E");
}

:root.dark-mode .component-product-detail-container .attention1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5L1.5 17h17L10 2.5z' stroke='%23fbbf24' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8' x2='10' y2='12' stroke='%23fbbf24' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.5' r='0.9' fill='%23fbbf24'/%3E%3C/svg%3E");
}

:root.dark-mode .component-product-detail-delivery-container .attention::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23858' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12'/%3E%3C/svg%3E");
}

:root.dark-mode .component-product-detail-images-content-container .slider .main-image {
    background: var(--bg-secondary);
}

:root.dark-mode .component-product-detail-images-content-container .slider .additional-images .additional-image {
    border-color: var(--border);
}

:root.dark-mode .component-product-detail-container .item-ready-choose .item-choose {
    background: var(--surface-primary);
    border-color: var(--border);
}

:root.dark-mode .component-product-detail-container .item-ready-choose .item-choose.checked {
    border-color: var(--color-primary);
}

:root.dark-mode .component-product-detail-container .item-ready-choose .item-choose .item-title {
    background: var(--bg-light);
    border-color: var(--border);
}

:root.dark-mode .popup-wrapper {
    background: var(--surface-primary);
}

:root.dark-mode #creditDialog {
    background: var(--surface-primary);
    color: var(--text);
}

:root.dark-mode .credit-dialog__inner {
    background: var(--surface-primary);
}

:root.dark-mode .credit-dialog__step-icon {
    background: var(--bg-light);
}

:root.dark-mode .credit-dialog__bank {
    border-color: var(--border-color, #333);
}

/* =========================================================================
   LIGHTBOX (Vanilla JS — replaces jQuery Colorbox)
   ========================================================================= */

.v26-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.v26-lightbox-img {
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius);
    user-select: none;
}

.v26-lightbox-counter {
    color: #fff;
    font-size: 0.85rem;
    margin-bottom: 12px;
    opacity: 0.7;
}

.v26-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
    z-index: 2;
    line-height: 1;
    padding: 0;
}

.v26-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.v26-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
    line-height: 1;
    padding: 0;
}

.v26-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.v26-lightbox-prev {
    left: 16px;
}

.v26-lightbox-next {
    right: 16px;
}

/* Gallery pagination dots */
.v26-lightbox-page {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    margin: 0 3px;
    transition: background 0.15s;
}

.v26-lightbox-page.active {
    background: var(--color-primary);
}

/* Gallery prev/next arrows */
.v26-gallery-arrow {
    display: inline-block;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 10px;
    color: var(--text-secondary);
    transition: color 0.15s;
    user-select: none;
}

.v26-gallery-arrow:hover {
    color: var(--color-primary);
}

.v26-gallery-prev {
    margin-right: 8px;
}

.v26-gallery-next {
    margin-left: 8px;
}

/* Lightbox dark mode */
:root.dark-mode .v26-lightbox-overlay {
    background: rgba(0, 0, 0, 0.92);
}

:root.dark-mode .v26-lightbox-close:hover,
:root.dark-mode .v26-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* =========================================================================
   TOOLTIP (Vanilla JS — replaces Bootstrap tooltip)
   ========================================================================= */

.v26-tooltip {
    position: fixed;
    background: var(--text);
    color: var(--bg);
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    z-index: 10001;
    pointer-events: none;
    transform: translate(-50%, -100%);
    max-width: 220px;
    text-align: center;
    line-height: 1.3;
    white-space: normal;
    box-shadow: var(--shadow-hover);
}

.v26-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text);
}

/* Benefits (guarantee, help, delivery, charity) */
.component-product-detail-benefits-container .component-product-detail-block-container-inner {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts .clear {
    display: none;
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text);
    border-right: 1px solid var(--border);
    transition: background .15s;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts a:nth-child(even) {
    border-right: none;
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts a:nth-last-child(-n+2) {
    border-bottom: none;
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts a:hover {
    background: var(--bg-secondary);
}

/* Benefit icon */
.component-product-detail-benefits-container .page-catalog-item.item-discounts .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin: 0 !important;
    background-image: none !important;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-color: rgba(131, 176, 55, 0.1);
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts .icon::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--green);
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts .garant .icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts .help .icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts .delivery .icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.component-product-detail-benefits-container .page-catalog-item.item-discounts .charity .icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* Benefit text */
.component-product-detail-benefits-container .page-catalog-item.item-discounts .text {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    line-height: 1.35;
}

/* Benefits — dark mode icon background */
:root.dark-mode .component-product-detail-benefits-container .page-catalog-item.item-discounts .icon {
    background-color: rgba(131, 176, 55, 0.15);
}

/* === Moved from template.php inline styles === */

.notice__parent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 0;
    top: -12px;
    position: absolute;
}

.notice__parent .notice {
    position: static !important;
}

/* Modal for add to basket success */
#addToBasketDialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 90%;
    margin: 0;
}

#addToBasketDialog::backdrop {
    background: rgba(0,0,0,0.5);
}

.add-to-basket-modal {
    padding: 32px;
    text-align: center;
}

.add-to-basket-modal__icon {
    width: 64px;
    height: 64px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.add-to-basket-modal__icon svg {
    width: 32px;
    height: 32px;
    fill: white;
}

.add-to-basket-modal__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}

.add-to-basket-modal__text {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.5;
}

.add-to-basket-modal__buttons {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

@media (min-width: 480px) {
    .add-to-basket-modal__buttons {
        flex-direction: row;
        justify-content: center;
    }
}

.add-to-basket-modal__btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
    display: inline-block;
}

.add-to-basket-modal__btn--primary {
    background: #28a745;
    color: white;
}

.add-to-basket-modal__btn--primary:hover {
    background: #218838;
}

.add-to-basket-modal__btn--secondary {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #dee2e6;
}

.add-to-basket-modal__btn--secondary:hover {
    background: #e9ecef;
}

/* Quick Order Dialog (plain div, not <dialog>, so SmartCaptcha overlay stays on top) */
.quick-order-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999990;
}

.quick-order-dialog.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-order-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.quick-order-dialog__inner {
    position: relative;
    padding: 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 90%;
    margin: 0 16px;
}

.quick-order-dialog__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.quick-order-dialog__close:hover {
    background: #e0e0e0;
}

.quick-order-dialog__header {
    margin-bottom: 24px;
    padding-right: 40px;
}

.quick-order-dialog__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #333;
}

.quick-order-dialog__subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.quick-order-dialog__loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.quick-order-dialog__error {
    text-align: center;
    padding: 40px 20px;
    color: #dc3545;
}

/* Form styles inside dialog */
.quick-order-dialog form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quick-order-dialog .form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-order-dialog label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.quick-order-dialog input[type="text"],
.quick-order-dialog input[type="tel"],
.quick-order-dialog input[type="email"] {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.2s;
}

.quick-order-dialog input[type="text"]:focus,
.quick-order-dialog input[type="tel"]:focus,
.quick-order-dialog input[type="email"]:focus {
    outline: none;
    border-color: #4a90d9;
}

.quick-order-dialog .required-mark {
    color: #dc3545;
}

.quick-order-dialog form .order-form-button,
.quick-order-dialog .order-form-button:not(.btn):not(.btn-success):not(.custom-button) {
    margin-top: 8px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.quick-order-dialog .btn-submit,
.quick-order-dialog input[type="submit"],
.quick-order-dialog .custom-button,
.quick-order-dialog .btn-success {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: var(--green);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: none;
    text-shadow: none;
}

.quick-order-dialog .btn-submit:hover,
.quick-order-dialog input[type="submit"]:hover,
.quick-order-dialog .custom-button:hover,
.quick-order-dialog .btn-success:hover {
    background: var(--green-dark);
    box-shadow: none;
    text-shadow: none;
}

.quick-order-dialog .btn-submit:disabled,
.quick-order-dialog input[type="submit"]:disabled {
    background: var(--gray);
    cursor: not-allowed;
    box-shadow: none;
}

.quick-order-dialog .consent-text {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-top: 12px;
}

.quick-order-dialog .consent-text a {
    color: #4a90d9;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .quick-order-dialog__inner {
        padding: 24px 20px;
    }

    .quick-order-dialog__title {
        font-size: 20px;
    }
}

/* =========================================================================
   INTERESTED PRODUCTS (archive product recommendations)
   ========================================================================= */

.interested-products {
    margin: 16px 0;
}

.interested-products__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}

.interested-products__slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
}

.interested-products__slider .product-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
}