/**
 * MyElectric Theme — WooCommerce Brand Overrides
 * Loaded only on WooCommerce pages (shop, product, cart, checkout, account).
 * Main WC plugin styles are dequeued in inc/woocommerce.php — this file
 * provides our own brand-consistent replacements.
 *
 * Phase 2: expand with full product page, cart, and checkout overrides.
 * @package MyElectric
 */

/* =============================================================================
   WC GLOBAL RESETS
   ============================================================================= */

.woocommerce,
.woocommerce-page { font-family: var(--font-primary); }

/* =============================================================================
   PRODUCT GRID (archive-product)
   ============================================================================= */

.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }

.woocommerce ul.products li.product {
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Card body: the content below the image fills available height so the button
   is always flush to the card bottom regardless of title length. */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    padding: var(--space-4) var(--space-4) var(--space-1);
    margin: 0;
    line-height: 1.4;
    /* Reserve height for ~2.5 lines so all titles occupy the same block */
    min-height: calc(1.4em * 2.5);
}

.woocommerce ul.products li.product .price {
    padding: var(--space-2) var(--space-4) var(--space-4);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    font-size: var(--text-sm);
    /* Grow to push the Add-to-cart button to the card bottom */
    flex: 1;
}
.woocommerce ul.products li.product .price del { color: var(--color-grey-300); font-weight: var(--fw-regular); }

/* Add to cart button */
/* Product-loop button: full width, always at the card bottom */
.woocommerce ul.products li.product .button {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Full width minus the card's horizontal padding */
    width: calc(100% - (var(--space-4) * 2));
    margin: 0 var(--space-4) var(--space-4);
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    text-decoration: none;
}
/* Generic WC buttons (cart, checkout, etc.) — keep inline-flex */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    text-decoration: none;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover { box-shadow: var(--shadow-green); color: var(--color-white); text-decoration: none; }

/* =============================================================================
   PAGINATION (archive-product)
   ============================================================================= */

.woocommerce-pagination {
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.woocommerce-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination ul.page-numbers li {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.woocommerce-pagination ul.page-numbers li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-grey-100);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-grey-500);
    background: var(--color-white);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(15, 177, 75, 0.06);
    box-shadow: var(--shadow-sm);
}

.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-sm);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
    border: none;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    color: var(--color-grey-300);
}

@media (max-width: 640px) {
    .woocommerce-pagination {
        margin-top: var(--space-8);
        margin-bottom: var(--space-8);
    }
    .woocommerce-pagination ul.page-numbers {
        gap: var(--space-1);
    }
    .woocommerce-pagination ul.page-numbers li .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: var(--text-xs);
        padding: 0 var(--space-2);
    }
}

/* =============================================================================
   BADGES
   ============================================================================= */

.woocommerce span.onsale {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    min-width: unset;
    min-height: unset;
    line-height: 1.6;
}

/* =============================================================================
   SINGLE PRODUCT PAGE (PDP) REDESIGN
   ============================================================================= */

/* Page Wrapper & Layout Grid */
.single-product .myelectric-pdp {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-4) var(--container-pad) var(--space-16);
}

.myelectric-pdp__hero-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

@media (min-width: 1024px) {
    .myelectric-pdp__hero-grid {
        display: grid;
        grid-template-columns: 1fr 1.35fr;
        gap: var(--space-12);
        align-items: start;
    }
}

/* Gallery Override Styles */
.myelectric-pdp__gallery {
    width: 100%;
}

.single-product .woocommerce-product-gallery {
    position: relative;
}

.single-product .woocommerce-product-gallery__wrapper {
    margin: 0;
    padding: 0;
}

.single-product .woocommerce-product-gallery__image img {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-grey-100);
    transition: transform var(--transition-base);
}

/* Custom Zoom Magnifying Glass Icon (Replaces Emoji) */
.single-product .woocommerce-product-gallery__trigger {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    text-indent: -9999px;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.single-product .woocommerce-product-gallery__trigger:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.single-product .woocommerce-product-gallery__trigger::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202123' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Gallery Thumbnails */
.single-product .flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-3) !important;
    padding: 0 !important;
    margin: var(--space-4) 0 0 0 !important;
    list-style: none !important;
}

.single-product .flex-control-thumbs li {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.single-product .flex-control-thumbs li img {
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
    opacity: 0.7;
}

.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
    border-color: var(--color-primary);
    opacity: 1;
}

/* Summary Column & Content Styling */
.myelectric-pdp__summary {
    width: 100% !important;
    float: none !important;
    display: flex;
    flex-direction: column;
}

/* SKU & Category Eyebrow Meta */
.myelectric-pdp__eyebrow-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-grey-500);
    margin-bottom: var(--space-2.5);
}

.myelectric-pdp__meta-category a {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.myelectric-pdp__meta-category a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.myelectric-pdp__meta-divider {
    color: var(--color-grey-200);
}

.myelectric-pdp__meta-sku {
    color: var(--color-grey-500);
}

.myelectric-pdp__meta-sku strong {
    color: var(--color-dark);
    font-weight: var(--fw-semibold);
}

.single-product .myelectric-pdp__summary .product_title {
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin: 0 0 var(--space-4) 0 !important;
    line-height: 1.25;
}

/* Rating Banner */
.myelectric-pdp__rating-banner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5) !important;
}

.myelectric-pdp__stars {
    color: #F59E0B; /* Warm gold */
    font-size: var(--text-base);
    letter-spacing: -1px;
}

.myelectric-pdp__stars .star {
    font-style: normal;
}

.myelectric-pdp__rating-text {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--color-grey-500);
}

/* Price & Discount Display */
.single-product .myelectric-pdp__summary .price {
    font-size: var(--text-2xl) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-primary) !important;
    margin: 0 0 var(--space-5) 0 !important;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.single-product .myelectric-pdp__summary .price del {
    font-size: var(--text-base) !important;
    color: var(--color-grey-300) !important;
    font-weight: var(--fw-regular) !important;
    margin-right: var(--space-1);
    text-decoration: line-through;
}

.single-product .myelectric-pdp__summary .price ins {
    background: transparent !important;
    text-decoration: none !important;
}

.myelectric-pdp__price-hook {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: rgba(15, 177, 75, 0.04);
    border: 1px solid rgba(15, 177, 75, 0.12);
    color: var(--color-primary);
    padding: var(--space-5) var(--space-6) !important;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-5) !important;
    width: 100%;
    line-height: 1.5;
}

.myelectric-pdp__badge-icon {
    stroke-width: 3px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Product Excerpt Description */
.single-product .myelectric-pdp__summary .woocommerce-product-details__short-description {
    font-size: var(--text-sm);
    color: var(--color-grey-500);
    line-height: 1.6;
    margin-bottom: var(--space-8) !important;
}

/* Add to Cart Section Override */
.single-product form.cart {
    margin-bottom: var(--space-6) !important;
    border: 1.5px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    background: var(--color-white);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.single-product form.cart .quantity {
    float: none !important;
    margin: 0 !important;
}

.single-product form.cart .quantity .qty {
    height: 48px;
    width: 70px;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
}

.single-product form.cart .single_add_to_cart_button {
    float: none !important;
    flex: 1;
    min-width: 160px;
    height: 48px;
    padding: 0 var(--space-6) !important;
    margin: 0 !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    border-radius: var(--radius-full) !important;
}

/* Dual CTA Block: WhatsApp Consultation Hook */
.myelectric-pdp__secondary-cta-wrap {
    width: 100%;
    margin-top: var(--space-2);
    margin-bottom: var(--space-8) !important;
}

.myelectric-pdp__whatsapp-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 48px;
    background: transparent !important;
    color: #25D366 !important; /* Official WhatsApp green */
    border: 2px solid #25D366 !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    cursor: pointer;
    text-decoration: none;
    margin: 0 0 var(--space-2) 0 !important;
}

.myelectric-pdp__whatsapp-btn:hover {
    background: rgba(37, 211, 102, 0.04) !important;
    color: #128C7E !important; /* WhatsApp dark green */
    border-color: #128C7E !important;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.12) !important;
    text-decoration: none !important;
}

.myelectric-pdp__whatsapp-icon {
    flex-shrink: 0;
}

.myelectric-pdp__secondary-cta-text {
    font-size: var(--text-xs);
    color: var(--color-grey-500);
    line-height: 1.5;
    text-align: center;
    padding: 0 var(--space-2);
}

/* Local Trust Cards Grid */
.myelectric-pdp__trust-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-6) !important;
    margin-bottom: var(--space-8);
}

@media (max-width: 480px) {
    .myelectric-pdp__trust-cards {
        grid-template-columns: 1fr;
    }
}

.myelectric-pdp__trust-card {
    background: var(--color-off-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6) !important;
    display: flex;
    align-items: center; /* Center-align icon and text vertically */
    gap: var(--space-4) !important;
    text-decoration: none !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}

