/* ============================================================
   SCHAR ARTISAN BAKER — Custom CSS
   Colors, layout and structure matched to design
   ============================================================ */

/* ----------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
    --clr-neutral-0:    #ffffff;
    --clr-yellow-500:   #FFD100;
    --clr-red-500:      #cf003e;
    --clr-red-600:      #a8092f;
    --clr-brown-050:    #f4efe9;
    --clr-brown-100:    #e9ded4;
    --clr-brown-300:    #dbc8b7;
    --clr-brown-500:    #3d2b30;

    --schar-radius-pill:   50px;
    --schar-radius-circle: 50%;

    /* Height of the sticky header — .schar-navbar's min-height. The hero
       subtracts it to fill exactly what is left of the viewport. */
    --schar-header-h:      56px;

    --schar-icon-size:     72px;
    @media (min-width: 480px) {
        --schar-icon-size:     90px;
    }

    --schar-transition:    0.25s ease;
}

/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
}

body {
    overflow-x: hidden;
    background-color: var(--clr-brown-500);
    color: var(--clr-neutral-0);
    font-family: "Cabin", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
}

body,
h1,
h2,
h3,
ul,
p {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

h1,
h2,
h3 {
    font-family: "Playfair Display", sans-serif;
    font-weight: 900;
    text-align: left;
}

h1 {
    font-size: 40px;
    line-height: 1.05;
}
@media (min-width: 768px) {
    h1 {
        font-size: 56px;
    }
}
@media (min-width: 960px) {
    h1 {
        font-size: 68px;
    }
}

h2 {
    font-size: 36px;
    line-height: 1.1;
}
@media (min-width: 768px) {
    h2 {
        font-size: 48px;
    }
}

h3 {
    font-size: 24px;
}

section {
    padding: 44px 0;
}

.schar-dot {
    display: inline;
    color: var(--clr-red-500);
}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.schar-btn {
    font-size: 1rem;
    font-weight: 700;
    border: none;
    padding: 12px 32px;
    min-width: 200px;
    width: fit-content;
}

.schar-btn--red {
    background-color: var(--clr-red-500);
    border: 1px solid var(--clr-red-500);
    color: var(--clr-neutral-0);
}

.schar-btn--red:hover,
.schar-btn--red:focus-visible {
    background-color: var(--clr-red-600);
    border: 1px solid var(--clr-red-600);
    color: var(--clr-neutral-0);
    box-shadow: 0 6px 20px rgba(207, 0, 62, 0.4);
}

.schar-btn--yellow {
    background-color: var(--clr-yellow-500);
    border: 1px solid var(--clr-yellow-500);
    color: var(--clr-red-500);
}

.schar-btn--yellow:hover,
.schar-btn--yellow:focus-visible {
    background-color: var(--clr-red-600);
    border: 1px solid var(--clr-red-600);
    color: var(--clr-neutral-0);
    box-shadow: 0 6px 20px rgba(207, 0, 62, 0.4);
}

.schar-btn-outline--red {
    background: transparent;
    border: 1px solid var(--clr-red-500);
    color: var(--clr-red-500);
}

.schar-btn-outline--red:hover,
.schar-btn-outline--red:focus-visible {
    background-color: var(--clr-red-600);
    border: 1px solid var(--clr-red-600);
    color: var(--clr-neutral-0);
    box-shadow: 0 6px 20px rgba(207, 0, 62, 0.4);
}

/* ----------------------------------------------------------
   HEADER / NAVBAR
   ---------------------------------------------------------- */
.schar-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.schar-navbar {
    background-color: var(--clr-yellow-500) !important;
    min-height: 56px;
}

.schar-navbar .container-fluid {
    display: flex;
    align-items: center;
}

.schar-navbar .navbar-brand {
    margin: 0;
}

.schar-navbar .navbar-brand img {
    max-height: 38px;
    width: auto;
}

/* ── Hamburger (mobile only) ─────────────────────────────── */
.schar-header__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-brown-500);
    font-size: 1.6rem;
    padding: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--schar-transition);
    order: -1;
    margin-right: 0.5rem;
}

.schar-header__hamburger:hover {
    opacity: 0.7;
}

