/* ═══════════════════════════════════════════════════════
   QualeG — Grid-based architectural frontend
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --border: #000;
    --bg: #fff;
    --text: #000;
    --text-muted: #555;
    --cell-size: 120px; /* 1440 / 12 = 120 → square cells */
    --grid-cols: 12;
    --grid-max-width: 1440px;
    --grid-border-width: 1px;
    --header-height: 80px;
}

/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration-color: currentColor;
}

    a:hover {
        opacity: .8;
    }

/* Override Bootstrap's blue links only in our content areas */
.fe-content a,
.fe-page-header a,
.fe-meta-item a,
.cell-text a,
.cell-form a,
.info-page a,
.info-breadcrumb a,
article a,
.staff-popover a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

    .fe-content a:hover,
    article a:hover,
    .info-page a:hover {
        color: var(--text-muted);
        opacity: 1;
    }

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

/* Hide reCAPTCHA v3 badge */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Focus ring (WCAG) */
:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 .5em;
}

.fe-h1 {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fe-h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.fe-h3 {
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Pre-Home ── */
.prehome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem 1.5rem;
    text-align: center;
}

.prehome-hero {
    max-width: 800px;
    width: 100%;
}

.prehome-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.prehome-social {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.prehome-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    text-decoration: none;
    font-size: .8rem;
    transition: opacity .15s;
}

.prehome-social a:hover {
    opacity: .5;
}

.prehome-disclaimer {
    margin-top: 1.5rem;
    font-size: .7rem;
    color: var(--text-muted);
    max-width: 600px;
    line-height: 1.5;
}

/* Hide standard footer on pre-home */
.prehome-page .site-footer {
    display: none;
}

/* Hide header logo + line on grid pages when configured */
.no-header-logo .site-logo {
    display: none;
}

.no-header-logo .site-header::after {
    display: none;
}

.no-header-logo .site-header {
    border-bottom: 1px solid var(--border);
    height: 60px;
}

/* ── Filtered product cards (classic view) ── */
.project-card {
    position: relative;
    overflow: hidden;
}

.project-card .project-image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    will-change: transform;
    transition: transform .3s;
}

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

.project-card .card-clip-path {
    background: var(--bg);
}

/* ── Header ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg);
    height: var(--header-height);
}

.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    height: 1px;
    background: var(--border);
}

.site-header-inner {
    max-width: var(--grid-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1.5rem;
    position: relative;
}

.site-logo {
    position: absolute;
    left: 1.5rem;
    bottom: 0;
}

.site-logo img {
    height: 4.5rem;
    max-width: 260px;
    object-fit: contain;
    vertical-align: bottom;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

    .site-nav a,
    .site-nav .nav-dropdown-toggle {
        font-size: .85rem;
        font-weight: 500;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text);
        transition: opacity .15s;
    }

        .site-nav a:hover,
        .site-nav .nav-dropdown-toggle:hover {
            opacity: .5;
        }

.site-nav-actions {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ── Nav dropdown (level 2) ── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    cursor: pointer;
    padding-bottom: .75rem;
    margin-bottom: -.75rem;
}
    /* Small chevron-down after parent toggle */
    .nav-dropdown-toggle::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: .35rem;
        vertical-align: .1em;
        border-top: .28em solid currentColor;
        border-right: .28em solid transparent;
        border-left: .28em solid transparent;
        opacity: .35;
        transition: transform .2s, opacity .2s;
    }

.nav-dropdown:hover > .nav-dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: .7;
}

/* Level-2 panel */
.nav-dropdown-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    min-width: 200px;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: .35rem 0;
    z-index: 1050;
    transition: opacity .15s, transform .15s, visibility .15s;
    transform: translateY(4px);
    list-style: none;
    margin: 0;
}
    /* Bridge so hover doesn't break when moving to dropdown */
    .nav-dropdown-menu::before {
        content: '';
        position: absolute;
        top: -1rem;
        left: 0;
        right: 0;
        height: 1rem;
    }

.nav-dropdown:hover > .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Dropdown items (level 2 + 3) */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s;
    line-height: 1.4;
    cursor: pointer;
}

    .nav-dropdown-item:hover {
        background: #f5f5f5;
        color: var(--text);
    }

    .nav-dropdown-item i {
        width: 1rem;
        text-align: center;
        font-size: .7rem;
        opacity: .4;
        flex-shrink: 0;
    }

/* ── Sub-dropdown (level 3) ── */
.nav-dropdown-sub {
    position: relative;
}

/* Small chevron-right for sub-toggle — plain CSS triangle, no FontAwesome */
.nav-dropdown-sub-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: auto;
    padding-left: .5rem;
    border-top: .25em solid transparent;
    border-bottom: .25em solid transparent;
    border-left: .25em solid currentColor;
    opacity: .35;
}

