/*
 * Wienerschnitzel Redesign — Design + header/footer
 * Loaded after theme.css to override legacy styling.
 *
 * Source of truth: assets/JPG/WS-Redesign_UI-Style-Guide.jpg
 */

/* ------------------------------------------------------------------
 * Total 6.7 migration — restore the 1rem = 10px base.
 * Old Total had `html { font-size: 62.5%; }` at the top of its stylesheet;
 * Total 6.7 dropped it, so every rem/em-based size across the entire site
 * was rendering ~60% larger than designed. ws's redesign tokens and theme.css
 * are calibrated for the 62.5% base, so restoring it here.
 * ------------------------------------------------------------------ */
html { font-size: 62.5%; }


/* ------------------------------------------------------------------
 * 1. Design (CSS variables)
 * ------------------------------------------------------------------ */
:root {
	/* Brand colors */
	--ws-dark-blue: #182858;
	--ws-dark-blue-2: #0f1d44;
	/* #DC1B2E is the WCAG-adjusted brand red: the historical #ED1B2E only
	   reaches 4.38:1 against white (in either direction), under the 4.5:1
	   minimum for small text (WCAG 1.4.3). #DC1B2E reads the same and
	   hits 4.95:1, so it's used site-wide for text/background pairs. */
	--ws-red: #DC1B2E;
	--ws-red-hover: #B71524;
	--ws-red-a11y: var(--ws-red);    /* legacy alias, kept for old rules */
	--ws-red-on-navy: #FF5E64;       /* red-tone text on --ws-dark-blue, 4.74:1 */
	--ws-black: #000000;
	--ws-charcoal: #212121;
	--ws-pale-blue: #DBF1FB;
	--ws-light-gray: #EAEAEA;
	--ws-white: #ffffff;

	/* Typography */
	--ws-font-heading: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
	--ws-font-body: Arial, Helvetica, sans-serif;

	--ws-fw-bold: 700;
	--ws-fw-extrabold: 800;
	--ws-fw-black: 900;

	/* Fluid heading sizes (px, not rem - parent theme sets html font-size 62.5%) */
	--ws-fs-display: clamp(32px, 24px + 2.5vw, 56px);
	--ws-fs-h2: clamp(22px, 19.33px + 0.83vw, 36px);
	--ws-fs-h3: clamp(20px, 18px + 0.63vw, 26px);
	--ws-fs-h4: clamp(18px, 16px + 0.63vw, 24px);
	--ws-fs-h5: clamp(16px, 14px + 0.63vw, 22px);
	--ws-fs-h6: clamp(14px, 12.67px + 0.42vw, 18px);
	--ws-fs-body: 16px;
	--ws-fs-small: 14px;

	--ws-lh-body: 1.5;
	--ws-lh-tight: 1.2;

	/* Buttons */
	--ws-btn-radius: 999px;
	--ws-btn-md-w: 220px;
	--ws-btn-md-h: 50px;
	--ws-btn-sm-w: 220px;
	--ws-btn-sm-h: 40px;
	--ws-btn-fs-md: 20px;
	--ws-btn-fs-sm: 14px;
	--ws-nav-btn-h: 50px;
	--ws-nav-btn-fs: 34px;

	/* Layout */
	--ws-container-max: 1350px;
	--ws-header-inner-max: 1160px;   /* narrower than the page container so the logo/nav/order row sits comfortably between the deco stars */
	--ws-container-pad: 20px;
	--ws-topbar-h: 32px;
	--ws-header-h: 90px;
	--ws-mobile-header-h: 114px;
	--ws-logo-h: 114px;          /* image height of the W logo in #site-logo */
	--ws-mobile-bottom-nav-h: 69px;
	--ws-logo-overlap: 16px;     /* logo overlaps upward into the top-bar */
	--ws-deco-overlap: 56px;     /* stars/deco overlap upward into the top-bar */
	--ws-map-listing-w: 500px;   /* width of the locations-page result column */

	/* Effects */
	--ws-transition: 200ms ease;
	--ws-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12);
	--ws-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.15);
	--ws-red-gradient: linear-gradient(180deg, var(--ws-red) 40%, #8e1019 100%);

	/* ------------------------------------------------------------------
	 * Total wpex-text-* override — recalibrate Total's rem-based size
	 * scale for our 62.5% (1rem = 10px) root. Without this every
	 * `.wpex-text-*` utility renders at ~62.5% of Total's intended size,
	 * which is why widget titles, meta lines, and entry titles all looked
	 * undersized. Values below are Total's defaults converted rem → px
	 * (vw components are viewport-relative, so they're unchanged).
	 * ------------------------------------------------------------------ */
	--wpex-text-xs:   12px;
	--wpex-text-sm:   14px;
	--wpex-text-base: 16px;
	--wpex-text-lg:   clamp(18px, 15.5px + 0.5vw, 20px);
	--wpex-text-xl:   clamp(20px, 15px + 1vw, 24px);
	--wpex-text-2xl:  clamp(24px, 19px + 1vw, 28px);
	--wpex-text-3xl:  clamp(28px, 20.5px + 1.5vw, 34px);
	--wpex-text-4xl:  clamp(34px, 13px + 3vw, 40px);
	--wpex-text-5xl:  clamp(40px, 16.5px + 3.5vw, 48px);
	--wpex-text-6xl:  clamp(48px, 17.5px + 4.5vw, 58px);
	--wpex-text-7xl:  clamp(58px, 43px + 3vw, 70px);
}


/* ------------------------------------------------------------------
 * 2. Base resets / typography
 * ------------------------------------------------------------------ */
body {
	font-family: var(--ws-font-body);
	color: var(--ws-charcoal);
	font-size: var(--ws-fs-body);
	line-height: var(--ws-lh-body);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-family: var(--ws-font-heading);
	color: var(--ws-charcoal);
	line-height: var(--ws-lh-tight);
}

body h1, .ws-h1 { font-weight: var(--ws-fw-bold);     font-size: var(--ws-fs-display); }
body h2, .ws-h2 { font-weight: var(--ws-fw-extrabold); font-size: var(--ws-fs-h2); }
body h3, .ws-h3 { font-weight: var(--ws-fw-extrabold); font-size: var(--ws-fs-h3); }
body h4, .ws-h4 { font-weight: var(--ws-fw-black);     font-size: var(--ws-fs-h4); }
body h5, .ws-h5 { font-weight: var(--ws-fw-extrabold); font-size: var(--ws-fs-h5); }
body h6, .ws-h6 { font-weight: var(--ws-fw-bold);      font-size: var(--ws-fs-h6); }

/* WPBakery/Total post-type grid title — Total ships its own
 * `.vcex-post-type-entry-title { font-size: 16px }` at specificity 0,1,0,
 * which wins against `body h2`. Match its specificity with `h2.…` (0,1,1)
 * so the brand h2 token sticks. */
h2.vcex-post-type-entry-title {
	font-size: var(--ws-fs-h2);
	font-weight: var(--ws-fw-extrabold);
	line-height: var(--ws-lh-tight);
	margin-bottom: 20px;
}

/* Blog/archive entry titles — force the brand heading font on the title
 * and the inner link. The Total markup wraps the title in <h2 class="blog-entry-title">
 * with an <a> inside; the anchor would otherwise inherit body fallbacks
 * from theme.css link rules. */
.blog-entry-title,
.blog-entry-title a {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h4);
	text-transform: uppercase;
}

/* Single blog post title — match the category-archive entry title style.
 * Total ships .single-post-title with `wpex-text-3xl` (specificity 0,1,0)
 * which overrides body h1 sizing. Nesting under `.single-post` lifts us
 * to 0,2,0 so the brand sizing wins. */
.single-post .single-post-title {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: var(--ws-fs-h4);
	line-height: var(--ws-lh-tight);
}

/* Blog meta (date / author / category) — Total markup applies
 * `wpex-text-sm` / `wpex-text-3` utilities (specificity 0,1,0) that
 * shrink the meta below body size. Scope under blog contexts and
 * bump specificity to 0,2,0 so the body-size token sticks. */
.single-post .meta,
.single-post .meta time,
.single-post .meta a,
.blog-entry .meta,
.blog-entry .meta time,
.blog-entry .meta a {
	font-size: var(--ws-fs-body);
}

/* Related-post titles — match the blog entry title style (brand heading
 * font, h4 size). The Total markup wraps the title in a div, so we also
 * target the inner <a> to defeat link font-family inheritance. */
.related-post-title,
.related-post-title a,
.related-posts-title {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h6);
	font-weight: var(--ws-fw-bold);
	line-height: var(--ws-lh-tight);
}

/* Entry-title link hover — Total's default uses `--wpex-accent` (blue).
 * Override with brand red so blog/archive/related titles match the rest
 * of the site. */
.entry-title a:hover,
.entry-title a:focus {
	color: var(--ws-red);
}

/* Sidebar widget titles — Total renders them as plain divs with
 * `wpex-heading wpex-text-lg` utilities (specificity 0,1,0). Promote
 * them to the brand heading style so they read like an h4. */
.widget-title {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: var(--ws-fs-h2);
	line-height: var(--ws-lh-tight);
	color: var(--ws-charcoal);
}

/* Recent Posts widget item titles — Total renders each item title as a
 * plain div with `wpex-heading wpex-widget-heading` utilities. Match the
 * brand heading font so they read like the other entry titles. */
.wpex-widget-recent-posts-title,
.wpex-widget-recent-posts-title a {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: var(--ws-fs-h6);
	line-height: var(--ws-lh-tight);
}

/* WPBakery/Total post-type grid image — Total ships
 * `.vcex-post-type-entry-media img { width: 100% }` which scales small
 * images up past their natural resolution (fuzzy). Cap at the image's
 * intrinsic width so we never upscale. */
img.vcex-post-type-entry-img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* Hide the parent-theme sidebar on all WP pages — pages render full-width. */
body.page #sidebar { display: none; }

/* Page ID 22047- Join Page - Override */

body.page-id-22047 .join-header h1 {
	text-align: center;
	font-size: var(--ws-fs-display) !important;
}
body.page-id-22047 .join-header ul {
	font-family: var(--ws-font-heading) !important;
}

/* Page ID 23207- App Page - Override */
body.page-id-23207 .vc_custom_heading {
	text-align: center;
	font-family: var(--ws-font-heading) !important;
}
body.page-id-23207 .join-header ul {
	font-family: var(--ws-font-heading);
}
body.page-id-23207 .wp-block-image {
    display: flex;
    justify-content: center;
    gap: 15px;
}
body.page-id-23207 .app-features li {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h6);
}

/* ------------------------------------------------------------------
 * 3. Button helpers (red pill primary, black variant, hover)
 * ------------------------------------------------------------------ */
.ws-btn,
a.vcex-readmore,
a.vcex-button,
a.vc_general.vc_btn3,
.blog-entry-readmore a.theme-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: var(--ws-btn-md-w);
	/* min-height instead of a fixed `height` so the pill grows to fit labels
	   that wrap to two lines. Vertical padding keeps the single-line look. */
	min-height: var(--ws-btn-md-h);
	padding: 8px 28px;
	line-height: 1.15;
	border-radius: var(--ws-btn-radius) !important;
	font-family: var(--ws-font-heading) !important;
	font-weight: var(--ws-fw-black) !important;
	font-size: var(--ws-btn-fs-md) !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	background: var(--ws-red) !important;
	color: var(--ws-white) !important;
	border: 2px solid var(--ws-red);
	transition: background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
	cursor: pointer;
	box-shadow: none !important;
}
.ws-btn:hover,
.ws-btn:focus,
a.vcex-readmore:hover,
a.vcex-readmore:focus,
a.vcex-button:hover,
a.vcex-button:focus,
a.vc_general.vc_btn3:hover,
a.vc_general.vc_btn3:focus {
	background: var(--ws-white) !important;
	color: var(--ws-red) !important;
	border-color: var(--ws-red);
	text-decoration: none !important;
}
.blog-entry-readmore a.theme-button:hover,
.blog-entry-readmore a.theme-button:focus {
	background: var(--ws-white) !important;
	color: var(--ws-red) !important;
	border-color: var(--ws-red);
	text-decoration: none !important;
}
/* WPBakery's vc_btn3 container forces center alignment but the inline-flex
   button alone won't fill the column. Strip the block modifier's default
   `display: block` is overridden by our `display: inline-flex !important`
   above; we just need to neutralise vc_btn3's own background/color
   overrides that ship per-color-variant (juicy-pink, black, etc.). */
a.vc_general.vc_btn3,
a.vc_general.vc_btn3.vc_btn3-color-juicy-pink,
a.vc_general.vc_btn3.vc_btn3-color-black {
	background-image: none !important;
	box-shadow: none !important;
}
/* The WPBakery button wraps its label in <span class="vcex-button-inner …">
   with `wpex-flex wpex-justify-center` utilities — pin it so the label
   inherits the brand color even when those utility colors try to override. */
a.vcex-button .vcex-button-inner {
	color: inherit !important;
	background: transparent !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
}

.ws-btn--black {
	background: var(--ws-black) !important;
	border-color: var(--ws-black);
}
.ws-btn--black:hover,
.ws-btn--black:focus {
	background: var(--ws-white) !important;
	color: var(--ws-black) !important;
	border-color: var(--ws-black);
}

.ws-btn--small {
	min-width: var(--ws-btn-sm-w);
	min-height: var(--ws-btn-sm-h);
	height: auto;
	font-size: var(--ws-btn-fs-sm);
}

/* Blog category "Read more" — dial the shared pill style down a size for
 * the archive listing where the button sits inline with each entry. */
.blog-entry-readmore a.theme-button {
	min-width: 0;
	height: var(--ws-btn-sm-h);
	padding: 0 20px;
	font-size: var(--ws-btn-fs-sm) !important;
}

/* Locations Find-Nearest buttons (.wslf_address_link) — match the style-guide red pill */
a.wslf_address_link,
button.wslf_address_link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: var(--ws-btn-md-w) !important;
	height: var(--ws-btn-md-h) !important;
	padding: 0 28px !important;
	border-radius: var(--ws-btn-radius) !important;
	font-family: var(--ws-font-heading) !important;
	font-weight: var(--ws-fw-black) !important;
	font-size: var(--ws-btn-fs-md) !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	background: var(--ws-red) !important;
	color: var(--ws-white) !important;
	border: 2px solid var(--ws-red) !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
}
a.wslf_address_link:hover,
a.wslf_address_link:focus,
button.wslf_address_link:hover,
button.wslf_address_link:focus {
	background: var(--ws-white) !important;
	color: var(--ws-red) !important;
	border-color: var(--ws-red) !important;
}

/* Gravity Forms submit buttons — match the .ws-btn style-guide pill */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper input.gform_button[type="submit"],
.gform_wrapper button.gform_button,
input.gform_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: var(--ws-btn-md-w) !important;
	height: var(--ws-btn-md-h) !important;
	padding: 0 28px !important;
	border-radius: var(--ws-btn-radius) !important;
	font-family: var(--ws-font-heading) !important;
	font-weight: var(--ws-fw-black) !important;
	font-size: var(--ws-btn-fs-md) !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	background: var(--ws-red) !important;
	color: var(--ws-white) !important;
	border: 2px solid var(--ws-red) !important;
	cursor: pointer;
	transition: background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
	box-shadow: none !important;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:focus,
.gform_wrapper input.gform_button[type="submit"]:hover,
.gform_wrapper input.gform_button[type="submit"]:focus,
.gform_wrapper button.gform_button:hover,
.gform_wrapper button.gform_button:focus,
input.gform_button:hover,
input.gform_button:focus {
	background: var(--ws-white) !important;
	color: var(--ws-red) !important;
	border-color: var(--ws-red) !important;
}


/* ------------------------------------------------------------------
 * 4. Top bar (red strip — "Serving American Food Since 1961")
 * ------------------------------------------------------------------ */

/* Hide the parent theme's legacy top-bar markup; we render our own .ws-topbar */
#top-bar-wrap { display: none; }

/* Food dropdown — disabled for now */
.food-drop-menu { display: none; }

.ws-topbar {
	position: relative;       /* establish stacking context so #site-header (z:50) can sit above it */
	z-index: 1;
	background: var(--ws-red-a11y);
	color: var(--ws-white);
	height: var(--ws-topbar-h);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
@media only screen and (max-width: 959px) {
	/* Halve the top-bar height on mobile. Overriding the token keeps any
	   downstream `calc(... - var(--ws-topbar-h))` math in sync. */
	:root { --ws-topbar-h: 20px; --ws-header-h: 66px; --ws-mobile-header-h: 66px; --ws-logo-h: 57px; }
	.ws-topbar { font-size: 14px; }
}


/* ------------------------------------------------------------------
 * 5. Site header (dark blue, stars/stripes, logo, nav, order online)
 * ------------------------------------------------------------------ */

#site-header {
	position: relative;
	z-index: 50;
	background: var(--ws-dark-blue);
}

