/**
 * MedVinci Research - Product Card Grid Styles
 * Apple Premium Theme - Dark Scientific Aesthetic
 * 
 * Responsive Grid:
 * - Mobile: 2 columns
 * - Tablet: 2 columns
 * - Desktop: 3 columns
 * - Large: 4 columns
 * 
 * @package Peptide_Chemical_Info
 * @since 2.1.0
 */

/* ==============================================
   GLOBAL: Dark body for ALL WooCommerce pages
   Prevents white flash on pages without specific
   body classes (e.g., archive, taxonomy pages)
   ============================================== */
body.woocommerce-page,
body.woocommerce,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
    background: transparent;
    color: #ffffff;
}

body.woocommerce-page a,
body.woocommerce a {
    color: #00a8a5;
}

body.woocommerce-page .site-header,
body.woocommerce .site-header {
    background: transparent;
}

/* ============================================
   CSS Variables
   ============================================ */
:root {
    --pci-card-bg: #0d1f2d;
    --pci-card-bg-hover: #132d42;
    --pci-card-border: rgba(255, 255, 255, 0.08);
    --pci-card-border-hover: rgba(0, 137, 123, 0.5);
    --pci-card-glow: rgba(0, 137, 123, 0.3);
    --pci-card-radius: 16px;
    --pci-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --pci-card-shadow-hover: 0 12px 40px rgba(0, 137, 123, 0.2);
    
    --pci-text-primary: #ffffff;
    --pci-text-secondary: rgba(255, 255, 255, 0.7);
    --pci-text-muted: rgba(255, 255, 255, 0.5);
    
    --pci-accent: #00897b;
    --pci-accent-light: #26a69a;
    --pci-accent-dark: #00695c;
    
    --pci-sale: #ff6b6b;
    --pci-success: #4caf50;
    --pci-warning: #ff9800;
    
    --pci-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.tax-product_tag .site-main {
    max-width: 100%;
}

/* ============================================
   Product Grid Container
   ============================================ */
.pci-product-grid,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 480px) {
    .pci-product-grid,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (min-width: 768px) {
    .pci-product-grid,
    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (min-width: 1280px) {
    .pci-product-grid,
    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }
}

@media (min-width: 1560px) {
    .pci-product-grid,
    .woocommerce ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   Product Card Base
   ============================================ */
.pci-product-card,
.woocommerce ul.products li.product {
    position: relative;
    background: linear-gradient(180deg, rgba(13, 31, 45, 0.98) 0%, rgba(11, 27, 41, 0.98) 100%);
    border: 1px solid var(--pci-card-border);
    border-radius: var(--pci-card-radius);
    overflow: hidden;
    transition: var(--pci-transition);
    display: flex;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-shadow: 0 18px 38px rgba(2, 10, 18, 0.26);
}

.pci-product-card:hover,
.woocommerce ul.products li.product:hover {
    background: linear-gradient(180deg, rgba(18, 44, 60, 0.98) 0%, rgba(13, 34, 49, 0.98) 100%);
    border-color: var(--pci-card-border-hover);
    box-shadow: var(--pci-card-shadow-hover), 0 0 30px var(--pci-card-glow);
    transform: translateY(-6px);
}

/* ============================================
   Product Image Container
   ============================================ */
.pci-card-image,
.woocommerce ul.products li.product a img {
    position: relative;
    aspect-ratio: 0.94;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(27, 164, 154, 0.1) 0%, rgba(27, 164, 154, 0) 54%),
        linear-gradient(180deg, rgba(247, 250, 252, 0.98) 0%, rgba(229, 236, 241, 0.98) 100%);
    display: block;
    margin: 0 !important;
    border-radius: 0;
}

.pci-card-image img,
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    padding: 0;
    transition: var(--pci-transition);
}

.pci-product-card:hover .pci-card-image img,
.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}

/* Image overlay gradient */
.pci-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, var(--pci-card-bg), transparent);
    pointer-events: none;
}

/* ============================================
   Product Badges
   ============================================ */
.pci-card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

.pci-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: auto;
}

