/*
 Theme Name:    Electro Child
 Theme URI:     https://themeforest.net/item/electro-electronics-store-woocommerce-theme/15720624
 Description:   This is the child theme of Electro
 Author:        MadrasThemes
 Author URI:    https://madrasthemes.com/
 Template:      electro
 Version:       3.3.12
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
 Tags:          light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:   electro-child
*/

/* ================================================================
   HEADER MINI CART
   ================================================================ */

header#masthead span.cart-items-total-price.total-price br {
    display: none;
}
.woocommerce span.onsale {
    display: none;
}
header#masthead span.cart-items-total-price.total-price span.wise-price {
    margin-left: 10px;
}

@media (max-width: 1199px) {
    header#masthead span.cart-items-total-price.total-price {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        line-height: 1.3 !important;
    }
    header#masthead span.cart-items-total-price.total-price span.wise-price {
        margin-left: 0 !important;
    }
}


/* ================================================================
   SIDEBAR / FOOTER WIDGET PRODUCT LIST

   2-line price format per item:
     Line 1: £sale  ~~£original~~   (electro-price, GBP)
     Line 2: €sale  ~~€original~~   (wise-price, EUR, smaller)
     Line 3: ★ Stars                (below prices)

   HTML variants:
     Sidebar → <li> > <a>, .star-rating, span.electro-price, ...
     Footer  → <li> > <small> > <a>, .star-rating, span.electro-price, ...
   ================================================================ */

/* ── Shared: each price span is one block line ──────────────────
   ins and del stay inline → both appear on the same line.        */
.product_list_widget span.electro-price {
    display: block;
}
.product_list_widget span.electro-price + br {
    display: none;
}
.product_list_widget span.wise-price {
    display: block !important;
    font-size: 0.72em !important;
    line-height: 1.5 !important;
    color: #555 !important;
    white-space: nowrap !important;
}
.product_list_widget span.wise-price ins {
    text-decoration: none;
}

/* ── SIDEBAR — flex on <li>, reorder its direct children ─────────
   --img-offset: 95px matches the Electro theme's own margin-left
   on .product_list_widget .electro-price.                         */
.product_list_widget li {
    display: flex;
    flex-direction: column;
    --img-offset: 95px;
}
.product_list_widget li > a {
    order: 1;
    display: block;
    overflow: hidden; /* contains thumbnail float */
}
.product_list_widget li > span.electro-price {
    order: 2;
    /* theme already applies margin-left: 95px here */
}
.product_list_widget li > span.wise-price {
    order: 3;
    margin-left: var(--img-offset); /* align with GBP above */
}
.product_list_widget li > .star-rating {
    order: 4;
    margin-left: var(--img-offset);
}

/* ── FOOTER — flex on <small>, reorder its children ──────────────
   --img-offset: 74px overrides the sidebar value for footer items.
   Also overrides the theme's 95px on electro-price.               */
.product_list_widget li small {
    display: flex;
    flex-direction: column;
    --img-offset: 74px;
}
.product_list_widget li small > a {
    order: 1;
    display: block;
    overflow: hidden;
}
.product_list_widget li small > span.electro-price {
    order: 2;
    margin-left: var(--img-offset); /* 74px — overrides theme's 95px */
}
.product_list_widget li small > span.wise-price {
    order: 3;
    margin-left: var(--img-offset) !important;
}
.product_list_widget li small > .star-rating {
    order: 4;
    margin-left: var(--img-offset);
}


/* ================================================================
   GBP PRICE — keep ins + del on one line, never wrap
   ================================================================ */

html body .price-add-to-cart span.electro-price {
    display: inline !important;
    white-space: nowrap !important;
}
html body .price-add-to-cart span.electro-price ins,
html body .price-add-to-cart span.electro-price del {
    display: inline !important;
    position: static !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
}

html body .owl-item .electro-price {
    display: inline !important;
    white-space: nowrap !important;
}
html body .owl-item .electro-price ins,
html body .owl-item .electro-price del {
    display: inline !important;
    position: static !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
}


/* ================================================================
   ROW 1 — Price column (left) + Add to Cart button (right)
   ================================================================ */

html body .price-add-to-cart span.price br {
    display: none !important;
}

html body .price-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    position: static !important;
    z-index: 11 !important;
}

html body .price-add-to-cart > span.price {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
}
html body .price-add-to-cart > .add-to-cart-wrap {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
    position: static !important;
}

html body .price-add-to-cart > small {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    gap: 10px !important;
}
html body .price-add-to-cart > small > span.price {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
}
html body .price-add-to-cart > small > .add-to-cart-wrap {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
    position: static !important;
}

html body .add-to-cart-wrap,
html body .add-to-cart-wrap.show-in-mobile {
    display: flex !important;
}

html body .product-loop-footer,
html body .product-item__footer {
    position: relative !important;
    z-index: 10 !important;
}

.products .product .price-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
}
.products .product .price-add-to-cart > span.price {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 2px !important;
}
.products .product .price-add-to-cart > .add-to-cart-wrap {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
}


/* ================================================================
   GBP PRICE STYLING
   ================================================================ */

html body .price-add-to-cart span.price ins,
html body .price-add-to-cart .electro-price ins {
    display: inline !important;
    position: static !important;
    font-weight: 700 !important;
    color: #cc0000 !important;
    text-decoration: none !important;
}

