/* ============================================================
   QB Product Detail — fonts, layout and variants
   ============================================================ */

@font-face {
    font-family: 'Futura Round Cond';
    src: url('../fonts/futura-round-cond-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Round Cond';
    src: url('../fonts/futura-round-cond-extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------
   Variant tokens
   ------------------------------------------------------------ */
.qb-template.qb_squiz {
    --qb-bg: #044625;
    --qb-accent: #AEDF5B;
    --qb-text: #FED141;
    --qb-text-on-bg: #ffffff;
    --qb-bg-s1: url('../img/qb/qb-squiz_background_section1.png');
    --qb-bg-s2: url('../img/qb/qb-squiz_background_section2.png');
    --qb-bg-s3: url('../img/qb/qb-squiz_background_section3.png');
    --qb-deco-top: url('../img/qb/qb-squiz-deco-top.svg');
    --qb-deco-bottom: url('../img/qb/qb-squiz-deco-bottom.svg');
}

.qb-template.qb_spray {
    --qb-bg: #6DA73B;
    --qb-accent: #FED141;
    --qb-text: #FED141;
    --qb-text-on-bg: #ffffff;
    --qb-bg-s1: none;
    --qb-bg-s2: url('../img/qb/qb-spray_background_section2.png');
    --qb-bg-s3: url('../img/qb/qb-spray_background_section3.png');
    --qb-deco-top: url('../img/qb/qb-spray-deco-top.svg');
    --qb-deco-bottom: url('../img/qb/qb-spray-deco-bottom.svg');
}

/* Extend variant background up behind the navbar */
body:has(.qb-template.qb_squiz) { background-color: #044625; }
body:has(.qb-template.qb_spray) { background-color: #6DA73B; }

body:has(.qb-template) .main-nav,
body:has(.qb-template) .main-nav .full-wrapper { background-color: transparent; }
body:has(.qb-template) .main-nav a { color: #ffffff; }
body:has(.qb-template) .main-nav a:hover,
body:has(.qb-template) .main-nav a:focus,
body:has(.qb-template) .main-nav a.active,
body:has(.qb-template) .main-nav li.active > a,
body:has(.qb-template) .main-nav li:hover > a { color: #FED141; }

/* When the navbar is stuck on scroll, use the variant primary color */
body:has(.qb-template.qb_squiz) .main-nav.stick-fixed,
body:has(.qb-template.qb_squiz) .main-nav.stick-fixed .full-wrapper,
body:has(.qb-template.qb_squiz) .main-nav .mn-sub,
body:has(.qb-template.qb_squiz) .inner-nav .mn-sub li { background-color: #044625; }

body:has(.qb-template.qb_spray) .main-nav.stick-fixed,
body:has(.qb-template.qb_spray) .main-nav.stick-fixed .full-wrapper,
body:has(.qb-template.qb_spray) .main-nav .mn-sub,
body:has(.qb-template.qb_spray) .inner-nav .mn-sub li { background-color: #6DA73B; }

/* Submenu links white (overrides global #b0b0b0 !important in style.css) */
body:has(.qb-template) .main-nav .mn-sub a,
body:has(.qb-template) .inner-nav ul li .mn-sub li a { color: #ffffff !important; }

body:has(.qb-template) .main-nav .mn-sub a:hover,
body:has(.qb-template) .inner-nav ul li .mn-sub li a:hover,
body:has(.qb-template) .main-nav .mn-sub li a.active { color: #FED141 !important; }

/* Mobile hamburger icon — white over dark variant background */
body:has(.qb-template) .menubars svg path { fill: #ffffff; }

/* .page has overflow:hidden which breaks position:sticky on the bottle.
   overflow:clip clips overflow without becoming a scroll container. */
body:has(.qb-template) .page { overflow: clip; }

/* ------------------------------------------------------------
   Base template
   ------------------------------------------------------------ */
.qb-template {
    position: relative;
    background-color: var(--qb-bg);
    color: var(--qb-text-on-bg);
    font-family: 'Futura Round Cond', sans-serif;
    overflow-x: clip;
}

.qb-template h1,
.qb-template h2,
.qb-template h3,
.qb-template h4 {
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    margin: 0;
}

.qb-amesa__title,
.qb-recipes__title { font-size: 20em; }

/* ------------------------------------------------------------
   Hero: image_header banner + pills + description (left)
         sticky detail_image (right) with 3 decos
   ------------------------------------------------------------ */
.qb-hero {
    position: relative;
    padding: 40px 0 80px;

    background-image: var(--qb-bg-s1), var(--qb-bg-s2), var(--qb-bg-s3);
    background-position: left top, right 60vh, left 165vh;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 35vw auto, 35vw auto, 35vw auto;
}

.qb-hero__deco {
    position: absolute;
    pointer-events: none;
    max-width: 22vw;
    height: auto;
    z-index: 0;
}

/* Vertical order in the right column:
   Decor 1 sits in the hero/title zone (before Ideal Para)
   Decor 2 sits at the top of the description block
   Decor 3 sits at the bottom of the description block */
.qb-hero__deco--1 {
    top: 60vh;
    right: -60px;
}

.qb-hero__deco--2 {
    top: 165vh;
}

/* Spray overrides */
.qb-template.qb_spray .qb-hero__deco--1 { top: 46vh; }
.qb-template.qb_spray .qb-hero__deco--2 { top: 135vh; }

.qb-hero__deco--3 {
    bottom: -20px;
    right: -40px;
}

.qb-hero__banner-wrap {
    /* height: 100%; */
    position: relative;
}

.qb-hero__banner {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
}

/* Spray variant: image_header glued to the left edge of the viewport */
.qb-template.qb_spray .qb-hero__banner-wrap {
    height: 50vh;
    /* height: calc(50% - 50vh); */
    position: static;
}

.qb-template.qb_spray .qb-hero__banner {
    margin-left: calc(50% - 50vw);
    position: absolute;
    max-height: 100%;
    margin-top: calc(3% - 30vh);
    max-width: 100vh;
}

.qb-header__breadcrumb {
    position: relative;
    z-index: 1;
    color: var(--qb-text-on-bg);
    opacity: 0.85;
    font-family: 'P22 Mackinac Pro', serif;
    font-weight: 800;
    font-style: normal;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.qb-header__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.qb-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: stretch;
}

.qb-hero__content { min-width: 0; }

.qb-header__subtitle {
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 6px;
}

.qb-header__line {
    display: block;
    width: 280px;
    max-width: 60%;
    height: auto;
    margin: 0 0 20px;
    margin-left: 150px;
}

.qb-header__title {
    color: var(--qb-text);
    font-size: clamp(80px, 12vw, 200px);
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 50px;
}

.qb-hero__bottle-col {
    position: relative;
    align-self: stretch;
    /* Tall enough to keep the sticky bottle visible through the entire
       hero section, until the user reaches .qb-amesa */
    min-height: 240vh;
}

.qb-template.qb_spray .qb-hero__bottle-col { min-height: 200vh; }

.qb-hero__bottle {
    position: sticky;
    top: 100px;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ------------------------------------------------------------
   Ideal Para pills + description (live inside .qb-hero__content)
   ------------------------------------------------------------ */
.qb-ideal-for {
    min-height: 60vh;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qb-ideal-for__label {
    color: var(--qb-text-on-bg);
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 60px;
    line-height: 90%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.qb-ideal-for__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.qb-ideal-for__text {
    color: var(--qb-text-on-bg);
    font-size: 26px;
    line-height: 1.1;
    max-width: 560px;
}

.qb-ideal-for__text p:last-child { margin-bottom: 0; }

.qb-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 14px 28px;
    background-color: #FED141;
    color: #1a1a1a;
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    -webkit-mask-image: url('../img/qb/btn_background.svg');
            mask-image: url('../img/qb/btn_background.svg');
    -webkit-mask-size: 100%;
            mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* Description colored box */
.qb-description {
    min-height: 80vh;
    max-width: 580px;
    color: var(--qb-bg);
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qb-template.qb_spray .qb-description { min-height: 94vh; }

.qb-description__acidity {
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 16px;
    text-transform: uppercase;
    color: var(--qb-bg);
}

.qb-description__text {
    margin: 0;
    color: var(--qb-bg);
}

.qb-description__text p:last-child { margin-bottom: 0; }

.qb-description h4 {
    color: #FED141;
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 60px;
    line-height: 90%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.qb-description p {
    color: #ffffff;
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 40px;
    line-height: 90%;
    letter-spacing: 0;
}


/* ------------------------------------------------------------
   À Mesa section (variant background, inverted from page bg)
   Squiz page=#044625 → À Mesa=#6DA73B
   Spray page=#6DA73B → À Mesa=#044625
   ------------------------------------------------------------ */
.qb-amesa {
    position: relative;
    padding: 0 0 80px;
    text-align: center;
}

.qb-template.qb_squiz .qb-amesa { background-color: #6DA73B; }
.qb-template.qb_spray .qb-amesa { background-color: #044625; }

.qb-amesa__hero {
    width: 100%;
    margin-bottom: 80px;
    overflow: hidden;
}

.qb-amesa__hero img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

.qb-amesa__title {
    color: var(--qb-text);
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-size: clamp(120px, 20vw, 350px);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.01em;
    margin: 10px 0 30px 0 !important;
}

.qb-amesa__mood {
    color: var(--qb-text-on-bg);
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 60px;
}

.qb-amesa__gallery { margin: 40px 0; }

.qb-amesa__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

@media (max-width: 768px) {
    .qb-amesa { padding: 0 0 40px; }
    .qb-amesa__title { font-size: clamp(56px, 18vw, 100px); }
}

/* ------------------------------------------------------------
   Receitas section (white background)
   ------------------------------------------------------------ */
.qb-recipes {
    position: relative;
    padding: 100px 0 120px;
    text-align: center;
    background-color: #ffffff;
    color: var(--qb-bg);
}

.qb-recipes__subtitle {
    color: var(--qb-bg);
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 16px;
}

.qb-recipes__title {
    color: var(--qb-bg);
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-size: clamp(72px, 12vw, 180px);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.01em;
    margin: 0 0 60px;
}

.qb-recipes__list { margin-bottom: 60px; }

.qb-recipes__cta { margin-top: 30px; }

@media (max-width: 768px) {
    .qb-recipes { padding: 60px 0 80px; }
    .qb-recipes__title { font-size: clamp(56px, 18vw, 100px); }
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .qb-amesa__title,
    .qb-recipes__title { font-size: 6em; }
    .qb-hero { padding: 24px 0 60px; }
    .qb-hero__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .qb-hero__bottle-col {
        order: -1;
        min-height: 0;
    }
    .qb-hero__bottle {
        position: static;
        max-height: 60vh;
        max-width: 70%;
        margin-left: -10px;
    }
    .qb_squiz  .qb-hero__bottle {
        margin-left: -40px;
    }
    .qb-template.qb_spray .qb-hero__bottle-col { min-height: 1vh; }
    .qb-header__title { font-size: clamp(56px, 18vw, 120px); margin-bottom: 30px; }
    .qb-description { padding: 24px 24px; }

    .qb-header__breadcrumb,
    .qb-header__subtitle,
    .qb-header__line { display: none; }
    .qb-description h4 { font-size: 45px; }

    /* Reposition decos for mobile — only decor 1 is visible */
    .qb-hero__deco--1 {
        top: auto;
        bottom: -30px;
        right: -30px;
        max-width: 50% !important;
    }
    .qb-hero__deco--2 { display: none; }
    .qb-hero__deco--3 { display: none; }

    /* Decos 2 and 3 reappear in mobile as pseudo-elements framing the
       description block (top-right and bottom-right) */
    .qb-description { position: relative; }
    .qb-description::before,
    .qb-description::after {
        content: '';
        position: absolute;
        width: 45%;
        aspect-ratio: 1 / 1;
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }
    .qb-description::before {
        top: 0px;
        left: -20px;
        background-image: var(--qb-deco-bottom);
        transform: rotate(200deg);
    }
    .qb-template.qb_spray .qb-description::before { top: -60px; }
    .qb-description::after {
        bottom: -40px;
        right: 10px;
        background-image: var(--qb-deco-top);
        transform: rotate(210deg);
        width: 30%;
    }
    .qb-template.qb_spray .qb-hero__banner-wrap {
        height: 40vh;
    }
    .qb-ideal-for {
        margin-bottom: 0px;
    }
    .qb-template.qb_spray .qb-hero__banner {
        max-width: 100%;
        margin-top: 0;
    }
}
/* Spray banner fine-tune for 1200–1312px range */
/* @media (min-width: 1200px) and (max-width: 1312px) {
    .qb-template.qb_spray .qb-hero__banner {
        margin-left: calc(45% - 50vw);
        margin-top: calc(20% - 50vh);
    }

} */
@media (min-width: 2000px) {
    .qb-template.qb_spray .qb-hero__banner {
        margin-left: calc(50% - 50vw);
        margin-top: calc(30% - 50vh);
    }
    .qb-template.qb_spray .qb-hero__bottle-col { min-height: 180vh; }
    .qb-template.qb_spray .qb-hero__deco--1 { top: 60vh; }
    .qb-template.qb_spray .qb-hero__deco--2 { top: 103vh; }
    .qb-template.qb_spray .qb-ideal-for { min-height: 48vh; }
    .qb-template.qb_spray .qb-description { min-height: 40vh; }
}