/* Heading weight: medium instead of light for visual hierarchy */
.serif.fw-300 {
    font-weight: 400 !important;
}

/* Main nav: remove all caps, increase weight */
.ds-menu-maincategories-desktop-box .ds-menu-maincategories-item-title {
    text-transform: none;
    font-weight: 400 !important;
}

li.ds-menu-maincategories-item.fsz-14.dark-text > * {
    font-weight: 400 !important;
}

/* Remove all caps from buttons */
.button, .button.button-primary {
    text-transform: none;
}

/* iOS Safari keeps rounded corners on input[type=submit] even with -webkit-appearance:none. Force square. */
.button, .button.button-primary {
    border-radius: 0;
}

/* Bootstrap's reboot sets line-height: 1.15 on <button> elements but leaves
   <a> at the body's inherited line-height (~1.5). When the same .button class
   is used on both, <a class="button"> renders visibly taller than its
   <button class="button"> sibling. Pin a single line-height on .button so
   the two render at identical heights side-by-side. */
.button {
    line-height: 1.15;
}

/* Same iOS Safari rounding affects form-select, search inputs, and bare buttons */
.form-select,
button:not(.button),
input[type=search],
input[type=reset],
input[type=button] {
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* ===== Button hover system ===== */

/* Kill ripple and glow from main.min.css */
.button::before {
    display: none;
}

.button:hover:not([disabled]),
.button:active:not([disabled]),
.button.button-primary:hover:not([disabled]),
.button.button-primary:active:not([disabled]),
.button.button-secondary:hover:not([disabled]),
.button.button-secondary:active:not([disabled]),
.button.button-success:hover:not([disabled]),
.button.button-success:active:not([disabled]),
.button.button-warning:hover:not([disabled]),
.button.button-warning:active:not([disabled]),
.button.button-danger:hover:not([disabled]),
.button.button-danger:active:not([disabled]),
.button.button-info:hover:not([disabled]),
.button.button-info:active:not([disabled]),
.button.button-light:hover:not([disabled]),
.button.button-light:active:not([disabled]),
.button.button-dark:hover:not([disabled]),
.button.button-dark:active:not([disabled]) {
    text-shadow: none !important;
}

/*
 * Three hover tiers, all using brand palette:
 *
 * 1. Solid dark buttons (primary, dark)  → lighten to mid-green
 * 2. Solid colored buttons (success, danger, warning) → lighten slightly
 * 3. White / light buttons              → gold fill
 * 4. Outline buttons                    → fill with primary green
 */

/* 1. Solid primary & dark: lighten to a warmer mid-green */
.button.button-primary:hover:not([disabled]),
.button.button-dark:hover:not([disabled]) {
    background-color: #1c5040 !important;
    border-color: #1c5040 !important;
}

/* 2. Solid colored: subtle lighten */
.button.button-success:hover:not([disabled]) {
    background-color: #49a84f !important;
    border-color: #49a84f !important;
}
.button.button-danger:hover:not([disabled]) {
    background-color: #cc3333 !important;
    border-color: #cc3333 !important;
}
.button.button-warning:hover:not([disabled]) {
    background-color: #e09100 !important;
    border-color: #e09100 !important;
}

/* 3. White / light buttons: gold fill */
.button-hero-cta--solid:hover,
.button.button-light:hover:not([disabled]) {
    background-color: #d4a837 !important;
    border-color: #d4a837 !important;
    color: #fff !important;
}
.button.button-light:hover:not([disabled]) svg path {
    fill: #fff;
}

/* 4. Outline buttons: fill with primary green, white text */
.button.button-outline-primary:hover:not([disabled]),
.button.button-outline-primary:focus:not([disabled]) {
    background-color: var(--ds-primary-color) !important;
    border-color: var(--ds-primary-color) !important;
    color: #fff !important;
}

@media (min-width: 768px) {
    html {
        scroll-padding-top: 120px;
    }
}

.alert-block {
    right: 1rem;
    top: 1rem;
    left: 1rem;
}

@media(min-width:576px) {
    .alert-block {
        right: 1.5rem;
        top: 1.5rem;
        left: auto;
    }
}

.ds-alert {
    background: var(--ds-white-color);
    box-shadow: 0px 4px 24px 0px rgba(37, 38, 39, 0.10);
    padding: 1.5rem;
    overflow: hidden;
    border: var(--ds-main-border);
    border-radius: 0 !important;
}

.ds-alert-success {
    background: var(--ds-primary-light-color-light);
    border-left: 3px solid var(--ds-interactive-color);
}

.ds-alert-danger {
    background: var(--ds-primary-light-color-light);
    border-left: 3px solid var(--ds-red-color);
}

.ds-alert-warning {
    background: var(--ds-primary-light-color-light);
    border-left: 3px solid var(--ds-yellow-color);
}

.ds-alert .purchase-success {
    display: none !important;
}

.ds-alert-text {
    font-size: 13px;
}

@media(min-width:1200px) {
    .ds-alert-text {
        font-size: 14px;
    }
}

@media(min-width:420px) {
    .ds-alert {
        width: 370px;
    }
}

.ds-alert-text a {
    color: var(--ds-links-color);
    text-decoration: underline
}

.ds-alert-text a:hover {
    text-decoration: none
}

.alert-text-item+.alert-text-item {
    margin-top: .5rem
}

.ds-alert [data-notify="dismiss"]:hover {
    opacity: 0.6;
}

.ds-alert [data-bs-dismiss=modal] {
    display: none !important
}

.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@keyframes fadeOutUp {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes pulsation {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    50% {
        opacity: .5
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes pulsation {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    50% {
        opacity: .5
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@-webkit-keyframes iconOpacity {

    0%,
    100% {
        opacity: 0
    }

    40%,
    80% {
        opacity: .96
    }

    60% {
        opacity: 1
    }
}

@keyframes iconOpacity {

    0%,
    100% {
        opacity: 0
    }

    40%,
    80% {
        opacity: .96
    }

    60% {
        opacity: 1
    }
}

#ds_fixed_contact_button {
    background: var(--ds-primary-color);
    position: fixed;
    right: 15px;
    bottom: 26px;
    width: 50px;
    height: 50px;
    border-radius: 0;
    cursor: pointer;
    z-index: 1020
}

#ds_fixed_contact_button.clicked {
    z-index: 1041
}

#ds_fixed_contact_substrate {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 0;
    display: none
}

#ds_fixed_contact_substrate.active {
    z-index: 1020;
    display: block
}

.ds-fixed-contact-pulsation {
    background: var(--ds-primary-color);
    width: 80px;
    height: 80px;
    border-radius: 0;
    position: absolute;
    left: -15px;
    top: -15px;
    z-index: -1;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation: 2s infinite pulsation;
    animation: 2s infinite pulsation;
    display: none;
}

@media(min-width:420px) {
    #ds_fixed_contact_button {
        right: 30px;
        width: 70px;
        height: 70px
    }

    .ds-fixed-contact-pulsation {
        width: 100px;
        height: 100px
    }
}

.ds-fixed-contact-icon {
    color: var(--ds-white-color);
    width: 100%;
    font-size: 20px;
    overflow: hidden;
    display: none;
}

.ds-fixed-contact-icon .fa-envelope {
    -webkit-animation: 3s infinite iconOpacity;
    animation: 3s infinite iconOpacity;
    width: 20px;
    height: 20px
}

@media(min-width:420px) {
    .ds-fixed-contact-icon {
        font-size: 28px
    }

    .ds-fixed-contact-icon .fa-envelope {
        width: 28px;
        height: 28px
    }
}

.ds-fixed-contact-text {
    font-size: 7px;
    text-transform: uppercase;
    line-height: 9px;
    color: var(--ds-white-color)
}

.ds-fixed-contact-dropdown {
    position: absolute;
    bottom: 60px;
    right: 36px;
    padding: 20px;
    border-radius: 0;
    background: var(--ds-white-color);
    display: block;
    opacity: 0;
    z-index: -1;
    transform: translateY(20px);
    -webkit-transition: transform .3s, opacity .3s;
    -o-transition: transform.3s, opacity .3s;
    transition: transform .3s, opacity .3s;
    -webkit-box-shadow: 5px 12px 30px rgba(0, 0, 0, .35);
    box-shadow: 5px 12px 30px rgba(0, 0, 0, .35);
    visibility: hidden;
    min-width: 250px;
    will-change: transform, opacity;
}

@media(min-width:420px) {
    .ds-fixed-contact-text {
        font-size: 8px;
        line-height: 10px
    }

    .ds-fixed-contact-dropdown {
        right: 60px
    }
}

.ds-fixed-contact-dropdown.expanded {
    transform: translateY(0);
    opacity: .98;
    z-index: 1;
    visibility: visible
}

.ds-fixed-contact-item {
    color: var(--ds-dark-text-color);
    font-size: 14px
}

.ds-fixed-contact-item:not(:last-child) {
    margin-bottom: 18px
}

.ds-fixed-contact-item>* {
    pointer-events: none;
}

.ds-fixed-contact-item-icon {
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 36px;
    flex: 0 0 36px;
    max-width: 36px;
    width: 36px;
    height: 36px;
    border-radius: 0;
    margin-right: 10px;
    color: var(--ds-white-color)
}

.ds-fixed-contact-item-icon svg {
    width: 20px !important;
    height: 20px
}

.ds-fixed-contact-messenger {
    background: #0084ff
}

.ds-fixed-contact-viber {
    background: #7c529d
}

.ds-fixed-contact-telegram {
    background: #2ca5e0
}

.ds-fixed-contact-skype {
    background: #31c4ed
}

.ds-fixed-contact-whatsapp {
    background: #25d366
}

.ds-fixed-contact-email {
    background: #50a8ff
}

.ds-fixed-contact-call {
    background: #3cba8b
}

.ds-fixed-contact-contacts {
    background: #e6a83a
}

@media(max-width:991px) {
    .ds-fixed-contact-viber-desktop {
        display: none !important
    }
}

@media(min-width:768px) {
    #ds_fixed_contact_button {
        bottom: 30px
    }
}

.popover {
    font-family: Ubuntu, sans-serif;
    border-color: transparent;
    border-radius: 0;
    box-shadow: var(--ds-medium-shadow);
    background-color: var(--ds-white-color);
    color: var(--ds-dark-text-color)
}

.popover-arrow::after {
    border-top-color: var(--ds-white-color) !important;
}

@media(min-width:360px) {
    .popover {
        min-width: 260px
    }
}

@media(max-width:991px) {
    #ds_fixed_contact_button {
        max-width: 0;
    }
}