.pci-badge-sale,
.woocommerce span.onsale {
    background: linear-gradient(135deg, #ff7a7a 0%, #f05a5a 100%) !important;
    color: white !important;
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    margin: 0 !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
    box-shadow: 0 10px 20px rgba(240, 90, 90, 0.28);
}

.pci-badge-new {
    background: var(--pci-accent);
    color: white;
}

.pci-badge-out {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    backdrop-filter: blur(4px);
}

.pci-badge-3d {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    backdrop-filter: blur(4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pci-badge-3d svg {
    width: 12px;
    height: 12px;
}

/* ============================================
   Product Content
   ============================================ */
.pci-card-content {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    text-align: center;
    gap: 2px;
}

@media (max-width: 480px) {
    .pci-card-content {
        padding: 12px;
    }
}

/* Category */
.pci-card-category,
.woocommerce ul.products li.product .product-category {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--pci-accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
    text-align: center;
}

/* Title */
.pci-card-title,
.pci-card-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--pci-text-primary) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 1.35;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .pci-card-title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
    }
}

/* Chemical Badges */
.pci-card-chem-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    justify-content: center;
}

.pci-chem-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    color: var(--pci-text-muted);
}

.pci-chem-badge svg {
    width: 10px;
    height: 10px;
    opacity: 0.7;
}

.pci-chem-badge-label {
    font-weight: 600;
    color: var(--pci-text-secondary);
}

/* Price */
.pci-card-price,
.pci-product-card .price,
.woocommerce ul.products li.product .price {
    margin-top: 4px;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pci-price-current,
.pci-card-price .woocommerce-Price-amount,
.pci-price-current .woocommerce-Price-amount,
.pci-product-card .price .woocommerce-Price-amount,
.woocommerce ul.products li.pci-product-card .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price > .woocommerce-Price-amount {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--pci-accent) !important;
    text-decoration: none !important;
    background: none !important;
}

/* Currency symbol — superscript for cleaner look */
.pci-card-price .woocommerce-Price-currencySymbol,
.pci-price-current .woocommerce-Price-currencySymbol,
.pci-product-card .price .woocommerce-Price-currencySymbol {
    font-size: 13px !important;
    vertical-align: super;
    position: relative;
    top: -0.1em;
    font-weight: 600 !important;
}

.pci-price-original,
.woocommerce ul.products li.product .price del {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--pci-text-muted) !important;
    text-decoration: line-through !important;
}

@media (max-width: 480px) {
    .pci-price-current,
    .pci-card-price .woocommerce-Price-amount,
    .pci-price-current .woocommerce-Price-amount,
    .woocommerce ul.products li.product .price ins,
    .woocommerce ul.products li.product .price > .woocommerce-Price-amount {
        font-size: 15px !important;
    }

    .pci-price-original,
    .woocommerce ul.products li.product .price del {
        font-size: 12px !important;
    }
}

/* ============================================
   Add to Cart Button
   ============================================ */
.pci-card-actions {
    position: relative;
    width: calc(100% + 36px);
    margin: auto -18px -16px;
}

.pci-card-actions .pci-add-to-cart,
.pci-card-actions .pci-select-options {
    width: 100%;
    border-radius: 0 0 18px 18px;
}

.pci-add-to-cart,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, var(--pci-accent) 0%, var(--pci-accent-dark) 100%) !important;
    border: 1px solid rgba(79, 209, 197, 0.28) !important;
    border-radius: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: white !important;
    cursor: pointer;
    transition: var(--pci-transition);
    text-decoration: none !important;
    text-transform: none !important;
    margin: 0 !important;
    box-shadow: 0 12px 24px rgba(0, 137, 123, 0.18);
}

.pci-add-to-cart:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
    background: linear-gradient(135deg, var(--pci-accent-light) 0%, var(--pci-accent) 100%) !important;
    color: white !important;
    transform: translateY(-1px);
}

.pci-add-to-cart svg {
    width: 16px;
    height: 16px;
}

/* Loading state */
.pci-add-to-cart.loading,
.woocommerce ul.products li.product a.add_to_cart_button.loading {
    pointer-events: none;
    opacity: 0.7;
}

.pci-add-to-cart.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: pci-spin 0.8s linear infinite;
}

@keyframes pci-spin {
    to { transform: rotate(360deg); }
}

/* Added state */
.pci-add-to-cart.added,
.woocommerce ul.products li.product a.add_to_cart_button.added {
    background: var(--pci-success) !important;
}

/* View cart link */
.woocommerce ul.products li.product a.added_to_cart {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--pci-accent);
    text-decoration: none;
}