/* ── Desktop nav links ───────────────────────────────────── */
.schar-navbar__links {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.schar-navbar__link {
    color: var(--clr-brown-500);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    transition: opacity var(--schar-transition);
}

.schar-navbar__link:hover {
    opacity: 0.7;
    color: var(--clr-brown-500);
}

/* ── Right side (CTA + lang selector) ────────────────────── */
.schar-navbar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* ── CTA button (last nav item) — desktop only ───────────── */
.schar-navbar__cta {
    display: none;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--clr-red-500);
    color: var(--clr-neutral-0);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.45rem 1.25rem;
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color var(--schar-transition), box-shadow var(--schar-transition);
}

.schar-navbar__cta:hover {
    background-color: var(--clr-red-600);
    color: var(--clr-neutral-0);
    box-shadow: 0 4px 12px rgba(207, 0, 62, 0.35);
}

.schar-navbar__cta img {
    width: 24px;
    height: 24px;
}

/* ── Desktop breakpoint ──────────────────────────────────── */
@media (min-width: 960px) {
    .schar-header__hamburger {
        display: none;
    }

    .schar-navbar__links {
        display: flex;
    }

    .schar-navbar__cta {
        display: inline-flex;
    }

    /* On mobile the logo is centered; on desktop it flows naturally */
    .schar-navbar .navbar-brand {
        flex: 0 0 auto;
        margin-right: 1rem;
    }
}

/* ── Mobile: center the logo ─────────────────────────────── */
@media (max-width: 960px) {
    .schar-navbar .container-fluid {
        position: relative;
        justify-content: center;
    }

    .schar-header__hamburger {
        position: absolute;
        left: 0;
    }

    .schar-navbar__right {
        position: absolute;
        right: 0;
    }

    /* Hide desktop-only lang selector on mobile (it's inside the offcanvas) */
    .schar-navbar__right .schar-lang-selector {
        display: none;
    }
}

#mobileNavLinks li a {
    color: var(--clr-brown-500);
}

/* ----------------------------------------------------------
   SECTION — base + modifiers
   ---------------------------------------------------------- */
.schar-section {
    padding: 56px 0;
}
@media (min-width: 960px) {
    .schar-section {
        padding: 88px 0;
    }
}

.schar-section--cream {
    background-color: var(--clr-brown-050);
    color: var(--clr-brown-500);
}

.schar-section--tan {
    background-color: var(--clr-brown-100);
    color: var(--clr-brown-500);
}

.schar-section--tan-dark {
    background-color: var(--clr-brown-300);
    color: var(--clr-brown-500);
}

.schar-section--dark {
    background-color: var(--clr-brown-500);
    color: var(--clr-neutral-0);
}

/* Two-column content layout (text + image) */
.schar-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
@media (min-width: 960px) {
    .schar-section__content {
        flex-direction: row;
        align-items: center;
        gap: 56px;
    }
}

/* Stacked variant — text on top, media full-width below (used for video & spotlight) */
.schar-section__content--stacked,
.schar-section__content--stacked.schar-section__content {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
}
@media (min-width: 960px) {
    .schar-section__content--stacked,
    .schar-section__content--stacked.schar-section__content {
        flex-direction: column;
        gap: 40px;
    }
}

/* Mobile-reverse variant — used for "Goodies Near You" (image on top mobile, image on right desktop) */
.schar-section__content--mobile-reverse {
    flex-direction: column-reverse;
}
@media (min-width: 960px) {
    .schar-section__content--mobile-reverse {
        flex-direction: row;
    }
}

/* Reverse variant — image on left (desktop) */
.schar-section__content--reverse {
    flex-direction: column;
}
@media (min-width: 960px) {
    .schar-section__content--reverse {
        flex-direction: row-reverse;
    }
}

.schar-section__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

@media (min-width: 960px) {
    .schar-section__content > .schar-section__image,
    .schar-section__content > .schar-section__video {
        flex: 1 1 auto;
        max-width: 50%;
    }
    .schar-section__content--stacked > .schar-section__text {
        flex: 0 1 auto;
    }
}

.schar-section__headline {
    color: inherit;
    margin: 0;
    font-size: 26px;
}
@media (min-width: 768px) {
    .schar-section__headline {
        font-size: 32px;
    }
}

