:root {
    --sinn-container: min(1640px, calc(100vw - 40px));
}

.c-header__logo-img,
.custom-logo {
    display: block;
    max-width: 180px;
    height: auto;
}

.c-header__logo-text {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.c-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.c-header__action {
    text-decoration: none;
}

.c-header-mobile__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-stage--fallback {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 120px 20px 80px;
    background: #111;
    color: #fff;
}

.c-stage__slide {
    min-height: 80vh;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
}

.c-stage__content,
.c-category-head__inner,
.c-content-page,
.c-productslider,
.c-listing-toolbar,
.c-shop-filter-menu {
    width: var(--sinn-container);
    margin-right: auto;
    margin-left: auto;
}

.c-stage__content {
    padding: 140px 0 80px;
}

.c-category-head {
    padding: 150px 0 70px;
    background-position: center;
    background-size: cover;
}

.c-category-head__title {
    margin: 0;
}

.c-listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 32px 0;
}

.c-productlist.products {
    width: var(--sinn-container);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
}

.c-productlist__item.product {
    list-style: none;
}

.c-product__img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.c-product__title {
    display: block;
    text-decoration: none;
}

.c-product__price .price {
    display: inline-flex;
    gap: .35em;
}

.c-productslider__list {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.c-footer__inner {
    width: var(--sinn-container);
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 1024px) {
    .c-productlist.products,
    .c-productslider__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    :root {
        --sinn-container: min(100vw - 24px, 100%);
    }

    .c-listing-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .c-productlist.products,
    .c-productslider__list {
        grid-template-columns: 1fr;
    }
}

/* Every page except home: solid black (non-transparent) header in every scroll state.
   Body class has--black-header is added on all non-front pages (theme.css also only
   loads there). Reuses the donor's is--dark-header colour (#040706); overrides the
   transparent top state and the light-on-scroll state, keeping white logo/nav/icons. */
.has--black-header .c-header::after,
.has--black-header .c-header.is--transparent-header::after,
.has--black-header .c-header.is--light-header::after,
.has--black-header .c-header.is--dark-header::after {
    display: block;
    background: #040706;
    border-color: rgba(255, 255, 255, .1);
}

.has--black-header .c-header .c-logo__img--light {
    display: block;
}

.has--black-header .c-header .c-logo__img--dark {
    display: none;
}

.has--black-header .c-header .c-logo svg path {
    fill: #fff;
}

.has--black-header .c-header .c-navigation__link,
.has--black-header .c-header .c-navigation__link:hover {
    color: #fff;
}

.has--black-header .c-header .c-functions .c-function__label {
    color: #fff;
}

.has--black-header .c-header .c-functions .c-function.has--icon .c-function__label path {
    fill: #fff;
}

.has--black-header .c-header .c-navigation__stripe::after,
.has--black-header .c-header .c-navigation__stripe::before {
    background: #fff;
}

/* Banner hero (category page): height follows the natural image height instead of a
   fixed 100vh crop. The image goes back in flow, so the section is as tall as the image. */
.c-hero.is--imgheight {
    min-height: 0;
}

.c-hero.is--imgheight picture {
    display: block;
    width: 100%;
    line-height: 0;
}

.c-hero.is--imgheight img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
}

/* Page cover (sinn_wp_page_cover): the black header is fixed, and the donor offsets
   content via .c-breadcrumb{margin-top:var(--header-height)} — but on pages where the
   cover sits above the breadcrumbs, the cover ends up underneath the header. Push the
   cover down by the header height instead, and drop the now-duplicate breadcrumb offset. */
@media (min-width: 1024px) {
    .has--black-header .is--page-cover {
        margin-top: var(--header-height, 76px);
    }

    .is--page-cover + .c-breadcrumb {
        margin-top: 0;
    }
}

/* Contacts page: address / map / phone / e-mail column. */
.c-contact-info {
    margin-top: 1rem;
}

.c-contact-info__title {
    margin: 1.75rem 0 .5rem;
}

.c-contact-info__title:first-child {
    margin-top: 0;
}

.c-contact-info__map {
    position: relative;
    width: 100%;
    margin: 1rem 0 1.75rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.c-contact-info__map iframe,
.c-contact-info__map > * {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.c-contact-info a {
    text-decoration: underline;
    text-underline-offset: 3px;
}