/*
Theme Name: SuperTheme
Theme URI: https://developer.nasir.fr/supertheme
Author: Nasir Mehmood
Author URI: https://developer.nasir.fr
Description: A flexible multipurpose theme for shops, restaurants, travel businesses and blogs. Build any page from 30 section types, each with several layouts, and style the header, footer and blog from dedicated settings screens. Full WooCommerce support with four cart and four checkout layouts. Includes dark mode and RTL support. Every font, icon and placeholder image ships with the theme, so it makes no third-party requests of its own.
Version: 1.0.35
Tested up to: 7.1
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 9.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supertheme
Domain Path: /languages
Tags: blog, e-commerce, food-and-drink, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, theme-options, threaded-comments, translation-ready
*/

/* ===== CSS Variables ===== */
:root {
    --st-primary: #0066CC;
    --st-primary-dark: #004999;
    --st-primary-light: #e6f0ff;
    --st-primary-rgb: 0, 102, 204;
    --st-secondary: #00C9B7;
    --st-secondary-dark: #00a89a;
    --st-accent: #FF6B35;
    --st-success: #10b981;
    --st-warning: #f59e0b;
    --st-danger: #ef4444;
    --st-white: #ffffff;
    --st-black: #000000;
    --st-dark: #1a1a2e;
    --st-gray-50: #f9fafb;
    --st-gray-100: #f3f4f6;
    --st-gray-200: #e5e7eb;
    --st-gray-300: #d1d5db;
    --st-gray-400: #9ca3af;
    --st-gray-500: #6b7280;
    --st-gray-600: #4b5563;
    --st-gray-700: #374151;
    --st-gray-800: #1f2937;
    --st-gray-900: #111827;
    --st-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --st-font-heading: 'Poppins', var(--st-font-primary);
    --st-font-size-base: 16px;
    --st-line-height: 1.6;
    --st-container-width: 1200px;
    --st-header-height: 80px;
    --st-topbar-height: 40px;
    --st-radius-sm: 4px;
    --st-radius-md: 8px;
    --st-radius-lg: 12px;
    --st-radius-xl: 16px;
    --st-radius-full: 50px;
    --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --st-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --st-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --st-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --st-transition-fast: 0.15s ease;
    --st-transition-base: 0.3s ease;
    --st-z-dropdown: 100;
    --st-z-sticky: 500;
    --st-z-fixed: 1000;
    --st-z-modal: 1050;
    --st-header-bg: #ffffff;
    --st-footer-bg: #1a1a2e;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--st-font-primary); font-size: var(--st-font-size-base); line-height: var(--st-line-height); color: var(--st-gray-700); background: var(--st-white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--st-primary); text-decoration: none; transition: color var(--st-transition-fast); }
a:hover { color: var(--st-primary-dark); }
h1, h2, h3, h4, h5, h6 { font-family: var(--st-font-heading); font-weight: 600; line-height: 1.3; color: var(--st-gray-900); margin-bottom: 0.5em; }
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; }
p { margin-bottom: 1rem; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }

/* Layout */
.st-container { width: 100%; max-width: var(--st-container-width); margin: 0 auto; padding: 0 1rem; }
.st-site { display: flex; flex-direction: column; min-height: 100vh; }
.st-site-content { flex: 1; }
.st-content-area { display: grid; gap: 2rem; }
.st-content-area.has-sidebar { grid-template-columns: 1fr 300px; }
@media (max-width: 992px) { .st-content-area.has-sidebar { grid-template-columns: 1fr; } }

/* Preloader - Main styles in NEW FEATURES section */
.st-preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--st-white); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.5s, visibility 0.5s; }
.st-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.st-preloader-spinner { width: 50px; height: 50px; border: 3px solid var(--st-gray-200); border-top-color: var(--st-primary); border-radius: 50%; animation: st-spin 1s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* Topbar */
.st-topbar { background: var(--st-dark); color: var(--st-white); font-size: 0.875rem; padding: 0.5rem 0; position: relative; z-index: var(--st-z-fixed); }
.st-topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.st-topbar-left, .st-topbar-right { display: flex; align-items: center; gap: 1.5rem; }
.st-topbar-center { flex: 1; text-align: center; }
.st-topbar a { color: rgba(255, 255, 255, 0.85); }
.st-topbar a:hover { color: var(--st-white); }
.st-topbar i { margin-right: 0.5rem; opacity: 0.7; }
.st-topbar-announcement { color: var(--st-secondary); font-weight: 500; }
.st-topbar-social, .st-social-links { display: flex; gap: 0.75rem; }
.st-topbar-social a, .st-social-links a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); font-size: 0.75rem; transition: all var(--st-transition-fast); color: #fff; }
.st-topbar-social a:hover, .st-social-links a:hover { background: var(--st-primary); transform: translateY(-2px); }
@media (max-width: 768px) { .st-topbar-center, .st-topbar-right { display: none; } }

/* Header */
.st-header { background: var(--header-bg, var(--st-header-bg)); color: var(--header-text, var(--st-gray-700)); height: var(--header-height, var(--st-header-height)); display: flex; align-items: center; position: relative; z-index: var(--st-z-sticky); box-shadow: var(--st-shadow-sm); transition: all var(--st-transition-base); }
.has-sticky-header .st-header { position: fixed; top: 0; left: 0; right: 0; }
.has-sticky-header.has-topbar .st-header { top: var(--st-topbar-height); }
.has-sticky-header .st-site-content { padding-top: var(--header-height, var(--st-header-height)); }
.has-sticky-header.has-topbar .st-site-content { padding-top: calc(var(--header-height, var(--st-header-height)) + var(--st-topbar-height)); }
.st-header.scrolled { box-shadow: var(--st-shadow-lg); }
.st-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; }
.st-logo { flex-shrink: 0; }
.st-logo img { max-height: 50px; max-width: var(--logo-width, 150px); width: auto; }
.st-logo-text { font-family: var(--st-font-heading); font-size: 1.75rem; font-weight: 700; color: var(--header-text, var(--st-dark)); }
.st-logo-text span { color: var(--st-primary); }
.st-nav { flex: 1; display: flex; justify-content: center; }
.st-nav-menu { display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.st-nav-menu li { position: relative; }
.st-nav-menu > li > a { display: block; padding: 0.75rem 1rem; color: var(--header-text, var(--st-gray-700)); font-weight: 500; font-size: 0.9375rem; border-radius: var(--st-radius-md); }
.st-nav-menu > li > a:hover, .st-nav-menu > li.current-menu-item > a { color: var(--st-primary); background: var(--st-primary-light); }
.st-nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--st-white); border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-xl); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--st-transition-fast); list-style: none; z-index: var(--st-z-dropdown); }
.st-nav-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Nested sub-menus fly out to the SIDE of their parent item (not below it, over the menu) */
.st-nav-menu .sub-menu .sub-menu { top: -0.5rem; left: 100%; transform: translateX(10px); }
.st-nav-menu .sub-menu li:hover > .sub-menu, .st-nav-menu .sub-menu li:focus-within > .sub-menu { transform: translateX(0); }
.st-nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.st-nav-menu .sub-menu > li.menu-item-has-children > a { position: relative; padding-right: 2rem; }
.st-nav-menu .sub-menu > li.menu-item-has-children > a::after { content: ""; position: absolute; right: 0.9rem; top: 50%; width: 0.4rem; height: 0.4rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
/* JS adds this when a fly-out would leave the viewport */
.st-nav-menu .sub-menu .sub-menu.st-flip-left { left: auto; right: 100%; }
.st-nav-menu .sub-menu a { display: block; padding: 0.625rem 1rem; color: var(--st-gray-600); font-size: 0.875rem; border-radius: var(--st-radius-md); }
.st-nav-menu .sub-menu a:hover { background: var(--st-gray-100); color: var(--st-primary); }
.st-header-cta { flex-shrink: 0; }
.st-header-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.st-btn-cta { background: var(--cta-bg, var(--st-primary)); color: var(--cta-text, var(--st-white)); border-color: var(--cta-bg, var(--st-primary)); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--st-radius-full); }
.st-btn-cta:hover { opacity: 0.9; color: var(--cta-text, var(--st-white)); transform: translateY(-2px); }
.st-search-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--header-text, var(--st-gray-600)); transition: color var(--st-transition-fast); }
.st-search-toggle:hover { color: var(--st-primary); }
.st-menu-toggle { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.st-menu-toggle span { display: block; width: 24px; height: 2px; background: var(--header-text, var(--st-dark)); transition: all var(--st-transition-fast); border-radius: 2px; }

/* Header Layout: Classic */
.st-header-classic .st-header-inner { display: flex; align-items: center; justify-content: space-between; }
.st-header-classic .st-nav { flex: 1; justify-content: center; }

/* Header Layout: Centered */
.st-header-centered { height: auto; padding: 0; }
.st-header-centered .st-header-logo-row { display: flex; justify-content: center; padding: 1rem 0; border-bottom: 1px solid var(--st-gray-200); }
.st-header-centered .st-header-nav-row { display: flex; align-items: center; justify-content: center; padding: 0.75rem 0; gap: 2rem; }
.st-header-centered .st-nav-centered { flex: none; }
.st-header-centered .st-header-actions { position: absolute; right: 1rem; }
.header-layout-centered.has-sticky-header .st-site-content { padding-top: calc(var(--header-height, var(--st-header-height)) + 40px); }

/* Header Layout: Split */
.st-header-split .st-header-inner { display: flex; align-items: center; justify-content: space-between; }
.st-header-split .st-nav-left, .st-header-split .st-nav-right { flex: 1; }
.st-header-split .st-nav-left { justify-content: flex-end; padding-right: 2rem; }
.st-header-split .st-nav-right { justify-content: flex-start; padding-left: 2rem; display: flex; align-items: center; gap: 1.5rem; }
.st-header-split .st-logo-center { flex: 0 0 auto; }
.st-header-split .st-menu-left, .st-header-split .st-menu-right { display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.st-header-split .st-menu-left { justify-content: flex-end; }
.st-header-split .st-menu-left li a, .st-header-split .st-menu-right li a { display: block; padding: 0.75rem 1rem; color: var(--header-text, var(--st-gray-700)); font-weight: 500; font-size: 0.9375rem; border-radius: var(--st-radius-md); }
.st-header-split .st-menu-left li a:hover, .st-header-split .st-menu-right li a:hover { color: var(--st-primary); background: var(--st-primary-light); }

/* Header Layout: Minimal */
.st-header-minimal .st-header-inner { display: flex; align-items: center; justify-content: space-between; }
.st-header-minimal .st-nav-hidden { display: none; }
.st-header-minimal .st-menu-toggle-minimal { display: flex; }
.st-header-minimal .st-btn-cta-minimal { display: inline-flex; }

/* Mobile Menu */
.st-mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999998; opacity: 0; visibility: hidden; transition: all var(--st-transition-base); display: none; }
.st-mobile-menu-overlay.active { opacity: 1; visibility: visible; display: block; }
.st-mobile-menu { position: fixed; top: 0; right: -350px; width: 320px; max-width: 90%; height: 100%; background: var(--st-white); z-index: 999999; box-shadow: var(--st-shadow-xl); transition: right var(--st-transition-base), visibility var(--st-transition-base), opacity var(--st-transition-base); overflow-y: auto; visibility: hidden; opacity: 0; }
.st-mobile-menu.active { right: 0; visibility: visible; opacity: 1; }
.st-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--st-gray-200); }
.st-mobile-menu-close { background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--st-gray-600); }
.st-mobile-menu-close:hover { color: var(--st-gray-900); }
.st-mobile-menu-content { padding: 1.5rem; }
.st-mobile-nav .st-nav-menu { flex-direction: column; gap: 0; }
.st-mobile-nav .st-nav-menu > li { width: 100%; }
.st-mobile-nav .st-nav-menu > li > a { padding: 1rem 0; border-bottom: 1px solid var(--st-gray-100); border-radius: 0; }
.st-mobile-nav .st-nav-menu .sub-menu > li.menu-item-has-children > a { padding-right: 1rem; }
.st-mobile-nav .st-nav-menu .sub-menu > li.menu-item-has-children > a::after { display: none; }
.st-mobile-nav .st-nav-menu .sub-menu .sub-menu { top: auto; left: auto; right: auto; }
.st-mobile-nav .st-nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 0.5rem 0 0.5rem 1rem; }
.st-mobile-menu-cta { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--st-gray-200); }
.st-btn-block { display: block; width: 100%; text-align: center; }
.st-mobile-menu-contact { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--st-gray-200); display: flex; flex-direction: column; gap: 1rem; }
.st-mobile-menu-contact a { display: flex; align-items: center; gap: 0.75rem; color: var(--st-gray-600); }
.st-mobile-menu-contact a:hover { color: var(--st-primary); }
.st-mobile-menu-contact svg { flex-shrink: 0; }

/* Responsive Header */
@media (max-width: 992px) {
    .st-menu-toggle { display: flex; }
    .st-header-classic .st-nav, .st-header-centered .st-nav-centered, .st-header-split .st-nav-left, .st-header-split .st-nav-right .st-menu-right { display: none; }
    .st-header-centered .st-header-nav-row { justify-content: flex-end; padding: 0.5rem 0; }
    .st-header-centered .st-header-actions { position: static; }
    .st-header-split .st-nav-right { padding-left: 0; }
    .st-header-split .st-nav-right .st-btn-cta { display: none; }
}

/* Buttons */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--st-font-primary); font-size: 0.9375rem; font-weight: 600; line-height: 1; text-align: center; border: 2px solid transparent; border-radius: var(--st-radius-full); cursor: pointer; transition: all var(--st-transition-fast); white-space: nowrap; }
.st-btn-primary { background: var(--st-primary); color: var(--st-white); border-color: var(--st-primary); }
.st-btn-primary:hover { background: var(--st-primary-dark); border-color: var(--st-primary-dark); color: var(--st-white); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--st-primary-rgb), 0.35); }
.st-btn-secondary { background: var(--st-secondary); color: var(--st-white); border-color: var(--st-secondary); }
.st-btn-white { background: var(--st-white); color: var(--st-dark, #1a1a2e); border-color: var(--st-white); }
.st-btn-white:hover { background: var(--st-gray-100); color: var(--st-primary-dark); border-color: var(--st-gray-100); }
.st-btn-outline { background: transparent; color: var(--st-primary); border-color: var(--st-primary); }
.st-btn-outline:hover { background: var(--st-primary); color: var(--st-white); }
.st-btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.st-btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/* Hero */
.st-hero { background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%); color: var(--st-white); padding: 6rem 0 4rem; position: relative; overflow: hidden; }
.st-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.st-hero-minimal { background: var(--st-gray-50); color: var(--st-gray-900); }
.st-hero-minimal h1 { color: var(--st-gray-900); }
.st-hero-dark { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.st-hero-content { position: relative; z-index: 1; max-width: 800px; }
.st-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: 0.5rem 1rem; border-radius: var(--st-radius-full); font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem; }
.st-hero h1 { font-size: 3.5rem; font-weight: 700; color: var(--st-white); margin-bottom: 1rem; line-height: 1.1; }
.st-hero p { font-size: 1.25rem; opacity: 0.9; margin-bottom: 2rem; max-width: 600px; }
.st-hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.st-hero-stats { display: flex; gap: 3rem; flex-wrap: wrap; }
.st-hero-stat { text-align: left; }
.st-hero-stat-number { font-size: 2rem; font-weight: 700; line-height: 1; }
.st-hero-stat-label { font-size: 0.875rem; opacity: 0.8; margin-top: 0.25rem; }
@media (max-width: 768px) { .st-hero { padding: 4rem 0 3rem; } .st-hero h1 { font-size: 2rem; } .st-hero p { font-size: 1rem; } }

/* Search Widget */
.st-search-widget { background: var(--st-white); border-radius: var(--st-radius-xl); box-shadow: var(--st-shadow-xl); padding: 2rem; margin-top: -4rem; position: relative; z-index: 10; }

/* Search Tabs */
.st-search-tabs-widget { padding: 0; }
.st-search-tabs { display: flex; background: var(--st-gray-100); border-bottom: 2px solid var(--st-gray-200); }
.st-search-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem 2rem; background: transparent; border: none; font-family: var(--st-font-primary); font-size: 1rem; font-weight: 600; color: var(--st-gray-600); cursor: pointer; transition: all var(--st-transition-fast); position: relative; }
.st-search-tab:hover { color: var(--st-primary); background: rgba(var(--st-primary-rgb), 0.05); }
.st-search-tab.active { color: var(--st-primary); background: var(--st-white); }
.st-search-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--st-primary); border-radius: 3px 3px 0 0; }
.st-search-tab svg { flex-shrink: 0; }
.st-search-tab-content { padding: 2rem; }
.st-search-tab-pane { display: none; }
.st-search-tab-pane.active { display: block; }
@media (max-width: 576px) {
    .st-search-tab { padding: 1rem; font-size: 0.875rem; gap: 0.5rem; }
    .st-search-tab svg { width: 18px; height: 18px; }
    .st-search-tab-content { padding: 1.5rem; }
}

/* Sections */
.st-section { padding: 5rem 0; }
.st-bg-light { background: var(--st-gray-50); }
.st-section-title { text-align: center; margin-bottom: 3rem; }
.st-section-title h2 { font-size: 2.25rem; margin-bottom: 0.75rem; }
.st-section-title h2 span { color: var(--st-primary); }
.st-section-title p { font-size: 1.125rem; color: var(--st-gray-500); max-width: 600px; margin: 0 auto; }

/* Features */
.st-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.st-feature-card { background: var(--st-white); border-radius: var(--st-radius-xl); padding: 2rem; text-align: center; box-shadow: var(--st-shadow-md); transition: all var(--st-transition-base); border: 2px solid transparent; }
.st-feature-card:hover { transform: translateY(-8px); box-shadow: var(--st-shadow-xl); border-color: var(--st-primary); }
.st-feature-icon { font-size: 3rem; margin-bottom: 1.5rem; }
.st-feature-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.st-feature-card p { color: var(--st-gray-500); font-size: 0.9375rem; margin: 0; }
@media (max-width: 992px) { .st-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .st-features-grid { grid-template-columns: 1fr; } }

/* Destinations */
.st-destinations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.st-destination-card { position: relative; border-radius: var(--st-radius-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--st-shadow-md); transition: all var(--st-transition-base); }
.st-destination-card:hover { transform: translateY(-8px); box-shadow: var(--st-shadow-xl); }
.st-destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.st-destination-card:hover img { transform: scale(1.1); }
.st-destination-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: var(--st-white); }
.st-destination-overlay h3 { color: var(--st-white); font-size: 1.25rem; margin-bottom: 0.25rem; }
.st-destination-price { font-weight: 600; color: var(--st-secondary); }
.st-destination-price span { font-weight: 400; opacity: 0.8; font-size: 0.875rem; }
@media (max-width: 992px) { .st-destinations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .st-destinations-grid { grid-template-columns: 1fr; } }

/* Testimonials */
.st-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.st-testimonial-card { background: var(--st-white); border-radius: var(--st-radius-xl); padding: 2rem; box-shadow: var(--st-shadow-md); transition: all var(--st-transition-base); }
.st-testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--st-shadow-lg); }
.st-testimonial-rating { color: var(--st-warning); font-size: 1.25rem; margin-bottom: 1rem; letter-spacing: 2px; }
.st-testimonial-text { font-size: 1rem; color: var(--st-gray-600); margin-bottom: 1.5rem; line-height: 1.7; }
.st-testimonial-author { display: flex; align-items: center; gap: 1rem; }
.st-testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.st-testimonial-name { font-weight: 600; color: var(--st-gray-800); }
.st-testimonial-role { font-size: 0.875rem; color: var(--st-gray-500); }
@media (max-width: 992px) { .st-testimonials-grid { grid-template-columns: 1fr; } }

