/**
 * ============================================================
 * CASA Network — Global Design System
 * Version: 2.0.0 | Author: CASA Holdings & Solia Technology
 * ============================================================
 * Load order: global.css → style.css → main.css → plugin CSS
 *
 * Sections:
 *  1. Design Tokens (CSS Custom Properties)
 *  2. CSS Reset & Base
 *  3. Typography System
 *  4. Button System (+ Backward-Compat Aliases)
 *  5. Layout & Container
 *  6. Section Spacing
 *  7. Form System
 *  8. Card Base
 *  9. Link & Text Utilities
 * 10. Utility Classes
 * 11. Responsive Breakpoints
 * ============================================================
 */

/* ============================================================
/* ============================================================
   1. DESIGN TOKENS — DUAL COLOR MODE (G-MODE & C-MODE)
   ============================================================ */

/* ── 1A. G-MODE: Genera Solar Luxury (Default in :root & data-color-mode="g") ── */
:root,
html[data-color-mode="g"],
[data-color-mode="g"],
body.color-mode-g {
	/* ── Brand Colors ── */
	--color-primary:       #531a06;    /* Deep Mahogany (Architectural dark base) */
	--color-primary-hover: #651f08;    /* Mahogany Dark Hover */
	--color-accent:        #de852c;    /* Genera Orange (Signature Solar Core) */
	--color-accent-hover:  #b35b18;    /* Burnt Orange (Luxury Warm Dark Accent) */
	--color-accent-light:  #fff4e3;    /* Solar Ivory Soft Tint */
	--color-gold:          #f6b34a;    /* Solar Gold (High-energy solar accent) */
	--color-gold-hover:    #de852c;    /* Genera Amber */
	--color-gold-light:    #fdf3df;    /* Champagne Soft Glow */

	/* ── Brand Extended Palette ── */
	--color-mahogany-text: #75300b;    /* High-contrast mahogany headings & accents */
	--color-burnt-orange:  #b35b18;    /* Grounded burnt orange */
	--color-root-dark:     #431205;    /* Deepest mahogany root */
	--color-amber-gold:    #e5a23a;    /* Warm sun amber gold */

	/* ── Colors — Semantic ── */
	--color-success:   #10b981;        /* Retained green for Available status */
	--color-warning:   #f59e0b;
	--color-danger:    #ef4444;        /* Retained red for Booked status */
	--color-info:      #de852c;        /* Solar orange info */
	--color-indigo:    #b35b18;        /* Warm burnt orange (replaces cold indigo) */
	--color-purple:    #8d340e;        /* Terracotta (replaces cold purple) */
	--color-green:     #10b981;

	/* ── Colors — Surface / BG (Warm White, Ivory, Cream & Champagne) ── */
	--color-bg:        #fffdf9;        /* Warm sunlit white / pale ivory page background */
	--color-surface:   #ffffff;        /* Pure crisp card surface */
	--color-surface-2: #f7efe4;        /* Soft warm cream surface (tables, progress tracks) */
	--color-surface-champagne: #f2dd9e;/* Warm champagne luxury surface */
	--color-surface-ivory:     #fbe8bf;/* Solar ivory luxury surface */
	--color-surface-dark:      #531a06;/* Deep mahogany dark section surface */

	/* ── Colors — Text (Warm Ink, Secondary Brown & Warm Sand) ── */
	--color-text:        #382013;      /* Warm Ink / Dark Walnut (WCAG AAA on ivory/white) */
	--color-text-muted:  #75503a;      /* Secondary Warm Brown */
	--color-text-light:  #9c7f6e;      /* Warm Sand Muted / Placeholders */
	--color-text-inverse:#ffffff;      /* Pure crisp white for dark surfaces */
	--color-text-champagne: #f2ebc4;   /* Warm pale ivory text on dark mahogany */

	/* ── Colors — Border ── */
	--color-border:        #e8ddd1;    /* Subtle Warm Architectural Border */
	--color-border-subtle: #f3ebe1;    /* Soft Warm Hairline */
	--color-border-gold:   rgba(246, 179, 74, 0.4); /* Glowing Gold Accent Border */

	/* ── Gradients ── */
	--gradient-brand:           linear-gradient(268.64deg, #b35b18 2.31%, #de852c 99.65%);
	--gradient-brand-vertical:  linear-gradient(180deg, #de852c 0%, #b35b18 100%);
	--gradient-hero:            linear-gradient(135deg, #431205 0%, #75300b 55%, #a84814 100%);
	--gradient-hero-solar:      linear-gradient(360deg, #531a06 0%, #e6a13a 100%);
	--gradient-footer:          linear-gradient(180deg, #de852c 0%, #b35b18 35%, #7d3d1a 75%, #431205 100%);
	--gradient-ivory:           linear-gradient(360deg, #fbe8bf 0%, #f3e7c5 100%);
	--gradient-warm-map:        linear-gradient(135deg, #dd984f 0%, #fefdf1 50%, #f3dbb6 100%);
	--gradient-btn-primary:     linear-gradient(135deg, #f6b34a 0%, #de852c 50%, #b35b18 100%);
	--gradient-btn-hover:       linear-gradient(135deg, #de852c 0%, #b35b18 100%);
	--gradient-avatar:          linear-gradient(135deg, #f6b34a, #de852c);
	--gradient-member-card:     linear-gradient(145deg, #531a06, #431205);

	/* ── Shadows ── */
	--shadow-xs: 0 1px 2px rgba(83, 26, 6, 0.04);
	--shadow-sm: 0 1px 3px rgba(83, 26, 6, 0.06), 0 1px 2px rgba(83, 26, 6, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(83, 26, 6, 0.08), 0 2px 4px -2px rgba(83, 26, 6, 0.05);
	--shadow-lg: 0 10px 15px -3px rgba(83, 26, 6, 0.08), 0 4px 6px -4px rgba(83, 26, 6, 0.04);
	--shadow-xl: 0 20px 25px -5px rgba(83, 26, 6, 0.12), 0 8px 10px -6px rgba(83, 26, 6, 0.06);
	--shadow-brand: 0 4px 14px rgba(222, 133, 44, 0.32);

	/* ── Component Specials ── */
	--focus-ring:            0 0 0 3px rgba(222, 133, 44, 0.20);
	--admin-link-bg:        rgba(222, 133, 44, 0.12);
	--admin-link-border:    rgba(222, 133, 44, 0.25);
	--brand-logo-shadow:    0 4px 10px rgba(222, 133, 44, 0.28);
	--hero-shadow:          0 20px 45px rgba(67, 18, 5, 0.26);
	--hero-pill-bg:         rgba(246, 179, 74, 0.16);
	--hero-pill-color:      #f2ebc4;
	--hero-pill-border:     rgba(246, 179, 74, 0.35);
	--hero-desc-color:      #f2ebc4;
	--pill-live-border:     rgba(222, 133, 44, 0.2);
	--page-banner-pill-border: rgba(222, 133, 44, 0.2);
	--footer-shadow:        rgba(67, 18, 5, 0.12);
	--footer-border:        rgba(246, 179, 74, 0.25);
	--footer-text-muted:    rgba(242, 235, 196, 0.85);
	--footer-text-subtle:   rgba(242, 235, 196, 0.75);
	--hero-shadow-overlay:  rgba(67, 18, 5, 0.75);
	--gmp-header-bg:        rgba(67, 18, 5, 0.96);
}

/* ── 1B. C-MODE: CASA Original Identity (Activated when data-color-mode="c") ── */
html[data-color-mode="c"],
[data-color-mode="c"],
body.color-mode-c {
	/* ── Brand Colors ── */
	--color-primary:       #0f172a;    /* Deep Navy */
	--color-primary-hover: #1e293b;    /* Navy Hover */
	--color-accent:        #3454d1;    /* CASA Blue */
	--color-accent-hover:  #1e40af;    /* Royal Blue Hover */
	--color-accent-light:  #eff6ff;    /* Soft Blue Tint */
	--color-gold:          #f59e0b;    /* CASA Gold */
	--color-gold-hover:    #d97706;    /* Amber Gold Hover */
	--color-gold-light:    #fffbeb;    /* Soft Gold Tint */

	/* ── Brand Extended Palette ── */
	--color-mahogany-text: #0f172a;    /* Headings */
	--color-burnt-orange:  #1e40af;
	--color-root-dark:     #0b1528;
	--color-amber-gold:    #f59e0b;

	/* ── Colors — Semantic ── */
	--color-success:   #10b981;
	--color-warning:   #f59e0b;
	--color-danger:    #ef4444;
	--color-info:      #3b82f6;        /* Info Blue */
	--color-indigo:    #6366f1;        /* Indigo */
	--color-purple:    #8b5cf6;        /* Violet */
	--color-green:     #10b981;

	/* ── Colors — Surface / BG ── */
	--color-bg:        #f8fafc;        /* Cool Slate 50 page background */
	--color-surface:   #ffffff;        /* Pure crisp card surface */
	--color-surface-2: #f1f5f9;        /* Slate 100 surface */
	--color-surface-champagne: #f1f5f9;
	--color-surface-ivory:     #eff6ff;
	--color-surface-dark:      #0f172a;

	/* ── Colors — Text ── */
	--color-text:        #334155;      /* Slate 700 */
	--color-text-muted:  #64748b;      /* Slate 500 */
	--color-text-light:  #94a3b8;      /* Slate 400 */
	--color-text-inverse:#ffffff;
	--color-text-champagne: #cbd5e1;

	/* ── Colors — Border ── */
	--color-border:        #e2e8f0;    /* Slate 200 border */
	--color-border-subtle: #f1f5f9;    /* Slate 100 hairline */
	--color-border-gold:   rgba(245, 158, 11, 0.4);

	/* ── Gradients ── */
	--gradient-brand:           linear-gradient(135deg, #3454d1 0%, #1e40af 100%);
	--gradient-brand-vertical:  linear-gradient(180deg, #3454d1 0%, #1e40af 100%);
	--gradient-hero:            linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	--gradient-hero-solar:      linear-gradient(180deg, #0f172a 0%, #1e40af 100%);
	--gradient-footer:          linear-gradient(180deg, #0f172a 0%, #0b1528 100%);
	--gradient-ivory:           linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
	--gradient-warm-map:        linear-gradient(135deg, #3454d1 0%, #eff6ff 100%);
	--gradient-btn-primary:     linear-gradient(135deg, #3454d1 0%, #1e40af 100%);
	--gradient-btn-hover:       linear-gradient(135deg, #1e40af 0%, #172554 100%);
	--gradient-avatar:          linear-gradient(135deg, #3b82f6, #8b5cf6);
	--gradient-member-card:     linear-gradient(145deg, #1e293b, #0f172a);

	/* ── Shadows ── */
	--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
	--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
	--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
	--shadow-brand: 0 4px 14px rgba(52, 84, 209, 0.30);

	/* ── Component Specials ── */
	--focus-ring:            0 0 0 3px rgba(52, 84, 209, 0.20);
	--admin-link-bg:        rgba(52, 84, 209, 0.12);
	--admin-link-border:    rgba(52, 84, 209, 0.25);
	--brand-logo-shadow:    0 4px 10px rgba(52, 84, 209, 0.28);
	--hero-shadow:          0 20px 45px rgba(15, 23, 42, 0.26);
	--hero-pill-bg:         rgba(59, 130, 246, 0.16);
	--hero-pill-color:      #93c5fd;
	--hero-pill-border:     rgba(59, 130, 246, 0.35);
	--hero-desc-color:      #cbd5e1;
	--pill-live-border:     rgba(52, 84, 209, 0.2);
	--page-banner-pill-border: rgba(52, 84, 209, 0.2);
	--footer-shadow:        rgba(15, 23, 42, 0.12);
	--footer-border:        rgba(255, 255, 255, 0.15);
	--footer-text-muted:    rgba(203, 213, 225, 0.85);
	--footer-text-subtle:   rgba(203, 213, 225, 0.75);
	--hero-shadow-overlay:  rgba(15, 23, 42, 0.75);
	--gmp-header-bg:        rgba(11, 29, 49, 0.96);
}

/* ── 1C. Semantic Design Tokens & Backward-Compat Aliases (Dynamic Mapping) ── */
:root {
	--brand-primary:         var(--color-accent);
	--brand-primary-hover:   var(--color-accent-hover);
	--brand-accent:          var(--color-gold);
	--brand-dark:            var(--color-primary);
	--brand-mahogany:        var(--color-mahogany-text);

	--surface-primary:       var(--color-surface);
	--surface-secondary:     var(--color-surface-2);
	--surface-warm:          var(--color-accent-light);
	--surface-dark:          var(--color-surface-dark);
	--surface-bg:            var(--color-bg);

	--text-primary:          var(--color-text);
	--text-secondary:        var(--color-text-muted);
	--text-inverse:          var(--color-text-inverse);
	--text-accent:           var(--color-accent);

	--border-subtle:         var(--color-border-subtle);
	--border-default:        var(--color-border);
	--border-medium:         var(--color-border);
	--border-strong:         var(--color-border);

	--button-primary-bg:     var(--color-accent);
	--button-primary-text:   #ffffff;
	--button-primary-hover:  var(--color-accent-hover);
	--button-secondary-bg:   rgba(255, 255, 255, 0.12);
	--button-secondary-border: rgba(255, 255, 255, 0.3);
	--button-secondary-text: #ffffff;

	/* ── Typography — Font ── */
	--font-sans:  "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono:  "JetBrains Mono", "Consolas", "Courier New", monospace;

	/* ── Typography — Scale ── */
	--fs-xs:   10px;
	--fs-sm:   12px;
	--fs-base: 14px;
	--fs-md:   15px;
	--fs-lg:   16px;
	--fs-xl:   18px;
	--fs-2xl:  20px;
	--fs-3xl:  24px;
	--fs-4xl:  32px;
	--fs-5xl:  40px;
	--fs-6xl:  48px;

	/* ── Typography — Weight ── */
	--fw-normal:    400;
	--fw-medium:    500;
	--fw-semibold:  600;
	--fw-bold:      700;
	--fw-extrabold: 800;
	--fw-black:     900;

	/* ── Typography — Line Height ── */
	--lh-tight:   1.2;
	--lh-heading: 1.3;
	--lh-snug:    1.4;
	--lh-body:    1.6;
	--lh-relaxed: 1.7;
	--lh-loose:   1.8;

	/* ── Spacing Scale ── */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;

	/* ── Semantic Spacing ── */
	--space-xs:  var(--space-2);
	--space-sm:  var(--space-3);
	--space-md:  var(--space-5);
	--space-lg:  var(--space-8);
	--space-xl:  var(--space-12);
	--space-2xl: var(--space-16);
	--space-3xl: var(--space-20);

	/* ── Border Radius ── */
	--radius-xs:   4px;
	--radius-sm:   6px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   16px;
	--radius-2xl:  20px;
	--radius-pill: 9999px;

	/* ── Transitions ── */
	--transition-fast:   all 0.15s ease;
	--transition-base:   all 0.2s ease;
	--transition-slow:   all 0.3s ease;

	/* ── Z-Index ── */
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-modal:    400;
	--z-toast:    500;

	/* ── Container ── */
	--container-max:   1240px;
	--container-wide:  1440px;
	--container-sm:    768px;
	--container-pad-x: clamp(16px, 4vw, 32px);

	/* ── Button Tokens ── */
	--btn-h-sm:         32px;
	--btn-h-md:         40px;
	--btn-h-lg:         48px;
	--btn-pad-x-sm:     14px;
	--btn-pad-x-md:     20px;
	--btn-pad-x-lg:     28px;
	--btn-fs-sm:        var(--fs-xs);
	--btn-fs-md:        var(--fs-base);
	--btn-fs-lg:        var(--fs-md);
	--btn-fw:           var(--fw-bold);
	--btn-radius:       var(--radius-md);
	--btn-transition:   var(--transition-base);

	/* ── Form Tokens ── */
	--input-height:     40px;
	--input-pad-x:      14px;
	--input-pad-y:      10px;
	--input-fs:         var(--fs-base);
	--input-radius:     var(--radius-md);
	--input-border:     var(--color-border);
	--input-bg:         var(--color-surface);
	--input-text:       var(--color-text);
	--input-focus-ring: var(--focus-ring);

	/* ── Backward-Compat Aliases (casa-theme style.css uses --casa-* and --site-*) ── */
	--site-font:        var(--font-sans);
	--site-primary:     var(--color-primary);
	--site-accent:      var(--color-accent);
	--site-gold:        var(--color-gold);
	--site-bg:          var(--color-bg);
	--site-surface:     var(--color-surface);
	--site-text:        var(--color-text);
	--site-text-muted:  var(--color-text-muted);
	--site-border:      var(--color-border);
	--site-radius:      var(--radius-lg);
	--site-shadow-sm:   var(--shadow-sm);

	--casa-primary:         var(--color-primary);
	--casa-primary-hover:   var(--color-primary-hover);
	--casa-accent:          var(--color-accent);
	--casa-accent-hover:    var(--color-accent-hover);
	--casa-accent-light:    var(--color-accent-light);
	--casa-gold:            var(--color-gold);
	--casa-gold-light:      var(--color-gold-light);
	--casa-bg:              var(--color-bg);
	--casa-card-bg:         var(--color-surface);
	--casa-border:          var(--color-border);
	--casa-border-subtle:   var(--color-border-subtle);
	--casa-text:            var(--color-text);
	--casa-text-main:       var(--color-text);
	--casa-text-muted:      var(--color-text-muted);
	--casa-text-light:      var(--color-text-light);
	--casa-radius:          var(--radius-lg);
	--casa-radius-sm:       var(--radius-md);
	--casa-radius-md:       var(--radius-lg);
	--casa-radius-lg:       var(--radius-2xl);
	--casa-shadow-sm:       var(--shadow-sm);
	--casa-shadow-md:       var(--shadow-md);
	--casa-shadow-lg:       var(--shadow-lg);
	--btn-padding-x:        var(--btn-pad-x-md);
	--btn-padding-y:        11px;
	--btn-font-size:        var(--btn-fs-md);
	--btn-font-weight:      var(--btn-fw);
}

/* ============================================================
   2. CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, video, svg {
	display: block;
	max-width: 100%;
}

ul, ol {
	list-style: none;
}

table {
	border-collapse: collapse;
}

/* ============================================================
   3. TYPOGRAPHY SYSTEM
   ============================================================ */

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	color: var(--color-primary);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	margin-bottom: 0.5em;
}

h1 { font-size: clamp(28px, 5vw, var(--fs-6xl)); }
h2 { font-size: clamp(24px, 4vw, var(--fs-5xl)); }
h3 { font-size: clamp(20px, 3vw, var(--fs-4xl)); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

/* Body Text */
p {
	margin-bottom: 1.25em;
	line-height: var(--lh-body);
}

p:last-child { margin-bottom: 0; }

/* Links */
a {
	color: var(--color-accent);
	text-decoration: none;
	transition: var(--transition-fast);
}

a:hover { color: var(--color-accent-hover); }

/* Entry / Article Content */
.entry-content,
.casa-entry-content,
.wp-block-post-content {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--color-text);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.casa-entry-content h1,
.casa-entry-content h2,
.casa-entry-content h3,
.casa-entry-content h4,
.casa-entry-content h5,
.casa-entry-content h6 {
	margin-top: 1.75em;
	margin-bottom: 0.6em;
}

.entry-content p,
.casa-entry-content p {
	margin-bottom: 1.5em;
}

.entry-content ul,
.entry-content ol,
.casa-entry-content ul,
.casa-entry-content ol {
	padding-left: 1.5em;
	margin-bottom: 1.5em;
	list-style: revert;
}

.entry-content li,
.casa-entry-content li {
	margin-bottom: 0.4em;
}

.entry-content blockquote,
.casa-entry-content blockquote {
	border-left: 4px solid var(--color-accent);
	padding: var(--space-3) var(--space-5);
	background: var(--color-accent-light);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin: var(--space-6) 0;
	color: var(--color-text-muted);
	font-style: italic;
}

.entry-content code,
.casa-entry-content code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--color-surface-2);
	padding: 2px 6px;
	border-radius: var(--radius-xs);
	color: var(--color-accent);
}

/* Text Size Utilities */
.text-xs    { font-size: var(--fs-xs);   }
.text-sm    { font-size: var(--fs-sm);   }
.text-base  { font-size: var(--fs-base); }
.text-md    { font-size: var(--fs-md);   }
.text-lg    { font-size: var(--fs-lg);   }
.text-xl    { font-size: var(--fs-xl);   }
.text-2xl   { font-size: var(--fs-2xl);  }
.text-3xl   { font-size: var(--fs-3xl);  }
.text-4xl   { font-size: var(--fs-4xl);  }

/* Font Weight Utilities */
.fw-normal    { font-weight: var(--fw-normal);    }
.fw-medium    { font-weight: var(--fw-medium);    }
.fw-semibold  { font-weight: var(--fw-semibold);  }
.fw-bold      { font-weight: var(--fw-bold);      }
.fw-extrabold { font-weight: var(--fw-extrabold); }
.fw-black     { font-weight: var(--fw-black);     }

/* ============================================================
   4. BUTTON SYSTEM
   ============================================================ */

/* Base Button — all button variants inherit from here */
.btn,
.casa-btn,
.casa-btn-primary,
.casa-btn-secondary,
.casa-btn-outline,
.casa-btn-ghost,
.casa-btn-light,
.casa-btn-dark,
.casa-btn-filter,
/* WP backward-compat */
.button,
.btn-main,
.read-more,
.cta-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: var(--btn-h-md);
	padding: 0 var(--btn-pad-x-md);
	font-family: var(--font-sans);
	font-size: var(--btn-fs-md);
	font-weight: var(--btn-fw);
	line-height: 1;
	border-radius: var(--btn-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--btn-transition);
	-webkit-user-select: none;
	user-select: none;
	vertical-align: middle;
}

.btn:focus-visible,
.casa-btn:focus-visible,
.casa-btn-primary:focus-visible,
.casa-btn-secondary:focus-visible,
.casa-btn-outline:focus-visible,
.casa-btn-filter:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Size Variants */
.btn-sm, .casa-btn-sm {
	height: var(--btn-h-sm);
	padding: 0 var(--btn-pad-x-sm);
	font-size: var(--btn-fs-sm);
	border-radius: var(--radius-sm);
}

.btn-lg, .casa-btn-lg {
	height: var(--btn-h-lg);
	padding: 0 var(--btn-pad-x-lg);
	font-size: var(--btn-fs-lg);
}

.btn-block, .casa-btn-block {
	width: 100%;
	justify-content: center;
}

/* Color Variants — Primary */
.btn-primary,
.casa-btn-primary,
.btn-main,
.cta-button {
	background: var(--gradient-btn-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-accent);
	box-shadow: 0 4px 14px rgba(222, 133, 44, 0.32);
}

.btn-primary:hover,
.casa-btn-primary:hover,
.btn-main:hover,
.cta-button:hover {
	background: var(--gradient-btn-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-text-inverse);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(222, 133, 44, 0.42);
}

/* Color Variants — Secondary (ghost-on-dark) */
.btn-secondary,
.casa-btn-secondary {
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-text-inverse);
	border-color: rgba(242, 235, 196, 0.4);
}

.btn-secondary:hover,
.casa-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.22);
	color: var(--color-text-inverse);
}

/* Color Variants — Outline */
.btn-outline,
.casa-btn-outline,
.read-more,
.wp-block-button__link {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn-outline:hover,
.casa-btn-outline:hover,
.read-more:hover,
.wp-block-button__link:hover {
	background: var(--color-accent);
	color: var(--color-text-inverse);
	transform: translateY(-1px);
}

/* Color Variants — Ghost */
.btn-ghost,
.casa-btn-ghost {
	background: transparent;
	color: var(--color-text);
	border-color: transparent;
}

.btn-ghost:hover,
.casa-btn-ghost:hover {
	background: var(--color-surface-2);
	color: var(--color-primary);
}

/* Color Variants — Light */
.btn-light,
.casa-btn-light {
	background: var(--color-surface-2);
	color: var(--color-primary);
	border-color: var(--color-border);
}

.btn-light:hover,
.casa-btn-light:hover {
	background: var(--color-border);
	color: var(--color-primary);
}

/* Color Variants — Dark */
.btn-dark,
.casa-btn-dark {
	background: var(--color-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-primary);
}

.btn-dark:hover,
.casa-btn-dark:hover {
	background: var(--color-primary-hover);
	color: var(--color-text-inverse);
	transform: translateY(-1px);
}

/* Filter / Action Button */
.casa-btn-filter {
	background: var(--color-accent);
	color: var(--color-text-inverse);
	border-color: var(--color-accent);
}

.casa-btn-filter:hover {
	background: var(--color-accent-hover);
	color: var(--color-text-inverse);
}

/* WP Admin .button override for clarity */
.button.button-primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* ============================================================
   5. LAYOUT & CONTAINER
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.container-wide {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.container-sm {
	width: 100%;
	max-width: var(--container-sm);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

/* casa-wrapper backward-compat */
.casa-wrapper {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-6) var(--container-pad-x) var(--space-16);
}

/* ============================================================
   6. SECTION SPACING
   ============================================================ */
.section {
	padding-block: var(--space-16);
}

.section-sm {
	padding-block: var(--space-10);
}

.section-lg {
	padding-block: var(--space-3xl);
}

.section-xs {
	padding-block: var(--space-6);
}

/* ============================================================
   7. FORM SYSTEM
   ============================================================ */
label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
	display: block;
	width: 100%;
	height: var(--input-height);
	padding: var(--input-pad-y) var(--input-pad-x);
	font-family: var(--font-sans);
	font-size: var(--input-fs);
	color: var(--input-text);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	transition: var(--transition-fast);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
	line-height: var(--lh-body);
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-accent);
	box-shadow: var(--input-focus-ring);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-text-light);
}

.form-group {
	margin-bottom: var(--space-5);
}

.form-hint {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-top: var(--space-1);
}

.form-error {
	font-size: var(--fs-xs);
	color: var(--color-danger);
	margin-top: var(--space-1);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

/* ============================================================
   8. CARD BASE
   ============================================================ */
.card,
.casa-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
	transition: var(--transition-base);
}

.card:hover,
.casa-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card-sm {
	padding: var(--space-4);
	border-radius: var(--radius-lg);
}

.card-lg {
	padding: clamp(var(--space-6), 5vw, var(--space-10));
	border-radius: var(--radius-2xl);
}

/* ============================================================
   9. LINK & TEXT UTILITIES
   ============================================================ */
.link-accent { color: var(--color-accent); }
.link-accent:hover { color: var(--color-accent-hover); text-decoration: underline; }
.link-muted  { color: var(--color-text-muted); }
.link-muted:hover { color: var(--color-text); }

/* ============================================================
   10. UTILITY CLASSES
   ============================================================ */

/* ── Color Utilities ── */
.text-primary    { color: var(--color-primary);    }
.text-accent     { color: var(--color-accent);     }
.text-gold       { color: var(--color-gold);       }
.text-muted      { color: var(--color-text-muted); }
.text-light-val  { color: var(--color-text-light); }
.text-success    { color: var(--color-success);    }
.text-warning    { color: var(--color-warning);    }
.text-danger     { color: var(--color-danger);     }
.text-info       { color: var(--color-info);       }
.text-indigo     { color: var(--color-indigo);     }
.text-white      { color: #ffffff;                 }

/* Legacy color classes used in front-page.php and main.css */
.color-blue    { color: var(--color-accent);   }
.color-indigo  { color: var(--color-indigo);   }
.color-gold    { color: var(--color-gold-hover); }
.color-green   { color: var(--color-green);    }
.color-success { color: var(--color-success);  }

/* ── Background Utilities ── */
.bg-primary  { background: var(--color-primary);  }
.bg-accent   { background: var(--color-accent);   }
.bg-gold     { background: var(--color-gold);     }
.bg-success  { background: var(--color-success);  }
.bg-indigo   { background: var(--color-indigo);   }
.bg-surface  { background: var(--color-surface);  }
.bg-muted    { background: var(--color-surface-2);}
.bg-blue     { background: var(--color-accent);   }
.bg-green    { background: var(--color-success);  }

/* ── Display ── */
.d-none  { display: none;         }
.d-flex  { display: flex;         }
.d-grid  { display: grid;         }
.d-block { display: block;        }
.d-inline-flex { display: inline-flex; }

/* ── Flex ── */
.flex-col       { flex-direction: column;       }
.flex-wrap      { flex-wrap: wrap;              }
.items-center   { align-items: center;          }
.items-start    { align-items: flex-start;      }
.items-end      { align-items: flex-end;        }
.justify-center { justify-content: center;      }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end;    }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ── Spacing Utilities ── */
.mt-auto { margin-top: auto;       }
.mb-0    { margin-bottom: 0;       }
.mb-1    { margin-bottom: var(--space-1); }
.mb-2    { margin-bottom: var(--space-2); }
.mb-3    { margin-bottom: var(--space-3); }
.mb-4    { margin-bottom: var(--space-4); }
.mb-5    { margin-bottom: var(--space-5); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }

/* ── Text Alignment ── */
.text-center { text-align: center; }
.text-left   { text-align: left;   }
.text-right  { text-align: right;  }

/* ── Text Transform ── */
.uppercase    { text-transform: uppercase;    }
.lowercase    { text-transform: lowercase;    }
.capitalize   { text-transform: capitalize;   }
.tracking-wide { letter-spacing: 0.5px;       }
.tracking-wider { letter-spacing: 1px;        }

/* ── Border Radius ── */
.rounded-xs   { border-radius: var(--radius-xs);   }
.rounded-sm   { border-radius: var(--radius-sm);   }
.rounded-md   { border-radius: var(--radius-md);   }
.rounded-lg   { border-radius: var(--radius-lg);   }
.rounded-xl   { border-radius: var(--radius-xl);   }
.rounded-2xl  { border-radius: var(--radius-2xl);  }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: 50%;               }

/* ── Shadow ── */
.shadow-none { box-shadow: none;         }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }

/* ── Width / Height ── */
.w-full { width: 100%;   }
.h-full { height: 100%;  }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto;   }

/* ── Transition ── */
.transition     { transition: var(--transition-base); }
.transition-fast{ transition: var(--transition-fast); }

/* ── Pill / Badge ── */
.badge,
.pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	white-space: nowrap;
}

.badge-accent { background: var(--color-accent-light); color: var(--color-accent); }
.badge-gold   { background: var(--color-gold-light);   color: var(--color-gold-hover); }
.badge-success{ background: #d1fae5; color: #065f46; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-muted  { background: var(--color-surface-2);   color: var(--color-text-muted); }

/* ── Divider ── */
.divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin-block: var(--space-5);
}

.divider-dashed {
	border-top-style: dashed;
}

/* ── Accessibility ── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus visible global */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/* ============================================================
   11. RESPONSIVE BREAKPOINTS
   ============================================================
   Breakpoints (desktop-first):
   - xl:  ≤ 1199px  (Large tablets / small laptops)
   - lg:  ≤  991px  (Tablets landscape)
   - md:  ≤  767px  (Tablets portrait / large phones)
   - sm:  ≤  575px  (Small phones)
   ============================================================ */

/* xl — ≤ 1199px */
@media (max-width: 1199px) {
	.hide-xl { display: none; }
	.container, .casa-wrapper { padding-inline: clamp(16px, 3vw, 24px); }
}

/* lg — ≤ 991px */
@media (max-width: 991px) {
	.hide-lg { display: none; }
	.form-row { grid-template-columns: 1fr; }
	h1 { font-size: clamp(24px, 6vw, 40px); }
	h2 { font-size: clamp(20px, 5vw, 32px); }
}

/* md — ≤ 767px */
@media (max-width: 767px) {
	.hide-md { display: none; }
	.section     { padding-block: var(--space-10); }
	.section-lg  { padding-block: var(--space-16); }
	.form-row    { grid-template-columns: 1fr; }
	.card, .casa-card { padding: var(--space-5); }
	.btn-block-md { width: 100%; justify-content: center; }
}

/* sm — ≤ 575px */
@media (max-width: 575px) {
	.hide-sm { display: none; }
	.section     { padding-block: var(--space-8); }
	.section-sm  { padding-block: var(--space-6); }
	h1 { font-size: clamp(22px, 7vw, 32px); }
	h2 { font-size: clamp(18px, 6vw, 28px); }
	h3 { font-size: clamp(16px, 5vw, 24px); }
	.btn, .casa-btn,
	.casa-btn-primary, .casa-btn-secondary,
	.casa-btn-outline, .casa-btn-filter {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
   12. GUTENBERG DUAL MODE BLOCK COLOR OVERRIDES
   ============================================================ */
[data-color-mode="c"] .has-primary-color { color: var(--color-primary) !important; }
[data-color-mode="c"] .has-primary-background-color { background-color: var(--color-primary) !important; }
[data-color-mode="c"] .has-secondary-color { color: var(--color-text-muted) !important; }
[data-color-mode="c"] .has-secondary-background-color { background-color: var(--color-surface-2) !important; }
[data-color-mode="c"] .has-accent-color { color: var(--color-accent) !important; }
[data-color-mode="c"] .has-accent-background-color { background-color: var(--color-accent) !important; }
[data-color-mode="c"] .has-gold-color { color: var(--color-gold) !important; }
[data-color-mode="c"] .has-gold-background-color { background-color: var(--color-gold) !important; }
[data-color-mode="c"] .has-bg-background-color { background-color: var(--color-bg) !important; }
[data-color-mode="c"] .has-surface-background-color { background-color: var(--color-surface) !important; }
[data-color-mode="c"] .has-text-color { color: var(--color-text) !important; }

/* ============================================================
   13. APPLE LIQUID GLASS GLOBAL HEADER & DUAL MODE SYSTEM
   ============================================================ */

/* ── Apple Liquid Glass Base Tokens ── */
:root {
	--gmp-header-control-height: 38px;
}

:root,
html[data-color-mode="g"] {
	--glass-header-bg:           rgba(43, 14, 6, 0.88);
	--glass-header-border:       1px solid rgba(246, 179, 74, 0.28);
	--glass-header-shadow:       0 10px 32px rgba(67, 18, 5, 0.45), inset 0 1px 1px 0 rgba(246, 179, 74, 0.25);
	--glass-pill-capsule-bg:     rgba(0, 0, 0, 0.38);
	--glass-pill-capsule-border: 1px solid rgba(246, 179, 74, 0.22);
	--glass-pill-capsule-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.18), inset 0 -1px 2px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.25);
	--glass-nav-active-bg:       linear-gradient(180deg, #ffffff 0%, #fdf5ea 100%);
	--glass-nav-active-color:    #431707;
	--glass-nav-active-shadow:   0 4px 14px rgba(0, 0, 0, 0.26), 0 1px 3px rgba(222, 133, 44, 0.35), inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(222, 133, 44, 0.15);
	--glass-switch-active-bg:    linear-gradient(135deg, #f6b34a 0%, #de852c 100%);
	--glass-switch-active-color: #382013;
	--glass-switch-glow:         0 2px 14px rgba(222, 133, 44, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.65);
	--glass-dropdown-bg:         rgba(43, 14, 6, 0.94);
	--glass-dropdown-border:     1px solid rgba(246, 179, 74, 0.26);
	--glass-dropdown-shadow:     0 20px 48px -8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(246, 179, 74, 0.2);
}

html[data-color-mode="c"] {
	--glass-header-bg:           rgba(11, 29, 49, 0.90);
	--glass-header-border:       1px solid rgba(52, 84, 209, 0.32);
	--glass-header-shadow:       0 10px 32px rgba(11, 29, 49, 0.45), inset 0 1px 1px 0 rgba(255, 255, 255, 0.22);
	--glass-pill-capsule-bg:     rgba(0, 0, 0, 0.40);
	--glass-pill-capsule-border: 1px solid rgba(255, 255, 255, 0.16);
	--glass-pill-capsule-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.18), inset 0 -1px 2px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.25);
	--glass-nav-active-bg:       linear-gradient(180deg, #ffffff 0%, #edf3f9 100%);
	--glass-nav-active-color:    #0b1d31;
	--glass-nav-active-shadow:   0 4px 14px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(52, 84, 209, 0.35), inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(52, 84, 209, 0.15);
	--glass-switch-active-bg:    linear-gradient(135deg, #3454d1 0%, #1e40af 100%);
	--glass-switch-active-color: #ffffff;
	--glass-switch-glow:         0 2px 14px rgba(52, 84, 209, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.5);
	--glass-dropdown-bg:         rgba(11, 29, 49, 0.95);
	--glass-dropdown-border:     1px solid rgba(255, 255, 255, 0.18);
	--glass-dropdown-shadow:     0 20px 48px -8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* ── Global Header Container (Liquid Glass Full-Width Bar) ── */
header.gmp-global-header-map,
.gmp-global-header-map {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 24px;
	box-sizing: border-box;
	background: var(--glass-header-bg);
	backdrop-filter: blur(24px) saturate(190%);
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	border-bottom: var(--glass-header-border);
	box-shadow: var(--glass-header-shadow);
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Brand Identity ── */
.gmp-global-header-map .brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #ffffff;
	flex-shrink: 0;
	transition: opacity 0.2s;
}
.gmp-global-header-map .brand:hover {
	opacity: 0.92;
}
.gmp-global-header-map .brand-img-logo {
	height: 38px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.gmp-global-header-map .brand-logo-only {
	padding-right: 6px;
}

/* ── iOS-Style Segmented Navigation Switch (Liquid Glass Capsule) ── */
.gmp-header-nav-ios.apple-segmented-nav {
	display: inline-flex;
	align-items: center;
	height: var(--gmp-header-control-height, 38px);
	box-sizing: border-box;
	background: var(--glass-pill-capsule-bg);
	border: var(--glass-pill-capsule-border);
	backdrop-filter: blur(20px) saturate(190%);
	-webkit-backdrop-filter: blur(20px) saturate(190%);
	border-radius: 9999px;
	padding: 3.5px;
	gap: 3px;
	box-shadow: var(--glass-pill-capsule-shadow);
	position: relative;
	flex-shrink: 0;
}
.gmp-header-nav-ios .gmp-nav-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	gap: 7px;
	padding: 0 14px;
	border-radius: 9999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	position: relative;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	user-select: none;
}
.gmp-header-nav-ios .gmp-nav-tab .tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.gmp-header-nav-ios .gmp-nav-tab .tab-svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	stroke-width: 1.8;
	display: block;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.2s ease;
}
.gmp-header-nav-ios .gmp-nav-tab:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.09);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.gmp-header-nav-ios .gmp-nav-tab:hover .tab-svg {
	transform: translateY(-0.5px) scale(1.08);
}
.gmp-header-nav-ios .gmp-nav-tab.active {
	background: var(--glass-nav-active-bg);
	color: var(--glass-nav-active-color);
	font-weight: 700;
	box-shadow: var(--glass-nav-active-shadow);
}
.gmp-header-nav-ios .gmp-nav-tab.active .tab-svg {
	stroke-width: 2.1;
	transform: scale(1.03);
}

/* ── Header Selectors & Search (Viewer Integration) ── */
.gmp-global-header-map .header-selectors {
	display: flex;
	align-items: center;
	gap: 8px;
}
.gmp-global-header-map #gh-search-wrap,
.gmp-global-header-map .gh-search-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: var(--gmp-header-control-height, 38px) !important;
	box-sizing: border-box;
	background: var(--glass-pill-capsule-bg);
	border: var(--glass-pill-capsule-border);
	backdrop-filter: blur(20px) saturate(190%);
	-webkit-backdrop-filter: blur(20px) saturate(190%);
	border-radius: 9999px;
	padding: 0 14px;
	gap: 6px;
	box-shadow: var(--glass-pill-capsule-shadow);
	transition: all 0.2s ease;
	flex-shrink: 0;
}
.gmp-global-header-map #gh-search-wrap:focus-within,
.gmp-global-header-map .gh-search-wrap:focus-within {
	background: rgba(0, 0, 0, 0.52);
	border-color: var(--color-accent, #de852c);
	box-shadow: 0 0 14px rgba(222, 133, 44, 0.35);
}
.gmp-global-header-map #gh_search_input {
	height: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none;
	color: #ffffff;
	font-size: 12.5px;
	line-height: normal;
	width: 140px;
	padding: 0 !important;
	margin: 0;
	transition: width 0.2s ease;
	box-sizing: border-box;
}
.gmp-global-header-map #gh_search_input:focus {
	width: 180px;
}
.gmp-global-header-map #gh_search_input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.gmp-global-header-map .gh-search-icon {
	position: static !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	opacity: 0.8;
	flex-shrink: 0;
	line-height: 1;
}
.gmp-global-header-map .search-svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	display: block;
}

/* ── Header Actions Bar ── */
.gmp-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ── Apple-Style Liquid Glass Dual Color Mode Switcher ── */
/* ── Apple-Style Liquid Glass Dual Color Mode Switcher ── */
.apple-mode-switch,
#casaAppleModeSwitch {
	display: inline-flex;
	align-items: center;
	height: var(--gmp-header-control-height, 38px);
	box-sizing: border-box;
	background: var(--glass-pill-capsule-bg);
	border: var(--glass-pill-capsule-border);
	backdrop-filter: blur(20px) saturate(190%);
	-webkit-backdrop-filter: blur(20px) saturate(190%);
	border-radius: 9999px;
	padding: 3.5px;
	gap: 2px;
	box-shadow: var(--glass-pill-capsule-shadow);
	flex-shrink: 0;
}
.apple-mode-switch .apple-mode-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	gap: 6px;
	padding: 0 12px;
	border-radius: 9999px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.68);
	background: transparent;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
}
.apple-mode-switch .apple-mode-btn:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.09);
}
.apple-mode-switch .apple-mode-btn.active {
	background: var(--glass-switch-active-bg);
	color: var(--glass-switch-active-color);
	box-shadow: var(--glass-switch-glow);
}
.apple-mode-switch .apple-mode-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.apple-mode-switch .mode-svg {
	width: 13.5px;
	height: 13.5px;
	stroke: currentColor;
	display: block;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.apple-mode-switch .apple-mode-btn:hover .mode-svg {
	transform: scale(1.12) rotate(6deg);
}

/* Glass Divider between Color Modes and F-Mode */
.apple-mode-switch .apple-mode-divider {
	display: inline-block;
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, 0.22);
	margin: 0 2px;
	border-radius: 1px;
	flex-shrink: 0;
}

/* F-Mode (Fullscreen Mode inside Apple Liquid Glass Capsule) */
.apple-mode-switch .apple-mode-btn.mode-f {
	position: relative;
}
.apple-mode-switch .apple-mode-btn.mode-f:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}
.apple-mode-switch .apple-mode-btn.mode-f:hover .mode-svg {
	transform: scale(1.15);
}
.apple-mode-switch .apple-mode-btn.mode-f.active {
	background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 14px rgba(16, 185, 129, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

/* ── Action Buttons & Fullscreen ── */
.gmp-global-header-map .user-btn,
.gmp-global-header-map .gmp-btn-header-ghost,
.gmp-global-header-map .gmp-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--gmp-header-control-height, 38px);
	box-sizing: border-box;
	background: var(--glass-pill-capsule-bg, rgba(255, 255, 255, 0.11));
	border: var(--glass-pill-capsule-border, 1px solid rgba(255, 255, 255, 0.18));
	color: #ffffff;
	border-radius: 9999px;
	padding: 0 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	gap: 7px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.22);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
	white-space: nowrap;
}
.gmp-global-header-map .user-btn:hover,
.gmp-global-header-map .gmp-btn-header-ghost:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.32);
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 14px rgba(0, 0, 0, 0.3);
}
.gmp-global-header-map .user-btn .btn-icon,
.gmp-global-header-map .user-btn #fsIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.gmp-global-header-map .btn-svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	display: block;
	flex-shrink: 0;
}

