/*
Theme Name: Marketplace
Theme URI: https://aroma-phyto-studio.com/
Description: Marketplace theme for GDV Channel Manager.
Author: Geert De Vuyst
Author URI: https://geertdevuyst.be/
Version: 1.92.12
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marketplace
*/

/* ===========================
   FONT LOADING
   Self-hosted woff2 files in themes/marketplace/fonts/
   Lato: static 400 and 700 (Google Fonts has no 600 weight).
   Playfair Display: single variable-font file covers 400–700.
   =========================== */

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-regular-webfont.woff2') format('woff2'),
         url('fonts/Lato-regular-webfont.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-bold-webfont.woff2') format('woff2'),
         url('fonts/Lato-bold-webfont.woff') format('woff');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/PlayfairDisplay-variable-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

/* ===========================
   DESIGN TOKENS
   =========================== */

:root {
    color-scheme: light dark;

    /* Layout */
    --header-height: 60px;
    --content-max-width: 1440px;
    /* Shared reading width for the single-entity detail pages (product, brand,
       sales point). One source of truth so they stay consistent; sits inside
       --content-max-width and is generous enough to use modern wide screens
       and fit the product's four-column chapter grid. */
    --single-content-width: 1280px;
    --sidebar-width: 280px;

    /* Base Brand Colors */
    --brand-forest:     #1e3c2b;
    --brand-amber:      #c07a28;
    --brand-sage:       #5a7a47;
    --brand-lavender:   #7265a0;
    --brand-terracotta: #a84432;

    /* Contrast Variants */
    --brand-forest-dark:  #122418;
    --brand-forest-light: #375c45;

    --brand-amber-dark:  #925c1e;
    --brand-amber-light: #d9923a;

    --brand-sage-dark:  #3d5630;
    --brand-sage-light: #7fa068;

    --brand-lavender-dark:  #524a78;
    --brand-lavender-light: #9b90c0;

    --brand-terracotta-dark:  #7a3024;
    --brand-terracotta-light: #c85a48;

    /* Primary System */
    --primary:       var(--brand-forest);
    --primary-light: var(--brand-forest-light);
    --primary-dark:  var(--brand-forest-dark);
    --primary-alpha: rgba(30, 60, 43, 0.10);

    /* Secondary System */
    --secondary:       var(--brand-amber);
    --secondary-light: var(--brand-amber-light);
    --secondary-dark:  var(--brand-amber-dark);
    --secondary-alpha: rgba(192, 122, 40, 0.10);

    /* Semantic Colors */
    --success:      var(--brand-sage);
    --success-light: var(--brand-sage-light);
    --success-dark:  var(--brand-sage-dark);
    --success-alpha: rgba(90, 122, 71, 0.10);

    --warning:       var(--secondary);
    --warning-light: var(--secondary-light);
    --warning-dark:  var(--secondary-dark);
    --warning-alpha: rgba(192, 122, 40, 0.10);

    --info:       var(--brand-lavender);
    --info-light: var(--brand-lavender-light);
    --info-dark:  var(--brand-lavender-dark);
    --info-alpha: rgba(114, 101, 160, 0.10);

    --error:       var(--brand-terracotta);
    --error-light: var(--brand-terracotta-light);
    --error-dark:  var(--brand-terracotta-dark);
    --error-alpha: rgba(168, 68, 50, 0.10);

    /* Neutral — warm ivory/sand scale */
    --white:    #ffffff;
    --gray-50:  #fdfaf5;
    --gray-100: #f6f0e6;
    --gray-200: #ede5d5;
    --gray-300: #d8cfc0;
    --gray-400: #b8ad9e;
    --gray-500: #8c8070;
    --gray-600: #5e5448;
    --gray-700: #3e372e;
    --gray-800: #2a241c;
    --gray-900: #1a160f;

    /* Link States */
    --link-primary: var(--primary);
    --link-hover:   var(--brand-amber);
    --link-visited: var(--brand-lavender-dark);
    --link-focus:   var(--secondary);

    /* Text Hierarchy */
    --text-primary:   #2e2820;
    --text-secondary: var(--gray-600);
    --text-tertiary:  #76695a; /* darker than gray-500 #8c8070 to clear WCAG AA (~5.1:1 on cream bg) */
    --text-inverse:   var(--white);

    /* Border Hierarchy */
    --border-light:  var(--gray-300);
    --border-medium: var(--gray-400);
    --border-strong: var(--gray-500);

    /* Background Hierarchy */
    --bg-primary:   var(--gray-50);
    --bg-secondary: var(--gray-100);
    --bg-tertiary:  var(--gray-200);

    /* Gradients */
    --gradient-primary:    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-secondary:  linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    --gradient-botanical:  linear-gradient(160deg, #1e3c2b 0%, #2d5c40 50%, #375c45 100%);
    --gradient-terracotta: linear-gradient(135deg, var(--brand-terracotta) 0%, var(--brand-terracotta-dark) 100%);

    /* Buttons — semantic, mode-aware tokens consumed by the .marketplace-btn
       variants (see the hierarchy note above .marketplace-btn). Built from the
       non-flipping brand colours so text contrast holds in both modes; the two
       dark blocks override only the greens (lift off the near-black bg) and the
       destructive colour. Primary is loudest; destructive is deliberately quiet. */
    --btn-primary-bg:       var(--primary);
    --btn-primary-bg-hover: var(--primary-light);
    --btn-primary-fg:       var(--white);

    --btn-secondary-bg:       #a8661c; /* deeper amber so white text clears WCAG AA (4.6:1); brand --secondary #c07a28 is too light under white */
    --btn-secondary-bg-hover: #925c1e; /* darken on hover so white stays legible (5.6:1) */
    --btn-secondary-fg:       var(--white);

    --btn-outline-fg:       var(--primary);
    --btn-outline-border:   var(--primary);
    --btn-outline-bg-hover: var(--primary-alpha);

    --btn-danger-fg:        var(--error);
    --btn-danger-border:    var(--border-medium);
    --btn-danger-bg-hover:  var(--error-alpha);

    /* Typography */
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:  'Lato', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

    /* Front-end form typography floor: single source of truth for every public
       form (see _documentation/front-end-form-typography.md). One size per role;
       never below --mp-form-hint-size (14px). */
    --mp-form-input-size:     1rem;      /* inputs, select, textarea */
    --mp-form-label-size:     1rem;      /* field labels, consent/legal labels */
    --mp-form-error-size:     0.9375rem; /* inline errors + error banner, one size */
    --mp-form-secondary-size: 0.9375rem; /* secondary controls: cancel/footer links */
    --mp-form-hint-size:      0.875rem;  /* helper hints, mandatory legend: the floor */

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Dark Mode — System Preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand-amber-dark:      #e8a84a;
        --brand-sage-dark:       #90b878;
        --brand-lavender-dark:   #a89fcc;
        --brand-terracotta-dark: #cc6855;

        --link-primary: var(--primary-light);
        --link-hover:   #90b878;
        --link-visited: #a89fcc;
        --link-focus:   var(--secondary-light);

        --text-primary:   #f0ece4;
        --text-secondary: #c8c0b0;
        --text-tertiary:  #8c9088;

        --bg-primary:   #1a1f1c;
        --bg-secondary: #22302a;
        --bg-tertiary:  #2d4035;

        --border-light:  #2d4035;
        --border-medium: #3d5545;
        --border-strong: #52705c;

        /* Buttons — lift the brand greens off the near-black bg so they stay
           readable; brighten the destructive text; keep both modes consistent. */
        --btn-primary-bg:       var(--primary-light);
        --btn-primary-bg-hover: var(--brand-sage);

        --btn-outline-fg:       var(--brand-sage-light);
        --btn-outline-border:   var(--brand-sage-light);
        --btn-outline-bg-hover: rgba(127, 160, 104, 0.15);

        --btn-danger-fg:        var(--brand-terracotta-dark);
        --btn-danger-bg-hover:  rgba(204, 104, 85, 0.18);
    }
}

