/* =========================================================================
   Fishkill Cannabis WP site: Header + Footer (Theme Builder templates)
   Structure lives in Elementor; precise spacing/type/color lives here,
   keyed to the fk-header__* / fk-footer__* classes on those templates.
   Reuses the fk-tokens.css utility classes (text-gold, text-sage,
   text-moss, btn-gold, text-outline-gold) already ported verbatim from
   the reference, so colors always match the single source of truth.
   ========================================================================= */

/* ===== Header ===== */
/* Every Elementor container wraps its real children in a nested
   .e-con-inner div, which is the actual flex context, not the outer .e-con
   the css_classes control lands on. Force row on both levels rather than
   trust inheritance, and zero out Elementor's default per-widget
   margin-bottom (added to every widget that isn't literally :last-child),
   which was pushing header content taller than its fixed box and letting
   the CTA spill down into the hero underneath. */
.fk-header, .fk-header .e-con-inner,
.fk-header__inner, .fk-header__inner .e-con-inner,
.fk-header__brand, .fk-header__brand .e-con-inner,
.fk-header__nav-wrap, .fk-header__nav-wrap .e-con-inner,
.fk-header__actions, .fk-header__actions .e-con-inner,
.fk-header__toggle-wrap, .fk-header__toggle-wrap .e-con-inner{flex-direction:row !important;}
.fk-header .elementor-widget{margin-bottom:0 !important;}

/* Elementor prints --width:100% on every .e-con.e-child by default. With
   identical flex-basis/shrink across the header's row siblings (brand /
   nav-wrap / actions, and one level deeper brand-logo vs brand-text), the
   browser divided the row EQUALLY instead of by actual content need: the
   logo was squeezed to a non-square width, the 7-link nav wrapped onto two
   lines even at 1440px (doubling the header's height), and at mobile widths
   the brand/actions pair did the same thing one level down, which also
   squeezed the mobile-menu toggle's own flex box into a narrow sliver.
   Force every header-row child that must hug its own content to size
   naturally instead of splitting the row evenly. */
.fk-header__brand,
.fk-header__brand-text-wrap,
.fk-header__nav-wrap,
.fk-header__actions,
.fk-header__toggle-wrap{
  --width:auto !important;
  width:auto !important;
  max-width:none !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
  flex-basis:auto !important;
}
/* Elementor's default container also prints 10px top+bottom padding-block
   (--padding-block-start/-end) on the outer .fk-header > .e-con-inner, which
   isn't covered by .fk-header__inner's own fixed height (that inner box sits
   INSIDE the padded box), so the fixed header rendered 21px taller than its
   visible content at every breakpoint (101px/85px instead of the intended
   80px/64px) and hid that much extra page content behind itself. */
.fk-header > .e-con-inner{--padding-block-start:0 !important;--padding-block-end:0 !important;padding-block:0 !important;}

.fk-header{position:fixed;inset-inline:0;top:0;z-index:50;border-bottom:1px solid var(--fk-border);background:rgba(20,21,23,.85);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);}
.fk-header__inner{display:flex;align-items:center;justify-content:space-between;height:4rem;padding-inline:1rem;overflow:visible;}
/* justify-content on the OUTER .fk-header__inner (.e-con) has no effect on
   its own children's layout -- the real flex context Elementor lays them out
   in is the nested .e-con-inner one level deeper. Without this, brand and
   actions just packed left instead of splitting to opposite edges, so at
   mobile widths (where nav-wrap is display:none and only 2 items remain) the
   hamburger button sat left-of-center instead of pinned to the right edge. */
.fk-header__inner .e-con-inner{display:flex !important;align-items:center !important;justify-content:space-between !important;}
.fk-header__inner, .fk-header__inner .e-con-inner{margin-inline:auto;max-width:80rem;}
@media (min-width:640px){.fk-header__inner{height:5rem;padding-inline:2rem;}}
@media (min-width:1024px){.fk-header__inner{padding-inline:4rem;}}

.fk-header__brand{display:flex;align-items:center;gap:.75rem;}
.fk-header__brand img{height:2.5rem;width:2.5rem;object-fit:contain;display:block;}
@media (min-width:640px){.fk-header__brand img{height:3rem;width:3rem;}}
.fk-header__brand-text-wrap{display:none;}
@media (min-width:768px){.fk-header__brand-text-wrap{display:block;}}
.fk-header__brand-text-wrap p{margin:0;font-family:var(--fk-font-display);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.3em;color:var(--fk-offwhite);}