a.myelectric-pdp__trust-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
}

.myelectric-pdp__trust-icon-box {
    color: var(--color-primary);
    background: rgba(15, 177, 75, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-3.5) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.myelectric-pdp__trust-icon-box svg {
    width: 24px !important;
    height: 24px !important;
}

.myelectric-pdp__trust-content {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Enable flex-truncation/natural wrapping */
}

.myelectric-pdp__trust-title {
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--color-dark);
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.myelectric-pdp__trust-desc {
    font-size: var(--text-xs) !important;
    color: var(--color-grey-500);
    margin: 0;
    line-height: 1.4 !important;
}

/* Flat Layout Sections (Description, FAQs, Reviews) */
.myelectric-pdp__description-section,
.myelectric-pdp__faq-section,
.myelectric-pdp__reviews-section {
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    margin: var(--space-10) 0;
}

.myelectric-pdp__description-heading,
.myelectric-pdp__faq-heading,
.myelectric-pdp__reviews-heading {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin: 0 0 var(--space-6) 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-grey-100);
}

.myelectric-pdp__description-content {
    font-size: var(--text-sm);
    color: var(--color-grey-500);
    line-height: 1.7;
}

.myelectric-pdp__description-content p {
    margin: 0 0 var(--space-4) 0;
}

.myelectric-pdp__description-content p:last-child {
    margin-bottom: 0;
}

/* Objection-Crushing FAQs Accordion UI */
.myelectric-pdp__faq-subheading {
    font-size: var(--text-sm);
    color: var(--color-grey-500);
    margin: 0 0 var(--space-6) 0;
}

.myelectric-pdp__accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.myelectric-pdp__accordion-item {
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-off-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.myelectric-pdp__accordion-item:hover {
    border-color: var(--color-grey-200);
}

.myelectric-pdp__accordion-trigger {
    width: 100%;
    padding: var(--space-5) var(--space-6);
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
}

.myelectric-pdp__accordion-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.myelectric-pdp__accordion-icon::before,
.myelectric-pdp__accordion-icon::after {
    content: '';
    position: absolute;
    background: var(--color-primary);
    transition: transform var(--transition-base);
}

/* Plus line horizontal */
.myelectric-pdp__accordion-icon::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}

/* Plus line vertical */
.myelectric-pdp__accordion-icon::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 16px;
}

.myelectric-pdp__accordion-trigger[aria-expanded="true"] .myelectric-pdp__accordion-icon {
    transform: rotate(90deg);
}

.myelectric-pdp__accordion-trigger[aria-expanded="true"] .myelectric-pdp__accordion-icon::after {
    transform: scaleY(0);
}

.myelectric-pdp__accordion-content {
    transition: max-height var(--transition-base) ease-out;
    max-height: 0;
    overflow: hidden;
}

.myelectric-pdp__accordion-content:not([hidden]) {
    display: block;
}

.myelectric-pdp__accordion-body {
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-grey-500);
    line-height: 1.6;
}

.myelectric-pdp__accordion-body p {
    margin: 0;
}

.myelectric-pdp__accordion-body a {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.myelectric-pdp__accordion-body a:hover {
    text-decoration: underline;
}

/* Customer Reviews flat section styling */
.myelectric-pdp__reviews-content #reviews {
    margin: 0;
}

.myelectric-pdp__reviews-content #comments {
    margin-bottom: var(--space-8);
}

.myelectric-pdp__reviews-content .commentlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.myelectric-pdp__reviews-content .commentlist li {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-grey-100);
}

.myelectric-pdp__reviews-content .commentlist li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.myelectric-pdp__reviews-content .comment_container {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.myelectric-pdp__reviews-content .comment_container img.avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-grey-100);
    flex-shrink: 0;
}

.myelectric-pdp__reviews-content .comment-text {
    flex: 1;
    border: none !important;
    padding: 0 !important;
    background: none !important;
    margin: 0 !important;
}

.myelectric-pdp__reviews-content .comment-text .meta {
    font-size: var(--text-xs);
    color: var(--color-grey-500);
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.myelectric-pdp__reviews-content .comment-text .meta strong {
    color: var(--color-dark);
    font-weight: var(--fw-semibold);
}

.myelectric-pdp__reviews-content .comment-text .description {
    font-size: var(--text-sm);
    color: var(--color-grey-500);
    line-height: 1.6;
}

/* Static stars rating display overrides */
.woocommerce .star-rating,
.star-rating {
    overflow: hidden;
    position: relative;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    width: 80px;
    font-family: var(--font-primary);
    color: var(--color-grey-200);
    display: inline-block;
    letter-spacing: 2px;
}

.woocommerce .star-rating::before,
.star-rating::before {
    content: "★★★★★";
    position: absolute;
    top: 0;
    left: 0;
}

.woocommerce .star-rating span,
.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em; /* Hide numeric text */
    color: #F59E0B; /* Gold */
}

.woocommerce .star-rating span::before,
.star-rating span::before {
    content: "★★★★★";
    position: absolute;
    top: 0;
    left: 0;
}

/* Review Form Container Styling */
.myelectric-pdp__reviews-content #respond {
    background: var(--color-off-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8);
}

.myelectric-pdp__reviews-content #reply-title {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.myelectric-pdp__reviews-content .comment-form-rating {
    margin-bottom: var(--space-5);
}

.myelectric-pdp__reviews-content .comment-form-rating label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-grey-700);
    margin-bottom: var(--space-2);
}

/* Star Rating Picker Form Control */
.myelectric-pdp__reviews-content .stars {
    display: inline-block;
    margin-top: var(--space-1);
}

.myelectric-pdp__reviews-content .stars span {
    display: inline-flex;
}

.myelectric-pdp__reviews-content .stars span a {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    overflow: hidden;
    color: var(--color-grey-200) !important;
    transition: color var(--transition-fast);
}

.myelectric-pdp__reviews-content .stars span a::before {
    content: "★";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    text-indent: 0;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}

/* Sibling hover and selected states for stars */
.myelectric-pdp__reviews-content .stars:hover span a {
    color: #F59E0B !important;
}

.myelectric-pdp__reviews-content .stars span a:hover ~ a {
    color: var(--color-grey-200) !important;
}

.myelectric-pdp__reviews-content .stars.selected span a {
    color: #F59E0B !important;
}

.myelectric-pdp__reviews-content .stars.selected span a.active ~ a {
    color: var(--color-grey-200) !important;
}

/* Form Fields */
.myelectric-pdp__reviews-content #respond p {
    margin-bottom: var(--space-4);
}

.myelectric-pdp__reviews-content #respond label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-grey-700);
    margin-bottom: var(--space-2);
}

.myelectric-pdp__reviews-content #respond input[type="text"],
.myelectric-pdp__reviews-content #respond input[type="email"],
.myelectric-pdp__reviews-content #respond input[type="tel"],
.myelectric-pdp__reviews-content #respond textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    box-sizing: border-box;
}

.myelectric-pdp__reviews-content #respond input[type="text"]:focus,
.myelectric-pdp__reviews-content #respond input[type="email"]:focus,
.myelectric-pdp__reviews-content #respond input[type="tel"]:focus,
.myelectric-pdp__reviews-content #respond textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 177, 75, 0.12);
}

.myelectric-pdp__reviews-content #respond textarea {
    resize: vertical;
    min-height: 120px;
}

@media (min-width: 640px) {
    .myelectric-pdp__reviews-content .comment-form-author,
    .myelectric-pdp__reviews-content .comment-form-email {
        width: calc(50% - var(--space-2));
        float: left;
    }
    .myelectric-pdp__reviews-content .comment-form-author {
        margin-right: var(--space-4);
    }
    .myelectric-pdp__reviews-content .comment-form-phone {
        clear: both;
        width: 100%;
    }
    .myelectric-pdp__reviews-content .comment-form-cookies-consent {
        clear: both;
    }
}

.myelectric-pdp__reviews-content .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    clear: both;
}

.myelectric-pdp__reviews-content .comment-form-cookies-consent input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.myelectric-pdp__reviews-content .comment-form-cookies-consent label {
    margin: 0 !important;
    font-weight: var(--fw-regular) !important;
    font-size: var(--text-xs) !important;
    color: var(--color-grey-500) !important;
    display: inline !important;
}

/* Comment Form Submit Button */
.myelectric-pdp__reviews-content #respond #submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--space-8);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-primary);
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-2);
}

.myelectric-pdp__reviews-content #respond #submit:hover {
    background: linear-gradient(135deg, #12c955, var(--color-primary));
    box-shadow: var(--shadow-green);
}

.myelectric-pdp__reviews-content #respond #submit:active {
    transform: scale(0.98);
}