/* Page Header - Extended styles */
.st-page-header { background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%); color: #fff; padding: 4rem 0 3rem; margin-bottom: 3rem; text-align: center; }
.st-page-header h1 { color: var(--st-white); font-size: 2.5rem; margin-bottom: 0.5rem; }
.st-page-title { font-size: 2.5rem; margin: 0; color: #fff; }
.st-page-header .st-breadcrumb-item a, .st-page-header .st-breadcrumb-sep { color: rgba(255,255,255,0.7); }
.st-page-header .st-breadcrumb-item a:hover { color: #fff; }
.st-page-header .st-breadcrumb-current { color: #fff; }
.st-breadcrumb { display: flex; justify-content: center; gap: 0.75rem; font-size: 0.9375rem; opacity: 0.9; margin-top: 1rem; }
.st-breadcrumb a { color: var(--st-white); opacity: 0.8; }
.st-breadcrumb a:hover { opacity: 1; }

/* Blog */
.st-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; }
.st-post-card { background: var(--st-white); border-radius: var(--st-radius-xl); overflow: hidden; box-shadow: var(--st-shadow-md); transition: all var(--st-transition-base); }
.st-post-card:hover { transform: translateY(-5px); box-shadow: var(--st-shadow-xl); }
.st-post-thumbnail img { width: 100%; height: 220px; object-fit: cover; }
.st-post-content { padding: 1.5rem; }
.st-post-meta { display: flex; gap: 1rem; font-size: 0.8125rem; color: var(--st-gray-500); margin-bottom: 0.75rem; }
.st-post-title { font-size: 1.25rem; margin-bottom: 0.75rem; }
.st-post-title a { color: var(--st-gray-900); }
.st-post-title a:hover { color: var(--st-primary); }
.st-post-excerpt { color: var(--st-gray-500); font-size: 0.9375rem; margin-bottom: 1rem; }

/* Single Post */
.st-single-post { background: var(--st-white); border-radius: var(--st-radius-xl); overflow: hidden; box-shadow: var(--st-shadow-md); }
.st-post-featured-image img { width: 100%; max-height: 500px; object-fit: cover; }
.st-post-body { padding: 2rem; }
.st-post-tags { padding: 1.5rem 2rem; border-top: 1px solid var(--st-gray-200); }
.st-post-tags a { display: inline-block; background: var(--st-gray-100); padding: 0.25rem 0.75rem; border-radius: var(--st-radius-full); font-size: 0.8125rem; margin-right: 0.5rem; }

/* Sidebar */
.st-sidebar { position: sticky; top: calc(var(--st-header-height) + 2rem); }
.st-widget { background: var(--st-white); border-radius: var(--st-radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--st-shadow-sm); }
.st-widget-title { font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--st-primary); }

/* Pagination */
.st-pagination { margin-top: 3rem; text-align: center; }
.st-pagination-list { display: inline-flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.st-page-item a, .st-page-item span { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.75rem; background: var(--st-white); border: 1px solid var(--st-gray-200); border-radius: var(--st-radius-md); color: var(--st-gray-700); font-weight: 500; transition: all var(--st-transition-fast); }
.st-page-item a:hover, .st-page-item.active span { background: var(--st-primary); border-color: var(--st-primary); color: var(--st-white); }

/* Footer */
.st-footer { background: var(--st-footer-bg); color: rgba(255, 255, 255, 0.8); padding-top: 4rem; }
.st-footer-main { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem; padding-bottom: 3rem; }
.st-footer-brand p { margin: 1.5rem 0; opacity: 0.8; }
.st-footer-widget h4, .st-footer-widget-title { color: var(--st-white); font-size: 1.125rem; margin-bottom: 1.5rem; }
.st-footer-menu { list-style: none; padding: 0; margin: 0; }
.st-footer-menu li { margin-bottom: 0.75rem; }
.st-footer-menu a { color: rgba(255, 255, 255, 0.7); transition: all var(--st-transition-fast); }
.st-footer-menu a:hover { color: var(--st-white); padding-left: 5px; }
.st-footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; }
.st-footer-contact-icon { color: var(--st-primary); }
.st-footer-social { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.st-footer-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--st-white); transition: all var(--st-transition-fast); }
.st-footer-social a:hover { background: var(--st-primary); transform: translateY(-3px); }
.st-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.875rem; }
.st-footer-payments { display: flex; gap: 1rem; font-size: 1.5rem; opacity: 0.6; }
@media (max-width: 992px) { .st-footer-main { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .st-footer-main { grid-template-columns: 1fr; } .st-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } }

/* Forms */
.st-form-control { width: 100%; padding: 0.875rem 1rem; font-family: var(--st-font-primary); font-size: 1rem; color: var(--st-gray-700); background: var(--st-white); border: 2px solid var(--st-gray-300); border-radius: var(--st-radius-lg); transition: all var(--st-transition-fast); }
.st-form-control:focus { outline: none; border-color: var(--st-primary); box-shadow: 0 0 0 4px rgba(var(--st-primary-rgb), 0.1); }
.st-search-form { position: relative; }
.st-search-input-wrap { position: relative; }
.st-search-input { padding-right: 50px; }
.st-search-button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: var(--st-primary); color: var(--st-white); border: none; border-radius: var(--st-radius-md); cursor: pointer; transition: background var(--st-transition-fast); }
.st-search-button:hover { background: var(--st-primary-dark); }

/* Utilities */
.st-text-center { text-align: center; }
.st-hidden { display: none !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Comments */
.st-comments { margin-top: 2rem; padding: 2rem; background: var(--st-white); border-radius: var(--st-radius-xl); box-shadow: var(--st-shadow-md); }
.st-comments-title { margin-bottom: 1.5rem; }
.st-comment-list { list-style: none; padding: 0; }
.st-comment-list li { padding: 1rem 0; border-bottom: 1px solid var(--st-gray-200); }
.st-comment-form { margin-top: 2rem; }
.st-comment-form input, .st-comment-form textarea { width: 100%; padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1px solid var(--st-gray-300); border-radius: var(--st-radius-md); }

/* WooCommerce */
.woocommerce .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
.woocommerce .product { background: var(--st-white); border-radius: var(--st-radius-xl); overflow: hidden; box-shadow: var(--st-shadow-md); transition: all var(--st-transition-base); }
.woocommerce .product:hover { transform: translateY(-5px); box-shadow: var(--st-shadow-xl); }
.woocommerce .button { background: var(--st-primary) !important; color: var(--st-white) !important; border-radius: var(--st-radius-full) !important; padding: 0.75rem 1.5rem !important; font-weight: 600 !important; transition: all var(--st-transition-fast) !important; }
.woocommerce .button:hover { background: var(--st-primary-dark) !important; }

/* Admin Bar Fix */
.admin-bar .st-header { top: 32px; }
.admin-bar.has-topbar .st-topbar { top: 32px; }
.admin-bar.has-sticky-header .st-nav { top: calc(var(--st-header-height) + 32px); }
.admin-bar.has-sticky-header.has-topbar .st-nav { top: calc(var(--st-header-height) + var(--st-topbar-height) + 32px); }
@media (max-width: 782px) { .admin-bar .st-header { top: 46px; } .admin-bar.has-topbar .st-topbar { top: 46px; } }

/* Entry Content */
.entry-content { line-height: 1.8; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 2rem; }
.entry-content img { border-radius: var(--st-radius-md); margin: 1.5rem 0; }
.entry-content blockquote { border-left: 4px solid var(--st-primary); padding-left: 1.5rem; margin: 1.5rem 0; font-style: italic; color: var(--st-gray-600); }
.entry-content pre, .entry-content code { background: var(--st-gray-100); border-radius: var(--st-radius-sm); padding: 0.25rem 0.5rem; font-size: 0.9rem; }
.entry-content pre { padding: 1rem; overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.entry-content th, .entry-content td { padding: 0.75rem; border: 1px solid var(--st-gray-200); text-align: left; }
.entry-content th { background: var(--st-gray-100); font-weight: 600; }

/* ===== NEW FEATURES STYLES ===== */

/* Footer Layouts */
.st-footer-widgets { padding: 4rem 0 3rem; }
.st-footer-grid { display: grid; gap: 2rem; }
.st-footer-grid-2 { grid-template-columns: repeat(2, 1fr); }
.st-footer-grid-3 { grid-template-columns: repeat(3, 1fr); }
.st-footer-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .st-footer-grid-3, .st-footer-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .st-footer-grid-2, .st-footer-grid-3, .st-footer-grid-4 { grid-template-columns: 1fr; } }

.st-footer-copyright { padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.1); }
.st-copyright-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.st-copyright-text { color: rgba(255,255,255,0.7); font-size: 0.875rem; }
.st-payment-icons { display: flex; gap: 0.5rem; }
.st-payment-icons img { height: 25px; opacity: 0.7; }

/* Footer Centered Layout */
.st-footer-centered { text-align: center; padding: 4rem 0 2rem; }
.st-footer-centered-content { max-width: 600px; margin: 0 auto; }
.st-footer-centered .st-footer-logo { margin-bottom: 2rem; }
.st-footer-centered .st-footer-nav { margin-bottom: 2rem; }
.st-footer-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; }
.st-footer-menu-inline { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.st-footer-menu-inline a { color: rgba(255,255,255,0.7); }
.st-footer-menu-inline a:hover { color: #fff; }
.st-social-centered { justify-content: center; margin-bottom: 2rem; }

/* Footer Minimal Layout */
.st-footer-minimal { padding: 1.5rem 0; }
.st-footer-minimal-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

/* Footer Mega Layout */
.st-footer-newsletter { background: rgba(0,102,204,0.1); padding: 3rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.st-newsletter-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.st-newsletter-content h3 { color: #fff; margin-bottom: 0.5rem; }
.st-newsletter-content p { color: rgba(255,255,255,0.7); margin: 0; }
.st-newsletter-form { display: flex; gap: 0.5rem; }
.st-newsletter-form input { padding: 0.875rem 1.25rem; border: none; border-radius: var(--st-radius-full); min-width: 300px; }
@media (max-width: 768px) { .st-newsletter-inner { flex-direction: column; text-align: center; } .st-newsletter-form { flex-direction: column; } .st-newsletter-form input { min-width: 100%; } }

/* Back to Top Button - Consolidated styles in BACK TO TOP BUTTON section below */

/* Preloader Additional Styles */
.st-preloader-dots { display: flex; gap: 8px; }
.st-preloader-dots span { width: 12px; height: 12px; border-radius: 50%; animation: st-bounce 1.4s ease-in-out infinite both; }
.st-preloader-dots span:nth-child(1) { animation-delay: -0.32s; }
.st-preloader-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes st-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
.st-preloader-pulse { width: 50px; height: 50px; border-radius: 50%; animation: st-pulse 1.5s ease-in-out infinite; }
@keyframes st-pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.st-preloader-plane { animation: st-fly 2s ease-in-out infinite; }
@keyframes st-fly { 0%, 100% { transform: translateX(-20px); } 50% { transform: translateX(20px); } }
.st-preloader-progress { width: 200px; height: 4px; background: rgba(0,0,0,0.1); border-radius: 2px; overflow: hidden; }
.st-progress-bar { height: 100%; animation: st-progress 1.5s ease-in-out infinite; }
@keyframes st-progress { 0% { width: 0; margin-left: 0; } 50% { width: 100%; margin-left: 0; } 100% { width: 0; margin-left: 100%; } }

/* Breadcrumbs */
.st-breadcrumb { margin-top: 1rem; }
.st-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.st-breadcrumb-item a { color: var(--st-gray-500); }
.st-breadcrumb-item a:hover { color: var(--st-primary); }
.st-breadcrumb-sep { color: var(--st-gray-400); }
.st-breadcrumb-current { color: var(--st-gray-700); font-weight: 500; }

/* 404 Page */
.st-error-page { padding: 6rem 0; text-align: center; }
.st-error-content { max-width: 500px; margin: 0 auto; }
.st-error-icon { color: var(--st-gray-300); margin-bottom: 2rem; }
.st-error-code { font-size: 8rem; font-weight: 700; color: var(--st-primary); line-height: 1; margin-bottom: 1rem; }
.st-error-title { font-size: 2rem; margin-bottom: 1rem; }
.st-error-text { color: var(--st-gray-500); margin-bottom: 2rem; }
.st-error-actions { margin-bottom: 3rem; }
.st-error-search { max-width: 400px; margin: 0 auto; }
.st-error-search p { color: var(--st-gray-500); margin-bottom: 1rem; }

/* Blog Layouts - Column Variations (base styles defined above) */
.st-posts-col-2 { grid-template-columns: repeat(2, 1fr); }
.st-posts-col-3 { grid-template-columns: repeat(3, 1fr); }
.st-posts-col-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .st-posts-col-3, .st-posts-col-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .st-posts-col-2, .st-posts-col-3, .st-posts-col-4 { grid-template-columns: 1fr; } }

.st-posts-list { display: flex; flex-direction: column; gap: 2rem; }
.st-post-list-item { display: flex; gap: 2rem; background: var(--st-white); border-radius: var(--st-radius-xl); overflow: hidden; box-shadow: var(--st-shadow-md); }
.st-post-list-item .st-post-thumb { flex: 0 0 300px; }
.st-post-list-item .st-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-post-list-item .st-post-content { flex: 1; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 768px) { .st-post-list-item { flex-direction: column; } .st-post-list-item .st-post-thumb { flex: none; } }

.st-posts-masonry { columns: 3; column-gap: 2rem; }
.st-posts-masonry .st-post-card { break-inside: avoid; margin-bottom: 2rem; }
@media (max-width: 992px) { .st-posts-masonry { columns: 2; } }
@media (max-width: 576px) { .st-posts-masonry { columns: 1; } }

.st-posts-classic .st-post-classic { background: var(--st-white); border-radius: var(--st-radius-xl); overflow: hidden; box-shadow: var(--st-shadow-md); margin-bottom: 3rem; }
.st-post-classic .st-post-thumb img { width: 100%; max-height: 400px; object-fit: cover; }
.st-post-classic .st-post-content { padding: 2rem; }
.st-post-classic .st-post-title { font-size: 1.75rem; }

.st-post-cats a { display: inline-block; background: var(--st-primary-light); color: var(--st-primary); padding: 0.25rem 0.75rem; border-radius: var(--st-radius-full); font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; }
.st-post-author { display: flex; align-items: center; gap: 0.5rem; }
.st-post-author img { border-radius: 50%; }
.st-post-read-time { color: var(--st-gray-400); }

/* Sidebar Position */
.st-content-area.sidebar-left { grid-template-columns: 300px 1fr; }
.st-content-area.sidebar-right { grid-template-columns: 1fr 300px; }
@media (max-width: 992px) { .st-content-area.sidebar-left, .st-content-area.sidebar-right { grid-template-columns: 1fr; } .st-content-area.sidebar-left .st-sidebar { order: 2; } }

/* Dark Mode - Uses CSS variables from admin settings */
body.dark-mode { 
    background-color: var(--st-bg); 
    color: var(--st-text);
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { 
    color: var(--st-heading); 
}
body.dark-mode a { color: var(--st-link); }
body.dark-mode .st-header { background: var(--st-card-bg); border-color: var(--st-border); }
body.dark-mode .st-header a, body.dark-mode .st-nav a { color: var(--st-text); }
body.dark-mode .st-post-card, body.dark-mode .st-widget, body.dark-mode .st-section { background: var(--st-card-bg); }
body.dark-mode .st-hero { background: linear-gradient(135deg, var(--st-card-bg) 0%, var(--st-bg) 100%); }
body.dark-mode .st-faq-item { background: var(--st-card-bg); border-color: var(--st-border); }
body.dark-mode .st-faq-question { color: var(--st-heading); }
body.dark-mode .st-team-card { background: var(--st-card-bg); }
body.dark-mode .st-feature-card { background: var(--st-card-bg); }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: var(--st-card-bg); border-color: var(--st-border); color: var(--st-text); }
body.dark-mode .st-btn-secondary { background: var(--st-card-bg); color: var(--st-text); border-color: var(--st-border); }
body.dark-mode .st-btn-primary, body.dark-mode .st-btn { background: var(--st-primary); }
body.dark-mode .st-destination-card { background: var(--st-card-bg); }
body.dark-mode .st-stat-item { background: var(--st-card-bg); }
body.dark-mode .st-testimonial-card { background: var(--st-card-bg); }
body.dark-mode .st-partner-item { background: var(--st-card-bg); border-color: var(--st-border); }
body.dark-mode .st-section-title h2, body.dark-mode .st-section-title p { color: var(--st-heading); }
.st-dark-mode-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; color: inherit; display: flex; align-items: center; justify-content: center; }
.st-dark-mode-toggle .st-icon-moon { display: none; }
body.dark-mode .st-dark-mode-toggle .st-icon-sun { display: none; }
body.dark-mode .st-dark-mode-toggle .st-icon-moon { display: block; }

/* Cookie Consent */
.st-cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--st-dark); color: #fff; padding: 1rem 0; z-index: 9999; box-shadow: 0 -4px 20px rgba(0,0,0,0.2); }
.st-cookie-content { max-width: var(--st-container-width); margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.st-cookie-content p { margin: 0; font-size: 0.875rem; }
.st-cookie-content a { color: var(--st-secondary); }
@media (max-width: 768px) { .st-cookie-content { flex-direction: column; text-align: center; } }

/* FAQ Section */
.st-faq-list { max-width: 800px; margin: 0 auto; }
.st-faq-item { background: var(--st-white); border-radius: var(--st-radius-lg); margin-bottom: 1rem; box-shadow: var(--st-shadow-sm); overflow: hidden; }
.st-faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--st-gray-900); text-align: left; }
.st-faq-question svg { transition: transform 0.3s; flex-shrink: 0; }
.st-faq-item.active .st-faq-question svg { transform: rotate(180deg); }
.st-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.st-faq-item.active .st-faq-answer { max-height: 1500px; padding: 0 1.5rem 1.25rem; }
.st-faq-answer p { margin: 0; color: var(--st-gray-600); }

/* Team Section */
.st-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 992px) { .st-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .st-team-grid { grid-template-columns: 1fr; } }
.st-team-card { background: var(--st-white); border-radius: var(--st-radius-xl); overflow: hidden; box-shadow: var(--st-shadow-md); text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.st-team-card:hover { transform: translateY(-5px); box-shadow: var(--st-shadow-xl); }
.st-team-image { aspect-ratio: 1; overflow: hidden; }
.st-team-image img { width: 100%; height: 100%; object-fit: cover; }
.st-team-placeholder { width: 100%; height: 100%; background: var(--st-gray-100); display: flex; align-items: center; justify-content: center; color: var(--st-gray-400); }
.st-team-info { padding: 1.5rem; }
.st-team-info h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.st-team-info p { color: var(--st-gray-500); font-size: 0.875rem; margin-bottom: 0.75rem; }
.st-team-social { color: var(--st-primary); }

/* Gallery Section */
.st-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 768px) { .st-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .st-gallery-grid { grid-template-columns: 1fr; } }
.st-gallery-item { position: relative; aspect-ratio: 4/3; border-radius: var(--st-radius-lg); overflow: hidden; display: block; }
.st-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.st-gallery-item:hover img { transform: scale(1.1); }
.st-gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; font-size: 0.875rem; transform: translateY(100%); transition: transform 0.3s; }
.st-gallery-item:hover .st-gallery-caption { transform: translateY(0); }

