/**
 * Product Styles
 * Your Electrics - WooCommerce Product Cards, Grids & Pages
 *
 * Mobile-first approach:
 * - Default: 1 column (mobile)
 * - 768px+: 2 columns (tablet)
 * - 1024px+: 3 columns (desktop)
 *
 * Structure:
 * 1. Product Grid Layout
 * 2. Product Cards
 * 3. Product Card Hover Effects
 * 4. Category Cards
 * 5. Single Product Page
 * 6. Price & Stock Display
 * 7. Add to Cart Button
 * 8. Product Search Results
 */


/* ============================================
   1. PRODUCT GRID LAYOUT
   CSS Grid - responsive columns
   ============================================ */

/**
 * WooCommerce product grid
 * Overrides default WooCommerce grid with CSS Grid
 * Mobile: 1 column, Tablet: 2, Desktop: 3
 */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
}

/**
 * Remove default WooCommerce float-based layout
 * We use CSS Grid instead
 */
.woocommerce ul.products li.product {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ============================================
   2. PRODUCT CARDS
   Clean white cards with subtle borders
   ============================================ */

/**
 * Individual product card
 * White background, border, rounded corners
 */
.woocommerce ul.products li.product {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

/**
 * Product image container
 * 1:1 aspect ratio for consistent grid appearance
 */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-product-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    transition: transform var(--transition-base);
}

/**
 * Product image link wrapper
 * Overflow visible — clipping is handled by .astra-shop-thumbnail-wrap
 */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    overflow: visible;
    text-decoration: none;
}

/* Hide category label and remove its space */
.ast-woo-product-category {
    display: none;
}

/* Tighten up product card spacing */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    padding-top: 0.5em;
}

/**
 * Product card content area
 * Title, price, button below the image
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/**
 * Product title
 * 3-line clamp with fixed min-height for consistent card sizing
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--dark-gray);
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.9em;
}

/**
 * Product SKU / product code display
 * Monospace for clarity (trade customers search by exact codes)
 */
.ye-product-sku {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--medium-gray);
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}


/* ============================================
   3. PRODUCT CARD HOVER EFFECTS
   Lift, shadow, image zoom
   ============================================ */

/**
 * Card hover - lift up and add shadow
 * Only on devices that support hover (not touch)
 */
@media (hover: hover) {
    .woocommerce ul.products li.product:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    /* Image zoom on card hover */
    .woocommerce ul.products li.product:hover a img {
        transform: scale(1.05);
    }
}

/**
 * Focus styles for keyboard navigation (accessibility)
 */
.woocommerce ul.products li.product:focus-within {
    box-shadow: 0 0 0 3px var(--primary-red), var(--shadow-lg);
}


/* ============================================
   4. CATEGORY CARDS
   For shop/category landing pages
   ============================================ */

/**
 * Category card on shop page
 * Shows category image, name, and product count
 */
.ye-category-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.ye-category-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--bg-secondary);
}

.ye-category-card__content {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ye-category-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin: 0 0 var(--spacing-xs);
}

.ye-category-card__count {
    font-size: var(--font-size-sm);
    color: var(--medium-gray);
    margin-bottom: var(--spacing-sm);
}

/**
 * "View Products" call-to-action link
 */
.ye-category-card__link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-red);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--transition-fast);
}

.ye-category-card__link::after {
    content: ' \2192'; /* Right arrow */
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-fast);
}

@media (hover: hover) {
    .ye-category-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .ye-category-card:hover .ye-category-card__link::after {
        transform: translateX(4px);
    }
}


/* ============================================
   5. SINGLE PRODUCT PAGE
   Individual product detail view
   ============================================ */

/**
 * Single product layout
 * Image on left, details on right (desktop)
 * Stacked on mobile
 */
.woocommerce div.product {
    padding: var(--spacing-lg) 0;
}

/**
 * Product gallery (images)
 */
.woocommerce div.product div.images {
    margin-bottom: var(--spacing-lg);
}

.woocommerce div.product div.images img {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

/**
 * Product summary (title, price, description, add to cart)
 */
.woocommerce div.product .product_title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin-bottom: var(--spacing-sm);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--font-size-base);
    color: var(--medium-gray);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
}

