/* ============================================================================
   CLEAN MINIMAL PRODUCT BOX CAPTION DESIGN - SimplexTheme
   ============================================================================ */

/* CSS Custom Properties for Design System */
:root {
    /* Spacing Scale */
    --spacing-xxs: 1px;
    --spacing-xs: 2px;
    --spacing-s: 4px;
    --spacing-m: 8px;
    --spacing-l: 12px;
    --spacing-xl: 16px;

    /* Typography Scale */
    --font-family-base: var(--font-default);
    --font-size-title: 16px;
    --font-size-price: 13px;
    --font-size-secondary: 13px;
    --font-size-meta: 12px;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.3;
    --line-height-relaxed: 1.4;

    /* Colors */
    --color-title: #999999;
    --color-price: #333333;
    --color-secondary: #999999;
    --color-meta: #999999;
    --color-old-price: #999999;
}

/* ============================================================================
   CAPTION CONTAINER - Clean Minimal Foundation
   ============================================================================ */

/* SimplexTheme structure (.caption .details) */
.product-item .caption {
    padding: var(--spacing-m) !important;
    margin: 0 !important;
    background: transparent !important;
    border-top: solid 1px #f0f0f0 !important;
    box-shadow: none !important;
}

.product-item .caption .details {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-m) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Base theme structure (.details directly) */
.product-item .details {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-m) !important;
    margin: 0 !important;
    padding: var(--spacing-m) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   TITLE STYLING - Primary Hierarchy Element
   ============================================================================ */

/* SimplexTheme structure */
.product-item .caption .details .title-price-inline {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
}

.product-item .caption .details .product-title-inline,
.product-item .caption .details .product-title {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-base) !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    max-height: calc(var(--font-size-title) * var(--line-height-base) * 2) !important;
}

.product-item .caption .details .product-title-inline a,
.product-item .caption .details .product-title a {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: var(--line-height-base) !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-item .caption .details .product-title-inline a:hover,
.product-item .caption .details .product-title a:hover {
    text-decoration: none !important;
}

/* Base theme structure */
.product-item .details .product-title {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-base) !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    max-height: calc(var(--font-size-title) * var(--line-height-base) * 2) !important;
}

.product-item .details .product-title a {
    color: var(--color-title) !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-base) !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-item .details .product-title a:hover {
    color: var(--color-title) !important;
    text-decoration: none !important;
}

/* ============================================================================
   PRICE STYLING - Secondary Hierarchy Element
   ============================================================================ */

/* SimplexTheme structure */
.product-item .caption .details .prices-inline,
.product-item .caption .details .prices {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-m) !important;
    align-items: baseline !important;
    text-align: left !important;
}

.product-item .caption .details .prices-inline .price,
.product-item .caption .details .prices .price,
.product-item .caption .details .prices span {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-price) !important;
    line-height: var(--line-height-tight) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.product-item .caption .details .prices-inline .actual-price,
.product-item .caption .details .prices .actual-price {
    color: var(--color-price) !important;
    font-weight: 600 !important;
}

.product-item .caption .details .prices-inline .old-price,
.product-item .caption .details .prices .old-price {
    color: var(--color-old-price) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* Base theme structure */
.product-item .details .prices {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-m) !important;
    align-items: baseline !important;
    text-align: left !important;
}

.product-item .details .prices .price,
.product-item .details .prices span {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-price) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.product-item .details .prices .actual-price {
    color: var(--color-price) !important;
    font-weight: 600 !important;
}

