/* =====================================================
   Kirin Group – site.css  (SHARED across all sub-sites)
   Requires: Bootstrap 5 + Font Awesome 6

   Site-specific values (colours, logo, banner, fonts)
   are NOT hard-coded here. Override them per sub-site
   in site-theme.css, loaded after this file.

   CONTENTS
   0.  Theme tokens (defaults)
   1.  Global base utilities
   2.  Shared order buttons
   3.  Header & navigation
   4.  Homepage hero
   5.  Homepage sections
   6.  Footer
   7.  Shared inner-page components
   8.  Allergen notice & icons
   9.  Online ordering (Food Store)
   10. WooCommerce checkout
   ===================================================== */


/* =====================================================
   0. Theme tokens – DEFAULTS
   Override any of these in site-theme.css
   ===================================================== */

:root {
    /* Brand colours */
    --kg-primary: #a22d1a;
    --kg-primary-dark: #842414;
    --kg-primary-rgb: 162, 45, 26;      /* keep in sync with --kg-primary */
    --kg-accent: #cda34e;
    --kg-accent-rgb: 205, 163, 78;      /* keep in sync with --kg-accent */
    --kg-page-bg: #fff;

    /* Text */
    --kg-text: #212529;
    --kg-muted: #5c636a;

    /* Fonts */
    --kg-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --kg-font-heading: "Amatic SC", "Segoe UI", system-ui, sans-serif;
    --kg-font-dish: "Lora", Georgia, "Times New Roman", serif;
    --kg-font-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Images */
    --kg-logo-image: none;
    --kg-banner-image: none;
    --kg-banner-overlay: rgb(0 0 0 / 50%);

    /* Header */
    --kg-header-bg: #f1f1f1;
    --kg-header-text: #4e4e59;
    --kg-header-muted: #6b6b7c;
    --kg-logo-size: 130px;
    --kg-logo-size-scrolled: 110px;
    --kg-logo-size-sm: 90px;
    --kg-logo-size-sm-scrolled: 70px;
    --kg-logo-top: 6px;

    /* Footer */
    --kg-footer-bg: #3a1a14;
    --kg-footer-text: #fff;
    --kg-footer-social-bg: #eee2c8;

    /* Online ordering */
    --kg-menu-name: #1a1a1a;
    --kg-desc-color: #c2570c;
    --kg-count-active-bg: #923920;
    --kg-notice-bg: #fff8e6;
    --kg-notice-text: #5c4310;

    /* Shared (rarely changed) */
    --kg-transition: .2s ease;
    --kg-shadow-soft: 0 8px 30px rgb(0 0 0 / 6%);
}


/* =====================================================
   1. Global base utilities
   ===================================================== */

/* Anchor jumps: clear the sticky header */
html {
    scroll-padding-top: 5.5rem;
}

.kg-muted {
    color: var(--kg-muted);
}

.kg-section-title {
    font-family: var(--kg-font-heading);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

/* Skip link */
.kg-skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 16px;
    border-radius: 6px;
    background: #fff;
    color: var(--kg-primary);
    font-weight: 600;
    box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
}

/* Show AOS content if scripting is unavailable */
@media (scripting: none) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =====================================================
   2. Shared order buttons (Header + Hero)
   ===================================================== */

#lc-header .kg-order-button,
.hero .btn-get-started {
    border: 0;
    border-radius: 50rem;
    background-color: var(--kg-primary);
    color: #fff;
    text-decoration: none;
    transition: background-color var(--kg-transition),
                transform var(--kg-transition);
}

#lc-header .kg-order-button:hover,
.hero .btn-get-started:hover {
    background-color: var(--kg-primary-dark);
    color: #fff;
}

#lc-header .kg-order-button:focus-visible,
.hero .btn-get-started:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
}


/* =====================================================
   3. Header & navigation
   ===================================================== */

#lc-header {
    /* Internal working values; set from tokens in section 0 */
    --_py: 12px;
    --_logo: var(--kg-logo-size);
    --_logo-scrolled: var(--kg-logo-size-scrolled);

    position: sticky;
    top: 0;
    z-index: 1045;
    font-family: var(--kg-font-body);
    transition: box-shadow .25s ease;
}

#lc-header .kg-header {
    padding: var(--_py) 0;
    background: var(--kg-header-bg);
}

#lc-header .kg-header .container {
    min-height: 44px;
}

/* ---- Logo ---- */
#lc-header .kg-logo {
    position: relative;
    z-index: 10;
    display: block;
    flex: 0 0 var(--_logo);
    height: 1px;
    text-decoration: none;
}

