/*
Theme Name: Lara Artist Theme
Theme URI: https://laramelachrinou.com
Author: Lara Melachrinou
Author URI: https://laramelachrinou.com
Description: A modern, minimalist block theme designed for Lara Melachrinou's personal artist and designer website. Features a clean aesthetic that showcases creative artwork with elegance.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lara-artist-theme
Tags: block-patterns, blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, art, template-editing, wide-blocks

Lara Artist Theme, Copyright 2026 Lara Melachrinou
Lara Artist Theme is distributed under the terms of the GNU GPL
*/

/* ============================================
   Self-Hosted Fonts — @font-face
   Latin, Latin-Ext, and Greek subsets only.
   Material Symbols Outlined stays on Google CDN
   (variable icon font — self-hosting impractical).
   font-display: swap prevents invisible text during load.
   ============================================ */

/* ── Manrope ─────────────────────────────────── */
/* greek */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('assets/fonts/manrope-300-nor-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/manrope-400-nor-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/manrope-500-nor-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/manrope-600-nor-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/manrope-700-nor-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/manrope-800-nor-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* latin-ext */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('assets/fonts/manrope-300-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/manrope-400-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/manrope-500-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/manrope-600-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/manrope-700-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/manrope-800-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('assets/fonts/manrope-300-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/manrope-400-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/manrope-500-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/manrope-600-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/manrope-700-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/manrope-800-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Playfair Display ────────────────────────── */
/* latin-ext */
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/playfair-display-400-ita-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/playfair-display-400-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/playfair-display-500-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/playfair-display-600-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/playfair-display-400-ita-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/playfair-display-400-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/playfair-display-500-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/playfair-display-600-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Cormorant Garamond ──────────────────────── */
/* latin-ext */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-400-ita-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-400-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-500-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-600-nor-latin_ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-400-ita-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-400-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-500-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/cormorant-garamond-600-nor-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



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

html {
    scroll-behavior: smooth;
}

:root {
    /*
     * --lara-vh is the single source of truth for viewport height.
     * CSS baseline: 100dvh (falls back to 100vh for older browsers).
     * JS override: initViewportHeight() in main.js sets this to
     * window.innerHeight in px on every resize/orientationchange,
     * which is more reliable on mobile than any CSS-only approach.
     *
     * Usage:  height: var(--lara-vh);
     *         height: calc(var(--lara-vh) - var(--lara-header-offset));
     */
    --lara-vh: 100dvh;
    --lara-header-offset: 73px;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Material Symbols Font Loading
   ============================================ */

/* Hide Material Symbols icons until font is loaded to prevent FOUC (Flash of Unstyled Content) */
.material-symbols-outlined {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Show icons once font is loaded */
.fonts-loaded .material-symbols-outlined {
    visibility: visible;
    opacity: 1;
}

/* Fallback: Show icons after 3 seconds even if font loading detection fails */
body.fonts-timeout .material-symbols-outlined {
    visibility: visible;
    opacity: 1;
}

/* ============================================
   Accessibility
   ============================================ */

/* Skip Link */
.skip-link {
    position: absolute;
    left: -9999rem;
    top: 2.5rem;
    z-index: 999999;
    padding: 1rem 1.5rem;
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    left: 1rem;
}

/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-1);
    outline-offset: 2px;
}

/* Screen Reader Text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    display: block;
    clip: auto !important;
    height: auto;
    width: auto;
    padding: 1rem;
    z-index: 100000;
    text-decoration: none;
}

/* ============================================
   Layout Utilities
   ============================================ */

.site-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}

/* ============================================
   Hero Section Styles
   ============================================ */

.art-archive-header-viewport {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Laptop Viewport - Original Layout */
@media (min-width: 1025px) and (max-width: 1440px) {
    .art-archive-header-viewport .art-page-hero {
        flex: 1 !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }
}

/* Wide Desktop Viewport - Robust Layout */
@media (min-width: 1441px) {
    .art-archive-header-viewport .art-page-hero {
        aspect-ratio: 16 / 9 !important;
        flex: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: 900px !important;
    }
}

.art-archive-header-viewport .art-filter-section {
    flex-shrink: 0;
}

.hero-section {
    position: relative;
    overflow: hidden;
}

/* Homepage Hero - Adaptive Strategy */
.hero-section-home {
    background-color: #1A1A1A;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    color: #FAFAFA !important;
    position: relative;
    overflow: hidden !important;
    width: 100%;
}

/* Laptop Viewport (1025px - 1440px) - Original "Perfect" Layout */
@media (min-width: 1025px) and (max-width: 1440px) {
    .hero-section-home {
        height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
        min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
        aspect-ratio: auto !important;
    }

    .hero-section-home .wp-block-cover__image-background {
        object-fit: cover !important;
    }
}

/* Wide Desktop Viewport (1441px+) - Robust "Full Image" Layout */
@media (min-width: 1441px) {
    .hero-section-home {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: 900px !important;
    }

    .hero-section-home .wp-block-cover__image-background {
        object-fit: cover !important;
        /* Hero keeps cover for cinematic feel */
    }
}

/* Mobile & Tablet */
@media (max-width: 1024px) {
    .hero-section-home {
        height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
        min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    }
}

.hero-section-home h1,
.hero-section-home h2,
.hero-section-home p {
    color: inherit !important;
}

.hero-section-home p.has-accent-1-color {
    color: #D4A574 !important;
}

.hero-section-home .wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Category card images - Adaptive Strategy */
.art-category-card {
    width: 100% !important;
    background-color: #1A1A1A !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Laptop Viewport (1025px - 1440px) - Original "Perfect" Layout */
@media (min-width: 1025px) and (max-width: 1440px) {
    .art-category-card {
        height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
        min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
        aspect-ratio: auto !important;
    }

    .art-category-card .wp-block-cover__image-background {
        object-fit: cover !important;
    }
}

/* Wide Desktop Viewport (1441px+) - "Zero Crop" Layout with Refined Positioning */
@media (min-width: 1441px) {
    .art-category-card {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: 900px !important;
        justify-content: center !important;
        /* Keep centering but adjust inner container */
    }

    .art-category-card .wp-block-cover__image-background {
        object-fit: contain !important;
    }

    /* Move content higher on wide desktop to match laptop composition - fine-tuned */
    .art-category-card .wp-block-cover__inner-container {
        padding-bottom: 3rem !important;
    }
}

/* Mobile & Tablet */
@media (max-width: 1024px) {
    .art-category-card {
        min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    }
}

.art-category-card .wp-block-cover__image-background {
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Ensure inner container stays on top and centered */
.art-category-card .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
}

/* Category CTA Buttons - Enhanced Visuals */
.art-category-card .wp-block-button__link {
    font-weight: bold !important;
    border: 2px solid rgba(197, 160, 89, 0.8) !important;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.3), inset 0 0 5px rgba(197, 160, 89, 0.2) !important;
    transition: all 0.3s ease-in-out !important;
}

.art-category-card .wp-block-button__link:hover {
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.6), inset 0 0 10px rgba(197, 160, 89, 0.4) !important;
    border-color: rgba(197, 160, 89, 1) !important;
    transform: translateY(-2px);
}

/* Hero CTA Buttons Style Refinement - Unified Outline Style */
.hero-content .wp-block-buttons {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

@media (max-width: 600px) {
    .hero-content .wp-block-buttons {
        gap: 1rem !important;
    }

    .hero-cta-primary .wp-block-button__link,
    .hero-cta-secondary .wp-block-button__link {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.85rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* Primary hero CTA — Gold filled (high visual weight) */
.hero-cta-primary .wp-block-button__link {
    background-color: #C5A059 !important;
    border: 1px solid #C5A059 !important;
    padding: 1rem 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    color: #000000 !important;
    box-shadow: 0 4px 20px rgba(197, 160, 89, 0.35) !important;
    font-weight: 600 !important;
}

.hero-cta-primary .wp-block-button__link:hover {
    background-color: #b8935a !important;
    border-color: #b8935a !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(197, 160, 89, 0.5) !important;
    color: #000000 !important;
}

/* Secondary hero CTA — Ghost style (low visual weight) */
.hero-cta-secondary .wp-block-button__link {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 1rem 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.hero-cta-secondary .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.hero-content .material-symbols-outlined {
    vertical-align: middle;
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
    font-size: 18px !important;
}

.hero-cta-primary .wp-block-button__link:hover .material-symbols-outlined {
    transform: translateX(5px);
}

.hero-cta-secondary .wp-block-button__link:hover .material-symbols-outlined {
    transform: rotate(10deg);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.85) 0%,
            rgba(26, 26, 26, 0.6) 50%,
            rgba(26, 26, 26, 0.4) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* ============================================
   Image Styles
   ============================================ */

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

.wp-block-image img {
    border-radius: var(--wp--custom--border-radius--medium, 8px);
}

/* ============================================
   Art Grid Styles
   ============================================ */

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--wp--preset--spacing--40, 30px);
}

.art-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--wp--custom--border-radius--medium, 8px);
    background-color: transparent;
}

.art-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
    display: block;
}

.art-item:hover img {
    transform: scale(1.05);
}

.art-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(26, 26, 26, 0.9) 0%,
            transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: var(--wp--preset--spacing--30, 20px);
}

.art-item:hover .art-item-overlay,
.art-item:focus-within .art-item-overlay {
    opacity: 1;
}

/* ============================================
   Art Style Navigation Links
   ============================================ */

.art-style-link-wrapper {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.art-style-link-wrapper:hover {
    transform: translateY(-4px);
}

.art-style-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.art-style-link:hover {
    text-decoration: none;
}

.art-style-link h3 {
    margin: 0 0 0.5rem 0;
    transition: color 0.3s ease;
}

.art-style-link:hover h3 {
    color: var(--wp--preset--color--accent-1, #D4A574);
}

.art-style-link p {
    margin: 0;
    transition: color 0.3s ease;
}

.art-style-link:hover p {
    color: var(--wp--preset--color--contrast, #1A1A1A);
}

/* ============================================
   Navigation Styles
   ============================================ */

/* ============================================
   Header - Melaya Style
   ============================================ */

:root {
    --lara-header-bg: rgba(10, 7, 14, 0.94);
    --lara-header-text: #ffffff;
    --lara-header-border: rgba(255, 3, 254, 0.28);
    --lara-header-accent: #ff64fd;
}

html.header-theme-warm-ivory,
body.header-theme-warm-ivory {
    --lara-header-bg: rgba(245, 239, 230, 0.92);
    --lara-header-text: #241912;
    --lara-header-border: rgba(47, 31, 18, 0.12);
    --lara-header-accent: #7d5634;
}

html.header-theme-sand-linen,
body.header-theme-sand-linen {
    --lara-header-bg: rgba(238, 219, 199, 0.94);
    --lara-header-text: #2a1d15;
    --lara-header-border: rgba(63, 42, 26, 0.16);
    --lara-header-accent: #8f5f38;
}

html.header-theme-espresso,
body.header-theme-espresso {
    --lara-header-bg: rgba(10, 7, 14, 0.94);
    --lara-header-text: #ffffff;
    --lara-header-border: rgba(255, 3, 254, 0.28);
    --lara-header-accent: #ff64fd;
}

.site-header-new {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100%;
    border-bottom: 1px solid var(--lara-header-border);
    background:
        linear-gradient(180deg, rgba(255, 3, 254, 0.08) 0%, rgba(255, 3, 254, 0.02) 100%),
        var(--lara-header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.5rem 1.5rem !important;
    /* px-6, py-6 */
    transition: all 0.3s ease;
}


@media (min-width: 768px) {
    .site-header-new {
        padding: 1.5rem 3rem !important;
        /* px-12, py-6 */
    }
}

/* Homepage Hero Gap Fixes */
.home {
    background-color: #1A1A1A !important;
    /* Force dark background to prevent white gaps */
}

.home .wp-site-blocks {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.home .site-main {
    margin-top: var(--lara-header-offset, 73px) !important;
    padding-top: 0 !important;
}

.home .hero-section {
    margin-top: 0 !important;
}


/* Ensure content starts below the fixed header on subpages */
.site-main {
    padding-top: 80px;
    /* Default padding for pages with fixed header */
    margin-top: 0 !important;
}

/* Art and Melaya pages have hero sections that should go under the header */
.home .site-main,
.art-archive-page.site-main,
.melaya-page.site-main {
    padding-top: 0 !important;
}

.about-page.site-main,
.contact-page.site-main {
    padding-top: 0 !important;
}

.about-page-shell {
    padding-top: var(--lara-header-offset, 73px);
}

.contact-page-shell {
    padding-top: calc(var(--lara-header-offset, 73px) + 44px);
}

/* Remove any potential top margin from the first block in site-main to prevent "black gaps" */
.site-main> :first-child {
    margin-top: 0 !important;
}

/* Ensure parents don't clip stickiness/fixedness */
header.wp-block-template-part,
.wp-block-template-part-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100%;
}

.site-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 1441px) {
    .site-header-inner {
        max-width: 1800px;
    }
}

.site-header-left,
.site-header-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.site-header-right {
    justify-content: flex-end;
}

.site-header-left {
    gap: 1.5rem;
}

.site-header-logo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    /* Increased gap for logo */
    color: var(--lara-header-text);
}

.header-heart-logo {
    width: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    height: auto;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
}

.header-heart-logo img {
    width: 32px;
    min-width: 32px;
    max-width: none !important;
    height: auto;
    display: block;
    visibility: visible !important;
    opacity: 1 !important;
    transform-origin: center;
    animation: header-heart-pulse-glow 2.9s ease-in-out infinite;
    will-change: transform, filter;
}

.site-header-logo .material-symbols-outlined {
    font-size: 1.5rem;
}

@keyframes header-heart-pulse-glow {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(212, 165, 116, 0));
    }

    38% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px rgba(255, 3, 254, 0.52));
    }

    52% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 7px rgba(255, 3, 254, 0.38));
    }

    70% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 3px rgba(255, 3, 254, 0.22));
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-heart-logo img {
        animation: none !important;
    }

    .site-header-logo-link::before,
    .site-header-logo-link::after,
    .header-heart-logo::after {
        animation: none !important;
    }
}

.site-header-logo h2,
.site-header-logo a,
.site-header-logo .wp-block-site-title a {
    text-decoration: none !important;
    color: inherit !important;
    font-size: 1.25rem !important;
    /* Increased from 1.125rem for better visibility */
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    white-space: nowrap;
}

.mobile-header-starfield {
    display: none;
}

/* Navigation */
.site-header-nav {
    display: none !important;
    flex: 2;
    /* Take up more space to stay centered */
    justify-content: center !important;
}

@media (min-width: 1024px) {
    .site-header-nav {
        display: flex !important;
    }
}

.site-header-nav>.wp-block-navigation__container {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    /* gap-10 */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Force Melaya navigation style */
.site-header-nav .wp-block-navigation-item__label,
.site-header-nav .wp-block-navigation-link__label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
}

.site-header-nav a {
    text-decoration: none !important;
    color: var(--lara-header-text) !important;
    transition: opacity 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
}

.site-header-nav a:hover {
    opacity: 1 !important;
    color: var(--lara-header-accent) !important;
}