/* ------------------------------------------------------------------
 * Sticky header — gated behind the `ws_sticky_header` theme option.
 * When enabled, PHP adds `ws-has-sticky-header` to <body> and the
 * rules below take effect (and the JS toggles the compact state).
 * ------------------------------------------------------------------ */

/* The parent Total theme sets `body.full-width-main-layout #wrap { overflow-x: hidden }`,
   which silently breaks `position: sticky` on descendants because `#wrap` becomes a
   sticky-containing block. `overflow: clip` provides horizontal clipping WITHOUT
   establishing a containing block for sticky. */
body.ws-has-sticky-header.full-width-main-layout #wrap,
body.ws-has-sticky-header.boxed-main-layout #wrap {
	overflow-x: clip;
}

body.ws-has-sticky-header #site-header {
	position: sticky;
	top: 0;
	transition: transform 250ms ease;
	will-change: transform;
}
/* Offset the sticky header below the WP admin bar when logged in.
   - Desktop (>= 783px): admin bar is 32px, position: fixed.
   - Tablet (601-782px):  admin bar is 46px, position: fixed.
   - Mobile (<= 600px):   admin bar becomes position: absolute and scrolls
     away with the page, so the sticky header can sit at top: 0 again. */
body.ws-has-sticky-header.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.ws-has-sticky-header.admin-bar #site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.ws-has-sticky-header.admin-bar #site-header { top: 0; }
}
/* Compact "stuck" state — applied by JS once the topbar has scrolled away.
   Shrinks the header bar, logo, nav font, and CTA so the sticky header sits
   comfortably below the WP admin bar on logged-in views. Decorative stars
   are hidden in this state since they were designed to overlap the topbar. */
body.ws-has-sticky-header #site-header.ws-header--stuck {
	--ws-header-h: 60px;
	--ws-mobile-header-h: 60px;
	--ws-logo-overlap: 0px;
	--ws-deco-overlap: 0px;
}
body.ws-has-sticky-header #site-header.ws-header--stuck .ws-header__deco { display: none; }
body.ws-has-sticky-header #site-header.ws-header--stuck #site-logo img,
body.ws-has-sticky-header #site-header.ws-header--stuck #site-logo .site-logo-img {
	height: 56px;
	max-height: 56px;
	width: auto;
}
body.ws-has-sticky-header #site-header.ws-header--stuck #header-nav .menu,
body.ws-has-sticky-header #site-header.ws-header--stuck #header-nav ul { gap: 24px; }
body.ws-has-sticky-header #site-header.ws-header--stuck #header-nav a { font-size: 18px; }
body.ws-has-sticky-header #site-header.ws-header--stuck .ws-order-online,
body.ws-has-sticky-header #site-header.ws-header--stuck #header-order .ws-order-online {
	min-width: 0;
	height: 38px;
	padding: 0 18px;
	font-size: 15px;
}
/* While the mobile drawer is open we don't want the compact treatment because
   it shrinks tap targets — restore full sizing. */
body.ws-has-sticky-header #site-header.ws-nav-open.ws-header--stuck {
	--ws-mobile-header-h: 114px;
}

/* Smooth the shrink/grow */
body.ws-has-sticky-header #site-header-inner,
body.ws-has-sticky-header #site-logo,
body.ws-has-sticky-header #site-logo img,
body.ws-has-sticky-header #site-logo .site-logo-img,
body.ws-has-sticky-header #header-nav .menu,
body.ws-has-sticky-header #header-nav ul,
body.ws-has-sticky-header #header-nav a,
body.ws-has-sticky-header .ws-order-online,
body.ws-has-sticky-header .ws-header__deco {
	transition: height 200ms ease, max-height 200ms ease, width 200ms ease,
		font-size 200ms ease, min-width 200ms ease, padding 200ms ease,
		gap 200ms ease, transform 250ms ease;
}
/* Hide legacy parent-theme nav wrap shells that would otherwise push the header down */
#site-navigation-wrap-inner,
#site-navigation-wrap-sticky-wrapper { display: none; }

/* Total 6.7 ships `#site-header-inner` with the classes
       .header-dev-inner .header-padding .container .wpex-relative .wpex-h-100 .wpex-py-30 .wpex-clr
   The wpex-* utility classes inject `padding-block: 30px`, `height: 100%`, etc. which fight
   our header-height + container variables. We target the combined selector with !important
   on the geometry props so Total's utilities can't reclaim them.

   Layout: logo LEFT, nav CENTER, order RIGHT. Three flex items + space-between gives that
   visually. flex-wrap:nowrap + min-width:0 on the nav keeps the row from breaking out of
   the header tag when the viewport narrows. */
#site-header-inner.header-dev-inner,
#site-header-inner {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	height: var(--ws-header-h) !important;
	min-height: var(--ws-header-h);
	padding: 0 var(--ws-container-pad) !important;
	/* Total's `.container` ships several conflicting rules incl. `max-width: none` that win
	   in nested layout contexts; we have to !important both width and max-width to pin the
	   header inner to our container max and stop horizontal overflow on wide viewports.
	   The header inner uses its own narrower max-width (--ws-header-inner-max, 1160px) so
	   the row sits comfortably inside the deco stars rather than filling the whole 1420. */
	width: 100% !important;
	max-width: var(--ws-header-inner-max) !important;
	margin: 0 auto;
	position: relative;
	overflow: visible;
	box-sizing: border-box !important;
}

/* Visual order regardless of DOM order: logo (left) → nav (center) → order (right). */
#site-header-inner > .ws-mobile-toggle { order: 1; }
#site-header-inner > #site-logo        { order: 2; flex: 0 0 auto; }
#site-header-inner > #header-nav       { order: 3; flex: 1 1 auto; min-width: 0; justify-content: center; }
#site-header-inner > #header-order     { order: 4; flex: 0 0 auto; }


.ws-header__deco {
	position: absolute;
	top: 50%;

	pointer-events: none;
	width: 315px;
	height: 92px;
	background-image: url('../images/redesign/ws-header_stars.png?315');
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: left top;
}
.ws-header__deco--left  {
	left: 0;
	transform: translateY(calc(-1 * var(--ws-deco-overlap)));
}
.ws-header__deco--right {
	right: 0;
	transform: translateY(calc(-1 * var(--ws-deco-overlap))) scaleX(-1);
}

/* When the viewport narrows below 1760px the deco stars start to crowd the logo (left)
   and the Order button (right). Push the stars off-screen incrementally so they keep
   the same visual separation from the row contents that they have at 1760px+.
   Math: (100vw - 1760) / 2 == 0 at 1760px, becomes more negative as vw shrinks,
   which slides .ws-header__deco--left further left and --right further right. */
@media (max-width: 1759px) {
	.ws-header__deco--left  { left:  calc((100vw - 1760px) / 2); }
	.ws-header__deco--right { right: calc((100vw - 1760px) / 2); }
}

/* On mobile the nav/order move out of the header row (only the centered logo remains in
   the header bar), so the stars no longer need to slide off-screen to avoid touching the
   row contents. Reset them to the viewport edges. */
@media only screen and (max-width: 959px) {
	.ws-header__deco--left  { left:  -20px; }
	.ws-header__deco--right { right: -20px; }
}

/* Lift the real content above the decoration */
#site-header-inner { z-index: 1; }



/* When the mobile drawer is open the header grows tall — anchor the decoration to the
   top header bar instead of letting it float into the middle of the drawer. We use
   `--ws-header-h` (the value the desktop `height !important` rule on #site-header-inner
   actually applies) so the deco stays at the same y across closed/open and across the
   768–959px tablet range where --ws-mobile-header-h differs from the real inner height. */
@media only screen and (max-width: 959px) {
	#site-header.ws-nav-open .ws-header__deco        { top: calc(var(--ws-header-h) / 2); }
	#site-header.ws-nav-open .ws-header__deco--left  { transform: translateY(-50%); }
	#site-header.ws-nav-open .ws-header__deco--right { transform: translateY(-50%) scaleX(-1); }
}

/* Logo: red pill W. Sits left of the nav on desktop, centered on mobile.
   Pulled 16px upward so the W pill straddles the red top-bar (per design). */
#site-logo {
	flex: 0 0 auto;
	margin: 0 0 0 0;
	position: relative;
	z-index: 2;
	transform: translateY(calc(-1 * var(--ws-logo-overlap)));
	/* Collapse line-box overhead so #site-logo's height equals --ws-logo-h exactly,
	   which is what the open-drawer `margin-top` calc assumes. */
	font-size: 0;
	line-height: 0;
}
#site-logo a {
	display: inline-block;
	padding: 0;
	line-height: 0;
}
#site-logo img,
#site-logo .site-logo-img {
	display: block;
	height: var(--ws-logo-h);
	width: auto;
	max-height: var(--ws-logo-h);
	vertical-align: top;  /* kill inline-block baseline gap so #site-logo's height tracks the img height exactly */
}

/* Hide legacy parent-theme header markup that's still emitted by the framework */
#header-derfun,
#header-search,
#header-search-box,
#searchform-header-replace { display: none; }

/* Primary nav (FOOD / LOCATIONS / COUPONS) — plain white labels, centered */
#header-nav {
	position: static;
	width: auto;
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	color: var(--ws-white);
	z-index: 2;
}
#header-nav .menu,
#header-nav ul {
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#header-nav li {
	margin: 0;
	display: inline-flex;
}
#header-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ws-white);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-extrabold);
	font-size: var(--ws-nav-btn-fs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: border-color var(--ws-transition), color var(--ws-transition);
}
#header-nav a:hover,
#header-nav a:focus,
#header-nav .current-menu-item > a,
#header-nav .current-menu-ancestor > a {
	color: var(--ws-white);
	border-bottom-color: var(--ws-red);
}

/* Right-side area: Order Online button */
#header-order {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	z-index: 2;
}
.ws-order-online {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ws-btn-md-w);
	height: var(--ws-btn-md-h);
	padding: 0 24px;
	border-radius: var(--ws-btn-radius);
	background: var(--ws-red);
	color: var(--ws-white);
	border: 0;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-btn-fs-md);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--ws-transition), background-image var(--ws-transition);
}
.ws-order-online:hover,
.ws-order-online:focus {
	background-image: var(--ws-red-gradient);
	color: var(--ws-white);
	text-decoration: none;
}

/* Legacy .order-online (inside locator/location result rows) — compact red
 * pill that fits inside a card without dominating the layout. */
a.order-online,
.results_entry a.order-online {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--ws-btn-radius);
	background: var(--ws-red);
	color: var(--ws-white);
	border: 0;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: var(--ws-fs-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ws-transition);
}

#header-order .ws-order-online {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ws-btn-md-w);
	height: var(--ws-btn-md-h);
	padding: 0 24px;
	border-radius: var(--ws-btn-radius);
	background: var(--ws-red);
	color: var(--ws-white);
	border: 0;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-btn-fs-md);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--ws-transition), background-image var(--ws-transition);
}
#header-order .ws-order-online:hover,
#header-order .ws-order-online:focus {
	background-image: var(--ws-red-gradient);
	color: var(--ws-white);
	text-decoration: none;
}

a.order-online:hover,
a.order-online:focus,
.results_entry a.order-online:hover,
.results_entry a.order-online:focus {
	background: var(--ws-red-hover);
	color: var(--ws-white);
	text-decoration: none;
}

/* Mobile menu toggle (hamburger) */
.ws-mobile-toggle {
	display: none;
	background: var(--ws-dark-blue);
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--ws-white);
	border-radius: 6px;
	z-index: 3;
	transition: background-color var(--ws-transition);
}
.ws-mobile-toggle:hover,
.ws-mobile-toggle:focus {
	background: var(--ws-red);
}
.ws-mobile-toggle__bar {
	display: block;
	width: 28px;
	height: 3px;
	background: var(--ws-white);
	border-radius: 2px;
	margin: 5px 0;
	transition: background-color var(--ws-transition);
}
.ws-mobile-toggle:hover .ws-mobile-toggle__bar,
.ws-mobile-toggle:focus .ws-mobile-toggle__bar {
	background: var(--ws-white);
}

/* Scale nav font + gap at intermediate widths so Order Online button stays visible */
@media only screen and (min-width: 960px) and (max-width: 1280px) {
	#header-nav .menu,
	#header-nav ul { gap: 20px; }
	#header-nav a { font-size: clamp(18px, 12px + 1.5vw, 34px); }
}

/* Header responsive — collapse nav and order online into hamburger drawer */
@media only screen and (max-width: 959px) {
	#site-header-inner {
		position: relative;         /* anchor the absolutely-positioned hamburger */
		height: var(--ws-mobile-header-h);
		justify-content: center !important;
		gap: 0 !important;
		flex-wrap: wrap;            /* enable nav/social to wrap to new rows when drawer opens */
	}
	/* Hamburger pinned to the left of the header bar (out of the flex flow so the logo stays centered).
	   `top` is anchored to half the closed-state header height — the same value the desktop
	   `height: var(--ws-header-h) !important` rule sets on #site-header-inner — so the toggle
	   stays at the visual center of the header bar even when the drawer opens and the inner
	   grows tall. */
	.ws-mobile-toggle {
		display: block;
		position: absolute;
		left: 12px;
		top: calc(var(--ws-header-h) / 2);
		transform: translateY(-50%);
		z-index: 3;
	}
	#site-logo { margin: 0; transform: none; }
	#header-nav,
	#header-order { display: none; }

	.ws-header__deco {
		width: 228px;
		height: 66px;
	}
	.ws-header__deco--left  {
		transform: translateY(-50%); margin-top: -3px;
	}
	.ws-header__deco--right {
		transform: translateY(-50%) scaleX(-1); margin-top: -3px;
	}

	/* Drawer open — nav + order-online become full-width rows below the header bar.
	   The desktop `#site-header-inner` rule ships `flex-wrap: nowrap !important`,
	   `height: var(--ws-header-h) !important`, and `padding: 0 var(--ws-container-pad) !important`,
	   so the open-drawer overrides must also use !important to win.
	   `align-content: flex-start` stops the wrapped rows from stretching to fill the
	   inner's now-tall height — which would push the logo's row taller and visually drift
	   it (and any other row-1 sibling) downward. */
	#site-header.ws-nav-open #site-header-inner {
		flex-wrap: wrap !important;
		height: auto !important;
		min-height: var(--ws-header-h);
		padding-bottom: 16px !important;
		align-content: flex-start;
	}
	/* Keep the logo at its natural closed-state position. In closed,
	   `align-items: center` of a --ws-logo-h-tall logo in a --ws-header-h-tall inner
	   puts the logo top at (header - logo)/2 (negative when logo > header). In open,
	   the logo sits at the top of its own wrapped row (top = 0). The margin offset
	   below cancels that drift so the logo's vertical position is identical in both
	   states — driven by the same tokens, so it stays correct if either height changes. */
	#site-header.ws-nav-open #site-logo {
		flex: 0 0 auto;
		align-self: center;
		margin-top: calc((var(--ws-header-h) - var(--ws-logo-h)) / 2);
	}
	#site-header.ws-nav-open #header-nav,
	#site-header.ws-nav-open #header-order {
		display: flex;
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		position: static;          /* override any inherited absolute positioning */
		justify-content: center;
		align-items: stretch;
	}
	#site-header.ws-nav-open #header-nav  { order: 10; margin: 12px 0 0; padding: 0; border-top: 2px solid var(--ws-red); }
	#site-header.ws-nav-open #header-order { order: 11; }

	#site-header.ws-nav-open #header-nav .menu,
	#site-header.ws-nav-open #header-nav ul {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 4px;
		align-items: stretch;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#site-header.ws-nav-open #header-nav li {
		list-style: none;
		width: 100%;
	}
	/* Force a sane mobile nav-link size; the desktop nav-link rule uses
	   `font-size: clamp(... 1.5vw, 34px)` which renders at the top of that
	   range on narrow viewports. */
	#site-header.ws-nav-open #header-nav a {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		padding: 12px 16px;
		font-size: 18px;
		line-height: 1.2;
		border-bottom: 0;
	}
	#site-header.ws-nav-open #header-order { padding: 0 16px; }
	#site-header.ws-nav-open #header-order .order-online,
	#site-header.ws-nav-open .ws-order-online {
		width: 100%;
		max-width: 360px;
		margin: 0 auto;
	}
}

/* Phones — shrink the header stars further than the 959 block. Sits below the
   959 block so it wins on source order when both queries match. */
@media only screen and (max-width: 959px) {
	.ws-header__deco { width: 160px; height: 46px; }
}


/* ------------------------------------------------------------------
 * 6. Site footer (5 columns + bottom row + back-to-top)
 * ------------------------------------------------------------------ */

