.ds-module-item.product-layout .ds-ai-disclosure {
    display: none !important;
}
.left-section .button-transparent img {
    border-radius: 0;
}

.py-4px {
    padding-top: 4px;
    padding-bottom: 4px;
}

#oct-infobar span.contact-top-bar {
    display: flex;
    gap: 5px;
}

#oct-infobar span.contact-top-bar a {
    display: flex;
    align-items: center;
    gap: 15px;
}

#oct-infobar button#oct-infobar-btn {
    display: none;
}

#oct-infobar .info-bar {
    display: flex;
    gap: 60px;
}

#oct-infobar .oct-infobar-text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}


body footer.ds-footer {
    background: rgb(28 28 28);
    padding-top: 50px !important;
}

body footer.ds-footer .container-xl {
    display: flex;
    gap: 30px;
    padding-right: 30px;
}

body footer.ds-footer .container-xl .footer-col {
    flex: 1 1 0;
    min-width: 0;
}

body footer.ds-footer .container-xl .footer-col:first-child {
    flex: 0 0 170px;
    margin-right: 15px;
}

body footer.ds-footer .container-xl .footer-col.wide {
    flex: 1.2 1 0;
}

.google-reviews,
.trust-reviews {
    padding: 12px 16px;
    border: 1px solid rgba(239, 239, 239, 0.2);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

span.star-co {
    color: rgba(212, 168, 55, 1);
    font-weight: 500;
    margin-bottom: 5px;
    font-family: 'Noto Sans';
}

.stars span.ds-module-rating-star {
    width: 1.7rem;
    height: 1.7rem;
}

.powered-by img.img-fluid {
    max-width: 60px;
    margin-left: .15rem;
}

.powered-by,
.trust-caption {
    color: #EFEFEF;
}

body footer.ds-footer .container-xl .footer-col h4,
body footer.ds-footer .container-xl .footer-col h3,
body footer.ds-footer .container-xl .footer-col .col-header {
    color: #EFEFEF;
    font-family: 'Noto Serif';
    font-weight: 400;
    font-size: 1.5rem;
}

body footer.ds-footer .container-xl .footer-col a {
    color: #EFEFEF;
    margin-bottom: 12px;
    display: inline-block;
}

.email-newsletter input::placeholder {
    color: #EFEFEF;
}

.email-newsletter input {
    background: transparent;
    color: #EFEFEF;
    border: 1px solid #EFEFEF33;
    padding: 16px 24px;
    width: 100%
}

footer button.button-transparent svg path {
    stroke: #EFEFEF
}

.email-newsletter button.button.button-transparent svg {
    width: 33px;
    height: auto;
}

.email-newsletter button.button.button-transparent {
    position: absolute;
    top: 8px;
    right: 10px;
}

.copy-row .powered-co {
    font-size: .8rem;
}

.powered-pay-co .ds-footer-payments-item {
    border: 0;
}

.copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid #696969;
    padding-top: 10px;
    margin-top: 30px;
}

.email-newsletter span.news-notice {
    font-size: .8rem;
    margin-top: 10px;
    display: block;
    color: #EFEFEF;
}

.lang-switch button {
    color: #eeee;
    padding: 14px 21px;
    border: 1px solid #3c3c3c;
    border-radius: 0;
    font-weight: 400;

}