/* Mobile Sticky Bottom CTA/Inquiry Bar */
.myelectric-pdp__sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-grey-100);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    z-index: var(--z-header); /* Keep it below modals but above standard layout */
    padding: var(--space-3.5) var(--space-4);
    transform: translateY(100%);
    transition: transform var(--transition-base);
    display: none; /* Desktop hidden */
}

@media (max-width: 768px) {
    .myelectric-pdp__sticky-bar {
        display: block;
    }
}

.myelectric-pdp__sticky-bar.is-visible {
    transform: translateY(0);
}

.myelectric-pdp__sticky-bar-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.myelectric-pdp__sticky-info {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Enable flex-truncation */
}

.myelectric-pdp__sticky-title {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.myelectric-pdp__sticky-price {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

.myelectric-pdp__sticky-price del {
    font-size: 10px;
    color: var(--color-grey-300);
    font-weight: var(--fw-regular);
    margin-right: 4px;
}

.myelectric-pdp__sticky-price ins {
    text-decoration: none;
}

.myelectric-pdp__sticky-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.myelectric-pdp__sticky-atc-btn {
    height: 40px !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--text-xs) !important;
    border-radius: var(--radius-full) !important;
    margin: 0 !important;
}

.myelectric-pdp__sticky-wa-btn {
    height: 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #25D366 !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-full) !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background var(--transition-fast) !important;
}

.myelectric-pdp__sticky-wa-btn:hover {
    background: #128C7E !important;
}



/* =============================================================================
   CART & CHECKOUT PAGES
   ============================================================================= */

/* Main Layout Setup */
.myelectric-cart-layout,
.myelectric-checkout-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-top: var(--space-8);
    margin-bottom: var(--space-16);
}
@media (min-width: 1024px) {
    .myelectric-cart-layout,
    .myelectric-checkout-layout {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: var(--space-16);
        align-items: start;
    }
}

/* --------------------------------------
   CART TABLE
-------------------------------------- */
.woocommerce-cart-form { overflow-x: auto; }
.woocommerce-cart-form__contents { width: 100%; border-collapse: collapse; min-width: 600px; }
.woocommerce-cart-form__contents th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-500);
    padding: var(--space-4) 0;
    border-bottom: 2px solid var(--color-grey-100);
    text-align: left;
}
.woocommerce-cart-form__contents td {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-grey-100);
    vertical-align: middle;
}
.woocommerce-cart-form__cart-item .product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-grey-100);
}
.woocommerce-cart-form__cart-item .product-name a {
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    font-size: var(--text-base);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.woocommerce-cart-form__cart-item .product-name a:hover { color: var(--color-primary); }
.woocommerce-cart-form__cart-item .product-price,
.woocommerce-cart-form__cart-item .product-subtotal {
    font-weight: var(--fw-medium);
    color: var(--color-dark);
}
.woocommerce-cart-form__cart-item .product-remove a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-grey-50);
    color: var(--color-error) !important;
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
    transition: background var(--transition-fast);
}
.woocommerce-cart-form__cart-item .product-remove a.remove:hover {
    background: rgba(239,68,68,0.1);
}
.woocommerce-cart-form .actions { padding-top: var(--space-6); }

/* Quantity inputs inside cart and global */
.woocommerce .quantity .qty {
    width: 60px;
    height: 40px;
    padding: 0 var(--space-2);
    text-align: center;
    border: 1.5px solid var(--color-grey-200);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    transition: border-color var(--transition-fast);
}
.woocommerce .quantity .qty:focus { border-color: var(--color-primary); outline: none; }

/* Coupon */
.woocommerce-cart-form .coupon { display: flex; gap: var(--space-3); align-items: center; }
.woocommerce-cart-form .coupon .input-text {
    height: 44px;
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    width: 220px;
}
.woocommerce-cart-form .coupon .input-text:focus { border-color: var(--color-primary); outline: none; }
.woocommerce-cart-form .coupon .button,
.woocommerce-cart-form button[name="update_cart"] {
    height: 44px;
    margin: 0 !important;
    padding: 0 var(--space-6) !important;
}
.woocommerce-cart-form button[name="update_cart"] {
    background: var(--color-white) !important;
    color: var(--color-dark) !important;
    border: 1px solid var(--color-grey-200) !important;
}
.woocommerce-cart-form button[name="update_cart"]:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; box-shadow: none !important; }

/* --------------------------------------
   CARDS (Cart Totals & Order Review)
-------------------------------------- */
.cart-collaterals,
.myelectric-checkout-layout__review {
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--header-height-total) + var(--space-6));
}
.cart_totals h2,
#order_review_heading {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-grey-100);
}
.cart_totals table,
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
}
.cart_totals table th,
.cart_totals table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-grey-50);
}
.cart_totals table th,
.woocommerce-checkout-review-order-table th {
    text-align: left;
    font-weight: var(--fw-medium);
    color: var(--color-grey-500);
}
.cart_totals table td,
.woocommerce-checkout-review-order-table td {
    text-align: right;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
}
.cart_totals .order-total th,
.cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: var(--text-lg);
    color: var(--color-primary);
    border-top: 2px solid var(--color-grey-100);
    border-bottom: none;
    padding-top: var(--space-4);
}

/* Proceed / Place Order Button */
.wc-proceed-to-checkout .checkout-button,
#place_order {
    width: 100%;
    height: 52px;
    font-size: var(--text-base) !important;
    border-radius: var(--radius-full) !important;
    margin: 0 !important;
}

/* --------------------------------------
   CHECKOUT FIELDS & INPUTS
-------------------------------------- */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout h3#ship-to-different-address {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-6);
    color: var(--color-dark);
}
.woocommerce form .form-row { padding: 0; margin-bottom: var(--space-4); }
.woocommerce form .form-row label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--fw-medium);
    font-size: var(--text-sm);
    color: var(--color-grey-700);
}
.woocommerce form .form-row label .required { color: var(--color-error); border: none; text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15,177,75,0.12);
}

.woocommerce-invalid input.input-text {
    border-color: var(--color-error) !important;
}
.woocommerce-validated input.input-text {
    border-color: var(--color-success) !important;
}

/* Select2 Overrides for Country/State dropdowns */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--color-grey-200) !important;
    border-radius: var(--radius-md) !important;
    height: 48px !important;
    display: flex;
    align-items: center;
}
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(15,177,75,0.12);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%) !important; }

/* --------------------------------------
   PAYMENT GATEWAY
-------------------------------------- */
#payment {
    background: var(--color-off-white) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-grey-100) !important;
    margin-top: var(--space-6);
}
#payment ul.payment_methods {
    border-bottom: 1px solid var(--color-grey-100) !important;
    padding: var(--space-4) !important;
}
#payment div.payment_box {
    background: var(--color-white) !important;
    color: var(--color-grey-500) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
}

/* =============================================================================
   NOTICES
   ============================================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    max-width: var(--container-max);
    margin: var(--space-4) auto var(--space-6) !important;
    width: calc(100% - var(--container-pad) * 2);
    padding: var(--space-4) var(--space-6) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    box-sizing: border-box;
    border: 1px solid var(--color-grey-100) !important;
    border-left: 4px solid var(--color-primary) !important;
    background: var(--color-off-white) !important;
    color: var(--color-grey-700);
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
}

/* Success notice specific */
.woocommerce-message {
    border-left-color: var(--color-primary) !important;
    background: rgba(15, 177, 75, 0.04) !important;
    border-color: rgba(15, 177, 75, 0.12) !important;
}

/* Info notice specific */
.woocommerce-info {
    border-left-color: var(--color-info) !important;
    background: rgba(59, 130, 246, 0.04) !important;
    border-color: rgba(59, 130, 246, 0.12) !important;
}

/* Error notice specific */
.woocommerce-error {
    border-left-color: var(--color-error) !important;
    background: rgba(239, 68, 68, 0.04) !important;
    border-color: rgba(239, 68, 68, 0.12) !important;
    display: block !important;
    list-style: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.woocommerce-error li {
    margin: 0 0 var(--space-2) 0 !important;
    padding: 0 !important;
    position: relative;
    padding-left: var(--space-5) !important;
}

.woocommerce-error li::before {
    content: "•";
    color: var(--color-error);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.woocommerce-error li:last-child {
    margin-bottom: 0 !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
}

/* Text and buttons within notices */
.woocommerce-message__text {
    flex: 1;
    font-weight: var(--fw-medium);
    color: var(--color-dark);
}

.woocommerce-message .button.wc-forward,
.woocommerce-info .button,
.woocommerce-error .button {
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-semibold) !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), box-shadow var(--transition-fast) !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0;
}

.woocommerce-message .button.wc-forward:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
    background: var(--color-primary-dark) !important;
    box-shadow: var(--shadow-green) !important;
    color: var(--color-white) !important;
}

