/* ===========================
   PRICE DISPLAY
   ========================== */
.summary.entry-summary p.price {
    font-size: 1.75em !important;
}

.prix-ttc {
    font-size: 1em;
}

.prix-ht {
    font-size: 0.75em;
    color: #666;
}

/* ===========================
   PRODUCT PAGE TEXT COLOR
   ========================== */
.single-product .woocommerce-product-details__short-description p,
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-tabs .panel p,
.single-product .woocommerce-tabs .panel {
    color: #000000 !important;
}

/* ===========================
   LAYOUT - FULL WIDTH
   ========================== */
body #sidebar {
    display: none !important;
}

body.woocommerce-page #primary,
body.woocommerce-page #primary.content-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* ===========================
   PRODUCT GRID - COLUMNS
   ========================== */
body.woocommerce-page ul.products.row-cols-lg-3 > li,
body.woocommerce-page ul.products.row-cols-xl-3 > li {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

@media (min-width: 1400px) {
    body.woocommerce-page ul.products > li {
        width: 20% !important;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

/* ===========================
   CART PAGE
   ========================== */

/* Hide and collapse original actions row */
.woocommerce-cart-form .actions {
    display: none !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Remove cart totals title and gap */
.cart-collaterals .cart_totals h2 {
    display: none !important;
}

.cart-collaterals,
.cart_totals {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Bottom actions bar (coupon + checkout) */
.electroseed-cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.electroseed-cart-actions .coupon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.electroseed-cart-actions .coupon input {
    width: 200px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 1.8em;
}

.electroseed-cart-actions .coupon button,
.electroseed-cart-actions .coupon [type="submit"] {
    display: inline-block !important;
    padding: 8px 16px !important;
    background: #333 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 1.8em !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.electroseed-cart-actions .checkout-button {
    display: inline-block !important;
    padding: 12px 24px !important;
    background: #FED700 !important;
    color: #333 !important;
    border-radius: 1.8em !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

.electroseed-cart-actions .checkout-button:hover {
    background: #e6c200 !important;
    color: #333 !important;
}

/* Hide arrow on checkout button */
.electroseed-cart-actions .checkout-button.wc-forward::after {
    display: none !important;
}

/* ===========================
   MINI-CART
   ========================== */

/* Hide component lines */
.woocommerce-mini-cart-item.wooco-cart-child {
    display: none !important;
}

/* ===========================
   COMPOSITE PRODUCT SELECTOR
   ========================== */

/* Hide static WPC price */
p[class*="wooco-price-"] {
    display: none !important;
}

/* Hide placeholder image in dropdown */
.dd-selected .dd-selected-image[src*="woocommerce-placeholder"],
.dd-option .dd-option-image[src*="woocommerce-placeholder"] {
    display: none !important;
}

/* Label and dropdown on same line */
.wooco_component {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wooco_component_name {
    white-space: nowrap;
    font-weight: bold;
    flex-shrink: 0;
    line-height: 40px;
    margin-top: 10px; /* vertical centering adjustment */
}

.wooco_component_product {
    flex: 1;
}

/* Dropdown options layout */
.wooco_component .dd-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px !important;
}

.wooco_component .dd-option-image,
.wooco_component .dd-selected-image {
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    float: none !important;
    margin: 0 !important;
}

.wooco_component .dd-option-text {
    flex: 1;
    line-height: 40px;
}

.wooco_component .dd-option-description {
    white-space: nowrap;
    flex-shrink: 0;
    color: inherit !important;
}

.wooco_component .dd-option-description .prix-ht,
.wooco_component .dd-selected-description .prix-ht {
    color: #666;
}

.wooco_component .dd-option-description,
.wooco_component .dd-selected-description {
    font-size: 1.2em;
}

.wooco-count { display: none !important; }

/* Hide Specification tab */
.specification_tab,
#tab-specification {
    display: none !important;
}

/* Hide cart title */
.woocommerce-cart h1.entry-title {
    display: none !important;
}

/* Small cart Title */
/*
.woocommerce-cart h1.entry-title {
    font-size: 1.2em !important;
}*/

/* Lines between component selectors */
.wooco_component {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Compact category tiles */
ul.product-loop-categories {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 180px) !important;
    gap: 16px !important;
    justify-content: start !important;
}

ul.product-loop-categories li.product-category {
    width: 180px !important;
    max-width: 180px !important;
    flex: 0 0 180px !important;
    margin: 0 !important;
}

ul.product-loop-categories li.product-category a img {
    max-width: 120px !important;
    max-height: 120px !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain;
}

ul.product-loop-categories li.product-category a {
    display: block;
    text-align: center;
}

/* Hide the page title but keep result count */
.woocommerce header.page-header h1.page-title {
    display: none !important;
}

.section-product-categories header h2,
.section-product-categories header {
    display: none !important;
}

/* Mobile: move the handheld category widget to the top of the page */
@media (max-width: 991px) {
    .handheld-footer.handheld-widget-top,
    .handheld-footer.handheld-widget-top * {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .handheld-footer.handheld-widget-top {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* Last item gets extra spacing sometimes — kill it */
    .handheld-footer.handheld-widget-top .product-categories,
    .handheld-footer.handheld-widget-top .product-categories > li:last-child {
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 991px) {
    .handheld-header-wrap,
    .handheld-header-v2 {
        background-color: #000 !important;
    }
    /* Make icons visible on black */
    .handheld-header-wrap .ec,
    .handheld-header-v2 .ec,
    .handheld-header-wrap a,
    .handheld-header-v2 a {
        color: #fff !important;
    }
    /* Cart count badge — keep readable */
    .handheld-header-wrap .cart-items-count,
    .handheld-header-v2 .cart-items-count {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Add language selector on mobile */
@media (max-width: 991px) {
    .handheld-header-links .language-mobile {
        position: relative !important;
        list-style: none;
    }
    .handheld-header-links .language-mobile > a {
        display: flex !important;
        align-items: center;
        padding: 8px;
    }
    .handheld-header-links .language-mobile .wpml-ls-flag,
    .handheld-header-links .language-mobile > a img {
        width: 28px !important;
        height: auto !important;
        max-width: none !important;
        display: inline-block !important;
        vertical-align: middle;
    }
    .handheld-header-links .handheld-lang-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 8px 0;
        margin: 0;
        min-width: 160px;
        list-style: none;
        display: none;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .handheld-header-links .handheld-lang-dropdown.show,
    .handheld-header-links .language-mobile:hover .handheld-lang-dropdown,
    .handheld-header-links .language-mobile:focus-within .handheld-lang-dropdown {
        display: block !important;
    }
    .handheld-header-links .handheld-lang-dropdown li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .handheld-header-links .handheld-lang-dropdown a {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: #000 !important;
        text-decoration: none;
        white-space: nowrap;
    }
    .handheld-header-links .handheld-lang-dropdown a:hover {
        background: #f0f0f0;
    }
    .handheld-header-links .handheld-lang-dropdown .wpml-ls-flag {
        width: 20px !important;
    }
}

/* Prevent product tile hover from collapsing the grid row and pulling
   the footer up. On hover, Electro sets .product-inner to position:
   absolute (to overflow the tile with the wishlist button etc.),
   which removes it from flow. If the last row has only one tile, the
   row then has no in-flow children and collapses, yanking the footer
   upward. Reserving min-height on every .product keeps the row sized. */
/* Reserve space for the hover popup only on devices with a fine pointer
   (desktop/laptop). On touch devices there is no :hover popup to worry
   about, so let tiles size to their content naturally. */
@media (hover: hover) and (pointer: fine) {
    .woocommerce ul.products li.product {
        min-height: 430px;
    }
}

@media (max-width: 767px) {
    .woocommerce-page .site-content,
    .woocommerce .site-content {
        margin-bottom: 1.5rem !important;
    }
}

/* WooCommerce show-password button — render an SVG eye icon, no font dependency. */
.password-input {
    position: relative;
    display: block;
}
.password-input input[type="password"],
.password-input input[type="text"] {
    padding-right: 2.5em;
}
.show-password-input {
    position: absolute;
    top: 50%;
    right: 0.7em;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    margin: 0;
    background: transparent url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 1.2em 1.2em;
    border: none;
    cursor: pointer;
    opacity: 0.7;
}
.show-password-input:hover {
    opacity: 1;
}
.show-password-input.display-password {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    opacity: 1;
}

body.woocommerce-checkout #content,
body.woocommerce-checkout div#content {
    max-width: 100% !important;
}

body.woocommerce-checkout div.container,
body.woocommerce-checkout #primary.content-area,
body.woocommerce-checkout main#main,
body.woocommerce-checkout main.site-main,
body.woocommerce-checkout article.page,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .site-content-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.woocommerce-checkout .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.woocommerce-checkout form.checkout,
body.woocommerce-checkout .woocommerce > form.checkout {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.woocommerce-checkout form.checkout {
        display: block !important;
    }
    body.woocommerce-checkout form.checkout::after {
        content: "";
        display: table;
        clear: both;
    }
    body.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
    body.woocommerce-checkout form.checkout > .woocommerce-info,
    body.woocommerce-checkout form.checkout > .checkout_coupon,
    body.woocommerce-checkout form.checkout > form.checkout_coupon {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-bottom: 1.5em;
        box-sizing: border-box;
    }
    body.woocommerce-checkout form.checkout > #customer_details,
    body.woocommerce-checkout form.checkout > .col-lg-7,
    body.woocommerce-checkout form.checkout > .col-lg-8 {
        width: 39% !important;
        max-width: 39% !important;
        float: left !important;
        clear: left !important;
        box-sizing: border-box;
    }
    body.woocommerce-checkout form.checkout > .order-review-wrapper,
    body.woocommerce-checkout form.checkout > #order_review,
    body.woocommerce-checkout form.checkout > .col-lg-4,
    body.woocommerce-checkout form.checkout > .col-lg-5 {
        width: 59% !important;
        max-width: 59% !important;
        float: right !important;
        clear: right !important;
        box-sizing: border-box;
    }
    body.woocommerce-checkout form.checkout > h3#order_review_heading {
        display: none !important;
    }
}

body.woocommerce-checkout .order-review-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.woocommerce-checkout .order-review-wrapper > #order_review,
body.woocommerce-checkout .order-review-wrapper > #order_review_heading_v2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    display: table !important;
    box-sizing: border-box;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead {
    display: table-header-group !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody {
    display: table-row-group !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot {
    display: table-footer-group !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead > tr,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr {
    display: table-row !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead > tr > th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr > th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr > td {
    display: table-cell !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.wooco-checkout-hide {
    display: none !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-name,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
    text-align: left !important;
    padding-right: 1em !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-price,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-quantity {
    text-align: left !important;
    white-space: nowrap !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-price,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-quantity {
    text-align: left !important;
    white-space: nowrap !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
    text-align: right !important;
    white-space: nowrap !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr.cart-subtotal > th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr.cart-subtotal > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr:first-child > th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr:first-child > td {
    border-top: 2px solid rgba(0, 0, 0, 0.3) !important;
    padding-top: 0.75em !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr > td {
    text-align: right !important;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr > th {
    text-align: left !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total .prix-ht,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total .prix-ht .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total .prix-ht bdi,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-price .prix-ht,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-price .prix-ht .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-price .prix-ht bdi {
    font-size: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    font-weight: inherit !important;
}

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
    width: 100% !important;
    max-width: 100% !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0;
}

body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper > p.form-row,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper > p.form-row {
    font-size: 1rem;
}

body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper > p.form-row.form-row-first,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper > p.form-row.form-row-first {
    display: inline-block !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    margin-right: 16px !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    float: none !important;
    clear: none !important;
    vertical-align: top;
    box-sizing: border-box;
}

body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper > p.form-row.form-row-last,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper > p.form-row.form-row-last {
    display: inline-block !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    float: none !important;
    clear: none !important;
    vertical-align: top;
    box-sizing: border-box;
}

body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper > p.form-row.form-row-wide,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper > p.form-row.form-row-wide {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row input.input-text,
body.woocommerce-checkout .woocommerce-billing-fields .form-row textarea,
body.woocommerce-checkout .woocommerce-billing-fields .form-row select,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row input.input-text,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row textarea,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row select,
body.woocommerce-checkout .woocommerce-additional-fields .form-row input.input-text,
body.woocommerce-checkout .woocommerce-additional-fields .form-row textarea,
body.woocommerce-checkout .woocommerce-additional-fields .form-row select,
body.woocommerce-checkout .select2-container,
body.woocommerce-checkout .select2-selection {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.woocommerce .widget_shopping_cart_content li.woocommerce-mini-cart-item > a.remove,
body.woocommerce .widget_shopping_cart_content li.woocommerce-mini-cart-item > a.remove_from_cart_button,
body .widget_shopping_cart_content li.woocommerce-mini-cart-item > a.remove.remove_from_cart_button {
    right: 24px !important;
}

body .widget_shopping_cart_content,
body .widget_shopping_cart_content .woocommerce-mini-cart,
body .widget_shopping_cart_content ul.cart_list,
body .widget_shopping_cart_content ul.product_list_widget {
    overflow-x: visible !important;
    box-sizing: border-box;
}

body .widget_shopping_cart_content li.woocommerce-mini-cart-item {
    overflow: visible !important;
}

body.woocommerce-cart table.shop_table.cart th.product-subtotal,
body.woocommerce-cart table.shop_table.cart td.product-subtotal,
body.woocommerce-cart table.woocommerce-cart-form__contents th.product-subtotal,
body.woocommerce-cart table.woocommerce-cart-form__contents td.product-subtotal {
    text-align: right !important;
}

/* Order summary table widths — tweak these two values to taste:
   - order-received page (after placing order): centered, slightly wider
   - view-order page (my-account): left-aligned, narrower because of sidebar
   
   No table-layout: fixed here. With fixed layout + a colgroup, Chrome
   renders tfoot cells with colspan="3" at the width of a single column
   (~140px) instead of spanning. Auto layout fixes that — column sizing
   is enforced via min-width on the Prix / Quantité / Sous-total thead
   cells in a separate rule below. */
body.woocommerce-order-received table.woocommerce-table--order-details,
body .woocommerce-order table.woocommerce-table--order-details {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
    box-sizing: border-box;
}

body.woocommerce-view-order table.woocommerce-table--order-details {
    width: 100% !important;
    max-width: 700px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: table !important;
    box-sizing: border-box;
}

/* Constrain the three right-side columns via width on their thead cells.
   Replaces the previous colgroup-based sizing. The Quantité column stays
   narrow, Prix and Sous-total widen to 140px so EN labels "excl. VAT" /
   "incl. VAT" fit on one line. */
body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr > th.product-price,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr > th.product-price,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr > th.product-price,
body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr > th.woocommerce-table__product-total,
body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr > th.product-total,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr > th.woocommerce-table__product-total,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr > th.product-total,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr > th.woocommerce-table__product-total,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr > th.product-total {
    width: 140px !important;
    min-width: 140px !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr > th.product-quantity,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr > th.product-quantity,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr > th.product-quantity {
    width: 70px !important;
    min-width: 70px !important;
}

/* Order-received page: align the preamble text (order info + payment notice +
   "Détails de la commande" heading) with the centered summary table below. */
body.woocommerce-order-received .woocommerce-order > p.woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order > ul.woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details > h2,
body.woocommerce-order-received .woocommerce-order > h2 {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.woocommerce-order-received .woocommerce-order p {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Order-received: also align the customer details (billing/shipping addresses)
   so they sit inside the same 800px column as the summary table. */
body.woocommerce-order-received .woocommerce-customer-details {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* View-order page on desktop: the column headings ("Détails de la commande",
   "Adresse de facturation", "Adresse de livraison") have decorative underlines
   that span the whole column width — but our summary table and address text
   only span 700px, so the underlines look orphaned past that point.
   Constrain the headings (and their containers) to match the table width.
   Skip on small screens — those need to flex naturally. */
@media (min-width: 992px) {
    body.woocommerce-view-order .woocommerce-order-details,
    body.woocommerce-view-order .woocommerce-order-details__title,
    body.woocommerce-view-order .woocommerce-customer-details,
    body.woocommerce-view-order .woocommerce-customer-details .woocommerce-column,
    body.woocommerce-view-order .woocommerce-customer-details .woocommerce-column__title,
    body.woocommerce-view-order .woocommerce-customer-details address {
        max-width: 700px !important;
    }
}

body.woocommerce-order-received table.woocommerce-table--order-details > thead,
body.woocommerce-view-order table.woocommerce-table--order-details > thead,
body .woocommerce-order table.woocommerce-table--order-details > thead {
    display: table-header-group !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details > tbody,
body.woocommerce-view-order table.woocommerce-table--order-details > tbody,
body .woocommerce-order table.woocommerce-table--order-details > tbody {
    display: table-row-group !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot,
body .woocommerce-order table.woocommerce-table--order-details > tfoot {
    display: table-footer-group !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr,
body.woocommerce-order-received table.woocommerce-table--order-details > tbody > tr,
body.woocommerce-view-order table.woocommerce-table--order-details > tbody > tr,
body .woocommerce-order table.woocommerce-table--order-details > tbody > tr,
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr {
    display: table-row !important;
}

/* Force every cell to render as a table cell. Mirrors the equivalent rule for
   checkout (line ~551). Without this, at wide viewport (≥ ~992px on view-order),
   some upstream theme/WC responsive CSS coerces tfoot cells to display: block,
   which makes colspan="3" effectively ignored — the value <td> ends up under
   the Prix column instead of spanning columns 2-4. */
body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr > th,
body.woocommerce-order-received table.woocommerce-table--order-details > tbody > tr > th,
body.woocommerce-order-received table.woocommerce-table--order-details > tbody > tr > td,
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr > th,
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr > td,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr > th,
body.woocommerce-view-order table.woocommerce-table--order-details > tbody > tr > th,
body.woocommerce-view-order table.woocommerce-table--order-details > tbody > tr > td,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr > th,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr > td,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr > th,
body .woocommerce-order table.woocommerce-table--order-details > tbody > tr > th,
body .woocommerce-order table.woocommerce-table--order-details > tbody > tr > td,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr > th,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr > td {
    display: table-cell !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details > tbody > tr.wooco-order-hide,
body.woocommerce-view-order table.woocommerce-table--order-details > tbody > tr.wooco-order-hide,
body .woocommerce-order table.woocommerce-table--order-details > tbody > tr.wooco-order-hide {
    display: none !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details th.woocommerce-table__product-name,
body.woocommerce-order-received table.woocommerce-table--order-details td.woocommerce-table__product-name,
body.woocommerce-view-order table.woocommerce-table--order-details th.woocommerce-table__product-name,
body.woocommerce-view-order table.woocommerce-table--order-details td.woocommerce-table__product-name,
body .woocommerce-order table.woocommerce-table--order-details th.woocommerce-table__product-name,
body .woocommerce-order table.woocommerce-table--order-details td.woocommerce-table__product-name {
    text-align: left !important;
    padding-right: 1em !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details th.product-price,
body.woocommerce-order-received table.woocommerce-table--order-details th.product-quantity,
body.woocommerce-view-order table.woocommerce-table--order-details th.product-price,
body.woocommerce-view-order table.woocommerce-table--order-details th.product-quantity,
body .woocommerce-order table.woocommerce-table--order-details th.product-price,
body .woocommerce-order table.woocommerce-table--order-details th.product-quantity {
    text-align: left !important;
    white-space: nowrap !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details td.product-price,
body.woocommerce-order-received table.woocommerce-table--order-details td.product-quantity,
body.woocommerce-view-order table.woocommerce-table--order-details td.product-price,
body.woocommerce-view-order table.woocommerce-table--order-details td.product-quantity,
body .woocommerce-order table.woocommerce-table--order-details td.product-price,
body .woocommerce-order table.woocommerce-table--order-details td.product-quantity {
    text-align: left !important;
    white-space: nowrap !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr > th.woocommerce-table__product-total,
body.woocommerce-order-received table.woocommerce-table--order-details > thead > tr > th.product-total,
body.woocommerce-order-received table.woocommerce-table--order-details > tbody > tr > td.woocommerce-table__product-total,
body.woocommerce-order-received table.woocommerce-table--order-details > tbody > tr > td.product-total,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr > th.woocommerce-table__product-total,
body.woocommerce-view-order table.woocommerce-table--order-details > thead > tr > th.product-total,
body.woocommerce-view-order table.woocommerce-table--order-details > tbody > tr > td.woocommerce-table__product-total,
body.woocommerce-view-order table.woocommerce-table--order-details > tbody > tr > td.product-total,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr > th.woocommerce-table__product-total,
body .woocommerce-order table.woocommerce-table--order-details > thead > tr > th.product-total,
body .woocommerce-order table.woocommerce-table--order-details > tbody > tr > td.woocommerce-table__product-total,
body .woocommerce-order table.woocommerce-table--order-details > tbody > tr > td.product-total {
    text-align: right !important;
    white-space: nowrap !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr > th,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr > th,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr > th {
    text-align: left !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr.order-total > th,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr.order-total > th,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr.order-total > th {
    text-align: right !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr > td,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr > td,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr > td {
    text-align: right !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr:first-child > th,
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr:first-child > td,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr:first-child > th,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr:first-child > td,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr:first-child > th,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr:first-child > td {
    border-top: 2px solid rgba(0, 0, 0, 0.3) !important;
    padding-top: 0.75em !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr.order-total > th,
body.woocommerce-order-received table.woocommerce-table--order-details > tfoot > tr.order-total > td,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr.order-total > th,
body.woocommerce-view-order table.woocommerce-table--order-details > tfoot > tr.order-total > td,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr.order-total > th,
body .woocommerce-order table.woocommerce-table--order-details > tfoot > tr.order-total > td {
    border-bottom: 2px solid rgba(0, 0, 0, 0.3) !important;
    padding-bottom: 0.75em !important;
}

/* -------------------------------------------------------------------------
 * MINI-CART OFF-CANVAS PANEL — scrollbar overlap fix
 *
 * Diagnosis: panel is position:fixed and extends to right=1440 (innerWidth).
 * On pages with a vertical scrollbar (which on My Account appears because
 * the layout is taller than viewport at this height), the scrollbar takes
 * 15px on the right, and the panel ends up sitting partially behind it.
 * Other pages either have no scrollbar (short content) or the truncation
 * lands on whitespace where it isn't noticed.
 *
 * Fix: pull the panel inward by the scrollbar width on pages where the
 * scrollbar is present. We use the modern `scrollbar-gutter: stable` on
 * <html> so the scrollbar space is always reserved (eliminates the 15px
 * jump between pages-with-scrollbar and pages-without), then the panel's
 * right:0 anchor automatically lands at the correct inner edge.
 * ------------------------------------------------------------------------- */
html {
    scrollbar-gutter: stable;
}

/* =================================================================
   FLUENT FORMS styling
   =================================================================
   Currently used only by the Contact pages (#13116 FR / #19573 EN).
   No page-id scope: simpler, and Fluent Forms isn't used elsewhere
   on the site yet. If/when it's used in another context (newsletter,
   support form...) and we want different styling there, scope these
   rules to .fluentform_X (where X is the form ID) at that point.

   Multiple selector variants on the submit button are intentional —
   Fluent Forms has renamed its button class across versions
   (.ff-btn, .ff-btn-submit, .ff_btn_style) and this covers all of them.
================================================================= */
.fluentform {
    max-width: 720px;
    margin: 1.5em auto 2em;
}

/* Inputs + textarea + select — soft border, gentle focus glow */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select {
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 0.95em !important;
    width: 100% !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
    border-color: #fed700 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(254, 215, 0, 0.25) !important;
}

/* Field labels */
.fluentform label {
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    display: inline-block;
}

/* Submit button — cover every common class variant.
   We force background-image: none because some themes apply a
   gradient as a background image that would otherwise mask our color. */
.fluentform button[type="submit"],
.fluentform input[type="submit"],
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit,
.fluentform .ff_btn_style {
    background: #fed700 !important;
    background-color: #fed700 !important;
    background-image: none !important;
    color: #000 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 38px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.15s ease, transform 0.05s ease !important;
    cursor: pointer !important;
}
.fluentform button[type="submit"]:hover,
.fluentform input[type="submit"]:hover,
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover {
    background: #f0c800 !important;
    background-color: #f0c800 !important;
    transform: translateY(-1px);
}
.fluentform button[type="submit"]:active,
.fluentform input[type="submit"]:active,
.fluentform .ff-btn:active,
.fluentform .ff-btn-submit:active {
    transform: translateY(0);
}

/* Hide Specification tab */
.specification_tab,
#tab-specification {
    display: none !important;
}

/* Hide redundant tab panel headings — the title is already shown in the tab selector
   above (Description, Additional information, Reviews, etc.).
   Targets the <h2> that WooCommerce templates render at the top of each panel. */
.single-product .woocommerce-tabs .panel > h2 {
    display: none !important;
}

/* =================================================================
   HOMEPAGE — featured product, category tiles, CTA section

   Used on FR home (#2) and EN home (#19591).
   Tunable knobs at the top: edit any --es-* variable, all rules
   that use it follow.

   Selector strategy:
   - No `>` chains anchored on .electroseed-home-hero — Gutenberg
     auto-inserts a .wp-block-group__inner-container wrapper that
     breaks direct-child selectors. Use descendant selectors.
   - Sibling-margin (a + a { margin-top }) preferred over `gap`,
     because Gutenberg's block-gap mechanism shadows our `gap`.

   Tile/card structure: featured card AND each category tile is
   a fixed-size <a> with image, text, button absolutely positioned
   inside. Every size and position is independently tunable.
================================================================= */

/* ─── Tunable variables ──────────────────────────────────────── */
.electroseed-home-hero,
.electroseed-home-cta {
    /* Section (grey rounded outer box) */
    --es-section-bg:            #f7f8fa;
    --es-section-padding:       1.25rem 1rem;
    --es-section-radius:        16px;

    /* Big featured card — five independent boxes (card / image / pretitle / title / button) */
    --es-feat-h:                100%;           /* CARD — `100%` matches right column height */
    --es-feat-radius:           12px;
    --es-feat-padding:          0;              /* CARD — outer padding around contents */

    --es-feat-img-w:            230px;            /* IMAGE — width */
    --es-feat-img-y:            160px;              /* IMAGE — vertical offset from top */
    --es-feat-img-x:            150px;            /* IMAGE — horizontal offset from left */
    --es-feat-img-fit:          contain;        /* IMAGE — `contain` = whole; `cover` = fill+crop */
    --es-feat-img-pos:          center;         /* IMAGE — when fit=cover: top/center/bottom/etc. */

    --es-feat-img2-w:           280px;            /* IMAGE 2 — width */
    --es-feat-img2-y:           30px;              /* IMAGE 2 — vertical offset from top */
    --es-feat-img2-x:           0;              /* IMAGE 2 — horizontal offset from left */
    --es-feat-img2-fit:         contain;        /* IMAGE 2 — `contain` or `cover` */
    --es-feat-img2-pos:         center;

    --es-feat-pretitle-y:       1.5rem;         /* PRETITLE — vertical offset */
    --es-feat-pretitle-x:       1.5rem;         /* PRETITLE — horizontal offset */
    --es-feat-pretitle-size:    1.9rem;         /* PRETITLE — font size */

    --es-feat-title-y:          1rem;           /* TITLE — vertical offset */
    --es-feat-title-x:          1.5rem;         /* TITLE — horizontal offset */
    --es-feat-title-w:          100%;            /* TITLE — width */
    --es-feat-title-size:       1.8rem;        /* TITLE — font size */

    --es-feat-button-y:         auto;           /* BUTTON — `auto` = anchored to bottom */
    --es-feat-button-x:         1.5rem;         /* BUTTON — horizontal offset */
    --es-feat-button-bottom:    1.5rem;         /* BUTTON — distance from bottom (only when y=auto) */

    /* 4 small category tiles — three independent boxes (tile / image / text) */
    --es-tile-h:                200px;          /* TILE — total height */
    --es-tile-radius:           10px;
    --es-tile-padding:          0;

    --es-tile-img-h:            250px;          /* IMAGE — height */
    --es-tile-img-y:            -20px;          /* IMAGE — vertical offset */
    --es-tile-img-x:            60px;           /* IMAGE — horizontal offset */
    --es-tile-img-fit:          contain;        /* `contain` or `cover` */
    --es-tile-img-pos:          center;

    --es-tile-text-h:           60px;           /* TEXT — height */
    --es-tile-text-w:           100%;           /* TEXT — width */
    --es-tile-text-y:           0px;            /* TEXT — vertical offset; `auto` = bottom */
    --es-tile-text-x:           0px;            /* TEXT — horizontal offset */
    --es-tile-text-align:       left;           /* left / center / right */
    --es-tile-title:            1.8rem;

    --es-tile-v-gap:            1rem;
    --es-tile-h-gap:            1rem;

    /* Button colours and shape (shared by featured card + bottom CTA) */
    --es-yellow:                #fed700;
    --es-yellow-hover:          #f0c800;
    --es-button-radius:         50px;
    --es-button-pad:            0.7rem 2.5rem;

    --es-feat-h-mobile:         400px;          /* CARD — height on mobile (where 100% collapses) */

    /* Bottom CTA */
    --es-cta-img-radius:        30px;
}

/* ─── Section wrappers ───────────────────────────────────────── */
.electroseed-home-hero,
.electroseed-home-cta {
    background: var(--es-section-bg) !important;
    padding: var(--es-section-padding) !important;
    border-radius: var(--es-section-radius) !important;
    margin-bottom: 1.5rem;
}

/* ─── Featured card (left column) ────────────────────────────── */
/* Card is now an <a> — entire card is clickable. Children
   (image, pretitle, title, button) are absolutely positioned. */
.electroseed-feature-card {
    background: #ffffff !important;
    border-radius: var(--es-feat-radius) !important;
    padding: var(--es-feat-padding) !important;
    height: var(--es-feat-h);
    position: relative;
    overflow: hidden;
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.15s ease;
}
.electroseed-feature-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.electroseed-feature-card:hover .electroseed-feat-title {
    color: #b89400;
}
.electroseed-feature-card:hover .electroseed-feat-button {
    background: var(--es-yellow-hover) !important;
}

/* IMAGE box */
.electroseed-feature-card .electroseed-feat-image {
    position: absolute !important;
    top: var(--es-feat-img-y);
    left: var(--es-feat-img-x);
    width: var(--es-feat-img-w);
    height: var(--es-feat-img-h);
    margin: 0 !important;
    overflow: hidden;
}
/* IMAGE 2 box (second image, e.g. on the left) */
.electroseed-feature-card .electroseed-feat-image2 {
    position: absolute !important;
    top: var(--es-feat-img2-y);
    left: var(--es-feat-img2-x);
    width: var(--es-feat-img2-w);
    height: var(--es-feat-img2-h);
    margin: 0 !important;
    overflow: hidden;
}
.electroseed-feature-card .electroseed-feat-image2 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--es-feat-img2-fit) !important;
    object-position: var(--es-feat-img2-pos) !important;
    border-radius: 0 !important;
}

.electroseed-feature-card .electroseed-feat-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--es-feat-img-fit) !important;
    object-position: var(--es-feat-img-pos) !important;
    border-radius: 0 !important;
}

/* PRETITLE (italic small grey) */
.electroseed-feature-card .electroseed-feat-pretitle {
    position: absolute;
    top: var(--es-feat-pretitle-y);
    left: var(--es-feat-pretitle-x);
    margin: 0 !important;
    font-size: var(--es-feat-pretitle-size);
    font-style: italic;
    font-weight: 500;
    color: #666;
}

/* TITLE */
.electroseed-feature-card .electroseed-feat-title {
    position: absolute;
    top: var(--es-feat-title-y);
    left: var(--es-feat-title-x);
    width: var(--es-feat-title-w);
    margin: 0 !important;
    font-size: var(--es-feat-title-size);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

/* BUTTON (visually a button — not actually a clickable element since
   the parent <a> handles navigation) */
.electroseed-feature-card .electroseed-feat-button {
    position: absolute;
    top: var(--es-feat-button-y);
    left: var(--es-feat-button-x);
    bottom: var(--es-feat-button-bottom);
    display: inline-block;
    background: var(--es-yellow) !important;
    color: #000 !important;
    border-radius: var(--es-button-radius) !important;
    padding: var(--es-button-pad) !important;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease;
    /* If both top and bottom are set with values, the button stretches.
       To use `top: NNpx` instead of bottom-anchored, also set
       --es-feat-button-bottom: auto */
}

/* ─── 2×2 category grid (right column) ───────────────────────── */
.electroseed-home-hero .wp-block-columns .wp-block-columns {
    height: 100% !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
    gap: 0 !important;
    --wp--style--block-gap: 0 !important;
}
.electroseed-home-hero .wp-block-columns .wp-block-columns > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.electroseed-home-hero .wp-block-columns .wp-block-columns > .wp-block-column + .wp-block-column {
    margin-left: var(--es-tile-h-gap) !important;
}
.electroseed-category-card + .electroseed-category-card {
    margin-top: var(--es-tile-v-gap) !important;
}

/* ─── Category tiles ─────────────────────────────────────────── */
.electroseed-category-card {
    background: #ffffff !important;
    border-radius: var(--es-tile-radius) !important;
    padding: var(--es-tile-padding) !important;
    margin-bottom: 0 !important;
    height: var(--es-tile-h);
    position: relative;
    overflow: hidden;
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.15s ease;
}
.electroseed-category-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.electroseed-category-card:hover h4 {
    color: #b89400;
}

.electroseed-category-card .wp-block-image {
    position: absolute !important;
    top: var(--es-tile-img-y);
    left: var(--es-tile-img-x);
    right: calc(0px - var(--es-tile-img-x));
    height: var(--es-tile-img-h);
    margin: 0 !important;
    overflow: hidden;
}
.electroseed-category-card .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--es-tile-img-fit) !important;
    object-position: var(--es-tile-img-pos) !important;
    border-radius: 0 !important;
}

.electroseed-category-card h4 {
    position: absolute;
    top: var(--es-tile-text-y, auto);
    left: var(--es-tile-text-x);
    bottom: 0;
    width: var(--es-tile-text-w);
    height: var(--es-tile-text-h);
    margin: 0 !important;
    padding: 0 0.5rem !important;
    font-size: var(--es-tile-title) !important;
    font-weight: 600 !important;
    line-height: var(--es-tile-text-h);
    text-align: var(--es-tile-text-align);
    box-sizing: border-box;
}

/* ─── Pretitle ("ELECTROSEED" yellow uppercase, bottom section) */
.electroseed-pretitle {
    color: var(--es-yellow) !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 0 0.5rem !important;
}

/* ─── Yellow pill button (bottom CTA only — featured card has
   its own .electroseed-feat-button rules above) ─────────────── */
.electroseed-cta-yellow .wp-block-button__link,
a.electroseed-cta-yellow {
    background: var(--es-yellow) !important;
    background-color: var(--es-yellow) !important;
    color: #000 !important;
    border-radius: var(--es-button-radius) !important;
    padding: var(--es-button-pad) !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, transform 0.05s ease;
}
.electroseed-cta-yellow .wp-block-button__link:hover,
a.electroseed-cta-yellow:hover {
    background: var(--es-yellow-hover) !important;
    background-color: var(--es-yellow-hover) !important;
    transform: translateY(-1px);
}

.electroseed-feature-card .electroseed-feat-pretitle,
.electroseed-feature-card .electroseed-feat-title,
.electroseed-feature-card .electroseed-feat-button {
    z-index: 2;                      /* above images */
}

/* On mobile, Gutenberg stacks columns vertically — the featured
   card loses its flex stretch reference, so height:100% collapses
   to 0 (children are absolute, contribute no height). Switch to a
   fixed pixel height. 781px is WordPress's default columns-stack
   breakpoint. */
@media (max-width: 781px) {
    .electroseed-home-hero,
    .electroseed-home-cta {
        --es-feat-h: var(--es-feat-h-mobile);
    }
}
/* ─── Bottom CTA section image (PCB photo) ───────────────────── */
.electroseed-home-cta .wp-block-image img {
    border-radius: var(--es-cta-img-radius) !important;
    width: 100%;
    height: auto;
}

/* ============================================================
   [FEATURE 2026-05-04] SALE PRICE DISPLAY
   ============================================================
   Rendered by inc/price-display.php when an Acowebs
   `percent_product_price` or `fixed_product_price` rule applies.
   Quantity-based (cart_quantity) tier rules do NOT trigger this
   markup — they render as the Acowebs tier table on the product
   page instead.

   Output structure:
     <span class="electroseed-priced electroseed-on-sale">
       <span class="electroseed-sale-new">…current/discounted TTC (HT)…</span>
       <span class="electroseed-sale-old">…regular TTC (HT)…</span>
     </span>

   The two lines stack via display:block so the strikethrough sits
   below the red price, with identical alignment (each is its own
   block, inheriting whatever container alignment applies on that
   surface).
   ============================================================ */

/* Stack the two sale lines vertically. */
.electroseed-on-sale .electroseed-sale-new,
.electroseed-on-sale .electroseed-sale-old {
    display: block;
}

/* Discounted (current) price: classic sale red, slightly bolder.
   !important is needed because the dropdown-styling JS in
   inc/product-page.php applies inline styles (e.g. resets colors
   on $desc children) — without !important, the inline style wins
   on dropdown rows. */
.electroseed-on-sale .electroseed-sale-new,
.electroseed-on-sale .electroseed-sale-new .prix-ttc,
.electroseed-on-sale .electroseed-sale-new .prix-ht,
.electroseed-on-sale .electroseed-sale-new .woocommerce-Price-amount,
.electroseed-on-sale .electroseed-sale-new bdi {
    color: #c00 !important;
}
.electroseed-on-sale .electroseed-sale-new {
    font-weight: 600;
}

/* Regular price: strikethrough, muted. Slightly lighter so the
   sale price remains the dominant visual element. */
.electroseed-on-sale .electroseed-sale-old {
    text-decoration: line-through;
    font-weight: normal;
    opacity: 0.85;
}
.electroseed-on-sale .electroseed-sale-old,
.electroseed-on-sale .electroseed-sale-old .prix-ttc,
.electroseed-on-sale .electroseed-sale-old .prix-ht,
.electroseed-on-sale .electroseed-sale-old .woocommerce-Price-amount,
.electroseed-on-sale .electroseed-sale-old bdi {
    color: #888 !important;
}

/* Component dropdown (composite product page) — the dropdown row
   uses flex with the price right-aligned via margin-left:auto.
   Inside our block-stacked wrapper the two lines need to stay
   right-aligned too. */
.wooco_component .dd-option-description .electroseed-on-sale,
.wooco_component .dd-selected-description .electroseed-on-sale {
    text-align: right;
}


/* ============================================================
   [FEATURE 2026-05-04] DISCOUNT RIBBON
   ============================================================
   Rendered by inc/price-display.php (electroseed_render_discount_ribbon)
   on shop tiles AND on the single-product gallery when the product has
   an Acowebs percent/fixed product-price rule active.

   Styled to mirror the OOS ribbon (.ooss-ribbon, defined in
   inc/composite-tooltip.php) — same dimensions, diagonal rotation,
   shadow — but with a green gradient to convey positive savings instead
   of an out-of-stock warning.

   Positioning: the wrapper is absolutely positioned to top-right of
   its containing block. For shop tiles, the parent <li.product> already
   has an implicit positioning context (theme styling). For the single-
   product page, we explicitly mark .woocommerce-product-gallery and the
   parent .product div as position: relative below, so the ribbon lands
   in the top-right of the gallery.
   ============================================================ */

.discount-ribbon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}
.discount-ribbon {
    position: absolute;
    top: 22px;
    right: -28px;
    width: 120px;
    background: linear-gradient( to bottom, #2eb82e, #1a8a1a );
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.discount-ribbon::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    border-top: 4px solid #0f5a0f;
    border-left: 4px solid transparent;
}
.discount-ribbon::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0;
    border-top: 4px solid #0f5a0f;
    border-right: 4px solid transparent;
}

/* On the single-product page, anchor the ribbon to the gallery
   container. Without an explicit positioning context, position:absolute
   on the wrapper would resolve to the nearest positioned ancestor
   (often the page <body>), placing the ribbon in the wrong spot. */
.single-product div.product .woocommerce-product-gallery {
    position: relative;
}