.schar-section__headline--image {
    line-height: 0;
}

.schar-section__headline--image img {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
}

.schar-section__headline span {
    color: var(--clr-brown-500);
}

/* Section default text color override per modifier — headline span color cascades from section text colors via specific overrides below */
.schar-section--dark .schar-section__headline span {
    color: var(--clr-neutral-0);
}

.schar-section__description {
    font-size: 16px;
    line-height: 1.55;
    color: inherit;
}
@media (min-width: 768px) {
    .schar-section__description {
        font-size: 17px;
    }
}

.schar-section__description p {
    margin: 1rem 0;
}

.schar-section__image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.schar-hero {
    position: relative;
    background-color: var(--clr-brown-500);
    color: var(--clr-neutral-0);
    min-height: calc(100vh - var(--schar-header-h));
    min-height: calc(100svh - var(--schar-header-h));
    padding: 1rem 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.schar-hero__badge-img {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: auto;
    max-width: 120px;
    right: 0;
    bottom: 5%;
}
@media (min-width: 768px) {
    .schar-hero__badge-img {
        max-width: 200px;
        bottom: auto;
    }
}

.schar-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.schar-hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Soft top overlay to keep the yellow text readable on the lighter portion of the photo */
.schar-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(61, 43, 48, 0.75) 0%,
        rgba(61, 43, 48, 0.45) 35%,
        rgba(61, 43, 48, 0) 60%);
    pointer-events: none;
    z-index: 1;
}

.schar-hero .container {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.schar-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 640px;
    padding: 16px 0 32px;
    flex: 1 1 auto;
}

.schar-hero__headline {
    color: var(--clr-brown-300);
    margin: 0;
}

.schar-hero__description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--clr-neutral-0);
    max-width: 460px;
}

.schar-hero__description p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

.schar-hero__description p:first-child {
    font-weight: 600;
    font-style: normal;
}