/* Related Posts - Main styles defined in SINGLE POST section */
.st-related-posts.basic { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--st-gray-200); }
.st-related-posts.basic h3 { margin-bottom: 1.5rem; }
.st-related-item { background: var(--st-gray-50); border-radius: var(--st-radius-lg); overflow: hidden; }
.st-related-thumb img { width: 100%; height: 150px; object-fit: cover; }
.st-related-item h4 { padding: 1rem; font-size: 0.9375rem; margin: 0; }
.st-related-item h4 a { color: var(--st-gray-800); }

/* Author Box - Additional styles, main defined in SINGLE POST section */
.st-author-box.basic { display: flex; gap: 1.5rem; padding: 2rem; background: var(--st-gray-50); border-radius: var(--st-radius-xl); margin-top: 2rem; }
.st-author-name { margin-bottom: 0.5rem; }
.st-author-bio.basic { color: var(--st-gray-600); margin-bottom: 0.75rem; }
.st-author-link { color: var(--st-primary); font-weight: 500; }

/* Post Navigation - Additional styles, main defined in SINGLE POST section */
.st-post-navigation.basic a { display: block; padding: 1.5rem; background: var(--st-gray-50); border-radius: var(--st-radius-lg); transition: background 0.3s; }
.st-post-navigation.basic a:hover { background: var(--st-gray-100); }
.st-nav-label { display: block; font-size: 0.75rem; text-transform: uppercase; color: var(--st-gray-500); margin-bottom: 0.5rem; }
.st-nav-title { color: var(--st-gray-900); font-weight: 600; }
.st-nav-next { text-align: right; }

/* Widget Styles */
.st-newsletter-widget p { margin-bottom: 1rem; color: var(--st-gray-600); }
.st-newsletter-widget input { width: 100%; padding: 0.75rem; margin-bottom: 0.75rem; border: 1px solid var(--st-gray-300); border-radius: var(--st-radius-md); }
.st-newsletter-widget button { width: 100%; }

.st-destinations-widget-list { list-style: none; padding: 0; margin: 0; }
.st-destinations-widget-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--st-gray-200); }
.st-destinations-widget-list li:last-child { border-bottom: none; }
.st-dest-code { font-size: 0.75rem; color: var(--st-gray-500); margin-left: 0.5rem; }
.st-dest-price { color: var(--st-primary); font-weight: 600; }

.st-contact-widget-list { list-style: none; padding: 0; margin: 0; }
.st-contact-widget-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; color: var(--st-gray-600); }
.st-contact-widget-list svg { flex-shrink: 0; color: var(--st-primary); margin-top: 2px; }
.st-contact-widget-list a { color: var(--st-gray-700); }

/* Landing Page */
.st-landing-page { min-height: 100vh; }

/* Video Background Hero */
.st-hero-video { position: relative; overflow: hidden; }
.st-hero-video video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); z-index: -1; }

/* No Posts */
.st-no-posts { text-align: center; padding: 4rem 2rem; background: var(--st-gray-50); border-radius: var(--st-radius-xl); }
.st-no-posts p { color: var(--st-gray-500); margin: 0; }

/* ============================================
   NOTIFICATION BAR
   ============================================ */
.st-notification-bar { padding: 0.75rem 0; font-size: 0.875rem; text-align: center; position: relative; z-index: 1001; }
.st-notification-inner { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.st-notification-text { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.st-notification-text a { font-weight: 600; text-decoration: underline; margin-left: 0.5rem; }
.st-notification-text a:hover { text-decoration: none; }
.st-notification-close { background: none; border: none; cursor: pointer; padding: 0.25rem; opacity: 0.8; transition: opacity 0.2s; color: inherit; display: flex; align-items: center; }
.st-notification-close:hover { opacity: 1; }
.st-notification-bar.hidden { display: none; }
@media (max-width: 768px) { .st-notification-bar { font-size: 0.8rem; padding: 0.5rem 0; } }

/* ============================================
   MEGA MENU
   ============================================ */
.st-menu .mega-menu { position: static; }
.st-menu .mega-menu > .sub-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--st-card-bg, #fff); box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 2rem; display: none; flex-wrap: wrap; gap: 2rem; border-top: 3px solid var(--st-primary); z-index: 1000; }
.st-menu .mega-menu:hover > .sub-menu { display: flex; }
.st-menu .mega-menu > .sub-menu > li { flex: 1; min-width: 200px; list-style: none; }
.st-menu .mega-menu > .sub-menu > li > a { font-weight: 600; font-size: 1rem; color: var(--st-heading); display: block; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--st-border, #e5e7eb); }
.st-menu .mega-menu > .sub-menu > li > .sub-menu { display: block !important; position: static; background: none; box-shadow: none; padding: 0; border: none; }
.st-menu .mega-menu > .sub-menu > li > .sub-menu li { list-style: none; }
.st-menu .mega-menu > .sub-menu > li > .sub-menu a { display: block; padding: 0.5rem 0; color: var(--st-text); font-size: 0.9rem; transition: color 0.2s, padding-left 0.2s; }
.st-menu .mega-menu > .sub-menu > li > .sub-menu a:hover { color: var(--st-primary); padding-left: 0.5rem; }
.st-menu .mega-menu-heading > a { pointer-events: none; cursor: default; }
body.dark-mode .st-menu .mega-menu > .sub-menu { background: var(--st-card-bg); }
body.dark-mode .st-menu .mega-menu > .sub-menu > li > a { color: var(--st-heading); border-color: var(--st-border); }
body.dark-mode .st-menu .mega-menu > .sub-menu > li > .sub-menu a { color: var(--st-text); }
@media (max-width: 992px) { .st-menu .mega-menu > .sub-menu { position: static; flex-direction: column; gap: 1rem; padding: 1rem; } }

/* ============================================
   STICKY SIDEBAR
   ============================================ */
.st-sidebar.st-sticky-sidebar { position: sticky; top: calc(var(--st-header-height, 80px) + 20px); max-height: calc(100vh - var(--st-header-height, 80px) - 40px); overflow-y: auto; }
.has-sticky-header .st-sidebar.st-sticky-sidebar { top: calc(var(--st-header-height, 80px) + 30px); }

/* ============================================
   SINGLE POST ENHANCEMENTS
   ============================================ */
/* Reading Progress Bar */
.st-reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--st-primary), var(--st-secondary)); z-index: 9999; transition: width 0.1s; }
.has-sticky-header .st-reading-progress { top: 0; }