#lc-header .kg-logo-image {
    position: absolute;
    top: calc(var(--kg-logo-top) - var(--_py) - 22px);
    left: 0;

    display: block;
    width: var(--_logo);
    height: var(--_logo);

    background-image: var(--kg-logo-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #fff;

    border: 4px solid #fff;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgb(0 0 0 / 25%);

    transition:
        width .25s ease,
        height .25s ease,
        top .25s ease,
        border-radius .25s ease,
        box-shadow .25s ease;
}

/* ---- Desktop navigation ---- */
#lc-header .kg-navbar {
    margin-left: auto;
    padding: 0;
}

#lc-header .navbar-nav {
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#lc-header .navbar-nav > li {
    padding: 8px 14px;
    white-space: nowrap;
}

#lc-header .navbar-nav a {
    display: block;
    padding: 2px 0;
    color: var(--kg-header-muted);
    font-family: var(--kg-font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--kg-transition);
}

#lc-header .navbar-nav a:hover,
#lc-header .navbar-nav .active > a,
#lc-header .navbar-nav a.active,
#lc-header .navbar-nav .current-menu-item > a {
    color: var(--kg-header-text);
}

#lc-header .navbar-nav a:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 4px;
}

/* ---- Order Online button ---- */
#lc-header .kg-order-button {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    padding: 8px 26px;
    font-size: 14px;
    white-space: nowrap;
}

/* ---- Mobile menu toggle ---- */
#lc-header .kg-nav-toggle {
    padding: 6px 10px;
    border-color: rgb(78 78 89 / 25%);
    border-radius: 10px;
}

#lc-header .kg-nav-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--kg-primary-rgb), .25);
}

/* ---- Scrolled header ---- */
#lc-header.is-scrolled {
    --_logo: var(--_logo-scrolled);
    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}

#lc-header.is-scrolled .kg-logo-image {
    box-shadow: 0 4px 14px rgb(0 0 0 / 22%);
}

/* ---- Tablet ---- */
@media (max-width: 991.98px) {
    #lc-header .navbar-nav > li {
        padding: 8px;
    }

    #lc-header .navbar-nav a {
        font-size: 14px;
    }

    #lc-header .kg-order-button {
        margin-left: 10px;
        padding: 8px 16px;
    }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
    #lc-header {
        --_py: 8px;
        --_logo: var(--kg-logo-size-sm);
        --_logo-scrolled: var(--kg-logo-size-sm-scrolled);
    }

    #lc-header .kg-header .container {
        gap: 8px;
        padding-right: 16px;
        padding-left: 16px;
    }

    /* Slide-in drawer */
    #lc-header .kg-drawer {
        --bs-offcanvas-width: min(280px, 85vw);
        font-family: var(--kg-font-body);
    }

    #lc-header .kg-drawer .offcanvas-header {
        padding: 16px 20px;
        border-bottom: 1px solid rgb(0 0 0 / 8%);
    }

    #lc-header .kg-drawer .offcanvas-title {
        color: var(--kg-primary);
        font-family: var(--kg-font-heading);
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
    }

    #lc-header .kg-drawer .offcanvas-body {
        padding: 8px 20px 24px;
    }

    #lc-header .navbar-nav > li {
        padding: 0;
        border-bottom: 1px solid rgb(0 0 0 / 8%);
    }

    #lc-header .navbar-nav a {
        padding: 14px 0;
        font-size: 17px;
    }

    #lc-header .navbar-nav .active > a,
    #lc-header .navbar-nav a.active,
    #lc-header .navbar-nav a.current-menu-item {
        color: var(--kg-primary);
    }

    /* Full-width Order Online button */
    #lc-header .kg-drawer .kg-order-button {
        margin: 24px 0 0;
        padding: 12px 16px;
        font-size: 16px;
    }

    /* Static header on order pages */
    #lc-header.is-static,
    body:has(#foodstore) #lc-header {
        position: relative;
        box-shadow: none;
    }

    html:has(#foodstore) {
        scroll-padding-top: 0;
    }
}

/* ---- WordPress admin bar ---- */
.admin-bar #lc-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar #lc-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar #lc-header {
        top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #lc-header,
    #lc-header .kg-logo-image {
        transition: none;
    }
}


/* =====================================================
   4. Homepage hero
   ===================================================== */

.hero {
    --hero-success: #198754;
    --hero-success-bg: #e8f5e9;
    --hero-success-border: #b7dfc5;

    position: relative;
    overflow: hidden;
    padding: 90px 0 60px;
    background-color: #2b2b2b;
    color: var(--kg-text);
}

.hero-container,
.banner .container {
    position: relative;
    z-index: 1;
}