.woocommerce ul.products li.product a.added_to_cart:hover {
    color: var(--pci-accent-light);
    text-decoration: underline;
}

/* Variable product - Select Options (solid, prominent) */
.pci-select-options,
.woocommerce ul.products li.product a.button.product_type_variable {
    background: var(--pci-accent) !important;
    border: 1px solid var(--pci-accent) !important;
    color: white !important;
}

.pci-select-options:hover,
.woocommerce ul.products li.product a.button.product_type_variable:hover {
    background: var(--pci-accent-light) !important;
    border-color: var(--pci-accent-light) !important;
    color: white !important;
}

/* Out of stock */
.woocommerce ul.products li.product.outofstock .pci-card-image,
.woocommerce ul.products li.product.outofstock a img {
    opacity: 0.5;
    filter: grayscale(50%);
}

@media (min-width: 1280px) {
    .woocommerce ul.products li.product {
        border-radius: 20px;
    }

    .pci-card-content {
        padding: 20px 20px 18px;
    }

    .pci-card-title,
    .pci-card-title a,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 20px;
    }

    .pci-card-price,
    .pci-product-card .price,
    .woocommerce ul.products li.product .price {
        margin-bottom: 18px;
    }

    .pci-add-to-cart,
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product a.add_to_cart_button {
        min-height: 52px;
        font-size: 14px !important;
        letter-spacing: 0.01em;
    }
}

@media (max-width: 480px) {
    .pci-add-to-cart,
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product a.add_to_cart_button {
        padding: 10px 12px !important;
        font-size: 12px !important;
        min-height: 44px;
        border-radius: 12px !important;
    }
}

/* ============================================
   Quick View Button (Optional)
   ============================================ */
.pci-quick-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pci-transition);
    backdrop-filter: blur(10px);
    z-index: 5;
}

.pci-product-card:hover .pci-quick-view {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.pci-quick-view:hover {
    background: var(--pci-accent);
    border-color: var(--pci-accent);
}

/* ============================================
   Wishlist Button (Optional)
   ============================================ */
.pci-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--pci-transition);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.pci-wishlist svg {
    width: 16px;
    height: 16px;
    transition: var(--pci-transition);
}

.pci-wishlist:hover {
    background: var(--pci-sale);
}

.pci-wishlist.active svg {
    fill: var(--pci-sale);
    color: var(--pci-sale);
}

/* ============================================
   Star Rating
   ============================================ */
.pci-card-rating,
.woocommerce ul.products li.product .star-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--pci-warning);
}

.woocommerce ul.products li.product .star-rating {
    margin: 0 0 8px 0 !important;
}

/* ============================================
   Shop Page Overrides
   ============================================ */
.woocommerce .products {
    background: transparent;
}

/* Remove default WooCommerce styling */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    text-align: center;
}

.woocommerce ul.products li.product a {
    text-decoration: none;
}

/* Result count and ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    color: var(--pci-text-secondary);
    font-family: 'DM Sans', sans-serif;
}

.woocommerce .woocommerce-ordering select {
    background: var(--pci-card-bg);
    border: 1px solid var(--pci-card-border);
    border-radius: 8px;
    color: var(--pci-text-primary);
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
}

/* ============================================
   Pagination
   ============================================ */
.woocommerce nav.woocommerce-pagination {
    margin-top: 48px;
}

.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    border: none;
    padding: 0;
    margin: 0;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: linear-gradient(180deg, rgba(13, 31, 45, 0.96) 0%, rgba(10, 24, 38, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--pci-text-primary);
    padding: 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    transition: var(--pci-transition);
    box-shadow: 0 10px 22px rgba(3, 10, 20, 0.16);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: linear-gradient(180deg, rgba(18, 44, 60, 0.96) 0%, rgba(13, 34, 49, 0.96) 100%);
    border-color: var(--pci-accent);
    color: #ffffff;
    transform: translateY(-1px);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: linear-gradient(135deg, var(--pci-accent) 0%, var(--pci-accent-dark) 100%);
    border-color: rgba(79, 209, 197, 0.35);
    color: white;
    box-shadow: 0 14px 28px rgba(0, 137, 123, 0.24);
}

/* ============================================
   Empty State
   ============================================ */
