/* ==========================================================================
   Cards Product Slider — navy section + Slick slider of product cards.
   ========================================================================== */

.section.cardsproductslider {
    padding-top: 64px;
    padding-bottom: 64px;
    background: var(--color-navy);
    overflow: hidden; /* clip the right-edge bleed; no horizontal scrollbar */
}

/* ---- Header ------------------------------------------------------------- */
.cardsproductslider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}
.cardsproductslider-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 920px;
}
.cardsproductslider-eyebrow {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-size: var(--text-label-xs);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-background);
    background: var(--color-brand-light-blue);
    padding: 7px 14px 6px;
    clip-path: polygon(1.8% 0, 100% 0, 98.2% 100%, 0% 100%);
}
.cardsproductslider-heading {
    margin: 0;
    color: var(--color-background);
}
.cardsproductslider-subcopy,
.cardsproductslider-subcopy p {
    color: var(--color-background);
}
.cardsproductslider-subcopy a {
    color: var(--color-background);
    text-decoration: underline;
}
.cardsproductslider-subcopy a:hover { text-decoration: none; }

/* ---- Controls (arrows + catalog button) -------------------------------- */
.cardsproductslider-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
/* Catalog + card buttons use the global .btn .btn-secondary — no local styling. */

/* ---- Overlay nav arrows (left/right, reveal on hover) ------------------- */
/* Positioned relative to the container-width slider wrapper; the track inside
   still full-bleeds off the right via its negative margins. */
.cardsproductslider-slider {
    position: relative;
}
.cardsproductslider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-background);   /* white */
    color: var(--color-navy);
    font-size: 16px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;                  /* not clickable until revealed */
    transition: opacity var(--ease-default), background var(--ease-default), transform var(--ease-fast);
}
.cardsproductslider-nav.cardsproductslider-prev { left: -20px; }
.cardsproductslider-nav.cardsproductslider-next { right: -20px; }
.cardsproductslider-nav:hover { background: var(--color-neutral-100); }
.cardsproductslider-nav:active { transform: translateY(-50%) scale(0.94); }
.cardsproductslider-nav:focus-visible {
    outline: 2px solid var(--color-background);
    outline-offset: 2px;
    opacity: 1;
    pointer-events: auto;
}

/* Reveal when hovering anywhere over the slider area */
.cardsproductslider-slider:hover .cardsproductslider-nav {
    opacity: 1;
    pointer-events: auto;
}

/* Touch devices have no hover — keep the arrows visible so they're usable */
@media (hover: none) {
    .cardsproductslider-nav { opacity: 1; pointer-events: auto; }
}

/* ---- Slider track ------------------------------------------------------- */
/* Cards are a FIXED width (variableWidth Slick) so the product image can't blow
   the card out, and ~4 + a peek are visible. The track keeps its left edge on
   the container but bleeds off the right edge of the page. The 28px gutter is
   each slide's right padding. */
.cardsproductslider-track {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.cardsproductslider-track:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}
.cardsproductslider-slide {
    box-sizing: border-box;
    width: 338px;            /* 310 card + 28 gutter */
    flex: 0 0 338px;
    padding: 10px 28px 10px 0;
    height: auto;
}
.cardsproductslider-track .slick-track { display: flex; }
.cardsproductslider-track .slick-slide { height: auto; }
/* Inset the start so the previous (cloned) card peeks on the left, mirroring
   the partial card on the right. */
.cardsproductslider-track .slick-list { padding-left: clamp(48px, 7vw, 96px); }

/* ---- Card --------------------------------------------------------------- */
.cardsproductslider-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 24px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cardsproductslider-card:hover,
.cardsproductslider-card:focus-within {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.cardsproductslider-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 263 / 254;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}
.cardsproductslider-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.cardsproductslider-card:hover .cardsproductslider-card-image img,
.cardsproductslider-card:focus-within .cardsproductslider-card-image img {
    transform: scale(1.05);
}

.cardsproductslider-card-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 auto;
}
.cardsproductslider-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cardsproductslider-card-heading {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-label-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cardsproductslider-card-subcopy {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-paragraph-sm);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-secondary-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cardsproductslider-card-btn {
    align-self: flex-start;
    margin-top: auto;
    /* allow the label to wrap to two lines instead of being clipped */
    white-space: normal;
    height: auto;
    text-align: left;
    justify-content: flex-start;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .cardsproductslider-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    /* No hover on mobile/tablet — keep the nav arrows visible and on-screen. */
    .cardsproductslider-nav {
        opacity: 1;
        pointer-events: auto;
    }
    .cardsproductslider-nav.cardsproductslider-prev { left: 4px; }
    .cardsproductslider-nav.cardsproductslider-next { right: 4px; }
}

@media (max-width: 575px) {
    .section.cardsproductslider { padding-top: 48px; padding-bottom: 48px; }
    /* Full-bleed track both sides so the centerMode peeks reach the page edges. */
    .cardsproductslider-track {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .cardsproductslider-slide {
        width: 84vw;
        flex-basis: 84vw;
        padding: 10px;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cardsproductslider-card,
    .cardsproductslider-card-image img,
    .cardsproductslider-nav { transition: none; }
    .cardsproductslider-card:hover,
    .cardsproductslider-card:focus-within { transform: none; }
    .cardsproductslider-card:hover .cardsproductslider-card-image img { transform: none; }
}