/* ---- Banner background and overlay ---- */
.banner::before,
.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.banner::before {
    background: var(--kg-banner-image) center / cover no-repeat;
    animation: zoom 10s ease-in-out infinite alternate;
    will-change: transform;
}

.banner::after {
    background-color: var(--kg-banner-overlay);
}

@keyframes zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .banner::before {
        animation: none;
    }
}

/* ---- Hero heading and contact details ---- */
.hero h1 {
    margin: 0 0 16px;
    color: #fff;
    font-family: var(--kg-font-heading);
    font-size: 64px;
    line-height: 1.2;
}

.hero-contact {
    margin-top: 5px;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.hero-contact .icon {
    flex-shrink: 0;
    width: 1.25em;
    color: #ffc107;
    text-align: center;
}

.hero-contact a:hover {
    text-decoration: underline !important;
}

.hero-contact a:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
}

/* ---- Hero order button: large size ---- */
.hero .btn-get-started {
    display: inline-block;
    padding: 16px 48px;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 8px 28px rgb(0 0 0 / 10%);
}

.hero .btn-get-started:hover {
    transform: translateY(-2px);
}

/* ---- Special offers: kept for reuse ---- */
.hero .discount-text {
    padding: 16px 24px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
    text-align: left;
}

.hero .offer-item {
    align-items: flex-start;
}

.hero .offer-item .badge {
    flex-shrink: 0;
    margin-top: 4px;
    padding: .35em .65em;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.hero .offer-item small {
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Opening hours card ---- */
.hero .opening-hours-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 6%);
    border-radius: 18px;
    background-color: #fff;
    color: var(--kg-text);
    box-shadow: 0 16px 48px rgb(0 0 0 / 17.6%);
}

.hero .business-header {
    padding: 16px;
    border-bottom: 1px solid rgb(0 0 0 / 17.6%);
    border-radius: 5px 5px 0 0;
    background-color: var(--kg-primary);
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
}

.hero .business-header .card-title {
    margin: 0;
    font-family: var(--kg-font-heading);
    font-size: 24px;
    line-height: 1.2;
}

.hero .opening-hours-card .card-body {
    padding: 24px;
}

.hero .opening-hours-card ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.hero .opening-hours-card li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.hero .wfs-day {
    display: block;
    flex-shrink: 0;
    font-weight: 700;
}

.hero .wfs-time {
    display: block;
    text-align: right;
}

.hero .wfs-closed {
    color: #dc3545;
}

/* ---- Current opening status ---- */
.hero .opening-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
    padding: 12px 16px;
    border: 1px solid var(--hero-success-border);
    border-radius: 8px;
    background-color: var(--hero-success-bg);
    color: var(--hero-success);
    font-size: 16.8px;
    font-weight: 600;
    line-height: 1.5;
}

.hero .status-dot {
    display: block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--hero-success);
}

/* ---- Hero: tablet ---- */
@media (max-width: 991.98px) {
    .hero {
        padding: 90px 0 48px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero .hero-hours {
        margin-left: 0;
    }
}

/* ---- Hero: mobile ---- */
@media (max-width: 575.98px) {
    .hero {
        padding: 96px 0 36px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero-contact {
        font-size: 16px;
    }

    .hero .btn-get-started {
        padding: 14px 28px;
        font-size: 14px;
    }

    .hero .discount-text {
        padding: 16px;
    }

    .hero .opening-hours-card .card-body {
        padding: 18px;
    }

    .hero .opening-status {
        font-size: 14px;
    }
}


/* =====================================================
   5. Homepage sections
   Menu, Delivery, Reviews and Location
   ===================================================== */

#menu,
#location,
#google-review {
    position: relative;
}

#location {
    padding-top: 3rem;
}

/* Accent hairline, fading at both ends */
#menu::before,
#location::before,
#google-review::before {
    content: "";
    position: absolute;
    top: 0;
    right: .75rem;
    left: .75rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--kg-accent) 20%,
        var(--kg-accent) 80%,
        transparent
    );
}

/* Diamond in the middle of the hairline */
#menu::after,
#location::after,
#google-review::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--kg-accent);
    box-shadow: 0 0 0 8px var(--kg-page-bg);
    transform: translate(-50%, -50%) rotate(45deg);
}

#delivery .card,
#location .card {
    border-radius: 14px;
    box-shadow: var(--kg-shadow-soft);
}

#delivery .kg-alert-icon {
    flex-shrink: 0;
    color: #664d03;
}

.kg-menu-subtitle {
    font-size: .85rem;
    letter-spacing: 1.5px;
}

/* ---- Dish cards ---- */
.kg-dish-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    transition: transform var(--kg-transition),
                box-shadow var(--kg-transition);
}

