/* ==============================================================
   swipe-row.css — unified horizontal swipe row (Splide-powered).
   Replaces the old Swiper-markup-only "carousels" that were
   visually stacking because Swiper was never loaded.
   Used by: blog carousel, shop-with-confidence bar, recently
   viewed, similar products, stores/brands tiles, Amazon tiles.
   ============================================================== */

.swipe-row {
    margin: 48px 0;
}
@media (min-width: 992px) {
    .swipe-row { margin: 64px 0; }
}
/* Container that wraps the More-from-{store/brand} carousels on product
   pages — give them breathing room from the Amazon block above. */
.container-internal-links {
    margin-top: 16px;
}
.swipe-row-title {
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 14px;
    color: #222;
    text-align: left;
}
.swipe-row-title-link a {
    color: inherit;
    /* The global "h2 a {font-weight:300}" rule in style.css would otherwise
       drop link headings to thin weight — pin to inherit so the heading's
       600 carries through. */
    font-weight: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.swipe-row-title-link a:hover,
.swipe-row-title-link a:focus-visible {
    color: #F68600;
    text-decoration: none;
}
.swipe-row-title-chevron {
    display: inline-block;
    font-size: 0.85em;
    color: #F68600;
    transition: transform 0.15s ease;
}

/* ----- Variant: merchant logos (footer trust strip) ---------------
   Tight ~50px-tall row of brand-colour merchant logos. Each tile is
   a fixed-height box that contains the logo with object-fit:contain
   so wildly different aspect ratios (square Cox & Cox vs wide Robert
   Dyas) don't break the rhythm. Hover dims slightly + lifts to make
   it discoverable as clickable. */
.swipe-row-merchants .splide__slide {
    width: auto;
    padding: 6px 0;
}
.merchant-strip {
    background: #fff;
    border-bottom: 1px solid #ececec;
    /* Extra top padding so the "Great prices, trusted stores" caption
       breathes against the section above (commonly the listing pagination
       or grid). Bottom stays tight so the strip doesn't waste vertical
       space below the logos. */
    padding: 28px 0 14px;
    position: relative;
}
/* Top border fades in + out horizontally instead of being a hard
   edge-to-edge line — softer transition from the section above
   (Amazon block / blog row) into the trust strip. */
.merchant-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, #fff 0%, #ccc 50%, #fff 100%);
    pointer-events: none;
}
.merchant-strip .swipe-row-title {
    font-size: 14px;
    font-weight: 500;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    text-align: center;
}
.merchant-strip .swipe-row-title-link a {
    justify-content: center;
}
.merchant-strip .swipe-row {
    margin: 0;
}
.merchant-strip-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 6px 22px;
    margin: 0;
    background: transparent;
    border: 0;
    /* No tile-level lift / shadow / border on hover — the colour/greyscale
       transition on the logo itself does the heavy lifting. */
}
.merchant-strip-logo {
    max-height: 36px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* Subtle greyscale + dimmed at rest; full colour on hover. Standard
       trust-strip pattern (Idealo / PriceRunner / Kelkoo). 70% retains
       a hint of brand colour so the logos still feel alive at rest. */
    filter: grayscale(70%);
    opacity: 0.65;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.merchant-strip-tile:hover .merchant-strip-logo,
.merchant-strip-tile:focus-visible .merchant-strip-logo {
    filter: grayscale(0);
    opacity: 1;
}

/* Amazon special-case (text + smile) — no asset file; mirrors the
   greyscale-on-rest / colour-on-hover treatment of the image logos via
   a parent .merchant-strip-amazon class. */
.merchant-strip-amazon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    transition: filter 0.2s ease, opacity 0.2s ease;
    filter: grayscale(70%);
    opacity: 0.65;
}
.merchant-strip-tile:hover .merchant-strip-amazon,
.merchant-strip-tile:focus-visible .merchant-strip-amazon {
    filter: grayscale(0);
    opacity: 1;
}
.merchant-strip-amazon-word {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #232F3E;
    letter-spacing: -0.02em;
}
.merchant-strip-amazon-smile {
    width: 64px;
    height: 16px;
    margin-top: -2px;
    display: block;
}
/* Full-bleed homepage variant — let the carousel extend edge-to-edge.
   Add a bit of side gutter so the first/last logos don't kiss the
   viewport edge on ultrawide and the prev/next arrows have somewhere
   to sit without overhanging. The footer variant uses .container, so
   it inherits the global container max-width / gutter and needs no
   extra rule.

   box-sizing: border-box is required because this codebase doesn't have
   a `* { box-sizing: border-box }` global reset and Bootstrap's container
   classes inherit content-box. Without this the padding adds to width
   and the strip overflows the viewport (the prev/next arrows then sit
   off-screen — exactly the bug seen on the homepage trust strip). */
.merchant-strip > .container-fluid {
    box-sizing: border-box;
    padding-left: max(16px, 2vw);
    padding-right: max(16px, 2vw);
}
/* Pull the prev/next arrows inside the track edge so they don't clip
   off the viewport on the full-bleed variant. The global .splide__arrow
   rule sits the buttons at -4px (overhang); on the trust strip we need
   them inside. Selectors target the .merchant-strip ancestor — beats the
   global .swipe-row-splide rule on specificity. */
.merchant-strip .merchant-strip-swipe .splide__arrow--prev { left: 4px; }
.merchant-strip .merchant-strip-swipe .splide__arrow--next { right: 4px; }
@media (max-width: 767px) {
    .merchant-strip { padding: 14px 0 10px; }
    .merchant-strip-tile { height: 44px; padding: 4px 14px; }
    .merchant-strip-logo { max-height: 30px; max-width: 100px; }
}
.swipe-row-title-link a:hover .swipe-row-title-chevron,
.swipe-row-title-link a:focus-visible .swipe-row-title-chevron {
    transform: translateX(4px);
}