.lang-switch {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.lang-switch button svg {
    margin-left: 10px
}

.lang-switch button svg path {
    fill: #3c3c3c;
}

.google-reviews span.text-count {
    color: #EFEFEF;
}

footer .button-footer span {
    text-decoration: none
}

footer .button-footer {
    color: #EFEFEF;
    text-decoration: none;
    font-family: 'Noto Sans';
    padding: 13px 18px;
    border: 1px solid #EFEFEF33;
}

svg.light-stroke>* {
    stroke: #EFEFEF !important;
}

footer .button-footer svg.ds-arrow-down path {
    stroke: #EFEFEF;
}

footer .text-light {
    color: #FFFFFF
}

.footer-logo.d-flex {
    width: 100%;
}

.footer-col .ds-dropdown-box .ds-dropdown {
    top: auto;
    bottom: 100%;
}

.footer-col .lang-switch form button {
    width: 100%;
    margin-left: 0px;
    white-space: nowrap;
    text-align: left;
}

.mobile-footer-menu-trigger {
    display: none
}

@media (max-width:576px) {
    body footer.ds-footer .container-xl {
        gap: 25px;
    }

    body footer.ds-footer .container-xl .footer-col,
    body footer.ds-footer .container-xl .footer-col.wide,
    body footer.ds-footer .container-xl .footer-col:first-child {
        flex: 0 0 100%;
        width: 100%;
    }

    #oct-policy button {
        min-width: 100% !important;
    }

    body footer.ds-footer .container-xl {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        padding: 0px 15px;
    }

    body footer.ds-footer {
        padding-top: 25px !important;
    }

    body footer.ds-footer .container-xl .footer-col:first-child>div {
        margin: auto;
    }

    .copy-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .google-reviews .mobile-review {
        display: flex;
        justify-content: center;
        gap: 15px;
        align-items: center;
    }

    .google-reviews,
    .trust-reviews,
    .footer-logo {
        width: 100% !important
    }

    .trust-reviews {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 15px;
        align-items: center;
    }

    body .trust-reviews>img,
    .trust-reviews>.mobile-review {
        max-width: 195px;
        width: 49% !important;
    }

    .footer-head .mobile-footer-menu-trigger {
        display: block;
        padding-left: 15px;
        /*for finger*/
    }

    .footer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body ul.foo-menu>li:first-child {
        padding-top: 15px;
    }

    body ul.foo-menu {
        max-height: 0px;
        overflow: hidden;
        transition: all .3s ease;
        visibility: hidden;
        margin-top: 0px !important;
    }

    ul.foo-menu.show {
        max-height: 500px;
        transition: all .4s ease;
        visibility: visible;
    }

    span.mobile-footer-menu-trigger svg {
        transition: all .4s ease-out;
    }

    span.mobile-footer-menu-trigger.in svg {
        transform: rotate(315deg);
        transition: all .4s ease-in;
    }

    .email-newsletter {
        margin-top: 15px;
    }

    .ds-footer-socials {
        border: 0;
        padding-top: 0px;
    }

    .ds-footer-socials a,
    .ds-footer-socials ul li {
        margin-bottom: 0px !important;
    }

    .copy-row .powered-co {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
    }

    .copy-links a.ms-3:first-child {
        margin-left: 0px !important;
    }

    .copy-links {
        margin-bottom: .35rem;
    }

    .powered-pay-co .ds-footer-payments {
        flex-wrap: nowrap;
    }

    .powered-pay-co {
        padding-top: 1rem;
    }

    /* header */
    .oct-infobar-mobile-nav {
        display: flex !important;
        position: absolute;
        left: 0px;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
        height: 0px;
    }

    .oct-infobar-mobile-nav button.button {
        top: 10px;
        padding: 6px 10px;
    }

    #oct-infobar .info-bar .slick-slide a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    #oct-infobar .oct-infobar-text {
        z-index: 1
    }

    #oct-infobar .info-bar {
        width: 100%;
        overflow: hidden;
        text-align: center;
    }

    #oct-infobar .info-bar .slick-current.slick-slide {
        opacity: 1;
        transition: all .3s ease;
    }

    #oct-infobar .info-bar .slick-slide {
        opacity: 0;
        transition: all .3s ease;
    }

    div#slideshow-plus-0 .ds-slideshow-item {
        text-align: center;
    }

    div#mobileMenuBox .ds-menu-catalog-item li.ds-menu-maincategories-item:hover>a {
        color: rgba(212, 168, 55, 1);
    }

    body div#mobileMenuBox li.ds-menu-maincategories-item:hover>a:after {
        display: none;
    }

    div#mobileMenuBox .ds-menu-catalog-item {
        padding: 1rem;
    }

    div#mobileMenuBox .contacts-and-social img.img-fluid {
        width: 32px;
    }

    div#mobileMenuBox .mobile-user-settings .lang .ds-dropdown-box .ds-dropdown,
    div#mobileMenuBox .mobile-user-settings .currency .ds-dropdown-box .ds-dropdown {
        bottom: 37px;
        z-index: 999999;
        height: auto;
        top: auto;
    }

    div#mobileMenuBox .mobile-user-settings .ds-dropdown-toggle span {
        text-decoration: none;
    }

    div#mobileMenuBox .mobile-user-settings .lang .button-transparent,
    div#mobileMenuBox .mobile-user-settings .currency .button-transparent {
        border: 1px solid #D2D2D2;
        padding: 9px 16px;
        text-decoration: none;
        overflow: visible
    }

    div#mobileMenuBox .mobile-user-settings .ds-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 0px 10px;
    }

    div#mobileMenuBox .mobile-user-settings {
        border-top: var(--ds-main-border);
        margin-top: 15px;
        display: flex !important;
        flex-direction: column;
        padding: 0.75rem;
        z-index: 99999;
        position: relative;
        background: #fff;
    }

    div#oct-infobar {
        z-index: 1;
    }

    div#mobileMenuBox .mobile-user-settings .item-1>div {
        width: 50%;
    }

    div#mobileMenuBox .mobile-user-settings .item-1 {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    div#mobileMenuBox .contacts-and-social img.img-instagram {
        width: 38px;
    }

    div#mobileMenuBox .contacts-and-social .pos-instagram {
        padding-top: 1.5px !important;
    }

    div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex .ds-bannerplus .ds-bannerplus-item {
        padding: .5rem;
    }

    div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex .ds-bannerplus.row {
        margin-right: 0px;
        margin-left: 0px;
    }

    /* Mega menu banner image should keep natural aspect ratio */
    .ds-megamenu-child-wrapper .ds-bannerplus-box img {
        height: auto;
    }

    .ds-megamenu-child-wrapper .ds-bannerplus-box {
        width: 100%;
    }

    div#mobileMenuBox .ds-menu-catalog-inner,
    div#mobileMenuBox .ds-megamenu-child-wrapper {
        height: calc(100dvh - 190px);
    }

    div#mobileMenuBox .ds-menu-catalog {
        height: calc(100dvh - 130px);
    }

    div#mobileMenuBox .ds-megamenu-child-wrapper .ds-megamenu-children .ds-megamenu-children-item a img {
        max-width: 32px;
        height: auto;
    }


}