.fk-header__nav-wrap{display:none;min-width:0;}
@media (min-width:1024px){.fk-header__nav-wrap{display:block;}}
/* flex-wrap on the nav itself is a safety net: individual links never
   break mid-word (white-space:nowrap on the <a>), but if the full set
   still doesn't fit a single line at some width, whole links flow onto a
   second line inside the nav's own box instead of overflowing past it
   into the CTA next door (the actual bug reported: nav's flex box was
   being shrunk below its children's combined min-content width, and with
   nowrap on the links that overflow had nowhere to go but visually out
   over the neighbouring flex item). */
.fk-header__nav{display:flex;flex-wrap:wrap;row-gap:.375rem;align-items:center;justify-content:flex-end;gap:.85rem;min-width:0;}
/* Navbar.jsx's nav-link classes (text-[13px] tracking-[0.18em]) are flat,
   not responsive: the reference never gates these behind a wider desktop
   breakpoint, so the previous 1680px-only upgrade left every normal desktop
   width (1440, 1920, ...) rendering 12px/.12em instead of the reference's
   13px/.18em. */
.fk-header__nav a{font-family:var(--fk-font-display);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;text-decoration:none;white-space:nowrap;transition:color .3s;}
.fk-header__brand, .fk-header__actions{flex-shrink:0;}
.fk-header__nav a.is-active{color:var(--fk-gold);}
.fk-header__nav a:not(.is-active){color:var(--fk-sage);}
.fk-header__nav a:not(.is-active):hover{color:var(--fk-offwhite);}
/* Theme reset.css ships a bare a{color:#c36} plus a:active,a:hover{color:...}
   fallback for any unstyled anchor. Base/hover were already covered above,
   but :active/:focus/:visited were not, so a tap/click could still fall
   through to the theme default. Re-assert explicitly for every state. */
.fk-header__nav a:active,.fk-header__nav a:focus,.fk-header__nav a:visited{color:var(--fk-sage);}
.fk-header__nav a.is-active:active,.fk-header__nav a.is-active:focus,.fk-header__nav a.is-active:visited{color:var(--fk-gold);}

.fk-header__actions{display:flex;align-items:center;gap:.5rem;}
/* Same flat-not-responsive correction as the nav links: Navbar.jsx's CTA is
   text-[13px] tracking-[0.18em] px-5 py-2.5 from the moment it becomes
   visible (sm:inline-flex), never gated behind a second, wider breakpoint. */
.fk-header__cta{display:none;align-items:center;gap:.375rem;border-radius:9999px;padding:.625rem 1.25rem;font-family:var(--fk-font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;text-decoration:none;white-space:nowrap;}
@media (min-width:640px){.fk-header__cta{display:inline-flex;}}
.fk-header__cta svg{height:1rem;width:1rem;flex-shrink:0;}

.fk-header__toggle{display:inline-flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--fk-border-subtle);color:var(--fk-offwhite);background:transparent;cursor:pointer;padding:0;}
/* The parent hello-elementor theme's reset.css ships a generic
   button:hover,button:focus{background-color:#c36;color:#fff} fallback for
   any unstyled <button>. It's higher-specificity than a bare
   .fk-header__toggle base rule for the hover/focus STATE (element+pseudo
   beats a single class), so every tap/click/keyboard-focus on the mobile
   hamburger flashed the whole circle solid hot pink before this override. */
.fk-header__toggle:hover,.fk-header__toggle:focus{background-color:transparent;color:var(--fk-offwhite);}
@media (min-width:1024px){.fk-header__toggle-wrap{display:none;}}
.fk-header__toggle svg{height:1.25rem;width:1.25rem;}

/* The drawer widget's HTML lives inside .fk-header__toggle-wrap alongside
   the toggle button itself, so as a normal flow child it inherited that
   wrapper's own (now content-sized, ~2.5rem-wide) flex box: a narrow
   floating sliver docked under the toggle instead of a full-width panel.
   Detach it from that box and pin it under the fixed header instead. */