/* Hide the legacy widget-area footer that the parent theme still emits — we render
   our own #footer-bottom structure below. */
#footer.site-footer #footer-inner { display: none; }
#footer.site-footer { background: transparent; padding: 0; }

#footer-bottom {
	background: var(--ws-dark-blue);
	color: var(--ws-white);
	padding: 0;
	font-family: var(--ws-font-body);
}

#footer-bottom-inner {
	max-width: var(--ws-container-max);
	margin: 0 auto;
	padding: 56px var(--ws-container-pad) 24px;
	display: block;
}

.ws-footer__cols {
	display: grid;
	grid-template-columns: 1fr .5fr 1.5fr 1fr 1fr;
	gap: 32px;
	align-items: start;
}
.ws-footer__col-heading {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ws-red-on-navy);
	margin: 0 0 12px;
}
.ws-footer__col ul {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.ws-footer__col li { margin: 0; }
.ws-footer__col a {
	color: var(--ws-white) !important;
	text-decoration: none;
	font-size: 14px;
	font-family: var(--ws-font-heading);
	transition: color var(--ws-transition);
	text-wrap: balance;
}
.ws-footer__col a:hover,
.ws-footer__col a:focus { color: var(--ws-red-on-navy); }
.ws-footer__col a:focus-visible {
	outline: 2px solid var(--ws-white);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Center column: logo + tagline */
.ws-footer__brand {
	grid-column: 3 / 4;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.ws-footer__logo img {
	width: 245px;
	height: auto;
	display: block;
}
/* Bottom row: social + app badges (left) and shield + WMWW tagline (right) */
.ws-footer__shield-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin: 24px 0 0;
	flex-wrap: wrap;
}
.ws-footer__wmww {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ws-footer__shield-row .der-shield {
	background: url(../images/der_shield.png) no-repeat center / contain;
	width: 44px;
	height: 56px;
	display: inline-block;
	flex: 0 0 auto;
}
.ws-footer__wmww-img {
	height: 36px;
	width: auto;
	display: block;
}

/* Social icons + app badges (left side of bottom row) */
.ws-footer__social-apps {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ws-footer__app-badges {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.ws-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.ws-footer__social li { margin: 0; }
.ws-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	transition: opacity var(--ws-transition);
}
.ws-footer__social a:hover,
.ws-footer__social a:focus { opacity: 0.8; }
.ws-footer__social a:focus-visible {
	outline: 2px solid var(--ws-white);
	outline-offset: 4px;
}
.ws-footer__social svg { display: block; }

.ws-footer__app-badge {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: opacity var(--ws-transition);
}
.ws-footer__app-badge:hover,
.ws-footer__app-badge:focus { opacity: 0.8; text-decoration: none; }
.ws-footer__app-badge:focus-visible {
	outline: 2px solid var(--ws-white);
	outline-offset: 3px;
	border-radius: 8px;
}
.ws-footer__app-badge img {
	display: block;
	height: 40px;
	width: auto;
}

/* Bottom legal row */
.ws-footer__legal {
	background: #0b2154;

}

.ws-footer__legal-inner {
	margin: 0 auto;
	max-width: var(--ws-container-max);
	padding: 16px var(--ws-container-pad);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

.ws-footer__legal a { color: rgba(255, 255, 255, 0.95); text-decoration: none; }
.ws-footer__legal a:hover,
.ws-footer__legal a:focus { color: var(--ws-white); text-decoration: underline; }
.ws-footer__legal a:focus-visible {
	outline: 2px solid var(--ws-white);
	outline-offset: 3px;
	border-radius: 2px;
}
.ws-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Back-to-top floating button */
.ws-back-to-top {
	position: fixed;
	right: 20px;
	bottom: calc(var(--ws-mobile-bottom-nav-h) + 16px);
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--ws-red);
	color: var(--ws-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ws-shadow-md);
	z-index: 90;
	border: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--ws-transition), transform var(--ws-transition), visibility var(--ws-transition);
}
.ws-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ws-back-to-top:hover { background: var(--ws-red-hover); color: var(--ws-white); }
@media only screen and (min-width: 768px) {
	.ws-back-to-top { bottom: 20px; }
}

/* Footer responsive */
@media only screen and (max-width: 1280px) {
	.ws-footer__legal-inner { justify-content: center; text-align: center; }
	/* `.ws-footer__legal-links` is a flex `<ul>`, so `text-align: center` on
	 * its parent doesn't reach it — center the flex children explicitly. */
	.ws-footer__legal-links { justify-content: center; width: 100%; }
}
@media only screen and (max-width: 959px) {
	.ws-footer__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.ws-footer__brand {
		grid-column: 1 / -1;
		order: -1;
	}
}
@media only screen and (max-width: 480px) {
	#footer-bottom-inner { padding: 40px var(--ws-container-pad) 24px; }
	.ws-footer__cols { grid-template-columns: 1fr; }
}

/* Mobile: stack the shield above the WMWW image and let the image scale to
 * fit the viewport (was using fixed 36px height + right-justified flex,
 * which pushed the shield off-screen and stretched the wider image). */
@media only screen and (max-width: 767px) {
	.ws-footer__logo img { width: 33vw; }
	.ws-footer__shield-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}
	.ws-footer__wmww {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.ws-footer__wmww-img {
		height: auto;
		width: auto;
		max-width: 100%;
	}
	.ws-footer__social-apps {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}
	.ws-footer__social {
		justify-content: center;
	}
	.ws-footer__app-badges {
		justify-content: center;
		flex-wrap: nowrap;
	}
}


/* ------------------------------------------------------------------
 * 7. Mobile sticky bottom nav (FOOD / LOCATIONS / COUPONS + ORDER ONLINE)
 * ------------------------------------------------------------------ */
.ws-mobile-bottomnav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: var(--ws-white);
	border-top: 1px solid var(--ws-light-gray);
	padding: 6px 12px;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.ws-mobile-bottomnav__inner {
	display: grid;
	grid-template-columns: 3fr 4fr;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	gap: 10px;
}
.ws-mobile-bottomnav__links {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ws-mobile-bottomnav__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--ws-red);
	text-decoration: none;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-width: 56px;
}
.ws-mobile-bottomnav__link svg,
.ws-mobile-bottomnav__link img {
	width: auto;
	height: 57px;
	display: block;
	object-fit: contain;
}
.ws-mobile-bottomnav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	white-space: nowrap;
	height: 31px;
	padding: 0 18px;
	border-radius: var(--ws-btn-radius);
	background: var(--ws-red);
	color: var(--ws-white);
	border: 0;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-fs-h6);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--ws-transition), background-image var(--ws-transition);
}
.ws-mobile-bottomnav__cta:hover,
.ws-mobile-bottomnav__cta:focus {
	background-image: var(--ws-red-gradient);
	color: var(--ws-white);
	text-decoration: none;
}

@media only screen and (max-width: 959px) {
	.ws-mobile-bottomnav { display: block; }
	body { padding-bottom: var(--ws-mobile-bottom-nav-h); }
	/* Push tota11y toolbar above the bottom nav */
	#tota11y-toolbar { bottom: var(--ws-mobile-bottom-nav-h) !important; }
	/* CookieYes revisit-consent button is fixed at bottom: 15px / left: 15px
	   (z-index 999999), which covers the FOOD link once the banner closes;
	   lift it above the bottom nav like the back-to-top button. */
	.cky-btn-revisit-wrapper { bottom: calc(var(--ws-mobile-bottom-nav-h) + 15px) !important; }
	/* WP Maps Pro locations panel header is redundant when the sticky
	   bottom nav is providing the main navigation affordance. */
	.wpgmp_locations_head { display: none; }
}

/* ------------------------------------------------------------------
 * 7b. Browser-zoom reset hint (js/ws.js — site-wide, not just the map).
 * Fixed to the TOP of the viewport, not the bottom, so it never
 * collides with the mobile sticky bottom nav above (same <= 959px
 * range both can be visible in). Sits above the CookieYes banner-style
 * fixed elements but below nothing critical — dismiss button is a
 * generous 44px target per the a11y touch-target guidance already
 * used elsewhere in this file.
 * ------------------------------------------------------------------ */
.ws-zoom-hint {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 10px 44px 10px 16px;
	background: var(--ws-dark-blue);
	color: var(--ws-white);
	font-family: var(--ws-font-body);
	font-size: var(--ws-fs-small);
	line-height: 1.4;
	text-align: center;
	box-shadow: var(--ws-shadow-sm);
}
.ws-zoom-hint kbd {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.16);
	font-family: inherit;
	font-weight: var(--ws-fw-bold);
}
.ws-zoom-hint__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	min-height: 40px;
	border: 0;
	background: transparent;
	color: var(--ws-white);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.ws-zoom-hint__close:focus-visible {
	outline: 2px solid var(--ws-white);
	outline-offset: -4px;
}


/* ------------------------------------------------------------------
 * 8. Food pages (listing, category, item detail)
 * ------------------------------------------------------------------ */

/* ── Shared food card grid ── */
.ws-food-listing,
.ws-food-category { padding-bottom: 56px; }

.ws-food-listing__inner { padding-top: 48px; }
@media only screen and (max-width: 767px) {
	.ws-food-listing { padding-bottom: 0; }
	.ws-food-listing__inner { width: 100%; max-width: 100% !important; padding-top: 0; }
}

/* ── Food page info section ─────────────────────────────────────────
 * Unified ACF-driven block at the bottom of templates/food.php:
 *   - Red pill CTA button → Nutritional & Allergy Info
 *   - "Commitment to quality" paragraph
 *   - California "Warning" paragraph + "For all restaurants" allergen notice
 * All on a single pale-blue background, navy body text.
 * ────────────────────────────────────────────────────────────────── */
.ws-food-info {
	background: var(--ws-pale-blue);
	padding: 48px 0 56px;
}
.ws-food-info__inner {
	max-width: 1100px;
	text-align: center;
	color: var(--ws-dark-blue);
	font-family: var(--ws-font-body);
	font-size: var(--ws-fs-small);
	line-height: 1.6;
}
.ws-food-info__cta {
	margin: 0 0 32px;
}
.ws-food-info__btn {
	gap: 10px;
	white-space: nowrap;
}
.ws-food-info__btn-arrow {
	display: inline-block;
	flex: 0 0 auto;
	transform: translateY(0);
}
.ws-food-info__commitment,
.ws-food-info__warning {
	color: var(--ws-dark-blue);
}
.ws-food-info__commitment p,
.ws-food-info__warning p {
	margin: 0 0 16px;
}
.ws-food-info__commitment p:last-child,
.ws-food-info__warning p:last-child {
	margin-bottom: 0;
}
.ws-food-info__warning {
	margin-top: 16px;
}
.ws-food-info__commitment strong,
.ws-food-info__warning strong {
	font-weight: var(--ws-fw-bold);
	color: var(--ws-dark-blue);
}
.ws-food-info__inner a {
	color: var(--ws-dark-blue);
	text-decoration: underline;
}
.ws-food-info__inner a:hover,
.ws-food-info__inner a:focus {
	color: var(--ws-red);
}

@media only screen and (max-width: 767px) {
	.ws-food-info { padding: 32px var(--ws-container-pad); }
	.ws-food-info__cta { margin-bottom: 24px; }
	/* Shrink the pill so "Nutritional & Allergy Info" fits on one line —
	 * the inherited .ws-btn min-width (220px) + 20px font would otherwise
	 * force the label to wrap to two awkward lines next to the arrow. */
	.ws-food-info__btn {
		min-width: 0 !important;
		height: 44px !important;
		padding: 0 22px !important;
		font-size: 13px !important;
		gap: 8px;
	}
	.ws-food-info__btn-arrow {
		width: 8px;
		height: 10px;
	}
}

/* ── App page (templates/app.php) ───────────────────────────────────
 * Hero pill + 3-column body (features list | phone | mascot) + download CTA.
 * Mobile reflows via grid-template-areas: hero → download → phone → features → mascot.
 * ────────────────────────────────────────────────────────────────── */
.ws-page-app {
	background: var(--ws-white);
}

/* — Hero pill with halftone dot accent — */
.ws-app-hero {
	padding: 32px var(--ws-container-pad);
}
.ws-app-hero__inner {
	max-width: var(--ws-container-max);
	margin: 0 auto;
}
.ws-app-hero__pill {
	position: relative;
	border: 4px solid var(--ws-red);
	border-radius: 40px;
	padding: 36px 60px;
	text-align: center;
	background: var(--ws-white);
	overflow: hidden;
}
/* Halftone dot accents — paired corner assets (native 235×105).
 * ::before → top-left,  uses dots-top.png
 * ::after  → bottom-right, uses dots-bottom.png */
.ws-app-hero__pill::before,
.ws-app-hero__pill::after {
	content: "";
	position: absolute;
	width: 235px;
	height: 105px;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.ws-app-hero__pill::before {
	top: 0;
	left: 0;
	background-image: url('../images/redesign/dots-top.png');
	background-position: top left;
}
.ws-app-hero__pill::after {
	bottom: 0;
	right: 0;
	background-image: url('../images/redesign/dots-bottom.png');
	background-position: bottom right;
}
.ws-app-hero__title {
	position: relative;
	margin: 0;
	color: var(--ws-red);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: clamp(28px, 4.5vw, 56px);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.05;
}
.ws-app-hero__title--mobile { display: none; }
.ws-app-hero__subtitle {
	position: relative;
	margin: 10px 0 0;
	color: var(--ws-red);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: clamp(18px, 2.2vw, 28px);
	letter-spacing: 0.01em;
}

/* — Body grid (features | phone | mascot, then download below) — */
.ws-app-body {
	padding: 24px var(--ws-container-pad) 56px;
}
.ws-app-body__inner {
	max-width: var(--ws-container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"features phone mascot"
		"download download download";
	gap: 24px 32px;
	align-items: center;
}

/* Features list — labels right-aligned with red-square icon on the right */
.ws-app-body__features {
	grid-area: features;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ws-app-body__feature {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}
.ws-app-body__feature-label {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 18px;
	color: var(--ws-charcoal);
	text-align: right;
}
/* Icons are baked into a single vertical sprite (64×497, six rows of
 * red rounded-square tiles). Sprite is sized to 100% of the icon box;
 * with the box height set to one-sixth of the visual sprite, evenly-stepped
 * percentage background-positions land each tile exactly. */
.ws-app-body__feature-icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 64px;
	height: 64px;
	background-image: url('/wp-content/uploads/2023/07/app-icon-sprite.jpg');
	background-repeat: no-repeat;
	background-size: 95% auto;
	background-color: transparent;
}
.ws-app-body__feature--1 .ws-app-body__feature-icon { background-position: 0   0%; }
.ws-app-body__feature--2 .ws-app-body__feature-icon { background-position: 0  20%; }
.ws-app-body__feature--3 .ws-app-body__feature-icon { background-position: 0  40%; }
.ws-app-body__feature--4 .ws-app-body__feature-icon { background-position: 0  60%; }
.ws-app-body__feature--5 .ws-app-body__feature-icon { background-position: 0  80%; }
.ws-app-body__feature--6 .ws-app-body__feature-icon { background-position: 0 100%; }

.ws-app-body__phone {
	grid-area: phone;
	text-align: center;
}
.ws-app-body__phone img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.ws-app-body__mascot {
	grid-area: mascot;
	text-align: center;
}
.ws-app-body__mascot img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Download CTA (App Store + Google Play) */
.ws-app-body__download {
	grid-area: download;
	text-align: center;
	padding: 16px 0 0;
}
.ws-app-body__download-title {
	margin: 0 0 18px;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: clamp(20px, 2.5vw, 32px);
	color: var(--ws-charcoal);
}
.ws-app-body__download-title--mobile { display: none; }
.ws-app-body__badges {
	display: inline-flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}
.ws-app-body__badge {
	display: inline-flex;
	text-decoration: none;
	transition: opacity var(--ws-transition);
}
.ws-app-body__badge:hover,
.ws-app-body__badge:focus { opacity: 0.85; }
.ws-app-body__badge img {
	display: block;
	height: 54px;
	width: auto;
}

/* — Tablet: tighten the 3-column layout — */
@media only screen and (max-width: 959px) {
	.ws-app-body__inner { gap: 16px 20px; }
	.ws-app-body__feature-label { font-size: 16px; }
	.ws-app-body__feature-icon { width: 48px; height: 48px; }
}

/* — Mobile: reflow so download CTA sits directly under the hero,
 *   then the phone, then features list, then mascot (often hidden). — */
@media only screen and (max-width: 767px) {
	.ws-app-hero { padding: 16px var(--ws-container-pad); }
	.ws-app-hero__pill { padding: 22px 28px; border-radius: 40px; border-width: 3px; }
	.ws-app-hero__pill::before,
	.ws-app-hero__pill::after { width: 130px; height: 58px; }
	.ws-app-hero__title--desktop { display: none; }
	.ws-app-hero__title--mobile { display: inline; }
	.ws-app-hero__title { font-size: clamp(26px, 8vw, 36px); }
	.ws-app-hero__subtitle { font-size: clamp(15px, 4vw, 20px); }

	.ws-app-body { padding: 8px var(--ws-container-pad) 32px; }
	.ws-app-body__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"download"
			"phone"
			"features"
			"mascot";
		gap: 28px;
	}
	.ws-app-body__download-title--desktop { display: none; }
	.ws-app-body__download-title--mobile {
		display: block;
		font-size: 22px;
		margin-bottom: 14px;
	}
	.ws-app-body__badges { gap: 12px; }
	.ws-app-body__badge img { height: 48px; }

	.ws-app-body__features {
		/* Two-column grid — icons sit at the right edge of each column so
		 * they align vertically across rows regardless of label width. */
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
		flex-direction: initial;
	}
	.ws-app-body__feature {
		justify-content: space-between;
		gap: 10px;
	}
	.ws-app-body__feature-label { text-align: left; font-size: 15px; }
	.ws-app-body__feature-icon { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------
 * Join the Wiener Lovers' Club — page template (templates/join.php)
 *
 * Hero pill mirrors the App page (.ws-app-hero__pill): red outline,
 * halftone dots in opposite corners, brand-red headline. Adds two
 * additional accents anchored to the pill:
 *   - blue-star.png  → upper-right, overhangs the pill border
 *   - jumping-mascot → lower-left,  overhangs the pill border
 * ------------------------------------------------------------------ */
.ws-page-join {
	background: var(--ws-white);
}

.ws-join-hero {
	padding: 50px var(--ws-container-pad) 16px;
}
.ws-join-hero__inner {
	max-width: var(--ws-container-max);
	margin: 0 auto;
}
.ws-join-hero__pill {
	position: relative;
	border: 4px solid var(--ws-red);
	border-radius: 40px;
	padding: 44px 80px 44px 80px;
	background: var(--ws-white);
	min-height: 280px;
}
.ws-join-hero__pill::before,
.ws-join-hero__pill::after {
	content: "";
	position: absolute;
	width: 235px;
	height: 105px;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}
.ws-join-hero__pill::before {
	top: 0;
	left: 0;
	background-image: url('../images/redesign/dots-top.png');
	background-position: top left;
	border-top-left-radius: 36px;
}
.ws-join-hero__pill::after {
	bottom: 0;
	right: 0;
	background-image: url('../images/redesign/dots-bottom.png');
	background-position: bottom right;
	border-bottom-right-radius: 36px;
}

.ws-join-hero__star {
	position: absolute;
	top: -55px;
	right: 48px;
	width: 95px;
	height: auto;
	z-index: 2;
	pointer-events: none;
	user-select: none;
}
.ws-join-hero__mascot {
	position: absolute;
	left: -65px;
	bottom: 20px;
	width: 235px;
	height: auto;
	z-index: 2;
	pointer-events: none;
	user-select: none;
}

.ws-join-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
}
.ws-join-hero__title {
	margin: 0 0 18px;
	color: var(--ws-red);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: clamp(28px, 4.5vw, 56px);
	letter-spacing: 0.01em;
	line-height: 1.05;
}
.ws-join-hero__perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	text-align: left;
}
.ws-join-hero__perk {
	position: relative;
	padding-left: 22px;
	margin: 8px 0;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: clamp(16px, 1.6vw, 22px);
	color: var(--ws-charcoal);
	line-height: 1.35;
}
.ws-join-hero__perk::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ws-red);
}
.ws-join-hero__perk strong { font-weight: var(--ws-fw-black); }

