/*----------------------------------------
    Food - custom overrides
------------------------------------------*/

/*--- Brand palette, sampled from the logo ---------------------------------
    Leaf green  #60A830  ->  --theme   (deepened to #47851E so white button
                                        text clears WCAG AA at 4.5:1)
    Fork orange #F06000  ->  --theme2  (deepened to #D94100, same reason)
    Amber       #E09800  ->  --theme3  (highlight, only ever used on dark)
--------------------------------------------------------------------------*/
:root {
    --theme: #47851E;
    --base: #47851E;
    --theme2: #D94100;
    --theme3: #F2A81C;
    --ratting: #F2A81C;
    --bg2: #D941000D;
}

/*--- Hero ----------------------------------------------------------------
    The hero art is now deep brand green, so the primary green button would
    sink into it - run the orange there instead and flip to green on hover.
--------------------------------------------------------------------------*/
.hero-2 .hero-content p {
    color: var(--theme3);
}

.hero-2 .theme-btn {
    background-color: var(--theme2);
}

.hero-2 .theme-btn:hover::before {
    background-color: var(--theme);
}

/*--- One-page nav: smooth scroll to sections ---*/
html {
    scroll-behavior: smooth;
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/*--- Header / navbar ------------------------------------------------------
    Crisp white bar over the green hero, with a brand-gradient hairline that
    replays the logo's green -> lime -> amber -> orange run.
--------------------------------------------------------------------------*/
#header-sticky {
    background-color: var(--white);
    border-bottom: 1px solid rgba(33, 33, 33, 0.07);
}

#header-sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--theme) 0%, #B8C010 34%, var(--theme3) 62%, var(--theme2) 100%);
}

.sticky.header-1 {
    box-shadow: 0 10px 34px rgba(33, 33, 33, 0.1);
}

/*--- Logo ---*/
.header-main .logo .header-logo {
    display: inline-block;
    line-height: 0;
}

.header-main .logo .header-logo img {
    width: 200px;
    height: auto;
    transition: width 0.4s ease, transform 0.4s ease;
}

.header-main .logo .header-logo:hover img {
    transform: scale(1.03);
}

.sticky.header-1 .header-main .logo .header-logo img {
    width: 168px;
}

/*--- Menu links: green on hover, gradient underline growing from centre ---*/
.header-main .main-menu ul li a {
    font-size: 17px;
    letter-spacing: 0.6px;
}

.header-main .main-menu ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 0;
    height: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--theme), var(--theme3));
    transition: width 0.35s ease;
}

.header-main .main-menu ul li a:hover,
.header-main .main-menu ul li.active > a {
    color: var(--theme) !important;
}

.header-main .main-menu ul li a:hover::after,
.header-main .main-menu ul li.active > a::after {
    width: 100%;
}

/*--- Right cluster: cart and hamburger become matching round buttons ---*/
.header-main .header-right {
    gap: 18px;
}

/* Search: the same round control as the basket, on the neutral header ink
   so the two coloured icons beside it stay the ones that carry a count. */
.header-main .header-right .header-search-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(33, 33, 33, 0.06);
    transition: all 0.35s ease;
}

.header-main .header-right .header-search-icon i {
    color: var(--header);
    transition: color 0.35s ease;
}

.header-main .header-right .header-search-icon:hover {
    background-color: var(--header);
    transform: translateY(-2px);
}

.header-main .header-right .header-search-icon:hover i {
    color: var(--white);
}

/* Saved items: same circle as the basket beside it, tinted with the colour a
   filled heart already uses on the product cards. Badge takes the green so it
   stays legible against that tint. */
.header-main .header-right .wishlist-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(217, 65, 0, 0.1);
    transition: all 0.35s ease;
}

.header-main .header-right .wishlist-icon i {
    color: var(--theme2);
    transition: color 0.35s ease;
}

.header-main .header-right .wishlist-icon:hover {
    background-color: var(--theme2);
    transform: translateY(-2px);
}

.header-main .header-right .wishlist-icon:hover i {
    color: var(--white);
}

.header-main .header-right .wishlist-icon::before {
    position: absolute;
    top: -2px;
    right: -2px;
    content: attr(data-count);
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: var(--white);
    background-color: var(--theme);
    box-shadow: 0 0 0 2px var(--white);
}

/* Nothing saved: the ring of a zero is just noise next to the basket. */
.header-main .header-right .wishlist-icon[data-count="0"]::before {
    display: none;
}

/* Phones: the header is down to a logo, search and the hamburger. Favourites
   moves into the offcanvas panel, which is the nav at this width. Same
   breakpoint the theme uses to drop the contact button. */
@media (max-width: 767px) {
    .header-main .header-right .wishlist-icon {
        display: none;
    }
}

/* Install app: the same round control, in the brand green. Hidden unless the
   layout's PWA script has flagged <html> as installable. */
.header-main .header-right .header-install-icon {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(71, 133, 30, 0.1);
    transition: all 0.35s ease;
}

.header-main .header-right .header-install-icon i {
    color: var(--theme);
    transition: color 0.35s ease;
}

.header-main .header-right .header-install-icon:hover {
    background-color: var(--theme);
    transform: translateY(-2px);
}

.header-main .header-right .header-install-icon:hover i {
    color: var(--white);
}

/* Phones use the offcanvas button instead, like Favourites. */
@media (max-width: 767px) {
    .header-main .header-right .header-install-icon {
        display: none;
    }
}

html:not(.pwa-can-install) [data-pwa-install] {
    display: none !important;
}

.favourites-empty {
    margin: 0;
    padding: 40px 0 10px;
    text-align: center;
    font-size: 17px;
    color: var(--text);
}

.favourites-empty a {
    font-weight: 600;
    color: var(--theme);
}

.header-main .header-right .menu-cart .cart-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(71, 133, 30, 0.1);
    transition: all 0.35s ease;
}

.header-main .header-right .menu-cart .cart-icon i {
    color: var(--theme);
    transition: color 0.35s ease;
}

.header-main .header-right .menu-cart .cart-icon:hover {
    background-color: var(--theme);
    transform: translateY(-2px);
}

.header-main .header-right .menu-cart .cart-icon:hover i {
    color: var(--white);
}

/* Keep the item count pinned to the rim of the new circle */
.header-main .header-right .menu-cart .cart-icon::before {
    top: -2px;
    right: -2px;
    background-color: var(--theme2);
    box-shadow: 0 0 0 2px var(--white);
}

.header-main .header-right .header__hamburger .sidebar__toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(217, 65, 0, 0.12);
    transition: all 0.35s ease;
}