@media (min-width: 960px) {
    .schar-hero {
        min-height: 680px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .schar-hero__bg img {
        object-position: center center;
    }

    .schar-hero::before {
        background: linear-gradient(to right,
            rgba(61, 43, 48, 0.85) 0%,
            rgba(61, 43, 48, 0.5) 40%,
            rgba(61, 43, 48, 0) 65%);
    }

    .schar-hero__content {
        max-width: 50%;
        padding: 0;
        gap: 24px;
    }
}

/* ----------------------------------------------------------
   SECTION — "the rise of the Artisan Baker bread"
   ---------------------------------------------------------- */
.schar-section--cream {
    background-color: var(--clr-brown-300);
}

.schar-section--cream .schar-section__headline {
    color: var(--clr-red-500);
}

.schar-section--cream .schar-section__headline span:not(.schar-dot) {
    color: var(--clr-brown-500);
}

.schar-section--cream .schar-section__headline .schar-dot {
    color: var(--clr-red-500);
}

/* ----------------------------------------------------------
   SECTION — "play & win"
   ---------------------------------------------------------- */
.schar-section--game {
    background-color: var(--clr-brown-500);
    background-image: url("../assets/schar-section-game-bg-mobile.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}
@media (min-width: 960px) {
    .schar-section--game {
        background-image: url("../assets/schar-section-game-bg-desktop.png");
    }
}

.schar-section--game .schar-section__description {
    color: var(--clr-brown-100);
}

.schar-section--game .schar-section__image {
    background: transparent;
    border-radius: 0;
    max-width: 560px;
    margin: 0 auto;
}

/* Mobile-only: reorder play & win intro so the visual flow is headline → jars → description → button */
@media (max-width: 960px) {
    .schar-section--game [data-game-panel="intro"] .schar-section__text {
        display: contents;
    }
    .schar-section--game [data-game-panel="intro"].schar-section__content {
        gap: 24px;
    }
    .schar-section--game [data-game-panel="intro"] .schar-section__headline--image {
        order: 1;
    }
    .schar-section--game [data-game-panel="intro"] .schar-section__image {
        order: 2;
    }
    .schar-section--game [data-game-panel="intro"] .schar-section__description {
        order: 3;
    }
    .schar-section--game [data-game-panel="intro"] .schar-btn {
        order: 4;
        align-self: center;
    }
}

/* ----------------------------------------------------------
   GAME — multi-step flow inside .schar-section--game
   ---------------------------------------------------------- */

/* Panel-level toggling (intro vs stage) */
.schar-game-panel {
    opacity: 1;
    transition: opacity 250ms ease;
}
.schar-game-panel[hidden] {
    display: none;
}

/* Stage layout: headline left, dynamic step on the right (desktop) / stacked (mobile) */
.schar-game-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
@media (min-width: 960px) {
    .schar-game-stage {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 56px;
    }
}

/* Headline — PNG with screen-reader-only text twin for a11y / SEO */
.schar-game-headline {
    margin: 0;
    display: flex;
    justify-content: center;
}

.schar-game-headline__image {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* Visually hide the text, keep it in the accessibility tree */
.schar-game-headline__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 960px) {
    .schar-game-headline {
        flex: 0 0 auto;
        max-width: 45%;
        justify-content: flex-start;
    }
    .schar-game-headline__image {
        max-width: 500px;
    }
}

/* Panels area on the right (desktop) / below headline (mobile) */
.schar-game-panels {
    width: 100%;
    display: flex;
    justify-content: center;
}
@media (min-width: 960px) {
    .schar-game-panels {
        flex: 1 1 auto;
        max-width: 560px;
    }
}

.schar-game-step {
    width: 100%;
    opacity: 0;
    transition: opacity 250ms ease;
}
.schar-game-step:not([hidden]) {
    opacity: 1;
}

/* ── Game board (jar + slider + Lock it) ───────────────── */
.schar-game-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 480px;
    margin: 0 auto;
}

.schar-game-jar {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* Custom slider styling — cross-browser
   Visual layers:
     - the input element itself is the outer cream pill (background + radius)
     - the runnable-track inside is a thin gray-brown line through the middle
     - the thumb is a red circle that overlaps the line
*/
.schar-game-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    background: var(--clr-brown-050);
    border-radius: var(--schar-radius-pill);
    cursor: pointer;
    padding: 0 14px;
    margin: 0;
    box-sizing: border-box;
}
.schar-game-slider:focus {
    outline: none;
}

/* Track — thin gray line */
.schar-game-slider::-webkit-slider-runnable-track {
    height: 3px;
    background: #8a7c7e;
    border-radius: 2px;
    border: none;
}
.schar-game-slider::-moz-range-track {
    height: 3px;
    background: #8a7c7e;
    border-radius: 2px;
    border: none;
}

/* Thumb — red circle, centered on the thin track */
.schar-game-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: var(--schar-radius-circle);
    background: var(--clr-red-500);
    border: none;
    margin-top: -11px;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 120ms ease;
}
.schar-game-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}
.schar-game-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: var(--schar-radius-circle);
    background: var(--clr-red-500);
    border: none;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 120ms ease;
}
.schar-game-slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

/* ── Result cards (win / fail / cream variants) ─────────── */
.schar-game-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 36px 32px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.schar-game-card__title {
    font-family: "Playfair Display", sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1.05;
    margin: 0;
    text-align: center;
}
.schar-game-card__title--small {
    font-size: 24px;
    text-align: left;
    width: 100%;
}
.schar-game-card__title-accent {
    display: inline-block;
}

.schar-game-card__body {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
}
.schar-game-card__body--left {
    text-align: left;
    width: 100%;
}