/* — Gravity Form wrapper — */
.ws-join-form {
	padding: 32px var(--ws-container-pad) 56px;
}
.ws-join-form__inner {
	max-width: 980px;
	margin: 0 auto;
}
.ws-join-form .gform_wrapper .gfield_label {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	color: var(--ws-charcoal);
}
.ws-join-form .gform_wrapper input[type="text"],
.ws-join-form .gform_wrapper input[type="email"],
.ws-join-form .gform_wrapper input[type="tel"],
.ws-join-form .gform_wrapper select,
.ws-join-form .gform_wrapper textarea {
	border: 1px solid var(--ws-light-gray);
	border-radius: 4px;
	padding: 10px 12px;
	font-family: var(--ws-font-body);
	font-size: var(--ws-fs-body);
}
.ws-join-form .gform_footer { text-align: center; }
.ws-join-form .gform_wrapper .gform_button {
	background: var(--ws-red);
	color: var(--ws-white);
	border: none;
	border-radius: var(--ws-btn-radius);
	padding: 0 40px;
	height: var(--ws-btn-md-h);
	min-width: var(--ws-btn-md-w);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-btn-fs-md);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var(--ws-transition);
}
.ws-join-form .gform_wrapper .gform_button:hover,
.ws-join-form .gform_wrapper .gform_button:focus {
	background: var(--ws-red-hover);
}

/* — Legal/terms block below the form — */
.ws-join-terms {
	text-align: center;
	margin-top: 18px;
	color: var(--ws-charcoal);
	font-family: var(--ws-font-body);
	font-size: 13px;
	line-height: 1.5;
}
.ws-join-terms__required {
	margin: 0 0 10px;
	font-weight: var(--ws-fw-bold);
}
.ws-join-terms__asterisk { color: var(--ws-red); }
.ws-join-terms__body { margin: 0 0 12px; }
.ws-join-terms__links { margin: 0; }
.ws-join-terms__links a {
	color: var(--ws-red);
	text-decoration: none;
	font-weight: var(--ws-fw-bold);
}
.ws-join-terms__links a:hover,
.ws-join-terms__links a:focus { text-decoration: underline; }
.ws-join-terms__sep {
	margin: 0 6px;
	color: var(--ws-red);
}

/* — Tablet — */
@media only screen and (max-width: 959px) {
	.ws-join-hero__pill { padding: 40px 60px 40px 190px; min-height: 240px; }
	.ws-join-hero__mascot { width: 190px; }
	.ws-join-hero__star { width: 75px; right: 36px; top: -24px; }
}

/* — Mobile — */
@media only screen and (max-width: 767px) {
	.ws-join-hero { padding: 16px var(--ws-container-pad) 8px; }
	.ws-join-hero__pill {
		padding: 60px 24px 140px;
		border-radius: 32px;
		border-width: 3px;
		min-height: 460px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.ws-join-hero__pill::before,
	.ws-join-hero__pill::after { width: 130px; height: 58px; }

	.ws-join-hero__star { width: 60px; right: 22px; top: -30px; }
	.ws-join-hero__mascot {
		width: 170px;
		left: 10px;
		bottom: -40px;
	}

	.ws-join-hero__title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 60px; }
	.ws-join-hero__perks { display: block; }
	.ws-join-hero__perk { font-size: 16px; }

	.ws-join-form { padding: 16px var(--ws-container-pad) 32px; }

	.ws-join-terms { font-size: 12px; }
	.ws-join-terms__body br { display: none; }
}

.ws-food-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ws-food-grid__item {
	display: flex; /* allow the card to stretch to the full row height */
}

.ws-food-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background: var(--ws-white);
	border-radius: 8px;
	/* border: 1px solid var(--ws-light-gray); */
	padding: 6px;
	text-decoration: none;
	transition: box-shadow var(--ws-transition), transform var(--ws-transition);
}
.ws-food-card:hover {
	box-shadow: var(--ws-shadow-md);
	transform: translateY(-2px);
	text-decoration: none;
}
.ws-food-card__img-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.ws-food-card__img-wrap img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
.ws-food-card__label {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h3);
	text-transform: uppercase;
	color: var(--ws-red);
	text-align: center;
	margin-top: 0;
}
/* Top-align the food name across the grid so cards with shorter images
   don't drop their label to the bottom of a stretched row. Fixing the
   image area's min-height lets every label start at the same y. */
.ws-food-grid .ws-food-card { justify-content: flex-start; }
.ws-food-grid .ws-food-card__img-wrap { min-height: 180px; }
@media only screen and (max-width: 767px) {
	.ws-food-grid .ws-food-card__img-wrap { min-height: 140px; }
}

/* ── Food index (templates/food.php) — horizontal category cards with item
 * count. Scoped to .ws-page-food so the carousel and sub-category grid on
 * single-food.php keep their vertical layout. */
.ws-page-food .ws-food-card {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 12px 20px 12px 12px;
	text-align: left;
}
.ws-page-food .ws-food-card__img-wrap {

}
.ws-page-food .ws-food-card__text {
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow long titles to truncate gracefully inside flex */
	align-items: center;
}
.ws-page-food .ws-food-card__label {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-extrabold);
	font-size: var(--ws-fs-h3);
	color: var(--ws-red);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0;
	margin: 0;
}
.ws-page-food .ws-food-card__count {
	margin-top: 2px;
	font-family: var(--ws-font-body);
	font-size: 13px;
	color: #6b6b6b;
	display: none; /* item count temporarily disabled */
}

/* ── Food category header (sub-category page) ── */
.ws-food-category__header {
	text-align: center;
	padding: 48px 0 32px;
}
.ws-food-category__title {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-fs-display);
	color: var(--ws-red);
	margin: 0 0 8px;
}
.ws-food-category__subtitle {
	color: var(--ws-red);
	font-size: var(--ws-fs-h2);
	font-family: var(--ws-font-heading);
	margin: 0;
}

/* ── Breadcrumb ── */
.ws-breadcrumb {
	padding: 0;
	font-size: var(--ws-fs-small);
	color: rgba(0,0,0,0.66); /* was 0.5 — composes below 4.5:1 on white */
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ws-breadcrumb__sep {
	margin: 0 6px;
}
@media only screen and (max-width: 767px) {
	.ws-breadcrumb .breadcrumb-trail {
		text-align: center;
		text-wrap: balance;
	}
}

/* ── Food item detail page ── */
.ws-food-detail {
	padding: 20px var(--ws-container-pad) 30px;
}
.ws-food-detail__title {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-fs-h2);
	color: var(--ws-red);
	text-transform: uppercase;
	margin: 0 0 32px;
}
.ws-food-detail__layout {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}
.ws-food-detail__image { flex: 0 0 50%; }
.ws-food-detail__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}
.ws-food-detail__info {
	flex: 1 1 auto;
	padding-top: 8px;
}
.ws-food-detail__desc {
	font-size: var(--ws-fs-body);
	color: var(--ws-charcoal);
	line-height: var(--ws-lh-body);
}
.ws-food-detail__desc p { margin: 0 0 12px; }
.ws-food-detail__cal-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 16px 0 16px;
}
.ws-food-detail__cal-row > .ws-food-detail__calories,
.ws-food-detail__cal-row > .ws-food-detail__nut-link { margin: 0; }
.ws-food-detail__calories {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: var(--ws-fs-body);
	color: var(--ws-charcoal);
	margin: 0 0 16px;
}
.ws-food-detail__calories strong {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: 18px;
}
.ws-food-detail__nut-link a {
	font-family: var(--ws-font-heading);
	color: var(--ws-red);
	font-weight: var(--ws-fw-bold);
	text-decoration: underline;
}
.ws-food-detail__nut-link a i {
	margin-left: 6px;
}
.ws-food-detail__nut-link a:hover { text-decoration: underline; }
.ws-food-detail__all-beef { margin-top: 16px; max-width: 180px; height: auto; display: block; }
.ws-food-detail__nutrition-box {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--ws-light-gray);
}
.ws-food-detail__nutrition-heading {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-extrabold);
	font-size: var(--ws-fs-h4);
	color: var(--ws-charcoal);
	margin: 0 0 20px;
}

/* ── Nutrition pills (BEM replacement for jQuery UI / Visual Composer tabs) ── */
.ws-nut-tabs { margin: 0; }
.ws-nut-tabs__nav {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ws-nut-tabs__nav-item { margin: 0; }
.ws-nut-tabs__nav-link {
	appearance: none;
	background: transparent;
	border: 1px solid var(--ws-light-gray);
	border-radius: var(--ws-btn-radius);
	padding: 8px 18px;
	display: block;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 14px;
	line-height: 1.2;
	color: var(--ws-charcoal);
	cursor: pointer;
	transition: background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
}
.ws-nut-tabs__nav-link:hover,
.ws-nut-tabs__nav-link:focus,
.ws-nut-tabs__nav-link.is-active {
	background: var(--ws-red);
	border-color: var(--ws-red);
	color: #fff;
}
.ws-nut-tabs__panel { display: none; }
.ws-nut-tabs__panel.is-active { display: block; }

/* ── Sub-headings inside the nutrition box (Allergen Info, Size) ── */
.ws-nut-subheading {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-extrabold);
	font-size: 18px;
	line-height: 1.2;
	color: var(--ws-charcoal);
	margin: 24px 0 12px;
}

/* ── Allergen pills (FDA style) ── */
.ws-allergen { margin: 0 0 8px; }
.ws-allergen__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ws-allergen__pill {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--ws-light-gray);
	border-radius: var(--ws-btn-radius);
	background: #fff;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 13px;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ws-charcoal);
}
.ws-allergen__pill--active {
	background: var(--ws-red);
	border-color: var(--ws-red);
	color: #fff;
}

/* ── Nutrition chart wrapper + hotdog options (shared by both styles) ── */
.ws-nut-chart {
	margin: 20px 0 30px;
}
.ws-nut-chart__choices {
	margin: 0 0 16px;
}
.ws-nut-chart__fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}
.ws-nut-chart__legend {
	color: #000;
	font-weight: var(--ws-fw-bold);
	padding: 0;
	margin-bottom: 6px;
}
.ws-nut-chart__choice {
	display: inline-block;
	margin-right: 14px;
	color: #000;
	font-family: var(--ws-font-heading);
	font-size: 14px;
}
.ws-nut-chart__choice input { margin-right: 4px; }

