/*
 * Fricking Market — Public Vendor Profile Styles
 *
 * Designed to work on:
 *   - Gutenberg / Block themes (Twenty Twenty-Three through Twenty Twenty-Five)
 *   - Divi
 *   - Elementor (Hello Elementor and any Elementor-based theme)
 *   - Astra
 *   - GeneratePress
 *   - OceanWP
 *   - Kadence
 *   - Blocksy
 *   - Generic fallback for any other theme
 *
 * All rules scoped to .fo-vendor-profile to avoid polluting theme styles.
 * We use !important only where Divi's aggressive resets require it.
 *
 * Shared color/radius/shadow tokens now live in fo-tokens.css (enqueued as
 * this stylesheet's dependency — see core/class-fo-assets.php), so this
 * file only defines what's genuinely specific to the profile page itself:
 * the per-vendor accent color (overridden inline per vendor in
 * templates/default/vendor-profile.php), the page's own font/gutter/
 * max-width layout values. Before 2026-07-11 this file had its own copy of
 * --fo-text/--fo-border/--fo-radius-lg/etc. that had quietly drifted out of
 * sync with fo-dashboard.css's copy of the same tokens — fixed by having
 * both pull from one shared source instead.
 *
 * @package FrickingMarket
 * @since   1.0.0
 */

/* -------------------------------------------------------------------------
   Reset scope — undo theme aggressiveness inside our component only
   ------------------------------------------------------------------------- */

.fo-vendor-profile,
.fo-vendor-profile * {
	box-sizing: border-box;
}

