.oggi-catcards { background: #fff; padding: 22px 0 10px; position: relative; }
.oggi-catcards--full { width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.oggi-catcards__inner { max-width: var(--oggi-container); margin: 0 auto; padding: 0 20px; }
.oggi-catcards__head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.oggi-catcards__kicker {
display: block; font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--oggi-muted); margin-bottom: 6px;
}
.oggi-catcards__heading {
margin: 0;
font-family: var(--oggi-font-display);
font-size: 34px; font-weight: 800; color: var(--oggi-navy);
line-height: 1.1; letter-spacing: -.6px;
}
.oggi-catcards__track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.oggi-catcards__tile {
display: block; border-radius: 16px; overflow: hidden; min-width: 0;
background: var(--oggi-navy-50, #E6EDF7); text-decoration: none !important;
}
.oggi-catcards__tile img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.oggi-catcards__placeholder {
aspect-ratio: 505 / 590;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 10px; text-align: center;
background: var(--oggi-lime-50); color: var(--oggi-navy);
border: 2px dashed var(--oggi-lime); border-radius: 16px;
font-size: 12px; font-weight: 600;
}
@media (max-width: 1100px) {
.oggi-catcards__track { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
.oggi-catcards__inner { padding: 0 12px; }
.oggi-catcards__heading { font-size: 24px; }
.oggi-catcards__track {
display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.oggi-catcards__track::-webkit-scrollbar { display: none; }
.oggi-catcards__tile { flex: 0 0 47%; scroll-snap-align: start; }
}