@media (max-width:767.9px) {

    .ds-category-sort {
        margin-right: calc(-.5* var(--bs-gutter-x));
        margin-left: calc(-.5* var(--bs-gutter-x));
        padding-right: calc(.5* var(--bs-gutter-x)) !important;
        padding-left: calc(.5* var(--bs-gutter-x)) !important;
    }

    .modal.right .modal-dialog {
        width: 100%;
    }

    .right-section .ds-header-user-button .ds-dropdown.position-absolute {
        left: 0px !important;
        width: 100%;
        right: auto !important;
    }
}

@media (min-width:768px) {
    .right-section .ds-header-user-button .ds-dropdown.position-absolute {
        transform: translate(-50%, 0);
    }
}

@media (max-width:1199px) {
    div#mobileMenuBox {
        height: 100vh;
        overflow-y: auto;
    }

    div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex {
        flex-direction: column;
    }

    div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex>.col-4,
    div#mobileMenuBox .ds-megamenu-child-wrapper .ds-megamenu-children {
        width: 100%;
    }
}

@media (min-width:576px) and (max-width:992px) {
    body footer.ds-footer .container-xl .footer-col {
        width: 50%;
        margin-bottom: 15px;
    }

    body footer.ds-footer .container-xl {
        display: flex;
        flex-wrap: wrap;
        padding: 0px 15px;
    }

    body footer.ds-footer .container-xl .footer-col:first-child>div {
        max-width: 230px
    }

    .copy-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .powered-pay-co {
        padding-top: 25px;
    }
}

.two-columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    column-gap: 1.5rem;
    /* расстояние между колонками */
}

.fsz-42 {
    font-size: 3rem !important;
}

.left-section .ds-dropdown-toggle {
    width: max-content;
}

ul.ds-faq-column-nav .ds-account-column-nav-item-icon {
    display: none !important;
}

.custom-select {
    position: relative;
    user-select: none;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 10px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    /* border-radius: 6px; */
    background: #fff;
}

.custom-select-trigger img {
    margin-right: 8px;
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 180px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

.custom-option {
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.custom-option img {
    margin-right: 8px;
}

.custom-option:hover,
.custom-option.selected {
    background: #f5f5f5;
}

.custom-select.open .custom-options {
    display: block;
}

/* Keep the language menu inside short viewports and replace the platform's
   bulky arrowed scrollbar without changing other custom selects. */
#currencyModal .custom-language .custom-options {
    max-height: clamp(10rem, 30dvh, 13.5rem);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--ds-light-text-color, rgba(80, 80, 80, 1)) var(--ds-primary-light-color-light, #f9f8f5);
}

#currencyModal .custom-language .custom-options::-webkit-scrollbar {
    width: 8px;
}

#currencyModal .custom-language .custom-options::-webkit-scrollbar-track {
    background: var(--ds-primary-light-color-light, #f9f8f5);
}

