/**
 * B03 Products Carousel - Horizontal Product Slider Component
 * CSS ISOLATION: ALL classes prefixed with .saly-ps-
 * FIGMA DESIGN: 300×405px cards, Spartan typography, #4B1195 primary color
 *
 * Specification:
 * - Card: 300px width (responsive), 405px height (fixed)
 * - Image: 268×205px with 16px padding
 * - Typography: Spartan font family (Bold 700, SemiBold 600, Regular 400)
 * - Colors: #4B1195 (primary purple), #333333 (main black), #999999 (gray)
 * - Gap: 20px default (configurable via data-ps-gap)
 * - Items visible: 2-8 (configurable via data-ps-items-visible)
 */

/* Spartan Font Import */
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;600;700&display=swap');

/* ========================================
   BLOCK CONTAINER
   ======================================== */
.saly-ps-block-products-carousel {
    margin-bottom: 3rem;
    width: 100%;
}

/* ========================================
   HEADER WITH TITLE AND NAVIGATION
   ======================================== */
.saly-ps-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Section Title - Spartan Bold 18px */
.saly-ps-block-title {
    font-family: 'Spartan', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #333333; /* Main/Black */
    margin: 0; /* Remove default margin, controlled by header */
}

/* Navigation buttons container (Figma: top-right corner) */
.saly-ps-carousel-nav-buttons {
    display: flex;
    gap: 16px; /* Figma spec: 58px - 42px = 16px gap */
    align-items: center;
}

/* ========================================
   CAROUSEL WRAPPER & CONTAINER
   ======================================== */
.saly-ps-carousel-wrapper {
    position: relative;
    width: 100%;
}

.saly-ps-carousel-container {
    overflow-x: hidden; /* Hide horizontal overflow for carousel sliding */
    overflow-y: visible; /* Allow dropdowns to show below cards */
    width: 100%;
}

.saly-ps-carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override .product-list styles to preserve flex layout for carousel */
.saly-ps-carousel-track.product-list {
    display: flex !important; /* Keep flex layout, not grid */
    gap: 0; /* Gap is handled by padding-right on items */
    padding: 0; /* Remove any product-list padding */
}

/* ========================================
   CAROUSEL ITEMS (Fixed: 4 full cards + 1 partial)
   ======================================== */
.saly-ps-carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding-right: 20px; /* Gap between cards */
    /* Fixed width: 4 full cards + ~30% of 5th card visible */
    /* Formula: 100% / 4.3 = ~23.25% per card */
    width: calc((100% - (3 * 20px)) / 4.3);
    /* Flexbox for equal-height cards */
    display: flex;
    align-items: stretch;
}

/* ========================================
   NAVIGATION ARROWS (Figma: 42×40px rectangular with #4B1195 border)
   ======================================== */
.saly-ps-carousel-arrow {
    /* Figma spec: 42×40px rectangular buttons */
    width: 42px;
    height: 40px;
    border-radius: 4px;
    background: white;
    border: 1px solid #4B1195; /* Primary purple */

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 12px;

    transition: all 0.3s ease;
    flex-shrink: 0; /* Don't shrink in flexbox */
}

.saly-ps-carousel-arrow:hover {
    background: #F5F0FA; /* Light purple tint */
    border-color: #3A0D75; /* Darker purple */
}

.saly-ps-carousel-arrow:active {
    transform: scale(0.98);
}

.saly-ps-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #CCCCCC;
}

.saly-ps-carousel-arrow svg {
    color: #4B1195; /* Primary purple */
    width: 18px;
    height: 18px;
}

/* ========================================
   PRODUCT CARD (Figma: 300×405px)
   ======================================== */
.saly-ps-product-card {
    background: white;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    overflow: visible; /* Changed from hidden to allow dropdowns to show */
    min-height: 405px; /* Min height for consistency, allows expansion */

    display: flex;
    flex-direction: column;
    /* Hover effects managed by Svelte ProductCard component */
}

/* ========================================
   PRODUCT IMAGE (Figma: 268×205px)
   ======================================== */
