.ds-module-item.product-layout .ds-ai-disclosure {
display: none !important;
}
.left-section .button-transparent img {
border-radius: 0;
}
.py-4px {
padding-top: 4px;
padding-bottom: 4px;
}
#oct-infobar span.contact-top-bar {
display: flex;
gap: 5px;
}
#oct-infobar span.contact-top-bar a {
display: flex;
align-items: center;
gap: 15px;
}
#oct-infobar button#oct-infobar-btn {
display: none;
}
#oct-infobar .info-bar {
display: flex;
gap: 60px;
}
#oct-infobar .oct-infobar-text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}
body footer.ds-footer {
background: rgb(28 28 28);
padding-top: 50px !important;
}
body footer.ds-footer .container-xl {
display: flex;
flex-wrap: wrap;
gap: 30px;
padding-right: 30px;
}
body footer.ds-footer .container-xl .footer-col {
flex: 1 1 0;
min-width: 0;
}
body footer.ds-footer .container-xl .footer-col:first-child {
flex: 0 0 190px;
margin-right: 15px;
}
body footer.ds-footer .container-xl .footer-col.wide {
flex: 1.4 1 0;
}
.google-reviews,
.trust-reviews {
padding: 12px 16px;
border: 1px solid rgba(239, 239, 239, 0.2);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
span.star-co {
color: rgba(212, 168, 55, 1);
font-weight: 500;
margin-bottom: 5px;
font-family: 'Noto Sans';
}
.stars span.ds-module-rating-star {
width: 1.7rem;
height: 1.7rem;
}
.powered-by img.img-fluid {
max-width: 60px;
margin-left: .15rem;
}
.powered-by,
.trust-caption {
color: #EFEFEF;
}
/* Footer review badges.
The Google wordmark must stay inline: `text-align: center` on .google-reviews centres an
inline box, but not a block one (a block SVG drops onto its own line and pins left). */
body footer.ds-footer .powered-by .ds-hero-google-logo {
display: inline-block;
width: 60px;
height: 20px;
vertical-align: middle;
}
/* 5 x 20px stars + rating + gaps overflowed the badge's inner box and broke the centring. */
body footer.ds-footer .google-reviews .ds-module-rating-stars .star-item svg {
width: 18px;
height: 18px;
}
body footer.ds-footer .google-reviews .ds-module-rating-stars .star-item:last-child {
margin-right: 0 !important;
}
/* Keep "Trustscore 4.8 | 166 reviews" on one line instead of three wrapped fragments. */
body footer.ds-footer .trust-reviews .trust-caption {
flex-wrap: nowrap;
white-space: nowrap;
gap: 4px !important;
}
body footer.ds-footer .container-xl .footer-col h4,
body footer.ds-footer .container-xl .footer-col h3,
body footer.ds-footer .container-xl .footer-col .col-header {
color: #EFEFEF;
font-family: 'Noto Serif';
font-weight: 400;
font-size: 1.125rem;
line-height: 1.3;
}
body footer.ds-footer .container-xl .footer-col a {
color: #EFEFEF;
margin-bottom: 12px;
display: inline-block;
}
.email-newsletter input::placeholder {
color: #EFEFEF;
}
.email-newsletter input {
background: transparent;
color: #EFEFEF;
border: 1px solid #EFEFEF33;
padding: 16px 24px;
width: 100%
}
footer button.button-transparent svg path {
stroke: #EFEFEF
}
body footer.ds-footer .email-newsletter input {
font-size: .875rem;
padding-left: 16px;
padding-right: 16px;
}
/* keep the placeholder clear of the absolutely positioned arrow button */
body footer.ds-footer .email-newsletter .input-group input[type="email"] {
padding-right: 48px;
}
.email-newsletter button.button.button-transparent svg {
width: 33px;
height: auto;
}
.email-newsletter button.button.button-transparent {
position: absolute;
top: 8px;
right: 10px;
}
.copy-row .powered-co {
font-size: .8rem;
}
.powered-pay-co .ds-footer-payments-item {
border: 0;
}
.copy-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border-top: 1px solid #696969;
padding-top: 10px;
margin-top: 30px;
}
.email-newsletter span.news-notice {
font-size: .8rem;
margin-top: 10px;
display: block;
color: #EFEFEF;
}
.lang-switch button {
color: #eeee;
padding: 14px 21px;
border: 1px solid #3c3c3c;
border-radius: 0;
font-weight: 400;
}
.lang-switch {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lang-switch button svg {
margin-left: 10px
}
.lang-switch button svg path {
fill: #3c3c3c;
}
.google-reviews span.text-count {
color: #EFEFEF;
}
footer .button-footer span {
text-decoration: none
}
footer .button-footer {
color: #EFEFEF;
text-decoration: none;
font-family: 'Noto Sans';
padding: 13px 18px;
border: 1px solid #EFEFEF33;
}
svg.light-stroke>* {
stroke: #EFEFEF !important;
}
footer .button-footer svg.ds-arrow-down path {
stroke: #EFEFEF;
}
footer .text-light {
color: #FFFFFF
}
.footer-logo.d-flex {
width: 100%;
}
.footer-col .ds-dropdown-box .ds-dropdown {
top: auto;
bottom: 100%;
}
.footer-col .lang-switch form button {
width: 100%;
margin-left: 0px;
white-space: nowrap;
text-align: left;
}
.mobile-footer-menu-trigger {
display: none
}
@media (max-width:575.98px) {
body footer.ds-footer .container-xl {
gap: 25px;
}
body footer.ds-footer .container-xl .footer-col,
body footer.ds-footer .container-xl .footer-col.wide,
body footer.ds-footer .container-xl .footer-col:first-child {
flex: 0 0 100%;
width: 100%;
}
#oct-policy button {
min-width: 100% !important;
}
body footer.ds-footer .container-xl {
display: flex;
flex-wrap: wrap;
gap: 25px;
padding: 0px 15px;
}
body footer.ds-footer {
padding-top: 25px !important;
}
body footer.ds-footer .container-xl .footer-col:first-child>div {
margin: auto;
}
.copy-row {
flex-wrap: wrap;
justify-content: center;
}
.google-reviews .mobile-review {
display: flex;
justify-content: center;
gap: 15px;
align-items: center;
}
.google-reviews,
.trust-reviews,
.footer-logo {
width: 100% !important
}
.trust-reviews {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 15px;
align-items: center;
}
body .trust-reviews>img,
.trust-reviews>.mobile-review {
max-width: 195px;
width: 49% !important;
}
.footer-head .mobile-footer-menu-trigger {
display: block;
padding-left: 15px;
/*for finger*/
}
.footer-head {
display: flex;
align-items: center;
justify-content: space-between;
}
body ul.foo-menu>li:first-child {
padding-top: 15px;
}
body ul.foo-menu {
max-height: 0px;
overflow: hidden;
transition: all .3s ease;
visibility: hidden;
margin-top: 0px !important;
}
ul.foo-menu.show {
max-height: 500px;
transition: all .4s ease;
visibility: visible;
}
span.mobile-footer-menu-trigger svg {
transition: all .4s ease-out;
}
span.mobile-footer-menu-trigger.in svg {
transform: rotate(315deg);
transition: all .4s ease-in;
}
.email-newsletter {
margin-top: 15px;
}
.ds-footer-socials {
border: 0;
padding-top: 0px;
}
.ds-footer-socials a,
.ds-footer-socials ul li {
margin-bottom: 0px !important;
}
.copy-row .powered-co {
flex-direction: column-reverse;
align-items: center;
text-align: center;
}
.copy-links a.ms-3:first-child {
margin-left: 0px !important;
}
.copy-links {
margin-bottom: .35rem;
}
.powered-pay-co .ds-footer-payments {
flex-wrap: nowrap;
}
.powered-pay-co {
padding-top: 1rem;
}
/* header */
.oct-infobar-mobile-nav {
display: flex !important;
position: absolute;
left: 0px;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 2;
height: 0px;
}
.oct-infobar-mobile-nav button.button {
top: 10px;
padding: 6px 10px;
}
#oct-infobar .info-bar .slick-slide a {
display: inline-flex;
align-items: center;
gap: 5px;
}
#oct-infobar .oct-infobar-text {
z-index: 1
}
#oct-infobar .info-bar {
width: 100%;
overflow: hidden;
text-align: center;
}
#oct-infobar .info-bar .slick-current.slick-slide {
opacity: 1;
transition: all .3s ease;
}
#oct-infobar .info-bar .slick-slide {
opacity: 0;
transition: all .3s ease;
}
/* With the slider's side gutters removed (centerPadding in header.twig) every translated USP fits on one
13px line from 360px up (longest: French shipping; 12px below that). The bar may still grow if a future phrase wraps. */
body div#oct-infobar {
max-height: none;
}
#oct-infobar .info-bar .slick-slide {
font-size: 13px;
line-height: 21px;
}
div#slideshow-plus-0 .ds-slideshow-item {
text-align: center;
}
div#mobileMenuBox .ds-menu-catalog-item li.ds-menu-maincategories-item:hover>a {
color: rgba(212, 168, 55, 1);
}
body div#mobileMenuBox li.ds-menu-maincategories-item:hover>a:after {
display: none;
}
div#mobileMenuBox .ds-menu-catalog-item {
padding: 1rem;
}
div#mobileMenuBox .contacts-and-social img.img-fluid {
width: 32px;
}
div#mobileMenuBox .mobile-user-settings .lang .ds-dropdown-box .ds-dropdown,
div#mobileMenuBox .mobile-user-settings .currency .ds-dropdown-box .ds-dropdown {
bottom: 100%;
z-index: 999999;
height: auto;
top: auto;
}
div#mobileMenuBox .mobile-user-settings .ds-dropdown-toggle span {
text-decoration: none;
}
/* Language and currency sit side by side. The language toggle carries a
20px globe and a larger type size, so equal padding still left the two
boxes visibly different heights. Pin one height and match the type. */
div#mobileMenuBox .mobile-user-settings .lang .button-transparent,
div#mobileMenuBox .mobile-user-settings .currency .button-transparent {
display: flex;
align-items: center;
height: 48px;
border: 1px solid #D2D2D2;
padding: 0 16px;
text-decoration: none;
overflow: visible
}
div#mobileMenuBox .mobile-user-settings .currency .ds-dropdown-toggle,
div#mobileMenuBox .mobile-user-settings .currency .ds-dropdown-toggle span {
font-size: 14px;
}
div#mobileMenuBox .mobile-user-settings .ds-dropdown-toggle {
width: 100%;
justify-content: space-between;
padding: 0px 10px;
}
div#mobileMenuBox .mobile-user-settings {
border-top: var(--ds-main-border);
margin-top: 15px;
display: flex !important;
flex-direction: column;
padding: 0.75rem;
z-index: 99999;
position: relative;
background: #fff;
}
div#oct-infobar {
z-index: 1;
}
div#mobileMenuBox .mobile-user-settings .item-1>div {
width: 50%;
}
div#mobileMenuBox .mobile-user-settings .item-1 {
gap: 0.75rem;
margin-bottom: 1rem;
}
div#mobileMenuBox .contacts-and-social img.img-instagram {
width: 38px;
}
div#mobileMenuBox .contacts-and-social .pos-instagram {
padding-top: 1.5px !important;
}
div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex .ds-bannerplus .ds-bannerplus-item {
padding: .5rem;
}
div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex .ds-bannerplus.row {
margin-right: 0px;
margin-left: 0px;
}
/* Mega menu banner image should keep natural aspect ratio */
.ds-megamenu-child-wrapper .ds-bannerplus-box img {
height: auto;
}
.ds-megamenu-child-wrapper .ds-bannerplus-box {
width: 100%;
}
div#mobileMenuBox .ds-menu-catalog-inner,
div#mobileMenuBox .ds-megamenu-child-wrapper {
height: calc(100dvh - 190px);
}
div#mobileMenuBox .ds-menu-catalog {
height: calc(100dvh - 130px);
}
div#mobileMenuBox .ds-megamenu-child-wrapper .ds-megamenu-children .ds-megamenu-children-item a img {
max-width: 32px;
height: auto;
}
}
/* The longest USP (French shipping, 13px) wraps below 360px; 12px keeps it on one line down to 320px. */
@media (max-width: 359.98px) {
#oct-infobar .info-bar .slick-slide {
font-size: 12px;
}
}
@media (max-width:767.9px) {
.ds-category-sort {
margin-right: calc(-.5* var(--bs-gutter-x));
margin-left: calc(-.5* var(--bs-gutter-x));
padding-right: calc(.5* var(--bs-gutter-x)) !important;
padding-left: calc(.5* var(--bs-gutter-x)) !important;
}
.modal.right .modal-dialog {
width: 100%;
}
.right-section .ds-header-user-button .ds-dropdown.position-absolute {
left: 0px !important;
width: 100%;
right: auto !important;
}
}
@media (min-width:768px) {
.right-section .ds-header-user-button .ds-dropdown.position-absolute {
transform: translate(-50%, 0);
}
}
@media (max-width:1199px) {
/* `header.ds-header` carries `backdrop-filter: blur(10px)`, and any
backdrop-filter other than `none` makes the element the containing block
for every `position: fixed` descendant. #mobileMenuBox is fixed, so below
xl it resolved `top: 0` against the header rather than the viewport: the
panel opened under the info bar and ran off the bottom of the screen by
that same height. Below xl the catalogue menu is a full-screen sheet, so
drop the blur here and keep the header opaque instead. Desktop is
untouched: there the panel is position: absolute inside the header. */
header.ds-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--ds-white-color);
}
div#mobileMenuBox {
height: 100dvh;
overflow-y: auto;
}
div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex {
flex-direction: column;
}
div#mobileMenuBox .ds-megamenu-child-wrapper>.d-flex>.col-4,
div#mobileMenuBox .ds-megamenu-child-wrapper .ds-megamenu-children {
width: 100%;
}
}
@media (min-width:992px) and (max-width:1199.98px) {
body footer.ds-footer .container-xl .footer-col,
body footer.ds-footer .container-xl .footer-col.wide,
body footer.ds-footer .container-xl .footer-col:first-child {
flex: 0 0 calc(33.333% - 20px);
margin-right: 0;
}
body footer.ds-footer .container-xl .footer-col:first-child>div {
max-width: 230px;
}
}
@media (min-width:576px) and (max-width:991.98px) {
/* flex-basis must carry the width here: the base rule's `flex: 1 1 0` makes `width` inert. */
body footer.ds-footer .container-xl .footer-col,
body footer.ds-footer .container-xl .footer-col.wide,
body footer.ds-footer .container-xl .footer-col:first-child {
flex: 0 0 calc(50% - 15px);
margin-right: 0;
}
body footer.ds-footer .container-xl {
display: flex;
flex-wrap: wrap;
padding: 0px 15px;
}
body footer.ds-footer .container-xl .footer-col:first-child>div {
max-width: 230px
}
.copy-row {
flex-wrap: wrap;
justify-content: center;
}
.powered-pay-co {
padding-top: 25px;
}
}
.two-columns {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
column-gap: 1.5rem;
/* расстояние между колонками */
}
.fsz-42 {
font-size: 3rem !important;
}
.left-section .ds-dropdown-toggle {
width: max-content;
}
ul.ds-faq-column-nav .ds-account-column-nav-item-icon {
display: none !important;
}
[data-option-id="30"] {
display: flex;
justify-content: space-between;
gap: 12px;
}
/* flex-basis 0 + min-width 0: both buttons always split the row equally and
can shrink below their text width, so overflow is impossible regardless of
how long the localized express label gets. */
[data-option-id="30"]>.radio {
flex: 1 1 0;
width: auto;
min-width: 0;
}
[data-option-id="30"]>.radio>* {
width: 100%;
}
/* The express label text is long ("Express productie +€ 50,17"); let it wrap
onto a second line instead of clipping. The selector mirrors main.min.css's
`.ds-product-options .radio label.ds-radio` (fixed height:47px) so this
later rule wins at equal specificity. */
.ds-product-options [data-option-id="30"] label.ds-radio,
[data-option-id="30"] .ds-radio {
/* 100% of the stretched flex row: when one label wraps to two lines, the
other grows to match, so both buttons always share the tallest height. */
height: 100%;
min-height: 47px;
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
}
[data-option-express] b {
display: block;
font-size: 80%;
}
[data-option-express] .text-end {
display: none;
}
[data-option-express] b span,
[data-modal-option-express] b span {
color: var(--ds-blue-color) !important;
font-family: 'Noto Sans';
font-weight: 400;
font-size: 16px;
}
[data-type="width50"] .ds-module-item .content-block {
padding: 0 !important
}
.procees-checkout {
position: sticky;
bottom: 15px;
}
.products.list.items.product-items.list-view {
grid-template-columns: repeat(2, 1fr);
}
a.button {
text-decoration: none !important;
}
.blink {
animation: blink .5s linear infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.ds-product-main-stock small {
color: #252525;
}
.products .ds-loader-overlay {
position: absolute;
z-index: 19999;
top: 0;
right: 0;
bottom: 0;
height: 100%;
left: 0;
}
.ds-loader-overlay + .ds-loader-overlay {
display: none !important;
}
.products.list {
position: relative
}
.skeleton-text {
background: linear-gradient(90deg, #faf8f4 25%, #faf8f424 50%, #faf8f4 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s linear infinite;
border-radius: 0;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ocs_perf: option-change loading skeletons. Reuse the .skeleton-text shimmer above.
.ds-skel shimmers over price/stock WITHOUT changing box geometry (0 layout shift):
the real text is kept transparent/hidden and an ::after overlay carries the shimmer. */
.ds-skel {
position: relative;
color: transparent !important;
}
.ds-skel > * {
visibility: hidden;
}
.ds-skel::after {
content: "";
position: absolute;
inset: 0;
border-radius: 0;
background: linear-gradient(90deg,
color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 25%,
color-mix(in srgb, var(--ds-primary-color) 3%, #fff) 50%,
color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s linear infinite;
}
/* .ds-gallery-skel covers #main-gallery while a cold option image loads (mobile/VPN). */
#main-gallery {
position: relative;
}
.ds-gallery-skel {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: 0;
}
/* Shimmer for image placeholders. Unlike .skeleton-text (a text-line skeleton in
main.min.css that forces width:100% + height:2.7rem), this sets ONLY the shimmer
background + animation, so the element keeps its own box. Use it on ![]()
while the
picture loads: the img reserves its own box (aspect-ratio / width-height attrs), so the
skeleton height always matches the picture. Unique keyframe name to avoid the duplicate
"skeleton-loading" definition that exists in both awd.css and main.min.css. */
@keyframes ds-skel-shimmer-kf {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ds-skel-shimmer {
background: linear-gradient(90deg,
color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 25%,
color-mix(in srgb, var(--ds-primary-color) 3%, #fff) 50%,
color-mix(in srgb, var(--ds-primary-color) 8%, #fff) 75%);
background-size: 200% 100%;
animation: ds-skel-shimmer-kf 1.5s linear infinite;
}
/* Smooth media swap on option change (gallery, thumb-holder, thumbnails).
The not-yet-loaded media is hidden over its skeleton host (opacity 0, NO transition →
no initial flash); on decode the JS sets an inline `transition: opacity .3s` and removes
this class, fading the picture in. The transition is set inline (not here as a class)
because pinch.js sets inline `transition:none` on .pz-content, which would override a
class rule — inline-on-inline wins. */
.ds-media-out { opacity: 0; }
/* Desktop gallery video cells: keep them square like the image cells (image cells are square via
the square popup width/height attrs; mobile already squares video via .ds-product-images-slide).
Without this the desktop video kept its native aspect ratio, so the cell — and its loading
skeleton — were rectangular instead of square, breaking the uniform grid. */
@media (min-width: 992px) {
#main-gallery .oct-gallery.has-video {
aspect-ratio: 1 / 1;
}
#main-gallery .oct-gallery.has-video video {
width: 100%;
height: 100%;
object-fit: contain;
}
}
div.ocf-popover {
display: none !important;
}
#cireview-modal .help-block {
display: none;
}
[data-bs-toggle="info"] {
cursor: pointer;
}
button.button.btn {
border-radius: 0 !important;
}
#oct-policy button {
min-width: 170px;
}
/* Cookie policy banner layout.
The three action buttons used to wrap 2+1 in the ~934-1361px band because the
actions column was capped by col-md-5. Size the actions block by its content so
the buttons stay on one row whenever they physically fit, and let the text take
the remaining space and wrap. Works for longer (e.g. German) button labels too. */
#oct-policy .oct-policy-text {
flex: 1 1 auto;
min-width: 0;
}
#oct-policy .oct-policy-actions {
flex: 0 0 auto;
flex-wrap: nowrap;
justify-content: flex-end;
max-width: 100%;
}
#oct-policy .oct-policy-actions .button {
flex: 0 0 auto;
white-space: nowrap;
}
@media (max-width: 767.98px) {
#oct-policy .oct-policy-banner {
align-items: stretch;
}
#oct-policy .oct-policy-actions {
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
#oct-policy .oct-policy-actions .button {
flex: 1 1 100%;
min-width: 100%;
}
}
.pos-instagram {
width: 31px;
margin-top: 4px;
}
.br-0 {
border-radius: 0;
}
.typingmind-chat-widget-button {
z-index: 1039;
}
div#common-success div#account-back-button {
display: none !important;
}
.ds-category-sort {
transition: top 0.3s ease !important;
position: sticky;
top: 120px;
z-index: 11;
display: flex;
overflow-x: auto;
justify-content: space-between;
background: #ffffffc2;
backdrop-filter: blur(4px);
box-shadow: 0 20px 27px -25px #ddd;
}
@media (max-width:992px) {
.ds-category-sort {
transition: top 0.3s ease !important;
position: sticky;
top: 70px;
z-index: 11;
display: flex;
overflow-x: auto;
justify-content: space-between;
background: #ffffffc2;
backdrop-filter: blur(4px);
box-shadow: 0 20px 27px -25px #ddd
}
.ds-header,
.sticky-top {
transition: top 0.3s ease !important;
}
}
.ds-livesearch-inner .col-7.col-md-4.p-0 {
min-width: 200px;
}
[data-option-id="30"] * {
font-size: 14px;
}
.inner-wrapper-sticky {
margin-bottom: 30px;
}
/* The product buy column is the exception. The sticky library measures the
wrapper's outer height including this margin, so on the product page the 30px
is both dead space that the column has to earn before it may pin at all, and
the reason the parked column stops 30px short of the end of the gallery
instead of flush with it. The blog and vacancy sidebars keep the margin. */
#product .inner-wrapper-sticky {
margin-bottom: 0;
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.ocf-value-list-body.grid-4 {
column-gap: 8px;
row-gap: 16px;
align-items: start;
}
.ocf-value-list-body.grid-4 > .ocf-value.has-image {
min-width: 0;
height: 100%;
margin-bottom: 0;
gap: 8px;
text-align: center;
}
.ocf-value-list-body.grid-4 > .ocf-value.has-image .ocf-value-name {
min-height: 2.8em;
margin: 0;
line-height: 1.4;
text-align: center;
overflow-wrap: anywhere;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#quickViewModal div#infoModal {
background: #00000057;
}
.shipping-quote-title {
position: relative;
}
.ship-wrapper label {
cursor: pointer;
width: 100%;
display: flex;
justify-content: space-between;
}
.shipping-quote-title img {
position: absolute;
right: 0;
top: 0;
}
[data-option-id="30"] {
display: flex !important;
justify-content: space-between;
}
[data-option-id="25"] label {
justify-content: start !important;
}
@media (max-width: 462px) {
[data-option-id="30"] {
flex-direction: column;
}
[data-option-id="30"] > .radio {
/* flex-basis 0 would collapse an auto-height column flex - size by content here */
flex: none;
width: 100%;
}
}
/* ── Engraving options ── */
.ds-engraving-mm {
margin-top: 1rem;
}
.ds-engraving-mm-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--ds-dark-text-color);
}
.ds-engraving-mm-label .ds-engraving-check {
width: 18px;
height: 18px;
accent-color: var(--ds-primary-color);
cursor: pointer;
flex-shrink: 0;
margin: 0;
}
/* Engraving agreement checkboxes */
.ds-engraving-agree {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: var(--ds-primary-light-color-light);
border: 1px solid var(--ds-border-color-light);
}
.ds-engraving-agree-label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
font-size: 13px;
line-height: 1.5;
color: var(--ds-dark-text-color);
}
.ds-engraving-agree-label input {
width: 18px;
height: 18px;
margin-top: 1px;
flex-shrink: 0;
accent-color: var(--ds-primary-color);
cursor: pointer;
}
.ds-engraving-agree-text {
transition: color var(--ds-main-transition);
}
.ds-engraving-agree-text.ds-engraving-error {
color: var(--ds-red-color);
}
/* Engraving stock notice */
.ds-engraving-stock-notice {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.75rem;
font-size: 13px;
line-height: 1.5;
color: var(--ds-light-text-color-light);
}
.ds-engraving-stock-notice img {
margin-top: 2px;
flex-shrink: 0;
}
/* Express production visibility */
.form-group[data-option-express].ds-express-visible {
max-height: 200px;
margin-bottom: 1rem !important;
margin-top: 1rem !important;
}
div[data-option-express] {
margin-bottom: 0px !important;
}
@media (min-width:768px) {
.fancybox-show-thumbs .image-prod-tooltip {
bottom: 45px;
}
}
@media (max-width:768px) {
.fancybox-show-thumbs .image-prod-tooltip {
bottom: 30px;
}
}
/*fix small CLS*/
.ds-product-main-price.align-items-center {
min-height: 40.1px;
}
.sticky-top.ds-price-block {
padding: .5rem .75rem;
}
/* --------------------------------------------------------------------------
Price block: one owner for its offset, decided by state and not by width.
Two things can pin the price: the column-level StickySidebar on #product, and
this block's own `position: sticky`. They must never own `top` at the same
time, which is what the removed JS writes (115px/160px/calc() from the
library, 0/'' from common.js) were papering over.
The library only has somewhere to travel when the buy column is SHORTER than
the gallery column. On this catalogue it usually is not: eight metals, six
stone sizes and twenty-two ring sizes in a 28%-wide column make the buy
column the taller of the two, so the library correctly stays STATIC and never
pins anything. Gating this block on a viewport width therefore switched the
price block off across the whole desktop range while nothing took over, and
the page was left with no sticky behaviour at all.
So the gate is the library's own state: `is-affixed` sits on #product exactly
while the column is pinned or parked. Then the column owns the offset and the
nested sticky stands down; the rest of the time the price block owns it, on
every viewport, and follows the auto-hiding header through the body flag
below instead of an inline style.
-------------------------------------------------------------------------- */
#product.is-affixed .sticky-top.ds-price-block {
position: relative;
/* .sticky-top and the two main.min.css rules still carry top: 69px/115px.
Sticky ignored them once pinned; relative would turn them into a real
downward shift of the block. */
top: auto;
z-index: auto;
}
body.ds-header-hidden .sticky-top.ds-price-block {
top: 0;
}
@media (max-width: 991.98px) {
.ds-product-main-price.align-items-center {
min-height: 0 !important;
}
/* Strict box. The ![]()
here is injected by the option-change handler, so a
height-derived width left the holder sized by the decoded bytes: swapping to
an option image that is not in cache resized the price block and shifted the
page under the reader. Both axes are definite now, and object-fit keeps the
picture's own shape inside them. */
.sticky-top.ds-price-block #thumb-holder {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 80px;
width: 80px;
height: 80px;
}
.sticky-top.ds-price-block #thumb-holder .popover-img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
}
}
div#ds-product-options {
margin-bottom: 5px !important;
padding-bottom: 10px !important;
transition: all .4s ease;
}
.additional-stock>div {
padding-left: 0px;
margin-bottom: .25rem !important;
}
.view-360:after {
content: " ";
display: block;
position: absolute;
width: 40px;
height: 40px;
top: 15px;
margin: auto;
left: 15px;
background: url('/image/catalog/new_design/icons/360.svg');
}
.view-360 canvas {
aspect-ratio: 1/1;
height: 100%;
}
.option-3dviews.d-flex {
position: absolute;
bottom: 15px;
justify-content: center;
width: 100%;
gap: 15px;
}
.col-6.p-2 {
position: relative;
}
.option-3dview {
cursor: pointer;
}
div#main-gallery>div {
filter: brightness(0.98);
}
/* --- базовая оболочка под медиа, белый фон, скругления --- */
.media-box {
position: relative;
background: #fff;
border-radius: 0;
overflow: hidden;
}
/* если браузер поддерживает aspect-ratio — используем его */
.supports-ar .media-box {
aspect-ratio: calc(var(--w, 1) / var(--h, 1));
}
/* fallback для старых браузеров: резерв высоты через padding-top */
.media-box::before {
content: "";
display: block;
padding-top: var(--pt, 100%);
}
.supports-ar .media-box::before {
padding-top: 0;
}
/* сам контент внутри коробки */
.media-content {
position: absolute;
inset: 0;
display: block;
}
/* изображения/видео/канвас растягиваются по коробке, без обрезания */
.media-box img,
.media-box video,
.media-box canvas {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
display: block;
border: 0;
}
/* мягкое появление всей галереи при полной замене */
#main-gallery {
transition: opacity .3s;
}
/* CLS guard: reserve square space for gallery slides on mobile so option swaps and lazy-loaded images do not shift layout */
@media (max-width: 991.98px) {
/* Main gallery: each slide is full viewport width, lock to square */
#main-gallery .ds-product-images-slide {
aspect-ratio: 1 / 1;
}
#main-gallery .ds-product-images-slide > a,
#main-gallery .ds-product-images-slide > .gallery-skins,
#main-gallery .ds-product-images-slide > .gallery-360 {
width: 100%;
height: 100%;
}
#main-gallery .ds-product-images-slide img,
#main-gallery .ds-product-images-slide video {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Thumbnails: hardcoded pixel size so the strip height is constant regardless of the number of thumbs.
Tunable via --thumb-size on the strip. */
#thumb-gallery {
--thumb-size: 64px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#thumb-gallery::-webkit-scrollbar {
display: none;
}
#thumb-gallery .ds-product-images-slide {
flex: 0 0 auto;
width: var(--thumb-size);
height: var(--thumb-size);
aspect-ratio: auto;
}
#thumb-gallery .ds-product-images-slide > * {
width: 100%;
height: 100%;
}
#thumb-gallery .ds-product-images-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
/* необязательно, но приятно: активная миниатюра 360 */
.option-3dviews .option-3dview.active {
outline: 1px solid var(--ds-primary-color);
outline-offset: 0;
border-radius: 0;
}
.option-3dview {
cursor: pointer;
border-radius: 0;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, .08);
}
.ocf-mobile.sticky-top button {
width: 100%;
}
div#ocf-module-1 {
min-width: 400px;
}
div#ocf-filter-114-2-1 img {
border-radius: 50%;
width: auto;
max-width: 90px;
margin-bottom: 5px;
}
.skin-dot {
width: 30px;
height: 30px;
padding: 10px;
display: block;
margin: 0 5px;
border-radius: 0;
}
.skin-dots {
position: absolute;
bottom: 30px;
cursor: pointer;
width: 100%;
display: flex;
justify-content: center;
}
.gallery-skins {
position: relative;
}
.skin-dot.active {
outline: 1px solid var(--ds-primary-color);
outline-offset: 0px;
}
.skin-dot.cgi_w {
background: linear-gradient(45deg, #e1be9f, #c09073, #e1be9f);
}
.skin-dot.cgi_l {
background: linear-gradient(45deg, #c09073, #712c1aab, #c09073);
}
.skin-dot.cgi_b {
background: linear-gradient(45deg, #4d2a15, #712c1a, #4d2a15);
}
.rounded-circle.bg-dark-subtle {
overflow: hidden;
}
.ds-information a.button {
text-decoration: none !important;
}
.ds-about-card {
background: var(--ds-primary-light-color-light);
}
.title.module-title.block-title {
font-family: 'Noto Serif';
font-weight: 400;
font-size: 19px;
}
#oct-infobar .oct-infobar-text>span {
min-width: fit-content;
}
.slick-slider-btn-prev.slick-arrow {
right: auto;
left: 0;
}
.slick-arrow {
position: absolute;
top: 40%;
width: 40px;
z-index: 1;
right: 0;
background: transparent !important;
border: none;
}
.slick-arrow:hover * {
fill: inherit !important;
}
/* Latest Reviews carousel (cireviewlatest): place the slick arrows beside the
cards in a side gutter and centre them vertically, so they no longer sit on
top of the first/last review card. Scoped to .ds-reviews-carousel so the
shared .slick-arrow rules above stay untouched for every other carousel.
Desktop: padding opens a gutter; arrows keep the inherited left:0/right:0
(relative to the padding box) and so fall into that gutter, outside the cards.
Mobile (1-up): no side gutter, arrows centred just below the carousel. */
@media (min-width: 768px) {
.ds-reviews-carousel {
padding-left: 50px;
padding-right: 50px;
}
.ds-reviews-carousel .slick-arrow {
top: 50%;
transform: translateY(-50%);
}
}
@media (max-width: 767.98px) {
.ds-reviews-carousel {
padding-bottom: 50px;
}
.ds-reviews-carousel .slick-arrow {
top: auto;
bottom: 0;
transform: none;
}
.ds-reviews-carousel .slick-slider-btn-prev.slick-arrow {
left: calc(50% - 44px);
right: auto;
}
.ds-reviews-carousel .slick-slider-btn-next.slick-arrow {
right: calc(50% - 44px);
left: auto;
}
}
[data-type=full-split] .content-block {
padding: .5rem;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
align-items: center;
position: relative
}
[data-type=full-split] .ds-module-img {
max-width: 150px;
}
[data-type=full-split] .arrows,
[data-type=full-split] .ds-module-button-wishlist {
display: none;
}
[data-type=full-split] .ds-module-caption {
padding-left: 15px;
padding-right: 15px;
padding-bottom: .5rem;
}
.img-metals>* {
height: 25px;
}
.fancybox-navigation {
display: none;
}
.modal.right>*>.modal-content {
height: 100dvh !important;
overflow: auto;
max-width: 100vw;
}
div#selected-filters .ocf-disabled {
display: none;
}
.button-unit {
cursor: pointer;
}
/* ===== Site-wide improvements ===== */
.ds-module-price,
.ds-price-new,
.ds-price-old,
.ds-price-tax {
font-variant-numeric: tabular-nums;
}
h1,
.ds-slideshow-item-title {
text-wrap: balance;
}
#common-home>.container-fluid>*:not(:first-child),
#common-home>*:not(:first-child):not(.container-fluid) {
padding-top: 3rem;
}
@media (max-width: 575px) {
#common-home>.container-fluid>*:not(:first-child),
#common-home>*:not(:first-child):not(.container-fluid) {
padding-top: 2rem;
}
}
/* ===== Video Hero ===== */
.ds-video-hero {
position: relative;
min-height: 100dvh;
margin-top: -100px;
padding-top: 100px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ds-video-hero__media {
position: absolute;
inset: 0;
}
.ds-video-hero__media video,
.ds-video-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ds-video-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
pointer-events: none;
}
.ds-video-hero__content {
position: relative;
z-index: 2;
padding: 4rem 3rem;
max-width: 50%;
text-align: center;
}
.ds-video-hero__title {
font-family: 'Noto Serif', serif;
font-weight: 400;
font-size: 3.5rem;
line-height: 1.3;
letter-spacing: -0.02em;
color: #fff;
text-wrap: balance;
margin: 0 0 1rem;
}
.ds-video-hero__text {
color: rgba(255, 255, 255, 0.85);
font-size: 1.25rem;
line-height: 1.5;
margin: 0 0 2rem;
}
.ds-video-hero__buttons {
display: flex;
gap: 1rem;
max-width: 480px;
margin: 0 auto;
}
.button-hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
padding: 1rem 1.5rem;
font-size: .875rem;
font-weight: 500;
text-decoration: none;
transition: background-color var(--ds-main-transition), color var(--ds-main-transition), border-color var(--ds-main-transition);
}
.button-hero-cta--ghost {
border: 2px solid rgba(255, 255, 255, 0.7);
color: #fff;
background: transparent;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.button-hero-cta--ghost:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.button-hero-cta--solid {
border: 2px solid #fff;
background: #fff;
color: var(--ds-primary-color);
}
.button-hero-cta--solid:hover {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.85);
color: var(--ds-primary-color);
}
@media (max-width: 991px) {
.ds-video-hero {
min-height: 100dvh;
}
.ds-video-hero__content {
padding: 3rem 2rem;
}
.ds-video-hero__title {
font-size: 2.5rem;
}
.ds-video-hero__text {
font-size: 1.125rem;
}
}
@media (max-width: 575px) {
.ds-video-hero {
min-height: 100dvh;
margin-top: -70px;
padding-top: 70px;
}
.ds-video-hero__content {
padding: 2rem 1.5rem;
max-width: 100%;
}
.ds-video-hero__title {
font-size: 2.25rem !important;
}
.ds-video-hero__text {
font-size: 1rem;
}
.button-hero-cta {
padding: .875rem 1.25rem;
font-size: .8125rem;
}
}
/* ===== Homepage section rhythm ===== */
/* Reviews section (already container-fluid, no negative margin trick needed) */
#common-home .ds-store-reviews-container {
background-color: var(--ds-primary-light-color-light);
padding-top: 3rem;
padding-bottom: 3rem;
}
.thumb-gallery.ds-product-images-main {
filter: brightness(0.98);
}
.ds-megamenu-child-wrapper .ds-bannerplus-box img {
height: auto;
}
.ds-megamenu-child-wrapper .ds-bannerplus-box a {
background: transparent !important
}
/* OCFilter unit switcher — dropdown for option measurement units inside filter block */
.ocf-value-list-body .ocf-unit-switcher {
display: block;
width: 100%;
grid-column: 1 / -1;
margin-top: 0;
margin-bottom: 10px;
}
.ocf-value-list-body .ocf-unit-switcher .ds-unit-trigger {
display: inline-flex;
font-size: 13px;
}
.ocf-value-list-body .ocf-unit-switcher .ds-unit-dropdown {
z-index: 5;
}
/* gallery-scroll fix: нужно `overflow: hidden` (обе оси), а НЕ `overflow-y`.
overflow-y:hidden при overflow-x:visible повышает overflow-x до вычисленного `auto`,
из-за чего этот якорь становится горизонтальным скролл-контейнером вокруг
натурально-размерной (напр. 3004px) картинки из pinch.js: свайп нативно скроллит
картинку внутри слайда раньше, чем скроллится карусель #main-gallery. Клип по обеим
осям убирает вложенный горизонтальный скролл и сохраняет вертикальное обрезание. */
a.oct-gallery.d-block {
overflow: hidden;
}
#product-recently-viewed #input-sort {
padding-right: 30px;
}
/* ============================================================
* Продукт-страница - фикс горизонтального overflow на 992-1199px
* ============================================================
* В этом диапазоне Bootstrap container-xl ещё работает в режиме
* container-fluid (100% минус padding), а двухколоночный flex
* (.ds-product-images + .ds-product-main) не имеет явных ширин ни
* на одной колонке - каждая берёт ширину по intrinsic content.
* Слайдер галереи + сетка опций в сайдбаре суммарно больше
* доступной ширины контейнера, сайдбар уезжает за правый край,
* body показывает горизонтальный скроллбар.
*
* Scoped to that range and not applied globally. `overflow: clip` makes the
* element a containing block for every `position: fixed` descendant, and the
* sticky buy column pins with `position: fixed`: applied at all widths it made
* the column pin to the bottom of this container instead of the bottom of the
* window, 12px to the right of where it belongs. From 1200px both columns carry
* explicit widths, so the overflow this guards against cannot occur there. */
@media (min-width: 992px) and (max-width: 1199.98px) {
/* See the note above: this is the horizontal-overflow guard, and it is
confined to this range because it also captures fixed positioning. */
#product-product {
overflow-x: clip;
}
.ds-product-main-content {
align-items: flex-start;
}
.ds-product-main-content > .ds-product-images,
.ds-product-main-content > #productImages {
flex: 1 1 55%;
max-width: 55%;
min-width: 0;
}
.ds-product-main-content > .ds-product-main,
.ds-product-main-content > #product {
flex: 1 1 45%;
max-width: 45%;
min-width: 0;
}
}
div#mm-checkout-item-modal .ds-ai-disclosure,
.ds-checkout-layout .ds-ai-disclosure {
display: none !important;
}
span.ds-ai-disclosure.ds-ai-disclosure--micro {
display: none;
}
/* ==========================================================================
Device-independent presentation (Phase 4 shared HTML)
One HTML response is served to every device, so layout that used to be
chosen by a server-side User-Agent read is chosen here by viewport instead.
========================================================================== */
/* Quick-view dialog. Replaces an inline max-width that was emitted only when the
server guessed "mobile"; Bootstrap 5 sizes the dialog from --bs-modal-width,
and below 576px it is already full width, so only the 576-767.98px band needs
the override. Viewport-driven, so a narrow desktop window behaves correctly too. */
@media (max-width: 767.98px) {
.modal-dialog.ds-quickview-dialog {
--bs-modal-width: 100%;
}
}
/* Selected-filter chips are desktop presentation; the mobile filter button carries a
count badge instead. The chip markup is now rendered for every device so category
pages stay one cacheable byte stream, and the breakpoint decides visibility. The
"cancel all" button is unaffected and keeps its existing mobile behaviour. */
@media (max-width: 767.98px) {
div#selected-filters .ds-chip-list,
div#selected-filters .ds-filter-chip,
div#selected-filters .ds-filter-chip-more {
display: none;
}
}
/* --------------------------------------------------------------------------
Product gallery: one markup, layout chosen by viewport
--------------------------------------------------------------------------
The gallery used to be rendered twice by the server from a User-Agent guess:
a scroll-snap slider for "mobile", a Bootstrap .row/.col-6 grid otherwise.
That guess disagreed with the actual window size (a desktop window under
1024px got the grid markup with slider classes and collapsed into strips)
and it made every product page uncacheable.
The markup is now always the slider form. Below 992px the existing
main.min.css rules already produce the scroller, so only the wide layout is
defined here: the scroller is turned back into a two-up wrapping grid and
the touch-only affordances are hidden.
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
/* main.min.css makes .ds-product-images-main a non-wrapping horizontal
scroll-snap container. Wrap it and disable snapping so the tiles form a
grid instead of one full-width slide per screen. */
#main-gallery.ds-product-images-main {
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
/* Mirrors the negative gutter the old .row wrapper provided, so the
tiles stay flush with the column edge. */
margin-left: -0.5rem;
margin-right: -0.5rem;
/* Neutralises main.min.css's dormant xl rule, which was written for a
left thumb rail that this gallery does not use and which only became
reachable once desktop started carrying this class. */
padding-left: 0;
padding-top: 0;
}
/* Replaces .col-6.p-2 / .col-6.py-2 from the old desktop markup. */
#main-gallery.ds-product-images-main .ds-product-images-slide {
flex: 0 0 50%;
max-width: 50%;
padding: 0.5rem;
scroll-snap-align: none;
}
/* Touch-only affordances. The thumbnail strip, the full-screen button and
the sticky add-to-cart bar are rendered for every device so the HTML
stays identical, and hidden here rather than omitted server-side. */
#thumb-gallery,
button#show-fancy,
.sticky-cart-button {
display: none !important;
}
}
/* main.min.css scopes .pz-wrap/.pz-content to max-width 767.98px, but the
scroller layout and the thumbnail strip run to 991.98px. Extend the pinch
styling across the same range so the 768-991.98px band is not a gap where
the slider renders without its zoom styling. pinch.js activates on the same
query, so markup, CSS and behaviour share one breakpoint. */
@media (min-width: 768px) and (max-width: 991.98px) {
#main-gallery .pz-wrap {
position: relative;
overflow: visible;
touch-action: pan-x pan-y !important;
}
#main-gallery .pz-content {
will-change: transform;
user-select: none;
transition: 0.05s;
-webkit-user-drag: none;
max-width: none;
left: 0;
top: 0;
transform-origin: 0 0;
}
}
/* --------------------------------------------------------------------------
Product card: one markup, presentation chosen by viewport and input
--------------------------------------------------------------------------
The card used to be rendered two different ways from a User-Agent guess: a
scroll-snap gallery of every product image, or a single image that swaps to
a lifestyle shot on hover. It now always carries both, and the rules below
pick one. The default is the gallery, so anything that is not a wide
fine-pointer device keeps the swipeable card.
The lifestyle image is display:none rather than transparent in the default
case, so its loading="lazy" ![]()
is never fetched on a phone.
-------------------------------------------------------------------------- */
.thumb-gallery.ds-thumb-hover .ds-thumb-hover-cgi {
display: none;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
/* A device that can hover shows one image and reveals the lifestyle shot,
so the horizontal scroller collapses to its first slide. */
.thumb-gallery.ds-thumb-hover {
display: block;
overflow: hidden;
}
.thumb-gallery.ds-thumb-hover .ds-product-images-slide {
width: 100%;
}
.thumb-gallery.ds-thumb-hover .ds-product-images-slide:not(:first-child) {
display: none;
}
.thumb-gallery.ds-thumb-hover .ds-thumb-hover-cgi {
display: block;
}
}
/* --------------------------------------------------------------------------
Sticky add-to-cart bar (product page, compact layout)
--------------------------------------------------------------------------
Position is owned here, not by inline styles. The bar sits under the header,
and the header auto-hides on scroll down, so it follows body.ds-header-hidden
(set by the same handler in common.js). It previously kept a 70px gap for a
header that was no longer on screen, because the only rule that compensated
used an adjacent-sibling selector that the header partial never satisfied.
-------------------------------------------------------------------------- */
.sticky-cart-button {
--mm-header-height: 70px;
top: calc(-1 * var(--mm-header-height));
opacity: 0;
pointer-events: none;
/* Hidden for assistive technology and keyboard focus while off-screen. The
zero-duration visibility transition is delayed only in this direction, so
the bar stays reachable for the length of the fade-out and becomes
visible immediately when the visible class is added. */
visibility: hidden;
/* Neutralises the old sibling-selector compensation in main.min.css. */
margin-top: 0 !important;
background: var(--ds-body-bg-light-color, #fff);
border-bottom: 1px solid var(--ds-border-color-light, #f2f2f2);
/* The brand green at 10%; --ds-primary-color is rgb(...), so the alpha
comes from color-mix rather than a second hardcoded literal. */
box-shadow: 0 6px 20px color-mix(in srgb, var(--ds-primary-color) 10%, transparent);
transition: top 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}
.sticky-cart-button.ds-sticky-cart-visible {
top: var(--mm-header-height);
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: top 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
}
body.ds-header-hidden .sticky-cart-button.ds-sticky-cart-visible {
top: 0;
}
@media (prefers-reduced-motion: reduce) {
.sticky-cart-button,
.sticky-cart-button.ds-sticky-cart-visible {
transition: none;
}
}
.ds-sticky-cart {
gap: 0.75rem;
padding: 0.5rem 0.75rem;
}
.ds-sticky-cart > span:first-child {
flex: 0 0 auto;
}
.sticky-cart-button #sticky-cart-image {
width: 48px;
height: 48px;
object-fit: contain;
background: var(--ds-primary-light-color-light, #f9f8f5);
display: block;
}
.ds-sticky-cart-title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.3;
color: var(--ds-dark-text-color, #1c1c1c);
/* Two lines then ellipsis: product names are long and a single line would
cut most of them mid-word. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ds-sticky-cart > span:last-child {
flex: 0 0 auto;
}
.sticky-cart-button .ds-sticky-cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
}
.sticky-cart-button .ds-sticky-cart-btn svg {
margin: 0 !important;
}
/* --------------------------------------------------------------------------
Gallery full-screen control
--------------------------------------------------------------------------
.ds-gallery-stage is the positioned box for the gallery itself. The button is
position:absolute and used to resolve against a wrapper that also contained
the thumbnail rail above the gallery, so it rendered above the photo instead
of on it.
-------------------------------------------------------------------------- */
.ds-gallery-stage > button#show-fancy {
z-index: 3;
border: 0;
background: transparent;
line-height: 0;
}
/* --------------------------------------------------------------------------
404 page (error/not_found.twig)
-------------------------------------------------------------------------- */
.ds-404-intro {
max-width: 40rem;
}
.ds-404-search {
max-width: 32rem;
}
.ds-404-collections,
.ds-404-custom,
.ds-404-help {
max-width: 60rem;
}
.ds-404-collection-link,
.ds-404-help {
border: var(--ds-main-border);
}
.ds-404-collection-link,
.ds-404-collection-name {
transition: var(--ds-main-transition);
}
.ds-404-collection-media {
overflow: hidden;
aspect-ratio: 1 / 1;
}
.ds-404-collection-media img {
height: 100%;
object-fit: cover;
transition: transform 0.6s ease-out;
}
.ds-404-collection:hover .ds-404-collection-media img,
.ds-404-collection:focus-visible .ds-404-collection-media img {
transform: scale(1.04);
}
.ds-404-collection:hover .ds-404-collection-name,
.ds-404-collection:focus-visible .ds-404-collection-name {
color: var(--ds-primary-color) !important;
}
.ds-404-collection-link:hover,
.ds-404-collection-link:focus-visible {
border-color: var(--ds-primary-color);
color: var(--ds-primary-color) !important;
}
.ds-404-custom {
background-color: var(--ds-primary-light-color);
}
.ds-404-custom-media img {
object-fit: cover;
min-height: 16rem;
}
.ds-404-help-icon {
color: var(--ds-primary-color);
}
/* --------------------------------------------------------------------------
Search results page (product/search.twig)
-------------------------------------------------------------------------- */
.ds-search-page-form {
max-width: 40rem;
}
.ds-search-page-form .form-control {
height: 3.25rem;
padding: 0 3.25rem;
border: var(--ds-main-border);
background: var(--ds-white-color);
box-shadow: none;
}
.ds-search-page-form .form-control:focus {
border-color: var(--ds-primary-color);
}
.ds-search-page-icon {
position: absolute;
top: 0;
bottom: 0;
width: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: var(--ds-primary-color);
cursor: pointer;
}
.ds-search-page-submit {
left: 0;
}
.ds-search-page-clear {
right: 0;
}