/* self-hosted from Google Fonts (SIL Open Font License): Staatliches, Mulish, Kaushan Script */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/kiosk/fonts/kaushan-script-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/kiosk/fonts/mulish-500-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Staatliches';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/kiosk/fonts/staatliches-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Font Awesome (from the template), subset to the icons in use by tools/subset-icons.py */
@font-face {
  font-family: 'Fa solid 900';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/kiosk/fonts/fa-solid-sub.woff2) format('woff2');
}
@font-face {
  font-family: 'Fa Brands 400 (6.4.2)';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/kiosk/fonts/fa-brands-sub.woff2) format('woff2');
}

/* The Kiosk at the Club: brand layer over the Tasty Webflow template (loaded after the template CSS).
   Only colours, the accent font, the logo and a few content-driven details change here. The template's layout
   (sizes, spacing, grids, type scale) is left alone.
   Palette from the logo: black, logo green #84fc04, white. Template mapping:
     cream page  --background #fffae6  ->  near-black
     dark green  --text       #30533f  ->  off-white (text)  /  --k-surface (where it was a card/footer fill)
     red accent  --primary    #e94431  ->  logo green (text on it -> ink)
     beige       --primary-light       ->  dark fill for pills/buttons */
:root {
  --background: #0b0b0b;
  --text: #f4f6f0;
  --primary: #84fc04;
  --primary-light: #1a2119;
  --white-50: #ffffff80;
  --k-surface: #182018;
  --k-surface-2: #1f2a1f;
  --k-line: rgba(244, 246, 240, .16);
  --k-ink: #0b0b0b;
  --k-muted: #c9cfc3;
}
html { background-color: var(--background); color-scheme: dark; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--primary); color: var(--k-ink); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* the template removes focus rings from the nav buttons and tab pills (.w-*:focus{outline:0}); keyboard users need them */
.w-nav-button:focus-visible, .w-tab-link:focus-visible, .w-nav-brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.newsletter-wrapper :focus-visible { outline-color: var(--k-ink); }
.k-skip { position: absolute; left: 12px; top: -60px; z-index: 10000; padding: 10px 16px; border-radius: 8px; background: var(--primary); color: var(--k-ink); font-weight: 700; text-decoration: none; }
.k-skip:focus { top: 12px; }
[id] { scroll-margin-top: 110px; }
.k-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.k-green { color: var(--primary); }
p { color: var(--k-muted); }

/* accent font: the logo's brush "Club" (Kaushan Script) replaces the template's Fraunces italic */
.text-span, .section-subtitle, .text-span-3 { font-family: 'Kaushan Script', 'Brush Script MT', cursive; font-style: normal; font-weight: 400; }
.section-subtitle, .text-span { color: var(--primary); }

/* where the template used its dark green as a FILL, use the dark surface; light text on it stays light */
.footer, .product-collection-item, .blog-collection-item, .accordion-item, .contacts-form-wrapper, .customer-review-card,
.product-collection-2-item, .product-3-collection-item, .grid-title, .block-header { background-color: var(--k-surface); }
.footer-link, .footer-rights, .footer-copyright, .footer-copyright-link, .footer-social-icon, .collection-title-white,
.bottom-collection-text, .home-2-price-wrapper, .customer-review-text, .accordion-title, .accordion-icon,
.contacts-form-title, .faq-link, .product-collection-item .text-white { color: var(--text); }
.footer-bottom-wrapper { border-top-color: var(--k-line); }
.footer-brand-wrapper { border-right-color: var(--k-line); border-bottom-color: var(--k-line); }
.collection-title-white:hover, .footer-link:hover, .footer-social-icon:hover, .footer-copyright-link:hover { color: var(--primary); }
/* note: template lists paint their text with background-clip:text (ul background = text colour), so never set a
   ul background to transparent */

/* hand-drawn outline button (View menu): the hover fill is the logo green, its text turns ink (IX2 patched) */
.button-bg { background-color: var(--primary); }
.primary-button { background-color: transparent; }

/* text sitting on a green fill */
.newsletter-wrapper .text-span, .newsletter-wrapper .text-white, .section.red-bg { color: var(--k-ink); }

/* nav: logo badge in the centre slot, socials as icon links */
.navbar-absolute { border-bottom-color: rgba(132, 252, 4, .55); }
.k-logo { display: block; height: auto; }
.k-logo-desk { width: 76px; margin: 6px 0; }
.k-logo-tab { width: 48px; }
.k-nav-social { font-family: "Fa Brands 400 (6.4.2)", sans-serif; font-size: 17px; line-height: 1; }
.nav-link:hover, .nav-link:focus-visible { color: var(--text); }
.footer-logo.k-logo-foot { width: 140px; height: auto; }

/* hero: the client's three-line tagline; sized so its widest line ("Great vibes") fills the template's title box
   the way "Delivered" did (same three-line rhythm, same breakpoints) */
.home-banner-title .k-line { display: block; white-space: nowrap; }
/* the nowrap lines would otherwise shrink the flex container below the template's width (desktop layout only) */
@media screen and (min-width: 992px) { .home-banner-section > .base-container { width: 100%; } }
/* the title slides in from the side (template IX2): clip it so phones never see a wider page */
.home-banner-section { overflow-x: clip; }
.home-banner-title { font-size: 88px; }
@media screen and (min-width: 1280px) { .home-banner-title { font-size: 124px; } }
@media screen and (min-width: 1920px) { .home-banner-title { font-size: 167px; } }
@media screen and (max-width: 991px) { .home-banner-title { font-size: 56px; } }
@media screen and (max-width: 767px) { .home-banner-title { font-size: 34px; } }