/* Fullscreen / F-Mode is strictly restricted to Map Viewer only */
body:not(.gmp-stealth-mode) .gmp-global-header-map .btn-fullscreen,
body:not(.gmp-stealth-mode) .btn-fullscreen,
body:not(.gmp-stealth-mode) .apple-mode-btn.mode-f,
body:not(.gmp-stealth-mode) .apple-mode-divider {
	display: none !important;
}

/* ── Apple Liquid Glass Header CTA Button ── */
.gmp-global-header-map .gmp-btn-header-cta,
.gmp-global-header-map .apple-liquid-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--gmp-header-control-height, 38px);
	box-sizing: border-box;
	background: var(--gradient-btn-primary, linear-gradient(135deg, #d4a359 0%, #b8860b 100%));
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff !important;
	border-radius: 9999px;
	padding: 0 16px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	gap: 6px;
	text-decoration: none;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
	white-space: nowrap;
}
.gmp-global-header-map .gmp-btn-header-cta:hover,
.gmp-global-header-map .apple-liquid-cta:hover {
	opacity: 0.95;
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 16px rgba(0, 0, 0, 0.35);
	color: #ffffff !important;
}
.gmp-global-header-map .gmp-btn-header-cta .cta-icon,
.gmp-global-header-map .apple-liquid-cta .cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.gmp-global-header-map .gmp-btn-header-cta .cta-svg,
.gmp-global-header-map .apple-liquid-cta .cta-svg {
	width: 13.5px;
	height: 13.5px;
	stroke: currentColor;
	display: block;
	flex-shrink: 0;
}

/* ── Apple Liquid Glass Auth Dropdown ── */
.gmp-auth-dropdown-wrap {
	position: relative;
	display: inline-block;
}
.gmp-auth-dropdown-wrap .gmp-avatar-mini {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.gmp-auth-dropdown-wrap .gmp-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.75;
	transition: transform 0.2s ease;
}
.gmp-auth-dropdown-wrap .caret-svg {
	width: 10px;
	height: 10px;
	stroke: currentColor;
	stroke-width: 2.5;
	display: block;
}
.gmp-auth-dropdown-wrap.active .gmp-caret {
	transform: rotate(180deg);
}
.gmp-liquid-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 230px;
	background: var(--glass-dropdown-bg);
	border: var(--glass-dropdown-border);
	backdrop-filter: blur(24px) saturate(190%);
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	border-radius: 14px;
	padding: 6px;
	box-shadow: var(--glass-dropdown-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10000;
	overflow: hidden;
}
.gmp-auth-dropdown-wrap.active .gmp-liquid-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.gmp-login-menu {
	width: 280px;
}
.gmp-menu-header {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gmp-menu-header strong {
	display: block;
	color: #ffffff;
	font-size: 13.5px;
}
.gmp-menu-header span {
	display: block;
	color: rgba(255, 255, 255, 0.65);
	font-size: 11.5px;
	margin-top: 2px;
}
.gmp-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: #cbd5e1;
	font-size: 13px;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.15s ease;
}
.gmp-menu-item .menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.gmp-menu-item .menu-svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	display: block;
}
.gmp-menu-item:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}
.gmp-menu-item.gmp-logout {
	color: #fca5a5;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin-top: 4px;
}
.gmp-menu-item.gmp-logout:hover {
	background: rgba(220, 38, 38, 0.2);
	color: #fef2f2;
}

