/* Shop-specific overrides on top of the Kalles template (bootstrap.css / app.css). */

/* House font: Open Sans, served from our own server (variable font, weights 300–800). */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/open-sans/open-sans-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/open-sans/open-sans-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/open-sans/open-sans-italic-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/open-sans/open-sans-italic-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/*
 * CI palette. The base colours are replaced directly in bootstrap.css, app.css and app.rtl.css:
 * Bordeaux #88032f (primary, links, danger), link hover #6a0225, Gold #a49261 (accent),
 * Anthrazit #2f2f33 (text, dark), Creme #f4f2dc (light surfaces), secondary text #6b6b70, border #dcd9bd.
 * The page background stays white; the derived Bootstrap shades are set here.
 */
:root {
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-primary-text-emphasis: rgb(54, 1, 19);
    --bs-primary-bg-subtle: rgb(231, 205, 213);
    --bs-primary-border-subtle: rgb(207, 154, 172);
    --bs-danger-text-emphasis: rgb(54, 1, 19);
    --bs-danger-bg-subtle: rgb(231, 205, 213);
    --bs-danger-border-subtle: rgb(207, 154, 172);
}

.font-secondary {
    font-family: "Open Sans", sans-serif;
}

/* Header: Bordeaux bar with the white logo and white top-level navigation. */
#kalles-section-header_top .navbar-custom,
#kalles-section-header_top .navbar-custom.navbar-scroll {
    background-color: #88032f;
}

#kalles-section-header_top .navbar-brand,
#kalles-section-header_top .navbar-custom .navbar-nav > .nav-item > .nav-link,
#kalles-section-header_top .navbar-custom .navbar-nav > .nav-item > .nav-link.text-danger,
#kalles-section-header_top .topbar-toolbar a {
    color: #ffffff !important;
}

#kalles-section-header_top .navbar-custom .navbar-nav > .nav-item > .nav-link:hover,
#kalles-section-header_top .topbar-toolbar a:hover {
    color: #a49261 !important;
}

#kalles-section-header_top .navbar-custom svg rect {
    fill: #ffffff;
}

/* Desktop: open the mega menus on hover; a click on the menu item goes to its product list. */
@media (min-width: 992px) {
    #kalles-section-header_top .navbar-nav > .nav-item.dropdown > .dropdown-menu {
        top: 100%;
        margin-top: 0;
    }

    #kalles-section-header_top .navbar-nav > .nav-item.dropdown:hover > .dropdown-menu,
    #kalles-section-header_top .navbar-nav > .nav-item.dropdown:focus-within > .dropdown-menu {
        display: block;
    }
}

/* Discount bubbles ("-30%") on product images and in lists: yellow for the Black Deals */
.sale-bubble {
    background-color: #ffb100 !important;
    color: #2f2f33 !important;
    font-weight: 700;
}

/* Home page campaign header (Black Deals) */
.campaign-hero {
    background-color: #0d0d0f;
}

.campaign-hero-stripes {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 28px);
    pointer-events: none;
}

.campaign-hero-eyebrow {
    color: #ffb100;
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
}

.campaign-hero-title {
    font-size: clamp(3.25rem, 11vw, 8.5rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.01em;
}

.campaign-hero-title-outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
}

.campaign-hero-text {
    max-width: 32rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.campaign-hero-button {
    background-color: #ffb100;
    border-color: #ffb100;
    color: #0d0d0f;
}

.campaign-hero-button:hover,
.campaign-hero-button:focus-visible {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0d0d0f;
}

.campaign-hero-bubble {
    width: clamp(13rem, 34vw, 22rem);
    aspect-ratio: 1;
    max-width: 100%;
    background-color: #ffb100;
    color: #0d0d0f;
    box-shadow: 0 0 0 0.75rem rgba(255, 177, 0, 0.18);
    transform: rotate(-8deg);
}

.campaign-hero-bubble-small {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.14em;
}

.campaign-hero-bubble-big {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.campaign-hero-bubble-word {
    text-transform: uppercase;
}

.campaign-countdown-part {
    min-width: 4.25rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.campaign-countdown-value {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.campaign-countdown-label {
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
}

/* Number of pieces in the cart: black number in a white circle on the cart icon */
.cart-count-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: #ffffff;
    color: #000000;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.cart-count-badge-header {
    top: -0.45rem;
    right: -0.6rem;
}

/* The mobile bottom bar is white, so the white circle gets a dark outline there. */
.cart-count-badge-toolbar {
    top: -0.35rem;
    right: -0.55rem;
    border: 1px solid #2f2f33;
}

#kalles-section-header_top .navbar-brand img {
    display: block;
    height: 40px;
    width: auto;
}

/* Store page (/filialen) */
.store-card {
    background-color: #ffffff;
    border-color: #dcd9bd !important;
}

.store-card-featured {
    border-top: 4px solid #88032f !important;
}

.store-card-route {
    color: #88032f;
}

.store-card-route:hover {
    color: #a49261;
}

/* Product list: filter sidebar on the left, always visible from lg */
@media (min-width: 992px) {
    .product-filter-sidebar {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}

/* Brand landing pages (/marke/...) */
.brand-hero {
    min-height: 360px;
    background-color: #2f2f33;
    background-size: cover;
    background-position: center;
}

.brand-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(47, 47, 51, 0.85) 0%, rgba(47, 47, 51, 0.35) 100%);
}

.brand-hero-eyebrow {
    color: #a49261;
    letter-spacing: 0.12em;
}

.brand-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.brand-hero-text {
    max-width: 36rem;
    line-height: 1.7;
}


/* Account page */
.account-card {
    background-color: #ffffff;
    border-color: #dcd9bd !important;
    border-top: 4px solid #88032f !important;
}

.account-data dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6b70;
}

.account-data dd {
    margin-bottom: 0.75rem;
}

.account-table th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6b70;
    white-space: nowrap;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Login page */
.login-card {
    background-color: #ffffff;
    border-color: #dcd9bd !important;
    border-top: 4px solid #88032f !important;
}

/* Legal pages (Impressum, Datenschutz, AGB, ...) */
.legal-page h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-page h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-page p,
.legal-page li {
    line-height: 1.7;
}