@media (min-width: 1024px) {
    .site-header-nav .wp-block-navigation-item.has-child {
        position: relative;
        z-index: 20;
    }

    /* Hover bridge: keeps submenu open while moving from "Art" label to panel */
    .site-header-nav .wp-block-navigation-item.has-child::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        width: 280px;
        height: 14px;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container {
        left: 50% !important;
        right: auto !important;
        top: 100% !important;
        transform: translateX(-50%) !important;
        border: 1px solid rgba(255, 3, 254, 0.22) !important;
        border-top: 2px solid rgba(255, 3, 254, 0.65) !important;
        background: #07070c !important;
        box-shadow:
            0 22px 40px rgba(0, 0, 0, 0.52),
            0 0 0 1px rgba(255, 3, 254, 0.06) inset !important;
        border-radius: 10px !important;
        min-width: 260px !important;
        margin-top: 0 !important;
        padding: 0.35rem 0.42rem !important;
        z-index: 40 !important;
        pointer-events: auto !important;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container,
    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container ul {
        display: block !important;
        gap: 0 !important;
        align-items: initial !important;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container .wp-block-navigation-item {
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container .wp-block-navigation-item+.wp-block-navigation-item {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a {
        display: block !important;
        width: 100% !important;
        color: rgba(255, 255, 255, 0.96) !important;
        letter-spacing: 0.14em !important;
        font-size: 0.72rem !important;
        font-weight: 640 !important;
        line-height: 1.25 !important;
        padding: 0.88rem 2.2rem 0.88rem 0.95rem !important;
        border-radius: 8px;
        position: relative;
        transition: color 0.22s ease, background-color 0.22s ease;
        cursor: pointer !important;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a::after {
        content: "";
        position: absolute;
        left: 0.95rem;
        right: 2.2rem;
        bottom: 0.5rem;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 3, 254, 0) 0%, rgba(255, 3, 254, 0.78) 50%, rgba(255, 3, 254, 0) 100%);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.22s ease;
        pointer-events: none;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a::before {
        content: "♥";
        position: absolute;
        right: 0.9rem;
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        font-size: 0.66rem;
        color: rgba(255, 3, 254, 0.96);
        text-shadow: 0 0 8px rgba(255, 3, 254, 0.58);
        opacity: 0;
        transition: opacity 0.22s ease, transform 0.22s ease;
        pointer-events: none;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a:hover,
    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a:focus-visible {
        color: #ffb5ff !important;
        background: rgba(255, 3, 254, 0.06) !important;
        outline: none;
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a:hover::after,
    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a:focus-visible::after {
        transform: scaleX(1);
    }

    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a:hover::before,
    .site-header-nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container a:focus-visible::before {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Actions */
.site-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .site-header-right {
        gap: 2rem;
        /* gap-8 */
    }
}

.site-language-switcher {
    display: inline-flex;
    align-items: center;
    position: relative;
    border: 1px solid rgba(255, 3, 254, 0.46);
    border-radius: 999px;
    overflow: visible;
    padding: 0.18rem;
    background: linear-gradient(180deg, rgba(12, 10, 16, 0.9) 0%, rgba(8, 7, 12, 0.9) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 3, 254, 0.2),
        0 0 18px rgba(255, 3, 254, 0.22),
        0 0 0 3px rgba(255, 3, 254, 0.08);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.site-language-switcher::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 160% at 50% 0%, rgba(255, 3, 254, 0.2), transparent 62%);
    opacity: 0.75;
}

.site-language-switcher .language-option {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    position: relative;
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    min-width: 3rem;
    padding: 0.62rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.site-language-switcher .language-option:hover {
    color: rgba(255, 255, 255, 0.96);
}

.site-language-switcher .language-option:not(.is-active):hover {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.site-language-switcher .language-option.is-active {
    background: linear-gradient(180deg, rgba(255, 3, 254, 0.92) 0%, rgba(214, 0, 218, 0.9) 100%);
    color: #0f0613;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(90, 0, 92, 0.45),
        0 0 18px rgba(255, 3, 254, 0.52);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .site-language-switcher .language-option.is-active {
        color: #ffffff;
    }
}

.site-language-switcher .language-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(255, 3, 254, 0.35);
}

@media (max-width: 1023px) {
    .site-header-inner {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .site-header-left {
        min-width: 0;
    }

    .site-header-right {
        flex: 0 0 auto;
        gap: 0.4rem !important;
        margin-left: 0.25rem;
    }

    .site-header-logo {
        gap: 0.6rem;
    }

    .site-header-logo h2 {
        font-size: 0.86rem !important;
        letter-spacing: 0.1em !important;
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        display: inline-block;
        text-shadow: 0 0 10px rgba(255, 3, 254, 0.22);
    }

    .site-header-new {
        overflow: hidden;
    }

    .site-header-inner {
        position: relative;
        z-index: 1;
    }

    .mobile-header-starfield {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }

    .mobile-header-star {
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        border-radius: 999px;
        opacity: 0.14;
        background: radial-gradient(circle, rgba(255, 237, 254, 0.98) 0%, rgba(255, 175, 248, 0.82) 58%, rgba(255, 3, 254, 0) 100%);
        box-shadow: 0 0 6px rgba(255, 3, 254, 0.34);
        animation:
            mobile-header-star-twinkle var(--dur) ease-in-out infinite,
            mobile-header-star-drift 12.5s ease-in-out infinite alternate;
        animation-delay: var(--delay), calc(var(--delay) * 0.4);
        will-change: opacity, transform, filter;
    }

    .mobile-header-star--flare {
        animation:
            mobile-header-star-twinkle-flare var(--dur) ease-in-out infinite,
            mobile-header-star-drift 14.6s ease-in-out infinite alternate-reverse;
        box-shadow: 0 0 10px rgba(255, 3, 254, 0.56);
    }

    .site-header-right .site-language-switcher {
        display: inline-flex;
        align-items: center;
        gap: 0.12rem;
        padding: 0.14rem !important;
        border: 1px solid rgba(255, 3, 254, 0.5) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(13, 10, 18, 0.94) 0%, rgba(8, 7, 13, 0.94) 100%) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 3, 254, 0.16),
            0 0 14px rgba(255, 3, 254, 0.22) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        min-width: auto;
    }

    .site-header-right .site-language-switcher::before {
        content: none !important;
    }

    .site-header-right .site-language-switcher .language-option {
        display: inline-block !important;
        min-width: auto;
        width: auto;
        padding: 0.45rem 0.58rem !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        line-height: 1;
        box-shadow: none !important;
        transform: none !important;
        text-decoration: none;
        border-bottom: 0 !important;
        transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .site-header-right .site-language-switcher .language-option:first-child {
        margin-right: 0;
    }

    .site-header-right .site-language-switcher .language-option:first-child::after {
        content: none;
    }

    .site-header-right .site-language-switcher .language-option:hover {
        color: rgba(255, 255, 255, 0.96);
        background: rgba(255, 3, 254, 0.1) !important;
    }

    .site-header-right .site-language-switcher .language-option.is-active {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(255, 3, 254, 0.92) 0%, rgba(214, 0, 218, 0.9) 100%) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.42),
            0 0 10px rgba(255, 3, 254, 0.4) !important;
    }
}

@media (max-width: 560px) {
    .site-header-right {
        gap: 0.35rem !important;
        margin-left: 0.35rem;
    }

    .site-header-logo {
        gap: 0.45rem;
    }

    .header-heart-logo,
    .header-heart-logo img {
        width: 24px;
        min-width: 24px;
        flex-basis: 24px;
    }

    .site-header-logo h2 {
        font-size: 0.72rem !important;
        letter-spacing: 0.04em !important;
        max-width: none;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    .site-header-right .site-language-switcher .language-option {
        font-size: 0.69rem;
        letter-spacing: 0.11em;
        padding: 0.42rem 0.5rem !important;
    }
}

@media (max-width: 390px) {
    .site-header-inner {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .site-header-logo h2 {
        font-size: 0.66rem !important;
        letter-spacing: 0.02em !important;
    }

    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
        padding: 7px;
    }
}

@keyframes mobile-header-star-drift {
    0% {
        transform: translate3d(-0.5px, 0.4px, 0) scale(0.96);
    }

    50% {
        transform: translate3d(0.7px, -0.5px, 0) scale(1.03);
    }

    100% {
        transform: translate3d(-0.3px, -0.2px, 0) scale(0.98);
    }
}

@keyframes mobile-header-star-twinkle {
    0% {
        opacity: 0;
        filter: brightness(1);
    }

    10% {
        opacity: 0.6;
        filter: brightness(1.7);
    }

    72% {
        opacity: 0.35;
        filter: brightness(1.2);
    }

    85%,
    100% {
        opacity: 0;
        filter: brightness(1);
    }
}

@keyframes mobile-header-star-twinkle-flare {

    0%,
    5% {
        opacity: 0;
        filter: brightness(1);
    }

    18% {
        opacity: 0.18;
        filter: brightness(1.3);
    }

    30% {
        opacity: 0.9;
        filter: brightness(2.4);
    }

    58% {
        opacity: 0.15;
        filter: brightness(1.2);
    }

    80%,
    100% {
        opacity: 0;
        filter: brightness(1);
    }
}

@media (max-width: 1023px) {
    body.mobile-menu-open .site-language-switcher.is-mobile-floating {
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .mobile-header-star {
        animation: none !important;
        opacity: 0.14 !important;
    }
}

@media (max-width: 1023px) {

    .mobile-menu-toggle:focus,
    .mobile-menu-toggle:focus-visible,
    .mobile-menu-link:focus,
    .mobile-menu-link:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle,
    .mobile-menu-link {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ============================================
   Scroll Indicator
   ============================================ */

.site-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: scroll-cue 2.5s infinite ease-in-out;
}

/* Sonar-ping ring */
.site-scroll-indicator::before {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    animation: scroll-indicator-ping 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

.site-scroll-indicator:hover {
    opacity: 0.7;
    transform: translateX(-50%) translateY(-5px);
}

.site-scroll-indicator .material-symbols-outlined {
    font-size: 2.25rem;
    font-weight: 200;
    /* Ultra-light for luxury feel */
}

@keyframes scroll-indicator-ping {
    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }

    80%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes scroll-cue {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.3;
    }

    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-scroll-indicator {
        animation: none;
        opacity: 0.7;
    }

    .site-scroll-indicator::before {
        animation: none;
        opacity: 0;
    }
}

.site-header-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    color: var(--lara-header-text);
    transition: opacity 0.3s ease;
}

.site-header-action-btn:hover {
    opacity: 1;
    color: var(--lara-header-accent);
}

.site-header-action-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

.cart-count {
    display: none;
}

@media (min-width: 640px) {
    .cart-count {
        display: inline;
    }
}

/* ============================================
   Button Styles
   ============================================ */

.wp-block-button__link {
    transition: all 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent-1);
    border-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--contrast);
}

/* ============================================
   Animation Utilities
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

.animation-delay-100 {
    animation-delay: 0.1s;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

/* ============================================
   Footer Styles
   ============================================ */

.site-footer {
    border-top: 1px solid var(--wp--preset--color--accent-6);
}

/*
 * Remove the default block gap between the last page section and the footer
 * on pages where we want a seamless dark-to-dark transition.
 *
 * WordPress adds spacing between top-level blocks by applying a margin to the
 * footer template-part wrapper (.wp-block-template-part).
 */
.home .site-main+.wp-block-template-part,
.melaya-page+.wp-block-template-part,
.about-page+.wp-block-template-part,
.contact-page+.wp-block-template-part,
.art-archive-page+.wp-block-template-part {
    margin-top: 0 !important;
}

/* Also remove the footer top border on these pages to avoid a visible divider */
.home .site-main+.wp-block-template-part .site-footer,
.melaya-page+.wp-block-template-part .site-footer,
.about-page+.wp-block-template-part .site-footer,
.contact-page+.wp-block-template-part .site-footer,
.art-archive-page+.wp-block-template-part .site-footer {
    border-top: 0;
}

.site-footer a {
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--wp--preset--color--accent-1);
}

.penguin-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.penguin-link__hearts {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, 0.45rem);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.28em;
    white-space: nowrap;
    color: #ff6fa5;
    opacity: 0;
    pointer-events: none;
}

.penguin-link:hover .penguin-link__hearts,
.penguin-link:focus-visible .penguin-link__hearts {
    animation: penguin-hearts-pop 0.55s ease-out forwards;
}

@media (max-width: 781px) {
    .site-footer .footer-separator {
        display: none;
    }

    .site-footer .footer-created-by {
        display: block;
        margin-top: 0.35rem;
    }
}

@keyframes penguin-hearts-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, 0.45rem) scale(0.9);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -0.9rem) scale(1);
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 781px) {
    .art-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--wp--preset--spacing--30, 20px);
    }

    .hero-section {
        min-height: var(--lara-vh);
    }
}

@media (max-width: 599px) {
    .art-grid {
        grid-template-columns: 1fr;
    }

    .hero-section {
        min-height: var(--lara-vh);
    }
}

/* ============================================
   Art Category Section Styles
   ============================================ */

.art-category-section {
    position: relative;
}

.art-category-section:nth-child(even) {
    background-color: var(--wp--preset--color--accent-5, #F5F5F5);
}

.art-category-section.rich-dark-bg {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 52%, rgba(255, 3, 254, 0.16) 0%, rgba(255, 3, 254, 0.05) 42%, transparent 76%),
        linear-gradient(180deg, #160815 0%, #0d0610 52%, #060408 100%) !important;
    --section-tint-1: rgba(255, 3, 254, 0.3);
    --section-tint-2: rgba(255, 3, 254, 0.24);
    --section-tint-3: rgba(255, 3, 254, 0.14);
}

.art-category-section.rich-dark-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(66% 76% at 8% 14%, var(--section-tint-1), transparent 74%),
        radial-gradient(60% 70% at 92% 88%, var(--section-tint-2), transparent 76%),
        radial-gradient(54% 62% at 50% 50%, var(--section-tint-3), transparent 80%);
}

.art-category-section.rich-dark-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 110% at 50% 4%, rgba(0, 0, 0, 0.3) 0%, transparent 48%),
        radial-gradient(120% 110% at 50% 96%, rgba(0, 0, 0, 0.34) 0%, transparent 50%),
        linear-gradient(180deg, rgba(8, 5, 10, 0.12) 0%, rgba(5, 4, 8, 0.26) 100%);
}

.art-category-section.rich-dark-bg>* {
    position: relative;
    z-index: 1;
}

.art-category-cubism.rich-dark-bg {
    --section-tint-1: rgba(0, 170, 255, 0.18);
    --section-tint-2: rgba(255, 3, 254, 0.2);
    --section-tint-3: rgba(255, 208, 64, 0.12);
}

.art-category-abstract.rich-dark-bg {
    --section-tint-1: rgba(255, 3, 254, 0.24);
    --section-tint-2: rgba(133, 85, 255, 0.18);
    --section-tint-3: rgba(255, 110, 205, 0.12);
}

.art-category-classic.rich-dark-bg {
    --section-tint-1: rgba(255, 196, 77, 0.14);
    --section-tint-2: rgba(255, 3, 254, 0.16);
    --section-tint-3: rgba(84, 133, 255, 0.1);
}

.art-category-childrens.rich-dark-bg {
    --section-tint-1: rgba(255, 127, 39, 0.16);
    --section-tint-2: rgba(255, 3, 254, 0.18);
    --section-tint-3: rgba(74, 226, 255, 0.12);
}

.art-category-custom.rich-dark-bg {
    --section-tint-1: rgba(255, 3, 254, 0.24);
    --section-tint-2: rgba(255, 130, 214, 0.16);
    --section-tint-3: rgba(124, 94, 255, 0.12);
}

.art-category-featured-image {
    overflow: hidden;
    margin-bottom: 0;
    position: relative !important;
    border-radius: 0 !important;
    background: #050507;
    isolation: isolate;
}

.art-category-cubism .art-category-featured-image {
    --category-bg-image: url('/wp-content/uploads/2026/02/lara-cubism-scaled.webp');
    --aura-1: rgba(0, 166, 255, 0.34);
    --aura-2: rgba(255, 3, 254, 0.26);
    --aura-3: rgba(255, 208, 48, 0.24);
}

.art-category-abstract .art-category-featured-image {
    --category-bg-image: url('/wp-content/uploads/2026/02/lara-abstract.webp');
    --aura-1: rgba(255, 3, 254, 0.34);
    --aura-2: rgba(119, 73, 255, 0.28);
    --aura-3: rgba(255, 108, 199, 0.24);
}