/**
 * Product tabs (Description, Additional Info, Reviews)
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xl) 0 0;
    display: flex;
    border-bottom: 2px solid var(--border-color);
    gap: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--medium-gray);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: var(--spacing-lg) 0;
}

/**
 * Related products section
 */
.woocommerce div.product .related.products {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

.woocommerce div.product .related.products h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
}


/* ============================================
   6. PRICE & STOCK DISPLAY
   Clear pricing visible upfront
   ============================================ */

/**
 * Product price
 * Must be clearly visible - trade customers need prices upfront
 */
.woocommerce ul.products li.product .price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin: var(--spacing-xs) 0 var(--spacing-md);
}

/* Current/sale price */
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

/* Original price (struck through) */
.woocommerce ul.products li.product .price del {
    color: var(--medium-gray);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    margin-right: var(--spacing-xs);
}

/**
 * Single product page price (larger)
 */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin-bottom: var(--spacing-md);
}

/**
 * Sale badge
 */
.woocommerce span.onsale {
    background-color: var(--primary-red);
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 1;
    min-width: auto;
    min-height: auto;
    line-height: 1.5;
}

/**
 * Stock status
 */
.woocommerce div.product .stock {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-md);
}

.woocommerce div.product .stock.in-stock {
    color: #059669; /* Green for in stock */
}

.woocommerce div.product .stock.out-of-stock {
    color: var(--primary-red);
}


/* ============================================
   7. ADD TO CART BUTTON
   Clear CTA, branded red
   ============================================ */

/**
 * Add to cart button on product cards
 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    display: block;
    width: calc(100% - var(--spacing-md) * 2);
    margin: 0 var(--spacing-md) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-red);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background-color: var(--red-hover);
}

/**
 * Single product page add to cart button (larger)
 */
.woocommerce div.product .single_add_to_cart_button {
    background-color: var(--primary-red);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-2xl);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    min-height: 48px;
    transition: background-color var(--transition-fast);
}

.woocommerce div.product .single_add_to_cart_button:hover {
    background-color: var(--red-hover);
}

/**
 * Quantity input (single product page)
 */
.woocommerce div.product .quantity .qty {
    width: 80px;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    text-align: center;
    min-height: 48px;
}


/* ============================================
   8. PRODUCT SEARCH RESULTS
   Styling for search results page
   ============================================ */

/**
 * Search results use the same product grid
 * These styles handle the search-specific elements
 */
.woocommerce-result-count {
    font-size: var(--font-size-sm);
    color: var(--medium-gray);
    margin-bottom: var(--spacing-md);
}

.woocommerce-ordering {
    margin-bottom: var(--spacing-lg);
}

.woocommerce-ordering select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    min-height: 48px;
    background-color: var(--white);
}

/**
 * Pagination
 * Bottom of product listings
 */
.woocommerce nav.woocommerce-pagination {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    gap: var(--spacing-xs);
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--dark-gray);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-red);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
}

/**
 * "No products found" message
 */
.woocommerce-info {
    padding: var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--primary-red);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--dark-gray);
}


/* ============================================
   9. CATEGORY DESCRIPTION — COLLAPSIBLE
   Show first ~3 lines, "Read more" expands the rest.
   Google indexes hidden accordion content (no SEO penalty).
   ============================================ */

/**
 * Collapsed state — clip to ~3 lines with gradient fade
 */
.term-description,
.taxonomy-description {
    position: relative;
    max-height: 4.5em;
    overflow: hidden;
    line-height: 1.5;
    transition: max-height var(--transition-base);
}

/**
 * Gradient overlay hints at hidden content
 */
.term-description:not(.is-expanded)::after,
.taxonomy-description:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(to bottom, transparent, var(--white, #fff));
    pointer-events: none;
}

/**
 * Expanded state — show full content
 */
.term-description.is-expanded,
.taxonomy-description.is-expanded {
    max-height: 2000px;
}

/**
 * No gradient when expanded
 */
.term-description.is-expanded::after,
.taxonomy-description.is-expanded::after {
    display: none;
}

/**
 * "Read more / Read less" toggle button
 * Injected by JS only when description is tall enough
 */
.ye-desc-toggle {
    display: inline-block;
    background: none;
    border: none;
    color: var(--primary-red);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: var(--spacing-xs) 0;
    margin-bottom: var(--spacing-md);
    transition: color var(--transition-fast);
}

.ye-desc-toggle:hover {
    color: var(--red-hover);
}