@charset 'UTF-8';

/* =============================================================
   Wootware Slick Carousel overrides
   =============================================================
   Upstream Slick's reference theme (skin/.../css/slick-theme.css)
   positions the prev/next arrows asymmetrically:

       .slick-prev { left:  -45px; }
       .slick-next { right: -25px; }

   That 20px offset is baked into the upstream library and leaves
   the right arrow visibly closer to (and slightly overlapping)
   the last visible slide on PDP cross-sell rows ("Category
   Bestsellers" / "Customers Who Bought This Also Bought").

   Override .slick-next so it mirrors .slick-prev's outside offset.
   The carousel init (jQuery .slick({...})) disables arrows below
   1450px, and parent containers around the cross-sell rows allow
   ~80px of viewport room on each side at that breakpoint, so the
   -45px right offset fits cleanly without clipping.

   Keep the vendor file (slick-theme.css) untouched so future Slick
   upgrades remain clean drops.
   ============================================================= */

.slick-next {
    right: -45px;
}

/* Mirror the RTL counterpart so right-to-left layouts stay symmetric too. */
[dir='rtl'] .slick-next {
    right: auto;
    left: -45px;
}