/* ── Classic two-column chart (style: classic) ── */
.ws-nut-chart--classic {
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	padding: 20px;
	background: #fff;
	color: var(--ws-red);
}
.ws-nut-chart--classic .ws-nut-chart__choices { margin-left: 20px; }
.ws-nut-chart__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.ws-nut-chart__column {
	flex: 1 1 50%;
	min-width: 0;
	padding: 0 20px;
	box-sizing: border-box;
}
.ws-nut-chart__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.ws-nut-chart__row--odd { background-color: #ebebeb; }
.ws-nut-chart__cell { padding: 0; }
.ws-nut-chart__cell p { margin: 0; padding: 6px 8px; }

/* ── FDA-style "Nutrition Facts" label (style: fda) ── */
.ws-nut-chart--fda { color: #000; }
.ws-nf {
	max-width: 320px;
	box-sizing: border-box;
	padding: 6px 12px 10px;
	border: 1px solid #000;
	background: #fff;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.25;
}
.ws-nf__title {
	font-family: "Archivo Black", var(--ws-font-heading), sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.5px;
	color: #000;
	margin: 2px 0 4px;
}
.ws-nf__serving {
	display: none;
	align-items: center;
	gap: 8px;
	padding-bottom: 6px;
}
.ws-nf__serving-qty {
	display: inline-block;
	min-width: 28px;
	padding: 1px 8px;
	border: 1px solid #000;
	text-align: center;
	font-weight: 700;
}
.ws-nf__serving-label { font-weight: 700; }

.ws-nf__rule { border: 0; border-top: 1px solid #000; margin: 0; height: 0; }
.ws-nf__rule--thick { border-top-width: 10px; }
.ws-nf__rule--med { border-top-width: 5px; }

.ws-nf__amount-per {
	margin: 0;
	padding: 3px 0;
	font-size: 12px;
	font-weight: 700;
}

.ws-nf__calories {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 2px 0 4px;
}
.ws-nf__calories-label {
	font-family: "Archivo Black", var(--ws-font-heading), sans-serif;
	font-weight: 400;
	font-size: 26px;
}
.ws-nf__calories-num {
	font-family: "Archivo Black", var(--ws-font-heading), sans-serif;
	font-weight: 400;
	font-size: 32px;
	margin: 0;
	line-height: 1;
}

.ws-nf__rows { margin: 0; }
.ws-nf__row {
	padding: 4px 0;
	border-bottom: 1px solid #000;
}
.ws-nf__row:last-child { border-bottom: 0; }
.ws-nf__name { font-weight: 700; }
.ws-nf__num {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 700;
}
.ws-nf__unit { font-weight: 700; }

/* Indented sub-nutrients (Saturated/Trans Fat, Dietary Fiber, Total Sugars)
   sit under their parent row and drop the bold weight. */
.ws-nf__row--sub { padding-left: 18px; }
.ws-nf__row--sub .ws-nf__name,
.ws-nf__row--sub .ws-nf__num,
.ws-nf__row--sub .ws-nf__unit { font-weight: 400; }

/* Classic: stack the two columns instead of side-by-side on narrow viewports. */
@media only screen and (max-width: 959px) {
	.ws-nut-tabs__nav-link { padding: 7px 14px; font-size: 13px; }
	.ws-nut-chart__grid { flex-direction: column; flex-wrap: nowrap; }
	.ws-nut-chart__column {
		flex: 1 1 auto;
		width: 100%;
		padding: 0;
	}

	/* The .odd/.even classes are baked in per-column by PHP, so when the two
	 * columns stack the second column restarts the pattern and you get two
	 * gray rows in a row at the seam. Override based on global position. */
	.ws-nut-chart--classic .ws-nut-chart__column .ws-nut-chart__row {
		background-color: transparent;
	}
	.ws-nut-chart--classic .ws-nut-chart__column:nth-child(odd)  .ws-nut-chart__row:nth-child(odd),
	.ws-nut-chart--classic .ws-nut-chart__column:nth-child(even) .ws-nut-chart__row:nth-child(even) {
		background-color: #ebebeb;
	}
}

/* Phone-tier polish: horizontal-scroll pill nav so long variant labels
 * don't blow up into multi-row stacks; classic 2-col row inlines the unit
 * with the name; let the FDA label fill the column. */
@media only screen and (max-width: 600px) {
	.ws-nut-chart { margin: 16px 0 24px; }
	.ws-nut-tabs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
	}
	.ws-nut-tabs__nav::-webkit-scrollbar { display: none; }
	.ws-nut-tabs__nav-item { flex: 0 0 auto; }
	.ws-nut-tabs__nav-link {
		white-space: nowrap;
		padding: 7px 14px;
	}

	/* Classic */
	.ws-nut-chart--classic { padding: 12px; }
	.ws-nut-chart__row {
		grid-template-columns: 1fr auto;
		column-gap: 12px;
	}
	.ws-nut-chart__cell--unit { display: none; }
	.ws-nut-chart__cell--name p::after {
		content: " " attr(data-unit);
		color: inherit;
		opacity: 0.7;
		margin-left: 4px;
	}
	.ws-nut-chart__cell--value p { text-align: right; }

	/* FDA */
	.ws-nf { max-width: 100%; }
}

/* ── Other Items You Might Like ── */
.ws-food-might-like {
	padding: 0 0 56px 0;
	margin-top: 0;
}

/* ── Food item: region coupons section ── */
.ws-food-coupons {
	background: var(--ws-pale-blue);
background-image:
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg);
	background-repeat: no-repeat;
	background-position:
		28% 6%,
		74% 6%,
		-3% 56%,
		101% 33%,
		1% 92%,
		99% 92%;
	background-size:
		50px,
		50px,
		220px,
		160px,
		80px,
		80px;	
	padding: 56px 0;
}
.ws-food-might-like__heading {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-extrabold);
	font-size: var(--ws-fs-h4);
	color: var(--ws-red);
	text-align: center;
	letter-spacing: 0.04em;
	margin: 0 0 32px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.ws-food-might-like__heading::before,
.ws-food-might-like__heading::after {
	content: "";
	flex: 1;
	border-top: 1px solid #d9d9d9;
}
.ws-food-card--sm { padding: 20px 16px 14px; }
.ws-food-card--sm .ws-food-card__label { font-size: 16px; }

/* Carousel for "Other Items You Might Like" — uses ws_food_carousel JS in custom.js.
 * Bottom padding leaves room for the prev/next arrows that sit below the track. */
.ws-food-carousel {
	position: relative;
	padding: 0 0 56px;
}
.ws-food-carousel__viewport {
	overflow: hidden;
}
.ws-food-carousel__track {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform 0.5s ease;
	will-change: transform;
}
.ws-food-carousel__slide {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 0 10px;
	display: flex; /* lets the inner card stretch to the tallest slide height */
}
.ws-food-carousel__slide .ws-food-card { height: 100%; }
.ws-food-carousel__arrow {
	position: absolute;
	bottom: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 0;
	background: var(--ws-red);
	color: var(--ws-white);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--ws-transition);
}
.ws-food-carousel__arrow:hover,
.ws-food-carousel__arrow:focus {
	background: var(--ws-red-hover);
}
.ws-food-carousel__arrow--prev { left: 0; }
.ws-food-carousel__arrow--next { left: 36px; }

/* ── Responsive ── */
@media only screen and (max-width: 959px) {
	.ws-food-grid { grid-template-columns: repeat(2, 1fr); }
	.ws-food-detail__layout { flex-direction: column; }
	.ws-food-detail__image { flex: 0 0 auto; width: 100%; }

	/* Food "You might also like" carousel slides — drop the image wrap from
	 * 200px to something proportionate so the slides aren't dominated by the
	 * image area on small screens. */
	.ws-food-carousel .ws-food-card__img-wrap { height: 140px; }

}

/* Phones: hoist .ws-food-detail__title above the image and center it.
   `display: contents` on .ws-food-detail__info lets its children participate in the
   .ws-food-detail__layout flex flow as siblings of .ws-food-detail__image, so we can
   use `order: -1` to move the title before the image without touching the markup. */
@media only screen and (max-width: 767px) {
	.ws-food-card__label { font-size: 16px; }
	.ws-food-detail__layout > .ws-food-detail__info { display: contents; }
	.ws-food-detail__layout .ws-food-detail__title {
		order: -1;
		text-align: center;
		margin-bottom: 16px;
		width: 100%;
	}
	.ws-food-detail__desc {
		text-align: center;	
	}
	.ws-food-detail__cal-row {
		justify-content: center;
		margin: 16px auto;
	}

	/* Category index (food.php / .ws-page-food) — horizontal rows with
	 * image | name | arrow, separated by a divider. The detail page
	 * (.ws-page-food-single) keeps its vertical-card grid. */
	.ws-page-food .ws-food-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.ws-page-food .ws-food-grid__item + .ws-food-grid__item {
		border-top: 1px solid var(--ws-light-gray);
	}
	.ws-page-food .ws-food-grid__item .ws-food-card {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		background: transparent;
		border: none;
		border-radius: 0;
		text-align: left;
	}
	.ws-page-food .ws-food-grid__item .ws-food-card:hover {
		box-shadow: none;
		transform: none;
	}
	.ws-page-food .ws-food-grid__item .ws-food-card__img-wrap {
		width: 120px;
		height: 90px;
		flex-shrink: 0;
		margin-bottom: 0;
	}
	.ws-page-food .ws-food-grid__item .ws-food-card__label {
		flex: 1;
		margin-top: 0;
		text-align: left;
		margin-bottom: 0;
	}
	/* Category index (food.php) wraps the label in .ws-food-card__text; let it
	 * grow and left-align so the arrow is pushed to the far right. */
	.ws-page-food .ws-food-grid__item .ws-food-card__text {
		flex: 1;
		align-items: flex-start;
	}
	.ws-page-food .ws-food-grid__item .ws-food-card::after {
		content: "";
		flex-shrink: 0;
		width: 12px;
		height: 12px;
		border-top: 2px solid var(--ws-red);
		border-right: 2px solid var(--ws-red);
		transform: rotate(45deg);
		margin-left: 8px;
	}
}
@media only screen and (max-width: 600px) {
	/* One slide per view on mobile — hide arrows and drop the bottom padding
	 * that was reserved for them. */
	.ws-food-carousel { padding: 0; }
	.ws-food-carousel__arrow { display: none; }
	/* .ws-food-carousel .ws-food-card__img-wrap { height: 260px; } */
}
@media only screen and (max-width: 480px) {
	/* Index page collapses to one row per category; the detail page keeps its
	 * 2-up vertical-card grid (inherited from the <=959px rule). */
	.ws-page-food .ws-food-grid { grid-template-columns: 1fr; }
	.ws-food-category__header { padding-top: 32px; }
}

/* ------------------------------------------------------------------
 * Locations - All page (templates/locations-all.php)
 * Built from the [ws_locations_all] shortcode in functions.php.
 * Outer is full-width (overrides the parent theme's container the same
 * way .ws-page-map does); content lives in .ws-locations-all__inner,
 * which uses the parent theme's .container for max-width + side padding.
 * ------------------------------------------------------------------ */
.ws-page-locations-all,
.ws-page-locations-all #content {
	padding: 0;
	margin: 0;
	max-width: none;
}
.ws-locations-all__inner { padding-top: 40px; padding-bottom: 64px; }
@media only screen and (max-width: 767px) {
	.ws-locations-all__inner { padding-bottom: 0; }
}

/* ------------------------------------------------------------------
 * Coupons page (templates/coupons.php)
 * Uses the [ws_display_region_coupons] shortcode for the grid, plus
 * a two-column CTA row + bottom SMS promo banner.
 * ------------------------------------------------------------------ */
.ws-page-coupons,
.ws-page-coupons #content {
	padding: 0;
	margin: 0;
	max-width: none;
}
.ws-page-coupons {
	background: var(--ws-pale-blue);
background-image:
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg);
	background-repeat: no-repeat;
	background-position:
		28% 3%,
		74% 3%,
		-3% 56%,
		101% 33%,
		1% 92%,
		99% 92%;
	background-size:
		50px,
		50px,
		220px,
		160px,
		80px,
		80px;	
}
.ws-coupons__inner { padding-top: 40px; padding-bottom: 48px; }
.ws-coupons__heading {
	color: var(--ws-red);
	font-weight: var(--ws-fw-extrabold);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 32px;
}

/* Two-column CTA row sitting below the coupons grid. White panel with the
 * print/signup buttons in solid black pills. */
.ws-coupons-callout {
	background: var(--ws-white);
}
.ws-coupons-callout__inner {
	background: var(--ws-white);
	padding: 40px var(--ws-container-pad);
}
@media only screen and (max-width: 767px) {
	.ws-coupons-callout__inner { padding: 0; }
}
.ws-coupons-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;

}
.ws-coupons-actions__col {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ws-coupons-actions__title {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: var(--ws-fs-h6);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ws-charcoal);
	margin: 0 0 18px;
}
/* Coupons promo banner — full-width image picked per page via ACF
 * (coupons_sms_image). Image scales fluid to the container width. */
.ws-coupons-sms { line-height: 0; background-color: var(--ws-black); }
.ws-coupons-sms__picture,
.ws-coupons-sms img,
.ws-coupons-sms__link {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	margin: auto;
}

/* Coupons page responsive — stack the CTA columns on narrow screens and
 * stretch the buttons to fill their column. */
@media only screen and (max-width: 767px) {
	.ws-coupons-actions {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 28px var(--ws-container-pad);
	}
	.ws-coupons-actions__col .ws-btn {
		display: flex !important;
		width: 100%;
		min-width: 0 !important;
	}
}

/* Print All Coupons: mobile uses the in-page print view, desktop uses the
 * region-aware PDFs from Coupon Settings. `.ws-btn` itself declares
 * `display: inline-flex !important`, and the `.ws-coupons-actions__col .ws-btn`
 * mobile rule above forces `display: flex !important` — so we scope these
 * overrides under the same parent to beat that rule on specificity. */
.ws-coupons-actions__col .ws-print-coupons--mobile { display: none !important; }
@media only screen and (max-width: 767px) {
	.ws-coupons-actions__col .ws-print-coupons--mobile  { display: flex !important; }
	.ws-coupons-actions__col .ws-print-coupons--desktop { display: none !important; }
}
.ws-locations-all__heading {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-fs-h2);
	color: var(--ws-red);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 32px;
}
/* State filter pills above the grid — client-side filter wired up in the
 * inline script at the end of the [ws_locations_all] shortcode. */
.ws-locations-all__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0 0 28px;
}
.ws-locations-all__pill {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--ws-light-gray);
	background: var(--ws-white);
	color: var(--ws-charcoal);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
}
.ws-locations-all__pill:hover,
.ws-locations-all__pill:focus {
	border-color: var(--ws-red);
	color: var(--ws-white);
}
.ws-locations-all__pill.is-active {
	background: var(--ws-red);
	border-color: var(--ws-red);
	color: var(--ws-white);
}
/* On mobile the pills would otherwise wrap into 4-5 stacked rows and eat
 * most of the viewport before the grid is visible. Switch to a single
 * horizontally-scrolling row, edge-to-edge so the user can see there is
 * more content to swipe to. */
@media only screen and (max-width: 767px) {
	.ws-locations-all__filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		/* Lock the strip to horizontal scrolling — without these, overflow-y
		 * defaults to auto and touch gestures can pan vertically inside the
		 * container, which fights the page scroll. */
		overflow-y: hidden;
		touch-action: pan-x;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-left: calc(var(--ws-container-pad) * -1);
		margin-right: calc(var(--ws-container-pad) * -1);
		padding: 0 var(--ws-container-pad);
	}
	.ws-locations-all__filters::-webkit-scrollbar { display: none; }
	.ws-locations-all__pill { flex: 0 0 auto; }
}

/* ── Mobile state-picker / detail flow ──
 * Phones get a two-pane app-style flow: picker (vertical list of states)
 * ↔ detail (flat list of locations for one state, with a back link). The
 * swap is handled client-side via history.pushState so the URL stays
 * ?location-results=<slug> for sharing, deep links, and crawlers; the
 * server renders whichever pane matches the URL on first paint. Desktop
 * keeps the pill-bar + card-grid UI unchanged.
 */
.ws-locations-all__states { display: none; list-style: none; margin: 0; padding: 0; }
.ws-locations-all__back    { display: none; }

@media only screen and (max-width: 767px) {
	/* Pill bar is replaced on mobile by the picker list + back link. */
	.ws-locations-all__filters { display: none; }

	/* Picker view: no state selected. */
	.ws-locations-all:not(.ws-locations-all--filtered) .ws-locations-all__grid {
		display: none;
	}
	.ws-locations-all:not(.ws-locations-all--filtered) .ws-locations-all__states {
		display: block;
	}

	/* Detail view: state selected — back row above the flat-list cards.
	 * Styled to match the picker rows: full-width, edge-to-edge separator,
	 * left-pointing chevron drawn as a ::before pseudo-element. */
	.ws-locations-all--filtered .ws-locations-all__back {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: calc(var(--ws-container-pad) * -1);
		margin-right: calc(var(--ws-container-pad) * -1);
		padding: 14px var(--ws-container-pad);
		border-bottom: 1px solid var(--ws-light-gray, #e5e5e5);
		text-decoration: none;
		font-family: var(--ws-font-heading);
		font-weight: var(--ws-fw-extrabold);
		font-size: var(--ws-fs-h3);
		color: var(--ws-red);
		text-transform: uppercase;
	}
	.ws-locations-all--filtered .ws-locations-all__back::before {
		content: "";
		flex-shrink: 0;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--ws-red);
		border-right: 2px solid var(--ws-red);
		transform: rotate(-135deg);
	}

	/* Flat list — no card chrome, just hr separators that run edge-to-edge.
	 * Negative horizontal margin pulls the row out past the .container side
	 * padding so the separator spans the full viewport; matching padding on
	 * the row keeps text inset where it was. */
	.ws-locations-all--filtered .ws-locations-all__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.ws-locations-all--filtered .ws-locations-all__card {
		background: transparent;
		border: none;
		border-radius: 0;
		border-bottom: 1px solid var(--ws-light-gray, #e5e5e5);
		margin-left: calc(var(--ws-container-pad) * -1);
		margin-right: calc(var(--ws-container-pad) * -1);
		padding: 14px var(--ws-container-pad);
	}
	.ws-locations-all--filtered .ws-locations-all__card:hover {
		box-shadow: none;
		transform: none;
	}

	/* Picker rows — same edge-to-edge separator treatment. */
	.ws-locations-all__states {
		margin-left: calc(var(--ws-container-pad) * -1);
		margin-right: calc(var(--ws-container-pad) * -1);
	}
	.ws-locations-all__states-item + .ws-locations-all__states-item {
		border-top: 1px solid var(--ws-light-gray, #e5e5e5);
	}
	.ws-locations-all__states-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px var(--ws-container-pad);
		text-decoration: none;
		color: var(--ws-navy, #1f2f6f);
		font-weight: 600;
		font-size: 17px;
	}
	.ws-locations-all__states-name {
		font-family: var(--ws-font-heading);
		font-weight: var(--ws-fw-extrabold);
		font-size: var(--ws-fs-h3);
		color: var(--ws-red);
		text-transform: uppercase;
	}
	.ws-locations-all__states-icon {
		flex: 0 0 36px;
		width: 36px;
		height: 45px;
		background: url('/wp-content/themes/ws/images/redesign/ws-location-icon.png') no-repeat center center / contain;
	}
	.ws-locations-all__states-count {
		color: #666;
		font-weight: 400;
		margin-left: auto;
	}
	.ws-locations-all__states-link::after {
		content: "";
		flex-shrink: 0;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--ws-red);
		border-right: 2px solid var(--ws-red);
		transform: rotate(45deg);
	}
}

.ws-locations-all__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* Responsive: 2-up on tablet, 1-up on phone. These have to live AFTER the
 * base rule above or the unconditional `repeat(3, 1fr)` would win the cascade
 * and override the media-query columns at all viewport widths. */
@media only screen and (max-width: 959px) {
	.ws-locations-all__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
	.ws-locations-all__grid { grid-template-columns: 1fr; }
}
.ws-locations-all__card {
	display: flex;
	gap: 14px;
	background: var(--ws-white);
	border: 1px solid var(--ws-light-gray);
	border-radius: 8px;
	padding: 18px 18px 16px;
	transition: box-shadow var(--ws-transition), transform var(--ws-transition);
}
.ws-locations-all__card:hover {
	box-shadow: var(--ws-shadow-md);
	transform: translateY(-2px);
}
.ws-locations-all__icon {
	flex: 0 0 52px;
	width: 52px;
	height: 65px;
	background: url('/wp-content/themes/ws/images/redesign/ws-location-icon.png') no-repeat center top / contain;
}
.ws-locations-all__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: space-between;
}
.ws-locations-all__title {
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-extrabold);
	font-size: 16px;
	color: var(--ws-dark-blue);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	line-height: 1.25;
}
.ws-locations-all__title a {
	color: inherit;
	text-decoration: none;
}
.ws-locations-all__title a:hover,
.ws-locations-all__title a:focus {
	color: var(--ws-red);
	text-decoration: none;
}
.ws-locations-all__address {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-body);
	line-height: 1.45;
	color: var(--ws-charcoal);
	text-wrap: balance;
}
.ws-locations-all__phone a {
	font-size: var(--ws-fs-h6);
	color: var(--ws-red);
	font-weight: var(--ws-fw-bold);
	text-decoration: none;
}
.ws-locations-all__card .order-online { margin-top: 8px; align-self: flex-start; }