#currencyModal .custom-language .custom-options::-webkit-scrollbar-thumb {
    background: var(--ds-light-text-color, rgba(80, 80, 80, 1));
    border: 2px solid var(--ds-primary-light-color-light, #f9f8f5);
    border-radius: 999px;
}

#currencyModal .custom-language .custom-options::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.custom-select .arrow {
    margin-left: auto;
    border: solid #666;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
}

[data-option-id="30"] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* flex-basis 0 + min-width 0: both buttons always split the row equally and
   can shrink below their text width, so overflow is impossible regardless of
   how long the localized express label gets. */
[data-option-id="30"]>.radio {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

[data-option-id="30"]>.radio>* {
    width: 100%;
}

/* The express label text is long ("Express productie +€ 50,17"); let it wrap
   onto a second line instead of clipping. The selector mirrors main.min.css's
   `.ds-product-options .radio label.ds-radio` (fixed height:47px) so this
   later rule wins at equal specificity. */
.ds-product-options [data-option-id="30"] label.ds-radio,
[data-option-id="30"] .ds-radio {
    /* 100% of the stretched flex row: when one label wraps to two lines, the
       other grows to match, so both buttons always share the tallest height. */
    height: 100%;
    min-height: 47px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
}

[data-option-express] b {
    display: block;
    font-size: 80%;
}

[data-option-express] .text-end {
    display: none;
}

[data-option-express] b span,
[data-modal-option-express] b span {
    color: var(--ds-blue-color) !important;
    font-family: 'Noto Sans';
    font-weight: 400;
    font-size: 16px;
}

[data-type="width50"] .ds-module-item .content-block {
    padding: 0 !important
}

.procees-checkout {
    position: sticky;
    bottom: 15px;
}

.products.list.items.product-items.list-view {
    grid-template-columns: repeat(2, 1fr);
}

a.button {
    text-decoration: none !important;
}

.blink {
    animation: blink .5s linear infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.ds-product-main-stock small {
    color: #252525;
}

.products .ds-loader-overlay {
    position: absolute;
    z-index: 19999;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    left: 0;
}

.ds-loader-overlay + .ds-loader-overlay {
    display: none !important;
}

.products.list {
    position: relative
}

.skeleton-text {
    background: linear-gradient(90deg, #faf8f4 25%, #faf8f424 50%, #faf8f4 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s linear infinite;
    border-radius: 0;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ocs_perf: option-change loading skeletons. Reuse the .skeleton-text shimmer above.
   .ds-skel shimmers over price/stock WITHOUT changing box geometry (0 layout shift):
   the real text is kept transparent/hidden and an ::after overlay carries the shimmer. */
.ds-skel {
    position: relative;
    color: transparent !important;
}

.ds-skel > * {
    visibility: hidden;
}

.ds-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 25%,
        color-mix(in srgb, var(--ds-primary-color) 3%, #fff) 50%,
        color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s linear infinite;
}

/* .ds-gallery-skel covers #main-gallery while a cold option image loads (mobile/VPN). */
#main-gallery {
    position: relative;
}

.ds-gallery-skel {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 4px;
}

/* Shimmer for image placeholders. Unlike .skeleton-text (a text-line skeleton in
   main.min.css that forces width:100% + height:2.7rem), this sets ONLY the shimmer
   background + animation, so the element keeps its own box. Use it on <img> while the
   picture loads: the img reserves its own box (aspect-ratio / width-height attrs), so the
   skeleton height always matches the picture. Unique keyframe name to avoid the duplicate
   "skeleton-loading" definition that exists in both awd.css and main.min.css. */
@keyframes ds-skel-shimmer-kf {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ds-skel-shimmer {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 25%,
        color-mix(in srgb, var(--ds-primary-color) 3%, #fff) 50%,
        color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 75%);
    background-size: 200% 100%;
    animation: ds-skel-shimmer-kf 1.5s linear infinite;
}

/* Smooth media swap on option change (gallery, thumb-holder, thumbnails).
   The not-yet-loaded media is hidden over its skeleton host (opacity 0, NO transition →
   no initial flash); on decode the JS sets an inline `transition: opacity .3s` and removes
   this class, fading the picture in. The transition is set inline (not here as a class)
   because pinch.js sets inline `transition:none` on .pz-content, which would override a
   class rule — inline-on-inline wins. */
.ds-media-out { opacity: 0; }

/* Desktop gallery video cells: keep them square like the image cells (image cells are square via
   the square popup width/height attrs; mobile already squares video via .ds-product-images-slide).
   Without this the desktop video kept its native aspect ratio, so the cell — and its loading
   skeleton — were rectangular instead of square, breaking the uniform grid. */
@media (min-width: 992px) {
    #main-gallery .oct-gallery.has-video {
        aspect-ratio: 1 / 1;
    }
    #main-gallery .oct-gallery.has-video video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

div.ocf-popover {
    display: none !important;
}

#cireview-modal .help-block {
    display: none;
}

[data-bs-toggle="info"] {
    cursor: pointer;
}

button.button.btn {
    border-radius: 0 !important;
}

#oct-policy button {
    min-width: 170px;
}

/* Cookie policy banner layout.
   The three action buttons used to wrap 2+1 in the ~934-1361px band because the
   actions column was capped by col-md-5. Size the actions block by its content so
   the buttons stay on one row whenever they physically fit, and let the text take
   the remaining space and wrap. Works for longer (e.g. German) button labels too. */
#oct-policy .oct-policy-text {
    flex: 1 1 auto;
    min-width: 0;
}

#oct-policy .oct-policy-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: 100%;
}