.fk-header__toggle-wrap{position:relative;}
.fk-mobile-nav{position:fixed;top:4rem;left:0;right:0;width:100%;z-index:49;overflow:hidden;max-height:0;border-top:0 solid var(--fk-border);background:var(--fk-bg);transition:max-height .4s cubic-bezier(.16,1,.3,1);}
@media (min-width:640px){.fk-mobile-nav{top:5rem;}}
@media (min-width:1024px){.fk-mobile-nav{display:none;}}
.fk-mobile-nav.is-open{max-height:32rem;border-top-width:1px;}
.fk-mobile-nav__inner{display:flex;flex-direction:column;gap:.25rem;padding:1.5rem;}
.fk-mobile-nav a{padding-block:.625rem;font-family:var(--fk-font-display);font-size:1.125rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;text-decoration:none;color:var(--fk-offwhite);}
.fk-mobile-nav a.is-active{color:var(--fk-gold);}
.fk-mobile-nav a:active,.fk-mobile-nav a:focus,.fk-mobile-nav a:visited{color:var(--fk-offwhite);}
.fk-mobile-nav a.is-active:active,.fk-mobile-nav a.is-active:focus,.fk-mobile-nav a.is-active:visited{color:var(--fk-gold);}
.fk-mobile-nav__cta{margin-top:1rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;padding:.875rem 1.5rem;font-family:var(--fk-font-display);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;}
.fk-mobile-nav__cta svg{height:1rem;width:1rem;}

/* Page content must clear the fixed header. */
body{padding-top:4rem;}
@media (min-width:640px){body{padding-top:5rem;}}

/* ===== Footer ===== */
/* Same nested .e-con-inner + default widget margin fix as the header. */
.fk-footer__brand-row, .fk-footer__brand-row .e-con-inner{flex-direction:row !important;}
.fk-footer .elementor-widget{margin-bottom:0 !important;}

.fk-footer{border-top:1px solid var(--fk-border);background:var(--fk-bg);}
/* Both .fk-footer (outer e-parent) and .fk-footer__inner (nested e-child)
   are Elementor "boxed" containers. Elementor's own frontend.css defines
   .e-con>.e-con-inner{max-width:var(--content-width)} where --content-width
   defaults to min(100%, var(--container-max-width, 1140px)) on EVERY .e-con
   unless overridden. Since this Kit's container width was never customized,
   both nested boxed containers were silently clamping to Elementor's factory
   1140px instead of the reference's 1280px (max-w-7xl), which shrank the
   wordmark, 3-col grid and bottom bar uniformly. Overriding --content-width
   directly (rather than fighting max-width, which loses to Elementor's own
   width:var(--width) on the same element) fixes it at every breakpoint,
   since min(100%, 80rem) still correctly clamps to 100% below 1280px. */
.fk-footer, .fk-footer__inner{--content-width:80rem;}
.fk-footer__inner{margin-inline:auto;max-width:80rem;padding:4rem 1rem;}
@media (min-width:640px){.fk-footer__inner{padding-inline:2rem;padding-block:5rem;}}
@media (min-width:1024px){.fk-footer__inner{padding-inline:4rem;}}

/* tracking-tight in the reference is -0.025em, not -0.02em. */
.fk-footer__wordmark{margin:0;text-align:center;user-select:none;font-family:var(--fk-font-display);font-size:13vw;font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.025em;}
@media (min-width:1024px){.fk-footer__wordmark{font-size:8.5rem;}}

.fk-footer__cols{margin-top:3.5rem;}
/* Same nested .e-con-inner gotcha as the header/brand-row fixes above:
   .fk-footer__cols is the outer .e-con, but its 3 column containers
   (brand/explore/visit) are children of the inner .e-con-inner div Elementor
   generates one level deeper (frontend.css: .e-con>.e-con-inner{display:
   var(--display)}, and this element's own generated rule sets --display:flex,
   defaulting --flex-direction to column). Setting display:grid on the outer
   .fk-footer__cols alone only grids its single .e-con-inner child (no visible
   effect); the actual 3 columns kept stacking because .e-con-inner itself was
   still a column flex box. Target .e-con-inner directly, matching Elementor's
   own two-class specificity so this wins on cascade order. */
.fk-footer__cols > .e-con-inner{display:grid;grid-template-columns:1fr;gap:2.5rem;}
@media (min-width:768px){.fk-footer__cols > .e-con-inner{grid-template-columns:repeat(3,1fr);}}

.fk-footer__brand-row{display:flex;align-items:center;gap:.75rem;}
.fk-footer__brand-row img{height:3rem;width:3rem;object-fit:contain;}
.fk-footer__brand-row p{margin:0;font-family:var(--fk-font-display);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.25em;}
.fk-footer__tagline{margin-top:1.25rem;max-width:20rem;font-size:.875rem;line-height:1.625;}
/* text-xs in the reference is a flat 1rem line-height (Tailwind default),
   not a ratio: without an explicit override these were inheriting the
   theme's global 1.5 line-height (18px instead of 16px). */