@media (max-width: 640px) {
    .woocommerce-message,
    .woocommerce-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-3);
        padding: var(--space-5) !important;
    }
    
    .woocommerce-message .button.wc-forward,
    .woocommerce-info .button {
        width: 100% !important;
    }
}

/* =============================================================================
   SPECIALIZED SHOP & ARCHIVE CATALOG REDESIGN
   ============================================================================= */

/* Main Containers */
.myelectric-shop,
.myelectric-archive {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-8) var(--container-pad) var(--space-16);
    box-sizing: border-box;
}

/* Shop Hero Section (Single Column, Centered) */
.myelectric-shop-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-8);
    padding: var(--space-8) 0;
}

.myelectric-shop-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    line-height: 1.15;
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.myelectric-shop-hero__description {
    font-size: var(--text-base);
    color: var(--color-grey-500);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

/* Shop Search Bar */
.myelectric-shop-search {
    max-width: 600px;
    margin: 0 auto;
}

.myelectric-shop-search__field-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.myelectric-shop-search__icon {
    position: absolute;
    left: var(--space-4);
    color: var(--color-grey-300);
    pointer-events: none;
    z-index: 2;
}

.myelectric-shop-search__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4) 0 44px;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-full);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.myelectric-shop-search__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15,177,75,0.12);
}

.myelectric-shop-search__submit {
    height: 48px;
    padding: 0 var(--space-6) !important;
    border-radius: var(--radius-full) !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Instagram Stories-style Category Grid / Scroller (Larger Icons) */
.myelectric-shop-categories {
    margin-bottom: var(--space-12);
    width: 100%;
}

.myelectric-shop-categories__scroll-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6) var(--space-6);
}

.myelectric-shop-categories__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 180px;
    padding: 0 var(--space-2);
    text-decoration: none !important;
    transition: transform var(--transition-base);
}

.myelectric-shop-categories__item:hover {
    transform: translateY(-4px);
}

.myelectric-shop-categories__circle {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    background: var(--color-off-white);
    border: 1px solid var(--color-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
    box-sizing: border-box;
}

.myelectric-shop-categories__item:hover .myelectric-shop-categories__circle {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(15,177,75,0.10);
    background: var(--color-white);
}

.myelectric-shop-categories__image-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myelectric-shop-categories__image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05));
    transition: transform var(--transition-base);
}

.myelectric-shop-categories__item:hover .myelectric-shop-categories__image-wrapper img {
    transform: scale(1.08);
}

.myelectric-shop-categories__label {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    line-height: 1.3;
    display: block;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    transition: color var(--transition-fast);
}

.myelectric-shop-categories__item:hover .myelectric-shop-categories__label {
    color: var(--color-primary);
}

/* =============================================================================
   LAYOUT GRID (2 COLUMNS: SIDEBAR + CONTENT AREA)
   ============================================================================= */

.myelectric-shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-8);
    align-items: start;
    margin-top: var(--space-6);
}

.myelectric-shop-content {
    width: 100%;
    min-width: 0; /* Prevents overflow in flex/grid */
}

/* Force 3-columns product catalog grid on desktop */
.myelectric-shop-layout .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-6);
}

/* Mobile filter trigger bar (hidden on desktop) */
.myelectric-mobile-filters-bar {
    display: none;
}

/* =============================================================================
   ADVANCED SIDEBAR FILTERS
   ============================================================================= */

.myelectric-shop-sidebar {
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-sizing: border-box;
}

.myelectric-shop-sidebar__header {
    display: none; /* Desktop hides close button and heading */
}

.myelectric-sidebar-widget {
    margin-bottom: var(--space-6);
}

.myelectric-sidebar-widget:last-child {
    margin-bottom: 0;
}

.myelectric-sidebar-widget__title {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1.5px solid var(--color-grey-100);
    letter-spacing: -0.01em;
}

/* Widget Lists */
.myelectric-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2.5);
}

.myelectric-sidebar-list li {
    padding: 0;
    margin: 0;
}

.myelectric-sidebar-list a {
    font-size: var(--text-xs);
    color: var(--color-grey-500);
    text-decoration: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color var(--transition-fast), font-weight var(--transition-fast);
}

.myelectric-sidebar-list a:hover {
    color: var(--color-primary);
}

.myelectric-sidebar-list a.is-active {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.myelectric-sidebar-list a .count {
    font-size: 10px;
    color: var(--color-grey-300);
    font-weight: var(--fw-regular);
}

.myelectric-sidebar-list a.is-active .count {
    color: var(--color-primary);
}

/* Indented sub-category list */
.myelectric-sidebar-sublist {
    list-style: none;
    margin: var(--space-2) 0 0 var(--space-3);
    padding: 0 0 0 var(--space-3);
    border-left: 1px solid var(--color-grey-100);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Clear filters widget styling */
.myelectric-sidebar-widget--clear {
    margin-bottom: var(--space-5);
}

.myelectric-sidebar-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2.5) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    background: rgba(15,177,75,0.05);
    border: 1px dashed var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none !important;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    box-sizing: border-box;
}

.myelectric-sidebar-clear-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* =============================================================================
   CONTROLS TOOLBAR & HEADERS
   ============================================================================= */

.myelectric-shop-controls,
.myelectric-archive-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-grey-100);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-6);
}

.myelectric-shop-controls__count,
.myelectric-archive-controls__count {
    font-size: var(--text-xs);
    color: var(--color-grey-500);
}

.myelectric-shop-controls__count p,
.myelectric-archive-controls__count p {
    margin: 0;
}

/* Sort Dropdown */
.myelectric-shop-controls__sorting .orderby,
.myelectric-archive-controls__sorting .orderby {
    height: 36px;
    padding: 0 var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--color-dark);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    outline: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.myelectric-shop-controls__sorting .orderby:focus,
.myelectric-archive-controls__sorting .orderby:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15,177,75,0.1);
}

/* =============================================================================
   GENERAL ARCHIVES HERO REDESIGN (Category, tag archives)
   ============================================================================= */

.myelectric-archive-hero {
    background: var(--color-off-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    margin-bottom: var(--space-8);
}

.myelectric-archive-hero__container {
    max-width: 800px;
}

.myelectric-archive-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
}

.myelectric-archive-hero__description {
    font-size: var(--text-sm);
    color: var(--color-grey-500);
    line-height: 1.6;
}

.myelectric-archive-hero__description p {
    margin: 0;
}

/* Subcategories Quick Nav inside archives */
.myelectric-archive-subcats {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.myelectric-archive-subcats__title {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-grey-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.myelectric-archive-subcats__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.myelectric-archive-subcats__btn {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--color-dark);
    padding: 6px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-grey-100);
    background: var(--color-white);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.myelectric-archive-subcats__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.myelectric-archive-subcats__count {
    color: var(--color-grey-300);
    font-size: 10px;
}

.myelectric-archive-subcats__btn:hover .myelectric-archive-subcats__count {
    color: var(--color-primary);
}

/* =============================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ============================================================================= */

/* Tablet & Smaller Screens (Filters slide in as Drawer) */
@media (max-width: 1024px) {
    .myelectric-shop-layout {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 0;
    }

    /* Standard product grid columns back to 3 */
    .myelectric-shop-layout .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Mobile Filters Trigger Bar */
    .myelectric-mobile-filters-bar {
        display: block;
        margin-bottom: var(--space-6);
        width: 100%;
    }

    .myelectric-mobile-filters-bar__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: 100%;
        height: 44px;
        font-size: var(--text-xs);
        font-weight: var(--fw-semibold);
        color: var(--color-dark);
        background: var(--color-white);
        border: 1px solid var(--color-grey-100);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: border-color var(--transition-fast), background-color var(--transition-fast);
    }

    .myelectric-mobile-filters-bar__btn:hover {
        border-color: var(--color-primary);
        background: var(--color-off-white);
    }

    /* Slide-over Drawer for Sidebar Filters */
    .myelectric-shop-sidebar {
        position: fixed;
        top: 0;
        left: -320px; /* Hidden offscreen on the left */
        width: 300px;
        height: 100vh;
        background: var(--color-white);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-drawer);
        overflow-y: auto;
        transition: left var(--transition-base) ease;
        display: flex;
        flex-direction: column;
        padding: var(--space-6);
        border: none;
        border-radius: 0;
    }

    .myelectric-shop-sidebar.is-open {
        left: 0; /* Slide in */
    }

    .myelectric-shop-sidebar__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-6);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-grey-100);
    }

    .myelectric-shop-sidebar__title {
        font-size: var(--text-base);
        font-weight: var(--fw-bold);
        color: var(--color-dark);
        margin: 0;
    }

    .myelectric-shop-sidebar__close-btn {
        background: none;
        border: none;
        color: var(--color-grey-500);
        cursor: pointer;
        padding: var(--space-1);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

    .myelectric-shop-sidebar__close-btn:hover {
        background-color: var(--color-grey-50);
        color: var(--color-dark);
    }
}

