.categories-section{padding:var(--section-y) 0;background:var(--paper);text-align:center}.section-kicker{font-size:var(--fs-label);letter-spacing:.17em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}.categories-section h2{padding:0 var(--gutter);margin-bottom:42px}.category-carousel-shell{position:relative;padding:8px 0 22px}.category-swiper{width:100%;overflow:hidden}.category-swiper .swiper-slide{width:180px;max-width:180px;height:auto;display:flex;justify-content:center;align-items:flex-start}.category-card{flex:0 0 auto;width:100%;max-width:180px;text-align:center;transition:opacity .4s ease}.category-image-wrap{width:130px;height:130px;margin:auto;border-radius:50%;overflow:hidden;background:var(--cream);border:1px solid rgba(23,19,17,.1)}.category-image-wrap img{display:block;width:100%;height:100%;object-fit:cover}.category-card>span{display:block;margin-top:12px;font:13px/1.2 var(--serif);text-wrap:balance}.category-coming-soon{opacity:1}.coming-soon-label{display:block;margin-top:9px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.category-carousel-arrow{position:absolute;z-index:4;top:67px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(251,250,247,.9);border:1px solid var(--line);box-shadow:0 10px 25px rgba(23,19,17,.08)}.category-carousel-prev{left:3vw}.category-carousel-next{right:3vw}@media(max-width:600px){.category-image-wrap{width:105px;height:105px;aspect-ratio:1/1;}.category-card{max-width:135px}.category-card>span{font-size:11px;margin-top:10px}.category-carousel-arrow{top:53px;width:38px;height:38px}.category-carousel-shell{padding-left:56px;padding-right:56px}}

/* ===== FINAL VISUAL-POLISH PASS =====
   Minimal white chevron arrows (same positions as before); subtle category-card hover scale. */
.category-carousel-arrow{width:46px;height:46px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;filter:drop-shadow(0 1px 2px rgba(23,19,17,.35));transition:opacity .2s ease,transform .2s ease}
.category-carousel-arrow svg{width:28px;height:28px;display:block;pointer-events:none}
.category-carousel-arrow path{stroke-width:1.5}
.category-carousel-arrow:hover{opacity:.6}
.category-carousel-prev:hover{transform:translateX(-5px)}
.category-carousel-next:hover{transform:translateX(5px)}
.category-carousel-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.category-image-wrap img{transition:transform .5s ease}
.category-card:hover .category-image-wrap img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.category-carousel-arrow{transition:none!important}.category-image-wrap img{transition:none}.category-card:hover .category-image-wrap img{transform:none}}

/* ===== HOMEPAGE MOBILE REFINEMENT (phones only) =====
   At 360/390/430 the third category card sat entirely off-screen, so the
   carousel read as a dead end with nothing to swipe towards. The arrows now
   sit on their own centred row BELOW the track instead of overlapping its
   edges, which frees the full viewport width for the cards. The slide itself
   is pinned to the card width (135px here, 180px above) so the visual gap
   between cards is exactly the Swiper spaceBetween — 8px on phones, 12px on
   larger screens — instead of the ~60-70px sliver the auto slidesPerView used
   to leave. This block is last in the file so it wins over the arrow sizing
   above without needing extra specificity. */
@media(max-width:600px){
  .categories-section{padding:clamp(54px,14vw,66px) 0}
  .categories-section h2{font-size:clamp(31px,8.6vw,38px);margin-bottom:24px}
  .category-carousel-shell{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:6px 16px 18px}
  .category-swiper{order:1;flex:1 0 100%;width:100%}
  .category-swiper .swiper-slide{width:135px;max-width:135px}
  .category-carousel-prev{order:2;position:static;top:auto;left:auto}
  .category-carousel-next{order:3;position:static;top:auto;right:auto}
  .category-image-wrap{width:105px;height:105px;aspect-ratio:1}
  .category-card{max-width:135px}
  .category-card>span{font-size:11px;margin-top:10px}
  .coming-soon-label{font-size:11px;letter-spacing:.13em;margin-top:7px}
}