.kg-dish-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / 12%) !important;
}

.kg-dish-card .dish-card-img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    background-color: #f1f1f1;
}

.kg-dish-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: .45em .8em;
    border-radius: 50rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}

@media (prefers-reduced-motion: reduce) {
    .kg-dish-card,
    .kg-dish-card:hover {
        transition: none;
        transform: none;
    }
}


/* =====================================================
   6. Footer
   ===================================================== */

#lc-footer {
    clear: both;
    font-family: var(--kg-font-body);
    line-height: 1.5;
}

#lc-footer .kg-footer {
    padding: 48px 0;
    border-top: 2px solid var(--kg-accent);
    background-color: var(--kg-footer-bg);
    color: rgb(255 255 255 / 70%);
}

/* ---- Footer logo ---- */
#lc-footer .kg-footer-logo-link {
    display: inline-block;
    float: left;
    width: 90px;
    height: 90px;
    max-width: 100%;
    margin: 0 16px 8px 0;
    text-decoration: none;
}

#lc-footer .kg-footer-logo {
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--kg-logo-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#lc-footer .kg-footer-brand::after {
    content: "";
    display: block;
    clear: both;
}

/* ---- Footer headings and address ---- */
#lc-footer .kg-footer-heading {
    color: var(--kg-footer-text);
    font-family: var(--kg-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-transform: uppercase;
}

#lc-footer address {
    font-style: normal;
}

/* ---- Footer links ---- */
#lc-footer .kg-kirinpos-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--kg-accent);
    text-underline-offset: 3px;
    transition: color var(--kg-transition);
}

#lc-footer .kg-footer-contact-link {
    color: #fff;
    text-decoration: none;
}

#lc-footer .kg-kirinpos-link:hover,
#lc-footer .kg-footer-contact-link:hover {
    color: var(--kg-accent);
}

#lc-footer a:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 4px;
}

/* ---- Social media links ---- */
#lc-footer .kg-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#lc-footer .kg-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--kg-footer-social-bg);
    color: var(--kg-primary);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--kg-transition),
        color var(--kg-transition),
        transform var(--kg-transition);
}

#lc-footer .kg-social-icon:hover {
    background-color: #fff;
    color: var(--kg-primary);
    transform: translateY(-2px);
}

#lc-footer .kg-footer-copyright {
    clear: both;
}

@media (max-width: 767.98px) {
    #lc-footer .kg-footer {
        padding: 36px 0;
    }

    #lc-footer .kg-footer-logo-link {
        width: 70px;
        height: 70px;
        margin-right: 12px;
    }
}


/* =====================================================
   7. Shared inner-page components
   ===================================================== */

.kg-page-title {
    position: relative;
    padding: 56px 0 64px;
    border-bottom: 2px solid var(--kg-accent);
    background-color: var(--kg-primary);
    color: #fff;
}

.kg-page-title__heading {
    margin: 0;
    font-family: var(--kg-font-heading);
    font-size: clamp(2.75rem, 6vw, 4.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .5px;
}

.kg-page-title__sub {
    max-width: 36rem;
    margin: 12px auto 0;
    color: rgb(255 255 255 / 80%);
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* Accent diamond on the bottom border */
.kg-page-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--kg-accent);
    transform: translate(-50%, 50%) rotate(45deg);
}

@media (max-width: 575.98px) {
    .kg-page-title {
        padding: 40px 0 48px;
    }
}


/* =====================================================
   8. Allergen notice & icons
   (Colours are legal/standard allergen colours – shared)
   ===================================================== */

.allergen-notice {
    --an-ink: #1f2d3d;
    --an-muted: #5d6b7a;
    --an-line: #dfe5ec;
    --an-surface: #f6f8fa;
    --an-accent: #b45309;

    color: var(--an-ink);
}

.allergen-notice .an-panel {
    background: var(--an-surface);
    border: 1px solid var(--an-line);
    border-radius: .75rem;
    padding: .75rem 1rem;
}

.allergen-notice .an-head {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.allergen-notice .an-mark {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    border-radius: 50%;
    background: var(--an-accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

.allergen-notice .an-text {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--an-muted);
}

.allergen-notice .an-text strong {
    color: var(--an-ink);
    font-weight: 650;
    margin-right: .25rem;
}

.allergen-notice .an-text a {
    color: var(--an-ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--an-accent);
}

.allergen-notice .an-text a:hover,
.allergen-notice .an-text a:focus-visible {
    color: var(--an-accent);
}

.allergen-notice #allergy_icons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem;
}

.allergen-notice .allergy_icon_item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem .2rem .3rem;
    background: #fff;
    border: 1px solid var(--an-line);
    border-radius: 999px;
}