@media(min-width:992px) {
    .popover {
        z-index: 19999
    }

    .ds-fixed-contact-pulsation {
        display: block;
    }

    .ds-fixed-contact-icon {
        display: flex;
    }
}

.popover-arrow:before {
    border-color: transparent !important
}

.popover-header {
    border-bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 600;
    font-size: 1.075rem;
    padding: 1rem 1rem .5rem;
    color: var(--ds-dark-text-color);
}

.popover-header:before {
    border-color: transparent !important
}

.popover-body {
    padding: 0 1rem 1rem;
    font-size: .875rem;
    color: var(--ds-secondary-text-color);
}

.popover-body p+p {
    margin-top: 1rem
}

.popover-body ul {
    padding: 1rem 0 1rem .75rem
}

.ds-loader {
    width: 80px;
    height: 40px;
    border-radius: 0;
    display: block;
    margin: 20px auto;
    position: relative;
    color: var(--ds-primary-color);
    opacity: 0.7;
    box-sizing: border-box;
}


@keyframes animloader {
    0% {
        height: 48px
    }

    100% {
        height: 4px
    }
}

.ds-loader-overlay {
    position: fixed;
    z-index: 2147483000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#cartModal .modal-content {
    position: relative;
}

#cartModal .ds-loader-overlay {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
    #cartModal .modal-header,
    #cartModal .modal-body-cart,
    #cartModal .modal-cart-bottom {
        padding-right: 1.75rem;
    }
}

@keyframes loaderMove {
    0% {
        transform: translateX(-40%);
    }

    50% {
        transform: translateX(20%);
        width: 80%;
    }

    100% {
        transform: translateX(100%);
        width: 100%;
    }
}

.ds-livesearch {
    top: 46px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12300;
    background: transparent;
    gap: .5rem;
    position: fixed;
    max-height: 0;
}

@media (min-width: 768px) {
    .ds-livesearch {
        z-index: 13300;
    }

    #cartModal .modal-dialog {
        --bs-modal-width: 760px
    }

}

.ds-livesearch.expanded {
    max-height: unset;
}

.ds-livesearch .ds-livesearch-categories-item {
    flex: 1 0 50%;
    max-width: 50%
}

.ds-livesearch .ds-livesearch-categories-item img {
    max-width: 100%;
    height: auto
}

.ds-livesearch-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ds-last-reviews-item {
        width: 50%
    }

    .found-contact-block {
        max-width: 350px;
    }

    .found-categories-block {
        max-width: 200px;
    }

    .seach-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .ds-livesearch {
        max-height: 0;
        right: 0;
        border-radius: 0;
        position: relative;
        bottom: auto;
    }


    .ds-livesearch .ds-livesearch-categories-item {
        flex: 1 0 25%;
        max-width: 25%
    }
}

.ds-livesearch-item {
    background: var(--ds-white-color);
    gap: 1rem
}

.ds-livesearch-item-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    border-right: var(--ds-main-border)
}

.ds-livesearch-item-img img {
    margin-bottom: 1rem
}

.ds-livesearch-item-sticker {
    background: var(--ds-green-color);
    color: var(--ds-white-color);
    text-align: center;
    border-radius: 0;
    height: 1rem
}

.ds-livesearch-item-sticker.red-bg {
    background: var(--ds-red-color)
}

.ds-livesearch-item-title {
    line-height: 1
}

.ds-livesearch-item-title:hover {
    color: var(--ds-links-color)
}

.ds-livesearch-item .ds-price-new {
    line-height: 1
}

.modal {
    z-index: 99999
}


.ocf-overflow-hidden div#product-category {
    z-index: 12300;
}

.modal-open {
    overflow: hidden
}

.modal-backdrop {
    background: var(--ds-popup-backdrop-bg);
    opacity: 1;
    z-index: 12500;
    --bs-backdrop-opacity: 1
}

.modal-dialog.wide {
    --bs-modal-width: 860px
}

.modal-content {
    padding: 1.5rem;
    border: 0;
    background-color: var(--ds-white-color);
    -webkit-box-shadow: var(--ds-dark-shadow);
    box-shadow: var(--ds-dark-shadow)
}

.modal-header {
    border: 0;
    border-bottom: var(--ds-main-border)
}

.modal-header .btn-close {
    border-radius: 0;
    --bs-btn-close-bg: none;
    width: 2.5rem;
    height: 2.5rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.5rem;
    flex: 0 0 2.5rem;
    display: grid;
    place-items: center;
    padding: 0;
    opacity: 1
}

.modal-header .btn-close svg path {
    fill: var(--ds-secondary-dark-color)
}

.modal-title {
    line-height: 1.2
}

.modal-body {
    padding: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.modal-body .ds-buy-one-click {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important
}

.modal-body .ds-buy-one-click>:first-child {
    margin-bottom: .5rem
}

.modal-body .ds-buy-one-click .form-control {
    font-size: .75rem;
    min-width: 200px;
}

.modal-body .ds-buy-one-click .form-control::-webkit-input-placeholder {
    font-size: .75rem
}

.modal-body .ds-buy-one-click .form-control::-moz-placeholder {
    font-size: .75rem
}

.modal-body .ds-buy-one-click .form-control:-ms-input-placeholder {
    font-size: .75rem
}

.modal-body .ds-buy-one-click .form-control::-ms-input-placeholder {
    font-size: .75rem
}

.modal-body .ds-buy-one-click .form-control::placeholder {
    font-size: .75rem
}

@media (max-width: 767.98px) {
    #error_minimum {
        font-size: .875rem
    }
}

/* AI media disclosure: persistent, localized and visible from first render. */
.ds-ai-disclosure {
	align-items: center;
	color: var(--ds-light-text-color-light, rgba(80, 80, 80, 1));
	display: inline-flex;
	font-size: 10px;
	font-weight: 400;
	left: 12px;
	line-height: 1.25;
	max-width: calc(100% - 24px);
	pointer-events: none;
	position: absolute;
	text-align: left;
	top: 12px;
	white-space: normal;
	z-index: 6;
}

.ds-ai-disclosure--compact {
	font-size: 9px;
}

.ds-ai-disclosure--micro {
	font-size: 8px;
	left: 6px;
	top: 6px;
}

.ds-ai-disclosure--inline {
	left: auto;
	margin-top: 4px;
	max-width: 100%;
	position: static;
	top: auto;
}

/* PDP gallery: the AI label overlays the photo, top-left, mirroring the
   full-screen control top-right. It used to reserve a 34px strip above the
   image and sit in that whitespace, which read as a stray line of text
   floating outside the picture and made its legibility text-shadow look like
   an artefact. That shadow exists to keep it readable over the photo, so the
   label belongs on the photo. */
#main-gallery [pinchzoom] > .ds-ai-disclosure {
	z-index: 2;
}

/* The badge itself ignores clicks (pointer-events: none); the help icon must
   stay clickable so the info modal opens. */
.ds-ai-disclosure .ds-ai-disclosure__help {
	cursor: pointer;
	flex: 0 0 auto;
	margin-left: 4px;
	pointer-events: auto;
}

.ds-ai-disclosure--compact .ds-ai-disclosure__help {
	height: 12px;
	width: 12px;
}

.ds-ai-disclosure--micro .ds-ai-disclosure__help {
	height: 11px;
	margin-left: 3px;
	width: 11px;
}

/* Adaptive contrast over photos (PDP gallery/lightbox), mirroring .img-caption:
   img-caption-contrast.js detects geometrically that the badge overlays the
   media and applies --on-media - the caption treatment (white + dark shadow,
   readable on any photo, exactly like .img-caption's default). When the media
   is same-origin it additionally samples the pixels behind the badge and
   refines to --on-light (dark on bright) / --on-dark. Badges off the photo
   (whitespace strip, inline) keep the default grey. The colors are literal by
   design, matching .img-caption: they contrast with the photograph behind the
   badge, not with the page theme, so theme tokens must not drive them. */
.ds-ai-disclosure--on-media,
.ds-ai-disclosure--on-dark {
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.4);
}

.ds-ai-disclosure--on-light {
	color: var(--ds-light-text-color-light, rgba(80, 80, 80, 1));
	text-shadow: 0 1px 8px rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 255, 255, 0.5);
}

.ds-ai-disclosure--hover-secondary {
	opacity: 0;
}

.ds-cart-item-img,
.ds-checkout-product-image,
.ds-checkout-item-media {
	position: relative;
}

/* Crossfade the primary label only when a hover (CGI) image actually exists;
   without it the label would vanish on hover with nothing replacing it. */
.ds-thumb-hover:hover:has(.ds-thumb-hover-cgi) .ds-ai-disclosure--hover-primary {
	opacity: 0;
}

.ds-thumb-hover:hover:has(.ds-thumb-hover-cgi) .ds-ai-disclosure--hover-secondary {
	opacity: 1;
}

.fancybox-content > .ds-ai-disclosure--lightbox {
	left: 12px;
	position: absolute;
	top: 12px;
	z-index: 99997;
}

@media (max-width: 767.98px) {
	.ds-ai-disclosure {
		left: 8px;
		max-width: calc(100% - 16px);
		top: 8px;
	}

	.ds-ai-disclosure--micro {
		left: 4px;
		top: 4px;
	}
}

.modal-body-cart .ds-buy-one-click {
    border-top: 0
}

.modal-body-cart .ds-buy-one-click>:first-child {
    display: none
}

.modal-body .ds-cart-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem
}

.modal-body-cart .ds-cart-recommended-products {
    overflow-x: auto;
}

.modal-body-cart .ds-cart-recommended-products-item {
    flex: 0 0 80%;
    max-width: 80%;
}

@media(min-width: 768px) {
    .modal-body-cart .ds-cart-recommended-products-item {
        flex: 0 0 60%;
        max-width: 60%;
    }
}

.modal-body-cart .ds-cart-recommended-products .content-block {
    transition: border var(--ds-main-transition);
}

.modal-body-cart .ds-cart-recommended-products .content-block:hover {
    box-shadow: none;
    border-color: var(--ds-form-control-focus-color);
}

.modal-body-buttons {
    border-top: var(--ds-main-border)
}

@media (max-width: 575.98px) {
    .modal-body-buttons .button-primary {
        width: 100%
    }
}

.modal-body-form>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 3rem);
    flex: 0 0 calc(50% - 3rem)
}

.modal-body-product-img {
    border: var(--ds-main-border);
    width: 108px;
    height: 108px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 108px;
    flex: 0 0 108px
}

.modal-body-product-img img {
    width: 100px;
    -o-object-fit: fill;
    object-fit: fill;
    border-radius: 0;
    max-width: 100%;
    aspect-ratio: 1/1;
    height: auto
}

