/* Darson product carousel (shared by all pages with a #products section)
   Swipe on touch, drag on desktop, arrows + dots, CSS scroll-snap. */

.product-carousel {
    --pc-gap: 1rem;
    --pc-edge: 1rem;
    position: relative;
}

.product-track {
    position: relative; /* makes card.offsetLeft relative to the track */
    display: flex;
    align-items: stretch; /* every card = same height */
    gap: var(--pc-gap);
    /* bleed to the viewport edge on phones so the next card peeks in;
       padding gives hover shadow / lift room that overflow would clip */
    margin: 0 calc(var(--pc-edge) * -1);
    padding: 0.5rem var(--pc-edge) 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pc-edge);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
}

.product-track::-webkit-scrollbar {
    display: none;
}

.product-track:focus-visible {
    outline: 2px solid #170071;
    outline-offset: -2px;
    border-radius: 0.75rem;
}

.product-track .product-card {
    flex: 0 0 82%;
    min-width: 0;
    scroll-snap-align: start;
}

/* Desktop mouse: grab cursor + drag-to-scroll (JS adds .is-dragging) */
@media (hover: hover) and (pointer: fine) {
    .product-track {
        cursor: grab;
    }
}

.product-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
    -webkit-user-select: none;
}

.product-track.is-dragging * {
    pointer-events: none;
}

.product-track img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Card widths per breakpoint: always leave a peek of the next card */
@media (min-width: 640px) {
    .product-carousel {
        --pc-gap: 1.5rem;
    }
    .product-track .product-card {
        flex-basis: calc((100% - var(--pc-gap)) / 2.15);
    }
}

@media (min-width: 1024px) {
    .product-carousel {
        --pc-gap: 2rem;
    }
    .product-track .product-card {
        flex-basis: calc((100% - 2 * var(--pc-gap)) / 3.15);
    }
}

/* Controls */
.product-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.product-controls[hidden] {
    display: none;
}

.product-nav {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.product-nav svg {
    width: 1.1rem;
    height: 1.1rem;
}

.product-nav:hover:not(:disabled) {
    background: #170071;
    border-color: #170071;
    color: #fff;
}

.product-nav:focus-visible,
.product-dot:focus-visible {
    outline: 2px solid #170071;
    outline-offset: 2px;
}

.product-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.product-dots {
    display: flex;
    align-items: center;
}

.product-dot {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-dot::after {
    content: "";
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #d1d5db;
    transition: width 0.3s, background-color 0.3s;
}

.product-dot:hover::after {
    background: #9ca3af;
}

.product-dot[aria-current="true"]::after {
    width: 1.5rem;
    background: #170071;
}

@media (prefers-reduced-motion: reduce) {
    .product-track {
        scroll-behavior: auto;
    }
    .product-dot::after,
    .product-nav {
        transition: none;
    }
}

/* Spec rows: size the label column to its content so labels such as
   "Mean Particle Size" never wrap on narrow cards (replaces fixed 45/55 split) */
.product-card [class*="grid-cols-["] {
    grid-template-columns: auto minmax(0, 1fr);
}

.product-card [class*="grid-cols-["] > span:first-child {
    white-space: nowrap;
}