/* ── Ajax Login Form in Glass Dropdown ── */
.gmp-ajax-form {
	padding: 16px;
}
.gmp-form-title {
	margin: 0 0 4px;
	font-size: 14.5px;
	font-weight: 700;
	color: #ffffff;
}
.gmp-form-desc {
	margin: 0 0 12px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.65);
}
.gmp-input-group {
	margin-bottom: 10px;
}
.gmp-input-group input {
	width: 100%;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: #ffffff;
	font-size: 12.5px;
	outline: none;
	box-sizing: border-box;
	transition: all 0.2s ease;
}
.gmp-input-group input:focus {
	border-color: var(--color-accent);
	background: rgba(0, 0, 0, 0.5);
}
.gmp-btn-submit {
	width: 100%;
	padding: 9px;
	background: var(--gradient-btn-primary);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(222, 133, 44, 0.35);
	transition: all 0.2s ease;
}
.gmp-btn-submit:hover {
	filter: brightness(1.1);
}

/* ── Mobile Hamburger & Drawer ── */
.gmp-global-header-map .casa-mobile-menu-btn {
	display: none;
	align-items: center;
	justify-content: center;
	height: var(--gmp-header-control-height, 38px);
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border-radius: 9999px;
	padding: 0 12px;
	cursor: pointer;
	transition: background 0.2s;
	flex-shrink: 0;
}
.gmp-global-header-map .casa-mobile-menu-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}
.gmp-global-header-map .hamburger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gmp-global-header-map .hamburger-svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	display: block;
}
.gmp-mobile-drawer {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--glass-header-bg);
	border-bottom: var(--glass-header-border);
	backdrop-filter: blur(24px) saturate(190%);
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
	padding: 12px 18px;
	box-sizing: border-box;
	z-index: 9998;
}
.gmp-mobile-drawer.is-open {
	display: block;
}
.gmp-mobile-drawer-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gmp-mobile-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.15s ease;
}
.gmp-mobile-link .mobile-nav-svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	flex-shrink: 0;
}
.gmp-mobile-link:hover,
.gmp-mobile-link.active {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

@media (max-width: 991px) {
	.gmp-header-nav-ios.apple-segmented-nav {
		display: none;
	}
	.gmp-global-header-map .gmp-btn-header-cta {
		display: none;
	}
	.gmp-global-header-map .casa-mobile-menu-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.gmp-global-header-map .user-name-text,
	.gmp-global-header-map .login-btn-text,
	.gmp-global-header-map .fs-text {
		display: none;
	}
}

/* ============================================================
   CANONICAL GLOBAL HERO SECTION (gmp-hero-section)
   Synchronized Apple Liquid Glass Hero Showcase & Live Market Stats
   ============================================================ */
:root,
html[data-color-mode="g"] {
	--gh-glass-base: rgba(67, 18, 5, 0.92);
	--gh-glass-gradient: linear-gradient(145deg, rgba(83, 26, 6, 0.96) 0%, rgba(53, 16, 4, 0.98) 100%);
	--gh-glass-border: 1px solid rgba(246, 179, 74, 0.25);
	--gh-glass-shadow: 0 12px 36px rgba(67, 18, 5, 0.15);
	--gh-glass-glow: radial-gradient(circle, rgba(222, 133, 44, 0.20) 0%, transparent 70%);
	--gh-brand-orange-gradient: linear-gradient(135deg, #f6b34a, #de852c);
	--gh-brand-orange-glow: rgba(222, 133, 44, 0.32);
	--gh-brand-gold: #f6b34a;
	--gh-card-sub: #f2ebc4;
	--gh-hero-meta: #f2ebc4;
	--gh-hero-pill-active: rgba(222, 133, 44, 0.22);
	--gh-hero-pill-border: rgba(246, 179, 74, 0.35);
	--gh-card-bg: #ffffff;
	--gh-border-light: #e8ddd1;
	--gh-spec-bg: #fbf7f2;
	--gh-text-main: #382013;
	--gh-text-sub: #75503a;
	--gh-text-muted: #9c7f6e;
}

html[data-color-mode="c"] {
	--gh-glass-base: rgba(14, 34, 61, 0.90);
	--gh-glass-gradient: linear-gradient(145deg, rgba(14, 34, 61, 0.94) 0%, rgba(8, 22, 40, 0.98) 100%);
	--gh-glass-border: 1px solid rgba(255, 255, 255, 0.16);
	--gh-glass-shadow: 0 12px 36px rgba(11, 29, 49, 0.14);
	--gh-glass-glow: radial-gradient(circle, rgba(52, 84, 209, 0.18) 0%, transparent 70%);
	--gh-brand-orange-gradient: linear-gradient(135deg, #3454d1 0%, #1e40af 100%);
	--gh-brand-orange-glow: rgba(52, 84, 209, 0.30);
	--gh-brand-gold: #f59e0b;
	--gh-card-sub: #cbd5e1;
	--gh-hero-meta: #94a3b8;
	--gh-hero-pill-active: rgba(52, 84, 209, 0.25);
	--gh-hero-pill-border: rgba(52, 84, 209, 0.40);
	--gh-card-bg: #ffffff;
	--gh-border-light: #e2e8f0;
	--gh-spec-bg: #f8fafc;
	--gh-text-main: #0f172a;
	--gh-text-sub: #64748b;
	--gh-text-muted: #94a3b8;
}

.gmp-hero-section {
	padding: 24px 0 20px;
	width: 100%;
}

.gmp-hero-card {
	background: var(--gh-glass-gradient);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border: var(--gh-glass-border);
	box-shadow: var(--gh-glass-shadow);
	border-radius: 18px;
	padding: 32px 36px;
	position: relative;
	overflow: hidden;
}

.gmp-hero-card::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 500px;
	height: 500px;
	background: var(--gh-glass-glow);
	pointer-events: none;
}

.gmp-hero-grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	position: relative;
	z-index: 1;
}

.gmp-hero-info {
	flex: 1;
}

.gmp-hero-subtitle {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gh-card-sub);
	letter-spacing: 0.8px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gmp-badge-star {
	color: var(--gh-brand-gold);
	font-weight: 800;
}

.gmp-sep {
	color: rgba(255, 255, 255, 0.25);
}

.gmp-hero-title {
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: -0.5px;
	margin-bottom: 12px;
	line-height: 1.2;
}

.gmp-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 13px;
	color: var(--gh-hero-meta);
	margin-bottom: 18px;
}