#oct-policy .oct-policy-actions .button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    #oct-policy .oct-policy-banner {
        align-items: stretch;
    }

    #oct-policy .oct-policy-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    #oct-policy .oct-policy-actions .button {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

.pos-instagram {
    width: 31px;
    margin-top: 4px;
}

.br-0 {
    border-radius: 0;
}

.typingmind-chat-widget-button {
    z-index: 1039;
}

div#common-success div#account-back-button {
    display: none !important;
}

.ds-category-sort {
    transition: top 0.3s ease !important;
    position: sticky;
    top: 120px;
    z-index: 11;
    display: flex;
    overflow-x: auto;
    justify-content: space-between;
    background: #ffffffc2;
    backdrop-filter: blur(4px);
    box-shadow: 0 20px 27px -25px #ddd;
}

@media (max-width:992px) {


    .ds-category-sort {
        transition: top 0.3s ease !important;
        position: sticky;
        top: 70px;
        z-index: 11;
        display: flex;
        overflow-x: auto;
        justify-content: space-between;
        background: #ffffffc2;
        backdrop-filter: blur(4px);
        box-shadow: 0 20px 27px -25px #ddd
    }

    .ds-header,
    .sticky-top {
        transition: top 0.3s ease !important;
    }

}

.ds-livesearch-inner .col-7.col-md-4.p-0 {
    min-width: 200px;
}

[data-option-id="30"] * {
    font-size: 14px;
}

.inner-wrapper-sticky {
    margin-bottom: 30px;
}

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

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ocf-value-list-body.grid-4 {
    column-gap: 8px;
    row-gap: 16px;
    align-items: start;
}

.ocf-value-list-body.grid-4 > .ocf-value.has-image {
    min-width: 0;
    height: 100%;
    margin-bottom: 0;
    gap: 8px;
    text-align: center;
}

.ocf-value-list-body.grid-4 > .ocf-value.has-image .ocf-value-name {
    min-height: 2.8em;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#quickViewModal div#infoModal {
    background: #00000057;
}

.shipping-quote-title {
    position: relative;
}

.ship-wrapper label {
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.shipping-quote-title img {
    position: absolute;
    right: 0;
    top: 0;
}

[data-option-id="30"] {
    display: flex !important;
    justify-content: space-between;
}

[data-option-id="25"] label {
    justify-content: start !important;
}

@media (max-width: 462px) {
    [data-option-id="30"] {
        flex-direction: column;
    }
    [data-option-id="30"] > .radio {
        /* flex-basis 0 would collapse an auto-height column flex - size by content here */
        flex: none;
        width: 100%;
    }
}

/* ── Engraving options ── */
.ds-engraving-mm {
    margin-top: 1rem;
}

.ds-engraving-mm-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ds-dark-text-color);
}

.ds-engraving-mm-label .ds-engraving-check {
    width: 18px;
    height: 18px;
    accent-color: var(--ds-primary-color);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* Engraving agreement checkboxes */
.ds-engraving-agree {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--ds-primary-light-color-light);
    border: 1px solid var(--ds-border-color-light);
}

.ds-engraving-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-dark-text-color);
}

.ds-engraving-agree-label input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--ds-primary-color);
    cursor: pointer;
}

.ds-engraving-agree-text {
    transition: color var(--ds-main-transition);
}

.ds-engraving-agree-text.ds-engraving-error {
    color: var(--ds-red-color);
}

/* Engraving stock notice */
.ds-engraving-stock-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-light-text-color-light);
}

