/* ============================================
   Category Hero Banner with Parallax
   ============================================ */

.category-sections {
    padding: 0;
}

/* ---- Hero Banner ---- */
.category-hero {
    position: relative;
    overflow: hidden;
    margin-top: var(--space-md);
}

/* With image - full width, no border-radius */
.category-hero[data-parallax] {
    height: 220px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    /* Extra bottom space for the overlapping product list */
    margin-bottom: -28px;
}

/* First hero: no top margin */
.product-section:first-child .category-hero {
    margin-top: 0;
}

/* Without image - simple title bar */
.category-hero:not([data-parallax]) {
    padding: var(--space-lg) var(--space-md) var(--space-sm);
    border-radius: 0;
}

/* Image container */
.category-hero__image {
    position: absolute;
    inset: -20px;
    overflow: hidden;
}

.category-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transform: scale(1.08);
}

/* Gradient overlay */
.category-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.25) 45%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
}

/* Content */
.category-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: var(--space-xl) var(--space-lg);
    /* Leave space at bottom for overlapping cards */
    padding-bottom: 40px;
}

.category-hero:not([data-parallax]) .category-hero__content {
    padding: 0;
}

/* Title */
.category-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    /* Inline-flex so the optional icon sits to the left of the
       category name on the same baseline. align-items:center keeps
       larger SVGs vertically centered against the display font. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.category-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;   /* scales with title font-size automatically */
    height: 1.4em;
    flex-shrink: 0;
}
.category-hero__icon svg {
    width: 100%;
    height: 100%;
}
/* Parallax hero (with cover image) — icon inherits the white tint of
   the title text so it stays legible over the darkened image. */
.category-hero[data-parallax] .category-hero__icon {
    color: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.category-hero[data-parallax] .category-hero__title {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    font-size: 2.2rem;
}
.category-hero[data-parallax] .category-hero__desc {
    color: #ffffff;
}

.category-hero:not([data-parallax]) .category-hero__desc {
    color: var(--color-text);
}
.category-hero:not([data-parallax]) .category-hero__title {
    color: var(--color-text);
    font-size: 2.2rem;
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-sm);
}

/* Description */
.category-hero__desc {
    font-size: var(--text-base);
    line-height: 1.5;
    margin-top: 4px;
}

.category-hero[data-parallax] .category-hero__desc {
    color: rgba(255, 255, 255, 0.9);
}

.category-hero:not([data-parallax]) .category-hero__desc {
    color: var(--color-text-muted);
    padding-left: calc(var(--space-sm) + 3px);
}

/* Item count */
.category-hero__count {
    font-size: var(--text-sm);
    font-weight: 500;
    margin-top: 4px;
    letter-spacing: 0.03em;
}

.category-hero[data-parallax] .category-hero__count {
    color: rgba(255, 255, 255, 0.65);
}

.category-hero:not([data-parallax]) .category-hero__count {
    color: var(--color-text-muted);
    padding-left: calc(var(--space-sm) + 3px);
}

/* ---- Adjustments ---- */

/* Remove old section title (replaced by hero) */
.category-sections .product-section__title {
    display: none;
}

/* Product list within sections - overlaps hero image */
.category-sections .product-list {
    position: relative;
    z-index: 3;
    background: var(--color-bg-card);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: hidden;
    margin-left: var(--space-md);
    margin-right: var(--space-md);
    margin-bottom: 0;
}

/* When hero has image, product list overlaps it */
.category-hero[data-parallax] + .product-list {
    margin-top: 0;
}

body.theme-light .category-sections .product-list {
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
}


body:not(.theme-light) .category-sections .product-list {
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
    background: linear-gradient(180deg,rgba(40, 40, 40, 1) 0%, rgba(40, 40, 40, 0) 100%);

}

/* First product card no top border */
.category-sections .product-card:first-child {
    border-top: none;
}

/* Space between category groups */
.category-sections .product-section + .product-section {
    margin-top: var(--space-lg);
}

/* ─── Bölüm (product_group) Banner ────────────────────────────────
   Per (bölüm × outlet) info banner — service hours, temporary
   notices, chef's notes. Renders once at the top of the bölüm
   landing page, above the category list. Operator sets it per
   outlet from the outlet edit form.

   Default style is brand-primary tinted with a centered icon + text
   row. Operators who want a different look (color, icon weight,
   density, dark/light variant) can override via the master Custom
   CSS panel — `.group-banner` + `.group-banner--<icon>` hooks are
   stable and operator-facing. */
.group-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin: var(--space-md) var(--space-md) 0;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.group-banner__icon {
    flex-shrink: 0;
    color: currentColor;
}

.group-banner__text {
    /* Allow operator-typed <br> + soft wraps without overflowing
       the bölüm container on narrow viewports. */
    overflow-wrap: anywhere;
}