.art-category-classic .art-category-featured-image {
    --category-bg-image: url('/wp-content/uploads/2026/02/lara-classic.png');
    --aura-1: rgba(255, 197, 64, 0.3);
    --aura-2: rgba(255, 3, 254, 0.2);
    --aura-3: rgba(90, 132, 255, 0.18);
}

.art-category-childrens .art-category-featured-image {
    --category-bg-image: url('/wp-content/uploads/2026/02/lara-kids-art.png');
    --aura-1: rgba(255, 117, 24, 0.28);
    --aura-2: rgba(255, 3, 254, 0.24);
    --aura-3: rgba(57, 221, 255, 0.24);
}

.art-category-custom .art-category-featured-image {
    --category-bg-image: url('/wp-content/uploads/2026/02/lara-custom-art.png');
    --aura-1: rgba(255, 3, 254, 0.32);
    --aura-2: rgba(255, 126, 209, 0.24);
    --aura-3: rgba(131, 93, 255, 0.2);
}

.art-category-featured-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--category-bg-image);
    background-size: cover;
    background-position: center;
    transform: scale(1.18);
    filter: blur(30px) saturate(1.15) brightness(0.62);
}

.art-category-featured-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(58% 64% at 12% 50%, var(--aura-1), transparent 74%),
        radial-gradient(54% 62% at 86% 42%, var(--aura-2), transparent 72%),
        radial-gradient(44% 54% at 50% 88%, var(--aura-3), transparent 78%);
    opacity: 0.58;
}

.art-category-featured-image .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-end !important;
    padding-top: 2rem !important;
    position: relative !important;
    z-index: 4;
}

.art-category-featured-image h2 {
    position: absolute !important;
    top: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 0 !important;
    padding: 0.75rem 2.5rem !important;
    z-index: 10 !important;
    color: #C5A059 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    width: auto !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .art-category-featured-image h2 {
        top: 1.5rem !important;
        padding: 0.5rem 1.5rem !important;
        font-size: 1.25rem !important;
    }
}

.art-category-featured-image img {
    position: absolute !important;
    inset: 0;
    z-index: 6 !important;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: none !important;
    transition: transform 0.65s ease;
}

.art-category-section:hover .art-category-featured-image img {
    transform: scale(1.02);
}

.art-category-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--30, 20px);
}

.art-category-gallery-grid .wp-block-image {
    margin: 0 !important;
    overflow: hidden;
    border-radius: var(--wp--custom--border-radius--medium, 8px);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.art-category-gallery-grid .wp-block-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.art-category-gallery-grid .wp-block-image:hover img {
    transform: scale(1.08);
}

.art-category-cta {
    text-align: center;
}

.melaya-hero,
.about-hero,
.contact-hero {
    position: relative;
    padding-top: var(--wp--preset--spacing--80) !important;
    padding-bottom: var(--wp--preset--spacing--80) !important;
    width: 100%;
}

@media (min-width: 1025px) and (max-width: 1440px) {

    .melaya-hero,
    .about-hero,
    .contact-hero {
        min-height: var(--lara-vh) !important;
        aspect-ratio: auto !important;
    }
}

@media (min-width: 1441px) {

    .melaya-hero,
    .about-hero,
    .contact-hero {
        aspect-ratio: 16 / 9 !important;
        min-height: auto !important;
        height: auto !important;
        max-height: 900px !important;
    }
}

@media (max-width: 1024px) {

    .melaya-hero,
    .about-hero,
    .contact-hero {
        min-height: var(--lara-vh) !important;
    }
}

.art-page-hero {
    position: relative;
}

/* .art-page-intro border removed for cleaner design */

/* ============================================
   Art Category Cards (Homepage)
   ============================================ */

.art-categories-home {
    display: flex;
    flex-direction: column;
}

.art-category-card {
    position: relative;
    --category-accent-rgb: 197, 160, 89;
    transition: transform 0.3s ease;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Force buttons to the bottom */
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
    height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    max-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    margin-bottom: 6rem !important;
}

/* Make the card the positioning context for absolute elements */
.art-category-card>.wp-block-cover__inner-container {
    position: static !important;
}

.art-category-card:hover {
    transform: scale(1.005);
}

/* ── Scroll-reveal states (JS applies .lara-reveal-pending on init) ── */
.art-category-card.lara-reveal-pending {
    opacity: 0;
    transform: translateY(24px);
    /* Override the hover scale while pending so it doesn't compound */
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.art-category-card.lara-reveal-pending:hover {
    /* Suppress hover scale until card is revealed */
    transform: translateY(24px);
}

.art-category-card.lara-revealed {
    opacity: 1;
    transform: translateY(0);
    /* Transition carries from pending → revealed smoothly */
}

/* Restore normal hover scale once fully revealed */
.art-category-card.lara-revealed:hover {
    transform: scale(1.005);
}

/* Instant reveal for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .art-category-card.lara-reveal-pending {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.art-category-card .wp-block-cover__inner-container,
.art-category-card .wp-block-group,
.art-category-card .is-layout-constrained {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.art-category-card .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-end !important;
    padding-top: 2rem !important;
}

.art-category-card .wp-block-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: static !important;
}

.art-category-card h2 {
    position: absolute !important;
    top: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 0 !important;
    padding: 0.75rem 2.5rem !important;
    z-index: 10 !important;
    color: #C5A059 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    width: auto !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .art-category-card h2 {
        top: 1.5rem !important;
        padding: 0.5rem 1.5rem !important;
        font-size: 1.25rem !important;
    }
}

.art-category-card .wp-block-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem 0.75rem 2rem !important;
    gap: 1.5rem !important;
    position: relative;
    z-index: 5;
}

.art-category-card .wp-block-button {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.art-category-card .wp-block-button__link {
    width: 100% !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid #C5A059 !important;
    color: #C5A059 !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    font-weight: 500;
    display: block !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease,
        background-color 0.24s ease !important;
}

.art-category-card .wp-block-button__link::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.28;
    transform: scaleX(0.72);
    transform-origin: center;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.art-category-card .wp-block-button:not(:last-child) .wp-block-button__link {
    border-right: 1px solid #C5A059 !important;
}

.art-category-card .wp-block-button__link:hover {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--category-accent-rgb, 197, 160, 89), 0.2);
}

.art-category-card .wp-block-button__link:hover::after,
.art-category-card .wp-block-button__link:focus-visible::after {
    opacity: 0.6;
    transform: scaleX(1);
}

.art-category-card .wp-block-button__link:focus-visible {
    outline: none;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(var(--category-accent-rgb, 197, 160, 89), 0.38),
        0 8px 20px rgba(var(--category-accent-rgb, 197, 160, 89), 0.22);
}

.art-category-card .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(var(--category-accent-rgb, 197, 160, 89), 0.16);
}

/* Category Specific Button Colors */

/* Abstract - Pink */
.category-abstract .wp-block-button__link {
    border-color: #ff03fe !important;
    color: #ff03fe !important;
}

.category-abstract {
    --category-accent-rgb: 255, 3, 254;
}

.category-abstract .wp-block-button:not(:last-child) .wp-block-button__link {
    border-right-color: #ff03fe !important;
}

.category-abstract .wp-block-button__link:hover {
    background: rgba(255, 3, 254, 0.15) !important;
}

/* Classic & Cubism - Gold */
.category-classic .wp-block-button__link,
.category-cubism .wp-block-button__link {
    border-color: #C5A059 !important;
    color: #C5A059 !important;
}

.category-classic,
.category-cubism {
    --category-accent-rgb: 197, 160, 89;
}

.category-classic .wp-block-button:not(:last-child) .wp-block-button__link,
.category-cubism .wp-block-button:not(:last-child) .wp-block-button__link {
    border-right-color: #C5A059 !important;
}

.category-classic .wp-block-button__link:hover,
.category-cubism .wp-block-button__link:hover {
    background: rgba(197, 160, 89, 0.15) !important;
}

/* Kids - Green */
.category-kids .wp-block-button__link {
    border-color: #4CAF50 !important;
    color: #4CAF50 !important;
}

.category-kids {
    --category-accent-rgb: 76, 175, 80;
}

.category-kids .wp-block-button:not(:last-child) .wp-block-button__link {
    border-right-color: #4CAF50 !important;
}

.category-kids .wp-block-button__link:hover {
    background: rgba(76, 175, 80, 0.15) !important;
}

/* Custom - Blue */
.category-custom .wp-block-button__link {
    border-color: #2196F3 !important;
    color: #2196F3 !important;
}

.category-custom {
    --category-accent-rgb: 33, 150, 243;
}

.category-custom .wp-block-button:not(:last-child) .wp-block-button__link {
    border-right-color: #2196F3 !important;
}

.category-custom .wp-block-button__link:hover {
    background: rgba(33, 150, 243, 0.15) !important;
}

.art-category-card .wp-block-button:hover {
    transform: translateY(-2px);
}

@media (max-width: 781px) {
    .art-category-card {
        min-height: var(--lara-vh) !important;
    }

    .art-category-card h2 {
        font-size: var(--wp--preset--font-size--large) !important;
    }
}

@media (max-width: 1024px) {
    .art-category-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 781px) {
    .art-category-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wp--preset--spacing--20, 15px);
    }

    .art-category-featured-image {
        border-radius: 0 !important;
    }
}

@media (max-width: 599px) {
    .art-category-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .art-category-section {
        padding-top: var(--wp--preset--spacing--60) !important;
        padding-bottom: var(--wp--preset--spacing--60) !important;
    }
}

/* Art Gallery Items (PHP rendered) - Grid Layout (Legacy) */
.art-gallery-item {
    overflow: hidden;
    border-radius: 8px;
}

.art-gallery-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.art-gallery-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
}

.art-gallery-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

.art-gallery-item:hover .art-gallery-image {
    transform: scale(1.05);
}

.art-gallery-title {
    margin: 12px 0 0 0;
    font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
}

/* Art Gallery Vertical Layout */
.art-category-gallery-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40, 30px);
    max-width: 1000px;
    margin: 0 auto;
}