/* Dark Mode — Manual Toggle */
[data-theme="dark"] {
    --brand-amber-dark:      #e8a84a;
    --brand-sage-dark:       #90b878;
    --brand-lavender-dark:   #a89fcc;
    --brand-terracotta-dark: #cc6855;

    --link-primary: var(--primary-light);
    --link-hover:   #90b878;
    --link-visited: #a89fcc;
    --link-focus:   var(--secondary-light);

    --text-primary:   #f0ece4;
    --text-secondary: #c8c0b0;
    --text-tertiary:  #8c9088;

    --bg-primary:   #1a1f1c;
    --bg-secondary: #22302a;
    --bg-tertiary:  #2d4035;

    --border-light:  #2d4035;
    --border-medium: #3d5545;
    --border-strong: #52705c;

    /* Buttons — see the @media dark block above; same overrides for the toggle. */
    --btn-primary-bg:       var(--primary-light);
    --btn-primary-bg-hover: var(--brand-sage);

    --btn-outline-fg:       var(--brand-sage-light);
    --btn-outline-border:   var(--brand-sage-light);
    --btn-outline-bg-hover: rgba(127, 160, 104, 0.15);

    --btn-danger-fg:        var(--brand-terracotta-dark);
    --btn-danger-bg-hover:  rgba(204, 104, 85, 0.18);
}

/* Light Mode — Manual Toggle */
[data-theme="light"] {
    --link-primary:  var(--primary);
    --link-hover:    var(--brand-amber);
    --link-visited:  var(--brand-lavender-dark);
    --link-focus:    var(--secondary);

    --text-primary:   #2e2820;
    --text-secondary: var(--gray-600);
    --text-tertiary:  #76695a;
    --text-inverse:   var(--white);

    --bg-primary:   var(--gray-50);
    --bg-secondary: var(--gray-100);
    --bg-tertiary:  var(--gray-200);

    --border-light:  var(--gray-300);
    --border-medium: var(--gray-400);
    --border-strong: var(--gray-500);
}