@media (min-width: 360px) {
    .modal-body-product-img {
        width: 158px;
        height: 158px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 158px;
        flex: 0 0 158px
    }

    .modal-body-product-img img {
        width: 150px
    }
}

.modal-body-product-title {
    line-height: 1.2
}

.modal-body-product-info .ds-module-rating-star {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer
}

.modal-body-product-info .ds-module-rating-star+.ds-module-rating-star {
    margin-left: .75rem
}

.modal-body-product .ds-product-options {
    border-bottom: 0
}

.modal-body-quick-view {
    background-color: var(--ds-light-bg-color)
}

.modal-body-quick-view .ds-product-main-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.modal-body-quick-view .ds-product-main-buttons .button-outline {
    margin-top: 1rem;
    margin-left: 0
}

@media (min-width: 768px) {
    .modal-body-product {
        border-right: var(--ds-main-border)
    }

    .modal-body .ds-product-images {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(52% - 1rem);
        flex: 0 0 calc(52% - 1rem);
        max-width: calc(52% - 1rem)
    }
}

.modal-body-popup-text>:not(:first-child) {
    margin-top: 1rem
}

.modal-body-popup-text ol,
.modal-body-popup-text ul {
    padding-left: 1rem
}

.modal-small-text {
    line-height: 1.2
}

#popup_review_form .modal-body-product-img {
    width: 88px;
    height: 88px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 88px;
    flex: 0 0 88px
}

#popup_review_form .modal-body-product-img img {
    -o-object-fit: fill;
    object-fit: fill;
    border-radius: 0;
    width: 80px;
    max-width: 100%;
    aspect-ratio: 1/1;
    height: auto
}

@media (min-width: 360px) {
    #popup_review_form .modal-body-product-img {
        width: 120px;
        height: 120px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 120px;
        flex: 0 0 120px
    }

    #popup_review_form .modal-body-product-img img {
        width: 112px
    }
}

@media (max-width: 359.98px) {
    .modal-header .modal-title {
        font-size: 1.25rem !important
    }

    #quickViewModal .ds-product-main-cart {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    #quickViewModal .ds-product-main-cart .ds-module-quantity {
        margin-right: 0 !important;
        margin-bottom: 1rem
    }
}

@media (min-width: 992px) {
    #quickViewModal .ds-product-main {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
        max-width: 48%
    }
}

#quickViewModal .ds-product-images-main {
    height: auto
}

#quickViewModal .ds-product-images-main img {
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    height: auto
}

[data-bs-dismiss=modal] {
    text-decoration: none
}

@media (min-width: 360px) {
    #productOptionModal .modal-body-product-img {
        width: 128px;
        height: 128px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 128px;
        flex: 0 0 128px
    }

    #productOptionModal .modal-body-product-img img {
        width: 120px
    }
}

.empty-popup-cart {
    min-height: 320px;
    gap: .25rem;
}

.empty-popup-cart .ds-empty-cart-icon {
    color: var(--ds-primary-color);
    opacity: .35;
}

#cartModal .ds-cart-item-info > .no-btn {
    top: 0;
    right: 0;
    padding: 4px;
    line-height: 1;
    z-index: 2;
}

#cartModal .ds-cart-item-title {
    padding-right: 28px;
}

@media (max-width: 767.98px) {
    .empty-popup-cart .button-primary {
        width: 100%
    }
}

.ds-account-column-nav li {
    padding: 0;
    font-size: inherit
}

.ds-account-column-nav li:not(:last-child) {
    border-bottom: var(--ds-main-border)
}

.ds-account-column-nav .ds-column-categories-children.ds-categories-2 li {
    padding: 1rem !important;
    border-bottom: 0;
    border-top: var(--ds-main-border)
}

.ds-account-column-nav-item {
    line-height: 1;
    white-space: nowrap;
    padding: .75rem 1rem;
    -webkit-transition: background-color var(--ds-main-transition);
    transition: background-color var(--ds-main-transition)
}

.ds-account-column-nav-item:hover {
    background-color: #fbfbfb
}

.ds-account-column-nav-button {
    cursor: pointer;
}

.ds-account-column-nav-item:hover .ds-account-column-nav-item-text {
    text-decoration: underline
}

.ds-account-column-nav-item-icon {
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .75rem;
    background-color: var(--ds-light-bg-color)
}

.ds-account-column-nav-item-icon svg path {
    fill: var(--ds-dark-text-color)
}

.ds-account .content-block:hover {
    -webkit-box-shadow: none;
    box-shadow: none
}

.ds-account-login-button {
    min-width: 160px
}

@media (max-width: 575.98px) {
    .ds-account-login-button {
        width: 100%
    }
}

.ds-account-wishlist-info {
    border-left: var(--ds-main-border)
}

.ds-account-wishlist-title {
    line-height: 1.2
}

.ds-account-wishlist-title:hover {
    color: var(--ds-links-color);
    text-decoration: underline
}

.ds-account-wishlist .no-btn {
    top: 1rem;
    right: 1rem;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center
}

.ds-account-wishlist .no-btn svg {
    width: 12px;
    height: 12px;
    -o-object-fit: contain;
    object-fit: contain
}

@media (max-width: 767.98px) {

    .ds-account table td {
        white-space: nowrap
    }
}

@-webkit-keyframes autofill {
    to {
        color: inherit;
        background: transparent;
    }
}

@keyframes fadeInColumn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rotateIcon {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

.fadeInColumn {
    animation-name: fadeInColumn;
    animation-duration: 0.8s;
}

.oct-animated svg {
    animation: rotateIcon 0.5s ease-in-out infinite;
}

.error_style {
    background-color: var(--ds-error-bg-color) !important;
    border: 1px solid #fe4d97 !important;
    -webkit-transition: background-color var(--ds-main-transition), border var(--ds-main-transition);
    transition: background-color var(--ds-main-transition), border var(--ds-main-transition)
}

.error_style+label {
    color: var(--ds-red-color) !important
}

.error_style::-webkit-input-placeholder {
    color: var(--ds-red-color) !important
}

.error_style::-moz-placeholder {
    color: var(--ds-red-color) !important
}

.error_style:-ms-input-placeholder {
    color: var(--ds-red-color) !important
}

.error_style::-ms-input-placeholder {
    color: var(--ds-red-color) !important
}

.error_style::placeholder {
    color: var(--ds-red-color) !important
}

/* DS Tooltip — brand-styled Bootstrap tooltip overrides */
.tooltip {
    z-index: 19999;
}

.tooltip-inner {
    max-width: 260px;
    padding: 10px 14px;
    background: var(--ds-primary-light-color-light);
    color: var(--ds-dark-text-color);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--ds-border-color-light);
}

.tooltip-arrow::before {
    border-top-color: var(--ds-primary-light-color-light) !important;
    border-bottom-color: var(--ds-primary-light-color-light) !important;
    border-left-color: var(--ds-primary-light-color-light) !important;
    border-right-color: var(--ds-primary-light-color-light) !important;
}

.ds-switcher button {
    background: 0 0;
    border: none;
    text-decoration: underline;
    color: var(--ds-links-color);
    font-size: .875rem;
    font-weight: 400;
    padding-left: 0;
    padding-right: 0
}

.ds-switcher button.active {
    color: var(--ds-primary-dark-color);
    text-decoration: none;
    background: var(--ds-primary-light-color);
    font-size: 1rem;
    font-weight: 700;
    padding: .25rem .5rem;
    cursor: default;
    pointer-events: none;
    border: var(--ds-main-border)
}

.ds-switcher button+button {
    margin-left: .5rem
}

.ds-switcher button.language-select {
    text-transform: uppercase
}

.ds-switcher button:hover {
    text-decoration: none
}

.pagination {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    gap: 1rem;
    padding: 1rem 0
}

.pagination li a,
.pagination li span {
    display: block;
    line-height: 1rem;
    padding: .5rem .75rem;
    border-radius: 0;
    color: var(--ds-light-text-color);
    -webkit-transition: background var(--ds-main-transition), color var(--ds-main-transition);
    transition: background var(--ds-main-transition), color var(--ds-main-transition);
    text-decoration: none;
    will-change: background, color;
}

.pagination li.active span,
.pagination li:hover a {
    color: var(--ds-white-color);
    background: var(--ds-primary-color)
}

.table {
    margin-bottom: 0;
    border-left: var(--ds-main-border);
    border-right: var(--ds-main-border);
    border-color: var(--ds-border-color);
    font-weight: 400
}

.table>:not(:first-child) {
    border-top: var(--ds-main-border)
}

.table .thead-dark th {
    background-color: var(--ds-light-bg-color);
    border-top: var(--ds-main-border);
    color: var(--ds-dark-text-color)
}

.table tbody {
    font-size: 14px;
    color: var(--ds-secondary-text-color)
}

.table td {
    border-color: var(--ds-border-color)
}

.table td,
.table th {
    vertical-align: top
}

.table tbody tr:first-child td {
    border-top: 0
}

.table td a {
    color: var(--ds-links-color);
    text-decoration: underline
}

.table td a:hover {
    text-decoration: none
}

.table thead {
    border-left: var(--ds-main-border);
    border-right: var(--ds-main-border);
    border-top: var(--ds-main-border)
}

.table thead th {
    font-size: 1rem;
    line-height: 20px;
    padding: .75rem 1rem;
    vertical-align: middle;
    font-weight: 700;
    color: var(--ds-dark-text-color);
    background-color: var(--ds-primary-light-color);
    border: 0;
    border-bottom: var(--ds-main-border)
}

.table tbody tr:hover>* {
    --bs-table-bg-state: #FDFDFD
}

.ds-theme-switcher {
    background-color: var(--ds-light-bg-color)
}

.ds-theme-switcher-btn {
    display: grid;
    place-items: center;
    padding-left: .75rem;
    padding-right: .75rem;
    cursor: pointer
}

.ds-theme-switcher-btn.active {
    background-color: var(--ds-white-color);
    -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .08)
}

.ds-theme-switcher-btn.light svg path {
    fill: var(--ds-yellow-color)
}

.ds-blog-search-button {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 1.75rem
}

.ds-blog-search-button svg path {
    -webkit-transition: fill var(--ds-main-transition);
    transition: fill var(--ds-main-transition)
}

.ds-blog-search-button:focus:not([disabled]),
.ds-blog-search-button:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.ds-blog-search-button:focus:not([disabled]) svg path,
.ds-blog-search-button:hover svg path {
    fill: var(--ds-primary-color)
}

@media (max-width: 575.98px) {
    .ds-megamenu-children.flex-grow-1.d-flex.flex-wrap.dark-text.px-3.px-xl-0.col-8>div {
        min-width: 100%;
        border-bottom: var(--ds-main-border);
        padding-bottom: 13px;
        padding-top: 15px;
    }
}