.product-item .details .prices .old-price {
    color: var(--color-old-price) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* ============================================================================
   SECONDARY INFORMATION - Tertiary Hierarchy
   ============================================================================ */

/* SimplexTheme and Base theme structure (both use same selectors) */
.product-item .caption .details .sku,
.product-item .details .sku {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-meta) !important;
    font-weight: 400 !important;
    line-height: var(--line-height-tight) !important;
    color: var(--color-meta) !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.product-item .caption .details .description,
.product-item .details .description {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: 14px !important;
    line-height: var(--line-height-base) !important;
    color: #999999 !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    max-height: calc(var(--font-size-secondary) * var(--line-height-base) * 2) !important;
}

/* ============================================================================
   PRE-ORDER AVAILABILITY - Meta Information
   ============================================================================ */

/* SimplexTheme and Base theme structure */
.product-item .caption .details .pre-order-availability,
.product-item .details .pre-order-availability {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: var(--line-height-tight) !important;
    color: #999999 !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

.product-item .caption .details .pre-order-availability .availability-label,
.product-item .caption .details .pre-order-availability .availability-date,
.product-item .details .pre-order-availability .availability-label,
.product-item .details .pre-order-availability .availability-date {
    font-family: var(--font-family-base) !important;
    font-size: 14px !important;
    color: #999999 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================================
   HIDE VISUAL CLUTTER - Minimal Design Elements
   ============================================================================ */

/* Remove decorative elements for minimal design - SimplexTheme and Base theme */
.product-item .caption .details .product-border-bottom,
.product-item .caption .details .product-rating-box,
.product-item .caption .details .rating,
.product-item .details .product-border-bottom,
.product-item .details .product-rating-box,
.product-item .details .rating {
    display: none !important;
}

/* Hide or minimize tax and shipping info if present - SimplexTheme and Base theme */
.product-item .caption .details .tax-shipping-info,
.product-item .caption .details .base-price-pangv,
.product-item .details .tax-shipping-info,
.product-item .details .base-price-pangv {
    display: none !important;
}

/* ============================================================================
   RESPONSIVE DESIGN - Mobile-First Approach
   ============================================================================ */

/* Mobile Optimization (< 768px) */
@media (max-width: 767px) {
    :root {
        --font-size-title: 15px;
        --font-size-price: 12px;
        --font-size-secondary: 12px;
        --font-size-meta: 11px;
        --spacing-s: 3px;
        --spacing-m: 6px;
    }

    .product-item .caption {
        padding: var(--spacing-s) !important;
    }

    .product-item .caption .details {
        gap: calc(var(--spacing-s) - 1px) !important;
    }
}

/* Small Mobile Optimization (< 480px) */
@media (max-width: 479px) {
    :root {
        --font-size-title: 15px;
        --font-size-price: 11px;
        --font-size-secondary: 11px;
        --font-size-meta: 10px;
        --spacing-xs: 1px;
        --spacing-s: 2px;
        --spacing-m: 4px;
    }

    .product-item .caption .details .title-price-inline {
        margin-bottom: var(--spacing-s) !important;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Focus states for keyboard navigation */
.product-item .caption .details .product-title-inline a:focus,
.product-item .caption .details .product-title a:focus,
.product-item .details .product-title a:focus {
    outline: 2px solid #ea5648 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-title: #999999;
        --color-price: #000000;
        --color-secondary: #999999;
        --color-meta: #999999;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-title: #999999;
        --color-price: #f0f0f0;
        --color-secondary: #999999;
        --color-meta: #999999;
        --color-old-price: #888888;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .product-item .caption,
    .product-item .caption * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   PRINT STYLES - Optimized for Print Layout
   ============================================================================ */

@media print {
    .product-item .caption {
        break-inside: avoid !important;
        margin-bottom: 10px !important;
    }

    .product-item .caption .details .product-title-inline a,
    .product-item .caption .details .product-title a,
    .product-item .details .product-title a {
        color: #000000 !important;
        text-decoration: none !important;
    }

    .product-item .caption .details .prices-inline .actual-price,
    .product-item .caption .details .prices .actual-price,
    .product-item .details .prices .actual-price {
        color: #000000 !important;
        font-weight: bold !important;
    }
}

/* ============================================================================
   GRID-SPECIFIC OPTIMIZATIONS
   ============================================================================ */

/* Product Grid Layout */
.product-grid .item-box .product-item .caption {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

.product-grid .item-box .product-item .caption .details {
    height: auto !important;
    overflow: visible !important;
}

/* OCarousel Grid Layout */
.ocarousel-grid .item-box .product-item .caption {
    height: auto !important;
    min-height: auto !important;
    padding: var(--spacing-s) !important;
}

.ocarousel-grid .item-box .product-item .caption .details {
    gap: calc(var(--spacing-s) - 1px) !important;
}

/* OCarousel Grid - Allow more height for description and pre-order-availability */
.ocarousel-grid .item-box .product-item .caption .details .description {
    -webkit-line-clamp: 3 !important;
    max-height: calc(var(--font-size-secondary) * var(--line-height-base) * 3) !important;
    font-size: 14px !important;
    color: #999999 !important;
}

.ocarousel-grid .item-box .product-item .caption .details .pre-order-availability {
    white-space: normal !important;
    max-height: none !important;
    line-height: var(--line-height-base) !important;
    font-size: 14px !important;
    color: #999999 !important;
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* GPU acceleration for smooth rendering */
.product-item .caption {
    transform: translateZ(0) !important;
    will-change: auto !important;
}

/* Efficient repaints */
.product-item .caption .details > * {
    contain: layout style !important;
}

/* ============================================================================
   LEGACY BROWSER FALLBACKS
   ============================================================================ */

/* Flexbox fallback for older browsers */
.no-flexbox .product-item .caption .details {
    display: block !important;
}

.no-flexbox .product-item .caption .details > * {
    margin-bottom: 4px !important;
}

/* Line-clamp fallback */
.no-webkit-line-clamp .product-item .caption .details .product-title-inline,
.no-webkit-line-clamp .product-item .caption .details .product-title {
    max-height: 36px !important; /* Approximately 2 lines */
    overflow: hidden !important;
}

.no-webkit-line-clamp .product-item .caption .details .description {
    max-height: 32px !important; /* Approximately 2 lines */
    overflow: hidden !important;
}

/* ============================================================================
   DEBUG MODE (Uncomment for development debugging)
   ============================================================================ */

/*
.debug .product-item .caption {
    border: 1px dashed red !important;
}

.debug .product-item .caption .details > * {
    border: 1px dotted blue !important;
    background: rgba(0, 0, 255, 0.05) !important;
}
*/

/* ============================================================================
   RESPONSIVE FONT SIZES - Match .product-title-inline breakpoints
   ============================================================================ */

@media (max-width: 768px) {
    .ocarousel-grid .item-box .product-item .caption .details .description,
    .ocarousel-grid .item-box .product-item .caption .details .pre-order-availability {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .description,
    .product-item .details .description {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability,
    .product-item .details .pre-order-availability {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability .availability-label,
    .product-item .caption .details .pre-order-availability .availability-date,
    .product-item .details .pre-order-availability .availability-label,
    .product-item .details .pre-order-availability .availability-date {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .prices-inline .old-price,
    .product-item .caption .details .prices .old-price,
    .product-item .details .prices .old-price {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .ocarousel-grid .item-box .product-item .caption .details .description,
    .ocarousel-grid .item-box .product-item .caption .details .pre-order-availability {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .description,
    .product-item .details .description {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability,
    .product-item .details .pre-order-availability {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability .availability-label,
    .product-item .caption .details .pre-order-availability .availability-date,
    .product-item .details .pre-order-availability .availability-label,
    .product-item .details .pre-order-availability .availability-date {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .prices-inline .old-price,
    .product-item .caption .details .prices .old-price,
    .product-item .details .prices .old-price {
        font-size: 11px !important;
    }
}