.schar-game-card .schar-btn {
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

/* Decorative jar background images (only on win/fail cards) */
.schar-game-card--win,
.schar-game-card--fail {
    isolation: isolate;
}
.schar-game-card--win::before,
.schar-game-card--win::after,
.schar-game-card--fail::before,
.schar-game-card--fail::after {
    content: "";
    position: absolute;
    bottom: -32px;
    width: 180px;
    height: 160px;
    background-image: url(../assets/schar-sourdough.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.18;
    pointer-events: none;
    z-index: 1;
}
.schar-game-card--win::before,
.schar-game-card--fail::before {
    left: -56px;
    transform: rotate(24deg);
}
.schar-game-card--win::after,
.schar-game-card--fail::after {
    right: -56px;
    transform: rotate(-24deg);
}

/* Win card — yellow background */
.schar-game-card--win {
    background-color: var(--clr-yellow-500);
    color: var(--clr-brown-500);
}
.schar-game-card--win .schar-game-card__title {
    color: var(--clr-brown-500);
}
.schar-game-card--win .schar-game-card__title-accent {
    color: var(--clr-red-500);
    font-size: 1.35em;
}
.schar-game-card--win .schar-game-card__title .schar-dot {
    color: var(--clr-red-500);
}

/* Fail card — red background */
.schar-game-card--fail {
    background-color: var(--clr-red-500);
    color: var(--clr-neutral-0);
}
.schar-game-card--fail .schar-game-card__title {
    color: var(--clr-neutral-0);
}
.schar-game-card--fail .schar-game-card__title-accent {
    color: var(--clr-yellow-500);
}
.schar-game-card--fail .schar-game-card__title .schar-dot {
    color: var(--clr-yellow-500);
}
.schar-game-card--fail .schar-btn--yellow {
    background-color: var(--clr-yellow-500);
    border-color: var(--clr-yellow-500);
    color: var(--clr-red-500);
}

/* Cream card variant (form, form-success, form-duplicate) */
.schar-game-card--cream {
    background-color: var(--clr-brown-050);
    color: var(--clr-brown-500);
    align-items: stretch;
    text-align: left;
}
.schar-game-card--cream .schar-game-card__title {
    color: var(--clr-red-500);
    text-align: left;
}
.schar-game-card--cream .schar-game-card__title .schar-dot {
    color: var(--clr-red-500);
}
.schar-game-card--cream .schar-game-card__body {
    color: var(--clr-brown-500);
    text-align: left;
}
.schar-game-card--cream .schar-btn {
    width: 100%;
    align-self: center;
}

/* Centered variant for form-success / form-duplicate */
.schar-game-card--centered {
    align-items: center;
    text-align: center;
    padding: 48px 32px;
    gap: 32px;
}
.schar-game-card--centered .schar-game-card__title,
.schar-game-card--centered .schar-game-card__body {
    text-align: center;
}

/* ── Form (inputs underline-style + checkboxes) ─────────── */
.schar-game-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.schar-game-form__mandatory {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--clr-brown-500);
}

.schar-game-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schar-game-form__field input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--clr-brown-300);
    background: transparent;
    padding: 8px 0;
    font-family: inherit;
    font-size: 15px;
    color: var(--clr-brown-500);
    outline: none;
}
.schar-game-form__field input:focus {
    border-bottom-color: var(--clr-red-500);
}
.schar-game-form__field input::placeholder {
    color: var(--clr-brown-500);
    opacity: 0.65;
}
.schar-game-form__field.is-invalid input {
    border-bottom-color: var(--clr-red-500);
}

.schar-game-form__field select {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--clr-brown-300);
    background: transparent;
    padding: 8px 24px 8px 0;
    font-family: inherit;
    font-size: 15px;
    color: var(--clr-brown-500);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath stroke='%233d2b30' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    border-radius: 0;
}
.schar-game-form__field select:focus {
    border-bottom-color: var(--clr-red-500);
}
.schar-game-form__field select:invalid {
    color: var(--clr-brown-500);
    opacity: 0.65;
}
.schar-game-form__field select option {
    color: var(--clr-brown-500);
    opacity: 1;
}
.schar-game-form__field.is-invalid select {
    border-bottom-color: var(--clr-red-500);
}

.schar-game-form__error {
    color: var(--clr-red-500);
    font-size: 12px;
}

.schar-game-form__notice {
    margin: 8px 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--clr-brown-500);
}

.schar-game-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--clr-brown-500);
    cursor: pointer;
}
.schar-game-form__checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--clr-red-500);
    cursor: pointer;
}

.schar-game-form__checkbox a {
    color: var(--clr-red-500);
}
.schar-game-form__checkbox a:hover {
    text-decoration: none;
}

.schar-game-form__generic-error {
    margin: 0;
    color: var(--clr-red-500);
    font-size: 13px;
    text-align: center;
}