#article-comments .ds-product-reviews-item-content {
    border-bottom: 0;
    padding-bottom: 0 !important
}

.ds-empty-reviews svg path {
    fill: var(--ds-border-color);
}

#oct-infobar.hidden {
    opacity: 0;
    display: none;
}

.ds-header-user-button .ds-dropdown.position-absolute {
    left: -30px !important;
    right: auto !important;
}

.alert button.close {
    background: none;
    right: 10px;
    top: 10px;
    position: absolute;
    font-size: 25px;
}

#popup_cireview_form .ds-module-rating-star {
    margin-right: 0.5rem;
    cursor: pointer;
}

.ds-module-rating-star:after {
    display: none;
}



.found-contact-block .d-flex.flex-column.flex-md-row.gap-3 {
    flex-direction: column !important;
    gap: 0em !important;
}

/* =============================================
   Typography utility classes (gaps from design system)
   ============================================= */
.fsz-40 {
    font-size: 2.5rem !important;
}

.lh-136 {
    line-height: 1.36 !important;
}

.ls-5 {
    letter-spacing: 5px !important;
}

/* ===== Benefits strip — mobile ===== */
@media (max-width: 767px) {
    .ds-advantages {
        gap: 0.75rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .ds-advantages-item {
        min-width: 220px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* ===== Review card polish ===== */
.ds-product-reviews-item {
    border: 1px solid var(--ds-border-color-light);
    transition: box-shadow var(--ds-main-transition);
}

.ds-product-reviews-item:hover {
    box-shadow: var(--ds-light-shadow-light);
}

/* ===== Display text tracking ===== */
.fsz-56 {
    letter-spacing: -0.02em;
}

.fsz-40 {
    letter-spacing: -0.015em;
}

/* ===== Trust Module (product page content_bottom) ===== */

/* Override HTML module wrapper styles */
.content-block-text .ds-trust-module {
    font-size: initial;
    font-weight: initial;
    color: initial;
}

.ds-trust-module {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.ds-trust-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--ds-border-color-light);
}

.ds-trust-section:first-child,
.ds-steps-block+.ds-trust-section {
    padding-top: 0;
}

.ds-trust-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ds-trust-section:nth-child(even) .ds-trust-section-image {
    order: 2;
}

.ds-trust-section:nth-child(even) .ds-trust-section-text {
    order: 1;
}

.ds-trust-section-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    transition: transform var(--ds-main-transition);
}

.ds-trust-section-image:hover img {
    transform: scale(1.02);
}

.ds-trust-section-title {
    color: var(--ds-dark-text-color);
    margin: 0 0 1rem;
    line-height: 1.36;
}

.ds-trust-section p {
    color: var(--ds-dark-text-color);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px) {
    .ds-trust-section {
        gap: 2rem;
    }
}

@media (max-width: 767px) {
    .ds-trust-module {
        padding: 2rem 1rem;
    }

    .ds-trust-section {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem 0;
    }

    .ds-trust-section:nth-child(even) .ds-trust-section-image,
    .ds-trust-section:nth-child(even) .ds-trust-section-text {
        order: unset;
    }

    .ds-trust-section-image img {
        border-radius: 0;
    }

    .ds-trust-section-title {
        font-size: 1.25rem;
    }
}

/* Steps block — 3-column process layout */
.ds-steps-block {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.ds-steps-block .ds-step img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 1rem;
    transition: transform var(--ds-main-transition);
}

.ds-steps-block .ds-step img:hover {
    transform: scale(1.02);
}

.ds-steps-block>h3 {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

.ds-steps-block .ds-step {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ds-steps-block .ds-step h4 {
    color: var(--ds-dark-text-color);
    line-height: 1.36;
}

@media (min-width: 768px) {
    .ds-steps-block .ds-step h4 {
        min-height: 2.72em;
    }
}

.ds-steps-block .ds-step p {
    color: var(--ds-dark-text-color);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .ds-steps-block .ds-step img {
        border-radius: 0;
    }
}

/* Product image caption — overlays the bottom of the image as clean text.
   JS (img-caption-contrast.js) samples the pixels behind each caption and
   toggles .img-caption--on-light when the underlying image area is bright,
   flipping text from white-on-dark to dark-on-light. The text-shadow keeps
   it readable in both states and during the brief moment before JS runs. */
.img-caption {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: auto !important;
    max-width: 90%;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 6px 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Fancybox lightbox on mobile — pull caption down so it sits at the image edge */
@media (max-width: 768px) {
    .fancybox-container .img-caption,
    .fancybox-container .image-prod-tooltip,
    .fancybox-container .image-caption-tooltp {
        bottom: 5px !important;
    }
}

.img-caption.img-caption--on-light {
    color: var(--ds-dark-text-color) !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Help icon — green question mark circle (click → info modal) */
.ds-help-icon {
    color: var(--ds-primary-color);
    cursor: pointer;
    vertical-align: -3px;
    margin-left: 4px;
    flex-shrink: 0;
}
.ds-shipping-help-icon {
    vertical-align: -4px;
}

.ds-btn-icon {
    vertical-align: -4px;
}

/* Links in the product tabs are underlined, and the theme takes that underline away again on
   hover. On a phone the hover state sticks to whatever was tapped last, so the underline came
   and went depending on where the last tap landed. The underline stays put. */
.ds-product-tab-content a:hover,
.ds-product-tab-content a:focus {
    text-decoration: underline;
}

/* ── Product specifications table ──────────────────────────────────────────────
   Two columns, at every width. The label keeps its own column on the left so the answers all
   start at the same place down the page, and the answer carries the weight because that is
   what is being scanned for.

   The help icon stays inline, immediately after the label it explains. It cannot be left
   alone on a second line because the markup no longer puts a space between the label and the
   icon, so the only break opportunity left is inside the label itself: a label that has to
   wrap takes its last word and the icon down together.

   Rows align at the top, so a one-line answer sits level with the first line of its label.
   Automatic hyphenation is off: it was splitting ordinary French words mid-column
   ("commer-ciale"). */
.ds-product-attributes-item {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    line-height: 1.45;
}

.ds-product-attributes-item > :first-child {
    display: block;
    flex: 0 0 55%;
    width: auto;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    hyphens: manual;
}

/* The theme hyphenates the label text itself, which split ordinary French words mid-column
   ("moissa-nite"). The cell's own setting does not reach it: the rule below is more specific. */
.ds-product-attributes-item > :first-child span {
    overflow: visible;
    text-overflow: clip;
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}

/* An empty pseudo-element absolutely positioned over the label cell, left behind by an
   earlier layout. */
.ds-product-attributes-item > :first-child::after {
    content: none;
}

/* The label's last word and its icon are one unbreakable run, so the icon can never be left
   on a line by itself; when the label has to wrap, the two go down together.

   Selected the long way round on purpose: the theme sets white-space: normal on every span in
   this cell, and that selector outweighs a bare class, so a shorter rule here is simply
   ignored. */
.ds-product-attributes-item > :first-child span.ds-attribute-label-tail {
    white-space: nowrap;
}

.ds-product-attributes-item > :first-child .ds-help-icon {
    width: 18px;
    height: 18px;
    vertical-align: -0.28em;
}

.ds-product-attributes-item > :last-child {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-weight: 500;
    hyphens: manual;
    overflow-wrap: break-word;
}

/* A wide row can afford an even split, and the labels stop wrapping at that point anyway. */
@media (min-width: 992px) {
    .ds-product-attributes-item > :first-child {
        flex-basis: 50%;
    }
}


.divide-pay-price .val {
    margin: 0px 5px 0px 5px;
}

.divide-pay-price.open {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.divide-pay-price.open .text-with-image,
.divide-pay-price.open .val {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.divide-pay-price.open .text-with-image img {
    margin: 0;
    vertical-align: middle;
}

/* DS Unit Switcher — dropdown for option measurement units */
.ds-unit-switcher {
    display: block;
    width: fit-content;
    margin-top: -14px;
    margin-bottom: 5px;
}

.ds-unit-switcher>.ds-unit-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-size: 12px;
    font-family: inherit;
    color: var(--ds-primary-color);
    cursor: pointer;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.ds-unit-switcher>.ds-unit-trigger:hover {
    opacity: 0.7;
}

.ds-unit-switcher>.ds-unit-trigger .ds-arrow-down {
    transition: transform 0.2s ease;
}

.ds-unit-switcher>.ds-unit-trigger[aria-expanded="true"] .ds-arrow-down {
    transform: rotate(180deg);
}

.ds-unit-dropdown.dropdown-menu {
    min-width: auto;
    padding: 0;
    border-radius: 0;
    border: 1px solid var(--ds-border-color-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ds-unit-dropdown.dropdown-menu.show {
    animation: ds-unit-fade-in 0.15s ease;
}

@keyframes ds-unit-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ds-unit-dropdown .dropdown-item {
    font-size: 13px;
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 0;
}

.ds-unit-dropdown .dropdown-item:hover {
    background-color: var(--ds-primary-light-color-light);
}

.ds-unit-dropdown .dropdown-item.active {
    background-color: var(--ds-primary-color);
    color: #fff;
}

/* DS EU VAT — checkout VAT field status indicators */
.ds-euvat-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.3;
}

.ds-euvat-status small {
    font-size: 13px;
}

.ds-euvat-valid {
    color: var(--ds-interactive-color);
}

.ds-euvat-invalid {
    color: var(--ds-red-color);
}

.ds-euvat-warning {
    color: var(--ds-yellow-color);
}

.ds-euvat-loading {
    color: var(--ds-light-text-color);
}

.ds-euvat-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ds-border-color-light);
    border-top-color: var(--ds-primary-color);
    border-radius: 50%;
    animation: ds-euvat-spin 0.7s linear infinite;
}

@keyframes ds-euvat-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Baymard Navigation Improvements ===== */

/* Hover delay: 300ms open (Baymard), 150ms close buffer */
.ds-menu-maincategories-desktop-box .ds-menu-maincategories-dropdown {
    transition: opacity var(--ds-main-transition) 0.15s,
        visibility var(--ds-main-transition) 0.35s;
}

@media (min-width: 1200px) {
    .ds-menu-maincategories-item:hover>.ds-menu-maincategories-dropdown {
        transition: opacity 0.2s ease-out 0.3s,
            visibility 0s linear 0.3s;
    }
}

/* Active and hovered category indicator.
   Desktop is a horizontal bar, so an underline is the right signal: a 2px gold
   rule the exact width of the label, wiping in from the left, six pixels under
   the text and inside the item's own padding (the nav ul clips overflow-y, so a
   detached stub further down is both ugly and at risk of being cut).
   Below xl the same markup is a vertical list, where a short bar floating under
   the label reads as a stray mark. There the row carries a gold left edge and a
   brand-green label instead, and the underline is suppressed outright. */
@media (min-width: 1200px) {
    li.ds-menu-maincategories-item>span>a {
        position: relative;
    }

    li.ds-menu-maincategories-item>a:after,
    li.ds-menu-maincategories-item>span>a:after,
    li.ds-menu-maincategories-item:hover>a:after,
    li.ds-menu-maincategories-item:hover>span>a:after {
        content: " ";
        position: absolute;
        opacity: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 2px;
        bottom: -6px;
        border: 0;
        background: #d4a837;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    li.ds-menu-maincategories-item:hover>a:after,
    li.ds-menu-maincategories-item:hover>span>a:after,
    li.ds-menu-maincategories-item:focus-within>a:after,
    li.ds-menu-maincategories-item:focus-within>span>a:after,
    li.ds-menu-maincategories-item.ds-menu-maincategories-item--active>a:after,
    li.ds-menu-maincategories-item.ds-menu-maincategories-item--active>span>a:after {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* One indicator per item. The theme also underlines the label itself on hover, which stacks a
   browser underline on top of the gold rule and reads as a double underline. The rule is the
   intended signal (it is the one that animates, matches the label width and marks the active
   category too), so the text-decoration goes. Links inside the dropdown keep theirs: there is no
   rule under those, so the underline is their only hover affordance. */
@media (min-width: 1200px) {
    li.ds-menu-maincategories-item:hover>a,
    li.ds-menu-maincategories-item:hover>span>a,
    li.ds-menu-maincategories-item:focus-within>a,
    li.ds-menu-maincategories-item:focus-within>span>a,
    li.ds-menu-maincategories-item.ds-menu-maincategories-item--active>a,
    li.ds-menu-maincategories-item.ds-menu-maincategories-item--active>span>a {
        text-decoration: none;
    }
}

@media (max-width: 1199.98px) {
    li.ds-menu-maincategories-item>a:after,
    li.ds-menu-maincategories-item>span>a:after {
        display: none;
    }

    li.ds-menu-maincategories-item.ds-menu-maincategories-item--active {
        box-shadow: inset 3px 0 0 #d4a837;
    }

    li.ds-menu-maincategories-item.ds-menu-maincategories-item--active>a,
    li.ds-menu-maincategories-item.ds-menu-maincategories-item--active>span>a {
        color: var(--ds-primary-color);
        font-weight: 500;
    }
}

/* Mobile drawer — ensure footer doesn't overlap nav content */
div#mobileMenuBox .ds-menu-catalog-inner {
    padding-bottom: 1rem;
}

div#mobileMenuBox .ds-megamenu-child-wrapper {
    padding-bottom: 2rem;
}

/* Mobile mega menu — 2-column layout for link lists (Metal, Stone Shape, Featured, etc.) */
/* Uses CSS columns so items flow top-to-bottom, left-to-right regardless of item count */
@media (max-width: 1199px) {
    div#mobileMenuBox .ds-megamenu-child-wrapper ul.list-unstyled {
        columns: 2;
        column-gap: 1rem;
    }

    div#mobileMenuBox .ds-megamenu-child-wrapper ul.list-unstyled li {
        break-inside: avoid;
    }
}

/* "View All" link in dropdowns */
.ds-menu-catalog-item--viewall a {
    font-weight: 500;
    color: var(--ds-primary-color);
}

.ds-megamenu-viewall-link {
    color: var(--ds-primary-color);
    text-decoration: none;
    transition: color var(--ds-main-transition);
}

.ds-megamenu-viewall-link:hover {
    text-decoration: underline;
}

/* Sidebar/menu close control. Square by brand rule, 44px tap target, brand
   green glyph on a warm off-white hover. The glyph is click-through on purpose:
   the menu's own delegated handler decides whether a tap should open a submenu
   by testing event.target for the .ds-sidebar-close class, and a tap that
   landed on the SVG used to close the panel and open the submenu at once. */
.ds-sidebar-close.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ds-primary-color);
    transition: background-color var(--ds-main-transition), color var(--ds-main-transition);
}

.ds-sidebar-close.button:hover,
.ds-sidebar-close.button:focus-visible {
    background: var(--ds-primary-light-color-light);
    color: var(--ds-primary-color);
}

.ds-sidebar-close.button svg {
    width: 20px;
    height: 20px;
    margin: 0;
    pointer-events: none;
}

.ds-sidebar-close.button svg path {
    fill: currentColor;
}

/* Same click-through reason as above: the back control tests event.target by
   class before deciding whether a tap should open a submenu. */
.ds-sidebar-header-back svg {
    pointer-events: none;
}

/* Mobile separator between categories and secondary links */
.ds-menu-mobile-separator {
    height: 1px;
    background: var(--ds-border-color-light);
    margin: 0.75rem 1rem;
    list-style: none;
}

/* Mobile secondary links — visually distinct from product categories */
.ds-menu-catalog-items--secondary .ds-menu-catalog-item--secondary a {
    color: var(--ds-light-text-color-light);
    font-weight: 400;
}

/* Product thumb — desktop hover to CGI image */
.ds-thumb-hover {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.ds-thumb-hover-primary,
.ds-thumb-hover-cgi {
    display: block;
    width: 100%;
    height: auto;
}

.ds-thumb-hover-cgi {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ds-module-img-box:hover .ds-thumb-hover-cgi {
    opacity: 1;
}

/* OCFilter checkbox brand color override */
.ocf-selected .ocf-value-input::before {
    border-color: var(--ds-primary-color) !important;
    background-color: var(--ds-primary-color) !important;
}

.ocf-value:active .ocf-value-input::before {
    box-shadow: 0 0 0 0.2rem rgba(17, 48, 37, 0.2) !important;
}

/* Featured filter dropdown (text-only, no images) */
.ds-ff-dropdown {
    position: relative;
    display: inline-block;
}

.ds-ff-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--ds-primary-color);
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: border-color var(--ds-main-transition);
    color: var(--ds-dark-text-color);
}

.ds-ff-dropdown-header:hover,
.ds-ff-dropdown.ocf-open .ds-ff-dropdown-header {
    border-color: var(--ds-primary-color);
}

.ds-ff-dropdown-header .ocf-filter-name {
    order: 0;
    margin-right: 0;
}

.ds-ff-dropdown-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    background: var(--ds-primary-color);
    color: var(--ds-white-color);
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0;
    line-height: 1;
}

.ds-ff-dropdown-header .ocf-active-label {
    display: inline !important;
    font-weight: 400;
    color: var(--ds-primary-color);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-ff-dropdown-header .ds-arrow-down {
    margin-left: auto;
    transition: transform var(--ds-main-transition);
    flex-shrink: 0;
}

.ds-ff-dropdown.ocf-open .ds-arrow-down {
    transform: rotate(180deg);
}

.ds-ff-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    background: var(--ds-white-color);
    box-shadow: var(--ds-medium-shadow);
    padding: 1rem 1.25rem;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
}

.ds-ff-dropdown.ocf-open .ds-ff-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.ds-ff-dropdown-grid {
    display: grid;
    gap: 4px 1.5rem;
    grid-template-columns: 1fr;
}

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

.ds-ff-dropdown-grid .ocf-value {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
}

.ds-ff-grid-images {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.ds-ff-img-value {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.25rem;
    white-space: normal;
}

.ds-ff-img-value .ocf-value-image {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #faf8f4;
    border: 2px solid transparent;
    border-radius: 50%;
    transition: border-color var(--ds-main-transition), box-shadow var(--ds-main-transition);
}

.ds-ff-img-value.ocf-selected .ocf-value-image {
    border-color: var(--ds-primary-color);
    box-shadow: inset 0 0 0 2px #fff;
    border-radius: 50%;
}

.ds-ff-img-value.ocf-selected {
    outline: none;
}

.ocf-value.has-image img,
div[id^="ocf-filter"] .ocf-value.has-image img {
    border-radius: 50% !important;
}

/* Mobile: bottom sheet with slide-up transition */
@media (max-width: 767.98px) {
    .ds-ff-dropdown-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        max-height: 60vh;
        padding: 1.25rem 1.25rem 5rem;
        border-top: 1px solid var(--ds-border-color);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.3s ease-out, visibility 0.3s ease-out;
    }

    .ds-ff-dropdown.ocf-open .ds-ff-dropdown-panel {
        transform: translateY(0);
    }

    .ds-ff-dropdown::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
        pointer-events: none;
    }

    .ds-ff-dropdown.ocf-open::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

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

/* ── Info modal tooltip content ── */
/* Mirrors .content-block styling from main.min.css (information pages) */
#infoModal .modal-header {
    position: sticky;
    top: 0;
    background: var(--ds-white-color);
    z-index: 9;
    border-radius: 0 !important;
}

.modal-body-info {
    font-weight: 300;
    color: var(--ds-secondary-text-color);
}

#infoModal .modal-body-info {
    padding-top: 1.25rem !important;
}

