/* Vanduifhuizen Terrazzo — craftsman theme.
   Every colour below resolves to a merchant setting from theme.json; the layout uses
   var(--container-width) and var(--border-radius) so the merchant owns the shape too. */

* {
    box-sizing: border-box;
}

body {
    line-height: 1.7;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
}

h1, h2, h3, h4 {
    color: var(--heading-color);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 0;
}

h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
}

h3 {
    font-size: 1.2rem;
}

img {
    max-width: 100%;
}

a {
    color: var(--link-color);
}

a:hover, a:active, a:focus {
    text-decoration: var(--link-text-decoration);
    color: var(--link-active-color);
}

.btn:hover, .btn:active, .btn:focus {
    text-decoration: none !important;
}

header {
    background: var(--header-background-color);
    padding: 1.25rem 0;
    width: 100%;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

/* A landing page whose hero carries a photo lets the header float on top of it. */
body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
}

body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header .brand .site-name,
body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header .nav-link > a,
body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header .nav-icon svg,
body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header .nav-icon .sitepack-shopping-cart-trigger svg {
    color: var(--overlay-text-color);
}

body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header .nav-toggle span {
    background-color: var(--overlay-text-color);
}

/* The live-search (and any) header icon is an <img> of a dark SVG, so it can't be recoloured
   with `color`/`fill`. Over the photo hero it must read as light — turn it white with a
   filter. On regular (light) headers the icon keeps its dark original. */
body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header .nav-icon img {
    filter: brightness(0) invert(1);
}

body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header .nav-link > a:hover {
    color: var(--accent-color);
    background-color: transparent;
}

header nav {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

nav ul li a.btn-primary:hover, nav ul li a.btn-primary:focus, nav ul li a.btn-primary:active {
    filter: brightness(90%);
    color: var(--accent-text-color);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.brand {
    flex-shrink: 0;
    margin-right: auto;
}

.brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.5rem;
}

.brand img {
    height: 40px;
    width: auto;
}

.brand .site-name {
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--header-text-color);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    height: 3px;
    width: 24px;
    margin: 2px 0;
    background-color: var(--header-text-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-link {
    position: relative;
}

.nav-link a {
    text-decoration: none;
    color: var(--header-text-color);
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: var(--border-radius);
}

.nav-link a:hover {
    color: var(--accent-color);
    background-color: var(--surface-color);
}

/* The current page keeps a thin accent rule under its label. */
.nav-link.active > a,
.nav-link > a[aria-current] {
    box-shadow: inset 0 -2px 0 var(--accent-color);
}

/* The call to action is whichever menu item the merchant marks as a "button" (SitePack
   renders it as a.btn-primary). It is a solid gold button, the way the design shows the
   "request a quote" action in the navigation — not tied to a fixed position. */
header nav > ul > li.nav-link > a.btn-primary {
    width: auto;
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    padding: 0.85rem 1.6rem;
    box-shadow: none;
}

header nav > ul > li.nav-link > a.btn-primary:hover {
    filter: brightness(92%);
    color: var(--accent-text-color);
    background-color: var(--accent-color);
}

body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header nav > ul > li.nav-link > a.btn-primary {
    color: var(--accent-text-color);
    background-color: var(--accent-color);
}

.nav-icon .sitepack-shopping-cart-trigger svg {
    color: var(--header-text-color);
}

header .nav-search-icon {
    width: 50px;

    @media (max-width: 768px) {
        width: 30px;
    }
}

header .nav-shopping-cart {
    width: 50px;
}

/* Dropdown Styles */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-background-color);
    /* Grow to the widest item (labels are nowrap) instead of clipping at min-width. */
    width: max-content;
    min-width: 180px;
    max-width: 340px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    z-index: 1001;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu li a {
    padding: 0.5rem 1rem;
    color: var(--header-text-color);
    display: block;
    font-weight: 400;
    border-radius: 0;
}

.dropdown-menu li a:hover {
    background-color: var(--surface-color);
    color: var(--accent-color);
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

main {
    padding: 0;
    margin: 0 auto;
    background-color: var(--content-background-color);
}

/* Shared content wrapper: keeps text/blocks aligned to the same width and
   gutter as the header and grids, on every template. */
.container-element {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* The platform bundle caps every direct child of <main> to the container width and centres
   it (a `main > *` rule). The theme's full-bleed bands must instead span the whole viewport;
   their inner .container-element re-applies the 1320px content width. Contained sections and
   .split intentionally keep the platform cap, so they are not listed here. */
main > .hero,
main > .section--alt,
main > .band,
main > .quote-band,
main > .page-header {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Page-builder ("editor") pages built from content elements must line up with the rest of
   the theme. The platform ships the hero element with a 1188px inner container; normalise it
   to the theme container width so the hero text shares the same left gutter as every content
   block below it. Other element containers (.container-element, .container, cta-banner…)
   already use the theme width. */
.element-hero-inner {
    max-width: var(--container-width);
}

/* The footer is composed of site-configured elements (sitepack_footer()); its background,
   spacing and colours come from those elements, so the theme intentionally adds no footer
   styling here (avoids duplicate/conflicting rules such as a double border-top). */

#copyright {
    margin-top: 0;
    padding: 1.5rem;
    font-size: 0.85rem;
    color: var(--copyright-text-color);
    background-color: var(--copyright-background-color);
}

#copyright p {
    margin: 0;
    line-height: 1.6;
}

#copyright a {
    color: var(--copyright-text-color);
    text-decoration: none;
    transition: color 0.2s;
}

#copyright a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.sitemap section {
    max-width: var(--container-width);
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}