.allergen-notice .allergy_icon_item img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
}

.allergen-notice .an-label {
    font-size: .72rem;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

#allergy_icons .allergy_icon_item {
    background-color: var(--allergy-color);
}

#allergy_icons .allergy_icon_item img {
    width: 23px;
}

#allergy_icons .allergy-celery      { --allergy-color: #91C632; }
#allergy_icons .allergy-cereals     { --allergy-color: #EC848C; }
#allergy_icons .allergy-crustaceans { --allergy-color: #DB4744; }
#allergy_icons .allergy-eggs        { --allergy-color: #F8D100; }
#allergy_icons .allergy-fish        { --allergy-color: #2E76BE; }
#allergy_icons .allergy-lupin       { --allergy-color: #A0256D; }
#allergy_icons .allergy-milk        { --allergy-color: #A0256D; }
#allergy_icons .allergy-molluscs    { --allergy-color: #796958; }
#allergy_icons .allergy-mustard     { --allergy-color: #F5BE00; }
#allergy_icons .allergy-nuts        { --allergy-color: #724C25; }
#allergy_icons .allergy-peanuts     { --allergy-color: #DB4744; }
#allergy_icons .allergy-sesame      { --allergy-color: #A0256D; }
#allergy_icons .allergy-sulfites    { --allergy-color: #B61A29; }
#allergy_icons .allergy-soya        { --allergy-color: #2F9340; }


/* =====================================================
   9. Online ordering – Food Store plugin
   ===================================================== */

/* ---- 9.1 Container & Bootstrap button theme ---- */
.kg-food-store {
    --bs-btn-bg: var(--kg-primary);
    --bs-btn-border-color: var(--kg-primary);
    --bs-btn-hover-bg: var(--kg-primary-dark);
    --bs-btn-hover-border-color: var(--kg-primary-dark);
    --bs-btn-active-bg: var(--kg-primary-dark);
    --bs-btn-active-border-color: var(--kg-primary-dark);
    --bs-btn-disabled-bg: var(--kg-primary);
    --bs-btn-disabled-border-color: var(--kg-primary);
    --bs-btn-focus-shadow-rgb: var(--kg-primary-rgb);

    padding: 0 0 4rem;
}

/* ---- 9.2 Store heading & postcode panel ---- */
.kg-store-head {
    margin-bottom: 1.5rem;
    text-align: center;
}

.kg-store-head .kg-section-title {
    margin: 0 0 .25rem;
    color: var(--kg-text);
}

.kg-postcode-panel {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgb(0 0 0 / 6%);
    border-left: 5px solid var(--kg-primary);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--kg-shadow-soft);
    text-align: center;
}

@media (min-width: 768px) {
    .kg-postcode-panel {
        text-align: right;
    }
}

.kg-postcode-panel .btn,
.kg-postcode-panel button,
.kg-postcode-panel input[type="submit"] {
    min-height: 44px;
    padding: .5rem 1.5rem;
    border-radius: 50rem;
    font-weight: 600;
}

/* ---- 9.3 Postcode lookup form (.kdc-check) ---- */
.kg-postcode-panel .kdc-check,
.kdc-check {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    text-align: right !important;
}

.kdc-check .kdc-row {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

.kdc-check .kdc-input {
    flex: 0 1 280px;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: .5rem 1.25rem;
    border: 1px solid #ced4da;
    border-radius: 50rem;
    background: #fff;
    color: var(--kg-text);
    font-family: var(--kg-font-body);
    font-size: 15px;
    transition: border-color var(--kg-transition),
                box-shadow var(--kg-transition);
}

.kdc-check .kdc-input::placeholder {
    color: #8a9199;
}

.kdc-check .kdc-input:focus {
    border-color: var(--kg-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--kg-primary-rgb), .25);
    outline: 0;
}

.kdc-check .kdc-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: .5rem 1.75rem;
    border: 0;
    border-radius: 50rem;
    background-color: var(--kg-primary);
    color: #fff;
    font-family: var(--kg-font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(var(--kg-primary-rgb), .3);
    cursor: pointer;
    transition: background-color var(--kg-transition),
                transform var(--kg-transition),
                box-shadow var(--kg-transition);
}

.kdc-check .kdc-btn:hover {
    background-color: var(--kg-primary-dark);
    box-shadow: 0 6px 18px rgba(var(--kg-primary-rgb), .35);
    transform: translateY(-1px);
}

.kdc-check .kdc-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--kg-primary-rgb), .3);
}

.kdc-check .kdc-btn:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
}