.fk-footer__menu-link{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.375rem;font-family:var(--fk-font-display);font-size:.75rem;line-height:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;}
.fk-footer__menu-link:hover{color:var(--fk-gold-light);}
.fk-footer__menu-link svg{height:1rem;width:1rem;}
.fk-footer__eyebrow{margin:0;font-family:var(--fk-font-mono);font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.3em;}
/* These two lists are raw-HTML Elementor widgets, not text-editor widgets,
   so they never receive Elementor's per-widget Kit-typography font-family
   rule the way the other footer text does. Without their own explicit
   font-family they fall through to the theme's actual body font (Hello
   Elementor's reset.css system-font stack, not Outfit), and the reset
   stylesheet's own bare `a{color:#c36}` rule also beats plain inheritance
   for any anchor that doesn't set its own color. text-sm in the reference
   is a flat 1.25rem line-height. */
.fk-footer__links{margin-top:1.25rem;list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.fk-footer__links a{font-family:var(--fk-font-body);font-size:.875rem;line-height:1.25rem;text-decoration:none;transition:color .3s;}
.fk-footer__links a:hover{color:var(--fk-gold);}
.fk-footer__visit{margin-top:1.25rem;list-style:none;padding:0;display:flex;flex-direction:column;gap:1rem;font-family:var(--fk-font-body);font-size:.875rem;line-height:1.25rem;color:var(--fk-sage);}
.fk-footer__visit li{display:flex;align-items:flex-start;gap:.75rem;}
.fk-footer__visit svg{margin-top:.125rem;height:1rem;width:1rem;flex-shrink:0;color:var(--fk-gold);}
.fk-footer__visit a{color:var(--fk-sage);text-decoration:none;transition:color .3s;}
.fk-footer__visit a:hover{color:var(--fk-gold);}

.fk-footer__bottom{margin-top:3.5rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--fk-border);padding-top:2rem;}
@media (min-width:640px){.fk-footer__bottom{flex-direction:row;}}
.fk-footer__bottom p{margin:0;font-size:.75rem;}
/* The copyright line is plain text-xs (1rem line-height); only the legal
   line is leading-relaxed. Scoped with :not() so it can't touch .fk-footer__legal. */
.fk-footer__bottom p:not(.fk-footer__legal){line-height:1rem;}
.fk-footer__legal{text-align:center;line-height:1.625;}
@media (min-width:640px){.fk-footer__legal{text-align:right;}}

/* ===== Footer vertical-gap fix (fk-footer-gap-fix, 2026-09-13) =====
   Same mechanism already documented/fixed on the Shop page this session:
   every one of these footer .e-con-boxed containers is a plain
   flex-column stack where the reference (Footer.jsx) spaces children
   with explicit margin-top classes only (mt-5, mt-6, mt-14 -- ported
   above as .fk-footer__tagline/.fk-footer__menu-link/.fk-footer__cols/
   .fk-footer__bottom margin-top rules) and never relies on a flex gap
   for these particular wrappers -- confirmed directly against Footer.jsx,
   which has NO gap class at all on the outer content div or any of the 3
   column divs (brand/explore/visit). Elementor's own CSS resets gap to
   "initial" on the outer .e-con-boxed element itself; the boxed layout's
   real flex/gap behaviour lives on its nested .e-con-inner wrapper
   instead (.e-con>.e-con-inner{gap:var(--row-gap) var(--column-gap)}),
   which for these 4 containers had no per-element override in the page
   JSON and so fell back to Elementor's Kit-level "Widgets Space" default
   (20px) stacking ON TOP of the correct margin-top spacing already in
   place -- e.g. wordmark-to-cols and cols-to-bottom each rendered 76px
   apart (56px margin + 20px stray gap) instead of the reference's 56px.
   .elementor-element-000001e = .fk-footer__inner (outer stack: wordmark /
     .fk-footer__cols / .fk-footer__bottom)
   .elementor-element-0000013 = .fk-footer__col-brand (logo+text row /
     tagline / "Browse the live menu" link)
   .elementor-element-0000016 = .fk-footer__col-explore (eyebrow / links ul)
   .elementor-element-0000019 = .fk-footer__col-visit (eyebrow / visit ul)
   No breakpoint variance in the reference for any of the 4 -- confirmed
   universal (not mobile-only) across 375px and 1440px. */