.text-center {
    text-align: center;
}

.sitemap h1 {
    max-width: var(--container-width);
    margin: 0 auto 1rem;
    padding: 0 1.5rem;
}

.sitemap h2 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.sitemap ul {
    list-style: none;
    padding-left: 0;
}

.sitemap li {
    margin-bottom: 0.5rem;
}

.sitemap a {
    text-decoration: none;
    color: var(--link-color);
}

.sitemap a:hover {
    text-decoration: var(--link-text-decoration);
    color: var(--link-active-color);
}

.product-grid, .products-wrapper, .category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: var(--container-width);
    margin: 1rem auto;
    padding: 0 1.5rem;
}

/* Category Layout Sidebar + Grid */
.category-main-layout {
    display: flex;
    gap: 2rem;
    max-width: var(--container-width);
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.category-sidebar {
    flex: 0 0 280px;
}

.category-products-content {
    flex: 1;
}

/* Ensure product grid inside content doesn't double margin/max-width */
.category-products-content .products-wrapper {
    margin: 0;
    max-width: none;
    padding: 0;
}

@media (max-width: 992px) {
    .category-main-layout {
        flex-direction: column;
    }

    .category-sidebar {
        flex: none;
        width: 100%;
    }

    .product-grid, .products-wrapper, .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .product-grid, .products-wrapper, .category-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    text-align: left;
    height: 100%;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.product-card:hover {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    transform: translateY(-2px);
}

.product-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-image {
    margin-bottom: 1rem;
    text-align: center;
}

.product-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.product-information {
    padding: 10px;
}

.product-title .product-brand {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--accent-color);
    line-height: 18px;
    height: 18px;
    display: block;
    width: 100%;
}

.product-title h3 {
    margin: 7px 0 0 0;
    font-size: 14px;
    color: var(--text-color);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    margin: 0.5rem 0 1rem;
    font-weight: 400;
}

.product-price .old-price {
    text-decoration: line-through;
    color: var(--subtle-text-color);
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.product-rating {
    margin: 10px 0;
}

.product-rating svg {
    height: 16px;
    width: 16px;
    margin-right: -4px;
    fill: var(--rating-color);
}

.product-rating span.review-count {
    font-size: 12px;
    margin-top: -5px;
}

.product-stock-info {
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0.5rem 0;
}

.product-stock-info.in-stock {
    color: var(--secondary-color);
}

.product-stock-info.backorder {
    color: var(--stock-warning-color);
}

.product-stock-info.out-of-stock {
    color: var(--stock-error-color);
}

.product-cta {
    margin-top: auto;
}

.btn-primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border: none;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    filter: brightness(90%);
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--disabled-color);
    cursor: not-allowed;
    filter: none;
}

.blog-posts, .blog-post-summary, .blog-post {
    background-color: var(--blog-background-color);
}

.category-description {
    background-color: var(--category-background-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.category-sub-categories {
    margin-bottom: 2rem;
}

.category-sub-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .category-sub-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .category-sub-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* Category Card - Shopify Style */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--category-background-color);
    transition: box-shadow 0.3s ease;
    height: 100%;
    max-height: 350px;
    border: 1px solid var(--border-color);
}

.category-card:hover {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--shadow-color) 8%, transparent);
}

.category-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.category-card__link:hover, .category-card__link:focus {
    text-decoration: none !important;
}

.category-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--image-background-color);
    flex: 1;
    max-height: 250px; /* Limit the image section height to leave room for the footer */
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-card__image {
    width: 100%;
    height: 100%;
}

.category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the full image fits within the section */
    padding: 10px; /* Add some padding to see the full image clearly */
    transition: transform 0.5s ease;
}

.category-card:hover .category-card__image img {
    transform: scale(1.05);
}

.category-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
    var(--image-background-color) 25%,
    var(--surface-color) 50%,
    var(--image-background-color) 75%);
    background-size: 200% 200%;
    animation: placeholder-shimmer 2s infinite linear;
}

