/* Shop page styles for the storefront product listing (templates/shop.html,
   wrapped in .shop-page). The page has two layouts: a single-product
   "featured" presentation and a multi-product grid; both sets of rules live
   here.

   Every selector is scoped under .shop-page so these element/utility
   selectors can't leak site-wide and collide with the other component sheets
   that load alongside this one. Scoping only RAISES specificity — it never
   flips a cascade these rules already won by source order.

   font-family is set explicitly on the few text selectors below because the
   global body font is Orbitron; inheriting it would change the rendering, so
   Arial is restated where readable body copy is wanted. */

/* Category Filter Styles */
.shop-page .category-description {
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.shop-page .category-filter-bar {
    display: flex;
    justify-content: center;
    padding: 0 15px;
}

.shop-page .category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.shop-page .category-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 25px;
    background: rgba(40, 0, 60, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.shop-page .category-pill:hover {
    background: rgba(255, 0, 255, 0.2);
    border-color: #ff00ff;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

.shop-page .category-pill.active {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.2));
    border-color: #ff00ff;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

.shop-page .category-pill .product-count {
    margin-left: 6px;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Search and Sort Controls */
.shop-page .shop-controls {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}

.shop-page .search-form .form-control {
    background: rgba(20, 0, 40, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #fff;
}

.shop-page .search-form .form-control:focus {
    background: rgba(30, 0, 50, 0.8);
    border-color: #ff00ff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
    color: #fff;
}

.shop-page .search-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.shop-page .search-form .input-group .btn-rave {
    padding: 8px 16px;
    font-size: 1rem;
    width: auto;
    display: inline-flex;
    align-items: center;
}

.shop-page .sort-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.shop-page .sort-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    white-space: nowrap;
}

.shop-page .sort-select {
    background: rgba(20, 0, 40, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #fff;
    min-width: 170px;
}

.shop-page .sort-select:focus {
    background: rgba(30, 0, 50, 0.8);
    border-color: #ff00ff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
    color: #fff;
}

.shop-page .sort-select option {
    background: #1a0030;
    color: #fff;
}

/* Mobile adjustments for category pills */
@media (max-width: 768px) {
    .shop-page .category-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .shop-page .category-pill {
        flex-shrink: 0;
        padding: 6px 14px;
        font-size: 0.85rem;
    }

    .shop-page .sort-controls {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .shop-page .sort-select {
        max-width: 100%;
    }
}

/* Original styles kept */
.shop-page .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.shop-page .product-card {
    background: rgba(20, 0, 40, 0.5);
    border-radius: 15px;
    padding: 0;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2);
    height: 100%;
    overflow: hidden;
}

.shop-page .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.4);
}

.shop-page .product-card .product-image-container {
    background: #fff;
    border-radius: 10px;
    padding: 0;
    margin: 12px auto;
    width: calc(100% - 24px);
    /* LOCKED: 220px height + flex-shrink:0 means no matter how tall
       the info block or actions below get, this never squashes. Earlier
       the "2 styles" line under Diffraction Glasses was making that
       card's image area visibly shorter than its siblings.
       !important added because an inherited/media-query rule on
       .product-card .product-image-container elsewhere in the cascade
       was winning over the plain declaration. */
    height: 220px !important;
    min-height: 220px;
    max-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* Lock the <img> itself so it can't push the container taller or
   shorter. Combined with object-fit:contain, images of any natural
   aspect ratio fit neatly inside the 220px frame. */
.shop-page .product-card .product-image-container img.product-image,
.shop-page .product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 220px !important;
    object-fit: contain !important;
}

.shop-page .product-card .product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.shop-page .product-card .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #999;
    font-size: 1rem;
}

.shop-page .product-card .product-info {
    padding: 15px 20px 5px;
}

.shop-page .product-card .product-actions {
    padding: 0 20px 20px;
}

.shop-page .product-card .product-name {
    font-size: 1.4rem;
    margin-bottom: 10px;
    text-shadow: 0 0 8px #ff00ff;
    /* Reserve 2 lines of vertical space via min-height only — no
       line-clamp / overflow-hidden. The `overflow: hidden` clips the
       magenta text-shadow into a rectangular box which broke the
       glow effect. Since product names are short, they naturally
       fit within 2 lines; reserving the space keeps the card layout
       consistent whether the name wraps or not. */
    line-height: 1.25;
    min-height: calc(1.4rem * 1.25 * 2);
}

.shop-page .product-card .product-price {
    font-size: 1.7rem;
    margin-bottom: 5px;
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff;
}

/* Featured card styling */
.shop-page .product-card.featured-card {
    border: 2px solid #ff00ff;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
    position: relative;
}

.shop-page .product-card.featured-card:hover {
    box-shadow: 0 0 35px rgba(255, 0, 255, 0.6);
}

.shop-page .featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff00ff, #9900ff);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    z-index: 10;
}

/* Stock indicators */
.shop-page .product-stock {
    margin-top: 8px;
    margin-bottom: 5px;
}

