/* Fishkill Cannabis WP site: Shop page (assets/css/fk-shop.css)
Owned by the Shop-page build. Do not append other areas' rules here. */
.fk-shop-badge {
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 9999px;
border: 1px solid rgba(216, 192, 140, 0.25);
background: rgba(216, 192, 140, 0.1);
padding: 8px 16px;
}
.fk-shop-badge__dot {
position: relative;
display: inline-flex;
width: 8px;
height: 8px;
flex-shrink: 0;
}
.fk-shop-badge__dot::before {
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
background: #d8c08c;
opacity: 0.6;
animation: fk-shop-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.fk-shop-badge__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
background: #d8c08c;
}
@keyframes fk-shop-ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
.fk-shop-badge__text {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.25em;
color: #d8c08c;
}
.fk-shop-cat-badge {
display: inline-flex;
border-radius: 9999px;
border: 1px solid rgba(216, 192, 140, 0.25);
background: rgba(216, 192, 140, 0.1);
padding: 4px 12px;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #d8c08c;
white-space: nowrap;
}
@media (max-width: 639px) {
.fk-shop-cat-badge {
display: none;
}
}
.fk-shop-arrow {
display: inline-flex;
transition: transform 0.3s ease, color 0.3s ease;
}
.fk-shop-arrow svg {
display: block;
width: 24px;
height: 24px;
}
.fk-shop-mode-icon {
display: flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid rgba(216, 192, 140, 0.4);
background: rgba(20, 21, 23, 0.6);
transform: rotate(45deg);
}
.fk-shop-mode-icon svg {
width: 20px;
height: 20px;
color: #d8c08c;
transform: rotate(-45deg);
display: block;
}
.fk-shop-row {
transition: background-color 0.5s ease;
}
.fk-shop-row .fk-shop-row-name {
transition: transform 0.5s ease, color 0.5s ease;
display: inline-block;
}
.fk-shop-row:not(.fk-shop-row--featured):hover {
background: rgba(255, 255, 255, 0.02);
}
.fk-shop-row:not(.fk-shop-row--featured):hover .fk-shop-row-name {
color: #d8c08c !important;
transform: translateX(8px);
}
.fk-shop-row:not(.fk-shop-row--featured):hover .fk-shop-arrow {
color: #d8c08c !important;
transform: translate(4px, -4px);
}
.fk-shop-row--featured {
transition: background-image 0.5s ease;
}
.fk-shop-row--featured:hover {
background-image: linear-gradient(
90deg,
rgba(216, 192, 140, 0.12) 0%,
rgba(216, 192, 140, 0) 100%
) !important;
}
.fk-shop-row--featured:hover .fk-shop-arrow {
transform: translate(4px, -4px);
}
/* Whole-row link containers: no default link underline/color inheritance. */
a.fk-shop-row,
a.fk-shop-row:hover,
a.fk-shop-row:visited {
text-decoration: none;
}
/* ------------------------------------------------------------------
Audit round 1 fixes (measured against the Emergent reference,
src/pages/Shop.jsx). Reference geometry:
page container .mx-auto max-w-7xl px-4 sm:px-8 lg:px-16
category rows .grid grid-cols-12 items-center gap-4 py-8
mode cards .grid grid-cols-1 gap-4 py-16 sm:py-24 md:grid-cols-3 lg:gap-6
Breakpoints follow the reference (Tailwind): 640 / 768 / 1024.
------------------------------------------------------------------ */
/* Page container: reference is max-w-7xl (1280px incl. padding), so the
inner content box is 1152px, with 16/32/64 side padding. Elementor's
boxed default was 1140px with 64/32/16. Scoped to the Shop page so the
site-wide kit content width is untouched. */
.elementor-131 .elementor-element.elementor-element-bd16128 {
--container-max-width: 1152px;
--padding-left: 16px;
--padding-right: 16px;
}
@media (min-width: 640px) {
.elementor-131 .elementor-element.elementor-element-bd16128 {
--padding-left: 32px;
--padding-right: 32px;
}
}
@media (min-width: 1024px) {
.elementor-131 .elementor-element.elementor-element-bd16128 {
--padding-left: 64px;
--padding-right: 64px;
}
}
/* Hero stack: the reference's children are block-level and full width, so
the h1 wraps against the container, not against its own shrink-wrapped
box. */
.elementor-131 .elementor-element.elementor-element-254d0f6 {
--align-items: stretch;
}
/* Caption "The Full Menu": Elementor's .elementor-heading-title defaults to
line-height 1; the reference's text-xs caption runs on a 16px line. */
.elementor-131 .elementor-element.elementor-element-1b4226f .elementor-heading-title {
line-height: 16px;
}
/* Hero h1. The reference is text-4xl leading-tight sm:text-5xl lg:text-6xl:
Tailwind's size utilities carry their own line-height and land after
leading-tight, so the measured ratio is 1.25 below 640 and 1 from 640 up.
tracking-tight is -0.025em, not a fixed -1.5px. */
.elementor-131 .elementor-element.elementor-element-3c6f903 .elementor-heading-title {
font-size: 36px;
line-height: 1.25;
letter-spacing: -0.025em;
}
@media (min-width: 640px) {
.elementor-131 .elementor-element.elementor-element-3c6f903 .elementor-heading-title {
font-size: 48px;
line-height: 1;
}
}
@media (min-width: 1024px) {
.elementor-131 .elementor-element.elementor-element-3c6f903 .elementor-heading-title {
font-size: 60px;
line-height: 1;
}
}
/* Hero paragraph is max-w-2xl in the reference. */
.elementor-131 .elementor-element.elementor-element-4b87b31,
.elementor-131 .elementor-element.elementor-element-4b87b31 > p {
max-width: 672px;
}
/* ---- Category rows: a real 12-column grid, as in the reference ---- */
.elementor-131 .elementor-element.fk-shop-row {
--display: grid;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
align-items: center;
--padding-left: 0px;
--padding-right: 0px;
}
.elementor-131 .elementor-element.fk-shop-row > * {
width: auto;
align-self: center;
}
/* Index number: col-span-2 pl-2, sm:col-span-1 sm:pl-6 */
.elementor-131 .elementor-element.fk-shop-row > *:first-child {
grid-column: span 2;
padding-left: 8px;
}
.elementor-131 .elementor-element.fk-shop-row > *:first-child .elementor-heading-title {
line-height: 16px;
}
/* Category name: col-span-8, sm:col-span-5 (sm:col-span-8 on the
"Shop Everything" featured row) */
.elementor-131 .elementor-element.fk-shop-row > .fk-shop-row-name {
grid-column: span 8;
}
.elementor-131 .elementor-element.fk-shop-row .fk-shop-row-name .elementor-heading-title {
line-height: 32px;
}
/* Badge cell: hidden below sm, col-span-3 from sm up. */
.elementor-131 .elementor-element.fk-shop-row:not(.fk-shop-row--featured) > *:nth-child(3) {
display: none;
}
/* Arrow cell: col-span-2 pr-2, sm:col-span-3 sm:pr-6, right aligned. */
.elementor-131 .elementor-element.fk-shop-row > *:last-child {
grid-column: span 2;
display: flex;
justify-content: flex-end;
padding-right: 8px;
}
@media (min-width: 640px) {
.elementor-131 .elementor-element.fk-shop-row > *:first-child {
grid-column: span 1;
padding-left: 24px;
}
.elementor-131 .elementor-element.fk-shop-row > .fk-shop-row-name {
grid-column: span 5;
}
.elementor-131 .elementor-element.fk-shop-row--featured > .fk-shop-row-name {
grid-column: span 8;
}
.elementor-131 .elementor-element.fk-shop-row .fk-shop-row-name .elementor-heading-title {
line-height: 36px;
}
.elementor-131 .elementor-element.fk-shop-row:not(.fk-shop-row--featured) > *:nth-child(3) {
display: block;
grid-column: span 3;
}
.elementor-131 .elementor-element.fk-shop-row > *:last-child {
grid-column: span 3;
padding-right: 24px;
}
}
/* ---- Delivery-mode cards: 1 column, 3 columns from 768 up ---- */
.elementor-131 .elementor-element.elementor-element-f70a381 {
--display: grid;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
--padding-top: 64px;
--padding-bottom: 64px;
}
@media (min-width: 640px) {
.elementor-131 .elementor-element.elementor-element-f70a381 {
--padding-top: 96px;
--padding-bottom: 96px;
}
}
@media (min-width: 768px) {
.elementor-131 .elementor-element.elementor-element-f70a381 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.elementor-131 .elementor-element.elementor-element-f70a381 {
gap: 24px;
}
}
/* Cards fill their grid cell; padding is p-6, sm:p-8 in the reference. */
.elementor-131 .elementor-element.fk-shop-mode-card {
--width: auto;
width: auto;
--padding-top: 24px;
--padding-bottom: 24px;
--padding-left: 24px;
--padding-right: 24px;
}
@media (min-width: 640px) {
.elementor-131 .elementor-element.fk-shop-mode-card {
--padding-top: 32px;
--padding-bottom: 32px;
--padding-left: 32px;
--padding-right: 32px;
}
}
.elementor-131 .elementor-element.fk-shop-mode-card .elementor-heading-title {
line-height: 32px;
}
/* The reference badge has no white-space override, so a long badge wraps to
two lines inside its 3-column cell at tablet width. Ours had nowrap, which
pushed the pill wider than the cell from 768 up. */
.elementor-131 .elementor-element.fk-shop-row .fk-shop-cat-badge {
white-space: normal;
}
/* The reference badge is a plain inline span, so when it wraps at tablet the
pill fragments and the second line starts flush with the grid cell. An
inline-flex pill keeps every line indented by its own padding, which put
the label 13px right of the reference from 768 up. */
.elementor-131 .elementor-element.fk-shop-row .fk-shop-cat-badge {
display: inline;
}
/* Audit round 2 (mobile-only pass, 375/390).
Every one of these is a plain flex-column stack (hero eyebrow/h1/paragraph
/badge, the row-list wrapper, and each of the 3 delivery-mode cards'
icon/heading/paragraph stack) where the reference spaces children with
explicit margins only (Shop.jsx: mt-4, mt-6, mt-8, mt-3, and the row-list
wrapper's own "mt-16" carries no gap class at all) and never relies on a
flex gap. Elementor's kit-level "Widgets Space" default (20px, no
per-element override set for any of these containers in the page JSON)
was adding 20px of dead space between every child on top of the margins
these elements already carry correctly, effectively doubling the intended
spacing. That stray 20px, repeated across the 9 category rows plus 3 mode
cards plus the hero stack, was the main cause of the Shop page running
about 736px taller than the reference at 375/390 widths.
Row spacing confirmed by live computed-style measurement (each
.fk-shop-row itself already measures the correct 97-98px, matching the
reference; the gap BETWEEN rows was the extra 20px). The mode-card and
hero-stack instances follow the identical mechanism (same default,
same missing override) but haven't been re-measured live yet; screenshot
after deploy to confirm before calling this fully verified.
Originally scoped to mobile per that round's brief; desktop follow-up
below confirmed the same latent gap and unscoped this rule. */
.elementor-131 .elementor-element.elementor-element-edb1e18,
.elementor-131 .elementor-element.elementor-element-254d0f6,
.elementor-131 .elementor-element.fk-shop-mode-card {
gap: 0;
}
/* Same mechanism one level up: .elementor-element-bd16128 is the page's own
"mx-auto max-w-7xl" content column (parent of the hero stack, the row
list, and the mode-cards section). It is also flex-column with no gap
override, so it was adding a further 20px between hero-to-rows and
rows-to-cards. The reference (Shop.jsx line 50) spaces those three
sections with each section's own top margin/padding only (mt-16 on the
row list, py-16 on the cards section) and never a gap on this wrapper.
Correction: bd16128 is a "boxed" container (class e-con-boxed, not
e-con-full like the other 3 fixed above), and Elementor's own CSS resets
gap to "initial" on the outer e-con-boxed element itself
(.e-con-boxed{gap:initial}); 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);
display:var(--display)}). So the override has to target that inner
wrapper, not the ID class itself, or it is a no-op.
Originally scoped to mobile; desktop follow-up below confirmed the same
latent gap and unscoped this rule too. */
.elementor-131 .elementor-element.elementor-element-bd16128 > .e-con-inner {
gap: 0;
}
/* Audit round: row-list wrapper top margin. Reference wraps the 9 category
rows in a plain div with Tailwind "mt-16" (margin-top: 4rem / 64px). This
is a static utility class with no responsive variant anywhere in the
reference's compiled CSS/JSX (confirmed: single literal className="mt-16"
at Shop.jsx line 47, single .mt-16{margin-top:4rem} rule, no sm:/md:/lg:
sibling class) — so the 64px margin applies at every breakpoint, 375
through 1440+, not just mobile. .elementor-element-edb1e18 is the
equivalent wrapper on this page (same 874px height, same 9 rows) but
carried no margin-top at all, leaving only ~9px between the "OPEN NOW"
pill and the first row instead of the reference's ~73px. This is a
distinct property from the mobile-only "gap:0" rule above on this same
selector (that zeroed the flex gap this element applies to ITS OWN
children; this sets the element's own top margin against its parent) —
additive, not a replacement. Unscoped by width to match the reference. */
.elementor-131 .elementor-element.elementor-element-edb1e18 {
margin-top: 64px;
}
/* Audit round (desktop follow-up, 768/1024/1440/2560 measured live against
the reference): confirmed live via getComputedStyle that all four
containers above still carried Elementor's default 20px "Widgets Space"
gap at every desktop width, exactly as the round-2 comment predicted.
- .fk-shop-mode-card: 20px gap between the icon/heading/paragraph
stack (each child's own correct margin, e.g. the heading's 32px mt,
was stacking with an extra 20px gap on top), inflating each of the
3 delivery-mode cards from the reference's 236px to 290px tall at
1440.
- .elementor-element-edb1e18 (row list): 20px gap between the 9
category rows, inflating row-to-row pitch from the reference's
~101-106px to ~121-122px at 1440.
- .elementor-element-254d0f6 (hero stack) and
.elementor-element-bd16128 > .e-con-inner (page-level section
spacing): same 20px gap confirmed present at desktop widths too.
Fix applied by unscoping the two "@media (max-width: 767px)" rules
above to apply at every breakpoint, rather than duplicating them here. */
/* Residual +14px found after the gap fix above (measured live at 1440):
the hero paragraph's rendered wrapper was 66px tall vs the reference's
52px, and each mode-card's paragraph wrapper was still 14px taller than
its content. Root cause confirmed via getComputedStyle, not the gap:
the itself carries a default 14.4px margin-bottom (WP core
typography default, not set by any rule in this file), and because its
parent .elementor-widget-text-editor wrapper is not a plain
margin-collapsing box here (Elementor gives it its own box that stops
the child's bottom margin from collapsing through), that 14.4px shows
up as real, counted height instead of collapsing away as it does in the
reference (Shop.jsx paragraphs there compute margin-bottom: 0). Same
mechanism, two places: the hero paragraph (.elementor-element-4b87b31)
and every mode-card paragraph (.fk-shop-mode-card p). Scoped to this
page's text-editor widgets only. */
.elementor-131 .elementor-element.elementor-element-4b87b31 p,
.elementor-131 .elementor-element.fk-shop-mode-card .elementor-widget-text-editor p {
margin-bottom: 0;
}
/* === FK-SHOP-BUGFIX-R15 (2026-09-13, interactive-state sweep) =============
Row hover never turned the category name gold. .fk-shop-row-name is the
Elementor HEADING WIDGET WRAPPER; the visible text is the
inside it, which carries its own
explicit colour, so the wrapper's hover colour never reached it.
Measured live, hovering row 01 "Flower" at 1440 before this fix:
wrapper .fk-shop-row-name rgb(216,192,140) + translateX(8px) (correct)
inner h3 rgb(244,246,244) (wrong)
Reference (Shop.jsx): the name element itself carries
group-hover:translate-x-2 group-hover:text-gold. */
.fk-shop-row:not(.fk-shop-row--featured):hover .fk-shop-row-name .elementor-heading-title{
color:var(--fk-gold) !important;
}