.elementor-117 .elementor-element.elementor-element-000001e > .e-con-inner,
.elementor-117 .elementor-element.elementor-element-0000013 > .e-con-inner,
.elementor-117 .elementor-element.elementor-element-0000016 > .e-con-inner,
.elementor-117 .elementor-element.elementor-element-0000019 > .e-con-inner {
	gap: 0;
}

/* .fk-footer__bottom (elementor-element-000001d) already carries an
   explicit gap:1rem above, matching the reference's real "gap-4" (this
   row genuinely uses a flex gap, not margins) -- but per the same
   e-con-boxed gotcha, that declaration lands on the OUTER .e-con, whose
   only child is its own .e-con-inner, so it never reaches the real flex
   context and was a no-op; the actual copyright/legal row was rendering
   at Elementor's 20px default instead of the intended 16px. Re-target the
   same 1rem value at the nested .e-con-inner where the real flex box is. */
.elementor-117 .elementor-element.elementor-element-000001d > .e-con-inner {
	gap: 1rem;
}

/* .fk-footer__brand-row (elementor-element-0000010) already carries an
   explicit gap:.75rem above (line ~185), matching the reference's real
   "gap-3" between the logo and the wordmark text -- but it is also an
   e-con-boxed container, so the same nesting gotcha applies: that
   declaration lands on the OUTER .e-con (single child = its own
   .e-con-inner), never reaching the real flex box one level deeper, which
   was left at Elementor's 20px default. Re-target the same .75rem value
   at the nested .e-con-inner where logo+text actually lay out. */
.elementor-117 .elementor-element.elementor-element-0000010 > .e-con-inner {
	gap: .75rem;
}

/* === FK-HF-BUGFIX-R10 START (final pixel sweep, 2026-09-13) === */
/* Measured live against the reference app (which is directly reachable, without the
   nested cross-origin preview iframes, at fishkill-modern.preview.static.emergentagent.com).

   The reference's page container model, derived by measuring the gutter at four
   breakpoints, is: a full-width wrapper carrying horizontal gutters of
   16px (<640) / 32px (640-1023) / 64px (>=1024), containing a max-width:1152px
   (Tailwind max-w-6xl) block centred with margin auto. That reproduces the measured
   content left edge exactly: 1440->144, 1024->64, 768->32, 320->16, 2560->704.

   BUG 1, header content inset + right-edge overflow.
   The built header inverts that model: Elementor caps `.fk-header > .e-con-inner`
   at its default content width of 1140px, and THEN `.fk-header__inner` adds
   `padding: 0 64px` INSIDE that cap. Net effect measured at 1440: header content ran
   214..1226 instead of 144..1296 (logo x=224 vs 144, SHOP MENU CTA right inset 206 vs 144).
   At 1024 it was worse than cosmetic: the CTA's right edge computed to 1094 against a
   1024 viewport, i.e. the button overflowed the viewport by 70px (right inset -70 vs +64).
   Fix: move the gutters onto `.fk-header` and the 1152 cap onto `.e-con-inner`, and
   drop the double-counted 64px padding from `.fk-header__inner`. */