/* ===========================
   RESET & BASE
   =========================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

a {
    color: var(--link-primary);
    text-decoration: underline;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--link-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    line-height: 1.25;
    color: var(--text-primary);
}

h1, h2, h3 { font-family: var(--font-serif); }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; }

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p {
    margin: 0 0 var(--space-4);
}

ul, ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
}

/* ===========================
   LAYOUT
   =========================== */

.marketplace-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.marketplace-main {
    flex: 1;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.marketplace-main--wide {
    max-width: 100%;
    padding: 0;
}

.marketplace-main--with-sidebar {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 768px) {
    .marketplace-main {
        padding: var(--space-6) var(--space-4);
    }

    .marketplace-main--with-sidebar {
        grid-template-columns: 1fr;
    }
}

.marketplace-single-page-container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    /* The wrapper is a flex column, so a max-width child relying on margin:auto
       alone can sit at flex-start (left) on wide windows. align-self centres it
       explicitly on the cross axis. */
    align-self: center;
    padding: var(--space-8) var(--space-6);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .marketplace-single-page-container {
        padding: var(--space-6) var(--space-4);
    }
}

/* ===========================
   PAGE CONTENT
   =========================== */

.marketplace-page-title {
    text-align: center;
    margin: 0 0 var(--space-8);
}

.marketplace-page-subtitle {
    text-align: center;
    margin: calc(-1 * var(--space-6)) 0 var(--space-8);
    font-weight: 400;
    color: var(--text-muted);
}

/* Service-page intro lead (sourced from a public Page Tagline, not the SEO
   excerpt). Centred above the feature-list grid. */