.nav-dropdown-submenu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 100%;
    top: -.35rem;
    min-width: 180px;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: .35rem 0;
    z-index: 1051;
    transition: opacity .15s, transform .15s, visibility .15s;
    transform: translateX(4px);
    list-style: none;
    margin: 0;
}
    /* Bridge for hover */
    .nav-dropdown-submenu::before {
        content: '';
        position: absolute;
        top: 0;
        left: -1rem;
        bottom: 0;
        width: 1rem;
    }

.nav-dropdown-sub:hover > .nav-dropdown-submenu {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.nav-dropdown-submenu .nav-dropdown-item {
    font-size: .75rem;
    padding: .4rem 1rem;
}

/* ── Grid System (Core) ── */

/* Wrapper: fullscreen, no max-width */
.grid-page-wrapper {
    width: 100%;
}

/* The grid: 12 columns, each cell is a perfect square (width = 100vw/12) */
/* Grid lines are drawn via cell/filler borders (single system = no sub-pixel mismatch) */
.grid-page {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-rows set inline from Razor (based on widget positions) */
    grid-auto-rows: calc(100vw / 12); /* fallback: square cells */
    background: var(--bg);
    position: relative;
    min-height: calc((100vw / 12) * 8);
    border-left: var(--grid-border-width) solid var(--border);
    border-top: var(--grid-border-width) solid var(--border);
}

.grid-cell {
    background: var(--bg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: var(--grid-border-width) solid var(--border);
    border-bottom: var(--grid-border-width) solid var(--border);
    /* Position via CSS custom properties (set inline from Razor) */
    grid-column: var(--gc) / span var(--gcs);
    grid-row: var(--gr) / span var(--grs);
    /* Performance: isolate repaints per cell */
    contain: layout style paint;
}

/* Filler cells: fill empty grid positions to draw lines */
.grid-filler {
    border-right: var(--grid-border-width) solid var(--border);
    border-bottom: var(--grid-border-width) solid var(--border);
}

/* Cell content fills the cell */
.grid-cell-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Fallback: full-width stacked widget (no grid data) */
.grid-cell--full {
    grid-column: 1 / -1;
}

/* Empty grid — shown when no widgets are placed yet */
.grid-page--empty {
    min-height: calc((100vw / 12) * 10);
}

/* ── Content scaling: text sizes based on vw so they shrink with cells ── */
.grid-cell .cell-text {
    font-size: clamp(0.6rem, 1.1vw, 1rem);
    line-height: 1.4;
}

    .grid-cell .cell-text h1,
    .grid-cell .cell-text h2,
    .grid-cell .cell-text h3 {
        font-size: clamp(0.7rem, 1.6vw, 1.5rem);
        margin-bottom: .3em;
    }

.grid-cell .cell-overlay h2 {
    font-size: clamp(0.8rem, 2vw, 2rem);
}

.grid-cell .cell-overlay p {
    font-size: clamp(0.55rem, 1vw, 0.9rem);
}

.grid-cell .cell-form input,
.grid-cell .cell-form textarea,
.grid-cell .cell-form button {
    font-size: clamp(0.55rem, 1vw, 0.85rem);
}

.grid-cell .cell-form .mb-2 {
    margin-bottom: clamp(0.2rem, 0.5vw, 0.5rem) !important;
}

.grid-cell .cell-form {
    padding: clamp(0.5rem, 1.5vw, 1.5rem);
}

.grid-cell .cell-text {
    padding: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* Widget title overlay — shown only when title is set (non-text widgets)
   Desktop: absolute bottom overlay on the cell
   Mobile: becomes static heading above content (see mobile section) */
.grid-cell .cell-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.5rem 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    color: #fff;
    font-size: clamp(0.65rem, 1.2vw, 1rem);
    font-weight: 600;
    line-height: 1.3;
    pointer-events: none;
}

/* Form cells: title at top (not overlay) even on desktop */
.grid-cell:has(.cell-form) .cell-title-overlay {
    position: static;
    background: none;
    color: var(--text);
    font-size: clamp(0.6rem, 1vw, .85rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: clamp(0.4rem, 1vw, 1rem) clamp(0.5rem, 1.5vw, 1.5rem) 0;
}

/* Text widget heading (h4 inside cell-text) */
.grid-cell .cell-text-heading {
    font-size: clamp(0.75rem, 1.5vw, 1.25rem);
    font-weight: 700;
    margin: 0 0 0.4em 0;
    line-height: 1.2;
}

/* ── Mobile: griglia architettonica ── */
@media (max-width: 768px) {
    .grid-page {
        --mg: 20px; /* margin & gap */
        display: flex !important;
        flex-wrap: wrap;
        gap: var(--mg);
        min-height: auto;
        padding: var(--mg);
        border: none;
        position: relative;
        background: #fff;
    }

    .grid-filler {
        display: none;
    }

    /* Each cell: black border box — overflow VISIBLE for grid lines */
    .grid-cell {
        grid-column: unset !important;
        grid-row: unset !important;
        order: var(--mobile-order, 0);
        width: calc(50% - var(--mg) / 2);
        min-height: auto;
        height: auto;
        border-radius: 0;
        overflow: visible !important;
        outline: none;
        border: 1px solid #000;
        background: var(--bg);
        position: relative;
    }

    /* Disable desktop containment on mobile (allows grid lines to overflow) */
    .grid-cell {
        contain: none !important;
    }

    /* Content clipping moves to inner elements */
    .grid-cell > a,
    .grid-cell > div,
    .grid-cell > img {
        overflow: hidden;
    }

    /* Grid connector lines from corners — using pseudo-elements with gradient backgrounds */
    .grid-cell::before,
    .grid-cell::after {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 2;
    }

    /* ::before = horizontal lines from all 4 corners going left & right */
    .grid-cell::before {
        top: -1px;
        bottom: -1px;
        left: calc(-1 * var(--mg));
        right: calc(-1 * var(--mg));
        background:
            /* top line extending left & right */
            linear-gradient(#000, #000) top left / var(--mg) 1px no-repeat,
            linear-gradient(#000, #000) top right / var(--mg) 1px no-repeat,
            /* bottom line extending left & right */
            linear-gradient(#000, #000) bottom left / var(--mg) 1px no-repeat,
            linear-gradient(#000, #000) bottom right / var(--mg) 1px no-repeat;
    }

    /* ::after = vertical lines from all 4 corners going up & down */
    .grid-cell::after {
        left: -1px;
        right: -1px;
        top: calc(-1 * var(--mg));
        bottom: calc(-1 * var(--mg));
        background:
            /* left-top going up, left-bottom going down */
            linear-gradient(#000, #000) top left / 1px var(--mg) no-repeat,
            linear-gradient(#000, #000) bottom left / 1px var(--mg) no-repeat,
            /* right-top going up, right-bottom going down */
            linear-gradient(#000, #000) top right / 1px var(--mg) no-repeat,
            linear-gradient(#000, #000) bottom right / 1px var(--mg) no-repeat;
    }

    /* First cell: no lines going up */
    .grid-cell:first-child::after {
        top: 0;
    }

    /* Wide cells (≥6 cols on desktop) → full width */
    .grid-cell--wide {
        width: 100% !important;
    }

    /* Admin-set full-width */
    .grid-cell--mobile-full {
        width: 100% !important;
    }

    /* Text + form cells always full-width (readability) */
    .grid-cell:has(.cell-text),
    .grid-cell:has(.cell-form) {
        width: 100% !important;
    }

    /* Card cells: full-width if marked full */
    .grid-cell--mobile-full:has(.cell-card-single) {
        width: 100% !important;
    }

    /* ── Asymmetric rhythm: alternate card image ratios ── */
    .grid-cell:nth-child(3n+1) .cell-card-single-img,
    .grid-cell:nth-child(3n+1) .cell-card-h-img {
        aspect-ratio: 4/3;
    }

    .grid-cell:nth-child(3n+2) .cell-card-single-img,
    .grid-cell:nth-child(3n+2) .cell-card-h-img {
        aspect-ratio: 1/1;
    }

    .grid-cell:nth-child(3n) .cell-card-single-img,
    .grid-cell:nth-child(3n) .cell-card-h-img {
        aspect-ratio: 16/10;
    }

    /* ── Title overlay → section heading on mobile ── */
    .grid-cell .cell-title-overlay {
        position: static;
        background: none;
        color: var(--text);
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding: 1.25rem 1.25rem .5rem;
        line-height: 1.2;
        pointer-events: auto;
    }

    /* ── Text cells ── */
    .grid-cell .cell-text {
        font-size: .95rem;
        padding: 1.25rem;
        height: auto;
        overflow-y: visible;
        line-height: 1.7;
    }

    .grid-cell .cell-text-heading {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: .6em;
    }

    .grid-cell .cell-text h1 {
        font-size: 1.5rem;
    }

    .grid-cell .cell-text h2 {
        font-size: 1.3rem;
    }

    .grid-cell .cell-text h3 {
        font-size: 1.1rem;
    }

    .grid-cell .cell-text p {
        margin-bottom: 1em;
    }

    /* ── Image cells: always square on mobile ── */
    .grid-cell img.cell-cover {
        aspect-ratio: 3/2;
        height: auto;
    }

    /* Alternate image-only cells: varied proportions for grid feel */
    .grid-cell:nth-child(odd):has(img.cell-cover) {
        aspect-ratio: auto;
    }
    .grid-cell:nth-child(odd) img.cell-cover {
        aspect-ratio: 1/1;
    }

    /* ── Gallery grid: 2 columns ── */
    .grid-cell .cell-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
    }

        .grid-cell .cell-gallery img {
            aspect-ratio: 1;
            height: auto;
        }

    /* ── Gallery slideshow ── */
    .grid-cell .cell-gallery--slideshow {
        aspect-ratio: 16/10;
        height: auto;
    }

        .grid-cell .cell-gallery--slideshow img {
            position: absolute;
        }

    /* ── Form ── */
    .grid-cell .cell-form {
        padding: 1.25rem;
    }

        .grid-cell .cell-form input,
        .grid-cell .cell-form textarea {
            font-size: 1rem;
            padding: .75rem;
            border: 1px solid var(--border);
            font-family: 'Space Grotesk', sans-serif;
            width: 100%;
        }

        .grid-cell .cell-form button {
            font-size: .9rem;
            padding: .75rem 1.5rem;
        }

        .grid-cell .cell-form .mb-2 {
            margin-bottom: .75rem !important;
        }

    /* ── Video/Map iframes ── */
    .grid-cell iframe {
        aspect-ratio: 16/9;
        height: auto;
    }

    /* ── Overlay text on images ── */
    .grid-cell .cell-overlay {
        padding: 1.25rem;
    }

        .grid-cell .cell-overlay h2 {
            font-size: 1.3rem;
        }

        .grid-cell .cell-overlay p {
            font-size: .9rem;
        }

    /* ── Empty spacer cells hidden ── */
    .grid-cell--empty {
        display: none;
    }

    /* ── Hidden on mobile ── */
    .grid-cell--mobile-hidden {
        display: none !important;
    }

    /* ── Content cells: never clip ── */
    .grid-cell:has(.cell-text),
    .grid-cell:has(.cell-form) {
        min-height: auto;
        height: auto;
    }

    /* ── Map cell: fixed height ── */
    .grid-cell:has(iframe[src*="google.com/maps"]) {
        min-height: 300px;
    }

    /* ── Card list cells: full width, auto height ── */
    .grid-cell:has(.cell-cards) {
        width: 100% !important;
        border-right: none;
    }

    .grid-cell .cell-card img {
        width: 3rem;
        height: 3rem;
    }

    .grid-cell .cell-card-title {
        font-size: .85rem;
    }

    .grid-cell .cell-card-meta {
        font-size: .7rem;
    }

    /* ── Staff cell ── */
    .grid-cell .cell-staff-photo {
        width: 4.5rem !important;
        height: 4.5rem !important;
        max-width: 4.5rem !important;
        aspect-ratio: 1 / 1;
        border-radius: 50% !important;
        object-fit: cover;
        flex-shrink: 0;
    }

    .grid-cell .cell-staff {
        height: auto !important;
        padding: 1rem;
    }

    .grid-cell .cell-staff-name {
        font-size: .95rem;
    }

    .grid-cell .cell-staff-role {
        font-size: .75rem;
    }

    /* ── CTA cell ── */
    .grid-cell .cell-cta {
        padding: 1.5rem;
    }

    .grid-cell .cell-cta-text {
        font-size: 1rem;
    }

    .grid-cell .cell-cta-img {
        max-width: 50%;
    }

    /* ── Card su mobile ── */
    .grid-cell:has(.cell-card-single) {
        height: auto !important;
        min-height: auto !important;
    }

    /* ── ALL cards → vertical (img top, text bottom) on mobile ── */
    .grid-cell:has(.cell-card-single) {
        height: auto !important;
        min-height: auto !important;
    }

    .grid-cell .cell-card-single,
    .grid-cell .cell-card-horizontal {
        height: auto !important;
        flex-direction: column !important;
        overflow: hidden;
    }

    /* Vertical card image: full width */
    .grid-cell .cell-card-single-img {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/2;
        object-fit: cover;
    }

    /* Horizontal card image wrapper: full width, image always first */
    .grid-cell .cell-card-h-img {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/2;
        order: 1 !important;
    }

    .grid-cell .cell-card-h-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    /* Text body: below image, uniform sizing */
    .grid-cell .cell-card-single-body,
    .grid-cell .cell-card-h-body {
        flex: none !important;
        width: 100%;
        padding: .75rem;
        order: 2 !important;
    }

    /* Uniform text sizes across ALL card types */
    .grid-cell .cell-card-single-title,
    .grid-cell .cell-card-single-body .cell-card-single-title,
    .grid-cell .cell-card-h-body .cell-card-single-title {
        font-size: .9rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .grid-cell .cell-card-single-meta,
    .grid-cell .cell-card-single-body .cell-card-single-meta,
    .grid-cell .cell-card-h-body .cell-card-single-meta {
        font-size: .65rem !important;
        margin-bottom: .15em;
    }

    /* Bottone nelle card: non assoluto su mobile */
    .grid-cell .cell-card-single-body .btn-grid,
    .grid-cell .cell-card-h-body .btn-grid {
        position: static !important;
        transform: none !important;
        margin-top: .5rem;
        font-size: .7rem;
        padding: .3rem .6rem;
    }

    /* ── Slideshow widgets: fix collapsed height on mobile ── */
    .grid-cell:has(.cell-slideshow) {
        min-height: 0;
        height: auto !important;
    }

    .grid-cell .cell-slideshow {
        position: relative;
        width: 100%;
        height: auto !important;
        aspect-ratio: 16 / 10;
    }

    .grid-cell .cell-slideshow .slide {
        position: absolute;
        inset: 0;
    }

    /* ── Gallery slideshow: same fix ── */
    .grid-cell .cell-gallery--slideshow {
        position: relative;
        aspect-ratio: 16 / 10;
        height: auto !important;
    }

    .grid-cell .cell-gallery--slideshow img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ── Slideshow arrows: always visible on touch (no hover) ── */
    .grid-cell .cell-slideshow .ss-arrow {
        opacity: 1 !important;
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
    }

    /* ── Slideshow dots: bigger on mobile ── */
    .grid-cell .cell-slideshow .ss-dots {
        bottom: 6px;
    }

    .grid-cell .cell-slideshow .ss-dot {
        width: 8px;
        height: 8px;
    }

    /* ── Logo widget ── */
    .grid-cell:has(.d-flex.align-items-center.justify-content-center.h-100) {
        min-height: 80px;
    }

    /* ── Video/Map: ensure aspect ratio ── */
    .grid-cell:has(iframe) {
        height: auto !important;
    }
}

/* ── Widget Content Styles ── */

/* Image fills cell */
.grid-cell img.cell-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text content in cell */
.grid-cell .cell-text {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.2) transparent;
}

    .grid-cell .cell-text::-webkit-scrollbar {
        width: 4px;
    }

    .grid-cell .cell-text::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 2px;
    }

/* Hero/banner overlay */
.grid-cell .cell-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    color: #fff;
    background: rgba(0,0,0,.35);
}

    .grid-cell .cell-overlay h2 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: .5rem;
    }

/* Gallery inside cell */
.grid-cell .cell-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 2px;
    width: 100%;
    height: 100%;
}

    .grid-cell .cell-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: opacity .15s;
    }

        .grid-cell .cell-gallery img:hover {
            opacity: .8;
        }

/* Gallery slideshow mode */
.cell-gallery--slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

    .cell-gallery--slideshow img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1s;
        cursor: pointer;
    }

        .cell-gallery--slideshow img.active {
            opacity: 1;
        }

/* ── Content slideshow (events, articles, products) ── */
.cell-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cell-slideshow .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s;
    display: flex;
    flex-direction: column;
}

.cell-slideshow .slide.active {
    opacity: 1;
    z-index: 1;
}

.cell-slideshow.transition-slide .slide {
    transition: transform .6s ease, opacity 0s;
    transform: translateX(100%);
    opacity: 1;
}

.cell-slideshow.transition-slide .slide.active {
    transform: translateX(0);
}

.cell-slideshow.transition-slide .slide.prev {
    transform: translateX(-100%);
}

.cell-slideshow .slide-img {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    object-fit: cover;
    display: block;
}

.cell-slideshow .slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(0.5rem, 1.5vw, 1.5rem);
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: #fff;
    z-index: 2;
}

.cell-slideshow .slide-overlay .slide-meta,
.cell-slideshow .slide-overlay .slide-title,
.cell-slideshow .slide-overlay .btn-grid {
    color: #fff;
}

.cell-slideshow .slide-body {
    padding: clamp(0.3rem, 0.8vw, 0.75rem) clamp(0.4rem, 1vw, 0.75rem);
    background: var(--bg);
    position: relative;
    z-index: 2;
}

.cell-slideshow .slide-title {
    display: block;
    font-size: clamp(0.5rem, 1.1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.2;
}

.cell-slideshow .slide-meta {
    display: block;
    font-size: clamp(0.35rem, 0.7vw, 0.65rem);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .1em;
}

.cell-slideshow .slide-overlay .slide-meta {
    color: rgba(255,255,255,.7);
}

/* Arrows */
.cell-slideshow .ss-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(0,0,0,.4);
    color: #fff;
    border: none;
    width: clamp(1.5rem, 2.5vw, 2.5rem);
    height: clamp(1.5rem, 2.5vw, 2.5rem);
    font-size: clamp(0.7rem, 1.2vw, 1.2rem);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}

.cell-slideshow:hover .ss-arrow {
    opacity: 1;
}

.cell-slideshow .ss-arrow-prev { left: 0; }
.cell-slideshow .ss-arrow-next { right: 0; }

/* Dots */
.cell-slideshow .ss-dots {
    position: absolute;
    bottom: .4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: .3rem;
}

.cell-slideshow .slide-overlay ~ .ss-dots,
.cell-slideshow:has(.slide-overlay) .ss-dots {
    bottom: auto;
    top: .4rem;
}

.cell-slideshow .ss-dot {
    width: clamp(4px, .5vw, 8px);
    height: clamp(4px, .5vw, 8px);
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s;
}

.cell-slideshow .ss-dot.active {
    background: #fff;
}

/* ── Card list inside cell (events, articles, products) ── */
.grid-cell .cell-cards {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.grid-cell .cell-card {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 0.75rem);
    padding: clamp(0.3rem, 0.8vw, 0.6rem) clamp(0.4rem, 1vw, 0.75rem);
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid #eee;
    transition: background .12s;
}

    .grid-cell .cell-card:last-child {
        border-bottom: none;
    }

    .grid-cell .cell-card:hover {
        background: #f5f5f5;
    }

    .grid-cell .cell-card img {
        width: clamp(2rem, 4vw, 3.5rem);
        height: clamp(2rem, 4vw, 3.5rem);
        object-fit: cover;
        flex-shrink: 0;
    }

.grid-cell .cell-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.grid-cell .cell-card-title {
    font-size: clamp(0.5rem, 1vw, 0.85rem);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-cell .cell-card-meta {
    font-size: clamp(0.4rem, 0.8vw, 0.7rem);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Staff member card inside cell ── */
.grid-cell .cell-staff {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 12%;
    text-align: center;
    overflow: hidden;
}

.grid-cell .cell-staff-photo {
    width: 50%;
    max-width: 7rem;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(100%);
    transition: filter .3s;
    will-change: filter;
    margin-bottom: clamp(0.4rem, 1.5vw, 1rem);
    flex-shrink: 0;
}

.grid-cell:hover .cell-staff-photo {
    filter: grayscale(0);
}

.grid-cell .cell-staff-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.grid-cell .cell-staff-name {
    font-size: clamp(0.5rem, 1.1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-cell .cell-staff-role {
    font-size: clamp(0.4rem, 0.85vw, 0.75rem);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Single entity card (event, article, product) — fills entire cell ── */
.grid-cell .cell-card-single {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
}

.grid-cell .cell-card-single-img {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    object-fit: cover;
    display: block;
    transition: opacity .15s;
}

.grid-cell .cell-card-single-body {
    padding: clamp(0.3rem, 0.8vw, 0.75rem) clamp(0.4rem, 1vw, 0.75rem);
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.grid-cell .cell-card-single-title {
    display: block;
    font-size: clamp(0.5rem, 1.1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.grid-cell .cell-card-single-meta {
    display: block;
    font-size: clamp(0.35rem, 0.7vw, 0.65rem);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .1em;
}

.grid-cell .cell-card-single:hover .cell-card-single-img {
    opacity: .85;
}

/* ── Card orizzontali (img-left / text-left) ── */
.grid-cell .cell-card-horizontal {
    flex-direction: row;
    overflow: hidden;
}

.grid-cell .cell-card-h-img {
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.grid-cell .cell-card-h-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .15s;
}

.grid-cell .cell-card-horizontal:hover .cell-card-h-img img {
    opacity: .85;
}

.grid-cell .cell-card-h-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(0.5rem, 1.5vw, 1.5rem);
    background: var(--bg);
    margin-left: -1px;
    padding-left: calc(clamp(0.5rem, 1.5vw, 1.5rem) + 1px);
}

/* ── CTA cell ── */
.grid-cell .cell-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(0.5rem, 2vw, 2rem);
    height: 100%;
    width: 100%;
}

.grid-cell .cell-cta-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.grid-cell .cell-cta-img {
    max-width: 60%;
    max-height: 50%;
    object-fit: contain;
    margin-bottom: clamp(0.3rem, 1vw, 1rem);
}

.grid-cell .cell-cta-text {
    font-size: clamp(0.55rem, 1.2vw, 1.1rem);
    font-weight: 600;
    line-height: 1.3;
}

    .grid-cell .cell-cta-text a {
        color: inherit;
        text-decoration: underline;
    }

.grid-cell .cell-overlay a {
    color: #fff;
}

/* Video/Map fills cell */
.grid-cell iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* CTA cell */
.grid-cell .cell-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    height: 100%;
    background: var(--text);
    color: var(--bg);
}

/* Contact form in cell */
.grid-cell .cell-form {
    padding: 1.5rem;
    height: 100%;
    overflow-y: auto;
}

/* Card styles (flat, no radius, no shadows) */
.wcard {
    border: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
    transition: opacity .15s;
}

    .wcard:hover {
        opacity: .85;
    }

    .wcard img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
    }

.wcard-body {
    padding: .75rem;
}

/* ── Buttons ── */
.btn-grid {
    display: inline-block;
    padding: .6rem 1.5rem;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .btn-grid:hover {
        background: var(--text);
        color: var(--bg) !important;
    }

.btn-grid-inv {
    background: var(--bg);
    color: var(--text);
    border-color: var(--bg);
}

    .btn-grid-inv:hover {
        background: transparent;
        color: var(--bg);
        border-color: var(--bg);
    }

.btn-grid-filled {
    background: var(--text);
    color: var(--bg) !important;
    border-color: var(--text);
}

    .btn-grid-filled:hover {
        background: transparent;
        color: var(--text) !important;
    }

.btn-grid-sm {
    padding: .35rem .8rem;
    font-size: .7rem;
}

.btn-grid-lg {
    padding: .85rem 2.2rem;
    font-size: 1.05rem;
}

/* Bootstrap overrides for frontend */
.btn-primary-warm {
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    border: none;
}

    .btn-primary-warm:hover {
        background: var(--text-muted);
        color: var(--bg);
    }

.btn-outline-warm {
    border: 2px solid var(--text);
    color: var(--text);
    font-weight: 600;
}

    .btn-outline-warm:hover {
        background: var(--text);
        color: var(--bg);
    }

/* ── Footer ── */
.site-footer {
    background: var(--text);
    color: var(--bg);
    border-top: 2px solid var(--border);
    padding: 1.5rem 0;
}

    .site-footer a {
        color: var(--bg);
        text-decoration: none;
        opacity: .7;
        transition: opacity .15s;
    }

        .site-footer a:hover {
            opacity: 1;
        }

.site-footer-inner {
    max-width: var(--grid-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Social icons ── */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid currentColor;
    color: inherit;
    font-size: 1rem;
    transition: opacity .15s;
    text-decoration: none;
}

    .social-icon:hover {
        opacity: .6;
    }

.site-footer .social-icon,
.site-footer .social-icon:visited,
.site-footer .social-icon:link {
    color: #fff !important;
    border-color: #fff !important;
    opacity: .7;
}
.site-footer .social-icon:hover {
    color: #fff !important;
    opacity: 1;
}

/* ── Pagination ── */
.pagination {
    --bs-pagination-color: var(--text);
    --bs-pagination-bg: var(--bg);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-color: var(--bg);
    --bs-pagination-hover-bg: var(--text);
    --bs-pagination-hover-border-color: var(--text);
    --bs-pagination-active-color: var(--bg);
    --bs-pagination-active-bg: var(--text);
    --bs-pagination-active-border-color: var(--text);
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--border);
    font-weight: 600;
}

.page-link {
    border-radius: 0 !important;
}

.page-item.active .page-link {
    border-radius: 0 !important;
}

/* ── Admin edit FAB ── */
.admin-edit-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    padding: .6rem 1rem .6rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    transition: opacity .15s;
}

    .admin-edit-fab:hover {
        opacity: .8;
        color: var(--bg);
    }

    .admin-edit-fab i {
        font-size: .9rem;
    }

@media (max-width: 575.98px) {
    .admin-edit-fab-label {
        display: none;
    }

    .admin-edit-fab {
        padding: .65rem;
    }
}

/* ── Lightbox (reused from widget renderer) ── */
.grid-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .grid-lightbox img {
        max-width: 90vw;
        max-height: 90vh;
        object-fit: contain;
    }

.grid-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.grid-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 1rem;
    opacity: .7;
    transition: opacity .15s;
}

    .grid-lightbox-nav:hover {
        opacity: 1;
    }

.grid-lightbox-prev {
    left: 1rem;
}

.grid-lightbox-next {
    right: 1rem;
}

.grid-lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: .85rem;
    opacity: .7;
}

/* ── Utility classes ── */
.text-muted {
    color: var(--text-muted) !important;
}

.bg-dark-grid {
    background: var(--text);
    color: var(--bg);
}

/* Marquee animation */
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

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

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
    will-change: transform;
}

    .marquee-track span {
        font-size: 3rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        white-space: nowrap;
        padding: 0 2rem;
        color: var(--text);
        opacity: .15;
    }

/* ── Widget title styles ── */
.wtitle-default {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.wtitle-small {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.wtitle-large {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.wtitle-decorated {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--border);
}

.wtitle-display {
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
}

/* ── Staff/team grid ── */
.staff-card {
    text-align: center;
}

    .staff-card img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        filter: grayscale(100%);
        transition: filter .3s;
    }

    .staff-card:hover img {
        filter: grayscale(0);
    }

/* ── Product categories ── */
.category-card {
    position: relative;
    overflow: hidden;
}

    .category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s;
    }

    .category-card:hover img {
        transform: scale(1.05);
    }

.category-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .75rem;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Internal Pages — Minimal Architectural Style ── */

/* Page header */
.fe-page-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.fe-page-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.05;
    margin: 0;
}

.fe-page-subtitle {
    font-size: .9rem;
    color: var(--text-muted);
    margin-top: .5rem;
}

.fe-page-meta {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    font-weight: 500;
}

/* Main image (replaces hero overlays) */
.fe-main-img {
    width: 100%;
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
}

/* Content column */
.fe-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 1rem;
    color: #333;
}

    .fe-content p {
        margin-bottom: 1.25rem;
    }

    .fe-content img {
        max-width: 100%;
        height: auto;
    }

/* Card minimal (no shadows, no radius) */
.fe-card {
    border: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
    transition: opacity .15s;
}

    .fe-card:hover {
        opacity: .85;
    }

.fe-card-img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--border);
}