/* Status badges — small uppercase pills surfacing each location's state. */
.ws-locations-all__notice {
	display: inline-block;
	align-self: flex-start;
	margin: 2px 0;
	padding: 2px 10px;
	border-radius: 999px;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: var(--ws-fs-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--ws-white);
}
.ws-locations-all__notice--now-open    { background: #178044; }            /* green — 4.99:1 under white 14px text (WCAG 1.4.3) */
.ws-locations-all__notice--coming-soon { background: var(--ws-dark-blue); }
.ws-locations-all__notice--closed      { background: var(--ws-red); }

/* ------------------------------------------------------------------
 * 9. Location Detail Page (single-store_page.php)
 * ------------------------------------------------------------------ */

/* ── ORDER ONLINE button variant ── */
.ws-btn--order {
	display: inline-block;
	margin-top: 60px;
	padding: 14px 36px;
	background: var(--ws-red);
	color: var(--ws-white);
	font-family: var(--ws-font-heading);
	font-size: 16px;
	font-weight: var(--ws-fw-black);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s;
}
.ws-btn--order:hover,
.ws-btn--order:focus {

	text-decoration: none;
}
@media only screen and (max-width: 959px) {
	.ws-btn--order {
		margin-top: 20px;
	}
}
@media only screen and (max-width: 767px) {
	.ws-btn--order {
		width: 100%;
	}
}

/* ── CATERING button: stacks beneath Order Online ── */
.ws-btn--catering {
	display: block;
	width: fit-content;
	margin-top: 12px;
	/* `!important` overrides the shared `.ws-btn { background: red !important }`
	   rule, since the catering button ships with all three classes
	   (ws-btn ws-btn--order ws-btn--catering). */
	background: var(--ws-black) !important;
	border-color: var(--ws-black) !important;
}
.ws-btn--catering:hover,
.ws-btn--catering:focus {
	background: var(--ws-white) !important;
	color: var(--ws-black) !important;
	border-color: var(--ws-black) !important;
}
@media only screen and (max-width: 767px) {
	.ws-btn--catering {
		width: 100%;
	}
}

/* ── Hero section (store info + mascot) ── */
.ws-store-hero {
	padding: 20px 0 24px;
}
.ws-store-hero__inner {
	max-width: var(--ws-container-max);
	display: flex;
	align-items: flex-start;
	gap: 32px;
	align-items: center;
}
.ws-store-hero__info {
	flex: 1 1 auto;
	min-width: 0;
}
.ws-store-hero__mascot {
	flex: 0 0 auto;
	max-width: 240px;
}
.ws-store-hero__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

.ws-store-hero__title {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h2);
	font-weight: var(--ws-fw-extrabold);
	color: var(--ws-black);
	line-height: 1.2;
	margin: 0 0 20px;
}

.ws-store-hero__title span {
	display: block;
	font-size: var(--ws-fs-h3);
	text-transform: uppercase;
}

.ws-store-hero__address {
	font-size: var(--ws-fs-body);
	font-family: var(--ws-font-heading);
	color: var(--ws-charcoal);
	line-height: 1.6;
	font-weight: var(--ws-fw-regular);
	margin-bottom: 10px;
}

.ws-store-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-bottom: 4px;
}

.ws-store-hero__phone,
.ws-store-hero__directions {
	font-family: var(--ws-font-sans);
	font-size: var(--ws-fs-body);
	font-weight: var(--ws-fw-bold);
	color: var(--ws-black);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ws-store-hero__phone i,
.ws-store-hero__directions i {
	color: var(--ws-red);
	font-size: 1.2em;
}
.ws-store-hero__label {
	text-decoration: underline;
}
.ws-store-hero__phone:hover,
.ws-store-hero__directions:hover {
	color: var(--ws-red);
}

.ws-store-hero__storeid {
	font-family: var(--ws-font-sans);
	font-size: var(--ws-fs-body);
	font-weight: var(--ws-fw-regular);
	color: #757575;
}

/* ── Status notices ── */
.ws-store-notice {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 20px;
	font-family: var(--ws-font-heading);
	font-size: 13px;
	font-weight: var(--ws-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}
.ws-store-notice--closed    { background: #e0e0e0; color: #555; }
.ws-store-notice--nowopen   { background: #2e7d32; color: #fff; }
.ws-store-notice--comingsoon { background: var(--ws-dark-blue); color: #fff; }

/* ── Hours + Features + Map section ── */
.ws-store-info {
	padding: 0 0 20px;
	border-radius: 8px;
	margin: 24px 0 0px;
}
.ws-store-info > .container {
	width: 100%;
	max-width: var(--ws-container-max);
	border: 2px solid var(--ws-light-gray);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 0 32px;
}

/* Reset the nested inner .ws-store-details so it doesn't inherit the wrapper's
   padding/margin/radius — it's just a content cell in the grid. */
.ws-store-info .ws-store-details {
	padding: 8%;
	border-radius: 0;
	margin: 0;
	min-width: 0;
}

.ws-store-details__heading {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h3);
	font-weight: var(--ws-fw-extrabold);
	color: var(--ws-black);
	text-transform: uppercase;
	margin: 0 0 12px;
}

.ws-store-status {
	margin-bottom: 20px;
	font-family: var(--ws-font-heading);
}
.ws-store-status .open,
.ws-store-status .closed {
	display: inline-block;
	padding: 4px 14px;
	font-size: 13px;
	font-weight: var(--ws-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 8px;
}
.ws-store-status .open { background-color: #2e7d32 !important; color: #fff; }
.ws-store-status .closed { background-color: #6B6B6B !important; color: #fff; }
.ws-store-status .hours {
	font-size: 14px;
	color: var(--ws-charcoal);
}

/* Hours + features inside the left grid cell — 2-col since map is now its own grid item */
.ws-store-details__layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 24px;
	align-items: start;
}

.ws-store-details__hours,
.ws-store-details__features { min-width: 0; }

/* Map fills the right grid cell, flush with the bordered container's right and vertical edges */
.ws-store-details__map {
	min-width: 0;
}
.ws-store-details__map iframe {
	width: 100%;
	height: 100%;
	min-height: 380px;
	display: block;
	border: 0;
}

.ws-store-hours__notice {
	font-size: 12px;
	color: #757575;
	margin-top: 16px;
}

/* ── Delivery Partners ── */
.ws-store-delivery {
	background: var(--ws-white);
	padding: 40px 0;
}

.ws-store-delivery__disclaimer {
	font-size: 12px;
	color: #757575;
	margin-bottom: 20px;
	font-style: italic;
}

.ws-store-delivery__heading {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h3);
	font-weight: var(--ws-fw-bold);
	color: var(--ws-black);
	margin: 0 0 0px;
}

.ws-store-delivery__partners {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.ws-store-delivery__partner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 2px solid #ddd;
	border-radius: 50px;
	background: #000;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.ws-store-delivery__partner:hover {
	border-color: #aaa;
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.ws-store-delivery__partner img {
	height: auto;
	width: auto;
	display: block;
}

/* ── Store Copy ── */
.ws-store-copy {
	padding: 20px 0 60px;
}
.ws-store-copy a {
	color: var(--ws-black);
	text-decoration: underline;
}
.ws-store-copy p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ws-charcoal);
	margin-bottom: 16px;
}

/* ── Coupons ── */
.ws-store-coupons {
	position: relative;
	padding: 40px 0 60px;
	background-color: var(--ws-pale-blue);
	background-image:
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg),
		url(../images/redesign/star.svg);
	background-repeat: no-repeat;
	background-position:
		28% 3%,
		74% 3%,
		-3% 56%,
		101% 33%,
		1% 92%,
		99% 92%;
	background-size:
		50px,
		50px,
		220px,
		160px,
		80px,
		80px;
	overflow: hidden;
}
.ws-store-coupons > .container { position: relative; z-index: 1; }
.ws-store-coupons h2,
.ws-store-coupons h3 {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h2);
	font-weight: var(--ws-fw-extrabold);
	color: var(--ws-red);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 32px;
}

/* ── Responsive ── */
/* 960px–1280px: details cell is too narrow for hours + features side-by-side, stack them */
@media only screen and (min-width: 960px) and (max-width: 1280px) {
	.ws-store-details__layout {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 959px) {
	/* Stack inner-details + map vertically; map runs flush to the bordered container's
	   left, right, and bottom edges. */
	.ws-store-info > .container {
		grid-template-columns: minmax(0, 1fr);
	}
	.ws-store-details__layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.ws-store-details__map {
		min-height: 320px;
	}
	.ws-store-details__map iframe { min-height: 320px; }
	.ws-store-hero__mascot { max-width: 180px; }
}

@media only screen and (max-width: 767px) {
	.ws-store-hero__mascot { display: none; }
	.ws-store-info .ws-store-details { padding: 24px; }
}

@media only screen and (max-width: 600px) {
	.ws-store-details__layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.ws-store-info .ws-store-details { padding: 20px; }
	.ws-store-delivery__partners { flex-direction: column; }
	.ws-store-delivery__partner { justify-content: center; }
	.ws-btn--order { display: block; text-align: center; }
}


/* ------------------------------------------------------------------
 * 10. Homepage template (page-home.php)
 * ------------------------------------------------------------------ */

/* Strip the parent-theme container padding so sections can be full-width */
.ws-page-home { padding: 0; }
.ws-page-home #content { padding: 0; }

/* Full-width map page (page-map.php) */
.ws-page-map,
.ws-page-map #content {
	padding: 0;
	margin: 0;
	max-width: none;
}
/* SoCal "Wiener Wagon" banner that renders BELOW the map when the page is
   filtered by ?category=southern california. PHP gates the markup. The
   banner is given a fixed visual height so we can subtract it from the
   map's 100vh container — keeping both the map and the banner visible in
   one viewport without scrolling. */
.ws-page-map { --ws-map-banner-h: 120px; }
.ws-page-map .ws-map-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--ws-map-banner-h);
	line-height: 0;
	overflow: hidden;
}
.ws-page-map .ws-map-banner--ww { background: var(--ws-red); }
.ws-page-map .ws-map-banner img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}
/* When the banner is present, shrink the map container by the banner's
   height so both fit in 100vh - chrome. */
.ws-page-map--has-banner .wpgmp_map_container {
	height: calc(100vh - var(--ws-header-h) - var(--ws-topbar-h) - var(--ws-map-banner-h)) !important;
	min-height: 0 !important;
}
@media only screen and (max-width: 767px) {
	.ws-page-map { --ws-map-banner-h: 90px; }
}
.ws-page-map .ws-map-wrap,
.ws-page-map .ws-map-wrap > * {
	width: 100%;
	max-width: none;
}
.ws-page-map .ws-map-wrap iframe,
.ws-page-map .ws-map-wrap .wpgmp_map_parent,
.ws-page-map .ws-map-wrap .wpgmp_locations,
.ws-page-map .ws-map-wrap .map_container {
	width: 100% !important;
	max-width: none !important;
}

.wpgmp-map-7 div.wpgmp_search_form input.wpgmp_search_input {
	border: 1px solid var(--ws-red) !important;
	font-family: var(--ws-font-heading);
}


/* ── WP Maps Pro layout overrides for the locations page ───────────────── */

/* The plugin renders: .wpgmp_map_container > [ .wpgmp_map_parent (the map),
   .wpgmp_filter_wrappers (search/filters), .location_listingN (results),
   .location_paginationN ]. We anchor everything to the map_container and
   float the search panel as a card over the top-right of the map. */
.ws-page-map .wpgmp_map_container {
	position: relative;
	height: calc(100vh - var(--ws-header-h) - var(--ws-topbar-h));
	min-height: 600px;
	background: var(--ws-pale-blue);
}
/* `> div:not(.ws-map-zoom)` (here and in the sizing rules below): the
 * custom zoom control injected by ws-map.js is also a direct div child
 * of map_parent and must NOT be stretched to the map's box. */
.ws-page-map .wpgmp_map_parent > div:not(.ws-map-zoom),
.ws-page-map [id^="map"].wpgmp_map {
	height: 100% !important;
	min-height: 600px;
}
/* Anchor the map to the container's box instead of relying on `height: 100%`
 * cascading from a `display: inline-block` parent — Firefox refuses to
 * resolve that and clamps to `min-height: 600px`. Absolute positioning
 * against `.wpgmp_map_container` (which is `position: relative`) makes the
 * map fill the container in every browser. */
.ws-page-map .wpgmp_map_parent {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	min-height: 600px;
}

/* When the result listing is visible, shrink the map to the remaining width
 * so the two sit side by side (listing on the left at --ws-map-listing-w, map
 * fills the rest). Falls through to full-width when there are no results.
 *
 * Map is absolute-positioned (see rule above), so we pull its left edge in
 * with `left: var(--ws-map-listing-w)` rather than touching margins/widths.
 *
 * Gated to desktop because on mobile the listing isn't a side column — it
 * flows below the map. The `:has()` selector here has specificity (0,5,0),
 * which outranks the mobile is-map-shown override; gating with @media is
 * the only reliable way to keep the 500px left offset off small screens. */
/* No CSS transition on `.wpgmp_map_parent`'s `left` — animating the
 * map's width fights Google Maps' internal viewport caching and made
 * the marker-click pan land in the wrong spot. Width is snapped
 * instantly when the listing column slides in; the listing itself
 * still slides via its own transform transition. */
@media (min-width: 960px) {
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"] .ws-results-header__count:not(:empty)) .wpgmp_map_parent,
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"].ws-listing-loading) .wpgmp_map_parent {
		left: var(--ws-map-listing-w) !important;
	}
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"] .ws-results-header__count:not(:empty)) .wpgmp_map_parent > div:not(.ws-map-zoom),
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"] .ws-results-header__count:not(:empty)) [id^="map"].wpgmp_map,
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"].ws-listing-loading) .wpgmp_map_parent > div:not(.ws-map-zoom),
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"].ws-listing-loading) [id^="map"].wpgmp_map {
		width: 100% !important;
	}
}

/* Floating search/filter card — top-right overlay over the map. */
.ws-page-map .wpgmp_filter_wrappers {
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 10;
	width: 360px;
	max-width: calc(100% - 48px);
	background: var(--ws-white);

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	padding: 24px;
	font-family: var(--ws-font-heading);
}

/* Hide the floating search card while any map infowindow is open so it
 * doesn't cover the popup. Body class is toggled by wsSyncInfoWindowState. */
body.ws-infowindow-open .ws-page-map .wpgmp_filter_wrappers {
	display: none !important;
}

/* "Find a Location" header (rendered by the plugin into .wpgmp_before_listing).
 * Flex row so the JS-injected "All Locations" link sits right-aligned. */