@keyframes placeholder-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.category-card__info {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-background-color);
    flex: 0 0 auto; /* Ensure info area has a consistent height and doesn't shrink or grow disproportionately */
    margin-top: 0;
}

.category-card__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    flex-grow: 1;
}

.category-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--image-background-color);
    color: var(--text-color);
    transition: all 0.3s ease;
    margin-left: 10px;
    flex-shrink: 0;
}

.category-card__arrow svg {
    height: 20px;
}

.category-card:hover .category-card__arrow {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    transform: translateX(4px);
    text-decoration: none !important;
}

.label, .badge {
    background-color: var(--label-background-color);
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--secondary-color-text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.topbar {
    background-color: var(--header-topbar-color);
    color: var(--header-topbar-text-color);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.topbar a {
    color: var(--header-topbar-text-color);
    text-decoration: none;
}


.product-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    max-width: var(--container-width);
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.product-image-item img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    object-fit: cover;
}

.product-info-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.product-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    flex: 1;
}

.product-price-section {
    text-align: right;
    white-space: nowrap;
}

.product-price-section .price,
.product-price-section .promo-price {
    font-size: 1.25rem;
    font-weight: 400;
    display: block;
}

.product-price-section .advised-price {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    text-decoration: line-through;
    font-weight: normal;
    display: block;
}

.product-price-section .promo-price {
    color: var(--promo-price-color);
}

.product-meta {
    font-size: 0.9rem;
    color: var(--muted-text-color);
}

.product-short-description {
    color: var(--muted-text-color);
}

.product-actions {
    margin-top: 0.5rem;
}

.product-add-to-cart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
}

/* Quantity + add-to-cart on one aligned row, beneath the variant options. */
.product-buy {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

.product-add-to-cart .btn-primary {
    flex: 1;
    padding: 1rem;
    font-size: 1.1rem;
}

.product-accordions {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.product-accordion {
    border-bottom: 1px solid var(--border-color);
}

.accordion-header {
    padding: 1rem 0;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-icon::before {
    content: "+";
    font-size: 1.25rem;
}

.product-accordion[open] .accordion-icon::before {
    content: "−";
}

.accordion-content {
    padding: 0 0 1.5rem 0;
    line-height: 1.6;
}

.product-facets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.facet-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.facet-label {
    font-weight: 600;
    color: var(--muted-text-color);
}

.product-recommendations {
    margin-top: 4rem;
}

.product-recommendations h2 {
    margin-bottom: 2rem;
    text-align: center;
}

.product-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .product-recommendations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-image-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        width: 100%;
        cursor: grab;
        user-select: none;
    }

    .product-image-grid.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
        cursor: grabbing;
    }

    .product-image-grid::-webkit-scrollbar {
        display: none;
    }

    .product-image-item {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .product-image-item img {
        border-radius: 0;
        border: none;
    }

    .product-header {
        flex-direction: column;
    }

    .product-price-section {
        text-align: left;
    }

    .product-recommendations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .product-recommendations-grid {
        grid-template-columns: 1fr;
    }
}

/* Form Controls */
label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--text-color);
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

textarea {
    resize: vertical;
}

.form-group {
    margin-bottom: 1rem;
}

.product-quantity {
    display: flex;
    width: 90px;
}

.product-quantity input[type="number"] {
    width: 100%;
    text-align: center;
}

/* Cart Styles */
.cart-form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.cart-form th, .cart-form td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--input-border-color);
}

.cart-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart-item-info img {
    max-width: 50px;
    height: auto;
}

.cart-summary {
    text-align: right;
    margin-top: 2rem;
}

.cart-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.checkout-button {
    background: var(--accent-color);
    color: var(--accent-text-color);
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    display: inline-block;
}

.checkout-button:hover {
    background-color: var(--link-active-color);
}

/* Breadcrumbs */
#breadcrumbs {
    max-width: var(--container-width);
    margin: 1rem auto;
    padding: 0 1.5rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.9rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin: 0 0.5rem;
    color: var(--subtle-text-color);
}

.breadcrumb li a {
    color: var(--link-color);
    text-decoration: none;
}

.breadcrumb li a:hover {
    text-decoration: var(--link-text-decoration);
    color: var(--link-active-color);
}

.breadcrumb li span {
    color: var(--muted-text-color);
}

.breadcrumb li a span {
    color: inherit;
}

/* Translations Modal */
#translationsModal .modal-body-translations {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

#translationsModal .modal-body-translations a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--header-text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: background-color 0.2s, border-color 0.2s;
}

#translationsModal .modal-body-translations a:hover {
    background-color: var(--surface-color);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

#translationsModal .navigation-flag {
    width: 24px;
    height: auto;
    margin-right: 1rem;
    border-radius: 2px;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

