/* Additions to the template's style.css for things the static template did not have. */

/* language switcher (header right-nav, mobile nav footer) */
.lang-switcher { display: inline-flex; gap: 8px; align-items: center; }
.lang-switcher__item { text-decoration: none; }
.lang-switcher__item.-active { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mobile-nav__footer .lang-switcher { justify-content: center; padding: 8px 0; }

/* validation */
.field-error { color: #c00; font-size: 12px; line-height: 1.4; margin: 4px 0 0; }
.-has-error > input, .-has-error > select, .-has-error > textarea, .-has-error .select2-selection { border-color: #c00 !important; }
.auth-form__status.-success, .account-form-status.-success, .checkout-status.-success, .form-status.-success { color: #34ad35; }
.auth-form__status.-error, .account-form-status.-error, .checkout-status.-error, .form-status.-error { color: #c00; }

/* card badge "new" */
.product-item__badges-item--new { background: #8c0014; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; text-transform: uppercase; }

/* buttons waiting for the server */
.-loading { opacity: .6; pointer-events: none; }

/* flash messages (session status) */
.flash-message { margin: 16px auto; max-width: 1170px; padding: 12px 16px; border: 1px solid #d6d6d6; background: #f7f7f7; }
.flash-message.-success { border-color: #34ad35; }
.flash-message.-error { border-color: #c00; }

/* main nav: category names of ru/en are longer than the template's; keep a gap so they never run together */
.header__nav .first-level { column-gap: 22px; }
.header__nav .first-level__item-title { white-space: nowrap; }
@media (max-width: 1365px) { .header__nav .first-level { column-gap: 14px; } .header__nav .first-level__item-title { letter-spacing: .2px; } }
.right-nav .lang-switcher { margin-left: 16px; }

/* voucher "apply": the template sized it for a short English word; let it grow to its label */
.basket-voucher__action { width: auto; min-width: 112px; white-space: nowrap; }

/* landing split-section CTA: on phones the column is narrow; a full-width pill keeps the label on one line */
@media (max-width: 767px) {
    .split-section__button { width: 100%; max-width: 100%; text-align: center; padding: 12px 16px; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
}

/* some pages set no background of their own; keep the canvas white whatever the viewer's colour scheme */
html, body { background-color: #fff; }

/* catalog toolbar on phones: the az/ru sort labels are longer than the template's; keep count, sort and view on one row */
@media (max-width: 767px) {
    .list__product-count { white-space: nowrap; margin-right: 8px; }
    .catalog-sort__label { letter-spacing: .6px; white-space: nowrap; }
    .layouts-label { letter-spacing: .6px; }
}

/* PDP feature carousel: the arrows had the card's own grey and melted into the next card's text */
.pdp-carousel .flickity-prev-next-button { background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); z-index: 2; }
.pdp-carousel .flickity-prev-next-button:disabled { opacity: 0; }

/* account overview cards: justified text in these narrow columns left wide gaps between words */
.account-overview__info p, .account-overview__content p { text-align: left; }

/* sticky header: the template's 30% background let page text show through the icons on light pages */
.-sticky-header .header-wrapper { --tw-bg-opacity: 1; }

/* product card: the EU product sheet link is a short label; keep it on one line */
.product-item__energy-form a { white-space: nowrap; }

/* gift voucher banner: the caption is text now (it used to be painted into the image); it sits on the empty right half */
@media (min-width: 768px) {
    .voucher-page .gift-vouchers__cover .info { left: auto; right: 0; width: 50%; padding: 0 5% 0 2rem; align-items: flex-start; text-align: left; }
}
@media (min-width: 768px) and (max-width: 1169px) {
    .voucher-page .gift-vouchers__cover .info__title { font-size: 1.75rem; line-height: 2.25rem; }
}

/* home hero: the caption is text over the image (the banners used to carry it painted in). Desktop: on the dark right
   panel (from 54% of the width); phones: on the dark lower part of the mobile image. */
.hero-caption { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 22px; color: #fff; pointer-events: none; }
.hero-caption__title { margin: 0; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.2; font-weight: 300; }
.hero-caption__title strong { font-weight: 600; }
.hero-caption__button { align-self: flex-start; display: inline-block; padding: 10px 26px; border-radius: 999px; background: #f59b00; color: #1a1a1a; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; white-space: nowrap; }
@media (min-width: 768px) {
    .hero-caption { top: 50%; left: 59%; right: 8%; transform: translateY(-50%); }
}
@media (max-width: 767px) {
    .hero-caption { left: 16px; right: 16px; top: 52%; bottom: 8%; justify-content: center; align-items: center; text-align: center; gap: 14px; }
    .hero-caption__title { font-size: 20px; }
    .hero-caption__button { align-self: center; padding: 8px 20px; font-size: 11px; }
}

/* timeless quality: the hero caption is text now (it was painted into the background picture) */
.quality-hero-title { margin: 0; color: #fff; font-size: 34px; line-height: 1.2; font-weight: 400; letter-spacing: 3px; text-align: center; white-space: nowrap; }
.about-us__header-content:has(.quality-hero-title) { top: 49%; transform: translate(-50%, -50%); }

/* favourites cards: one rhythm for every card, so prices, delivery and buttons of a row line up
   (the EU sheet line is always there, empty when a product has none); old price struck as in the catalog */
.favourite-products__items .product-item { flex-direction: column; height: 100%; }
.favourite-products__items .product-item__info { flex: 1 1 auto; display: flex; flex-direction: column; padding: 1.25rem .625rem .625rem; }
.favourite-products__items .product-item__info-holder { height: auto; }
.favourite-products__items .product-item__name { font-size: 1rem; line-height: 1.5rem; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 3rem; }
.favourite-products__items .product-item__detail { height: auto; min-height: 2.5rem; padding-top: .5rem; font-size: .8125rem; line-height: 1.25rem; color: #6b6b6b; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.favourite-products__items .product-item__energy { display: flex; justify-content: center; align-items: center; height: 1.25rem; min-height: 0; padding: 0; margin-top: .75rem; }
.favourite-products__items .product-item__energy-form-wrapper { width: auto; }
.favourite-products__items .product-item__energy-form { padding: 0; }
.favourite-products__items .product-item__energy-form::before { display: none; }
.favourite-products__items .product-item__energy-form a { font-size: .75rem; line-height: 1rem; font-weight: 400; color: #868686; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.favourite-products__items .product-item__price { margin-top: auto; padding-top: 1.25rem; display: flex; justify-content: center; align-items: center; gap: .625rem; min-height: 3.25rem; }
.favourite-products__items .product-item__price-container { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.favourite-products__items .product-item__price .price { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 500; white-space: nowrap; }
.favourite-products__items .product-item__price .-retail { font-size: .75rem; line-height: 1rem; font-weight: 300; color: #868686; text-decoration: line-through; }
.favourite-products__items .product-item__price .discount { border: 1px solid #8c0014; padding: 0 .375rem; font-size: .6875rem; line-height: 1.25rem; color: #8c0014; white-space: nowrap; }
.favourite-products__items .product-item__delivery { display: flex; justify-content: center; align-items: flex-start; gap: .375rem; min-height: 2rem; margin-top: .5rem; font-size: .75rem; line-height: 1rem; color: #34ad35; }
.favourite-products__items .product-item__delivery span { width: auto; max-width: 15rem; text-align: center; }
.favourite-products__items .product-item__buttons { padding: 1rem 1.25rem 1rem; gap: .5rem; }
.favourite-products__items .product-item__buttons .pz-button { width: 100%; max-width: 16rem; }
/* the brand promises sit below the products in their own grid; the account column is too narrow for the template's six */
.favourite-products__promo { border-top: 1px solid #e0e0e0; padding-top: 3rem; }
@media (min-width: 1024px) {
    .account-favourites-page .favourite-products__promo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; }
}

/* header search: the clear and submit buttons are bare icons; the pz-button focus/active fill drew orange pills
   round them. The close button sits in the panel's top right instead of hanging over the header bar. */
.header__search-form .header__search-close-btn, .header__search-form .header__search-button {
    width: 2.25rem; display: flex; align-items: center; justify-content: center;
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0;
}
.header__search-form .header__search-close-btn:hover, .header__search-form .header__search-close-btn:focus, .header__search-form .header__search-close-btn:active,
.header__search-form .header__search-button:hover, .header__search-form .header__search-button:focus, .header__search-form .header__search-button:active { background: transparent !important; box-shadow: none !important; }
.header__search-form .header__search-close-btn:focus-visible, .header__search-form .header__search-button:focus-visible { outline: 2px solid #191919; outline-offset: -4px; }
.header__search-form .header__search-close-btn i, .header__search-form .header__search-button i { color: #4b4b4b !important; }
.header__search-form .header__search-close-btn { right: 2.25rem; }
.header__search-form .header__search-button { right: 0; }
.header__search-form .header__search-input .input { padding-right: 4.75rem; }
.header__search-close { top: 0; left: 0; right: 0; width: auto; z-index: 2; pointer-events: none; }
.header__search-close .header__search-top-close {
    pointer-events: auto; position: absolute; top: 1rem; right: 1rem; left: auto;
    width: 2.75rem !important; height: 2.75rem; border-radius: 9999px; border: 0;
    background-color: transparent !important; box-shadow: none !important;
}
.header__search-close .header__search-top-close:hover, .header__search-close .header__search-top-close:focus { background-color: #ececec !important; }
.header__search-close .header__search-top-close .pz-icon-close1 { font-size: 1.25rem; line-height: 1; }
@media (max-width: 767px) {
    /* the form has a 1.25rem side padding on phones: keep both icons inside the field */
    .header__search-form .header__search-close-btn { right: 3.25rem; }
    .header__search-form .header__search-button { right: 1.25rem; }
    .header__search-close .header__search-top-close { top: .25rem; right: .5rem; width: 2.25rem !important; height: 2.25rem; }
    .header__search-close .header__search-top-close .pz-icon-close1 { font-size: 1rem; }
}

/* header account popup: "My account" and "Log out" (the latter sits in a form) are one left-aligned list */
.action-menu__item.user-actions .user-popup { width: 13rem; padding: .75rem 0; }
.action-menu__item.user-actions .user-popup__content { gap: 0; }
.action-menu__item.user-actions .user-popup__content form { margin: 0; width: 100%; }
.action-menu__item.user-actions .user-popup__content .pz-button {
    display: flex; width: 100%; justify-content: flex-start; text-align: left; margin: 0 !important;
    padding: .75rem 1.5rem !important; height: auto; min-height: 0; border: 0; border-radius: 0;
    background: transparent !important; font-size: .9375rem; line-height: 1.25rem; opacity: .75;
}
.action-menu__item.user-actions .user-popup__content .pz-button:hover,
.action-menu__item.user-actions .user-popup__content .pz-button:focus-visible { opacity: 1; background: rgba(255, 255, 255, .06) !important; }

/* footer contact row: "Contact", the customer service line and "Follow Miele" on one centre line; the service
   label sits before its number instead of floating centred above it */
.footer-wrapper__part, .footer-info, .footer-info__wrapper, .footer-info-phonenumbers, .footer-social { align-items: center; }
.footer-info-phonenumbers__consumers:empty { display: none; }
.footer-info-phonenumbers__customers { flex-direction: row; align-items: baseline; gap: .625rem; }
.footer-info-phonenumbers__customers-title { font-size: .8125rem; line-height: 1.25rem; font-weight: 400; color: rgba(255, 255, 255, .6); }
.footer-info-phonenumbers__customers-number, .footer-info-phonenumbers__customers-number a { font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: #fff; }
.footer-social__icons { align-items: center; }
.footer-social__icons a { opacity: .85; transition: opacity .2s; }
.footer-social__icons a:hover { opacity: 1; }
/* search field: clear and submit share the field's height and centre line, at one visual size */
.header__search-form .header__search-close-btn, .header__search-form .header__search-button { top: 0; bottom: 1px; height: auto !important; }
.header__search-form .header__search-close-btn i { font-size: .875rem !important; line-height: 1 !important; }
.header__search-form .header__search-button i { font-size: 1.125rem !important; line-height: 1 !important; }
.footer-info__wrapper { column-gap: 1.5rem; }
.footer-social { column-gap: 1.25rem; }
.footer-social__icons { gap: 1.25rem; }
@media (min-width: 768px) { .footer-wrapper__part > .footer-social { margin-inline-start: 4rem; } }

/* account overview cards: one rhythm in all three — title block of a fixed height, body text of one size,
   the divider and the footer line at the same height; room above for the round icons (they overlapped the notice) */
@media (min-width: 768px) {
    .account-page .account-index .account-overview { margin-top: 2.75rem; align-items: stretch; }
    .account-page .account-index .account-overview__address,
    .account-page .account-index .account-overview__order-history,
    .account-page .account-index .account-overview__contact { padding: 3rem 1.75rem 1.75rem; font-size: .9375rem; line-height: 1.5rem; }
    .account-page .account-index .account-overview__title {
        display: flex; align-items: center; justify-content: center; min-height: 3rem; margin: 0 0 1.25rem; padding: 0;
        font-size: 1.0625rem; line-height: 1.5rem; font-weight: 700; letter-spacing: .5px; text-align: center;
    }
    .account-page .account-index .account-overview__content {
        flex: 1 1 auto; height: auto; min-height: 7.5rem; margin: 0 0 1.25rem; padding-bottom: 1.25rem;
        text-align: left; font-size: .9375rem; line-height: 1.5rem; border-bottom: 1px solid #ececec;
    }
    .account-page .account-index .account-overview__info { min-height: 4.5rem; display: flex; align-items: center; text-align: left; }
    .account-page .account-index .account-overview__address p,
    .account-page .account-index .account-overview__order-history p,
    .account-page .account-index .account-overview__contact p { font-size: .9375rem; line-height: 1.5rem; margin: 0; }
    .account-page .account-index .account-overview__content p + p { margin-top: .25rem; }
    .account-page .account-index .account-overview__contact .account-overview__info { justify-content: center; }
    .account-page .account-index .account-overview__contact .account-overview__info p { font-size: 1.5rem; line-height: 2rem; font-weight: 700; text-align: center; }
    .account-page .account-index .account-overview__contact .account-overview__info a { text-decoration: none; }
}

/* the sticky header folds its nav row away above the content; Chrome's scroll anchoring then moved the scroll up by the
   same 58px, which unfolded the header again and so on (the header flickered). The page needs no anchoring. */
/* (overflow-anchor is back to the browser default: the fold no longer changes the layout, and anchoring keeps a
   reload's restored scroll steady while images and carousels above load) */

/* desktop mega menu: a panel as wide as the page container (it stopped at the nav's width), sized to its content
   instead of a fixed 620px; a head with the category and "all products"; subcategories in even columns with their
   own sub-items listed under them; a soft fade in */
@media (min-width: 1170px) {
    .main-nav .mega-menu {
        width: min(1170px, calc(100vw - 4rem)); max-width: none; height: auto; min-height: 0;
        display: block; padding: 2rem 2.5rem 2.5rem; border-top: 1px solid #333;
        box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
        opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; transition-delay: .15s, .35s;
    }
    .main-nav .first-level__item:hover .mega-menu, .main-nav .first-level__item:focus-within .mega-menu {
        opacity: 1; visibility: visible; transition: opacity .2s ease .25s, visibility 0s linear .25s;
    }
    .mega-menu__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid #3a3a3a; }
    .mega-menu__title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; color: #fff; }
    .mega-menu__all { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; line-height: 1rem; letter-spacing: 1.2px; text-transform: uppercase; color: #bdbdbd; transition: color .15s; white-space: nowrap; }
    .mega-menu__all i { font-style: normal; font-size: 1.125rem; line-height: 1; transition: transform .15s; }
    .mega-menu__all:hover { color: #fff; }
    .mega-menu__all:hover i { transform: translateX(3px); }
    .main-nav .second-level {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 0;
        border: 0; padding: 0; font-size: 1rem; line-height: 1.4; font-weight: 400;
    }
    .main-nav .second-level__item { border-bottom: 1px solid #2e2e2e; }
    .main-nav .second-level__item-title {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto; margin: 0; padding: .875rem 0;
        font-weight: 300; letter-spacing: .2px; color: #dcdcdc; text-shadow: none !important; transition: color .15s;
    }
    .main-nav .second-level__item-title::after { content: "\203A"; font-size: 1.25rem; line-height: 1; color: #fff; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
    .main-nav .second-level__item-title:hover, .main-nav .second-level__item-title.-active { color: #fff; }
    .main-nav .second-level__item-title:hover::after { opacity: 1; transform: none; }
    .main-nav .third-level {
        position: static; display: flex; flex-direction: column; gap: .5rem; width: auto; height: auto; overflow: visible;
        margin: -.25rem 0 0; padding: 0 0 .875rem;
    }
    .main-nav .third-level__item-title { font-size: .875rem; line-height: 1.25rem; font-weight: 300; color: #9d9d9d; transition: color .15s; }
    .main-nav .third-level__item-title:hover { color: #fff; }
}

/* sticky header that folds smoothly: the wrapper is sticky from the start (it used to switch from static to sticky at
   the fold and snap to the top), the banner above scrolls away on its own, and the nav row folds and fades */
.header-wrapper { position: sticky; top: 0; z-index: 50; }
@media (min-width: 1170px) {
    .header__nav-box { transition: height .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, visibility 0s; }
    .-sticky-header .header__nav-box { transition: height .35s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, visibility 0s linear .35s; }
    .-sticky-header .header:hover .header__nav-box, .-sticky-header .header:focus-within .header__nav-box { transition: height .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease .05s, visibility 0s; }
}

/* mega menu with many sub-items (Kitchen): columns that pack top-down instead of grid rows stretched by the longest
   one; tighter rhythm; never taller than the window (it scrolls inside if it ever is) */
@media (min-width: 1170px) {
    .main-nav .mega-menu { padding: 1.5rem 2.5rem 1.75rem; max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 transparent; }
    .mega-menu__head { padding-bottom: .75rem; margin-bottom: .75rem; }
    .main-nav .second-level { display: block; columns: 4; column-gap: 2.5rem; }
    .main-nav .second-level__item { break-inside: avoid; border-bottom: 0; padding: .5rem 0 .875rem; }
    .main-nav .second-level__item-title { padding: .25rem 0 .5rem; font-size: 1rem; font-weight: 400; color: #fff; }
    .main-nav .third-level { margin: 0; padding: 0; gap: .375rem; }
    .main-nav .third-level__item-title { font-size: .8125rem; line-height: 1.125rem; }
}
/* a section whose subcategories have no sub-items (Vacuum cleaners): a plain even grid, row by row, links of one size */
@media (min-width: 1170px) {
    .main-nav .second-level:not(:has(.third-level)) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 0; columns: auto; }
    .main-nav .second-level:not(:has(.third-level)) .second-level__item { padding: 0; border-bottom: 1px solid #2e2e2e; }
    .main-nav .second-level:not(:has(.third-level)) .second-level__item-title { padding: .875rem 0; font-weight: 300; color: #dcdcdc; }
    .main-nav .second-level:not(:has(.third-level)) .second-level__item-title:hover { color: #fff; }
}

/* keep the page's first top margin inside <main>, so it does not collapse into the header's fold margin above */
#all_parts { display: flow-root; }
/* mixed sections (Laundry): a subcategory without sub-items takes only its own line in the column */
@media (min-width: 1170px) {
    .main-nav .second-level:has(.third-level) .second-level__item:not(:has(.third-level)) { padding: .25rem 0; }
    .main-nav .second-level:has(.third-level) .second-level__item:has(.third-level) + .second-level__item:not(:has(.third-level)) { padding-top: .5rem; }
}

/* sticky header fold without any layout change: the nav row keeps its height and slides up under the top bar
   (transform), its slot turns see-through so the page scrolls beneath, and hovering the bar brings the row back.
   Nothing on the page changes height, so nothing can jump or loop. */
@media (min-width: 1170px) {
    .header-wrapper { transition: none; }
    .header__wrapper { position: relative; z-index: 3; background-color: #1f1f1f; }
    .header__nav-box { position: relative; z-index: 2; background-color: #1f1f1f; }
    .-sticky-header .header-wrapper { background-color: transparent !important; pointer-events: none; }
    .-sticky-header .header__wrapper { pointer-events: auto; }
    .-sticky-header .header__nav-box,
    .-sticky-header .header:hover .header__nav-box, .-sticky-header .header:focus-within .header__nav-box {
        height: 3.625rem; visibility: visible; background-color: #1f1f1f;
        transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
    }
    .-sticky-header .header__nav-box { transform: translateY(-100%); opacity: 0; pointer-events: none; }
    .-sticky-header .header:hover .header__nav-box, .-sticky-header .header:focus-within .header__nav-box { transform: none; opacity: 1; pointer-events: auto; }
    .header__nav-box { transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
}

/* right side of the nav row: one type style for links and phone, even gaps, a thin divider before the phone,
   and a compact AZ · RU · EN switcher (its items inherited the 2rem gap of the links) */
@media (min-width: 1024px) {
    .header__nav-container .right-nav { display: flex !important; align-items: center; gap: 1.5rem; }
    .right-nav > .right-nav__item + .right-nav__item, .right-nav > .right-nav__item + .lang-switcher { margin-inline-start: 0; }
    .right-nav > .right-nav__item { font-size: .75rem; line-height: 1rem; font-weight: 300; letter-spacing: .3px; color: #d6d6d6; white-space: nowrap; transition: color .15s; }
    .right-nav > a.right-nav__item:hover { color: #fff; }
    .right-nav > a[href^="tel"] { display: inline-flex; align-items: center; gap: .375rem; padding-inline-start: 1.5rem; border-inline-start: 1px solid #444; }
    .right-nav > a[href^="tel"] > i { margin: 0; font-size: .875rem; }
    .right-nav .lang-switcher { margin-left: 0; gap: .25rem; padding-inline-start: 1.5rem; border-inline-start: 1px solid #444; }
    .right-nav .lang-switcher .right-nav__item { margin: 0 !important; padding: .25rem .375rem; font-size: .75rem; line-height: 1rem; font-weight: 300; letter-spacing: .5px; color: #9a9a9a; border-radius: 3px; text-decoration: none; transition: color .15s; }
    .right-nav .lang-switcher a.right-nav__item:hover { color: #fff; }
    .right-nav .lang-switcher .right-nav__item.-active { color: #fff; font-weight: 600; text-decoration: none; box-shadow: inset 0 -1.5px 0 #fff; border-radius: 0; }
}
/* the top bar and the nav row are container-wide boxes: paint their background across the whole window */
@media (min-width: 1170px) {
    .header__wrapper::before, .header__nav-box::before {
        content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
        background: #1f1f1f; z-index: -1; pointer-events: none;
    }
}

/* text / legal pages: a readable article instead of a grey title slab and a framed box — large dark title over a
   thin rule, a comfortable reading column, dark section headings (bold-only paragraphs count as headings) */
.document-page .flatpage__header { margin: 0 0 2rem; padding: 2rem 0 1.5rem; background: none; color: #1f1f1f; text-align: left; border-bottom: 1px solid #e6e6e6; }
.document-page .flatpage__title { margin: 0; font-size: 2rem; line-height: 2.5rem; font-weight: 300; letter-spacing: .2px; color: #1f1f1f; }
.document-page .flatpage__content { border: 0; padding: 0 0 3.5rem; max-width: 760px; font-size: 1rem; line-height: 1.7; color: #444; }
.document-page .flatpage__content p { margin: 0 0 1rem; }
.document-page .flatpage__content h2, .document-page .flatpage__content h3, .document-page .flatpage__content h4,
.document-page .flatpage__content p:has(> strong:only-child) {
    margin: 2rem 0 .5rem; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: #1f1f1f;
}
.document-page .flatpage__content > :first-child { margin-top: 0; }
.document-page .flatpage__content p:has(> strong:only-child) strong { font-weight: inherit; }
.document-page .flatpage__content ul, .document-page .flatpage__content ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.document-page .flatpage__content li { margin-bottom: .375rem; }
.document-page .flatpage__content a { color: #8c0014; text-decoration: underline; text-underline-offset: 3px; }
.document-page .flatpage-wrapper:not(:has(.flatpage__left-menu-container)) .flatpage__content-wrapper { width: 100%; }
@media (max-width: 767px) {
    .document-page .flatpage__header { padding: 1.25rem 0 1rem; margin-bottom: 1.25rem; }
    .document-page .flatpage__title { font-size: 1.5rem; line-height: 2rem; }
}

/* breadcrumb of the text pages: the catalog's quiet style — small type, a small thin divider, the current page grey */
.breadcrumb { margin: 1rem 0 .25rem; gap: .75rem; font-size: .75rem; line-height: 1rem; color: #868686; flex-wrap: wrap; }
.breadcrumb__link { margin: 0 !important; color: #333; text-decoration: none; transition: color .15s; }
.breadcrumb__link:hover { color: #191919; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__divider { margin: 0 !important; font-size: .75rem; line-height: 1rem; color: #333; }
.breadcrumb__text { color: #868686; }

/* catalog toolbar (desktop): the filter head and the list toolbar are one 40px row on one centre line, under one thin
   rule; one caption style for the controls, the counts and titles a touch larger */
@media (min-width: 1024px) {
    .product-list-page .facets-header, .product-list-page .list__views {
        height: 40px; min-height: 40px; align-items: center; padding-top: 0; padding-bottom: 0; margin-bottom: 1.25rem; border-bottom: 1px solid #ececec;
    }
    .product-list-page .facets-header { justify-content: space-between; gap: 12px; }
    .product-list-page .facets-header__title { font-size: .9375rem; line-height: 1.25rem; font-weight: 600; color: #1f1f1f; }
    .product-list-page .facets-header__clear-filter { height: auto; padding: 0 !important; gap: 6px; font-size: .6875rem; line-height: 1rem; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; }
    .product-list-page .facets-header__clear-filter:hover { color: #1f1f1f; }
    .product-list-page .list__views { gap: 2rem; }
    .product-list-page .list__product-count { margin-right: auto; font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: #1f1f1f; }
    .product-list-page .list__view-options, .product-list-page .list__view-actions, .product-list-page .list__view-layouts { display: flex; align-items: center; margin: 0; }
    .product-list-page .js-filter-item.-type-stock label, .product-list-page .catalog-sort__toggle, .product-list-page .layouts-label {
        display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0;
        font-size: .6875rem; line-height: 1rem; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; color: #333; cursor: pointer;
    }
    .product-list-page .js-filter-item.-type-stock input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: #8c0014; cursor: pointer; }
    .product-list-page .catalog-sort__label { letter-spacing: inherit; }
    .product-list-page .catalog-sort__toggle i { font-size: .625rem; }
    .product-list-page .list__view-layouts { gap: 10px; }
    .product-list-page .layouts.-desktop { display: flex; align-items: center; gap: 6px; }
    .product-list-page .layouts__item { font-size: 1rem; line-height: 1; opacity: .35; transition: opacity .15s; }
    .product-list-page .layouts__item.-active, .product-list-page .layouts__item:hover { opacity: 1; }
}
@media (min-width: 1024px) {
    .product-list-page .list__sidebar .facets-header { display: flex !important; flex-direction: row !important; align-items: center !important; }
    .product-list-page .list__sidebar .facets-header > * { margin-top: 0 !important; margin-bottom: 0 !important; }
    .product-list-page .list__sidebar .facets-header { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* fonts: the template's font-display:swap painted text in a fallback face first and then swapped it (the text jumped
   on refresh). With the weights preloaded (layouts/app), wait for the brand face instead of swapping. */
@font-face { font-family: "Miele Elements"; src: url(font/subset-MieleElements-Thin.woff2) format("woff2"); font-style: normal; font-weight: 100; font-display: block; }
@font-face { font-family: "Miele Elements"; src: url(font/subset-MieleElements-ExtraLight.woff2) format("woff2"); font-style: normal; font-weight: 200; font-display: block; }
@font-face { font-family: "Miele Elements"; src: url(font/subset-MieleElements-Light.woff2) format("woff2"); font-style: normal; font-weight: 300; font-display: block; }
@font-face { font-family: "Miele Elements"; src: url(font/subset-MieleElements-Regular.woff2) format("woff2"); font-style: normal; font-weight: 400; font-display: block; }
@font-face { font-family: "Miele Elements"; src: url(font/subset-MieleElements-SemiBold.woff2) format("woff2"); font-style: normal; font-weight: 600; font-display: block; }
@font-face { font-family: "Miele Elements"; src: url(font/subset-MieleElements-ExtraBold.woff2) format("woff2"); font-style: normal; font-weight: 700; font-display: block; }

/* catalog sort: with JS the custom toggle is shown and the native select hidden from the first paint (they used to
   swap after load and the toolbar jumped); without JS the native select stays */
.js .catalog-sort__native { display: none !important; }
html:not(.js) .catalog-sort__toggle { display: none !important; }

/* catalog cards: the same compact rhythm as the favourites — no 52px slot for the EU sheet link and 32px over the
   price; name and detail clamped to two lines each, so rows line up and cards are shorter */
.product-list-page .list__products .product-item__info { padding: 1rem .875rem .875rem; }
.product-list-page .list__products .product-item__info-holder { height: auto; }
.product-list-page .list__products .product-item__name { -webkit-line-clamp: 2; min-height: 3rem; }
.product-list-page .list__products .product-item__detail { height: auto; min-height: 2.5rem; padding-top: .375rem; font-size: .8125rem; line-height: 1.25rem; color: #6b6b6b; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-list-page .list__products .product-item__energy { height: 1.25rem; padding-top: 0; margin-top: .5rem; }
.product-list-page .list__products .product-item__energy-form::before { display: none; }
.product-list-page .list__products .product-item__energy-form { padding-inline-start: 0; }
.product-list-page .list__products .product-item__energy-form-wrapper { width: auto; }
.product-list-page .list__products .product-item__energy-form a { font-weight: 400; color: #868686; text-decoration: underline; text-underline-offset: 3px; }
.product-list-page .list__products .product-item__price { margin-top: auto; padding-top: .875rem; }
.product-list-page .list__products .product-item .offers-text { margin-top: .375rem; font-size: .75rem; line-height: 1.125rem; color: #555; }
.product-list-page .list__products .product-item__stock-status { margin-top: .375rem; }
.product-list-page .list__products .product-item__buttons { padding: .875rem .5rem .375rem; gap: .5rem; }
.product-list-page .list__products .product-item__cta { margin-top: 0; }

/* "contact us" panel: a darker blurred backdrop, a round close button at the top right, cards with a red icon disc,
   one text style and a pill button at the same bottom line */
@media (min-width: 1024px) {
    .contact-us-fix__modal { background: rgba(18, 18, 18, .78) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .contact-us-fix__modal-close {
        position: absolute; top: 1.5rem; right: 2rem; left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
        border: 0 !important; border-radius: 50%; background: transparent; color: #fff; font-size: 1.125rem; transition: background-color .15s;
    }
    .contact-us-fix__modal-close:hover, .contact-us-fix__modal-close:focus-visible { background: rgba(255, 255, 255, .12); }
    .contact-us-fix__container-title { margin-bottom: 2.25rem; font-size: 2rem; line-height: 2.5rem; font-weight: 300; color: #fff; text-align: center; }
    .contact-us-fix__content { gap: 1.5rem; align-items: stretch; }
    .contact-us-fix__content-item {
        display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.25rem 2rem 2rem; border-radius: 10px;
        background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); transition: transform .2s, box-shadow .2s;
    }
    .contact-us-fix__content-item:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .24); }
    .contact-us-fix__item-icon-box { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #f8eef0; color: #8c0014; font-size: 1.5rem; }
    .contact-us-fix__item-content { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 1.25rem 0 1.5rem; }
    .contact-us-fix__item-content-title p { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; color: #1f1f1f; }
    .contact-us-fix__item-content-description, .contact-us-fix__item-content-description p { margin: 0; font-size: .875rem; line-height: 1.375rem; color: #666; }
    .contact-us-fix__item-button {
        margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 42px; padding: 0 1.5rem;
        border: 1px solid #1f1f1f; border-radius: 999px; font-size: .6875rem; letter-spacing: 1.5px; color: #1f1f1f; text-decoration: none; transition: background-color .15s, color .15s;
    }
    .contact-us-fix__item-button::before, .contact-us-fix__item-button::after { display: none !important; }
    .contact-us-fix__item-button:hover, .contact-us-fix__item-button:focus-visible { background: #1f1f1f; color: #fff; }
}
.product-list-page .list__products .product-item__price { min-height: 3.125rem; align-items: center; }
@media (min-width: 1024px) {
    .contact-us-fix__modal.-active, .contact-us-fix__modal[aria-hidden="false"] { display: flex !important; }
    .contact-us-fix__modal { top: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important; z-index: 120 !important; padding: 3rem 0 !important; flex-direction: column; justify-content: center; overflow-y: auto; }
    .contact-us-fix__container { margin-top: 0; margin-bottom: 0; }
}
@media (min-width: 1024px) {
    .contact-us-fix__item-icon-box { width: 60px; height: 60px; }
    .contact-us-fix__item-icon-box i { display: block; font-size: 1.5rem !important; line-height: 1 !important; width: auto; height: auto; }
    .contact-us-fix__content-item:hover { transform: none; box-shadow: 0 14px 36px rgba(0, 0, 0, .22); }
}

/* catalog filter sidebar (desktop): compact sections under thin rules, small semi-bold captions with a light letter
   spacing (it was 4px), thin chevrons, a category tree with indented children and the current one in brand red,
   checkbox rows with the count at the right */
@media (min-width: 1024px) {
    .product-list-page .list__sidebar .pz-expandable { margin: 0; padding: 0; border-bottom: 1px solid #ececec; }
    .product-list-page .list__sidebar .pz-expandable__header { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 0; padding: 1rem 0; gap: 12px; }
    .product-list-page .list__sidebar .pz-expandable__title-wrapper { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
    .product-list-page .list__sidebar .pz-expandable__header .title { font-size: .75rem; line-height: 1.125rem; font-weight: 600; letter-spacing: .8px; color: #1f1f1f; }
    .product-list-page .list__sidebar .pz-expandable__header .subtitle { display: none; }
    .product-list-page .list__sidebar .pz-expandable__header .toggle-icon { flex: 0 0 auto; font-size: .625rem; line-height: 1; color: #6b6b6b; transition: transform .2s; }
    .product-list-page .list__sidebar .pz-expandable__body .content { padding: 0 0 1rem; }
    .product-list-page .list__sidebar .filter-item { display: flex; flex-direction: column; gap: 2px; }
    .product-list-page .list__sidebar .filter-item > label { display: flex; align-items: center; gap: 10px; margin: 0; padding: .3125rem 0; font-size: .875rem; line-height: 1.25rem; color: #333; cursor: pointer; }
    .product-list-page .list__sidebar .filter-item > label .filter-choice__label { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; transition: color .15s; }
    .product-list-page .list__sidebar .filter-item > label:hover .filter-choice__label { color: #8c0014; }
    .product-list-page .list__sidebar .filter-choice__quantity { flex: 0 0 auto; font-size: .75rem; color: #9a9a9a; }
    .product-list-page .list__sidebar .filter-item input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: #8c0014; cursor: pointer; }
    .product-list-page .list__sidebar .filter-item > label.-filter-selected { color: #8c0014; }
    .product-list-page .list__sidebar .filter-item > label.-filter-selected .filter-choice__label { font-weight: 600; }
    /* category tree */
    .product-list-page .list__sidebar .-category .filter-item > label:not(.sub-item) { padding-top: .125rem; font-size: .8125rem; letter-spacing: .4px; font-weight: 600; color: #1f1f1f; }
    .product-list-page .list__sidebar .-category .filter-item > label.sub-item { padding-left: .875rem; border-left: 1px solid #ececec; margin-left: .125rem; }
    .product-list-page .list__sidebar .-category .filter-item > label.sub-item.-level-3 { padding-left: 1.75rem; font-size: .8125rem; color: #555; }
    .product-list-page .list__sidebar .-category .filter-item > label.sub-item.-filter-selected { border-left-color: #8c0014; }
}

/* compare drawer: a solid panel (the page showed through the 80% black), a tab with rounded top corners, white
   product cards with a visible remove button, quiet dashed slots, the main action in the site's orange */
.catalog-compare__toggle {
    left: 36px; height: 42px; padding: 0 18px; gap: 10px; border-radius: 8px 8px 0 0; background: #1f1f1f;
    font-size: .6875rem; line-height: 1rem; letter-spacing: 1.2px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
}
.catalog-compare__content { gap: 18px; padding: 22px 36px 26px; background: #1f1f1f; border-top: 1px solid #333; box-shadow: 0 -12px 32px rgba(0, 0, 0, .25); }
.catalog-compare__heading { margin: 0; font-size: .9375rem; line-height: 1.375rem; color: #d6d6d6; }
.catalog-compare__body { gap: 40px; align-items: center; }
.catalog-compare__items { gap: 14px; }
.catalog-compare__item {
    justify-content: flex-start; height: 76px; gap: 12px; padding: 8px 30px 8px 10px; border: 0; border-radius: 6px;
    background: #fff; font-size: .8125rem; line-height: 1.125rem;
}
.catalog-compare__item img { width: 48px; height: 58px; }
.catalog-compare__item span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.catalog-compare__item.is-empty { justify-content: center; border: 1px dashed #4a4a4a; background: transparent; color: #8a8a8a; text-align: center; }
.catalog-compare__remove {
    display: flex !important; align-items: center; justify-content: center; top: 6px; right: 6px; width: 22px; height: 22px;
    border-radius: 50%; background: #f1f1f1; color: #555; font-size: 15px; line-height: 1; transition: background-color .15s, color .15s;
}
.catalog-compare__remove:hover { background: #8c0014; color: #fff; }
.catalog-compare__actions { flex: 0 0 220px; justify-content: center; gap: 12px; }
.catalog-compare__open { height: 42px; border: 0; border-radius: 999px; background: #f59b00; color: #1a1a1a; font-size: .6875rem; letter-spacing: 1.2px; transition: background-color .15s; }
.catalog-compare__open:not(:disabled):hover { background: #e08d00; }
.catalog-compare__open:disabled { border: 1px solid #4a4a4a; background: transparent; color: #777; }
.catalog-compare__clear { font-size: .8125rem; color: #bdbdbd; text-underline-offset: 3px; }
.catalog-compare__clear:hover { color: #fff; }

/* the round contact button steps aside while the compare drawer is on screen (it covered the first card) */
.contact-us-fix__button-wrapper { transition: opacity .2s, transform .2s; }
body:has(.js-catalog-compare:not([hidden])) .contact-us-fix__button-wrapper { opacity: 0; transform: translateY(16px); pointer-events: none; }
@media (max-width: 1023px) { body:has(.js-catalog-compare:not([hidden])) .contact-us-fix__button-wrapper { opacity: 1; transform: none; pointer-events: auto; } }

/* compare drawer state known before the first paint (layouts/app): the drawer is in place at once (its cards fill in
   when loaded, the slot row keeps its height), it stays folded if it was folded, and the contact button never flashes */
@media (min-width: 1024px) {
    html.has-compare .js-catalog-compare[hidden] { display: block; }
    html.has-compare .contact-us-fix__button-wrapper { opacity: 0; transform: translateY(16px); pointer-events: none; }
    html.compare-collapsed .catalog-compare__content { display: none; }
    html.compare-collapsed .catalog-compare__toggle i { transform: rotate(180deg); }
    .catalog-compare__items { min-height: 76px; }
}
/* folded compare drawer = only its small tab: the contact button stays, lifted above the tab; it steps aside only
   while the drawer is open */
@media (min-width: 1024px) {
    html.compare-collapsed .contact-us-fix__button-wrapper { opacity: 1 !important; pointer-events: auto !important; transform: translateY(-52px) !important; }
    html.has-compare:not(.compare-collapsed) .contact-us-fix__button-wrapper { opacity: 0; pointer-events: none; }
}

/* contact button: bottom right and a little smaller (it sat on the left over the filters and the compare tab).
   The wrapper carries no transform any more (a transform would make it the box's containing block). */
.contact-us-fix__button-wrapper, html.compare-collapsed .contact-us-fix__button-wrapper,
body:has(.js-catalog-compare:not([hidden])) .contact-us-fix__button-wrapper, html.has-compare .contact-us-fix__button-wrapper { transform: none !important; }
.contact-us-fix__button-box, .contact-us-fix__button-box:hover {
    left: auto !important; right: 24px; bottom: 24px; width: 64px; height: 64px; transform: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: transform .2s, box-shadow .2s;
}
.contact-us-fix__button-box:hover { transform: scale(1.06) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
@media (max-width: 767px) { .contact-us-fix__button-box, .contact-us-fix__button-box:hover { right: 16px; bottom: 16px; width: 56px; height: 56px; } }

/* product page, top: calmer title and subtitle, red-dot bullets, a small grey product code, the EU sheet link as a
   quiet link right under it (no big gap), the price row with a small outlined "-30%" tag instead of the red disc,
   thumbnails with rounded frames and the arrow hidden while there is nothing to scroll */
.product-detail-page .product-info__title { margin: 0 0 .75rem; font-size: 2.125rem; line-height: 2.625rem; font-weight: 300; color: #1f1f1f; }
.product-detail-page .product-info__text { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.625rem; font-weight: 300; color: #555; }
.product-detail-page .product-info__info-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.product-detail-page .product-info__info-list li { position: relative; padding-left: 1.125rem; font-size: .9375rem; line-height: 1.5rem; color: #333; list-style: none; }
.product-detail-page .product-info__info-list li::before { content: ""; position: absolute; left: 0; top: .625rem; width: 5px; height: 5px; border-radius: 50%; background: #8c0014; }
.product-detail-page .product-info__info-list li::marker { content: none; }
.product-detail-page .product-info__code { margin-top: 1rem; font-size: .75rem; line-height: 1rem; letter-spacing: .3px; color: #8a8a8a; }
.product-detail-page .product-item__energy.detail { height: auto; padding-top: 0; margin-top: .75rem; justify-content: flex-start; }
.product-detail-page .product-item__energy.detail .product-item__energy-form { padding-inline-start: 0; }
.product-detail-page .product-item__energy.detail .product-item__energy-form::before { display: none; }
.product-detail-page .product-item__energy.detail .product-item__energy-form a { font-size: .8125rem; font-weight: 400; color: #6b6b6b; text-decoration: underline; text-underline-offset: 3px; }
.product-detail-page .product-info__price { margin-top: 1.5rem; gap: .75rem; align-items: center; flex-wrap: wrap; }
.product-detail-page .product-info__price .price.-retail, .product-detail-page .product-info__price .price.-actuel { margin: 0; }
.product-detail-page .product-info__price .price.-retail { font-size: .9375rem; }
.product-detail-page .product-info__price .price.-actuel { font-size: 1.875rem; line-height: 2.25rem; }
.product-detail-page .product-info__price .discount {
    display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; padding: 3px 8px;
    border: 1px solid #8c0014; border-radius: 4px; background: transparent;
}
.product-detail-page .product-info__price .discount .value { margin: 0; font-size: .8125rem; line-height: 1.125rem; font-weight: 600; color: #8c0014; }
.product-detail-page .product-info__price .discount .label { background: none; font-size: .625rem; letter-spacing: .8px; color: #8c0014; }
.product-detail-page .offers-product-detail-text { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.25rem; color: #555; }
.pdp-thumbnail { border-color: #e6e6e6; border-radius: 6px; overflow: hidden; transition: border-color .15s; }
.pdp-thumbnail:hover { border-color: #b5b5b5; }
.pdp-thumbnail[aria-pressed=true] { border-color: #1f1f1f; }
.pdp-thumbnail-arrow:disabled { visibility: hidden; }
.pdp-thumbnail-arrow::before { width: 10px; height: 10px; border-width: 1.5px 0 0 1.5px; }
.product-detail-page .product-info__code { margin-bottom: 0; }

/* product page, no jump on load: before Flickity starts the gallery and the carousels stacked all their slides
   (the page was much taller for a moment, then everything below jumped up). Until then show the first slide only /
   keep the carousels on one clipped row, at their final height. */
.js .pdp-gallery:not(.flickity-enabled) { display: block; overflow: hidden; }
.js .pdp-gallery:not(.flickity-enabled) > .pdp-gallery__slide:not(:first-child) { display: none; }
.js .pdp-thumbnails:not(.flickity-enabled) { display: flex; overflow: hidden; }
.js .pdp-thumbnails:not(.flickity-enabled) > .pdp-thumbnail { flex: 0 0 auto; }
.js .pdp-carousel:not(.flickity-enabled), .js .product-related__slider:not(.flickity-enabled) { display: flex; flex-wrap: nowrap; overflow: hidden; }
.js .pdp-carousel:not(.flickity-enabled) > *, .js .product-related__slider:not(.flickity-enabled) > * { flex: 0 0 auto; }

/* payment & delivery: two quiet groups — a small grey caption, rows of "name · description" in two columns, the
   notes on a light panel */
.product-detail-page .product-info__details .pz-expandable__header .title { font-size: .75rem; letter-spacing: 1.2px; font-weight: 600; color: #1f1f1f; }
.pdp-terms { display: flex; flex-direction: column; font-size: .875rem; line-height: 1.375rem; color: #333; }
.pdp-terms__title { margin: 1.25rem 0 .25rem; font-size: .6875rem; line-height: 1rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: #8a8a8a; }
.pdp-terms__title:first-child { margin-top: .25rem; }
.pdp-terms__list li { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 16px; align-items: baseline; padding: .625rem 0; border-bottom: 1px solid #efefef; color: #1f1f1f; }
.pdp-terms__list li:last-child { border-bottom: 0; }
.pdp-terms__list li span { color: #6b6b6b; text-align: left; }
.pdp-terms__list li:not(:has(span)) { display: block; color: #333; }
.pdp-terms__note { margin: .5rem 0 0; padding: .75rem 1rem; border-radius: 6px; background: #f6f6f6; font-size: .8125rem; line-height: 1.25rem; color: #555; }
.contact-us-fix__button-box img { width: 100%; height: 100%; object-fit: cover; }
.pdp-terms__list li span { justify-self: start; margin: 0 !important; text-align: left !important; }
.pdp-terms .pdp-terms__list li { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 16px; justify-content: stretch; }
.pdp-terms .pdp-terms__list li:not(:has(span)) { display: block; }

/* product actions strip: favourite / compare / share as three equal items — one icon size, one caption style,
   one baseline (the favourite one was a pz-button with its own type and offset) */
.product-detail-page .product-facet__misc-buttons-content { display: flex; justify-content: center; align-items: stretch; gap: 3rem; }
.product-detail-page .product-facet__misc-buttons-content > * {
    display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: .75rem;
    min-width: 180px; height: auto; margin: 0 !important; padding: 1.5rem 1rem !important; border: 0 !important; background: none !important;
    color: #1f1f1f; cursor: pointer; transition: color .15s;
}
.product-detail-page .product-facet__misc-buttons-content > * > i, .product-detail-page .product-facet__misc-buttons-content .pz-button__icon {
    margin: 0 !important; font-size: 1.375rem !important; line-height: 1 !important; height: 1.375rem; display: block;
}
.product-detail-page .product-facet__misc-buttons-content .text, .product-detail-page .product-facet__misc-buttons-content .pz-button__text {
    margin: 0 !important; font-size: .75rem !important; line-height: 1rem !important; font-weight: 500 !important; letter-spacing: 1.2px !important; color: inherit !important;
}
.product-detail-page .product-facet__misc-buttons-content > *:hover { color: #8c0014; }
.product-detail-page .product-facet__misc-buttons-content .favourite-button.-active { color: #8c0014; }

/* favourites page: a compact header instead of the tall grey slab, the toolbar like the catalog's (one 40px row
   under a thin rule), and the cards as white rounded cards like the catalog's */
.account-favourites-page .favourite-products__banner { padding: 1.75rem 1.5rem 1.5rem; background: #fff; border-radius: 8px; align-items: flex-start; text-align: left; }
.account-favourites-page .favourite-products__banner .banner-title { margin: 0 0 .375rem; font-size: 1.75rem; line-height: 2.25rem; font-weight: 300; color: #1f1f1f; }
.account-favourites-page .favourite-products__banner .banner-desc { font-size: .9375rem; line-height: 1.375rem; color: #6b6b6b; }
.account-favourites-page .favourite-products__banner .banner-desc b, .account-favourites-page .favourite-products__banner .banner-desc strong { font-weight: 600; color: #1f1f1f; }
.account-favourites-page .favourite-products__action-buttons { height: 40px; margin: 1.25rem auto 1.25rem; padding: 0; border-bottom: 1px solid #e6e6e6; }
.account-favourites-page .favourite-products__action-buttons .remove-button, .account-favourites-page .favourite-products__action-buttons .order-button {
    font-size: .6875rem; line-height: 1rem; letter-spacing: 1.2px; font-weight: 400; color: #333;
}
.account-favourites-page .favourite-products__action-buttons .remove-button:hover { color: #8c0014; }
.account-favourites-page .favourite-products__action-buttons .order-button .button-icon { font-size: 1rem; opacity: .35; }
.account-favourites-page .favourite-products__action-buttons .order-button .button-icon.-active { opacity: 1; }
.favourite-products__items { gap: 1.25rem; }
.favourite-products__items .product-item { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transition: box-shadow .2s; overflow: hidden; }
.favourite-products__items .product-item:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.favourite-products__items .product-item__image { padding: 1.5rem 3rem 0; }
.favourite-products__items .product-item__actions { padding: 1rem; }
.favourite-products__items .product-item__favourite { font-size: 1.25rem; color: #8c0014; }
.favourite-products__items .product-item__delivery { align-items: center; }
.favourite-products__items .product-item__buttons { padding: .75rem 1rem 1.25rem; }
.favourite-products__items .product-item__buttons .pz-button { max-width: none; }

/* share popover: a compact card over the button — small caption, round brand buttons, a light shadow and a small
   arrow; the action buttons show a focus ring only for keyboard focus (the mouse click left a blue frame) */
.product-detail-page .product-facet__misc-buttons-content > *:focus { outline: none; }
.product-detail-page .product-facet__misc-buttons-content > *:focus-visible { outline: 2px solid #1f1f1f; outline-offset: -4px; border-radius: 6px; }
.share-box {
    top: auto; bottom: calc(100% - .5rem); left: 50%; right: auto; width: 220px; padding: 1rem 1rem 1.125rem; transform: translateX(-50%) translateY(6px);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); transition: opacity .2s, transform .2s; cursor: default;
}
.share-box.-active { transform: translateX(-50%) translateY(0); }
.share-box::after { width: 14px; height: 14px; bottom: -7px; box-shadow: 3px 3px 6px -3px rgba(0, 0, 0, .12); }
.share-box__title { margin: 0 0 .875rem; font-size: .6875rem; line-height: 1rem; letter-spacing: 1.2px; font-weight: 600; color: #8a8a8a; }
.share-box__close { top: .625rem; right: .625rem; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: background-color .15s; }
.share-box__close:hover { background: #f2f2f2; }
.share-box__close i { font-size: .75rem; color: #555; }
.share-box__link { gap: .75rem; }
.share-box__link a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f4f4f4; transition: background-color .15s; }
.share-box__link a i { font-size: 1.0625rem; line-height: 1; color: #333; transition: color .15s; }
.share-box__link a[title="Facebook"]:hover { background: #1877f2; }
.share-box__link a[title="WhatsApp"]:hover { background: #25d366; }
.share-box__link a:hover i { color: #fff; }
/* card delivery line: the clock flows with the text (it hung to the left of a two-line block) */
.favourite-products__items .product-item__delivery { display: block; text-align: center; padding: 0 .5rem; }
.favourite-products__items .product-item__delivery::before { display: inline-block; margin-right: .375rem; vertical-align: -1px; }
.favourite-products__items .product-item__delivery span { display: inline; max-width: none; }

/* site modals (favourite added, basket added, login, newsletter): a darker blurred backdrop, rounded dialog with a
   soft shadow and a gentle entrance, a visible round close button; the confirmation modal with a green check disc,
   a calmer message and 44px buttons */
.site-modal { background: rgba(18, 18, 18, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.site-modal:not([hidden]) .site-modal__dialog { animation: site-modal-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes site-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-modal:not([hidden]) .site-modal__dialog { animation: none; } }
@media (min-width: 768px) {
    .site-modal__dialog { border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
}
.feedback-modal .site-modal__dialog { position: relative; width: 420px; border-radius: 12px; }
.feedback-modal .site-modal__close {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; color: #6b6b6b; transition: background-color .15s, color .15s;
}
.feedback-modal .site-modal__close:hover { background: #f2f2f2; color: #1f1f1f; }
.feedback-modal .site-modal__header { position: static; width: auto; height: 0; overflow: visible; clip-path: none; padding: 0; }
.feedback-modal .site-modal__header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.feedback-modal .site-modal__content { padding: 2.5rem 2rem 2rem; }
.feedback-modal__icon { width: 72px; height: 72px; margin: 0 auto 1.25rem; padding: 18px; border-radius: 50%; background: #eaf6ea; }
.feedback-modal__message { margin: 0 0 1.75rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 300; color: #1f1f1f; }
.feedback-modal__actions { gap: .625rem; }
.feedback-modal__button { min-height: 44px; font-size: .75rem; letter-spacing: 1.2px; font-weight: 500; transition: background-color .15s, border-color .15s, color .15s; }
.feedback-modal__button:not(.feedback-modal__button--outline):hover { background: #e08d00; border-color: #e08d00; }
.feedback-modal__button--outline { border-color: #cfcfcf; color: #1f1f1f; }
.feedback-modal__button--outline:hover { border-color: #1f1f1f; }

/* compare: the pressed button reads as chosen (brand red, check icon); the drawer slides up when first opened */
.product-detail-page .compare-button.-active, .product-detail-page .compare-button[aria-pressed="true"] { color: #8c0014; }
.product-item__compare.-active, .product-item__compare[aria-pressed="true"] { color: #8c0014; }
.js-catalog-compare.-enter .catalog-compare__wrapper { animation: compare-in .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes compare-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-catalog-compare.-enter .catalog-compare__wrapper { animation: none; } }
/* the gallery's first photo sits exactly where Flickity will put it (centred in the full slide) before and after init */
.js .pdp-gallery:not(.flickity-enabled) > .pdp-gallery__slide:first-child { width: 100%; }
.pdp-gallery__slide img { display: block; margin: 0 auto; }
/* the pressed compare button keeps an icon (the template blanked the check glyph there) */
.product-detail-page .compare-button i { width: auto; }
.product-detail-page .compare-button i.pz-icon-check1::before { content: "\f135"; font-family: pz-icon !important; color: #8c0014; }
.product-detail-page .favourite-button.-active .pz-button__icon { color: #8c0014; }
/* features carousel footnote ("features depend on the model, images are illustrative"): right under the carousel,
   aligned with it, as small print (it floated 40px below at the right edge) */
.product-features__desc { margin: .875rem auto 2.5rem; padding: 0; max-width: 1170px; text-align: left; font-size: .75rem; line-height: 1.125rem; color: #8a8a8a; }
.product-features__desc::before { content: "* "; }
.features-area .product-features__desc { text-align: center !important; margin-top: .75rem; }

/* "key features" cards: separate rounded cards with a gap, a photo of one height, a calmer title (it ran to three
   big lines), the subtitle in grey, the "+" at one bottom line */
.features-area .pdp-carousel__slide { margin-right: 16px; }
.features-area .product-features__card { border-radius: 10px; overflow: hidden; background: #f6f6f6; }
.features-area .product-features__card-img { height: 160px; }
.features-area .product-features__card-img img { height: 100%; object-fit: cover; display: block; }
.features-area .product-features__card-content { position: relative; display: flex; flex-direction: column; height: 15rem; padding: 1.25rem 1.25rem 1rem; background: #f6f6f6; }
.features-area .product-features__card-content .title { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.625rem; font-weight: 400; -webkit-line-clamp: 2; }
.features-area .product-features__card-content .desc { font-size: .875rem; line-height: 1.375rem; color: #6b6b6b; }
.features-area .product-features__card-content .plus { margin-top: auto; display: flex; justify-content: flex-start; }
.features-area .product-features__card-content .plus button { font-size: 1.5rem; color: #8c0014; transition: transform .2s; }
.features-area .product-features__card-content .plus button:hover { transform: scale(1.1); }
.features-area .product-features__card-content .long-desc { border-radius: 0; }
.features-area .product-features__card-content .long-desc__title { font-size: 1.125rem; line-height: 1.5rem; padding-bottom: .75rem; }
.features-area .product-features__card-content .long-desc__desc { font-size: .875rem; line-height: 1.375rem; color: #444; }
.features-area .pdp-carousel__slide { margin-right: 16px !important; }
.features-area .product-features__card-content .plus { position: absolute; left: 1.25rem; right: auto; bottom: 1rem; margin: 0; justify-content: flex-start; }
.features-area .product-features__desc { margin-top: 2.25rem !important; }
/* an opened feature description: it scrolls inside the card above a reserved strip for the "−" button (the text ran
   under it and was cut), with a soft fade at the bottom edge */
.features-area .product-features__card-content .long-desc { padding: 1.25rem 1.25rem 3.75rem; z-index: 1; }
.features-area .product-features__card-content .plus { z-index: 2; }
.features-area .product-features__card-content .long-desc-container {
    height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c8c8c8 transparent; padding-right: 4px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent);
}
.features-area .product-features__card-content .long-desc__desc { padding-bottom: 1rem; }
.features-area .product-features__card-content .long-desc { padding-bottom: 4.75rem; }
.pdp-carousel.-all-fit .flickity-page-dots, .pdp-carousel.-all-fit .flickity-prev-next-button { display: none; }
.pdp-carousel .flickity-prev-next-button:disabled { opacity: 0; pointer-events: none; }

/* "also viewed": the catalog's card language — light rounded cards with a 240px photo area, the name in regular
   weight on two lines, an outlined pill button; a calmer section title; round arrows off the cards */
.product-related { padding: 3rem 1rem 2.5rem; }
.product-related__title { margin-bottom: 1.75rem; font-size: 1.75rem; line-height: 2.25rem; font-weight: 300; color: #1f1f1f; }
.product-related__slider { padding: 0 2.75rem; }
.product-related__card {
    width: calc((100% - 48px) / 4); margin-right: 16px; display: flex; flex-direction: column;
    padding: 1.25rem 1.25rem 1.25rem; border-radius: 10px; background: #f6f6f6; transition: box-shadow .2s;
}
.product-related__card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.product-related__image { height: 240px; padding: 0; }
.product-related__name { height: auto; min-height: 2.75rem; margin: 1rem 0 1rem; padding: 0; font-size: .9375rem; line-height: 1.375rem; font-weight: 400; color: #1f1f1f; }
.product-related__name a { -webkit-line-clamp: 2; }
.product-related__button {
    margin-top: auto; min-height: 42px; border: 1px solid #1f1f1f; border-radius: 999px; background: transparent; color: #1f1f1f;
    font-size: .6875rem; line-height: 1rem; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; transition: background-color .15s, color .15s;
}
.product-related__button:hover { background: #1f1f1f; color: #fff; }
.product-related .flickity-prev-next-button { width: 40px; height: 40px; top: 40%; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); color: #1f1f1f; }
.product-related .flickity-prev-next-button:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
    .product-related__slider { padding: 0; }
    .product-related__card { width: 72%; }
    .product-related__image { height: 200px; }
}
.product-related .product-related__card { background: #fff; border: 1px solid #ececec; }
.product-related .product-related__image { height: 240px !important; }
.product-related .product-related__name, .product-related .product-related__name a { font-size: .9375rem !important; line-height: 1.375rem !important; font-weight: 400 !important; height: auto !important; color: #1f1f1f; }
.product-related .product-related__button { background: transparent !important; color: #1f1f1f !important; border: 1px solid #1f1f1f !important; font-size: .6875rem !important; font-weight: 500 !important; letter-spacing: 1.2px !important; }
.product-related .product-related__button:hover { background: #1f1f1f !important; color: #fff !important; }
.product-related .product-related__name a { -webkit-line-clamp: 2 !important; }
/* action strip: centred on the page whatever its wrapper, three equal columns; the check as light as the other icons;
   the favourite heart filled while the product is a favourite */
.product-detail-page .product-facet__misc-buttons { display: flex; justify-content: center; }
.product-detail-page .product-facet__misc-buttons-content { width: 100%; max-width: 720px; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; }
.product-detail-page .product-facet__misc-buttons-content > * { min-width: 0; width: auto !important; }
.product-detail-page .compare-button i.pz-icon-check1::before { font-size: 1.125rem; }
.product-detail-page .favourite-button.-active .pz-button__icon::before { content: "\f188"; }
/* product tabs scroll to their area: stop below the sticky header (the title landed under it) */
.product-detail-page .features-area, .product-detail-page .technical-area, .product-detail-page .documents-area, .product-detail-page .reviews-area { scroll-margin-top: 96px; }
@media (max-width: 1169px) { .product-detail-page .features-area, .product-detail-page .technical-area, .product-detail-page .documents-area, .product-detail-page .reviews-area { scroll-margin-top: 80px; } }
.header-init .header__nav-box, .header-init .header-wrapper { transition: none !important; }

/* documents: the boxes centred under their title (they hugged the left), each with a file badge, name and type,
   and a download pill with an arrow */
.product-page__user-guide-wrapper { justify-content: center; gap: 1rem; }
.product-page__user-guide-box {
    position: relative; flex: 1 1 320px; max-width: 380px; align-items: center; gap: 1rem; padding: 1rem 1rem 1rem 4.25rem;
    border: 1px solid #ececec; border-radius: 10px; background: #fff; transition: box-shadow .2s, border-color .2s;
}
.product-page__user-guide-box:hover { border-color: #dcdcdc; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.product-page__user-guide-box::before {
    content: "PDF"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 40px; height: 48px;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; border-radius: 4px 12px 4px 4px;
    background: #f8eef0; color: #8c0014; font-size: .625rem; font-weight: 700; letter-spacing: .6px;
}
.product-page__user-guide-box .box-desc { min-width: 0; }
.product-page__user-guide-box .box-desc-title { font-size: .9375rem; line-height: 1.375rem; font-weight: 500; }
.product-page__user-guide-box .box-desc-type { font-size: .75rem; line-height: 1rem; color: #8a8a8a; }
.product-page__user-guide-box .box-download {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 1rem; border: 1px solid #1f1f1f; border-radius: 999px;
    font-size: .6875rem; letter-spacing: 1.2px; font-weight: 500; color: #1f1f1f; text-decoration: none; transition: background-color .15s, color .15s;
}
.product-page__user-guide-box .box-download::after { content: "\2193"; font-size: .875rem; line-height: 1; }
.product-page__user-guide-box .box-download:hover { background: #1f1f1f; color: #fff; }
.product-page__user-guide .product-page__user-guide-box { padding: 1rem 1rem 1rem 4.25rem !important; }

/* complementary products & accessories: the title in sentence case, tabs as quiet pills, white rounded cards with
   the photo, a small grey code, the name on two lines and the price */
.product-detail-recommendation { margin: 4rem auto; }
.product-detail-recommendation__title { margin-bottom: 1rem; font-size: 1.75rem; line-height: 2.25rem; font-weight: 300; color: #1f1f1f; }
.product-detail-recommendation__tabs .pz-tab-menu.-theme-zero { margin-bottom: 1.5rem; gap: .5rem; }
.product-detail-recommendation__tabs .pz-tab-menu.-theme-zero .pz-tab-menu__item { border: 1px solid #dcdcdc !important; border-radius: 999px; transition: background-color .15s, border-color .15s; }
.product-detail-recommendation__tabs .pz-tab-menu.-theme-zero .pz-tab-menu__item button { padding: .5rem 1.125rem; font-size: .6875rem; letter-spacing: 1.2px; color: #555; }
.product-detail-recommendation__tabs .pz-tab-menu.-theme-zero .pz-tab-menu__item.-active { background: #1f1f1f; border-color: #1f1f1f !important; }
.product-detail-recommendation__tabs .pz-tab-menu.-theme-zero .pz-tab-menu__item.-active button { color: #fff; }
.product-detail-recommendation .pdp-carousel__slide { width: 220px; margin-right: 16px !important; }
.product-detail-recommendation__card {
    display: flex; flex-direction: column; height: 100%; padding: 1rem; border: 1px solid #ececec; border-radius: 10px; background: #fff;
    color: #1f1f1f; text-decoration: none; transition: box-shadow .2s, border-color .2s;
}
.product-detail-recommendation__card:hover { border-color: #dcdcdc; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.product-detail-recommendation__card-img { display: flex; align-items: center; justify-content: center; height: 140px; margin-bottom: .875rem; }
.product-detail-recommendation__card-img img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.product-detail-recommendation__card-content { display: flex; flex-direction: column; gap: .25rem; padding: 0; text-align: left; }
.product-detail-recommendation__card-content .title { font-size: .6875rem; line-height: 1rem; letter-spacing: .4px; color: #8a8a8a; font-weight: 400; }
.product-detail-recommendation__card-content .desc { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: #1f1f1f; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.5rem; }
.product-detail-recommendation__card-content .desc-long { font-size: .75rem; line-height: 1.125rem; color: #6b6b6b; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-detail-recommendation__card-content .desc-price { margin-top: .5rem; font-size: .9375rem; font-weight: 600; color: #1f1f1f; }
.product-detail-recommendation .product-detail-recommendation__card { background: #fff !important; text-align: left; }
.product-detail-recommendation .product-detail-recommendation__card-img { background: #fff; }
.product-detail-recommendation .product-detail-recommendation__card-content, .product-detail-recommendation .product-detail-recommendation__card-content > * { text-align: left !important; }

/* features list under the carousel: sentence-case titles (the 3px-spaced capitals read as shouting), a light plus,
   the opened text in grey without repeating the title */
.product-detail-page .features-area .expandable-list .pz-expandable__header { padding: 1.125rem 0; }
.product-detail-page .features-area .expandable-list .pz-expandable__header .title { text-transform: none; letter-spacing: 0; font-size: .9375rem; line-height: 1.375rem; font-weight: 500; color: #1f1f1f; }
.product-detail-page .features-area .expandable-list .toggle-icon { font-size: .875rem; color: #6b6b6b; }
.product-detail-page .features-area .expandable-list { border-color: #ececec; }
.product-detail-page .features-area .feature-desc__title { display: none; }
.product-detail-page .features-area .feature-desc__desc { padding-bottom: 1.25rem; max-width: 760px; font-size: .9375rem; line-height: 1.5rem; color: #555; }

/* technical data: group captions in small grey capitals, rows of "name · value" with the name grey, light rules, and
   a soft fade over the collapsed end instead of a hard cut before "show more" */
.product-detail-page .technical-area .accordion-title { font-size: 1.75rem; line-height: 2.25rem; font-weight: 300; }
.product-detail-page .technical-content { position: relative; padding: .5rem 0 1rem; }
.product-detail-page .technical-content p { margin: 0; padding: 0 0 .25rem; font-size: .6875rem; line-height: 1rem; letter-spacing: 1.2px; text-transform: uppercase; color: #8a8a8a; }
.product-detail-page .technical-content p strong { font-weight: 600; }
.product-detail-page .technical-content p:not(:first-child) { margin-top: 2rem; padding-top: 0; }
.product-detail-page .technical-content ol { margin: 0; padding: 0; list-style: none; }
.product-detail-page .technical-content li { padding: .75rem 0; border-color: #efefef; font-size: .9375rem; line-height: 1.375rem; color: #1f1f1f; }
.product-detail-page .technical-content li em { width: 40%; padding-right: 1.5rem; font-weight: 400; color: #6b6b6b; }
.product-detail-page .technical-content.collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.product-detail-page .product-info__details-load-button-container { margin-top: .5rem; }
.product-detail-page .product-info__details-load-button { min-width: 200px; border-radius: 999px; }
.pdp-carousel.-static { display: flex !important; justify-content: center; flex-wrap: nowrap; overflow: hidden; }
.pdp-carousel.-static > .pdp-carousel__slide { flex: 0 0 auto; }
.pdp-carousel.-static > .pdp-carousel__slide:last-child { margin-right: 0 !important; }
.product-detail-recommendation__tabs .pz-tab-menu.-theme-zero .pz-tab-menu__item button { padding: .5rem 1.25rem !important; letter-spacing: 1px; line-height: 1rem; }
.product-detail-recommendation .pdp-carousel:not(.flickity-enabled) { justify-content: center; }
.catalog-compare__toggle i.pz-icon-angle-down::before { content: "\f107"; font-family: pz-icon !important; }
.catalog-compare__toggle i { width: auto; }

/* home, "discover our products": photo tiles of one size on top (white rounded squares, the photos differ in
   background), the name under it in regular weight, a thin progress track */
.home-category-banner__title { font-weight: 300; }
.home-category-banner__item-block { justify-content: flex-start; row-gap: .875rem; }
.home-category-banner__item-image { order: -1; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; padding: 14px; border-radius: 14px; background: #fff; overflow: hidden; transition: transform .2s; }
.home-category-banner__item-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.home-category-banner__item-block:hover .home-category-banner__item-image { transform: translateY(-3px); }
.home-category-banner__item-title { font-size: .875rem !important; line-height: 1.25rem !important; font-weight: 400 !important; letter-spacing: .2px !important; color: #e6e6e6; }
.home-category-banner__item-block:hover .home-category-banner__item-title { color: #fff; }
.home-category-banner__items { scrollbar-width: thin; scrollbar-color: #8a8a8a rgba(255, 255, 255, .12); }
.home-category-banner__items::-webkit-scrollbar { height: 3px; }
.home-category-banner__items::-webkit-scrollbar-thumb { background: #8a8a8a; border-radius: 3px; }
.home-category-banner__items::-webkit-scrollbar-track { background: rgba(255, 255, 255, .12); }
.home-category-banner__arrow { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background-color .15s; }
.home-category-banner__arrow:hover { background: rgba(255, 255, 255, .16); }

/* home, care products: a calmer lead line, white rounded photo tiles of one height, the name in semi-bold on two
   lines, a modest grey subtitle (it was 24px), "buy now" as an outlined pill */
.home-recommendation__title { max-width: 820px; margin: 0 auto; padding-bottom: 3rem !important; font-size: 1.625rem; line-height: 2.25rem; font-weight: 300; }
.home-recommendation .miele-carousel { gap: 24px; }
.home-recommendation .miele-carousel > a { display: block; color: inherit; text-decoration: none; }
.home-recommendation__product { display: flex; flex-direction: column; align-items: center; height: 100%; }
.home-recommendation__product picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 220px; min-height: 0; padding: 18px; border-radius: 14px; background: #fff; overflow: hidden; }
.home-recommendation__product-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .25s; }
.home-recommendation .miele-carousel > a:hover .home-recommendation__product-img { transform: scale(1.04); }
.home-recommendation__product-title { padding-top: 1.25rem !important; font-size: .9375rem; line-height: 1.375rem; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-recommendation__product-subtitle { padding-top: .375rem; font-size: .9375rem !important; line-height: 1.375rem !important; color: #bdbdbd; }
.home-recommendation__product-content {
    margin-top: auto; padding: 0 1.25rem !important; display: inline-flex; align-items: center; height: 38px;
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; font-size: .6875rem !important; letter-spacing: 1.2px; font-weight: 500 !important; transition: background-color .15s, color .15s, border-color .15s;
}
.home-recommendation .miele-carousel > a:hover .home-recommendation__product-content { background: #fff; color: #1f1f1f; border-color: #fff; }

/* footer link columns: small spaced captions, links in a softer grey with an even rhythm and a white hover */
.footer-menu__title { font-size: .8125rem !important; line-height: 1.25rem; letter-spacing: 1.2px; font-weight: 600; color: #fff; }
.footer-menu__links ul li { margin: 0 0 .625rem; }
.footer-menu__links ul li a { font-size: .8125rem; line-height: 1.25rem; color: #b5b5b5; transition: color .15s; }
.footer-menu__links ul li a:hover { color: #fff; }
/* categories: no white tiles after all (half of the photos have a black ground) — the photo itself, at one height,
   with rounded corners, on the dark band; arrows kept off the first and last item */
.home-category-banner__item-image { width: 150px; height: 140px; padding: 0; border-radius: 0; background: transparent; }
.home-category-banner__item-image img { max-height: 140px; border-radius: 10px; }
.home-category-banner__wrapper { position: relative; }
.home-category-banner__arrow--prev { left: -56px !important; }
.home-category-banner__arrow--next { right: -56px !important; }
@media (max-width: 1299px) { .home-category-banner__arrow--prev { left: 4px !important; } .home-category-banner__arrow--next { right: 4px !important; } }
.home-category-banner__item-image img { height: 140px; width: auto; max-width: 150px; object-fit: cover; }
@media (max-width: 1299px) and (min-width: 1024px) { .home-category-banner__items { padding-left: 52px; padding-right: 52px; scroll-padding: 0 52px; } }

/* categories, final: tiles of one size whose colour follows the photo (home.blade script), photo centred inside */
.home-category-banner__item-image { width: 150px; height: 160px; padding: 14px; border-radius: 14px; background: #262626; transition: transform .2s, box-shadow .2s; }
.home-category-banner__item-image img { height: auto; max-height: 100%; max-width: 100%; width: auto; object-fit: contain; border-radius: 0; }
.home-category-banner__item-block:hover .home-category-banner__item-image { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }

/* care products: the buttons on one line at the bottom of each column */
.home-recommendation .miele-carousel { align-items: stretch; }
.home-recommendation .miele-carousel > a { height: auto; display: flex; }
.home-recommendation__product { width: 100%; }
.home-recommendation__product-subtitle { min-height: 2.75rem; }
.home-recommendation__product-content { margin-top: 1rem; align-self: center; }
.home-recommendation__product .home-recommendation__product-content { margin-top: auto; }
.home-recommendation__product-subtitle { margin-bottom: 1rem; }

/* footer: even column rhythm, softer rules, the newsletter row aligned, and the bottom bar dark like the rest
   (it was a white strip) with quiet links and the card logos */
.footer-menu { column-gap: 3rem; padding-bottom: 2rem; }
.footer-menu__heading { margin-bottom: 1rem; }
.footer-wrapper__part { border-color: #333 !important; }
.footer-container hr, .footer-wrapper { border-color: #333; }
.subscription__title { font-size: .9375rem; font-weight: 600; color: #fff; }
.subscription__button { border-radius: 999px; font-size: .6875rem; letter-spacing: 1.2px; transition: background-color .15s; }
.footer-experience-widget__textcontent-title { font-size: .9375rem; font-weight: 600; color: #fff; }
.footer-experience-widget__textcontent-desc { font-size: .875rem; line-height: 1.375rem; color: #b5b5b5; }
.footer-copyright { background: #161616 !important; border-top: 1px solid #2c2c2c; padding: .875rem 0 !important; }
.footer-copyright__wrapper { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
.footer-copyright__wrapper-title a { font-size: .6875rem; letter-spacing: 1.2px; color: #9a9a9a; transition: color .15s; }
.footer-copyright__wrapper-title a:hover { color: #fff; }
.footer-copyright__wrapper-logos img { filter: grayscale(1) brightness(1.8); opacity: .8; }
@media (max-width: 767px) { .footer-copyright__wrapper { flex-direction: column; } }
/* categories: no tiles — the photos are cut out (transparent ground), one photo height, names under them */
.home-category-banner__item-image, .home-category-banner__item-image.-painted { width: 150px; height: 150px; padding: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; }
.home-category-banner__item-image img { max-height: 150px; }
.home-category-banner__item-block:hover .home-category-banner__item-image { box-shadow: none; }
/* category arrows: a thinner, smaller chevron optically centred in its disc (a rotated square's corner sits off
   the middle, so it is nudged 2px towards the opening) */
.home-category-banner__arrow { width: 40px; height: 40px; }
.home-category-banner__arrow::after { width: 9px; height: 9px; border-left-width: 1.5px; border-bottom-width: 1.5px; transform: translate(-30%, -50%) rotate(45deg); }
.home-category-banner__arrow--next::after { transform: translate(-70%, -50%) rotate(225deg); }

/* home carousels before Flickity starts (a refresh showed their slides stacked for a moment, then everything
   below jumped): keep them on one clipped row at their final size */
.js .hero-track:not(.flickity-enabled) { overflow: hidden; }
.js .hero-track:not(.flickity-enabled) > * { flex: 0 0 100%; }
.js .js-masonry-slider:not(.flickity-enabled) { display: flex; overflow: hidden; }
.js .js-masonry-slider:not(.flickity-enabled) > * { flex: 0 0 100%; }
.js .js-home-product-carousel:not(.flickity-enabled) { display: flex; overflow: hidden; }
.js .js-home-product-carousel:not(.flickity-enabled) > * { flex: 0 0 auto; }
.js .voucher-products__slider:not(.flickity-enabled), .js .about-nav-slider:not(.flickity-enabled), .js .about-design-gallery:not(.flickity-enabled) { display: flex; overflow: hidden; }
.js .voucher-products__slider:not(.flickity-enabled) > *, .js .about-nav-slider:not(.flickity-enabled) > * { flex: 0 0 auto; }
.js .about-design-gallery:not(.flickity-enabled) > * { flex: 0 0 100%; }
/* care products: no tiles — the photos are cut out and stand on the black band */
.home-recommendation__product picture { padding: 0; border-radius: 0; background: transparent; }
/* categories row: no visible scrollbar (it still scrolls by the arrows, a swipe or a trackpad) */
.home-category-banner__items { scrollbar-width: none !important; padding-bottom: 1rem; }
.home-category-banner__items::-webkit-scrollbar { display: none !important; height: 0 !important; }
/* reload / back: the page stays invisible for the moment the site restores the scroll (layouts/app) */
/* (no hiding while the scroll is restored: hiding painted a white frame; the scroll is set before the first paint) */
.js .js-masonry-slider:not(.flickity-enabled) > :not(:first-child) { display: none; }

/* photo viewer: a solid dark backdrop (the page showed through), the photo on a white rounded card with a shadow,
   round light arrows at the screen edges (they sat on the photo) and hidden while there is one photo, round toolbar
   buttons, the thumbnail strip only when there is something to pick */
.pdp-lightbox::backdrop { background: rgba(12, 12, 12, .96); }
.pdp-lightbox::-webkit-backdrop { background: rgba(12, 12, 12, .96); }
.pdp-lightbox__toolbar { height: 64px; padding: 0 1rem 0 1.5rem; background: transparent; gap: .25rem; }
.pdp-lightbox__counter { font-size: .8125rem; letter-spacing: 1px; color: #9a9a9a; }
.pdp-lightbox__close, .pdp-lightbox__zoom { width: 44px !important; height: 44px !important; border-radius: 50%; color: #e6e6e6; transition: background-color .15s; }
.pdp-lightbox__close:hover, .pdp-lightbox__zoom:hover { background: rgba(255, 255, 255, .1); }
.pdp-lightbox__close { font-size: 26px; font-weight: 300; }
.pdp-lightbox__zoom::before { left: 12px; top: 11px; }
.pdp-lightbox__zoom::after { left: 23px; top: 25px; }
.pdp-lightbox__zoom span { left: 15px; top: 8px; }
.pdp-lightbox__gallery { inset: 64px 0 112px; }
.pdp-lightbox__image-wrap img { max-width: min(1000px, calc(100% - 200px)); max-height: calc(100% - 24px); border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.pdp-lightbox__gallery .flickity-prev-next-button { width: 48px !important; height: 48px !important; border-radius: 50%; background: rgba(255, 255, 255, .1) !important; color: #fff; transition: background-color .15s; }
.pdp-lightbox__gallery .flickity-prev-next-button:hover { background: rgba(255, 255, 255, .2) !important; }
.pdp-lightbox__gallery .flickity-prev-next-button.previous { left: 24px !important; }
.pdp-lightbox__gallery .flickity-prev-next-button.next { right: 24px !important; }
.pdp-lightbox__gallery .flickity-prev-next-button:disabled { opacity: 0; pointer-events: none; }
.pdp-lightbox__gallery .flickity-button-icon { width: 40%; height: 40%; left: 30%; top: 30%; }
.pdp-lightbox__thumbnails { height: 112px; gap: 10px; background: transparent; }
.pdp-lightbox__thumbnails:has(> :only-child) { visibility: hidden; }
.pdp-lightbox__thumbnail { width: 64px; height: 64px; flex: 0 0 64px; border: 2px solid transparent; border-radius: 8px; opacity: .55; transition: opacity .15s, border-color .15s; }
.pdp-lightbox__thumbnail img { object-fit: contain; }
.pdp-lightbox__thumbnail:hover { opacity: .85; }
.pdp-lightbox__thumbnail[aria-pressed=true] { border-color: #fff; opacity: 1; }
@media (max-width: 767px) { .pdp-lightbox__image-wrap img { max-width: calc(100% - 32px); } .pdp-lightbox__gallery .flickity-prev-next-button { display: none; } }
.pdp-lightbox[open] { background: rgba(12, 12, 12, .96) !important; }

/* photo viewer, light: a near-white backdrop, the photo on it without a card, dark thin controls */
.pdp-lightbox[open] { background: rgba(255, 255, 255, .98) !important; color: #1f1f1f; }
.pdp-lightbox::backdrop, .pdp-lightbox::-webkit-backdrop { background: rgba(255, 255, 255, .98); }
.pdp-lightbox__counter { color: #6b6b6b; }
.pdp-lightbox__close, .pdp-lightbox__zoom { color: #1f1f1f; }
.pdp-lightbox__close:hover, .pdp-lightbox__zoom:hover { background: #f0f0f0; }
.pdp-lightbox__image-wrap img { border-radius: 0; background: transparent; box-shadow: none; }
.pdp-lightbox__gallery .flickity-prev-next-button { background: #fff !important; color: #1f1f1f; border: 1px solid #e3e3e3; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.pdp-lightbox__gallery .flickity-prev-next-button:hover { background: #f6f6f6 !important; }
.pdp-lightbox__thumbnails { border-top: 1px solid #efefef; }
.pdp-lightbox__thumbnail { background: #fff; border-color: #ececec; opacity: .7; }
.pdp-lightbox__thumbnail[aria-pressed=true] { border-color: #1f1f1f; opacity: 1; }
.pdp-lightbox .pdp-lightbox__toolbar, .pdp-lightbox .pdp-lightbox__thumbnails { background: transparent !important; }
.pdp-lightbox .pdp-lightbox__close, .pdp-lightbox .pdp-lightbox__zoom, .pdp-lightbox .pdp-lightbox__counter { color: #1f1f1f !important; }

/* photo viewer, final: a translucent dark veil with a blur (the page shows through, softened), light controls,
   the photo on a white rounded card, frosted round arrows at the edges */
.pdp-lightbox[open] { background: rgba(18, 18, 18, .78) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.pdp-lightbox .pdp-lightbox__close, .pdp-lightbox .pdp-lightbox__zoom, .pdp-lightbox .pdp-lightbox__counter { color: #fff !important; }
.pdp-lightbox .pdp-lightbox__counter { color: rgba(255, 255, 255, .7) !important; }
.pdp-lightbox__close:hover, .pdp-lightbox__zoom:hover { background: rgba(255, 255, 255, .14); }
.pdp-lightbox__image-wrap img { border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.pdp-lightbox__gallery .flickity-prev-next-button { background: rgba(255, 255, 255, .14) !important; color: #fff; border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pdp-lightbox__gallery .flickity-prev-next-button:hover { background: rgba(255, 255, 255, .26) !important; }
.pdp-lightbox__thumbnails { border-top: 0; }
.pdp-lightbox__thumbnail { background: #fff; border-color: transparent; opacity: .55; }
.pdp-lightbox__thumbnail[aria-pressed=true] { border-color: #fff; opacity: 1; }
.pdp-thumbnail-nav[hidden] { display: none !important; }

/* photo viewer toolbar: clean line icons of one weight (the magnifier was assembled from CSS bits, the close was a
   font glyph); "−" in the magnifier while zoomed */
.pdp-lightbox .pdp-lightbox__zoom::before, .pdp-lightbox .pdp-lightbox__zoom::after { display: none !important; }
.pdp-lightbox .pdp-lightbox__zoom span, .pdp-lightbox .pdp-lightbox__close { font-size: 0 !important; color: transparent !important; }
.pdp-lightbox .pdp-lightbox__zoom, .pdp-lightbox .pdp-lightbox__close { background-repeat: no-repeat; background-position: center; background-size: 22px 22px; }
.pdp-lightbox .pdp-lightbox__zoom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M10.5 7.75v5.5M7.75 10.5h5.5'/%3E%3C/svg%3E"); }
.pdp-lightbox.is-zoomed .pdp-lightbox__zoom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M7.75 10.5h5.5'/%3E%3C/svg%3E"); }
.pdp-lightbox .pdp-lightbox__close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.pdp-lightbox .pdp-lightbox__zoom:hover, .pdp-lightbox .pdp-lightbox__close:hover { background-color: rgba(255, 255, 255, .14); }
/* the viewer focuses its first button on open: no ring for that, a soft one only for keyboard focus */
.pdp-lightbox button { border: 0 !important; outline: none !important; }
.pdp-lightbox button:focus:not(:focus-visible) { box-shadow: none !important; }
.pdp-lightbox button:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6) !important; }
.pdp-lightbox button:focus, .pdp-lightbox button:focus-visible { box-shadow: none !important; outline: none !important; }
/* "also viewed" with few cards: a centred row (no carousel, no arrows) */
.product-related__slider.-static { display: flex; justify-content: center; flex-wrap: nowrap; overflow: hidden; padding: 0; }
.product-related__slider.-static > .product-related__card { flex: 0 0 auto; }
.product-related__slider.-static > .product-related__card:last-child { margin-right: 0; }
.js .product-related__slider:not(.flickity-enabled) { justify-content: center; }
.product-related .product-related__title { font-size: 1.75rem !important; line-height: 2.25rem !important; font-weight: 300 !important; margin-bottom: 1.75rem; color: #1f1f1f; }
/* favourites: one title on desktop — the banner card; the grey account header (it carries the back arrow on phones)
   is hidden there */
@media (min-width: 1024px) { .account-favourites-page .a-content-header { display: none; } }
.favourite-products__action-buttons .order-button[hidden] { display: none !important; }
.home-masonry-widget img, .home-multi-banners__img, .image-box__double-img-left, .image-box__double-img-right { height: auto; }
.js .pdp-thumbnail-nav:not(:has(.pdp-thumbnails.flickity-enabled)) .pdp-thumbnail-arrow { visibility: hidden; }