.header-main .header-right .header__hamburger .sidebar__toggle:hover {
    background-color: var(--theme2);
    transform: translateY(-2px);
}

.header-main .header-right .header__hamburger .sidebar__toggle .header-bar span {
    background: var(--theme2);
}

.header-main .header-right .header__hamburger .sidebar__toggle:hover .header-bar span {
    background: var(--white);
}

/*--- Contact CTA: a round icon matching the cart and hamburger buttons.
      Tinted at rest and filled on hover, like every other control up here -
      the glow comes in with the fill rather than sitting under the tint.

      Green rather than orange: the heart beside it keeps the orange that a
      filled heart already means on the product cards, so the two stop
      reading as the same control. Amber was the other brand option, but at
      about 1.9:1 on white it is not a legible glyph colour. ---*/
.header-main .header-right .header-button .header-contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(71, 133, 30, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.header-main .header-right .header-button .header-contact-icon i {
    color: var(--theme);
    font-size: 18px;
    transition: color 0.35s ease;
}

.header-main .header-right .header-button .header-contact-icon:hover {
    background-color: var(--theme);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(71, 133, 30, 0.36);
}

.header-main .header-right .header-button .header-contact-icon:hover i {
    color: var(--white);
}

@media (max-width: 1199px) {
    .header-main .logo .header-logo img,
    .sticky.header-1 .header-main .logo .header-logo img {
        width: 160px;
    }

    .header-main .header-right {
        gap: 12px;
    }
}

/*--- Hero slider spacing --------------------------------------------------
    The two slide artworks have different aspect ratios (burger 1:1, chicken
    1.2:1), so the taller slide set the swiper wrapper height and showed as a
    dead green band beneath the shorter one - the fade effect stacks them.
    Matching the artwork height removes the band; the padding trim closes the
    gaps above and below the content.
--------------------------------------------------------------------------*/
.hero-2 {
    padding: 32px 0;
}

/* The artwork, not the copy, sets the hero's height - the headline block is
   only ~208px against the photograph's 454px. Capping the picture is what
   actually shortens the band; trimming padding alone barely moves it. */
@media (min-width: 992px) {
    .hero-2 .burger-image img {
        max-height: 360px;
        width: auto;
        margin-inline: auto;
    }
}

/* burger.png is square while chiken.png is 1.2:1, so at the same column width
   the burger slide ran 92px taller. Narrowing that one artwork evens them out
   and keeps its absolutely-positioned decorations in proportion. */
@media (min-width: 992px) {
    .hero-2 .burger-image.is-square {
        width: 83%;
        margin-inline-start: auto;
    }
}

@media (max-width: 767px) {
    .hero-2 {
        padding: 26px 0;
    }

    .hero-2 .burger-image img {
        max-height: 280px;
        width: auto;
        margin-inline: auto;
    }
}

/*--- Explore Menu slider arrows -------------------------------------------
    Moved out of the heading (a View All button lives there now) and parked
    below the slider as a centred pair. They used to float over the left and
    right edges of the strip, which worked while one wide card filled the row
    but covered the artwork once the cards got narrower - and on phones there
    is no gutter to sit in at all.

    Below the slider the same pair works at every width, so there is one
    position to reason about instead of three breakpoints of offsets.
--------------------------------------------------------------------------*/
.catagory-slider-area {
    position: relative;
}

.catagory-slider-area .array-button {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.catagory-slider-area .array-button button {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    border: 0;
    background-color: var(--white);
    color: var(--theme);
    font-size: 16px;
    box-shadow: 0 8px 24px rgba(33, 33, 33, 0.12);
    transition: all 0.35s ease-in-out;
    margin: 0;
}

.catagory-slider-area .array-button button:hover {
    background-color: var(--theme);
    color: var(--white);
    box-shadow: 0 10px 28px rgba(71, 133, 30, 0.35);
}

@media (max-width: 575px) {
    .catagory-slider-area .array-button {
        gap: 12px;
        margin-top: 20px;
    }

    .catagory-slider-area .array-button button {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}

/*--- Footer logo ---*/
.footer-widgets-wrapper .single-footer-widget .widget-head a img {
    width: 195px;
    height: auto;
}

/*--- Shop page: restaurant menu ------------------------------------------
    A sticky, horizontally swipeable strip of categories that stays put under
    the fixed site header while you scroll the product groups. --header-h is
    written by the page script so the offset tracks the real header height.
--------------------------------------------------------------------------*/
.shop-menu-section {
    /* the template's .fix (overflow:hidden) would kill position:sticky */
    overflow: visible;
    /* none - the bar sits flush under the header, so its resting position
       matches where it lands once it sticks */
    padding-top: 0;
}

.menu-nav-wrapper {
    position: sticky;
    top: var(--header-h, 109px);
    z-index: 20;
    padding: 18px 0;
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(33, 33, 33, 0.08);
}

.menu-nav-slider {
    overflow: hidden;
}

.menu-nav-slider .swiper-slide {
    width: auto;
}

/* when the whole menu fits, centre it instead of hugging the left edge */
.menu-nav-slider.is-centred .swiper-wrapper {
    justify-content: center;
}

.menu-pill {
    display: inline-block;
    padding: 13px 30px;
    border: 1.5px solid rgba(33, 33, 33, 0.14);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--header);
    background-color: transparent;
    transition: all 0.3s ease-in-out;
}

.menu-pill:hover {
    color: var(--theme);
    border-color: var(--theme);
    background-color: rgba(71, 133, 30, 0.07);
}

.menu-pill.active {
    color: var(--white);
    border-color: var(--theme);
    background-color: var(--theme);
    box-shadow: 0 8px 18px rgba(71, 133, 30, 0.28);
}

.menu-group:not(:last-of-type) {
    margin-bottom: 70px;
}

/* the theme gives .section-title z-index:99, which paints the group headings
   straight over the sticky bar as they scroll past it */
.menu-group .section-title {
    z-index: 1;
}

.menu-group .section-title h2,
.cart-section .section-title h2,
.checkout-section .section-title h2 {
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .menu-nav-wrapper {
        padding: 14px 0;
    }

    .menu-pill {
        padding: 11px 22px;
        font-size: 13px;
    }
}

/*--- Nav + pill icons ---*/
.header-main .main-menu ul li a i {
    margin-right: 8px;
    margin-left: 0;
    font-size: 15px;
    opacity: 0.85;
}

.menu-pill i {
    margin-right: 9px;
    font-size: 16px;
    vertical-align: -1px;
}

/*--- Contact modal --------------------------------------------------------
    CONTACT US opens this instead of navigating away. It carries the same
    details the offcanvas panel holds, so the hamburger is redundant on
    desktop - but it stays on mobile, where it is the only way into the nav.
--------------------------------------------------------------------------*/
@media (min-width: 992px) {
    .header-main .header-right .header__hamburger {
        display: none !important;
    }
}

.contact-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(33, 33, 33, 0.28);
}

.contact-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme) 0%, #B8C010 34%, var(--theme3) 62%, var(--theme2) 100%);
    z-index: 2;
}