.kdc-check .kdc-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.kdc-check .kdc-result {
    margin-top: 10px;
    padding: 0 1.25rem;
    color: var(--kg-text);
    font-family: var(--kg-font-body);
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

.kdc-check .kdc-result:empty {
    display: none;
}

.kdc-check .kdc-result.is-ok,
.kdc-check .kdc-result.kdc-ok {
    color: #1a7f4b;
}

.kdc-check .kdc-result.is-error,
.kdc-check .kdc-result.kdc-error {
    color: #b42318;
}

/* ---- 9.4 General form inputs & focus states ---- */
.kg-food-store input[type="text"],
.kg-food-store input[type="search"],
.kg-food-store select {
    min-height: 44px;
    padding: .5rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 50rem;
    transition: border-color var(--kg-transition),
                box-shadow var(--kg-transition);
}

.kg-food-store input[type="text"]:focus,
.kg-food-store input[type="search"]:focus,
.kg-food-store select:focus {
    border-color: var(--kg-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--kg-primary-rgb), .25);
    outline: 0;
}

.kg-food-store a:focus-visible,
.kg-food-store button:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .kdc-check .kdc-input {
        flex: 1 1 0;
        padding: .5rem 1rem;
    }

    .kdc-check .kdc-btn {
        padding: .5rem 1.25rem;
    }

    .kdc-check .kdc-result {
        padding: 0;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kdc-check .kdc-btn {
        transition: none;
        transform: none;
    }
}

/* ---- 9.5 Links, focus states & service tabs ---- */
.kg-food-store a:not(.btn) {
    color: var(--kg-primary);
}

.kg-food-store a:not(.btn):hover {
    color: var(--kg-primary-dark);
}

.wfs-service-modal-container .nav-tabs li a.active,
.wfs-service-modal-container .nav-tabs li a.active:hover,
.wfs-service-modal-container .nav-tabs li a.active:focus,
.wfs-schedule-nav-group a.active {
    color: #fff !important;
}

/* ---- 9.6 Product cards ---- */
.kg-store-menu .card {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--kg-shadow-soft);
}