.modal-body-info h2,
.modal-body-info h3,
.modal-body-info h4,
.modal-body-info h5,
.modal-body-info h6 {
    font-family: 'Noto Serif', serif;
    font-weight: 300;
    margin: 1.25rem 0 0.5rem 0;
    color: var(--ds-dark-text-color);
}

.modal-body-info h2 { font-size: 1.25rem; }
.modal-body-info h3 { font-size: 1.125rem; }
.modal-body-info h4 { font-size: 1rem; }
.modal-body-info h5 { font-size: 0.9rem; }
.modal-body-info h6 { font-size: 0.85rem; }

.modal-body-info h2:first-child,
.modal-body-info h3:first-child,
.modal-body-info h4:first-child,
.modal-body-info h5:first-child,
.modal-body-info h6:first-child {
    margin-top: 0;
}

.modal-body-info p+p,
.modal-body-info p+ul,
.modal-body-info p+ol,
.modal-body-info ul+p,
.modal-body-info ol+p,
.modal-body-info ul+ul,
.modal-body-info p+table,
.modal-body-info table+p {
    margin-top: 1rem;
}

.modal-body-info ul,
.modal-body-info ol {
    padding-left: 1rem;
}

.modal-body-info li::marker {
    font-size: .8rem;
}

.modal-body-info li+li {
    margin-top: 0.35rem;
}

/* Popup tables always fit the popup: columns share its width instead of growing to their
   longest word (four French or German columns overflowed a phone and scrolled the whole
   popup sideways), and long words break with the page language's hyphenation. */
.modal-body-info table,
.modal-body-agree table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.25rem 0;
}