/* menu cards: the name is a heading now (was a link to a product page); keep the template's look */
h3.shop-item-link { margin: 0; font-family: Mulish, sans-serif; font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); }
.k-item-desc { margin-bottom: 0; color: var(--k-muted); font-size: 16px; line-height: 1.5; }
.k-card-line { margin: 18px 0 22px; color: var(--k-muted); }
.k-card-button { display: inline-block; text-decoration: none; white-space: nowrap; }
.k-pane-note { margin: 40px 0 0; text-align: center; color: var(--k-muted); }

/* list sections (sauces, breakfast rolls): template product-details block */
.k-panel-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
.k-list-panel .rich-product-text ul { margin: 0 0 20px; padding-left: 20px; }
.k-list-panel .rich-product-text li { margin-bottom: 8px; color: var(--text); }
.k-list-panel .rich-product-text .k-as-h6 { margin-top: 20px; margin-bottom: 14px; }
.k-list-foot { color: var(--k-muted); }
/* the template's product page keeps price/cart above this block; with only an intro above, close the gap */
.k-list-panel .shop-details-block { margin-top: 24px; }

/* find us: contact strip icons from FA Brands where needed, map in a softer frame */
.k-brand-icon { font-family: "Fa Brands 400 (6.4.2)", sans-serif; }
#find-us .contact-link { line-height: 1.5; }
.k-map { position: relative; padding-bottom: 42% !important; border-radius: 20px; overflow: hidden; border: 1px solid var(--k-line); }
.k-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.6) contrast(.9); }

/* follow box: two social buttons instead of the email form */
.k-follow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 0; }
.k-follow-button { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* template hover = accent fill + white text, which is unreadable on lime: outline style in ink instead */
.newsletter-wrapper .k-follow-button:hover { background-color: transparent; border-color: var(--k-ink); color: var(--k-ink); }
.k-btn-icon { font-family: "Fa Brands 400 (6.4.2)", sans-serif; font-size: 17px; line-height: 1; }

/* heading outline: retagged headings keep the template look of the tag they replace (h6 28px, h4 46px, h3 62px) */
.k-as-h6 { font-size: 28px; line-height: 1em; }
.k-as-h4 { margin-top: 10px; font-size: 46px; line-height: 1em; font-weight: 400; text-transform: none; }
.k-as-h3 { margin-top: 10px; font-size: 62px; line-height: 1em; font-weight: 400; }
@media screen and (max-width: 991px) { .k-as-h4 { font-size: 40px; } .k-as-h3 { font-size: 58px; } }
@media screen and (max-width: 767px) { .k-as-h3 { font-size: 46px; } }

/* 404: "Offside!" is the page's h1 now, with the template's h2 look */
.k-as-h2 { font-size: 72px; line-height: .97em; }
@media screen and (max-width: 991px) { .k-as-h2 { font-size: 64px; } }
@media screen and (max-width: 767px) { .k-as-h2 { font-size: 56px; } }

/* reduced motion: no endless ticker or spinning badges, content shown without slide-ins */
@media (prefers-reduced-motion: reduce) {
  [data-w-id] { opacity: 1 !important; transform: none !important; }
  .rotate-text-wrapper, .star-red, .star-border, .front-star, .back-star, .animation-image, .element-left, .element-right, .newsletter-absolute-image { animation: none !important; transform: none !important; transition: none !important; }
  .product-image, .shop-list-image { transition: none !important; }
}

/* 404 */
._404-paragraph a { font: inherit; text-transform: none; letter-spacing: 0; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.k-logo-404 { width: 96px; height: auto; }
._404 { -webkit-text-stroke-color: var(--primary); color: transparent; }

@media screen and (max-width: 991px) {
  .k-map { padding-bottom: 60% !important; }
  /* bigger hit areas for the template's small nav icons, same look */
  .menu-button { padding: 12px; margin: -12px; }
}
.footer-social-icon { padding: 12px; margin: -12px 18px -12px -12px; }
.footer-social-icon.last-child { margin-right: -12px; }
#find-us .contact-link { display: inline-block; padding: 8px 0; margin: -8px 0; }
@media screen and (max-width: 767px) {
  /* the client's copy runs longer than the template's: keep the decorative doodles clear of it on phones */
  .element-right.testimonials-element-right { bottom: auto; top: 6%; right: 6%; }
  .newsletter-absolute-image { top: -30px; right: 0; }
}
@media screen and (max-width: 479px) {
  .newsletter-absolute-image { display: none; }
  .section-subtitle.k-as-h4 { font-size: 34px; }
  /* nine sections: one swipeable row of the template's pills instead of six wrapped rows */
  .shop-tabs-menu { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -15px; padding: 0 15px 30px;
    gap: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 15px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .shop-tabs-menu.k-at-end { -webkit-mask-image: none; mask-image: none; }
  /* template mobile footer: the menu links get their own full-width row */
  .footer-columb-wrapper > .footer-links-wrapper:first-child { flex-basis: 100%; width: 100%; align-items: center; }
  .shop-tabs-menu::-webkit-scrollbar { display: none; }
  .sessions-tab-link { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .k-map { padding-bottom: 85% !important; }
}