/* ==========================================================================
   Products Carousel Section — the "Products Carousel Section" widget
   (IpSupply_BestSellers)
   --------------------------------------------------------------------------
   The widget's styling lives INSIDE the module rather than in the theme:
   removing the module leaves no orphaned CSS behind, and swapping themes does
   not mean dragging this pile of rules along.

   Known trade-off: this is plain CSS, so the theme's LESS variables (@pl-*) are
   not available. The values below are COPIED from Netstore/v2's `_tokens.less`
   and collected in the :root block underneath — change the brand there.

   SPECIFICITY TRAP: the theme sets the homepage widget grid to 5 columns with
        .cms-index-index .block.widget.block-products-list
        .products-grid.grid .product-items.widget-product-grid      (8 classes)
   and `_shop-responsive.less` drops that to 3 and then 2 columns per breakpoint.
   This file is loaded BEFORE styles-m.css (module layout merges before theme
   layout), so a specificity tie LOSES. The track rules below are therefore
   written out in full as `.ipbs .ipbs__track ...` (9 classes) to win on class
   count rather than relying on load order.

   BEHAVIOUR: the ‹ › buttons, drag-to-scroll and 10s auto-advance come from the
   theme's web/js/products-carousel.js, which binds to the `data-ns-carousel`
   attribute on the section. Without that script the rules below still leave a
   horizontally scrollable row, so the section degrades to native swipe/scroll
   instead of breaking.
   ========================================================================== */

:root {
    /* Copied from the Netstore/v2 theme's _tokens.less */
    --ipbs-navy: #0e2a4f;
    --ipbs-primary: #1e73e8;
    --ipbs-primary-700: #1760c9;
    --ipbs-orange: #f2742c;
    --ipbs-green: #3fb95a;
    --ipbs-teal: #11b5a4;
    --ipbs-violet: #8a4fd3;
    --ipbs-coral: #ee4d5a;
    --ipbs-surface: #ffffff;
    --ipbs-border: #e7ecf4;
    --ipbs-muted: #5a6b85;
    --ipbs-font: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    --ipbs-shadow: 0 1px 2px rgba(16, 42, 79, 0.05);
    --ipbs-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Cards visible at once, and the gap between them. Overridden per
       breakpoint at the bottom of this file — one place to retune the row. */
    --ipbs-cols: 5;
    --ipbs-gap: 16px;
}

/* ── SECTION ACCENT ──────────────────────────────────────── */
/* The widget's "Section colour" dropdown lands here as a modifier class. Every
   accented part of the section reads --ipbs-accent, so adding a colour means one
   rule below and one option in Model/Source/Accent.php — nothing else. */

.ipbs {
    --ipbs-accent: var(--ipbs-primary);
}

.ipbs--orange {
    --ipbs-accent: var(--ipbs-orange);
}

.ipbs--green {
    --ipbs-accent: var(--ipbs-green);
}

.ipbs--teal {
    --ipbs-accent: var(--ipbs-teal);
}

.ipbs--violet {
    --ipbs-accent: var(--ipbs-violet);
}

.ipbs--coral {
    --ipbs-accent: var(--ipbs-coral);
}

/* NO SECTION SHELL RULE ON PURPOSE — `.ipbs` sets no margin of its own. The
   page around the widget owns the gap between sections (on the home page that
   is `.pl-sec { padding-top }` in the CMS content); a margin here stacked on
   top of it and left a double gap under every carousel. */

/* ── HEADING — one line, centred, in the section colour ──── */
/* Deliberately just a title: no eyebrow, no subtitle. Three stacked pieces of
   text competing above a row of cards buried the cards; one coloured line reads
   at a glance and is what tells this section apart from the one above it.
   Weight caps at 700 — the heaviest the type scale goes on this site. */

.ipbs__head {
    margin: 0 0 26px;
    text-align: center;
}

/* Three classes on purpose. The title is an <h2> inside .column.main, and the
   theme sizes those with `.column.main h2 { font-size: @h3__font-size }`
   (_content.less) — specificity (0,2,1), which beats a lone `.ipbs__title` and
   silently shrinks the heading to 1.2rem. This file also loads BEFORE
   styles-m.css, so a tie would lose too; (0,3,0) is what actually wins. */
.ipbs .ipbs__head .ipbs__title {
    margin: 0;
    font-family: var(--ipbs-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ipbs-accent);
}

/* ── "View all", centred under the row ───────────────────── */
/* Below the cards rather than opposite the title: the heading has to stay
   centred to match the rest of the page, and a link pinned to the right of a
   centred title reads as a mistake. */

.ipbs__foot {
    margin-top: 22px;
    text-align: center;
}

/* The :visited twin is not optional. The theme ships
   `a:visited { color: @netstore-accent }` — specificity (0,1,1), an element plus
   a pseudo-class — which outranks this single-class rule, so a link someone has
   already followed would silently repaint itself primary blue. */