.mp-page-lead {
    max-width: 760px;
    margin: 0 auto var(--space-8);
    font-size: 1.1rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Pre-launch announcement banner (e.g. webshop services). */
.mp-prelaunch-notice {
    max-width: 760px;
    margin: 0 auto var(--space-8);
    padding: var(--space-8) var(--space-6);
    background: var(--secondary-alpha);
    border: 1px solid var(--secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

.mp-prelaunch-notice p {
    margin: 0;
    color: var(--text-primary);
}

/* Reusable contact-form engine. Fields use the shared forms.css .form-group
   house style; only layout extras and result states live here. The optional
   .mp-prelaunch-notice wrapper_class supplies the banner skin (early-access);
   a plain form uses a neutral container. */
/* Qualified with the .mp-contact-form ancestor so these win over the banner's
   generic `.mp-prelaunch-notice p { margin: 0 }` reset (which would otherwise
   strip the lead's bottom margin). Full width + centred text, so the title is
   centred in the container and shares the form's centre axis. */
.mp-contact-form .mp-contact-form__lead {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 var(--space-8);
    text-align: center;
}

.mp-contact-form .mp-contact-form__err {
    margin: 0 0 var(--space-4);
    text-align: center;
    color: var(--error-dark);
}

.mp-contact-form__form {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Submit: sized to its label (not stretched full width), with breathing room
   above. Full width only on mobile for an easy tap target. */
.mp-contact-form__submit {
    margin-top: var(--space-2);
}

.mp-contact-form__btn {
    width: auto;
    align-self: flex-start;
    justify-content: center;
}

/* Half-width pair on one row; stacks on mobile. */
.mp-contact-form__row {
    display: flex;
    gap: var(--space-4);
}

.mp-contact-form__row .mp-contact-form__field {
    flex: 1 1 0;
    min-width: 0;
}

/* Inline validation error state (assets/js/contact-forms.js). */
.mp-contact-form__field--invalid input,
.mp-contact-form__field--invalid textarea {
    border-color: var(--error, #c0392b);
}

/* Prominent confirmation panel (replaces the form once submitted). Self-styled
   so it works without a wrapper; the banner skin overrides the colours. */
.mp-contact-form--done {
    max-width: 760px;
    margin: 0 auto var(--space-8);
    padding: var(--space-4) var(--space-6);
    background: var(--success-alpha);
    border: 1px solid var(--success);
    border-radius: var(--radius-md);
    text-align: center;
}

.mp-contact-form--done.mp-prelaunch-notice {
    background: var(--success-alpha);
    border-color: var(--success);
}

.mp-contact-form__done-title {
    margin: 0 0 var(--space-2);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--success-dark);
}

@media (max-width: 600px) {
    .mp-contact-form__row {
        flex-direction: column;
    }

    .mp-contact-form__btn {
        width: 100%;
        align-self: stretch;
    }
}

/* Owner signature / personal endorsement block. */
.mp-signature {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 640px;
    margin: var(--space-8) auto;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-light);
}

.mp-signature__portrait {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.mp-signature__name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mp-signature__note {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.marketplace-under-construction {
    text-align: center;
    font-style: italic;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

/* ===========================
   HEADER
   =========================== */

.marketplace-header {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.marketplace-header__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.marketplace-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    flex-shrink: 0;
}

.marketplace-header__site-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-inverse);
    letter-spacing: 0.01em;
}

.marketplace-header__tagline {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.marketplace-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.marketplace-header__nav a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 500;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.marketplace-header__nav a:hover,
.marketplace-header__nav a:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    text-decoration: none;
}

.marketplace-header__nav a.current-menu-item {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

@media (max-width: 768px) {
    .marketplace-header__inner {
        padding: 0 var(--space-4);
    }

    .marketplace-header__tagline {
        display: none;
    }

    .marketplace-header__nav a {
        padding: var(--space-2);
        font-size: 0.85rem;
    }
}

/* ===========================
   FOOTER
   =========================== */

.marketplace-footer {
	margin-top: auto;
}

.mp-footer-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	width: 100%;
	padding: 2.5rem 1.5rem;
	border-top: 2px solid var(--border-light);
	background-color: var(--bg-secondary);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mp-footer-section {
	flex: 1 1 0;
	min-width: 240px;
	line-height: 1.6;
	color: var(--text-primary);
}

.mp-footer-section:empty {
	display: none;
}

.mp-footer-title {
	margin: 0 0 0.75rem 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--primary);
	transition: color 0.3s ease;
}

.mp-footer-section a {
	color: var(--link-primary);
	font-weight: 500;
	transition: color 0.2s ease;
}

.mp-footer-section a:hover,
.mp-footer-section a:focus {
	color: var(--link-hover);
	text-decoration: underline;
}

.mp-footer-page-link {
	display: block;
	margin-top: 0.5rem;
	padding: 0.25rem 0;
	transition: color 0.2s ease;
}

.mp-footer-page-link:hover {
	text-decoration: none;
}

.mp-copyright-container {
	width: 100%;
	padding: 1.5rem;
	background-color: var(--bg-tertiary);
	border-top: 1px solid var(--border-light);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mp-copyright-container .copyright {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--text-tertiary);
	text-align: center;
}

[data-theme="dark"] .mp-footer-container {
	background-color: var(--bg-secondary);
	border-top-color: var(--border-medium);
}

[data-theme="dark"] .mp-footer-title {
	color: var(--primary-light);
}

[data-theme="dark"] .mp-footer-section a {
	color: var(--text-inverse);
}

[data-theme="dark"] .mp-footer-section a:hover,
[data-theme="dark"] .mp-footer-section a:focus {
	color: var(--secondary-light);
}

[data-theme="dark"] .mp-copyright-container {
	background-color: var(--bg-tertiary);
	border-top-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mp-footer-container {
		background-color: var(--bg-secondary);
		border-top-color: var(--border-medium);
	}

	:root:not([data-theme="light"]) .mp-footer-title {
		color: var(--primary-light);
	}

	:root:not([data-theme="light"]) .mp-copyright-container {
		background-color: var(--bg-tertiary);
		border-top-color: var(--border-medium);
	}
}

@media (max-width: 768px) {
	.mp-footer-container {
		flex-direction: column;
		gap: 1.5rem;
		padding: 2rem 1rem;
	}

	.mp-footer-section {
		min-width: 100%;
	}
}

/* ===========================
   CARDS
   =========================== */

.marketplace-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.marketplace-card + .marketplace-card {
    margin-top: var(--space-4);
}

.marketplace-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 var(--space-3);
}

.marketplace-card__meta {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

/* ===========================
   BUTTONS
   =========================== */

/*
 * Button hierarchy. Choose the variant by the action's role, not its position in
 * the layout:
 *
 *   --primary    Solid forest, loudest. The one main commit or lead action of a
 *                context: a form submit, the lead CTA of an empty state or card, and
 *                the main per-row action on a listing (Edit, since managing your data
 *                is why the listing exists). Also a lone affirmative action. At most
 *                one per group.
 *   --secondary  Solid amber. A co-equal second choice shown beside a primary, where
 *                both are real alternatives the user picks between (two ways to add a
 *                store, two plan types, or a listing row's View beside its Edit). Only
 *                valid when paired with a primary; never use it on a lone button.
 *   --outline    Quiet, bordered. A non-committal or step-back action that must not
 *                compete with the primary: back, cancel, decline, withdraw, and
 *                lower-tier row utilities (resend, switch, take offline / republish).
 *                Also the right choice for a lone low-emphasis action.
 *   --amber      Solid gradient. Reserved for marketing call-to-action surfaces.
 *
 * Destructive actions (delete, disconnect, take down) use .ua-btn--danger: a quiet
 * terracotta-text button, never a solid red fill, so they never outweigh the primary.
 * It is a separate class, not a marketplace-btn modifier.
 */
.marketplace-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, opacity 0.15s;
}

.marketplace-btn--primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

.marketplace-btn--primary:hover {
    background: var(--btn-primary-bg-hover);
    color: var(--btn-primary-fg);
    text-decoration: none;
}

.marketplace-btn--secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
}

.marketplace-btn--secondary:hover {
    background: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-fg);
    text-decoration: none;
}

/* Next-step button row on the standalone invitation / dispute landing pages. */
.mp-landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.marketplace-btn--outline {
    background: transparent;
    color: var(--btn-outline-fg);
    border: 1px solid var(--btn-outline-border);
}

.marketplace-btn--outline:hover {
    background: var(--btn-outline-bg-hover);
    color: var(--btn-outline-fg);
    text-decoration: none;
}

.marketplace-btn--amber {
    background: var(--gradient-secondary);
    color: var(--white);
}

.marketplace-btn--amber:hover {
    background: var(--secondary-dark);
    color: var(--white);
    text-decoration: none;
}

/* ===========================
   PRODUCT CPT — single-gdv_cm_product
   =========================== */

.marketplace-product {
    max-width: var(--single-content-width);
    margin-inline: auto;
}

.marketplace-product__header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--secondary);
}