.modal-body-info th,
.modal-body-info td,
.modal-body-agree th,
.modal-body-agree td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--ds-border-color-light);
    overflow-wrap: break-word;
    hyphens: auto;
}

/* A Bootstrap row reaches half a gutter past its parent on each side; inside a popup that
   made the body scroll sideways (the ring size guide in the terms popup). */
.modal-body-info .row,
.modal-body-agree .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 575.98px) {
    .modal-body-info table,
    .modal-body-agree table {
        font-size: 0.875rem;
    }

    .modal-body-info th,
    .modal-body-info td,
    .modal-body-agree th,
    .modal-body-agree td {
        padding: 0.5rem 0.375rem;
    }
}

.modal-body-info th,
.modal-body-agree th {
    font-weight: 500;
    color: var(--ds-dark-text-color);
    background: var(--ds-primary-light-color);
}

.modal-body-info a {
    color: var(--ds-primary-color);
    text-decoration: underline;
}

.modal-body-info a:hover {
    text-decoration: none;
}

.ds-loose-stone-alert {
    font-size: 14px;
    line-height: 1.4;
    border-color: var(--ds-red-color);
    background-color: var(--ds-error-bg-color);
    color: var(--ds-dark-text-color);
}

.ds-btn-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Get in touch / reassurance module */
.ds-get-in-touch {
    background-color: var(--ds-primary-light-color-light);
    overflow: hidden;
    margin: 2rem 0;
}

.ds-get-in-touch-image {
    height: 100%;
    object-fit: cover;
    min-height: 240px;
}

.ds-get-in-touch-content {
    padding: 2.5rem 3rem 2.5rem 3.5rem;
}

@media (max-width: 767.98px) {
    .ds-get-in-touch-image {
        max-height: 220px;
    }

    .ds-get-in-touch-content {
        padding: 1.5rem;
    }
}

/* ===== Subcategory cards – horizontal scroll ===== */

.ds-subcategories-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.ds-subcategories-scroll::-webkit-scrollbar {
    display: none;
}

.ds-subcategories-scroll .ds-subcategories-item {
    flex: 0 0 180px;
    min-width: 0 !important;
    max-width: 180px !important;
    scroll-snap-align: start;
}

.ds-subcategories-link {
    text-decoration: none;
    border: none;
    padding: 0;
    gap: 0.75rem;
    transition: opacity var(--ds-main-transition);
}

.ds-subcategories-link:hover {
    opacity: 0.8;
}

.ds-subcategories-link:hover .ds-subcategories-title {
    text-decoration: underline;
    color: var(--ds-links-color);
}

.ds-subcategories-scroll .ds-subcategories-link img {
    width: 100% !important;
    height: unset !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (min-width: 768px) {
    /* One row that scrolls sideways, so many subcategories never push the products down. */
    .ds-subcategories-scroll {
        flex-wrap: nowrap;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: var(--ds-primary-color) transparent;
        padding-bottom: 0.75rem;
    }

    .ds-subcategories-scroll::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .ds-subcategories-scroll::-webkit-scrollbar-thumb {
        background: var(--ds-primary-color);
        border-radius: 3px;
    }

    /* Auto margins centre a short row and collapse to 0 once the row overflows, so the first tile is never cut off. */
    .ds-subcategories-scroll .ds-subcategories-item:first-child {
        margin-left: auto;
    }

    .ds-subcategories-scroll .ds-subcategories-item:last-child {
        margin-right: auto;
    }

    .ds-subcategories-scroll .ds-subcategories-item {
        flex: 0 0 200px;
        max-width: 200px !important;
    }
}

.email-newsletter .input-group:first-child {
    margin-top: 20px;
}

/* Page titles — prevent long translated words from causing horizontal scroll */
.ds-page-title h1 {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* HubSpot custom form sections — shared warm background (matches vacancy form) */
.ds-hubspot-form-section {
    background: var(--ds-primary-light-color-light);
    border-radius: 0;
    margin-bottom: 2rem;
}

/* ── Filter button badge — force circle ── */
[data-ocf="mobile"] .ocf-selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    text-align: center;
}

/* The filter chips beside it took the width and squeezed the mobile filter button until its padding
   disappeared; the button keeps its own width. */
.ds-category-sort [data-ocf="mobile"] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Narrow-screen breadcrumbs stay on one line: no sideways scrolling (which hid the start of the trail,
   "ueil" for "Accueil") and no wrapping (which stranded the "/" beside a two-line crumb).

   The whole path stays visible; the current page is the one that gives up width and truncates, because
   the H1 directly below already names it in full. Shrinking is weighted rather than shared so the links
   above it stay whole, and because the row is always made to fit, the centred layout can never be
   clipped at both ends. */
@media (max-width: 767.98px) {
    ul.ds-breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    ul.ds-breadcrumb .ds-breadcrumb-item {
        display: block;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Bootstrap floats the separator and the theme turns it into a block. Either way it leaves the
       crumb's own line, which is what stranded the "/" beside a wrapped crumb. Inline and unfloated it
       reads as part of the trail and lets the ellipsis land after it. */
    ul.ds-breadcrumb .ds-breadcrumb-item + .ds-breadcrumb-item::before,
    ul.ds-breadcrumb .ds-breadcrumb-item > a {
        display: inline;
        float: none;
    }

    /* A floor of a few characters, so the current page is always recognisably there rather than a
       bare ellipsis. */
    ul.ds-breadcrumb .ds-breadcrumb-item:last-child {
        flex-shrink: 1000;
        min-width: 3rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Only once the current page has given up everything it can does the link above it give way too. */
    ul.ds-breadcrumb .ds-breadcrumb-item:nth-last-child(2) {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Active filter chips in sort bar ── */
.ds-category-sort > .d-flex:first-child {
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

.ds-category-sort > .btn-group {
    flex: 0 0 auto;
    width: auto !important;
}

#product-counter {
    flex: 0 0 auto;
    white-space: nowrap;
}

div#selected-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 150px);
    min-width: 0;
}

div#selected-filters .ds-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
}

div#selected-filters > .ocf-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}


.ds-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.5rem 0.3rem 0.75rem;
    border: 1px solid var(--ds-primary-color);
    background: transparent;
    color: var(--ds-primary-color);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.4;
}

.ds-filter-chip-label {
    pointer-events: none;
}

.ds-filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    padding: 2px;
}

.ds-filter-chip-x:hover {
    opacity: 1;
    color: var(--ds-red-color);
}

.ds-filter-chip-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--ds-light-text-color-light, rgb(80,80,80));
    white-space: nowrap;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: 1px dashed var(--ds-border-color-light, #d2d2d2);
    background: none;
    padding: 0.3rem 0.6rem;
    transition: border-color 0.2s, color 0.2s;
}

.ds-filter-chip-more:hover {
    border-color: var(--ds-primary-color);
    color: var(--ds-primary-color);
}

.ds-filter-selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 50%;
    background: var(--ds-primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
/* OCFilter — override blue focus to brand green */
.ocf-form-control:focus,
input.ocf-form-control:focus {
    border-color: var(--ds-primary-color) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(17, 48, 37, 0.25);
}

/* OCFilter — collapse header spacing against unit dropdown when filter is open, keep breathing room when closed */
.ocf-filter-header {
    transition: 0.1s;
    transition-delay: 0.1s;
}
.ocf-filter.ocf-open:has(.ocf-unit-switcher) .ocf-filter-header {
    padding-bottom: 0;
}
.ocf-filter:not(.ocf-open):has(.ocf-unit-switcher) .ocf-filter-header {
    padding-bottom: 10px;
}

/* In-stock flow: uncap metal row, render stone-size picker under it */
.img-metals-stock-flow { flex-wrap: wrap; gap: 4px; }
.img-stones { gap: 4px; margin-top: 4px; }

/* Cart page and drawer */
.ds-cart-summary-totals {
    display: grid;
    gap: 0;
}

.ds-cart-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
    color: var(--ds-dark-text-color);
    font-size: 14px;
    line-height: 1.45;
}

.ds-cart-summary-row.is-grand {
    margin-top: 7px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border-color-light);
    font-size: 20px;
}

.ds-cart-summary-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    font-weight: 400;
}

.ds-cart-summary-value {
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}

.ds-cart-tax-label {
    color: var(--ds-light-text-color-light);
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
}

#checkout-cart .ds-cart-breadcrumbs {
    padding-top: 12px;
}

#checkout-cart .ds-cart-checkout-nav {
    margin-top: 4px;
}

#checkout-cart .ds-cart-main {
    margin-top: 24px;
}

#checkout-cart .ds-cart-page-heading {
    font-size: 32px;
}

#checkout-cart .ds-cart-items {
    padding: 0 24px;
    border: 1px solid var(--ds-border-color-light);
    border-top: 2px solid var(--ds-primary-color);
    border-radius: 0;
}

#checkout-cart .ds-cart-heading-count {
    font-size: 20px;
    line-height: 1.3;
}

#checkout-cart .ds-cart-item {
    margin: 0;
    padding: 28px 0;
}

#checkout-cart .ds-cart-item + .ds-cart-item {
    border-top: 1px solid var(--ds-border-color-light);
}

#checkout-cart .ds-cart-item-info {
    margin-bottom: 0 !important;
}

#checkout-cart .ds-cart-item-desc {
    min-width: 0;
}

#checkout-cart .ds-cart-item-img {
    flex: 0 0 150px;
}

#checkout-cart .ds-cart-item-img img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

#checkout-cart .ds-cart-item-title {
    padding-right: 46px;
    font-size: 18px;
    line-height: 1.35;
}

#checkout-cart .ds-cart-remove {
    top: -8px;
    right: -8px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

#checkout-cart .ds-module-quantity,
#checkout-cart .ds-module-quantity-btn,
#checkout-cart .ds-module-quantity input {
    min-height: 44px;
}

#checkout-cart .ds-cart-summary {
    background: var(--ds-white-color);
    border: 1px solid var(--ds-border-color-light);
    border-top: 2px solid var(--ds-primary-color);
    border-radius: 0;
    box-shadow: var(--ds-light-shadow);
}

#checkout-cart .ds-cart-dispatch,
#cartModal .modal-cart-bottom {
    border-radius: 0;
}

#checkout-cart .ds-cart-summary-row:not(.is-grand) .ds-cart-summary-label,
#checkout-cart .ds-cart-summary-row:not(.is-grand) .ds-cart-summary-value {
    font-family: inherit;
    font-weight: 400;
}

#checkout-cart .ds-cart-summary .ds-price-notice {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border-color-light);
}

#checkout-cart .ds-cart-update-region {
    position: relative;
}

