/* Bentos-Portlet – Deal-Bar, Hero, 4 Bentos, Slider */
/* Render-blocking eingebunden in frontend/template/layout/header.tpl: enthaelt Layout-CSS, das vor dem async cartzilla.css/swiper-bundle.css stehen muss (sonst Reflow = CLS) */

.opc-bentos .bento-dealbar__prefix { font-size: .8rem; letter-spacing: .03em; }
.opc-bentos .bento-dealbar__scroll { overflow-x: auto; scrollbar-width: none; }
.opc-bentos .bento-dealbar__scroll::-webkit-scrollbar { display: none; }
.opc-bentos .bento-dealbar__item { font-size: .8rem; opacity: .8; transition: opacity .2s ease; }
.opc-bentos .bento-dealbar__item:hover { opacity: 1; }
.opc-bentos .bento-dealbar__all { font-size: .8rem; }

.opc-bentos .bento-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    height: 400px;
}
.opc-bentos .bento-grid > * { min-width: 0; min-height: 0; }
.opc-bentos .bento-hero    { grid-column: 1 / 6;   grid-row: 1 / 3; }
.opc-bentos .bento-card--1 { grid-column: 6 / 10;  grid-row: 1 / 2; }
.opc-bentos .bento-card--2 { grid-column: 10 / 13; grid-row: 1 / 2; }
.opc-bentos .bento-card--3 { grid-column: 6 / 10;  grid-row: 2 / 3; }
.opc-bentos .bento-card--4 { grid-column: 10 / 13; grid-row: 2 / 3; }

.opc-bentos .bento-hero { background: linear-gradient(135deg, var(--cz-secondary-bg, #f1f1f4) 0%, var(--cz-body-bg, #fff) 100%); }
.opc-bentos .bento-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opc-bentos .bento-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%); }
.opc-bentos .bento-hero__content { position: relative; z-index: 2; height: 100%; justify-content: center; padding: 1.75rem 2rem; max-width: 85%; }
.opc-bentos .bento-hero__content--left   { align-items: flex-start; text-align: left; }
.opc-bentos .bento-hero__content--right  { align-items: flex-end;   text-align: right; margin-left: auto; }
.opc-bentos .bento-hero__content--center { align-items: center;     text-align: center; margin: 0 auto; }
.opc-bentos .bento-hero__content--onimage .bento-hero__headline,
.opc-bentos .bento-hero__content--onimage .bento-hero__desc { color: #fff; }
.opc-bentos .bento-hero__content--onimage .bento-hero__pill { background: rgba(255,255,255,.9); }
.opc-bentos .bento-hero__badge { background: #000; color: #fff; align-self: flex-start; }
.opc-bentos .bento-hero__pill { background: #fff; border: 1px solid var(--cz-border-color, #e0e0e5); align-self: flex-start; }
.opc-bentos .bento-hero__content--right .bento-hero__badge,
.opc-bentos .bento-hero__content--right .bento-hero__pill { align-self: flex-end; }
.opc-bentos .bento-hero__content--center .bento-hero__badge,
.opc-bentos .bento-hero__content--center .bento-hero__pill { align-self: center; }
.opc-bentos .bento-hero__headline { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.opc-bentos .bento-hero__desc { font-size: .9rem; }

.opc-bentos .bento-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.opc-bentos .bento-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%); pointer-events: none; }
.opc-bentos .bento-card__title { font-size: 1.05rem; }
.opc-bentos .bento-card__label { font-size: .72rem; letter-spacing: .04em; color: #fff; }
.opc-bentos .bento-card__discount,
.opc-bentos .bento-card__new { font-size: .72rem; z-index: 3; }

.opc-bentos picture { display: contents; }

/* Swiper-Kernlayout replizieren, damit Slides schon VOR dem async swiper-bundle.css + defer-JS volle Hoehe haben -> kein 0->voll-Sprung des Overlays (CLS) */
.opc-bentos .swiper { overflow: hidden; }
.opc-bentos .swiper-wrapper { display: flex; height: 100%; box-sizing: content-box; }
.opc-bentos .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; }
.opc-bentos .bento-slider .swiper { height: 192px; }
@media (max-width: 991.98px) { .opc-bentos .bento-slider .swiper { height: 170px; } }

/* Bootstrap-Abstaende/Padding der Bento-Bausteine reservieren (p-3/mb-3/mt-3/py-2 stehen sonst nur in async cartzilla.css -> spaeter Reflow = CLS) */
.opc-bentos > section { padding: 1rem; }
.opc-bentos .bento-dealbar { height: 2.75rem; margin-bottom: 1rem; }
.opc-bentos .bento-dealbar > .position-relative { height: 100%; }
.opc-bentos .bento-slider { margin-top: 1rem; }

.opc-bentos .hover-effect-scale:hover .hover-effect-target { transform: scale(1.05); }

.opc-bentos .bento-slide__ratio { height: 192px; }
.opc-bentos .bento-slide__ratio::before { display: none; }
.opc-bentos .bento-slide__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.opc-bentos .bento-slide__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%); pointer-events: none; }
.opc-bentos .bento-slide__label { font-size: .72rem; letter-spacing: .04em; }

.opc-bentos .swiper-button-prev,
.opc-bentos .swiper-button-next { width: 2.25rem; height: 2.25rem; background: #fff; border: 1px solid var(--cz-border-color, #e0e0e5); border-radius: 50%; box-shadow: 0 .125rem .25rem rgba(0,0,0,.08); }
.opc-bentos .swiper-button-prev::after,
.opc-bentos .swiper-button-next::after { font-size: .9rem; color: var(--cz-body-color, #1a1a1a); }
.opc-bentos .swiper-pagination-bullet { width: .5rem; height: .5rem; background: rgba(255,255,255,.6); opacity: 1; border-radius: 1rem; transition: width .3s, background .3s; }
.opc-bentos .swiper-pagination-bullet-active { width: 1.5rem; background: #fff; }

@media (max-width: 991.98px) {
    .opc-bentos .bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 170px 170px 170px; height: auto; }
    .opc-bentos .bento-hero    { grid-column: 1 / 2; grid-row: 1 / 3; }
    .opc-bentos .bento-card--1 { grid-column: 2 / 3; grid-row: 1 / 2; }
    .opc-bentos .bento-card--2 { grid-column: 2 / 3; grid-row: 2 / 3; }
    .opc-bentos .bento-card--3 { grid-column: 1 / 2; grid-row: 3 / 4; }
    .opc-bentos .bento-card--4 { grid-column: 2 / 3; grid-row: 3 / 4; }
    .opc-bentos .bento-slide__ratio { height: 170px; }
}
@media (max-width: 575.98px) {
    .opc-bentos .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
    .opc-bentos .bento-hero { grid-column: 1 / 2; grid-row: auto; height: 280px; }
    .opc-bentos .bento-card--1,
    .opc-bentos .bento-card--2,
    .opc-bentos .bento-card--3,
    .opc-bentos .bento-card--4 { grid-column: 1 / 2; grid-row: auto; height: 200px; }
}
@media (max-width: 767.98px) {
    .opc-bentos .bento-slider { display: none; }
}