.woocommerce-info {
    background: var(--pci-card-bg);
    border: 1px solid var(--pci-card-border);
    border-radius: var(--pci-card-radius);
    color: var(--pci-text-primary);
    padding: 20px;
    font-family: 'DM Sans', sans-serif;
}

.woocommerce-info::before {
    color: var(--pci-accent);
}

/* ============================================
   Quick-Look Drawer (left-side panel)
   ============================================ */
/* --- Backdrop --- */
.pci-ql-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pci-ql-backdrop.open { opacity: 1; visibility: visible; }

/* --- Drawer panel --- */
.pci-ql-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 620px;
    max-width: 100%;
    background: var(--pci-card-bg, #0d1f2d);
    border-right: 1px solid var(--pci-card-border, rgba(255,255,255,0.08));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    box-shadow: 20px 0 60px rgba(0,0,0,0.4);
}
.pci-ql-backdrop.open .pci-ql-drawer { transform: translateX(0); }

/* --- Header / close --- */
.pci-ql-header {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px 0;
}
.pci-ql-close {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s;
}
.pci-ql-close:hover { background: rgba(255,255,255,0.16); }
.pci-ql-close svg { width: 16px; height: 16px; }

/* --- Tabs --- */
.pci-ql-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px 0;
    position: relative;
    z-index: 10;
}
.pci-ql-tab {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px 12px 0 0;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.pci-ql-tab:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.pci-ql-tab.active {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border-bottom-color: transparent;
}
.pci-ql-tab--disabled { opacity: 0.3; cursor: not-allowed; }

/* --- Tab content area --- */
.pci-ql-tab-content {
    min-height: 300px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    border-top: none;
    margin: 0 20px;
    border-radius: 0 0 14px 14px;
    padding: 0;
    background: linear-gradient(180deg, rgba(10,21,32,0.9) 0%, rgba(13,31,45,0.95) 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.pci-ql-tab-content::-webkit-scrollbar { width: 5px; }
.pci-ql-tab-content::-webkit-scrollbar-track { background: transparent; }
.pci-ql-tab-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.pci-ql-tab-content.pci-ql-no-scroll {
    overflow-y: hidden;
    scrollbar-width: none;
}
.pci-ql-tab-content.pci-ql-no-scroll::-webkit-scrollbar { display: none; }
.pci-ql-pane { display: none; }
.pci-ql-pane.active { display: block; }

/* Photo pane */
.pci-ql-product-img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    background: #1a1a2e;
    display: block;
    margin: 0 auto;
}
.pci-ql-no-image {
    display: flex; align-items: center; justify-content: center;
    height: 300px; color: rgba(255,255,255,0.4);
    font-family: 'DM Sans', sans-serif; font-size: 14px;
}

/* 3D viewer pane */
.pci-ql-viewer-3d {
    position: relative;
    width: 100%; height: 340px; max-height: 340px;
    background: rgba(13,31,45,1);
    overflow: hidden;
}
.pci-ql-viewer-controls {
    display: flex; gap: 8px; padding: 10px 14px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pci-ql-vctrl {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #ffffff; font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s;
}
.pci-ql-vctrl:hover { background: rgba(255,255,255,0.12); }

/* COA pane */
.pci-ql-chem-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(255,255,255,0.06);
}
.pci-ql-chem-item {
    padding: 14px 16px;
    background: var(--pci-card-bg, #0d1f2d);
}
.pci-ql-chem-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.pci-ql-chem-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 600;
    color: var(--pci-text-primary, #ffffff);
}
.pci-ql-chem-value a { color: var(--pci-accent); text-decoration: none; }
.pci-ql-chem-value a:hover { text-decoration: underline; }

/* Loading / empty states */
.pci-ql-loading, .pci-ql-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 200px; padding: 30px;
    color: rgba(255,255,255,0.5);
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    text-align: center;
}
.pci-ql-spinner {
    width: 28px; height: 28px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--pci-accent);
    border-radius: 50%;
    animation: pci-spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* --- Body: details + actions (always visible below tabs) --- */
.pci-ql-body { padding: 24px 24px 20px; text-align: center; }

.pci-ql-title {
    font-family: 'Outfit', 'DM Sans', sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--pci-text-primary, #ffffff);
    margin: 0 0 8px; line-height: 1.25;
}
.pci-ql-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; line-height: 1.6;
    color: var(--pci-text-secondary, rgba(255,255,255,0.7));
    margin: 0 0 14px;
}
.pci-ql-purity {
    display: inline-flex; align-items: center; gap: 8px;
    justify-content: center; width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.65);
    margin-bottom: 14px;
}
.pci-ql-purity-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 999px;
    color: #4ade80;
    font-size: 13px; font-weight: 700;
}
.pci-ql-price {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--pci-accent) !important;
    margin-bottom: 16px;
}
.pci-ql-price .woocommerce-Price-amount { color: var(--pci-accent) !important; }