.contact-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    font-size: 17px;
    color: var(--header);
    background-color: rgba(33, 33, 33, 0.07);
    transition: all 0.3s ease-in-out;
}

.contact-modal__close:hover {
    color: var(--white);
    background-color: var(--theme2);
}

.contact-modal__aside {
    padding: 46px 38px;
    background-color: var(--white);
}

.contact-modal__logo {
    width: 175px;
    height: auto;
    margin-bottom: 24px;
}

.contact-modal__aside p {
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
}

.contact-modal__social {
    display: flex;
    gap: 10px;
}

.contact-modal__social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: var(--header);
    background-color: var(--bg);
    transition: all 0.3s ease-in-out;
}

.contact-modal__social a:hover {
    color: var(--white);
    background-color: var(--theme);
    transform: translateY(-3px);
}

.contact-modal__body {
    padding: 46px 40px;
    background-color: var(--bg);
}

.contact-modal__kicker {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--theme2);
}

.contact-modal__body h4 {
    margin-bottom: 26px;
    text-transform: uppercase;
}

.contact-modal__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-modal__list li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-modal__list li:not(:last-child) {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(33, 33, 33, 0.07);
}

.contact-modal__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: var(--theme);
    background-color: rgba(71, 133, 30, 0.1);
}

.contact-modal__text small {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
}

.contact-modal__text a {
    font-size: 17px;
    font-weight: 600;
    color: var(--header);
    transition: color 0.3s ease-in-out;
}

.contact-modal__text a:hover {
    color: var(--theme);
}
@media (max-width: 991px) {
    .contact-modal__aside,
    .contact-modal__body {
        padding: 34px 26px;
    }

    .contact-modal__close {
        top: 14px;
        right: 14px;
    }
}

/*--- Shop page: product cards --------------------------------------------
    Same card structure the theme ships - just given a warmer ground to sit
    on, a softer shell, and a little motion so the grid stops reading flat.
--------------------------------------------------------------------------*/
.shop-menu-section {
    background-color: var(--bg);
}

/* the promo-code form is gone, so keep the buttons pinned to the right
   rather than letting space-between drop them to the left edge */
.main-cart-wrapper .cart-wrapper-footer {
    justify-content: flex-end;
    gap: 16px;
}

/* Checkout is the primary action here - Update Cart steps back to an outline */
.theme-btn.btn-outline-theme {
    color: var(--theme);
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--theme);
}

.theme-btn.btn-outline-theme:hover {
    color: var(--white);
}

/*--- Cart page: totals in the foot of the table --------------------------
    The standalone Cart Total card is gone; the running totals now close out
    the table itself, under the Subtotal column they belong to.
--------------------------------------------------------------------------*/
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tfoot td {
    padding: 16px 0;
    color: var(--header);
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tfoot tr:last-child td {
    border-bottom: none;
}

/* the number people are actually looking for */
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tfoot .cart-grand-total td {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme);
}

/* below md the theme scrolls the whole card sideways, which drags the buttons
   out of view with the table - scroll only the table and leave them put */
@media (max-width: 767px) {
    .main-cart-wrapper .cart-wrapper {
        overflow-x: visible;
    }

    .main-cart-wrapper .cart-wrapper .cart-items-wrapper {
        width: auto;
        overflow-x: auto;
    }

    .main-cart-wrapper .cart-wrapper .cart-items-wrapper table {
        min-width: 620px;
    }

    /* Keep Update Cart and Checkout on one row rather than letting them
       wrap: they share the width evenly, and the theme's 50px side padding
       comes down so both labels still fit on a narrow phone. */
    .main-cart-wrapper .cart-wrapper-footer {
        width: auto;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .main-cart-wrapper .cart-wrapper-footer .theme-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 18px 10px;
        font-size: 15px;
        text-align: center;
        white-space: nowrap;
    }
}

/* short brand rule under each category heading */
.menu-group .section-title h2,
.cart-section .section-title h2,
.checkout-section .section-title h2 {
    position: relative;
    padding-bottom: 16px;
}

.menu-group .section-title h2::after,
.cart-section .section-title h2::after,
.checkout-section .section-title h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--theme), var(--theme3));
}

/* the source shots vary in size and the theme drops them top-left in a 245px
   box, so cards read tall and ragged - fix the box and fit each image in it */
.catagory-product-card-2 {
    padding: 30px 24px;
}