.ds-engraving-stock-notice img {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Express production visibility */
.form-group[data-option-express].ds-express-visible {
    max-height: 200px;
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
}

div[data-option-express] {
    margin-bottom: 0px !important;
}

@media (min-width:768px) {
    .fancybox-show-thumbs .image-prod-tooltip {
        bottom: 45px;
    }
}

@media (max-width:768px) {
    .fancybox-show-thumbs .image-prod-tooltip {
        bottom: 30px;
    }
}

/*fix small CLS*/
.ds-product-main-price.align-items-center {
    min-height: 40.1px;
}

.sticky-top.ds-price-block {
    padding: .5rem .75rem;
}

@media (max-width: 991.98px) {
    .ds-product-main-price.align-items-center {
        min-height: 0 !important;
    }
    .sticky-top.ds-price-block #thumb-holder {
        display: flex;
        align-items: center;
        min-height: 80px;
    }
    .sticky-top.ds-price-block #thumb-holder .popover-img {
        height: 100%;
        width: auto;
        max-height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }
}

div#ds-product-options {
    margin-bottom: 5px !important;
    padding-bottom: 10px !important;
    transition: all .4s ease;
}

.additional-stock>div {
    padding-left: 0px;
    margin-bottom: .25rem !important;
}

.view-360:after {
    content: " ";
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    margin: auto;
    left: 15px;
    background: url('/image/catalog/new_design/icons/360.svg');
}

.view-360 canvas {
    aspect-ratio: 1/1;
    height: 100%;
}

.option-3dviews.d-flex {
    position: absolute;
    bottom: 15px;
    justify-content: center;
    width: 100%;
    gap: 15px;
}

.col-6.p-2 {
    position: relative;
}

.option-3dview {
    cursor: pointer;
}

div#main-gallery>div {
    filter: brightness(0.98);
}









/* --- базовая оболочка под медиа, белый фон, скругления --- */
.media-box {
    position: relative;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}

/* если браузер поддерживает aspect-ratio — используем его */
.supports-ar .media-box {
    aspect-ratio: calc(var(--w, 1) / var(--h, 1));
}

/* fallback для старых браузеров: резерв высоты через padding-top */
.media-box::before {
    content: "";
    display: block;
    padding-top: var(--pt, 100%);
}

.supports-ar .media-box::before {
    padding-top: 0;
}

/* сам контент внутри коробки */
.media-content {
    position: absolute;
    inset: 0;
    display: block;
}

/* изображения/видео/канвас растягиваются по коробке, без обрезания */
.media-box img,
.media-box video,
.media-box canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    display: block;
    border: 0;
}


/* мягкое появление всей галереи при полной замене */
#main-gallery {
    transition: opacity .3s;
}

/* CLS guard: reserve square space for gallery slides on mobile so option swaps and lazy-loaded images do not shift layout */
@media (max-width: 991.98px) {
    /* Main gallery: each slide is full viewport width, lock to square */
    #main-gallery .ds-product-images-slide {
        aspect-ratio: 1 / 1;
    }

    #main-gallery .ds-product-images-slide > a,
    #main-gallery .ds-product-images-slide > .gallery-skins,
    #main-gallery .ds-product-images-slide > .gallery-360 {
        width: 100%;
        height: 100%;
    }

    #main-gallery .ds-product-images-slide img,
    #main-gallery .ds-product-images-slide video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Thumbnails: hardcoded pixel size so the strip height is constant regardless of the number of thumbs.
       Tunable via --thumb-size on the strip. */
    #thumb-gallery {
        --thumb-size: 64px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #thumb-gallery::-webkit-scrollbar {
        display: none;
    }
    #thumb-gallery .ds-product-images-slide {
        flex: 0 0 auto;
        width: var(--thumb-size);
        height: var(--thumb-size);
        aspect-ratio: auto;
    }
    #thumb-gallery .ds-product-images-slide > * {
        width: 100%;
        height: 100%;
    }
    #thumb-gallery .ds-product-images-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* необязательно, но приятно: активная миниатюра 360 */
.option-3dviews .option-3dview.active {
    outline: 1px solid var(--ds-primary-color);
    outline-offset: 0;
    border-radius: 0;
}

.option-3dview {
    cursor: pointer;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
}

.ocf-mobile.sticky-top button {
    width: 100%;
}

div#ocf-module-1 {
    min-width: 400px;
}

div#ocf-filter-114-2-1 img {
    border-radius: 50%;
    width: auto;
    max-width: 90px;
    margin-bottom: 5px;
}