.marketplace-product__category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--secondary-dark);
    background: var(--secondary-alpha);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

.marketplace-product__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 var(--space-3);
}

.marketplace-product__subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
}

.marketplace-product__body {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 768px) {
    .marketplace-product__body {
        grid-template-columns: 1fr;
    }

    .marketplace-product__title {
        font-size: 1.5rem;
    }
}

.marketplace-product__description {
    color: var(--text-primary);
    line-height: 1.7;
}

.marketplace-product__meta-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.marketplace-product__meta-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-light);
}

.marketplace-product__meta-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.marketplace-product__meta-row:first-child {
    padding-top: 0;
}

.marketplace-product__meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.marketplace-product__meta-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* ===========================
   ENTRY — generic posts/pages
   =========================== */

.marketplace-entry {
    max-width: 780px;
}

.marketplace-entry__title {
    font-size: 1.75rem;
    color: var(--primary);
    margin-bottom: var(--space-3);
}

.marketplace-entry__meta {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}

.marketplace-entry__content {
    color: var(--text-primary);
    line-height: 1.75;
}

.marketplace-entry__content h2 {
    color: var(--primary);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--space-2);
    margin-top: var(--space-8);
}

.marketplace-entry__content h3 {
    color: var(--primary-light);
    margin-top: var(--space-6);
}

.marketplace-entry__content blockquote {
    border-left: 4px solid var(--secondary);
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    background: var(--secondary-alpha);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.marketplace-entry__content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
}

.marketplace-entry__content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
}

.marketplace-entry__content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

/* ===========================
   POST ARCHIVE LIST
   =========================== */

.marketplace-archive__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.marketplace-archive__item {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-light);
}

.marketplace-archive__item:last-child {
    border-bottom: none;
}

.marketplace-archive__item-title {
    font-size: 1.1rem;
    margin: 0 0 var(--space-1);
}

.marketplace-archive__item-title a {
    color: var(--primary);
    font-weight: 600;
}

.marketplace-archive__item-title a:hover {
    color: var(--link-hover);
}

.marketplace-archive__item-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* ===========================
   PAGINATION
   =========================== */

.marketplace-pagination {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.marketplace-pagination a,
.marketplace-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.marketplace-pagination a:hover {
    background: var(--primary-alpha);
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

.marketplace-pagination .current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* ===========================
   NOTICES
   =========================== */

.marketplace-notice {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin-bottom: var(--space-4);
    font-size: 0.95rem;
}

.marketplace-notice--info {
    background: rgba(109, 91, 112, 0.08);
    border-color: var(--info);
    color: var(--info-dark);
}

.marketplace-notice--success {
    background: rgba(107, 138, 82, 0.08);
    border-color: var(--success);
    color: var(--success-dark);
}

.marketplace-notice--warning {
    background: var(--warning-alpha);
    border-color: var(--warning);
    color: var(--warning-dark);
}

.marketplace-notice--error {
    background: var(--error-alpha);
    border-color: var(--error);
    color: var(--error-dark);
}

/* ===========================
   SKIP LINK (ACCESSIBILITY)
   =========================== */

.marketplace-skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--primary);
    color: var(--white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.1s;
}

.marketplace-skip-link:focus {
    top: var(--space-4);
}

/* ===========================
   WORDPRESS ALIGNMENTS
   =========================== */

.alignleft { float: left; margin-right: var(--space-4); margin-bottom: var(--space-4); }
.alignright { float: right; margin-left: var(--space-4); margin-bottom: var(--space-4); }
.aligncenter { display: block; margin: 0 auto var(--space-4); }
.alignwide { max-width: 1100px; }
.alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--text-tertiary); margin-top: var(--space-2); }

/* ===========================
   BUTTON STYLES
   =========================== */

/* Base Button */
button,
.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.875rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: 'Lato', sans-serif;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	line-height: 1;

}

button:disabled,
.button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;

}

button:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;

}

/* Primary Button */
.button-primary {
	background: var(--gradient-primary);
	color: var(--text-inverse);

}

.button-primary:hover:not(:disabled) {
	background: var(--primary);
	color: var(--text-inverse);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}

.button-primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.button-primary:focus-visible {
	outline-color: var(--primary);

}

/* Secondary Button */
.button-secondary {
	background: var(--bg-primary);
	color: var(--primary);
	border: 1px solid var(--primary);

}

.button-secondary:hover:not(:disabled) {
	background: var(--primary);
	color: var(--text-inverse);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}