.ws-page-map .wpgmp_before_listing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--ws-red);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: var(--ws-fs-h5);
	text-transform: uppercase;
	margin: 0 0 14px;
}
.ws-page-map .ws-all-locations {
	color: var(--ws-charcoal);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.ws-page-map .ws-all-locations:hover,
.ws-page-map .ws-all-locations:focus {
	color: var(--ws-red);
	text-decoration: underline;
}

/* Search input — full width pill-ish, with a thin red bottom border on focus. */
.ws-page-map .wpgmp_listing_header,
.ws-page-map .wpgmp_search_form { margin: 0; padding: 0; }
.ws-page-map .wpgmp_search_input {
	width: 100% !important;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ws-light-gray);
	border-radius: 4px;
	background: var(--ws-white);
	font-family: var(--ws-font-body);
	font-size: 14px;
	color: var(--ws-charcoal);
	box-sizing: border-box;
}
.ws-page-map .wpgmp_search_input:focus {
	border-color: var(--ws-red);
}

/* Categories filter row — only show if it has actual content. */
.ws-page-map .categories_filter { margin-top: 12px; }
.ws-page-map .categories_filter:empty,
.ws-page-map .categories_filter > div:empty { display: none; }
.ws-page-map div.categories_filter select {
	border-radius: 25px;
    font-family: var(--ws-font-heading);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

/* "or" divider between the search input and the Use My Location button. */
.ws-page-map .ws-filter-sep {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ws-font-body);
	font-size: 12px;
	height: 44px;
	color: var(--ws-charcoal);
	text-transform: lowercase;
	position: relative;
	border: 1px solid transparent;
}
.ws-page-map .ws-filter-sep::before,
.ws-page-map .ws-filter-sep::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--ws-black);
}

/* Full-width Use My Location button inside the floating search card. */
.ws-page-map .ws-use-my-location {
	display: flex !important;
	width: 100%;
	min-width: 0 !important;
}
.ws-page-map .ws-use-my-location[disabled] {
	opacity: 0.7;
	cursor: progress;
}

/* Result listing — hidden until our custom.js has injected the results
 * header AND populated the count text. Gating on the count's content
 * (rather than just `.wpgmp_locations` existing) avoids the flash where
 * the plugin renders cards before wsUpdateResultsHeader injects the
 * header — the user no longer sees a half-baked column.
 *
 * Slide-in animation: `@starting-style` defines the off-screen position
 * the very first frame the rule starts matching, then `transition`
 * interpolates back to the resting `translateX(0)`. Browsers without
 * `@starting-style` (older Firefox) simply skip the animation. */
.ws-page-map [class^="location_listing"] { display: none; }
.ws-page-map [class^="location_listing"]:has(.ws-results-header__count:not(:empty)),
.ws-page-map [class^="location_listing"].ws-listing-loading {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 8;
	width: var(--ws-map-listing-w) !important; /* WPGMP sets inline style="float:left; width:100%" */
	max-width: 100% !important;
	height: 100% !important;
	background: var(--ws-white);
	overflow-y: auto;
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
	padding: 0;
	float: none !important;
	transform: translateX(0);
	transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
@starting-style {
	.ws-page-map [class^="location_listing"]:has(.ws-results-header__count:not(:empty)),
	.ws-page-map [class^="location_listing"].ws-listing-loading {
		transform: translateX(-100%);
	}
}
/* Map_container already clips its absolute children, but make it explicit
 * so the slide-in doesn't briefly produce a horizontal scrollbar. */
.ws-page-map .wpgmp_map_container { overflow: hidden; }



/* Results header — JS-injected above .wpgmp_listing_list (built in custom.js
 * by wsUpdateResultsHeader). "Results" headline + "N Locations Near You!"
 * subline. Hidden when there are no results since the parent listing column
 * already hides itself in that state. */
.ws-page-map .ws-results-header {
	padding: 20px 24px 14px;
	border-bottom: 1px solid var(--ws-light-gray);
	background: var(--ws-white);
}
.ws-page-map .ws-results-header__title {
	margin: 0;
	color: var(--ws-red);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-fs-h2);
	text-transform: uppercase;
	line-height: 1;
}
.ws-page-map .ws-results-header__count {
	margin-top: 6px;
	color: var(--ws-charcoal);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Search-loading state — applied while the user is typing in the search
 * box and removed once the plugin's filter + our distance sort have both
 * caught up to the input value. Without this, the plugin renders the
 * listing in its default (category-asc) sort order for ~100-200ms before
 * our ws-map-distance code re-sorts by distance and stamps the pills,
 * producing a visible flash of unsorted/unstyled rows on every search.
 *
 * Strategy: fade the rows + load-more area to opacity 0 (keeps layout
 * intact so the column doesn't collapse) and float a spinner over the
 * center of the listing column. Class is added/removed by
 * ws-map-distance.js. */
.ws-page-map [class^="location_listing"].ws-listing-loading .wpgmp_listing_list,
.ws-page-map [class^="location_listing"].ws-listing-loading .ws-load-more-wrap {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease-out;
}
.ws-page-map [class^="location_listing"].ws-listing-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border: 4px solid var(--ws-light-gray);
	border-top-color: var(--ws-red);
	border-radius: 50%;
	animation: ws-listing-spin 0.8s linear infinite;
	z-index: 5;
	pointer-events: none;
}
@keyframes ws-listing-spin {
	to { transform: rotate(360deg); }
}

/* Result card styling */
.ws-page-map .wpgmp_listing_container,
.ws-page-map .wpgmp_listing_list,
.ws-page-map .fc-item-default,
.ws-page-map .fc-component-6 { 
	display: flex;
    flex-direction: column;
    gap: 25px;
	margin-bottom: 6px;
}
.ws-page-map .wpgmp_locations {
	padding: 16px 24px;
	border-bottom: 1px solid var(--ws-light-gray);
	cursor: pointer;
	transition: background var(--ws-transition);
}
.wpgmp_listing_list .wpgmp_locations .wpgmp_location_title {
	margin-bottom: 0 !important;
}
.ws-page-map .wpgmp_locations:hover {
	background: var(--ws-pale-blue);
}
.ws-page-map .place_title {
	text-transform: uppercase;
}
.ws-page-map .wpgmp_location_title a.place_title {
	color: var(--ws-black);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-extrabold);
	font-size: 15px;
	text-decoration: none;
}
.ws-page-map .wpgmp_location_meta { margin-top: 4px; display:none; }
.ws-page-map .fc-badge {
	display: inline-block;
	background: var(--ws-light-gray);
	color: var(--ws-charcoal);
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ws-page-map .wpgmp_locations_content {
	font-size: 13px;
	color: var(--ws-charcoal);
	line-height: 1.5;
}

.ws-page-map .fc-feature-img {
	display:none !important;
}
.ws-page-map .wpgmp_locations_content .ws-map-infowindow a {
	color: var(--ws-red);
	font-weight: var(--ws-fw-bold) !important;
	text-decoration: none !important;
}


/* Enhanced result card content — built by wsEnhanceLocationCard() in custom.js
 *
 * One grid lives on .ws-map-infowindow (the container our JS injects into).
 * Three columns: pin icon | info column (address/phone/status) | action buttons.
 * Areas keep the layout stable regardless of the order JS emits items in.
 */
.ws-page-map .wpgmp_listing_list .wpgmp_locations.ws-store-result { 
	padding: 16px 20px !important; 
	margin-bottom: 0 !important; 
	width: 90% !important;
	margin: auto;
}
.ws-page-map .wpgmp_locations.ws-store-result:hover { 
	/* red box shadow */
	box-shadow: var(--ws-red) 0px 0px 0px 4px inset, rgba(48, 48, 48, 0.08) 0px 4px 15px 0px !important;
}

.ws-page-map .ws-store-result .wpgmp_locations_content { padding: 0; }

.fc-item-default.fc-wait .wpgmp_locations {   
    box-shadow: 0 0 4px rgba(74, 74, 74, 0.15) !important;
}

.ws-page-map .ws-map-infowindow {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr) 150px;
	column-gap: 12px;
	row-gap: 4px;
	align-items: center;
}
.ws-page-map .ws-store-result__icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 2px;
	max-width: 52px;
}
.ws-page-map .ws-store-result__icon img {
	width: 52px !important;
	margin-left: 15px !important;
	margin-bottom: 0 !important;
	height: auto;
	display: block;
}
.ws-page-map .ws-store-result__icon .ws-distance {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 6px;
	border-radius: 12px;
	background: var(--ws-red, #DC1B2E);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
/* Let the meta children flow into their own grid areas instead of stacking. */
.ws-page-map .ws-store-result__meta { display: flex; flex-direction: column; }


.ws-page-map .ws-store-result__address {
	font-size: 13px;
	line-height: 1.45;
	color: var(--ws-charcoal);
	font-weight: var(--ws-fw-bold) !important;
	text-wrap: balance;
}
.ws-page-map .ws-store-result__phone {
	font-size: 13px;
	display: none;
}
.ws-page-map .ws-store-result__phone a {
	color: var(--ws-red) !important;
	font-weight: var(--ws-fw-bold);
}
.ws-page-map .ws-store-result__status {
	font-size: 12px;
	color: var(--ws-charcoal);
}
.ws-page-map .ws-store-result__status.is-open strong  { color: #1A7F35; }
.ws-page-map .ws-store-result__status.is-closed strong { color: var(--ws-red); }
.ws-page-map .ws-store-result__status strong {
	font-weight: var(--ws-fw-black);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-right: 4px;
}

.ws-page-map .ws-store-result__actions {

	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: center;
}
.ws-page-map .ws-store-result__order {
	min-width: 0 !important;
	height: 36px !important;
	font-size: 12px !important;
	padding: 0 12px !important;
	width: 100%;
	color: var(--ws-white) !important;
	font-weight: var(--ws-fw-bold) !important;
}
.ws-page-map .ws-store-result__order:hover,
.ws-page-map .ws-store-result__order:focus {
	color: var(--ws-red) !important;
	text-decoration: none !important;
}

.ws-page-map .ws-store-result__details,
.ws-page-map .ws-store-result__directions {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--ws-btn-radius);
	background: var(--ws-white);
	border: 2px solid var(--ws-red);
	color: var(--ws-red) !important;
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background var(--ws-transition), color var(--ws-transition);
}

/* Desktop result cards keep Location Details + hide Directions (the
 * Directions button is rendered for mobile only — see the mobile media
 * block below for the swap). The InfoWindow still shows all three
 * actions on desktop since `.ws-infowindow__actions` is a separate
 * scope and its own selectors apply there. */
.ws-page-map .ws-store-result:not(.ws-infowindow) .ws-store-result__directions {
	display: none;
}
.ws-page-map .ws-store-result__details:hover,
.ws-page-map .ws-store-result__details:focus,
.ws-page-map .ws-store-result__directions:hover,
.ws-page-map .ws-store-result__directions:focus {
	background: var(--ws-red);
	color: var(--ws-white) !important;
	text-decoration: none !important;
}

/* Pagination row at the bottom of the listing */
.ws-page-map [class^="location_pagination"] {
	display: none !important; /* hide until needed; WPGMP shows it inline anyway */
}
.ws-page-map [class^="location_listing"]:has(.ws-results-header__count:not(:empty)) ~ [class^="location_pagination"] {
	display: flex;
	justify-content: center;
	padding: 12px;
}

/* Mobile "Load More Locations" — JS (wsApplyMobileLoadMore in custom.js)
 * adds `.ws-result-hidden` to cards past the visible count and injects
 * `.ws-load-more-wrap` after `.wpgmp_listing_list`. Desktop never sees
 * either, since the JS strips them above 959px. */
.ws-page-map .ws-load-more-wrap {
	display: none; /* shown only at mobile breakpoint below */
}
@media (max-width: 959px) {
	.ws-page-map .wpgmp_locations.ws-result-hidden {
		display: none !important;
	}
	.ws-page-map .ws-load-more-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 24px 20px 24px;
		background: var(--ws-white);
		border-top: 1px solid var(--ws-light-gray);
		background-color: var(--ws-pale-blue) !important;
	}
	.ws-page-map .ws-load-more {
		min-width: 240px;
		width: 80%;
		font-size: var(--ws-btn-fs-sm) !important;
	}
	.ws-page-map .ws-load-more-count {
		color: var(--ws-charcoal);
		font-family: var(--ws-font-heading);
		font-weight: var(--ws-fw-bold);
		font-size: 12px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
}

/* Custom map zoom control — injected by ws-map.js (wsAddZoomControls)
 * as a direct child of .wpgmp_map_parent, replacing the stock Google
 * +/− control. Bigger targets + brand styling so the buttons read as
 * "this is how you zoom the map" (vs. reaching for browser zoom).
 *
 * Positioned by us, NOT by Google's control slots: map_parent keeps
 * its full container width and is pushed right by `left: 500px` when
 * the listing column is visible (rule above), so its right edge —
 * where Google anchors RIGHT_BOTTOM controls — hangs off-screen by
 * exactly --ws-map-listing-w. The desktop override below mirrors the
 * same :has() gate to pull the buttons back into the visible area. */
.ws-page-map .ws-map-zoom {
	position: absolute;
	right: 16px;
	bottom: 24px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 960px) {
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"] .ws-results-header__count:not(:empty)) .wpgmp_map_parent .ws-map-zoom,
	.ws-page-map .wpgmp_map_container:has([class^="location_listing"].ws-listing-loading) .wpgmp_map_parent .ws-map-zoom {
		right: calc(var(--ws-map-listing-w) + 16px);
	}
}
.ws-page-map .ws-map-zoom__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: var(--ws-white);
	color: var(--ws-red);
	font-size: 30px;
	font-weight: var(--ws-fw-bold);
	line-height: 1;
	cursor: pointer;
}
.ws-page-map .ws-map-zoom__btn + .ws-map-zoom__btn {
	border-top: 1px solid var(--ws-light-gray);
}
.ws-page-map .ws-map-zoom__btn:hover {
	background: var(--ws-red);
	color: var(--ws-white);
}
.ws-page-map .ws-map-zoom__btn:focus-visible {
	outline: 3px solid var(--ws-red);
	outline-offset: -3px;
}
.ws-page-map .ws-map-zoom__btn span {
	pointer-events: none;
}

/* Mobile toggle button — hidden on desktop; mobile rules below flip it on. */
.ws-map-toggle { display: none; }

/* Mobile — hide the map by default; a toggle button (.ws-map-toggle) lets
 * the user reveal it. When `.ws-page-map` has `is-map-shown`, the map
 * overrides below restore its display + height. Search panel + results
 * always show.
 * DOM order from WPGMP is map → filters → listing → pagination; the toggle
 * button sits above the map_container so the map reveals directly under it.
 */
@media (max-width: 959px) {
	.ws-page-map .ws-map-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		padding: 14px 16px;
		background: var(--ws-red);
		color: var(--ws-white);
		border: 0;
		border-radius: 0;
		font-family: var(--ws-font-heading);
		font-weight: var(--ws-fw-bold);
		font-size: 14px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.ws-page-map .ws-map-toggle::before {
		content: "";
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>') center/contain no-repeat;
		        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>') center/contain no-repeat;
	}
	.ws-page-map .wpgmp_map_container {
		height: auto;
		min-height: 0;
		background: transparent;
	}
	.ws-page-map .wpgmp_map_parent {
		display: none !important;
	}
	/* Toggle ON — restore the map. On desktop the map is absolutely
	 * positioned inside a fixed-height container. On mobile we DON'T size
	 * the container itself, because its in-flow children (filter card +
	 * results listing + pagination) need to grow naturally below the map.
	 * Instead the map_parent takes its own 40vh block in normal flow, and
	 * the filter/listing/pagination siblings stack below it. */
	.ws-page-map.is-map-shown .wpgmp_map_container {
		background: var(--ws-pale-blue);
	}
	.ws-page-map.is-map-shown .wpgmp_map_parent {
		display: block !important;
		position: relative !important;
		inset: auto !important;
		left: 0 !important;
		width: 100% !important;
		height: 40vh !important;
		min-height: 240px !important;
	}
	/* Inner Google Maps canvas — the desktop rules give it `min-height: 600px`,
	 * which on a short phone makes it taller than the 40vh parent and breaks
	 * tile rendering. Let it follow the parent's height instead. */
	.ws-page-map.is-map-shown .wpgmp_map_parent > div:not(.ws-map-zoom),
	.ws-page-map.is-map-shown [id^="map"].wpgmp_map {
		min-height: 0 !important;
		height: 100% !important;
	}
	.ws-page-map .wpgmp_filter_wrappers {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
		box-shadow: none;
		background: var(--ws-pale-blue);
		margin-bottom: 0;
	}
	.ws-page-map [class^="location_listing"]:has(.ws-results-header__count:not(:empty)),
	.ws-page-map [class^="location_listing"].ws-listing-loading {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		box-shadow: none;
	}
	/* Each result card: stack icon + content + buttons vertically rather than
	 * keeping the desktop 3-column grid (cards would feel cramped on mobile). */
	.ws-page-map .ws-map-infowindow {
		grid-template-columns: 52px 1fr;
		row-gap: 6px;
	}
	.ws-page-map .ws-store-result__actions {
		flex-direction: row;
		gap: 8px;
		margin-top: 8px;
		grid-column: 1 / -1;	
	}
	.ws-page-map .ws-store-result__order,
	.ws-page-map .ws-store-result__details,
	.ws-page-map .ws-store-result__directions {
		flex: 1 1 0;
	}
	/* Mobile result cards: show Directions, hide Location Details.
	 * Whole-card tap already navigates to the location details page
	 * (see the `.ws-store-result` click handler in custom.js), so the
	 * dedicated button is redundant on mobile and Directions earns the
	 * row's button slot instead. */
	.ws-page-map .ws-store-result:not(.ws-infowindow) .ws-store-result__details {
		display: none;
	}
	.ws-page-map .ws-store-result:not(.ws-infowindow) .ws-store-result__directions {
		display: inline-flex;
	}
}

/* ── Hero ── */
.ws-home-hero { line-height: 0; }
.ws-home-hero .rev_slider_wrapper,
.ws-home-hero .rev-slider { width: 100% !important; }

/* ── Pods (3-up: Wiener Lovers Club / Franchising / Coupons) ── */
.ws-home-pods {
	background: var(--ws-pale-blue);
	padding: 56px 0;
}
.ws-home-pods__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ws-home-pods__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ws-home-pods__label {
	color: var(--ws-dark-blue);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-black);
	font-size: var(--ws-fs-h4);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.02em;
	margin: 0;
}
.ws-home-pods__link {
	display: block;
	text-decoration: none;
	border-radius: 16px;
	overflow: hidden;
	transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}