/* --- Variations --- */
.pci-ql-variations { margin-bottom: 16px; }
.pci-ql-var-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin-bottom: 8px;
}
.pci-ql-var-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pci-ql-var-pill {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: var(--pci-text-primary, #ffffff);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    font-family: 'DM Sans', sans-serif;
}
.pci-ql-var-pill:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.07); }
.pci-ql-var-pill.active {
    border-color: var(--pci-accent);
    background: rgba(6,129,225,0.1);
    box-shadow: 0 0 0 2px rgba(6,129,225,0.2);
}
.pci-ql-var-name { font-size: 14px; font-weight: 700; }
.pci-ql-var-price { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* --- Cart row --- */
.pci-ql-cart-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 16px; }
.pci-ql-qty {
    display: flex; align-items: center;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,0.06);
    min-height: 50px;
}
.pci-ql-qty-btn {
    width: 38px; height: 42px;
    border: none; background: transparent;
    color: #ffffff; font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.pci-ql-qty-btn:hover { background: rgba(255,255,255,0.08); }
.pci-ql-qty-input {
    width: 48px; height: 48px;
    border: none; border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: #ffffff !important; font-size: 16px; font-weight: 700;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    -moz-appearance: textfield;
    -webkit-text-fill-color: #ffffff;
}
.pci-ql-qty-input::-webkit-outer-spin-button,
.pci-ql-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pci-ql-add-to-cart {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 24px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, #0691fa 0%, #0570c4 50%, #0681e1 100%);
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 8px 28px rgba(6,129,225,0.35), 0 2px 8px rgba(6,129,225,0.15);
    position: relative;
    overflow: hidden;
}
.pci-ql-add-to-cart::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}
.pci-ql-add-to-cart:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 32px rgba(6,129,225,0.4), 0 4px 12px rgba(6,129,225,0.2); }
.pci-ql-add-to-cart:active:not(:disabled) { transform: translateY(0); }
.pci-ql-add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.pci-ql-add-to-cart svg { width: 18px; height: 18px; position: relative; z-index: 1; }

/* View Cart link inside drawer (injected by WooCommerce after AJAX add-to-cart) */
.pci-ql-cart-row a.added_to_cart,
.pci-ql-body a.added_to_cart {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 50px; padding: 0 20px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: var(--pci-accent, #0691fa);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.pci-ql-cart-row a.added_to_cart:hover,
.pci-ql-body a.added_to_cart:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--pci-accent);
}
.pci-ql-oos {
    width: 100%;
    background: rgba(255,255,255,0.06);
    box-shadow: none;
    color: rgba(255,255,255,0.5);
}