html body .price-add-to-cart span.price del,
html body .price-add-to-cart .electro-price del {
    display: inline !important;
    position: static !important;
    font-size: 0.85em !important;
    font-weight: 400 !important;
    color: #aaa !important;
    margin-left: 4px !important;
}


/* ================================================================
   EUR PRICE
   ================================================================ */

html body .price-add-to-cart .wise-price {
    display: block !important;
    font-size: 0.72em !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    color: #999 !important;
}
html body .price-add-to-cart .wise-price ins {
    display: inline !important;
    position: static !important;
    color: #c55 !important;
    text-decoration: none !important;
}
html body .price-add-to-cart .wise-price del {
    display: inline !important;
    position: static !important;
    color: #bbb !important;
}


/* ================================================================
   ROW 2 — Wishlist + Compare
   ================================================================ */

.hover-area,
.product-loop-footer .hover-area,
.product-item__footer .hover-area,
.card-body .hover-area,
.card-body-inner .hover-area,
.product-inner .hover-area {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

.hover-area .action-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 6px 0 4px !important;
    margin-top: 4px !important;
    border-top: 1px solid #ebebeb !important;
    gap: 0 !important;
}

.hover-area .action-buttons a,
.hover-area .action-buttons .yith-wcwl-add-button a,
.hover-area .action-buttons .yith-wcwl-add-to-wishlist a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #777 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 10px 2px 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease !important;
}

.hover-area .action-buttons a + a,
.hover-area .action-buttons .yith-wcwl-add-to-wishlist + * a {
    padding-left: 10px !important;
    border-left: 1px solid #ddd !important;
}

.hover-area .action-buttons a:hover,
.hover-area .action-buttons .yith-wcwl-add-button a:hover,
.hover-area .action-buttons .yith-wcwl-add-to-wishlist a:hover {
    color: #8dc63f !important;
    background: none !important;
    border-color: transparent !important;
}

.hover-area .action-buttons .add-to-cart-wrap {
    display: none !important;
}


/* ================================================================
   CARD EQUAL HEIGHT
   ================================================================ */

.products.columns-4 li.product,
.products.columns-3 li.product,
.products.columns-2 li.product {
    display: flex !important;
    flex-direction: column !important;
}
.products li.product .product-item__body,
.products li.product .electro-product-wrapper {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
.products li.product .product-item__footer,
.products li.product .product-loop-footer {
    margin-top: auto !important;
}


/* ================================================================
   FIX: card-media-left same width as card-body
   Inside .product-inner (Template B cards), the <small> element
   lays out a.card-media-left and .card-body as a row, making the
   image wider than the content area. Switching to flex-direction:
   column stacks them and gives both elements full card width.
   ================================================================ */

.product-inner:not(.product-item__inner) > small {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.product-inner:not(.product-item__inner) > small > a.card-media-left,
.product-inner:not(.product-item__inner) > small > .card-body {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
}


/* ================================================================
   RESPONSIVE — grid column counts
   ================================================================ */

@media (min-width: 1200px) {
    .products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .products.columns-4,
    .products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
    .products.columns-4,
    .products.columns-3,
    .products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .products li.product { font-size: 13px !important; }
}
@media (max-width: 479px) {
    .products.columns-4,
    .products.columns-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .products.columns-2 { grid-template-columns: repeat(1, 1fr) !important; }
    .products li.product { padding: 8px !important; }
    html body .price-add-to-cart .wise-price { font-size: 0.65em !important; }
}

@media (max-width: 767px) {
    .add-to-cart-wrap a.button {
        padding: 6px 9px !important;
        font-size: 11px !important;
    }
    .add-to-cart-wrap .quantity { display: none !important; }
    .hover-area .action-buttons a,
    .hover-area .action-buttons .yith-wcwl-add-button a,
    .hover-area .action-buttons .yith-wcwl-add-to-wishlist a {
        font-size: 10px !important;
    }
}


/* ================================================================
   CART PAGE — EUR price in totals
   ================================================================ */

.cart_totals .wise-price,
.order-total .wise-price {
    display: block !important;
    font-size: 0.78em !important;
    color: #888 !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
}


/* ================================================================
   COOKIE BANNER — scrollable on small phones
   ================================================================ */

@media (max-width: 600px) {
    #lha-cookie-banner {
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
}


/* ================================================================
   CHECKOUT / CART
   ================================================================ */

input#ppcp-credit-card-gateway-card-cvc {
    width: 100% !important;
}


/* ================================================================
   Product description: space before specification section headings
   Targets <h3 class="tech-specification-caption"> (SHUTTER,
   SENSOR, SETTINGS, PHOTO, FLASH, CONNECTIVITY etc.)
   ================================================================ */

.woocommerce-Tabs-panel--description h3.tech-specification-caption {
    margin-top: 2em;
}

/* No extra gap before the very first heading */
.woocommerce-Tabs-panel--description h3.tech-specification-caption:first-of-type {
    margin-top: 0.5em;
}
/* ================================================================
   PRODUCT GALLERY — hide FlexSlider numeric paging nav
   Electro uses thumbnail navigation (.flex-control-thumbs);
   the numeric paging list should never be visible.
   ================================================================ */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-paging {
    display: none !important;
}