@media (max-width: 768px) {
    .myelectric-shop-layout .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile phone settings */
@media (max-width: 640px) {
    .myelectric-shop-hero {
        padding: var(--space-4) 0;
        margin-bottom: var(--space-6);
    }
    
    .myelectric-shop-hero__title {
        font-size: 1.75rem;
    }
    
    .myelectric-shop-hero__description {
        font-size: var(--text-sm);
    }
    
    .myelectric-shop-search__field-group {
        gap: 0;
        border: 1px solid var(--color-grey-100);
        border-radius: var(--radius-full);
        background: var(--color-white);
        padding: 2px;
    }
    
    .myelectric-shop-search__field-group:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(15,177,75,0.12);
    }
    
    .myelectric-shop-search__input {
        border: none !important;
        box-shadow: none !important;
        height: 42px;
        padding-left: 36px;
    }
    
    .myelectric-shop-search__icon {
        left: var(--space-3);
    }
    
    .myelectric-shop-search__submit {
        height: 42px;
        font-size: var(--text-xs);
        padding: 0 var(--space-4) !important;
    }
    
    /* Instagram stories swiper on mobile phone */
    .myelectric-shop-categories {
        margin-left: calc(var(--container-pad) * -1);
        margin-right: calc(var(--container-pad) * -1);
        width: calc(100% + (var(--container-pad) * 2));
        margin-bottom: var(--space-8);
        overflow: hidden;
    }
    
    .myelectric-shop-categories__scroll-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--space-4);
        padding: var(--space-2) var(--container-pad) var(--space-4);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
    }
    
    .myelectric-shop-categories__scroll-container::-webkit-scrollbar {
        display: none; /* Safari/Chrome */
    }
    
    .myelectric-shop-categories__item {
        flex: 0 0 auto;
        width: 84px;
        scroll-snap-align: start;
    }
    
    .myelectric-shop-categories__circle {
        width: 76px;
        height: 76px;
    }
    
    .myelectric-shop-categories__image-wrapper {
        width: 44px;
        height: 44px;
    }
    
    .myelectric-shop-categories__label {
        font-size: 10px;
        margin-top: var(--space-1.5);
    }
    
    .myelectric-shop-controls,
    .myelectric-archive-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding-bottom: var(--space-4);
        margin-bottom: var(--space-6);
    }
    
    .myelectric-shop-controls__sorting .orderby,
    .myelectric-archive-controls__sorting .orderby {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =============================================================================
   CART DRAWER & BACKDROP
   ============================================================================= */

.cart-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(32, 33, 35, 0.40);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 100%;
    height: 100vh;
    background: var(--color-white);
    box-shadow: -10px 0 30px rgba(32, 33, 35, 0.15);
    z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.is-open {
    transform: translateX(0);
}

.cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-6);
    border-bottom: 1px solid var(--color-grey-100);
}

.cart-drawer__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin: 0;
}

.cart-drawer__close {
    background: none;
    border: none;
    color: var(--color-grey-500);
    cursor: pointer;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.cart-drawer__close:hover {
    color: var(--color-dark);
    transform: scale(1.05);
}

.cart-drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

/* QA8: the inner wrapper is what WooCommerce re-renders on every fragment refresh,
   so the flex column lives here (keeps the subtotal + buttons pinned to the bottom
   even after an item is removed). The outer .cart-drawer__content keeps its padding. */
.cart-drawer__content > .widget_shopping_cart_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* =============================================================================
   HOVER CART DROPDOWN
   ============================================================================= */

.header-actions__cart-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.cart-hover-dropdown {
    position: absolute;
    top: 100%;
    margin-top: var(--space-3);
    right: 0;
    width: 460px;
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    padding: var(--space-5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Invisible bridge so the hover doesn't drop when moving mouse down */
.cart-hover-dropdown::before {
    content: '';
    position: absolute;
    top: calc(var(--space-3) * -1);
    left: 0;
    right: 0;
    height: var(--space-3);
    background: transparent;
}

/* Open on hover of the parent wrapper on desktop */
@media (hover: hover) {
    .header-actions__cart-wrapper:hover .cart-hover-dropdown {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
}

/* =============================================================================
   MINI-CART LIST STYLING (SHARED between hover dropdown + slide-in drawer)
   Markup (mini-cart.php): li > a.thumb + div.body(name, meta, controls) + a.remove
   ============================================================================= */

.woocommerce-mini-cart {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Each line: fixed thumbnail column + fluid body. Remove (×) sits in the gutter. */
.woocommerce-mini-cart-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: start;
    padding: var(--space-5) 28px var(--space-5) 0 !important;
    border-bottom: 1px solid var(--color-grey-100) !important;
    margin: 0 !important;
}

.woocommerce-mini-cart-item:first-child { padding-top: 0 !important; }
.woocommerce-mini-cart-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Product thumbnail */
.mini-cart-item__thumb {
    display: block;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.woocommerce-mini-cart-item .mini-cart-item__thumb img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-grey-100);
    margin: 0 !important;
    float: none !important;
    display: block;
}

/* Body column: name, meta and controls stack with breathing room */
.mini-cart-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0; /* allow long names to wrap instead of overflowing */
}

/* Product name */
.mini-cart-item__name {
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--color-dark) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    overflow-wrap: break-word;
    word-break: break-word;
}
.mini-cart-item__name:hover { color: var(--color-primary) !important; }

/* Condition / variation meta — sits directly under the name */
.woocommerce-mini-cart-item .variation,
.woocommerce-mini-cart-item dl.variation {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--text-xs) !important;
    color: var(--color-grey-500) !important;
    line-height: 1.4 !important;
}
.woocommerce-mini-cart-item .variation dt,
.woocommerce-mini-cart-item .variation dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-regular) !important;
    color: var(--color-grey-500) !important;
}
.woocommerce-mini-cart-item .variation dt {
    font-weight: var(--fw-semibold) !important;
}
.woocommerce-mini-cart-item .variation dd p {
    margin: 0 !important;
    display: inline !important;
}

/* Controls row: quantity stepper on the left, line total on the right */
.mini-cart-item__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.mini-cart-item__line-total {
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--color-primary) !important;
    white-space: nowrap;
    margin-left: auto;
}
.mini-cart-item__line-total .amount { color: var(--color-primary) !important; }

.mini-cart-item__qty-static {
    font-size: var(--text-xs) !important;
    color: var(--color-grey-500) !important;
    font-weight: var(--fw-medium) !important;
}

/* Quantity stepper (+/-) */
.mini-cart-qty {
    display: inline-flex;
    align-items: center;
    height: 32px;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-full);
    background: var(--color-white);
    overflow: hidden;
    transition: opacity var(--transition-fast);
}
.mini-cart-qty.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.mini-cart-qty__btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-grey-700);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mini-cart-qty__btn:hover:not(:disabled) {
    background: rgba(15, 177, 75, 0.08);
    color: var(--color-primary);
}
.mini-cart-qty__btn:disabled {
    color: var(--color-grey-200);
    cursor: not-allowed;
}
.mini-cart-qty__btn svg { width: 13px; height: 13px; }
.mini-cart-qty__value {
    min-width: 30px;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    font-variant-numeric: tabular-nums;
}

/* Remove (×) — anchored top-right in the reserved gutter, aligned with the thumb */
.woocommerce-mini-cart-item a.remove {
    position: absolute !important;
    right: 0 !important;
    top: var(--space-5) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-grey-50) !important;
    color: var(--color-grey-500) !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
    float: none !important;
}
.woocommerce-mini-cart-item:first-child a.remove { top: 0 !important; }
.woocommerce-mini-cart-item a.remove:hover {
    background: var(--color-error) !important;
    color: var(--color-white) !important;
}

/* Total subtotal */
.woocommerce-mini-cart__total {
    margin: var(--space-5) 0 var(--space-4) !important;
    padding-top: var(--space-5) !important;
    border-top: 1px solid var(--color-grey-100) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-base) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-dark) !important;
}

.woocommerce-mini-cart__total strong {
    font-weight: var(--fw-semibold) !important;
    color: var(--color-grey-700) !important;
}

.woocommerce-mini-cart__total .amount {
    color: var(--color-primary) !important;
}

/* Buttons block */
.woocommerce-mini-cart__buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-mini-cart__buttons a.button {
    height: 44px;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-semibold) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin: 0 !important;
}

/* View Cart Button (ghost outlined style) */
.woocommerce-mini-cart__buttons a.button:not(.checkout) {
    background: transparent !important;
    color: var(--color-dark) !important;
    border: 1px solid var(--color-grey-200) !important;
    box-shadow: none !important;
}

.woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Checkout Button (solid green gradient style) */
.woocommerce-mini-cart__buttons a.button.checkout {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-white) !important;
    border: none !important;
}

