/* TikOPack functional storefront additions */

:root {
    --content-width: 1300px;
    --danger: #c62828;
    --focus-ring: 0 0 0 3px rgba(46, 124, 87, 0.22);
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(247, 166, 76, 0.72);
    outline-offset: 3px;
}

.btn {
    gap: 8px;
    min-height: 40px;
    transition: transform .16s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(12, 34, 55, .12);
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.btn-large {
    min-height: 48px;
    padding: 12px 22px;
    font-weight: 700;
}

/* Header */
.main-header {
    top: 0;
}

.header-inner-container {
    width: min(92%, var(--content-width));
    gap: 24px;
}

.header-logo {
    flex: 0 0 auto;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--dark-blue);
}

.header-logo span {
    color: var(--dark-green);
}

.header-middle {
    min-width: 0;
}

.header-lang-current {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.header-search {
    max-width: 520px;
}

.header-right {
    flex: 0 0 auto;
}

.header-icon-btn,
.header-cart {
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    gap: 7px;
    font-size: 1.12rem;
    border-width: 1.5px;
}

.header-action-label {
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.header-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--dark-blue);
    font-size: .7rem;
    font-weight: 800;
}

.header-count:empty,
.header-count[data-count="0"] {
    display: none;
}

.header-icon-btn:hover .header-count {
    background: var(--white);
}

/* Homepage */
.home-container {
    overflow: hidden;
}

.welcome-strip {
    margin: -12px 0 28px;
    padding: 14px 18px;
    border-radius: 18px;
    background: linear-gradient(110deg, rgba(185, 224, 193, .72), rgba(230, 234, 232, .65));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.welcome-strip > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.welcome-eyebrow,
.content-eyebrow,
.auth-intro .auth-icon + h1::before {
    color: var(--dark-green);
}

.welcome-eyebrow,
.content-eyebrow {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.welcome-link {
    font-size: .84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.banner-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--dark-green);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.banner-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-weight: 700;
}

.banner-image-placeholder i {
    font-size: clamp(3.2rem, 6vw, 5.5rem);
    color: var(--dark-green);
}

.banner-cta {
    text-decoration: none;
}

.usp-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 90px;
}

.usp-tile i {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.58);
    font-size: 1.15rem;
}

.usp-tile span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .8rem;
    font-weight: 500;
}

.usp-tile strong {
    font-size: .94rem;
}

/* Cards */
.category-card,
.product-card {
    position: relative;
    overflow: hidden;
}

.product-card {
    height: 300px;
}

.category-card {
    height: 250px;
}