.rich-dark-bg {
    background: linear-gradient(180deg, #0f0f0f 0%, #050505 100%) !important;
}

.art-gallery-item-vertical {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: var(--wp--preset--spacing--40, 30px);
    align-items: center;
    background: #161616;
    padding: 28px 36px;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(197, 160, 89, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    content-visibility: auto;
    contain-intrinsic-size: 560px;
}

.art-gallery-item-vertical:hover {
    transform: translateY(-4px);
    border-color: rgba(197, 160, 89, 0.65);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(197, 160, 89, 0.2);
}

.art-gallery-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 380px;
}

.art-gallery-image-link {
    display: block;
    text-decoration: none;
    width: 100%;
}

.art-gallery-image-full {
    width: 100%;
    max-height: 380px;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

.art-gallery-item-vertical:hover .art-gallery-image-full {
    transform: scale(1.03);
}

.art-gallery-placeholder-vertical {
    width: 100%;
    min-height: 300px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.art-gallery-placeholder-vertical span {
    color: #999;
    font-size: 14px;
}

.art-gallery-details {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30, 24px);
}

.art-gallery-item-title {
    margin: 0;
    font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
}

.art-gallery-item-title a {
    color: var(--wp--preset--color--contrast, #1A1A1A);
    text-decoration: none;
    transition: color 0.3s ease;
}

.art-gallery-item-title a:hover {
    color: var(--wp--preset--color--accent-1, #D4A574);
}

.art-gallery-item-description {
    margin: 0;
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--wp--preset--color--accent-4, #666666);
}

.art-gallery-item-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
}

.art-meta-column {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.art-meta-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.62);
    /* was 0.4 → 3.7:1 FAIL → now 7.1:1 PASS */
    font-variant: small-caps;
}

.art-meta-value {
    font-size: 1.0625rem;
    font-weight: 500;
    color: #FAFAFA;
}

.art-meta-value.status-available {
    color: var(--lara-artist-accent);
}

/* ── "SOLD" Rubber Stamp ── */
.art-meta-value.status-sold {
    /* Reset inherited value colour */
    color: rgba(200, 30, 30, 0.92);

    /* Constrain to text width so rotation doesn't stretch the badge */
    width: fit-content;

    /* Stamp geometry */
    display: inline-block;
    padding: 0.12em 0.52em 0.1em;
    border: 2.5px solid rgba(200, 30, 30, 0.82);
    border-radius: 3px;
    background: rgba(180, 20, 20, 0.07);

    /* Stamp typography */
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.3;

    /* Pressed-ink depth */
    box-shadow:
        0 0 0 1px rgba(200, 30, 30, 0.18) inset,
        0 0 8px rgba(180, 20, 20, 0.22);
    text-shadow: 0 0 6px rgba(200, 30, 30, 0.28);

    /* Stamp tilt */
    transform: rotate(-8deg);
    transform-origin: center;

    /* Stamp press-in reveal */
    animation: stamp-press 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes stamp-press {
    0% {
        opacity: 0;
        transform: rotate(-8deg) scale(1.35);
        box-shadow:
            0 0 0 1px rgba(200, 30, 30, 0.05) inset,
            0 0 0 rgba(180, 20, 20, 0);
    }

    60% {
        opacity: 1;
        transform: rotate(-8deg) scale(0.94);
        box-shadow:
            0 0 0 1px rgba(200, 30, 30, 0.28) inset,
            0 0 14px rgba(180, 20, 20, 0.35);
    }

    100% {
        opacity: 1;
        transform: rotate(-8deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-meta-value.status-sold {
        animation: none;
    }
}

.art-gallery-trust-note {
    margin: 0.5rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 640px) {
    .art-gallery-item-meta-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
    }

    /* Switch each meta row to inline: label → value side by side */
    .art-meta-column {
        flex-direction: row;
        align-items: baseline;
        gap: 0.35rem;
    }

    /* Add a colon after the label so it reads "Dimensions: 40 × 60 cm" */
    .art-meta-label::after {
        content: ":";
    }

    .art-meta-label {
        font-size: 0.72rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .art-meta-value {
        font-size: 0.875rem;
    }
}


.art-gallery-item-dimensions {
    position: relative;
    padding-left: 20px;
}

.art-gallery-item-dimensions::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 21V9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.art-gallery-item-year {
    position: relative;
    padding-left: 20px;
}

.art-gallery-item-year::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.art-gallery-item-availability {
    position: relative;
    padding-left: 20px;
}

.art-gallery-item-availability::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.art-gallery-empty-state {
    text-align: center;
    padding: var(--wp--preset--spacing--60, 60px) 0;
}

/* Responsive adjustments for vertical layout */
@media (max-width: 1024px) {
    .art-category-gallery-vertical {
        max-width: 900px;
    }

    .art-gallery-item-vertical {
        gap: var(--wp--preset--spacing--30, 24px);
        padding: 24px 28px;
    }

    .art-gallery-image-container {
        max-height: 35vh;
    }

    .art-gallery-item-title {
        font-size: 1.375rem;
    }

    .art-gallery-item-description {
        font-size: 1rem;
    }

    .art-meta-value {
        font-size: 1rem;
    }
}

@media (max-width: 781px) {
    .art-gallery-item-vertical {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--30, 20px);
        padding: 20px 22px;
    }

    .art-gallery-image-container {
        max-height: 50vh;
    }

    .art-gallery-item-title {
        font-size: 1.25rem;
    }

    .art-gallery-item-description {
        font-size: 0.9375rem;
    }

    .art-meta-value {
        font-size: 0.9375rem;
    }

    .art-category-gallery-vertical {
        gap: var(--wp--preset--spacing--40, 32px);
    }
}

.art-gallery-title a {
    color: var(--wp--preset--color--contrast, #1A1A1A);
    text-decoration: none;
    transition: color 0.3s ease;
}

.art-gallery-title a:hover {
    color: var(--wp--preset--color--accent-1, #D4A574);
}

/* Selected Works Grid - Home Page */
.selected-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 0 auto;
    max-width: 1400px;
}

@media (max-width: 768px) {
    .selected-works-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .selected-works-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.selected-works-grid .art-item {
    display: flex;
    flex-direction: column;
}

.selected-works-grid .art-item-image {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.selected-works-grid .art-item-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.selected-works-grid .art-thumbnail {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

.selected-works-grid .art-item:hover .art-thumbnail {
    transform: scale(1.05);
}

.selected-works-grid .art-item-content {
    padding-top: var(--wp--preset--spacing--30, 1rem);
}

.selected-works-grid .art-item-title {
    margin: 0;
    font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    font-weight: 500;
    line-height: 1.4;
}

.selected-works-grid .art-item-title a {
    color: var(--wp--preset--color--contrast, #1A1A1A);
    text-decoration: none;
    transition: color 0.3s ease;
}

.selected-works-grid .art-item-title a:hover {
    color: var(--wp--preset--color--accent-1, #D4A574);
}

/* Artwork Status Indicators - Elegant Badge Design */
.artwork-status-badge {
    display: none;
}

/* Single artwork page availability - Consistent with gallery details */
.single-artwork-availability {
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.875rem;
    color: var(--wp--preset--color--accent-4, #6B6B6B);
    letter-spacing: 0.01em;
    font-weight: 400;
    position: relative;
    padding-left: 22px;
}

.single-artwork-availability::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}

/* Artwork Dimensions and Year Shortcodes (for single artwork pages) */
.artwork-dimensions,
.artwork-year {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--wp--preset--color--accent-4, #5a5a5a);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    letter-spacing: 0.01em;
}

.artwork-dimensions::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 21V9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.artwork-year::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.art-gallery-placeholder {
    width: 100%;
    min-height: 250px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.art-gallery-placeholder span {
    color: #999;
    font-size: 14px;
}

.art-gallery-empty-message {
    text-align: center;
    color: #666;
    margin-top: 20px;
    font-style: italic;
}

/* ============================================
   Melaya Collection Styles
   ============================================ */

/* .melaya-hero styles are handled by the global hero selector above */

.melaya-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 32px);
    align-items: stretch;
    width: min(1200px, 100%);
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .melaya-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.melaya-product-card {
    background: var(--wp--preset--color--base, #FAFAFA);
    border-radius: var(--wp--custom--border-radius--large, 16px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(26, 26, 26, 0.08);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.melaya-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--wp--custom--box-shadow--large, 0 20px 40px rgba(0, 0, 0, 0.15));
}

.melaya-product-image {
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
    background: #f4f2ee;
}

.melaya-product-image figure {
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.melaya-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.melaya-product-card:hover .melaya-product-image img {
    transform: scale(1.05);
}

.melaya-product-info {
    padding: clamp(18px, 2vw, 26px) !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.melaya-product-info>* {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.melaya-product-info>*+* {
    margin-top: 12px !important;
}

.melaya-product-info>div:last-of-type {
    margin-top: auto !important;
    padding-top: 16px !important;
}

.melaya-category-tabs {
    display: flex;
    gap: var(--wp--preset--spacing--20, 10px);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--wp--preset--spacing--50, 40px);
}

.melaya-category-tab {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--wp--preset--color--accent-1, #D4A574);
    border-radius: 9999px;
    background: transparent;
    color: var(--wp--preset--color--contrast, #1A1A1A);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.melaya-category-tab:hover,
.melaya-category-tab.active {
    background: var(--wp--preset--color--accent-1, #D4A574);
    color: var(--wp--preset--color--base, #FAFAFA);
}

.melaya-artwork-badge {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(212, 165, 116, 0.4);
    color: var(--wp--preset--color--accent-1, #D4A574);
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.melaya-price {
    font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
    font-size: 1.125rem;
    color: var(--wp--preset--color--contrast, #1A1A1A);
}

@media (max-width: 1024px) {
    .melaya-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--wp--preset--spacing--40, 32px);
    }
}

@media (max-width: 600px) {
    .melaya-product-grid {
        grid-template-columns: 1fr !important;
        gap: var(--wp--preset--spacing--30, 24px);
    }

    .melaya-category-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .melaya-category-tab {
        text-align: center;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {

    .site-header-new,
    .site-footer,
    .wp-block-navigation {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   Melaya - New Arrivals Carousel
   ============================================ */

.melaya-new-arrivals {
    padding: 6rem 0;
    background-color: #101010;
    color: var(--wp--preset--color--base, #FAFAFA);
    overflow: hidden;
}

.melaya-arrivals-header {
    width: 100%;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .melaya-arrivals-header {
        padding: 0 5%;
    }
}

.melaya-arrivals-title {
    margin: 0;
}

.melaya-arrivals-nav {
    display: flex;
    gap: 1rem;
}

.melaya-arrivals-nav-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid rgba(250, 250, 250, 0.1);
    background: transparent;
    color: var(--wp--preset--color--base, #FAFAFA);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.melaya-arrivals-nav-btn:hover {
    background-color: var(--wp--preset--color--accent-1, #D4A574);
    border-color: var(--wp--preset--color--accent-1, #D4A574);
    color: var(--wp--preset--color--contrast, #1A1A1A);
}

.melaya-arrivals-carousel {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 0 1.5rem 4rem;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.melaya-arrivals-carousel::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .melaya-arrivals-carousel {
        padding-left: 5%;
        padding-right: 5%;
    }
}


.melaya-arrivals-card {
    min-width: 320px;
    flex: 0 0 320px;
}

@media (min-width: 768px) {
    .melaya-arrivals-card {
        min-width: 400px;
        flex: 0 0 400px;
    }
}

.melaya-arrivals-image-wrapper {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background-color: rgba(250, 250, 250, 0.05);
}

.melaya-arrivals-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.melaya-arrivals-card:hover .melaya-arrivals-image {
    transform: scale(1.1);
}

.melaya-arrivals-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.melaya-arrivals-name {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
}

.melaya-arrivals-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--wp--preset--color--accent-4, #6B6B6B);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.melaya-arrivals-price {
    font-weight: 700;
    color: var(--wp--preset--color--accent-1, #D4A574);
    font-size: 1.125rem;
}

/* ============================================
   Back to Top Button
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(10, 7, 14, 0.96) 0%, rgba(7, 5, 11, 0.96) 100%);
    color: #ff64fd;
    border: 1px solid rgba(255, 3, 254, 0.92);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    z-index: 9999;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 3, 254, 0.2) inset;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: linear-gradient(180deg, rgba(255, 3, 254, 0.28) 0%, rgba(160, 0, 163, 0.3) 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(255, 3, 254, 0.34),
        0 0 0 1px rgba(255, 3, 254, 0.36) inset;
}

.back-to-top:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255, 3, 254, 0.3),
        0 0 0 6px rgba(8, 7, 12, 0.82);
}

.back-to-top:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255, 3, 254, 0.36),
        0 0 0 6px rgba(8, 7, 12, 0.9);
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 781px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
    }

    .back-to-top svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   WhatsApp Widget
   ============================================ */
.whatsapp-widget {
    position: fixed;
    bottom: 32px;
    left: 32px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(10, 7, 14, 0.96) 0%, rgba(7, 5, 11, 0.96) 100%);
    color: #ff64fd;
    border: 1px solid rgba(255, 3, 254, 0.92);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    z-index: 9998;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 3, 254, 0.2) inset;
}

.whatsapp-widget:hover {
    transform: scale(1.1);
    background: linear-gradient(180deg, rgba(10, 7, 14, 0.96) 0%, rgba(7, 5, 11, 0.96) 100%);
    color: #ffffff;
    box-shadow:
        0 12px 28px rgba(255, 3, 254, 0.34),
        0 0 0 1px rgba(255, 3, 254, 0.36) inset;
}

.whatsapp-widget:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255, 3, 254, 0.3),
        0 0 0 6px rgba(8, 7, 12, 0.82);
}

.whatsapp-widget:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255, 3, 254, 0.36),
        0 0 0 6px rgba(8, 7, 12, 0.9);
}

.whatsapp-widget svg {
    width: 28px;
    height: 28px;
}

/* WhatsApp Widget Tooltip */
.whatsapp-widget::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    background: linear-gradient(180deg, rgba(10, 7, 14, 0.96) 0%, rgba(7, 5, 11, 0.96) 100%);
    color: #ffe9ff;
    padding: 12px 18px;
    border-radius: 10px;
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 10000;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 3, 254, 0.18) inset;
    border: 1px solid rgba(255, 3, 254, 0.42);
}

.whatsapp-widget:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Tooltip Arrow */
.whatsapp-widget::after {
    content: '';
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(10, 7, 14, 0.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 10000;
}

.whatsapp-widget:hover::after {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 781px) {
    .whatsapp-widget {
        bottom: 20px;
        left: 20px;
        width: 52px;
        height: 52px;
    }

    .whatsapp-widget svg {
        width: 26px;
        height: 26px;
    }

    /* Hide tooltip on mobile devices */
    .whatsapp-widget::before,
    .whatsapp-widget::after {
        display: none;
    }
}

/* ============================================
   Art Lightbox / Fullscreen Modal
   ============================================ */

/* Lightbox trigger button (wraps the image) */
.art-lightbox-trigger {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
}

.art-lightbox-trigger:focus {
    outline: 2px solid var(--wp--preset--color--accent, #D4A574);
    outline-offset: 2px;
}

.art-lightbox-trigger:focus:not(:focus-visible) {
    outline: none;
}

.art-lightbox-trigger:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #D4A574);
    outline-offset: 2px;
}

/* Lightbox overlay */
.art-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.art-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

/* Lightbox content container */
.art-lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Lightbox image */
.art-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.art-lightbox.is-active .art-lightbox-image {
    opacity: 1;
    transform: scale(1);
}

/* Lightbox title */
.art-lightbox-title {
    display: none !important;
}

.art-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: none !important;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.art-lightbox-nav span {
    transform: translateY(-1px);
}

.art-lightbox-prev {
    left: 8px;
}

.art-lightbox-next {
    right: 8px;
}

.art-lightbox-nav:disabled {
    opacity: 0.28;
    cursor: default;
}

.art-lightbox.has-multiple-images .art-lightbox-nav {
    display: flex !important;
}

/* Close button */
.art-lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    z-index: 1000000;
}

.art-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.art-lightbox-close:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
}

.art-lightbox-close::before,
.art-lightbox-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #fff;
}

.art-lightbox-close::before {
    transform: rotate(45deg);
}

.art-lightbox-close::after {
    transform: rotate(-45deg);
}

/* Loading spinner */
.art-lightbox-spinner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lightbox-spin 0.8s linear infinite;
}

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

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* ── Zoom states ─────────────────────────────────────── */

/* Give the image a compositing layer for smooth transform */
.art-lightbox-image {
    will-change: transform;
}

/* When zoomed: hide prev/next nav so they don't eat drag events,
   and allow the image to overflow the content box visually */
.art-lightbox.is-zoomed .art-lightbox-nav {
    display: none !important;
}

.art-lightbox-content.is-zoomed {
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
}

/* Zoom hint — bottom-centre, desktop only, fades out */
.art-lightbox::after {
    content: 'Scroll to zoom  •  Drag to pan  •  Dbl-click to reset';
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.art-lightbox.is-active::after {
    opacity: 1;
}

.art-lightbox.is-zoomed::after {
    opacity: 0;
}

@media (max-width: 768px) {

    /* Hide desktop hint on mobile; pinch is native and intuitive */
    .art-lightbox::after {
        display: none;
    }
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .art-lightbox-nav {
        width: 42px;
        height: 42px;
        font-size: 1.8rem;
        background: rgba(0, 0, 0, 0.56);
        border-color: rgba(255, 255, 255, 0.45);
    }

    .art-lightbox-prev {
        left: 6px;
    }

    .art-lightbox-next {
        right: 6px;
    }

    .art-lightbox-close {
        top: 15px;
        right: 15px;
        width: 44px;
        height: 44px;
    }

    .art-lightbox-close::before,
    .art-lightbox-close::after {
        width: 18px;
    }

    .art-lightbox-title {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .art-lightbox-content {
        max-width: 98vw;
    }
}

/* ============================================
   Contact Page Redesign Styles
   ============================================ */

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--60, 48px);
    margin-top: var(--wp--preset--spacing--60, 48px);
    align-items: start;
}

.contact-column {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50, 32px);
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-label {
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--accent-1, #D4A574);
}

.contact-value {
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.2;
}

.contact-value a {
    color: var(--wp--preset--color--contrast, #1A1A1A);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.contact-value a:hover {
    color: var(--wp--preset--color--accent-1, #D4A574);
    border-bottom-color: var(--wp--preset--color--accent-1, #D4A574);
}

.contact-social-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.contact-social-link {
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 1.25rem;
    color: var(--wp--preset--color--contrast, #1A1A1A);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.contact-social-link:hover {
    color: var(--wp--preset--color--accent-1, #D4A574);
    transform: translateX(4px);
}

.contact-social-handle {
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.8125rem;
    color: var(--wp--preset--color--accent-4, #666666);
    font-weight: 400;
}

.contact-map-container {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--wp--preset--color--accent-6, #E5E5E5);
    background-color: #F8F8F8;
    transition: all 0.5s ease;
}

.contact-map-container:hover {
    border-color: var(--wp--preset--color--accent-1, #D4A574);
    transform: scale(1.01);
}

.contact-map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    filter: grayscale(0.2) contrast(1.1);
}

@media (max-width: 1024px) {
    .contact-info-grid {
        gap: var(--wp--preset--spacing--50, 32px);
    }
}

@media (max-width: 781px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--60, 48px);
    }

    .contact-column {
        gap: var(--wp--preset--spacing--50, 32px);
    }
}

/* About Page - Gallery Profile V2 */
.about-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-photo-round img {
    width: 192px;
    height: 192px;
    object-fit: cover;
    border: 4px solid var(--wp--preset--color--base);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-photo-round:hover img {
    transform: scale(1.05);
}

.about-philosophy {
    margin: 0 auto;
    max-width: 800px;
}

.about-philosophy p {
    opacity: 0.8;
}

/* ============================================
   Logo Link
   ============================================ */

.site-header-logo-link {
    text-decoration: none !important;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
}

.site-header-logo-link:hover {
    opacity: 1;
}

.site-header-logo-link:hover .header-heart-logo img,
.site-header-logo-link:focus-visible .header-heart-logo img {
    opacity: 1 !important;
    animation:
        header-heartbeat 520ms cubic-bezier(0.22, 0.9, 0.32, 1.2) 1,
        header-heart-pulse-glow 4.6s ease-in-out infinite;
}

.site-header-logo-link::before,
.site-header-logo-link::after {
    content: "♥";
    position: absolute;
    left: 18px;
    top: 18px;
    opacity: 0;
    pointer-events: none;
    color: #D4A574;
    text-shadow: 0 0 10px rgba(212, 165, 116, 0.55);
    z-index: 20;
}

.site-header-logo-link::before {
    font-size: 0.85rem;
}

.site-header-logo-link::after {
    font-size: 0.95rem;
}

.header-heart-logo::after {
    content: "♥";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    color: #ff6fa5;
    text-shadow: 0 0 10px rgba(255, 111, 165, 0.62);
    z-index: 21;
    font-size: 0.78rem;
}

.site-header-logo-link.heart-spark-active::before {
    animation: heart-spark-left 380ms ease-out forwards;
}

.site-header-logo-link.heart-spark-active::after {
    animation: heart-spark-right 420ms ease-out forwards;
}

.site-header-logo-link.heart-spark-active .header-heart-logo::after {
    animation: heart-spark-up 360ms ease-out forwards;
}

.site-header-logo-link:hover::before,
.site-header-logo-link:focus-visible::before {
    animation: heart-spark-left 380ms ease-out forwards;
}

.site-header-logo-link:hover::after,
.site-header-logo-link:focus-visible::after {
    animation: heart-spark-right 420ms ease-out forwards;
}

.site-header-logo-link:hover .header-heart-logo::after,
.site-header-logo-link:focus-visible .header-heart-logo::after {
    animation: heart-spark-up 360ms ease-out forwards;
}

@keyframes heart-spark-left {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.7);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-22px, -18px) scale(1.1);
    }
}

@keyframes heart-spark-right {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.7);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(24px, -16px) scale(1.18);
    }
}

@keyframes heart-spark-up {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -185%) scale(1.22);
    }
}

@keyframes header-heartbeat {
    0% {
        transform: scale(1);
    }

    22% {
        transform: scale(1.12);
    }

    42% {
        transform: scale(1.03);
    }

    62% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* ============================================
   Neo-Brutalist Manifesto Style (About Page)
   ============================================ */

.brutal-about {
    --brutal-yellow: #FFFF00;
    --brutal-black: #000000;
    --brutal-white: #FFFFFF;

    font-family: 'Space Mono', monospace;
    background-color: var(--brutal-white);
    color: var(--brutal-black);
    padding-top: 89px !important;
    /* Offset for fixed site-header-new */
}

.brutal-about h1,
.brutal-about h2,
.brutal-about h3,
.brutal-about .font-brutal {
    font-family: 'Archivo Black', sans-serif !important;
    text-transform: uppercase;
    line-height: 1;
}

.brutal-border {
    border: 4px solid #000 !important;
}

/* ============================================
   Responsive Hardening (Mobile/Tablet)
   ============================================ */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

html.nav-menu-open,
body.nav-menu-open {
    overflow: hidden !important;
    height: var(--lara-vh);
}

iframe,
video,
canvas,
svg {
    max-width: 100%;
}

.site-content {
    min-height: var(--lara-vh);
}

.art-archive-header-viewport {
    min-height: var(--lara-vh);
}

.hero-section-home {
    height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
}

.art-category-card {
    height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
    max-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
}

@media (max-width: 1024px) {
    .site-header-new {
        padding: 1rem 1rem !important;
    }

    .site-main {
        padding-top: 72px;
    }

    .site-header-logo h2,
    .site-header-logo a,
    .site-header-logo .wp-block-site-title a {
        font-size: 0.95rem !important;
        letter-spacing: 0.14em !important;
    }

    .art-archive-header-viewport {
        min-height: auto;
    }

    .art-archive-header-viewport .art-page-hero {
        min-height: clamp(360px, 72vh, 620px) !important;
    }

    .art-gallery-item-vertical {
        grid-template-columns: 1fr;
    }

    .art-gallery-image-container {
        max-height: none;
    }

    .art-category-featured-image h2,
    .art-category-card h2 {
        white-space: normal !important;
        max-width: calc(100% - 2rem);
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .art-category-card .wp-block-buttons {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        padding: 0 1rem 1rem 1rem !important;
        gap: 0.75rem !important;
    }

    .art-category-card .wp-block-button {
        flex: 1 1 calc(50% - 0.5rem) !important;
    }

}

@media (max-width: 781px) {
    .art-category-card .wp-block-button {
        flex-basis: 100% !important;
    }

    .melaya-arrivals-card {
        min-width: 82vw;
        flex-basis: 82vw;
    }

    .melaya-arrivals-header {
        gap: 0.75rem;
    }

    .melaya-arrivals-nav-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .back-to-top {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: max(16px, env(safe-area-inset-right));
    }

    .whatsapp-widget {
        bottom: max(16px, env(safe-area-inset-bottom));
        left: max(16px, env(safe-area-inset-left));
    }
}

.brutal-shadow {
    box-shadow: 8px 8px 0px 0px #000 !important;
}

.brutal-shadow-primary {
    box-shadow: 8px 8px 0px 0px #FFFF00 !important;
}

.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Ensure header/footer stay standard */
.site-header-new,
.site-footer {
    font-family: var(--wp--preset--font-family--manrope) !important;
}

/* Grayscale for specific about images */
.brutal-grayscale {
    filter: grayscale(100%);
}

.brutal-about .selection\:bg-primary::selection {
    background-color: var(--brutal-yellow);
}

/* Supplemental utilities for the Manifesto layout */
.brutal-about .grow {
    flex-grow: 1;
}

.brutal-about .tracking-tighter {
    letter-spacing: -0.05em;
}

/* ============================================
   Neo-Brutalist Style (Contact Page)
   ============================================ */

.brutal-contact {
    --brutal-yellow: #f2f20d;
    --brutal-black: #181811;
    --brutal-white: #ffffff;

    font-family: 'Space Grotesk', sans-serif;
    background-color: var(--brutal-white);
    color: var(--brutal-black);
    padding-top: 89px !important;
    /* Offset for fixed header */
}

.brutal-contact h1,
.brutal-contact h2,
.brutal-contact h3,
.brutal-contact .font-display {
    font-family: 'Space Grotesk', sans-serif !important;
}

.neo-border {
    border: 3px solid #000000 !important;
}

.shadow-neo {
    box-shadow: 8px 8px 0px 0px #000000 !important;
}

.shadow-neo-sm {
    box-shadow: 4px 4px 0px 0px #000000 !important;
}

.neo-input {
    background: #fff;
    border: 3px solid #000;
}

.neo-input:focus {
    outline: none !important;
    box-shadow: 4px 4px 0px 0px #f2f20d !important;
    border-color: #000 !important;
}

/* Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    animation: marquee 20s linear infinite;
}

.brutal-contact .selection\:bg-primary::selection {
    background-color: var(--brutal-yellow);
}

/* ============================================
   Mobile Hamburger Menu
   ============================================ */

/* Hamburger toggle button - only visible below 1024px */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10002;
    position: relative;
}

@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex;
    }
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: var(--lara-header-text, #ffffff);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.25s ease,
        background-color 0.3s ease;
    transform-origin: center;
}

/* Animated X when menu is open */
.mobile-menu-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background-color: #FAFAFA;
}

.mobile-menu-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background-color: #FAFAFA;
}

/* Close (X) button inside the overlay — sits at the same top-right position
   as the hamburger button in the header, so it feels like the burger turned into an X */
.mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.close-line {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: #FAFAFA;
    border-radius: 2px;
    transition: background-color 0.3s ease;
    transform-origin: center;
}

.close-line:nth-child(1) {
    transform: translateY(0.75px) rotate(45deg);
}

.close-line:nth-child(2) {
    transform: translateY(-0.75px) rotate(-45deg);
}

.mobile-menu-close:hover .close-line,
.mobile-menu-close:focus .close-line {
    background-color: #ff03fe;
}

.mobile-menu-close:focus {
    outline: none;
}

.mobile-menu-close:focus-visible {
    outline: 2px solid rgba(255, 3, 254, 0.9);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Full-screen overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background:
        radial-gradient(90% 120% at 12% 8%, rgba(255, 3, 254, 0.16) 0%, rgba(255, 3, 254, 0) 55%),
        radial-gradient(100% 120% at 88% 92%, rgba(255, 3, 254, 0.12) 0%, rgba(255, 3, 254, 0) 58%),
        rgba(6, 6, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 3, 254, 0.2);
    border-right: 1px solid rgba(255, 3, 254, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 5rem 2rem 3rem;
}

/* ── Decorative hearts layer ──────────────────────────────────────────────── */

/* Keyframes */
@keyframes mmh-float {
    0% {
        transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
        transform: translateY(-12px) rotate(var(--r, 0deg));
    }

    100% {
        transform: translateY(0) rotate(var(--r, 0deg));
    }
}

@keyframes mmh-pulse {

    0%,
    100% {
        transform: scale(1) rotate(var(--r, 0deg));
    }

    50% {
        transform: scale(1.08) rotate(var(--r, 0deg));
    }
}

@keyframes mmh-drift {
    0% {
        transform: translate(0, 0) rotate(var(--r, 0deg));
    }

    33% {
        transform: translate(6px, -8px) rotate(var(--r, 0deg));
    }

    66% {
        transform: translate(-4px, -14px) rotate(var(--r, 0deg));
    }

    100% {
        transform: translate(0, 0) rotate(var(--r, 0deg));
    }
}

/* Container — fills the overlay, pointer-events off so nothing is blocked */
.mobile-menu-hearts {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Base heart style */
.mmh {
    position: absolute;
    display: block;
    opacity: 0;
    /* hidden until overlay opens */
}

/* Reveal hearts only when the overlay is open */
.mobile-menu-overlay.is-open .mmh {
    opacity: var(--op, 0.08);
}

/* Individual heart placement — size, position, rotation, animation, opacity */
.mmh-1 {
    --r: -12deg;
    --op: 0.09;
    width: 48px;
    height: 48px;
    top: 8%;
    left: 7%;
    animation: mmh-float 9s ease-in-out infinite;
    animation-delay: 0s;
}

.mmh-2 {
    --r: 18deg;
    --op: 0.07;
    width: 28px;
    height: 28px;
    top: 14%;
    right: 10%;
    animation: mmh-pulse 11s ease-in-out infinite;
    animation-delay: -3.2s;
}

.mmh-3 {
    --r: -6deg;
    --op: 0.11;
    width: 72px;
    height: 72px;
    top: 30%;
    left: 3%;
    animation: mmh-drift 14s ease-in-out infinite;
    animation-delay: -1.8s;
}

.mmh-4 {
    --r: 25deg;
    --op: 0.06;
    width: 24px;
    height: 24px;
    top: 22%;
    right: 18%;
    animation: mmh-float 8s ease-in-out infinite;
    animation-delay: -5s;
}

.mmh-5 {
    --r: -20deg;
    --op: 0.10;
    width: 56px;
    height: 56px;
    top: 48%;
    left: 82%;
    animation: mmh-pulse 13s ease-in-out infinite;
    animation-delay: -2.4s;
}

.mmh-6 {
    --r: 8deg;
    --op: 0.08;
    width: 40px;
    height: 40px;
    top: 62%;
    left: 12%;
    animation: mmh-drift 10s ease-in-out infinite;
    animation-delay: -7s;
}

.mmh-7 {
    --r: -15deg;
    --op: 0.06;
    width: 32px;
    height: 32px;
    top: 55%;
    right: 8%;
    animation: mmh-float 12s ease-in-out infinite;
    animation-delay: -4.1s;
}

.mmh-8 {
    --r: 30deg;
    --op: 0.13;
    width: 80px;
    height: 80px;
    top: 75%;
    left: 60%;
    animation: mmh-drift 16s ease-in-out infinite;
    animation-delay: -9s;
}

.mmh-9 {
    --r: -8deg;
    --op: 0.07;
    width: 36px;
    height: 36px;
    top: 82%;
    left: 18%;
    animation: mmh-pulse 10s ease-in-out infinite;
    animation-delay: -0.6s;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mmh {
        animation: none !important;
    }
}

/* Hearts are mobile-overlay-only — never shown on desktop */
@media (min-width: 782px) {
    .mobile-menu-hearts {
        display: none;
    }
}

/* ── End decorative hearts ──────────────────────────────────────────────── */


.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Navigation links */
.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.mobile-menu-link {
    display: block;
    color: #FAFAFA;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 0.75rem 1.5rem;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease,
        transform 0.35s ease,
        color 0.3s ease;
}

/* Stagger link animations when menu opens */
.mobile-menu-overlay.is-open .mobile-menu-link:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}

.mobile-menu-overlay.is-open .mobile-menu-link:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.14s;
}

.mobile-menu-overlay.is-open .mobile-menu-link:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.20s;
}

.mobile-menu-overlay.is-open .mobile-menu-link:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.26s;
}

.mobile-menu-overlay.is-open .mobile-menu-link:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s;
}

.mobile-menu-link::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: #ff03fe;
    transition: width 0.3s ease, left 0.3s ease;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus {
    color: #ff8dff;
    text-decoration: none;
}

.mobile-menu-link:hover::after,
.mobile-menu-link:focus::after {
    width: 40%;
    left: 30%;
}

/* Footer tagline */
.mobile-menu-footer {
    margin-top: auto;
    padding-bottom: 1.6rem;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.4s,
        transform 0.4s ease 0.4s;
}

.mobile-menu-overlay.is-open .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-tagline {
    color: rgba(250, 250, 250, 0.4);
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
}

.mobile-menu-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.25rem;
}

.mobile-menu-social-link {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 3, 254, 0.5);
    color: rgba(255, 196, 252, 0.95);
    background: linear-gradient(180deg, rgba(15, 10, 19, 0.9) 0%, rgba(7, 6, 11, 0.9) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 3, 254, 0.16);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-menu-social-link svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.mobile-menu-social-link:hover,
.mobile-menu-social-link:focus-visible {
    transform: translateY(-1px);
    color: #ffd1ff;
    border-color: rgba(255, 3, 254, 0.86);
    box-shadow:
        inset 0 0 0 1px rgba(255, 3, 254, 0.24),
        0 0 14px rgba(255, 3, 254, 0.28);
    outline: none;
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* ============================================
   Homepage Categories - Mobile Snap Layout
   ============================================ */
.home .home-style-pill {
    display: flex;
    justify-content: center;
    margin: 1.4rem auto 0.9rem;
    padding: 0 1rem;
    position: relative;
    z-index: 3;
}

.home .home-style-pill__text {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.56rem 1.1rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 3, 254, 0.5);
    background: linear-gradient(180deg, rgba(15, 11, 21, 0.94) 0%, rgba(9, 7, 14, 0.9) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 3, 254, 0.14),
        0 0 14px rgba(255, 3, 254, 0.2);
    color: rgba(255, 226, 253, 0.98);
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 3, 254, 0.24);
}

.home .home-style-pill__text[data-lang="en"] {
    display: inline-flex;
}

body[data-site-language="en"] .home .home-style-pill__text[data-lang="en"] {
    display: inline-flex;
}

body[data-site-language="el"] .home .home-style-pill__text[data-lang="el"] {
    display: inline-flex;
}

body[data-site-language="el"] .home .home-style-pill__text[data-lang="en"] {
    display: none;
}

/* ============================================
   Featured Works Carousel
   ============================================ */

.featured-works-section {
    background-color: #0a0a0a;
    padding: 5rem 0 4rem;
    overflow: hidden;
    position: relative;
}

.featured-works-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    margin-bottom: 2.5rem;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.featured-works-label {
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #C5A059;
    width: 100%;
    margin-bottom: 0.25rem;
}

.featured-works-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    color: #FAFAFA;
    margin: 0;
    flex: 1;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.featured-works-controls {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.fw-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0;
}

.fw-btn .material-symbols-outlined {
    font-size: 18px !important;
}

.fw-btn:hover {
    background: rgba(197, 160, 89, 0.12);
    border-color: #C5A059;
    color: #C5A059;
    transform: scale(1.08);
}

/* Track */
.featured-works-track-wrap {
    position: relative;
    overflow: hidden;
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(1rem, 4vw, 3rem);
}

.featured-works-track {
    display: flex;
    gap: 1.25rem;
    scrollbar-width: none;
    padding: 0.5rem 0 1rem;
    /* horizontal padding now lives on the wrap */
    cursor: grab;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.featured-works-track::-webkit-scrollbar {
    display: none;
}

.featured-works-track:active {
    cursor: grabbing;
}

/* Cards */
.fw-card {
    flex: 0 0 calc(25% - 1rem);
    min-width: 260px;
    max-width: 340px;
    background: #161616;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease;
    will-change: transform;
}

.fw-card:hover {
    transform: translateY(-6px);
    border-color: rgba(197, 160, 89, 0.25);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(197, 160, 89, 0.1);
}

.fw-card__link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
}

.fw-card__img-wrap {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1a1a1a;
    position: relative;
}

.fw-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(30%);
    transition: filter 0.5s ease, transform 0.5s ease;
}

.fw-card:hover .fw-card__img {
    filter: grayscale(0%);
    transform: scale(1.04);
}

.fw-card__meta {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fw-card__badge {
    font-family: 'Manrope', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C5A059;
}

.fw-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: #FAFAFA;
    margin: 0;
    line-height: 1.3;
}

.fw-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    /* was 0.4 → 3.7:1 FAIL → now 8.1:1 PASS */
    margin-top: 0.4rem;
    transition: color 0.25s ease;
}

.fw-card__arrow {
    font-size: 14px !important;
    transition: transform 0.25s ease;
}

.fw-card:hover .fw-card__cta {
    color: #C5A059;
}

.fw-card:hover .fw-card__arrow {
    transform: translateX(4px);
}

/* Dot indicators */
.fw-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1.5rem;
    padding: 0 1.5rem;
}

.fw-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.3s ease, width 0.3s ease;
}

.fw-dot--active {
    background: #C5A059;
    width: 20px;
    border-radius: 3px;
}

/* View All */
.fw-view-all {
    text-align: center;
    margin-top: 2.5rem;
    padding: 0 1.5rem;
}

.fw-view-all__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.fw-view-all__link .material-symbols-outlined {
    font-size: 16px !important;
    transition: transform 0.3s ease;
}

.fw-view-all__link:hover {
    color: #C5A059;
    border-color: #C5A059;
}

.fw-view-all__link:hover .material-symbols-outlined {
    transform: translateX(4px);
}

@media (min-width: 769px) and (max-width: 1200px) {
    .fw-card {
        flex: 0 0 calc(33.333% - 1rem);
    }
}

@media (max-width: 768px) {
    .featured-works-section {
        padding: 3.5rem 0 3rem;
    }

    .fw-card {
        flex: 0 0 80vw;
        max-width: 80vw;
        min-width: 0;
    }

    .featured-works-controls {
        display: none;
    }
}

@media (max-width: 481px) {
    .fw-card {
        flex: 0 0 88vw;
        max-width: 88vw;
    }
}

@media (max-width: 781px) {

    .home .home-style-pill {
        margin-top: 1.7rem;
        margin-bottom: 0.7rem;
    }

    .home .home-style-pill__text {
        font-size: 0.68rem;
        letter-spacing: 0.11em;
        padding: 0.52rem 0.95rem 0.55rem;
    }

    .home .art-categories-home {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.875rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 1rem 0.75rem !important;
        margin-top: 2.5rem !important;
    }

    .home .art-categories-home::-webkit-scrollbar {
        display: none;
    }

    .home .art-categories-home {
        scrollbar-width: none;
    }

    .home .art-categories-home>* {
        margin: 0 !important;
    }

    .home .art-categories-home .art-category-card {
        flex: 0 0 86vw !important;
        width: 86vw !important;
        min-width: 86vw !important;
        max-width: 86vw !important;
        height: min(72vh, 620px) !important;
        min-height: min(72vh, 620px) !important;
        max-height: min(72vh, 620px) !important;
        margin: 0 !important;
        scroll-snap-align: center;
        border-radius: 14px !important;
        border: 1px solid rgba(var(--category-accent-rgb, 197, 160, 89), 0.45) !important;
        box-shadow:
            0 0 0 1px rgba(var(--category-accent-rgb, 197, 160, 89), 0.18),
            0 0 18px rgba(var(--category-accent-rgb, 197, 160, 89), 0.18),
            0 10px 30px rgba(0, 0, 0, 0.38),
            inset 0 0 0 1px rgba(var(--category-accent-rgb, 197, 160, 89), 0.2);
        overflow: hidden !important;
    }

    .home .art-categories-home .art-category-card::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        box-shadow: inset 0 0 22px rgba(var(--category-accent-rgb, 197, 160, 89), 0.14);
    }

    .home .art-categories-home .art-category-card .wp-block-cover__inner-container {
        padding-top: 1rem !important;
    }

    .home .art-categories-home .art-category-card .wp-block-buttons {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 0.85rem 1.95rem !important;
        width: 100% !important;
    }

    .home .art-categories-home .art-category-card .wp-block-button {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .home .art-categories-home .art-category-card .wp-block-button:last-child {
        display: none !important;
    }

    .home .art-categories-home .art-category-card .wp-block-button__link {
        width: 100% !important;
        padding: 0.58rem 0.7rem !important;
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.09em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .home .art-categories-home .art-category-card .wp-block-button:first-child .wp-block-button__link {
        animation: mobile-enter-gallery-pulse 2.8s ease-in-out infinite;
        box-shadow:
            0 0 0 1px rgba(var(--category-accent-rgb, 197, 160, 89), 0.3),
            0 0 10px rgba(var(--category-accent-rgb, 197, 160, 89), 0.2);
    }

    .home .home-mobile-contact-cta {
        display: block !important;
        margin: 1rem 0 0 !important;
        padding: 0 1rem 0.5rem !important;
    }

    .home .home-mobile-contact-cta .wp-block-buttons {
        margin: 0 !important;
    }

    .home .home-mobile-contact-cta .wp-block-button {
        width: 100% !important;
    }

    .home .home-mobile-contact-cta .wp-block-button__link {
        width: 100% !important;
        text-align: center !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.1em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 782px) {
    .home .home-style-pill {
        margin-top: 1.1rem;
        margin-bottom: 0.8rem;
    }
}

@keyframes mobile-enter-gallery-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(var(--category-accent-rgb, 197, 160, 89), 0.3),
            0 0 10px rgba(var(--category-accent-rgb, 197, 160, 89), 0.18);
        background-color: rgba(var(--category-accent-rgb, 197, 160, 89), 0.05);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(var(--category-accent-rgb, 197, 160, 89), 0.5),
            0 0 18px rgba(var(--category-accent-rgb, 197, 160, 89), 0.32);
        background-color: rgba(var(--category-accent-rgb, 197, 160, 89), 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-category-card .wp-block-button__link {
        transition: none !important;
    }

    .art-category-card .wp-block-button__link::after {
        transition: none !important;
    }

    .home .art-categories-home .art-category-card .wp-block-button:first-child .wp-block-button__link {
        animation: none !important;
    }
}

@media (min-width: 782px) {
    .home .home-mobile-contact-cta {
        display: none !important;
    }
}

/* ============================================
   Homepage Hero - Mobile Art Direction
   Top visual + text below (no crop)
   ============================================ */
@media (max-width: 781px) {
    .home .hero-section-home {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        text-align: center !important;
        height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
        min-height: calc(var(--lara-vh) - var(--lara-header-offset)) !important;
        max-height: none !important;
        padding-top: clamp(1.5rem, 6vw, 2.5rem) !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
        padding-bottom: clamp(1.5rem, 6vw, 2.5rem) !important;
        background-image: none !important;
        background: url('/wp-content/uploads/2026/02/Lara-Melachrinou-new-mobile-wallpaper-scaled.webp') center center / cover no-repeat !important;
        position: relative;
        overflow: hidden !important;
    }

    .home .hero-section-home .wp-block-cover__image-background {
        opacity: 0 !important;
    }

    .home .hero-section-home::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(36% 44% at 10% 14%, rgba(255, 3, 254, 0.28) 0%, rgba(255, 3, 254, 0.1) 32%, rgba(255, 3, 254, 0) 72%),
            radial-gradient(34% 42% at 88% 84%, rgba(255, 3, 254, 0.24) 0%, rgba(255, 3, 254, 0.08) 34%, rgba(255, 3, 254, 0) 74%);
        animation: hero-corner-bloom 9.8s ease-in-out infinite alternate;
    }

    .home .hero-section-home::after {
        content: none;
    }

    .home .hero-section-home .hero-content {
        max-width: min(92vw, 720px);
        margin: 0 auto !important;
        position: relative;
        z-index: 2;
        padding: 0 0 2.8rem;
        border: 0;
        box-shadow: none;
        background: transparent;
        animation: hero-mobile-rise 500ms ease-out both;
    }

    .home .hero-mobile-copy {
        display: none !important;
    }

    .home .hero-mobile-title {
        margin: 0;
        color: #FAFAFA;
        font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
        font-size: clamp(2rem, 9.2vw, 3rem);
        font-weight: 400;
        line-height: 1.06;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
        animation: hero-mobile-fade 560ms ease-out both;
    }

    .home .hero-mobile-subtitle {
        margin: 0.65rem 0 0;
        color: #D4A574;
        font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
        font-size: clamp(0.78rem, 2.9vw, 1rem);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        animation: hero-mobile-fade 640ms ease-out both;
    }

    .home .hero-section-home .hero-content>.wp-block-group>.wp-block-heading,
    .home .hero-section-home .hero-content>.wp-block-group>p.has-accent-1-color {
        display: none !important;
    }

    .home .hero-section-home .hero-content>.wp-block-group {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .home .hero-section-home .wp-block-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.7rem !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: clamp(2.4rem, 8vh, 4.2rem) !important;
        animation: hero-mobile-fade 720ms ease-out both;
    }

    .home .hero-section-home .wp-block-buttons .wp-block-button,
    .home .hero-section-home .wp-block-buttons .wp-block-button__link {
        width: 100%;
        max-width: 320px;
    }

    .home .hero-section-home .wp-block-spacer {
        display: none !important;
    }
}

@media (min-width: 782px) {
    .home .hero-mobile-copy {
        display: none !important;
    }
}

@keyframes hero-mobile-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-mobile-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .home .hero-section-home .hero-content,
    .home .hero-mobile-title,
    .home .hero-mobile-subtitle,
    .home .hero-section-home .wp-block-buttons {
        animation: none !important;
    }
}

/* ============================================
   Homepage Hero - Aurora Multi-Color Accents
   ============================================ */
@media (min-width: 782px) {
    .home .hero-section-home {
        position: relative;
        isolation: isolate;
        background: url('/wp-content/uploads/2026/02/Lara-Melachrinou-wallpaper-new-scaled.webp') center center / cover no-repeat !important;
    }

    .home .hero-section-home::before {
        content: none;
    }

    .home .hero-section-home::after {
        content: none;
    }

    .home .hero-section-home .hero-content {
        position: relative;
        z-index: 2;
    }

    .home .hero-section-home .hero-content>.wp-block-group {
        max-width: min(92vw, 1060px);
        margin-inline: auto;
        padding: clamp(2rem, 4vw, 3.3rem) clamp(1.2rem, 3vw, 2.8rem);
        border: 1px solid rgba(146, 228, 210, 0.42);
        box-shadow:
            /* teal — top-left */
            -8px -8px 28px rgba(90, 210, 185, 0.28),
            /* orange-coral — bottom-right */
            8px 8px 28px rgba(255, 128, 82, 0.22),
            /* soft purple — left spread */
            -12px 0px 22px rgba(168, 100, 255, 0.16),
            /* warm gold — bottom spread */
            0 12px 24px rgba(255, 200, 72, 0.16),
            /* sky-blue — top spread */
            0 -10px 22px rgba(106, 212, 255, 0.14),
            /* inner rim */
            inset 0 0 0 1px rgba(116, 220, 196, 0.14),
            /* base depth */
            0 28px 60px rgba(0, 0, 0, 0.52);
        animation: hero-multicolor-glow 9s ease-in-out infinite;
        background:
            linear-gradient(180deg, rgba(8, 8, 11, 0.78) 0%, rgba(8, 7, 12, 0.56) 100%);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        position: relative;
        isolation: isolate;
        overflow: visible;
    }

    .home .hero-section-home .hero-content>.wp-block-group::before {
        content: "";
        position: absolute;
        inset: -12px;
        border: 1px solid rgba(102, 220, 203, 0.22);
        pointer-events: none;
        z-index: 0;
        background: none;
        box-shadow:
            0 0 0 1px rgba(106, 212, 255, 0.12) inset,
            -6px -6px 22px rgba(90, 210, 185, 0.22),
            6px 6px 22px rgba(255, 128, 82, 0.18),
            0 0 18px rgba(168, 100, 255, 0.14);
        animation: hero-frame-edge-sweep 10.6s ease-in-out infinite;
    }



    .home .hero-section-home .hero-content>.wp-block-group>* {
        position: relative;
        z-index: 2;
    }

    .home .hero-section-home .wp-block-heading {
        color: #ffffff !important;
        background: linear-gradient(110deg,
                #2fd6b8 0%,
                #68c9ff 16%,
                #8ff2ce 32%,
                #9278eb 48%,
                #ff8160 64%,
                #ffa935 80%,
                #ffdc5c 100%);
        background-size: 260% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.35),
            0 0 14px rgba(106, 212, 255, 0.22),
            0 12px 30px rgba(0, 0, 0, 0.52);
        -webkit-text-stroke: 0.35px rgba(228, 247, 255, 0.2);
        letter-spacing: 0.22em !important;
        position: relative;
        display: inline-block;
        opacity: 0;
        transform: translateY(14px) scale(0.988);
        animation:
            hero-h1-reveal 760ms cubic-bezier(0.23, 1, 0.32, 1) 120ms both,
            hero-h1-shimmer 14.5s ease-in-out 1.1s infinite;
    }

    .home .hero-section-home .wp-block-heading::before,
    .home .hero-section-home .wp-block-heading::after {
        content: none;
    }

    .home .hero-section-home .wp-block-heading::before {
        animation: none;
    }

    .home .hero-section-home .wp-block-heading::after {
        animation: none;
    }

    .home .hero-section-home p.has-accent-1-color {
        color: #8ff2ce !important;
        text-shadow: 0 0 14px rgba(116, 220, 196, 0.32);
        letter-spacing: 0.24em !important;
        position: relative;
        display: inline-block;
        opacity: 0;
        transform: translateY(8px);
        animation:
            hero-subtitle-reveal 680ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both,
            hero-subtitle-glow 7.2s ease-in-out 1.6s infinite;
    }

    .home .hero-section-home p.has-accent-1-color::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: -0.38em;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 124, 90, 0) 0%, rgba(255, 153, 59, 0.88) 52%, rgba(255, 124, 90, 0) 100%);
        transform: scaleX(0);
        transform-origin: center;
        opacity: 0;
        animation: hero-subtitle-line-sweep 760ms cubic-bezier(0.23, 1, 0.32, 1) 540ms both;
    }

    .home .hero-section-home .wp-block-buttons {
        position: relative;
    }



    .home .hero-cta-primary .wp-block-button__link {
        /* Gold filled — consistent with global style */
        background-color: #C5A059 !important;
        border-color: #C5A059 !important;
        color: #000000 !important;
        box-shadow: 0 4px 20px rgba(197, 160, 89, 0.4) !important;
        font-weight: 600 !important;
    }

    .home .hero-cta-secondary .wp-block-button__link {
        background-color: transparent !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #FFFFFF !important;
        box-shadow: none !important;
    }

    .home .hero-cta-primary .wp-block-button__link:hover {
        background-color: #b8935a !important;
        border-color: #b8935a !important;
        color: #000000 !important;
        box-shadow: 0 8px 28px rgba(197, 160, 89, 0.55) !important;
    }

    .home .hero-cta-secondary .wp-block-button__link:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: #FFFFFF !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .home .hero-cta-primary .wp-block-button__link:focus-visible,
    .home .hero-cta-secondary .wp-block-button__link:focus-visible {
        outline: none !important;
        box-shadow:
            0 0 0 2px rgba(255, 220, 92, 0.88),
            0 0 0 5px rgba(255, 220, 92, 0.3) !important;
    }

    .home .hero-section-home+.art-categories-home,
    .home .hero-section-home+.home-style-pill+.art-categories-home {
        position: relative;
        margin-top: 0 !important;
        padding-top: 3.25rem !important;
    }

    .home .hero-section-home+.art-categories-home::before,
    .home .hero-section-home+.home-style-pill+.art-categories-home::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 140px;
        pointer-events: none;
        background:
            radial-gradient(90% 120% at 50% 0%, rgba(92, 221, 194, 0.26) 0%, rgba(121, 174, 245, 0.14) 36%, rgba(255, 151, 62, 0.08) 58%, rgba(255, 151, 62, 0) 78%);
    }

    /* Home category cards: teal/mint default, warm hover pulse, yellow micro highlight */
    .home .art-categories-home .art-category-card {
        border: 1px solid rgba(111, 229, 201, 0.52) !important;
        box-shadow:
            0 0 0 1px rgba(111, 229, 201, 0.2),
            0 0 20px rgba(104, 209, 255, 0.14),
            0 12px 30px rgba(0, 0, 0, 0.34),
            inset 0 0 0 1px rgba(255, 220, 92, 0.1);
    }

    .home .art-categories-home .art-category-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        box-shadow:
            inset 0 0 0 1px rgba(108, 211, 254, 0.18),
            inset 0 0 28px rgba(255, 220, 92, 0.08);
    }

    .home .art-categories-home .art-category-card:hover {
        border-color: rgba(255, 134, 94, 0.92) !important;
        box-shadow:
            0 0 0 1px rgba(255, 168, 67, 0.32),
            0 0 24px rgba(255, 134, 94, 0.24),
            0 14px 34px rgba(0, 0, 0, 0.38),
            inset 0 0 0 1px rgba(255, 220, 92, 0.24);
    }
}