.woocommerce-mini-cart__buttons a.button.checkout:hover {
    box-shadow: var(--shadow-green) !important;
}

/* Empty message */
.woocommerce-mini-cart__empty-message {
    font-size: var(--text-sm) !important;
    color: var(--color-grey-500) !important;
    text-align: center;
    padding: var(--space-8) 0;
    margin: 0 !important;
}

/* =============================================================================
   MINI-CART CONTAINER-SPECIFIC TWEAKS (hover dropdown vs. slide-in drawer)
   ============================================================================= */

/* HOVER DROPDOWN — cap the list height so a full cart scrolls instead of
   overflowing the viewport; the subtotal + buttons stay visible below it. */
.cart-hover-dropdown {
    max-width: calc(100vw - var(--space-8));
}
.cart-hover-dropdown .woocommerce-mini-cart {
    max-height: 46vh;
    overflow-y: auto;
    /* Room for the scrollbar so item content never sits under it */
    margin-right: calc(var(--space-2) * -1) !important;
    padding-right: var(--space-2) !important;
}

/* SLIDE-IN DRAWER — keep the subtotal + buttons pinned at the bottom and let only
   the item list scroll, so the footer never drifts on long or short carts.
   Larger, touch-friendly sizing throughout. */
.cart-drawer__content { overflow: hidden !important; }
.cart-drawer__content > .widget_shopping_cart_content { min-height: 0 !important; }
.cart-drawer .woocommerce-mini-cart {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    /* keep scrollbar off the item content */
    margin-right: calc(var(--space-2) * -1) !important;
    padding-right: var(--space-2) !important;
}
.cart-drawer .woocommerce-mini-cart__total {
    margin: var(--space-6) 0 var(--space-4) !important;
    flex-shrink: 0;
}
.cart-drawer .woocommerce-mini-cart__buttons { flex-shrink: 0; }
.cart-drawer .woocommerce-mini-cart-item { padding: var(--space-6) 28px var(--space-6) 0 !important; }
.cart-drawer .woocommerce-mini-cart-item:first-child { padding-top: 0 !important; }
.cart-drawer .woocommerce-mini-cart-item:last-child { padding-bottom: var(--space-2) !important; }
.cart-drawer .mini-cart-item__name { font-size: var(--text-base) !important; }
.cart-drawer .woocommerce-mini-cart__buttons a.button { height: 48px; font-size: var(--text-sm) !important; }

@media (max-width: 480px) {
    .woocommerce-mini-cart-item { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-3); }
    .mini-cart-item__thumb,
    .woocommerce-mini-cart-item .mini-cart-item__thumb img { width: 48px; height: 48px; }
}

/* =============================================================================
   EMPTY CART PAGE & WOOCOMMERCE BLOCKS OVERRIDES
   ============================================================================= */

.wp-block-woocommerce-empty-cart-block,
.wc-block-cart__empty-cart,
.wc-block-cart__empty-container,
.wc-block-components-empty-state {
    max-width: var(--container-max) !important;
    margin: var(--space-12) auto var(--space-16) !important;
    padding: var(--space-12) var(--container-pad) !important;
    text-align: center !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-grey-100) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Premium SaaS Empty Cart Icon (Replaces Sad Crying Face) */
h2.with-empty-cart-icon::before,
.wc-block-cart__empty-cart__icon,
.wc-block-components-empty-state__icon,
.wc-block-cart__empty-image {
    content: "" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    background-color: var(--color-off-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230FB14B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'%3E%3C/path%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 36px 36px !important;
    background-position: center !important;
    border: 1px solid var(--color-grey-100) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--shadow-sm) !important;
    margin: 0 auto var(--space-6) !important;
    position: relative !important;
}

.wc-block-cart__empty-cart__icon::before,
.wc-block-components-empty-state__icon::before {
    display: none !important;
}

.wc-block-cart__empty-cart__icon svg,
.wc-block-components-empty-state__icon svg {
    display: none !important;
}

/* Title */
.wc-block-cart__empty-cart__title,
.wc-block-components-empty-state__title,
.wc-block-cart__empty-cart > p:first-of-type {
    font-family: var(--font-primary) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-dark) !important;
    margin: 0 auto var(--space-4) !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Replace ugly separator dots with clean SaaS divider */
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator,
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wc-block-cart__empty-cart hr.wp-block-separator,
.wc-block-cart__empty-cart .wp-block-separator {
    border: none !important;
    border-top: 2px solid var(--color-grey-100) !important;
    width: 80px !important;
    margin: var(--space-8) auto var(--space-12) !important;
    background: transparent !important;
    color: transparent !important;
    height: 0 !important;
    opacity: 1 !important;
}

.wp-block-woocommerce-empty-cart-block hr.wp-block-separator::before,
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator::after,
.wc-block-cart__empty-cart hr.wp-block-separator::before,
.wc-block-cart__empty-cart hr.wp-block-separator::after {
    display: none !important;
}

/* Recommendation / "New in store" block heading */
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title),
.wc-block-cart__empty-cart h2:not(.wc-block-components-empty-state__title),
.wc-block-cart__empty-container h2:not(.wc-block-components-empty-state__title) {
    font-family: var(--font-primary) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-dark) !important;
    margin: var(--space-12) auto var(--space-8) !important;
    position: relative;
    text-align: center;
    letter-spacing: -0.02em !important;
}

/* Product list container inside empty cart recommendations & global wc-block-grid */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
.wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products,
.wc-block-cart__empty-cart .wc-block-grid__products,
.wc-block-cart__empty-cart ul.wc-block-grid__products,
.wc-block-cart__empty-container .wc-block-grid__products,
.wc-block-cart__empty-container ul.wc-block-grid__products,
.wc-block-components-empty-state .wc-block-grid__products,
.wc-block-components-empty-state ul.wc-block-grid__products,
.wc-block-grid__products,
ul.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-6) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

@media (max-width: 1024px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
    .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products,
    .wc-block-cart__empty-cart .wc-block-grid__products,
    .wc-block-cart__empty-cart ul.wc-block-grid__products,
    .wc-block-cart__empty-container .wc-block-grid__products,
    .wc-block-cart__empty-container ul.wc-block-grid__products,
    .wc-block-components-empty-state .wc-block-grid__products,
    .wc-block-components-empty-state ul.wc-block-grid__products,
    .wc-block-grid__products,
    ul.wc-block-grid__products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
    .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products,
    .wc-block-cart__empty-cart .wc-block-grid__products,
    .wc-block-cart__empty-cart ul.wc-block-grid__products,
    .wc-block-cart__empty-container .wc-block-grid__products,
    .wc-block-cart__empty-container ul.wc-block-grid__products,
    .wc-block-components-empty-state .wc-block-grid__products,
    .wc-block-components-empty-state ul.wc-block-grid__products,
    .wc-block-grid__products,
    ul.wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Recommendations Card styling (Fixed 100% width for grid items) */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product,
.wc-block-cart__empty-cart .wc-block-grid__product,
.wc-block-cart__empty-container .wc-block-grid__product,
.wc-block-components-empty-state .wc-block-grid__product,
.wc-block-grid__products .wc-block-grid__product,
ul.wc-block-grid__products li.wc-block-grid__product,
li.wc-block-grid__product {
    max-width: 100% !important;
    width: 100% !important;
    background: var(--color-off-white) !important;
    border: 1px solid var(--color-grey-100) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    position: relative !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover,
.wc-block-cart__empty-cart .wc-block-grid__product:hover,
.wc-block-cart__empty-container .wc-block-grid__product:hover,
.wc-block-components-empty-state .wc-block-grid__product:hover,
.wc-block-grid__products .wc-block-grid__product:hover,
li.wc-block-grid__product:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-4px) !important;
}

/* Image */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link,
.wc-block-cart__empty-cart .wc-block-grid__product-link,
.wc-block-cart__empty-container .wc-block-grid__product-link,
.wc-block-components-empty-state .wc-block-grid__product-link,
.wc-block-grid__product-image,
.wc-block-grid__product-link {
    display: block !important;
    margin: 0 0 var(--space-4) 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--color-grey-100) !important;
    background: var(--color-white) !important;
    overflow: hidden !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link img,
.wc-block-cart__empty-cart .wc-block-grid__product-link img,
.wc-block-cart__empty-container .wc-block-grid__product-link img,
.wc-block-components-empty-state .wc-block-grid__product-link img,
.wc-block-grid__product-image img,
.wc-block-grid__product-link img {
    width: 100% !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
    transition: transform var(--transition-base) !important;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
.wc-block-grid__product:hover .wc-block-grid__product-link img {
    transform: scale(1.03) !important;
}

/* =============================================================================
   WOOCOMMERCE CART & CHECKOUT BLOCKS OVERRIDES (GUTENBERG BLOCKS)
   ============================================================================= */

/* Global Block Typography & Base */
.wc-block-checkout {
    font-family: var(--font-primary) !important;
    max-width: var(--container-max);
    margin: 0 auto var(--space-16);
}

/* Target the exact Gutenberg inner container for filled cart */
.wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block {
    font-family: var(--font-primary) !important;
    max-width: var(--container-max) !important;
    margin: 0 auto var(--space-16) !important;
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: var(--space-8) !important;
    align-items: start !important;
}

@media (max-width: 1024px) {
    .wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }
}