#checkout-cart .ds-cart-update-region > .ds-loader-overlay {
    position: absolute;
    z-index: 20;
    min-height: 160px;
    cursor: progress;
    background: color-mix(in srgb, var(--ds-white-color) 78%, transparent);
}

#checkout-cart .ds-cart-update-region > .ds-loader-overlay .ds-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 5px var(--ds-white-color));
}

#checkout-cart.is-updating .ds-cart-summary,
#checkout-cart.is-updating .ds-cart-items {
    opacity: .72;
    transition: opacity 120ms ease;
}

@media (max-width: 767.98px) {
    #checkout-cart .ds-cart-main {
        margin-top: 16px;
    }

    #checkout-cart .ds-cart-page-heading {
        font-size: 24px;
    }

    #checkout-cart .ds-cart-heading-count {
        font-size: 16px;
    }

    #checkout-cart .ds-cart-items {
        padding: 0 16px;
    }

    #checkout-cart .ds-cart-item {
        padding: 20px 0;
    }

    #checkout-cart .ds-cart-item-img {
        flex-basis: 104px;
        margin-right: 12px !important;
    }

    #checkout-cart .ds-cart-item-img img {
        width: 104px;
        height: 104px;
    }

    #checkout-cart .ds-cart-item-title {
        font-size: 16px;
    }

    #checkout-cart .ds-cart-item-actions {
        align-items: flex-end !important;
        gap: 12px;
    }

    #checkout-cart .ds-cart-summary {
        box-shadow: none;
    }
}
/* Hide native radios — mirror product page .ds-product-options .input-radio pattern */
.img-stones input[type="radio"],
.img-stones .input-radio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Tile button — mirror product page .ds-product-options .radio label.ds-radio */
.img-stones label.option.ds-radio {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 28px;
    padding: 0 6px;
    margin: 0;
    border: var(--ds-main-border);
    background: #fff;
    color: var(--ds-secondary-text-color);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ds-main-transition, 0.15s ease-out), border var(--ds-main-transition, 0.15s ease-out), color var(--ds-main-transition, 0.15s ease-out);
}
.img-stones label.option.ds-radio .opt-val { display: inline; }
.img-stones label.option.ds-radio:hover { border-color: var(--ds-primary-color); }
.img-stones label.option.ds-radio.selected {
    background: var(--ds-light-bg-color);
    color: var(--ds-primary-color);
    border: 1px solid var(--ds-primary-color);
}
/* Height placeholder for cards without a stone picker in in-stock flow,
   so all cards in a row start their title at the same vertical position. */
.img-stones-placeholder {
    height: 28px;
    visibility: hidden;
    pointer-events: none;
}

/* Non-EU import-duty notice. Hidden by default; revealed for visitors whose
   IP is outside the EU via the `is-non-eu` class set on <html> by the
   inline GeoIP bootstrap in header.twig. */
.ds-non-eu-only {
    display: none;
}
html.is-non-eu .ds-non-eu-only {
    display: block;
}
.ds-price-notice {
    line-height: 1.4;
}
/* When rendered as a <button> (mobile sticky footer trigger), strip native
   button chrome so the click target retains the surrounding text appearance
   while keeping built-in keyboard activation on Enter/Space. */
button.ds-price-notice {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 0.25rem 0;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: block;
    width: 100%;
}
.ds-price-notice .ds-help-icon {
    width: 20px;
    height: 20px;
    margin-left: 2px;
    vertical-align: -4px;
    display: inline;
}
/* Keep the last word + help icon glued together so the icon never wraps to a
   new line on its own. If the line is too narrow, the wrap point falls
   before the last word, taking the icon along with it. */
.ds-price-notice-tail {
    white-space: nowrap;
}

/* Account creation success page */
#common-success .content-block {
    padding-top: .5rem;
}
.ds-account-success {
    padding: 0 0 1rem;
}
.ds-account-success-check {
    color: var(--ds-primary-color);
    line-height: 0;
}
.ds-account-success-intro,
.ds-account-success-help {
    max-width: 620px;
}
.ds-account-success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 1.5rem 1rem;
    border: 1px solid var(--ds-border-color-light);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ds-account-success-card:hover {
    border-color: var(--ds-primary-color);
    box-shadow: 0 6px 18px rgba(17, 48, 37, .08);
    transform: translateY(-2px);
}
.ds-account-success-card-icon {
    color: var(--ds-primary-color);
    line-height: 0;
    margin-bottom: .75rem;
}
.ds-account-success-note {
    background: var(--ds-primary-light-color-light);
    padding: 1rem 1.25rem;
    text-align: center;
    color: var(--ds-light-text-color-light);
    font-size: 14px;
}

.ds-wishlist-btn.is-in-wishlist svg path {
    stroke: rgb(212, 168, 55);
    stroke-width: 1;
}

/* Compare feature disabled across the storefront */
.ds-header-compare-button,
.ds-mobile-bottom-nav-item-compare,
.ds-compare-btn {
    display: none !important;
}

/* Catalog card discount badge (bottom-right of product image) */
.ds-module-discount-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    padding: 4px 8px;
    color: #fff;
    background: var(--ds-red-color, #b22222);
    border-radius: 0;
    line-height: 1;
    letter-spacing: 0.3px;
    pointer-events: none;
}

/* Customize this design — product page secondary CTA + modal */
.ds-customize-cta {
    margin-top: 0.75rem;
}

.ds-customize-cta .ds-customize-trigger svg {
    vertical-align: -3px;
}

.ds-customize-cta-help {
    color: var(--ds-light-text-color-light, rgba(80, 80, 80, 1));
    line-height: 1.4;
}

.ds-customize-modal .modal-content {
    padding: 1.5rem;
}

.ds-customize-modal .modal-header {
    padding: 0 0 1rem 0;
    margin-bottom: 1rem;
    align-items: center;
}

.ds-customize-modal .modal-body {
    padding: 0;
}