@media (max-width: 781px) {
    .home .hero-cta-primary .wp-block-button__link {
        border-color: rgba(255, 3, 254, 0.86) !important;
        background: linear-gradient(180deg, rgba(255, 3, 254, 0.24) 0%, rgba(255, 3, 254, 0.1) 100%) !important;
        box-shadow: 0 0 0 1px rgba(255, 3, 254, 0.28) inset, 0 8px 24px rgba(255, 3, 254, 0.24) !important;
        color: #ffffff !important;
    }

    .home .hero-cta-secondary .wp-block-button__link {
        border-color: rgba(255, 3, 254, 0.5) !important;
    }
}


@keyframes hero-h1-reveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.988);
        filter: blur(1px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes hero-h1-shimmer {

    0%,
    12% {
        background-position: 0% 50%;
    }

    46% {
        background-position: 62% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes hero-h1-accent-flicker {

    0%,
    84%,
    100% {
        opacity: 0.88;
        filter: drop-shadow(0 0 6px rgba(255, 3, 254, 0.36));
    }

    86% {
        opacity: 0.46;
        filter: drop-shadow(0 0 2px rgba(255, 3, 254, 0.2));
    }

    88% {
        opacity: 1;
        filter: drop-shadow(0 0 9px rgba(255, 3, 254, 0.5));
    }

    91% {
        opacity: 0.7;
        filter: drop-shadow(0 0 4px rgba(255, 3, 254, 0.28));
    }
}

@keyframes hero-subtitle-reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
        letter-spacing: 0.34em;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0.24em;
    }
}

@keyframes hero-subtitle-line-sweep {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    40% {
        opacity: 1;
        transform: scaleX(1);
    }

    100% {
        opacity: 0.7;
        transform: scaleX(1);
    }
}

@keyframes hero-subtitle-glow {

    0%,
    100% {
        text-shadow: 0 0 12px rgba(116, 220, 196, 0.26);
    }

    50% {
        text-shadow: 0 0 18px rgba(255, 220, 92, 0.36);
    }
}

@keyframes hero-corner-bloom {
    0% {
        opacity: 0.6;
        transform: translate3d(-0.6%, 0, 0) scale(1);
    }

    50% {
        opacity: 0.92;
        transform: translate3d(0.7%, -0.4%, 0) scale(1.03);
    }

    100% {
        opacity: 0.68;
        transform: translate3d(0.5%, 0.3%, 0) scale(1.01);
    }
}

@keyframes hero-ambient-aurora {
    0% {
        background-position: center center, 14% 20%, 86% 84%;
        filter: saturate(1) brightness(1);
    }

    50% {
        background-position: center center, 18% 24%, 82% 80%;
        filter: saturate(1.08) brightness(1.04);
    }

    100% {
        background-position: center center, 12% 17%, 88% 86%;
        filter: saturate(1.03) brightness(1.01);
    }
}

@keyframes hero-frame-edge-sweep {

    0%,
    100% {
        background-position: top left, bottom right;
        box-shadow: 0 0 0 1px rgba(104, 209, 255, 0.1) inset;
    }

    50% {
        background-position: top 6px left 6px, bottom 6px right 6px;
        box-shadow:
            0 0 0 1px rgba(255, 165, 64, 0.22) inset,
            0 0 16px rgba(104, 209, 255, 0.22);
    }
}

@keyframes hero-multicolor-glow {

    0%,
    100% {
        box-shadow:
            -8px -8px 28px rgba(90, 210, 185, 0.28),
            8px 8px 28px rgba(255, 128, 82, 0.22),
            -12px 0px 22px rgba(168, 100, 255, 0.16),
            0 12px 24px rgba(255, 200, 72, 0.16),
            0 -10px 22px rgba(106, 212, 255, 0.14),
            inset 0 0 0 1px rgba(116, 220, 196, 0.14),
            0 28px 60px rgba(0, 0, 0, 0.52);
    }

    25% {
        box-shadow:
            -8px -8px 32px rgba(168, 100, 255, 0.3),
            8px 8px 32px rgba(255, 200, 72, 0.26),
            -12px 0px 24px rgba(106, 212, 255, 0.22),
            0 12px 28px rgba(90, 210, 185, 0.2),
            0 -10px 24px rgba(255, 128, 82, 0.18),
            inset 0 0 0 1px rgba(168, 100, 255, 0.12),
            0 28px 60px rgba(0, 0, 0, 0.52);
    }

    50% {
        box-shadow:
            -8px -8px 30px rgba(106, 212, 255, 0.28),
            8px 8px 30px rgba(168, 100, 255, 0.22),
            -12px 0px 22px rgba(255, 200, 72, 0.18),
            0 12px 26px rgba(255, 128, 82, 0.18),
            0 -10px 22px rgba(90, 210, 185, 0.16),
            inset 0 0 0 1px rgba(106, 212, 255, 0.12),
            0 28px 60px rgba(0, 0, 0, 0.52);
    }

    75% {
        box-shadow:
            -8px -8px 32px rgba(255, 200, 72, 0.3),
            8px 8px 32px rgba(90, 210, 185, 0.24),
            -12px 0px 24px rgba(255, 128, 82, 0.2),
            0 12px 28px rgba(168, 100, 255, 0.18),
            0 -10px 24px rgba(106, 212, 255, 0.16),
            inset 0 0 0 1px rgba(255, 200, 72, 0.12),
            0 28px 60px rgba(0, 0, 0, 0.52);
    }
}

@media (min-width: 782px) and (prefers-reduced-motion: reduce) {

    .home .hero-section-home .wp-block-heading,
    .home .hero-section-home::before,
    .home .hero-section-home::after,
    .home .hero-section-home .hero-content>.wp-block-group,
    .home .hero-section-home .hero-content>.wp-block-group::before,
    .home .hero-section-home p.has-accent-1-color,
    .home .hero-section-home p.has-accent-1-color::after,
    .home .hero-section-home .wp-block-heading::before,
    .home .hero-section-home .wp-block-heading::after {
        animation: none !important;
    }

    .home .hero-section-home .wp-block-heading {
        opacity: 1 !important;
        transform: none !important;
    }

    .home .hero-section-home p.has-accent-1-color {
        opacity: 1 !important;
        transform: none !important;
    }
}

@keyframes home-hero-aurora {
    0% {
        transform: translate3d(-1.5%, -1.5%, 0) scale(1);
        opacity: 0.72;
    }

    100% {
        transform: translate3d(2.5%, 2%, 0) scale(1.06);
        opacity: 0.95;
    }
}

/* ============================================
   Art Page Filters - Soft Light + Pink Accent
   ============================================ */
.art-filter-section.rich-dark-bg {
    background: linear-gradient(180deg, rgba(9, 9, 11, 0.96) 0%, rgba(5, 5, 8, 0.96) 100%) !important;
    border-bottom-color: rgba(255, 3, 254, 0.22) !important;
}

.art-filter-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(48% 62% at 10% 14%, rgba(255, 3, 254, 0.2) 0%, rgba(255, 3, 254, 0.08) 36%, rgba(255, 3, 254, 0) 74%),
        radial-gradient(54% 68% at 90% 88%, rgba(255, 3, 254, 0.2) 0%, rgba(255, 3, 254, 0.08) 34%, rgba(255, 3, 254, 0) 76%),
        radial-gradient(ellipse at center,
            rgba(255, 3, 254, 0.14) 0%,
            rgba(255, 3, 254, 0.08) 38%,
            rgba(255, 3, 254, 0) 74%);
    z-index: 0;
}