/* Block Containers */
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar,
.wc-block-components-main {
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box !important;
    width: 100% !important;
}

.wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar {
    background: var(--color-off-white) !important;
}

@media (min-width: 1024px) {
    .wp-block-woocommerce-cart-totals-block,
    .wc-block-components-sidebar {
        position: sticky;
        top: calc(var(--header-height-main) + var(--space-6));
    }
}

/* CHECKOUT 2-COLUMN LAYOUT
   The shared block-card rule above forces width:100% on __main and __sidebar,
   which collapsed the checkout's default flex columns into one full-width stack
   (form on top, order summary far below → 3000px+ scroll). Restore proper
   side-by-side sizing: form fills, order summary is a fixed sticky column. */
.wc-block-checkout__main {
    flex: 1 1 0 !important; /* basis 0 so it shares the row instead of claiming it all */
    width: auto !important;
    min-width: 0 !important;
    margin-right: var(--space-8) !important;
}
.wc-block-checkout__sidebar {
    flex: 0 0 380px !important;
    width: 380px !important;
    max-width: 380px !important;
}

@media (max-width: 1024px) {
    .wc-block-checkout__main {
        margin-right: 0 !important;
        margin-bottom: var(--space-6) !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }
    .wc-block-checkout__sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* Cart Items Table styling */
/* Collapse the table so per-cell borders MERGE into one continuous line.
   With the default `separate` model + border-spacing, the header underline and
   row separators rendered as disconnected segments under PRODUCT / TOTAL. */
.wc-block-cart-items {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.wc-block-cart-items th {
    font-size: var(--text-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-grey-500) !important;
    padding-bottom: var(--space-4) !important;
    border-bottom: 2px solid var(--color-grey-100) !important;
}

.wc-block-cart-items td,
.wc-block-cart-item {
    border-bottom: 1px solid var(--color-grey-100) !important;
    padding: var(--space-6) 0 !important;
    vertical-align: top !important;
}

/* The final row sits flush with the card's own padding — no trailing divider */
.wc-block-cart-items tr:last-child td {
    border-bottom: none !important;
}

/* Override table cell layout for product item to prevent image/text crowding */
.wc-block-cart-items td.wc-block-cart-item__product,
.wc-block-cart-item__product {
    display: table-cell !important;
    padding: var(--space-6) 0 !important;
    box-sizing: border-box !important;
}

.wc-block-cart-items td.wc-block-cart-item__product > .wc-block-cart-item__details,
.wc-block-cart-items td.wc-block-cart-item__product > div,
.wc-block-cart-item__product > div {
    display: flow-root !important;
    box-sizing: border-box !important;
}

.wc-block-cart-items td.wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-components-product-name {
    font-weight: var(--fw-semibold) !important;
    color: var(--color-dark) !important;
    font-size: var(--text-base) !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: var(--space-1) !important;
    white-space: normal !important;
}

.wc-block-components-product-name:hover {
    color: var(--color-primary) !important;
}

.wc-block-cart-items td.wc-block-cart-item__product .wc-block-cart-item__image,
.wc-block-cart-item__image {
    width: 80px !important;
    height: 80px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-grey-100) !important;
    flex-shrink: 0 !important;
    float: left !important;
    margin-right: var(--space-6) !important;
    margin-bottom: var(--space-4) !important;
    display: block !important;
    object-fit: cover !important;
}

.wc-block-components-product-price {
    font-weight: var(--fw-medium) !important;
    color: var(--color-dark) !important;
}

/* Buttons inside Cart/Checkout Blocks */
.wc-block-components-button:not(.is-link) {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    padding: 0 var(--space-8) !important;
    height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold) !important;
    font-family: var(--font-primary) !important;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast) !important;
    box-shadow: var(--shadow-sm) !important;
}

.wc-block-components-button:not(.is-link):hover {
    box-shadow: var(--shadow-green) !important;
}

/* Input Fields inside Blocks */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox-control input {
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    border: 1.5px solid var(--color-grey-200) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    background: var(--color-white) !important;
}

/* Floating label styles */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-combobox-control label {
    font-family: var(--font-primary) !important;
    color: var(--color-grey-500);
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-textarea textarea:focus,
.wc-block-components-combobox-control input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(15,177,75,0.12) !important;
    outline: none !important;
}

/* Step Headings in Checkout */
.wc-block-components-checkout-step__heading {
    font-size: var(--text-xl) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--color-dark) !important;
    margin-bottom: var(--space-4) !important;
    border-bottom: 1px solid var(--color-grey-100) !important;
    padding-bottom: var(--space-3) !important;
}

/* Notice / Error overrides inside Blocks */
.wc-block-components-notice-banner.is-error {
    border-top-color: var(--color-error) !important;
    background: rgba(239, 68, 68, 0.05) !important;
    border-radius: var(--radius-md) !important;
}

/* Sidebar Totals */
.wc-block-components-totals-wrapper {
    background: transparent !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    color: var(--color-grey-700) !important;
    font-size: var(--text-sm) !important;
}

.wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--color-dark) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--fw-bold) !important;
}

/* Remove button in blocks */
.wc-block-cart-item__remove-link {
    color: var(--color-error) !important;
    font-weight: var(--fw-semibold) !important;
    font-size: var(--text-xs) !important;
    text-decoration: none !important;
}
.wc-block-cart-item__remove-link:hover {
    text-decoration: underline !important;
}

/* Title */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title,
.wc-block-cart__empty-cart .wc-block-grid__product-title,
.wc-block-cart__empty-container .wc-block-grid__product-title,
.wc-block-components-empty-state .wc-block-grid__product-title,
.wc-block-grid__product-title,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--color-dark) !important;
    padding: 0 var(--space-5) var(--space-1) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title a,
.wc-block-cart__empty-cart .wc-block-grid__product-title a,
.wc-block-cart__empty-container .wc-block-grid__product-title a,
.wc-block-components-empty-state .wc-block-grid__product-title a,
.wc-block-grid__product-title a,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title a {
    color: var(--color-dark) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title a:hover,
.wc-block-cart__empty-cart .wc-block-grid__product-title a:hover,
.wc-block-cart__empty-container .wc-block-grid__product-title a:hover,
.wc-block-components-empty-state .wc-block-grid__product-title a:hover,
.wc-block-grid__product-title a:hover,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title a:hover {
    color: var(--color-primary) !important;
}

/* Price */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
.wc-block-cart__empty-cart .wc-block-grid__product-price,
.wc-block-cart__empty-container .wc-block-grid__product-price,
.wc-block-components-empty-state .wc-block-grid__product-price,
.wc-block-grid__product-price,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price {
    padding: 0 var(--space-5) var(--space-4) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-primary) !important;
    font-size: var(--text-sm) !important;
    margin: 0 0 var(--space-4) 0 !important;
    text-align: left !important;
    display: block !important;
    flex-grow: 1 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price ins,
.wc-block-cart__empty-cart .wc-block-grid__product-price ins,
.wc-block-cart__empty-container .wc-block-grid__product-price ins,
.wc-block-components-empty-state .wc-block-grid__product-price ins,
.wc-block-grid__product-price ins,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price ins {
    text-decoration: none !important;
    background: transparent !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price del,
.wc-block-cart__empty-cart .wc-block-grid__product-price del,
.wc-block-cart__empty-container .wc-block-grid__product-price del,
.wc-block-components-empty-state .wc-block-grid__product-price del,
.wc-block-grid__product-price del,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price del {
    color: var(--color-grey-300) !important;
    font-weight: var(--fw-regular) !important;
    margin-right: var(--space-1) !important;
    display: inline-block !important;
}

/* Button */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart,
.wc-block-cart__empty-cart .wc-block-grid__product-add-to-cart,
.wc-block-cart__empty-container .wc-block-grid__product-add-to-cart,
.wc-block-grid__product-add-to-cart,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-add-to-cart {
    padding: 0 var(--space-5) var(--space-5) !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wp-block-button__link,
.wc-block-cart__empty-cart .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-cart__empty-cart .wc-block-grid__product .wp-block-button__link,
.wc-block-cart__empty-container .wc-block-grid__product-add-to-cart,
.wc-block-cart__empty-container .wc-block-grid__product .wp-block-button__link,
.wc-block-components-empty-state .wc-block-grid__product-add-to-cart,
.wc-block-components-empty-state .wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-semibold) !important;
    cursor: pointer !important;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast) !important;
    text-decoration: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
    box-shadow: var(--shadow-sm) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wp-block-button__link:hover,
.wc-block-cart__empty-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-cart__empty-cart .wc-block-grid__product .wp-block-button__link:hover,
.wc-block-cart__empty-container .wc-block-grid__product-add-to-cart:hover,
.wc-block-cart__empty-container .wc-block-grid__product .wp-block-button__link:hover,
.wc-block-components-empty-state .wc-block-grid__product-add-to-cart:hover,
.wc-block-components-empty-state .wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover {
    box-shadow: var(--shadow-green) !important;
    color: var(--color-white) !important;
}

/* ==========================================================================
   RENEWED CONDITION SELECTOR & REQUEST QUOTE UI
   ========================================================================== */

/* ── 1. CONDITION SELECTOR (BACKMARKET STYLE) ── */
/* First element inside the bordered cart card — the card edge already separates
   it from the price, so no extra top margin / divider line is needed here. */
.myelectric-condition-selector {
    width: 100%;
    flex-basis: 100%;
    margin: 0 0 var(--space-2);
}
.myelectric-condition-selector__label {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}
.myelectric-condition-selector__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.myelectric-condition-selector[data-mode="renewed_only"] .myelectric-condition-selector__grid {
    grid-template-columns: 1fr;
}
.condition-card {
    background: var(--color-white);
    border: 1.5px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.condition-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-grey-300);
}
.condition-card.is-active {
    background: var(--color-off-white);
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(15,177,75,0.12);
}
.condition-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.condition-card__title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.condition-card__indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-grey-300);
    transition: background var(--transition-fast);
}
.condition-card.is-active .condition-card__indicator {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15,177,75,0.2);
}
.condition-card__title {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
}
.condition-card__badge {
    background: var(--color-accent);
    color: var(--color-dark);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}