/* Generic clickable section heading (homepage, category-page row titles).
   Mirrors the swipe-row-title pattern but for non-Splide grids. */
.section-heading-link a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.section-heading-link a:hover,
.section-heading-link a:focus-visible {
    color: #F68600;
    text-decoration: none;
}
.section-heading-chevron {
    display: inline-block;
    font-size: 0.7em;
    color: #F68600;
    transition: transform 0.15s ease;
}
.section-heading-link a:hover .section-heading-chevron,
.section-heading-link a:focus-visible .section-heading-chevron {
    transform: translateX(4px);
}

.swipe-row-splide {
    position: relative;
    /* Spare a little gutter for the absolute-positioned arrows so they
       don't clip the first/last slides. Matched to .splide__arrow size. */
    padding: 0 8px;
}

/* Slides are flex items; widths set via variant classes below. */
.swipe-row-splide .splide__list { display: flex; }
.swipe-row-splide .splide__slide { flex: 0 0 auto; height: auto; }

/* Edge fade mask — signals "more content to the right" when the row
   overflows. Splide adds .is-overflow when slides exceed track width;
   we only show the fade when that class is present.
   RIGHT-edge only: a left-edge mask was clipping the first slide on
   initial load and made the leftmost card look broken on mobile (text
   + image partially missing). Now the user always sees a complete
   first card and a teaser of the next. */
.swipe-row-splide.is-overflow .splide__track {
    -webkit-mask-image: linear-gradient(to right,
        #000 0,
        #000 calc(100% - 48px),
        transparent 100%);
            mask-image: linear-gradient(to right,
        #000 0,
        #000 calc(100% - 48px),
        transparent 100%);
}

/* Arrows — floating pill buttons over the track edges.
   Splide disables arrows at the ends; CSS fades them out so you
   don't see dead/grey controls. Hidden on touch-first breakpoints. */
.swipe-row-splide .splide__arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.swipe-row-splide .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #e1e3e5;
    border-radius: 50%;
    color: #2c2c2c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s, background 0.15s, transform 0.15s;
}
.swipe-row-splide .splide__arrow--prev { left: -4px; }
.swipe-row-splide .splide__arrow--next { right: -4px; }
.swipe-row-splide .splide__arrow:hover:not(:disabled) {
    background: #f7f7f7;
    transform: translateY(-50%) scale(1.05);
}
.swipe-row-splide .splide__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}
/* Inline SVG arrow icons (defined in swipe-row.php) — sized + colored
   via currentColor so they pick up the button's color rule below. */
.swipe-row-splide .splide__arrow svg { width: 14px; height: 14px; display: block; }

/* Touch-primary devices (phones, tablets, touch laptops in touch mode):
   rely on native touch-drag; hide arrow chrome. (hover: none) is the
   modern detection — doesn't depend on viewport width, so iPads in
   landscape (1024px+) still get the touch-only treatment. */
@media (hover: none) {
    .swipe-row-splide .splide__arrows { display: none; }
    .swipe-row-splide { padding: 0; }
}

/* ----- Variant: product tiles ---------------------------------
   Reuses .grid_item.product markup from loop-product.php. Fixed
   tile widths keep the rhythm consistent across rows. ----------- */
.swipe-row-products .splide__slide {
    width: 160px;
}
@media (min-width: 480px) { .swipe-row-products .splide__slide { width: 180px; } }
@media (min-width: 768px) { .swipe-row-products .splide__slide { width: 210px; } }
@media (min-width: 1200px) { .swipe-row-products .splide__slide { width: 230px; } }

/* Cards inside the row ignore the grid's default 100% behaviour. */
.swipe-row-products .splide__slide .grid_item.product {
    width: 100%;
    margin: 0;
}

/* Discount badge — pull inside the slide bounds so the splide__track
   overflow:hidden doesn't clip the right-edge overhang. The default
   .product .featured_save sits at top:-8px right:-8px (overhangs) for
   normal grid layout; that overhang gets cut by the next slide inside
   a swipe-row. */
.swipe-row-products .splide__slide .product .featured_save {
    top: 4px;
    right: 4px;
}

/* ----- Variant: blog cards ------------------------------------- */
.swipe-row-blog .splide__slide {
    width: 260px;
}
@media (min-width: 768px) { .swipe-row-blog .splide__slide { width: 290px; } }
@media (min-width: 1200px) { .swipe-row-blog .splide__slide { width: 320px; } }

/* ----- Variant: compact tiles (stores/brands/shop-with-confidence)
   Square-ish logo tiles with uniform spacing. ------------------- */
.swipe-row-tiles .splide__slide {
    width: 180px;
}
@media (min-width: 768px) { .swipe-row-tiles .splide__slide { width: 200px; } }

/* ----- "Shop With Confidence" icon strip (4 items, no image) ---
   Centre the row when content fits (.is-overflow added by Splide
   only when slides exceed track width). On mobile slides stack
   tighter and become swipable just like the other variants. */
.swipe-row-usp .splide__slide {
    width: 220px;
    text-align: center;
    padding: 4px 12px;
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.swipe-row-usp:not(.is-overflow) .splide__list { justify-content: center; }
.swipe-row-usp .splide__slide svg {
    color: #F68600;
    flex-shrink: 0;
}
.swipe-row-usp .splide__slide .fas,
.swipe-row-usp .splide__slide .far,
.swipe-row-usp .splide__slide .fal {
    color: #F68600;
}
@media (max-width: 767px) {
    .swipe-row-usp .splide__slide { width: 180px; padding: 4px 8px; font-size: 13px; }
}