.saly-ps-product-image-link {
    display: block;
    text-decoration: none;
}

.saly-ps-product-image {
    width: 100%;
    height: 205px; /* Figma spec */
    padding: 16px; /* Figma spec */
    background: #F9F9F9;
    overflow: hidden; /* Clip image zoom effect */
    position: relative; /* For absolute positioning of tags/buttons */
    border-radius: 8px 8px 0 0; /* Match card border radius for top corners */
}

/* Tags and corner button container (Figma: positioned over image) */
.saly-ps-product-tags-and-buttons {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    z-index: 1; /* Above image */
}

/* Tags container - wraps to multiple lines if needed */
.saly-ps-product-tags {
    display: flex;
    flex-wrap: wrap; /* Allow tags to wrap to new lines */
    gap: 8px;
    flex: 1;
    align-items: flex-start;
}

/* Individual tag - Figma: purple background, rounded */
.saly-ps-product-tag {
    background: #FAF6FE; /* Hue/Primary 100 */
    color: #4B1195; /* Primary purple */
    font-family: 'Spartan', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.24px;
    padding: 2px 10px;
    border-radius: 24px;
    white-space: nowrap;
}

/* Corner action button container */
.saly-ps-product-corner-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Corner action button - Figma: 42×40px button with icon (SVG contains background) */
.saly-ps-btn-corner-action {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    line-height: 0; /* Remove line-height spacing */
    transition: all 0.2s ease;
}

.saly-ps-btn-corner-action:hover {
    opacity: 0.9;
}

.saly-ps-btn-corner-action:active {
    transform: scale(0.95);
}

.saly-ps-btn-corner-action svg {
    display: block; /* Remove inline spacing */
    width: 42px;
    height: 40px;
}

.saly-ps-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Figma: contain, not cover */
    display: block;
    /* Hover effects managed by Svelte ProductCard component */
}

/* ========================================
   PRODUCT INFO (Figma: 268×184px)
   ======================================== */
.saly-ps-product-info {
    padding: 16px; /* Figma spec */
    height: 200px; /* 405px total - 205px image = 200px */
    display: flex;
    flex-direction: column;
    gap: 4px; /* Figma spec - gap between name, codes, price sections */
}

/* Product Name Container - Figma: gap 6px inside (if links inside) */
.saly-ps-product-name-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Product Name - Figma: Spartan Bold 14px, #333333, line-height 24px */
.saly-ps-product-name {
    font-family: 'Spartan', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 14px;
    line-height: 24px; /* Figma spec */
    letter-spacing: -0.28px; /* Figma spec */
    color: #333333; /* Main/Black */
    margin: 0;

    /* Max 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.saly-ps-product-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.saly-ps-product-name a:hover {
    color: #4B1195; /* Primary purple on hover */
}

/* Product Codes Container - Figma: Spartan Medium 10px, #333333 */
.saly-ps-product-codes {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Figma spec - gap between SKU and EAN */
    font-family: 'Spartan', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 10px;
    line-height: 15px; /* Figma spec */
    letter-spacing: -0.2px; /* Figma spec */
    color: #333333; /* Main/Black - Figma spec */
    margin: 0;
}

.saly-ps-product-codes p {
    margin: 0;
}

/* Price Container - Figma: flex with gap */
.saly-ps-product-price-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.saly-ps-product-price-row {
    display: flex;
    gap: 4px; /* Figma spec - gap between amount and currency */
    align-items: center;
    height: 24px; /* Figma spec */
}

/* Price Amount - Figma: Spartan Bold 14px, #4B1195, line-height 24px */
.saly-ps-product-price {
    font-family: 'Spartan', sans-serif;
    font-weight: 700; /* Bold - Figma spec */
    font-size: 14px;
    line-height: 24px; /* Figma spec */
    letter-spacing: -0.28px; /* Figma spec */
    color: #4B1195; /* Primary purple */
    margin: 0;
    white-space: nowrap;
}

/* Currency Group - Figma: flex with gap 2px */
.saly-ps-product-currency-group {
    display: flex;
    gap: 2px; /* Figma spec - gap between currency and label */
    align-items: center;
}