/* ---- 9.7 Closed notice ---- */
.wfs-store-close-msg {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 1.5rem;
    padding: 16px 20px;
    border: 1px solid rgba(var(--kg-accent-rgb), .45);
    border-left: 5px solid var(--kg-accent);
    border-radius: 14px;
    background: linear-gradient(90deg, var(--kg-notice-bg), #fff);
    box-shadow: var(--kg-shadow-soft);
    color: var(--kg-notice-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

/* Clock icon */
.wfs-store-close-msg::before {
    content: "\f017";
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--kg-accent);
    color: #fff;
    font-family: "Font Awesome 6 Free";
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.wfs-store-close-msg span {
    align-self: center;
}

@media (max-width: 575.98px) {
    .wfs-store-close-msg {
        gap: 12px;
        padding: 14px 16px;
        font-size: 14px;
    }

    .wfs-store-close-msg::before {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* ---- 9.8 Add-to-cart button ---- */
.fs-btn.fs-btn-primary.button-add-to-cart {
    /* Do not set display: it would override plugin show/hide rules */
    min-height: 38px;
    padding: 8px 20px;
    border: 0;
    border-radius: 50rem;
    background: var(--kg-primary);
    color: #fff;
    font-family: var(--kg-font-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--kg-transition);
}

.fs-btn.fs-btn-primary.button-add-to-cart:hover {
    background: var(--kg-primary-dark);
    color: #fff;
}

.fs-btn.fs-btn-primary.button-add-to-cart:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
}

.fs-btn.fs-btn-primary.button-add-to-cart .wfs-icon-plus {
    margin: 0 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 12px;
    line-height: 1;
}

.fs-btn.fs-btn-primary.button-add-to-cart.loading,
.fs-btn.fs-btn-primary.button-add-to-cart:disabled {
    opacity: .65;
    cursor: wait;
}

/* ---- 9.9 Menu item name, description & price ---- */
.wfs-food-item-summery {
    text-align: left;
}

.kg-food-store .wfs-food-item-summery a.wfs-food-item-title,
.kg-food-store .wfs-food-item-summery a.wfs-food-item-title:visited {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--kg-menu-name);
    font-family: var(--kg-font-dish);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .1px;
    text-decoration: none;
}

.kg-food-store .wfs-food-item-summery a.wfs-food-item-title:hover {
    color: var(--kg-menu-name);
    text-decoration: underline;
    text-decoration-color: var(--kg-accent);
    text-underline-offset: 4px;
}

.wfs-food-item-summery .wfs-food-item-description {
    margin-bottom: 10px;
    color: var(--kg-desc-color);
    font-family: var(--kg-font-text);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

.wfs-food-item-summery .price {
    margin: 0 0 12px;
    color: var(--kg-primary);
    font-family: var(--kg-font-text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* ---- 9.10 Desktop category sidebar ---- */
.kg-food-store .wfs-sidebar-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kg-food-store .wfs-sidebar-menu .wfs-category-menu-li {
    margin: 0 0 2px;
    padding: 0;
}

.kg-food-store .wfs-sidebar-menu a.wfs-loop-category__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
    color: var(--kg-menu-name);
    font-family: var(--kg-font-dish);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color var(--kg-transition),
                border-color var(--kg-transition);
}

.kg-food-store .wfs-sidebar-menu a.wfs-loop-category__title:visited {
    color: var(--kg-menu-name);
}

.kg-food-store .wfs-sidebar-menu a.wfs-loop-category__title:hover {
    border-left-color: var(--kg-accent);
    background-color: rgba(var(--kg-accent-rgb), .12);
    color: var(--kg-menu-name);
}

.kg-food-store .wfs-sidebar-menu a.wfs-loop-category__title.active {
    border-left-color: var(--kg-primary);
    background-color: rgba(var(--kg-primary-rgb), .08);
    color: var(--kg-menu-name);
}

.kg-food-store .wfs-sidebar-menu a.wfs-loop-category__title:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 2px;
}

/* ---- 9.11 Category item-count badges ---- */
.kg-food-store .wfs-sidebar-menu .wfs-items-count {
    flex-shrink: 0;
    min-width: 26px;
    padding: 6px 8px;
    border-radius: 50rem;
    background-color: #f1f1f1;
    color: var(--kg-muted);
    font-family: var(--kg-font-text);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* Inactive link: light grey badge */
#wfs-sticky-sidebar .wfs-sidebar-menu ul li a:not(.active) span.wfs-items-count,
#wfs-sticky-sidebar .wfs-sidebar-menu ul li a:not(.active) span.wfs-items-count.active {
    background-color: #f1f1f1 !important;
    color: var(--kg-muted) !important;
    -webkit-text-fill-color: var(--kg-muted) !important;
}

/* Active link: dark badge with white text */
#wfs-sticky-sidebar .wfs-sidebar-menu ul li a.active span.wfs-items-count,
#wfs-sticky-sidebar .wfs-sidebar-menu ul li a.active span.wfs-items-count.active {
    background-color: var(--kg-count-active-bg) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ---- 9.12 Mobile category navigation ---- */
@media (max-width: 767.98px) {

    #foodstore > .fs-row {
        flex-direction: column;
    }

    #wfs-sticky-sidebar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        flex: none !important;
        width: 100% !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee !important;
        background: #fff !important;
    }

    #wfs-sticky-sidebar .theiaStickySidebar {
        position: static !important;
        width: auto !important;
        transform: none !important;
    }

    #wfs-sticky-sidebar .wfs-sidebar-menu ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #wfs-sticky-sidebar .wfs-sidebar-menu ul::-webkit-scrollbar {
        display: none;
    }

    #wfs-sticky-sidebar .wfs-sidebar-menu ul li {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #wfs-sticky-sidebar .wfs-sidebar-menu ul li a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 14px !important;
        border: 1px solid #dcdcdc !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #666 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        transition: all .3s ease;
    }

    #wfs-sticky-sidebar .wfs-sidebar-menu ul li a.active,
    #wfs-sticky-sidebar .wfs-sidebar-menu ul li a.active:hover,
    #wfs-sticky-sidebar .wfs-sidebar-menu ul li a.active:focus {
        border: 1px solid var(--kg-primary) !important;
        background: var(--kg-primary) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-weight: 600 !important;
    }

    #wfs-sticky-sidebar .wfs-sidebar-menu ul li a span.wfs-items-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        width: auto !important;
        min-width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    #wfs-food-items {
        margin-top: 20px;
    }
}


/* =====================================================
   10. WooCommerce checkout
   Desktop: customer details left, order summary right.
   Mobile: stacked layout.
   ===================================================== */

/* ---- 10.1 Customer details column ---- */
.woocommerce-checkout > .col2-set {
    float: left !important;
    width: 48% !important;
}

.woocommerce-checkout > .col2-set > .col-1,
.woocommerce-checkout > .col2-set > .col-2 {
    float: none !important;
    width: 100% !important;
}

.woocommerce-checkout > .col2-set > .col-1 {
    margin-bottom: 30px !important;
}

/* ---- 10.2 Order summary column ---- */
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout #order_review {
    float: right !important;
    width: 48% !important;
}