.button-secondary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

/* Danger Button */
.button-danger {
	background: var(--brand-terracotta);
	color: var(--white);
	box-shadow: 0 2px 8px rgba(168, 68, 50, 0.2);

}

.button-danger:hover:not(:disabled) {
	background: var(--brand-terracotta-dark);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(168, 68, 50, 0.3);

}

.button-danger:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(168, 68, 50, 0.2);

}

.button-danger:focus-visible {
	outline-color: var(--brand-terracotta);

}

/* Small Button */
.button-small {
	font-size: 0.875rem;
	padding: 0.5rem 1rem;

}

/* Dark Mode Support */
[data-theme="dark"] .button-secondary {
	background: var(--bg-secondary);
	border-color: var(--primary-light);
	color: var(--primary-light);

}

[data-theme="dark"] .button-secondary:hover:not(:disabled) {
	background: var(--primary-light);
	color: var(--bg-primary);

}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .button-secondary {
		background: var(--bg-secondary);
		border-color: var(--primary-light);
		color: var(--primary-light);

	}

	:root:not([data-theme="light"]) .button-secondary:hover:not(:disabled) {
		background: var(--primary-light);
		color: var(--bg-primary);

	}

}

/* Responsive */
@media (max-width: 767px) {
	button,
	.button {
		width: 100%;
		justify-content: center;

	}

}

/* ===========================
   TOP BAR
   =========================== */

.mp-top-bar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border-light);
	padding: var(--space-4) 0;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mp-top-bar-container {
	margin: 0 auto;
	padding: 0 var(--space-6);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	max-width: 1440px;
}

.mp-top-bar-left-section {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	/* The logo must never be the element that yields when the bar is tight — it is
	   the only shrinkable item, so without this it collapses to a sliver on mobile
	   while the text-pill controls keep their width. */
	flex-shrink: 0;
}

.mp-top-bar-controls {
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

/* ===========================
   SITE-WIDE TOP MENU
   Layout primitives (.mp-site-nav, .mp-site-nav__container) and the
   mobile-hide rule are inlined in <head> as #nav-critical-css. The rules
   below are visual polish only — safe to load via the regular (blocking)
   style.css path until the wider non-blocking-CSS plan ships.
   =========================== */

.mp-site-nav__link {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: var(--space-3) 0 var(--space-1);
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.mp-site-nav__link:hover,
.mp-site-nav__link:focus {
	color: var(--text-primary);
}

.mp-site-nav__link--active {
	color: var(--text-primary);
	border-bottom-color: var(--brand-forest, currentColor);
}

/* Header search box */
.mp-header-search {
	flex: 1;
	max-width: 780px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-4);
}

.mp-search-box-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mp-search-box-wrapper:focus-within {
	border-color: var(--secondary);
	box-shadow: 0 0 0 3px var(--secondary-alpha);
}

.mp-search-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0.75rem 1.25rem;
	font-size: 1rem;
	color: var(--text-primary);
	outline: none;
}

.mp-search-input:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.mp-search-button {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	/* width:auto + flex:none override the mobile `button { width:100% }` rule,
	   so the icon button stays content-sized and sits flush at the right. */
	width: auto;
	flex: 0 0 auto;
	padding: 0.5rem 1rem;
	cursor: pointer;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
}

.mp-search-button svg {
	width: 20px;
	height: 20px;
}

.mp-search-button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Image credit / copyright line (ImageImporter::credit_html). Inline variant
   sits under the image (product card, gallery); the --overlay variant pins a
   small light caption to the bottom-right of a hero image. */