/* ============================================
   404 Page - Black + Pink
   ============================================ */
.error-404-page {
    min-height: calc(var(--lara-vh, 100vh) - var(--lara-header-offset, 73px));
    background:
        radial-gradient(54% 62% at 14% 18%, rgba(255, 3, 254, 0.18) 0%, rgba(255, 3, 254, 0) 70%),
        radial-gradient(52% 64% at 86% 84%, rgba(255, 3, 254, 0.14) 0%, rgba(255, 3, 254, 0) 72%),
        linear-gradient(180deg, #07060b 0%, #090611 52%, #07060b 100%);
    display: grid;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 5rem) 1rem;
}

.error-404-shell {
    width: 100%;
}

.error-404-card {
    position: relative;
    border: 1px solid rgba(255, 3, 254, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 3, 254, 0.14),
        0 24px 56px rgba(0, 0, 0, 0.44);
    background: linear-gradient(180deg, rgba(11, 9, 16, 0.86) 0%, rgba(9, 7, 14, 0.68) 100%);
    padding: clamp(2rem, 5vw, 4rem) clamp(1.1rem, 4vw, 3rem);
}

.error-404-code {
    margin: 0;
    font-size: clamp(4.5rem, 16vw, 9rem) !important;
    line-height: 0.95;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: #ff8afe !important;
    text-shadow:
        0 0 26px rgba(255, 3, 254, 0.42),
        0 16px 34px rgba(0, 0, 0, 0.5);
}