.catagory-product-card-2 .catagory-product-image {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* every shot gets the same square slot and is fitted inside it, so a wide
   dish and a tall one still occupy identical space on the row */
.catagory-product-card-2 .catagory-product-image img {
    width: 170px;
    height: 170px;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.catagory-product-card-2 .catagory-product-content {
    margin-top: 20px;
}

/* card shell */
.catagory-product-card-2.shadow-style {
    background-color: var(--white);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(33, 33, 33, 0.07);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.catagory-product-card-2.shadow-style:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(33, 33, 33, 0.15);
}

.catagory-product-card-2::before {
    border-radius: 18px;
}

.catagory-product-card-2 .catagory-product-image img {
    transition: transform 0.45s ease-in-out;
}

.catagory-product-card-2:hover .catagory-product-image img {
    transform: scale(1.07);
}

/* wishlist: a black square is the harshest thing on the card - make it a chip */
.catagory-product-card-2 .icon {
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 50%;
    background-color: var(--white);
    box-shadow: 0 4px 12px rgba(33, 33, 33, 0.13);
}

.catagory-product-card-2 .icon i {
    color: var(--header);
}

.catagory-product-card-2 .icon:hover {
    background-color: var(--theme);
}

.catagory-product-card-2 .icon:hover i {
    color: var(--white);
}

/* price row: the old price actually struck through */
.catagory-product-card-2 .catagory-product-content .info-price span {
    text-decoration: line-through;
}

/* the wishlist heart is a real button now, not an anchor - fill the chip and
   drop the browser's own button chrome */
.catagory-product-card-2 .icon button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* saved: the filled heart alone is easy to miss at this size, so the chip
   itself carries the state too */
.catagory-product-card-2 .icon.is-saved {
    background-color: var(--theme2);
}

.catagory-product-card-2 .icon.is-saved i,
.catagory-product-card-2 .icon.is-saved:hover i {
    color: var(--white);
}

.catagory-product-card-2 .icon.is-saved:hover {
    background-color: var(--theme2);
}

/* the theme only reveals Add To Cart on hover, which hides the main action on
   touch devices and on every card the pointer is not over - always show it */
.catagory-product-card-2 .catagory-product-content .catagory-button {
    opacity: 1;
    transform: none;
}

/*--- Product cards on phones ----------------------------------------------
    Two per row below 767px, so a card is about 164px wide against the ~230px
    the theme's type was drawn for. At full size "Add To Cart" broke over
    three lines and the price row wrapped under itself.

    Same treatment as the category cards: image well, button, price row and
    title all come down together. The price row is the tight one - price and
    struck-through old price share ~140px, so it is sized to stay on a single
    line rather than wrap.
--------------------------------------------------------------------------*/
@media (max-width: 575px) {
    .catagory-product-card-2 {
        padding: 14px 12px 18px;
    }

    .catagory-product-card-2 .catagory-product-image {
        height: 118px;
    }

    .catagory-product-card-2 .catagory-product-image img {
        width: 118px;
        height: 118px;
    }

    .catagory-product-card-2 .catagory-product-content {
        margin-top: 12px;
    }

    .catagory-product-card-2 .catagory-product-content .catagory-button {
        margin-bottom: 12px;
    }

    .catagory-product-card-2 .catagory-product-content .theme-btn-2 {
        font-size: 12px;
        padding: 9px 8px;
        border-radius: 14px;
        white-space: nowrap;
    }

    .catagory-product-card-2 .catagory-product-content .theme-btn-2 i {
        font-size: 12px;
        margin-right: 5px;
    }

    .catagory-product-card-2 .catagory-product-content .info-price {
        gap: 4px;
        margin-bottom: 6px;
    }

    .catagory-product-card-2 .catagory-product-content .info-price h6 {
        font-size: 12px;
    }

    .catagory-product-card-2 .catagory-product-content .info-price span {
        font-size: 10px;
    }

    .catagory-product-card-2 .catagory-product-content h4 {
        font-size: 14px;
        line-height: 1.35;
    }

    /* the chip is anchored to the card corner, so it has to follow the
       padding in - otherwise it floats over the shrunken image well */
    .catagory-product-card-2 .icon {
        top: 10px;
        left: 10px;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

    .catagory-product-card-2 .icon i {
        font-size: 13px;
    }
}

/*--- Cart total box ------------------------------------------------------
    Shared by the cart and checkout pages: on both it now sits in its own
    column beside the form/table, so it fills that column instead of being
    inset, and picks up the same soft card surface as its neighbour.
--------------------------------------------------------------------------*/
/* main.css insets this box under .main-cart-wrapper - match that weight */
.main-cart-wrapper .cart-pragh-box.cart-summary {
    margin-top: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.cart-summary .cart-graph {
    border: none;
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
    background-color: var(--white);
}

/* on checkout the list is the last thing in the box - no trailing gap */
.cart-summary .cart-graph ul:last-child {
    margin-bottom: 0;
}

/* the running total is the number people look for - let it carry weight */
.cart-summary .cart-graph ul li:last-child span {
    font-weight: 600;
    color: var(--theme);
}

@media (max-width: 1199px) {
    .cart-summary .cart-graph {
        padding: 24px;
    }
}

/*--- Checkout page --------------------------------------------------------
    Billing form on the left, the cart page's summary component reused on
    the right. Below lg the two stack, summary last.
--------------------------------------------------------------------------*/
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single input:focus,
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single textarea:focus {
    border-color: var(--theme);
}

/* nice-select copies the select's classes onto the widget it builds, so this
   gives the delivery/pickup dropdown the same shell as the text fields (the
   theme only ever styled its own .country-select) */
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single .order-type-select {
    width: 100%;
    outline: none;
    box-shadow: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 12px 24px;
    color: var(--header);
    text-transform: uppercase;
    font-weight: 500;
    line-height: normal;
    height: auto;
}

/* nice-select capitalises its own trigger text - match the other fields */
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single .order-type-select .current,
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single .order-type-select .option {
    text-transform: uppercase;
}

/* the submit closes the card, so it sits at the trailing edge like the
   cart page buttons do */
/* Payment choice sits with the totals, directly above the button it decides
   the terms of. Real radios, hidden and drawn as a ring, so the whole row
   stays clickable and keyboard focus still lands somewhere visible. */
.checkout-payment {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 12px;
    background-color: var(--white);
    box-shadow: 0 4px 20px rgba(33, 33, 33, 0.06);
}

.checkout-payment h5 {
    margin-bottom: 14px;
    font-size: 17px;
    text-transform: uppercase;
}

.checkout-payment__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--header);
}

.checkout-payment__option:not(:last-of-type) {
    border-bottom: 1px solid rgba(33, 33, 33, 0.07);
}

.checkout-payment__option input {
    appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.checkout-payment__option input:checked {
    border-color: var(--theme);
    box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 20px var(--theme);
}

.checkout-payment__option input:focus-visible {
    outline: 2px solid var(--theme);
    outline-offset: 2px;
}

.checkout-payment .text-danger {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}

/* The line under Bank Pay explaining what happens after the order */
.checkout-payment__note {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(33, 33, 33, 0.07);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.checkout-actions {
    margin-top: 24px;
}

/*--- Explore Menu category cards -----------------------------------------
    The theme drops the artwork in at its natural 244px, which was fine when
    three cards shared the row. At four the card is narrower than the image,
    so overflow:hidden was slicing the right edge off every shot. Fit the
    image to the card and centre it in the fixed-height well instead.
--------------------------------------------------------------------------*/
.catagory-product-card .catagory-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.catagory-product-card .catagory-product-image > a {
    display: block;
    max-width: 100%;
    line-height: 0;
}

.catagory-product-card .catagory-product-image img {
    max-width: 100%;
    max-height: 245px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/*--- ... and scaled down again on phones ----------------------------------
    Two cards share the row below 767px, so each one is roughly 165px wide -
    less than the 245px image well and the 28px title were drawn for. At that
    width the card read as a tall slab with a small picture floating in it,
    and every two-word name wrapped. Everything here is the desktop card in
    proportion, just smaller: the well, the type, the divider and the shape
    watermark behind the title all come down together.

    h3's negative margin is what lifts the title over that watermark, so it
    has to track the icon's height - shrink one without the other and the
    title lands on top of it.
--------------------------------------------------------------------------*/
@media (max-width: 575px) {
    .catagory-product-card {
        padding: 14px 14px 24px;
        border-radius: 12px;
        margin-top: 20px;
    }

    /* White-on-white until the card is hovered - it costs a line box, so
       keep that line short. */
    .catagory-product-card h5 {
        font-size: 14px;
    }

    .catagory-product-card .catagory-product-image {
        height: 150px;
    }

    .catagory-product-card .catagory-product-image img {
        max-height: 150px;
    }

    .catagory-product-card .catagory-product-content {
        margin-top: 6px;
        padding-top: 12px;
    }

    .catagory-product-card .catagory-product-content::before {
        width: 36px;
        left: calc(50% - 18px);
    }

    .catagory-product-card .catagory-product-content .catagory-product-icon {
        width: 84px;
    }

    .catagory-product-card .catagory-product-content h3 {
        font-size: 17px;
        margin-top: -38px;
    }

    .catagory-product-card .catagory-product-content p {
        font-size: 12px;
    }
}

/*--- Livewire app additions ----------------------------------------------
    Everything below exists because the markup is now driven by components
    rather than hand-written per page.
--------------------------------------------------------------------------*/

/* The theme paints the basket count with a ::before whose content is
   hardcoded to "0". Read the live value off the element instead. */
.header-main .header-right .menu-cart .cart-icon::before {
    content: attr(data-count);
}

/* Add To Cart and the cart row controls are real buttons now, not anchors */
.catagory-product-card-2 .catagory-product-content .catagory-button .theme-btn-2 {
    border: none;
    cursor: pointer;
}

.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity-controller a,
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity-controller button {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1;
}

.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-remove button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* The quantity box is an input now so it can be typed into directly */
.cart-item-quantity input.cart-item-quantity-amount {
    width: 46px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--header);
    text-align: center;
    -moz-appearance: textfield;
}

.cart-item-quantity input.cart-item-quantity-amount::-webkit-outer-spin-button,
.cart-item-quantity input.cart-item-quantity-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Product name beside the thumbnail in the cart table */
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-info span {
    color: var(--header);
    font-weight: 500;
    text-transform: uppercase;
}

/* Place Order is a submit button rather than a link */
.checkout-actions .theme-btn {
    display: block;
    width: 100%;
    border: none;
    cursor: pointer;
}

/* Validation messages under the checkout fields */
.checkout-single-form .input-single small.text-danger {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    text-transform: none;
}

/* Cart thumbnails come from the product images now (up to ~370px) rather
   than the theme's pre-sized 129x132 crops - give them a fixed well. */
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-info img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    flex-shrink: 0;
    background-color: var(--bg);
    padding: 6px;
}

/*--- Sticky header -------------------------------------------------------
    The theme leaves the bar in normal flow until 250px of scroll, then snaps
    it to position:fixed with a 500ms fadeInDown. The effect is that the bar
    scrolls away, disappears, and drops back in - which is the flicker you see
    on the way down the page.

    Pin it from the very first pixel instead. The sticky element has to be the
    @persist wrapper, not `header` or `#header-sticky`: a sticky box can only
    travel inside its parent, and both of those sit inside a wrapper that is
    only as tall as the bar itself, so they unstick the moment the bar scrolls
    past its own height. The wrapper's parent is `body`, so it can travel the
    whole page.

    main.js still toggles the `.sticky` class past 250px; with the position
    handled here that class is left doing only what it should - fading in the
    drop shadow once the page has moved.
--------------------------------------------------------------------------*/

/* Livewire renders @persist('header') as <div x-persist="header"> */
[x-persist="header"] {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

#header-sticky.sticky {
    /* .sticky in main.css is position:fixed !important - undo it */
    position: static !important;
    top: auto !important;
    animation: none !important;
}

/* The theme also collapses the bar's padding and shrinks the logo when
   .sticky lands. A pinned bar still occupies its flow slot, so changing its
   height shoves the rest of the page up by that much mid-scroll. Hold the
   height steady and let .sticky change nothing but the shadow. */
@media (min-width: 991px) {
    .sticky.header-1 .header-main {
        padding: 10px 0;
    }
}

.sticky.header-1 .header-main .logo .header-logo img {
    width: 200px;
}

/*--- Mini-cart: a real remove button --------------------------------------
    The theme drew an X on each mini-cart row as a ::after on the product
    name. It was decoration only - a pseudo-element cannot take a click of
    its own, so hitting it just followed the name's link to /cart, and at
    right:-88px it actually landed outside the 340px panel. Drop it and put
    a real button in that corner instead.
--------------------------------------------------------------------------*/
.header-main .header-right .menu-cart .cart-box ul li a::after,
.header-middle-wrapper .middle-header-right .menu-cart .cart-box ul li a::after {
    content: none;
}

.header-main .header-right .menu-cart .cart-box ul li {
    position: relative;
}

.cart-box ul li .cart-remove {
    flex-shrink: 0;
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    color: var(--white);
    background-color: var(--theme2);
    opacity: 0.75;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.cart-box ul li .cart-remove:hover {
    opacity: 1;
    transform: scale(1.12);
}

/*--- Mini-cart: close the hover gap ---------------------------------------
    The theme drops the panel at top:200% of .menu-cart. That was fine when
    the trigger was bare text, but the icon is a 50px circle here, so 200%
    left 50px of dead space between the two. The pointer had to cross space
    that is not part of .menu-cart, which dropped :hover and started the
    0.5s hide; re-entering restarted the show, so the panel flickered on the
    way down instead of just opening.

    Sit it under the icon with a small visual gap and bridge that gap with a
    transparent strip, so the pointer never leaves :hover. The rotateX flip
    goes with it - a rotating panel changes its own hit area mid-transition,
    which fed the same flicker. A fade and a short lift read calmer and hold
    a stable shape the whole way.
--------------------------------------------------------------------------*/
/* Empty basket: the panel is one line, so it needs its own padding - the
   theme's 5px 20px 0 assumes a list and a button row underneath. */
.header-main .header-right .menu-cart .cart-box__empty {
    margin: 0;
    padding: 18px 0 22px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.header-main .header-right .menu-cart .cart-box {
    top: 100%;
    margin-top: 12px;
    transform: translateY(-8px);
    opacity: 0;
    /* visibility flips only once the fade has finished, so the panel is not
       yanked out from under a pointer that is still on its way in */
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

/* the bridge: covers the 12px gap so :hover is continuous icon -> panel.
   It inherits the panel's visibility, so it cannot swallow clicks when the
   panel is closed. */
.header-main .header-right .menu-cart .cart-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.header-main .header-right .menu-cart:hover .cart-box {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/*--- Minimum order --------------------------------------------------------
    Below the minimum spend the route to checkout is closed off. The button
    becomes a <span> rather than an <a> - there is no href to follow, so it
    cannot be reached by keyboard or by middle-click either, which a styled
    anchor would still allow. The note beside it carries the shortfall.
--------------------------------------------------------------------------*/
.theme-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* Place Order is a real <button>, so it carries the disabled attribute
   rather than a class - the theme styles neither, so say it here. */
.theme-btn:disabled,
.theme-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.theme-btn:disabled:hover::before,
.theme-btn[disabled]:hover::before {
    /* the theme wipes in a hover fill; hold it back on a dead button */
    width: 0;
}

.cart-minimum-note,
.checkout-minimum-note {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    border-inline-start: 3px solid var(--theme2);
    background-color: rgba(217, 65, 0, 0.07);
    color: var(--header);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/* In the summary box the note sits between the totals and the button */
.cart-summary .cart-minimum-note {
    margin-top: 18px;
}

/*--- Phone bottom bar -----------------------------------------------------
    Only exists below 768px; above that the sticky header already carries the
    same links. The sheet is a sibling of the bar rather than a child of the
    page, so it can slide up from the bar without anything on the page
    clipping it.
--------------------------------------------------------------------------*/
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: block;
    }

    /* the bar sits over the page, so the last section needs room to clear it
       or the footer's final row is unreachable */
    body {
        padding-bottom: 74px;
    }

    .mobile-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 64px;
        padding-bottom: env(safe-area-inset-bottom);
        background-color: var(--white);
        box-shadow: 0 -6px 24px rgba(33, 33, 33, 0.12);
    }

    .mobile-bottom-bar a {
        flex: 1;
        text-align: center;
        color: var(--header);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .mobile-bottom-bar a i {
        display: block;
        font-size: 17px;
        margin-bottom: 3px;
    }

    .mobile-bottom-bar a:hover,
    .mobile-bottom-bar a:focus {
        color: var(--theme);
    }

    /* the basket lifts out of the bar so it reads as the primary action */
    .mobile-cart-fab {
        position: relative;
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
        margin-top: -22px;
        border: 4px solid var(--white);
        border-radius: 50%;
        background-color: var(--theme);
        color: var(--white);
        font-size: 19px;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(71, 133, 30, 0.35);
    }

    .mobile-cart-fab em {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 19px;
        height: 19px;
        line-height: 19px;
        padding: 0 4px;
        border-radius: 50px;
        background-color: var(--theme2);
        color: var(--white);
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
    }

    .mobile-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1035;
        background-color: rgba(20, 20, 20, 0.45);
    }

    .mobile-cart-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 64px;
        z-index: 1039;
        max-height: 62vh;
        display: flex;
        flex-direction: column;
        border-radius: 18px 18px 0 0;
        background-color: var(--white);
        box-shadow: 0 -10px 30px rgba(33, 33, 33, 0.18);

        /* closed: parked below its own height and inert, so it cannot be
           tabbed into or swiped at while hidden */
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.35s ease-in-out, visibility 0.35s;
    }

    .mobile-cart-sheet.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .mobile-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        border-bottom: 1px solid rgba(33, 33, 33, 0.08);
    }

    .mobile-sheet-head h5 {
        font-size: 16px;
        margin: 0;
    }

    .mobile-sheet-head button,
    .mobile-sheet-line button {
        border: 0;
        background: none;
        color: var(--text);
        font-size: 14px;
        cursor: pointer;
    }

    .mobile-sheet-body {
        overflow-y: auto;
        padding: 6px 18px;
    }

    .mobile-sheet-line {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(33, 33, 33, 0.06);
    }

    .mobile-sheet-line img {
        width: 46px;
        height: 46px;
        border-radius: 8px;
        object-fit: contain;
    }

    .mobile-sheet-line-text {
        flex: 1;
        text-align: left;
    }

    .mobile-sheet-line-text h6 {
        font-size: 13px;
        margin: 0 0 2px;
    }

    .mobile-sheet-line-text span {
        font-size: 12px;
        color: var(--text);
    }

    .mobile-sheet-empty {
        padding: 22px 0;
        text-align: center;
        font-size: 13px;
    }

    .mobile-sheet-foot {
        padding: 12px 18px 16px;
        border-top: 1px solid rgba(33, 33, 33, 0.08);
    }

    .mobile-sheet-total {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .mobile-sheet-foot .theme-btn {
        width: 100%;
        padding: 11px 0;
    }

    /* the theme's back-to-top button lands on top of the basket - lift it */
    .scroll-up {
        bottom: 88px;
    }
}

/*--- Mobile type scale ----------------------------------------------------
    The theme's headings are drawn for a desktop column and only step down
    once, so on a 375px screen the hero ran at 60px and the price at 55px -
    two or three words per line. Everything here is the same hierarchy, just
    sized for the width it actually gets.
--------------------------------------------------------------------------*/
@media (max-width: 767px) {
    .hero-2 .hero-content h1 {
        font-size: 34px;
        line-height: 1.12;
    }

    .hero-2 .hero-content .price-text h2 {
        font-size: 30px;
    }

    .hero-2 .hero-content .price-text h3 {
        font-size: 17px;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .grilled-banner .grilled-content h2 {
        font-size: 26px;
        line-height: 1.15;
    }

    .grilled-banner .grilled-content h3 {
        font-size: 18px;
    }

    .grilled-banner .grilled-content h4 {
        font-size: 14px;
    }

    .burger-banner-items .burger-content h2 {
        font-size: 24px;
    }

    .burger-banner-items .burger-content h3 {
        font-size: 16px;
    }

    .burger-banner-items .burger-content h4 {
        font-size: 24px;
    }

    .single-offer-items.style-2 .offer-content h3 {
        font-size: 24px;
    }

    .single-offer-items.style-2 .offer-content h5 {
        font-size: 13px;
    }

    .support-text h3 {
        font-size: 20px;
    }

    .footer-widgets-wrapper .widget-head h4 {
        font-size: 17px;
    }

    .footer-address-text h6 {
        font-size: 15px;
    }
}

/*--- Footer ---------------------------------------------------------------
    Dark, over the theme's own textured plate. The page body is cream, so a
    white footer had nothing to separate it from the last section and simply
    read as more page - the dark band gives the page an ending.

    Layout is one brand row (mark + social) over a hairline, then a four
    column grid that collapses to two and then one. The lead column is wider
    than the link columns: a paragraph and a list want different measures.
--------------------------------------------------------------------------*/
.site-footer {
    position: relative;
    background-color: #1c1c1c;
    background-size: cover;
    background-position: center;
}

/* the plate is busy under text, so knock it back rather than lighten the
   type - the copy has to stay at full contrast */
.site-footer::before {
    position: absolute;
    inset: 0;
    content: "";
    background-color: rgba(20, 20, 20, 0.88);
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

.site-footer .footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 40px 0 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* the mark is black artwork on an opaque white plate, so it can neither sit
   on the dark band nor be knocked out to white - inverting it just produces a
   white rectangle. Give it a white chip instead: the plate becomes the chip
   and the brand colours survive. */
.site-footer .footer-brand-logo {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 12px;
    background-color: var(--white);
    line-height: 0;
}

.site-footer .footer-brand-logo img {
    width: 168px;
    height: auto;
}

.site-footer .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-footer .footer-social a {
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    text-align: center;
    transition: all 0.35s ease-in-out;
}

.site-footer .footer-social a:hover {
    background-color: var(--theme);
    border-color: var(--theme);
    color: var(--white);
    transform: translateY(-3px);
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
    gap: 40px;
    padding: 38px 0 44px;
}

.site-footer .footer-col h5 {
    margin-bottom: 18px;
    color: var(--theme3);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.site-footer .footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer .footer-col li + li {
    margin-top: 10px;
}

.site-footer .footer-col a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    transition: color 0.3s ease-in-out;
}

.site-footer .footer-col a:hover {
    color: var(--theme3);
}

.site-footer .footer-blurb {
    margin: 0;
    max-width: 40ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.75;
}

.site-footer .footer-note,
.site-footer .footer-hours {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 1.7;
}

.site-footer .footer-hours {
    margin-top: 0;
    color: rgba(255, 255, 255, 0.72);
}

/* the one thing in the footer worth clicking gets a button, not a link */
.site-footer .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 26px;
    border-radius: 50px;
    background-color: var(--theme);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: all 0.35s ease-in-out;
}

.site-footer .footer-cta:hover {
    background-color: var(--theme2);
    color: var(--white);
    transform: translateY(-2px);
}

.site-footer .footer-bar {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer .footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0;
}

.site-footer .footer-bar p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
}

.site-footer .footer-bar a {
    color: rgba(255, 255, 255, 0.85);
}

.site-footer .footer-bar a:hover {
    color: var(--theme3);
}

.site-footer .footer-bar-tagline {
    color: var(--theme3) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

@media (max-width: 991px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 575px) {
    .site-footer .footer-top {
        justify-content: center;
        padding: 32px 0 22px;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px 0 34px;
        text-align: center;
    }

    .site-footer .footer-blurb {
        max-width: none;
    }

    .site-footer .footer-bar-inner {
        justify-content: center;
        text-align: center;
    }
}

/*--- Back to top ----------------------------------------------------------
    The theme leaves this button transparent with an orange arrow and an
    orange progress ring. Over the cream page body that is faint, and over
    the green footer bar it all but disappears. Filling it with brand orange
    reads against both, and the ring goes white so it is legible on the fill.
--------------------------------------------------------------------------*/
.scroll-up {
    background-color: var(--theme2);
    box-shadow: 0 8px 22px rgba(33, 33, 33, 0.28);
}

.scroll-up::after {
    color: var(--white);
}

.scroll-up svg.scroll-circle path {
    stroke: var(--white);
    stroke-width: 5px;
}

.scroll-up:hover {
    background-color: var(--theme);
    box-shadow: 0 10px 26px rgba(71, 133, 30, 0.45);
}

/*--- Top Deals card -------------------------------------------------------
    The description, price and basket button sit under the banner rather than
    over it. On a photograph they were competing with the artwork for legibility
    and the price in particular has to be unambiguous.
--------------------------------------------------------------------------*/
.deal-card .single-offer-items {
    margin-bottom: 0;
}

.deal-card .deal-details {
    padding: 18px 22px 20px;
    border-radius: 0 0 18px 18px;
    background-color: var(--white);
    box-shadow: 0 10px 30px rgba(33, 33, 33, 0.07);
}

.deal-card .deal-description {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.6;
}

.deal-card .deal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.deal-card .deal-price strong {
    color: var(--theme2);
    font-size: 24px;
    font-weight: 700;
}

.deal-card .deal-price span {
    margin-left: 8px;
    color: var(--text);
    font-size: 16px;
    text-decoration: line-through;
}

.deal-card .deal-footer .theme-btn {
    border: none;
    cursor: pointer;
    padding: 12px 26px;
}

@media (max-width: 575px) {
    .deal-card .deal-details {
        padding: 14px 16px 16px;
    }

    .deal-card .deal-description {
        font-size: 14px;
    }

    .deal-card .deal-price strong {
        font-size: 20px;
    }

    .deal-card .deal-footer .theme-btn {
        padding: 10px 18px;
    }
}

/*--- Section rhythm -------------------------------------------------------
    The theme runs 120px of padding above and below every section, which on a
    page of six sections is nearly a screen and a half of empty ground. Every
    section on the site carries .section-padding, so one override sets the
    spacing everywhere and keeps it identical from one section to the next.

    The steps below are the theme's own breakpoints, kept so the rhythm tightens
    on smaller screens rather than staying at desktop scale.
--------------------------------------------------------------------------*/
.section-padding {
    padding: 72px 0;
}

@media (max-width: 1199px) {
    .section-padding {
        padding: 64px 0;
    }
}

@media (max-width: 991px) {
    .section-padding {
        padding: 56px 0;
    }
}

@media (max-width: 575px) {
    .section-padding {
        padding: 44px 0;
    }
}

/*--- Thank you page -------------------------------------------------------
    The order confirmation used to be a box on the checkout page; it is its
    own route now, so it gets a card that can stand alone.
--------------------------------------------------------------------------*/
.thankyou-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 46px 40px;
    border-radius: 18px;
    background-color: var(--white);
    box-shadow: 0 10px 40px rgba(33, 33, 33, 0.08);
    text-align: center;
}

.thankyou-mark {
    width: 74px;
    height: 74px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 30px;
    color: var(--white);
    background-color: var(--theme);
}

.thankyou-card h2 {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.thankyou-lead {
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}

.thankyou-reference {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 28px;
    padding: 14px 30px;
    border-radius: 10px;
    background-color: var(--bg);
}

.thankyou-reference small {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
}

.thankyou-reference strong {
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--header);
}

.thankyou-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.thankyou-meta li {
    flex: 1 1 150px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(33, 33, 33, 0.08);
}

.thankyou-meta small {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
}

.thankyou-meta span {
    font-size: 17px;
    font-weight: 600;
    color: var(--header);
}

.thankyou-items,
.thankyou-pay,
.thankyou-receipt {
    margin-bottom: 28px;
    padding: 22px 24px;
    border-radius: 12px;
    background-color: var(--bg);
    text-align: start;
}

.thankyou-items h5,
.thankyou-pay h5,
.thankyou-receipt h5 {
    margin-bottom: 14px;
    font-size: 17px;
    text-transform: uppercase;
}

.thankyou-items ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.thankyou-items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(33, 33, 33, 0.08);
    font-size: 15px;
    color: var(--header);
}

.thankyou-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    font-size: 17px;
    font-weight: 600;
    color: var(--theme);
}

.thankyou-pay__lead,
.thankyou-receipt__lead {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
}

/* The account to pay into. Set in tabular-nums so a long account number is
   readable a digit at a time, and selectable so it can be copied. */
.thankyou-account {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 10px;
    background-color: var(--white);
}

.thankyou-account li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
}

.thankyou-account li:not(:last-child) {
    border-bottom: 1px solid rgba(33, 33, 33, 0.08);
}

.thankyou-account small {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
}

.thankyou-account strong {
    font-size: 16px;
    text-align: end;
    word-break: break-all;
    font-variant-numeric: tabular-nums;
    color: var(--header);
}

.thankyou-pay__note {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}

.thankyou-receipt__form .input-single {
    margin-bottom: 12px;
}

.thankyou-receipt__form .input-single input {
    width: 100%;
}

/* The real file input is unstylable; drive it from its label instead - which
   is also what makes the whole strip a click target. */
.thankyou-receipt__upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.thankyou-receipt__upload label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background-color: var(--white);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--header);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.thankyou-receipt__upload label:hover,
.thankyou-receipt__upload input[type="file"]:focus-visible + label {
    border-color: var(--theme);
    background-color: rgba(71, 133, 30, 0.05);
}