.ws-home-pods__link:hover,
.ws-home-pods__link:focus {
	transform: translateY(-4px);
	box-shadow: var(--ws-shadow-md);
}
.ws-home-pods__link img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Join the Team ── */
.ws-home-join {
	background: var(--ws-red);
	padding: 32px 0;
}
.ws-home-join__link {
	display: block;
	text-align: center;
	transition: transform var(--ws-transition);
}
.ws-home-join__link:hover,
.ws-home-join__link:focus {
	transform: translateY(-2px);
}
.ws-home-join__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── Responsive ── */
@media only screen and (max-width: 959px) {
	.ws-home-pods { padding: 40px 0; }
	.ws-home-pods__grid { grid-template-columns: 1fr; gap: 24px; }
	.ws-home-join { padding: 24px 0; }
}


/* ------------------------------------------------------------------
 * 11. Plugin overrides
 * ------------------------------------------------------------------ */

/* Store Locator Plus — wienerschnitzel.css hard-codes Oswald, override to brand font */
#sl_div .results_wrapper,
#sl_div .slp_result_subtitle,
#slp_address,
#sl_div .location_distance,
#sl_div .slp_result_phone,
#sl_div .slp_locations_viewall,
#slp_phone_directions {
	font-family: var(--ws-font-heading) !important;
	letter-spacing: -0.02em !important;
}

#sl_div .slp_result_website a:hover, #sl_div .slp_result_directions a:hover {
	color: var(--ws-red) !important;
	background: var(--ws-white) !important;
}
#sl_div .slp_result_phone {
	display: none;
}
#sl_div .results_wrapper,
#sl_div .slp_result_subtitle,
#slp_address
{
	text-transform: capitalize !important;
	font-size: var(--ws-fs-body);
	letter-spacing: -0.05em !important;
}
.storelocatorlink {
	text-transform: uppercase !important;
}
span.slp_result_citystatezip {
    display: inline !important;
}
div#map_sidebar .results_row_right_column, div#slpw_resultsbox .results_row_right_column {
	display: block !important;
	text-transform: uppercase;
}

/* Reset .results_entry's float/absolute layout and use a clean grid for its columns */
.results_entry {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: start;
	position: relative !important;
}
.results_entry .results_row_left_column,
.results_entry .results_row_center_column,
.results_entry .results_row_right_column {
	float: none !important;
	position: static !important;
	display: block !important;
	width: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	vertical-align: top;
}
@media only screen and (max-width: 767px) {
	.results_entry { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
 * WP Maps Pro infowindow — strip everything except the title and
 * inject Order Online + Location Details actions (matches listing).
 * ────────────────────────────────────────────────────────────────── */
.wpgmp_infowindow {
	padding-top: 0 !important;
}
.wpgmp_infowindow .ws-map-infowindow,
.wpgmp_infowindow .fc-item-featured_image,
.wpgmp_infowindow address {
	display: none !important;
}
.wpgmp_infowindow > .fc-item-title,
.wpgmp_infowindow > .ws-infowindow__actions {
	display: block !important;
}
.wpgmp-map-7 .wpgmp_infowindow .fc-item-title {
	font-family: var(--ws-font-heading) !important;
	font-weight: var(--ws-fw-black) !important;
	font-size: var(--ws-fs-h4) !important;
}
.wpgmp_infowindow .fc-item-title .fc-infobox-categories {
	display: none !important;
}
.wpgmp_infowindow .ws-infowindow__actions {
	display: flex !important;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

/* Hide the InfoWindow entirely on mobile. On phones a pin tap is wired
 * (in custom.js) to navigate straight to the location details page — same
 * destination as tapping the listing card — so the popup adds no value
 * and was rendering as a broken thin strip anyway (Google's auto-sizing
 * + our `display: none` on most IW content + WPGMP's 80% max-width all
 * combined badly). CSS handles the race where the IW briefly tries to
 * paint before our click handler runs `infowindow.close()`. */
@media (max-width: 959px) {
	.ws-page-map .gm-style-iw,
	.ws-page-map .gm-style-iw-a,
	.ws-page-map .gm-style-iw-t,
	.ws-page-map .gm-style-iw-c,
	.ws-page-map .gm-style-iw-d {
		display: none !important;
	}
}

/* Cookie notice button — use brand heading font instead of the plugin
 * default. `:not(.cn-button-custom)` skips author-customized buttons. */
#cookie-notice .cn-button:not(.cn-button-custom) {
	font-family: var(--ws-font-heading);
}

/* ──────────────────────────────────────────────────────────────────
 * Pagination — brand pill replacement for theme.css:1440's legacy
 * `.page-numbers a, .page-numbers span` rule.
 *
 * Two things to watch for:
 *   1. WP often wraps the links in `<ul class="page-numbers">`, so we
 *      have to reset that outer list explicitly or it gets pill styling
 *      too (the "outer oval" in the screenshot bug).
 *   2. theme.css uses `.page-numbers a` / `.page-numbers span` (0,2,0
 *      specificity) which beats a bare `.page-numbers` rule. Doubling
 *      `.page-numbers.page-numbers` bumps us to 0,2,0 — equal, so
 *      source-order wins and our radius / colors stick.
 * ────────────────────────────────────────────────────────────────── */
ul.page-numbers {
	list-style: none;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}
ul.page-numbers > li,
ul.page-numbers > li:last-child,
ul.page-numbers > li:first-child {
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: 999px;
}


a.page-numbers.page-numbers,
span.page-numbers.page-numbers,
strong.page-numbers.page-numbers,
.page-numbers a,
.page-numbers span,
.page-numbers strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px !important;
	padding: 0 12px !important;
	margin: 0 4px;
	border: 0;
	border-radius: 999px;
	background: var(--ws-white);
	color: var(--ws-charcoal);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 13px !important;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	transition: background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
}
/* When wrapped in a ul, the items don't need the horizontal margin —
 * the flex `gap` already spaces them. */
ul.page-numbers a.page-numbers,
ul.page-numbers span.page-numbers,
ul.page-numbers strong.page-numbers,
ul.page-numbers .page-numbers a,
ul.page-numbers .page-numbers span,
ul.page-numbers .page-numbers strong {
	margin: 0;
}
a.page-numbers.page-numbers:hover,
a.page-numbers.page-numbers:focus,
.page-numbers a:hover,
.page-numbers a:focus,
span.page-numbers.current,
strong.page-numbers.current,
.page-numbers .current,
.page-numbers.current.page-numbers {
	background: var(--ws-red);
	border-color: var(--ws-red);
	color: var(--ws-white);
	text-decoration: none;
}
.page-numbers.dots.page-numbers,
.page-numbers .dots {
	border: 0;
	background: transparent;
	min-width: auto;
}
.page-numbers.prev.page-numbers,
.page-numbers.next.page-numbers,
.page-numbers .prev,
.page-numbers .next {
	padding: 0 16px !important;
	font-weight: var(--ws-fw-extrabold);
	/* The chevron is a Font Awesome <i> rendered as a flex sibling to the
	 * label text. Flex strips the whitespace between children, so we use
	 * `gap` to space the icon from the word. */
	gap: 6px;
}

/* ──────────────────────────────────────────────────────────────────
 * Tag cloud (sidebar widget) — replace WP's auto-sized inline links
 * with uniform brand pills. The `!important` on `font-size` beats the
 * inline `style="font-size: 8pt;"` WordPress emits per tag based on
 * tag popularity (we want all tags visually equal).
 * ────────────────────────────────────────────────────────────────── */
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
}
#main .tagcloud a.tag-cloud-link,
.tagcloud a.tag-cloud-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 14px;
	margin: 0;
	border: 1px solid var(--ws-light-gray);
	border-bottom: 1px solid var(--ws-light-gray);
	border-radius: 999px;
	background: var(--ws-white);
	color: var(--ws-charcoal);
	font-family: var(--ws-font-heading);
	font-weight: var(--ws-fw-bold);
	font-size: 12px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
}
#main .tagcloud a.tag-cloud-link:hover,
#main .tagcloud a.tag-cloud-link:focus,
.tagcloud a.tag-cloud-link:hover,
.tagcloud a.tag-cloud-link:focus {
	background: var(--ws-red);
	border-color: var(--ws-red);
	color: var(--ws-white);
	text-decoration: none;
}

/* ── Tracking ── */
.tracking {
	position: fixed;
	bottom: 0;
	left: 0;
}

/* ------------------------------------------------------------------
 * Print styles — hide chrome/UI bits we never want on paper.
 * !important needed to beat .ws-btn's "display: inline-flex !important".
 * ------------------------------------------------------------------ */
@media print {
	.ws-topbar,
	.ws-footer__legal,
	#print-coupon {
		display: none !important;
	}
}




/* ------------------------------------------------------------------
 * Grocery Products Page styles
 * ------------------------------------------------------------------ */
            .page-id-25672 .fc-feature-img img {
                max-height: 30px;
                width: auto !important;
            }

            .page-id-25672 .vcex-post-type-entry {
                margin-bottom: 10px !important;
            }

            .page-id-25672 .vcex-post-type-entry-media {
                background: rgb(252 249 240);
            }

            .page-id-25672 .vcex-post-type-entry-media a {
                position: relative;
                /* needed for ::after positioning */
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 50px 30px 100px;
                text-decoration: none;
            }

            .page-id-25672 .vcex-post-type-entry-media img {
                display: block;
                max-width: 450px;
            }

            .page-id-25672 .vcex-post-type-entry-media a::after {
                content: "";
                display: flex;
                position: absolute;
                bottom: 5%;
                width: 50%;
                height: 7px;
                background: rgba(0, 0, 0, 0.15);
                border-radius: 50%;
                filter: blur(5px);
            }

            .page-id-25672 .vcex-post-type-entry-details {
                border: 0;
            }

            .page-id-25672 .vcex-post-type-grid h2::before {
                content: "Wienerschnitzel";
                display: block;
                margin-bottom: 20px;
                font-size: 1.8rem;
                text-transform: uppercase;
            }

         





            .page-id-25672 .caroufredsel_wrapper img {
                max-width: 178px;
            }

            .page-id-25672 .caroufredsel_wrapper .vcex-caroufredsel-entry-media {
                display: flex;
                justify-content: center;
            }

            .page-id-25672 .categories_filter {
                display: none;
            }

            .page-id-25672 .gp-cta {
                display: inline-block;
                margin-top: 10px;
                padding: 5px 15px;
                background: #ED1B2D;
                color: var(--color-cta-text, #fff);
                font-weight: 800;
                line-height: 1;
                text-decoration: none !important;
                transition: background-color .2s ease, transform .05s ease;
            }

            .page-id-25672 .gp-cta:hover {
                background: #000;
                color: #fff;
            }

            .page-id-25672 .gp-cta:active {
                transform: translateY(1px);
            }

            .single-post #content-wrap {
                padding-top: 16px;
            }

            .page-id-25672 .gp-cta-label {
                font-size: 1.55rem;
                white-space: nowrap;
            }

/* Social share "Share This" heading — match the redesign style guide
   (Nunito extra-bold uppercase h3) and strip Total's default theme-heading
   border-bottom underline. */
.social-share-title,
h3.social-share-title,
.social-share-title.theme-heading,
.social-share-title.border-bottom {
	font-family: var(--ws-font-heading);
	font-size: var(--ws-fs-h3);
	font-weight: var(--ws-fw-extrabold);
	color: var(--ws-black);
	text-transform: uppercase;
	margin: 0 0 12px;
	padding-bottom: 0;
	border-bottom: 0;
	background: none;
}

.social-share-wrapper {
	margin-top: 40px;
}
/* Hide the wrapper when wpex_social_share() renders nothing.
 * The PHP template leaves whitespace inside the div, so `:empty` won't match —
 * use `:not(:has(*))` to catch wrappers with no element children. */
.social-share-wrapper:not(:has(*)) { display: none; }

/* WPBakery text separator (.vc_text_separator) — render as "rule + text + rule"
   instead of the plugin's default "rule above text" treatment. Targets the
   centred variant most pages use; the markup is:
       <h3 class="vc_text_separator …"><span>Heading<br></span></h3>            */
.vc_text_separator.separator_align_center {
	display: flex !important;
	align-items: center;
	gap: 16px;
	border: 0 !important;          /* drop plugin's border-* on the h3 */
	background: none !important;
	margin: 30px 0 20px;
}
.vc_text_separator.separator_align_center::before,
.vc_text_separator.separator_align_center::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
}
.vc_text_separator.separator_align_center > span {
	flex: 0 0 auto;
	border: 0 !important;          /* defeat .vc_text_separator_two span etc. */
	background: none !important;
	padding: 0;
	white-space: nowrap;
}
.vc_text_separator.separator_align_center > span br { display: none; }  /* the markup ships a trailing <br> that would push the span tall */
/* ==================================================================
 * Accessibility overrides (SortSite / WCAG 2.1 AA site audit 2026-07)
 * Companion runtime fixes live in js/accessibility.js.
 * ================================================================== */

/* WCAG 1.4.3 — Total's share buttons color their text with each network's
 * brand color; Facebook (4.23:1), SMS (2.68:1) and Reddit (3.45:1) fall
 * short of 4.5:1 on white. Darkened to the nearest passing shade. */
.wpex-facebook { --wpex-brand-color: #1465D8; }  /* 5.41:1 */
.wpex-sms      { --wpex-brand-color: #0C7BB4; }  /* 4.66:1 */
.wpex-reddit   { --wpex-brand-color: #D93900; }  /* 4.63:1 */

/* WCAG 1.4.3 — WP Maps Pro pagination renders dim gray links over its
 * #DD3333 red (1.89:1). White text on that red is 4.57:1. */
.wpgmp_pagination a,
.wpgmp_pagination span.current {
	color: #fff !important;
	text-decoration: underline;
}
.wpgmp_pagination span.current { text-decoration: none; }

/* WCAG 1.4.3 — WPBakery rows saved with the old #ED1B2E background hold
 * dark body text (3.68:1) and can't be recolored in content without a DB
 * edit. Force the accessible red + white text on any such row. */
.vc_row[style*="ed1b2e" i],
.vc_row[style*="rgb(237, 27, 46)"],
.vc_row[style*="rgb(237,27,46)"] {
	background-color: #DC1B2E !important;
	color: #fff;
}
.vc_row[style*="ed1b2e" i] :where(p, strong, em, span, li, h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

/* WCAG 1.4.1 / F73 — links inside blog post copy were distinguishable by
 * color only. Underline them (buttons and image links opt back out). */
body.single-post .entry a:not(.ws-btn):not(.theme-button):not(.vcex-button),
body.single-post .single-content a:not(.ws-btn):not(.theme-button):not(.vcex-button) {
	text-decoration: underline;
}
body.single-post .entry a:has(img),
body.single-post .single-content a:has(img) { text-decoration: none; }

/* Utility for js/accessibility.js — visually hidden, still read by AT. */
.ws-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}