.mp-img-credit {
	display: block;
	font-size: 0.72rem;
	line-height: 1.3;
	color: var(--text-tertiary, #737373);
	margin-top: 0.25rem;
}

.mp-img-credit--overlay {
	position: absolute;
	right: 0.6rem;
	top: 0.5rem;
	z-index: 3;
	margin: 0;
	max-width: 70%;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.7rem;
	text-align: right;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	pointer-events: none;
}

/* Mobile-only full-width search row, rendered under the top bar. Hidden on
   desktop, where .mp-header-search shows inline in the top bar. The mobile
   show rule lives in the max-width: 767px media query below. */
.mp-header-search--mobile {
	display: none;
}

/* Home link */
.mp-home-link {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 6px;
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

.mp-home-link:hover {
	color: var(--text-primary);
	background-color: var(--bg-tertiary);
}

.mp-home-link:focus {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;
}

/* Sign-in link */
.mp-signin-link {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 6px;
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

.mp-signin-link:hover {
	color: var(--text-primary);
	background-color: var(--bg-tertiary);
}

.mp-signin-link:focus {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;
}

/* Icon sizes — match APS FontAwesome equivalents */
.mp-home-link svg,
.mp-signin-link svg {
	width: 16px;
	height: 16px;
}

/* Logo mark replaces the home glyph in the top bar (desktop + mobile). */
.mp-logo-mark {
	width: 38px;
	height: 38px;
	display: block;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.mp-logo-mark {
		width: 34px;
		height: 34px;
	}
}

.mp-darkmode-icon svg,
.mp-bookmarks-link svg,
.mp-account-link svg,
.mp-menu-icon svg {
	width: 18px;
	height: 18px;
}

/* Dark Mode Overrides for top bar links */
[data-theme="dark"] .mp-home-link,
[data-theme="dark"] .mp-signin-link {
	color: var(--text-secondary);
}

[data-theme="dark"] .mp-home-link:hover,
[data-theme="dark"] .mp-signin-link:hover {
	color: var(--text-primary);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mp-home-link,
	:root:not([data-theme="light"]) .mp-signin-link {
		color: var(--text-secondary);
	}

	:root:not([data-theme="light"]) .mp-home-link:hover,
	:root:not([data-theme="light"]) .mp-signin-link:hover {
		color: var(--text-primary);
	}
}

/* Dark Mode Toggle Button */
.mp-darkmode-toggle {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 44px;
	height: 44px;
}

.mp-darkmode-toggle:hover {
	background-color: var(--bg-tertiary);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mp-darkmode-toggle:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mp-darkmode-toggle:focus {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;
}

/* Dark mode icon states */
.mp-darkmode-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-primary);
	font-size: 18px;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.mp-icon-light {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.mp-icon-dark {
	display: none;
	opacity: 0;
	transform: scale(0) rotate(-180deg);
}

[data-theme="dark"] .mp-icon-light {
	display: none;
	opacity: 0;
	transform: scale(0) rotate(180deg);
}

[data-theme="dark"] .mp-icon-dark {
	display: flex;
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mp-icon-light {
		display: none;
		opacity: 0;
	}

	:root:not([data-theme="light"]) .mp-icon-dark {
		display: flex;
		opacity: 1;
	}
}

/* Bookmarks link */
.mp-bookmarks-link {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 44px;
	height: 44px;
	text-decoration: none;
	color: var(--text-primary);
}

.mp-bookmarks-link:hover {
	background-color: var(--bg-tertiary);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	color: var(--text-primary);
}

.mp-bookmarks-link:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mp-bookmarks-link:focus {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;
}

/* Account dashboard link */
.mp-account-link {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 44px;
	height: 44px;
	text-decoration: none;
	color: var(--text-primary);
}

.mp-account-link:hover {
	background-color: var(--bg-tertiary);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	color: var(--text-primary);
}

.mp-account-link:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mp-account-link:focus {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;
}

/* Menu Toggle Button */
.mp-menu-toggle {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 44px;
	height: 44px;
}

.mp-menu-toggle:hover {
	background-color: var(--bg-tertiary);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mp-menu-toggle:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mp-menu-toggle:focus {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;
}

.mp-menu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-primary);
	font-size: 18px;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.mp-icon-menu {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.mp-icon-close {
	display: none;
	opacity: 0;
	transform: scale(0) rotate(-180deg);
}

.slide-menu-open .mp-icon-menu {
	display: none;
	opacity: 0;
	transform: scale(0) rotate(180deg);
}

.slide-menu-open .mp-icon-close {
	display: flex;
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* Country / Language selectors */
.mp-selector {
	position: relative;
}

.mp-selector__button {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: 6px;
	padding: 6px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
	transition: all 0.2s ease;
	white-space: nowrap;
	min-width: 2.5rem;
}

.mp-selector__button:hover {
	color: var(--text-primary);
	background-color: var(--bg-tertiary);
}

.mp-selector__button:focus {
	outline: 2px solid var(--link-focus);
	outline-offset: 2px;
}

.mp-selector__button[aria-expanded="true"] {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}

.mp-selector__dropdown {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	background-color: var(--bg-primary);
	border-radius: 6px;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	padding: 8px;
	min-width: 160px;
	z-index: 1010;
}

.mp-selector__option {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: transparent;
	border: none;
	border-radius: 6px;
	box-shadow: none;
	text-align: left;
	font-family: inherit;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.5;
	color: var(--text-primary);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
	white-space: normal;
	-webkit-appearance: none;
	appearance: none;
}

.mp-selector__option:hover {
	background-color: var(--bg-tertiary);
	color: var(--accent-primary);
	text-decoration: none;
}

.mp-selector__option:focus {
	background-color: var(--bg-tertiary);
	color: var(--accent-primary);
	outline: none;
}

.mp-selector__option--active {
	display: none;
}

/* Hide mobile utility */
@media (max-width: 767px) {
	.hide-mobile {
		display: none !important;
	}

	.mp-top-bar-container {
		padding: 0 15px;
	}

	.mp-menu-toggle,
	.mp-darkmode-toggle,
	.mp-bookmarks-link,
	.mp-account-link {
		width: 40px;
		height: 40px;
	}

	.mp-menu-icon,
	.mp-darkmode-icon {
		font-size: 16px;
	}

	.mp-header-search.hide-mobile {
		display: none;
	}

	/* Always-visible full-width search bar on its own row under the top bar. */
	.mp-header-search--mobile {
		display: flex;
		padding: 12px 15px;
	}

	.mp-selector__button {
		font-size: 12px;
		padding: 5px 8px;
	}

}

/* Admin-only notice on public CPT pages (e.g. a suspended/non-active brand that is
   hidden from the public but still rendered for an admin to review). */
.mp-admin-notice {
	margin: 0 0 16px;
	padding: 10px 16px;
	border-radius: 6px;
	/* Soft cream band with an amber accent — quiet enough to sit in the cream
	   palette, while the amber border + dark-amber text keep the "notice" identity.
	   (The amber-light token is a saturated orange, too loud for a page banner.) */
	background: var(--gray-100, #f6f0e6);
	border: 1px solid var(--brand-amber, #c07a28);
	color: var(--brand-amber-dark, #925c1e);
	font-weight: 600;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   Verified-producer badge — reusable component (marketplace_verified_badge()).
   Hero variant: large, on the brand page; card variant: compact, in grids.
   Uses the marketplace amber token so the mark reads the same site-wide. */
.mp-verified {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.mp-verified__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border-radius: 999px;
	/* Fixed dark amber (not the --brand-amber-dark token, which lightens to
	   #e8a84a in dark mode and would kill the white-text contrast). White on
	   #925c1e is ~5.5:1, AA-compliant in both light and dark mode. */
	background: #925c1e;
	color: #fff;
	/* The badge is nested inside serif headings (card name, hero title); pin the
	   sans font so the trust mark reads as a pill, not inherited Playfair serif. */
	font-family: var(--font-sans, 'Lato', sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: default;
}

.mp-verified__icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.mp-verified__tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 5;
	min-width: max-content;
	max-width: 220px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.mp-verified__badge:hover .mp-verified__tooltip,
.mp-verified__badge:focus .mp-verified__tooltip,
.mp-verified__badge:focus-visible .mp-verified__tooltip {
	opacity: 1;
	visibility: visible;
}

.mp-verified__help {
	font-size: 0.9375rem;
}

/* When help is enabled the badge IS the disclosure toggle: clicking it reveals
   the explanation. Strip the default <summary> marker and signal it's clickable. */
.mp-verified__badge--toggle {
	cursor: pointer;
	list-style: none;
}

.mp-verified__badge--toggle::-webkit-details-marker {
	display: none;
}

.mp-verified__help-text {
	margin: 6px 0 0;
	max-width: 40ch;
	font-weight: 400;
	line-height: 1.5;
}

/* Hero variant — sits over the brand photo; the help panel gets a dark backing
   so the explanation stays legible on any hero image. */
.mp-verified--hero {
	margin-top: 12px;
}

.mp-verified--hero .mp-verified__help-text {
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(26, 26, 26, 0.82);
	color: #fff;
}

/* Card variant — compact; no help disclosure (the badge + tooltip carry it). */
.mp-verified--card {
	margin-top: 8px;
}

.mp-verified--card .mp-verified__badge {
	padding: 5px 14px;
	font-size: 0.85rem;
}

/* Featured-producer badge — the merchandising sibling of Verified. Same pill
   shape and tooltip mechanics, distinct colour (forest, not amber) + star icon
   so a spotlight slot never reads as the trust seal. */
.mp-featured {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.mp-featured__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border-radius: 999px;
	/* Fixed mid-forest (not the --brand-forest token, which is near-black #1e3c2b
	   and would sink into the dark-mode surfaces #1a1f1c / #22302a). White on
	   #2f5d43 is ~7.4:1, AA in both modes; the translucent border gives the pill
	   an edge so it stays readable against dark backgrounds without a separate
	   dark-mode override. */
	background: #2f5d43;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-family: var(--font-sans, 'Lato', sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: default;
}

.mp-featured__icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.mp-featured__tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 5;
	min-width: max-content;
	max-width: 220px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.mp-featured__badge:hover .mp-featured__tooltip,
.mp-featured__badge:focus .mp-featured__tooltip,
.mp-featured__badge:focus-visible .mp-featured__tooltip {
	opacity: 1;
	visibility: visible;
}

.mp-featured__help {
	font-size: 0.9375rem;
}

.mp-featured__help-summary {
	list-style: none;
	cursor: pointer;
	color: inherit;
	opacity: 0.85;
	text-decoration: underline;
}

.mp-featured__help-summary::-webkit-details-marker {
	display: none;
}

.mp-featured__help-text {
	margin: 6px 0 0;
	max-width: 40ch;
	font-weight: 400;
	line-height: 1.5;
}

.mp-featured--hero {
	margin-top: 12px;
}

.mp-featured--hero .mp-featured__help-text {
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(26, 26, 26, 0.82);
	color: #fff;
}

.mp-featured--card {
	margin-top: 8px;
}

.mp-featured--card .mp-featured__badge {
	padding: 5px 14px;
	font-size: 0.85rem;
}

/* "Where to next" button row under unavailable-page alerts and empty grid
   states (rendered by marketplace_render_explore_actions / the alert page). */
.mp-cm-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3, 0.75rem);
	margin-top: var(--space-6, 1.5rem);
}