/* ---- 10.3 Responsive checkout layout ---- */
form.woocommerce-checkout::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 767.98px) {
    .woocommerce-checkout > .col2-set,
    .woocommerce-checkout h3#order_review_heading,
    .woocommerce-checkout #order_review {
        float: none !important;
        width: 100% !important;
    }
}

/* ---- 10.4 Address lookup button (.kal-btn) ----
   Same visual style as .kdc-btn.
   Higher specificity overrides WooCommerce button rules. */
body button.button.kal-btn.kal-btn:not(.alt) {
    display: inline-block;
    flex: 0 0 auto;
    min-height: 44px;
    padding: .5rem 1.75rem;
    border: 0;
    border-radius: 50rem;
    background-color: var(--kg-primary);
    color: #fff;
    font-family: var(--kg-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: 0 4px 14px rgba(var(--kg-primary-rgb), .3);
    cursor: pointer;
    transition: background-color var(--kg-transition),
                transform var(--kg-transition),
                box-shadow var(--kg-transition);
}

body button.button.kal-btn.kal-btn:not(.alt):hover {
    background-color: var(--kg-primary-dark);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--kg-primary-rgb), .35);
    transform: translateY(-1px);
}

body button.button.kal-btn.kal-btn:not(.alt):active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--kg-primary-rgb), .3);
}

body button.button.kal-btn.kal-btn:not(.alt):focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
}

body button.button.kal-btn.kal-btn:not(.alt):disabled,
body button.button.kal-btn.kal-btn:not(.alt):disabled[disabled] {
    padding: .5rem 1.75rem;
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    body button.button.kal-btn.kal-btn:not(.alt) {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body button.button.kal-btn.kal-btn:not(.alt) {
        transition: none;
        transform: none;
    }
}


/* =====================================================
   11. Account forms (KPA plugin: login / register / lost password)
   Same visual style as .kdc-btn and .kal-btn.
   ===================================================== */

/* ---- 11.1 Submit button ---- */
.kpa-wrap .kpa-form .btn-primary,
.kpa-wrap .kpa-form button[type="submit"] {
    min-height: 44px;
    padding: .5rem 1.75rem;
    border: 0;
    border-radius: 50rem;
    background-color: var(--kg-primary);
    color: #fff;
    font-family: var(--kg-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(var(--kg-primary-rgb), .3);
    cursor: pointer;
    transition: background-color var(--kg-transition),
                transform var(--kg-transition),
                box-shadow var(--kg-transition);
}

.kpa-wrap .kpa-form .btn-primary:hover,
.kpa-wrap .kpa-form button[type="submit"]:hover {
    background-color: var(--kg-primary-dark);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--kg-primary-rgb), .35);
    transform: translateY(-1px);
}

.kpa-wrap .kpa-form .btn-primary:active,
.kpa-wrap .kpa-form button[type="submit"]:active {
    background-color: var(--kg-primary-dark);
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--kg-primary-rgb), .3);
}

.kpa-wrap .kpa-form .btn-primary:focus-visible,
.kpa-wrap .kpa-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
    box-shadow: 0 4px 14px rgba(var(--kg-primary-rgb), .3);
}

.kpa-wrap .kpa-form .btn-primary:disabled,
.kpa-wrap .kpa-form button[type="submit"]:disabled {
    background-color: var(--kg-primary);
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---- 11.2 Inputs, checkbox and links (match the rest of the site) ---- */
.kpa-wrap .form-control {
    min-height: 44px;
    border: 1px solid #ced4da;
    border-radius: 50rem;
    padding: .5rem 1.25rem;
    transition: border-color var(--kg-transition),
                box-shadow var(--kg-transition);
}

.kpa-wrap .form-control:focus {
    border-color: var(--kg-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--kg-primary-rgb), .25);
    outline: 0;
}

.kpa-wrap .form-check-input:checked {
    border-color: var(--kg-primary);
    background-color: var(--kg-primary);
}

.kpa-wrap .form-check-input:focus {
    border-color: var(--kg-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--kg-primary-rgb), .25);
}

.kpa-wrap .kpa-links a {
    color: var(--kg-primary);
}

.kpa-wrap .kpa-links a:hover {
    color: var(--kg-primary-dark);
}

/* ---- 11.3 reCAPTCHA: stop the 304px widget overflowing small phones ---- */
@media (max-width: 359.98px) {
    .kpa-wrap .g-recaptcha {
        transform: scale(.85);
        transform-origin: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kpa-wrap .kpa-form .btn-primary,
    .kpa-wrap .kpa-form button[type="submit"] {
        transition: none;
        transform: none;
    }
}