/* --- View details link --- */
.pci-ql-details-link {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 0;
    color: var(--pci-accent);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: color 0.18s;
}
.pci-ql-details-link:hover { color: var(--pci-accent-light, #3abaff); }


/* --- Light mode: proper light drawer styling --- */
[data-theme="light"] .pci-ql-drawer {
    background: #f8f9fb !important;
    color: #1a1e2e !important;
    border-right-color: rgba(0,0,0,0.08) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-close {
    color: #3d4556 !important;
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-close:hover { background: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-brand { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-tab {
    color: #6b7280 !important;
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-tab:hover { color: #374151 !important; background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-tab.active {
    color: #0681e1 !important;
    background: #ffffff !important;
    border-bottom-color: transparent !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-tab-content {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-tab-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
[data-theme="light"] .pci-ql-drawer .pci-ql-product-img { background: #f5f6f8 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-title { color: #111827 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-desc { color: #4b5563 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-price,
[data-theme="light"] .pci-ql-drawer .pci-ql-price .woocommerce-Price-amount { color: #0681e1 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-purity { color: #6b7280 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-purity-badge {
    background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.04)) !important;
    border-color: rgba(34,197,94,0.2) !important;
    color: #16a34a !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-var-label { color: #9ca3af !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-var-pill {
    color: #374151 !important;
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-var-pill:hover { border-color: rgba(0,0,0,0.2) !important; background: #f9fafb !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-var-pill.active {
    border-color: #0681e1 !important;
    background: rgba(6,129,225,0.06) !important;
    box-shadow: 0 0 0 2px rgba(6,129,225,0.12) !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-var-name { color: #111827 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-var-price { color: #6b7280 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-qty {
    border-color: rgba(0,0,0,0.12) !important;
    background: #ffffff !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-qty-btn { color: #374151 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-qty-btn:hover { background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-qty-input {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border-color: rgba(0,0,0,0.06) !important;
    background: transparent !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-add-to-cart {
    box-shadow: 0 8px 28px rgba(6,129,225,0.2), 0 2px 8px rgba(6,129,225,0.1) !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-details-link { color: #0681e1 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-add-to-cart.pci-ql-oos {
    background: rgba(0,0,0,0.06) !important;
    color: #6b7280 !important;
    box-shadow: none !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-cart-row a.added_to_cart,
[data-theme="light"] .pci-ql-drawer .pci-ql-body a.added_to_cart {
    border-color: rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
    color: #0681e1 !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-cart-row a.added_to_cart:hover,
[data-theme="light"] .pci-ql-drawer .pci-ql-body a.added_to_cart:hover {
    border-color: #0681e1 !important;
    background: rgba(6,129,225,0.04) !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-chem-grid { background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-chem-item { background: #ffffff !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-chem-label { color: #9ca3af !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-chem-value { color: #111827 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-chem-value a { color: #0681e1 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-loading,
[data-theme="light"] .pci-ql-drawer .pci-ql-empty { color: #9ca3af !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-no-image { color: #9ca3af !important; background: #f0f2f5 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-spinner { border-color: rgba(0,0,0,0.08); border-top-color: #0681e1; }
[data-theme="light"] .pci-ql-drawer .pci-ql-viewer-3d { background: #f0f2f5 !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-vctrl {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #374151 !important;
}
[data-theme="light"] .pci-ql-drawer .pci-ql-vctrl:hover { background: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .pci-ql-drawer .pci-ql-viewer-controls {
    background: #f0f2f5 !important;
    border-top: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .pci-ql-backdrop.open { background: rgba(0,0,0,0.3); }

/* --- Mobile: full-width bottom sheet --- */
@media (max-width: 767px) {
    .pci-ql-drawer {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; max-height: 92vh;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.1);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
    }
    .pci-ql-backdrop.open .pci-ql-drawer { transform: translateY(0); }
    .pci-ql-tab-content { min-height: 250px; max-height: 320px; margin: 0 14px; padding: 0; }
    .pci-ql-body { padding: 16px 12px 20px; }
    .pci-ql-viewer-3d { height: 280px; max-height: 280px; }
    .pci-ql-chem-grid { grid-template-columns: 1fr; }
}

/* ==============================================
   FIX: Hide WooCommerce default sort/result-count
   (our filter toolbar provides these already)
   ============================================== */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    display: none !important;
}

/* ==============================================
   FIX: Product card image containment
   Use overflow:hidden on card + object-fit:cover
   on images. No max-height — aspect-ratio handles it.
   ============================================== */
.woocommerce ul.products li.product {
    overflow: hidden;
    border-radius: 18px;
}

.pci-card-image {
    aspect-ratio: 0.94;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(27, 164, 154, 0.1) 0%, rgba(27, 164, 154, 0) 54%),
        linear-gradient(180deg, rgba(247, 250, 252, 0.98) 0%, rgba(229, 236, 241, 0.98) 100%);
}

.pci-card-image img,
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    padding: 0;
}
/* Layout stabilization pass: explicit breakpoints for product grid */
.helix-storefront-shell ul.products,
.helix-storefront-shell .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: stretch;
}

@media (min-width: 600px) {
    .helix-storefront-shell ul.products,
    .helix-storefront-shell .woocommerce ul.products {
        gap: 16px;
    }
}

@media (min-width: 768px) {
    .helix-storefront-shell ul.products,
    .helix-storefront-shell .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1280px) {
    .helix-storefront-shell ul.products,
    .helix-storefront-shell .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.helix-storefront-shell ul.products::before,
.helix-storefront-shell ul.products::after,
.helix-storefront-shell .woocommerce ul.products::before,
.helix-storefront-shell .woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

.helix-storefront-shell ul.products li.product,
.helix-storefront-shell .woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
}

.helix-storefront-shell ul.products li.product a,
.helix-storefront-shell .woocommerce ul.products li.product a {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.helix-storefront-shell ul.products li.product .woocommerce-loop-product__link,
.helix-storefront-shell .woocommerce ul.products li.product .woocommerce-loop-product__link {
    gap: clamp(0.85rem, 1.6vw, 1.15rem);
}

.helix-storefront-shell ul.products li.product img,
.helix-storefront-shell .woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    border-radius: clamp(1rem, 1.6vw, 1.4rem) clamp(1rem, 1.6vw, 1.4rem) 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 243, 248, 0.96));
}

.helix-storefront-shell ul.products li.product .helix-product-card__body,
.helix-storefront-shell .woocommerce ul.products li.product .helix-product-card__body,
.helix-storefront-shell ul.products li.product .product-card-content,
.helix-storefront-shell .woocommerce ul.products li.product .product-card-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.helix-storefront-shell ul.products li.product .price,
.helix-storefront-shell .woocommerce ul.products li.product .price {
    margin-top: 4px;
}

.helix-storefront-shell ul.products li.product .button,
.helix-storefront-shell .woocommerce ul.products li.product .button,
.helix-storefront-shell ul.products li.product .added_to_cart,
.helix-storefront-shell .woocommerce ul.products li.product .added_to_cart {
    align-self: flex-start;
    margin-top: 0;
}


/* ============================================================
   CONSOLIDATED FROM MU-PLUGINS (Phase 1)
   ============================================================ */

/* Full-bleed card images */
.helix-storefront-shell li.product .pci-card-image img,
.helix-storefront-shell li.product img.attachment-woocommerce_thumbnail {
    padding: 0; aspect-ratio: 1; object-fit: cover;
    border-radius: 12px 12px 0 0; width: 100%;
}
.helix-storefront-shell li.product .pci-card-image {
    border-radius: 12px 12px 0 0; overflow: hidden; padding: 0; margin: 0;
}

/* Hide + icon SVG inside buttons */
.helix-storefront-shell .pci-add-to-cart svg,
.helix-storefront-shell .pci-select-options svg,
.helix-storefront-shell li.product .button svg,
.helix-storefront-shell li.product a.add_to_cart_button svg { display: none; }

/* Kits appear after singles */
.helix-storefront-shell li.product.product_cat-10-vial-kits { order: 99; }

/* Card grid stretch */
.helix-storefront-shell li.product,
.helix-storefront-shell .pci-product-card {
    justify-self: stretch; width: auto; min-width: 0;
    max-width: none; float: none;
}

/* Card content spacing */
.helix-storefront-shell li.product .pci-product-category { padding: 8px 14px 0; }
.helix-storefront-shell li.product .woocommerce-loop-product__title { padding: 4px 14px; }
.helix-storefront-shell li.product .price { padding: 4px 14px 8px; }

/* Card badges */
.helix-storefront-shell li.product .pci-card-badges {
    padding: 0 14px 8px; display: flex; flex-wrap: wrap; gap: 4px;
}
.helix-storefront-shell li.product .pci-badge {
    font-size: .6rem; padding: 2px 6px;
    background: rgba(0,137,123,.08); border: 1px solid rgba(0,137,123,.15);
    border-radius: 4px; color: #94a3b8; white-space: nowrap;
}
.helix-storefront-shell li.product .button,
.helix-storefront-shell li.product .add_to_cart_button,
.helix-storefront-shell li.product .pci-select-options {
    width: calc(100% + 36px); margin: 0 -18px -16px; border-radius: 0 0 18px 18px;
}
.helix-storefront-shell li.product img {
    aspect-ratio: 1; object-fit: cover; object-position: top; padding: 16px; width: 100%; height: auto;
}

/* Shop grid sizing */
.helix-storefront-shell .site-main { max-width: 2000px; margin: 0 auto; }
.helix-storefront-shell .pci-shop-layout {
    max-width: 2000px; margin: 0 auto; padding: 0 32px; gap: 28px;
}
.helix-storefront-shell .pci-shop-main {
    flex: 1 1 0%; min-width: 0; max-width: none; width: auto;
}
.helix-storefront-shell .pci-filter-sidebar { flex: 0 0 260px; max-width: 260px; }
.helix-storefront-shell .pci-shop-main ul.products,
.helix-storefront-shell .pci-shop-main .products {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%;
}
@media (max-width: 1200px) {
    .helix-storefront-shell .pci-shop-main ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* 2-column mobile */
@media (max-width: 768px) {
    .helix-storefront-shell .pci-shop-layout { flex-direction: column; }
    .helix-storefront-shell .pci-filter-sidebar { flex: none; max-width: 100%; width: 100%; }
    .helix-storefront-shell .pci-shop-main ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .helix-storefront-shell li.product .pci-card-content { padding: 8px 10px 12px; }
    .helix-storefront-shell li.product .pci-card-title,
    .helix-storefront-shell li.product .woocommerce-loop-product__title { font-size: 14px; }
    .helix-storefront-shell li.product .pci-card-price,
    .helix-storefront-shell li.product .price { font-size: 16px; }
    .helix-storefront-shell li.product .pci-add-to-cart,
    .helix-storefront-shell li.product .button { padding: 8px 12px; font-size: 12px; }
    .helix-storefront-shell li.product .pci-card-chem-badges,
    .helix-storefront-shell li.product .pci-chem-badge { display: none; }
}
@media (max-width: 480px) {
    .helix-storefront-shell .pci-shop-main ul.products { grid-template-columns: 1fr; }
}

/* ================================================================
   MOBILE PRODUCT GRID - 2 columns on phone
   ================================================================ */
@media (max-width: 768px) {
    .pci-products-grid,
    .pci-shop-grid,
    ul.products,
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    ul.products li.product,
    .woocommerce ul.products li.product,
    .pci-product-card {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
    /* Tighten card content for mobile 2-col */
    .pci-product-card .pci-card-title,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .pci-product-card .pci-card-price,
    ul.products li.product .price {
        font-size: 14px !important;
    }
    .pci-product-card .pci-add-to-cart,
    .pci-product-card .pci-select-options,
    ul.products li.product .button {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* ================================================================
   PRODUCT CARDS - taller thumbnails, wider cards, mobile 2-col
   ================================================================ */

/* Show more of the product image */
.pci-product-card .pci-card-image-wrapper,
.pci-product-card .pci-card-img-wrap,
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product img {
    aspect-ratio: 4 / 5 !important;
    object-fit: contain !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    background: #f8f9fa;
}

/* Dark mode image bg */
[data-theme="dark"] .pci-product-card .pci-card-image-wrapper,
.pci-product-card .pci-card-image-wrapper {
    background: rgba(255,255,255,0.03);
}
[data-theme="light"] .pci-product-card .pci-card-image-wrapper {
    background: #f8f9fa;
}

/* Desktop: use more width */
.pci-products-grid,
.pci-shop-grid,
ul.products,
.woocommerce ul.products {
    max-width: 100% !important;
    padding: 0 16px !important;
}

/* Mobile: 2 columns, edge to edge */
@media (max-width: 768px) {
    .pci-products-grid,
    .pci-shop-grid,
    ul.products,
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }
    ul.products li.product,
    .woocommerce ul.products li.product,
    .pci-product-card {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
    .pci-product-card .pci-card-image-wrapper,
    .helix-storefront-shell li.product img,
    ul.products li.product img {
        aspect-ratio: 3 / 4 !important;
        object-fit: contain !important;
        object-position: top !important;
        padding: 6px 6px 0 !important;
    }
    .pci-product-card .pci-card-title,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important; line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }
    .pci-product-card .pci-card-price,
    .helix-storefront-shell li.product .price,
    ul.products li.product .price {
        font-size: 14px !important;
        margin-top: 2px !important;
        margin-bottom: 8px !important;
    }
    .pci-card-category,
    .woocommerce ul.products li.product .product-category {
        margin-bottom: 2px !important;
        font-size: 9px !important;
    }
    .pci-product-card .pci-add-to-cart,
    .pci-product-card .pci-select-options,
    ul.products li.product .button {
        font-size: 12px !important; padding: 8px 10px !important;
        min-height: 40px !important;
    }
    .pci-card-content {
        padding: 10px 10px 12px !important;
        gap: 0 !important;
    }
}