/* Share Buttons */
.st-share-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid var(--st-border, #e5e7eb); border-bottom: 1px solid var(--st-border, #e5e7eb); }
.st-share-buttons .st-share-label { font-weight: 600; color: var(--st-heading); display: flex; align-items: center; gap: 0.5rem; margin-right: 0.5rem; }
.st-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; transition: transform 0.2s, opacity 0.2s; }
.st-share-btn:hover { transform: scale(1.1); opacity: 0.9; color: #fff; }
.st-share-btn.facebook { background: #1877f2; }
.st-share-btn.twitter { background: #1da1f2; }
.st-share-btn.linkedin { background: #0077b5; }
.st-share-btn.whatsapp { background: #25d366; }
.st-share-btn.email { background: var(--st-gray-600); }
.st-share-btn.copy-link { background: var(--st-primary); cursor: pointer; border: none; }

/* Author Box */
.st-author-box { display: flex; gap: 1.5rem; padding: 2rem; background: var(--st-card-bg, #f8f9fa); border-radius: var(--st-radius-xl); margin: 2rem 0; }
.st-author-avatar { flex-shrink: 0; }
.st-author-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.st-author-info h4 { font-size: 1.125rem; margin: 0 0 0.25rem; }
.st-author-info h4 a { color: var(--st-heading); }
.st-author-role { font-size: 0.875rem; color: var(--st-primary); margin-bottom: 0.5rem; }
.st-author-bio { font-size: 0.9rem; color: var(--st-text); margin-bottom: 0.75rem; }
.st-author-social { display: flex; gap: 0.75rem; }
.st-author-social a { color: var(--st-gray-500); transition: color 0.2s; }
.st-author-social a:hover { color: var(--st-primary); }
@media (max-width: 576px) { .st-author-box { flex-direction: column; text-align: center; } .st-author-social { justify-content: center; } }

/* Related Posts */
.st-related-posts { margin: 3rem 0; padding: 2rem 0; border-top: 1px solid var(--st-border, #e5e7eb); }
.st-related-posts h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.st-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .st-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .st-related-grid { grid-template-columns: 1fr; } }
.st-related-card { background: var(--st-card-bg, #fff); border-radius: var(--st-radius-lg); overflow: hidden; box-shadow: var(--st-shadow-sm); transition: transform 0.3s, box-shadow 0.3s; }
.st-related-card:hover { transform: translateY(-3px); box-shadow: var(--st-shadow-md); }
.st-related-card .st-related-thumb { aspect-ratio: 16/10; overflow: hidden; }
.st-related-card .st-related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.st-related-card:hover .st-related-thumb img { transform: scale(1.05); }
.st-related-card .st-related-content { padding: 1rem 1.25rem; }
.st-related-card .st-related-date { font-size: 0.75rem; color: var(--st-gray-500); margin-bottom: 0.5rem; }
.st-related-card h4 { font-size: 1rem; margin: 0; line-height: 1.4; }
.st-related-card h4 a { color: var(--st-heading); }
.st-related-card h4 a:hover { color: var(--st-primary); }

/* Post Navigation */
.st-post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }
@media (max-width: 576px) { .st-post-navigation { grid-template-columns: 1fr; } }
.st-post-nav-item { padding: 1.5rem; background: var(--st-card-bg, #f8f9fa); border-radius: var(--st-radius-lg); transition: background 0.2s; }
.st-post-nav-item:hover { background: var(--st-gray-100, #f0f0f0); }
.st-post-nav-item.next { text-align: right; }
.st-post-nav-label { font-size: 0.75rem; color: var(--st-gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.st-post-nav-item.next .st-post-nav-label { justify-content: flex-end; }
.st-post-nav-title { font-weight: 600; color: var(--st-heading); line-height: 1.4; }
.st-post-nav-title:hover { color: var(--st-primary); }

/* Table of Contents */
.st-toc { background: var(--st-card-bg, #f8f9fa); padding: 1.5rem; border-radius: var(--st-radius-lg); margin-bottom: 2rem; }
.st-toc h4 { font-size: 1rem; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.st-toc ul { list-style: none; padding: 0; margin: 0; }
.st-toc li { padding: 0.5rem 0; border-bottom: 1px solid var(--st-border, #e5e7eb); }
.st-toc li:last-child { border-bottom: none; }
.st-toc a { color: var(--st-text); font-size: 0.9rem; transition: color 0.2s; }
.st-toc a:hover { color: var(--st-primary); }

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.st-back-to-top { position: fixed; bottom: 30px; z-index: 999; width: 45px; height: 45px; background: var(--st-primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.st-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.st-back-to-top:hover { background: var(--st-primary-dark); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.st-back-to-top.position-right { right: 30px; }
.st-back-to-top.position-left { left: 30px; }
.st-back-to-top.style-circle, .st-back-to-top-circle { border-radius: 50%; }
.st-back-to-top.style-rounded, .st-back-to-top-rounded { border-radius: var(--st-radius-lg, 12px); }
.st-back-to-top.style-square, .st-back-to-top-square { border-radius: var(--st-radius-sm, 4px); }
.st-back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 768px) { .st-back-to-top { bottom: 20px; width: 40px; height: 40px; } .st-back-to-top.position-right { right: 20px; } .st-back-to-top.position-left { left: 20px; } }

/* ============================================
   BREADCRUMBS
   ============================================ */
.st-breadcrumbs { padding: 1rem 0; font-size: 0.875rem; }
/* The list is an <ol>. A <li> that is a flex item is still a list item and keeps
   its number marker, so "1." and "2." were drawn over the separators. */
.st-breadcrumbs-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.st-breadcrumbs-inner > li { display: inline-flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
/* Icon and label stay on one line; only the current page's title may wrap. */
.st-breadcrumbs-inner > li > a { display: inline-flex; align-items: center; white-space: nowrap; }
.st-breadcrumbs a { color: var(--st-primary); text-decoration: none; transition: color 0.2s; }
.st-breadcrumbs a:hover { color: var(--st-secondary); text-decoration: underline; }
.st-breadcrumbs .st-breadcrumb-separator { color: var(--st-gray-400); margin: 0 0.25rem; display: inline-flex; align-items: center; }
.st-breadcrumbs .st-breadcrumb-current { color: var(--st-text); font-weight: 500; }
.st-breadcrumbs .st-breadcrumb-home-icon { display: inline-flex; align-items: center; margin-right: 0.25rem; }
body.dark-mode .st-breadcrumbs { background: transparent; }
body.dark-mode .st-breadcrumbs a { color: var(--st-link); }
body.dark-mode .st-breadcrumbs .st-breadcrumb-separator { color: var(--st-gray-500); }
body.dark-mode .st-breadcrumbs .st-breadcrumb-current { color: var(--st-text); }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
[data-animate] { opacity: 0; transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
[data-animate].animated { opacity: 1; transform: none !important; }

/* Fade Up */
[data-animate="fade-up"] { transform: translateY(30px); }
/* Fade Down */
[data-animate="fade-down"] { transform: translateY(-30px); }
/* Fade Left */
[data-animate="fade-left"] { transform: translateX(30px); }
/* Fade Right */
[data-animate="fade-right"] { transform: translateX(-30px); }
/* Fade In */
[data-animate="fade-in"] { transform: none; }
/* Slide Up */
[data-animate="slide-up"] { transform: translateY(50px); }
/* Zoom In */
[data-animate="zoom-in"] { transform: scale(0.9); }
/* Zoom Out */
[data-animate="zoom-out"] { transform: scale(1.1); }
/* Flip Up */
[data-animate="flip-up"] { transform: perspective(1000px) rotateX(20deg); transform-origin: center bottom; }

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1; transform: none !important; transition: none !important; }
}

/* ===== Front Page WooCommerce Products Section ===== */
/* Complete styling for products on front page (without .supertheme-woo class) */

.st-products-section {
    padding: 4rem 0;
}

.st-products-section .st-products-grid {
    margin-top: 2rem;
}

/* Force proper grid on front page products */
.st-products-section ul.products,
.st-products-section .woocommerce ul.products,
.st-products-grid ul.products,
.st-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--st-prod-cols, 4), minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Column variations.

   These used to be `!important` grid rules at specificity (0,2,1), below the
   base rule `.st-products-section .woocommerce ul.products` at (0,3,1). WooCommerce
   wraps the list in div.woocommerce, so that base rule always applied and beat
   every breakpoint further down: the section stayed N across on phones. The
   count now only sets variables, stepped down at each breakpoint, and a single
   rule reads them. A smaller count is never raised: 2 stays 2 at 1024px. */
.st-products-cols-1 { --st-prod-xl: 1; --st-prod-lg: 1; --st-prod-md: 1; --st-prod-sm: 1; }
.st-products-cols-2 { --st-prod-xl: 2; --st-prod-lg: 2; --st-prod-md: 2; }
.st-products-cols-3 { --st-prod-xl: 3; --st-prod-lg: 3; --st-prod-md: 2; }
.st-products-cols-4 { --st-prod-xl: 4; --st-prod-lg: 3; --st-prod-md: 2; }
.st-products-cols-5 { --st-prod-xl: 5; --st-prod-lg: 3; --st-prod-md: 2; }
.st-products-cols-6 { --st-prod-xl: 6; --st-prod-lg: 3; --st-prod-md: 2; }

/* The variable the grid reads. Same selector at every breakpoint, so the later
   rule wins by source order. Lists with no count class fall back to 4 / 3 / 2 / 2. */
.st-products-grid ul.products,
.st-section ul.products { --st-prod-cols: var(--st-prod-xl, var(--st-products-cols, 4)); }
@media (max-width: 1024px) { .st-products-grid ul.products, .st-section ul.products { --st-prod-cols: var(--st-prod-lg, 3); } }
@media (max-width: 768px)  { .st-products-grid ul.products, .st-section ul.products { --st-prod-cols: var(--st-prod-md, 2); } }
@media (max-width: 480px)  { .st-products-grid ul.products, .st-section ul.products { --st-prod-cols: var(--st-prod-sm, 2); } }

.st-products-section ul.products::before,
.st-products-section ul.products::after,
.st-products-grid ul.products::before,
.st-products-grid ul.products::after,
.st-section ul.products::before,
.st-section ul.products::after {
    display: none !important;
    content: none !important;
}

/* Product card styling on front page */
.st-products-section ul.products li.product,
.st-products-grid ul.products li.product,
.st-section ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
}

.st-products-section ul.products li.product:hover,
.st-products-grid ul.products li.product:hover,
.st-section ul.products li.product:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    transform: translateY(-4px);
}

/* Product image */
.st-products-section ul.products li.product > a:first-of-type,
.st-products-grid ul.products li.product > a:first-of-type,
.st-section ul.products li.product > a:first-of-type {
    display: block;
    position: relative;
    overflow: hidden;
    background: #f3f4f6;
}

.st-products-section ul.products li.product img,
.st-products-grid ul.products li.product img,
.st-section ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.st-products-section ul.products li.product:hover img,
.st-products-grid ul.products li.product:hover img,
.st-section ul.products li.product:hover img {
    transform: scale(1.05);
}

/* ===== Product Badges (Front Page) ===== */
.st-products-section ul.products li.product .st-product-badges,
.st-products-grid ul.products li.product .st-product-badges,
.st-section ul.products li.product .st-product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}

.st-products-section .st-badge,
.st-products-grid .st-badge,
.st-section .st-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

.st-products-section .st-badge-sale,
.st-products-grid .st-badge-sale,
.st-section .st-badge-sale {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.st-products-section .st-badge-new,
.st-products-grid .st-badge-new,
.st-section .st-badge-new {
    background: linear-gradient(135deg, #10b981, #059669);
}

.st-products-section .st-badge-featured,
.st-products-grid .st-badge-featured,
.st-section .st-badge-featured {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.st-products-section .st-badge-soldout,
.st-products-grid .st-badge-soldout,
.st-section .st-badge-soldout {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

/* Default WooCommerce sale badge - style it properly on front page */
.st-products-section ul.products li.product .onsale,
.st-products-grid ul.products li.product .onsale,
.st-section ul.products li.product .onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    z-index: 10;
    line-height: 1 !important;
    min-width: auto !important;
    min-height: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Product category */
.st-products-section ul.products li.product .st-product-cat,
.st-products-grid ul.products li.product .st-product-cat,
.st-section ul.products li.product .st-product-cat {
    padding: 1rem 1.25rem 0;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--st-primary, #0066CC);
}

.st-products-section ul.products li.product .st-product-cat a,
.st-products-grid ul.products li.product .st-product-cat a,
.st-section ul.products li.product .st-product-cat a {
    color: inherit;
    text-decoration: none;
}

/* Product title */
.st-products-section ul.products li.product .woocommerce-loop-product__title,
.st-products-grid ul.products li.product .woocommerce-loop-product__title,
.st-section ul.products li.product .woocommerce-loop-product__title {
    padding: 0.75rem 1.25rem 0.5rem !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Star rating */
.st-products-section ul.products li.product .star-rating,
.st-products-grid ul.products li.product .star-rating,
.st-section ul.products li.product .star-rating {
    margin: 0 1.25rem 0.5rem !important;
    font-size: 0.8rem;
    color: #fbbf24;
}

.st-products-section ul.products li.product .star-rating::before,
.st-products-grid ul.products li.product .star-rating::before,
.st-section ul.products li.product .star-rating::before {
    color: #e5e7eb;
}

/* Product price */
.st-products-section ul.products li.product .price,
.st-products-grid ul.products li.product .price,
.st-section ul.products li.product .price {
    padding: 0 1.25rem 1rem !important;
    margin: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.st-products-section ul.products li.product .price del,
.st-products-grid ul.products li.product .price del,
.st-section ul.products li.product .price del {
    color: #9ca3af !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.st-products-section ul.products li.product .price ins,
.st-products-grid ul.products li.product .price ins,
.st-section ul.products li.product .price ins {
    text-decoration: none !important;
    color: #ef4444 !important;
}

/* Add to cart button */
.st-products-section ul.products li.product .button,
.st-products-section ul.products li.product .add_to_cart_button,
.st-products-section ul.products li.product .product_type_simple,
.st-products-section ul.products li.product .product_type_variable,
.st-products-grid ul.products li.product .button,
.st-products-grid ul.products li.product .add_to_cart_button,
.st-products-grid ul.products li.product .product_type_simple,
.st-products-grid ul.products li.product .product_type_variable,
.st-section ul.products li.product .button,
.st-section ul.products li.product .add_to_cart_button,
.st-section ul.products li.product .product_type_simple,
.st-section ul.products li.product .product_type_variable {
    display: block !important;
    width: calc(100% - 2.5rem) !important;
    margin: auto 1.25rem 1.25rem !important;
    padding: 0.875rem 1.5rem !important;
    background: var(--st-primary, #0066CC) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    line-height: 1.4 !important;
}

.st-products-section ul.products li.product .button:hover,
.st-products-grid ul.products li.product .button:hover,
.st-section ul.products li.product .button:hover {
    background: var(--st-primary-dark, #004999) !important;
    transform: translateY(-2px);
}

/* Added to cart link */
.st-products-section ul.products li.product .added_to_cart,
.st-products-grid ul.products li.product .added_to_cart,
.st-section ul.products li.product .added_to_cart {
    display: block;
    text-align: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 600;
    text-decoration: none;
}

/* Loading state */
.st-products-section ul.products li.product .button.loading,
.st-products-grid ul.products li.product .button.loading,
.st-section ul.products li.product .button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.st-products-section ul.products li.product .button.loading::after,
.st-products-grid ul.products li.product .button.loading::after,
.st-section ul.products li.product .button.loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: st-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes st-spin {
    to { transform: rotate(360deg); }
}

/* Responsive grid */
/* Product section columns at 1024px: see the variable block above. */

@media (max-width: 768px) {
    /* Columns come from --st-prod-cols; only the gap is set here. */
    .st-products-section ul.products,
    .st-products-grid ul.products,
    .st-section ul.products {
        gap: 1rem !important;
    }
    
    .st-products-section ul.products li.product .woocommerce-loop-product__title,
    .st-products-grid ul.products li.product .woocommerce-loop-product__title,
    .st-section ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.875rem !important;
    }
    
    .st-products-section ul.products li.product .price,
    .st-products-grid ul.products li.product .price,
    .st-section ul.products li.product .price {
        font-size: 1rem !important;
    }
    
    .st-products-section ul.products li.product .button,
    .st-products-grid ul.products li.product .button,
    .st-section ul.products li.product .button {
        padding: 0.75rem 1rem !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    /* Phone columns: see the variable block above. */
}

/* ===== WordPress Admin Bar Compatibility ===== */
/* Desktop admin bar is 32px */
body.admin-bar .st-topbar {
    position: relative;
}

body.admin-bar.has-sticky-header .st-header {
    top: 32px;
}

body.admin-bar.has-sticky-header.has-topbar .st-topbar {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    z-index: var(--st-z-fixed);
}

body.admin-bar.has-sticky-header.has-topbar .st-header {
    top: calc(32px + var(--st-topbar-height));
}

body.admin-bar.has-sticky-header .st-site-content {
    padding-top: calc(var(--header-height, var(--st-header-height)) + 32px);
}

body.admin-bar.has-sticky-header.has-topbar .st-site-content {
    padding-top: calc(var(--header-height, var(--st-header-height)) + var(--st-topbar-height) + 32px);
}

/* Notification bar adjustment for admin bar */
body.admin-bar .st-notification-bar {
    position: relative;
}

body.admin-bar.has-sticky-header .st-notification-bar {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    z-index: calc(var(--st-z-fixed) + 1);
}

body.admin-bar.has-sticky-header.has-topbar .st-notification-bar + .st-topbar {
    top: calc(32px + 40px); /* admin bar + notification bar */
}

/* Mobile admin bar is 46px (up to 782px) */
@media (max-width: 782px) {
    body.admin-bar.has-sticky-header .st-header {
        top: 46px;
    }
    
    body.admin-bar.has-sticky-header.has-topbar .st-topbar {
        top: 46px;
    }
    
    body.admin-bar.has-sticky-header.has-topbar .st-header {
        top: calc(46px + var(--st-topbar-height));
    }
    
    body.admin-bar.has-sticky-header .st-site-content {
        padding-top: calc(var(--header-height, var(--st-header-height)) + 46px);
    }
    
    body.admin-bar.has-sticky-header.has-topbar .st-site-content {
        padding-top: calc(var(--header-height, var(--st-header-height)) + var(--st-topbar-height) + 46px);
    }
    
    body.admin-bar.has-sticky-header .st-notification-bar {
        top: 46px;
    }
}

/* Centered header layout with admin bar */
body.admin-bar.header-layout-centered.has-sticky-header .st-site-content {
    padding-top: calc(var(--header-height, var(--st-header-height)) + 40px + 32px);
}

@media (max-width: 782px) {
    body.admin-bar.header-layout-centered.has-sticky-header .st-site-content {
        padding-top: calc(var(--header-height, var(--st-header-height)) + 40px + 46px);
    }
}

/* ==========================================================================
   v3.5.0 — Modern header & footer layouts, search panel, header cart
   ========================================================================== */

:root {
    /* Measured at runtime by main.js. The fallbacks keep layout sane before
       the first measurement lands. --st-topbar-height was previously a fixed
       40px, which broke any topbar that wrapped to two lines. */
    --st-notification-height: 0px;
    --st-header-shell-gap: 1rem;
}

/* --- Sticky offset now accounts for the notification bar ------------------ */

.has-sticky-header .st-header {
    top: calc(var(--st-notification-height));
}
.has-sticky-header.has-topbar .st-header {
    top: calc(var(--st-topbar-height) + var(--st-notification-height));
}
.has-sticky-header .st-site-content {
    padding-top: calc(var(--header-height, var(--st-header-height)) + var(--st-notification-height));
}
.has-sticky-header.has-topbar .st-site-content {
    padding-top: calc(var(--header-height, var(--st-header-height)) + var(--st-topbar-height) + var(--st-notification-height));
}

/* --- Accessibility -------------------------------------------------------- */

.st-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
}
.st-skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    padding: 0.75rem 1.25rem;
    background: var(--st-primary);
    color: #fff;
    border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-lg);
    font-weight: 600;
    text-decoration: none;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--st-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Header cart ---------------------------------------------------------- */

.st-header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--st-radius-md);
    color: inherit;
    transition: background var(--st-transition-fast), color var(--st-transition-fast);
}
.st-header-cart:hover {
    background: rgba(var(--st-primary-rgb), 0.08);
    color: var(--st-primary);
}
.st-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--st-accent);
    color: #fff;
    border-radius: var(--st-radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}
.st-cart-count.is-empty { display: none; }

/* --- Search panel --------------------------------------------------------- */

.st-search-panel {
    display: none;
    position: relative;
    z-index: var(--st-z-sticky);
    padding: 2rem 0;
    background: var(--header-bg, #fff);
    border-bottom: 1px solid var(--st-gray-200);
    box-shadow: var(--st-shadow-md);
}
.st-search-panel.active { display: block; }
.st-search-panel .st-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.st-search-panel form { flex: 1; }
.st-search-panel input[type="search"] {
    width: 100%;
    padding: 0.9rem 1.1rem;
    font-size: 1.05rem;
    border: 1px solid var(--st-gray-300);
    border-radius: var(--st-radius-md);
}
.st-search-panel-close {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--st-gray-500);
    padding: 0.5rem;
}
.st-search-panel-close:hover { color: var(--st-danger); }

/* --- Shared button variants used by the new layouts ---------------------- */

.st-btn-pill { border-radius: var(--st-radius-full); }
.st-btn-sm { padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.st-btn-outline {
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--header-text, var(--st-dark));
}
.st-btn-outline:hover {
    background: var(--header-text, var(--st-dark));
    color: var(--header-bg, #fff);
}

/* ==========================================================================
   HEADER LAYOUT: Floating
   A detached translucent pill. Sits over the hero, then tightens and gains a
   backdrop blur once the page scrolls.
   ========================================================================== */

.st-header-floating {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: var(--st-header-shell-gap) 0;
}
.st-header-floating .st-header-shell {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--st-radius-full);
    padding: 0.5rem 0.65rem 0.5rem 1.6rem;
    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.08);
    transition: background var(--st-transition-base), box-shadow var(--st-transition-base), padding var(--st-transition-base);
}
.st-header-floating .st-header-inner {
    height: auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.st-header-floating.scrolled {
    padding: 0.5rem 0;
}
.st-header-floating.scrolled .st-header-shell {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 34px rgba(16, 24, 40, 0.14);
}
.st-header-floating .st-nav .st-menu > li > a {
    padding: 0.5rem 0.9rem;
    border-radius: var(--st-radius-full);
    font-weight: 500;
}
.st-header-floating .st-nav .st-menu > li > a:hover,
.st-header-floating .st-nav .st-menu > .current-menu-item > a {
    background: rgba(var(--st-primary-rgb), 0.1);
    color: var(--st-primary);
}
.st-header-floating .st-header-actions { gap: 0.4rem; }
.st-header-floating .st-btn-cta { padding: 0.65rem 1.5rem; }

/* Because the pill floats above the hero, sticky spacing must not reserve
   room for it on the front page. */
.header-layout-floating.has-sticky-header .st-site-content { padding-top: 0; }
.header-layout-floating.has-sticky-header.has-topbar .st-site-content { padding-top: 0; }

body.dark-mode .st-header-floating .st-header-shell {
    background: rgba(26, 26, 46, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .st-header-floating.scrolled .st-header-shell {
    background: rgba(26, 26, 46, 0.94);
}

/* ==========================================================================
   HEADER LAYOUT: Commerce
   Three rows: utility topbar, logo + wide product search + cart, nav bar.
   ========================================================================== */

.st-header-commerce { background: var(--header-bg, #fff); }
.st-header-commerce .st-header-main {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--st-gray-200);
}
.st-header-commerce .st-header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    height: auto;
}
.st-header-commerce .st-header-search { width: 100%; }
.st-inline-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    border: 2px solid var(--st-primary);
    border-radius: var(--st-radius-full);
    overflow: hidden;
    background: #fff;
}
.st-inline-search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0.7rem 1.25rem;
    font-size: 0.95rem;
    background: transparent;
    color: var(--st-gray-900);
}
.st-inline-search input[type="search"]:focus { outline: none; }
.st-inline-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    border: 0;
    background: var(--st-primary);
    color: #fff;
    cursor: pointer;
    transition: background var(--st-transition-fast);
}
.st-inline-search button:hover { background: var(--st-primary-dark); }

.st-header-commerce .st-header-nav-bar {
    background: var(--st-gray-50);
}
.st-header-commerce .st-header-nav-bar .st-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.st-header-commerce .st-header-nav-bar .st-menu > li > a {
    padding: 0.85rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
}
.st-header-nav-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.875rem;
}
.st-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: inherit;
}
.st-header-phone:hover { color: var(--st-primary); }

@media (max-width: 992px) {
    .st-header-commerce .st-header-inner {
        grid-template-columns: auto auto;
        grid-template-areas: "logo actions" "search search";
        gap: 1rem;
    }
    .st-header-commerce .st-logo { grid-area: logo; }
    .st-header-commerce .st-header-actions { grid-area: actions; }
    .st-header-commerce .st-header-search { grid-area: search; }
    .st-header-commerce .st-header-nav-bar { display: none; }
}

body.dark-mode .st-header-commerce .st-header-nav-bar { background: rgba(255, 255, 255, 0.04); }
body.dark-mode .st-inline-search { background: var(--st-card-bg); }
body.dark-mode .st-inline-search input[type="search"] { color: var(--st-text); }

/* ==========================================================================
   HEADER LAYOUT: Bold
   Editorial: oversized centred wordmark over a hairline rule, with wide-
   tracked uppercase navigation beneath.
   ========================================================================== */

.st-header-bold {
    background: var(--header-bg, #fff);
    border-bottom: 1px solid var(--st-gray-900);
}
.st-header-bold .st-header-brand-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0 1.25rem;
}
.st-header-brand-side {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
}
.st-header-brand-side-end { justify-content: flex-end; }
.st-header-brand-side-end .st-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.st-logo-bold { text-align: center; }
.st-logo-bold .st-logo-text {
    font-family: var(--st-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.st-logo-bold img { max-width: min(var(--logo-width, 150px), 260px); }

.st-header-bold .st-header-nav-row {
    border-top: 1px solid var(--st-gray-200);
}
.st-header-bold .st-nav-wide .st-menu {
    justify-content: center;
    gap: 0.5rem;
}
.st-header-bold .st-nav-wide .st-menu > li > a {
    padding: 0.85rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.st-header-bold .st-nav-wide .st-menu > li > a:hover,
.st-header-bold .st-nav-wide .st-menu > .current-menu-item > a {
    color: var(--st-primary);
}
/* The hamburger lives on the left of the brand row in this layout, so it must
   stay visible at desktop widths where other layouts hide it. */
.st-menu-toggle-bold { display: flex; }

@media (max-width: 992px) {
    .st-header-bold .st-header-brand-row { grid-template-columns: auto 1fr auto; padding: 1rem 0; }
    .st-header-bold .st-header-nav-row { display: none; }
    .st-header-bold .st-header-brand-side .st-header-phone { display: none; }
}

body.dark-mode .st-header-bold { border-bottom-color: rgba(255, 255, 255, 0.2); }
body.dark-mode .st-header-bold .st-header-nav-row { border-top-color: var(--st-border); }

/* ==========================================================================
   FOOTER LAYOUT: Modern
   Raised CTA panel overlapping the footer, brand column beside the widget
   grid, hairline legal bar.
   ========================================================================== */

.st-footer-modern {
    background: var(--st-dark);
    color: var(--st-gray-400);
    padding-top: 0;
}
.st-footer-cta-panel {
    position: relative;
    top: -2.5rem;
    margin-bottom: -1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%);
    border-radius: var(--st-radius-xl);
    box-shadow: var(--st-shadow-xl);
    color: #fff;
}
.st-footer-cta-copy h3 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}
.st-footer-cta-copy p { margin: 0; opacity: 0.85; }

.st-footer-modern .st-footer-body { padding: 2rem 0 3rem; }
.st-footer-modern-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.1fr) minmax(0, 3fr);
    gap: 3rem;
}
.st-footer-brand .st-footer-logo { margin-bottom: 1rem; }
.st-footer-tagline {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    max-width: 34ch;
}
.st-footer-modern .st-footer-grid { display: grid; gap: 2rem; }
.st-footer-modern .st-footer-grid-2 { grid-template-columns: repeat(2, 1fr); }
.st-footer-modern .st-footer-grid-3 { grid-template-columns: repeat(3, 1fr); }
.st-footer-modern .st-footer-grid-4 { grid-template-columns: repeat(4, 1fr); }

.st-footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 0;
}
.st-footer-legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
}
.st-footer-menu-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-social-modern {
    display: flex;
    gap: 0.6rem;
}
.st-social-modern a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--st-radius-md);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background var(--st-transition-fast), transform var(--st-transition-fast);
}
.st-social-modern a:hover {
    background: var(--st-primary);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .st-footer-modern-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .st-footer-cta-panel { padding: 2rem 1.5rem; text-align: center; justify-content: center; }
    .st-footer-modern .st-footer-grid-3,
    .st-footer-modern .st-footer-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .st-footer-modern .st-footer-grid-2,
    .st-footer-modern .st-footer-grid-3,
    .st-footer-modern .st-footer-grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER LAYOUT: Brand Split
   ========================================================================== */

.st-footer-brand-split { background: var(--st-dark); color: var(--st-gray-400); }
.st-footer-split-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr);
    min-height: 320px;
}
.st-footer-split-brand {
    background: linear-gradient(160deg, var(--st-primary) 0%, var(--st-primary-dark) 100%);
    color: #fff;
    display: flex;
    justify-content: flex-end;
}
.st-footer-split-brand .st-footer-split-inner {
    width: 100%;
    max-width: calc(var(--st-container-width) / 2);
    padding: 3.5rem 2.5rem 3.5rem max(1.5rem, calc((100vw - var(--st-container-width)) / 2));
}
.st-footer-split-content .st-footer-split-inner {
    max-width: calc(var(--st-container-width) / 1.6);
    padding: 3.5rem max(1.5rem, calc((100vw - var(--st-container-width)) / 2)) 2rem 3rem;
}
.st-footer-split-brand .st-footer-tagline { color: rgba(255, 255, 255, 0.85); }
.st-footer-contact {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.9375rem;
}
.st-footer-contact a { color: #fff; opacity: 0.9; }
.st-footer-contact a:hover { opacity: 1; text-decoration: underline; }

.st-footer-brand-split .st-footer-grid { display: grid; gap: 2rem; margin-bottom: 2rem; }
.st-footer-brand-split .st-footer-grid-1 { grid-template-columns: 1fr; }
.st-footer-brand-split .st-footer-grid-2 { grid-template-columns: repeat(2, 1fr); }
.st-footer-brand-split .st-footer-grid-3 { grid-template-columns: repeat(3, 1fr); }
.st-footer-split-newsletter {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.st-footer-split-newsletter h4 { color: #fff; margin: 0 0 0.85rem; font-size: 1rem; }
.st-footer-brand-split .st-footer-legal-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

@media (max-width: 900px) {
    .st-footer-split-wrap { grid-template-columns: 1fr; }
    .st-footer-split-brand .st-footer-split-inner,
    .st-footer-split-content .st-footer-split-inner {
        max-width: none;
        padding: 2.5rem 1.5rem;
    }
    .st-footer-brand-split .st-footer-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .st-footer-brand-split .st-footer-grid-2,
    .st-footer-brand-split .st-footer-grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER LAYOUT: Cards
   ========================================================================== */

.st-footer-cards {
    background: var(--st-gray-50);
    color: var(--st-gray-600);
    padding: 3.5rem 0 2rem;
}
.st-footer-card {
    background: #fff;
    border: 1px solid var(--st-gray-200);
    border-radius: var(--st-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--st-shadow-sm);
}
.st-footer-card-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%);
    border: 0;
    color: #fff;
    padding: 2rem 2.25rem;
}
.st-footer-card-copy h3 { margin: 0 0 0.3rem; color: #fff; font-size: 1.375rem; }
.st-footer-card-copy p { margin: 0; opacity: 0.85; }

.st-footer-cards-grid { display: grid; gap: 1.5rem; }
.st-footer-cards-grid.st-footer-grid-1 { grid-template-columns: 1fr; }
.st-footer-cards-grid.st-footer-grid-2 { grid-template-columns: repeat(2, 1fr); }
.st-footer-cards-grid.st-footer-grid-3 { grid-template-columns: repeat(3, 1fr); }
.st-footer-cards-grid.st-footer-grid-4 { grid-template-columns: repeat(4, 1fr); }
.st-footer-cards .st-footer-widget-title { color: var(--st-gray-900); }

.st-footer-cards-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--st-gray-200);
    font-size: 0.875rem;
}
.st-footer-cards .st-social-modern a {
    background: var(--st-gray-100);
    color: var(--st-gray-700);
}
.st-footer-cards .st-social-modern a:hover { background: var(--st-primary); color: #fff; }

@media (max-width: 900px) {
    .st-footer-cards-grid.st-footer-grid-3,
    .st-footer-cards-grid.st-footer-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .st-footer-card-newsletter { text-align: center; justify-content: center; }
}
@media (max-width: 560px) {
    .st-footer-cards-grid.st-footer-grid-2,
    .st-footer-cards-grid.st-footer-grid-3,
    .st-footer-cards-grid.st-footer-grid-4 { grid-template-columns: 1fr; }
}

body.dark-mode .st-footer-cards { background: var(--st-bg); }
body.dark-mode .st-footer-card { background: var(--st-card-bg); border-color: var(--st-border); }
body.dark-mode .st-footer-cards-base { border-top-color: var(--st-border); }

/* --- Newsletter form (shared by the new footers) ------------------------- */

.st-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    position: relative;
    min-width: min(100%, 340px);
}
.st-newsletter-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0.8rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--st-radius-md);
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    font-size: 0.9375rem;
}
.st-newsletter-form input[type="email"]::placeholder { color: currentColor; opacity: 0.65; }
.st-newsletter-form-lg input[type="email"] { padding: 1rem 1.25rem; }
.st-newsletter-message {
    flex-basis: 100%;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    min-height: 1.2em;
}
.st-newsletter-message.is-success { color: var(--st-success); }
.st-newsletter-message.is-error { color: #ffd5cc; }
.st-footer-cards .st-newsletter-message.is-error { color: var(--st-danger); }

.st-footer-card-newsletter .st-newsletter-form input[type="email"],
.st-footer-cta-panel .st-newsletter-form input[type="email"] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}


/* ==========================================================================
   RESTAURANT SECTIONS — Menu & Reservation
   ========================================================================== */

.st-menu-section { padding: 5rem 0; }
.st-menu-section.st-menu-dark {
    background: var(--st-dark);
    color: var(--st-gray-300);
}
.st-menu-section.st-menu-dark .st-section-title h2,
.st-menu-section.st-menu-dark .st-menu-group-title span,
.st-menu-section.st-menu-dark .st-menu-item-name { color: #fff; }
.st-menu-section.st-menu-paper { background: #faf7f2; }

.st-menu-groups { display: grid; gap: 3rem 4rem; }
.st-menu-cols-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.st-menu-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-menu-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.st-menu-group-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    font-family: var(--st-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--st-primary);
}
.st-menu-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
}
.st-menu-group-note {
    margin: -0.75rem 0 1.5rem;
    font-size: 0.875rem;
    font-style: italic;
    opacity: 0.75;
}

.st-menu-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }

.st-menu-item-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.st-menu-item-name {
    font-family: var(--st-font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--st-gray-900);
}
/* A leader rule between the dish and its price — the classic printed-menu
   treatment, done with a flexible border rather than dot characters so it
   never gets read aloud by a screen reader. */
.st-menu-item-dots {
    flex: 1;
    min-width: 1.5rem;
    border-bottom: 1px dotted currentColor;
    opacity: 0.35;
    transform: translateY(-0.25rem);
}
.st-menu-item-price {
    font-family: var(--st-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--st-primary);
    white-space: nowrap;
}
.st-menu-item-text {
    margin: 0.35rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--st-gray-600);
    max-width: 52ch;
}
.st-menu-section.st-menu-dark .st-menu-item-text { color: var(--st-gray-400); }

.st-menu-item-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0;
}
.st-menu-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: var(--st-radius-full);
    background: var(--st-gray-100);
    color: var(--st-gray-600);
}
.st-menu-tag-v, .st-menu-tag-vg { background: #e7f7ee; color: #14804a; }
.st-menu-tag-gf, .st-menu-tag-df { background: #fff4e5; color: #915907; }
.st-menu-tag-n { background: #fdeaea; color: #a02323; }
.st-menu-tag-spicy { background: #ffece8; color: #c0341d; }

.st-menu-footer { margin-top: 3rem; text-align: center; }
.st-menu-footnote {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.7;
}

@media (max-width: 860px) {
    .st-menu-cols-2, .st-menu-cols-3 { grid-template-columns: 1fr; }
    .st-menu-section { padding: 3.5rem 0; }
}

/* --- Reservation ---------------------------------------------------------- */

.st-reservation-section { padding: 5rem 0; background: var(--st-gray-50); }
.st-reservation-section.has-bg {
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

.st-reservation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--st-radius-xl);
    overflow: hidden;
    box-shadow: var(--st-shadow-xl);
}
.st-reservation-copy {
    padding: 3rem 2.5rem;
    background: linear-gradient(160deg, var(--st-dark) 0%, #24243f 100%);
    color: var(--st-gray-300);
}
.st-reservation-copy h2 { color: #fff; margin: 0 0 0.75rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.st-reservation-copy p { margin: 0 0 1.75rem; line-height: 1.7; }

.st-reservation-hours {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    font-size: 0.9375rem;
}
.st-reservation-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.st-reservation-hours li:last-child { border-bottom: 0; }
.st-hours-day { font-weight: 600; color: #fff; }

.st-reservation-phone {
    display: inline-block;
    font-family: var(--st-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}
.st-reservation-phone:hover { color: var(--st-secondary); }

.st-reservation-form { padding: 3rem 2.5rem; display: grid; gap: 1rem; align-content: start; }
.st-reservation-form label { display: grid; gap: 0.35rem; }
.st-reservation-form label > span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--st-gray-700);
}
.st-reservation-form input,
.st-reservation-form select,
.st-reservation-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--st-gray-300);
    border-radius: var(--st-radius-md);
    font-family: inherit;
    font-size: 0.9375rem;
    background: #fff;
    color: var(--st-gray-900);
}
.st-reservation-form input:focus,
.st-reservation-form select:focus,
.st-reservation-form textarea:focus {
    border-color: var(--st-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--st-primary-rgb), 0.15);
}
.st-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; }
.st-reservation-form textarea { resize: vertical; }

.st-reservation-message { margin: 0; font-size: 0.875rem; min-height: 1.2em; }
.st-reservation-message.is-success { color: var(--st-success); }
.st-reservation-message.is-error { color: var(--st-danger); }

@media (max-width: 860px) {
    .st-reservation-card { grid-template-columns: 1fr; }
    .st-reservation-copy, .st-reservation-form { padding: 2.25rem 1.5rem; }
    .st-reservation-section { padding: 3.5rem 0; }
}

body.dark-mode .st-reservation-section { background: var(--st-bg); }
body.dark-mode .st-reservation-card { background: var(--st-card-bg); }
body.dark-mode .st-reservation-form input,
body.dark-mode .st-reservation-form select,
body.dark-mode .st-reservation-form textarea {
    background: var(--st-bg);
    border-color: var(--st-border);
    color: var(--st-text);
}
body.dark-mode .st-reservation-form label > span { color: var(--st-text); }
body.dark-mode .st-menu-item-name { color: var(--st-text); }
body.dark-mode .st-menu-tag { background: rgba(255, 255, 255, 0.08); color: var(--st-gray-300); }


/* ==========================================================================
   DARK MODE — coverage fixes (3.5.3)

   The original dark-mode block styled about two dozen components. Anything
   added later kept its light-mode colours, and in several places a container
   was given a dark background while the text inside it kept a near-black
   colour — dark text on a dark card.
   ========================================================================== */

/* --- WooCommerce product loops inside front-page sections -----------------
   .st-section gets --st-card-bg in dark mode, but the product title, price and
   "view cart" link kept #111827, leaving them effectively invisible. */
body.dark-mode .st-section ul.products li.product,
body.dark-mode .st-products-grid ul.products li.product,
body.dark-mode .st-products-section ul.products li.product,
body.dark-mode .st-products-grid ul.products li.product > a,
body.dark-mode .st-products-section ul.products li.product > a {
    background: var(--st-card-bg);
    border-color: var(--st-border);
}

body.dark-mode .st-section ul.products li.product .woocommerce-loop-product__title,
body.dark-mode .st-products-grid ul.products li.product .woocommerce-loop-product__title,
body.dark-mode .st-products-section ul.products li.product .woocommerce-loop-product__title,
body.dark-mode .st-section ul.products li.product h2,
body.dark-mode .st-section ul.products li.product h3 {
    color: var(--st-heading);
}

body.dark-mode .st-section ul.products li.product .price,
body.dark-mode .st-products-grid ul.products li.product .price,
body.dark-mode .st-products-section ul.products li.product .price {
    color: var(--st-heading);
}

body.dark-mode .st-section ul.products li.product .price del,
body.dark-mode .st-products-grid ul.products li.product .price del,
body.dark-mode .st-products-section ul.products li.product .price del {
    color: var(--st-gray-400);
}

body.dark-mode .st-section ul.products li.product .added_to_cart,
body.dark-mode .st-products-grid ul.products li.product .added_to_cart,
body.dark-mode .st-products-section ul.products li.product .added_to_cart {
    color: var(--st-link);
}

/* --- Cards footer ---------------------------------------------------------
   This layout is light by design, so in dark mode both its surface and its
   text need moving together; previously only the surface changed. */
body.dark-mode .st-footer-cards {
    background: var(--st-bg);
    color: var(--st-text);
}
body.dark-mode .st-footer-cards .st-footer-widget-title,
body.dark-mode .st-footer-cards h1,
body.dark-mode .st-footer-cards h2,
body.dark-mode .st-footer-cards h3,
body.dark-mode .st-footer-cards h4 {
    color: var(--st-heading);
}
body.dark-mode .st-footer-cards a { color: var(--st-link); }
body.dark-mode .st-footer-cards .st-social-modern a {
    background: rgba(255, 255, 255, 0.08);
    color: var(--st-text);
}
body.dark-mode .st-footer-cards .st-social-modern a:hover {
    background: var(--st-primary);
    color: #fff;
}

/* --- Restaurant menu ------------------------------------------------------
   The "paper" variant is a cream background, which stayed cream in dark mode
   while the text above it turned light. */
body.dark-mode .st-menu-section.st-menu-paper {
    background: var(--st-card-bg);
}
body.dark-mode .st-menu-section .st-menu-item-name,
body.dark-mode .st-menu-section .st-menu-group-title span {
    color: var(--st-heading);
}
body.dark-mode .st-menu-item-text { color: var(--st-text); }
body.dark-mode .st-menu-item-price { color: var(--st-primary); }
body.dark-mode .st-menu-footnote,
body.dark-mode .st-menu-group-note { color: var(--st-gray-400); }

/* Keep the dietary tags colour-coded rather than flattening them all to grey. */
body.dark-mode .st-menu-tag { background: rgba(255, 255, 255, 0.08); color: var(--st-gray-300); }
body.dark-mode .st-menu-tag-v,
body.dark-mode .st-menu-tag-vg { background: rgba(20, 128, 74, 0.22); color: #6ee7a8; }
body.dark-mode .st-menu-tag-gf,
body.dark-mode .st-menu-tag-df { background: rgba(145, 89, 7, 0.24); color: #f0c274; }
body.dark-mode .st-menu-tag-n { background: rgba(160, 35, 35, 0.24); color: #f9a8a8; }
body.dark-mode .st-menu-tag-spicy { background: rgba(192, 52, 29, 0.24); color: #ffab97; }

/* --- Reservation ---------------------------------------------------------- */
body.dark-mode .st-reservation-card { border: 1px solid var(--st-border); }

/* --- Header layouts added in 3.5.0 ---------------------------------------- */
body.dark-mode .st-header-commerce .st-header-main { border-bottom-color: var(--st-border); }
body.dark-mode .st-inline-search { background: var(--st-card-bg); border-color: var(--st-primary); }
body.dark-mode .st-inline-search input[type="search"] { color: var(--st-text); background: transparent; }
body.dark-mode .st-search-panel {
    background: var(--st-card-bg);
    border-bottom-color: var(--st-border);
}
body.dark-mode .st-search-panel input[type="search"] {
    background: var(--st-bg);
    border-color: var(--st-border);
    color: var(--st-text);
}
body.dark-mode .st-header-cart:hover { background: rgba(255, 255, 255, 0.08); }

/* --- Misc surfaces that previously kept light backgrounds ----------------- */
body.dark-mode .st-topbar { background: var(--st-card-bg); color: var(--st-text); }
body.dark-mode .st-mobile-menu { background: var(--st-card-bg); }
body.dark-mode .st-mobile-menu a { color: var(--st-text); }
body.dark-mode .st-mobile-menu-header { border-bottom-color: var(--st-border); }
body.dark-mode .st-breadcrumb,
body.dark-mode .st-breadcrumbs { color: var(--st-gray-400); }
body.dark-mode .st-page-header { background: var(--st-card-bg); }
body.dark-mode table { color: var(--st-text); }
body.dark-mode th, body.dark-mode td { border-color: var(--st-border); }
body.dark-mode hr { border-color: var(--st-border); }
body.dark-mode code, body.dark-mode pre {
    background: rgba(255, 255, 255, 0.07);
    color: var(--st-text);
}
body.dark-mode blockquote {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: var(--st-primary);
    color: var(--st-text);
}
body.dark-mode ::placeholder { color: var(--st-gray-500); opacity: 1; }

/* Tell the browser which scheme is active so native widgets (scrollbars,
   date pickers, form controls) render dark instead of light-on-dark. */
body.dark-mode { color-scheme: dark; }

/* --- Accent buttons use a derived, readable label colour ------------------
   --st-on-primary is computed from the accent's relative luminance in
   supertheme_custom_css(), so a light accent gets dark text and a dark accent
   gets white text. Without it, dark mode's lightened blue carried white text
   at 2.72:1 contrast. */
body.dark-mode .st-btn-primary,
body.dark-mode .st-btn-cta,
body.dark-mode .st-btn.st-btn-primary,
body.dark-mode .st-newsletter-form button,
body.dark-mode .st-reservation-form button,
body.dark-mode button.st-btn-primary {
    background: var(--st-primary);
    color: var(--st-on-primary, #fff);
}
body.dark-mode .st-btn-primary:hover,
body.dark-mode .st-btn-cta:hover {
    color: var(--st-on-primary, #fff);
    filter: brightness(1.08);
}
body.dark-mode .st-cart-count,
body.dark-mode .st-badge-accent { color: var(--st-on-accent, #fff); }


/* ==========================================================================
   SECTION LAYOUT VARIANTS (3.6.0)

   Every section previously rendered one fixed layout, so two sites built with
   the builder looked identical. Each section now carries data-style (or a
   layout class) and these rules give each variant a distinct treatment.
   ========================================================================== */

.st-section-footer { text-align: center; margin-top: 2.5rem; }

/* --- Shared carousel ------------------------------------------------------ */
.st-carousel { position: relative; }
.st-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.st-carousel-viewport::-webkit-scrollbar { display: none; }
.st-carousel-track {
    display: flex !important;
    gap: 1.5rem;
    grid-template-columns: none !important;
}
.st-carousel-track > * {
    flex: 0 0 calc((100% - (var(--st-products-cols, 4) - 1) * 1.5rem) / var(--st-products-cols, 4));
    scroll-snap-align: start;
    margin: 0 !important;
    width: auto !important;
}
.st-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--st-gray-200);
    border-radius: var(--st-radius-full);
    background: #fff;
    color: var(--st-gray-800);
    cursor: pointer;
    box-shadow: var(--st-shadow-md);
    transition: background var(--st-transition-fast), color var(--st-transition-fast), opacity var(--st-transition-fast);
}
.st-carousel-prev { left: -18px; }
.st-carousel-next { right: -18px; }
.st-carousel-btn:hover:not(:disabled) { background: var(--st-primary); color: #fff; border-color: var(--st-primary); }
.st-carousel-btn:disabled { opacity: 0.35; cursor: default; }
.st-carousel.is-static .st-carousel-btn { display: none; }

@media (max-width: 1280px) {
    .st-carousel-prev { left: 4px; }
    .st-carousel-next { right: 4px; }
}
@media (max-width: 782px) {
    .st-carousel-track > * { flex-basis: 78%; }
}

body.dark-mode .st-carousel-btn {
    background: var(--st-card-bg);
    border-color: var(--st-border);
    color: var(--st-text);
}

/* --- Products: list ------------------------------------------------------- */
.st-products-layout-list ul.products,
.st-products-layout-list .st-products-grid ul.products {
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
}
.st-products-layout-list ul.products li.product {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    text-align: left;
    padding: 1rem;
}
.st-products-layout-list ul.products li.product img { margin: 0; border-radius: var(--st-radius-md); }
.st-products-layout-list ul.products li.product .button { justify-self: start; }

@media (max-width: 640px) {
    .st-products-layout-list ul.products li.product { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; }
}

/* --- Products: featured + grid -------------------------------------------- */
.st-products-layout-featured .st-products-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--st-products-cols, 4), minmax(0, 1fr));
    gap: 1.5rem;
}
.st-products-layout-featured ul.products li.product:first-child {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.st-products-layout-featured ul.products li.product:first-child img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.st-products-layout-featured ul.products li.product:first-child .woocommerce-loop-product__title {
    font-size: 1.35rem;
}
@media (max-width: 782px) {
    .st-products-layout-featured ul.products li.product:first-child { grid-column: span 2; grid-row: auto; }
}

/* --- Features variants ---------------------------------------------------- */
.st-features[data-style="list"] .st-features-grid { grid-template-columns: 1fr; gap: 1rem; }
.st-features[data-style="list"] .st-feature-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    text-align: left;
    padding: 1.25rem 1.5rem;
}
.st-features[data-style="list"] .st-feature-icon { margin: 0; }

.st-features[data-style="cards"] .st-feature-card {
    background: #fff;
    border: 1px solid var(--st-gray-200);
    border-radius: var(--st-radius-lg);
    box-shadow: var(--st-shadow-md);
    padding: 2rem 1.5rem;
    transition: transform var(--st-transition-base), box-shadow var(--st-transition-base);
}
.st-features[data-style="cards"] .st-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--st-shadow-xl);
}

.st-features[data-style="minimal"] .st-feature-card {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0.5rem 0;
}
.st-features[data-style="minimal"] .st-feature-icon { font-size: 1.5rem; }

body.dark-mode .st-features[data-style="cards"] .st-feature-card {
    background: var(--st-card-bg);
    border-color: var(--st-border);
}

/* --- Testimonials variants ------------------------------------------------ */
.st-testimonials-section[data-style="slider"] .st-testimonials-grid,
.st-section[data-style="slider"] .st-testimonials-grid {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}
.st-section[data-style="slider"] .st-testimonials-grid::-webkit-scrollbar { display: none; }
.st-section[data-style="slider"] .st-testimonial-card {
    flex: 0 0 min(420px, 85%);
    scroll-snap-align: center;
}

.st-section[data-style="single"] .st-testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin-inline: auto;
}
.st-section[data-style="single"] .st-testimonial-card {
    text-align: center;
    padding: 3rem 2.5rem;
    font-size: 1.125rem;
}
.st-section[data-style="single"] .st-testimonial-card p { font-size: 1.25rem; line-height: 1.7; }

/* --- Destinations / categories variants ----------------------------------- */
.st-section[data-style="masonry"] .st-destinations-grid {
    display: block;
    column-count: 3;
    column-gap: 1.5rem;
}
.st-section[data-style="masonry"] .st-destinations-grid > * {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    display: block;
}
@media (max-width: 900px) {
    .st-section[data-style="masonry"] .st-destinations-grid { column-count: 2; }
}
@media (max-width: 560px) {
    .st-section[data-style="masonry"] .st-destinations-grid { column-count: 1; }
}

.st-section[data-style="overlay"] .st-destination-card { position: relative; }
.st-section[data-style="overlay"] .st-destination-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 12, 20, 0.75) 0%, rgba(12, 12, 20, 0) 55%);
    pointer-events: none;
    border-radius: inherit;
}
.st-section[data-style="overlay"] .st-destination-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 1.5rem;
    color: #fff;
}
.st-section[data-style="overlay"] .st-destination-content h3,
.st-section[data-style="overlay"] .st-destination-content p { color: #fff; }

/* --- Team variants -------------------------------------------------------- */
.st-section[data-style="list"] .st-team-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.st-section[data-style="list"] .st-team-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    text-align: left;
}
.st-section[data-style="list"] .st-team-card img { border-radius: var(--st-radius-lg); }

/* --- FAQ variants --------------------------------------------------------- */
.st-section[data-style="two-column"] .st-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    align-items: start;
    max-width: none;
}
@media (max-width: 782px) {
    .st-section[data-style="two-column"] .st-faq-list { grid-template-columns: 1fr; }
}

/* --- Partners: marquee ---------------------------------------------------- */
.st-section[data-style="marquee"] .st-partners-grid {
    display: flex;
    gap: 3rem;
    flex-wrap: nowrap;
    width: max-content;
    animation: st-marquee 28s linear infinite;
}
.st-section[data-style="marquee"] {
    overflow: hidden;
}
.st-section[data-style="marquee"] .st-container { overflow: hidden; }
.st-section[data-style="marquee"] .st-partners-grid:hover { animation-play-state: paused; }
@keyframes st-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .st-section[data-style="marquee"] .st-partners-grid {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --- Stats variants ------------------------------------------------------- */
.st-section[data-style="cards"] .st-stat-item {
    background: #fff;
    border-radius: var(--st-radius-lg);
    box-shadow: var(--st-shadow-md);
    padding: 2rem 1.25rem;
}
.st-section[data-style="split"] .st-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 3rem;
    max-width: 820px;
    margin-inline: auto;
}
.st-section[data-style="split"] .st-stat-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    text-align: left;
}
body.dark-mode .st-section[data-style="cards"] .st-stat-item { background: var(--st-card-bg); }

/* --- CTA variants --------------------------------------------------------- */
.st-section[data-style="boxed"] .st-cta-inner,
.st-cta-section[data-style="boxed"] .st-container > * {
    background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%);
    border-radius: var(--st-radius-xl);
    padding: 3rem 2.5rem;
    color: #fff;
}
.st-section[data-style="split"] .st-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 2rem;
    text-align: left;
}
@media (max-width: 782px) {
    .st-section[data-style="split"] .st-cta-inner { grid-template-columns: 1fr; text-align: center; }
}

/* ==========================================================================
   NEW SECTIONS (3.6.0)
   ========================================================================== */

/* --- Blog posts ----------------------------------------------------------- */
.st-posts-section { padding: 5rem 0; }
.st-posts-grid { display: grid; gap: 2rem; }
.st-posts-cols-1 { grid-template-columns: 1fr; }
.st-posts-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-posts-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-posts-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.st-post-card {
    background: #fff;
    border: 1px solid var(--st-gray-200);
    border-radius: var(--st-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--st-transition-base), box-shadow var(--st-transition-base);
}
.st-post-card:hover { transform: translateY(-4px); box-shadow: var(--st-shadow-lg); }
.st-post-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.st-post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.st-post-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.st-post-card-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--st-gray-500);
}
.st-post-card-cat {
    background: rgba(var(--st-primary-rgb), 0.1);
    color: var(--st-primary);
    padding: 0.15rem 0.6rem;
    border-radius: var(--st-radius-full);
    font-weight: 600;
}
.st-post-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.4; }
.st-post-card h3 a { color: var(--st-heading); }
.st-post-card h3 a:hover { color: var(--st-primary); }
.st-post-card p { margin: 0; color: var(--st-gray-600); font-size: 0.9375rem; }
.st-post-card-more { margin-top: auto; font-weight: 600; color: var(--st-primary); font-size: 0.9375rem; }