.skin-dot {
    width: 30px;
    height: 30px;
    padding: 10px;
    display: block;
    margin: 0 5px;
    border-radius: 0;
}

.skin-dots {
    position: absolute;
    bottom: 30px;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;
}

.gallery-skins {
    position: relative;
}

.skin-dot.active {
    outline: 1px solid var(--ds-primary-color);
    outline-offset: 0px;
}

.skin-dot.cgi_w {
    background: linear-gradient(45deg, #e1be9f, #c09073, #e1be9f);
}

.skin-dot.cgi_l {
    background: linear-gradient(45deg, #c09073, #712c1aab, #c09073);
}

.skin-dot.cgi_b {
    background: linear-gradient(45deg, #4d2a15, #712c1a, #4d2a15);
}

.rounded-circle.bg-dark-subtle {
    overflow: hidden;
}

.ds-information a.button {
    text-decoration: none !important;
}

.ds-about-card {
    background: var(--ds-primary-light-color-light);
}

.title.module-title.block-title {
    font-family: 'Noto Serif';
    font-weight: 400;
    font-size: 19px;
}

#oct-infobar .oct-infobar-text>span {
    min-width: fit-content;
}

.slick-slider-btn-prev.slick-arrow {
    right: auto;
    left: 0;
}

.slick-arrow {
    position: absolute;
    top: 40%;
    width: 40px;
    z-index: 1;
    right: 0;
    background: transparent !important;
    border: none;
}

.slick-arrow:hover * {
    fill: inherit !important;
}

/* Latest Reviews carousel (cireviewlatest): place the slick arrows beside the
   cards in a side gutter and centre them vertically, so they no longer sit on
   top of the first/last review card. Scoped to .ds-reviews-carousel so the
   shared .slick-arrow rules above stay untouched for every other carousel.
   Desktop: padding opens a gutter; arrows keep the inherited left:0/right:0
   (relative to the padding box) and so fall into that gutter, outside the cards.
   Mobile (1-up): no side gutter, arrows centred just below the carousel. */
@media (min-width: 768px) {
    .ds-reviews-carousel {
        padding-left: 50px;
        padding-right: 50px;
    }

    .ds-reviews-carousel .slick-arrow {
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 767.98px) {
    .ds-reviews-carousel {
        padding-bottom: 50px;
    }

    .ds-reviews-carousel .slick-arrow {
        top: auto;
        bottom: 0;
        transform: none;
    }

    .ds-reviews-carousel .slick-slider-btn-prev.slick-arrow {
        left: calc(50% - 44px);
        right: auto;
    }

    .ds-reviews-carousel .slick-slider-btn-next.slick-arrow {
        right: calc(50% - 44px);
        left: auto;
    }
}

[data-type=full-split] .content-block {
    padding: .5rem;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    align-items: center;
    position: relative
}

[data-type=full-split] .ds-module-img {
    max-width: 150px;
}

[data-type=full-split] .arrows,
[data-type=full-split] .ds-module-button-wishlist {
    display: none;
}

[data-type=full-split] .ds-module-caption {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: .5rem;
}


.img-metals>* {
    height: 25px;
}

.fancybox-navigation {
    display: none;
}

.modal.right>*>.modal-content {
    height: 100dvh !important;
    overflow: auto;
    max-width: 100vw;
}

div#selected-filters .ocf-disabled {
    display: none;
}

.button-unit {
    cursor: pointer;
}

/* ===== Site-wide improvements ===== */
.ds-module-price,
.ds-price-new,
.ds-price-old,
.ds-price-tax {
    font-variant-numeric: tabular-nums;
}

h1,
.ds-slideshow-item-title {
    text-wrap: balance;
}

#common-home>.container-fluid>*:not(:first-child),
#common-home>*:not(:first-child):not(.container-fluid) {
    padding-top: 3rem;
}

@media (max-width: 575px) {

    #common-home>.container-fluid>*:not(:first-child),
    #common-home>*:not(:first-child):not(.container-fluid) {
        padding-top: 2rem;
    }
}

/* ===== Video Hero ===== */
.ds-video-hero {
    position: relative;
    min-height: 100dvh;
    margin-top: -100px;
    padding-top: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-video-hero__media {
    position: absolute;
    inset: 0;
}

.ds-video-hero__media video,
.ds-video-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-video-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
    pointer-events: none;
}

.ds-video-hero__content {
    position: relative;
    z-index: 2;
    padding: 4rem 3rem;
    max-width: 50%;
    text-align: center;
}