.gmp-hero-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gmp-hero-carts-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.gmp-carts-label {
	font-size: 12px;
	color: var(--gh-card-sub);
	font-weight: 600;
}

.gmp-cart-chip {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 12px;
	color: var(--gh-card-sub);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gmp-cart-chip.active {
	background: var(--gh-hero-pill-active);
	border-color: var(--gh-hero-pill-border);
	color: var(--gh-brand-gold);
}

.gmp-hero-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 250px;
}

.gmp-btn-map-launch {
	background: var(--gh-brand-orange-gradient);
	color: #FFFFFF;
	padding: 15px 26px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: 0 6px 20px var(--gh-brand-orange-glow);
	transition: all 0.25s;
}

.gmp-btn-map-launch:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px var(--gh-brand-orange-glow);
	filter: brightness(1.08);
	color: #FFFFFF;
}

.gmp-hero-note {
	font-size: 11.5px;
	color: var(--gh-card-sub);
	opacity: 0.85;
	text-align: center;
	line-height: 1.4;
}

.gmp-hero-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--gh-card-sub);
	margin-bottom: 16px;
	max-width: 820px;
}

.gmp-hero-note-btn {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--gh-card-sub);
	padding: 10px 18px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.gmp-hero-note-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--gh-brand-gold);
	color: #ffffff;
}