.st-posts-section[data-style="list"] .st-posts-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.st-posts-section[data-style="list"] .st-post-card {
    flex-direction: row;
    align-items: stretch;
}
.st-posts-section[data-style="list"] .st-post-card-media { flex: 0 0 280px; aspect-ratio: auto; }

.st-posts-section[data-style="featured"] .st-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-posts-section[data-style="featured"] .st-post-card:first-child { grid-column: span 3; flex-direction: row; }
.st-posts-section[data-style="featured"] .st-post-card:first-child .st-post-card-media { flex: 0 0 50%; aspect-ratio: auto; }
.st-posts-section[data-style="featured"] .st-post-card:first-child h3 { font-size: 1.75rem; }

@media (max-width: 900px) {
    .st-posts-cols-3, .st-posts-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-posts-section[data-style="featured"] .st-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-posts-section[data-style="featured"] .st-post-card:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
    .st-posts-grid, .st-posts-cols-2, .st-posts-cols-3, .st-posts-cols-4,
    .st-posts-section[data-style="featured"] .st-posts-grid { grid-template-columns: 1fr; }
    .st-posts-section[data-style="list"] .st-post-card,
    .st-posts-section[data-style="featured"] .st-post-card:first-child { flex-direction: column; }
    .st-posts-section[data-style="list"] .st-post-card-media,
    .st-posts-section[data-style="featured"] .st-post-card:first-child .st-post-card-media {
        flex-basis: auto; aspect-ratio: 16 / 10;
    }
}

