/* Product page v3 — pixel-perfect port of Figma node 10102:2153.
   Scoped to desktop (>=1066px); mobile keeps current styles.
   !important is used where it is necessary to win against
   - inline styles set by main.bundle.js on (re)load,
   - rules in the main minified style.css that ship later in the cascade. */

:root {
    --sure-accent: #e6420c;
    --sure-rosi-border: #e3e3e3;
    /* Lucide chevron-down (Figma "Medium" component, 16x16, stroke #130F0F) */
    --pdp-chev-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M2.66667 6L8 11.3333L13.3333 6' stroke='%23130F0F' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --pdp-chev-down-grey: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M2.66667 6L8 11.3333L13.3333 6' stroke='%238A8A8A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Bitrix dd-list JS animates `max-height` AND `margin-bottom` together —
   it sets inline `margin-bottom: 32px` when an accordion opens (animated
   from 0 → 32). We want zero margin so the open content sits flush
   against the next divider. Beats inline via !important (inline is
   non-important, so external !important wins). Applies on every
   viewport because the JS doesn't care about breakpoints. */
.product__content .product__buy-sizes.dd-list-content,
.product__content .product__info-content {
    margin: 0 !important;
}

/* Sticky-bottom cart panel target — mobile-only. Hide on every viewport
   by default; the mobile media query below re-enables it. Display:none
   keeps it out of the desktop grid entirely. */
.product__basket-actions-sticky {
    display: none;
}

/* === Desktop layout (Figma 1600 wide: 16 pad + 116 thumbs + 16 + 908 images + 544 panel) === */
@media (min-width: 1066px) {

    /* Main container — CSS Grid with left column (gallery + carousels
       auto-stack via row auto-flow) and right column (sticky product
       info spans every row so it stays visible while the user scrolls
       past the carousels). DOM stays in natural order
       (gallery → content → recommended[…]); grid placement does the
       column-swap without JS, so there is no first-paint shift.

       !important on display beats the inline `display: grid;
       grid-template-columns` set by main.bundle.js. */
    .container.product__container {
        display: grid !important;
        /* !important beats inline `grid-template-columns: 1fr 1fr 1fr`
           and `gap: 16px` that main.bundle.js + style.css write onto
           the container. Right column = min(512, 33% of container)
           with a 320 px floor — hits exactly 512 at the 1600 px
           container cap (≈ 32.6 %) and scales down on narrower
           desktops. */
        grid-template-columns: minmax(0, 1fr) clamp(320px, 33%, 512px) !important;
        /* row-gap stays 0 — spacing between gallery and carousels is
           done via margin on .product__recommended below. Reason:
           .product__content spans many implicit rows (so its sticky
           containing block covers the full left column); a non-zero
           row-gap would multiply across all those rows and inflate
           the container height by ~15000 px. */
        column-gap: 16px !important;
        row-gap: 0 !important;
        padding: 0 16px !important;
        align-items: start;
        box-sizing: border-box;
    }

    .container.product__container > .product__gallery-area {
        grid-column: 1;
        min-width: 0;
    }

    .container.product__container > .product__recommended {
        grid-column: 1;
        min-width: 0;
        /* Figma 10102:2168 — 52 px vertical gap between gallery and
           the first carousel, and between successive carousels. */
        margin-top: 52px;
    }

    .container.product__container > .product__content {
        grid-column: 2;
        /* Span every implicit row so the sticky panel's containing
           block covers the full left-column height (gallery +
           carousels) — otherwise sticky would release once the user
           scrolled past row 1. */
        grid-row: 1 / span 999;
    }

    .container.product__container > .product__main-image,
    .container.product__container > .product__swiper {
        display: none !important;
    }

    /* Gallery area: thumbs (116) + 16 gap + main (908). Flex so thumbs can be
       sticky inside this taller container (covers lookbook height ~ 700+ vs row). */
    .product__gallery-area {
        display: flex;
        gap: 16px;
        /* `stretch` (default) makes the thumb strip column match the
           main photo column's height so both sides terminate flush. */
        align-items: stretch;
        width: 100%;
    }

    /* ----- Thumb strip — 116 wide, full height of the main photo column.
       3 thumbs visible at once, each sized to (column_height - gaps) / 3
       so the strip matches the main photos baseline-to-baseline.
       Active indicator (Line 29) is a 1px black vertical line on the LEFT
       of the active thumb. ----- */
    .product__lookbook {
        /* 32 px top padding mirrors .product__lookbook-main so the
           first thumb aligns with the top of the first main photo. */
        padding-top: 32px;
        display: flex;
        flex-direction: column;
        flex: 0 0 116px;
        min-width: 116px;
    }

    /* Strip scroll-snap was removed because it fought with programmatic
       scrollTop assignments from the arrow buttons (both `mandatory` and
       `proximity` modes snapped the strip back to 0). Arrow navigation aligns
       to thumb boundaries via JS math; wheel/touchpad scrolls freely. */
    .product__lookbook-thumbs {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        list-style: none;
        /* Fill the lookbook column (whose height matches the main
           photo column via flex `align-items: stretch`). flex: 1 1 0
           gives this strip zero natural size so the row height is
           driven by the main photo column, not the (huge) full thumb
           list — then the strip stretches to fill the resolved row. */
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        scroll-behavior: smooth;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    .product__lookbook-thumbs.--scrollable {
        overflow-y: auto;
    }

    .product__lookbook-thumbs > * {
        flex-shrink: 0;
    }

    .product__lookbook-thumbs::-webkit-scrollbar { display: none; }

    /* Custom always-visible scrollbar overlay (Figma 10102:2199 «Line 29») —
       absolute-positioned 1 px grey track on the LEFT side of the strip with a
       black thumb whose height + position are driven by JS based on scrollTop. */
    .product__lookbook-scrollbar {
        position: absolute;
        left: 0;
        /* Offset by the lookbook's padding-top so the rail starts
           level with the first thumb (not above it, level with the
           lookbook column's top edge). */
        top: 32px;
        width: 1px;
        height: calc(100% - 32px);
        background: var(--grey-color);
        z-index: 1;
        pointer-events: none;
    }

    .product__lookbook-scrollbar-thumb {
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        background: var(--main-color);
        height: 48px;
        will-change: transform, height;
    }

    /* Scroll arrows (Figma 10102:2197) — overlay on top/bottom-center of the strip,
       positioned over the 1st/5th visible thumb. */
    .product__lookbook { position: relative; }

    .product__lookbook-scroll {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--main-white-color);
        border: 1px solid var(--grey-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        z-index: 2;
        transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
    }

    .product__lookbook-scroll svg {
        width: 12px;
        height: 12px;
        color: var(--main-color);
    }

    .product__lookbook-scroll:hover:not(:disabled) {
        border-color: var(--main-color);
    }

    .product__lookbook-scroll:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
    }

    .product__lookbook-scroll--up {
        /* 32px = .product__lookbook padding-top (см. строку 113), +16px чтобы
           кнопка стояла внутри полосы миниатюр симметрично нижней
           (.product__lookbook-scroll--down → bottom: 16px). */
        top: 48px;
        transform: translateX(-50%) rotate(180deg);
    }

    .product__lookbook-scroll--up:hover:not(:disabled) {
        transform: translateX(-50%) rotate(180deg) scale(1.08);
    }

    .product__lookbook-scroll--down {
        bottom: 16px;
    }

    .product__lookbook-scroll--down:hover:not(:disabled) {
        transform: translateX(-50%) scale(1.08);
    }

    .product__lookbook-scroll:disabled {
        opacity: 0;
        pointer-events: none;
    }

    .product__lookbook-thumb {
        width: 108px;
        /* Small desktop (1066–1199): 3 thumbs fill the strip.
           Each = (strip_height − 2×8 px gap) / 3. The 5-thumb variant
           kicks in at min-width: 1200 (see media query below). */
        flex: 0 0 calc((100% - 16px) / 3);
        background-color: var(--light-grey);
        overflow: hidden;
        cursor: pointer;
        position: relative;
        transition: opacity .2s ease;
        border: 0;
        padding: 0;
        margin: 0 0 0 8px;
    }

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

    /* `--active` is tracked in JS for arrow navigation but intentionally has
       no visual indicator (per latest design decision). All thumbs render the
       same regardless of active state. */

    .product__lookbook-thumb:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
    }

    .product__lookbook-thumbs:focus-visible {
        outline: none;
    }

    .product__lookbook-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding-top: 32px;
        flex: 1 1 908px;
        min-width: 0;
    }

    .product__lookbook-main .product__lookbook-cell {
        aspect-ratio: 446 / 709;
        background-color: var(--light-grey);
        position: relative;
        overflow: hidden;
    }

    .product__lookbook-main .product__lookbook-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .product__lookbook-cell--full {
        grid-column: 1 / -1;
    }

    /* Video play button (Figma 10102:2156): 32x32 white circle with grey border,
       top-left of poster cell. Logic is shared with the total-look popup video
       button via data-action="tl-video-open" (see js/pages/total-look.js). */
    .product__lookbook-play {
        position: absolute;
        left: 16px;
        top: 16px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--main-white-color);
        border: 1px solid var(--grey-color);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        transition: transform .2s ease;
    }

    .product__lookbook-play svg {
        width: 12px;
        height: 12px;
        margin-left: 1px; /* optical centering of the triangle */
    }

    .product__lookbook-play:hover {
        transform: scale(1.05);
    }

    /* Chevron-down indicator below thumbs strip — appears when there are more thumbs
       to scroll to (Figma 10102:2197). */
    .product__lookbook-thumbs-more {
        align-self: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--main-white-color);
        border: 1px solid var(--grey-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4px;
        flex-shrink: 0;
    }

    .product__lookbook-thumbs-more svg {
        width: 12px;
        height: 12px;
        color: var(--main-color);
    }

    /* "Купить весь образ" overlay on the first lookbook cell — Figma 10102:2159.
       Pinned bottom-left at x=16/y=bottom-16, with user icon + text. */
    .product__lookbook-buy-look {
        position: absolute;
        left: 16px;
        bottom: 16px;
        background: var(--main-white-color);
        color: var(--main-color);
        border: 0;
        padding: 8px 16px;
        border-radius: 999px;
        font: 500 14px/1 NunitoSans, sans-serif;
        cursor: pointer;
        white-space: nowrap;
        z-index: 2;
        box-shadow: 0 2px 12px rgba(19, 15, 15, .08);
        transition: opacity .2s ease, transform .2s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 32px;
    }

    .product__lookbook-buy-look svg {
        width: 16px;
        height: 16px;
        color: var(--main-color);
        flex-shrink: 0;
    }

    .product__lookbook-buy-look:hover {
        opacity: 1;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(19, 15, 15, .12);
    }

    /* ----- Right control panel — sticky inside the flex container.
       Sized to 512px (Figma product control width); align-self: start
       so its long accordion bodies don't stretch the flex row. ----- */
    .product__content {
        padding: 32px 0 0 0 !important;
        position: sticky !important;
        top: var(--header-height-desktop, 82px) !important;
        flex: 0 0 512px;
        max-width: 512px;
        width: 100% !important;
        background: var(--main-white-color);
        align-self: flex-start;
        z-index: 1;
    }

    .product__content > .product__path,
    .product__content > .product__path-min,
    .product__content > .product__scrollbar {
        display: none !important;
    }

    /* Title row: title left, share+heart right. Gap-16 to article per Figma 10102:2206. */
    .product__content .product__header-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
    }

    .product__content .product__header {
        font: 500 18px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        letter-spacing: 0 !important;
        margin: 0;
        flex: 1;
        min-width: 0;
    }

    .product__content .product__header-icons {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        width: auto !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .product__content .product__header-icon {
        width: 20px !important;
        height: 20px !important;
        padding: 0;
        background: none;
        border: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .product__content .product__header-icon svg {
        width: 20px;
        height: 20px;
    }

    /* yashare button — we'd ideally render our own minimal share icon. Hide its widget. */
    .product__content .product__header-icons .ya-share2 {
        display: none !important;
    }

    /* Info-top: article (small grey), price (18 medium), 4-pay chip, color label, swatches */
    .product__content .product__info-top {
        margin-top: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .product__content .product__article-wrapper {
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey) !important;
        margin: 0 0 16px !important;
    }

    .product__content .product__article {
        color: inherit;
    }

    .product__content .product__price {
        font: 500 18px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        margin: 0 0 4px !important;
        /* display:flex on the wrapper collapses whitespace text nodes between the
           hidden meta tags and the price <span>, which were creating phantom 16 px
           line-boxes and inflating outer height to 37 px instead of ~21 px. */
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        align-items: baseline;
        padding: 0 !important;
    }

    .product__content .product__price .product__price-new {
        display: inline !important;
        font: inherit !important;
        color: inherit !important;
    }

    .product__content .product__price .product__price-old {
        display: none !important;
    }

    .product__content .product__price-new {
        font-weight: 500;
        font-size: 18px;
    }

    .product__content .product-divide-price {
        margin: 0 0 21px !important;
        padding: 0;
    }

    .product__content .product-divide-price-inner {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey) !important;
        cursor: pointer;
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .product__content .product-divide-content {
        white-space: nowrap;
    }

    .product__content .product-divide-content span {
        font-weight: 400;
    }

    .product__content .product-divide-price-arrow {
        width: 16px;
        height: 16px;
        background: none !important;
        position: relative;
        flex-shrink: 0;
        margin-left: 0;
    }

    /* nuke the original two-line "arrow" pseudos (template_styles.css line 1754) */
    .product__content .product-divide-price-arrow::before,
    .product__content .product-divide-price-arrow::after {
        background: none !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transform: none !important;
        right: auto !important;
        top: 50% !important;
        left: auto !important;
        width: 0 !important;
        height: 0 !important;
        content: "" !important;
        transition: none !important;
        border: 0 !important;
    }

    /* Right-pointing chevron (chevron-down rotated -90) for the 4-pay chip arrow. */
    .product__content .product-divide-price-arrow::after {
        position: absolute;
        right: 0 !important;
        top: 50% !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        background: var(--pdp-chev-down-grey) no-repeat center / 16px !important;
        transform: rotate(-90deg) !important;
    }

    /* Color label + 24px swatches */
    .product__content .product__color-wrapper {
        font: 500 14px / 1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        margin: 0 0 8px !important;
    }

    .product__content .product__color {
        font-weight: inherit;
        /* Figma 10102:2224 — "Цвет: черный" sentence case, no transform. */
        text-transform: none;
    }

    .product__content .product-card__colors.--big {
        gap: 8px !important;
        margin: 0 0 24px !important;
        align-items: center !important;
        padding: 2px 0 !important; /* leave room for the active ring outset */
    }

    .product__content .product-card__colors.--big .product-card__color {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0;
        padding: 2px;
        margin: 0 !important;
        border-radius: 50% !important;
        overflow: hidden;
        position: relative;
        /* background: var(--light-grey); */
    }

    .product__content .product-card__colors.--big .product-card__color img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
        border-radius: 50%;
    }

    /* Active swatch — Figma 10102:2226: 1 px stroke #D3D3D3 around the circle.
       Inner image has 2 px padding (см. .product-card__color rule above) so
       there's visible breathing room between border and color image. */
    .product__content .product-card__color.--active {
        border: 1px solid #D3D3D3 !important;
        box-shadow: none !important;
    }

    .product__content .product-card__colors.--big .product-card__color:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
    }

    .product__content .product__side-panel-open-btn:focus-visible,
    .product__content .product__info-btn:focus-visible,
    .product__content .product__buy-up-text:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 4px;
    }

    /* "Замеры изделия" accordion row */
    .product__content .product__side-panel-open-btn {
        width: 100% !important;
        background: none !important;
        border: 0 !important;
        border-top: 1px solid var(--grey-color) !important;
        padding: 24px 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        font: 500 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        text-align: left;
        position: relative;
        /* Figma 10102:2236 — full row is 64px tall (24 + 16 line-box + 24). */
        min-height: 64px;
        box-sizing: border-box;
    }

    .product__content .product__side-panel-open-btn::before,
    .product__content .product__side-panel-open-btn::after {
        content: "" !important;
        background: none !important;
        border-radius: 0 !important;
        position: absolute;
    }

    .product__content .product__side-panel-open-btn::before {
        display: none !important;
    }

    .product__content .product__side-panel-open-btn::after {
        right: 0 !important;
        top: 50% !important;
        left: auto !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        border: 0 !important;
        background: var(--pdp-chev-down) no-repeat center / 16px !important;
        /* Figma 10102:2237 — chevron points right (rotated -90deg) because the
           row opens a side panel, not an inline accordion. */
        transform: rotate(-90deg) !important;
        transition: transform .15s ease !important;
    }

    .product__content .product__side-panel-open-btn.--active::after {
        transform: rotate(90deg) !important;
    }

    /* Override legacy global .side-panel-open-btn__text rule from style.css that
       forces 12px uppercase and draws its own chevron via ::before/::after. */
    .product__content .side-panel-open-btn__text {
        font: 500 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color) !important;
        text-transform: none !important;
        text-align: left;
        letter-spacing: normal !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .product__content .side-panel-open-btn__text::before,
    .product__content .side-panel-open-btn__text::after {
        display: none !important;
        content: none !important;
    }

    /* Buy block container */
    .product__content .product__buy-block.dd-list-wrapper {
        margin: 0 !important;
    }

    .product__content .product__buy-block.dd-list-wrapper::before,
    .product__content .product__buy-block.dd-list-wrapper::after {
        display: none !important;
    }

    /* Size accordion title */
    .product__content .product__buy-up-text.dd-list-tittle {
        font: 500 14px/1.15 NunitoSans, sans-serif !important;
        text-transform: none !important;
        color: var(--main-color);
        padding: 24px 0 !important;
        border-top: 1px solid var(--grey-color) !important;
        position: relative;
        margin: 0 !important;
    }

    .product__content .product__buy-up-text.dd-list-tittle::before {
        display: none !important;
    }

    .product__content .product__buy-up-text.dd-list-tittle::after {
        background: var(--pdp-chev-down) no-repeat center / 16px !important;
        right: 0 !important;
        top: 50% !important;
        left: auto !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
        border: 0 !important;
        transform: none !important;
        transition: transform .15s ease !important;
    }

    .product__content .product__buy-up-text.dd-list-tittle.--active::after {
        transform: rotate(180deg) !important;
        margin-top: -8px;
    }

    /* Sizes list — Figma 10102:3284 (mobile) / desktop: vertical rows
       (size label left, stock-status text right). Full-width rows with
       1px bottom dividers, no chip borders. */
    .product__content .sku-sizes-list {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0 0 16px !important;
        margin: 0;
        list-style: none;
        width: 100%;
    }

    .product__content .product__buy-size-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 40px;
        border: 0 !important;
        border-top: 1px solid var(--grey-color) !important;
        margin: 0 !important;
        background: transparent !important;
        color: var(--main-color);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        transition: opacity .2s ease;
        padding: 12px 0 !important;
        position: relative;
        text-align: left;
    }

    .product__content .sku-sizes-list .product__buy-size-btn:first-child {
        border-top: 0 !important;
    }

    .product__content .product__buy-size-btn::before,
    .product__content .product__buy-size-btn::after {
        display: none !important;
        content: none !important;
    }

    .product__content .product__buy-size-btn:hover:not([data-active=disabled]) {
        background: transparent !important;
        color: var(--main-color) !important;
        opacity: .7;
    }

    .product__content .product__buy-size-btn.selected,
    .product__content .product__buy-size-btn.--active {
        background: transparent !important;
        color: var(--main-color) !important;
        font-weight: 500 !important;
    }

    .product__content .product__buy-size-btn[data-active=disabled] {
        color: var(--chips-unselected) !important;
        background: transparent !important;
        cursor: default;
    }

    .product__content .product__buy-size {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: inherit;
        letter-spacing: 0.03em;
    }

    .product__content .product__buy-size-count {
        display: inline-block !important;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey);
        text-transform: lowercase;
    }

    /* Add-to-cart chocolate button + inline price.
       Don't touch `display` here — Bitrix toggles bloombox-* siblings via inline
       style="display:none". Instead use display via a tighter selector below. */
    .product__content .product__buy-open-btn,
    .product__content .product__buy-open-btn.product-item-detail-buy-button {
        background: var(--chocolate-color) !important;
        color: var(--main-white-color) !important;
        height: auto !important;
        padding: 20px 24px !important;
        margin: 0 !important;
        border-radius: 2px !important;
        text-transform: none !important;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0 !important;
        cursor: pointer;
        width: 100% !important;
        transition: opacity .2s ease;
        overflow: visible !important;
        background-image: none !important;
    }

    /* Inline flex layout for the visible button (no !important on display). */
    .product__content .product__buy-open-btn.js-open-sizes,
    .product__content .product__buy-open-btn:not([style]) {
        display: flex;
    }

    .product__content .product__buy-open-btn:hover {
        opacity: .9;
    }

    .product__content .product__buy-open-btn-text {
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        text-transform: none !important;
        opacity: 1 !important;
        font-size: 14px !important;
    }

    .product__content .product__buy-open-btn-price {
        font: 500 14px/1.15 NunitoSans, sans-serif !important;
        margin-left: 4px !important;
        color: var(--main-white-color);
    }

    /* "Купить в образе со скидкой -X %" link */
    .product__content .product__buy-look-link {
        display: block !important;
        text-align: center;
        font: 400 14px / 1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        text-decoration: underline;
        letter-spacing: 0.03em;
        margin: 16px auto 13px !important;
        cursor: pointer;
        background: none !important;
        border: 0 !important;
        padding: 8px 0 !important;
        width: auto;
    }

    .product__content .product__buy-look-link:hover {
        opacity: .8;
    }

    /* Description-block accordions — top + bottom border. */
    .product__content .product__info-block.dd-list-wrapper {
        position: relative;
        margin: 0 !important;
    }

    .product__content .product__info-block.dd-list-wrapper::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        background: var(--grey-color) !important;
        z-index: 0;
    }

    .product__content .product__info-block.dd-list-wrapper::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        top: auto;
        background: var(--grey-color) !important;
        z-index: 0;
    }

    .product__content .product__info-block.dd-list-wrapper + .product__info-block.dd-list-wrapper::before {
        display: none !important;
    }

    .product__content .product__info-btn.dd-list-tittle {
        font: 400 14px/normal NunitoSans, sans-serif !important;
        text-transform: none !important;
        padding: 16px 0 !important;
        color: var(--main-color);
        position: relative;
        margin: 0 !important;
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .product__content .product__info-btn.dd-list-tittle::before {
        display: none !important;
    }

    .product__content .product__info-btn.dd-list-tittle::after {
        background: var(--pdp-chev-down) no-repeat center / 16px !important;
        right: 0 !important;
        top: 50% !important;
        left: auto !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
        border: 0 !important;
        transform: none !important;
        transition: transform .15s ease !important;
    }

    .product__content .product__info-btn.dd-list-tittle.--active::after {
        transform: rotate(180deg) !important;
        margin-top: -8px;
    }

    /* Accordion body: 14px Regular, secondary-text grey, 1.5 line height per Figma
       (body paragraphs inside Описание / Состав / Уход / Доставка).
       box-sizing:border-box so the inherited `max-height:0` from .dd-list-content
       collapses the entire element (including padding) when closed — otherwise
       the bottom padding would still show. */
    .product__content .product__info-content {
        font: 400 14px/1.5 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Normalised paragraphs + bullet list inside an opened accordion (see
       the JS in template.php that converts legacy <br>-separated text). */
    .product__content .product__info-content p {
        margin: 0 0 8px !important;
        padding: 0;
    }
    .product__content .product__info-content p:last-child {
        margin-bottom: 0 !important;
    }

    .product__content .product__info-content ul {
        list-style: none !important;
        margin: 8px 0 !important;
        padding: 0 !important;
    }
    .product__content .product__info-content ul:last-child {
        margin-bottom: 0 !important;
    }

    .product__content .product__info-content li {
        position: relative;
        margin: 0 0 6px !important;
        padding: 0 0 0 16px !important;
        list-style: none !important;
    }
    .product__content .product__info-content li:last-child {
        margin-bottom: 0 !important;
    }
    .product__content .product__info-content li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        color: inherit;
        font-weight: inherit;
    }

    /* Bottom padding only when the accordion is opened (JS adds --active to title). */
    .product__content .product__info-btn.dd-list-tittle.--active + .product__info-content {
        padding: 0 0 16px !important;
    }

    /* Bitrix DETAIL_TEXT often ends with stray trailing <br> tags (legacy
       editor output) that leave a phantom blank line under the body and
       inflate the visual gap to the next accordion title. Collapse them. */
    .product__content .product__info-content > br:last-child {
        display: none;
    }
    .product__content .product__info-content > br + br {
        display: none;
    }

    .product__content .product__info-content p {
        margin: 0 0 8px !important;
    }

    .product__content .product__info-content p:last-child {
        margin-bottom: 0 !important;
    }

    /* The original style.css uses .--list-type with bullet pseudo-elements that
       were tuned for the legacy uppercase 12px text. Reset for the new design. */
    .product__content .product__info-content.--list-type {
        display: block !important;
        gap: 0 !important;
    }

    .product__content .product__info-content.--list-type br + br {
        display: none;
    }

    /* ----- Bottom carousels — "Завершить образ" / "Вам может понравиться".
       Both now use the popup-cards / bloombox-popup template (same as the
       total-look popup), wrapped in .product__recommended.
       Figma 10102:2168 — 1040 wide, 52 px vertical gap to gallery and between
       carousels, 24 px title→slider, 16 px card gap. ----- */
    .product__recommended {
        width: 100%;
        margin: 0;
    }

    /* Horizontal margins zeroed; vertical spacing (52 px gap to
       gallery / between carousels) comes from `margin-top: 52px` set
       earlier in this stylesheet on the same selector — keep it so
       legacy `.product__recommended { margin: ... }` rules from
       style.css don't bleed through. */
    .container.product__container > .product__recommended {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    /* Figma 10102:2153 — 40 px of WHITE space below the last carousel,
       then the grey footer background. The footer is white with 75 px own
       padding-top; the grey `.footer__background` lives inside. Override
       footer padding to exactly 40 px on PDP so the visible white gap
       between carousel and grey footer area matches Figma.
       `~` (general sibling) because .product__side-panel sits between MAIN
       and FOOTER. */
    main.product ~ .footer {
        padding-top: 40px;
    }
}

/* === Mid/wide desktop variant (≥1200 px). Above this width the
   thumb strip shows 5 thumbs (per Figma 10102:2191) instead of the
   3-thumb fit used on narrower desktops. Each thumb takes
   (strip_height − 4×8 px gap) / 5. === */
@media (min-width: 1200px) {
    .container.product__container > .product__gallery-area .product__lookbook-thumb {
        flex: 0 0 calc((100% - 32px) / 5);
    }
}

/* === Mobile (<1066px) — Figma node 10102:2566 (iPhone 375 CATALOG).
   The v3 lookbook is desktop-only; on mobile .product__swiper handles photo
   display. Typography/spacing rules below mirror Figma mobile mockup
   (16px gutter, 14px secondary text, 16px headings, 64px-tall accordion
   rows, etc.). !important is used selectively to win against the legacy
   minified style.css that ships later in the cascade and against inline
   styles set by main.bundle.js on resize. === */
@media (max-width: 1065px) {
    .product__gallery-area {
        display: none !important;
    }

    /* ----- Container: full-width, no horizontal padding (sections pad themselves).
       Keep display from main.bundle.js — overriding to `block` breaks
       sticky positioning on .product__swiper. */
    .container.product__container {
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ----- Gallery (mobile swiper) — Figma 10102:2570: 375×581 image area
       with bottom row (16px from edge) holding play button (left) and
       "Купить весь образ" button (right). The swiper picks up `position:
       sticky; top: 56px` from somewhere in the legacy stack — kill it on
       mobile so the gallery scrolls away naturally, and absolute children
       (video + buy-look) anchor relative to its actual box, not its
       sticky-fixed position. ----- */
    .product__swiper {
        position: relative !important;
        top: auto !important;
        margin: 0 !important;
    }

    /* Pagination scrollbar under the gallery — Figma 10102:2575/2576:
       1px grey track + 1px dark thumb whose width equals (1 / slidesCount)
       of the full track. Swiper.js updates the thumb's inline transform
       and width on slide change since the gallery has `scrollbar` enabled. */
    .product__swiper .product__scrollbar.swiper-scrollbar {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 1px !important;
        background: var(--grey-color) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        z-index: 4;
    }

    .product__swiper .product__scrollbar.swiper-scrollbar .swiper-scrollbar-drag {
        background: var(--main-color) !important;
        border-radius: 0 !important;
        height: 1px !important;
        top: 0 !important;
    }

    /* Video play button — Figma 10102:2587: 32×32 white circle with grey
       border, bottom-left, lucide/play icon 12×12 centred. The legacy SVG
       in the template draws its own outer circle stroke — hide it so only
       the play triangle shows. */
    .product__swiper .product__video-button.product__video-button--slider {
        top: auto !important;
        right: auto !important;
        bottom: 16px !important;
        left: 16px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        background: var(--main-white-color) !important;
        border: 1px solid var(--grey-color) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 3;
    }

    .product__swiper .product__video-button--slider svg {
        width: 12px;
        height: 12px;
    }

    .product__swiper .product__video-button--slider svg circle {
        display: none;
    }

    .product__swiper .product__video-button--slider svg path {
        stroke: var(--main-color);
        stroke-width: 8;
        fill: var(--main-color);
    }

    /* "Купить весь образ" overlay — Figma 10102:2590: bottom-right pill,
       white bg, 1px grey border, image icon + label. Rendered only when
       the product has an associated look (PHP `$hasLook`). */
    .product__swiper-buy-look {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 32px;
        padding: 0 16px;
        background: var(--main-white-color);
        color: var(--main-color);
        border: 1px solid var(--grey-color);
        border-radius: 300px;
        font: 400 14px/1.15 NunitoSans, sans-serif;
        letter-spacing: 0.03em;
        cursor: pointer;
        white-space: nowrap;
    }

    .product__swiper-buy-look svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* ----- Product content panel (title, info, accordion) ----- */
    .product__content {
        padding: 24px 16px 0 !important;
        margin: 0 !important;
        background: var(--main-white-color);
    }

    .product__content > .product__path,
    .product__content > .product__path-min,
    .product__content > .product__scrollbar {
        display: none !important;
    }

    /* Title row: title left, share+heart icons right. Gap-16 to article below. */
    .product__content .product__header-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .product__content .product__header {
        font: 500 16px/1.25 NunitoSans, sans-serif !important;
        color: var(--main-color);
        letter-spacing: 0 !important;
        margin: 0 !important;
        flex: 1;
        min-width: 0;
        text-transform: none;
    }

    .product__content .product__header-icons {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        width: auto !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .product__content .product__header-icon {
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .product__content .product__header-icon svg {
        width: 20px;
        height: 20px;
    }

    .product__content .product__header-icons .ya-share2 {
        display: none !important;
    }

    /* Info-top stack: article (small grey), price (16 medium), 4-pay row,
       color label, swatches. */
    .product__content .product__info-top {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .product__content .product__article-wrapper {
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey) !important;
        margin: 0 0 16px !important;
    }

    .product__content .product__article {
        color: inherit;
    }

    .product__content .product__price {
        font: 500 16px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        margin: 0 0 8px !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        align-items: baseline;
    }

    .product__content .product__price .product__price-new {
        display: inline !important;
        font: inherit !important;
        color: inherit !important;
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    .product__content .product__price .product__price-old {
        display: none !important;
    }

    /* 4-pay chip */
    .product__content .product-divide-price {
        margin: 0 0 24px !important;
        padding: 0;
    }

    .product__content .product-divide-price-inner {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey) !important;
        cursor: pointer;
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .product__content .product-divide-content { white-space: nowrap; }
    .product__content .product-divide-content span { font-weight: 400; }

    .product__content .product-divide-price-arrow {
        width: 16px;
        height: 16px;
        background: none !important;
        position: relative;
        flex-shrink: 0;
        margin-left: 0;
    }

    .product__content .product-divide-price-arrow::before,
    .product__content .product-divide-price-arrow::after {
        background: none !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transform: none !important;
        right: auto !important;
        top: 50% !important;
        left: auto !important;
        width: 0 !important;
        height: 0 !important;
        content: "" !important;
        border: 0 !important;
        transition: none !important;
    }

    .product__content .product-divide-price-arrow::after {
        position: absolute;
        right: 0 !important;
        top: 50% !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        background: var(--pdp-chev-down-grey) no-repeat center / 16px !important;
        transform: rotate(-90deg) !important;
    }

    /* Color label + 24px swatches */
    .product__content .product__color-wrapper {
        font: 500 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        margin: 0 0 16px !important;
    }

    .product__content .product__color {
        font-weight: inherit;
        text-transform: none;
    }

    .product__content .product-card__colors.--big {
        display: flex !important;
        gap: 8px !important;
        margin: 0 0 24px !important;
        align-items: center !important;
        padding: 2px 0 !important;
        flex-wrap: wrap;
    }

    .product__content .product-card__colors.--big .product-card__color {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0;
        padding: 2px;
        margin: 0 !important;
        border-radius: 50% !important;
        overflow: hidden;
        position: relative;
    }

    .product__content .product-card__colors.--big .product-card__color img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
        border-radius: 50%;
    }

    .product__content .product-card__color.--active {
        border: 1px solid var(--grey-color) !important;
        box-shadow: none !important;
    }

    /* "Замеры изделия" — 64px row with top border + right chevron */
    .product__content .product__side-panel-open-btn {
        width: 100% !important;
        background: none !important;
        border: 0 !important;
        border-top: 1px solid var(--grey-color) !important;
        padding: 24px 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        text-align: left;
        position: relative;
        min-height: 64px;
        box-sizing: border-box;
    }

    .product__content .product__side-panel-open-btn::before,
    .product__content .product__side-panel-open-btn::after {
        content: "" !important;
        background: none !important;
        border-radius: 0 !important;
        position: absolute;
    }

    .product__content .product__side-panel-open-btn::before { display: none !important; }

    .product__content .product__side-panel-open-btn::after {
        right: 0 !important;
        top: 50% !important;
        left: auto !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        border: 0 !important;
        background: var(--pdp-chev-down) no-repeat center / 16px !important;
        transform: rotate(-90deg) !important;
        transition: transform .15s ease !important;
    }

    .product__content .product__side-panel-open-btn.--active::after {
        transform: rotate(90deg) !important;
    }

    .product__content .side-panel-open-btn__text {
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color) !important;
        text-transform: none !important;
        text-align: left;
        letter-spacing: normal !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .product__content .side-panel-open-btn__text::before,
    .product__content .side-panel-open-btn__text::after {
        display: none !important;
        content: none !important;
    }

    /* Buy block container — no extra outer borders, lets size accordion own its border. */
    .product__content .product__buy-block.dd-list-wrapper {
        margin: 0 !important;
    }

    .product__content .product__buy-block.dd-list-wrapper::before,
    .product__content .product__buy-block.dd-list-wrapper::after {
        display: none !important;
    }

    /* "Выберите размер" — must look identical to the accordion rows
       below (Описание/Состав/Доставка). Same font, padding, min-height,
       border treatment so it doesn't stand out as a separate section. */
    .product__content .product__buy-up-text.dd-list-tittle {
        font: 400 14px/normal NunitoSans, sans-serif !important;
        text-transform: none !important;
        color: var(--main-color);
        padding: 16px 0 !important;
        border-top: 1px solid var(--grey-color) !important;
        position: relative;
        margin: 0 !important;
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .product__content .product__buy-up-text.dd-list-tittle::before { display: none !important; }

    .product__content .product__buy-up-text.dd-list-tittle::after {
        background: var(--pdp-chev-down) no-repeat center / 16px !important;
        right: 0 !important;
        top: 50% !important;
        left: auto !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
        border: 0 !important;
        transform: none !important;
        transition: transform .15s ease !important;
    }

    .product__content .product__buy-up-text.dd-list-tittle.--active::after {
        transform: rotate(180deg) !important;
        margin-top: -8px;
    }

    /* Sizes list — same as desktop (vertical rows). The desktop rules
       above already cover this; mobile inherits. Explicit overrides
       below ensure mobile-specific tuning sticks. */
    .product__content .sku-sizes-list {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0 0 16px !important;
        margin: 0;
        list-style: none;
        width: 100%;
    }

    .product__content .product__buy-size-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 40px;
        border: 0 !important;
        border-top: 1px solid var(--grey-color) !important;
        margin: 0 !important;
        background: transparent !important;
        color: var(--main-color);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        padding: 12px 0 !important;
        position: relative;
        text-align: left;
    }

    .product__content .sku-sizes-list .product__buy-size-btn:first-child {
        border-top: 0 !important;
    }

    .product__content .product__buy-size-btn::before,
    .product__content .product__buy-size-btn::after {
        display: none !important;
        content: none !important;
    }

    .product__content .product__buy-size-btn:hover:not([data-active=disabled]) {
        background: transparent !important;
        color: var(--main-color) !important;
        opacity: .7;
    }

    .product__content .product__buy-size-btn.selected,
    .product__content .product__buy-size-btn.--active {
        background: transparent !important;
        color: var(--main-color) !important;
        font-weight: 500 !important;
    }

    .product__content .product__buy-size-btn[data-active=disabled] {
        color: var(--chips-unselected) !important;
        background: transparent !important;
        cursor: default;
    }

    .product__content .product__buy-size {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: inherit;
        letter-spacing: 0.03em;
    }

    .product__content .product__buy-size-count {
        display: inline-block !important;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey);
        text-transform: lowercase;
    }

    /* Inline cart/look buttons are hidden on mobile — the sticky bottom
       bar is the single primary CTA per the variant used on PDP. The
       inline container stays in DOM (display:none, not removed) so the
       cloning JS can still read its innerHTML and forward synthetic
       clicks to the original buttons (Bitrix `.js-open-sizes`,
       `.js-buy-btn` jQuery handlers stay bound to the originals). */
    .product__content .product__basket-actions {
        display: none !important;
    }

    /* Sticky-duplicate of the buy actions — Figma 10102:3283 (total-look
       detail). On mobile we want BOTH: inline buttons stay where they
       are in the flow AND a fixed-bottom mirror is always reachable.
       The sticky container is populated by JS that clones the inline
       buttons and forwards clicks back to the originals (so Bitrix
       cart/buy-look handlers fire on a single source of truth). */

    .product__basket-actions-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: var(--main-white-color);
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
        border-top: 1px solid var(--grey-color);
        box-shadow: 0 -2px 16px rgba(19, 15, 15, .04);
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .product__basket-actions-sticky:empty {
        display: none;
    }

    .product__basket-actions-sticky .product__buy-open-btn,
    .product__basket-actions-sticky .product__buy-open-btn.product-item-detail-buy-button {
        background: var(--chocolate-color) !important;
        color: var(--main-white-color) !important;
        height: auto !important;
        padding: 16px 24px !important;
        margin: 0 !important;
        border-radius: 2px !important;
        text-transform: none !important;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0 !important;
        cursor: pointer;
        width: 100% !important;
        background-image: none !important;
    }

    .product__basket-actions-sticky .product__buy-open-btn.js-open-sizes,
    .product__basket-actions-sticky .product__buy-open-btn:not([style*="display:none"]) {
        display: flex;
    }

    .product__basket-actions-sticky .product__buy-open-btn-text {
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        text-transform: none !important;
        opacity: 1 !important;
    }

    .product__basket-actions-sticky .product__buy-open-btn-price {
        font: 500 14px/1.15 NunitoSans, sans-serif !important;
        margin-left: 4px !important;
        color: var(--main-white-color);
    }

    .product__basket-actions-sticky .product__buy-look-link {
        display: block !important;
        text-align: center;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        text-decoration: underline;
        letter-spacing: 0.03em;
        margin: 0 auto !important;
        cursor: pointer;
        background: none !important;
        border: 0 !important;
        padding: 12px 0 0 !important;
        width: auto;
    }

    /* Add-to-cart chocolate button — 16px vertical padding for mobile (vs 20px desktop) */
    .product__content .product__buy-open-btn,
    .product__content .product__buy-open-btn.product-item-detail-buy-button {
        background: var(--chocolate-color) !important;
        color: var(--main-white-color) !important;
        height: auto !important;
        padding: 16px 24px !important;
        margin: 0 !important;
        border-radius: 2px !important;
        text-transform: none !important;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0 !important;
        cursor: pointer;
        width: 100% !important;
        transition: opacity .2s ease;
        overflow: visible !important;
        background-image: none !important;
    }

    .product__content .product__buy-open-btn.js-open-sizes,
    .product__content .product__buy-open-btn:not([style]) {
        display: flex;
    }

    .product__content .product__buy-open-btn-text {
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        text-transform: none !important;
        opacity: 1 !important;
        font-size: 14px !important;
    }

    .product__content .product__buy-open-btn-price {
        font: 500 14px/1.15 NunitoSans, sans-serif !important;
        margin-left: 4px !important;
        color: var(--main-white-color);
    }

    /* "Купить в образе со скидкой -X %" link — centered, underlined, 16px above */
    .product__content .product__buy-look-link {
        display: block !important;
        text-align: center;
        font: 400 14px/1.15 NunitoSans, sans-serif !important;
        color: var(--main-color);
        text-decoration: underline;
        letter-spacing: 0.03em;
        margin: 16px auto 0 !important;
        cursor: pointer;
        background: none !important;
        border: 0 !important;
        padding: 16px 0 8px !important;
        width: auto;
    }

    /* Accordion blocks — top + bottom 1px borders, 64px-tall titles, chevron toggle.
       No margin-top — the first info-block sits flush against the size
       selector above (its 1px border doubles as the separator), so the
       four rows (Выберите размер / Описание / Состав / Доставка) read as
       a single accordion group per Figma 10102:2600. */
    .product__content .product__info-block.dd-list-wrapper {
        position: relative;
        margin: 0 !important;
    }

    .product__content .product__info-block.dd-list-wrapper::before,
    .product__content .product__info-block.dd-list-wrapper::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--grey-color) !important;
        z-index: 0;
    }

    .product__content .product__info-block.dd-list-wrapper::before { top: 0; }
    .product__content .product__info-block.dd-list-wrapper::after { bottom: 0; top: auto; }

    .product__content .product__info-block.dd-list-wrapper + .product__info-block.dd-list-wrapper::before {
        display: none !important;
    }

    .product__content .product__info-btn.dd-list-tittle {
        font: 400 14px/normal NunitoSans, sans-serif !important;
        text-transform: none !important;
        padding: 16px 0 !important;
        color: var(--main-color);
        position: relative;
        margin: 0 !important;
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .product__content .product__info-btn.dd-list-tittle::before { display: none !important; }

    .product__content .product__info-btn.dd-list-tittle::after {
        background: var(--pdp-chev-down) no-repeat center / 16px !important;
        right: 0 !important;
        top: 50% !important;
        left: auto !important;
        margin-top: -8px;
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
        border: 0 !important;
        transform: none !important;
        transition: transform .15s ease !important;
    }

    .product__content .product__info-btn.dd-list-tittle.--active::after {
        transform: rotate(180deg) !important;
        margin-top: -8px;
    }

    /* Accordion body — compact mobile spacing: open content sits flush
       under the title and gets a slim 12 px bottom pad before the next
       block's divider. */
    .product__content .product__info-content {
        font: 400 14px/1.5 NunitoSans, sans-serif !important;
        color: var(--secondary-text-grey) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Normalised paragraphs + bullet list inside an opened accordion (see
       the JS in template.php that converts legacy <br>-separated text). */
    .product__content .product__info-content p {
        margin: 0 0 8px !important;
        padding: 0;
    }
    .product__content .product__info-content p:last-child {
        margin-bottom: 0 !important;
    }

    .product__content .product__info-content ul {
        list-style: none !important;
        margin: 8px 0 !important;
        padding: 0 !important;
    }
    .product__content .product__info-content ul:last-child {
        margin-bottom: 0 !important;
    }

    .product__content .product__info-content li {
        position: relative;
        margin: 0 0 6px !important;
        padding: 0 0 0 16px !important;
        list-style: none !important;
    }
    .product__content .product__info-content li:last-child {
        margin-bottom: 0 !important;
    }
    .product__content .product__info-content li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        color: inherit;
        font-weight: inherit;
    }

    .product__content .product__info-btn.dd-list-tittle.--active + .product__info-content {
        padding: 0 0 16px !important;
    }

    .product__content .product__info-content p { margin: 0 0 8px !important; }
    .product__content .product__info-content p:last-child { margin-bottom: 0 !important; }

    .product__content .product__info-content.--list-type {
        display: block !important;
        gap: 0 !important;
    }

    .product__content .product__info-content.--list-type br + br { display: none; }

    /* ----- Bottom carousels — "Завершить образ" / "Аксессуары" /
       "Вам может понравиться". Each one is full-width with 16px gutters,
       36px above (top gap from previous block) and 36px between. ----- */
    .product__recommended {
        margin: 36px 0 0 !important;
        padding: 0 16px !important;
        width: 100%;
        max-width: none !important;
    }

    .product__recommended + .product__recommended {
        margin-top: 36px !important;
    }

    .product__recommended .popup-cards__title,
    .product__recommended .bloom-box-popup__category-title {
        font: 500 16px/normal NunitoSans, sans-serif !important;
        color: var(--main-color);
        margin: 0 0 24px !important;
        padding: 0 !important;
        text-transform: none;
    }

    /* Ensure the swiper inside the carousel runs edge-to-edge (no extra padding) */
    .product__recommended .bloom-box-popup__category-swiper {
        margin: 0;
    }
}

/* === Tablet (744-1065px) — single-column layout: gallery on top
   full-width, product info below, inline cart buttons visible, no
   sticky bottom bar. Without these overrides Bitrix's inline
   `grid-template-columns: 1fr 1fr` from main.bundle.js draws a tight
   2-column grid that mobile styles aren't designed for, and the legacy
   .product__swiper renders all 18 slides stacked vertically because the
   Swiper.js init runs in a too-narrow column. Boundary matches
   Bitrix's 744+ swiper-grid breakpoint and our JS swap range. === */
@media (min-width: 744px) and (max-width: 1065px) {

    /* Reset container to plain block flow — kills the inline grid. */
    .container.product__container {
        display: block !important;
        grid-template-columns: none !important;
        padding: 0 16px !important;
        max-width: 100% !important;
    }

    /* Gallery — hide desktop lookbook (designed for ≥1066) AND the
       legacy `.product__main-image` (which Bitrix renders ~656px tall
       even with the `--none` state class on tablet widths, containing
       phantom pagination dots). Use the legacy .product__swiper. At
       tablet widths Bitrix's main.bundle.js enables the Swiper.js Grid
       module (`swiper-grid swiper-grid-column`) which stacks all slides
       vertically — we kill that with CSS below. */
    .container.product__container > .product__gallery-area,
    .container.product__container > .product__main-image {
        display: none !important;
    }
    .product__swiper {
        margin: 0 !important;
        max-width: 100%;
        max-height: 80vh;
        overflow: hidden !important;
    }
    .product__swiper .swiper-wrapper {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        height: 80vh !important;
        max-height: 80vh !important;
    }
    .product__swiper .swiper-slide {
        flex-shrink: 0 !important;
        width: 100% !important;
        height: 80vh !important;
        margin: 0 !important;
    }
    .product__swiper .swiper-slide .product__img-wrapper,
    .product__swiper .swiper-slide a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .product__swiper .swiper-slide img.product__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* Pagination dots from Bitrix's grid swiper config render vertically
       on the left — hide them; the .product__scrollbar we moved into the
       swiper covers the same job horizontally under the photo. */
    .product__swiper .product__pagination,
    .product__swiper .swiper-pagination {
        display: none !important;
    }

    /* Scrollbar on tablet — sits at the very bottom inside the swiper
       (was previously pushed -8px below with overflow:visible on the
       swiper, but that broke horizontal slide clipping because the
       wrap is only one slide wide and adjacent slides need .swiper's
       overflow:hidden to clip cleanly). Base .swiper-scrollbar rule
       hides it; only max-width:744px overrides to visible — explicitly
       show it on tablet too. */
    .product__swiper .product__scrollbar.swiper-scrollbar {
        visibility: visible !important;
        bottom: 0 !important;
        height: 4px !important;
        background: var(--grey-color) !important;
        border-radius: 2px !important;
    }
    .product__swiper .product__scrollbar.swiper-scrollbar .swiper-scrollbar-drag {
        height: 4px !important;
        background: var(--main-color) !important;
        border-radius: 2px !important;
    }

    /* Product info: block flow below the gallery, padded for breathing room. */
    .product__content {
        padding: 32px 0 0 !important;
        margin: 0 !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        background: var(--main-white-color);
    }

    /* Show inline cart + look-link as on desktop, hide the mobile sticky bar. */
    .product__content .product__basket-actions {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        margin: 0;
    }

    .product__basket-actions-sticky {
        display: none !important;
    }

    /* main.product padding-bottom — reset (no sticky bar to clear). */
    main.product {
        padding-bottom: 0;
    }

    /* Carousels — full content width with 16px gutters. */
    .product__recommended {
        margin: 36px 0 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }
}