.ipbs__all,
.ipbs__all:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid var(--ipbs-border);
    border-radius: 999px;
    background: var(--ipbs-surface);
    font-family: var(--ipbs-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--ipbs-navy);
    text-decoration: none;
    transition: gap 0.25s var(--ipbs-ease), color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* Arrow tinted via currentColor through a mask.
   ::after defaults to display:inline, which ignores width/height — force block. */
.ipbs__all::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M5%2012h14M13%206l6%206-6%206%22/%3E%3C/svg%3E);
    mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M5%2012h14M13%206l6%206-6%206%22/%3E%3C/svg%3E);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.ipbs__all:hover,
.ipbs__all:focus {
    gap: 12px;
    color: var(--ipbs-accent);
    border-color: var(--ipbs-accent);
    background: var(--ipbs-surface);
    text-decoration: none;
}

/* ── CAROUSEL ────────────────────────────────────────────── */

/* Drop the widget's default bottom margin — the page around the section owns
   the spacing, see the note next to the heading above. */
.ipbs .ipbs__track .block.widget.block-products-list {
    margin-bottom: 0;
}

/* Anchor for the ‹ › buttons the script appends. It picks this element as the
   wrapper (the track's parent), so the positioning context has to be here. */
.ipbs .ipbs__track .block.widget.block-products-list .products-grid.grid {
    position: relative;
}

/* The track: one row that scrolls sideways instead of a wrapping grid.
   9 classes to beat the theme's 5-column homepage rule and its responsive
   3/2-column ones — see the SPECIFICITY TRAP note at the top. */
.ipbs .ipbs__track .block.widget.block-products-list .products-grid.grid .product-items.widget-product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--ipbs-gap) !important;
    list-style: none;
    margin: 0 !important;
    /* Bottom padding leaves room for the cards' hover shadow, which overflow-y
       would otherwise clip. */
    padding: 0 0 12px !important;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    cursor: grab;
    /* The row is driven by the ‹ › buttons, dragging and swiping — the native
       scrollbar underneath it would just be visual noise. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ipbs .ipbs__track .block.widget.block-products-list .products-grid.grid .product-items.widget-product-grid::-webkit-scrollbar {
    display: none;
}

/* Mid-drag: snapping and smooth scrolling fight the pointer, so turn both off
   for the duration. The class is added by the script. */
.ipbs .ipbs__track .products-grid.grid .product-items.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

/* Each card is exactly 1/N of the visible width once the gaps are taken out, so
   a full N cards fit and none is left half-showing. The -1px absorbs subpixel
   rounding that would otherwise let the next card peek through.
   margin/padding/float are reset to override Magento's default float grid. */
.ipbs .ipbs__track .block.widget.block-products-list .products-grid.grid .product-item {
    flex: 0 0 calc((100% - (var(--ipbs-cols) - 1) * var(--ipbs-gap)) / var(--ipbs-cols) - 1px) !important;
    scroll-snap-align: start;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ── NAV BUTTONS (appended by the carousel script) ───────── */

.ipbs .ns-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ipbs-border);
    border-radius: 50%;
    background: var(--ipbs-surface);
    color: var(--ipbs-navy);
    cursor: pointer;
    box-shadow: var(--ipbs-shadow);
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ipbs .ns-carousel-nav svg {
    width: 18px;
    height: 18px;
}

.ipbs .ns-carousel-nav:hover:not(:disabled) {
    background: var(--ipbs-primary);
    color: var(--ipbs-surface);
    border-color: var(--ipbs-primary);
}

/* Hidden rather than greyed out once the row is at one end, or when there are
   too few cards to scroll at all. */
.ipbs .ns-carousel-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.ipbs .ns-carousel-nav--prev {
    left: 4px;
}

.ipbs .ns-carousel-nav--next {
    right: 4px;
}

/* ==========================================================================
   RESPONSIVE — only the card count and the gap change
   ========================================================================== */

@media only screen and (max-width: 1279px) {
    :root {
        --ipbs-cols: 4;
    }
}

@media only screen and (max-width: 1023px) {
    :root {
        --ipbs-cols: 3;
        --ipbs-gap: 14px;
    }
}

/* Two cards from here all the way down to the narrowest phone, matching the
   Related Products carousel on a product page (_product-detail-responsive.less
   sets --ns-cols: 2 below 768). A fractional count was tried below 480px to hint
   that the row scrolls, but it just read as a card cut in half — and made the
   two carousels behave differently on the same phone. */
@media only screen and (max-width: 767px) {
    :root {
        --ipbs-cols: 2;
        --ipbs-gap: 10px;
    }

    .ipbs__head {
        margin-bottom: 18px;
    }

    .ipbs .ipbs__head .ipbs__title {
        font-size: 22px;
    }

    .ipbs__all {
        font-size: 12.5px;
    }

    /* Touch devices scroll the row by swiping, and a 36px button sitting over
       the first card just gets in the way of tapping it. */
    .ipbs .ns-carousel-nav {
        display: none;
    }
}