body.dark-mode .st-post-card { background: var(--st-card-bg); border-color: var(--st-border); }
body.dark-mode .st-post-card h3 a { color: var(--st-heading); }
body.dark-mode .st-post-card p { color: var(--st-text); }

/* --- Pricing -------------------------------------------------------------- */
.st-pricing-section { padding: 5rem 0; }
.st-pricing-grid { display: grid; gap: 1.75rem; align-items: stretch; }
.st-pricing-cols-1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
.st-pricing-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-pricing-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-pricing-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.st-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid var(--st-gray-200);
    border-radius: var(--st-radius-xl);
    padding: 2.25rem 1.75rem;
    transition: transform var(--st-transition-base), box-shadow var(--st-transition-base);
}
.st-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--st-shadow-lg); }
.st-pricing-card.is-featured {
    border-color: var(--st-primary);
    box-shadow: 0 12px 40px rgba(var(--st-primary-rgb), 0.18);
}
.st-pricing-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--st-primary);
    color: var(--st-on-primary, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.9rem;
    border-radius: var(--st-radius-full);
    white-space: nowrap;
}
.st-pricing-name { margin: 0; font-size: 1.15rem; }
.st-pricing-text { margin: 0; color: var(--st-gray-500); font-size: 0.9rem; }
.st-pricing-price { display: flex; align-items: baseline; gap: 0.15rem; margin: 0.5rem 0; }
.st-pricing-currency { font-size: 1.25rem; font-weight: 600; color: var(--st-gray-500); }
.st-pricing-amount { font-family: var(--st-font-heading); font-size: 2.75rem; font-weight: 700; line-height: 1; color: var(--st-heading); }
.st-pricing-period { font-size: 0.9rem; color: var(--st-gray-500); }
.st-pricing-features { list-style: none; margin: 0.5rem 0 1.25rem; padding: 0; display: grid; gap: 0.6rem; flex: 1; }
.st-pricing-features li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 0.9375rem; }
.st-pricing-features svg { color: var(--st-success); margin-top: 0.2rem; }
.st-pricing-card .st-btn { margin-top: auto; }

@media (max-width: 900px) { .st-pricing-cols-3, .st-pricing-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .st-pricing-grid { grid-template-columns: 1fr !important; } }

body.dark-mode .st-pricing-card { background: var(--st-card-bg); border-color: var(--st-border); }
body.dark-mode .st-pricing-amount { color: var(--st-heading); }
body.dark-mode .st-pricing-text, body.dark-mode .st-pricing-period { color: var(--st-gray-400); }

/* --- Video ---------------------------------------------------------------- */
.st-video-section { padding: 5rem 0; background: var(--st-gray-900, #111827); color: #fff; }
.st-video-section.has-poster { background-size: cover; background-position: center; }
.st-video-title h2, .st-video-title p { color: #fff; }
.st-video-embed {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--st-radius-xl);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.st-video-play {
    width: 84px;
    height: 84px;
    border-radius: var(--st-radius-full);
    border: 0;
    background: var(--st-primary);
    color: var(--st-on-primary, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    transition: transform var(--st-transition-base);
}
.st-video-play:hover { transform: scale(1.08); }
.st-video-embed.is-playing { background: #000; }

/* --- Promo tiles ---------------------------------------------------------- */
.st-promo-section { padding: 4rem 0; }
.st-promo-grid { display: grid; gap: 1.5rem; }
.st-promo-cols-1 { grid-template-columns: 1fr; }
.st-promo-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-promo-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-promo-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.st-promo-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    padding: 1.75rem;
    border-radius: var(--st-radius-lg);
    background-color: var(--st-gray-200);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
    transition: transform var(--st-transition-base), box-shadow var(--st-transition-base);
}
a.st-promo-tile:hover { transform: translateY(-4px); box-shadow: var(--st-shadow-xl); color: #fff; }
.st-promo-body { position: relative; z-index: 1; }
.st-promo-label {
    display: inline-block;
    background: var(--st-accent);
    color: var(--st-on-accent, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.7rem;
    border-radius: var(--st-radius-full);
    margin-bottom: 0.75rem;
}
.st-promo-tile h3 { margin: 0 0 0.35rem; color: #fff; font-size: 1.4rem; }
.st-promo-tile p { margin: 0 0 0.75rem; color: rgba(255, 255, 255, 0.88); font-size: 0.9375rem; }
.st-promo-cta { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) { .st-promo-cols-3, .st-promo-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-promo-grid { grid-template-columns: 1fr !important; } }

/* --- Steps / How it works ------------------------------------------------- */
.st-steps-section { padding: 5rem 0; }
.st-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: st-step; }
.st-steps-section[data-style="horizontal"] .st-steps-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-steps-section[data-style="horizontal"] .st-steps-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-steps-section[data-style="horizontal"] .st-steps-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-steps-section[data-style="horizontal"] .st-steps-count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.st-steps-section[data-style="vertical"] .st-steps-list { grid-template-columns: minmax(0, 720px); justify-content: center; }

.st-step { position: relative; text-align: center; }
.st-steps-section[data-style="vertical"] .st-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    text-align: left;
    align-items: start;
}
.st-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: var(--st-radius-full);
    background: var(--st-primary);
    color: var(--st-on-primary, #fff);
    font-family: var(--st-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
}
.st-steps-section[data-style="vertical"] .st-step-number { margin: 0; }
.st-step-icon { display: block; font-size: 1.75rem; margin-bottom: 0.5rem; }
.st-step h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.st-step p { margin: 0; color: var(--st-gray-600); font-size: 0.9375rem; }

/* Connector line between horizontal steps. */
.st-steps-section[data-style="horizontal"] .st-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    left: calc(50% + 34px);
    right: calc(-50% + 34px);
    height: 2px;
    background: var(--st-gray-200);
}
@media (max-width: 900px) {
    .st-steps-section[data-style="horizontal"] .st-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .st-steps-section[data-style="horizontal"] .st-step::after { display: none; }
}
@media (max-width: 560px) {
    .st-steps-section[data-style="horizontal"] .st-steps-list { grid-template-columns: 1fr !important; }
}

body.dark-mode .st-step p { color: var(--st-text); }
body.dark-mode .st-steps-section[data-style="horizontal"] .st-step:not(:last-child)::after { background: var(--st-border); }


/* ==========================================================================
   SHARED SECTION APPEARANCE (3.8.0)

   Background band, vertical rhythm and container width, available on every
   section. Driven by data attributes rather than inline styles because several
   renderers already emit their own `style` attribute.

   A section with no appearance saved emits no attributes at all, so everything
   built before this release keeps its original styling untouched.
   ========================================================================== */

/* --- Background bands ----------------------------------------------------- */
.st-section[data-bg="none"] { background: transparent; }

.st-section[data-bg="light"] {
    background: var(--st-gray-50);
    color: var(--st-text);
}

.st-section[data-bg="dark"] {
    background: var(--st-dark);
    color: var(--st-gray-300);
}
.st-section[data-bg="dark"] h1,
.st-section[data-bg="dark"] h2,
.st-section[data-bg="dark"] h3,
.st-section[data-bg="dark"] h4,
.st-section[data-bg="dark"] .st-section-title h2 { color: #fff; }
.st-section[data-bg="dark"] p,
.st-section[data-bg="dark"] .st-section-title p { color: var(--st-gray-400); }

.st-section[data-bg="primary"] {
    background: var(--st-primary);
    color: var(--st-on-primary, #fff);
}
.st-section[data-bg="accent"] {
    background: var(--st-accent);
    color: var(--st-on-accent, #fff);
}
.st-section[data-bg="primary"] h1, .st-section[data-bg="primary"] h2,
.st-section[data-bg="primary"] h3, .st-section[data-bg="primary"] h4,
.st-section[data-bg="primary"] p, .st-section[data-bg="primary"] .st-section-title h2,
.st-section[data-bg="primary"] .st-section-title p,
.st-section[data-bg="accent"] h1, .st-section[data-bg="accent"] h2,
.st-section[data-bg="accent"] h3, .st-section[data-bg="accent"] h4,
.st-section[data-bg="accent"] p, .st-section[data-bg="accent"] .st-section-title h2,
.st-section[data-bg="accent"] .st-section-title p {
    color: inherit;
}
/* The two-tone section title accent would vanish against a solid band. */
.st-section[data-bg="primary"] .st-section-title h2 span,
.st-section[data-bg="accent"] .st-section-title h2 span,
.st-section[data-bg="dark"] .st-section-title h2 span {
    color: inherit;
    opacity: 0.75;
}

/* Cards need to lift off a coloured band rather than blend into it. */
.st-section[data-bg="dark"] .st-feature-card,
.st-section[data-bg="dark"] .st-post-card,
.st-section[data-bg="dark"] .st-pricing-card,
.st-section[data-bg="dark"] .st-testimonial-card,
.st-section[data-bg="dark"] .st-team-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--st-gray-300);
}
.st-section[data-bg="dark"] .st-feature-card h3,
.st-section[data-bg="dark"] .st-post-card h3 a,
.st-section[data-bg="dark"] .st-pricing-card h3,
.st-section[data-bg="dark"] .st-pricing-amount { color: #fff; }

/* --- Vertical rhythm ------------------------------------------------------
   The scale lives in Appearance → General → Section Spacing and is emitted as
   --st-pad-* variables, so changing it there restyles every section at once.
   These values used to be hardcoded here, which meant editing the stylesheet.
   The mobile step-down is applied to the variables themselves, so a site keeps
   its proportions when the scale is changed. */

/* Every section takes the site default unless it says otherwise. */
.st-section {
    padding-top: var(--st-pad-default, 5rem);
    padding-bottom: var(--st-pad-default, 5rem);
}

/* Both sides together. */
.st-section[data-pad="none"] { padding-top: var(--st-pad-none, 0);     padding-bottom: var(--st-pad-none, 0); }
.st-section[data-pad="sm"]   { padding-top: var(--st-pad-sm, 2rem);    padding-bottom: var(--st-pad-sm, 2rem); }
.st-section[data-pad="md"]   { padding-top: var(--st-pad-md, 3.5rem);  padding-bottom: var(--st-pad-md, 3.5rem); }
.st-section[data-pad="lg"]   { padding-top: var(--st-pad-lg, 5rem);    padding-bottom: var(--st-pad-lg, 5rem); }
.st-section[data-pad="xl"]   { padding-top: var(--st-pad-xl, 7rem);    padding-bottom: var(--st-pad-xl, 7rem); }

/* One side only. Declared after the pair so an explicit top or bottom wins,
   letting two sections sit flush while the rest of the page keeps its rhythm. */
.st-section[data-pad-top="none"] { padding-top: var(--st-pad-none, 0); }
.st-section[data-pad-top="sm"]   { padding-top: var(--st-pad-sm, 2rem); }
.st-section[data-pad-top="md"]   { padding-top: var(--st-pad-md, 3.5rem); }
.st-section[data-pad-top="lg"]   { padding-top: var(--st-pad-lg, 5rem); }
.st-section[data-pad-top="xl"]   { padding-top: var(--st-pad-xl, 7rem); }

.st-section[data-pad-bottom="none"] { padding-bottom: var(--st-pad-none, 0); }
.st-section[data-pad-bottom="sm"]   { padding-bottom: var(--st-pad-sm, 2rem); }
.st-section[data-pad-bottom="md"]   { padding-bottom: var(--st-pad-md, 3.5rem); }
.st-section[data-pad-bottom="lg"]   { padding-bottom: var(--st-pad-lg, 5rem); }
.st-section[data-pad-bottom="xl"]   { padding-bottom: var(--st-pad-xl, 7rem); }

/* A hero manages its own vertical space. */
.st-section.st-hero,
.st-hero { padding-top: 0; padding-bottom: 0; }

/* --- Container width ------------------------------------------------------ */
.st-section[data-width="narrow"] .st-container { max-width: 820px; }
.st-section[data-width="default"] .st-container { max-width: var(--st-container-width, 1200px); }
.st-section[data-width="wide"] .st-container { max-width: 1440px; }
.st-section[data-width="full"] .st-container {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 782px) {
    .st-section[data-width="full"] .st-container { padding-left: 1rem; padding-right: 1rem; }
}

/* Edge to edge: no max-width and no side gutters, so a background, image or
   slider reaches the viewport edges. "Full width" keeps the gutters, which is
   right for text but wrong for media. */
.st-section[data-width="bleed"] .st-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
@media (max-width: 782px) {
    .st-section[data-width="bleed"] .st-container { padding-left: 0; padding-right: 0; }
}

/* A nested container inside a bled section — a section that puts its heading
   in the normal measure above full-width media — keeps the usual gutters. */
.st-section[data-width="bleed"] .st-container .st-container {
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 782px) {
    .st-section[data-width="bleed"] .st-container .st-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --- Dark mode ------------------------------------------------------------ */
body.dark-mode .st-section[data-bg="light"] {
    background: var(--st-card-bg);
    color: var(--st-text);
}
body.dark-mode .st-section[data-bg="dark"] { background: #08080f; }


/* ==========================================================================
   INTERIOR PAGE SECTIONS (3.9.0)
   Page header, text + image, timeline, contact form, map, tabs.
   ========================================================================== */

/* --- Page header ---------------------------------------------------------- */
.st-page-header-section {
    padding: 3.5rem 0;
    background: var(--st-gray-50);
}
.st-page-header-section.has-bg {
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 5rem 0;
}
.st-page-header-section.align-center { text-align: center; }
.st-page-header-section.align-left { text-align: left; }
.st-page-header-title {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.15;
}
.st-page-header-section.has-bg .st-page-header-title,
.st-page-header-section.has-bg .st-page-header-sub { color: #fff; }
.st-page-header-sub {
    margin: 0.75rem 0 0;
    font-size: 1.0625rem;
    color: var(--st-gray-600);
    max-width: 62ch;
}
.st-page-header-section.align-center .st-page-header-sub { margin-inline: auto; }
body.dark-mode .st-page-header-section { background: var(--st-card-bg); }
body.dark-mode .st-page-header-sub { color: var(--st-text); }

/* --- Text + image --------------------------------------------------------- */
.st-media-section { padding: 5rem 0; }
.st-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 3.5rem;
}
.st-media-section.media-left .st-media-copy { order: 2; }
.st-media-section.media-left .st-media-figure { order: 1; }

.st-media-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--st-primary);
}
.st-media-copy h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.st-media-copy h2 span { color: var(--st-primary); }
.st-media-text { color: var(--st-gray-600); line-height: 1.75; }
.st-media-text p { margin: 0 0 1rem; }

.st-media-bullets {
    list-style: none;
    margin: 1.25rem 0 1.75rem;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}
.st-media-bullets li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
}
.st-media-bullets svg { color: var(--st-success); margin-top: 0.2rem; }

.st-media-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--st-radius-xl);
    box-shadow: var(--st-shadow-lg);
    display: block;
}

@media (max-width: 860px) {
    .st-media-grid { grid-template-columns: 1fr; gap: 2rem; }
    .st-media-section.media-left .st-media-copy,
    .st-media-section.media-left .st-media-figure { order: initial; }
    .st-media-section { padding: 3.5rem 0; }
}
body.dark-mode .st-media-text { color: var(--st-text); }

/* --- Timeline ------------------------------------------------------------- */
.st-timeline-section { padding: 5rem 0; }
.st-timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 760px;
    position: relative;
}
.st-timeline::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--st-gray-200);
}
.st-timeline-item {
    position: relative;
    padding: 0 0 2.25rem 3rem;
}
.st-timeline-item:last-child { padding-bottom: 0; }
.st-timeline-marker {
    position: absolute;
    left: 4px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: var(--st-radius-full);
    background: var(--st-primary);
    box-shadow: 0 0 0 4px rgba(var(--st-primary-rgb), 0.18);
}
.st-timeline-date {
    display: inline-block;
    margin-bottom: 0.3rem;
    font-family: var(--st-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-primary);
}
.st-timeline-body h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.st-timeline-body p { margin: 0; color: var(--st-gray-600); }
body.dark-mode .st-timeline::before { background: var(--st-border); }
body.dark-mode .st-timeline-body p { color: var(--st-text); }

/* --- Contact form --------------------------------------------------------- */
.st-contact-form-section { padding: 5rem 0; }
.st-contact-form-grid { display: grid; gap: 2.5rem; }
.st-contact-form-section.has-details .st-contact-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}
.st-contact-details { display: grid; gap: 1.5rem; align-content: start; }
.st-contact-detail-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--st-primary);
    margin-bottom: 0.3rem;
}
.st-contact-detail p { margin: 0; color: var(--st-gray-600); line-height: 1.6; }