.fk-header {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
.fk-header > .e-con-inner {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fk-header__inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
@media (max-width: 1023px) {
  .fk-header { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 639px) {
  .fk-header { padding-left: 16px !important; padding-right: 16px !important; }
}

/* BUG 2, header nav item spacing.
   `.fk-header__nav` computed `gap: 13.6px` (0.85rem). The reference's nav gap measures
   exactly 28px at both 1024 and 1440: its 7 items sum to 435px inside a 603px nav,
   leaving 168px across 6 gaps = 28px each. */
.fk-header__nav {
  gap: 28px !important;
}

/* BUG 3, footer column alignment.
   `.fk-footer__cols` (the 3-column grid) and each `.fk-footer__col-*` child carried
   Elementor's default 10px horizontal container padding. That made the grid row 1132px
   wide starting at x=154 instead of 1152px at x=144, which shrank each of the 3 equal
   tracks from 357.33px to 350.66px and then pushed each column's content in by a further
   10px. Measured content left edges at 1440 were 164 / 555 / 945 against the reference's
   144 / 541 / 939 (the third column's link sits 28px into its track behind a map-pin icon
   on both sites, which is why the reference address link measures 967 = 939 + 28).
   Zeroing both paddings restores the row to 144..1296 and the tracks to 357.33px, which
   lands the three columns on 144 / 541.33 / 938.67 - the reference values exactly. */
.fk-footer__cols,
.fk-footer__col-brand,
.fk-footer__col-explore,
.fk-footer__col-visit {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* === FK-HF-BUGFIX-R10 END === */

/* === FK-HF-BUGFIX-R11 START (final pixel sweep, follow-up to R10) === */
/* R10 moved the header/footer onto the reference's 1152px container model and fixed the
   gross offsets. Re-measuring live at 1440 afterwards left two residuals, both the same
   root cause as R10 (Elementor's own defaults re-entering one level further down):

   RESIDUAL 1, header edge inset off by exactly 10px.
   `.fk-header__inner` now spans the correct 144..1296, but its direct children
   `.fk-header__brand` and `.fk-header__actions` are themselves `e-con-boxed` containers
   and still carried Elementor's default 10px horizontal container padding. Measured at
   1440 after R10: logo x=154 (want 144) and SHOP MENU CTA right inset 154 (want 144).
   Only the two edge containers are reset here, and only on the edge side:
   `.fk-header__brand-text-wrap` is deliberately left alone because its padding is what
   spaces the wordmark off the logo mark, and `.fk-header__nav-wrap` is left alone
   because the nav's position is set by the flex row's distribution, not by this padding. */
.fk-header__brand {
  padding-left: 0 !important;
}
.fk-header__actions {
  padding-right: 0 !important;
}

/* RESIDUAL 2, footer column grid still on Elementor's 1140px content width.
   R10 zeroed the padding on `.fk-footer__cols` and its three column children, but the
   actual 3-column grid lives on `.fk-footer__cols > .e-con-inner`, which was still
   capped at `min(100%, 1140px)`. Measured at 1440 after R10: grid x=150 w=1140 with
   tracks of 353.33px, putting the columns at 150 / 543 / 937 against the reference's
   144 / 541 / 939. Lifting that cap to the reference's 1152px re-centres the grid on
   144..1296 and widens each track to (1152-80)/3 = 357.33px, which lands the three
   columns on exactly 144 / 541.33 / 938.67. (The third column's address link sits a
   further 28px into its track behind a map-pin icon on BOTH sites, which is why the
   reference's address link measures 967 = 938.67 + 28.) */
.fk-footer__cols > .e-con-inner {
  max-width: 1152px !important;
}
/* === FK-HF-BUGFIX-R11 END === */

/* === FK-HF-BUGFIX-R12 START (corrects R10/R11's header approach) === */
/* R10 replaced this file's header container model with a 1152px cap of its own. That was
   the wrong call and R12 supersedes it. Re-reading this file showed the ORIGINAL model
   was already correct and matched the reference exactly:
       .fk-header__inner { margin-inline:auto; max-width:80rem (1280px);
                           padding-inline:1rem / 2rem @640 / 4rem @1024 }
   1280 - (2 x 64) = 1152 content at >=1024, centred. That yields a content box of
   144..1296 at 1440, 64..960 at 1024, 32..736 at 768 and 16..304 at 320 - the reference's
   measured gutters at every breakpoint, including 704 at 2560.
   The ONLY thing breaking it was Elementor clamping `.fk-header > .e-con-inner` to its
   Kit content width of `min(100%, 1140px)`, which constrained the whole header to 1140
   BEFORE .fk-header__inner's own model could apply (hence the measured logo x=224 and
   CTA right inset 206 at 1440). So release the clamp and restore the original padding
   rather than overriding it. */
.fk-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.fk-header > .e-con-inner {
  max-width: 100% !important;
}
.fk-header__inner {
  max-width: 80rem !important;
  margin-inline: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 640px) {
  .fk-header__inner { padding-left: 2rem !important; padding-right: 2rem !important; }
}
@media (min-width: 1024px) {
  .fk-header__inner { padding-left: 4rem !important; padding-right: 4rem !important; }
}

/* Edge containers must hug the gutter. `.fk-header__brand` / `.fk-header__actions` are
   `e-con-boxed` and carry Elementor's default 10px horizontal padding, which put the logo
   at 154 and the CTA's right edge at 1286 instead of 144 / 1296 at 1440. The brand text
   wrapper's horizontal padding is also removed: it contributes 20px of width the
   reference does not have (reference brand block measures 208px wide at 1024: a 48px
   logo mark, a 12px gap, and a 148px wordmark). */
.fk-header__brand { padding-left: 0 !important; }
.fk-header__actions { padding-right: 0 !important; }
.fk-header__brand-text-wrap { padding-left: 0 !important; padding-right: 0 !important; }

/* Nav gap. The reference's nav gap measures exactly 28px (its 7 items sum to 435px in a
   603px nav at 1440: 435 + 6x28 = 603). This file shipped `gap:.85rem` (13.6px), which is
   wrong at desktop widths. It is corrected ONLY at >=1280px, where the header has room:
   at 1440 the content box is 1152 and the row needs brand 268 + nav 603 + CTA 156 = 1027,
   leaving 125px of slack. Below 1280 the tighter original gap is deliberately preserved,
   because at 1024 the content box is only 896px and the row already does not fit (see the
   flagged note in the audit report) - widening the gap there pushed the SHOP MENU CTA
   completely off-screen, which R10 did and this rule undoes. */
@media (min-width: 1280px) {
  .fk-header__nav { gap: 28px !important; }
}
/* === FK-HF-BUGFIX-R12 END === */

/* === FK-HF-BUGFIX-R13 START (completes R12) === */
/* FIX 1, nav gap must not widen below 1280.
   R10 set `.fk-header__nav{gap:28px !important}` unconditionally. R12 added a
   `min-width:1280px` version but could not un-set R10's, which still applied at every
   width, so 1024 kept the 28px gap and the SHOP MENU CTA still ran off-screen (measured
   right edge 1140 against a 1024 viewport). Restore this file's original .85rem gap below
   1280, where the header genuinely has no room for 28px: at 1024 the content box is 896px
   and the row needs brand 268 + nav 435 + CTA 156 = 859px before any gap at all. */
@media (max-width: 1279px) {
  .fk-header__nav { gap: .85rem !important; }
}

/* FIX 2, footer left/right gutter off by 10px below 1280.
   `.fk-footer` carries Elementor's default 10px horizontal container padding. At 1440
   that is invisible, because `.fk-footer__inner`'s own `max-width:1280px` centres inside
   the remaining 1420px and absorbs it (content still lands on 144..1296). At 1024 the
   1280 cap no longer binds, so the 10px shifts the whole footer inward: measured footer
   content at x=74 with the wordmark 876px wide, against the reference's 64 and 896.
   Same root cause and same fix as the header in R12. */
.fk-footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* === FK-HF-BUGFIX-R13 END === */

/* FK-HF-BUGFIX-R14: mobile nav "Shop Menu" CTA text was inheriting the off-white
   .fk-mobile-nav a color (0,1,1 specificity) instead of .btn-gold's dark #141517
   (0,1,0), because the mobile-nav-scoped rule outranks it. Reference uses dark
   text on the gold gradient in both desktop and mobile nav CTAs. */
.fk-mobile-nav a.btn-gold{color:#141517;}

/* === FK-HF-BUGFIX-R15 (2026-09-13, interactive-state sweep) ===============
   Mobile nav drawer. Both defects found by opening the drawer and measuring
   it at 320/375/425 against the reference (Navbar.jsx), not by eyeballing.

   1. .fk-mobile-nav__cta (0,1,0) lost to .fk-mobile-nav a (0,1,1) for
      font-size, letter-spacing and padding-block -- the same specificity
      collision as R14's colour bug, on the same element, in three more
      properties. Measured live at 375 before this fix:
        built     18px / 2.7px / padding 10px 24px / h=47
        reference 14px / 2.8px / padding 14px 24px / h=48
          (text-sm py-3.5 px-6 tracking-[0.2em])
      Re-asserted at (0,2,1) so the ancestor-scoped rule cannot win.

   2. .fk-mobile-nav a set no line-height, so it inherited the theme body's
      (27px) where the reference's text-lg is a flat 28px. Every drawer link
      rendered 1px short and the list drifted 1px per item:
        built     y = 89 140 191 242 293 344 395
        reference y = 89 141 193 245 297 349 401 */
.fk-mobile-nav a{line-height:1.75rem;}
.fk-mobile-nav a.fk-mobile-nav__cta{
  font-size:.875rem;
  line-height:1.25rem;
  letter-spacing:.2em;
  padding-block:.875rem;
}

/* FK-HF-BUGFIX-R15: Hello Elementor's own reset.css sets body{background-color:#fff}
   and loads AFTER fk-tokens.css (same 0,0,1 specificity, later source wins), so the
   page's real base background was white instead of the dark theme color. This made
   the fixed header's backdrop-filter blur blend with white at the top of the page
   (before the hero visually starts), rendering as a light gray band instead of
   blending seamlessly with the dark hero like the reference. This file loads after
   reset.css, so this override wins by source order without needing !important. */
body{background-color:#141517;}

/* FK-HF-BUGFIX-R17: --fk-border (#26272A) was too visible against the dark theme
   compared to the reference's actual border color (#1C1D20, confirmed via the
   reference's own "border-b border-[#1C1D20]" class on both header and footer).
   This made the fixed header's bottom edge (and the footer's top edge, mobile nav
   divider) read as a visible hard seam/box outline instead of the reference's
   near-invisible blend with its own dark background. Redefining the token here
   (loads after fk-tokens.css) rather than editing the token file in place, since
   custom-property redeclaration in a later stylesheet cleanly overrides the
   earlier one without needing !important. */
:root{--fk-border:#1C1D20;}

/* === FK-HF-BUGFIX-R18 START (mobile logo/hamburger not vertically centered) === */
/* Reported: "the logo and the hamburger not aligned correctly on mobile
   breakpoints, should be centered between top and bottom". Live measurement at
   375px confirmed the header row itself (`.fk-header__inner .e-con-inner`,
   fixed at 64px via the row's own height/padding chain) had `align-items:center`
   correctly set, yet `.fk-header__brand` (66px, the logo) sat at top:17/bottom:83
   and `.fk-header__actions` (80px, the hamburger's wrapper, inflated by its own
   10px top+bottom container padding around the 60px toggle button) sat at
   top:10/bottom:90 -- both shifted well below the row's true centered position
   of top:-1/bottom:65 and top:-8/bottom:72 respectively.

   Root cause: Elementor's default `.e-flex` utility class (present on every
   `.e-con` container, including this row) ships `flex-wrap:wrap`, which this
   file never overrode. With `flex-wrap:wrap` and only one flex line, the
   BROWSER sizes that single line's cross-axis to the tallest child in it
   (here, `.fk-header__actions` at 80px) rather than to the container's own
   64px box, and `align-items:center` then centers every child within THAT
   80px line -- anchored at the row's content-box top (y=10, just past its
   10px padding-top) -- instead of within the row's real 64px band. The fixed
   64px container simply clips the bottom of that oversized line, which is
   why everything read as pushed down rather than centered.

   Fix: force `flex-wrap:nowrap` on the same row selector this file already
   forces `flex-direction:row` on. With a single guaranteed line, its
   cross-size collapses back to the container's own fixed height, and
   `align-items:center` centers each child against the ACTUAL 64px/80px row
   box, producing the correct symmetric overflow (confirmed live: brand
   top:-1/bottom:65, actions top:-8/bottom:72 -- both centered on the row). */
.fk-header__inner .e-con-inner{flex-wrap:nowrap !important;}
/* === FK-HF-BUGFIX-R18 END === */

/* === FK-HF-BUGFIX-R19 START (1024px header overflow, brand block too wide) === */
/* Header CTA's right edge measured at 1054px against a 1024px viewport (invisible
   only because `body{overflow-x:clip}` hides the resulting scrollable overflow).
   Root cause: `.fk-header__brand-text-wrap p` carries `font-size:.75rem` (12px) and
   `letter-spacing:.3em` (3.6px per character), sized for the >=1280px row where the
   reference itself also runs the wordmark large. At 1024-1279px the reference's own
   brand block measures ~208px; this build's ran 247.6px (img 48px + gap 12px + text
   169.6px), the ~40px surplus almost entirely from that same 3.6px-per-character
   tracking applied to "Fishkill Cannabis" (17 characters).

   Tested live before deploying (temporary <style> injection, measured, discarded):
   dropping to font-size:11px / letter-spacing:.17em brings the brand block to
   209.17px (reference: ~208px) and the header CTA's right edge to 1015.6px at a
   1024px viewport -- comfortably inside the row, no overflow. Scoped to
   1024-1279px only: below 1024 the mobile toggle is shown instead (brand width is
   irrelevant there), and at 1280+ the row already has ~125px of slack even at the
   original 12px/.3em sizing (measured in R11/R12 above), so leaving it untouched
   there preserves the larger, already-correct desktop wordmark. */
@media (min-width:1024px) and (max-width:1279px){
  .fk-header__brand-text-wrap p{font-size:11px;letter-spacing:.17em;}
}
/* === FK-HF-BUGFIX-R19 END === */