.condition-card__price {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}
.condition-card__subtext {
    font-size: var(--text-xs);
    color: var(--color-grey-500);
    margin: 0;
    line-height: 1.4;
}

/* Tooltip */
.condition-card__tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.condition-card__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-grey-300);
    color: var(--color-white);
    font-size: 10px;
    font-weight: var(--fw-bold);
    cursor: help;
    transition: background var(--transition-fast);
}
.condition-card__info-icon:hover {
    background: var(--color-dark);
}
.condition-card__tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    background: var(--color-dark);
    color: var(--color-white);
    font-size: var(--text-xs);
    line-height: 1.5;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
    pointer-events: none;
    text-align: left;
}
.condition-card__tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--color-dark) transparent transparent transparent;
}
.condition-card__info-icon:hover + .condition-card__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.myelectric-condition-selector__learn-more {
    margin-top: var(--space-2);
    text-align: left;
}
.myelectric-condition-selector__link {
    font-size: 0.6875rem; /* 11px — quiet footnote, below the cards */
    font-weight: var(--fw-medium);
    color: var(--color-grey-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.myelectric-condition-selector__link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── 2. REQUEST QUOTE PDP BOX ── */
.myelectric-request-quote-box {
    background: var(--color-off-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin: var(--space-8) 0;
    box-shadow: var(--shadow-sm);
}
.myelectric-request-quote-box__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.myelectric-request-quote-box__icon {
    color: var(--color-primary);
    flex-shrink: 0;
}
.myelectric-request-quote-box__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin: 0;
}
.myelectric-request-quote-box__desc {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-grey-500);
    margin: 0 0 var(--space-6);
}
.myelectric-request-quote-box__btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 3. GRID ELEMENTS ── */
.myelectric-price-on-request-badge {
    display: inline-block;
    background: var(--color-grey-100);
    color: var(--color-grey-700);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}
.myelectric-grid-quote-btn {
    width: 100%;
    margin-top: var(--space-3);
    text-align: center;
}

/* =============================================================================
   MY ACCOUNT PAGE
   The theme strips WooCommerce's own CSS, so the default account markup rendered
   as a raw bulleted list + plain text. Re-establish a proper dashboard layout:
   a styled nav sidebar + a content card. (Account page is admin/staff-only on
   this guest-checkout store, but it shouldn't look broken.)
   ============================================================================= */
.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-8);
    max-width: var(--container-max);
    margin: var(--space-12) auto var(--space-16);
    align-items: start;
}
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-grey-700);
    font-family: var(--font-primary);
    font-weight: var(--fw-medium);
    font-size: var(--text-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.woocommerce-MyAccount-navigation-link a:hover {
    background: var(--color-off-white);
    color: var(--color-primary);
}
.woocommerce-MyAccount-navigation-link.is-active a {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
}

.woocommerce-MyAccount-content {
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.woocommerce-MyAccount-content p {
    color: var(--color-grey-500);
    line-height: 1.6;
}
.woocommerce-MyAccount-content a {
    color: var(--color-primary);
}
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--space-6);
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
}
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
    box-shadow: var(--shadow-green);
}

/* Account forms (edit address / account details) — match the design-system input */
.woocommerce-MyAccount-content .woocommerce-Input,
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    width: 100%;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce-MyAccount-content .woocommerce-Input:focus,
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 177, 75, 0.12);
}
.woocommerce-MyAccount-content label {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
}

/* =============================================================================
   QA FIXES (2026-06-27) — archive hero, add-to-cart, reviews, block cart/checkout
   ============================================================================= */

/* ── QA1: category image beside the title in the archive hero ── */
.myelectric-archive-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.myelectric-archive-hero__text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
}

.myelectric-archive-hero__media {
    flex: 0 0 auto;
    width: 116px;
    height: 116px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-grey-100);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.myelectric-archive-hero__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-3);
    display: block;
}

/* Let archive hero content use the full card width so the image sits at the right edge */
.myelectric-archive .myelectric-archive-hero__container {
    max-width: 100%;
}

/* ── QA4: product search bar inside the archive/search hero (left-aligned) ── */
.myelectric-archive-hero__search {
    margin: var(--space-6) 0 0;
    max-width: 560px;
}

@media (max-width: 640px) {
    .myelectric-archive-hero__media {
        display: none;
    }
}

/* ── QA7: the cart drawer opens automatically on add-to-cart, so suppress the
   stray unstyled "View cart" link WooCommerce appends after the grid button ── */
.myelectric-shop-grid .added_to_cart,
.myelectric-archive-grid .added_to_cart,
ul.products li.product .added_to_cart {
    display: none !important;
}

/* ── QA9: keep the review honeypot invisible; tidy the math captcha field ── */
.myelectric-review-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.comment-form-captcha label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.comment-form-captcha input[type="text"] {
    max-width: 160px;
}

/* ── QA10: block cart line items — hide the long product description + tighten ── */
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-cart-items .wc-block-components-product-metadata__description {
    display: none !important;
}

.wc-block-cart-item__product .wc-block-components-product-metadata {
    margin-bottom: var(--space-2) !important;
}

/* ── QA11B: consistent vertical spacing between block checkout address/contact
   fields (billing fields were rendering with no gaps). first-child reset keeps
   the top flush with the step heading. ── */
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-text-input,
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-combobox,
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-select,
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-country-input,
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-state-input,
.wc-block-checkout__billing-fields .wc-block-components-text-input,
.wc-block-checkout__billing-fields .wc-block-components-combobox,
.wc-block-checkout__billing-fields .wc-block-components-select {
    margin-top: var(--space-4) !important;
}

.wc-block-checkout .wc-block-components-address-form > :first-child,
.wc-block-checkout__billing-fields .wc-block-components-address-form > :first-child {
    margin-top: 0 !important;
}

/* =============================================================================
   ORDER-RECEIVED (Thank You) — native WooCommerce endpoint
   Reuses the .thank-you-* shell from style.css; this adds the inline success
   icon + the order overview card that live only on the WC confirmation page.
   Customers land here now (the old /thank-you/ hijack was removed) so that
   woocommerce_thankyou + every purchase-tracking integration fire correctly.
   ============================================================================= */
.thank-you-icon svg {
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    filter: drop-shadow(0 10px 20px rgba(15, 177, 75, 0.15));
}

.myelectric-order-overview {
    list-style: none;
    margin: 0 auto var(--space-10);
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-8);
    background: var(--color-off-white);
    border: 1px solid var(--color-grey-100);
    border-radius: var(--radius-xl);
    text-align: center;
}

.myelectric-order-overview li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-grey-300);
    border: 0;
    padding: 0;
    margin: 0;
}

.myelectric-order-overview li strong {
    font-size: var(--text-base);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-dark);
    font-weight: var(--fw-semibold);
}

/* Two actions (Continue Shopping + View Order) sit side by side, wrap on mobile. */
.woocommerce-order .thank-you-primary-action {
    flex-wrap: wrap;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .myelectric-order-overview {
        flex-direction: column;
        gap: var(--space-4);
    }
}