.ds-video-hero__title {
    font-family: 'Noto Serif', serif;
    font-weight: 400;
    font-size: 3.5rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    margin: 0 0 1rem;
}

.ds-video-hero__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0 0 2rem;
}

.ds-video-hero__buttons {
    display: flex;
    gap: 1rem;
    max-width: 480px;
    margin: 0 auto;
}

.button-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    padding: 1rem 1.5rem;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ds-main-transition), color var(--ds-main-transition), border-color var(--ds-main-transition);
}

.button-hero-cta--ghost {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    background: transparent;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.button-hero-cta--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.button-hero-cta--solid {
    border: 2px solid #fff;
    background: #fff;
    color: var(--ds-primary-color);
}

.button-hero-cta--solid:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--ds-primary-color);
}

@media (max-width: 991px) {
    .ds-video-hero {
        min-height: 100dvh;
    }

    .ds-video-hero__content {
        padding: 3rem 2rem;
    }

    .ds-video-hero__title {
        font-size: 2.5rem;
    }

    .ds-video-hero__text {
        font-size: 1.125rem;
    }
}

@media (max-width: 575px) {
    .ds-video-hero {
        min-height: 100dvh;
        margin-top: -70px;
        padding-top: 70px;
    }

    .ds-video-hero__content {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .ds-video-hero__title {
        font-size: 2.25rem !important;
    }

    .ds-video-hero__text {
        font-size: 1rem;
    }

    .button-hero-cta {
        padding: .875rem 1.25rem;
        font-size: .8125rem;
    }
}

/* ===== Homepage section rhythm ===== */
/* Reviews section (already container-fluid, no negative margin trick needed) */
#common-home .ds-store-reviews-container {
    background-color: var(--ds-primary-light-color-light);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.thumb-gallery.ds-product-images-main {
    filter: brightness(0.98);
}

.ds-megamenu-child-wrapper .ds-bannerplus-box img {
    height: auto;
}

.ds-megamenu-child-wrapper .ds-bannerplus-box a {
    background: transparent !important
}

/* OCFilter unit switcher — dropdown for option measurement units inside filter block */
.ocf-value-list-body .ocf-unit-switcher {
    display: block;
    width: 100%;
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 10px;
}

.ocf-value-list-body .ocf-unit-switcher .ds-unit-trigger {
    display: inline-flex;
    font-size: 13px;
}

.ocf-value-list-body .ocf-unit-switcher .ds-unit-dropdown {
    z-index: 5;
}

/* gallery-scroll fix: нужно `overflow: hidden` (обе оси), а НЕ `overflow-y`.
   overflow-y:hidden при overflow-x:visible повышает overflow-x до вычисленного `auto`,
   из-за чего этот якорь становится горизонтальным скролл-контейнером вокруг
   натурально-размерной (напр. 3004px) картинки из pinch.js: свайп нативно скроллит
   картинку внутри слайда раньше, чем скроллится карусель #main-gallery. Клип по обеим
   осям убирает вложенный горизонтальный скролл и сохраняет вертикальное обрезание. */
a.oct-gallery.d-block {
    overflow: hidden;
}

#product-recently-viewed #input-sort {
    padding-right: 30px;
}

/* ============================================================
 * Продукт-страница - фикс горизонтального overflow на 992-1199px
 * ============================================================
 * В этом диапазоне Bootstrap container-xl ещё работает в режиме
 * container-fluid (100% минус padding), а двухколоночный flex
 * (.ds-product-images + .ds-product-main) не имеет явных ширин ни
 * на одной колонке - каждая берёт ширину по intrinsic content.
 * Слайдер галереи + сетка опций в сайдбаре суммарно больше
 * доступной ширины контейнера, сайдбар уезжает за правый край,
 * body показывает горизонтальный скроллбар. */

#product-product {
    overflow-x: clip;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .ds-product-main-content {
        align-items: flex-start;
    }
    .ds-product-main-content > .ds-product-images,
    .ds-product-main-content > #productImages {
        flex: 1 1 55%;
        max-width: 55%;
        min-width: 0;
    }
    .ds-product-main-content > .ds-product-main,
    .ds-product-main-content > #product {
        flex: 1 1 45%;
        max-width: 45%;
        min-width: 0;
    }
}
div#mm-checkout-item-modal .ds-ai-disclosure,
.ds-checkout-layout .ds-ai-disclosure {
    display: none !important;
}
span.ds-ai-disclosure.ds-ai-disclosure--micro {
    display: none;
}