:root {
    --specialty-purple: #2b002c;
    --specialty-purple-light: #552357;
    --specialty-orange: #ff970f;
    --specialty-bg: #f0ebf0;
}

body[class*="specialty-store-specialty-"].cms-index-index .page-main,
body[class*="specialty-store-specialty-"].cms-index-index .page-main > .columns,
body[class*="specialty-store-specialty-"].cms-index-index .page-main > .columns > .column.main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.specialty-home {
    color: var(--specialty-purple);
    background: var(--specialty-bg);
    overflow: hidden;
}

.specialty-hero,
.specialty-benefits,
.specialty-category-callout {
    width: min(calc(100% - 40px), 1366px);
    margin-inline: auto;
}

.specialty-hero {
    padding-top: 24px;
}

.specialty-slider {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border-radius: 4px;
    background: #ddd;
    box-shadow: 0 3px 14px rgb(43 0 44 / 13%);
}

.specialty-slide,
.specialty-slide img {
    width: 100%;
    height: 500px;
}

.specialty-slide img {
    display: block;
    object-fit: cover;
}

.specialty-hero-copy {
    position: absolute;
    top: 52px;
    left: 345px;
    z-index: 3;
    max-width: 600px;
    padding: 22px 28px;
    color: #fff;
    text-shadow: 0 2px 12px rgb(0 0 0 / 65%);
}

.specialty-hero-copy p {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.specialty-hero-copy h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.05;
}

.specialty-hero-copy span {
    display: block;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.45;
}

.specialty-size-form {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 30px;
    z-index: 4;
    width: 285px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--specialty-purple);
    border-radius: 4px;
    background: rgb(255 255 255 / 95%);
    box-shadow: 0 8px 30px rgb(0 0 0 / 22%);
}

.specialty-size-form h2 {
    margin: 0 0 18px;
    color: var(--specialty-purple);
    font-size: 24px;
    font-weight: 800;
}

.specialty-size-form label {
    margin: 11px 0 5px;
    font-size: 13px;
    font-weight: 700;
}

.specialty-size-form input {
    width: 100%;
    height: 44px;
    padding-inline: 12px;
    border: 1px solid #ccc4cc;
    border-radius: 3px;
    background: #fff;
}

.specialty-size-form button,
.specialty-hero-button,
.specialty-category-callout a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--specialty-purple);
    font-weight: 800;
    border-radius: 4px;
    background: var(--specialty-orange);
}

.specialty-size-form button {
    margin-top: 20px;
}

.specialty-hero-button {
    position: absolute;
    bottom: 55px;
    left: 55px;
    z-index: 4;
    padding: 0 24px;
}

.specialty-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 42px;
    height: 42px;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    border-radius: 50%;
    background: rgb(43 0 44 / 72%);
    transform: translateY(-50%);
}

.specialty-slider-arrow--prev { left: 330px; }
.specialty-slider-arrow--next { right: 18px; }

.specialty-home--zonwering .specialty-slider-arrow--prev { left: 18px; }

.specialty-slider-dots {
    position: absolute;
    right: 22px;
    bottom: 18px;
    z-index: 5;
    display: flex;
    gap: 7px;
}

.specialty-slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
}

.specialty-slider-dots button.is-active { background: #fff; }

.specialty-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 24px;
    padding: 25px 28px;
    color: #fff;
    background: var(--specialty-purple-light);
}

.specialty-benefits > div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-inline: 20px;
    border-right: 1px solid rgb(255 255 255 / 25%);
}