.thankyou-receipt__upload label i {
    color: var(--theme);
}

.thankyou-receipt__hint {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text);
}

.thankyou-receipt__form .theme-btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    border: none;
    cursor: pointer;
}

.thankyou-receipt__done {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.thankyou-receipt__done i {
    font-size: 26px;
    line-height: 1.2;
    color: var(--theme);
}

.thankyou-receipt__done h5 {
    margin-bottom: 6px;
}

.thankyou-receipt__done p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
}

.thankyou-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

@media (max-width: 575px) {
    .thankyou-card {
        padding: 32px 22px;
    }

    .thankyou-actions .theme-btn {
        width: 100%;
    }
}

/*--- Search --------------------------------------------------------------
    The header modal only collects a term; /search does the work. Both use
    the same pill so the box looks like the same control in either place.
--------------------------------------------------------------------------*/
.search-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(33, 33, 33, 0.28);
}

.search-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    font-size: 17px;
    color: var(--header);
    background-color: rgba(33, 33, 33, 0.07);
    transition: all 0.3s ease-in-out;
}

.search-modal__close:hover {
    color: var(--white);
    background-color: var(--theme2);
}

.search-modal__body {
    padding: 44px 40px;
}

.search-modal__body h4 {
    margin-bottom: 6px;
    text-transform: uppercase;
}