.st-contact-form { display: grid; gap: 1rem; align-content: start; }
.st-contact-form label { display: grid; gap: 0.35rem; }
.st-contact-form label > span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--st-gray-700);
}
.st-contact-form input,
.st-contact-form textarea {
    width: 100%;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--st-gray-300);
    border-radius: var(--st-radius-md);
    font-family: inherit;
    font-size: 0.9375rem;
    background: #fff;
    color: var(--st-gray-900);
}
.st-contact-form input:focus,
.st-contact-form textarea:focus {
    border-color: var(--st-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--st-primary-rgb), 0.15);
}
.st-contact-form textarea { resize: vertical; }
.st-contact-form .st-btn { justify-self: start; }
.st-contact-message { margin: 0; font-size: 0.875rem; min-height: 1.2em; }
.st-contact-message.is-success { color: var(--st-success); }
.st-contact-message.is-error { color: var(--st-danger); }

/* The honeypot must be reachable by bots but never seen by a person, so it is
   moved off-screen rather than display:none — some bots skip hidden fields. */
.st-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 860px) {
    .st-contact-form-section.has-details .st-contact-form-grid { grid-template-columns: 1fr; }
    .st-contact-form-section { padding: 3.5rem 0; }
}
body.dark-mode .st-contact-form input,
body.dark-mode .st-contact-form textarea {
    background: var(--st-bg);
    border-color: var(--st-border);
    color: var(--st-text);
}
body.dark-mode .st-contact-form label > span { color: var(--st-text); }
body.dark-mode .st-contact-detail p { color: var(--st-text); }

/* --- Map ------------------------------------------------------------------ */
.st-map-section { padding: 4rem 0; }
.st-map-embed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--st-radius-lg);
    overflow: hidden;
    background: var(--st-gray-100);
    border: 1px solid var(--st-gray-200);
}
.st-map-embed iframe { width: 100%; height: 100%; min-height: inherit; border: 0; display: block; }
.st-map-placeholder { text-align: center; padding: 2rem; }
.st-map-placeholder p { margin: 0 0 1rem; font-weight: 600; }
.st-map-note {
    margin: 1rem 0 0 !important;
    font-size: 0.8125rem;
    font-weight: 400 !important;
    color: var(--st-gray-500);
    max-width: 42ch;
    margin-inline: auto !important;
}
.st-map-fallback { text-align: center; }
body.dark-mode .st-map-embed { background: var(--st-card-bg); border-color: var(--st-border); }

/* --- Tabs ----------------------------------------------------------------- */
.st-tabs-section { padding: 5rem 0; }
.st-tabs { max-width: 900px; margin: 0 auto; }
.st-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--st-gray-200);
    margin-bottom: 1.75rem;
}
.st-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.75rem 1.25rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--st-gray-600);
    cursor: pointer;
    transition: color var(--st-transition-fast), border-color var(--st-transition-fast);
}
.st-tab:hover { color: var(--st-primary); }
.st-tab.active { color: var(--st-primary); border-bottom-color: var(--st-primary); }
.st-tab-panel { line-height: 1.75; color: var(--st-gray-600); }
.st-tab-panel p { margin: 0 0 1rem; }
.st-tab-panel[hidden] { display: none; }

@media (max-width: 600px) {
    .st-tabs-nav { border-bottom: 0; gap: 0.5rem; }
    .st-tab {
        border: 1px solid var(--st-gray-200);
        border-radius: var(--st-radius-full);
        margin-bottom: 0;
    }
    .st-tab.active { background: var(--st-primary); color: var(--st-on-primary, #fff); border-color: var(--st-primary); }
}

body.dark-mode .st-tabs-nav { border-bottom-color: var(--st-border); }
body.dark-mode .st-tab-panel { color: var(--st-text); }
body.dark-mode .st-tab { color: var(--st-gray-400); }


/* ==========================================================================
   PER-POST LAYOUT (3.12.0)

   Width, spacing and sidebar resolved per post or page, falling back to the
   site defaults. Existing content stores no override and therefore lands on
   the default classes, which reproduce the previous behaviour exactly.
   ========================================================================== */

/* --- Vertical spacing ----------------------------------------------------- */
/* page.php and single.php used a hardcoded inline `padding: 3rem 1rem`, which
   no setting could change. That is now a class on the same scale as the
   section spacing controls. */
.st-content-area { padding-top: 3rem; padding-bottom: 3rem; }
.st-content-area.st-layout-space-none { padding-top: 0; padding-bottom: 0; }
.st-content-area.st-layout-space-sm   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.st-content-area.st-layout-space-md   { padding-top: 3rem; padding-bottom: 3rem; }
.st-content-area.st-layout-space-lg   { padding-top: 4.5rem; padding-bottom: 4.5rem; }

@media (max-width: 782px) {
    .st-content-area.st-layout-space-lg { padding-top: 3rem; padding-bottom: 3rem; }
}

/* --- Content width -------------------------------------------------------- */
/* Applied to the content column so a narrow reading measure still works
   alongside a sidebar. With no sidebar the whole area is constrained. */
.st-content-area.st-layout-width-narrow.no-sidebar,
.st-content-area.st-layout-width-narrow .st-content {
    max-width: 720px;
}
.st-content-area.st-layout-width-narrow.no-sidebar {
    margin-inline: auto;
}

.st-content-area.st-layout-width-wide.no-sidebar { max-width: 1400px; margin-inline: auto; }
.st-content-area.st-layout-width-full.no-sidebar { max-width: none; }

/* Full width should genuinely reach the viewport edges, so the container's own
   gutter is removed for that case only. */
.st-width-full .st-main > .st-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.st-width-full .st-content-area.st-layout-width-full > .st-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 1200px) {
    .st-width-full .st-content-area.st-layout-width-full > .st-content {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.st-width-wide .st-main > .st-container { max-width: 1400px; }

/* --- No sidebar ----------------------------------------------------------- */
.st-content-area.no-sidebar { grid-template-columns: 1fr; }

/* --- Featured image on pages ---------------------------------------------- */
.st-page-thumbnail {
    margin: 0 0 2rem;
    border-radius: var(--st-radius-lg);
    overflow: hidden;
}
.st-page-thumbnail img { width: 100%; height: auto; display: block; }

/* --- Hidden title --------------------------------------------------------- */
/* Kept accessible to screen readers rather than removed from the document, so
   the page still has a heading for assistive technology and search engines. */
.st-hide-title .st-page-title,
.st-hide-title .entry-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   MOBILE MENU SIDE (3.12.1)

   The panel always slid in from the right, and which side the hamburger sat on
   was a side effect of the header layout — the Bold layout put it on the left
   with no way to change that. Both are now driven by one setting.
   ========================================================================== */

/* --- Panel slides from the left ------------------------------------------- */
.st-mobile-menu.st-mobile-menu-pos-left {
    right: auto;
    left: -350px;
    transition: left var(--st-transition-base),
                visibility var(--st-transition-base),
                opacity var(--st-transition-base);
}
.st-mobile-menu.st-mobile-menu-pos-left.active {
    left: 0;
    right: auto;
}

/* Explicit right, stated so it survives the RTL stylesheet. An author who has
   deliberately chosen a side should get that side in either text direction. */
.rtl .st-mobile-menu.st-mobile-menu-pos-right {
    left: auto;
    right: -350px;
    transition: right var(--st-transition-base),
                visibility var(--st-transition-base),
                opacity var(--st-transition-base);
}
.rtl .st-mobile-menu.st-mobile-menu-pos-right.active {
    right: 0;
    left: auto;
}
.rtl .st-mobile-menu.st-mobile-menu-pos-left {
    right: auto;
    left: -350px;
}
.rtl .st-mobile-menu.st-mobile-menu-pos-left.active {
    left: 0;
    right: auto;
}

/* --- Hamburger position on mobile ----------------------------------------- */
/* The toggle lives inside .st-header-actions in most layouts, so ordering it
   first moves it to the leading edge without changing the markup order that
   screen readers and keyboards follow. */
@media (max-width: 992px) {
    .st-mobile-menu-left .st-header-inner {
        position: relative;
    }
    .st-mobile-menu-left .st-header-actions {
        display: flex;
        align-items: center;
    }
    .st-mobile-menu-left .st-header-actions .st-menu-toggle {
        order: -1;
        margin-right: auto;
    }

    /* Layouts that render the toggle outside the actions cluster. */
    .st-mobile-menu-left .st-header-split .st-menu-toggle,
    .st-mobile-menu-left .st-header-bold .st-menu-toggle {
        order: -1;
    }

    .st-mobile-menu-right .st-header-bold .st-header-brand-row .st-menu-toggle {
        order: 3;
        margin-left: auto;
    }
    .st-mobile-menu-right .st-header-bold .st-header-brand-side {
        display: flex;
        align-items: center;
    }
}

/* ============================================
   PRODUCT CATEGORIES SECTION
   ============================================ */

/* Column count comes from the section settings as --st-cat-cols, set inline on
   the track. Breakpoints narrow it through --st-cat-cols-eff, a separate
   variable: redefining --st-cat-cols in terms of itself would be a cycle and
   would make it invalid. min() also means a section set to 3 columns never
   gains columns on a smaller screen. */

.st-product-cats .st-cat-item {
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.st-product-cats .st-cat-media {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--st-gray-100, #f1f5f9);
}

.st-product-cats .st-cat-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--st-transition, 0.25s ease);
}

.st-product-cats .st-cat-item:hover .st-cat-media img { transform: scale(1.05); }

.st-product-cats .st-cat-body { display: block; text-align: center; }

.st-product-cats .st-cat-name {
    display: block;
    font-weight: 500;
    line-height: 1.35;
}

.st-product-cats .st-cat-count {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--st-gray-500, #6b7280);
}

/* --- Rail: circles and pills ------------------------------------------- */

/* The shared carousel track is a flex row declared with !important, so the
   grid here needs both the extra class and the flag to take over. */
.st-cat-carousel .st-carousel-track.st-cat-track {
    --st-cat-cols-eff: var(--st-cat-cols, 8);
    --st-cat-gap: 1.5rem;
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--st-cat-rows, 2), auto);
    grid-auto-columns: calc((100% - (var(--st-cat-cols-eff) - 1) * var(--st-cat-gap)) / var(--st-cat-cols-eff));
    gap: 1.75rem var(--st-cat-gap);
    padding: 0.25rem 0.25rem 0.5rem;
}

.st-cat-carousel .st-carousel-track.st-cat-track > * {
    flex: none;
    width: auto !important;
}

/* --- Grid: cards and overlay ------------------------------------------- */

/* Flex rather than grid so the column count can be capped with min() inside
   calc(); repeat() does not reliably accept a computed integer. */
.st-product-cats .st-cat-grid {
    --st-cat-cols-eff: var(--st-cat-cols, 8);
    --st-cat-gap: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem var(--st-cat-gap);
}

.st-product-cats .st-cat-grid > * {
    flex: 0 0 calc((100% - (var(--st-cat-cols-eff) - 1) * var(--st-cat-gap)) / var(--st-cat-cols-eff));
}

/* --- Circles ----------------------------------------------------------- */

.st-product-cats-circles .st-cat-media {
    /* A squircle rather than a true circle: it crops portrait product shots
       far less aggressively at the same width. */
    border-radius: 34%;
    aspect-ratio: 1 / 1;
    margin-bottom: 0.875rem;
}

.st-product-cats-circles .st-cat-name { font-size: 0.9375rem; }

/* --- Pills ------------------------------------------------------------- */

.st-product-cats-pills .st-cat-track {
    grid-auto-columns: max-content;
    grid-template-rows: repeat(var(--st-cat-rows, 1), auto);
}

.st-product-cats-pills .st-cat-item {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--st-gray-200, #e2e8f0);
    border-radius: var(--st-radius-full, 999px);
    background: #fff;
    transition: border-color var(--st-transition-fast, 0.15s ease),
                color var(--st-transition-fast, 0.15s ease);
}

.st-product-cats-pills .st-cat-item:hover {
    border-color: var(--st-primary);
    color: var(--st-primary);
}

.st-product-cats-pills .st-cat-name {
    font-size: 0.875rem;
    white-space: nowrap;
}

/* --- Cards ------------------------------------------------------------- */

.st-product-cats-cards .st-cat-media {
    border-radius: var(--st-radius-lg, 16px);
    aspect-ratio: 4 / 5;
    margin-bottom: 0.875rem;
}

.st-product-cats-cards .st-cat-name {
    font-size: 1rem;
    font-weight: 600;
}

/* --- Overlay ----------------------------------------------------------- */

.st-product-cats-overlay .st-cat-item {
    position: relative;
    border-radius: var(--st-radius-lg, 16px);
    overflow: hidden;
    isolation: isolate;
}

.st-product-cats-overlay .st-cat-media {
    aspect-ratio: 3 / 4;
    background: var(--st-gray-200, #e2e8f0);
}

.st-product-cats-overlay .st-cat-media::after {
    /* Carries the text contrast so the name stays readable whatever the
       photograph behind it looks like. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 75%);
}

.st-product-cats-overlay .st-cat-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.125rem 1rem;
    color: #fff;
    z-index: 1;
}

.st-product-cats-overlay .st-cat-name {
    font-size: 1.0625rem;
    font-weight: 600;
}

.st-product-cats-overlay .st-cat-count { color: rgba(255, 255, 255, 0.85); }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1280px) {
    .st-cat-carousel .st-carousel-track.st-cat-track,
    .st-product-cats .st-cat-grid { --st-cat-cols-eff: min(var(--st-cat-cols, 8), 6); }
}

@media (max-width: 1024px) {
    .st-cat-carousel .st-carousel-track.st-cat-track,
    .st-product-cats .st-cat-grid {
        --st-cat-cols-eff: min(var(--st-cat-cols, 8), 4);
        --st-cat-gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .st-cat-carousel .st-carousel-track.st-cat-track {
        /* A fractional count leaves the next tile half visible, which is what
           tells a phone user the rail scrolls. */
        --st-cat-cols-eff: 3.4;
        --st-cat-gap: 1rem;
    }
    .st-product-cats .st-cat-grid {
        --st-cat-cols-eff: min(var(--st-cat-cols, 8), 2);
        --st-cat-gap: 1rem;
    }
    .st-product-cats-circles .st-cat-name,
    .st-product-cats-cards .st-cat-name { font-size: 0.875rem; }
    /* The arrows sit outside the container on desktop; on a phone that puts
       them off-screen, and the rail is swiped anyway. */
    .st-cat-carousel .st-carousel-btn { display: none; }
}

@media (max-width: 480px) {
    .st-cat-carousel .st-carousel-track.st-cat-track { --st-cat-cols-eff: 2.6; }
}

/* ============================================
   TRUST BAR SECTION
   ============================================ */

.st-trust-bar .st-trust-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-trust-bar .st-trust-item {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.st-trust-bar .st-trust-inner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    height: 100%;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
}

.st-trust-bar a.st-trust-inner:hover .st-trust-title { color: var(--st-primary); }

.st-trust-bar .st-trust-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
}

.st-trust-bar .st-trust-icon img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.st-trust-bar .st-trust-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.st-trust-bar .st-trust-title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
    transition: color var(--st-transition-fast, 0.15s ease);
}

.st-trust-bar .st-trust-sub {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--st-gray-500, #6b7280);
    margin-top: 0.125rem;
}

/* A trust bar normally sits tight under the hero, so it carries far less
   vertical padding than a standard section. */