.product-image,
.category-image,
.basket-image,
.product-detail-image {
    background:
        radial-gradient(circle at 22% 20%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(145deg, #edf4ef, #dce6e1);
    color: var(--dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image,
.category-image {
    text-decoration: none;
}

.product-image i,
.category-image i {
    font-size: 2.65rem;
    transition: transform .2s ease;
}

.product-card:hover .product-image i,
.category-card:hover .category-image i {
    transform: scale(1.08) rotate(-2deg);
}

.product-card h3,
.category-card h3 {
    line-height: 1.28;
}

.product-card h3 a:hover {
    color: var(--dark-green);
}

.product-prices {
    margin-top: auto;
    margin-bottom: 9px;
}

.product-price {
    font-size: 1rem;
    font-weight: 800;
}

.product-favorite {
    position: absolute;
    z-index: 5;
    top: 11px;
    right: 11px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--dark-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(12,34,55,.12);
}

.product-favorite.is-active,
.js-favorite-product.is-active {
    color: #d73333;
}

.product-tag {
    z-index: 4;
}

.category-link {
    color: var(--dark-green);
    font-size: .76rem;
    font-weight: 700;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* General content pages */
.content-page,
.auth-page {
    padding: 34px 18px 58px;
}

.content-container {
    width: min(100%, var(--content-width));
    margin: 0 auto;
    padding: 38px;
    border-radius: 28px;
    background: var(--white);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.content-heading {
    margin-bottom: 26px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
}

.content-heading h1,
.auth-card h1,
.product-detail h1 {
    margin: 5px 0 0;
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    letter-spacing: -.035em;
}

.content-heading p {
    margin: 8px 0 0;
    color: rgba(12,34,55,.66);
}

.text-button {
    border: 0;
    background: transparent;
    color: var(--danger);
    font-weight: 700;
    cursor: pointer;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.product-grid .product-card {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.filter-pills {
    margin: -4px 0 26px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.filter-pills a {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--grey-blue);
    font-size: .84rem;
    font-weight: 700;
}

.filter-pills a.is-active {
    background: var(--dark-green);
    color: var(--white);
}

.empty-state {
    min-height: 350px;
    border: 1px dashed rgba(12,34,55,.18);
    border-radius: 24px;
    background: rgba(249,244,238,.42);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px;
}

.empty-state > i {
    font-size: 3rem;
    color: var(--dark-green);
    margin-bottom: 14px;
}

.empty-state h2 {
    margin: 0;
}

.empty-state p {
    max-width: 460px;
    color: rgba(12,34,55,.65);
}

/* Authentication */
.auth-page {
    min-height: 650px;
    align-items: flex-start;
}

.auth-card {
    width: min(100%, 510px);
    margin: 0 auto;
    background: var(--white);
    border-radius: 28px;
    padding: 36px;
    box-shadow: 0 12px 32px rgba(12,34,55,.1);
}

.auth-intro {
    text-align: center;
    margin-bottom: 24px;
}

.auth-intro p {
    color: rgba(12,34,55,.66);
    line-height: 1.55;
}

.auth-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-green);
    color: var(--dark-green);
    font-size: 1.35rem;
}

.auth-form {
    display: grid;
    gap: 17px;
}

.auth-form label {
    display: grid;
    gap: 7px;
    font-size: .84rem;
    font-weight: 700;
}

.auth-form input {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid rgba(12,34,55,.18);
    border-radius: 14px;
    background: #fff;
}

.auth-form input:focus {
    border-color: var(--dark-green);
    box-shadow: var(--focus-ring);
    outline: none;
}

.auth-form small {
    color: rgba(12,34,55,.6);
    font-weight: 500;
}

.password-field {
    position: relative;
    display: block;
}

.password-field input {
    padding-right: 52px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    color: var(--dark-blue);
}

.form-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .84rem;
    line-height: 1.45;
}

.form-alert--error {
    color: #8a1f1f;
    background: #fff0f0;
    border: 1px solid #f3caca;
}

.auth-switch {
    margin: 22px 0 0;
    text-align: center;
    font-size: .86rem;
}

.auth-switch a {
    color: var(--dark-green);
    font-weight: 800;
}

/* Account */
.account-layout {
    display: grid;
    gap: 24px;
}

.account-card {
    border: 1px solid rgba(12,34,55,.1);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(12,34,55,.05);
}

.account-profile {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.account-profile h1,
.account-profile p {
    margin: 4px 0;
}

.account-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-green);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.account-action {
    min-height: 165px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.account-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(12,34,55,.1);
}

.account-action i {
    color: var(--dark-green);
    font-size: 1.6rem;
    margin-bottom: 16px;
}

.account-action span {
    color: rgba(12,34,55,.62);
    font-size: .84rem;
}

.logout-form {
    display: flex;
    justify-content: flex-end;
}

/* Cart */
.basket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 26px;
    align-items: start;
}

.basket-list {
    display: grid;
    gap: 12px;
}

.basket-item {
    display: grid;
    grid-template-columns: 80px minmax(0,1fr) 96px 105px 42px;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(12,34,55,.1);
    border-radius: 18px;
    padding: 13px;
}

.basket-image {
    width: 80px;
    height: 72px;
    border-radius: 14px;
    font-size: 1.7rem;
}

.basket-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.basket-info strong {
    display: block;
    line-height: 1.3;
}

.basket-info span,
.quantity-control {
    color: rgba(12,34,55,.62);
    font-size: .76rem;
}

.quantity-control {
    display: grid;
    gap: 5px;
}

.quantity-control input {
    width: 76px;
    height: 38px;
    padding: 6px 8px;
    border: 1px solid rgba(12,34,55,.18);
    border-radius: 10px;
}

.icon-action {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff0f0;
    color: var(--danger);
    cursor: pointer;
}

.basket-summary {
    position: sticky;
    top: 128px;
    padding: 22px;
    border-radius: 20px;
    background: var(--beige);
    display: grid;
    gap: 15px;
}

.basket-summary h2 {
    margin: 0 0 4px;
}

.basket-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: .86rem;
}

.basket-summary-total {
    font-size: 1rem !important;
}

.basket-summary small {
    color: rgba(12,34,55,.58);
    line-height: 1.5;
}

/* Product detail */
.product-detail {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.product-detail-image {
    min-height: 430px;
    border-radius: 28px;
}

.product-detail-image i {
    font-size: clamp(5rem, 13vw, 9rem);
}

.product-detail-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.breadcrumb {
    color: var(--dark-green);
    font-size: .8rem;
    font-weight: 700;
}

.product-detail-badge {
    margin-top: 18px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--light-green);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.product-detail-price {
    margin: 12px 0;
    font-size: 1.6rem;
    font-weight: 800;
}

.product-detail-info > p:not(.product-detail-price) {
    color: rgba(12,34,55,.68);
    line-height: 1.7;
}

.product-detail-actions {
    margin: 20px 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.product-benefits {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    font-size: .84rem;
}

.product-benefits i {
    width: 22px;
    color: var(--dark-green);
}

/* Toast */
.site-toast {
    position: fixed;
    z-index: 12000;
    left: 50%;
    bottom: max(22px, env(safe-area-inset-bottom));
    transform: translate(-50%, 22px);
    max-width: min(92vw, 480px);
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--dark-blue);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    font-size: .84rem;
    text-align: center;
}

.site-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.site-toast.is-error {
    background: #8a1f1f;
}

/* Footer form */
.newsletter-form input {
    min-width: 0;
}

.newsletter-form.is-loading {
    opacity: .65;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 1180px) {
    .header-action-label {
        display: none;
    }

    .header-icon-btn,
    .header-cart {
        width: 44px;
        padding: 0;
    }

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

@media (max-width: 1024px) {
    .main-header {
        position: relative;
    }

    .header-inner-container {
        width: min(94%, var(--content-width));
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 15px 0;
        gap: 14px;
    }

    .header-logo {
        grid-column: 1;
    }

    .header-middle {
        grid-column: 2;
        display: block;
    }

    .header-lang {
        display: none;
    }

    .header-search {
        position: static;
        width: 100%;
        max-width: none;
        transform: none;
    }

    .header-right {
        grid-column: 3;
    }

    .home-container {
        width: calc(100% - 24px);
        padding: 30px 22px;
    }

    .slider {
        overflow: visible;
    }

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

    .basket-layout {
        grid-template-columns: 1fr;
    }

    .basket-summary {
        position: static;
    }
}

@media (max-width: 820px) {
    .content-container {
        padding: 28px 22px;
        border-radius: 22px;
    }

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

    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-action {
        min-height: 130px;
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .product-detail-image {
        min-height: 320px;
    }

    .basket-item {
        grid-template-columns: 70px minmax(0,1fr) 84px 40px;
    }

    .basket-image {
        width: 70px;
        height: 66px;
    }

    .basket-line-total {
        display: none;
    }
}

@media (max-width: 720px) {
    .header-inner-container {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .header-logo {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .header-right {
        grid-column: 2;
        grid-row: 1;
    }

    .header-middle {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .header-search input {
        font-size: 16px;
    }

    .mega-nav {
        position: sticky;
        top: 0;
        z-index: 8000;
    }

    .home-container {
        width: calc(100% - 16px);
        margin-top: 10px;
        padding: 20px 12px 28px;
        border-radius: 18px;
    }

    .welcome-strip {
        margin: 0 4px 20px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .banner-slider {
        width: 100%;
    }

    .banner-slide {
        padding: 26px 22px;
    }

    .banner-image-placeholder {
        width: 100%;
        min-height: 105px;
    }

    .section {
        margin-bottom: 28px;
    }

    .section-header {
        padding: 0 4px;
        flex-direction: row;
        align-items: center;
    }

    .section-header h2 {
        font-size: 1.08rem;
    }

    .section-link {
        padding: 6px 11px;
        font-size: .76rem;
    }

    .usp-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .usp-tile {
        min-height: 78px;
    }

    .content-page,
    .auth-page {
        padding: 18px 8px 40px;
    }

    .content-container,
    .auth-card {
        padding: 22px 16px;
        border-radius: 18px;
    }

    .content-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-grid {
        gap: 12px;
    }

    .product-grid .product-card {
        min-height: 285px;
        height: auto;
        padding: 11px;
    }

    .product-grid .product-image {
        height: 105px;
    }

    .product-detail-actions {
        width: 100%;
        display: grid;
    }

    .basket-item {
        grid-template-columns: 62px minmax(0,1fr) 40px;
        align-items: start;
        gap: 11px;
    }

    .basket-image {
        width: 62px;
        height: 60px;
    }

    .quantity-control {
        grid-column: 2;
        width: 90px;
    }

    .icon-action {
        grid-column: 3;
        grid-row: 1;
    }

    .account-profile {
        align-items: flex-start;
    }

    .footer-newsletter .newsletter-form {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .header-logo {
        font-size: 1.3rem;
    }

    .header-right {
        gap: 5px;
    }

    .header-icon-btn,
    .header-cart {
        width: 37px;
        min-width: 37px;
        height: 37px;
        font-size: 1rem;
    }

    .header-count {
        position: absolute;
        top: -7px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border: 2px solid var(--white);
    }

    .slider-track {
        padding-left: 4px;
        padding-right: 4px;
    }

    .slider .product-card,
    .slider .category-card {
        margin: 0;
        flex-basis: min(78vw, 245px);
        width: min(78vw, 245px);
        min-width: min(78vw, 245px);
        max-width: min(78vw, 245px);
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-grid .product-card {
        min-height: 300px;
    }

    .auth-card {
        padding: 24px 16px;
    }

    .account-avatar {
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Complete webshop additions */
.alert{padding:14px 16px;border-radius:12px;margin:0 0 18px;font-weight:600;line-height:1.5}.alert-success{background:#e9f8ef;color:#17633a;border:1px solid #bfe8ce}.alert-error{background:#fff0ef;color:#9b2c2c;border:1px solid #f3c0bc}.alert-warning{background:#fff7df;color:#7b5712;border:1px solid #eedba7}.alert-info{background:#edf6ff;color:#22577a;border:1px solid #c9e1f5}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-span-2{grid-column:1/-1}.form-stack{display:grid;gap:17px}.form-narrow{max-width:560px}.form-grid label,.form-stack label,.sort-form label{display:grid;gap:8px;font-weight:700;color:#29352f}.form-grid input,.form-grid select,.form-grid textarea,.form-stack input,.form-stack select,.form-stack textarea,.sort-form select{width:100%;min-height:48px;border:1px solid #d7ddd8;border-radius:10px;background:#fff;padding:11px 13px;color:#1f2924;outline:none;transition:border-color .2s,box-shadow .2s}.form-grid textarea,.form-stack textarea{min-height:110px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.sort-form select:focus{border-color:#f47b20;box-shadow:0 0 0 3px rgba(244,123,32,.14)}label small,.form-stack small{font-weight:500;color:#6b746f}.checkbox-row{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:10px!important;font-weight:500!important;line-height:1.45}.checkbox-row input{width:18px!important;min-height:18px!important;height:18px;margin-top:2px;padding:0}.checkbox-row a{text-decoration:underline}.form-row-between{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.9rem}.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.auth-card-wide{max-width:980px;display:grid;grid-template-columns:.9fr 1.1fr;padding:0;overflow:hidden}.auth-copy{padding:50px;background:linear-gradient(145deg,#173c2f,#285c48);color:#fff}.auth-copy h1{font-size:clamp(2rem,4vw,3rem);line-height:1.08;margin:8px 0 18px}.auth-copy p{color:rgba(255,255,255,.82);line-height:1.7}.auth-copy .content-eyebrow{color:#ffd0ad}.auth-benefits{display:grid;gap:13px;margin:28px 0 0}.auth-benefits li{display:flex;align-items:center;gap:10px}.auth-benefits i{color:#ff9b52}.auth-form-panel{padding:42px}.auth-card:not(.auth-card-wide) .auth-form-panel{padding:0}.auth-form-panel>h1{margin:7px 0 10px}.auth-form-panel>p{color:#65716b;margin-bottom:22px;line-height:1.6}
.product-card-meta{display:flex;justify-content:space-between;gap:8px;color:#7a837e;font-size:.72rem;margin:4px 0 5px}.product-prices{display:flex;align-items:baseline;gap:8px}.product-prices small{color:#727b76;font-size:.72rem}.stock-label{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;margin:5px 0 11px}.is-in-stock{color:#21804b}.is-out-of-stock{color:#9b2c2c}.product-list-heading{align-items:flex-end}.sort-form select{min-width:200px}.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#6d7771;font-size:.86rem;margin-bottom:22px}.breadcrumbs i{font-size:.65rem}.product-detail-badge{position:absolute;top:20px;left:20px;background:#f47b20;color:white;padding:7px 11px;border-radius:999px;font-weight:800;font-size:.76rem}.product-detail-image{position:relative}.product-sku{color:#738079;font-size:.82rem}.product-detail-price small{font-size:.82rem;font-weight:500;color:#6e7872}.product-description{font-size:1.02rem;line-height:1.75;color:#4d5852}.product-feature-list{display:grid;gap:10px;margin:20px 0}.product-feature-list li{display:flex;gap:10px;align-items:center}.product-feature-list i{color:#2b8b56}.product-purchase-row{display:grid;grid-template-columns:90px minmax(190px,1fr) auto;gap:12px;align-items:end;margin-top:24px}.quantity-picker{display:grid;gap:7px;font-size:.8rem;font-weight:700}.quantity-picker input{height:52px;border:1px solid #d7ddd8;border-radius:10px;padding:0 12px}.product-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.product-service-grid>div{display:flex;gap:9px;align-items:center;background:#f5f7f5;border-radius:10px;padding:12px}.product-service-grid i{color:#f47b20}.product-service-grid span{display:grid;font-size:.73rem;color:#69736d}.product-service-grid strong{font-size:.79rem;color:#233029}.related-section{margin-top:46px}.compact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.account-shell{display:grid;gap:22px}.account-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.account-header h1{margin:5px 0}.account-header p{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.account-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}.account-nav{display:grid;background:#fff;border:1px solid #e2e6e2;border-radius:16px;padding:9px;position:sticky;top:16px}.account-nav a{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:10px;color:#4c5851;font-weight:700}.account-nav a:hover,.account-nav a.is-active{background:#eef5f1;color:#173c2f}.account-nav i{width:18px;text-align:center}.account-content{min-width:0}.account-dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.dashboard-card{background:#fff;border:1px solid #e2e6e2;border-radius:16px;padding:22px;display:grid;grid-template-columns:auto 1fr;gap:3px 13px;align-items:center;box-shadow:0 8px 25px rgba(31,50,40,.05)}.dashboard-card i{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:#eef5f1;color:#173c2f;display:grid;place-items:center;font-size:1.1rem}.dashboard-card strong{font-size:1.45rem}.dashboard-card span{color:#727b76;font-size:.83rem}.panel{background:#fff;border:1px solid #e2e6e2;border-radius:16px;padding:24px;box-shadow:0 8px 25px rgba(31,50,40,.045)}.panel h2{margin-top:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.panel-heading h2{margin:0}.compact-empty{padding:24px 0;text-align:center}.admin-entry{display:inline-flex;align-items:center;gap:9px;justify-self:start;background:#173c2f;color:#fff;padding:12px 16px;border-radius:10px;font-weight:700}
.responsive-table{overflow-x:auto}.responsive-table table{width:100%;border-collapse:collapse;min-width:650px}.responsive-table th,.responsive-table td{text-align:left;padding:13px 12px;border-bottom:1px solid #edf0ed;vertical-align:middle}.responsive-table th{font-size:.77rem;text-transform:uppercase;letter-spacing:.04em;color:#717b75}.responsive-table td{font-size:.9rem}.responsive-table small{color:#7a837e}.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}.status-pending,.status-open{background:#fff4d8;color:#795513}.status-processing{background:#eaf3ff;color:#245b91}.status-shipped{background:#eeeaff;color:#5945a4}.status-completed,.status-paid{background:#e7f7ed;color:#1e7141}.status-cancelled,.status-canceled,.status-failed,.status-expired{background:#fdebea;color:#9b2c2c}.status-refunded{background:#eef0f2;color:#59616a}.status-new{background:#eaf3ff;color:#245b91}.status-read{background:#eef0f2;color:#59616a}.status-closed{background:#e7f7ed;color:#1e7141}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}.checkout-main{display:grid;gap:18px}.checkout-summary{position:sticky;top:18px}.checkout-items{display:grid;gap:12px;padding-bottom:16px;border-bottom:1px solid #e5e9e6}.checkout-items>div{display:flex;justify-content:space-between;gap:14px;font-size:.86rem}.checkout-items span{max-width:72%}.checkout-items small{color:#717b75}.order-totals{display:grid;gap:11px;margin-top:17px}.order-totals>div{display:flex;justify-content:space-between;gap:15px}.order-totals .grand-total{font-size:1.15rem;padding-top:13px;border-top:1px solid #dfe4e0}.checkout-summary .checkbox-row{margin:20px 0}.secure-checkout-note{display:flex;justify-content:center;gap:8px;color:#68736c;font-size:.78rem;margin-top:14px}.payment-option{display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center;gap:13px!important;border:1px solid #dfe4e0;border-radius:12px;padding:15px;margin-top:12px;cursor:pointer}.payment-option:has(input:checked){border-color:#f47b20;background:#fff8f1;box-shadow:0 0 0 2px rgba(244,123,32,.1)}.payment-option input{width:18px!important;height:18px!important;min-height:auto!important}.payment-option span{display:grid;gap:4px}.payment-option small{font-weight:500;color:#6c756f}.payment-option>i{font-size:1.3rem;color:#173c2f}
.order-detail{display:grid;gap:20px}.order-detail-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.order-detail-header h1{margin:5px 0}.order-status-stack{display:flex;gap:8px;flex-wrap:wrap}.order-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.order-lines{display:grid}.order-line{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #edf0ed}.order-line>div{display:grid;gap:5px}.order-line span{color:#737c77;font-size:.82rem}.order-detail address{font-style:normal;line-height:1.7}.bank-details{display:grid;gap:6px;background:#f4f7f5;border-radius:12px;padding:14px;margin-top:12px}.bank-details.large{max-width:480px;margin:24px auto;text-align:left;padding:20px}.success-layout{max-width:850px}.success-card{text-align:center;background:#fff;border:1px solid #e1e6e2;border-radius:20px;padding:44px;box-shadow:0 12px 40px rgba(28,50,38,.08)}.success-icon{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:#e5f7ec;color:#247844;font-size:1.8rem}.success-card h1{font-size:clamp(2rem,4vw,3rem);margin:8px 0 14px}.success-card>p{color:#637069;line-height:1.65}.success-status,.success-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.contact-cards{display:grid;gap:13px;align-content:start}.contact-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e2e6e2;border-radius:14px;padding:18px}.contact-card>i{width:40px;height:40px;border-radius:10px;background:#eef5f1;display:grid;place-items:center;color:#173c2f}.contact-card>div{display:grid;gap:4px}.contact-card span,.contact-card small{color:#6e7872}.info-hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:30px;background:linear-gradient(135deg,#173c2f,#2c624d);border-radius:22px;padding:50px;color:#fff}.info-hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:8px 0 18px}.info-hero p{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.82);max-width:650px}.info-hero-icon{display:grid;place-items:center;font-size:8rem;color:rgba(255,255,255,.16)}.feature-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.feature-columns article{background:#fff;border:1px solid #e2e6e2;border-radius:16px;padding:25px}.feature-columns i{width:48px;height:48px;border-radius:12px;background:#fff2e8;color:#e8680f;display:grid;place-items:center;font-size:1.25rem}.feature-columns h2{font-size:1.15rem;margin:18px 0 10px}.feature-columns p{line-height:1.65;color:#68736c}.info-page,.legal-page{max-width:920px}.faq-list{display:grid;gap:12px}.faq-list details{background:#fff;border:1px solid #e1e6e2;border-radius:13px;padding:0 18px}.faq-list summary{font-weight:800;cursor:pointer;padding:18px 0;list-style:none;display:flex;justify-content:space-between}.faq-list summary::after{content:'+';font-size:1.25rem}.faq-list details[open] summary::after{content:'−'}.faq-list p{color:#66716b;line-height:1.7;padding:0 0 18px}.help-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#173c2f;color:#fff;border-radius:16px;padding:24px;margin-top:24px}.help-banner h2{margin:0 0 5px}.help-banner p{color:rgba(255,255,255,.75)}.legal-page>h1{font-size:clamp(2.2rem,5vw,3.5rem);margin:8px 0}.legal-updated{color:#7a837e;margin-bottom:28px}.legal-page section{background:#fff;border:1px solid #e2e6e2;border-radius:14px;padding:23px;margin-bottom:14px}.legal-page section h2{font-size:1.15rem;margin:0 0 10px}.legal-page section p{line-height:1.75;color:#5f6a64}
.admin-shell{display:grid;gap:20px}.admin-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.admin-header h1{margin:5px 0}.admin-nav{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #e2e6e2;padding:8px;border-radius:13px}.admin-nav a{padding:10px 14px;border-radius:9px;font-weight:700;color:#58635d}.admin-nav a.is-active,.admin-nav a:hover{background:#173c2f;color:#fff}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.admin-stats article{background:#fff;border:1px solid #e2e6e2;border-radius:15px;padding:20px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}.admin-stats i{grid-row:1/3;width:44px;height:44px;border-radius:11px;background:#eef5f1;display:grid;place-items:center;color:#173c2f}.admin-stats span{color:#737c77;font-size:.82rem}.admin-stats strong{font-size:1.25rem}.message-list{display:grid;gap:14px}.message-card header,.message-card footer{display:flex;justify-content:space-between;gap:15px;align-items:center}.message-card header>div{display:grid;gap:4px}.message-card header span{font-size:.84rem;color:#6d7771}.message-card>p{line-height:1.7;color:#4e5953;margin:18px 0}.message-card footer form{display:flex;gap:8px}.message-card select{border:1px solid #d8ded9;border-radius:8px;padding:8px}
.basket-trust{display:grid;gap:7px;color:#637069;font-size:.78rem;margin-top:14px}.basket-trust i{color:#26834d}.sort-form{min-width:220px}

@media (max-width:1024px){.checkout-layout{grid-template-columns:minmax(0,1fr) 330px}.order-detail-grid,.contact-layout{grid-template-columns:minmax(0,1fr) 290px}.admin-stats{grid-template-columns:repeat(2,1fr)}.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-service-grid{grid-template-columns:1fr}.product-purchase-row{grid-template-columns:85px 1fr}.product-purchase-row .btn-ghost{grid-column:1/-1}.account-layout{grid-template-columns:190px minmax(0,1fr)}}
@media (max-width:820px){.auth-card-wide{grid-template-columns:1fr}.auth-copy{padding:32px}.account-layout,.checkout-layout,.order-detail-grid,.contact-layout{grid-template-columns:1fr}.account-nav{position:static;display:flex;overflow-x:auto;white-space:nowrap}.checkout-summary{position:static}.account-dashboard-grid{grid-template-columns:1fr 1fr}.product-purchase-row{grid-template-columns:85px 1fr}.info-hero{grid-template-columns:1fr}.info-hero-icon{display:none}.feature-columns{grid-template-columns:1fr}.product-list-heading{align-items:flex-start}.sort-form{width:100%}.sort-form select{width:100%}.order-detail-grid aside{order:-1}}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}.form-span-2{grid-column:auto}.auth-form-panel{padding:26px 18px}.account-header,.order-detail-header,.admin-header,.help-banner{align-items:flex-start;flex-direction:column}.account-dashboard-grid{grid-template-columns:1fr}.product-purchase-row{grid-template-columns:1fr}.product-purchase-row .btn-ghost{grid-column:auto}.product-service-grid{grid-template-columns:1fr}.compact-grid{grid-template-columns:1fr}.panel{padding:18px}.success-card{padding:30px 18px}.admin-stats{grid-template-columns:1fr}.message-card header,.message-card footer{align-items:flex-start;flex-direction:column}.message-card footer form{width:100%}.info-hero{padding:32px 22px}.checkout-summary{padding:20px}.payment-option{grid-template-columns:auto 1fr!important}.payment-option>i{display:none}}
.welcome-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.welcome-strip-guest{background:linear-gradient(90deg,#eef5f1,#fff8f0);border:1px solid #dce7e0}.header-lang-static .header-lang-current{cursor:default}.header-lang-static .header-lang-current i{display:none}
@media(max-width:720px){.welcome-actions{width:100%;justify-content:space-between}.welcome-strip-guest .welcome-actions .btn{padding:9px 13px}}

/* Registratie: particulier of zakelijk */
.account-type-switch {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.account-type-switch legend {
    grid-column: 1 / -1;
    font-weight: 800;
    margin-bottom: .35rem;
}

.account-type-option {
    position: relative;
    cursor: pointer;
}

.account-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.account-type-option span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .75rem;
    min-height: 92px;
    align-content: center;
    padding: 1rem;
    border: 1px solid #d8dedb;
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.account-type-option i {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 1.35rem;
    color: #173c2f;
}

.account-type-option strong {
    font-size: 1rem;
}

.account-type-option small {
    color: #66726d;
}

.account-type-option input:checked + span {
    border-color: #f47b20;
    box-shadow: 0 0 0 3px rgba(244, 123, 32, .14);
    transform: translateY(-1px);
}

.account-type-option input:focus-visible + span {
    outline: 3px solid rgba(23, 60, 47, .25);
    outline-offset: 2px;
}

.business-registration-fields {
    padding: 1.1rem;
    margin: .25rem 0 1.25rem;
    border-radius: 14px;
    background: #f7faf8;
    border: 1px solid #dfe9e3;
}

.business-registration-fields[hidden] {
    display: none !important;
}

.business-fields-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.business-fields-heading h2 {
    margin: .1rem 0 0;
    font-size: 1.15rem;
}

.business-fields-heading > small {
    color: #66726d;
}

.product-image img,
.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-image img {
    max-height: 180px;
}

.product-detail-image img {
    max-height: 420px;
    padding: 1.25rem;
}

@media (max-width: 640px) {
    .account-type-switch {
        grid-template-columns: 1fr;
    }

    .business-fields-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.admin-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 1.25rem;
    align-items: start;
}

.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}

.admin-row-actions form {
    margin: 0;
}

.link-button {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: #173c2f;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.danger-link {
    color: #a32929;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 900px) {
    .admin-product-layout {
        grid-template-columns: 1fr;
    }
}

.settings-list {
    display: grid;
    gap: .65rem;
    margin: 0;
}

.settings-list > div {
    display: grid;
    grid-template-columns: minmax(140px, .45fr) 1fr;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e9e7;
}

.settings-list dt {
    font-weight: 700;
}

.settings-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* =========================================================
   REGISTRATIEPAGINA — definitieve responsive correctie
   Deze regels staan bewust onderaan zodat zij oudere regels
   voor de registratiepagina overschrijven.
   ========================================================= */

.auth-page {
    width: 100%;
    min-width: 0;
    padding: 32px 20px 60px;
}

.auth-card.auth-card-wide.registration-card {
    width: min(1120px, 100%);
    max-width: 1120px;
    min-width: 0;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(520px, 1.1fr);

    padding: 0;
    overflow: hidden;

    border-radius: 28px;
    background: #ffffff;

    box-shadow:
        0 18px 50px rgba(19, 47, 37, 0.13);
}

.registration-card .auth-copy {
    min-width: 0;
    padding: 58px 48px;

    background: linear-gradient(145deg, #173c2f, #285c48);
    color: #ffffff;
}

.registration-card .auth-copy h1 {
    max-width: 430px;
    margin: 12px 0 18px;

    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: normal;
}

.registration-card .auth-copy p {
    max-width: 430px;
    margin: 0;

    color: rgba(255, 255, 255, 0.86);
    line-height: 1.8;
}

.registration-card .auth-benefits {
    display: grid;
    gap: 14px;

    margin: 30px 0 0;
    padding: 0;

    list-style: none;
}

.registration-card .auth-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: #ffffff;
    line-height: 1.45;
}

.registration-card .auth-benefits i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: #ff9f3f;
}

.registration-card .auth-form-panel {
    min-width: 0;
    width: 100%;
    padding: 48px;
}

.registration-form {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 22px;
}

.registration-form .form-grid {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.registration-form .form-grid label,
.registration-form > label {
    min-width: 0;
}

.registration-form .form-span-2 {
    grid-column: 1 / -1;
}

.registration-form label {
    display: grid;
    gap: 8px;

    color: #25342e;
    font-weight: 700;
}

.registration-form label small {
    color: #68736e;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}

.registration-form input:not([type="checkbox"]):not([type="hidden"]) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 52px;
    min-height: 52px;

    padding: 0 15px;

    border: 1px solid #d8dfdb;
    border-radius: 12px;

    background: #ffffff;
    color: #1e2d27;

    font: inherit;
}

.registration-form input:not([type="checkbox"]):not([type="hidden"]):focus {
    border-color: #f7983e;
    outline: 3px solid rgba(247, 152, 62, 0.16);
    box-shadow: none;
}

/* Particulier / zakelijk */

.account-type-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.account-type-picker legend {
    margin: 0 0 12px;
    padding: 0;

    color: #25342e;
    font-size: 1rem;
    font-weight: 800;
}

.account-type-options {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

button.account-type-option {
    width: 100%;
    min-width: 0;
    min-height: 105px;

    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0;
    padding: 16px;

    border: 2px solid #e1e6e3;
    border-radius: 16px;

    background: #ffffff;
    color: #26362f;

    font: inherit;
    text-align: left;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

button.account-type-option:hover {
    border-color: #f7983e;
    transform: translateY(-1px);
}

button.account-type-option.is-selected {
    border-color: #f7983e;
    background: #fff8f0;

    box-shadow:
        0 0 0 4px rgba(247, 152, 62, 0.13);
}

button.account-type-option:focus-visible {
    outline: 3px solid rgba(24, 77, 59, 0.25);
    outline-offset: 3px;
}

.account-type-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: #edf5f1;
    color: #174d3b;

    font-size: 1.1rem;
}

button.account-type-option.is-selected .account-type-icon {
    background: #174d3b;
    color: #ffffff;
}

.account-type-content {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.account-type-content strong {
    display: block;

    color: #24332d;
    font-size: 1rem;
    line-height: 1.2;
}

.account-type-content small {
    display: block;

    color: #68736e;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: break-word;
}

/* Zakelijke velden */

.business-fields {
    min-width: 0;
    display: grid;
    gap: 20px;

    padding: 22px;

    border: 1px solid #dce4df;
    border-radius: 18px;

    background: #f7faf8;
}

.business-fields[hidden] {
    display: none !important;
}

.business-fields-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.business-fields-header h2 {
    margin: 5px 0 0;

    color: #20342c;
    font-size: 1.3rem;
}

.business-fields-header p {
    max-width: 190px;
    margin: 0;

    color: #68736e;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Wachtwoord */

.registration-form .password-field {
    position: relative;
    width: 100%;
    min-width: 0;
}

.registration-form .password-field input {
    padding-right: 52px !important;
}

.registration-form .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #174d3b;

    cursor: pointer;
}

/* Voorwaarden */

.registration-form .checkbox-row {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start;
    gap: 12px !important;
}

.registration-form .checkbox-row input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px;
    margin: 3px 0 0;
    padding: 0;
}

.registration-form .checkbox-row span {
    min-width: 0;
    line-height: 1.6;
}

.registration-form .checkbox-row a {
    color: #174d3b;
    text-decoration: underline;
}

.registration-form .btn-block {
    width: 100%;
    min-height: 54px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 999px;
}

/* Tablet: de twee helften komen onder elkaar te staan. */

@media (max-width: 1000px) {
    .auth-card.auth-card-wide.registration-card {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
    }

    .registration-card .auth-copy {
        padding: 42px;
    }

    .registration-card .auth-copy h1 {
        max-width: 540px;
        font-size: clamp(2.4rem, 8vw, 3.6rem);
    }

    .registration-card .auth-copy p {
        max-width: 560px;
    }

    .registration-card .auth-form-panel {
        padding: 42px;
    }
}

/* Telefoon */

@media (max-width: 640px) {
    .auth-page {
        padding: 16px 12px 40px;
    }

    .auth-card.auth-card-wide.registration-card {
        width: 100%;
        border-radius: 20px;
    }

    .registration-card .auth-copy,
    .registration-card .auth-form-panel {
        padding: 28px 22px;
    }

    .registration-card .auth-copy h1 {
        font-size: 2.55rem;
    }

    .registration-form .form-grid,
    .account-type-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .registration-form .form-span-2 {
        grid-column: auto;
    }

    button.account-type-option {
        min-height: 88px;
    }

    .business-fields {
        padding: 18px;
    }

    .business-fields-header {
        display: grid;
        gap: 8px;
    }

    .business-fields-header p {
        max-width: none;
    }
}


/* =========================================================
   ACCOUNT, REGISTRATIE EN E-MAILVERIFICATIE – 2026 UPGRADE
   ========================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.auth-card.auth-card-wide.login-card,
.auth-card.auth-card-wide.verification-card {
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(330px, .92fr) minmax(420px, 1.08fr);
    overflow: hidden;
    border: 1px solid rgba(23, 60, 47, .08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(20, 52, 41, .13);
}

.login-card .auth-copy,
.verification-card .auth-copy {
    min-width: 0;
    padding: 54px 48px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .13), transparent 36%),
        linear-gradient(145deg, #173c2f, #205b45);
    color: #fff;
}

.auth-copy-login h1,
.auth-copy-verification h1,
.auth-copy-registration h1 {
    margin: 12px 0 18px;
    color: #fff;
    font-size: clamp(2.3rem, 4vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -.05em;
}

.auth-copy-login > p,
.auth-copy-verification > p,
.auth-copy-registration > p {
    color: rgba(255, 255, 255, .84);
    font-size: 1rem;
    line-height: 1.75;
}

.login-panel,
.verification-panel {
    padding: 54px 48px;
}

.auth-panel-heading {
    margin-bottom: 28px;
}

.auth-panel-heading h1 {
    margin: 7px 0 8px;
    color: #173c2f;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -.04em;
}

.auth-panel-heading p {
    margin: 0;
    color: #66736d;
    line-height: 1.6;
}

.auth-feature-list {
    display: grid;
    gap: 18px;
    margin: 34px 0;
    padding: 0;
    list-style: none;
}

.auth-feature-list li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.auth-feature-list li > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    color: #ffb36d;
}

.auth-feature-list strong,
.auth-feature-list small {
    display: block;
}

.auth-feature-list strong {
    color: #fff;
    font-size: .96rem;
}

.auth-feature-list small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.45;
}

.auth-trust-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 15px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .84);
    font-size: .82rem;
    line-height: 1.55;
}

.auth-trust-note i {
    margin-top: 3px;
    color: #ffb36d;
}

.input-with-icon {
    position: relative;
}

.input-with-icon > i {
    position: absolute;
    z-index: 2;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #809087;
    pointer-events: none;
}

.input-with-icon > input {
    padding-left: 46px !important;
}

.password-field.input-with-icon > input {
    padding-right: 54px !important;
}

.login-links {
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.login-links a,
.text-link {
    color: #2e7c57;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}

.login-links a:hover,
.text-link:hover {
    text-decoration: underline;
}

.auth-submit {
    min-height: 56px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 999px;
}

.auth-divider {
    position: relative;
    margin: 27px 0 20px;
    text-align: center;
}

.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e4e9e6;
}

.auth-divider span {
    position: relative;
    padding: 0 14px;
    background: #fff;
    color: #7a8781;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.btn-outline {
    border: 1px solid #ced9d3;
    background: #fff;
    color: #173c2f;
}

.btn-outline:hover {
    border-color: #2e7c57;
    background: #f4f9f6;
}

.verification-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 14px;
    background: #fff8ed;
}

.auth-progress {
    display: grid;
    gap: 14px;
    margin: 34px 0;
}

.auth-progress-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    opacity: .72;
}

.auth-progress-item > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
}

.auth-progress-item.is-active {
    opacity: 1;
}

.auth-progress-item.is-active > span {
    border-color: #ff9d45;
    background: #ff9d45;
    color: #173c2f;
}

.auth-progress-item strong,
.auth-progress-item small {
    display: block;
}

.auth-progress-item strong {
    color: #fff;
    font-size: .92rem;
}

.auth-progress-item small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .65);
}

.registration-panel {
    padding: 44px 46px;
}

.registration-form {
    gap: 18px;
}

.form-section {
    display: grid;
    gap: 20px;
    padding: 24px;
    border: 1px solid #e0e7e3;
    border-radius: 20px;
    background: #fff;
}

.form-section-heading {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
}

.form-section-number {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #edf6f1;
    color: #2e7c57;
    font-weight: 800;
}

.form-section-heading h2,
.business-fields-header h3 {
    margin: 0;
    color: #173c2f;
    font-size: 1.08rem;
}

.form-section-heading p {
    margin: 4px 0 0;
    color: #738078;
    font-size: .82rem;
    line-height: 1.45;
}

.address-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(140px, .55fr);
}

.toggle-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center;
    padding: 16px 17px;
    border: 1px solid #dce5e0;
    border-radius: 16px;
    background: #f8fbf9;
    cursor: pointer;
}

.toggle-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-card-control {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #cbd6d0;
    transition: .2s ease;
}

.toggle-card-control::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    transition: .2s ease;
}

.toggle-card > input:checked + .toggle-card-control {
    background: #2e7c57;
}

.toggle-card > input:checked + .toggle-card-control::after {
    transform: translateX(20px);
}

.toggle-card > input:focus-visible + .toggle-card-control {
    outline: 3px solid rgba(46, 124, 87, .22);
    outline-offset: 3px;
}

.toggle-card-copy strong,
.toggle-card-copy small {
    display: block;
}

.toggle-card-copy strong {
    color: #173c2f;
    font-size: .9rem;
}

.toggle-card-copy small {
    margin-top: 4px;
    color: #718078;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.45;
}

.billing-fields {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px dashed #b9cfc3;
    border-radius: 17px;
    background: #f4f9f6;
}

.billing-fields[hidden] {
    display: none !important;
}

.password-requirements {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    color: #68776f;
    font-size: .8rem;
    line-height: 1.5;
}

.password-requirements i {
    margin-top: 2px;
    color: #2e7c57;
}

.terms-check {
    margin-top: 2px;
    padding: 2px 4px;
}

.verification-illustration {
    display: grid;
    place-items: center;
    min-height: 210px;
    margin: 26px 0 10px;
}

.verification-envelope {
    width: 190px;
    height: 135px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .10);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.verification-envelope i {
    font-size: 3rem;
    color: #ffb36d;
}

.verification-envelope span {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    letter-spacing: 5px;
}

.verification-code-input {
    height: 68px !important;
    text-align: center;
    color: #173c2f !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: .45em;
    font-variant-numeric: tabular-nums;
}

.verification-help {
    display: grid;
    gap: 7px;
    margin-top: 24px;
    padding: 17px;
    border-radius: 15px;
    background: #f5f8f6;
    text-align: center;
}

.verification-help p {
    margin: 0;
    color: #173c2f;
    font-weight: 700;
}

.verification-help a {
    color: #2e7c57;
    font-weight: 800;
}

.verification-help small {
    color: #78857f;
}

.verification-result {
    max-width: 640px;
    margin: 0 auto;
}

.verification-result-icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    font-size: 2.4rem;
}

.verification-result-icon.is-success {
    background: #e8f7ee;
    color: #2e7c57;
}

.verification-result-icon.is-error {
    background: #fff0f0;
    color: #a63636;
}

@media (max-width: 980px) {
    .auth-card.auth-card-wide.login-card,
    .auth-card.auth-card-wide.verification-card {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .login-card .auth-copy,
    .verification-card .auth-copy {
        padding: 40px;
    }

    .login-panel,
    .verification-panel {
        padding: 40px;
    }
}

@media (max-width: 720px) {
    .registration-panel,
    .login-panel,
    .verification-panel {
        padding: 28px 20px;
    }

    .form-section {
        padding: 19px 16px;
    }

    .address-grid {
        grid-template-columns: 1fr;
    }

    .auth-copy-login h1,
    .auth-copy-verification h1,
    .auth-copy-registration h1 {
        font-size: 2.25rem;
    }
}

@media (max-width: 520px) {
    .login-card .auth-copy,
    .verification-card .auth-copy {
        padding: 28px 22px;
    }

    .auth-feature-list {
        margin: 24px 0;
    }

    .form-section-heading {
        align-items: flex-start;
    }

    .verification-code-input {
        letter-spacing: .28em;
        font-size: 1.7rem !important;
    }

    .verification-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* =========================================================
   CATALOGUSFILTERS EN REGISTRATIEVERLOOP – V4
   ========================================================= */
.catalog-page {
    background: linear-gradient(180deg, #f8f5f0 0, #fff 480px);
}

.catalog-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: 32px;
    align-items: end;
    margin-bottom: 30px;
    padding: 30px;
    border: 1px solid rgba(23, 60, 47, .08);
    border-radius: 24px;
    background: linear-gradient(135deg, #fff, #f2f8f4);
    box-shadow: 0 14px 34px rgba(12, 34, 55, .07);
}

.catalog-hero h1 {
    margin: 7px 0 10px;
    color: var(--dark-blue);
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.catalog-hero p {
    max-width: 620px;
    margin: 0;
    color: #65736c;
    line-height: 1.7;
}

.catalog-search {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.catalog-search > i {
    position: absolute;
    left: 17px;
    color: #76847d;
}

.catalog-search input {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0 16px 0 46px;
    border: 1px solid #d6e0da;
    border-radius: 14px;
    background: #fff;
    font: inherit;
    outline: none;
}

.catalog-search input:focus {
    border-color: #2e7c57;
    box-shadow: 0 0 0 4px rgba(46, 124, 87, .12);
}

.catalog-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.catalog-sidebar {
    position: sticky;
    top: 126px;
}

.catalog-filter-box {
    overflow: hidden;
    border: 1px solid #dfe7e2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(12, 34, 55, .06);
}

.catalog-filter-box > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    color: #173c2f;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.catalog-filter-box > summary::-webkit-details-marker { display: none; }
.catalog-filter-box > summary span { display: inline-flex; gap: 10px; align-items: center; }
.catalog-filter-box > summary strong {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--orange);
    color: #173c2f;
    font-size: .72rem;
}

.catalog-filter-form {
    border-top: 1px solid #edf1ee;
}

.catalog-filter-section {
    margin: 0;
    padding: 20px;
    border: 0;
    border-bottom: 1px solid #edf1ee;
}

.catalog-filter-section legend {
    margin-bottom: 14px;
    color: #173c2f;
    font-size: .92rem;
    font-weight: 800;
}

.catalog-check-list,
.catalog-toggle-list { display: grid; gap: 10px; }

.catalog-check-list label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    color: #34433c;
    cursor: pointer;
}

.catalog-check-list input,
.catalog-toggle-list input {
    width: 18px;
    height: 18px;
    accent-color: #2e7c57;
}

.catalog-check-list small {
    min-width: 28px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f0f4f1;
    color: #758078;
    text-align: center;
}

.catalog-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.catalog-price-grid label { display: grid; gap: 7px; color: #67746d; font-size: .78rem; }
.catalog-price-grid label > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border: 1px solid #d7e0db;
    border-radius: 11px;
    background: #fff;
}
.catalog-price-grid b { padding-left: 11px; color: #6c7972; }
.catalog-price-grid input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 0 9px;
    outline: 0;
}

.catalog-toggle-list label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    cursor: pointer;
}
.catalog-toggle-list strong,
.catalog-toggle-list small { display: block; }
.catalog-toggle-list strong { color: #33423b; font-size: .84rem; }
.catalog-toggle-list small { margin-top: 2px; color: #7a867f; font-size: .72rem; line-height: 1.35; }

.catalog-filter-actions { display: grid; gap: 11px; padding: 20px; text-align: center; }
.catalog-filter-actions a { color: #2e7c57; font-size: .8rem; font-weight: 800; }

.catalog-results { min-width: 0; }
.catalog-results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px;
    padding: 4px 2px 17px;
    border-bottom: 1px solid #e4eae6;
}
.catalog-result-count { color: #2e7c57; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.catalog-results-toolbar h2 { margin: 5px 0 0; color: #173c2f; font-size: clamp(1.45rem, 3vw, 2rem); }
.catalog-sort label { display: grid; gap: 6px; color: #6b7770; font-size: .75rem; font-weight: 700; }
.catalog-sort select { min-width: 210px; height: 46px; padding: 0 38px 0 13px; border: 1px solid #d7e0db; border-radius: 12px; background: #fff; color: #28372f; }

.catalog-active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.catalog-active-filters > span { color: #707d76; font-size: .78rem; }
.catalog-active-filters em { padding: 7px 10px; border-radius: 999px; background: #edf6f1; color: #236b4a; font-size: .75rem; font-style: normal; font-weight: 700; }
.catalog-active-filters a { margin-left: auto; color: #9a4e13; font-size: .76rem; font-weight: 800; }

.catalog-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-empty { min-height: 420px; }

.pending-verification-notice,
.pending-expiry-notice {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
    padding: 18px;
    border-radius: 16px;
}
.pending-verification-notice { background: #edf7f1; border: 1px solid #cfe7d8; }
.pending-expiry-notice { background: #fff7ed; border: 1px solid #fed7aa; }
.pending-verification-notice > i,
.pending-expiry-notice > i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; }
.pending-verification-notice > i { background: #d9eee1; color: #236b4a; }
.pending-expiry-notice > i { background: #ffead1; color: #9a4e13; }
.pending-verification-notice strong,
.pending-expiry-notice strong { color: #173c2f; }
.pending-verification-notice p,
.pending-expiry-notice p { margin: 5px 0 0; color: #65736c; font-size: .84rem; line-height: 1.55; }
.login-links-single { justify-content: flex-end; }

@media (min-width: 1025px) {
    .catalog-filter-box > summary { cursor: default; }
}

@media (max-width: 1120px) {
    .catalog-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .catalog-hero { grid-template-columns: 1fr; align-items: stretch; }
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-sidebar { position: static; }
    .catalog-filter-box:not([open]) .catalog-filter-form { display: none; }
}

@media (max-width: 620px) {
    .catalog-hero { padding: 22px 17px; }
    .catalog-search { grid-template-columns: 1fr; }
    .catalog-search > i { top: 19px; }
    .catalog-search button { width: 100%; }
    .catalog-results-toolbar { align-items: stretch; flex-direction: column; }
    .catalog-sort, .catalog-sort label, .catalog-sort select { width: 100%; }
    .catalog-product-grid { grid-template-columns: 1fr; }
    .catalog-active-filters a { width: 100%; margin-left: 0; }
}


/* =========================================================
   REGISTRATIEPAGINA V5 – BREDERE INDELING EN WACHTWOORDCHECK
   ========================================================= */

.auth-page:has(.registration-card) {
    padding-inline: clamp(16px, 3vw, 42px);
}

.auth-card.auth-card-wide.registration-card {
    width: min(1240px, 100%);
    max-width: 1240px;
    grid-template-columns:
        minmax(340px, 390px)
        minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid rgba(23, 60, 47, .08);
    box-shadow:
        0 24px 70px rgba(19, 47, 37, .13);
}

.registration-card .auth-copy {
    padding:
        clamp(46px, 5vw, 70px)
        clamp(36px, 4vw, 54px);
}

.registration-card .auth-copy h1 {
    max-width: 340px;
    font-size: clamp(2.55rem, 4.2vw, 4rem);
}

.registration-card .auth-copy p {
    max-width: 350px;
}

.registration-card .auth-form-panel,
.registration-panel {
    padding:
        clamp(34px, 4vw, 54px)
        clamp(32px, 4.5vw, 62px);
}

.registration-panel .auth-panel-heading {
    max-width: 720px;
    margin-bottom: 30px;
}

.registration-form {
    gap: 22px;
}

.registration-form .form-section {
    gap: 22px;
    padding: clamp(22px, 2.5vw, 30px);
    border-color: #dce5e0;
    border-radius: 22px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fcfdfc 100%);
    box-shadow:
        0 8px 24px rgba(18, 51, 40, .035);
}

.registration-form .form-section-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1ee;
}

.registration-form .form-section-number {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.registration-form .form-section-heading h2 {
    font-size: 1.16rem;
}

.registration-form .form-section-heading p {
    max-width: 620px;
    font-size: .84rem;
}

.registration-form .form-grid {
    gap: 19px 22px;
}

.registration-form input:not([type="checkbox"]):not([type="hidden"]) {
    height: 54px;
    min-height: 54px;
    border-radius: 13px;
}

.registration-form label {
    gap: 9px;
}

.registration-form .account-type-options {
    gap: 16px;
}

.registration-form button.account-type-option {
    min-height: 98px;
    padding: 18px;
    border-radius: 17px;
}

.registration-form .business-fields,
.registration-form .billing-fields {
    padding: 22px;
    border-radius: 18px;
}

.registration-form .toggle-card {
    padding: 18px;
    border-radius: 17px;
}

.registration-form .terms-check {
    padding: 4px 8px;
}

.password-checker {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid #dce5e0;
    border-radius: 17px;
    background: #f7faf8;
}

.password-checker-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.password-checker-heading strong,
.password-checker-heading small {
    display: block;
}

.password-checker-heading strong {
    color: #173c2f;
    font-size: .94rem;
}

.password-checker-heading small {
    margin-top: 4px;
    color: #718078;
    font-size: .77rem;
    line-height: 1.45;
}

.password-strength-label {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #edf1ef;
    color: #68766f;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.password-strength-label[data-state="weak"] {
    background: #fff0ed;
    color: #a23b2a;
}

.password-strength-label[data-state="medium"] {
    background: #fff5df;
    color: #8a5a08;
}

.password-strength-label[data-state="strong"] {
    background: #e7f5ec;
    color: #226843;
}

.password-strength-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e9e6;
}

.password-strength-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #d05a45;
    transition:
        width .24s ease,
        background-color .24s ease;
}

.password-strength-track[data-score="3"] > span,
.password-strength-track[data-score="4"] > span {
    background: #d99a28;
}

.password-strength-track[data-score="5"] > span {
    background: #2e7c57;
}

.password-rule-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-rule-list li {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    color: #6b7972;
    font-size: .79rem;
    line-height: 1.4;
    transition: color .18s ease;
}

.password-rule-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #ccd6d1;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    font-size: .68rem;
    transition:
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
}

.password-rule-list li.is-met {
    color: #236b49;
}

.password-rule-list li.is-met .password-rule-icon {
    border-color: #2e7c57;
    background: #2e7c57;
    color: #fff;
}

.password-rule-list li.is-missing {
    color: #9a4938;
}

.password-rule-list li.is-missing .password-rule-icon {
    border-color: #e7b6aa;
    background: #fff4f1;
    color: #bc513d;
}

.password-rule-list li.is-missing .password-rule-icon i::before {
    content: "\f00d";
}

@media (max-width: 1080px) {
    .auth-card.auth-card-wide.registration-card {
        max-width: 800px;
        grid-template-columns: 1fr;
    }

    .registration-card .auth-copy h1,
    .registration-card .auth-copy p {
        max-width: 620px;
    }

    .registration-card .auth-copy {
        padding: 42px;
    }
}

@media (max-width: 700px) {
    .registration-card .auth-form-panel,
    .registration-panel {
        padding: 28px 20px;
    }

    .registration-form .form-section {
        padding: 20px 16px;
    }

    .password-rule-list {
        grid-template-columns: 1fr;
    }

    .password-checker-heading {
        display: grid;
        gap: 10px;
    }

    .password-strength-label {
        justify-self: start;
    }
}

@media (max-width: 480px) {
    .auth-page:has(.registration-card) {
        padding-inline: 10px;
    }

    .registration-card .auth-copy {
        padding: 28px 22px;
    }

    .registration-card .auth-copy h1 {
        font-size: 2.35rem;
    }

    .registration-form .form-section-heading {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .registration-form .form-section-number {
        width: 38px;
        height: 38px;
    }

    .password-checker {
        padding: 17px 14px;
    }
}


/* =========================================================
   V6 – HOMEPAGE, GASTCHECKOUT EN MOBIELE PRODUCTWEERGAVE
   ========================================================= */

/* Het losse accountblok is van de homepage verwijderd. */
.home-container > .banner-slider:first-child {
    margin-top: 0;
}

/* Keuze tussen account en gast bij afrekenen */
.checkout-container {
    scroll-behavior: smooth;
}

.checkout-account-choice {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 26px;
    padding: 24px;
    border: 1px solid #dce5e0;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(244, 123, 32, .09),
            transparent 34%
        ),
        linear-gradient(135deg, #f3f8f5, #fffaf5);
}

.checkout-choice-heading h2 {
    margin: 5px 0 8px;
    color: #173c2f;
    font-size: 1.35rem;
}

.checkout-choice-heading p {
    margin: 0;
    color: #69766f;
    font-size: .86rem;
    line-height: 1.55;
}

.checkout-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.checkout-choice-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 17px;
    border: 1px solid #d5dfda;
    border-radius: 16px;
    background: #fff;
    color: #27372f;
    text-decoration: none;
    box-shadow: 0 7px 22px rgba(24, 58, 45, .04);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.checkout-choice-card:hover {
    transform: translateY(-2px);
    border-color: #2e7c57;
    box-shadow: 0 12px 28px rgba(24, 58, 45, .09);
}

.checkout-choice-card.is-selected {
    border-color: #f47b20;
    background: #fff9f3;
    box-shadow: 0 0 0 3px rgba(244, 123, 32, .11);
}

.checkout-choice-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #edf5f1;
    color: #173c2f;
    font-size: 1.05rem;
}

.checkout-choice-card.is-selected .checkout-choice-icon {
    background: #173c2f;
    color: #fff;
}

.checkout-choice-copy {
    min-width: 0;
}

.checkout-choice-copy strong,
.checkout-choice-copy small {
    display: block;
}

.checkout-choice-copy strong {
    color: #173c2f;
    font-size: .92rem;
}

.checkout-choice-copy small {
    margin-top: 4px;
    color: #6c7972;
    font-size: .75rem;
    line-height: 1.42;
}

.checkout-choice-action {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2e7c57;
    font-size: .76rem;
    font-weight: 800;
}

.checkout-signed-in {
    display: flex;
    gap: 13px;
    align-items: center;
    margin-bottom: 24px;
    padding: 15px 17px;
    border: 1px solid #cfe5d8;
    border-radius: 15px;
    background: #eef8f2;
}

.checkout-signed-in > i {
    color: #2e7c57;
    font-size: 1.25rem;
}

.checkout-signed-in strong,
.checkout-signed-in small {
    display: block;
}

.checkout-signed-in strong {
    color: #173c2f;
}

.checkout-signed-in small {
    margin-top: 3px;
    color: #66756d;
}

.checkout-panel {
    display: grid;
    gap: 20px;
}

.panel-heading-copy {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf1ee;
}

.panel-heading-copy h2 {
    margin: 0;
    color: #173c2f;
    font-size: 1.12rem;
}

.panel-heading-copy p {
    margin: 4px 0 0;
    color: #758079;
    font-size: .79rem;
}

.checkout-step-number {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #edf6f1;
    color: #2e7c57;
    font-weight: 800;
}

/*
 * Mobiel: meer overzicht door compactere schaling, maar met vaste
 * tussenruimte zodat onderdelen niet tegen elkaar aan staan.
 */
@media (max-width: 720px) {
    .page-wrapper {
        padding-inline: 0;
    }

    .home-container {
        width: calc(100% - 12px);
        margin-top: 7px;
        padding: 17px 10px 30px;
        border-radius: 17px;
    }

    .home-container .section {
        margin-bottom: 34px;
    }

    .home-container .section-header {
        margin-bottom: 13px;
        padding-inline: 2px;
    }

    .home-container .section-header h2 {
        font-size: 1.03rem;
    }

    .home-container .section-link {
        padding: 6px 10px;
        font-size: .7rem;
    }

    .banner-slide {
        gap: 18px;
        padding: 23px 18px;
    }

    .banner-slide h1,
    .banner-slide h2 {
        font-size: clamp(1.65rem, 8vw, 2.25rem);
    }

    .usp-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .usp-tile {
        min-width: 0;
        min-height: 82px;
        padding: 12px;
        gap: 9px;
    }

    .usp-tile i {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: .94rem;
    }

    .usp-tile strong {
        font-size: .78rem;
    }

    .usp-tile span {
        font-size: .67rem;
    }

    .checkout-account-choice {
        grid-template-columns: 1fr;
        gap: 17px;
        padding: 19px 16px;
    }

    .checkout-choice-grid {
        gap: 11px;
    }

    .checkout-choice-card {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px;
    }

    .checkout-choice-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .checkout-container {
        padding-inline: 14px;
    }
}

@media (max-width: 620px) {
    /*
     * Productoverzichten tonen twee kaarten per rij.
     * De kaarten zijn compacter, maar houden een gap van 10 pixels.
     */
    .product-grid,
    .catalog-product-grid,
    .compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .product-grid .product-card,
    .catalog-product-grid .product-card,
    .compact-grid .product-card {
        min-width: 0;
        min-height: 276px;
        height: auto;
        padding: 10px;
        border-radius: 14px;
    }

    .product-grid .product-image,
    .catalog-product-grid .product-image,
    .compact-grid .product-image {
        height: 92px;
        min-height: 92px;
        border-radius: 11px;
    }

    .product-grid .product-image i,
    .catalog-product-grid .product-image i,
    .compact-grid .product-image i {
        font-size: 2rem;
    }

    .product-card-meta {
        gap: 4px;
        margin: 3px 0;
        font-size: .61rem;
    }

    .product-card-meta span:last-child {
        display: none;
    }

    .product-card h3 {
        min-height: 2.5em;
        margin: 5px 0;
        font-size: .78rem;
        line-height: 1.25;
    }

    .product-price {
        font-size: .86rem;
    }

    .product-prices {
        gap: 4px;
        margin-bottom: 4px;
    }

    .product-prices small {
        font-size: .58rem;
    }

    .stock-label {
        gap: 4px;
        margin: 3px 0 8px;
        font-size: .64rem;
    }

    .product-card .btn {
        min-height: 38px;
        padding: 8px 6px;
        gap: 5px;
        border-radius: 10px;
        font-size: .68rem;
        line-height: 1.15;
    }

    .product-card .btn i {
        font-size: .73rem;
    }

    .product-favorite {
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        font-size: .82rem;
    }

    .product-tag {
        max-width: calc(100% - 48px);
        padding: 5px 8px;
        font-size: .6rem;
    }

    /*
     * De horizontale sliders laten ongeveer twee kaarten tegelijk zien.
     */
    .slider-track {
        gap: 10px;
        padding-inline: 2px;
        scroll-padding-inline: 2px;
    }

    .slider .product-card,
    .slider .category-card {
        flex-basis: calc((100vw - 42px) / 2);
        width: calc((100vw - 42px) / 2);
        min-width: calc((100vw - 42px) / 2);
        max-width: 190px;
        margin: 0;
    }

    .slider .product-card {
        min-height: 276px;
        height: auto;
        padding: 10px;
    }

    .slider .product-image {
        height: 92px;
        min-height: 92px;
    }

    .slider .category-card {
        min-height: 178px;
        height: auto;
        padding: 10px;
    }

    .slider .category-image {
        height: 92px;
        min-height: 92px;
    }

    .slider .category-image i {
        font-size: 1.9rem;
    }

    .slider .category-card h3 {
        margin: 8px 0 5px;
        font-size: .77rem;
    }

    .slider .category-link {
        font-size: .62rem;
    }

    .checkout-choice-grid {
        grid-template-columns: 1fr;
    }

    .checkout-choice-card {
        min-height: 112px;
    }

    .checkout-heading {
        margin-bottom: 19px;
    }

    .checkout-panel,
    .checkout-summary {
        padding: 17px 15px;
    }

    .panel-heading-copy {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .checkout-step-number {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 370px) {
    .product-grid,
    .catalog-product-grid,
    .compact-grid {
        gap: 8px !important;
    }

    .product-grid .product-card,
    .catalog-product-grid .product-card,
    .compact-grid .product-card,
    .slider .product-card {
        min-height: 264px;
        padding: 8px;
    }

    .slider .product-card,
    .slider .category-card {
        flex-basis: calc((100vw - 34px) / 2);
        width: calc((100vw - 34px) / 2);
        min-width: calc((100vw - 34px) / 2);
    }

    .product-card h3 {
        font-size: .73rem;
    }

    .product-card .btn {
        font-size: .62rem;
    }
}


/* =========================================================
   V8 – VOLLEDIGE MOBIELE BANNER ZONDER AFSNIJDEN
   ========================================================= */

.banner-track-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

@media (max-width: 720px) {
    /*
     * Oude vaste hoogtes van 300–340 pixels worden uitgeschakeld.
     * JavaScript meet de volledige inhoud en zet de juiste hoogte.
     */
    .banner-section-wrapper {
        width: 100%;
        padding: 0 !important;
    }

    .banner-slider {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto 24px !important;
        overflow: visible !important;
        border-radius: 19px !important;
    }

    .banner-track-wrapper {
        height: auto;
        overflow: hidden;
        border-radius: 19px;
        background: var(--beige);
    }

    .banner-track {
        height: auto !important;
        align-items: stretch;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    .banner-slide {
        height: auto !important;
        min-height: 0;
        box-sizing: border-box;
        display: grid !important;
        grid-template-columns: 1fr;
        align-content: start;
        align-items: start !important;
        gap: 16px !important;
        padding:
            21px
            17px
            52px !important;
    }

    .banner-text {
        min-width: 0;
    }

    .banner-kicker {
        margin-bottom: 6px;
        font-size: .66rem;
    }

    .banner-slide h1,
    .banner-slide h2,
    .banner-text h1 {
        margin: 0 0 9px !important;
        font-size:
            clamp(
                1.55rem,
                7.1vw,
                2.05rem
            ) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em;
    }

    .banner-text p {
        max-width: 100%;
        margin: 0 0 14px;
        color: var(--dark-blue);
        font-size: .84rem;
        line-height: 1.5;
    }

    .banner-cta {
        min-height: 40px;
        padding: 9px 14px;
        font-size: .76rem;
    }

    .banner-image-placeholder {
        width: 100% !important;
        height: 142px !important;
        min-height: 142px;
        margin: 0;
        gap: 9px;
        border-radius: 16px !important;
    }

    .banner-image-placeholder i {
        font-size: 3.15rem;
    }

    .banner-image-placeholder span {
        font-size: .78rem;
        text-align: center;
    }

    .banner-dots {
        bottom: 16px;
        z-index: 4;
    }
}

/*
 * Op echte telefoons staat de illustratie naast de tekst.
 * Daardoor blijft de volledige banner zichtbaar, maar neemt hij
 * minder verticale ruimte in.
 */
@media (max-width: 560px) {
    .banner-slide {
        grid-template-columns:
            minmax(0, 1fr)
            104px;
        grid-template-areas: "banner-text banner-image";
        align-items: center !important;
        gap: 13px !important;
        padding:
            18px
            14px
            46px !important;
    }

    .banner-text {
        grid-area: banner-text;
    }

    .banner-image-placeholder {
        grid-area: banner-image;
        width: 104px !important;
        height: 154px !important;
        min-height: 154px;
        padding: 9px;
        border-radius: 15px !important;
    }

    .banner-slide h1,
    .banner-slide h2,
    .banner-text h1 {
        font-size:
            clamp(
                1.32rem,
                6.3vw,
                1.65rem
            ) !important;
    }

    .banner-text p {
        margin-bottom: 12px;
        font-size: .76rem;
        line-height: 1.42;
    }

    .banner-cta {
        min-height: 37px;
        padding: 8px 12px;
        font-size: .7rem;
    }

    .banner-image-placeholder i {
        font-size: 2.45rem;
    }

    .banner-image-placeholder span {
        font-size: .64rem;
        line-height: 1.25;
    }
}

@media (max-width: 370px) {
    .banner-slide {
        grid-template-columns:
            minmax(0, 1fr)
            86px;
        gap: 10px !important;
        padding:
            16px
            12px
            43px !important;
    }

    .banner-image-placeholder {
        width: 86px !important;
        height: 140px !important;
        min-height: 140px;
        padding: 7px;
    }

    .banner-slide h1,
    .banner-slide h2,
    .banner-text h1 {
        font-size: 1.24rem !important;
    }

    .banner-text p {
        font-size: .71rem;
    }

    .banner-image-placeholder i {
        font-size: 2.1rem;
    }
}


/* =========================================================
   V9 – LAATSTE OVERRIDE VOOR DE HOMEPAGEBANNER
   ========================================================= */

@media (max-width: 720px) {
    .homepage-hero-banner,
    .homepage-hero-banner .banner-track-wrapper,
    .homepage-hero-banner .banner-track {
        height: auto !important;
        min-height: 0 !important;
    }

    .homepage-hero-banner .banner-slide {
        height: auto !important;
        min-height: 0;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "banner-text"
            "banner-image" !important;
    }

    .homepage-hero-banner .banner-text {
        grid-area: banner-text;
    }

    .homepage-hero-banner .banner-image-placeholder {
        grid-area: banner-image;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}


/* =========================================================
   V10 – DRIE ITEMS OP TELEFOON EN MOBIELE FILTERDRAWER
   ========================================================= */

.catalog-hero--compact {
    grid-template-columns: 1fr;
    align-items: start;
}

.catalog-hero--compact > div {
    max-width: 760px;
}

.catalog-mobile-filter-header,
.catalog-filter-fab,
.catalog-filter-backdrop {
    display: none;
}

@media (max-width: 900px) {
    body.catalog-filter-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .catalog-layout {
        display: block;
    }

    .catalog-sidebar {
        position: fixed !important;
        z-index: 1300;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(88vw, 370px);
        max-width: 370px;
        padding:
            max(14px, env(safe-area-inset-top))
            14px
            max(18px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #f7f5f1;
        box-shadow:
            22px 0 54px rgba(12, 34, 55, .22);
        transform: translateX(-108%);
        visibility: hidden;
        pointer-events: none;
        transition:
            transform .25s cubic-bezier(.2, .8, .2, 1),
            visibility 0s linear .25s;
    }

    .catalog-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition:
            transform .25s cubic-bezier(.2, .8, .2, 1),
            visibility 0s;
    }

    .catalog-mobile-filter-header {
        position: sticky;
        top: -14px;
        z-index: 4;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        margin: -14px -14px 14px;
        padding:
            max(16px, env(safe-area-inset-top))
            16px
            14px;
        border-bottom: 1px solid #e2e8e4;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .catalog-mobile-filter-header h2 {
        margin: 4px 0 0;
        color: #173c2f;
        font-size: 1.15rem;
    }

    .catalog-mobile-filter-close {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid #d6dfda;
        border-radius: 14px;
        background: #fff;
        color: #173c2f;
        font-size: 1.15rem;
        box-shadow:
            0 7px 18px rgba(23, 60, 47, .08);
        cursor: pointer;
    }

    .catalog-filter-box {
        overflow: visible;
        border-radius: 18px;
        box-shadow:
            0 9px 26px rgba(12, 34, 55, .07);
    }

    .catalog-filter-box > summary {
        display: none;
    }

    .catalog-filter-form {
        border-top: 0;
    }

    .catalog-filter-fab {
        position: fixed;
        z-index: 1250;
        left: max(14px, env(safe-area-inset-left));
        bottom: max(14px, env(safe-area-inset-bottom));
        min-width: 54px;
        height: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        border: 0;
        border-radius: 999px;
        background: #173c2f;
        color: #fff;
        box-shadow:
            0 14px 32px rgba(12, 34, 55, .28);
        cursor: pointer;
        transition:
            transform .2s ease,
            background-color .2s ease,
            box-shadow .2s ease;
    }

    .catalog-filter-fab:hover,
    .catalog-filter-fab:focus-visible,
    .catalog-filter-fab[aria-expanded="true"] {
        background: #2e7c57;
        transform: translateY(-2px);
        box-shadow:
            0 18px 38px rgba(12, 34, 55, .32);
    }

    .catalog-filter-fab > i {
        font-size: 1rem;
    }

    .catalog-filter-fab-label {
        font-size: .78rem;
        font-weight: 800;
    }

    .catalog-filter-fab-count {
        min-width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        padding: 0 6px;
        border-radius: 999px;
        background: #f6a64b;
        color: #173c2f;
        font-size: .68rem;
    }

    .catalog-filter-backdrop {
        position: fixed;
        z-index: 1200;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgba(12, 34, 55, .48);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        transition:
            opacity .2s ease,
            visibility 0s linear .2s;
    }

    .catalog-filter-backdrop.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition:
            opacity .2s ease,
            visibility 0s;
    }
}

/*
 * Op iedere telefoon worden drie kaarten per rij weergegeven.
 * Dit overschrijft bewust de oudere regels voor één of twee kolommen.
 */
@media (max-width: 720px) {
    .product-grid,
    .catalog-product-grid,
    .compact-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .product-grid .product-card,
    .catalog-product-grid .product-card,
    .compact-grid .product-card,
    .slider .product-card {
        min-width: 0 !important;
        min-height: 218px !important;
        height: auto !important;
        padding: 7px !important;
        border-radius: 12px !important;
    }

    .product-grid .product-image,
    .catalog-product-grid .product-image,
    .compact-grid .product-image,
    .slider .product-image {
        height: 62px !important;
        min-height: 62px !important;
        border-radius: 9px !important;
    }

    .product-grid .product-image i,
    .catalog-product-grid .product-image i,
    .compact-grid .product-image i,
    .slider .product-image i {
        font-size: 1.55rem !important;
    }

    .product-card-meta,
    .stock-label,
    .product-prices small {
        display: none !important;
    }

    .product-card h3 {
        min-height: 2.7em !important;
        margin: 6px 0 4px !important;
        overflow: hidden;
        font-size: .63rem !important;
        line-height: 1.32 !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .product-prices {
        min-height: 22px;
        margin: 0 0 5px !important;
    }

    .product-price {
        font-size: .72rem !important;
        line-height: 1.2;
    }

    .product-card .btn {
        min-height: 32px !important;
        padding: 6px !important;
        border-radius: 9px !important;
        font-size: 0 !important;
    }

    .product-card .btn i {
        margin: 0 !important;
        font-size: .78rem !important;
    }

    .product-favorite {
        top: 5px !important;
        right: 5px !important;
        width: 24px !important;
        height: 24px !important;
        font-size: .68rem !important;
    }

    .product-tag {
        max-width: calc(100% - 32px);
        padding: 4px 6px !important;
        overflow: hidden;
        font-size: .5rem !important;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Horizontale sliders tonen exact ongeveer drie kaarten tegelijk.
     */
    .slider-track {
        gap: 7px !important;
        padding-inline: 1px !important;
        scroll-padding-inline: 1px;
    }

    .slider .product-card,
    .slider .category-card {
        flex-basis:
            calc((100vw - 38px) / 3) !important;
        width:
            calc((100vw - 38px) / 3) !important;
        min-width:
            calc((100vw - 38px) / 3) !important;
        max-width:
            calc((100vw - 38px) / 3) !important;
        margin: 0 !important;
    }

    .slider .category-card {
        min-height: 145px !important;
        padding: 7px !important;
        border-radius: 12px !important;
    }

    .slider .category-image {
        height: 62px !important;
        min-height: 62px !important;
        border-radius: 9px !important;
    }

    .slider .category-image i {
        font-size: 1.5rem !important;
    }

    .slider .category-card h3 {
        min-height: 2.5em;
        margin: 6px 0 3px !important;
        overflow: hidden;
        font-size: .61rem !important;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .slider .category-link {
        font-size: .52rem !important;
    }

    .catalog-page .content-container {
        padding-inline: 10px;
    }

    .catalog-hero {
        margin-bottom: 16px;
        padding: 18px 14px;
        border-radius: 17px;
    }

    .catalog-hero h1 {
        font-size: 1.55rem;
    }

    .catalog-hero p {
        font-size: .78rem;
        line-height: 1.5;
    }

    .catalog-results-toolbar {
        gap: 12px;
    }

    .catalog-results-toolbar h2 {
        font-size: 1.05rem;
    }

    .catalog-sort label {
        gap: 4px;
    }

    .catalog-sort select {
        min-width: 0;
        height: 40px;
        font-size: .76rem;
    }

    .catalog-active-filters {
        gap: 5px;
    }

    .catalog-active-filters em {
        padding: 5px 7px;
        font-size: .61rem;
    }
}

@media (max-width: 360px) {
    .product-grid,
    .catalog-product-grid,
    .compact-grid {
        gap: 5px !important;
    }

    .product-grid .product-card,
    .catalog-product-grid .product-card,
    .compact-grid .product-card,
    .slider .product-card {
        min-height: 206px !important;
        padding: 6px !important;
    }

    .slider .product-card,
    .slider .category-card {
        flex-basis:
            calc((100vw - 30px) / 3) !important;
        width:
            calc((100vw - 30px) / 3) !important;
        min-width:
            calc((100vw - 30px) / 3) !important;
        max-width:
            calc((100vw - 30px) / 3) !important;
    }

    .product-card h3 {
        font-size: .58rem !important;
    }

    .product-price {
        font-size: .67rem !important;
    }

    .catalog-filter-fab {
        min-width: 50px;
        height: 50px;
        padding: 0 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-sidebar,
    .catalog-filter-backdrop,
    .catalog-filter-fab {
        transition: none !important;
    }
}


/* =========================================================
   V12 – FILTERKNOP EERST BOVEN PRODUCTEN, DAARNA LINKSONDER
   ========================================================= */

.catalog-mobile-filter-anchor {
    display: none;
}

@media (max-width: 900px) {
    .catalog-mobile-filter-anchor {
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0 0 14px;
    }

    .catalog-mobile-filter-anchor.has-floating-button {
        min-height: 54px;
    }

    .catalog-mobile-filter-anchor .catalog-filter-fab {
        position: static;
        left: auto;
        bottom: auto;
        z-index: auto;
        min-width: 0;
        height: 48px;
        padding: 0 16px;
        border: 1px solid rgba(23, 60, 47, .14);
        border-radius: 14px;
        background: #173c2f;
        color: #fff;
        box-shadow:
            0 8px 22px rgba(12, 34, 55, .14);
        transition:
            transform .22s ease,
            background-color .2s ease,
            box-shadow .2s ease,
            border-radius .22s ease;
    }

    .catalog-mobile-filter-anchor
    .catalog-filter-fab.is-floating {
        position: fixed;
        z-index: 1250;
        left: max(14px, env(safe-area-inset-left));
        bottom: max(14px, env(safe-area-inset-bottom));
        height: 54px;
        min-width: 54px;
        padding: 0 15px;
        border: 0;
        border-radius: 999px;
        box-shadow:
            0 14px 32px rgba(12, 34, 55, .28);
        animation:
            catalog-filter-float-in
            .22s
            cubic-bezier(.2, .8, .2, 1);
    }

    .catalog-mobile-filter-anchor
    .catalog-filter-fab.is-floating:hover,
    .catalog-mobile-filter-anchor
    .catalog-filter-fab.is-floating:focus-visible,
    .catalog-mobile-filter-anchor
    .catalog-filter-fab.is-floating[aria-expanded="true"] {
        transform: translateY(-2px);
        box-shadow:
            0 18px 38px rgba(12, 34, 55, .32);
    }

    @keyframes catalog-filter-float-in {
        from {
            opacity: 0;
            transform: translateY(12px) scale(.94);
        }

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

@media (max-width: 420px) {
    .catalog-mobile-filter-anchor {
        margin-bottom: 11px;
    }

    .catalog-mobile-filter-anchor
    .catalog-filter-fab:not(.is-floating) {
        width: 100%;
        justify-content: center;
    }

    .catalog-mobile-filter-anchor
    .catalog-filter-fab.is-floating {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-mobile-filter-anchor
    .catalog-filter-fab.is-floating {
        animation: none !important;
    }
}


/* =========================================================
   V14 – WERKENDE WINKELACTIES EN SLIMME TELLERS
   ========================================================= */

.header-count[hidden],
.header-count:empty,
.header-count[data-count="0"] {
    display: none !important;
}

.header-count {
    max-width: 42px;
    white-space: nowrap;
}


/* =========================================================
   V15 – FULLSCREEN FILTERPANEEL OP TELEFOON
   ========================================================= */

@media (max-width: 900px) {
    html.catalog-filter-open,
    body.catalog-filter-open {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
    }

    /*
     * Volledig scherm en boven zowel header als navbar.
     * De header gebruikt maximaal z-index 9500 en het mobiele menu 10000.
     */
    .catalog-sidebar {
        position: fixed !important;
        z-index: 30000 !important;
        inset: 0 !important;

        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;

        display: flex;
        flex-direction: column;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;
        overscroll-behavior: contain;

        border: 0 !important;
        border-radius: 0 !important;
        background: #f7f5f1 !important;
        box-shadow: none !important;

        visibility: hidden;
        opacity: 0;
        pointer-events: none;

        transform: translateY(100%);
        transition:
            transform .28s cubic-bezier(.2, .8, .2, 1),
            opacity .2s ease,
            visibility 0s linear .28s;
    }

    .catalog-sidebar.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;

        transform: translateY(0);
        transition:
            transform .28s cubic-bezier(.2, .8, .2, 1),
            opacity .2s ease,
            visibility 0s;
    }

    /*
     * De eigen filterheader blijft bovenaan en vervangt visueel
     * de normale websiteheader en navbar.
     */
    .catalog-mobile-filter-header {
        position: sticky !important;
        z-index: 4;
        top: 0 !important;

        min-height: 74px;
        flex: 0 0 auto;

        margin: 0 !important;
        padding:
            max(15px, env(safe-area-inset-top))
            16px
            14px !important;

        border-bottom: 1px solid #dde5e0;
        background: rgba(255, 255, 255, .98) !important;

        box-shadow:
            0 8px 24px rgba(12, 34, 55, .08);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .catalog-mobile-filter-header h2 {
        margin: 3px 0 0;
        font-size: 1.18rem;
    }

    .catalog-mobile-filter-close {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;

        border-radius: 14px;
        background: #fff;
        box-shadow:
            0 7px 18px rgba(23, 60, 47, .09);

        touch-action: manipulation;
    }

    /*
     * Het details-element vult de rest van het scherm.
     * Alleen de filterinhoud zelf scrolt.
     */
    .catalog-sidebar .catalog-filter-box {
        width: min(100%, 720px);
        min-height: 0;
        flex: 1 1 auto;

        display: flex;
        flex-direction: column;

        margin: 0 auto !important;

        overflow: hidden !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .catalog-sidebar .catalog-filter-box > summary {
        display: none !important;
    }

    .catalog-sidebar .catalog-filter-form {
        min-height: 0;
        flex: 1 1 auto;

        display: block;

        padding: 14px 14px 0;

        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        border: 0 !important;
        background: #f7f5f1;
    }

    .catalog-sidebar .catalog-filter-section {
        margin-bottom: 12px;
        padding: 18px;

        border: 1px solid #dfe7e2 !important;
        border-radius: 17px;

        background: #fff;

        box-shadow:
            0 7px 20px rgba(12, 34, 55, .045);
    }

    .catalog-sidebar .catalog-filter-section legend {
        margin-bottom: 14px;
        font-size: .95rem;
    }

    /*
     * De toepasknop blijft altijd bereikbaar onderaan.
     */
    .catalog-sidebar .catalog-filter-actions {
        position: sticky;
        z-index: 3;
        bottom: 0;

        display: grid;
        gap: 9px;

        margin: 0 -14px;
        padding:
            13px
            14px
            max(14px, env(safe-area-inset-bottom));

        border-top: 1px solid #dfe6e2;
        background: rgba(255, 255, 255, .98);

        box-shadow:
            0 -9px 24px rgba(12, 34, 55, .08);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .catalog-sidebar .catalog-filter-actions .btn {
        min-height: 50px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;

        border-radius: 999px;
    }

    .catalog-sidebar .catalog-filter-actions > a {
        min-height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 10px;

        color: #2e7c57;
        font-size: .82rem;
        font-weight: 800;
        text-decoration: none;
    }

    /*
     * Een backdrop is bij een volledig scherm niet meer nodig.
     * Hierdoor kan hij ook niet tussen de navbar en het filter terechtkomen.
     */
    .catalog-filter-backdrop,
    .catalog-filter-backdrop.is-open {
        display: none !important;
    }

    /*
     * De zwevende filterknop verdwijnt zolang het paneel open is.
     */
    body.catalog-filter-open .catalog-filter-fab {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 480px) {
    .catalog-sidebar .catalog-filter-form {
        padding-inline: 11px;
    }

    .catalog-sidebar .catalog-filter-section {
        padding: 16px 14px;
        border-radius: 15px;
    }

    .catalog-sidebar .catalog-filter-actions {
        margin-inline: -11px;
        padding-inline: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-sidebar,
    .catalog-sidebar.is-open {
        transition: none !important;
    }
}


/* =========================================================
   V16 – NETTE PRODUCTDETAILPAGINA OP TELEFOON
   ========================================================= */

.product-detail-media {
    min-width: 0;
}

.product-detail-heading,
.product-detail-copy,
.product-buy-card {
    width: 100%;
}

.product-detail-heading h1 {
    overflow-wrap: anywhere;
}

.product-price-stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.product-detail-copy {
    margin-top: 20px;
}

.product-detail-copy h2 {
    margin: 0 0 10px;
    color: var(--dark-blue);
    font-size: 1.08rem;
}

.product-buy-card {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #dfe7e2;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            #f7faf8,
            #fffaf5
        );
}

.product-buy-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.product-buy-heading > div {
    display: grid;
    gap: 3px;
}

.product-buy-heading strong {
    color: var(--dark-blue);
    font-size: 1rem;
}

.product-buy-price {
    color: var(--dark-green);
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 820px) {
    .product-detail {
        align-items: stretch;
    }

    .product-detail-info {
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .product-page {
        padding:
            10px
            6px
            42px;
    }

    .product-page-container {
        width: 100%;
        padding: 11px;
        border-radius: 18px;
        box-shadow:
            0 8px 24px rgba(12, 34, 55, .07);
    }

    /*
     * Het broodkruimelpad blijft op één regel en kan horizontaal
     * scrollen wanneer de productnaam lang is.
     */
    .product-breadcrumbs {
        flex-wrap: nowrap;
        gap: 7px;
        margin: 0 2px 13px;
        padding: 8px 4px 9px;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
        font-size: .7rem;
    }

    .product-breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .product-breadcrumbs a,
    .product-breadcrumbs span {
        flex: 0 0 auto;
    }

    .product-breadcrumbs span {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-detail {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .product-detail-media {
        width: 100%;
    }

    .product-detail-image {
        width: 100%;
        min-height: 235px !important;
        height: 235px;
        overflow: hidden;
        border-radius: 19px;
    }

    .product-detail-image img {
        width: 100%;
        height: 100%;
        max-height: none !important;
        padding: 13px;
        object-fit: contain;
    }

    .product-detail-image > i {
        font-size:
            clamp(
                4.4rem,
                24vw,
                6.7rem
            );
    }

    .product-detail-badge {
        top: 11px !important;
        left: 11px !important;
        margin: 0 !important;
        padding: 6px 9px !important;
        font-size: .63rem !important;
    }

    .product-detail-info {
        width: 100%;
        gap: 12px;
        align-items: stretch !important;
    }

    /*
     * Titel, prijs en voorraad worden als duidelijke mobiele
     * samenvatting gecentreerd.
     */
    .product-detail-heading {
        padding: 18px 15px;
        border: 1px solid #e2e8e4;
        border-radius: 18px;
        background:
            radial-gradient(
                circle at top right,
                rgba(244, 123, 32, .08),
                transparent 34%
            ),
            #fff;
        text-align: center;
    }

    .product-sku {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        margin: 0 auto 8px;
        padding: 5px 9px;
        border-radius: 999px;
        background: #f0f5f2;
        color: #65736c;
        font-size: .66rem;
    }

    .product-detail-heading h1 {
        margin: 0;
        color: var(--dark-blue);
        font-size:
            clamp(
                1.35rem,
                6vw,
                1.75rem
            );
        line-height: 1.14;
        letter-spacing: -.025em;
    }

    .product-price-stock {
        justify-content: center;
        gap: 7px 10px;
        margin-top: 12px;
    }

    .product-detail-price {
        width: 100%;
        margin: 0 !important;
        color: var(--dark-green);
        font-size: 1.35rem !important;
        line-height: 1.2;
    }

    .product-detail-price small {
        display: block;
        margin-top: 4px;
        font-size: .68rem !important;
    }

    .product-detail-heading .stock-label {
        margin: 2px 0 0;
        padding: 6px 10px;
        border-radius: 999px;
        background: #edf7f1;
        font-size: .69rem;
    }

    .product-detail-heading
    .stock-label.is-out-of-stock {
        background: #fff0f0;
    }

    /*
     * De beschrijving staat nog links voor leesbaarheid, maar wel
     * binnen een nette kaart met voldoende binnenruimte.
     */
    .product-detail-copy {
        margin: 0;
        padding: 17px 15px;
        border: 1px solid #e2e8e4;
        border-radius: 18px;
        background: #fff;
    }

    .product-detail-copy h2 {
        margin-bottom: 9px;
        font-size: .98rem;
    }

    .product-detail-info
    .product-description {
        margin: 0;
        color: #52605a !important;
        font-size: .8rem !important;
        line-height: 1.62 !important;
    }

    .product-feature-list {
        grid-template-columns: 1fr;
        gap: 7px;
        margin: 14px 0 0 !important;
    }

    .product-feature-list li {
        min-height: 38px;
        gap: 9px;
        padding: 9px 10px;
        border-radius: 11px;
        background: #f5f8f6;
        color: #35443d;
        font-size: .73rem;
        line-height: 1.4;
    }

    .product-feature-list i {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #dff0e6;
        font-size: .6rem;
    }

    .product-buy-card {
        margin: 0;
        padding: 16px 14px;
        border-radius: 18px;
        box-shadow:
            0 8px 22px rgba(12, 34, 55, .06);
    }

    .product-buy-heading {
        align-items: center;
        margin-bottom: 13px;
    }

    .product-buy-heading strong {
        font-size: .9rem;
    }

    .product-buy-price {
        font-size: .98rem;
    }

    .product-purchase-row {
        grid-template-columns:
            82px
            minmax(0, 1fr) !important;
        gap: 9px !important;
        margin: 0 !important;
        align-items: end;
    }

    .quantity-picker {
        gap: 6px;
        font-size: .69rem;
    }

    .quantity-picker input {
        width: 100%;
        height: 46px;
        padding: 0 8px;
        border-radius: 12px;
        text-align: center;
        font-size: .9rem;
        font-weight: 800;
    }

    .product-purchase-row .btn {
        min-height: 46px;
        padding: 10px 11px;
        border-radius: 12px;
        font-size: .76rem;
    }

    .product-purchase-row .btn-primary {
        min-width: 0;
    }

    .product-purchase-row .btn-ghost {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-height: 43px;
    }

    /*
     * De drie voordelen blijven compact naast elkaar en zijn
     * gelijkmatig verdeeld.
     */
    .product-service-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 0 !important;
    }

    .product-service-grid > div {
        min-width: 0;
        min-height: 92px;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        padding: 10px 6px !important;
        border: 1px solid #e3e9e5;
        border-radius: 13px !important;
        text-align: center;
    }

    .product-service-grid i {
        font-size: 1rem;
    }

    .product-service-grid span {
        display: block;
        min-width: 0;
        color: #69756f;
        font-size: .55rem !important;
        line-height: 1.3;
    }

    .product-service-grid strong {
        display: block;
        margin-bottom: 3px;
        color: #24342d;
        font-size: .61rem !important;
        line-height: 1.2;
    }

    .related-section {
        margin-top: 28px !important;
    }

    .related-section .section-header {
        gap: 10px;
        margin-bottom: 13px;
    }

    .related-section .section-header h2 {
        font-size: 1rem;
    }

    .related-section .section-link {
        padding: 6px 9px;
        font-size: .62rem;
    }
}

@media (max-width: 370px) {
    .product-page-container {
        padding: 8px;
    }

    .product-detail-image {
        height: 215px;
        min-height: 215px !important;
    }

    .product-detail-heading,
    .product-detail-copy,
    .product-buy-card {
        padding-inline: 12px;
    }

    .product-detail-heading h1 {
        font-size: 1.25rem;
    }

    .product-purchase-row {
        grid-template-columns:
            76px
            minmax(0, 1fr) !important;
    }

    .product-purchase-row .btn {
        font-size: .69rem;
    }

    .product-service-grid > div {
        min-height: 86px;
        padding-inline: 4px !important;
    }

    .product-service-grid strong {
        font-size: .56rem !important;
    }

    .product-service-grid span {
        font-size: .5rem !important;
    }
}


/* =========================================================
   V17 – COMPACTERE MOBIELE PRODUCTPAGINA
   ========================================================= */

.product-mobile-content-grid {
    display: grid;
    gap: 18px;
}

@media (max-width: 640px) {
    /*
     * De foto blijft gelijk. De inhoud eronder wordt compacter,
     * zodat meer informatie tegelijk zichtbaar is.
     */
    .product-page {
        padding-bottom: 28px;
    }

    .product-page-container {
        padding: 9px;
    }

    .product-detail {
        gap: 10px !important;
    }

    .product-detail-info {
        gap: 9px !important;
    }

    .product-detail-heading {
        padding: 13px 11px;
        border-radius: 15px;
    }

    .product-sku {
        min-height: 24px;
        margin-bottom: 6px;
        padding: 4px 8px;
        font-size: .58rem;
    }

    .product-detail-heading h1 {
        font-size:
            clamp(
                1.12rem,
                5.5vw,
                1.45rem
            );
        line-height: 1.12;
    }

    .product-price-stock {
        gap: 5px 8px;
        margin-top: 8px;
    }

    .product-detail-price {
        font-size: 1.12rem !important;
    }

    .product-detail-price small {
        margin-top: 2px;
        font-size: .6rem !important;
    }

    .product-detail-heading .stock-label {
        padding: 5px 8px;
        font-size: .6rem;
    }

    /*
     * Op gewone smartphones staan productinformatie en bestellen
     * naast elkaar. Op heel smalle schermen vallen ze terug onder elkaar.
     */
    .product-mobile-content-grid {
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(128px, .82fr);
        gap: 8px;
        align-items: stretch;
    }

    .product-detail-copy,
    .product-buy-card {
        min-width: 0;
        height: 100%;
        padding: 12px 10px;
        border-radius: 15px;
    }

    .product-detail-copy h2 {
        margin-bottom: 7px;
        font-size: .79rem;
    }

    .product-detail-info
    .product-description {
        font-size: .66rem !important;
        line-height: 1.47 !important;

        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
    }

    .product-feature-list {
        gap: 5px;
        margin-top: 9px !important;
    }

    .product-feature-list li {
        min-height: 30px;
        gap: 6px;
        padding: 6px 7px;
        border-radius: 8px;
        font-size: .59rem;
        line-height: 1.3;
    }

    .product-feature-list i {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        font-size: .48rem;
    }

    .product-buy-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0;
    }

    .product-buy-heading {
        display: grid;
        gap: 4px;
        align-items: start;
        margin-bottom: 9px;
    }

    .product-buy-heading .content-eyebrow {
        font-size: .54rem;
    }

    .product-buy-heading strong {
        font-size: .7rem;
    }

    .product-buy-price {
        font-size: .85rem;
    }

    .product-purchase-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        align-items: stretch;
    }

    .quantity-picker {
        display: grid;
        grid-template-columns:
            auto
            minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        font-size: .58rem;
    }

    .quantity-picker input {
        height: 36px;
        padding: 0 6px;
        border-radius: 9px;
        font-size: .76rem;
    }

    .product-purchase-row .btn {
        width: 100%;
        min-height: 36px;
        padding: 7px 6px;
        border-radius: 9px;
        font-size: .62rem;
    }

    .product-purchase-row .btn i {
        font-size: .7rem;
    }

    .product-purchase-row .btn-ghost {
        grid-column: auto !important;
        min-height: 34px;
    }

    .product-service-grid {
        gap: 5px !important;
    }

    .product-service-grid > div {
        min-height: 73px;
        gap: 5px;
        padding: 7px 4px !important;
        border-radius: 10px !important;
    }

    .product-service-grid i {
        font-size: .82rem;
    }

    .product-service-grid strong {
        font-size: .52rem !important;
    }

    .product-service-grid span {
        font-size: .45rem !important;
    }

    .related-section {
        margin-top: 20px !important;
    }
}

@media (max-width: 390px) {
    /*
     * Op heel smalle telefoons blijft de inhoud leesbaar door
     * terug te schakelen naar één kolom.
     */
    .product-mobile-content-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-copy,
    .product-buy-card {
        height: auto;
    }

    .product-detail-info
    .product-description {
        -webkit-line-clamp: initial;
    }

    .product-purchase-row {
        grid-template-columns:
            74px
            minmax(0, 1fr) !important;
    }

    .quantity-picker {
        grid-template-columns: 1fr;
    }

    .product-purchase-row .btn-ghost {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   V18 – CONSUMENTVRIENDELIJKE MOBIELE PRODUCTPAGINA
   ========================================================= */

.mobile-product-buybar {
    display: none;
}

@media (max-width: 640px) {
    /*
     * Eén duidelijke kolom met normale tekstgrootte.
     * De foto blijft op dezelfde grootte.
     */
    .product-page {
        padding-bottom:
            calc(
                96px +
                env(safe-area-inset-bottom)
            );
    }

    .product-page-container {
        padding: 10px;
    }

    .product-detail {
        gap: 12px !important;
    }

    .product-detail-info {
        gap: 12px !important;
    }

    .product-detail-heading {
        padding: 17px 15px;
        border-radius: 18px;
    }

    .product-sku {
        min-height: 28px;
        margin-bottom: 8px;
        padding: 5px 10px;
        font-size: .72rem;
    }

    .product-detail-heading h1 {
        font-size:
            clamp(
                1.45rem,
                6.3vw,
                1.85rem
            ) !important;
        line-height: 1.15;
    }

    .product-price-stock {
        gap: 8px 12px;
        margin-top: 12px;
    }

    .product-detail-price {
        font-size: 1.38rem !important;
    }

    .product-detail-price small {
        margin-top: 4px;
        font-size: .72rem !important;
    }

    .product-detail-heading .stock-label {
        padding: 7px 11px;
        font-size: .74rem;
    }

    /*
     * Geen kleine zij-aan-zijblokken meer.
     * Bestellen staat eerst, informatie daarna.
     */
    .product-mobile-content-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .product-buy-card,
    .product-detail-copy {
        height: auto;
        padding: 17px 15px;
        border-radius: 18px;
    }

    .product-buy-card {
        order: 1;
        border: 1px solid #d6e3dc;
        background:
            radial-gradient(
                circle at top right,
                rgba(244, 123, 32, .10),
                transparent 36%
            ),
            linear-gradient(
                145deg,
                #f5faf7,
                #fffaf5
            );
        box-shadow:
            0 10px 28px
            rgba(12, 34, 55, .08);
    }

    .product-detail-copy {
        order: 2;
    }

    .product-buy-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 15px;
    }

    .product-buy-heading .content-eyebrow {
        font-size: .68rem;
    }

    .product-buy-heading strong {
        font-size: 1rem;
    }

    .product-buy-price {
        font-size: 1.18rem;
    }

    .product-purchase-row {
        grid-template-columns:
            94px
            minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: end;
    }

    .quantity-picker {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        font-size: .74rem;
    }

    .quantity-picker input {
        width: 100%;
        height: 48px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: .95rem;
    }

    .product-purchase-row .btn {
        min-height: 48px;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: .82rem;
    }

    .product-purchase-row .btn i {
        font-size: .88rem;
    }

    .product-purchase-row .btn-ghost {
        grid-column: 1 / -1 !important;
        min-height: 44px;
    }

    .product-detail-copy h2 {
        margin-bottom: 10px;
        font-size: 1.02rem;
    }

    .product-detail-info
    .product-description {
        display: block !important;
        overflow: visible !important;
        font-size: .86rem !important;
        line-height: 1.62 !important;
        -webkit-line-clamp: initial !important;
    }

    .product-feature-list {
        gap: 8px;
        margin-top: 14px !important;
    }

    .product-feature-list li {
        min-height: 40px;
        gap: 9px;
        padding: 10px 11px;
        border-radius: 11px;
        font-size: .76rem;
        line-height: 1.4;
    }

    .product-feature-list i {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
        font-size: .62rem;
    }

    .product-service-grid {
        gap: 7px !important;
    }

    .product-service-grid > div {
        min-height: 92px;
        gap: 7px;
        padding: 11px 6px !important;
        border-radius: 13px !important;
    }

    .product-service-grid i {
        font-size: 1rem;
    }

    .product-service-grid strong {
        font-size: .64rem !important;
    }

    .product-service-grid span {
        font-size: .56rem !important;
    }

    /*
     * Vaste koopbalk onderaan: prijs en één duidelijke actie.
     */
    .mobile-product-buybar {
        position: fixed;
        z-index: 1800;
        right: 0;
        bottom: 0;
        left: 0;

        display: grid;
        grid-template-columns:
            auto
            minmax(0, 1fr);
        gap: 13px;
        align-items: center;

        padding:
            11px
            13px
            max(
                11px,
                env(safe-area-inset-bottom)
            );

        border-top: 1px solid #dce4df;
        background: rgba(255, 255, 255, .97);

        box-shadow:
            0 -12px 30px
            rgba(12, 34, 55, .13);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-product-buybar-price {
        min-width: 84px;
        display: grid;
        gap: 2px;
    }

    .mobile-product-buybar-price span {
        color: #718078;
        font-size: .64rem;
    }

    .mobile-product-buybar-price strong {
        color: var(--dark-green);
        font-size: 1rem;
    }

    .mobile-product-buybar .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        border-radius: 999px;
        font-size: .82rem;
    }

    body.catalog-filter-open .mobile-product-buybar,
    body.menu-open .mobile-product-buybar {
        display: none !important;
    }
}

@media (max-width: 370px) {
    .product-buy-heading {
        align-items: flex-start;
    }

    .product-purchase-row {
        grid-template-columns: 82px minmax(0, 1fr) !important;
    }

    .product-detail-heading h1 {
        font-size: 1.35rem !important;
    }

    .product-detail-info
    .product-description {
        font-size: .82rem !important;
    }

    .mobile-product-buybar {
        gap: 9px;
        padding-inline: 10px;
    }

    .mobile-product-buybar-price {
        min-width: 76px;
    }
}


/* =========================================================
   V19 – PRODUCTPAGINA IN LOGISCHE CONSUMENTENVOLGORDE
   ========================================================= */

.product-detail-v19 {
    display: grid;
    grid-template-columns:
        minmax(350px, .9fr)
        minmax(0, 1.1fr);
    grid-template-areas:
        "media title"
        "media order"
        "media information"
        "media services";
    gap: 18px 42px;
    align-items: start;
}

.product-detail-v19 .product-detail-title {
    grid-area: title;
    min-width: 0;
}

.product-detail-v19 .product-detail-media {
    grid-area: media;
    min-width: 0;
}

.product-detail-v19 .product-order-card {
    grid-area: order;
}

.product-detail-v19 .product-detail-copy {
    grid-area: information;
}

.product-detail-v19 .product-service-grid {
    grid-area: services;
}

.product-detail-title {
    padding: 4px 0 2px;
}

.product-detail-title h1 {
    margin: 8px 0 0;
    color: var(--dark-blue);
    font-size:
        clamp(
            1.8rem,
            3.5vw,
            2.8rem
        );
    line-height: 1.08;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.product-detail-v19 .product-detail-image {
    position: relative;
    overflow: hidden;
}

.product-detail-favorite {
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 16px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    padding: 0;
    border: 1px solid rgba(23, 60, 47, .14);
    border-radius: 50%;

    background: rgba(255, 255, 255, .96);
    color: var(--dark-blue);

    font-size: 1.08rem;

    box-shadow:
        0 9px 24px
        rgba(12, 34, 55, .13);

    cursor: pointer;
    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease;
}

.product-detail-favorite:hover,
.product-detail-favorite:focus-visible {
    transform: translateY(-2px);
}

.product-detail-favorite.is-active {
    background: #fff1f1;
    color: #c73434;
}

.product-order-card {
    padding: 20px;
    border: 1px solid #dce5e0;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(244, 123, 32, .09),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #f5faf7,
            #fffaf5
        );
    box-shadow:
        0 10px 28px
        rgba(12, 34, 55, .07);
}

.product-order-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 18px;
}

.product-order-card .product-detail-price {
    margin: 0;
}

.product-order-card .stock-label {
    margin: 0;
    padding: 7px 11px;
    border-radius: 999px;
    background: #edf7f1;
}

.product-order-card
.stock-label.is-out-of-stock {
    background: #fff0f0;
}

.product-order-card .product-purchase-row {
    margin-top: 18px;
    grid-template-columns:
        96px
        minmax(190px, 1fr);
}

.product-order-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 13px 0 0;
    color: #69766f;
    font-size: .75rem;
    line-height: 1.45;
}

.product-order-note i {
    color: var(--dark-green);
}

.product-info-heading h2 {
    margin: 4px 0 0;
    color: var(--dark-blue);
    font-size: 1.1rem;
}

.mobile-product-buybar {
    display: none !important;
}

@media (max-width: 760px) {
    .product-page {
        padding-bottom: 38px !important;
    }

    .product-detail-v19 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "media"
            "order"
            "information"
            "services";
        gap: 12px;
    }

    /*
     * Titel staat als eerste en duidelijk boven de foto.
     */
    .product-detail-title {
        padding: 14px 13px 5px;
        text-align: center;
    }

    .product-detail-title .product-sku {
        display: inline-flex;
        justify-content: center;
        min-height: 27px;
        padding: 5px 9px;
        border-radius: 999px;
        background: #f0f5f2;
        font-size: .68rem;
    }

    .product-detail-title h1 {
        margin-top: 9px;
        font-size:
            clamp(
                1.42rem,
                6.4vw,
                1.82rem
            );
        line-height: 1.14;
    }

    /*
     * Foto behoudt de eerder gekozen afmetingen.
     */
    .product-detail-v19 .product-detail-image {
        width: 100%;
        height: 235px !important;
        min-height: 235px !important;
        border-radius: 19px;
    }

    .product-detail-v19
    .product-detail-image img {
        width: 100%;
        height: 100%;
        padding: 13px;
        object-fit: contain;
    }

    .product-detail-v19
    .product-detail-image > i:not(.fa-heart) {
        font-size:
            clamp(
                4.4rem,
                24vw,
                6.7rem
            );
    }

    .product-detail-favorite {
        top: 11px;
        right: 11px;
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .product-detail-v19
    .product-detail-badge {
        top: 11px !important;
        left: 11px !important;
        margin: 0 !important;
    }

    /*
     * Direct onder de foto staan prijs en voorraad.
     * Daaronder volgt de winkelwagenactie.
     */
    .product-order-card {
        padding: 16px 14px;
        border-radius: 18px;
    }

    .product-order-summary {
        gap: 9px 12px;
    }

    .product-order-card
    .product-detail-price {
        font-size: 1.42rem !important;
    }

    .product-order-card
    .product-detail-price small {
        display: block;
        margin-top: 3px;
        font-size: .7rem !important;
    }

    .product-order-card .stock-label {
        padding: 7px 10px;
        font-size: .72rem;
    }

    .product-order-card
    .product-purchase-row {
        grid-template-columns:
            90px
            minmax(0, 1fr) !important;
        gap: 9px !important;
        margin-top: 15px;
        align-items: end;
    }

    .product-order-card .quantity-picker {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        font-size: .72rem;
    }

    .product-order-card
    .quantity-picker input {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        text-align: center;
        font-size: .95rem;
    }

    .product-order-card
    .product-purchase-row .btn {
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: .82rem !important;
    }

    .product-order-note {
        margin-top: 11px;
        font-size: .68rem;
    }

    /*
     * Alle productinformatie staat pas na het bestellen en
     * gebruikt een normale leesbare tekstgrootte.
     */
    .product-detail-v19
    .product-detail-copy {
        margin: 0;
        padding: 17px 15px;
        border: 1px solid #e1e8e4;
        border-radius: 18px;
        background: #fff;
    }

    .product-info-heading h2 {
        font-size: 1.03rem;
    }

    .product-detail-v19
    .product-description {
        display: block !important;
        margin: 12px 0 0;
        overflow: visible !important;
        color: #4f5d56;
        font-size: .86rem !important;
        line-height: 1.62 !important;
        -webkit-line-clamp: initial !important;
    }

    .product-detail-v19
    .product-feature-list {
        gap: 8px;
        margin: 14px 0 0 !important;
    }

    .product-detail-v19
    .product-feature-list li {
        min-height: 40px;
        gap: 9px;
        padding: 10px 11px;
        border-radius: 11px;
        background: #f5f8f6;
        font-size: .76rem;
        line-height: 1.4;
    }

    .product-detail-v19
    .product-feature-list i {
        width: 21px;
        height: 21px;
        flex: 0 0 21px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #dff0e6;
        font-size: .62rem;
    }

    .product-detail-v19
    .product-service-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 0 !important;
    }

    .product-detail-v19
    .product-service-grid > div {
        min-height: 91px;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        padding: 10px 6px !important;
        border: 1px solid #e2e8e4;
        border-radius: 13px;
        text-align: center;
    }

    .product-detail-v19
    .product-service-grid strong {
        font-size: .63rem !important;
    }

    .product-detail-v19
    .product-service-grid span {
        font-size: .55rem !important;
    }
}

@media (max-width: 370px) {
    .product-detail-v19
    .product-detail-image {
        height: 215px !important;
        min-height: 215px !important;
    }

    .product-order-card
    .product-purchase-row {
        grid-template-columns:
            82px
            minmax(0, 1fr) !important;
    }

    .product-order-card
    .product-purchase-row .btn {
        font-size: .75rem !important;
    }
}


/* =========================================================
   V20 – CHECKOUTKEUZE EN VOORRAADRESERVERING
   ========================================================= */

.checkout-entry-container {
    max-width: 1160px;
}

.checkout-entry-heading {
    max-width: 760px;
    margin: 0 auto 22px;
    text-align: center;
}

.checkout-entry-heading h1 {
    margin: 5px 0 10px;
    color: var(--dark-blue);
    font-size: clamp(2rem, 5vw, 3rem);
}

.checkout-entry-heading p {
    margin: 0;
    color: #65736c;
    line-height: 1.65;
}

.checkout-reservation-banner,
.cart-reservation-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 15px 17px;
    border: 1px solid #d7e5dc;
    border-radius: 16px;
    background: #edf8f1;
}

.checkout-reservation-banner > i,
.cart-reservation-notice > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #fff;
    color: var(--dark-green);
    box-shadow:
        0 6px 16px rgba(23, 60, 47, .08);
}

.checkout-reservation-banner strong,
.checkout-reservation-banner span,
.cart-reservation-notice strong,
.cart-reservation-notice span {
    display: block;
}

.checkout-reservation-banner strong,
.cart-reservation-notice strong {
    color: var(--dark-blue);
    font-size: .9rem;
}

.checkout-reservation-banner span,
.cart-reservation-notice span {
    margin-top: 3px;
    color: #65736c;
    font-size: .76rem;
    line-height: 1.45;
}

.checkout-reservation-banner b,
.cart-reservation-notice b {
    color: var(--dark-green);
    font-variant-numeric: tabular-nums;
}

.checkout-entry-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.checkout-entry-card {
    min-width: 0;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 24px;
    border: 1px solid #dfe6e2;
    border-radius: 21px;
    background: #fff;
    box-shadow:
        0 10px 30px rgba(12, 34, 55, .06);
}

.checkout-entry-card.is-primary {
    border-color: rgba(46, 124, 87, .32);
    background:
        radial-gradient(
            circle at top right,
            rgba(244, 123, 32, .10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #f3faf6,
            #fff
        );
    box-shadow:
        0 14px 34px rgba(23, 60, 47, .11);
}

.checkout-entry-card > div {
    flex: 1 1 auto;
}

.checkout-entry-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #edf5f1;
    color: var(--dark-green);
    font-size: 1.2rem;
}

.checkout-entry-card.is-primary
.checkout-entry-icon {
    background: var(--dark-green);
    color: #fff;
}

.checkout-entry-kicker {
    color: #2e7c57;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.checkout-entry-card h2 {
    margin: 6px 0 9px;
    color: var(--dark-blue);
    font-size: 1.25rem;
}

.checkout-entry-card p {
    margin: 0;
    color: #65736c;
    font-size: .83rem;
    line-height: 1.62;
}

.checkout-entry-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 16px 19px;
    border: 1px solid #e0e7e3;
    border-radius: 16px;
    background: #fafbf9;
}

.checkout-entry-summary > div {
    display: grid;
    gap: 3px;
}

.checkout-entry-summary > div:last-child {
    text-align: right;
}

.checkout-entry-summary span {
    color: #6c7972;
    font-size: .75rem;
}

.checkout-entry-summary strong {
    color: var(--dark-blue);
}

.basket-image img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
}

@media (max-width: 850px) {
    .checkout-entry-grid {
        grid-template-columns: 1fr;
    }

    .checkout-entry-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .checkout-entry-container {
        padding-inline: 12px;
    }

    .checkout-entry-heading {
        margin-bottom: 17px;
        text-align: left;
    }

    .checkout-entry-heading h1 {
        font-size: 1.75rem;
    }

    .checkout-reservation-banner,
    .cart-reservation-notice {
        align-items: flex-start;
        padding: 13px;
    }

    .checkout-entry-card {
        gap: 15px;
        padding: 19px 17px;
        border-radius: 18px;
    }

    .checkout-entry-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .checkout-entry-summary {
        padding: 14px;
    }
}


/* =========================================================
   V22 – TIMER ALLEEN PER PRODUCT BIJ LAGE VOORRAAD
   ========================================================= */

.basket-product-reservation {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding: 7px 9px;
    border: 1px solid #f0d9a8;
    border-radius: 10px;
    background: #fff8e8;
    color: #70541c;
    font-size: .7rem;
    line-height: 1.35;
}

.basket-product-reservation[hidden] {
    display: none !important;
}

.basket-product-reservation i {
    color: #d88b14;
}

.basket-product-reservation b {
    color: #9a5c00;
    font-variant-numeric: tabular-nums;
}

.checkout-low-stock-list {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.checkout-low-stock-list > span {
    color: #65736c;
    font-size: .76rem;
    line-height: 1.45;
}

.checkout-low-stock-list > span[hidden] {
    display: none !important;
}

.checkout-low-stock-list b {
    color: var(--dark-green);
    font-variant-numeric: tabular-nums;
}

[data-reservation-group][hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .basket-product-reservation {
        font-size: .65rem;
    }

    .checkout-low-stock-list > span {
        font-size: .72rem;
    }
}


/* =========================================================
   V27 – AANBEVOLEN, POPULAIR EN AANBIEDINGEN
   ========================================================= */

.product-tag--recommended {
    background: #2f8f59;
    color: #fff;
}

.product-tag--popular {
    background: #f2c94c;
    color: #3d3300;
}

.product-tag--sale {
    background: #d93636;
    color: #fff;
}

.product-old-price {
    color: #8c9791;
    font-size: .74rem;
    font-weight: 700;
    text-decoration: line-through;
}

.section-kicker {
    display: block;
    margin-bottom: 3px;
    color: #718078;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .035em;
}

.product-section--recommended {
    --section-accent: #2f8f59;
}

.product-section--popular {
    --section-accent: #d2a900;
}

.product-section--offers {
    --section-accent: #d93636;
}

.product-section .section-header h2 {
    position: relative;
    width: fit-content;
}

.product-section .section-header h2::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--section-accent);
}


/* =========================================================
   V28 – MODERNE PRODUCTLABELS
   ========================================================= */

.product-tag {
    position: absolute;
    z-index: 6;
    top: 10px;
    left: 10px;
    width: max-content;
    max-width: calc(100% - 58px);
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow:
        0 8px 22px rgba(12, 34, 55, .15),
        inset 0 1px 0 rgba(255, 255, 255, .66);
    font-size: .66rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateZ(0);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.product-card:hover .product-tag {
    transform: translateY(-1px);
    box-shadow:
        0 11px 28px rgba(12, 34, 55, .19),
        inset 0 1px 0 rgba(255, 255, 255, .72);
}

.product-tag::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, .24),
            transparent 42%
        );
    pointer-events: none;
}

.product-tag__icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .23);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .20);
    font-size: .59rem;
}

.product-tag__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-tag--recommended {
    border-color: rgba(157, 229, 186, .72);
    background:
        linear-gradient(
            135deg,
            #1f8f55,
            #35b76f
        );
    color: #fff;
    box-shadow:
        0 8px 22px rgba(31, 143, 85, .25),
        inset 0 1px 0 rgba(255, 255, 255, .23);
}

.product-tag--popular {
    border-color: rgba(255, 231, 137, .82);
    background:
        linear-gradient(
            135deg,
            #f4c542,
            #ffd866
        );
    color: #4b3700;
    box-shadow:
        0 8px 22px rgba(205, 157, 17, .24),
        inset 0 1px 0 rgba(255, 255, 255, .45);
}

.product-tag--popular .product-tag__icon {
    background: rgba(255, 255, 255, .42);
    color: #9e5700;
}

.product-tag--sale {
    border-color: rgba(255, 177, 177, .76);
    background:
        linear-gradient(
            135deg,
            #d9293f,
            #f24e55
        );
    color: #fff;
    box-shadow:
        0 8px 22px rgba(217, 41, 63, .27),
        inset 0 1px 0 rgba(255, 255, 255, .23);
}

@media (max-width: 640px) {
    .product-tag {
        top: 7px;
        left: 7px;
        min-height: 25px;
        max-width: calc(100% - 39px);
        gap: 5px;
        padding: 3px 8px 3px 4px !important;
        border-radius: 999px;
        font-size: .54rem !important;
        line-height: 1 !important;
        letter-spacing: .015em;
    }

    .product-tag__icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
        font-size: .49rem;
    }
}

@media (max-width: 370px) {
    .product-tag {
        max-width: calc(100% - 34px);
        padding-right: 6px !important;
        font-size: .49rem !important;
    }

    .product-tag__icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        font-size: .44rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-tag {
        transition: none;
    }

    .product-card:hover .product-tag {
        transform: none;
    }
}