.search-modal__body > p {
    margin-bottom: 22px;
    font-size: 15px;
    color: var(--text);
}

.search-modal__form,
.search-page__box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--white);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-modal__form:focus-within,
.search-page__box:focus-within {
    border-color: var(--theme);
    box-shadow: 0 0 0 4px rgba(71, 133, 30, 0.1);
}

.search-modal__icon,
.search-page__icon {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1;
    color: var(--theme);
}

.search-modal__form input,
.search-page__box input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: 16px;
    color: var(--header);
}

/* WebKit paints its own clear button inside a type=search field; the form
   supplies one that matches the rest of the site. */
.search-modal__form input::-webkit-search-cancel-button,
.search-page__box input::-webkit-search-cancel-button {
    appearance: none;
}

.search-modal__form .theme-btn {
    flex: 0 0 auto;
    padding: 15px 32px;
    border: none;
    cursor: pointer;
}

/* Livewire's message, in the spot the browser's own bubble used to take */
.search-modal__error {
    display: block;
    margin-top: 10px;
    padding-left: 18px;
    font-size: 14px;
}

.search-modal__form:has(+ .search-modal__error) {
    border-color: var(--theme2);
}

.search-page__box {
    max-width: 620px;
    margin: 0 auto 26px;
}

.search-page__box button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    color: var(--header);
    background-color: rgba(33, 33, 33, 0.07);
    transition: all 0.25s ease;
}