.fe-card-body {
    padding: 1rem;
}

/* Gallery masonry — 4 columns */
.fe-gallery-grid {
    columns: 4;
    column-gap: .5rem;
}

@media (max-width: 991.98px) {
    .fe-gallery-grid {
        columns: 3;
    }
}

@media (max-width: 575.98px) {
    .fe-gallery-grid {
        columns: 2;
    }
}

.fe-gallery-grid img {
    width: 100%;
    display: block;
    margin-bottom: .5rem;
    object-fit: cover;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: opacity .15s;
    break-inside: avoid;
}

    .fe-gallery-grid img:hover {
        opacity: .8;
    }

/* Section title */
.fe-section-title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

/* Thumb strip */
.fe-thumb-strip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .5rem 0;
    scrollbar-width: thin;
}

    .fe-thumb-strip img {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        object-fit: cover;
        border: 1px solid var(--border);
        cursor: pointer;
        opacity: .6;
        transition: opacity .15s;
    }

        .fe-thumb-strip img:hover {
            opacity: .9;
        }

        .fe-thumb-strip img.active {
            opacity: 1;
            border-width: 2px;
        }

/* Variant card minimal */
.fe-variant {
    border: 1px solid var(--border);
    padding: .6rem .75rem;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .fe-variant:hover {
        background: #f5f5f5;
    }

    .fe-variant.selected {
        background: #f5f5f5;
        border-width: 2px;
    }

    .fe-variant input[type=radio] {
        accent-color: var(--text);
    }

/* Qty minimal */
.fe-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
}

    .fe-qty button {
        background: none;
        border: none;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .15s;
    }

        .fe-qty button:hover {
            background: #f5f5f5;
        }

    .fe-qty input {
        width: 2.5rem;
        text-align: center;
        border: none;
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        font-weight: 600;
        font-size: .9rem;
    }

        .fe-qty input:focus {
            outline: none;
        }