#translationsModal .language-text {
    font-weight: 500;
}

/* Modal Basic Styling */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--shadow-color) 50%, transparent);
    z-index: 2000;
}

.modal.fade.in, .modal.show {
    display: block;
}

.modal-dialog {
    margin: 2rem auto;
    max-width: 500px;
    background: var(--card-background-color);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--shadow-color) 30%, transparent);
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header .close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-title {
    margin: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.btn-default {
    background-color: var(--surface-color);
    border: 1px solid var(--input-border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
}

/* Cookie Bar */
#cookiebar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--card-background-color);
    padding: 15px 25px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 15%, transparent);
    z-index: 9999;
    max-width: 400px;
}

#cookiebar p {
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-align: left;
}

.btn-success {
    background-color: var(--success-color);
    color: var(--success-text-color);
    border: none;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.btn-success:hover {
    filter: brightness(90%);
}


/* Icons next to hamburger on mobile; inline on desktop */
.nav-icon {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    /* Show hamburger; keep icons visible */
    .nav-toggle {
        display: flex;
        width: 34px;
        height: 34px;
        justify-content: center;
        align-items: center;
        margin-left: 0;
        padding: 6px;
    }

    .nav-toggle span {
        width: 22px;
        height: 2px;
        margin: 2px 0;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav-icon {
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    /* Reorder on mobile: Brand (stays 0), Search, Cart, Toggle */
    #nav-search {
        margin-left: auto;
        order: 10;
    }

    #nav-cart {
        order: 11;
    }

    #nav-toggle {
        order: 12;
    }

    /* Hide menu links until toggled */
    .nav-link {
        display: none;
        order: 20; /* Ensure links appear after the top bar icons when opened */
    }

    nav ul.menu-open .nav-link {
        display: block;
        width: 100%;
    }

    nav ul.menu-open .nav-link a {
        display: block;
        padding: 1rem;
        width: 100%;
    }

    /* Dropdown behavior inside the list */
    .dropdown-menu {
        position: static;
        display: none;
        /* Full width in the stacked mobile menu — reset the content-width caps used on desktop. */
        width: 100%;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        border: none;
        padding: 0 0 0 1.5rem;
        background: var(--surface-color);
    }

    /* Submenu links fill the menu width, like the top-level items. */
    .dropdown-menu li,
    .dropdown-menu li a {
        display: block;
        width: 100%;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown.active:hover .dropdown-menu {
        display: block;
    }

    /* Visual grouping for stacked links */
    nav ul.menu-open .nav-link {
        border-bottom: 1px solid var(--border-color);
    }

    nav ul.menu-open .nav-link:last-child {
        border-bottom: none;
    }
}


/* =========================
   Category Filters
   ========================= */
.category-filters {
    margin: 0;
    padding: 0;
}

.category-filters-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Sidebar toggle button spacing */
#sidebar-filter-toggle {
    margin: 0 0 1rem 0;
    display: none;
}

@media (max-width: 992px) {
    .category-filters-title {
        display: none;
    }

    #sidebar-filter-toggle {
        display: block;
    }

    #sidebar-category-filters {
        display: none;
    }

    #sidebar-category-filters.show {
        display: block;
    }
}

/* Basic .btn helpers to support provided markup */
.btn {
    display: inline-block;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-lg {
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
}

/* Filter card */
.products-filter {
    background: var(--card-background-color);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}

.products-filter h4 {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 1rem;
}

/* Collapsible header link */
.filter-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
}

.filter-link:hover,
.filter-link:focus {
    text-decoration: none;
    color: var(--accent-color);
}

.filter-icon {
    margin-left: .5rem;
    display: inline-flex;
    align-items: center;
}

/* Show correct icon depending on collapse state (Bootstrap-like) */
.filter-link .if-opened {
    display: none;
}

.filter-link .if-closed {
    display: inline-flex;
}

.filter-link:not(.collapsed) .if-opened {
    display: inline-flex;
}

.filter-link:not(.collapsed) .if-closed {
    display: none;
}

/* Collapse support (no JS library required for simple default state) */
.collapse {
    display: none;
}

.collapse.in, .collapse.show {
    display: block;
}

/* Filter options list */
.category-filter-options {
    list-style: none;
    padding: 0.25rem 0 0.75rem 0;
    margin: 0;
}

.category-filter-options li {
    margin: 0.25rem 0;
}

.category-filter-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .35rem;
    border-radius: var(--border-radius);
    color: inherit;
    text-decoration: none;
}

.category-filter-link:hover,
.category-filter-link:focus {
    background: var(--surface-color);
    color: var(--accent-color);
    text-decoration: none;
}

/* Nesting levels */
.category-filter-options .nested-level-0 {
    padding-left: 0;
}