.search-page__box button:hover {
    color: var(--white);
    background-color: var(--theme2);
}

.search-page__count {
    margin-bottom: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    transition: opacity 0.2s ease;
}

.search-page__count.is-loading {
    opacity: 0.45;
}

.search-page__hint {
    margin: 0;
    padding: 30px 0 10px;
    text-align: center;
    font-size: 16px;
    color: var(--text);
}

.search-page__hint a {
    font-weight: 600;
    color: var(--theme);
}

@media (max-width: 575px) {
    .search-modal__body {
        padding: 34px 22px;
    }

    .search-modal__form {
        flex-wrap: wrap;
        border-radius: 18px;
    }

    .search-modal__form .theme-btn {
        width: 100%;
    }
}

/* Favourites in the offcanvas panel - the only way to reach saved items on a
   phone now that the header heart is hidden there. */
.offcanvas__saved {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    padding: 14px 16px;
    border-radius: 10px;
    background-color: rgba(217, 65, 0, 0.08);
    font-size: 16px;
    font-weight: 600;
    color: var(--header);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.offcanvas__saved i {
    font-size: 17px;
    color: var(--theme2);
    transition: color 0.25s ease;
}

.offcanvas__saved:hover {
    background-color: var(--theme2);
    color: var(--white);
}

.offcanvas__saved:hover i {
    color: var(--white);
}

/* Its own class, not :last-child - with no count the label is the last
   child and would take the badge's styling. */
.offcanvas__saved-count {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--white);
    background-color: var(--theme);
}

/* Install App in the offcanvas panel - same card as Favourites, in green. */
.offcanvas__install {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: -14px 0 26px;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background-color: rgba(71, 133, 30, 0.1);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: var(--header);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.offcanvas__install i {
    font-size: 17px;
    color: var(--theme);
    transition: color 0.25s ease;
}

.offcanvas__install:hover {
    background-color: var(--theme);
    color: var(--white);
}

.offcanvas__install:hover i {
    color: var(--white);
}