.mugs-carousel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 28px 0 12px; }
.mugs-carousel-heading h3 { margin: 0 0 6px; color: var(--green-900); }
.mugs-carousel-heading p { margin: 0; color: var(--muted); }
.mugs-see-all { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid #075139; border-radius: 999px; background: #075139; color: #fff; font: inherit; font-weight: 700; font-size: .88rem; text-decoration: none; text-align: center; }
.mugs-see-all:hover { background: #083e2d; }
.mugs-see-all:focus-visible { outline: 3px solid #db9a35; outline-offset: 3px; }
.mugs-carousel-controls { display: flex; align-items: center; gap: 10px; }
.mugs-carousel-controls button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--green-800); border-radius: 10px; background: white; color: var(--green-900); font: inherit; cursor: pointer; }
.mugs-carousel-controls button:disabled { opacity: .4; cursor: default; }
#mugs-carousel { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 8px 2px 28px; scrollbar-color: var(--green-700) #e6f1eb; }
#mugs-carousel .mug-card { scroll-snap-align: start; min-width: 0; }
#mugs-carousel .mug-card > img { height: 220px; object-fit: contain; background: white; }
#mugs-carousel .mug-card > div { margin-top: auto; }
.mugs-carousel-controls button:focus-visible, #mugs-carousel a:focus-visible, #mugs-carousel button:focus-visible { outline: 3px solid var(--green-700); outline-offset: 2px; }
@media (max-width: 1180px) { #mugs-carousel { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 900px) { #mugs-carousel { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { #mugs-carousel { grid-auto-columns: 86%; } }