.category-filter-options .nested-level-1 {
    padding-left: 0.75rem;
}

.category-filter-options .nested-level-2 {
    padding-left: 1.5rem;
}

.category-filter-options .nested-level-3 {
    padding-left: 2.25rem;
}

/* Optional: compact icon in links */
.category-filter-link i {
    color: var(--subtle-text-color);
}

.category-filter-link:hover i {
    color: var(--accent-color);
}

/* The account page is rendered by {{ sitepack_account() }}, which ships base styling for
   the canonical .account* classes. Override those classes here to restyle it. */

/* =========================
   Editorial building blocks (Van Duifhuizen Terrazzo homepage)
   ========================= */
.section {
    padding: clamp(4.5rem, 9vw, 8.75rem) 0;
}

.section--tight {
    padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.section--alt {
    background-color: var(--alt-background-color);
    color: var(--alt-text-color);
}

.section--dark {
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--dark-text-color);
}

/* Section heading group: eyebrow + title. Centre variant for full-width sections. */
.section-head {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-head--center {
    text-align: center;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    margin: 0;
}

/* Small uppercase label above a heading. */
.eyebrow {
    margin: 0 0 1.15rem;
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    line-height: 1.5;
}

.eyebrow--on-image {
    color: var(--accent-color);
}

.rich-text p {
    margin: 0 0 1.15rem;
    line-height: 1.7;
}

.rich-text > :last-child {
    margin-bottom: 0;
}

.rich-text--lead {
    font-size: 1.05rem;
    color: var(--muted-text-color);
}

/* Large serif intro paragraph. Uses the merchant's heading font (not the body font) so it
   reads as a display lead, matching the design. */
.lead-text {
    max-width: 52rem;
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: clamp(1.5rem, 3.2vw, 2.35rem);
    line-height: 1.3;
    color: var(--heading-color);
}

.landing-intro__text {
    max-width: var(--container-width);
}

/* Icons are inline SVG spans that inherit the surrounding colour. */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon svg {
    width: 1.35em;
    height: 1.35em;
    display: block;
}

/* =========================
   Buttons: squared, uppercase, letter-spaced
   ========================= */
.btn-solid,
.btn-accent,
.btn-ghost,
.btn-outline {
    display: inline-block;
    padding: 1rem 1.9rem;
    border-radius: var(--border-radius);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-solid {
    background-color: var(--cta-background-color);
    color: var(--cta-text-color);
    border: 1px solid var(--cta-background-color);
}

.btn-solid:hover,
.btn-solid:focus,
.btn-solid:active {
    background-color: color-mix(in srgb, var(--cta-background-color) 82%, var(--shadow-color));
    border-color: color-mix(in srgb, var(--cta-background-color) 82%, var(--shadow-color));
    color: var(--cta-text-color);
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border: 1px solid var(--accent-color);
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
    background-color: color-mix(in srgb, var(--accent-color) 85%, var(--shadow-color));
    border-color: color-mix(in srgb, var(--accent-color) 85%, var(--shadow-color));
    color: var(--accent-text-color);
}

.btn-ghost {
    background-color: transparent;
    color: var(--overlay-text-color);
    border: 1px solid color-mix(in srgb, var(--overlay-text-color) 70%, transparent);
}

.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active {
    background-color: var(--overlay-text-color);
    color: var(--cta-background-color);
}

.btn-outline {
    background-color: transparent;
    color: var(--heading-color);
    border: 1px solid var(--accent-color);
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text-color);
}

/* =========================
   Hero
   ========================= */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(760px, 90vh);
    padding: 9rem 0 clamp(3rem, 7vw, 6rem);
    overflow: hidden;
    background-color: var(--dark-background-color);
    color: var(--overlay-text-color);
}

.hero__media {
    position: absolute;
    inset: 0;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--shadow-color) 18%, transparent) 0%,
            color-mix(in srgb, var(--shadow-color) 18%, transparent) 40%,
            color-mix(in srgb, var(--shadow-color) 72%, transparent) 100%
    );
}

.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--container-width);
}

.hero__title {
    margin: 0 0 1.4rem;
    max-width: 15ch;
    color: var(--overlay-text-color);
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.04;
}

.hero__text {
    margin: 0 0 2.4rem;
    max-width: 52ch;
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--overlay-text-color) 90%, transparent);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* =========================
   Services grid
   ========================= */
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.service-card {
    display: flex;
    flex-direction: column;
}

.service-card__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.service-card__link:hover,
.service-card__link:focus {
    text-decoration: none;
    color: inherit;
}

.service-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--image-background-color);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.service-card:hover .service-card__media img {
    transform: scale(1.05);
}

.service-card__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--image-background-color);
}

.service-card__title {
    margin: 1.35rem 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--heading-color);
    line-height: 1.15;
}