/* Currency Symbol - Figma: Spartan Bold 14px, #4B1195 */
.saly-ps-product-currency {
    font-family: 'Spartan', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 14px;
    line-height: 24px; /* Figma spec */
    letter-spacing: -0.28px; /* Figma spec */
    color: #4B1195; /* Primary purple */
    margin: 0;
}

/* Price Label - Figma: Spartan Medium 10px, #717175 */
.saly-ps-product-price-label {
    font-family: 'Spartan', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 10px;
    line-height: 15px; /* Figma spec */
    letter-spacing: -0.2px; /* Figma spec */
    color: #717175; /* Gray 800 - Figma spec */
    margin: 0;
}

/* ========================================
   ACTION BUTTONS (Figma: 40px height)
   ======================================== */
.saly-ps-product-actions {
    margin-top: auto; /* Stick to bottom */
    display: flex;
    gap: 8px;
}

/* Simplified "Zobacz produkt" button (renderer-only) */
.saly-ps-btn-view-product {
    flex: 1;
    height: 40px; /* Figma spec */

    font-family: 'Spartan', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 12px;
    line-height: 16px;

    background: #4B1195; /* Primary purple */
    color: #FFFFFF;
    border: none;
    border-radius: 4px;

    cursor: pointer;
    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    transition: background 0.2s ease;
}

.saly-ps-btn-view-product:hover {
    background: #3A0D75; /* Darker purple */
}

.saly-ps-btn-view-product:active {
    transform: scale(0.98);
}

.saly-ps-btn-icon {
    width: 16px;
    height: 16px;
}

/* ========================================
   NO PRODUCTS MESSAGE
   ======================================== */
.saly-ps-no-products {
    text-align: center;
    padding: 3rem;
    color: #718096;
    font-size: 1.125rem;
    margin: 0;
    width: 100%;
}

/* ========================================
   RESPONSIVE BREAKPOINTS (Fixed: X full cards + partial)
   ======================================== */

/* Mobile Small (<640px): 1 full card + partial */
@media (max-width: 639px) {
    .saly-ps-block-header {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .saly-ps-carousel-nav-buttons {
        gap: 12px;
    }

    .saly-ps-carousel-arrow {
        width: 36px;
        height: 36px;
        padding: 9px 10px;
    }

    .saly-ps-carousel-arrow svg {
        width: 16px;
        height: 16px;
    }

    /* Fixed: 1 full card + ~40% of 2nd card visible */
    .saly-ps-carousel-item {
        width: calc((100% - 16px) / 1.4);
        padding-right: 16px;
    }

    .saly-ps-block-title {
        font-size: 16px;
        line-height: 24px;
    }

    /* Smaller card on mobile */
    .saly-ps-product-card {
        min-height: 360px;
    }

    .saly-ps-product-image {
        height: 180px;
    }

    .saly-ps-product-info {
        height: 180px;
        padding: 12px;
    }
}

/* Tablet (640px - 1023px): 2 full cards + partial */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Fixed: 2 full cards + ~40% of 3rd card visible */
    .saly-ps-carousel-item {
        width: calc((100% - (2 * 20px)) / 2.4);
    }
}

/* ========================================
   VIEWPORT SIMULATION (test-runner)
   ======================================== */
/* Mobile viewport simulation for test-runner environment */
.viewport-mobile .saly-ps-carousel-item {
    width: calc((100% - 16px) / 1.4) !important;
    padding-right: 16px !important;
}

