:root {
    /* Default (most-used) guest layout: express the venue's identity in the Poppins
       display face DESIGN.md specifies (already self-hosted in gfonts.css), not body Inter. */
    --font-heading: var(--font-poppins);
    --font-body: var(--font-inter);
    --lc-radius-lg: 20px;
    --lc-radius-md: 12px;
    --lc-radius-xl: 32px;
    --lc-shadow-card: var(--shadow-sm);
    --lc-shadow-float: var(--shadow-md);
    --lc-spacing-unit: 12px;
    --lc-border-width: 1px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34vw, 1fr));
    align-items: stretch;
    gap: var(--spacing-3);
}

.category-wrapper {
    height: 100%;
}

.category-card {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-5);
    justify-content: flex-start;
    box-shadow: var(--lc-shadow-card);
    border: var(--lc-border-width) solid var(--color-border);
    border-radius: var(--lc-radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lc-shadow-float);
}

.category-card:active {
    transform: scale(0.98);
}

.category-image {
    border-radius: var(--lc-radius-md);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

.hero {
    border-radius: 0 0 var(--lc-radius-xl) var(--lc-radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--lc-spacing-unit);
    --hero-content-radius: 18px;
    --hero-content-padding-y: clamp(12px, 2.4vw, 18px);
    --hero-content-padding-x: clamp(14px, 3vw, 24px);
}

.wifi-reveal,
.maps-reveal {
    border-radius: var(--lc-radius-md);
    box-shadow: var(--shadow-sm);
}

.maps-open-external,
.maps-close-btn,
.maps-embed-frame {
    border-radius: var(--lc-radius-sm, 8px);
}

.footer-section,
.wifi-pill {
    border-radius: var(--lc-radius-md);
}

.item-card {
    border: var(--lc-border-width) solid var(--color-border);
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-card);
    margin-bottom: var(--lc-spacing-unit);
}

/* Visuals Overrides */
.category-visual {
    width: 28vw;
    height: 28vw;
    box-shadow: var(--lc-shadow-card);
    margin-bottom: 12px;
}

.category-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.category-title {
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.28;
}

.category-description {
    width: 100%;
    -webkit-line-clamp: 3;
    min-height: 0;
    display: none;
}

.category-items-count {
    margin-top: auto;
    line-height: 1.2;
}

.item-visual {
    width: 64px;
    height: 64px;
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-card);
}


/* ═══ Promo Showcase: Floating Carousel ═══ */

.promo-showcase {
    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
    backdrop-filter: blur(18px) saturate(1.10);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
    padding-top: 6px;
    padding-bottom: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.promo-card--rounded {
    width: min(80vw, 290px);
    border-radius: var(--lc-radius-xl, 32px);
    padding: 14px;
    gap: 14px;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 34%, transparent), color-mix(in srgb, var(--color-warning) 28%, transparent)) border-box;
    border: 1.5px solid transparent;
}

.promo-card--rounded.promo-card--active {
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(135deg, var(--color-primary), var(--color-warning)) border-box;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent),
        0 4px 20px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.promo-card--rounded .promo-card-visual {
    width: 78px;
    height: 78px;
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-card);
}

.promo-card-name {
    font-size: 0.92rem;
    line-height: 1.24;
}

.promo-card-price {
    font-size: 1rem;
    line-height: 1.15;
}

.promo-dot {
    width: 8px;
    height: 8px;
}

.promo-dot.active {
    width: 22px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-warning));
}