.service-card__subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    line-height: 1.5;
}

/* =========================
   Split section (photo + text)
   ========================= */
.split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    max-width: var(--container-width);
    margin: 0 auto;
    padding: clamp(4.5rem, 9vw, 8.75rem) 1.5rem;
    background-color: var(--background-color);
}

/* Reversed: photo on the right, text on the left. */
.split--reverse {
    grid-template-columns: 0.85fr 1.15fr;
}

.split--reverse .split__media {
    order: 2;
}

.split__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--image-background-color);
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.split--reverse .split__media {
    aspect-ratio: 5 / 4;
}

/* Uniform landscape photo on both orientations (used by the services template). */
.split--wide .split__media,
.split--wide.split--reverse .split__media {
    aspect-ratio: 4 / 3;
}

.split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.split__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--image-background-color);
}

.split__content {
    display: flex;
    align-items: center;
}

.split__inner {
    max-width: 42rem;
}

.split__inner .rich-text {
    color: var(--text-color);
    margin-bottom: 2rem;
    max-width: 46ch;
    font-size: 1.0625rem;
}

.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.checklist__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.checklist__item .icon {
    color: var(--accent-color);
}

/* Small rotated-square (diamond) bullet, matching the brand marker used elsewhere. */
.checklist__mark {
    flex: none;
    width: 9px;
    height: 9px;
    border: 1px solid var(--accent-color);
    transform: rotate(45deg);
}

/* =========================
   Full width photo band (the craft)
   ========================= */
.band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(660px, 82vh);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background-color: var(--dark-background-color);
    color: var(--overlay-text-color);
    overflow: hidden;
}

.band__media {
    position: absolute;
    inset: 0;
}

.band__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--shadow-color) 78%, transparent) 0%,
            color-mix(in srgb, var(--shadow-color) 50%, transparent) 50%,
            color-mix(in srgb, var(--shadow-color) 30%, transparent) 100%
    );
}

.band__inner {
    position: relative;
    width: 100%;
    max-width: var(--container-width);
}

.band__title {
    color: var(--overlay-text-color);
    margin: 0 0 1.4rem;
    max-width: 18ch;
    font-size: clamp(2.1rem, 4.6vw, 3.25rem);
}

.band .rich-text {
    max-width: 52ch;
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--overlay-text-color) 90%, transparent);
}

/* =========================
   Project gallery + filters
   ========================= */
.project-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.project-filters__item {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-color);
    cursor: default;
    transition: color 0.2s ease;
}

.project-filters__item:hover {
    color: var(--accent-color);
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--image-background-color);
    border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--image-background-color);
}

.gallery-item__caption {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    padding: 0.45rem 0.75rem;
    background-color: color-mix(in srgb, var(--dark-background-color) 55%, transparent);
    border: 1px solid var(--accent-color);
    color: var(--overlay-text-color);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-projects__cta {
    margin-top: clamp(2.5rem, 5vw, 3.25rem);
}

/* =========================
   Reasons row
   ========================= */
.reason-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.75rem 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.reason {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* Line Awesome icon (provided by the platform) instead of a plain marker. */
.reason__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.reason__icon i {
    font-size: 2rem;
    line-height: 1;
}

.reason__label {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-color);
    max-width: 16ch;
}

/* =========================
   Quote band
   ========================= */
.quote-band {
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
    padding: clamp(5rem, 11vw, 10rem) 0;
    text-align: center;
}

.quote-band .container-element {
    max-width: 60rem;
}

.quote-band__mark {
    display: block;
    color: var(--accent-color);
    font-size: 5rem;
    line-height: 0.6;
    margin-bottom: 0.9rem;
}

.quote-band__text {
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: clamp(1.5rem, 3.6vw, 2.375rem);
    font-style: italic;
    line-height: 1.34;
}

/* =========================
   Contact block
   ========================= */
.contact-block__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
}

.contact-block__intro .rich-text {
    color: var(--text-color);
    margin-top: 1.5rem;
    max-width: 44ch;
    font-size: 1.0625rem;
}

.contact-card {
    background-color: var(--alt-background-color);
    color: var(--alt-text-color);
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.contact-card__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.contact-card__line {
    margin: 1.1rem 0 0;
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--heading-color);
}

.contact-card__rule {
    height: 1px;
    background-color: color-mix(in srgb, var(--heading-color) 14%, transparent);
    margin: 1.6rem 0;
}

.contact-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-card__list li {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    font-size: 0.95rem;
    line-height: 2;
    color: var(--muted-text-color);
}

.contact-card__key {
    flex: 0 0 5.5rem;
    color: var(--muted-text-color);
}

