:root {
    --c-text: #1a1a1a;
    --c-muted: #6b6b6b;
    --c-bg: #fff;
    --c-soft: #f5f3ef;
    --c-accent: #d4202c;
    --c-dark: #111;
    --c-btn: #f2ec00;
    --e-global-color-accent: #dbe9eb;
    --radius: 999px;
    --container: 1240px;
    --font: "Poppins", Arial, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--c-text); background: var(--c-bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.visually-hidden, .skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 100; background: #fff; padding: .5rem 1rem; }

/* Buttons */
.btn { display: inline-block; padding: .85em 1.8em; border-radius: var(--radius); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; text-decoration: none; border: 2px solid transparent; transition: .2s; cursor: pointer; }
.btn--primary { background: var(--c-btn); color: #000; text-align: center; }
.btn--primary:hover { background: var(--c-dark); color: #fff; }
.btn--dark { background: var(--c-dark); color: #fff; }
.btn--dark:hover { background: var(--c-accent); }
.btn--disabled { background: #ddd; color: #777; cursor: not-allowed; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,1); backdrop-filter: blur(8px); border-bottom: 1px solid #eee; }
.site-header__inner { display: inline; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8rem; }
.site-nav a { text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: .85rem; letter-spacing: .05em; }
.site-nav a:hover, .site-nav a.is-active { color: var(--c-accent); }
.site-nav .language-switcher-language-url ul { gap: .6rem; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 24px; height: 2px; background: var(--c-text); content: ""; position: relative; margin: auto; }
.nav-toggle__bars::before { top: -8px; position: absolute; left: 0; }
.nav-toggle__bars::after { top: 8px; position: absolute; left: 0; }

@media (max-width: 960px) {
    .site-header__inner { display: flex; }
}

/* Product detail */
.product-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
@media (min-width: 768px) {
    .product-detail { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
    .product-detail__body { grid-column: 1 / -1; }
}

/* Galerie */
.product-gallery__main img { display: block; width: 100%; height: auto; }
.product-gallery__thumbs {
    display: flex; flex-wrap: wrap; gap: .5rem;
    list-style: none; margin: .75rem 0 0; padding: 0;
}
.product-gallery__thumb {
    display: block; padding: 0; width: 72px; height: 72px;
    border: 2px solid transparent; background: none; cursor: pointer; opacity: .6;
}
.product-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb:hover,
.product-gallery__thumb.is-active { opacity: 1; border-color: currentColor; }
.product-gallery__thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Info */
.product-detail__categories {
    display: flex; flex-wrap: wrap; gap: .25rem 1rem;
    list-style: none; margin: 0 0 1rem; padding: 0; font-size: .875rem; text-transform: uppercase;
}
.product-detail__title { margin: 0 0 .25rem; }
.product-detail__fragrance { margin: 0; font-size: 1.25rem; font-weight: 400; }
.product-detail__type { margin: .25rem 0 0; text-transform: uppercase; letter-spacing: .08em; }
.product-detail__divider { margin: 1.25rem 0; border: 0; border-top: 1px solid currentColor; opacity: .25; }
.product-detail__price { font-size: 1.125rem; font-weight: 600; }
.product-detail__family,
.product-detail__notes { margin: .5rem 0; }

.product-detail__specs { margin: 1.5rem 0; }
.product-detail__specs > div {
    display: grid; grid-template-columns: 9rem 1fr; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.1);
}
.product-detail__specs dt { font-weight: 600; }
.product-detail__specs dd { margin: 0; }

.product-detail__cta { margin: 1.5rem 0; }
.product-btn {
    display: inline-block; padding: .85rem 2rem;
    background: #111; color: #fff; text-decoration: none;
    text-transform: uppercase; letter-spacing: .08em;
}
.product-btn:hover,
.product-btn:focus-visible { background: #333; color: #fff; }
.product-btn--disabled { background: #999; cursor: default; }
.product-btn--disabled:hover { background: #999; }

.product-detail__badge { display: block; max-width: 100%; height: auto; margin-top: 1.5rem; }
.product__info {background: #dbe9eb; padding: 2rem; }

/* Hero */
.hero { position: relative; min-height: min(80vh, 760px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 75%); }
.hero__inner { position: relative; z-index: 1; padding-block: 4rem; }
.hero__title { margin: 0; font-size: clamp(2.2rem, 6vw, 2.6rem); }
.hero__title2 { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 300; line-height: 1.15; margin-bottom: 1.25rem; }
.hero__subtitle { max-width: 40ch; font-size: 1.1rem; margin: 0 0 2rem; }
.hero__content {
    background-color: rgba(0,0,0,0.55);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 0px 0px 0px;
    --e-column-margin-right: 0px;
    --e-column-margin-left: 0px;
    padding: 20px 45px 20px 45px;
    max-width: 50%;
    border-radius: 30px;
}
.hero__image2 {
    margin-top: 1.5rem;
}
.hero__image2 img {
    display: block;
    max-width: 70%;
    height: auto;
}


@media (max-width: 960px) {
    .hero__content { max-width: 90%; }
}

/* Reach */
.reach {
    --rc-bg: #fff;
    --rc-color: #000;
    background: var(--rc-bg);
    color: var(--rc-color);
    padding: 0 0 clamp(2rem, 5vw, 4rem);
}
.reach__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}
.reach__item {
    display: flex;
    flex-direction: column;
    align-items: self-start;  /* zarovnání ověřte podle originálu */
}
.reach__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 120px;
    margin-bottom: 1.25rem;
}
.reach__title {
    margin: 0 0 .75rem;
    font-size: clamp(1.125rem, 1.8vw, 1.25rem);
    line-height: 1.2;
}
.reach__text {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.0625rem);
    line-height: 1.7;
}

@media (max-width: 991px) {
    .reach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .reach__grid { grid-template-columns: 1fr; }
}

/* Production */
.production {
    --pr-bg-color: #000;
    --pr-bg-image: url('../img/cs-macchinario.png');      /* např. url('../images/production-bg.jpg') */
    --pr-icon: #fff;
    position: relative;
    display: flex;
    align-items: center;      /* content-middle */
    justify-content: center;
    width: 100%;              /* full_width */
    min-height: clamp(280px, 45vw, 600px); /* výšku upravte podle originálu */
    background: var(--pr-bg-color) var(--pr-bg-image) center / cover no-repeat;
}
.production__play {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pr-icon);
    line-height: 1;
}
button.production__play { cursor: pointer; transition: transform .2s ease; }
button.production__play:hover,
button.production__play:focus-visible { transform: scale(1.08); }
button.production__play:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 50%; }
.production__icon {
    width: clamp(64px, 8vw, 110px);
    height: auto;
}

.production__dialog {
    width: min(960px, 92vw);
    padding: 0;
    border: 0;
    background: #000;
    overflow: visible;
}
.production__dialog::backdrop { background: rgba(0, 0, 0, .8); }
.production__frame { aspect-ratio: 16 / 9; }
.production__frame iframe,
.production__frame video { width: 100%; height: 100%; border: 0; display: block; }
.production__close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

/* Production2 */
.production2 {
    --p2-color: inherit;
    color: var(--p2-color);
    display: flex;
    align-items: center;      /* items-middle */
    min-height: 500px;        /* výšku upravte podle originálu */
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.production2__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
}
.production2__image {
    display: block;
    width: 100%;
    max-width: 500px;         /* originál: až 884 px, upravte podle potřeby */
    height: auto;
}
.production2__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.production2__content p {
    margin: 0 0 1rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}
.production2__content ul {
    margin: 0;
    padding-left: 1.25rem;
}
.production2__content li {
    margin-bottom: .5rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}
.production2__content li:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
    .production2 { min-height: 0; }
    .production2__grid { grid-template-columns: 1fr; }
    .production2__image { width: auto; max-width: 100%; margin: 0 auto; }
}

/* Keep */
.keep {
    --kp-bg-color: var(--e-global-color-accent);       /* pozadí levé poloviny */
    --kp-color: #000;
    --kp-icon: currentColor;
    --kp-visual-color: #e9e9e9;
    --kp-bg-image: url('../img/contatti2-min.jpg');
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-height: clamp(360px, 40vw, 560px);
}
.keep__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 6vw, 5rem);
    background: var(--kp-bg-color);
    color: var(--kp-color);
}
.keep__visual {
    background: var(--kp-visual-color) var(--kp-bg-image) center / cover no-repeat;
}
.keep__title {
    margin: 0 0 2rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.keep__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.keep__item { margin-bottom: 1rem; }
.keep__item:last-child { margin-bottom: 0; }
.keep__item,
.keep__link {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.keep__link {
    color: inherit;
    text-decoration: none;
}
.keep__link:hover .keep__text,
.keep__link:focus-visible .keep__text { text-decoration: underline; }
.keep__icon {
    display: inline-flex;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    color: var(--kp-icon);
}
.keep__icon svg { width: 100%; height: auto; }
.keep__text {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.5;
}

@media (max-width: 767px) {
    .keep { grid-template-columns: 1fr; min-height: 0; }
    .keep__visual { min-height: 220px; order: 2; }
}

/* Reference */
.reference {
    --rf-bg: #fff;         /* originál: bgc-light, upravte podle motivu */
    --rf-color: #000;
    background: var(--rf-bg);
    color: var(--rf-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.reference__head {
    max-width: 48rem;
    margin: 0 auto clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}
.reference__title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.reference__lead {
    margin: 0;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}
.reference__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: clamp(.75rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.reference__item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.reference__logo {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 575px) {
    .reference__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* Standards */
.standards {
    --st-bg: #fff;
    --st-color: #000;
    background: var(--st-bg);
    color: var(--st-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.standards__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: start;
}
.standards__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.standards__body p {
    margin: 0;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}

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


/* Concrete */
.concrete {
    --cc-bg: #73ab84;            /* pozadí, upravte podle originálu */
    --cc-color: #fff;
    background: var(--cc-bg);
    color: var(--cc-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.concrete__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: start;
}
.concrete__title {
    margin: 0 0 2rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.concrete__btn {
    display: inline-block;
}
.concrete__body p {
    margin: 0 0 1rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}
.concrete__body p:last-child { margin-bottom: 0; }

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


/* Engineering */
.engineering {
    --en-bg: #fff;            /* pozadí, upravte podle originálu */
    --en-color: #000;
    background: var(--en-bg);
    color: var(--en-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.engineering__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;       /* zarovnání ověřte podle originálu */
}
.engineering__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.engineering__body {
    max-width: 800px;
}
.engineering__body p {
    margin: 0 0 1rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}
.engineering__body p:last-child { margin-bottom: 0; }
.engineering__image {
    display: block;
    width: 100%;
    max-width: 500px;         /* originál: až 1024 px, upravte podle potřeby */
    height: auto;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .engineering__image { max-width: 100%; }
}



/* Intro */
.intro {
    --intro-red-height: 75%;   /* výška červené části od horního okraje */
    padding-block: 5rem;
    padding-bottom: 0;
    background: linear-gradient(
            to bottom,
            #ff4848 0,
            #ff4848 var(--intro-red-height),
            transparent var(--intro-red-height)
    );
}

.intro__text {
    align-self: start;      /* místo vertikálního středu zarovnat nahoru */
    margin-top: 1rem;       /* jemné doladění výšky, klidně 0 nebo záporná hodnota */
    color: #fff;
}
.intro__text h2,
.intro__text p {
    color: #fff;
}
.intro__text p {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
}

@media (max-width: 960px) {
    .intro__text { margin-top: 0; }
}

.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.intro__media img { width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.intro__text h2 { margin-bottom: 1.25rem; }
.intro__text p { margin: 0 0 1rem; }

@media (max-width: 960px) {
    .intro { --intro-red-height: 320px; } /* na mobilu je blok vyšší, proto pevná výška */
    .intro__text, .intro__text h2, .intro__text p {color: #000;}
}

/* Collections marquee */
.collections { background: var(--c-soft); padding-block: 4rem; overflow: hidden; }
.collections__title { text-align: center; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 2rem; }
.collections__track { display: flex; width: max-content; }
.collections__list { list-style: none; margin: 0; padding: 0 .75rem 0 0; display: flex; gap: .75rem; flex-shrink: 0; }
.collections__list li { width: 220px; }
.collections__list a { display: block; background: #fff; border-radius: 16px; padding: 1rem; transition: transform .2s; }
.collections__list a:hover { transform: translateY(-4px); }
.collections__track.is-animated { animation: marquee 50s linear infinite; }
.collections__track.is-animated:hover { animation-play-state: paused; }
.collections__track.is-static { width: auto; overflow-x: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Private */
.private {
    --pr-bg: #d8d9c7;            /* pozadí sekce, upravte podle originálu */
    --pr-color: #000;
    --pr-btn-bg: #000;
    --pr-btn-color: #fff;
    --pr-btn-hover: #ff4848;
    background: var(--pr-bg);
    color: var(--pr-color);
    padding: clamp(2rem, 5vw, 0) 0;
    --intro-green-height: 85%;   /* výška červené části od horního okraje */
    padding-bottom: 0;
    background: linear-gradient(
            to bottom,
            #d8d9c7 0,
            #d8d9c7 var(--intro-green-height),
            transparent var(--intro-green-height)
    );


}
.private__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: center;            /* obsah svisle uprostřed */
    min-height: 500px;              /* min-height sekce */
}
.private__media img {
    display: block;
    width: 100%;
    max-width: 480px;               /* vysoký obrázek nesmí zabrat celou výšku */
    height: auto;
    margin-inline: auto;
}
.private__title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.private__text {
    margin: 0 0 1.75rem;
    max-width: 52ch;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.6;
}
.private__button {
    display: inline-block;
    padding: .9rem 2rem;
    background: var(--pr-btn-bg);
    color: var(--pr-btn-color);
    font-weight: 600;
    letter-spacing: .05em;
    text-decoration: none;
    transition: background .2s ease;
}
.private__button:hover,
.private__button:focus-visible {
    background: var(--pr-btn-hover);
}

@media (max-width: 767px) {
    .private__grid { grid-template-columns: 1fr; min-height: 0; }
    .private__media img { max-width: 320px; }
    .private {
        --intro-green-height: 100%;
        padding-bottom: 25px;
    }
}

/* Quality */
.quality {
    --q-bg: #fff;           /* pozadí sekce, upravte podle originálu */
    --q-color: #000;
    background: var(--q-bg);
    color: var(--q-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.quality__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: start;
}
.quality__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.quality__body p {
    margin: 0 0 1rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.6;
}
.quality__certs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 34px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.quality__certs img {
    display: block;
    height: 96px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 767px) {
    .quality__grid { grid-template-columns: 1fr; }
    .quality__certs { gap: 20px; }
    .quality__certs img { height: 72px; }
}

/* Designer */
.designer {
    --dz-bg: #dbe9eb;
    --dz-color: #000;
    --dz-media-bg: #dbe9eb;
    --dz-media-img: url('../img/artista-luca-trazzi.webp');
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-height: 500px;
    background: var(--dz-bg);
    color: var(--dz-color);
    margin-bottom: 4rem;
}
.designer__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 6vw, 6rem);
}
.designer__title {
    margin: 0 0 .5rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.designer__name {
    margin: 0 0 1.5rem;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 600;
}
.designer__content p {
    margin: 0 0 1rem;
    max-width: 60ch;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}
.designer__content p:last-child { margin-bottom: 0; }
.designer__media {
    background-color: var(--dz-media-bg);
    background-image: var(--dz-media-img);
    background-size: cover;
    background-position: center;
}

@media (max-width: 767px) {
    .designer { grid-template-columns: 1fr; min-height: 0; }
    .designer__media { min-height: 300px; order: -1; }
}


/* Foot */
.foot {
    --ft-bg: #dbe9eb;
    --ft-color: #282828;
    --ft-hover: #ff4848;
    --ft-icon-bg: #282828;
    --ft-icon-color: #fff;
    background: var(--ft-bg);
    color: var(--ft-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.foot__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
}
.foot__title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.foot__list,
.foot__social {
    margin: 0;
    padding: 0;
    list-style: none;
}
.foot__list li + li { margin-top: .5rem; }
.foot a {
    color: var(--ft-color);
    text-decoration: none;
    transition: color .2s ease;
}
.foot a:hover,
.foot a:focus-visible { color: var(--ft-hover); }
.foot__contact {
    margin: 0;
    line-height: 1.8;
}
.foot__contact a { text-decoration: underline; }

.foot__social {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.foot__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;          /* elementor-shape-circle */
    background: var(--ft-icon-bg);
    color: var(--ft-icon-color);
}
.foot__social a:hover,
.foot__social a:focus-visible {
    background: var(--ft-hover);
    color: var(--ft-icon-color);
}
.foot__social svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 767px) {
    .foot__grid {
        grid-template-columns: 1fr;
        text-align: center;        /* mobile-align-center */
    }
    .foot__social { justify-content: center; }
}

/* Footer */
.footer-bar {
    --fb-bg: #282828;
    --fb-color: #fff;
    --fb-hover: #ff4848;
    background: var(--c-dark);
    color: var(--fb-color);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    font-size: .875rem;
    line-height: 1.6;
}
.footer-bar__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.footer-bar p { margin: 0 0 .5rem; }
.footer-bar p:last-child { margin-bottom: 0; }
.footer-bar__legal { opacity: .85; }
.footer-bar a {
    color: var(--fb-color);
    text-decoration: underline;
    transition: color .2s ease;
}
.footer-bar a:hover,
.footer-bar a:focus-visible { color: var(--fb-hover); }

@media (max-width: 767px) {
    .footer-bar__inner { text-align: center; }
}




/* Top */
.top {
    --logo-w: 200px;
    --logo-overlap: 70px; /* kolik loga přesahuje do Hero */
    background: #fff;
    position: relative;
    z-index: 100;         /* nad Hero */
    overflow: visible;
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
}
.top__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    min-height: 90px;     /* výška bílého pruhu, logo ji přesahuje */
}
.top__logo {
    position: relative;
    display: block;
    width: var(--logo-w);
    height: 0;            /* logo nezvětšuje hlavičku */
    align-self: start;
}
.top__logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.15));
}
.top .menu { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.top__nav--right .menu { justify-content: flex-end; }
.top .menu a { text-decoration: none; color: inherit; font-weight: 500; padding-block: .5rem; display: inline-flex; align-items: center; gap: .4rem; }
.top .menu a:hover,
.top .menu a:focus-visible { color: #ff4848; }
/* velká písmena: hlavní položky menu + nadpis "Car Fragrances" */
.top .menu > li > a,
.top .mega__title {
    text-transform: uppercase;
    letter-spacing: .05em; /* upravte podle originálu */
}
.top .menu {
    display: flex;
    flex-wrap: nowrap;             /* vše na jednom řádku */
    align-items: center;
    gap: clamp(.6rem, 1.2vw, 1.25rem); /* menší mezery, na užších oknech se zmenší */
    margin: 0;
    padding: 0;
    list-style: none;
}
.top .menu > li { flex: 0 0 auto; }
.top .menu > li > a {
    white-space: nowrap;           /* text položky se nezalomí */
    font-size: clamp(12px, 1.05vw, 15px); /* zmenšuje se podle šířky okna */
    letter-spacing: .03em;         /* dříve .05em, o něco úžeji */
}

/* sloupce se můžou zúžit pod šířku obsahu */
.top__grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
}


/* Overtop */
.overtop {
    --ot-bg: #fff;
    --ot-color: #000;
    --ot-hover: #ff4848;
    background: var(--ot-bg);
    color: var(--ot-color);
    position: relative;
    z-index: 110;         /* nad Top a Hero */
    border-bottom: solid 1px #000;
}
.overtop__grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
}
.overtop__social { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.overtop__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; color: inherit;
    transition: color .2s ease;
}
.overtop__social svg { width: 21px; height: 21px; fill: currentColor; }
.overtop__social a:hover,
.overtop__social a:focus-visible { color: var(--ot-hover); }

/* přepínač jazyka */
.overtop__lang ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.overtop__lang a {
    color: inherit; text-decoration: none;
    font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.overtop__lang a:hover,
.overtop__lang a:focus-visible,
.overtop__lang .is-active { color: var(--ot-hover); }
.overtop__lang a {
    font-size: 14px;
}


@media (max-width: 767px) { .overtop { display: none; } }

/* Highlights */
.highlights {
    --hl-bg: #fff;          /* pozadí sekce, upravte podle originálu */
    --hl-color: #000;
    --hl-accent: #000;      /* barva čísla 40 */
    background: var(--hl-bg);
    color: var(--hl-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
    padding-top: 0;
}
.highlights__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 3rem);
    align-items: center;
}
.highlights__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
}
.highlights__number {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--hl-accent);
}
.highlights__icon {
    height: clamp(56px, 6vw, 80px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.highlights__label {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 500;
    line-height: 1.3;
}

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





/* šipka */
.menu__arrow { width: .45em; height: .45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }

/* mega menu */
.menu__has-sub { position: relative; }
.mega {
    position: absolute; left: 0; top: 100%;
    width: min(720px, 90vw);
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem;
    padding: 1.5rem; background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.menu__has-sub:hover > .mega,
.menu__has-sub:focus-within > .mega,
.menu__has-sub.is-open > .mega { opacity: 1; visibility: visible; transform: none; }

.mega__title { font-weight: 700; margin-bottom: .5rem; }
.mega__col--list ul { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.mega__promo img { display: block; width: 100%; height: auto; }

/* skryto na mobilu, stejně jako v originále */
@media (max-width: 767px) { .top { display: none; } }


/* CTA */
.cta { padding-block: 5rem; }
.cta__text { order: 0; }
.cta__media { order: 1; }

/* Certs */
.certs { background: var(--c-soft); padding-block: 5rem; }
.certs__logos { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; }
.certs__logos img { max-height: 90px; width: auto; }

/* Subpages / products grid */
.site-main__inner { padding-block: 3rem; }
.category-head { text-align: center; max-width: 780px; margin: 0 auto 3rem; }
.category-head__tag { text-transform: uppercase; letter-spacing: .15em; color: var(--c-muted); }
.category-head img { margin: 1.5rem auto 0; max-width: 200px; }
.product-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.product-card { text-align: center; }
.product-card__img { display: block; background: var(--c-soft); border-radius: 18px; padding: 1rem; transition: transform .2s; }
.product-card__img:hover { transform: translateY(-4px); }
.product-card__title { font-size: 1.05rem; margin-top: 1rem; }
.product-card__title a { text-decoration: none; }
.product-card__price { color: var(--c-muted); margin: 0; }
.designer { background: var(--dz-bg); margin-top: 4rem; }
.pager { margin-top: 3rem; }
.pager__items { list-style: none; display: flex; gap: .5rem; justify-content: center; padding: 0; }

/* Product detail */
.product { padding-block: 3rem; padding-top: 4rem; }
.product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.gallery__main { position: relative; background: var(--c-soft); border-radius: 20px; aspect-ratio: 1; overflow: hidden; }
.gallery__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .3s; display: grid; place-items: center; }
.gallery__slide.is-active { opacity: 1; }
.gallery__slide img { max-height: 100%; object-fit: contain; }
.gallery__thumbs { list-style: none; display: flex; gap: .75rem; padding: 0; margin: 1rem 0 0; }
.gallery__thumbs button { border: 2px solid transparent; background: var(--c-soft); border-radius: 12px; padding: 3px; cursor: pointer; width: 80px; }
.gallery__thumbs button.is-active { border-color: var(--c-accent); }
.product__fragrance, .product__type { font-size: 1.6rem; font-weight: 500; margin: 0; color: var(--c-muted); }
.product__price { font-size: 2rem; font-weight: 800; color: var(--c-accent); margin: 1rem 0; }
.product__lead { margin-bottom: 1rem; }
.product__family { font-weight: 700; margin-bottom: .25rem; }
.product__notes { color: var(--c-muted); margin-bottom: 1.5rem; }
.tabs { margin-top: 2.5rem; }
.tabs__list { display: flex; gap: 1.5rem; border-bottom: 1px solid #ddd; }
.tabs__list button { background: none; border: 0; padding: .75rem 0; font: inherit; font-weight: 700; cursor: pointer; border-bottom: 3px solid transparent; color: var(--c-muted); }
.tabs__list button[aria-selected=true] { color: var(--c-text); border-color: var(--c-accent); }
.tabs__panel { padding-top: 1.25rem; }
.specs { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.product-gallery__slide { cursor: zoom-in; }
.glightbox-container .gslide-description { background: transparent; }
.glightbox-clean .gslide-title { font-size: 1rem; text-align: center; }

/* Tabs */
.tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #c5d4d7;
}
.tabs__list [role="tab"] {
    margin-bottom: -1px;
    padding: .75rem 1.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #7a8587;
    font: 600 .875rem/1 "Poppins", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.tabs__list [role="tab"]:hover { color: #222; }
.tabs__list [role="tab"][aria-selected="true"] {
    color: #222;
    border-bottom-color: #222;
}
.tabs__list [role="tab"]:focus-visible {
    outline: 3px solid rgb(34 34 34 / .35);
    outline-offset: 2px;
}
.tabs__panel[hidden] { display: none; }


/* Parallax */
.parallax {
    position: relative;
    display: flex;
    align-items: flex-end;            /* obsah dole, jako v Elementoru */
    width: 100%;
    min-height: clamp(320px, 60vh, 720px);
    background-color: #222;
    background-image: var(--parallax-img);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;     /* parallax efekt */
    overflow: hidden;
}

/* jemné ztmavení kvůli čitelnosti textu */
.parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / .45), transparent 60%);
    pointer-events: none;
}

.parallax__content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: #fff;
    font-family: "Poppins", sans-serif;
}

#block-mrmrs-parallax1 {
    position: relative;
    height: clamp(320px, 60vh, 720px);
    clip-path: inset(0);          /* odřízne fixní obrázek na oblast bloku */
}
#block-mrmrs-parallax1 img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
/* skryje popisek pole "Parallax Img" */
#block-mrmrs-parallax1 .field__label,
#block-mrmrs-parallax1 > div > div:first-child:not(:has(img)) {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    #block-mrmrs-parallax1 { height: auto; clip-path: none; }
    #block-mrmrs-parallax1 img { position: static; height: auto; }
}

/* iOS a mobily nepodporují fixed, tam bude fotka statická */
@media (max-width: 1024px), (hover: none) {
    .parallax { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
    .parallax { background-attachment: scroll; }
}



/* Mobile menu */
.mobile-menu,
.mobile-menu__sub { margin: 0; padding: 0; list-style: none; }
.mobile-menu > li { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.mobile-menu a { display: block; padding: .75rem 0; color: inherit; text-decoration: none; }
.mobile-menu__sub { padding: 0 0 .75rem 1rem; }
.mobile-menu__sub a { padding: .4rem 0; opacity: .85; }
/* Desktop: mobilní menu se nezobrazuje */
@media (min-width: 992px) {
    .nav-toggle,
    .site-nav,
    .site-nav.is-open {
        display: none !important;
    }
}


/* Design */
.design {
    --dg-bg: #B8B8fe;
    --dg-color: #fff;
    background: var(--dg-bg);
    color: var(--dg-color);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.design__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: start;
}
.design__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
}
.design__logo {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}
.design__body p {
    margin: 0;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
}

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


/* Footer */
.site-footer { background: var(--c-dark); color: #ddd; }
.site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(4, 1fr); }
.site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer input[type=email], .site-footer input[type=text] { width: 100%; padding: .75rem 1rem; border-radius: var(--radius); border: 0; margin-bottom: .5rem; }
.site-footer__bottom { font-size: .8rem; color: #999; border-top: 1px solid #333; padding-block: 1rem; }
.to-top { position: fixed; right: 1rem; bottom: 1rem; background: var(--c-accent); color: #fff; padding: .5rem 1rem; border-radius: var(--radius); font-size: .75rem; text-transform: uppercase; }
.container.site-footer__grid {display: none;}
.views-element-container {display: none; }

/* Webform errors */
/* jen na stránkách s formulářem Web contact */
body:has(form[id^="webform-submission-web-contact"]) [data-drupal-messages] [role="alert"] {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 1em;
    color: #c00;
}

body:has(form[id^="webform-submission-web-contact"]) [data-drupal-messages] [role="alert"] ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body:has(form[id^="webform-submission-web-contact"]) [data-drupal-messages] [role="alert"] li {
    display: block;
    margin: 0;
    padding: 0;
    color: #c00;
}
.webform-submission-form .form-item--error-message,
.webform-submission-form .form-item__error-message {
    color: #c00;
}


/* případné ikony a pseudoelementy motivu */
body:has(form[id^="webform-submission-web-contact"]) [data-drupal-messages] [role="alert"]::before,
body:has(form[id^="webform-submission-web-contact"]) [data-drupal-messages] [role="alert"] li::before {
    display: none;
    content: none;
}


/* Responsive */
@media (max-width: 960px) {
    .nav-toggle { display: block; }
    .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; padding: 1.5rem 1rem; gap: 1rem; display: none; border-bottom: 1px solid #eee; }
    .site-nav.is-open { display: flex; }
    .site-nav ul { flex-direction: column; gap: .8rem; }
    .intro__grid, .cta__grid, .certs__grid, .product__grid { grid-template-columns: 1fr; gap: 2rem; }
    .cta__media { order: 0; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .collections__list li { width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}