.schar-game-form__submit {
    margin-top: 12px;
    width: 100%;
}
.schar-game-form__submit:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Compact mobile tweaks (avoid overflow at narrow widths) */
@media (max-width: 480px) {
    .schar-game-headline__image { max-width: 240px; }

    .schar-game-card { padding: 28px 24px; }
    .schar-game-card__title { font-size: 30px; }
}

/* ----------------------------------------------------------
   SECTION — Video
   ---------------------------------------------------------- */
.schar-section--video {
    background-color: var(--clr-brown-100);
}
.schar-section--video .schar-section__text {
    margin: 0 auto;
    text-align: center;
    align-items: center;
}

.schar-section--video .schar-section__description {
    text-align: center;
    color: var(--clr-brown-500);
}

.schar-section__video {
    display: block;
    width: 100%;
    border-radius: 8px;
    background-color: #000;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.schar-section--video .schar-section__content,
.schar-section--quality .schar-section__content,
.schar-section--goodies .schar-section__content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* ----------------------------------------------------------
   SECTION — "a spotlight well-earned by Artisan Baker"
   ---------------------------------------------------------- */
.schar-section--spotlight {
    background-color: var(--clr-brown-300);
}

.schar-section--spotlight .schar-section__headline {
    color: var(--clr-red-500);
}

.schar-section--spotlight .schar-section__headline span:not(.schar-dot) {
    color: var(--clr-brown-500);
    display: block;
}

.schar-section--spotlight .schar-section__headline .schar-dot {
    color: var(--clr-red-500);
}

/* Empty swiper placeholder — reserves no visual space until carousel is added */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--clr-red-500);
}

@media (max-width: 768px) {
    #product-swiper {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding: 0 1rem;
    }
}

#product-swiper .swiper-wrapper {
    margin-bottom: 40px;
}

#product-swiper .swiper-pagination-bullet {
    background: transparent;
    border: 2px solid var(--clr-brown-500);
}

#product-swiper .swiper-pagination-bullet-active {
    width: 20px;
    background-color: var(--clr-brown-500);
    border-radius: 4px;
}

.product-card {
    background-color: var(--clr-brown-050);
    padding: 44px 24px 16px;
}