.contact-card__list a {
    /* A long address drops below its label instead of stretching the card. */
    max-width: 100%;
    overflow-wrap: break-word;
    color: var(--heading-color);
    text-decoration: none;
}

.contact-card__list a:hover {
    color: var(--accent-color);
}

.contact-card__cta {
    margin-top: 1.75rem;
}

/* =========================
   Page header (non-homepage templates)
   ========================= */
.page-header {
    background-color: var(--alt-background-color);
    color: var(--alt-text-color);
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.page-header__title {
    margin: 0;
}

.page-header__text {
    margin: 1rem auto 0;
    max-width: 52ch;
    color: var(--muted-text-color);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1100px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .hero {
        min-height: 34rem;
        padding: 7.5rem 0 3.5rem;
    }

    .split,
    .split--reverse {
        grid-template-columns: 1fr;
    }

    .split--reverse .split__media {
        order: 0;
    }

    .split__media,
    .split--reverse .split__media {
        aspect-ratio: 4 / 3;
    }

    .contact-block__inner {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 576px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-gallery {
        grid-template-columns: 1fr;
    }

    .hero__actions .btn-ghost,
    .hero__actions .btn-accent {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* =========================
   Quote request (offerte) page
   ========================= */
.hero--compact {
    min-height: min(460px, 44vh);
    padding: 8rem 0 clamp(2.5rem, 5vw, 4.5rem);
}

.offerte__grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
}

/* Grid items default to min-width: auto; without this a wide element in either column
   stretches the page past the screen on phones. */
.offerte__grid > * {
    min-width: 0;
}

.offerte__form-head {
    margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}

.offerte__form-head .section-title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

/* Content elements the merchant places on the quote page render below the form. */
.offerte__form-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* sitepack_elements() wraps each element in a full-width .container-element (max-width +
   gutter). Inside the form column that would indent it past the form; line it up instead. */
.offerte__form-body > .container-element {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* The quote form (theme.js sends it through the SitePack SDK): squared fields, small
   uppercase labels and service chips, all from the theme's colour tokens. */
.quote-form [hidden] {
    display: none !important;
}

.quote-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.quote-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}

.quote-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.quote-form__group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.quote-form__label {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-color);
}

.quote-form__group > .quote-form__label {
    margin-bottom: 0.9rem;
}

.quote-form__optional {
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--subtle-text-color);
}

.quote-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
    color: var(--heading-color);
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius);
}

.quote-form :is(input, textarea)::placeholder {
    color: var(--subtle-text-color);
    opacity: 1;
}

.quote-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.quote-form textarea {
    min-height: 9.5rem;
    line-height: 1.6;
}

.quote-form [aria-invalid="true"] {
    border-color: var(--stock-error-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock-error-color) 15%, transparent);
}

.quote-form__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quote-chip {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

/* The checkbox stays in the page for keyboard and screen readers; the label text is the chip. */
.quote-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.quote-chip__text {
    display: inline-block;
    padding: 0.7rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--heading-color) 25%, transparent);
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.quote-chip:hover .quote-chip__text {
    border-color: var(--accent-color);
}

.quote-chip input:checked + .quote-chip__text {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text-color);
}

.quote-chip input:focus-visible + .quote-chip__text {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Honeypot: off-screen for people, still in the form for bots. */
.quote-form__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.quote-form__status {
    margin: 0;
    padding: 0.9rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    border-left: 3px solid var(--success-color);
    background-color: color-mix(in srgb, var(--success-color) 8%, transparent);
    color: var(--text-color);
}

.quote-form__status.is-error {
    border-left-color: var(--stock-error-color);
    background-color: color-mix(in srgb, var(--stock-error-color) 8%, transparent);
}

.quote-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.4rem;
}

.quote-form__submit {
    padding: 1.05rem 2.1rem;
}

.quote-form__submit:disabled {
    opacity: 0.65;
    cursor: wait;
}

.quote-form__note {
    margin: 0;
    max-width: 26ch;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--subtle-text-color);
}

.quote-form__success {
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background-color: var(--alt-background-color);
    color: var(--alt-text-color);
    border: 1px solid var(--accent-color);
    outline: none;
}

.quote-form__success-mark {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--heading-font);
    font-size: 4rem;
    line-height: 0.6;
    color: var(--accent-color);
}

.quote-form__success-title {
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 1.9rem;
    color: var(--heading-color);
}

.quote-form__success-text {
    margin: 0.9rem 0 0;
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .quote-form__row {
        grid-template-columns: 1fr;
    }

    .quote-form__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-form__submit {
        width: 100%;
        text-align: center;
    }

    .quote-form__note {
        max-width: none;
    }
}