.ds-customize-modal .ds-customize-back {
    background: transparent;
    border: 0;
    padding: 4px 8px 4px 0;
    margin-right: 0.5rem;
    color: var(--ds-dark-text-color, #1c1c1c);
    line-height: 1;
}

.ds-customize-modal .ds-customize-back:hover {
    color: var(--ds-primary-color, #113025);
}

.ds-customize-modal .ds-customize-back:focus-visible {
    color: var(--ds-primary-color, #113025);
    outline: 2px solid var(--ds-primary-color, #113025);
    outline-offset: 2px;
    border-radius: 0;
}

.ds-customize-modal .ds-customize-back svg {
    display: block;
}

.ds-customize-modal .ds-customize-link {
    color: var(--ds-primary-color, #113025);
    text-decoration: underline;
}

.ds-customize-modal .ds-customize-link:hover {
    opacity: 0.85;
}

.ds-customize-modal .ds-customize-form .form-control.is-invalid {
    border-color: var(--ds-red-color, #b22222);
    background-image: none;
    padding-right: 0.75rem;
}

.ds-customize-modal .ds-customize-field-error {
    color: var(--ds-red-color, #b22222);
}

.ds-customize-toast-container {
    z-index: 12600;
}

.ds-customize-toast {
    background-color: var(--ds-white-color, #fff);
    border: var(--ds-main-border);
    box-shadow: var(--ds-dark-shadow);
}

/* Wedding-set 10% discount helper notice (below price block) */
.ds-set-discount-notice {
    color: var(--ds-primary-color, #113025);
    background: var(--ds-primary-light-color-light, #f9f8f5);
    border-left: 3px solid var(--ds-primary-color, #113025);
    padding: 8px 12px;
    line-height: 1.4;
    max-width: 480px;
}

/* Shipping section loading overlay — mirrors the totals sidebar's
 * .right .ds-loader-overlay treatment (translucent white + 2px backdrop
 * blur, scoped via position:absolute on a position:relative parent).
 * Painted by checkout.js calling masked('.section-shipping', true) when
 * a save is triggered by an address-field change. The same MM-logo SVG
 * spinner the masked() helper already injects into the totals overlay
 * is reused here — keeps the visual language consistent across the
 * checkout page. */
.section-shipping .ds-loader-overlay {
    position: absolute;
    background: rgb(255 255 255 / 15%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Email auto-correction inline notice / suggestion banner.
   Rendered by catalog/view/javascript/email_corrector.js underneath
   any email input on the storefront after a domain typo is detected. */
.ds-email-correction-notice {
    display: block;
    margin: 6px 0 0;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ds-dark-text-color);
    background: var(--ds-primary-light-color-light);
    border: 1px solid var(--ds-border-color-light);
}

.ds-email-correction-notice--fixed {
    border-left: 3px solid #d4a837;
}

.ds-email-correction-notice--suggest {
    border-left: 3px solid #d4a837;
}

.ds-email-correction-notice .ds-email-correction-msg strong {
    font-weight: 600;
    color: var(--ds-primary-color);
}

.ds-email-correction-notice .ds-email-correction-action {
    color: var(--ds-primary-color);
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 4px;
}

.ds-email-correction-notice .ds-email-correction-action:hover {
    text-decoration: none;
}

/* GMC country-mismatch notice: shown above #oct-infobar on a Google Merchant
   landing (URL ?country) when the visitor's GeoIP country differs from the
   priced country, linking to the visitor's own country prices. */
.ds-geo-notice {
    background: var(--ds-primary-light-color-light);
    border-bottom: 1px solid var(--ds-border-color-light);
    color: var(--ds-dark-text-color);
}

.ds-geo-notice .ds-geo-notice-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 38px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}

.ds-geo-notice .ds-geo-notice-icon {
    flex: 0 0 auto;
    color: var(--ds-primary-color);
}

.ds-geo-notice a {
    color: var(--ds-primary-color);
    font-weight: 500;
    text-decoration: underline;
    white-space: nowrap;
}

.ds-geo-notice .ds-geo-notice-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0 6px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ds-light-text-color-light);
    cursor: pointer;
}

.ds-geo-notice .ds-geo-notice-close:hover {
    color: var(--ds-dark-text-color);
}

@media (max-width: 575px) {
    .ds-geo-notice .ds-geo-notice-inner {
        font-size: 13px;
        padding: 9px 32px;
    }
}

/* Cookie consent modal (oct_policy) — replaces former inline styles */
#cookieConsentModal .ds-cookie-modal-close {
    color: var(--ds-primary-color);
    text-decoration: none;
    line-height: 1;
}
#cookieConsentModal .ds-cookie-modal-close:hover,
#cookieConsentModal .ds-cookie-modal-close:focus {
    text-decoration: none;
    opacity: 0.75;
}
#cookieConsentModal .ds-cookie-categories summary {
    cursor: pointer;
}
#cookieConsentModal .ds-cookie-categories label {
    cursor: pointer;
}

/* ── Admin impersonation banner (staff "browsing as customer" warning) ──
   Fixed top bar shown only during admin login-as-customer sessions. Kept
   above every theme overlay (mobile menu / sidebar / modals / cookie
   consent) so staff always see they are impersonating. All offset rules are
   scoped to body.has-admin-banner, so normal visitors are never affected. */
.ds-admin-impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000; /* above .z-top/.no-scroll header (120000), .ds-sidebar (14023), .modal-holder (99999) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 14px;
    padding: 8px 14px;
    background: var(--ds-red-color);
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.ds-admin-impersonation-banner__msg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ds-admin-impersonation-banner__icon {
    flex-shrink: 0;
}

.ds-admin-impersonation-banner__email {
    word-break: break-all;
}

.ds-admin-impersonation-banner__logout {
    color: #fde68a;
    text-decoration: underline;
    font-weight: 700;
    padding: 2px 6px;
}

.ds-admin-impersonation-banner__logout:hover,
.ds-admin-impersonation-banner__logout:focus {
    color: #fff;
}

/* Push page content and the sticky header below the banner (impersonation only). */
body.has-admin-banner {
    padding-top: var(--ds-admin-banner-h, 44px) !important;
}

body.has-admin-banner .ds-header.sticky-top {
    top: var(--ds-admin-banner-h, 44px);
}

/* ==========================================================================
   Responsive cookie / policy data table (.ds-cookie-table)
   Desktop: clean themed table. Mobile (<768px): each row becomes a labelled
   stacked card via [data-label] + ::before. Category cells render a coloured
   pill. Namespaced so it cannot affect any other table on the site.
   ========================================================================== */
.ds-cookie-table-wrap {
    width: 100%;
    margin: 16px 0 24px;
}

.ds-cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--ds-dark-text-color);
}

.ds-cookie-table thead th {
    text-align: left;
    background: var(--ds-primary-light-color-light);
    color: var(--ds-dark-text-color);
    font-weight: 600;
    padding: 12px 14px;
    border: 0; /* neutralise generic .ds-information-content th border */
    border-bottom: 2px solid var(--ds-border-color);
    white-space: nowrap;
}

.ds-cookie-table tbody td {
    padding: 11px 14px;
    border: 0; /* neutralise generic .ds-information-content td border */
    border-bottom: 1px solid var(--ds-border-color-light);
    vertical-align: top;
    line-height: 1.45;
}

.ds-cookie-table tbody tr:last-child td {
    border-bottom: none;
}

.ds-cookie-table tbody tr:hover {
    background: #FDFDFD;
}

/* Category pill */
.ds-cookie-cat {
    display: inline-block;
    border-radius: 0;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.ds-cookie-cat-necessary {
    color: var(--ds-primary-color);
    background: #edf2ef;
    background: color-mix(in srgb, var(--ds-primary-color) 10%, #fff);
}

.ds-cookie-cat-functional {
    color: var(--ds-blue-color);
    background: #e9eff8;
    background: color-mix(in srgb, var(--ds-blue-color) 10%, #fff);
}

.ds-cookie-cat-analytics {
    color: #9a6b00;
    background: #f7efdc;
    background: color-mix(in srgb, var(--ds-yellow-color) 14%, #fff);
}

.ds-cookie-cat-advertising {
    color: var(--ds-red-color);
    background: #f7e9e9;
    background: color-mix(in srgb, var(--ds-red-color) 10%, #fff);
}

/* Mobile: stacked cards */
@media (max-width: 767.98px) {
    /* extra side breathing room on top of the info-layout's 0.5rem gutter */
    .ds-cookie-table-wrap {
        overflow-x: visible;
        padding-left: 8px;
        padding-right: 8px;
    }

    .ds-cookie-table thead {
        display: none;
    }

    .ds-cookie-table tbody tr {
        display: block;
        border: 1px solid var(--ds-border-color-light);
        border-radius: 0;
        padding: 6px 14px;
        margin-bottom: 14px;
        background: #fff;
    }

    .ds-cookie-table tbody tr:hover {
        background: #fff;
    }

    .ds-cookie-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 8px 0;
        border-bottom: 1px solid var(--ds-border-color-light);
        text-align: right;
    }

    .ds-cookie-table tbody td:last-child {
        border-bottom: none;
    }

    .ds-cookie-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-weight: 600;
        color: var(--ds-primary-color);
    }
}

/* Category zero-result state (OCFilter no-match): full-width rows inside the
   .products.list grid — without grid-column they collapse to one cell.
   No .content-block on the banner: main.min.css zeroes .content-block padding
   inside .products.list with !important, so the banner styles itself. */
.ds-nomatch-head,
.ds-nomatch-sep {
    grid-column: 1 / -1;
}

.ds-nomatch-head {
    padding: 56px 24px 64px;
    margin: 16px 0 8px;
    background: var(--ds-primary-light-color-light);
    border-radius: 0;
}

.ds-nomatch-head h2,
.ds-nomatch-head h3 {
    text-wrap: balance;
}

.ds-nomatch-head h2 {
    font-size: 32px;
}

.ds-nomatch-head p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    color: var(--ds-secondary-text-color);
}

.ds-nomatch-head-custom {
    max-width: 560px;
    margin: 40px auto 0;
    padding-top: 32px;
    /* --ds-border-color-light is invisible on the warm banner surface;
       the main-border token reads as a thin visible divider. */
    border-top: var(--ds-main-border);
}

.ds-nomatch-sep {
    padding-top: 8px;
    border-top: 1px solid var(--ds-border-color-light);
}

@media (max-width: 767.98px) {
    .ds-nomatch-head {
        padding: 32px 16px 40px;
        margin: 8px 0 4px;
    }

    .ds-nomatch-head h2 {
        font-size: 24px;
    }

    .ds-nomatch-head-custom {
        margin-top: 28px;
        padding-top: 24px;
    }
}

/* Per-line cart error (loose-stone size minimum).
   Mirrors the checkout field error in mm-checkout.css so a rejected quantity
   reads the same on the cart page, in the cart drawer and at checkout. */
.ds-cart-item-error {
    display: block;
    margin-top: 8px;
    color: var(--ds-red-color);
    font-size: 13px;
    line-height: 1.45;
}

.ds-module-quantity.has-error {
    border-color: var(--ds-red-color);
}

/* Per-size minimum hint in the buy column. It sits between the dispatch panel
   and the add-to-cart row, so it carries that panel's vertical rhythm
   (dispatch.css .ds-dispatch-panel) instead of a utility margin. */
.ds-moq-hint {
    padding: 16px 0 18px;
}
.ds-cache-client-gated {
    display: none !important;
}

/* Recently viewed header trigger. Centring is explicit because the button is a flex
   child of .right-section; the icon itself is a stroke outline like its neighbours, so
   .button-transparent svg path styles it exactly as it styles the lens and the heart. */
.ds-header-viewed-button {
    align-items: center;
    justify-content: center;
}

/* The panel body carries .ds-sidebar-content only for its compact horizontal
   product-card rules. The drawer box metrics that come with it do not apply in a
   modal, where .modal-content already owns the height. */
#viewedModal .modal-body.ds-sidebar-content {
    max-height: none;
}

/* The panel is filled with the shared product-module partial, which ships its own
   section heading and container gutters. The modal header already carries the title
   and .modal-body already has the padding, so both would be doubled up. */
#viewedModal .modal-body > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#viewedModal .ds-hp-signature-header {
    display: none !important;   /* the partial's heading carries Bootstrap's .d-flex */
}

/* No AI disclosure badge on the panel's 88px thumbnails, following the same call
   the popup cart makes (oct_popup_cart.twig): the badge does not fit a thumbnail
   this small. Disclosures stay on the PDP gallery, the full-size product thumbs
   and quick view. The badge is injected here only by the swatch handler's
   cardAiDisclosureMarkup (main.min.js), so today it is also inconsistent: absent
   on open, present after a metal is clicked. */
#viewedModal .ds-ai-disclosure {
    display: none !important;
}

/* =========================================================================
   Square corners
   -------------------------------------------------------------------------
   The brand has no rounded corners. Rather than stripping a radius class from
   ~110 templates and from page HTML stored in the database, the radius tokens
   and helpers resolve to zero here, so anything built on Bootstrap (forms,
   cards, modals, dropdowns, alerts, accordions, tables, buttons) or on the
   .br-* helpers comes out square by default and new markup cannot reintroduce
   a radius by accident.

   Deliberate exceptions, all of them true circles or counters, keep their own
   radius and are not listed below: .rounded-circle, .rounded-pill, .br-50,
   the metal/stone option swatches, the cart and wishlist count badges, the
   range slider and switch controls, and the ring-sizer's credit-card outline
   (a physical 3.18mm corner used for on-screen calibration).
   ========================================================================= */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
}

/* The .br-* helpers carry hardcoded pixel values, so the tokens above miss them. */
.br-2,
.br-3,
.br-4,
.br-5,
.br-6,
.br-7,
.br-8,
.br-9,
.br-10,
.br-11,
.br-12 {
    border-radius: 0 !important;
}

/* Theme components that hardcode a radius instead of reading the token. */
kbd,
.btn-close,
.content-block,
.content-block-p24,
.skeleton-text,
.slick-dotted ul,
.form-check-input[type="checkbox"],
.input-group-text + .form-control,
.product-grid .content-block::before,
.ds-cart-item-img img,
.ds-category-description-img img,
.ds-category-wall-item img,
.ds-dropdown-inner,
.ds-last-news-item img,
.ds-last-reviews-item img,
.ds-manufacturer-item-block img,
.ds-manufacturer-links span,
.ds-megamenu-children-manufacturers .ds-megamenu-children-item,
.ds-mobile-bottom-nav,
.ds-module-img-box img,
.ds-module-price,
.ds-module-quantity button .minus,
.ds-module-quantity button .plus,
.ds-product-images-additional-item img,
.ds-product-tabs,
.ds-store-reviews-rating-main,
.ds-store-reviews-rating-details-item,
.ds-table-compare-img img,
.sticky-top.ds-price-block,
.ocf-theme-light-block .ocf-value-count,
.fancybox__content span.hidden-caption,
.fancybox__content span.hidden-caption.that-video,
.image-caption-tooltp,
.row-our-adventages .icon,
#measuring-tool-canvas .input-group button {
    border-radius: 0 !important;
}

/* The metal swatches sit inside the product card's image wrapper, so a rule aimed at the photo
   reaches them too. Their artwork is round and the selected-state outline follows the element's
   radius, so squaring them turns the selection ring into a box around a circle. */
.img-metals > * {
    border-radius: 100px !important;
}