/* Divi resets margin on everything — restore sensible defaults. */
.fo-vendor-profile p,
.fo-vendor-profile h1,
.fo-vendor-profile h2,
.fo-vendor-profile h3 {
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Custom properties — scoped to component, not :root
   ------------------------------------------------------------------------- */

.fo-vendor-profile {
	/* This vendor's own accent — set inline per-vendor in
	   templates/default/vendor-profile.php. #2d6a4f is just the default
	   before a vendor customizes it, a deliberately different concept
	   from the dashboard's --fo-primary (an admin/theme-level color, not
	   a per-vendor one) — so it keeps its own name rather than merging
	   into the shared token file. */
	--fo-accent:       #2d6a4f;
	--fo-gutter:       24px;
	/* Fixed 2026-07-11: was a hard 960px cap, so on any viewport wider than
	   that the whole shortcode sat in a narrow column with huge unused
	   white space on both sides regardless of the actual container width —
	   Said asked for the shortcode to fill 100% of whatever container it's
	   placed in, not a fixed max column width. --fo-gutter still provides
	   left/right breathing room via padding on the -inner wrappers below. */
	--fo-max-width:    100%;

	width: 100%;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   Hero — rebuilt 2026-07-11 from Said's actual wireframe image: full-width
   banner image, avatar overlapping its bottom edge, social icons beside
   the avatar, name/location below. Replaces the earlier single-row
   photo+identity layout, which never had a banner at all — see project
   memory for why (the banner/avatar redesign had been deferred, then
   never circled back to Said before the profile rebuild shipped).
   ------------------------------------------------------------------------- */

.fo-profile-hero {
	width: 100%;
	border-bottom: 1px solid var(--fo-border);
	padding-bottom: 24px;
}

.fo-profile-banner {
	width:      100%;
	height:     220px;
	background: var(--fo-bg-inset, #e5e7eb);
	overflow:   hidden;
}

.fo-profile-banner-image {
	width:      100% !important;
	height:     100% !important;
	object-fit: cover !important;
	display:    block !important;
}

@media (max-width: 640px) {
	.fo-profile-banner { height: 140px; }
}

.fo-profile-hero-content {
	max-width: var(--fo-max-width);
	margin:    0 auto;
	padding:   0 var(--fo-gutter);
}

/* Two-column hero — only applied when there's bio/statement content to
   show (see $fo_hero_has_bio in vendor-profile.php). No bio/statement at
   all falls back to the plain single-column .fo-profile-hero-content
   above, so a blank profile doesn't just relocate the empty-space problem
   instead of fixing it.

   2026-07-15 — this went through two failed passes as a CSS Grid 1fr/2fr
   split (matching .fo-profile-body-inner's ratio below) before landing
   here. Both the Divi-specificity fight and the resulting dead space
   (meta content stretched across a much wider grid track than it needed)
   kept causing regressions. Rebuilt as flex instead: the meta column
   (name/location/badges/buttons) keeps a fixed, content-sized width —
   the same 260px .fo-profile-body-inner's sidebar column used to be,
   before any of this ratio math started — and the bio just fills
   whatever's left via flex:1. This is deliberately NOT ratio-matched to
   the filters/grid row below anymore; matching Said's "the spacing was
   fine before you added the bio text" call over pixel-aligning the two
   rows. !important still needed against Divi's block-flow reset. */
.fo-vendor-profile .fo-profile-hero-content--with-bio {
	display:      flex !important;
	flex-wrap:    wrap;
	gap:          40px !important;
	align-items:  flex-start !important;
}

.fo-profile-hero-main {
	flex:      0 0 260px !important;
	max-width: 260px !important;
	min-width: 0;
}

/* Nudged down to roughly align with the vendor name rather than the
   avatar photo — the photo overlaps the banner via a negative margin
   (see .fo-profile-avatar-row below) that this column doesn't share.
   Approximate, not pixel-exact. */
.fo-profile-hero-bio {
	flex:        1 1 320px;
	padding-top: 70px;
	min-width:   0;
}

@media (max-width: 780px) {
	.fo-vendor-profile .fo-profile-hero-main { flex-basis: 100%; max-width: 100% !important; }
	.fo-vendor-profile .fo-profile-hero-bio  { flex-basis: 100%; }

	.fo-profile-hero-bio { padding-top: 0; }
}

/* Avatar + social icons overlap the banner's bottom edge — the negative
   margin here is what pulls this row up onto the banner image. */
.fo-profile-avatar-row {
	display:      flex;
	align-items:  flex-end;
	gap:          14px;
	margin-top:   -56px;
	position:     relative;
}

@media (max-width: 640px) {
	.fo-profile-avatar-row { margin-top: -44px; }
}

/* -------------------------------------------------------------------------
   Profile photo
   ------------------------------------------------------------------------- */

.fo-profile-photo { flex-shrink: 0; }

/* Fixed 2026-07-11: border was `4px solid`, and box-sizing:border-box (set
   globally on .fo-vendor-profile *) makes a border eat INTO the box rather
   than add to it — the photo was rendering at 104x104 inside a 112x112 box,
   leaving a visible ring of plain surface color around it. Said's report,
   "avatar picture should cover the full avatar container", was that ring.
   Using outline instead: outlines draw OUTSIDE the border box and never
   affect its content size, so the photo now fills the full 112x112 circle
   edge to edge, with the same visual ring effect preserved via the outline. */
.fo-vendor-photo {
	width:       112px !important; /* !important: Divi sets img width:auto */
	height:      112px !important;
	border-radius: 50% !important;
	outline:     4px solid var(--fo-surface) !important;
	box-shadow:  0 2px 10px rgba(0,0,0,.15);
	object-fit:  cover !important;
	display:     block !important;
}

.fo-vendor-photo-placeholder {
	width:           112px;
	height:          112px;
	border-radius:   50%;
	outline:         4px solid var(--fo-surface);
	box-shadow:      0 2px 10px rgba(0,0,0,.15);
	background:      var(--fo-border);
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       42px;
	font-weight:     700;
	color:           var(--fo-muted);
	line-height:     1;
}

@media (max-width: 640px) {
	.fo-vendor-photo,
	.fo-vendor-photo-placeholder { width: 88px; height: 88px; }
}

/* -------------------------------------------------------------------------
   Identity block — name/location/badges, below the avatar row
   ------------------------------------------------------------------------- */

.fo-profile-identity { margin-top: 14px; }

.fo-vendor-name {
	font-size:   clamp(22px, 4vw, 36px) !important;
	font-weight: 700 !important;
	margin:      0 0 6px !important;
	line-height: 1.15 !important;
	color:       var(--fo-text) !important;
}

/* Multi-location vendors only — see the class docblock on FO_Location. */
.fo-vendor-location-name {
	display:     block;
	font-size:   14px;
	font-weight: 500;
	color:       var(--fo-muted);
	margin-top:  2px;
}

.fo-vendor-location {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   14px;
	color:       var(--fo-muted);
	margin:      0 0 12px;
}

@media (max-width: 640px) {
	.fo-vendor-location { justify-content: center; }
}

/* -------------------------------------------------------------------------
   Location picker (2026-07-20) — only rendered when a business has more
   than one active location. See profile-content.php.
   ------------------------------------------------------------------------- */

.fo-vendor-location-picker {
	display:      flex;
	align-items:  center;
	gap:          8px;
	margin:       0 0 14px;
	font-size:    14px;
}

.fo-vendor-location-picker label {
	color:       var(--fo-muted);
	font-weight: 600;
}

.fo-vendor-location-picker select {
	padding:      6px 10px;
	border:       1px solid var(--fo-border, #d1d5db);
	border-radius: 6px;
	font-size:    14px;
	background:   #fff;
	max-width:    280px;
}

@media (max-width: 640px) {
	.fo-vendor-location-picker { justify-content: center; }
}

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */

.fo-profile-badges {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
	margin:    0 0 14px;
}

@media (max-width: 640px) {
	.fo-profile-badges { justify-content: center; }
}

/* BEM added 2026-07-11: same shared .fo-badge base used in fo-dashboard.css
   (sold badge) and fo-admin.css (status pills). Modifiers here keep their
   original single-hyphen names as working aliases (.fo-badge-verified etc.)
   alongside the double-dash BEM form. */
.fo-badge {
	display:        inline-block;
	padding:        4px 12px;
	font-size:      12px !important;
	font-weight:    600;
	border-radius:  var(--fo-radius-pill);
	letter-spacing: .02em;
	line-height:    1.4;
}

.fo-badge-commissions,
.fo-badge--catering { background: var(--fo-success-bg); color: var(--fo-success-text); border: 1px solid #6ee7b7; }
.fo-badge-verified,
.fo-badge--verified     { background: var(--fo-info-bg);    color: var(--fo-info-text);    border: 1px solid #93c5fd; }
.fo-badge-featured,
.fo-badge--featured     { background: var(--fo-warning-bg); color: var(--fo-warning-text); border: 1px solid #fcd34d; }
.fo-badge-early-member,
.fo-badge--early-member { background: #f5f3ff; color: #4c1d95; border: 1px solid #c4b5fd; } /* purple — one-off, no shared token */
/* Same visual family as --verified (it's a stricter version of the same
   claim — OAuth-proven, not admin-asserted) — see
   FO_Vendor_Profile_Page::get_profile_data() for how this one gets into
   $badges (live-computed, never persisted). */
.fo-badge--google-verified { background: var(--fo-info-bg); color: var(--fo-info-text); border: 1px solid #93c5fd; }

/* -------------------------------------------------------------------------
   Social links — sits beside the avatar in the overlap row (2026-07-11
   hero rebuild). Was previously right-aligned in a full-width row; now
   left-aligned, inline with the avatar, at the row's bottom edge.
   ------------------------------------------------------------------------- */

.fo-profile-social {
	display:     flex;
	flex-wrap:   wrap;
	gap:         8px;
	padding-bottom: 6px; /* aligns icon row with the avatar's bottom edge */
}

/* Icon-only, round. Override Divi's a:hover transforms and color resets. */
.fo-profile-social .fo-social-link,
.fo-profile-social .fo-social-link:visited {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	width:           32px !important;
	height:          32px !important;
	padding:         0 !important;
	font-size:       14px !important;
	border:          1px solid var(--fo-border) !important;
	border-radius:   var(--fo-radius-pill) !important;
	text-decoration: none !important;
	color:           var(--fo-muted) !important;
	background:      var(--fo-surface) !important;
	transition:      border-color .15s, color .15s !important;
	line-height:     1 !important;
}

.fo-profile-social .fo-social-link:hover {
	border-color: var(--fo-accent) !important;
	color:        var(--fo-accent) !important;
}

/* -------------------------------------------------------------------------
   Buttons (2026-07-11, BEM pass 2026-07-11) — base chrome for every
   button-tagged control on this page: Contact Vendor, Follow Vendor, the
   message-form Send button. None of these had real chrome before the first
   pass, only isolated resets (margin/cursor/box-shadow) — they rendered as
   bare browser buttons. .fo-btn/.fo-btn--primary are now the canonical
   names (matching fo-dashboard.css/fo-admin.css's own .fo-btn convention);
   .button/.button-primary/.fo-contact-button are kept as working aliases.
   ------------------------------------------------------------------------- */

.fo-vendor-profile .button,
.fo-vendor-profile .fo-btn {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	padding:         9px 20px !important;
	font-size:       14px !important;
	font-weight:     600 !important;
	border:          1px solid var(--fo-border) !important;
	border-radius:   var(--fo-radius) !important;
	background:      var(--fo-surface) !important;
	color:           var(--fo-text) !important;
	cursor:          pointer !important;
	text-decoration: none !important;
	line-height:     1.4 !important;
	transition:      background .15s, border-color .15s, color .15s !important;
}
.fo-vendor-profile .button:hover,
.fo-vendor-profile .fo-btn:hover {
	border-color: var(--fo-accent) !important;
	color:        var(--fo-accent) !important;
}
.fo-vendor-profile .button-primary,
.fo-vendor-profile .fo-btn--primary {
	background:   var(--fo-accent) !important;
	border-color: var(--fo-accent) !important;
	color:        #fff !important;
}
.fo-vendor-profile .button-primary:hover,
.fo-vendor-profile .fo-btn--primary:hover {
	filter: brightness(0.9) !important;
	color:  #fff !important;
}

/* -------------------------------------------------------------------------
   Contact button — the primary CTA, filled with the accent color. Same
   look as .button-primary/.fo-btn--primary above; kept as its own name
   since it's referenced directly from templates/default/vendor-profile.php.
   ------------------------------------------------------------------------- */

.fo-contact-button,
button.fo-contact-button {
	margin-top:   4px !important;
	cursor:       pointer !important;
	background:   var(--fo-accent) !important;
	border-color: var(--fo-accent) !important;
	color:        #fff !important;
}
.fo-contact-button:hover,
button.fo-contact-button:hover {
	filter: brightness(0.9) !important;
	color:  #fff !important;
}

.fo-follower-count {
	font-size: 13px;
	color:     var(--fo-muted);
}

/* -------------------------------------------------------------------------
   Body — narrow sidebar + wide main, replacing the old full-width 2-column
   bio/statement grid (2026-07-11 wireframe rebuild). The sidebar holds the
   Follow/Message actions and the bio; the vendor statement no longer
   renders here at all — see .fo-profile-about further down, and
   .fo-read-statement-link below.
   ------------------------------------------------------------------------- */

.fo-profile-body {
	padding:       40px 0;
	border-bottom: 1px solid var(--fo-border);
	width:         100%;
}

/* Filters/main split. 2026-07-15 — same fix as the hero above and same
   reason: this was a grid with a 1fr filters column, and the filter
   panel's actual content (a couple of checkbox labels) is nowhere near
   wide enough to fill a full 1fr track, leaving the same kind of dead
   gap in front of the artwork grid that the hero had in front of the
   bio. Rebuilt as flex with a fixed, content-sized sidebar (260px — the
   same value this column used before the 1fr/2fr ratio experiment) so
   the gap visitors see is just the deliberate 40px gutter, not empty
   grid track. No longer ratio-matched to the hero row above; see the
   comment on .fo-profile-hero-content--with-bio. */
.fo-vendor-profile .fo-profile-body-inner {
	display:      flex !important;
	flex-wrap:    wrap;
	gap:          40px !important;
	max-width:    var(--fo-max-width);
	margin:       0 auto;
	padding:      0 var(--fo-gutter);
	align-items:  flex-start !important;
}

.fo-vendor-profile .fo-profile-sidebar {
	flex:      0 0 260px !important;
	max-width: 260px !important;
	min-width: 0;
}

@media (max-width: 780px) {
	.fo-vendor-profile .fo-profile-body-inner { gap: 28px !important; }
	.fo-vendor-profile .fo-profile-sidebar     { flex-basis: 100%; max-width: 100% !important; }
	.fo-vendor-profile .fo-profile-main        { flex-basis: 100%; }
}

/* Follow/Message — lives in the hero band now, right under the
   name/location/badges, not the body sidebar (2026-07-15, moved so these
   buttons sit at a consistent position regardless of how tall the bio
   column grows — see the comment above .fo-profile-hero-actions in
   profile-content.php for the full reasoning).

   2026-07-15 — dropped the 220px max-width. That cap was a leftover from
   when these buttons lived in the old fixed-260px body sidebar; once
   moved into the hero's 1fr meta column (now roughly 1/3 of the full row,
   same track as .fo-profile-body-inner's filter column), the 220px cap
   left a large dead gap between the buttons and the bio column instead of
   the buttons filling their column like the filter panel below does.
   Buttons are width:100% of this block (see .fo-vendor-profile
   .fo-btn--sidebar), so removing the cap makes them fill the actual 1/3
   track. */
.fo-vendor-profile .fo-profile-hero-actions {
	display:        flex !important;
	flex-direction: column;
	gap:            8px;
	margin-top:     16px;
}

/* Full-width, stacked block buttons — Follow / Message, per wireframe.
   A distinct look from the inline .fo-btn used elsewhere on this page
   (Contact Vendor, Inquire, etc.), so it's its own modifier rather than
   overriding the shared base. */
.fo-vendor-profile .fo-btn--sidebar {
	width:       100% !important;
	display:     flex !important;
	text-align:  center;
}

.fo-profile-following-status {
	display:     flex;
	align-items: center;
	gap:         10px;
	font-size:   13px;
	padding:     9px 0;
}

.fo-following-check {
	color:       #15803d;
	font-weight: 600;
}

.fo-profile-following-status .fo-unfollow-btn {
	background: none;
	border:     none;
	padding:    0;
	color:      var(--fo-muted);
	cursor:     pointer;
	text-decoration: underline;
	font-size:  12px;
}

.fo-vendor-bio,
.fo-vendor-statement {
	font-size:   15px;
	line-height: 1.65;
	color:       var(--fo-text);
}

.fo-vendor-bio p,
.fo-vendor-statement p { margin: 0 0 1em; }
.fo-vendor-bio p:last-child,
.fo-vendor-statement p:last-child { margin-bottom: 0; }

.fo-read-statement-link {
	display:         inline-block;
	margin-top:      14px;
	font-size:       14px !important;
	font-weight:     700 !important;
	color:           var(--fo-text) !important;
	text-decoration: underline !important;
}

/* Sidebar product-filters block (category/medium/style/material) removed
   2026-07-19 — it was F! Gallery's per-vendor filter panel
   (FO_Product_Filters::render_vendor_filter_panel(), also removed), which
   had zero callers left once the profile page moved to plain menu-nav
   anchor links (see templates/default/partials/profile-content.php). */

.fo-profile-main { flex: 1 1 480px; min-width: 0; }

/* -------------------------------------------------------------------------
   Main column heading + work count
   ------------------------------------------------------------------------- */

.fo-profile-main h2 {
	font-size:   20px !important;
	font-weight: 700 !important;
	margin:      0 0 24px !important;
	color:       var(--fo-text) !important;
}

.fo-profile-work-count {
	margin:      0 0 8px !important;
	font-size:   13px !important;
	font-weight: 600 !important;
	color:       var(--fo-muted) !important;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.fo-studio-note {
	margin:    0 0 16px;
	font-size: 13px;
	color:     var(--fo-muted);
}

/* -------------------------------------------------------------------------
   Tab bar — Artwork / Moniker / Studio, per wireframe: a solid segmented
   control (dark active segment, gray inactive), replacing the old
   underline-tabs/pills switcher (2026-07-11 rebuild). Only rendered when
   more than one of the three has content — see the template's $fo_tabs
   logic. The old FO_Vendor_Profile::OPT_PROFILE_NAV_STYLE admin setting
   (tabs vs. pills) is left in place but no longer drives this control —
   it wasn't built to express a 3-way segmented layout, and this wireframe
   is unambiguous about the intended look, so we're not guessing at how to
   stretch the old setting to cover a case it was never designed for.
   ------------------------------------------------------------------------- */

.fo-profile-tabbar {
	display:       flex;
	margin:        0 0 24px;
	border-radius: var(--fo-radius);
	overflow:      hidden;
}

.fo-profile-tab {
	flex:            1;
	text-align:      center;
	padding:         14px 12px;
	font-size:       14px !important;
	font-weight:     600 !important;
	text-decoration: none !important;
	color:           #fff !important;
	background:      var(--fo-muted);
	transition:      background .15s;
}

.fo-profile-tab:hover { background: var(--fo-text); }

.fo-profile-tab.is-active {
	background: var(--fo-text) !important;
}

/* Fixed 2026-07-11: auto-fill reserves as many column tracks as fit the
   row even when there are fewer items than tracks — with the profile now
   full-width, a short 2-3 item grid was leaving several invisible empty
   tracks and a wide band of blank space to the right of the last real
   card instead of using that space. auto-fit collapses the empty tracks
   instead, so the 1fr sizing redistributes across only the real cards.

   Follow-up fix, same day: auto-fit alone still looked broken with only
   1-2 items — with every empty track collapsed, the lone real track's
   1fr absorbed the ENTIRE row width, so a single work card (its image is
   a 1:1 square, see .fo-work-image-link) would balloon to the full width
   of the page and everything below it read as a "massive gap" by
   comparison. Capping the card at a sane max-width and centering the row
   keeps cards a consistent, reasonable size regardless of how many there
   are, with any leftover space distributed evenly instead of dumped
   into one giant card or one trailing blank band. */
.fo-works-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap:                   24px;
}

/* Caps how wide a card can grow when its auto-fit track ends up oversized
   (few items in the grid) — see comment above — and centers it within
   that track so unused space reads as even margin, not a stray gap. */
.fo-work-card { max-width: 340px; width: 100%; justify-self: center; }

@media (max-width: 480px) {
	.fo-works-grid {
		grid-template-columns: repeat(2, 1fr);
		gap:                   12px;
	}
}

/* -------------------------------------------------------------------------
   Work card
   ------------------------------------------------------------------------- */

/* Shares its surface/border/radius with .fo-card (fo-admin.css,
   fo-dashboard.css) — same shared class name, so it's the one card shape
   to reach for anywhere in the plugin, not just this file. */
.fo-card,
.fo-work-card {
	background:     var(--fo-surface);
	border:         1px solid var(--fo-border);
	border-radius:  var(--fo-radius-lg);
}
.fo-work-card {
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	transition:     box-shadow .15s;
}

.fo-work-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* Divi applies transform:translateY on hover to some elements — neutralize */
.fo-work-card:hover { transform: none !important; }

.fo-work-image-link {
	display:       block !important;
	position:      relative;
	aspect-ratio:  1;
	overflow:      hidden;
	text-decoration: none !important;
}

.fo-work-image {
	width:      100% !important;
	height:     100% !important;
	object-fit: cover !important;
	display:    block !important;
	transition: transform .2s;
}

.fo-work-card:hover .fo-work-image { transform: scale(1.03); }

.fo-work-image-placeholder {
	width:      100%;
	height:     100%;
	background: var(--fo-bg);
}

.fo-sold-overlay {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      rgba(0,0,0,.45);
	color:           #fff !important;
	font-size:       18px;
	font-weight:     700;
	letter-spacing:  .05em;
	text-transform:  uppercase;
}

.fo-work-sold .fo-work-image { filter: grayscale(40%); }

.fo-work-info { padding: 14px; flex: 1; }

.fo-work-title {
	font-size:   15px !important;
	font-weight: 600 !important;
	margin:      0 0 4px !important;
	line-height: 1.3 !important;
}

.fo-work-title a,
.fo-work-title a:visited {
	text-decoration: none !important;
	color:           var(--fo-text) !important;
}

.fo-work-title a:hover { color: var(--fo-accent) !important; }

.fo-work-meta {
	font-size: 12px;
	color:     var(--fo-muted);
	margin:    0 0 4px;
}

.fo-work-details {
	font-size: 11px;
	color:     var(--fo-subtle);
	margin:    0 0 6px;
}

.fo-work-price {
	font-size:   14px;
	font-weight: 600;
	margin:      0;
}

/* Elementor and Divi sometimes strip button styles — restore for inquire link */
button.fo-inquire-link {
	background:      none !important;
	border:          none !important;
	padding:         0 !important;
	font-size:       13px !important;
	color:           var(--fo-accent) !important;
	text-decoration: underline !important;
	cursor:          pointer !important;
	font-weight:     500 !important;
}

/* -------------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------------- */

.fo-modal {
	position:        fixed;
	inset:           0;
	z-index:         999999; /* Above Divi's z-index: 99999 */
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         20px;
}

.fo-modal[hidden] { display: none; }

.fo-modal-inner {
	position:    relative;
	background:  var(--fo-surface);
	border-radius: var(--fo-radius-lg);
	box-shadow:  0 20px 60px rgba(0,0,0,.2);
	padding:     32px;
	width:       100%;
	max-width:   520px;
	max-height:  90vh;
	overflow-y:  auto;
	z-index:     1000000;
}

.fo-modal-close {
	position:   absolute;
	top:        16px;
	right:      16px;
	background: none !important;
	border:     none !important;
	font-size:  20px;
	cursor:     pointer;
	color:      var(--fo-muted);
	padding:    4px 8px;
	line-height: 1;
}

.fo-modal-overlay {
	position:   fixed;
	inset:      0;
	background: rgba(0,0,0,.5);
	z-index:    999998;
}

.fo-modal-overlay[hidden] { display: none; }

body.fo-modal-open { overflow: hidden; }

/* Modal form */
.fo-message-form .fo-form-row {
	display:        flex;
	flex-direction: column;
	gap:            5px;
	margin-bottom:  16px;
}

.fo-message-form label {
	font-size:   14px;
	font-weight: 600;
	color:       var(--fo-text);
}

/* Override theme input resets inside modal */
.fo-message-form input[type="text"],
.fo-message-form input[type="email"],
.fo-message-form textarea {
	width:         100% !important;
	padding:       9px 12px !important;
	border:        1px solid var(--fo-border) !important;
	border-radius: var(--fo-radius) !important;
	font-size:     14px !important;
	font-family:   inherit !important;
	background:    var(--fo-surface) !important;
	color:         var(--fo-text) !important;
	box-sizing:    border-box !important;
	outline:       none;
	transition:    border-color .15s;
}

.fo-message-form input:focus,
.fo-message-form textarea:focus {
	border-color: var(--fo-accent) !important;
	box-shadow:   0 0 0 3px rgba(45,106,79,.12) !important;
}

.fo-form-notice {
	padding:       10px 14px;
	border-radius: var(--fo-radius);
	font-size:     13px;
	margin-bottom: 16px;
}

.fo-notice-success,
.fo-notice--success { background: var(--fo-success-bg); color: var(--fo-success-text); border-left: 3px solid var(--fo-success); }
.fo-notice-error,
.fo-notice--error   { background: var(--fo-danger-bg);  color: var(--fo-danger-text);  border-left: 3px solid var(--fo-danger); }

.fo-required { color: var(--fo-danger); margin-left: 2px; }

/* -------------------------------------------------------------------------
   Dashboard — cross-theme fixes applied inside .fo-dashboard-* scope
   ------------------------------------------------------------------------- */

/* Divi resets paragraph margins — restore inside dashboard */
.fo-dashboard-overview p,
.fo-dashboard-products p,
.fo-dashboard-orders p,
.fo-dashboard-earnings p,
.fo-dashboard-payouts p,
.fo-dashboard-settings p,
.fo-dashboard-messages p {
	margin: 0 0 12px;
}

/* Divi sets all inputs to border-radius:0 — override inside our components */
.fo-field-group input,
.fo-field-group select,
.fo-field-group textarea,
.fo-message-form input,
.fo-message-form textarea {
	border-radius: 6px !important;
}

/* Elementor resets button appearance */
.fo-dashboard-nav a.is-active,
button.fo-send-btn {
	box-shadow: none !important;
}

/* GeneratePress applies max-width to images — neutralize in grid */
.fo-works-grid img,
.fo-table img,
.fo-products-table img {
	max-width: 100% !important;
	height:    auto !important;
}

/* Astra applies list-style to all ul/li — not an issue but safe to reset */
.fo-dashboard-nav { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* -------------------------------------------------------------------------
   Store Policies
   ------------------------------------------------------------------------- */

.fo-profile-policies {
	padding:    48px 0;
	width:      100%;
	background: var(--fo-surface);
	border-top: 1px solid var(--fo-border);
}

.fo-profile-policies-inner {
	max-width: var(--fo-max-width);
	margin:    0 auto;
	padding:   0 var(--fo-gutter);
}

.fo-profile-policies h2 {
	font-size:   20px !important;
	font-weight: 700 !important;
	margin:      0 0 24px !important;
	color:       var(--fo-text) !important;
}

.fo-policies-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap:                   20px;
}

.fo-policy-block {
	/* Fixed 2026-07-11: these referenced --fo-background and --fo-text-muted,
	   neither of which was ever defined anywhere (the real names are --fo-bg
	   and --fo-muted) — an undefined var() silently falls back to nothing
	   rather than erroring, so this block has been missing its intended
	   background and this heading its intended color since the day it was
	   written. */
	background:    var(--fo-bg);
	border:        1px solid var(--fo-border);
	border-radius: var(--fo-radius-lg);
	padding:       20px 22px;
}

.fo-policy-block h3 {
	font-size:     13px !important;
	font-weight:   700 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	color:          var(--fo-muted) !important;
	margin:         0 0 10px !important;
}

.fo-policy-block p {
	font-size:   14px !important;
	line-height: 1.6 !important;
	color:       var(--fo-text) !important;
	margin:      0 0 8px !important;
}

/* -------------------------------------------------------------------------
   About the Vendor — bottom block, per wireframe (2026-07-11 rebuild).
   Two columns: the visual narrative image sequence (left, enlarged to
   read as a substantial block, not a row of small thumbnails) and a
   narrower side column with the followers widget, "Member since," and
   the vendor statement itself. Was previously two separate things — a
   standalone full-width Visual Narrative section, and the statement
   rendered inline next to the bio up top — now unified into one section,
   since the wireframe places them together and the sidebar's "Read Vendor
   Statement" link jumps straight here.
   ------------------------------------------------------------------------- */

.fo-profile-about {
	padding: 48px 0;
	width:   100%;
}

.fo-profile-about-inner {
	display:               grid;
	grid-template-columns: 1.3fr 1fr;
	gap:                   40px;
	max-width:             var(--fo-max-width);
	margin:                0 auto;
	padding:               0 var(--fo-gutter);
	align-items:           start;
}

@media (max-width: 780px) {
	.fo-profile-about-inner {
		grid-template-columns: 1fr;
		gap:                   28px;
	}
}

.fo-profile-about-gallery { min-width: 0; position: relative; }

/* Horizontal scroll strip, not a grid — order is the whole point, so it
   reads left-to-right like a photo essay. Enlarged from the original
   320px height so a single image reads as a substantial block, matching
   the wireframe, while still supporting multiple images in sequence. */
.fo-narrative-gallery-strip {
	display:          flex;
	gap:              10px;
	overflow-x:       auto;
	border-radius:    var(--fo-radius-lg);
	scroll-snap-type: x proximity;
	scroll-behavior:  smooth;
}

.fo-narrative-gallery-image {
	flex:          0 0 auto;
	height:        420px;
	width:         auto;
	max-width:     100%;
	object-fit:    cover;
	border-radius: var(--fo-radius-lg);
	scroll-snap-align: start;
}

@media (max-width: 780px) {
	.fo-narrative-gallery-image { height: 280px; }
}

/* Bug fix (2026-07-13): the strip above only ever relied on a bare
   overflow-x:auto with no visible cue that more images sit off-screen —
   easy to miss entirely, especially on systems where OS scrollbars only
   appear while actively scrolling. These arrows make the extra images
   discoverable and give "isn't sliding" a real, obvious slide action. */
.fo-narrative-nav {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	width:           40px;
	height:          40px;
	border-radius:   50%;
	border:          none;
	background:      rgba(17, 24, 39, .55);
	color:            #fff;
	font-size:        22px;
	line-height:      1;
	cursor:           pointer;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	z-index:          2;
}

.fo-narrative-nav:hover { background: rgba(17, 24, 39, .8); }

.fo-narrative-prev { left:  10px; }
.fo-narrative-next { right: 10px; }

@media (max-width: 780px) {
	.fo-narrative-nav { width: 32px; height: 32px; font-size: 18px; }
}

.fo-profile-about-side { min-width: 0; }

.fo-profile-followers-widget {
	display:      flex;
	align-items:  center;
	gap:          8px;
	margin:       0 0 4px;
	font-size:    13px;
	color:        var(--fo-muted);
}

.fo-followers-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           24px;
	height:          24px;
	border-radius:   50%;
	background:      var(--fo-bg);
	color:            var(--fo-muted);
	font-size:       11px;
}

.fo-member-since {
	margin:    0 0 20px;
	font-size: 13px;
	color:     var(--fo-muted);
}

.fo-profile-about-side h2 {
	font-size:   20px !important;
	font-weight: 700 !important;
	margin:      0 0 14px !important;
	color:       var(--fo-text) !important;
}

.fo-policy-block p:last-child {
	margin-bottom: 0 !important;
}

@media (max-width: 600px) {
	.fo-policies-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Store Policies — WooCommerce product tab
   ------------------------------------------------------------------------- */

.fo-product-policies {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 16px;
}

.fo-product-policy-block {
	/* fo-tokens.css is :root-scoped and always enqueued alongside this
	   file (see FO_Assets::enqueue_frontend()), so these tokens are
	   guaranteed to exist here even outside .fo-vendor-profile's own
	   scope — no hardcoded fallback value needed. */
	background:    var(--fo-surface);
	border:        1px solid var(--fo-border);
	border-radius: var(--fo-radius-lg);
	padding:       16px 18px;
}

.fo-product-policy-block h3 {
	font-size:      12px !important;
	font-weight:    700 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	color:          var(--fo-muted) !important;
	margin:         0 0 8px !important;
}

.fo-product-policy-block p {
	font-size:   13px !important;
	line-height: 1.6 !important;
	color:       var(--fo-body) !important;
	margin:      0 0 6px !important;
}

.fo-product-policy-block p:last-child {
	margin-bottom: 0 !important;
}

@media (max-width: 480px) {
	.fo-product-policies {
		grid-template-columns: 1fr;
	}
}

/* ── Vacation notice (vendor profile page) ─────────────────── */
/* -------------------------------------------------------------------------
   [fo_vendor_profile] shortcode embed — fills 100% of its container
   ------------------------------------------------------------------------- */

/* 2026-07-15 — when this content renders via the [fo_vendor_profile]
   shortcode (FO_Vendor_Profile_Page::render_profile_shortcode()) instead of
   the default virtual /vendor/{slug}/ endpoint, the site owner is dropping
   it into their own hand-built page-builder row (Divi Theme Builder, etc.)
   and controlling its outer width/gutters themselves — this content should
   just fill 100% of whatever it's placed in, not get capped a second time
   by this plugin's own --fo-max-width/--fo-gutter. Scoped to
   .fo-vendor-profile-embed (the shortcode's own wrapper) so the default
   endpoint's centered/gutter layout is completely untouched. */
.fo-vendor-profile-embed {
	width:     100%;
	max-width: 100%;
}

.fo-vendor-profile-embed .fo-profile-hero-content,
.fo-vendor-profile-embed .fo-profile-body-inner,
.fo-vendor-profile-embed .fo-profile-about-inner,
.fo-vendor-profile-embed .fo-profile-policies-inner {
	max-width:     100%;
	padding-left:  0;
	padding-right: 0;
}

.fo-vacation-notice {
	background:    var(--fo-warning-bg);
	border:        1px solid #fcd34d; /* lighter amber tint, not in the shared semantic set */
	border-radius: var(--fo-radius-lg);
	color:         var(--fo-warning-text);
	font-size:     14px;
	line-height:   1.5;
	margin:        0 0 24px;
	padding:       14px 18px;
}

/* -------------------------------------------------------------------------
   Vendor directory (/vendors, /moniker-brands) — FO_Vendor_Directory
   -------------------------------------------------------------------------

   2026-07-15 — rebuilt from a bare unstyled name-under-a-Gravatar list
   (Said: "give me something better than this") into real cards, now that
   FO_Assets enqueues this stylesheet on these pages too (see
   $is_directory_page in core/class-fo-assets.php). Not scoped under
   .fo-vendor-profile — this isn't the profile page — but it reuses the
   same design tokens from fo-tokens.css so it doesn't invent a second
   visual language for what is, structurally, the same site.

   Deliberately NOT ratio/grid-matched to anything — see the
   [[feedback-css-dont-chase-pixel-alignment]] lesson from the hero/body
   rework earlier the same day; this is its own independent grid with no
   other row it needs to line up with. */

.fo-vendor-directory {
	max-width: 1080px;
	margin:    0 auto;
	padding:   0 var(--fo-space-6, 24px);
	box-sizing: border-box;
}

.fo-vendor-directory * { box-sizing: border-box; }

.fo-vendor-directory-search {
	display:       flex;
	flex-wrap:     wrap;
	gap:           10px;
	margin-bottom: var(--fo-space-8, 32px);
}

.fo-vendor-directory-search input[type="search"] {
	flex:          1 1 240px;
	max-width:     360px;
	padding:       10px 14px;
	border:        1px solid var(--fo-input-border);
	border-radius: var(--fo-radius);
	font-size:     var(--fo-text-md);
	color:         var(--fo-text);
	background:    var(--fo-surface);
}

.fo-vendor-directory-search input[type="search"]:focus,
.fo-vendor-directory-search select:focus {
	outline:    none;
	border-color: var(--fo-primary);
	box-shadow: 0 0 0 3px var(--fo-focus-ring);
}

.fo-vendor-directory-search select {
	padding:       10px 14px;
	border:        1px solid var(--fo-input-border);
	border-radius: var(--fo-radius);
	font-size:     var(--fo-text-md);
	color:         var(--fo-text);
	background:    var(--fo-surface);
}

.fo-vendor-directory-search-btn {
	padding:       10px 18px;
	border:        1px solid var(--fo-border);
	border-radius: var(--fo-radius);
	background:    var(--fo-surface);
	color:         var(--fo-text);
	font-size:     var(--fo-text-md);
	cursor:        pointer;
}

.fo-vendor-directory-category {
	font-size:      var(--fo-text-sm);
	color:          var(--fo-subtle);
	margin:         0 0 6px;
}

.fo-vendor-directory-distance {
	font-size:   12px;
	font-weight: 600;
	color:       var(--fo-primary);
	margin:      0 0 6px;
}

.fo-vendor-directory-badges {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
	justify-content: center;
	margin-top: 8px;
}

.fo-vendor-directory-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:                   var(--fo-space-6, 24px);
	list-style:            none;
	margin:                0;
	padding:               0;
}

.fo-vendor-directory-card {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	text-decoration: none !important;
	color:           inherit;
	background:      var(--fo-surface);
	border:          1px solid var(--fo-border);
	border-radius:   var(--fo-radius-lg);
	box-shadow:      var(--fo-shadow);
	padding:         28px 20px 24px;
	transition:      box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.fo-vendor-directory-card:hover {
	box-shadow:   var(--fo-shadow-lg);
	border-color: var(--fo-border-strong);
	transform:    translateY(-2px);
}

img.fo-vendor-directory-avatar,
.fo-vendor-directory-avatar-placeholder {
	width:          96px;
	height:         96px;
	border-radius:  50%;
	margin:         0 0 16px;
	display:        flex;
	outline:        3px solid var(--fo-bg-inset);
}

img.fo-vendor-directory-avatar {
	object-fit: cover;
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.fo-vendor-directory-avatar-placeholder {
	align-items:     center;
	justify-content: center;
	background:      var(--fo-border);
	color:           var(--fo-surface);
	font-size:       32px;
	font-weight:     700;
}

.fo-vendor-directory-name {
	font-size:   17px;
	font-weight: 700;
	color:       var(--fo-text);
	line-height: 1.3;
	margin:      0 0 4px;
}

.fo-vendor-directory-location {
	display:      flex;
	align-items:  center;
	gap:          5px;
	font-size:    13px;
	color:        var(--fo-muted);
	margin:       0 0 6px;
}

.fo-vendor-directory-location i { font-size: 11px; }

.fo-vendor-directory-count {
	font-size:      var(--fo-text-sm);
	color:          var(--fo-subtle);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top:     4px;
}

.fo-vendor-directory-empty {
	color:      var(--fo-muted);
	text-align: center;
	padding:    64px 0;
	font-size:  var(--fo-text-lg);
}

@media (max-width: 480px) {
	.fo-vendor-directory-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.fo-vendor-directory-card { padding: 20px 12px 18px; }
}

/* -------------------------------------------------------------------------
   Product browse pages (/f-gallery, /moniker) — FO_Product_Filters
   -------------------------------------------------------------------------

   2026-07-15 — same fix as the vendor directory above (Said: "do
   something similar for /moniker"), and the same underlying bug: neither
   page ever had this stylesheet enqueued (see $is_browse_page in
   core/class-fo-assets.php), so the filter panel was raw browser-default
   <select>/<fieldset> controls and the product grid was WooCommerce's
   bare default card markup. Sidebar+main layout mirrors the vendor
   profile's body row for visual consistency, not because the two need to
   line up — see [[feedback-css-dont-chase-pixel-alignment]]. !important
   used only on the WooCommerce grid override below, where WooCommerce's
   own ul.products rules and the host theme both have a real shot at
   winning the cascade otherwise — same reasoning as this file's header
   note on !important usage. */

.fo-browse-page {
	max-width:  1200px;
	margin:     0 auto;
	padding:    40px var(--fo-gutter, 24px);
	box-sizing: border-box;
}

.fo-browse-page * { box-sizing: border-box; }

/* Type tabs — the first filter (1.0.15). Plain links, not a form; see
   FO_Product_Filters::render_type_tabs(). Sits above the sidebar+grid
   layout, full width, so it reads as the primary way to narrow /browse
   rather than one more field buried in the sidebar. */
.fo-browse-types {
	display:      flex;
	flex-wrap:    wrap;
	gap:          8px;
	margin:       0 0 28px;
	padding:      0 0 20px;
	border-bottom: 1px solid var(--fo-border);
}

.fo-browse-type {
	display:         inline-flex;
	align-items:     center;
	padding:         8px 16px;
	font-size:       13px;
	font-weight:     600;
	color:           var(--fo-body);
	background:      var(--fo-bg-inset);
	border:          1px solid transparent;
	border-radius:   var(--fo-radius-pill);
	text-decoration: none;
	white-space:     nowrap;
	transition:      background .15s, color .15s, border-color .15s;
}

.fo-browse-type:hover {
	background: var(--fo-border);
	color:      var(--fo-text);
}

.fo-browse-type.is-active {
	background:   var(--fo-primary);
	border-color: var(--fo-primary);
	color:        var(--fo-surface);
}

.fo-browse-inner {
	display:     flex;
	flex-wrap:   wrap;
	gap:         40px;
	align-items: flex-start;
}

.fo-browse-sidebar { flex: 0 0 260px; max-width: 260px; }
.fo-browse-main    { flex: 1 1 480px; min-width: 0; }

.fo-filter-heading {
	font-size:      12px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:          var(--fo-muted);
	margin:         0 0 14px;
}

.fo-filter-panel {
	display:        flex;
	flex-direction: column;
	gap:            18px;
}

.fo-filter-field { display: flex; flex-direction: column; gap: 6px; }

.fo-filter-field label:not(.fo-filter-checkbox) {
	font-size:      12px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color:          var(--fo-text);
}

.fo-filter-field select {
	width:         100%;
	padding:       8px 10px;
	border:        1px solid var(--fo-input-border);
	border-radius: var(--fo-radius);
	font-size:     13px;
	color:         var(--fo-text);
	background:    var(--fo-surface);
}

.fo-filter-field select:focus {
	outline:      none;
	border-color: var(--fo-primary);
	box-shadow:   0 0 0 3px var(--fo-focus-ring);
}

fieldset.fo-filter-field {
	border:  none;
	padding: 0;
	margin:  0;
}

fieldset.fo-filter-field legend {
	font-size:      12px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color:          var(--fo-text);
	padding:        0;
	margin:         0 0 8px;
}

.fo-filter-checkbox {
	display:        flex;
	align-items:    center;
	gap:            7px;
	font-size:      13px;
	font-weight:    400;
	text-transform: none;
	letter-spacing: normal;
	color:          var(--fo-text);
	margin:         0 0 7px;
	cursor:         pointer;
}

.fo-filter-checkbox input { margin: 0; }

.fo-filter-submit {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         10px 20px;
	font-size:       14px;
	font-weight:     600;
	border:          1px solid var(--fo-text);
	border-radius:   var(--fo-radius);
	background:      var(--fo-text);
	color:           var(--fo-surface);
	cursor:          pointer;
	transition:      background .15s, border-color .15s;
}

.fo-filter-submit:hover {
	background:   var(--fo-primary);
	border-color: var(--fo-primary);
}

.fo-browse-count {
	font-size:      13px;
	color:          var(--fo-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin:         0 0 20px;
}

ul.fo-browse-grid.products {
	display:               grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap:                   28px !important;
	list-style:            none !important;
	margin:                0 !important;
	padding:               0 !important;
}

ul.fo-browse-grid.products li.product {
	background:    var(--fo-surface);
	border:        1px solid var(--fo-border);
	border-radius: var(--fo-radius-lg);
	box-shadow:    var(--fo-shadow);
	overflow:      hidden;
	padding:       0 !important;
	margin:        0 !important;
	text-align:    left !important;
	float:         none !important;
	width:         auto !important;
	transition:    box-shadow .15s ease, transform .15s ease;
}

ul.fo-browse-grid.products li.product:hover {
	box-shadow: var(--fo-shadow-lg);
	transform:  translateY(-2px);
}

ul.fo-browse-grid.products li.product img {
	width:      100% !important;
	height:     220px !important;
	object-fit: cover !important;
	display:    block;
}

ul.fo-browse-grid.products li.product a {
	text-decoration: none !important;
	color:           inherit;
}

ul.fo-browse-grid.products li.product .fo-browse-byline {
	display:         block;
	font-size:       12px;
	color:           var(--fo-muted);
	text-decoration: none;
	margin:          14px 16px 0;
}

ul.fo-browse-grid.products li.product .fo-browse-byline:hover {
	text-decoration: underline;
	color:           var(--fo-text);
}

ul.fo-browse-grid.products li.product .woocommerce-loop-product__title {
	font-size:   15px !important;
	font-weight: 700 !important;
	color:       var(--fo-text) !important;
	line-height: 1.3 !important;
	margin:      4px 16px 4px !important;
	padding:     0 !important;
}

ul.fo-browse-grid.products li.product .price {
	display:     block;
	margin:      0 16px 16px;
	font-size:   14px;
	color:       var(--fo-text);
	font-weight: 600;
}

.fo-browse-pagination {
	margin-top: 32px;
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
}

.fo-browse-pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       34px;
	height:          34px;
	padding:         0 8px;
	border:          1px solid var(--fo-border);
	border-radius:   var(--fo-radius);
	font-size:       13px;
	color:           var(--fo-text);
	text-decoration: none;
}

.fo-browse-pagination .page-numbers.current {
	background:   var(--fo-text);
	border-color: var(--fo-text);
	color:        var(--fo-surface);
}

.fo-browse-pagination .page-numbers:hover:not(.current) {
	border-color: var(--fo-border-strong);
}

.fo-browse-empty {
	color:      var(--fo-muted);
	text-align: center;
	padding:    64px 0;
	font-size:  var(--fo-text-lg);
}

.fo-filter-empty {
	color:     var(--fo-muted);
	font-size: 13px;
}

.fo-filter-clear {
	display:         inline-block;
	margin-top:      12px;
	font-size:       12px;
	color:           var(--fo-muted);
	text-decoration: underline;
}

@media (max-width: 780px) {
	.fo-browse-sidebar { flex-basis: 100%; max-width: 100%; }
	.fo-browse-main    { flex-basis: 100%; }
}


/* =========================================================================
   MENU DISPLAY — public vendor menu (§5A rebuild, 2026-07-19)
   -------------------------------------------------------------------------
   Replaces F! Gallery's Gallery/Moniker/Studio work-card grid (.fo-work-*,
   above) for the vendor profile page specifically. Kept as its own
   .fo-menu-* namespace rather than reusing .fo-work-card etc. — "Sold"
   (a one-of-a-kind original, gone forever) and "86'd today" (routinely
   out for the rest of service, resets tomorrow) are different enough
   concepts that sharing a class name would blur them, and this is the
   part of the plugin actually being rebuilt for food ordering, so it
   gets a clean, food-ordering-specific set of styles rather than
   patched art-marketplace ones. See FO_Vendor_Profile_Page::compute_menu().
   ========================================================================= */

.fo-menu-item-count {
	font-size: var(--fo-text-sm);
	color:     var(--fo-muted);
	margin:    0 0 16px;
}

.fo-menu-empty {
	color:      var(--fo-muted);
	padding:    24px 0;
	font-size:  var(--fo-text-md);
}

.fo-menu-section { margin-bottom: 40px; }
.fo-menu-section:last-child { margin-bottom: 0; }

.fo-menu-section-title {
	font-size:     var(--fo-text-2xl);
	font-weight:   700;
	margin:        0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--fo-border);
}

.fo-menu-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap:                   20px;
}

.fo-menu-item-card {
	display:        flex;
	flex-direction: column;
	border:         1px solid var(--fo-border);
	border-radius:  var(--fo-radius-lg);
	background:     var(--fo-surface);
	overflow:       hidden;
}

.fo-menu-item-card.fo-menu-item-unavailable { opacity: .65; }

.fo-menu-item-image-wrap { position: relative; aspect-ratio: 4 / 3; background: var(--fo-bg-inset); }

.fo-menu-item-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.fo-menu-item-image-placeholder {
	width:      100%;
	height:     100%;
	background: var(--fo-bg-inset);
}

.fo-menu-86d-overlay {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      rgba(17, 24, 39, .55);
	color:           #fff;
	font-weight:     700;
	font-size:       var(--fo-text-md);
	text-align:      center;
	padding:         8px;
}

.fo-menu-item-info { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }

.fo-menu-item-title { font-size: var(--fo-text-lg); font-weight: 700; margin: 0; color: var(--fo-text); }

.fo-menu-item-desc {
	font-size: var(--fo-text-sm);
	color:     var(--fo-muted);
	margin:    0;
}

.fo-menu-item-badges { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.fo-menu-badge {
	display:       inline-flex;
	align-items:   center;
	gap:           3px;
	font-size:     var(--fo-text-xs);
	font-weight:   600;
	padding:       2px 8px;
	border-radius: var(--fo-radius-pill);
	background:    var(--fo-bg-inset);
	color:         var(--fo-body);
}

.fo-menu-badge--spice   { background: var(--fo-danger-bg);  color: var(--fo-danger-text); }
.fo-menu-badge--dietary { background: var(--fo-success-bg); color: var(--fo-success-text); }

.fo-menu-item-channel-note {
	font-size: var(--fo-text-xs);
	color:     var(--fo-subtle);
	margin:    0;
}

.fo-menu-item-allergy-note {
	font-size: var(--fo-text-xs);
	color:     var(--fo-danger-text, #b91c1c);
	margin:    4px 0 0;
	font-weight: 600;
}

.fo-menu-item-footer {
	margin-top:      auto;
	padding-top:     8px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	flex-wrap:       wrap;
}

.fo-menu-item-price { font-size: var(--fo-text-lg); font-weight: 700; color: var(--fo-text); margin: 0; }

.fo-menu-simple-add { display: flex; align-items: center; gap: 8px; }

.fo-menu-qty-input {
	width:         52px;
	padding:       8px 6px;
	border:        1px solid var(--fo-input-border);
	border-radius: var(--fo-radius);
	font-size:     var(--fo-text-md);
	text-align:    center;
}

.fo-menu-item-notice {
	font-size: var(--fo-text-xs);
	margin:    4px 0 0;
}

/* Sidebar quick-nav — replaces the old Gallery/Moniker/Studio facet filter panel. */
.fo-menu-nav-heading {
	font-size:     var(--fo-text-sm);
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color:         var(--fo-muted);
	margin:        0 0 10px;
}

.fo-menu-nav ul { list-style: none; margin: 0; padding: 0; }
.fo-menu-nav li { margin-bottom: 6px; }
.fo-menu-nav a {
	font-size:       var(--fo-text-md);
	color:           var(--fo-text);
	text-decoration: none;
}
.fo-menu-nav a:hover { color: var(--fo-accent, var(--fo-primary)); text-decoration: underline; }

/* Sticky cart summary bar. */
.fo-menu-cart-bar {
	position:        sticky;
	bottom:          16px;
	margin-top:      24px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	padding:         14px 20px;
	background:      var(--fo-text);
	color:           #fff;
	border-radius:   var(--fo-radius-lg);
	box-shadow:      var(--fo-shadow-lg);
	z-index:         30;
}
.fo-menu-cart-bar[hidden] { display: none; }
.fo-menu-cart-bar-summary { font-size: var(--fo-text-md); font-weight: 600; }

/* Modifier "Choose Options" modal — reuses .fo-modal/.fo-modal-overlay/
   .fo-form-notice/.fo-btn from earlier in this file (the message/follow/
   commission modals already established that pattern); only the
   modifier-group-specific bits below are new. */
.fo-menu-modal-price { font-size: var(--fo-text-md); color: var(--fo-muted); margin: -8px 0 12px; }

.fo-modifier-group { margin-bottom: 18px; }
.fo-modifier-group:last-child { margin-bottom: 0; }

.fo-modifier-group-label {
	font-weight: 700;
	font-size:   var(--fo-text-md);
	margin:      0 0 8px;
}

.fo-modifier-option {
	display:    flex;
	align-items: center;
	gap:        8px;
	font-size:  var(--fo-text-md);
	padding:    6px 0;
	cursor:     pointer;
}

.fo-menu-modal-qty-row { margin: 16px 0; }