/* Meta list */
.fe-meta-item {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
    border-bottom: 1px solid #eee;
    font-size: .85rem;
}

    .fe-meta-item:last-child {
        border-bottom: none;
    }

/* Mobile sticky bar */
.fe-mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--text);
    color: var(--bg);
    padding: .75rem 1rem;
}

@media (max-width: 991.98px) {
    .fe-mobile-bar {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    body.has-mobile-bar {
        padding-bottom: 4.5rem;
    }
}

/* Filter chip minimal */
.fe-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--text);
    color: var(--bg);
    font-size: .75rem;
    font-weight: 600;
    padding: .3rem .65rem;
    text-decoration: none;
    transition: opacity .2s;
}

    .fe-filter-chip:hover {
        opacity: .8;
        color: var(--bg);
    }

/* Search input minimal */
.fe-search-input {
    border: 1px solid var(--border);
    padding: .6rem 1rem .6rem 2.5rem;
    font-size: .9rem;
    width: 100%;
    background: var(--bg);
    font-family: 'Space Grotesk', sans-serif;
}

    .fe-search-input:focus {
        outline: 2px solid var(--text);
        outline-offset: -2px;
    }

.fe-search-wrap {
    position: relative;
}

    .fe-search-wrap .search-icon {
        position: absolute;
        left: .85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: .9rem;
        pointer-events: none;
    }