.gmp-stat-val .unit {
	font-size: 14px;
	font-weight: 600;
	color: var(--gh-text-muted);
	margin-left: 4px;
}

.gmp-stat-sub {
	font-size: 11px;
	color: var(--gh-text-muted);
	margin-top: 3px;
	display: block;
	line-height: 1.3;
}

/* ── Live Market Stats HUD (Luxury Porcelain Cards) ───────────────────────── */
.gmp-stats-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 24px;
	width: 100%;
}

.gmp-stat-card {
	background: var(--gh-card-bg, #ffffff);
	border: 1px solid var(--gh-border-light, rgba(226, 232, 240, 0.9));
	box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
	border-radius: 18px;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	overflow: hidden;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.gmp-stat-card:hover {
	transform: translateY(-3px);
	border-color: var(--gh-brand-orange, #de852c);
	box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
}

.gmp-stat-icon {
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gh-spec-bg, #f8fafc);
	border: 1px solid var(--gh-border-subtle, #e2e8f0);
	flex-shrink: 0;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gmp-stat-card:hover .gmp-stat-icon {
	transform: scale(1.06);
}

.gmp-stat-icon svg,
.gmp-svg-stat-icon {
	width: 24px;
	height: 24px;
	display: block;
}

/* Category-Specific Luxury Icon Badges */
.gmp-stat-icon.total {
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(30, 64, 175, 0.12) 100%);
	border: 1px solid rgba(37, 99, 235, 0.22);
	color: #2563eb;
}

.gmp-stat-icon.available {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.12) 100%);
	border: 1px solid rgba(16, 185, 129, 0.22);
	color: #10b981;
}

.gmp-stat-icon.reserved {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.12) 100%);
	border: 1px solid rgba(245, 158, 11, 0.22);
	color: #f59e0b;
}