.card-title {
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-card .card-image {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin: 0 auto 32px;
    display: block;
}

.product-rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.product-quantity {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 32px;
}

.card-cta {
    width: 100%;
    padding-inline: 1rem;
    min-width: unset;
}

/* ----------------------------------------------------------
   SECTION — "Our quality commitment"
   ---------------------------------------------------------- */
.schar-section--quality {
    background-color: var(--clr-brown-100);
}

.schar-section--quality .schar-section__headline {
    color: var(--clr-red-500);
}

.schar-section--quality .schar-section__headline span {
    color: var(--clr-brown-500);
}

/* ----------------------------------------------------------
   SECTION — "Looking for Gluten-Free Goodies Near You?"
   ---------------------------------------------------------- */
.schar-section--goodies {
    background-color: var(--clr-brown-300);
}
.schar-section--goodies .schar-section__headline {
    color: var(--clr-brown-500);
}

.schar-section--goodies .schar-section__headline span:not(.schar-dot) {
    color: var(--clr-red-500);
    display: block;
}

.schar-section--goodies .schar-section__image {
    background-color: var(--clr-brown-300);
    border-radius: 0;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
footer {
    font-size: 14px;
}

footer h3 {
    font-size: inherit;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Cabin", sans-serif;
    margin-bottom: 16px;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Sub-section top: yellow bg, brown text (categories + logo/social) */
footer .sub-section-top {
    background-color: var(--clr-yellow-500);
    color: var(--clr-brown-500);
}

.footer-logo {
    width: 80px;
    height: auto;
}

footer .sub-section-top-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: flex-start;
    gap: 32px;
}
/* The logo track is `auto`, not `1fr`: the image is a fixed 80px, so a
   fractional track only padded it with dead space the link columns need for
   longer languages (German) at 992-1199px. The narrower column-gap is bought
   for the same reason; the 32px row-gap of the stacked mobile layout stays. */
@media (min-width: 768px) {
    footer .sub-section-top-inner  {
        grid-template-columns: auto 2fr 2fr auto;
        column-gap: 24px;
    }
}

/* The trailing padding is part of what has to fit on the line, so it is kept
   small: the longest German label plus its chevron needs 136px of the 145px
   the sub-column gets at 992-1199px. */
footer .sub-section-top-inner .product-links a {
    text-transform: uppercase;
    font-weight: 700;
    padding-right: .25rem;
    font-size: .75rem;
}

footer .sub-section-top .product-links,
footer .sub-section-top .useful-links {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 4px;
}
/* Two columns only from 992px. This one is NOT the site's 960px desktop
   breakpoint and must not be aligned to it: 992px is where Bootstrap's
   .container jumps from 720px to 960px. Below it two tracks leave ~108px each,
   narrower than a German product label, which wrapped every entry. One taller
   column there instead. */
@media (min-width: 992px) {
    footer .sub-section-top .product-links,
    footer .sub-section-top .useful-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-social {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.footer-social li img {
    width: 32px;
    height: auto;
}

/* Sub-section middle: red bg, white text (info links) */
footer .sub-section-middle {
    background-color: var(--clr-red-500);
    color: var(--clr-neutral-0);
}

footer .sub-section-middle-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
@media (min-width: 768px) {
    footer .sub-section-middle-inner  {
        grid-template-columns: repeat(2, 1fr);
    }
}

footer .sub-section-middle-inner ul {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.footer-legal-links,
.footer-corporate-links {
    flex-wrap: wrap;
}

/* Sub-section bottom: dark red bg, white text (legal, research, copyright) */
footer .sub-section-bottom {
    background-color: var(--clr-red-600);
    color: var(--clr-neutral-0);
    text-align: center;
}

#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
    background-color: unset !important;
    font-size: inherit !important;
    padding: inherit !important;
    border: none !important;
    outline: none !important;
    color: var(--clr-neutral-0) !important;
}

#ot-sdk-btn.ot-sdk-show-settings:hover,
#ot-sdk-btn.optanon-show-settings:hover {
    text-decoration: underline !important;
    color: inherit !important;
}


#ot-sdk-btn.ot-sdk-show-settings:active,
#ot-sdk-btn.optanon-show-settings:active {
    border: none !important;
}

.userway_buttons_wrapper {
    top: auto !important;
    bottom: 16px !important;
    left: 16px !important;
    transform: unset !important;
}

.uai {
    background: rgb(61, 43, 48) !important;
}


/* ── Country switcher ─────────────────────────────────────────
   Footer dropdown of the countries declared in app/data/countries.php. Rendered
   only when there is more than one, so a single-market deployment looks exactly
   as it did before. Labels are written in each country's own language, so the
   list is readable to someone who cannot read the page they are on.

   A Bootstrap dropup holding real links: the menu opens upwards because it sits
   at the bottom of the footer, and the items stay <a> elements so the switcher
   works with JavaScript off. */
.schar-country-switcher .btn {
    color: var(--clr-neutral-0);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: inherit;
    line-height: inherit;
}

.schar-country-switcher .btn:hover,
.schar-country-switcher .btn:focus-visible {
    color: var(--clr-neutral-0);
    border-color: var(--clr-neutral-0);
}

.schar-country-switcher .dropdown-menu {
    min-width: 0;
    border-radius: 4px;
    padding: 4px 0;
}

.schar-country-switcher .dropdown-item {
    padding: 6px 16px;
}

/* The current country stays in the list — removing it would make the menu
   change length as you switch — and is marked rather than dropped. */
.schar-country-switcher .dropdown-item.active,
.schar-country-switcher .dropdown-item:active {
    background-color: var(--clr-red-500);
    color: var(--clr-neutral-0);
}

/* ── Campaign closed ──────────────────────────────────────────
   The note under the Play now button when this country's campaign has not
   started yet or has already ended. */
.schar-campaign-note {
    margin: 12px 0 0;
    font-size: 0.9375rem;
    opacity: 0.85;
}

.schar-campaign-modal .modal-content {
    background-color: var(--clr-brown-050);
    color: var(--clr-brown-500);
    border: none;
    border-radius: 16px;
    text-align: center;
}

.schar-campaign-modal .modal-body {
    padding: 32px 24px;
}