/* Category chip minimal */
.fe-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--bg);
    transition: all .15s;
}

    .fe-chip:hover {
        background: #f5f5f5;
        color: var(--text);
    }

    .fe-chip.active {
        background: var(--text);
        border-color: var(--text);
        color: var(--bg);
    }

/* Share icon */
.fe-share-icon {
    font-size: .95rem;
    color: var(--text-muted);
    transition: color .2s;
    text-decoration: none;
}

    .fe-share-icon:hover {
        color: var(--text);
    }

/* Badge minimal */
.fe-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem .5rem;
    border: 1px solid var(--border);
}

.fe-badge-filled {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Sort select minimal */
.fe-sort-select {
    border: 1px solid var(--border);
    font-size: .85rem;
    padding: .4rem .75rem;
    background: var(--bg);
    font-family: 'Space Grotesk', sans-serif;
    min-width: 180px;
}

    .fe-sort-select:focus {
        outline: 2px solid var(--text);
        outline-offset: -2px;
    }

/* Sidebar sticky */
.fe-sidebar {
    position: sticky;
    top: 5rem;
}

@media (max-width: 991.98px) {
    .fe-sidebar {
        position: static;
    }
}

/* Form minimal */
.fe-form-control {
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .6rem .75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .9rem;
    background: var(--bg);
}

    .fe-form-control:focus {
        outline: 2px solid var(--text);
        outline-offset: -2px;
        box-shadow: none;
        border-color: var(--border);
    }