/* Tablet viewport simulation for test-runner environment */
.viewport-tablet .saly-ps-carousel-item {
    width: calc((100% - (2 * 20px)) / 2.4) !important;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.saly-ps-carousel-arrow:focus,
.saly-ps-product-image-link:focus,
.saly-ps-product-name a:focus,
.saly-ps-btn-view-product:focus {
    outline: 2px solid #4B1195;
    outline-offset: 2px;
}

.saly-ps-carousel-arrow:focus-visible,
.saly-ps-product-image-link:focus-visible,
.saly-ps-product-name a:focus-visible,
.saly-ps-btn-view-product:focus-visible {
    outline: 2px solid #4B1195;
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .saly-ps-carousel-arrow {
        display: none;
    }

    .saly-ps-product-card {
        break-inside: avoid;
    }
}

/* ========================================
   LOADING STATE (for future use)
   ======================================== */
.saly-ps-product-card--loading {
    opacity: 0.6;
    pointer-events: none;
}

.saly-ps-product-card--loading .saly-ps-product-img {
    animation: salyPsProductPulse 1.5s ease-in-out infinite;
}

@keyframes salyPsProductPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ========================================
   SKELETON LOADING (for ProductCard.svelte hydration)
   ======================================== */

/* Product Card Container - wrapper for Svelte injection */
.saly-ps-product-card-container {
    background: white;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    overflow: visible;
    /* No min-height - flex handles equal heights automatically */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    flex: 1; /* Stretch to match tallest sibling in carousel row */
}

/* Skeleton loading state */
.saly-ps-card-skeleton {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Skeleton Image placeholder */
.saly-ps-skeleton-image {
    width: 100%;
    height: 205px; /* Match product image height */
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: salyPsSkeletonShimmer 1.5s infinite;
    border-radius: 8px 8px 0 0;
}

/* Skeleton Content area */
.saly-ps-skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex: 1;
}

/* Skeleton line base styles */
.saly-ps-skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: salyPsSkeletonShimmer 1.5s infinite;
    border-radius: 4px;
}

/* Skeleton Name lines */
.saly-ps-skeleton-line--name {
    height: 20px;
    width: 100%;
}

.saly-ps-skeleton-line--name.saly-ps-skeleton-line--short {
    width: 70%;
}

/* Skeleton Code line */
.saly-ps-skeleton-line--code {
    height: 14px;
    width: 50%;
    margin-top: 4px;
}

/* Skeleton Price line */
.saly-ps-skeleton-line--price {
    height: 20px;
    width: 40%;
    margin-top: 8px;
}

/* Skeleton Action Button */
.saly-ps-skeleton-button {
    height: 40px;
    width: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: salyPsSkeletonShimmer 1.5s infinite;
    border-radius: 4px;
    margin-top: auto;
}

/* Skeleton shimmer animation */
@keyframes salyPsSkeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Hide skeleton when ProductCard is mounted (enhanced) */
[data-ps-enhanced="true"] .saly-ps-card-skeleton {
    display: none;
}

/* Noscript fallback link for users without JavaScript */
.saly-ps-noscript-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.saly-ps-noscript-link img {
    width: 100%;
    height: 205px;
    object-fit: contain;
    background: #F9F9F9;
    border-radius: 8px 8px 0 0;
}

.saly-ps-noscript-link span {
    padding: 16px;
    font-family: 'Spartan', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #333333;
}

/* ========================================
   SVELTE PRODUCTCARD OVERRIDES (context-specific styling)
   ======================================== */

/* ProductCard.svelte mounted inside B03 carousel */
.saly-ps-product-card-container .product-card {
    /* Remove default border and shadow - container provides these */
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 100% !important;
    border-radius: 0 !important;
}

/* Ensure ProductCard fills the container */
.saly-ps-product-card-container .product-card__container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hover effects managed by Svelte ProductCard component */

/* Override ProductCard image height for consistency */
.saly-ps-product-card-container .product-card__image-wrapper,
.saly-ps-product-card-container .product-card__photo-container {
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
}

/* ProductCard info section styling */
.saly-ps-product-card-container .product-card__info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
}

/* NOTE: Product card grid layout overrides moved to front/_productCard.scss */
/* This includes: grid-template-rows, min-height overrides, action-elements alignment */

/* Mobile responsive skeleton */
@media (max-width: 639px) {
    /* No min-height on mobile - flex handles equal heights */

    .saly-ps-skeleton-image {
        height: 180px;
    }

    .saly-ps-skeleton-content {
        padding: 12px;
    }

    .saly-ps-product-card-container .product-card__image-wrapper,
    .saly-ps-product-card-container .product-card__photo-container {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }
}