.error-404-title {
    margin: 0.65rem 0 0;
    font-size: clamp(1.35rem, 3.4vw, 2.1rem) !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff !important;
}

.error-404-text {
    margin: 1.1rem auto 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1rem, 1.4vw, 1.08rem);
    line-height: 1.65;
}

.error-404-actions {
    margin-top: clamp(1.2rem, 3vw, 2.2rem);
    gap: 0.85rem !important;
}

.error-404-primary .wp-block-button__link,
.error-404-secondary .wp-block-button__link {
    min-width: 220px;
}

.error-404-primary .wp-block-button__link {
    border-color: rgba(255, 3, 254, 0.9) !important;
    background: linear-gradient(180deg, rgba(255, 3, 254, 0.36) 0%, rgba(214, 0, 218, 0.26) 100%) !important;
    box-shadow: 0 0 0 1px rgba(255, 3, 254, 0.34) inset, 0 10px 28px rgba(255, 3, 254, 0.3) !important;
}

.error-404-secondary .wp-block-button__link {
    border-color: rgba(255, 255, 255, 0.58) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

@media (max-width: 781px) {

    .error-404-actions .wp-block-button,
    .error-404-actions .wp-block-button__link {
        width: 100%;
    }
}

.art-filter-section::after {
    content: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.76;
    background-image:
        radial-gradient(circle at 10% 82%, rgba(255, 3, 254, 0.62) 0 2.7px, transparent 3.8px),
        radial-gradient(circle at 22% 74%, rgba(255, 3, 254, 0.5) 0 2.2px, transparent 3.3px),
        radial-gradient(circle at 34% 88%, rgba(255, 3, 254, 0.58) 0 2.8px, transparent 4px),
        radial-gradient(circle at 47% 78%, rgba(255, 3, 254, 0.46) 0 2.1px, transparent 3.2px),
        radial-gradient(circle at 59% 86%, rgba(255, 3, 254, 0.54) 0 2.5px, transparent 3.7px),
        radial-gradient(circle at 71% 80%, rgba(255, 3, 254, 0.48) 0 2.3px, transparent 3.4px),
        radial-gradient(circle at 83% 90%, rgba(255, 3, 254, 0.6) 0 2.9px, transparent 4.1px),
        radial-gradient(circle at 92% 76%, rgba(255, 3, 254, 0.42) 0 2px, transparent 3px);
    filter: drop-shadow(0 0 6px rgba(255, 3, 254, 0.3));
    animation: none;
}

@keyframes art-filter-particles-rise {
    0% {
        transform: translate3d(-1.2%, 13%, 0) scale(0.98);
        opacity: 0.42;
    }

    18% {
        transform: translate3d(1.3%, 7%, 0) scale(1.02);
        opacity: 0.58;
    }

    37% {
        transform: translate3d(-1.1%, 2%, 0) scale(1);
        opacity: 0.74;
    }

    61% {
        transform: translate3d(1.6%, -5%, 0) scale(1.03);
        opacity: 0.86;
    }

    100% {
        transform: translate3d(-1.5%, -16%, 0) scale(0.99);
        opacity: 0.5;
    }
}

.art-filter-section .mb-6>span {
    color: #ff03fe !important;
    opacity: 0.96;
    font-size: clamp(0.82rem, 1.05vw, 1rem) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.16em !important;
    text-shadow: 0 0 10px rgba(255, 3, 254, 0.26);
}

.art-side-nav {
    position: fixed;
    left: clamp(12px, 2vw, 26px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 72;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 3, 254, 0.35);
    background: linear-gradient(180deg, rgba(10, 10, 16, 0.9) 0%, rgba(8, 8, 13, 0.82) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 3, 254, 0.12),
        0 16px 36px rgba(0, 0, 0, 0.44);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
}

.art-side-nav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.art-side-nav__item {
    display: block;
    min-width: 126px;
    padding: 0.58rem 0.72rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.art-side-nav__item:hover,
.art-side-nav__item:focus-visible {
    color: #ffffff;
    border-color: rgba(255, 3, 254, 0.52);
    background: rgba(255, 3, 254, 0.14);
    box-shadow: 0 0 0 1px rgba(255, 3, 254, 0.2) inset;
    outline: none;
}

.art-side-nav__item.is-active {
    color: #ffffff;
    border-color: rgba(255, 3, 254, 0.84);
    background: rgba(255, 3, 254, 0.2);
    box-shadow:
        0 0 0 1px rgba(255, 3, 254, 0.28) inset,
        0 0 18px rgba(255, 3, 254, 0.24);
}

/* ── Available button — 6th side-nav item, gold variant ── */
.art-side-nav__available {
    /* Reset <button> specifics */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;

    /* Gold colour scheme over the shared pill foundation */
    color: rgba(197, 160, 89, 0.85);
    border-color: rgba(197, 160, 89, 0.28);
    background: rgba(197, 160, 89, 0.05);

    display: flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.5rem;

    /* Idle breathing glow — soft invitation to click */
    animation: lara-available-idle-pulse 3.6s ease-in-out infinite;
}

.art-side-nav__available:hover,
.art-side-nav__available:focus-visible {
    color: #C5A059;
    border-color: rgba(197, 160, 89, 0.6);
    background: rgba(197, 160, 89, 0.12);
    box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.2) inset;
    outline: none;
}

/* Active state (aria-pressed=true) */
.art-side-nav__available.filter-chip-available-active,
.art-side-nav__available[aria-pressed="true"] {
    color: #C5A059;
    border-color: rgba(197, 160, 89, 0.85);
    background: rgba(197, 160, 89, 0.18);
    box-shadow:
        0 0 0 1px rgba(197, 160, 89, 0.28) inset,
        0 0 14px rgba(197, 160, 89, 0.22);
    animation: lara-available-ring 2.4s ease infinite;
}

.art-side-nav__available .filter-available-icon {
    font-size: 0.9rem !important;
    line-height: 1;
    color: inherit;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.art-side-nav__available:hover .filter-available-icon {
    transform: scale(1.15);
}


.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5 {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 3, 254, 0.2) !important;
    background: rgba(14, 14, 19, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5::before {
    content: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.48;
    background-image:
        radial-gradient(circle at 14% 92%, rgba(255, 3, 254, 0.55) 0 1.6px, transparent 2.4px),
        radial-gradient(circle at 28% 86%, rgba(255, 3, 254, 0.32) 0 1.3px, transparent 2.1px),
        radial-gradient(circle at 42% 90%, rgba(255, 3, 254, 0.44) 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 56% 84%, rgba(255, 3, 254, 0.26) 0 1.1px, transparent 1.9px),
        radial-gradient(circle at 70% 94%, rgba(255, 3, 254, 0.5) 0 1.7px, transparent 2.5px),
        radial-gradient(circle at 84% 88%, rgba(255, 3, 254, 0.36) 0 1.3px, transparent 2.1px);
    animation: none;
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f2f2f7 !important;
    min-height: 142px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 782px) {
    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a:first-child {
        border-top-left-radius: 16px !important;
        border-bottom-left-radius: 16px !important;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a:last-child {
        border-top-right-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
    }
}

@keyframes art-filter-particles-rise-fine {
    0% {
        transform: translate3d(0, 14%, 0);
        opacity: 0.22;
    }

    40% {
        transform: translate3d(1.4%, 4%, 0);
        opacity: 0.46;
    }

    75% {
        transform: translate3d(-1.2%, -6%, 0);
        opacity: 0.4;
    }

    100% {
        transform: translate3d(1.1%, -14%, 0);
        opacity: 0.2;
    }
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a h3 {
    color: #f7f7fa !important;
    font-size: clamp(1.28rem, 1.5vw, 1.85rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.45em !important;
    flex-wrap: wrap !important;
}

/* Artwork count badge inside each filter chip */
.filter-chip-count {
    font-family: 'Manrope', sans-serif;
    font-size: 0.52em;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(197, 160, 89, 0.65);
    background: rgba(197, 160, 89, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 20px;
    padding: 0.15em 0.55em 0.18em;
    line-height: 1.4;
    vertical-align: middle;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
    pointer-events: none;
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a:hover .filter-chip-count {
    color: rgba(255, 3, 254, 0.8);
    background: rgba(255, 3, 254, 0.08);
    border-color: rgba(255, 3, 254, 0.3);
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a.art-mobile-filter-active .filter-chip-count {
    color: #ff03fe;
    background: rgba(255, 3, 254, 0.12);
    border-color: rgba(255, 3, 254, 0.45);
}

/* ── Available Works pill (label row, right-aligned) ── */
.filter-available-chip {
    /* Reset */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    outline: none;
    border: none;
    cursor: pointer;

    /* Pill shape */
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.85em 0.35em 0.6em;
    border-radius: 999px;

    /* Gold ghost style */
    background: rgba(197, 160, 89, 0.06);
    box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.28);
    color: rgba(197, 160, 89, 0.8);

    transition: background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
    white-space: nowrap;
}

.filter-available-chip:hover {
    background: rgba(197, 160, 89, 0.14);
    box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.55);
    color: #C5A059;
}

.filter-available-icon {
    font-size: 0.95rem !important;
    line-height: 1;
    color: inherit;
    transition: transform 0.25s ease;
}

.filter-available-chip:hover .filter-available-icon {
    transform: scale(1.15);
}

.filter-available-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
    line-height: 1;
}

/* Active state — filter is live */
.filter-chip-available-active {
    background: rgba(197, 160, 89, 0.2) !important;
    box-shadow: 0 0 0 1.5px #C5A059, 0 0 10px rgba(197, 160, 89, 0.25) !important;
    color: #C5A059 !important;
    animation: lara-available-ring 2.4s ease infinite;
}

@keyframes lara-available-ring {

    0%,
    100% {
        box-shadow: 0 0 0 1.5px #C5A059, 0 0 0 rgba(197, 160, 89, 0);
    }

    50% {
        box-shadow: 0 0 0 1.5px #C5A059, 0 0 14px rgba(197, 160, 89, 0.3);
    }
}

/* Idle breathing glow — subtle, slower, lower opacity than the active ring */
@keyframes lara-available-idle-pulse {

    0%,
    100% {
        box-shadow: 0 0 6px 0px rgba(197, 160, 89, 0);
    }

    50% {
        box-shadow: 0 0 14px 3px rgba(197, 160, 89, 0.22);
    }
}

/* Count badge on the pill */
.filter-available-chip .filter-chip-count {
    font-size: 0.65em;
    background: rgba(197, 160, 89, 0.12);
    border-color: rgba(197, 160, 89, 0.25);
    color: inherit;
}

.filter-chip-available-active .filter-chip-count {
    background: rgba(197, 160, 89, 0.2);
    border-color: rgba(197, 160, 89, 0.5);
    color: #C5A059;
}

/* ── Available Works — gallery item hiding ──────────── */
@supports selector(:has(*)) {
    .filter-available-active .art-gallery-item-vertical:not(:has(.status-available)) {
        display: none !important;
    }

    /* Collapse category hero images when the whole section has no available works */
    .filter-available-active .art-category-section:not(:has(.status-available)) .art-category-featured-image {
        display: none !important;
    }
}

/* JS-class fallback for browsers without :has() */
.art-gallery-item-vertical.lara-unavailable-hidden {
    display: none !important;
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a p {
    color: rgba(255, 255, 255, 0.54) !important;
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 3, 254, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 3, 254, 0.2);
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a:hover h3 {
    color: #ff03fe !important;
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a.art-mobile-filter-active {
    background: rgba(255, 3, 254, 0.1) !important;
    border-color: #ff03fe !important;
    box-shadow: 0 0 0 2px rgba(255, 3, 254, 0.2), inset 0 0 0 1px rgba(255, 3, 254, 0.25);
}

.art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a.art-mobile-filter-active h3 {
    color: #ff03fe !important;
}

.about-confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10060;
}

.art-filter-section .mobile-filter-swipe-hint,
.art-filter-section .animate-scroll-cue .material-symbols-outlined {
    color: rgba(255, 3, 254, 0.75) !important;
}

@media (max-width: 1024px) {
    .art-filter-section {
        position: -webkit-sticky;
        position: sticky !important;
        top: var(--lara-header-offset, 73px);
        z-index: 60;
        overflow: visible !important;
    }

    body.admin-bar .art-filter-section {
        top: calc(var(--lara-header-offset, 73px) + 46px);
    }
}

@media (max-width: 781px) {
    .art-filter-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
        border-bottom-color: rgba(255, 3, 254, 0.14) !important;
        background: rgba(8, 8, 11, 0.96) !important;
        backdrop-filter: blur(8px);
    }

    .art-filter-section::before {
        background:
            radial-gradient(42% 58% at 8% 10%, rgba(255, 3, 254, 0.11) 0%, rgba(255, 3, 254, 0.04) 36%, rgba(255, 3, 254, 0) 74%),
            radial-gradient(46% 62% at 92% 88%, rgba(255, 3, 254, 0.11) 0%, rgba(255, 3, 254, 0.04) 34%, rgba(255, 3, 254, 0) 76%),
            radial-gradient(ellipse at center, rgba(255, 3, 254, 0.07) 0%, rgba(255, 3, 254, 0.03) 38%, rgba(255, 3, 254, 0) 74%);
    }

    .art-filter-section .mb-6 {
        margin-bottom: 0.55rem !important;
    }

    .art-filter-section .mb-6>span {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        line-height: 1.35 !important;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 0.5rem !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 2px 0 4px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5::-webkit-scrollbar {
        display: none;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5 {
        scrollbar-width: none;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        padding: 0.7rem 1rem !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 3, 254, 0.36) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        text-decoration: none !important;
        scroll-snap-align: start;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a.art-mobile-filter-active {
        border-color: #ff03fe !important;
        background: rgba(255, 3, 254, 0.16) !important;
        box-shadow: 0 0 0 2px rgba(255, 3, 254, 0.22);
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a.art-mobile-filter-active h3 {
        color: #ff03fe !important;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a h3 {
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5>a p {
        display: none !important;
    }

    .art-filter-section .mt-4 {
        margin-top: 0.45rem !important;
    }

    .art-filter-section .desktop-scroll-cue {
        display: none !important;
    }

    .art-filter-section .mobile-filter-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        margin-top: 0.5rem;
        font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
        font-size: 0.66rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 3, 254, 0.72);
    }

    .art-filter-section .mobile-filter-swipe-hint .material-symbols-outlined {
        font-size: 15px !important;
        opacity: 0.7;
    }

    .art-filter-section .animate-scroll-cue .material-symbols-outlined {
        font-size: 18px !important;
        opacity: 0.5;
    }

    body.art-mobile-tabs-enabled .art-category-section {
        display: none !important;
    }

    body.art-mobile-tabs-enabled .art-category-section.is-mobile-active {
        display: block !important;
    }

    .art-category-section .art-category-featured-image {
        display: block !important;
    }

    .art-category-section {
        padding-top: var(--wp--preset--spacing--40) !important;
    }
}

@media (max-width: 1024px) {
    .art-side-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-filter-section::after {
        animation: none !important;
    }

    .art-filter-section .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5::before {
        animation: none !important;
    }

    .art-side-nav__available,
    .art-side-nav__available[aria-pressed="true"],
    .art-side-nav__available.filter-chip-available-active {
        animation: none !important;
    }
}

@media (hover: none),
(pointer: coarse) {

    .art-gallery-item-vertical,
    .art-gallery-image-full {
        transition: none !important;
    }

    .art-gallery-item-vertical:hover {
        transform: none;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
        border-color: rgba(197, 160, 89, 0.35);
    }

    .art-gallery-item-vertical:hover .art-gallery-image-full {
        transform: none;
    }
}

@media (min-width: 782px) {
    .art-filter-section .mobile-filter-swipe-hint {
        display: none !important;
    }
}

/* ============================================
   Art Archive – Mobile Density Optimisation
   Overrides WP preset spacing tokens baked
   into inline styles; desktop is untouched.
   ============================================ */
@media (max-width: 640px) {

    /* ── Section-level vertical padding ── */
    /* WP inline: padding-top/bottom: var(--wp--preset--spacing--80) (~80-96px) → 32px */
    .art-category-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* ── Featured hero image: smaller height + tighter bottom gap ── */
    /* WP inline: min-height: 55vh + margin-bottom: var(--wp--preset--spacing--50) */
    .art-category-featured-image {
        min-height: 38vh !important;
        margin-bottom: 1.25rem !important;
    }

    /* ── Gallery wrapper horizontal padding ── */
    /* WP inline: padding-left/right: var(--wp--preset--spacing--50) */
    .art-category-section>.wp-block-group[style*="padding-left"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* ── CTA block top padding ── */
    /* WP inline: padding-top: var(--wp--preset--spacing--60) (~60-72px) → 1.25rem */
    .art-category-cta {
        padding-top: 1.25rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* ── CTA inner card: tighter horizontal padding ── */
    .art-category-cta .wp-block-group.has-border-color {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .art-category-cta .wp-block-buttons {
        margin-top: 0.75rem !important;
    }

    /* ── Filter bar: tighter vertical chrome ── */
    .art-filter-section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Label above filter grid */
    .art-filter-section .mb-6 {
        margin-bottom: 0.5rem !important;
    }

    /* Filter tab height: reduce min-h from 120px → 60px */
    .art-filter-section .grid a {
        min-height: 60px !important;
        padding: 0.75rem 0.5rem !important;
    }

    /* Scroll cue below filter — hide on mobile to save space */
    .art-filter-section .desktop-scroll-cue {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SEARCH OVERLAY
   ═══════════════════════════════════════════════════════════════ */

/* Header trigger button — Direction 1+2: gold accent, no box, editorial label */
.lara-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    position: relative;
    transition: color 0.22s ease;
    line-height: 1;
}



.lara-search-trigger:hover,
.lara-search-trigger:focus-visible {
    color: #C5A059;
    outline: none;
}

/* Icon inherits color from button */
.lara-search-trigger svg {
    flex-shrink: 0;
    transition: color 0.22s ease;
}

/* Hide search in the mobile header — matches the hamburger breakpoint */
@media (max-width: 1023px) {
    .lara-search-trigger {
        display: none !important;
    }
}



/* Uppercase Manrope label — same DNA as nav links */
.lara-search-label {
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* Overlay backdrop */
.lara-search-overlay {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(4rem, 10vh, 9rem);
    padding-inline: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.lara-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lara-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 2, 8, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: default;
}

/* Panel */
.lara-search-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    background: linear-gradient(180deg, rgba(24, 14, 32, 0.98) 0%, rgba(14, 7, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 3, 254, 0.08) inset;
    transform: translateY(-8px);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.lara-search-overlay.is-open .lara-search-panel {
    transform: translateY(0);
}

/* Input row */
.lara-search-input-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lara-search-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
}

.lara-search-input {
    flex: 1;
    background: #fff;
    border: none;
    outline: none;
    color: #111;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    caret-color: #ff03fe;
    border-radius: 3px;
    padding: 0.15rem 0.25rem;
}

.lara-search-input::placeholder {
    color: rgba(0, 0, 0, 0.38);
}

/* Chrome autofill override */
.lara-search-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px rgba(24, 14, 32, 0.98) inset;
    -webkit-text-fill-color: #fff;
}

.lara-search-close {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0.32rem;
    line-height: 1.6;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.lara-search-close:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
}

/* Results list */
.lara-search-results {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    max-height: 56vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lara-search-results::-webkit-scrollbar {
    width: 4px;
}

.lara-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.lara-search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 3, 254, 0.25);
    border-radius: 2px;
}

.lara-search-result-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.84);
    transition: background 0.14s ease;
    border-left: 2px solid transparent;
}

.lara-search-result-item:hover,
.lara-search-result-item.is-active {
    background: rgba(255, 3, 254, 0.06);
    border-left-color: #ff03fe;
    color: #fff;
}

.lara-search-result-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 3px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

.lara-search-result-thumb-placeholder {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 3px;
    background: rgba(255, 3, 254, 0.08);
    border: 1px solid rgba(255, 3, 254, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.lara-search-result-body {
    flex: 1;
    min-width: 0;
}

.lara-search-result-title {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.lara-search-result-category {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 0.3rem;
}

.lara-search-result-item.is-active .lara-search-result-category {
    color: rgba(255, 3, 254, 0.7);
}

.lara-search-result-arrow {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    transition: color 0.14s ease;
}

.lara-search-result-item.is-active .lara-search-result-arrow,
.lara-search-result-item:hover .lara-search-result-arrow {
    color: rgba(255, 3, 254, 0.55);
}

/* Empty / loading states */
.lara-search-empty {
    padding: 1.4rem 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.35);
}

/* Hint bar */
.lara-search-hint {
    padding: 0.52rem 1rem;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0;
    letter-spacing: 0.04em;
}

.lara-search-hint kbd {
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    padding: 0 0.25rem;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
}

/* Body scroll lock */
body.lara-search-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .lara-search-kbd {
        display: none;
        /* Save space on mobile; / key still works */
    }

    .lara-search-overlay {
        padding-top: 3.5rem;
        align-items: flex-start;
    }

    .lara-search-panel {
        max-width: 100%;
        border-radius: 4px;
    }
}