.offerte__aside {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Dark "our approach" card with numbered steps and a VT watermark. */
.approach-card {
    position: relative;
    overflow: hidden;
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

.approach-card__watermark {
    position: absolute;
    right: -6%;
    bottom: -22%;
    font-size: 13.75rem;
    font-weight: 600;
    line-height: 0.8;
    color: color-mix(in srgb, var(--accent-color) 8%, transparent);
    pointer-events: none;
    user-select: none;
}

.approach-card__inner {
    position: relative;
    z-index: 2;
}

.approach-steps {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.approach-step {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
}

.approach-step__nr {
    flex: none;
    width: 2.15rem;
    font-family: var(--heading-font);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--accent-color);
}

.approach-step__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.approach-step__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--overlay-text-color);
}

.approach-step__text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--overlay-text-color) 72%, transparent);
}

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

/* Services template: four alternating split rows with an even vertical rhythm. */
.services-list {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.services-list .split {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* =========================
   Content elements — review (testimonial) & FAQ (accordion)
   Aligns the page-builder blocks with the terrazzo design. Colours the merchant sets on the
   element stay inline; here we own structure, typography, spacing and the brand accents
   (squared corners, gold stars/quote mark/chevrons, serif quote).
   ========================= */

/* Review / testimonial */
.element-testimonial {
    position: relative;
    border-radius: 0;
    padding: clamp(2rem, 4vw, 3.25rem);
}

.element-testimonial-rating {
    color: var(--rating-color) !important; /* stars gold, over the element's inline default */
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    font-size: 1rem;
    margin-bottom: 1.35rem;
}

.element-testimonial-quote {
    font-family: var(--heading-font);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.4;
    max-width: 42ch;
    margin: 0 auto;
}

.element-testimonial-quote::before {
    content: "\201C";
    display: block;
    font-family: var(--heading-font);
    color: var(--accent-color);
    font-size: 3.5rem;
    line-height: 0.5;
    margin-bottom: 0.85rem;
}

.element-testimonial-author {
    margin-top: 1.85rem;
}

.element-testimonial-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.element-testimonial-job {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-color);
}

/* FAQ / accordion */
.element-accordion-item {
    border-radius: 0;
    margin-bottom: 0.75rem;
}

.element-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    font-weight: 600;
    font-size: 1.02rem;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}

.element-accordion-summary::-webkit-details-marker {
    display: none;
}

.element-accordion-chevron {
    flex-shrink: 0;
    color: var(--accent-color);
    font-size: 1.1rem;
}

.element-accordion-item:hover .element-accordion-summary,
.element-accordion-item[open] .element-accordion-summary {
    color: var(--accent-color) !important; /* accent the active/hovered question over its inline colour */
}

.element-accordion-content {
    padding: 0 1.4rem 1.4rem;
    line-height: 1.7;
}

/* On an editor page whose first block is a page-builder hero, the header floats over it (see
   the overlay rules above). Give that hero extra top padding so its (vertically centred)
   content clears the absolute header, matching the homepage hero. */
body:has(main > .element-hero:first-child) .element-hero {
    padding-top: clamp(7rem, 10vw, 9.5rem);
}

/* =========================
   Editor / content pages — even vertical rhythm
   The page-builder ships top-level blocks with mixed margins (0 / 24 / 32px) plus the odd
   padding of a same-colour "background" block, which reads as irregular spacing. Give every
   top-level content block one consistent gap. Scoped to element/content classes, so the
   homepage (which uses .hero / .section / .split / .band / .quote-band) is untouched.
   ========================= */
main > .container:not(:first-child),
main > [class*="container-element-"]:not(:first-child),
main > .element-cta-banner:not(:first-child),
main > .element-testimonial:not(:first-child) {
    /* !important matches the platform's own `main > .container-element-columns:not(:first-child)
       { margin-top: 2rem !important }` so every block shares one gap instead of 0/24/32px. */
    margin-top: clamp(2.5rem, 4vw, 3.5rem) !important;
}

/* Mobile: an open hamburger menu on the transparent (overlay) header must be readable —
   give it a solid header background with dark items instead of light text on the photo.
   Scoped with the same overlay condition (+ :has(ul.menu-open)) so it outranks the overlay
   light-text rules; non-overlay headers are already a solid light bar. */
@media (max-width: 768px) {
    body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header:has(ul.menu-open) {
        background: var(--header-background-color);
        border-bottom: 1px solid var(--border-color);
    }

    body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header:has(ul.menu-open) .brand .site-name,
    body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header:has(ul.menu-open) .nav-link > a,
    body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header:has(ul.menu-open) .nav-icon svg {
        color: var(--header-text-color);
    }

    body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header:has(ul.menu-open) .nav-toggle span {
        background-color: var(--header-text-color);
    }

    body:is(:has(.hero--overlay), :has(main > .element-hero:first-child)) header:has(ul.menu-open) .nav-icon img {
        filter: none;
    }
}