.gmp-stat-icon.sold {
	background: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(71, 85, 105, 0.12) 100%);
	border: 1px solid rgba(100, 116, 139, 0.22);
	color: #64748b;
}

.gmp-stat-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.gmp-stat-val {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--gh-text-main, #0f172a);
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
}

.gmp-stat-val .unit {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gh-text-sub, #64748b);
	letter-spacing: normal;
}

.gmp-stat-lab {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gh-text-sub, #64748b);
	margin-top: 4px;
	line-height: 1.3;
}

.gmp-rate-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 6px;
	background: rgba(100, 116, 139, 0.12);
	color: #475569;
	margin-left: 4px;
}

.gmp-stat-sub {
	display: none !important;
}

@media (max-width: 991px) {
	.gmp-hero-grid { flex-direction: column; align-items: stretch; text-align: center; }
	.gmp-hero-meta { justify-content: center; }
	.gmp-hero-carts-wrap { justify-content: center; }
	.gmp-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
	.gmp-stats-bar { grid-template-columns: 1fr; }
}

/* Accessibility & Screen Reader Text (WCAG 2.1 AA) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
	background-color: #ffffff;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	clip: auto !important;
	clip-path: none;
	color: #de852c;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 12px;
	top: 12px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	width: auto;
	z-index: 100000;
	outline: 2px solid #de852c;
}