/* === FK-R2-HOME START === */
/* Homepage audit round 2. Scope: Category grid, Delivery banner, Manifesto,
Google Reviews, Club CTA -- desktop (1440) and mobile (375).
Deliberately NOT in scope and NOT touched here: header, footer, hero.
Loads after fk-home.css via the fk-*.css glob in mu-plugins/001-fk-area-css.php.
Every value below was measured off the live reference with getComputedStyle,
not read off a screenshot. Reference: fishkill-modern.preview.emergentagent.com
--------------------------------------------------------------------------
ROOT CAUSE for most of it: Elementor pins .e-con-inner to flex-direction:column,
so fk-home.css's `display:flex !important` rules produced stacked columns where
the reference has rows (section header rows, the rating summary, the club
buttons). Everything that was "too tall" traces back to that plus the
container/padding ramp below. */
/* ---------- shared scope helpers ---------- */
.fk-category-section, .fk-delivery-section, .fk-manifesto-section,
.fk-reviews-section, .fk-club-section { --fk-r2:1; }
/* 1. SECTION VERTICAL RHYTHM -- reference is py-16 / sm:py-24 / lg:py-32
i.e. 64px, 96px at >=640, 128px at >=1024. Build shipped 64/96 only. */
.fk-category-section, .fk-delivery-section, .fk-manifesto-section,
.fk-reviews-section, .fk-club-section {
padding-top:4rem !important; padding-bottom:4rem !important;
}
@media (min-width:640px){
.fk-category-section, .fk-delivery-section, .fk-manifesto-section,
.fk-reviews-section, .fk-club-section { padding-top:6rem !important; padding-bottom:6rem !important; }
}
@media (min-width:1024px){
.fk-category-section, .fk-delivery-section, .fk-manifesto-section,
.fk-reviews-section, .fk-club-section { padding-top:8rem !important; padding-bottom:8rem !important; }
}
/* 2. CONTAINER -- reference is `mx-auto max-w-7xl px-4 sm:px-8 lg:px-16`,
so the content box is 1152px at 1440. Elementor shipped 1140 minus two
10px inner paddings = 1120, inset 16px too far. */
.fk-category-section > .e-con-inner, .fk-delivery-section > .e-con-inner,
.fk-manifesto-section > .e-con-inner, .fk-reviews-section > .e-con-inner,
.fk-club-section > .e-con-inner {
max-width:1280px !important; width:100% !important;
padding:0 1rem !important; gap:0 !important;
}
@media (min-width:640px){
.fk-category-section > .e-con-inner, .fk-delivery-section > .e-con-inner,
.fk-manifesto-section > .e-con-inner, .fk-reviews-section > .e-con-inner,
.fk-club-section > .e-con-inner { padding-left:2rem !important; padding-right:2rem !important; }
}
@media (min-width:1024px){
.fk-category-section > .e-con-inner, .fk-delivery-section > .e-con-inner,
.fk-manifesto-section > .e-con-inner, .fk-reviews-section > .e-con-inner,
.fk-club-section > .e-con-inner { padding-left:4rem !important; padding-right:4rem !important; }
}
/* strip Elementor's default 10px inner gutters on every nested container so the
reference's own margins are the only source of spacing (skill: "close the
container's gap and state the margins") */
.fk-category-section .e-con > .e-con-inner, .fk-delivery-section .e-con > .e-con-inner,
.fk-manifesto-section .e-con > .e-con-inner, .fk-reviews-section .e-con > .e-con-inner,
.fk-club-section .e-con > .e-con-inner { padding-top:0 !important; padding-bottom:0 !important; }
.fk-category-section .e-con-inner > .e-con, .fk-delivery-section .e-con-inner > .e-con,
.fk-manifesto-section .e-con-inner > .e-con, .fk-reviews-section .e-con-inner > .e-con,
.fk-club-section .e-con-inner > .e-con { padding-left:0 !important; padding-right:0 !important; }
/* 3. SECTION HEADER ROW -- reference: flex row, wrap, items-end, space-between.
fk-home.css set display:flex but not flex-direction, so Elementor's
column won and the "View full menu" / rating card dropped underneath. */
.fk-category-section .fk-section-header-row > .e-con-inner,
.fk-reviews-section .fk-section-header-row > .e-con-inner {
display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
align-items:flex-end !important; justify-content:space-between !important;
}
.fk-category-section .fk-section-header-row > .e-con-inner { gap:1.5rem !important; }
.fk-reviews-section .fk-section-header-row > .e-con-inner { gap:2rem !important; }
.fk-category-section .fk-section-header-row > .e-con-inner > *,
.fk-reviews-section .fk-section-header-row > .e-con-inner > * {
width:auto !important; max-width:100% !important; flex:0 1 auto !important;
}
/* heading block: reference eyebrow then h2 with mt-4 (16px), not 8px */
.fk-category-section .fk-section-title, .fk-delivery-section .fk-h2,
.fk-manifesto-section .fk-section-title, .fk-reviews-section .fk-section-title,
.fk-club-section .fk-h2 { margin-top:1rem !important; }
/* 4. CATEGORY GRID ------------------------------------------------------- */
.fk-category-section .fk-category-grid { margin-top:3rem !important; }
.fk-category-section .fk-section-header-row { margin-bottom:0 !important; }
.fk-category-section .fk-category-card {
padding:1.5rem !important; border-radius:16px !important; min-height:180px;
border:1px solid rgba(255,255,255,.08) !important;
background-color:#1C1D20 !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%),
linear-gradient(160deg,#26272a 0%,#1c1d20 58%,#191a1d 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.35), 0 28px 56px -32px rgba(0,0,0,.75);
}
@media (min-width:640px){ .fk-category-section .fk-category-card { padding:2rem !important; } }
/* reference puts the badge ABOVE the category name; Elementor's icon-box widget
renders title-then-description, so flip the visual order */
.fk-category-section .fk-category-card .elementor-icon-box-wrapper {
flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; gap:0 !important;
}
.fk-category-section .fk-category-card .elementor-icon-box-content {
display:flex !important; flex-direction:column-reverse !important; align-items:flex-start !important;
}
.fk-category-section .fk-category-card .elementor-icon-box-description { margin-top:0 !important; }
.fk-category-section .fk-category-card .elementor-icon-box-title { margin-top:.75rem !important; }
/* 5. DELIVERY BANNER ----------------------------------------------------- */
.fk-delivery-section .fk-delivery-points-grid { margin-top:2.5rem !important; }
.fk-delivery-section .fk-delivery-point {
padding:1.25rem !important; border-radius:16px !important;
border:1px solid rgba(255,255,255,.08) !important;
background-color:#1C1D20 !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%),
linear-gradient(160deg,#26272a 0%,#1c1d20 58%,#191a1d 100%) !important;
}
/* small stat labels are text-[10px] tracking-[0.25em] in the reference, not the
12px/.35em section caption size they inherited */
.fk-delivery-section .fk-point-label, .fk-delivery-section .fk-point-label *,
.fk-delivery-section .fk-delivery-stat-badge .fk-caption {
font-size:10px !important; line-height:15px !important; letter-spacing:.25em !important;
}
.fk-delivery-section .fk-point-label, .fk-delivery-section .fk-point-label * { color:rgb(110,122,108) !important; }
/* 6. MANIFESTO ----------------------------------------------------------- */
.fk-manifesto-section .fk-manifesto-rows { margin-top:3rem !important; }
.fk-manifesto-section .fk-manifesto-rows > .e-con-inner { gap:0 !important; }
.fk-manifesto-section .fk-chapter-num { display:block; line-height:48px !important; }
/* 7. GOOGLE REVIEWS ------------------------------------------------------ */
.fk-reviews-section .fk-section-header-row { margin-bottom:0 !important; }
.fk-reviews-section .fk-reviews-grid { margin-top:3rem !important; }
/* rating summary: shrink-to-fit pill on the right of the header, laid out as a
row -- reference is `flex items-center gap-5 rounded-2xl border p-4 px-6` */
.fk-reviews-section .fk-rating-summary {
width:auto !important; max-width:100% !important; flex:0 1 auto !important;
padding:1rem 1.5rem !important; border-radius:16px !important;
border:1px solid #26272A !important; background:#1C1D20 !important;
}
.fk-reviews-section .fk-rating-summary > .e-con-inner {
display:grid !important; grid-template-columns:32px auto auto;
align-items:center !important; column-gap:1.25rem !important; row-gap:0 !important;
width:auto !important; max-width:none !important;
}
/* the reference's Google "G" mark, which the build omitted entirely */
.fk-reviews-section .fk-rating-summary > .e-con-inner::before {
content:""; grid-column:1; grid-row:1 / span 2; width:32px; height:32px;
background-repeat:no-repeat; background-size:32px 32px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z'/%3E%3Cpath fill='%2334A853' d='M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09C3.26 21.3 7.31 24 12 24z'/%3E%3Cpath fill='%23FBBC05' d='M5.27 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62H1.29C.47 8.24 0 10.06 0 12s.47 3.76 1.29 5.38l3.98-3.09z'/%3E%3Cpath fill='%23EA4335' d='M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.7 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z'/%3E%3C/svg%3E");
}
.fk-reviews-section .fk-rating-badge { grid-column:2; grid-row:1; width:auto !important; }
.fk-reviews-section .fk-listing-link-wrap { grid-column:2; grid-row:2; width:auto !important; margin-top:.25rem !important; }
.fk-reviews-section .fk-btn-ghost { grid-column:3; grid-row:1 / span 2; width:auto !important; align-self:center; margin-left:.5rem !important; }
/* reference hides "Write a review" below the sm breakpoint */
@media (max-width:639px){ .fk-reviews-section .fk-btn-ghost { display:none !important; } }
/* review cards: reference is p-8 with the avatar and the name/meta block on one
row. The build stacked all six blocks in a 20px-gap column, which is where
the +635px (1440) / +1327px (375) section overflow came from. */
.fk-reviews-section .fk-review-card {
padding:1.5rem !important; border-radius:16px !important;
border:1px solid rgba(255,255,255,.08) !important;
background-color:#1C1D20 !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%),
linear-gradient(160deg,#26272a 0%,#1c1d20 58%,#191a1d 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.35), 0 28px 56px -32px rgba(0,0,0,.75);
}
.fk-reviews-section .fk-review-card > .e-con-inner {
display:grid !important; grid-template-columns:40px minmax(0,1fr);
column-gap:.75rem !important; row-gap:0 !important;
align-content:start; height:100%;
}
.fk-reviews-section .fk-review-avatar { grid-column:1; grid-row:1 / span 2; align-self:center; width:40px !important; }
.fk-reviews-section .fk-review-name { grid-column:2; grid-row:1; align-self:end; margin-top:0 !important; width:auto !important; }
.fk-reviews-section .fk-review-meta-wrap { grid-column:2; grid-row:2; align-self:start; width:auto !important; }
.fk-reviews-section .fk-review-stars-row { grid-column:1 / -1; grid-row:3; margin-top:1rem !important; }
.fk-reviews-section .fk-review-text { grid-column:1 / -1; grid-row:4; }
.fk-reviews-section .fk-review-text p { margin-top:1rem !important; }
.fk-reviews-section .fk-posted-on-wrap { grid-column:1 / -1; grid-row:5; margin-top:1.25rem !important; align-self:end; }
/* reference floats a 16px Google mark in the card's top-right corner */
.fk-reviews-section .fk-review-card { position:relative; }
.fk-reviews-section .fk-review-card::after {
content:""; position:absolute; top:24px; right:24px; width:16px; height:16px; opacity:.7;
background-repeat:no-repeat; background-size:16px 16px; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z'/%3E%3Cpath fill='%2334A853' d='M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09C3.26 21.3 7.31 24 12 24z'/%3E%3Cpath fill='%23FBBC05' d='M5.27 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62H1.29C.47 8.24 0 10.06 0 12s.47 3.76 1.29 5.38l3.98-3.09z'/%3E%3Cpath fill='%23EA4335' d='M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.7 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z'/%3E%3C/svg%3E");
}
/* 8. CLUB CTA ------------------------------------------------------------ */
/* the shipped rule was `.fk-club-title.fk-h2` -- both classes on ONE element --
but fk-club-title sits on the wrapper and fk-h2 on the h2, so it matched
nothing and the headline ran the full 1042px instead of the reference's 672 */
.fk-club-section .fk-club-card h2.fk-h2 {
max-width:42rem !important; margin-left:auto !important; margin-right:auto !important;
}
.fk-club-section .fk-club-card .fk-body p {
max-width:36rem !important; margin-left:auto !important; margin-right:auto !important;
}
.fk-club-section .fk-club-buttons { margin-top:2.5rem !important; }
.fk-club-section .fk-club-buttons > .e-con-inner {
display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
align-items:center !important; justify-content:center !important; gap:1rem !important;
}
.fk-club-section .fk-club-buttons > .e-con-inner > * { width:auto !important; flex:0 0 auto !important; }
/* 9. BUTTONS -- the pill styling had been applied to the Elementor WRAPPER
container, leaving the real inside as a square 3px-radius gold block
(a gold rectangle sitting inside a gold pill). Move it onto the .
Scoped to this agent's sections only; the hero's buttons are another
agent's and are deliberately untouched. */
.fk-club-section .fk-btn, .fk-club-section .fk-btn-outline,
.fk-delivery-section .fk-btn, .fk-reviews-section .fk-btn-ghost,
.fk-category-section .fk-text-link {
padding:0 !important; border:0 !important; border-radius:0 !important;
background:none !important; box-shadow:none !important; width:auto !important;
}
.fk-club-section .fk-btn a.elementor-button, .fk-delivery-section .fk-btn a.elementor-button {
display:inline-flex !important; align-items:center; gap:.5rem;
padding:1rem 2rem !important; border-radius:9999px !important;
background-color:transparent !important;
background-image:linear-gradient(120deg,#e6d3a3 0%,#d8c08c 45%,#c5a059 100%) !important;
color:#141517 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px -10px rgba(216,192,140,.35) !important;
font-family:'Cabinet Grotesk',sans-serif !important; font-size:14px !important;
font-weight:700 !important; line-height:20px !important; letter-spacing:.2em !important;
text-transform:uppercase; transition:filter .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.fk-club-section .fk-btn a.elementor-button:hover, .fk-delivery-section .fk-btn a.elementor-button:hover { filter:brightness(1.08); transform:translateY(-2px); }
.fk-club-section .fk-btn-outline a.elementor-button {
display:inline-flex !important; align-items:center; gap:.5rem;
padding:1rem 2rem !important; border-radius:9999px !important;
border:1px solid #33353A !important; background:transparent !important;
color:#F4F6F4 !important;
font-family:'Cabinet Grotesk',sans-serif !important; font-size:14px !important;
font-weight:700 !important; line-height:20px !important; letter-spacing:.2em !important;
text-transform:uppercase; transition:border-color .3s, color .3s;
}
.fk-club-section .fk-btn-outline a.elementor-button:hover { border-color:rgba(216,192,140,.6) !important; color:#D8C08C !important; }
.fk-reviews-section .fk-btn-ghost a.elementor-button {
display:inline-block !important; padding:.625rem 1.25rem !important;
border-radius:9999px !important; border:1px solid rgba(216,192,140,.3) !important;
background:transparent !important; color:#D8C08C !important;
font-family:'Cabinet Grotesk',sans-serif !important; font-size:11px !important;
font-weight:700 !important; line-height:16.5px !important; letter-spacing:.2em !important;
text-transform:uppercase; transition:background-color .3s;
}
.fk-reviews-section .fk-btn-ghost a.elementor-button:hover { background:rgba(216,192,140,.1) !important; }
/* "View full menu" is a plain gold text link in the reference, not a button */
.fk-category-section .fk-text-link a.elementor-button {
display:inline-flex !important; align-items:center; gap:.5rem;
padding:0 !important; border:0 !important; border-radius:0 !important;
background:transparent !important; color:#D8C08C !important;
font-family:'Cabinet Grotesk',sans-serif !important; font-size:12px !important;
font-weight:700 !important; line-height:16px !important; letter-spacing:.25em !important;
text-transform:uppercase;
}
.fk-category-section .fk-text-link .elementor-button-content-wrapper { gap:.5rem !important; }
/* 10. CORRECTIONS found by re-measuring the block above in-page before deploying
(the gap/padding resets in rules 2 were too broad and hit three boxes that
legitimately carry their own padding, plus the delivery grid's own gap). */
/* nested containers must not re-clamp to Elementor's 1140 content width */
.fk-category-section .e-con .e-con-inner, .fk-delivery-section .e-con .e-con-inner,
.fk-manifesto-section .e-con .e-con-inner, .fk-reviews-section .e-con .e-con-inner,
.fk-club-section .e-con .e-con-inner { max-width:100% !important; }
/* the delivery section's own e-con-inner IS the two-column grid: keep its gap */
.fk-delivery-section > .e-con-inner { column-gap:3rem !important; row-gap:3rem !important; }
@media (min-width:1024px){ .fk-delivery-section > .e-con-inner { column-gap:4rem !important; row-gap:0 !important; } }
/* boxes whose padding rule 2 wrongly zeroed */
.fk-club-section .fk-club-card { padding:4rem 1.5rem !important; }
@media (min-width:640px){ .fk-club-section .fk-club-card { padding:6rem 3rem !important; } }
.fk-delivery-section .fk-delivery-stat-badge { padding:1rem 1.5rem !important; }
/* category card: reference keeps a 40px (mt-10) gap between the icon and the
badge/title block, which the column-reverse flip had zeroed */
.fk-category-section .fk-category-card .elementor-icon-box-description { margin-top:2.5rem !important; }
/* manifesto rows are baseline-aligned in the reference (the outline "01" sits on
the same baseline as the chapter title); Elementor was stretching them */
@media (min-width:768px){
.fk-manifesto-section .fk-manifesto-row > .e-con-inner { align-items:baseline !important; }
.fk-manifesto-section .fk-manifesto-row > .e-con-inner > * { align-self:baseline !important; }
}
/* 11. Category card icon: the reference is a 48px rotate-45 gold-outlined tile
holding a 20px icon counter-rotated back to upright. fk-home.css aimed its
counter-rotation at `i`, but Elementor renders an