.specialty-benefits > div:last-child { border-right: 0; }
.specialty-benefits strong { color: var(--specialty-orange); font-size: 30px; }
.specialty-benefits span { display: flex; flex-direction: column; font-size: 12px; }
.specialty-benefits b { color: #fff; font-size: 15px; }

.specialty-category-callout {
    margin-top: 54px;
    padding: 34px 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid #ddd5dd;
    border-radius: 6px;
    background: #fff;
}

.specialty-category-callout p { margin: 0 0 5px; color: #766c76; font-weight: 700; text-transform: uppercase; }
.specialty-category-callout h2 { margin: 0; color: var(--specialty-purple); font-size: clamp(22px, 3vw, 34px); font-weight: 800; }
.specialty-category-callout a { flex: 0 0 auto; padding: 0 24px; }

.specialty-products { padding-block: 68px; }
.specialty-brands { padding-block: 10px 65px; background: #fff; }

@media (max-width: 899px) {
    .specialty-slider { min-height: 570px; }
    .specialty-slide,
    .specialty-slide img { height: 570px; }
    .specialty-slide img { filter: brightness(.78); }
    .specialty-hero-copy { top: 28px; right: 25px; left: 325px; padding: 18px; }
    .specialty-size-form { width: 275px; }
    .specialty-benefits { grid-template-columns: 1fr 1fr; row-gap: 24px; }
    .specialty-benefits > div:nth-child(2) { border-right: 0; }
}

@media (max-width: 639px) {
    .specialty-hero,
    .specialty-benefits,
    .specialty-category-callout { width: min(calc(100% - 28px), 1366px); }
    .specialty-hero { padding-top: 14px; }
    .specialty-slider { min-height: 720px; }
    .specialty-slide,
    .specialty-slide img { height: 300px; }
    .specialty-hero-copy { top: 18px; right: 15px; left: 15px; padding: 15px; }
    .specialty-hero-copy h1 { font-size: 32px; }
    .specialty-hero-copy span { font-size: 15px; }
    .specialty-size-form { top: 315px; right: 15px; bottom: auto; left: 15px; width: auto; }
    .specialty-hero-button { bottom: 24px; left: 24px; }
    .specialty-slider-arrow { top: 150px; }
    .specialty-slider-arrow--prev,
    .specialty-home--zonwering .specialty-slider-arrow--prev { left: 10px; }
    .specialty-slider-arrow--next { right: 10px; }
    .specialty-slider-dots { top: 274px; right: 16px; bottom: auto; }
    .specialty-home--zonwering .specialty-slider { min-height: 390px; }
    .specialty-home--zonwering .specialty-slide,
    .specialty-home--zonwering .specialty-slide img { height: 390px; }
    .specialty-home--zonwering .specialty-slider-dots { top: auto; bottom: 16px; }
    .specialty-benefits { grid-template-columns: 1fr; padding: 24px; }
    .specialty-benefits > div { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 25%); }
    .specialty-benefits > div:last-child { padding-bottom: 0; border-bottom: 0; }
    .specialty-category-callout { margin-top: 34px; padding: 27px 24px; flex-direction: column; align-items: flex-start; }
    .specialty-products { padding-block: 48px; }
}

/* M1 layout: the calculator and slider are separate columns. */
.specialty-size-form select {
    width: 100%;
    height: 44px;
    padding-inline: 12px;
    color: #666;
    border: 1px solid #ccc4cc;
    border-radius: 4px;
    background: #fff;
}

.specialty-size-intro {
    margin: -6px 0 10px;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}

.specialty-size-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.specialty-size-input > input {
    min-width: 0;
    flex: 1 1 auto;
}

.specialty-size-input > span {
    flex: 0 0 54px;
    color: #777;
    font-size: 13px;
    font-style: italic;
    white-space: nowrap;
}

@media (min-width: 900px) {
    body[class*="specialty-store-specialty-"] .specialty-hero {
        padding-top: 38px;
    }

    body[class*="specialty-store-specialty-"] .specialty-slider {
        min-height: 472px;
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        grid-template-rows: 472px;
        gap: 28px;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body[class*="specialty-store-specialty-"] .specialty-slide {
        grid-column: 2;
        grid-row: 1;
        height: 472px;
        overflow: hidden;
        border-radius: 8px;
    }

    body[class*="specialty-store-specialty-"] .specialty-slide img {
        height: 472px;
    }

    body[class*="specialty-store-specialty-"] .specialty-size-form {
        position: relative;
        inset: auto;
        grid-column: 1;
        grid-row: 1;
        width: auto;
        padding: 0;
        display: grid;
        grid-template-columns: 122px minmax(0, 1fr);
        align-content: start;
        align-items: center;
        gap: 12px 12px;
        color: #777;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body[class*="specialty-store-specialty-"] .specialty-size-form h2,
    body[class*="specialty-store-specialty-"] .specialty-size-intro {
        grid-column: 1 / -1;
    }

    body[class*="specialty-store-specialty-"] .specialty-size-form h2 {
        margin: 0;
        color: #777;
        font-size: 20px;
    }

    body[class*="specialty-store-specialty-"] .specialty-size-form label {
        margin: 0;
        color: #777;
        font-size: 14px;
    }

    body[class*="specialty-store-specialty-"] .specialty-size-form input,
    body[class*="specialty-store-specialty-"] .specialty-size-form select {
        height: 38px;
        min-height: 38px;
    }

    body[class*="specialty-store-specialty-"] .specialty-size-form button {
        grid-column: 1;
        width: max-content;
        min-width: 96px;
        min-height: 44px;
        margin-top: 6px;
        padding-inline: 20px;
        color: #fff;
        background: #0088cc;
    }

    body[class*="specialty-store-specialty-"] .specialty-home--rolluik .specialty-hero-copy,
    body[class*="specialty-store-specialty-"] .specialty-home--screen .specialty-hero-copy {
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body[class*="specialty-store-specialty-"] .specialty-slider-arrow--prev {
        left: 380px;
    }

    body[class*="specialty-store-specialty-"] .specialty-home--zonwering .specialty-slider,
    body[class*="specialty-store-specialty-"] .specialty-home--rolpoort .specialty-slider {
        grid-template-columns: 1fr;
    }

    body[class*="specialty-store-specialty-"] .specialty-home--zonwering .specialty-slide,
    body[class*="specialty-store-specialty-"] .specialty-home--rolpoort .specialty-slide {
        grid-column: 1;
    }

    body[class*="specialty-store-specialty-"] .specialty-home--zonwering .specialty-slider-arrow--prev,
    body[class*="specialty-store-specialty-"] .specialty-home--rolpoort .specialty-slider-arrow--prev {
        left: 18px;
    }
}

@media (max-width: 899px) {
    .specialty-size-input {
        width: 100%;
    }
}

/* Specialist shops keep the light Magento 1 palette instead of Domisol purple. */
body[class*="specialty-store-specialty-"] {
    --specialty-purple: #666;
    --specialty-purple-light: #0088cc;
    --specialty-orange: #0088cc;
    --specialty-bg: #fff;
    color: #666;
    background: #fff;
}

body[class*="specialty-store-specialty-"] .page-wrapper,
body[class*="specialty-store-specialty-"] .specialty-home {
    background: #fff;
}

body[class*="specialty-store-specialty-"] .page-header {
    border-top: 0;
}

body[class*="specialty-store-specialty-"] .page-header #header.domisol-header {
    color: #666;
    background: #fff !important;
    box-shadow: none;
}

body[class*="specialty-store-specialty-"] .domisol-topbar {
    color: #777;
    border-bottom: 1px solid #ddd;
    background: #f2f2f1;
}

body[class*="specialty-store-specialty-"] .domisol-tagline,
body[class*="specialty-store-specialty-"] .domisol-quicklinks a,
body[class*="specialty-store-specialty-"] .domisol-quicklinks span {
    color: #777;
}

body[class*="specialty-store-specialty-"] .domisol-quicklinks > * + * {
    border-left-color: #ccc;
}

body[class*="specialty-store-specialty-"] .domisol-quicklinks a:hover,
body[class*="specialty-store-specialty-"] .domisol-quicklinks a:focus-visible {
    color: #0088cc;
}

body[class*="specialty-store-specialty-"] .domisol-header-main {
    background: #fff;
}

body[class*="specialty-store-specialty-"] .domisol-header-main-inner {
    min-height: 140px;
    grid-template-columns: minmax(290px, 390px) minmax(280px, 430px) 1fr;
}

body[class*="specialty-store-specialty-"] .domisol-logo img {
    width: auto;
    max-width: 390px;
    max-height: 92px;
}

body[class*="specialty-store-specialty-"] .domisol-search .form.minisearch {
    border: 1px solid #bbb;
    box-shadow: none;
}

body[class*="specialty-store-specialty-"] .domisol-header-actions .domisol-action,
body[class*="specialty-store-specialty-"] .domisol-header-actions .btn,
body[class*="specialty-store-specialty-"] .domisol-header-actions button,
body[class*="specialty-store-specialty-"] .domisol-header-actions a,
body[class*="specialty-store-specialty-"] .page-header #header .btn.bg-transparent,
body[class*="specialty-store-specialty-"] .page-header #header button.bg-transparent {
    color: #0088cc;
}

body[class*="specialty-store-specialty-"] .domisol-navigation {
    min-height: 46px;
    color: #0088cc;
    background: #fff;
}

body[class*="specialty-store-specialty-"] .domisol-navigation > .domisol-header-container {
    min-height: 46px;
    border-radius: 6px;
    background: #f2f2f1;
}

body[class*="specialty-store-specialty-"] .page-header #header .domisol-navigation .navigation {
    color: #0088cc;
}

body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul {
    min-height: 46px;
}

body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li > span > a,
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li > span > button {
    color: #0088cc;
}

body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li:hover,
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li[data-active],
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li:has(a[aria-current="page"]) {
    background: var(--domisol-purple-600);
}

body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li:hover > span > a,
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li:hover > span > button,
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li[data-active] > span > a,
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li[data-active] > span > button,
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li:has(a[aria-current="page"]) > span > a,
body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li:has(a[aria-current="page"]) > span > button {
    color: #fff;
}

body[class*="specialty-store-specialty-"] .domisol-navigation .navigation nav > ul > li:last-child > span > a {
    min-height: auto;
    margin: 0;
    color: #0088cc;
    background: transparent;
}

body[class*="specialty-store-specialty-"] .domisol-benefits {
    display: none;
}

@media (min-width: 900px) {
    body[class*="specialty-store-specialty-"] .specialty-slider {
        min-height: 0;
        grid-template-rows: auto;
    }

    body[class*="specialty-store-specialty-"] .specialty-slide,
    body[class*="specialty-store-specialty-"] .specialty-slide img {
        height: auto;
    }

    body[class*="specialty-store-specialty-"] .specialty-slide img {
        aspect-ratio: 1170 / 500;
        object-fit: contain;
        background: #fff;
    }
}

@media (max-width: 1023px) {
    body[class*="specialty-store-specialty-"] .domisol-header-main-inner {
        min-height: 78px;
        grid-template-columns: minmax(170px, 250px) 1fr;
    }

    body[class*="specialty-store-specialty-"] .domisol-logo img {
        max-width: 245px;
        max-height: 58px;
    }

    body[class*="specialty-store-specialty-"] .domisol-search {
        border-top-color: #ddd;
        background: #fff;
    }

    body[class*="specialty-store-specialty-"] .domisol-navigation > .domisol-header-container {
        border-radius: 0;
    }

    body[class*="specialty-store-specialty-"] .domisol-navigation .lg\:hidden > button {
        color: #0088cc;
    }
}