:root {
    --bulma-family-sans-serif: 'Mulish', sans-serif;
    --bulma-family-primary: 'Mulish', sans-serif;
    /* ─── Primary: #ffc800 (golden yellow) ─────────────────────────────────── */
    --bulma-primary:   #ffc800;
    --bulma-primary-base: #ffc800;
    /* HSL components — used by Bulma to compute all shade variants */
    --bulma-primary-h: 47deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 50%;

    /* Invert = text/icon shown ON a primary-coloured surface.
       Yellow is bright (L 50%, contrast with black ≈ 13:1), so use dark. */
    --bulma-primary-invert-l: 12%;
    --bulma-primary-invert: hsl(47, 100%, 12%);

    /* On-scheme = primary-tinted text used on a white/light page background */
    --bulma-primary-on-scheme-l: 28%;
    --bulma-primary-on-scheme: hsl(47, 100%, 28%);

    /* .is-light modifier */
    --bulma-primary-light-l: 93%;
    --bulma-primary-light: hsl(47, 100%, 93%);
    --bulma-primary-light-invert-l: 28%;
    --bulma-primary-light-invert: hsl(47, 100%, 28%);

    /* .is-dark modifier */
    --bulma-primary-dark-l: 28%;
    --bulma-primary-dark: hsl(47, 100%, 28%);
    --bulma-primary-dark-invert-l: 93%;
    --bulma-primary-dark-invert: hsl(47, 100%, 93%);

    /* Soft (pastel tint) / Bold (deep tint) pairs */
    --bulma-primary-soft: hsl(47, 100%, 93%);
    --bulma-primary-bold: hsl(47, 100%, 28%);
    --bulma-primary-soft-invert: hsl(47, 100%, 28%);
    --bulma-primary-bold-invert: hsl(47, 100%, 93%);

    /* ─── Secondary: #0e2b4d (dark navy) ───────────────────────────────────── */
    --bulma-secondary: #0e2b4d;
    --bulma-secondary-base: #0e2b4d;
    /* HSL components */
    --bulma-secondary-h: 212deg;
    --bulma-secondary-s: 69%;
    --bulma-secondary-l: 18%;

    /* Invert = text on a secondary-coloured surface.
       Navy is dark (L 18%, contrast with white ≈ 14:1), so use white. */
    --bulma-secondary-invert-l: 100%;
    --bulma-secondary-invert: hsl(212, 69%, 100%);

    /* On-scheme = secondary-tinted text on a white/light page background */
    --bulma-secondary-on-scheme-l: 22%;
    --bulma-secondary-on-scheme: hsl(212, 69%, 22%);

    /* .is-light modifier */
    --bulma-secondary-light-l: 93%;
    --bulma-secondary-light: hsl(212, 69%, 93%);
    --bulma-secondary-light-invert-l: 22%;
    --bulma-secondary-light-invert: hsl(212, 69%, 22%);

    /* .is-dark modifier */
    --bulma-secondary-dark-l: 22%;
    --bulma-secondary-dark: hsl(212, 69%, 22%);
    --bulma-secondary-dark-invert-l: 100%;
    --bulma-secondary-dark-invert: hsl(212, 69%, 100%);

    /* Soft / Bold pairs */
    --bulma-secondary-soft: hsl(212, 69%, 93%);
    --bulma-secondary-bold: hsl(212, 69%, 18%);
    --bulma-secondary-soft-invert: hsl(212, 69%, 20%);
    --bulma-secondary-bold-invert: hsl(212, 69%, 93%);

    /* ─── Success: #2ea84f (green) ───────────────────────────────────── */
    --bulma-success: #2ea84f;
    --bulma-success-base: #2ea84f;
    /* HSL components */
    --bulma-success-h: 136deg;
    --bulma-success-s: 57%;
    --bulma-success-l: 42%;

    /* Invert = text/icon shown ON a success-coloured surface.
       Green at L 42% has good contrast with white, so use white. */
    --bulma-success-invert-l: 100%;
    --bulma-success-invert: hsl(136, 57%, 100%);

    /* On-scheme = success-tinted text used on a white/light page background */
    --bulma-success-on-scheme-l: 30%;
    --bulma-success-on-scheme: hsl(136, 57%, 30%);

    /* .is-light modifier */
    --bulma-success-light-l: 93%;
    --bulma-success-light: hsl(136, 57%, 93%);
    --bulma-success-light-invert-l: 30%;
    --bulma-success-light-invert: hsl(136, 57%, 30%);

    /* .is-dark modifier */
    --bulma-success-dark-l: 30%;
    --bulma-success-dark: hsl(136, 57%, 30%);
    --bulma-success-dark-invert-l: 100%;
    --bulma-success-dark-invert: hsl(136, 57%, 100%);

    /* Soft (pastel tint) / Bold (deep tint) pairs */
    --bulma-success-soft: hsl(136, 57%, 93%);
    --bulma-success-bold: hsl(136, 57%, 30%);
    --bulma-success-soft-invert: hsl(136, 57%, 30%);
    --bulma-success-bold-invert: hsl(136, 57%, 100%);

    --home-section-title-font-size: 2.5rem;
    --home-section-title-line-height: 2.5rem;
    --home-section-title-font-weight: 900;
    --home-section-title-letter-spacing: -0.05rem;
    --home-section-subtitle-font-size: 0.9rem;
    --home-section-subtitle-line-height: 1.2rem;
}

img.logo-top {
    max-height: 2.5rem;
    width: auto;
}

section.hero.is-secondary {
    background-color: var(--bulma-secondary);
    color: white;
}

footer.footer {
    background-color: var(--bulma-secondary);
    color: white;
    padding: 1rem;
}


.button.shopping-cart {
    font-weight: bold;
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1rem;
    border: 0.15rem solid var(--bulma-primary-dark);
}

.button.shopping-cart:hover {
    border: 0.15rem solid var(--bulma-secondary);
}

.button.shopping-cart .icon {
    font-size: 1.3rem;
}
.button.shopping-cart .tag {
    font-size: 0.5rem;
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
}

h2.title {
    em {
        font-style: normal;
        background: linear-gradient(#f5c800, #f5c800);
        background-size: 100% 0.7rem;          /* width: full, height: thickness */
        background-repeat: no-repeat;
        background-position: 0 100%;        /* pin to bottom */
        padding-bottom: 5px;                /* gap between text and line */
    }
}

/* Bulma's mobile modal is width: 100% plus side margins, which overflows the viewport. */
@media screen and (max-width: 768px) {
    .modal-card,
    .modal-content {
        width: calc(100% - 2 * var(--bulma-modal-content-margin-mobile));
    }
}

.modal-card-head {
    gap: 0.75rem;
}