.shop-page .stock-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.shop-page .stock-badge.available {
    background: rgba(0, 255, 100, 0.15);
    color: #00ff64;
    border: 1px solid rgba(0, 255, 100, 0.3);
}

.shop-page .stock-badge.low {
    background: rgba(255, 200, 0, 0.15);
    color: #ffc800;
    border: 1px solid rgba(255, 200, 0, 0.3);
}

.shop-page .stock-badge.out {
    background: rgba(255, 50, 50, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 50, 50, 0.3);
}

/* Variant indicator */
.shop-page .product-variants-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #ff00ff;
    margin-top: 8px;
}

.shop-page .product-variants-indicator i {
    font-size: 0.85rem;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

.shop-page .product-variants-indicator span {
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
}

/* Quick add to cart button */
.shop-page .quick-add-form {
    margin-bottom: 0;
}

.shop-page .btn-add-cart {
    transition: all 0.3s ease;
}

.shop-page .btn-add-cart:hover {
    transform: scale(1.02);
}

/* Outline rave button */
.shop-page .btn-outline-rave {
    background: transparent;
    border: 2px solid rgba(255, 0, 255, 0.5);
    color: #ff00ff;
    font-weight: 600;
    transition: all 0.3s ease;
}

.shop-page .btn-outline-rave:hover {
    background: rgba(255, 0, 255, 0.15);
    border-color: #ff00ff;
    color: #ff66ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

/* New styles for featured product layout */
.shop-page .featured-product {
    background: rgba(20, 0, 40, 0.5);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.3);
    margin: 0 auto;
}

.shop-page .featured-product .product-image-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 255, 0.2);
}

.shop-page .featured-product .product-image {
    width: 100%;
    border-radius: 5px;
}

.shop-page .featured-product .no-image {
    background: linear-gradient(135deg, #2a0055, #4a0077);
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 5px;
}

.shop-page .featured-product .product-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.shop-page .featured-product .product-description {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.shop-page .featured-product .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.shop-page .featured-product .feature-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    min-width: 30px;
}

.shop-page .featured-product .feature-text {
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
}

.shop-page .featured-product .price-container {
    font-size: 2.5rem;
    font-weight: bold;
    color: #00ffff;
    text-shadow: none;
}

.shop-page .featured-product .price-label {
    display: none;
}

.shop-page .featured-product .stock-info {
    font-size: 1.2rem;
}

.shop-page .featured-product .stock-label {
    color: rgba(255, 255, 255, 0.7);
    margin-right: 10px;
}

.shop-page .featured-product .stock-value {
    font-weight: bold;
}

.shop-page .featured-product .low-stock {
    color: #ff6b6b;
}

.shop-page .featured-product .actions-container {
    margin-top: 30px;
}

.shop-page .featured-product .btn-rave,
.shop-page .featured-product .btn-amazon {
    font-size: 1.3rem;
    padding: 15px 30px;
    margin-bottom: 15px;
}

.shop-page .coming-soon-message {
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font-style: italic;
    color: #a088ff;
}

/* Trust badges styling - Fixed 3-column grid */
.shop-page .trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.shop-page .badge-item {
    background: rgba(90, 0, 90, 0.7);
    border-radius: 10px;
    padding: 12px 15px;
    text-align: center;
    border: 1px solid rgba(255, 0, 255, 0.3);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
    transition: all 0.3s ease;
}

.shop-page .badge-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

.shop-page .badge-icon {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: #ff6bff;
}

.shop-page .badge-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
}

@media (max-width: 576px) {
    .shop-page .trust-badges {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .shop-page .badge-item {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 10px 15px;
    }

    .shop-page .badge-icon {
        margin-bottom: 0;
        margin-right: 15px;
    }
}

/* Additional product styles */
.shop-page .product-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.shop-page .product-info {
    margin-bottom: 15px;
    flex-grow: 1;
}

.shop-page .product-name {
    margin-bottom: 10px;
    font-size: 1.3rem;
    text-shadow: 0 0 5px #ff00ff;
}

.shop-page .no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    font-size: 1.2rem;
}

.shop-page .product-actions {
    margin-top: auto;
}

@media (max-width: 767px) {
    .shop-page .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .shop-page .product-card .product-image-container {
        aspect-ratio: 4 / 3;
        margin: 12px auto;
        width: calc(100% - 24px);
        border-radius: 10px;
        background: #fff;
    }

    .shop-page .product-card .product-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
    }

    .shop-page .featured-product .product-title {
        font-size: 2rem;
        margin-top: 20px;
    }
}

/* .btn-rave styles are in components/buttons.css */

.shop-page .btn-outline-light {
    border: 2px solid rgba(255, 0, 255, 0.5);
    color: #ff00ff;
    font-weight: bold;
    transition: all 0.3s ease;
}

.shop-page .btn-outline-light:hover {
    background-color: rgba(255, 0, 255, 0.2);
    border-color: #ff00ff;
    color: white;
}