.st-section.st-trust-bar { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.st-trust-bar .st-section-title { margin-bottom: 1.25rem; }

/* --- Inline ------------------------------------------------------------ */

.st-trust-bar-inline.is-bordered .st-trust-list {
    border-top: 1px solid var(--st-gray-200, #e2e8f0);
    border-bottom: 1px solid var(--st-gray-200, #e2e8f0);
}

.st-trust-bar-inline.is-bordered .st-trust-item + .st-trust-item {
    border-left: 1px solid var(--st-gray-200, #e2e8f0);
}

/* --- Stacked ----------------------------------------------------------- */

.st-trust-bar-stacked .st-trust-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.625rem;
    padding: 1.5rem 1rem;
}

.st-trust-bar-stacked .st-trust-text { align-items: center; }
.st-trust-bar-stacked .st-trust-icon { font-size: 2rem; }
.st-trust-bar-stacked .st-trust-icon img { width: 36px; height: 36px; }

.st-trust-bar-stacked.is-bordered .st-trust-item + .st-trust-item {
    border-left: 1px solid var(--st-gray-200, #e2e8f0);
}

/* --- Boxed ------------------------------------------------------------- */

.st-trust-bar-boxed .st-trust-list { gap: 1rem; }

.st-trust-bar-boxed .st-trust-item {
    flex: 1 1 220px;
    background: #fff;
    border: 1px solid var(--st-gray-200, #e2e8f0);
    border-radius: var(--st-radius-lg, 16px);
}

.st-trust-bar-boxed .st-trust-inner { padding: 1.25rem; }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
    /* Two per row rather than four squeezed onto one line. The left borders
       have to go with it, or a wrapped row starts with a stray rule. */
    .st-trust-bar .st-trust-item { flex: 1 1 50%; }

    .st-trust-bar-inline.is-bordered .st-trust-item + .st-trust-item,
    .st-trust-bar-stacked.is-bordered .st-trust-item + .st-trust-item { border-left: 0; }

    .st-trust-bar-inline.is-bordered .st-trust-item:nth-child(odd) + .st-trust-item {
        border-left: 1px solid var(--st-gray-200, #e2e8f0);
    }
}

@media (max-width: 560px) {
    .st-trust-bar .st-trust-item { flex: 1 1 100%; }

    .st-trust-bar-inline.is-bordered .st-trust-item:nth-child(odd) + .st-trust-item { border-left: 0; }

    .st-trust-bar-inline.is-bordered .st-trust-item + .st-trust-item,
    .st-trust-bar-stacked.is-bordered .st-trust-item + .st-trust-item {
        border-top: 1px solid var(--st-gray-200, #e2e8f0);
    }

    .st-trust-bar-stacked .st-trust-inner {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
    }

    .st-trust-bar-stacked .st-trust-text { align-items: flex-start; }
    .st-trust-bar-stacked .st-trust-icon { font-size: 1.5rem; }
}

/* Shown only to administrators, in place of a form whose handler is missing. */
.st-form-unavailable {
    max-width: 640px;
    margin: 1rem auto;
    padding: 0.875rem 1.125rem;
    border-left: 4px solid #d97706;
    border-radius: 6px;
    background: #fffbeb;
    color: #78350f;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
}

/* Initials avatar, used when a testimonial has no photo. */
.st-testimonial-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--st-primary-light, #e6f0ff);
    color: var(--st-primary, #0066cc);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
}

/* Custom Content: pasted HTML wrapper. Establishes a containing block so a
   pasted layout's own positioning and flex rules apply inside the section
   rather than against the page. */
.st-custom-html { position: relative; }
.st-custom-html > :first-child { margin-top: 0; }
.st-custom-html > :last-child { margin-bottom: 0; }

/* --- Reservation: shortcode and fallback ---------------------------------
   The theme does not store bookings itself, so the form slot holds either a
   booking plugin's shortcode output or a way to reach the restaurant. */
.st-reservation-shortcode { padding: 2.5rem; }
.st-reservation-shortcode > :first-child { margin-top: 0; }
.st-reservation-shortcode > :last-child { margin-bottom: 0; }

.st-reservation-fallback {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.5rem;
}
.st-reservation-fallback-image {
    width: 100%;
    height: auto;
    border-radius: var(--st-radius-lg, 12px);
    display: block;
}
.st-reservation-fallback-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.st-reservation-fallback-text {
    flex-basis: 100%;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
}
.st-form-unavailable {
    margin: 1rem 2.5rem 2rem;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--st-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    font-size: 0.875rem;
    line-height: 1.6;
}

@media (max-width: 860px) {
    .st-reservation-shortcode,
    .st-reservation-fallback { padding: 1.75rem 1.5rem; }
    .st-form-unavailable { margin: 1rem 1.5rem 1.5rem; }
}

/* ==========================================================================
   CONTENT BUILDING BLOCKS (1.0.19)

   Ready-made blocks for Custom Content. They are also the complete toolkit the
   AI assistant may use, so every class it is allowed to write is defined here.
   Colours come from the theme's own variables, so they follow the colour
   settings and dark mode without extra rules.
   ========================================================================== */
.st-callout {
    margin: 1.5rem 0;
    padding: 1.1rem 1.4rem;
    border-left: 4px solid var(--st-primary);
    border-radius: var(--st-radius-lg, 12px);
    background: color-mix(in srgb, var(--st-primary) 9%, transparent);
}
.st-callout > :first-child { margin-top: 0; }
.st-callout > :last-child { margin-bottom: 0; }
.st-callout strong { display: block; margin-bottom: 0.25rem; font-size: 1.0625rem; }
.st-callout p { margin: 0.35rem 0 0; }

.st-callout--offer {
    border-left-color: var(--st-accent, #FF6B35);
    background: color-mix(in srgb, var(--st-accent, #FF6B35) 11%, transparent);
}
.st-callout--notice {
    border-left-color: var(--st-warning, #f59e0b);
    background: color-mix(in srgb, var(--st-warning, #f59e0b) 12%, transparent);
}
.st-callout--info {
    border-left-color: var(--st-primary);
    background: color-mix(in srgb, var(--st-primary) 9%, transparent);
}

.st-phone {
    margin: 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}
.st-phone a { color: var(--st-primary); text-decoration: none; }
.st-phone a:hover, .st-phone a:focus-visible { text-decoration: underline; }

.st-lead { font-size: 1.2rem; line-height: 1.7; }

/* ==========================================================================
   GALLERY LAYOUTS (1.0.22)

   grid       three equal tiles across (the base rules near the top of this file)
   masonry    columns of tiles at their natural heights
   carousel   a scrolling row, using the shared .st-carousel script
   mosaic     every fifth photo large, the rest filling in around it
   slideshow  one large photo at a time, the same carousel at one per view

   Before this, "masonry" kept every tile at a fixed 4:3 so it looked like a
   plain grid, and "carousel" had no styling or markup at all and rendered as
   a grid. All rules are scoped to .st-gallery[data-style=...], so nothing
   leaks into other sections that share a data-style value.
   ========================================================================== */

/* --- Masonry: tiles keep the height of their own photo --------------------- */
.st-gallery[data-style="masonry"] .st-gallery-grid {
    display: block;
    column-count: 3;
    column-gap: 1.5rem;
}
.st-gallery[data-style="masonry"] .st-gallery-grid > .st-gallery-item {
    display: block;
    margin-bottom: 1.5rem;
    break-inside: avoid;
    /* The base tile is a fixed 4:3 box with the photo cropped to fill it. */
    aspect-ratio: auto;
}
.st-gallery[data-style="masonry"] .st-gallery-item img {
    display: block;
    height: auto;
}
@media (max-width: 900px) { .st-gallery[data-style="masonry"] .st-gallery-grid { column-count: 2; } }
@media (max-width: 560px) { .st-gallery[data-style="masonry"] .st-gallery-grid { column-count: 1; } }

/* --- Mosaic: one large photo, four small ones beside it --------------------
   A block is five photos on a four-column grid: the first is two columns wide
   and two rows tall, the other four fill the remaining 2x2. The next block
   puts its large photo on the right, so the page does not read as one
   repeated template. `dense` lets the small ones back-fill beside it. */
.st-gallery[data-style="mosaic"] .st-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(9rem, 17vw, 14rem);
    grid-auto-flow: dense;
    gap: 1rem;
}
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item {
    aspect-ratio: auto;   /* the row height sets the size, not the photo */
    height: 100%;
}
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(5n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(10n + 6) {
    grid-column: 3 / span 2;
}

/* The last block is rarely a full five. Left alone it would end in a hole (a
   gallery of 11 left a 2x2 gap), so its photos stretch to fill the space:
     1 left  -> a full-width banner
     2 left  -> the second is as large as the first
     3 left  -> the two small ones become wide, stacked beside the large one
     4 left  -> the last one runs the width of the right-hand half            */
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(5n + 1):last-child {
    grid-column: 1 / -1;
    grid-row: span 1;
}
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(5n + 2):last-child {
    grid-column: span 2;
    grid-row: span 2;
}
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(5n + 2):nth-last-child(2),
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(5n + 3):last-child,
.st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(5n + 4):last-child {
    grid-column: span 2;
}
@media (max-width: 900px) {
    .st-gallery[data-style="mosaic"] .st-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(8rem, 28vw, 12rem);
        gap: 0.75rem;
    }
    /* Two columns: the large photo spans the full width. */
    .st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(10n + 6) {
        grid-column: span 2;
    }
    /* A lone second photo is already full width here; one row is enough. */
    .st-gallery[data-style="mosaic"] .st-gallery-grid > .st-gallery-item:nth-child(5n + 2):last-child {
        grid-row: span 1;
    }
}

/* --- Carousel and slideshow: the shared .st-carousel script ----------------
   The track is the flex row; the script reads the first item's width to know
   how far one step is. Items per view comes from --st-products-cols, which the
   renderer sets (3 for the carousel, 1 for the slideshow). */
.st-gallery-carousel .st-carousel-track { gap: 1rem; }

.st-gallery[data-style="slideshow"] .st-carousel-track > .st-gallery-item {
    flex-basis: 100%;            /* beats the shared 78% "peek" rule on phones */
    aspect-ratio: 16 / 9;
    max-height: min(70vh, 640px);
}
/* One photo at a time: the arrows sit on it, and the caption is always shown. */
.st-gallery[data-style="slideshow"] .st-carousel-prev { left: 1rem; }
.st-gallery[data-style="slideshow"] .st-carousel-next { right: 1rem; }
.st-gallery[data-style="slideshow"] .st-gallery-caption {
    padding: 1.5rem 1.75rem;
    font-size: 1rem;
    transform: none;
}

/* --- Captions on touch screens ---------------------------------------------
   The caption slides up on hover. A touch screen has no hover, so it was
   never visible. Where hover is not available it is simply shown. */
@media (hover: none) {
    .st-gallery .st-gallery-caption { transform: none; }
}

/* ==========================================================================
   TEXT + IMAGE LAYOUTS (1.0.23)

   side      text beside the image: the original layout, and the default
   stacked   the image across the top as a banner, centred text below
   overlap   a text card laid over the edge of the image
   cover     white text on a full-width image

   Every rule is scoped to .st-media-section[data-style=...]. A section with no
   style, or one that is not listed, is "side" and uses only the rules above.
   Each layout also handles the section having no image (the AI assistant
   leaves the photo for the author to add), which is the .no-image state.
   ========================================================================== */

/* --- Stacked: banner on top, text centred below ---------------------------- */
.st-media-section[data-style="stacked"] .st-media-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
}
.st-media-section[data-style="stacked"] .st-media-figure { order: -1; }
.st-media-section[data-style="stacked"] .st-media-copy {
    order: 0;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}
.st-media-section[data-style="stacked"] .st-media-figure img {
    aspect-ratio: 21 / 9;     /* any photo is cropped to the same wide banner */
    max-height: 30rem;
    object-fit: cover;
}
/* The ticks stay left-aligned with each other while the block itself is centred. */
.st-media-section[data-style="stacked"] .st-media-bullets {
    display: inline-grid;
    text-align: start;
}
@media (max-width: 860px) {
    .st-media-section[data-style="stacked"] .st-media-figure img { aspect-ratio: 16 / 9; }
}

/* --- Overlap: a text card laid over the edge of the photo ------------------
   A twelve-column grid: the photo takes eight columns, the card six, so they
   share the two columns in between and the card sits on the photo's edge. */
.st-media-section[data-style="overlap"] .st-media-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 0;
}
.st-media-section[data-style="overlap"] .st-media-figure {
    grid-column: 1 / span 8;
    grid-row: 1;
    order: 0;
}
.st-media-section[data-style="overlap"] .st-media-figure img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.st-media-section[data-style="overlap"] .st-media-copy {
    grid-column: 7 / span 6;
    grid-row: 1;
    order: 0;
    position: relative;
    z-index: 2;
    padding: 2.75rem;
    background: var(--st-card-bg, #fff);
    border-radius: var(--st-radius-xl);
    box-shadow: var(--st-shadow-lg);
}
/* Photo on the left: mirror the columns. */
.st-media-section.media-left[data-style="overlap"] .st-media-figure { grid-column: 5 / span 8; }
.st-media-section.media-left[data-style="overlap"] .st-media-copy { grid-column: 1 / span 6; }
/* No photo: the card stands alone, centred. */
.st-media-section.no-image[data-style="overlap"] .st-media-copy { grid-column: 3 / span 8; }

@media (max-width: 860px) {
    .st-media-section[data-style="overlap"] .st-media-grid,
    .st-media-section.media-left[data-style="overlap"] .st-media-grid { grid-template-columns: 1fr; }
    .st-media-section[data-style="overlap"] .st-media-figure,
    .st-media-section.media-left[data-style="overlap"] .st-media-figure { grid-column: 1; grid-row: 1; }
    /* The card slides up over the photo's lower edge instead of sitting beside it. */
    .st-media-section[data-style="overlap"] .st-media-copy,
    .st-media-section.media-left[data-style="overlap"] .st-media-copy,
    .st-media-section.no-image[data-style="overlap"] .st-media-copy {
        grid-column: 1;
        grid-row: 2;
        margin: -3rem 1rem 0;
        padding: 1.75rem;
    }
    .st-media-section.no-image[data-style="overlap"] .st-media-copy { grid-row: 1; margin: 0; }
}

/* --- Cover: white text on a full-width photo -------------------------------
   The photo is a real <img> (so it keeps its alt text and lazy loading) laid
   behind the text. A gradient darkens the side the text is on and lets the
   photo show on the other.

   Contrast was calculated, not judged by eye: against the worst case, a pure
   white pixel, an overlay of 0.62 is the least that keeps the small eyebrow
   label at 4.5:1. It is 0.68 or more everywhere under the text, which never
   extends past 56% of the width, and a flat 0.70 once the text spans the full
   width on small screens. */
.st-media-section[data-style="cover"] .st-media-grid {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 30rem;
    padding: 4rem 3.5rem;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--st-radius-xl);
    background: #111827;      /* what a section with no photo sits on */
}
.st-media-section[data-style="cover"] .st-media-figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    order: 0;
}
.st-media-section[data-style="cover"] .st-media-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}
.st-media-section[data-style="cover"] .st-media-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 12, 20, 0.80) 0%, rgba(10, 12, 20, 0.68) 56%, rgba(10, 12, 20, 0.34) 100%);
}
/* Photo on the left means the text sits on the right. */
.st-media-section.media-left[data-style="cover"] .st-media-figure::after {
    background: linear-gradient(270deg, rgba(10, 12, 20, 0.80) 0%, rgba(10, 12, 20, 0.68) 56%, rgba(10, 12, 20, 0.34) 100%);
}
.st-media-section[data-style="cover"] .st-media-copy {
    position: relative;
    z-index: 2;
    order: 0;
    max-width: min(36rem, 56%);
    color: #fff;
}
.st-media-section.media-left[data-style="cover"] .st-media-copy { margin-left: auto; }

.st-media-section[data-style="cover"] .st-media-eyebrow { color: rgba(255, 255, 255, 0.85); }
.st-media-section[data-style="cover"] .st-media-copy h2,
.st-media-section[data-style="cover"] .st-media-copy h2 span { color: #fff; }
.st-media-section[data-style="cover"] .st-media-text { color: rgba(255, 255, 255, 0.92); }
.st-media-section[data-style="cover"] .st-media-bullets svg { color: #fff; }

@media (max-width: 860px) {
    .st-media-section[data-style="cover"] .st-media-grid {
        min-height: 0;
        padding: 3rem 1.5rem;
    }
    .st-media-section[data-style="cover"] .st-media-figure::after,
    .st-media-section.media-left[data-style="cover"] .st-media-figure::after {
        background: rgba(10, 12, 20, 0.70);
    }
    .st-media-section[data-style="cover"] .st-media-copy,
    .st-media-section.media-left[data-style="cover"] .st-media-copy {
        max-width: none;
        margin-left: 0;
    }
}

/* ==========================================================================
   PRODUCTS CAROUSEL (1.0.26)

   The products carousel never worked. The shared carousel is built for a track
   whose children are the slides, but WooCommerce's [products] shortcode does not
   output a flat list: it outputs a wrapper div and, inside it, a ul with one li
   per product. With the shortcode dropped straight into the track, the wrapper
   div was the only slide, sized to one quarter of the row, and the whole product
   grid was squeezed into it: about 50px per card at desktop width. Nothing
   overflowed, so the carousel decided it was static and hid its arrows.

   Here the track is a plain block (its one child is the wrapper), the ul is the
   scrolling row, and each product is a slide. How many show at once follows the
   shop's own steps: the chosen number, at most 3 up to 1200px, at most 2 up to
   900px (a tablet), and on phones about one and a quarter, so the next product
   peeks in and invites a swipe. The shared carousel's phone rule applies up to
   782px, which on a tablet made each product 570px wide, so it is not used.

   The selectors begin with "html body" so that they out-rank the section's
   !important grid rules, and the page's WooCommerce styles when it has them.
   ========================================================================== */
.st-products-layout-carousel .st-carousel-track { --st-car-cols: var(--st-products-cols, 4); }
@media (max-width: 1200px) {
    .st-products-layout-carousel .st-carousel-track { --st-car-cols: min(var(--st-products-cols, 4), 3); }
}
@media (max-width: 900px) {
    .st-products-layout-carousel .st-carousel-track { --st-car-cols: min(var(--st-products-cols, 4), 2); }
}

html body .st-products-section.st-products-layout-carousel .st-carousel-track {
    display: block !important;
}
html body .st-products-section.st-products-layout-carousel .st-carousel-track ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 1.5rem !important;
    width: 100% !important;
}
html body .st-products-section.st-products-layout-carousel .st-carousel-track ul.products > li.product {
    flex: 0 0 calc((100% - (var(--st-car-cols, 4) - 1) * 1.5rem) / var(--st-car-cols, 4)) !important;
    scroll-snap-align: start;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}
@media (max-width: 560px) {
    html body .st-products-section.st-products-layout-carousel .st-carousel-track ul.products > li.product {
        flex-basis: 78% !important;
    }
}

/* ==========================================================================
   SECTION ANCHORS AND PER-DEVICE VISIBILITY (1.0.30)
   ========================================================================== */

/* Hide a section on some devices. Phones are up to 767px, tablets 768 to 1023px,
   desktops 1024px and up. It is hidden with CSS, so it is still in the page
   source (use the eye icon to remove a section entirely), and a link to an
   anchor on a section hidden at that width has nothing to scroll to.
   "html body" gives these more weight than any section's own display rule. */
@media (max-width: 767px) {
    html body section[data-hide~="phone"] { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    html body section[data-hide~="tablet"] { display: none !important; }
}
@media (min-width: 1024px) {
    html body section[data-hide~="desktop"] { display: none !important; }
}

/* A link to a section's anchor scrolls it to the top of the window. With a fixed
   header that would leave the section's heading underneath it, so leave room for
   the header (and the admin bar, when a logged-in user has it). */
section[id] { scroll-margin-top: 1rem; }
.has-sticky-header section[id] {
    scroll-margin-top: calc(var(--header-height, var(--st-header-height)) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}