/*
 * Technotel Theme - Main CSS
 * Styles personnalisés pour Technotel.tn
 * Version: 1.0.0
 */

/* ============================================================
   VARIABLES CSS
============================================================ */
:root {
    --technotel-primary:   #FF324D;
    --technotel-secondary: #292b2c;
    --technotel-dark:      #1a1a2e;
    --technotel-gray:      #f8f9fa;
    --technotel-text:      #687188;
    --technotel-border:    #e5e5e5;
    --technotel-font-body: 'Poppins', sans-serif;
    --technotel-font-head: 'Roboto', sans-serif;
    --transition:          all 0.3s ease-in-out;
}

/* ============================================================
   RESET & BASE
============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--technotel-font-body);
    color: var(--technotel-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

a {
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   PRELOADER
============================================================ */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.preloader.loaded {
    opacity: 0;
    pointer-events: none;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis span {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--technotel-primary);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis span:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; }
.lds-ellipsis span:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis span:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; }

@keyframes lds-ellipsis1 {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
@keyframes lds-ellipsis2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(24px, 0); }
}

/* ============================================================
   CUSTOM CONTAINER
============================================================ */
.custom-container {
    max-width: 1400px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

@media (max-width: 1680px) {
    .custom-container {
        max-width: 1200px;
    }
}

/* ============================================================
   HEADER OVERRIDES
============================================================ */
.header_wrap {
    position: relative;
    z-index: 100;
}

.top-header {
    padding: 8px 0;
}

.bg_dark {
    background-color: #222831 !important;
}

.header_topbar_info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header_offer span {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.download_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download_wrap span {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
}

.icon_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.icon_list li a {
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    transition: var(--transition);
}

.icon_list li a:hover {
    color: var(--technotel-primary);
}

/* Middle Header */
.middle-header {
    padding: 15px 0;
    background: #fff;
    border-bottom: 1px solid var(--technotel-border);
}

.dark_skin {
    background: #fff;
}

.nav_block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navbar-brand img {
    height: 45px;
    width: auto;
    object-fit: contain;
}

/* Search Form */
.product_search_form {
    flex: 1;
    max-width: 600px;
}

.product_search_form .input-group {
    border: 2px solid var(--technotel-border);
    border-radius: 25px;
    overflow: hidden;
    transition: var(--transition);
}

.product_search_form .input-group:focus-within {
    border-color: var(--technotel-primary);
}

.product_search_form .form-control {
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    box-shadow: none !important;
}

.product_search_form .custom_select select {
    border: none;
    border-right: 1px solid var(--technotel-border);
    padding: 8px 12px;
    font-size: 13px;
    background: #f8f9fa;
    color: var(--technotel-secondary);
    outline: none;
    cursor: pointer;
    max-width: 160px;
}

.search_btn2 {
    background: var(--technotel-primary);
    border: none;
    color: #fff;
    padding: 0 20px;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
}

.search_btn2:hover {
    background: #d42039;
}

/* Search Results Dropdown */
#technotel-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 360px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--technotel-border);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: var(--technotel-secondary);
}

.search-result-item:hover {
    background: var(--technotel-gray);
    color: var(--technotel-primary);
}

.search-result-item img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
}

.search-result-item .result-info .result-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 3px;
}

.search-result-item .result-info .result-price {
    font-size: 13px;
    color: var(--technotel-primary);
    margin: 0;
}

/* Cart Dropdown */
.attr-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.attr-nav .nav-link {
    font-size: 20px;
    color: var(--technotel-secondary);
    position: relative;
    padding: 5px;
}

.attr-nav .nav-link:hover {
    color: var(--technotel-primary);
}

.cart_dropdown {
    position: relative;
}

/* ── Icône + montant dans la navbar ── */
.cart_trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    position: relative;
    padding: 4px 6px;
    color: inherit;
}

.cart_trigger i {
    line-height: 1;
}

.cart_icon_wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart_icon_wrap .cart_count {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    left: auto !important;
    background: var(--technotel-primary) !important;
    color: #fff !important;
    font-size: 10px !important;
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    border-radius: 99px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: unset !important;
}

.amount {
    font-size: 13px;
    color: var(--technotel-secondary);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Dropdown container ── */
.cart_dropdown .cart_box,
.cart_box.dropdown-menu {
    min-width: 320px !important;
    max-width: 360px !important;
    border: 1px solid var(--technotel-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    padding: 16px !important;
    background: #fff !important;
    /* Anchor to right edge of cart icon so it doesn't overflow viewport */
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    transform: none !important;
}

/* ── Liste des articles ── */
.cart_list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.cart_list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--technotel-border);
    position: relative;
    padding-right: 24px;
}

.cart_list li:last-child {
    border-bottom: none;
}

/* Lien produit : image + colonne info côte à côte */
.cart_list .cart_item_link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.cart_list .cart_item_link img {
    width: 52px;
    height: 52px;
    min-width: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--technotel-border);
    background: #f5f7fa;
    flex-shrink: 0;
}

/* Colonne texte : nom au-dessus, prix dessous */
.cart_list .cart_item_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.cart_list .cart_product_name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--technotel-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart_list .cart_item_link:hover .cart_product_name {
    color: var(--technotel-primary);
}

/* Quantité × prix */
.cart_quantity {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* Bouton supprimer */
.cart_list .item_remove {
    position: absolute;
    top: 10px;
    right: 0;
    color: #bbb;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}

.cart_list .item_remove:hover {
    color: var(--technotel-primary);
}

/* ── Panier vide ── */
.empty-cart {
    text-align: center;
    padding: 20px 10px;
    color: #aaa;
    font-size: 13px;
}

/* ── Footer : sous-total + boutons ── */
.cart_footer {
    padding-top: 12px;
    border-top: 1px solid var(--technotel-border);
    margin-top: 4px;
}

.cart_total {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--technotel-secondary);
}

.cart_total .cart_price {
    color: var(--technotel-primary);
    font-size: 15px;
}

.cart_buttons {
    display: flex;
    gap: 8px;
}

.cart_buttons .btn {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 9px 10px;
    white-space: nowrap;
}

.cart_buttons .view-cart {
    border: 1px solid var(--technotel-primary);
    color: var(--technotel-primary);
    background: transparent;
    border-radius: 4px;
}

.cart_buttons .view-cart:hover {
    background: var(--technotel-primary);
    color: #fff;
}

.cart_buttons .checkout {
    background: var(--technotel-primary);
    color: #fff;
    border: 1px solid var(--technotel-primary);
    border-radius: 4px;
}

.cart_buttons .checkout:hover {
    background: var(--technotel-secondary);
    border-color: var(--technotel-secondary);
}

/* Bottom Header */
.bottom_header {
    padding: 0;
    position: relative;
    z-index: 100;
}

.categories_wrap {
    position: relative;
    z-index: 500;
}

/* The template forces .nav_cat.collapse:not(.show) { display: block } which
   makes the category panel always visible and overlaps the hero slider.
   We restore Bootstrap collapse behaviour: hidden until toggled. */
.nav_cat.collapse:not(.show) {
    display: none !important;
}

.categories_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--technotel-primary);
    color: #fff;
    border: none;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
}

.categories_btn:hover {
    background: #d42039;
}

.categories_btn i {
    font-size: 16px;
}

.nav_cat {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-top: none;
    width: 260px;
    z-index: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-radius: 0 0 8px 8px;
    overflow: visible; /* Allow mega menus to extend outside */
}

.nav_cat ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.nav_cat ul li {
    position: relative;
}

.nav_cat ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    font-size: 13.5px;
    color: var(--technotel-secondary);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

.nav_cat ul li a:hover,
.nav_cat ul li:hover > a {
    color: var(--technotel-primary);
    background: var(--technotel-gray);
}

.nav_cat ul li a i {
    font-size: 16px;
    color: var(--technotel-primary);
    width: 22px;
    flex-shrink: 0;
}

/* Right-arrow indicator for items with sub-menus.
   The template applies rotate(-90deg) to ALL .dropdown-toggler::after globally.
   We reset it here and position it correctly. */
.nav_cat .dropdown-toggler::after {
    content: '\203A' !important;
    font-family: inherit !important;
    font-size: 16px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    margin-left: 0;
    color: #aaa;
    font-style: normal;
    font-weight: 300;
}

/* Mega menus open to the RIGHT of the nav_cat panel */
.nav_cat .dropdown-mega-menu .dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 260px !important;
    right: auto !important;
    min-width: 460px !important;
    max-width: 540px !important;
    border: 1px solid var(--technotel-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    padding: 15px !important;
    background: #fff !important;
    z-index: 600 !important;
    transform: none !important;
}

/* Show mega menu on hover (CSS only — no Bootstrap JS dependency) */
.nav_cat .dropdown-mega-menu:hover > .dropdown-menu {
    display: block !important;
}
/* Also support Bootstrap's .show class as fallback */
.nav_cat .dropdown-mega-menu .dropdown-menu.show {
    display: block !important;
}

.nav_cat .dropdown-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--technotel-primary);
    padding: 6px 8px 4px;
    border-bottom: 1px solid var(--technotel-border);
    margin-bottom: 6px;
}

.nav_cat .mega-menu-col ul li a {
    padding: 7px 10px;
    font-size: 13px;
    color: var(--technotel-secondary);
    border-radius: 4px;
}

.nav_cat .mega-menu-col ul li a:hover {
    color: var(--technotel-primary);
    background: var(--technotel-gray);
}

.more_categories {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--technotel-gray);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--technotel-secondary);
    cursor: pointer;
    border-top: 1px solid var(--technotel-border);
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

/* Suppress the Linearicons "+" pseudo-element from template — conflicts with our flex layout */
.more_categories::before {
    display: none !important;
}

.more_categories:hover {
    color: var(--technotel-primary);
    background: #eee;
}

/* Main Navigation */
.navbar {
    padding: 0;
}

.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.navbar-nav .nav-link {
    color: var(--technotel-secondary) !important;
    font-size: 14px;
    font-weight: 600;
    padding: 15px 12px !important;
    transition: var(--transition);
    white-space: nowrap;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--technotel-primary) !important;
}

.navbar-nav .dropdown-menu {
    border: 1px solid var(--technotel-border);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 8px 0;
    min-width: 200px;
}

.navbar-nav .dropdown-item {
    font-size: 13.5px;
    padding: 8px 16px;
    color: var(--technotel-secondary);
    transition: var(--transition);
}

.navbar-nav .dropdown-item:hover {
    color: var(--technotel-primary);
    background: var(--technotel-gray);
}

.contact_phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--technotel-secondary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
}

.contact_phone i {
    color: var(--technotel-primary);
    font-size: 16px;
}

.pr_search_icon {
    display: none;
}

/* ============================================================
   MEGA MENU
============================================================ */
.dropdown-mega-menu .dropdown-menu {
    min-width: 400px;
    padding: 15px;
}

.mega-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   HERO SECTION / SLIDER
============================================================ */

/* Bootstrap carousel controls — template sets white background which
   creates a white square overlapping the slide content. Reset to transparent. */
.carousel-control-prev,
.carousel-control-next {
    background-color: transparent !important;
    width: 44px;
    opacity: 0.7;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}
.banner_section {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}

.carousel-item {
    border-radius: 12px;
}

.banner_content3 {
    color: #fff;
}

.banner_content3 h5 {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.banner_content3 h2 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.banner_content3 h4 {
    font-size: 18px;
}

.banner_content3 .price {
    background: rgba(255,255,255,0.15);
    padding: 5px 15px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.3);
    display: inline-block;
}

.shop_banner2 {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
    min-height: 190px;
    background: linear-gradient(135deg, #1a1a2e, #e94560);
}

.shop_banner2.el_banner1 {
    background: linear-gradient(135deg, #1a1a2e 0%, #e94560 100%);
}

.shop_banner2.el_banner2 {
    background: linear-gradient(135deg, #0d2137 0%, #0077b6 100%);
}

.shop_banner2 a {
    display: block;
    padding: 20px;
    text-decoration: none;
    position: relative;
    height: 100%;
    min-height: 190px;
}

.el_title {
    position: relative;
    z-index: 2;
}

.el_title h6 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.el_title span {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.el_img {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.el_img img {
    max-height: 120px;
    opacity: 0.8;
}

.text_white {
    color: #fff !important;
}

/* ============================================================
   SECTION HEADINGS
============================================================ */
.heading_s2 h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--technotel-secondary);
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 0;
}

.heading_s2 h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background: var(--technotel-primary);
    border-radius: 2px;
}

.heading_tab_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--technotel-border);
}

/* ============================================================
   TAB NAVIGATION
============================================================ */
.tab-style2 .nav-tabs {
    border: none;
    gap: 5px;
}

.tab-style2 .nav-tabs .nav-link {
    border: 1px solid var(--technotel-border);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--technotel-text);
    background: #fff;
    transition: var(--transition);
}

.tab-style2 .nav-tabs .nav-link:hover,
.tab-style2 .nav-tabs .nav-link.active {
    background: var(--technotel-primary) !important;
    color: #fff !important;
    border-color: var(--technotel-primary) !important;
}

/* ============================================================
   PRODUCT CARDS
============================================================ */
.product_wrap {
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    height: 100%;
}

.product_wrap:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transform: translateY(-3px);
    border-color: transparent;
}

.product_img {
    position: relative;
    overflow: hidden;
    background: var(--technotel-gray);
    aspect-ratio: 1;
}

.product_img a {
    display: block;
    height: 100%;
}

.product_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    transition: transform 0.4s ease;
}

.product_img .product_hover_img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: var(--transition);
}

/* hover géré plus bas avec :has() pour éviter le vide quand pas de 2e image */

.product_action_box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.95);
    transform: translateY(100%);
    transition: var(--transition);
    padding: 10px;
}

.product_wrap:hover .product_action_box {
    transform: translateY(0);
}

.pr_action_btn {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
}

.pr_action_btn .add-to-cart a,
.pr_action_btn .add-to-cart button {
    display: block;
    background: var(--technotel-primary);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}

.pr_action_btn .add-to-cart a:hover,
.pr_action_btn .add-to-cart button:hover {
    background: #d42039;
    color: #fff;
}

.product_info {
    padding: 15px;
}

.product_title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.product_title a {
    color: var(--technotel-secondary);
    transition: var(--transition);
}

.product_title a:hover {
    color: var(--technotel-primary);
}

.product_price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.product_price .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--technotel-primary);
}

.product_price del {
    font-size: 13px;
    color: #aaa;
}

.on_sale span {
    background: var(--technotel-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
}

.product_rating {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 6px;
}

.product_rating i {
    color: #ffc107;
    font-size: 13px;
}

.rating_count {
    font-size: 12px;
    color: var(--technotel-text);
    margin-left: 3px;
}

.pr_desc p {
    font-size: 12.5px;
    color: var(--technotel-text);
    margin-bottom: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pr_flash {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--technotel-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    z-index: 10;
    text-transform: uppercase;
}

.pr_flash.sale {
    background: #28a745;
}

/* ============================================================
   SALE BANNER
============================================================ */
.sale-banner {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.sale-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sale-banner:hover img {
    transform: scale(1.04);
}

/* Bannière catégorie personnalisée */
.technotel-cat-banner {
    display: block;
    min-height: 280px;
    padding: 30px 25px;
    color: #fff !important;
    text-decoration: none !important;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.technotel-security-banner {
    background: linear-gradient(145deg, #1a1a2e 0%, #e30613 100%);
}

.technotel-it-banner {
    background: linear-gradient(145deg, #0d2137 0%, #0077b6 100%);
}

.technotel-phone-banner {
    background: linear-gradient(145deg, #1b1b2f 0%, #415fff 100%);
}

.technotel-cat-banner-content .cat-banner-tag {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.3);
}

.technotel-cat-banner-content h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.2;
}

.technotel-cat-banner-content p {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cat-banner-link {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
}

.technotel-cat-banner:hover .cat-banner-link {
    background: rgba(255,255,255,0.3);
}

/* ============================================================
   DEAL OF THE DAY
============================================================ */
.deal_wrap {
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    transition: var(--transition);
}

.deal_wrap:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.deal_wrap .product_img {
    width: 220px;
    min-width: 220px;
    background: var(--technotel-gray);
    aspect-ratio: auto;
}

.deal_wrap .product_img a {
    height: 100%;
    min-height: 180px;
}

.deal_content {
    flex: 1;
    padding: 20px;
}

.deal_content .product_title {
    font-size: 16px;
}

.deal_progress {
    margin: 15px 0;
}

.stock-sold,
.stock-available {
    font-size: 12px;
    color: var(--technotel-text);
    display: inline-block;
    margin-right: 15px;
}

.stock-sold strong,
.stock-available strong {
    color: var(--technotel-secondary);
}

.progress {
    height: 6px;
    background: var(--technotel-border);
    border-radius: 3px;
    margin-top: 8px;
}

.progress-bar {
    background: var(--technotel-primary);
    border-radius: 3px;
}

/* ============================================================
   COUNTDOWN
============================================================ */
.countdown_time {
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
}

.countdown_box {
    text-align: center;
    background: var(--technotel-secondary);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    min-width: 55px;
    float: none !important;
    width: auto !important;
}

/* The countdown JS renders .count_num and .cd_text directly inside .countdown_box */
.countdown_box .count_num {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.countdown_box .cd_text {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
    display: block;
}

/* ============================================================
   BRAND LOGOS
============================================================ */
.cl_logo {
    padding: 15px;
    border: 1px solid var(--technotel-border);
    border-radius: 8px;
    text-align: center;
    transition: var(--transition);
    background: #fff;
}

.cl_logo:hover {
    border-color: var(--technotel-primary);
    box-shadow: 0 4px 15px rgba(255,50,77,0.1);
}

.brand-logo-svg {
    width: 100%;
    height: 60px;
    max-width: 160px;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn-fill-out {
    background: transparent;
    border: 2px solid var(--technotel-primary);
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: var(--transition);
}

.btn-fill-out::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--technotel-primary);
    z-index: -1;
    transition: var(--transition);
}

.btn-fill-out:hover {
    color: #fff;
    border-color: #d42039;
}

.btn-fill-out:hover::before {
    background: #d42039;
}

.btn-fill-line {
    border: 2px solid var(--technotel-secondary);
    color: var(--technotel-secondary);
    background: transparent;
    transition: var(--transition);
}

.btn-fill-line:hover {
    background: var(--technotel-secondary);
    color: #fff;
}

.btn-radius {
    border-radius: 25px;
    padding: 10px 28px;
}

/* ============================================================
   CONTACT SECTION
============================================================ */
.bg_default {
    background: var(--technotel-primary) !important;
}

.newsletter_text.text_white h3 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
}

.newsletter_text.text_white p {
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
    font-size: 14px;
}

.newsletter_form2 .form-control {
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
}

.newsletter_form2 .form-control::placeholder {
    color: rgba(255,255,255,0.6);
}

.newsletter_form2 .form-control:focus {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    box-shadow: none;
    outline: none;
    color: #fff;
}

.newsletter_form2 textarea.form-control {
    resize: vertical;
    min-height: 90px;
}

/* ============================================================
   FOOTER
============================================================ */
footer.bg_gray {
    background: #f8f9fa;
}

.footer_top {
    padding-top: 60px;
    padding-bottom: 40px;
}

.footer_logo img {
    height: 45px;
    width: auto;
    margin-bottom: 18px;
}

.footer_logo + p,
.widget > p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 18px;
}

.contact_info {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact_info li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.contact_info li i {
    color: var(--technotel-primary);
    font-size: 16px;
    margin-top: 2px;
    min-width: 18px;
}

.contact_info li a {
    color: #666;
    transition: var(--transition);
}

.contact_info li a:hover {
    color: var(--technotel-primary);
}

.contact_info li p {
    margin: 0;
    line-height: 1.5;
    color: #666;
}

.widget_title {
    font-size: 16px;
    font-weight: 700;
    color: var(--technotel-secondary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--technotel-primary);
    display: inline-block;
}

.widget_links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_links li {
    margin-bottom: 9px;
}

.widget_links li a {
    font-size: 14px;
    color: #666;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.widget_links li a:hover {
    color: var(--technotel-primary);
    padding-left: 5px;
}

.social_icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.social_icons li {
    display: inline-block;
}

.social_icons a,
.sc_facebook,
.sc_instagram,
.sc_twitter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    transition: var(--transition);
    border: 1px solid var(--technotel-border);
    color: var(--technotel-text);
}

.sc_facebook:hover,
.social_icons .sc_facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff !important;
}

.sc_instagram:hover,
.social_icons .sc_instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: transparent;
    color: #fff !important;
}

.sc_twitter:hover,
.social_icons .sc_twitter:hover {
    background: #010101;
    border-color: #010101;
    color: #fff !important;
}

.social_icons.mt-3 {
    gap: 8px;
}

/* Footer Middle (Services Icons) */
.middle_footer {
    background: #fff;
    padding: 30px 0;
    border-top: 1px solid var(--technotel-border);
    border-bottom: 1px solid var(--technotel-border);
}

.shopping_info {
    padding: 0;
}

.icon_box_style2 {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px;
}

.icon_box_style2 .icon {
    font-size: 40px;
    color: var(--technotel-primary);
    min-width: 50px;
}

.icon_box_style2 .icon_box_content h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--technotel-secondary);
    margin-bottom: 4px;
}

.icon_box_style2 .icon_box_content p {
    font-size: 13px;
    color: var(--technotel-text);
    margin: 0;
    line-height: 1.4;
}

/* Footer Bottom */
.bottom_footer {
    background: #fff;
    padding: 18px 0;
}

.border-top-tran {
    border-top: 1px solid var(--technotel-border);
}

.bottom_footer p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.footer_payment li {
    list-style: none;
    display: inline-block;
}

/* ============================================================
   SCROLL TO TOP
============================================================ */
.scrollup {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--technotel-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(255,50,77,0.4);
}

.scrollup:hover {
    background: #d42039;
    color: #fff;
    transform: translateY(-3px);
}

/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb_section.page-title-mini {
    background: var(--technotel-gray);
    padding: 20px 0;
    border-bottom: 1px solid var(--technotel-border);
}

.page-title h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--technotel-secondary);
    margin: 0;
}

.breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
}

.breadcrumb-item {
    font-size: 13px;
    color: var(--technotel-text);
}

.breadcrumb-item a {
    color: var(--technotel-text);
    transition: var(--transition);
}

.breadcrumb-item a:hover {
    color: var(--technotel-primary);
}

.breadcrumb-item.active {
    color: var(--technotel-primary);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: var(--technotel-border);
}

/* ============================================================
   404 PAGE
============================================================ */
.section_404 .error_num {
    font-size: 150px;
    font-weight: 900;
    color: var(--technotel-primary);
    line-height: 1;
    display: flex;
    justify-content: center;
    gap: 0;
}

.section_404 .error_num span {
    display: inline-block;
    animation: bounce404 1s ease infinite alternate;
}

.section_404 .error_num span:nth-child(2) {
    animation-delay: 0.2s;
    color: var(--technotel-secondary);
}

.section_404 .error_num span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce404 {
    from { transform: translateY(0); }
    to   { transform: translateY(-15px); }
}

/* ============================================================
   WOOCOMMERCE OVERRIDES
============================================================ */
.woocommerce-result-count {
    font-size: 14px;
    color: var(--technotel-text);
    margin: 0;
}

.woocommerce-ordering select {
    border: 1px solid var(--technotel-border);
    border-radius: 20px;
    padding: 6px 30px 6px 15px;
    font-size: 14px;
    color: var(--technotel-secondary);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23687188'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.woocommerce-ordering select:focus {
    border-color: var(--technotel-primary);
}

/* WooCommerce pagination */
.woocommerce-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    justify-content: center;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--technotel-border);
    border-radius: 50%;
    font-size: 14px;
    color: var(--technotel-secondary);
    transition: var(--transition);
}

.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
    background: var(--technotel-primary);
    color: #fff;
    border-color: var(--technotel-primary);
}

/* ============================================================
   SHOP SIDEBAR
============================================================ */
.shop_sidebar_wrap .widget {
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.shop_sidebar_wrap .widget .widget_links li a .badge {
    font-size: 11px;
    font-weight: 600;
    background: var(--technotel-gray);
    color: var(--technotel-text);
    border-radius: 10px;
}

.shop_sidebar_wrap .widget .widget_links li.active a {
    color: var(--technotel-primary);
    font-weight: 700;
}

/* ============================================================
   BLOG
============================================================ */
.blog_post {
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
}

.blog_post:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.blog_img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.blog_content {
    padding: 20px;
}

.blog_text .blog_meta {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.blog_meta li {
    font-size: 12px;
    color: var(--technotel-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog_meta li a {
    color: var(--technotel-text);
    transition: var(--transition);
}

.blog_meta li a:hover {
    color: var(--technotel-primary);
}

.blog_meta li i {
    color: var(--technotel-primary);
}

.blog_title {
    font-size: 17px;
    font-weight: 700;
    color: var(--technotel-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.blog_title a {
    color: inherit;
    transition: var(--transition);
}

.blog_title a:hover {
    color: var(--technotel-primary);
}

.blog_text p {
    font-size: 14px;
    color: var(--technotel-text);
    line-height: 1.7;
    margin-bottom: 15px;
}

/* ============================================================
   ANIMATIONS
============================================================ */
.hover_effect1 {
    overflow: hidden;
    display: block;
}

.hover_effect1 img {
    transition: transform 0.4s ease;
    width: 100%;
}

.hover_effect1:hover img {
    transform: scale(1.05);
}

/* ============================================================
   OWL CAROUSEL CUSTOM
============================================================ */
.carousel_slider .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    margin: 0;
}

.carousel_slider .owl-nav button {
    pointer-events: all;
    width: 36px;
    height: 36px;
    background: #fff !important;
    border: 1px solid var(--technotel-border) !important;
    border-radius: 50%;
    color: var(--technotel-secondary) !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.carousel_slider .owl-nav button:hover {
    background: var(--technotel-primary) !important;
    border-color: var(--technotel-primary) !important;
    color: #fff !important;
}

.carousel_slider .owl-nav .owl-prev {
    margin-left: -18px;
}

.carousel_slider .owl-nav .owl-next {
    margin-right: -18px;
}

.carousel_slider .owl-dots {
    text-align: center;
    margin-top: 15px;
}

.carousel_slider .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: var(--technotel-border);
    border-radius: 50%;
    display: inline-block;
    margin: 3px;
    transition: var(--transition);
}

.carousel_slider .owl-dots .owl-dot.active span {
    background: var(--technotel-primary);
    width: 22px;
    border-radius: 4px;
}

/* Equal-height carousel items */
.carousel_slider .owl-item {
    display: flex;
    flex-direction: column;
}
.carousel_slider .owl-item .item {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.carousel_slider .owl-item .item .product_wrap {
    flex: 1;
    height: 100%;
}

/* list_none reset (used on pr_action_btn) */
.list_none {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 991px) {

    .product_search_form {
        max-width: 100%;
        order: 3;
        margin-top: 10px;
    }

    .nav_block {
        flex-wrap: wrap;
    }

    .attr-nav {
        margin-left: auto;
    }

    .banner_content3 h2 {
        font-size: 24px;
    }

    .deal_wrap {
        flex-direction: column;
    }

    .deal_wrap .product_img {
        width: 100%;
        min-width: auto;
        aspect-ratio: 1;
    }

    .icon_box_style2 {
        text-align: left;
    }
}

/* Touch devices: always show action box (no hover) */
@media (hover: none) {
    .product_wrap .product_action_box {
        transform: translateY(0) !important;
        -webkit-transform: translateY(0) !important;
    }
}

@media (max-width: 767px) {

    .custom-container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .banner_content3 h2 {
        font-size: 20px;
    }

    .section_404 .error_num {
        font-size: 80px;
    }

    .heading_tab_header {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-nav .nav-link {
        padding: 10px 0 !important;
        border-bottom: 1px solid var(--technotel-border);
    }

    .footer_logo img {
        height: 35px;
    }

    .cart_box {
        min-width: 280px;
        max-width: 95vw;
        right: 0;
    }

    .middle_footer .icon_box_style2 {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 576px) {

    .heading_s2 h4 {
        font-size: 18px;
    }

    .banner_content3 h2 {
        font-size: 18px;
    }

    .banner_content3 h4 .price {
        font-size: 16px;
    }

    .btn-fill-out,
    .btn-fill-line {
        padding: 8px 20px;
        font-size: 13px;
    }

    .product_price .price {
        font-size: 14px;
    }
}

/* ============================================================
   SURCHARGES TEMPLATE style.css — CORRECTIONS CONFLITS CSS
   Ces règles corrigent les incompatibilités entre le template
   Shopwise (style.css) et notre design Technotel.
============================================================ */

/* --- Boutons : .btn-fill-out animation ---
   Le template utilise deux ::before/::after qui s'effacent au hover.
   On réinitialise notre approche pour suivre le template de base
   en surchargeant uniquement les couleurs.
----------------------------------------------------- */
.btn-fill-out {
    border-color: var(--technotel-primary) !important;
    color: #fff !important;
}
.btn-fill-out::before,
.btn-fill-out::after {
    background-color: var(--technotel-primary) !important;
    width: 51%;
}
.btn-fill-out:hover {
    color: var(--technotel-primary) !important;
    border-color: var(--technotel-primary) !important;
}
.btn-fill-out:hover::before,
.btn-fill-out:hover::after {
    width: 0 !important;
    background-color: var(--technotel-primary) !important;
}

/* Sur fond sombre (slider hero), le fill disparaît au hover et le texte
   rouge (#FF324D) n'est plus visible. On garde le fill + texte blanc. */
.banner_section .btn-fill-out:hover {
    color: #fff !important;
}
.banner_section .btn-fill-out:hover::before,
.banner_section .btn-fill-out:hover::after {
    width: 51% !important;
    background-color: #d42039 !important;
}

/* .btn-fill-line : le template met color:#fff!important.
   Sur fond blanc cela rend le texte invisible hors hover.
   On force la couleur secondaire. */
.btn-fill-line {
    color: var(--technotel-secondary) !important;
    border-color: var(--technotel-secondary) !important;
}
.btn-fill-line::before,
.btn-fill-line::after {
    background-color: var(--technotel-secondary) !important;
    width: 0 !important;
}
.btn-fill-line:hover {
    color: #fff !important;
}
.btn-fill-line:hover::before,
.btn-fill-line:hover::after {
    width: 51% !important;
}

/* "Voir tout" en outline dark Bootstrap — lisible sur fond blanc */
.btn-outline-dark {
    color: var(--technotel-secondary);
    border-color: var(--technotel-secondary);
    font-size: 13px;
    padding: 6px 18px;
    border-radius: 20px;
}
.btn-outline-dark:hover {
    background: var(--technotel-secondary);
    color: #fff;
}

/* --- Produit : product_action_box ---
   Le template positionne la boîte au CENTRE de l'image (top:50%).
   Notre design la place EN BAS, qui coulisse vers le haut au hover.
----------------------------------------------------- */
.product_wrap .product_action_box {
    position: absolute;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    transform: translateY(100%) !important;
    -webkit-transform: translateY(100%) !important;
    background: rgba(255, 255, 255, 0.97);
    padding: 10px 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 3;
    text-align: left;
}
.product_wrap:hover .product_action_box {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
}

/* --- product_img overlay : uniquement sur product_wrap ---
   Le template affiche un overlay sombre sur hover pour .product et .product_box.
   Pour .product_wrap on désactive pour garder l'image nette.
----------------------------------------------------- */
.product_wrap .product_img::before {
    display: none !important;
}

/* --- pr_action_btn : remise à plat du layout pour bouton full-width ---
   Le template utilise display:table pour icônes rondes.
   Notre design utilise un bouton textuel pleine largeur.
----------------------------------------------------- */
.product_wrap .pr_action_btn {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
.product_wrap .pr_action_btn li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* --- Bouton add-to-cart : full width textuel ---
   Le template met font-size:0 et icône ronde sur tous les .pr_action_btn li a.
   On force nos styles pour .add-to-cart spécifiquement.
----------------------------------------------------- */
.product_wrap .product_action_box .pr_action_btn li.add-to-cart > a,
.product_wrap .product_action_box .pr_action_btn li.add-to-cart > button {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.5 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 8px 12px !important;
    background: var(--technotel-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease !important;
}
.product_wrap .product_action_box .pr_action_btn li.add-to-cart > a:hover,
.product_wrap .product_action_box .pr_action_btn li.add-to-cart > button:hover {
    background: #d42039 !important;
    color: #fff !important;
}
.product_wrap .product_action_box .pr_action_btn li.add-to-cart > a i,
.product_wrap .product_action_box .pr_action_btn li.add-to-cart > button i {
    font-size: 14px !important;
    line-height: 1 !important;
    margin-right: 5px;
    vertical-align: middle;
}

/* --- pr_desc : le template le masque, on le réaffiche ---
----------------------------------------------------- */
.product_wrap .pr_desc {
    display: block !important;
}
.product_wrap .pr_desc p {
    font-size: 12.5px;
    color: var(--technotel-text);
    margin-bottom: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- product_wrap box-shadow : supprime le shadow permanent du template ---
----------------------------------------------------- */
.product_wrap {
    box-shadow: none !important;
}
.product_wrap:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* --- on_sale badge : override du texte vert du template ---
----------------------------------------------------- */
.product_wrap .on_sale {
    display: inline-block;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700;
}
.product_wrap .on_sale span {
    background: var(--technotel-primary);
    color: #fff;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
}

/* --- pr_flash : override couleur orange du template ---
----------------------------------------------------- */
.pr_flash {
    background-color: var(--technotel-primary) !important;
    border-radius: 3px;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
}
.pr_flash.sale {
    background-color: #28a745 !important;
}

/* --- product_price : couleur prix ---
----------------------------------------------------- */
.product_price .price,
.product_info .price {
    color: var(--technotel-primary) !important;
    font-weight: 700;
}

/* ============================================================
   PAGE BOUTIQUE (archive-product.php)
============================================================ */

/* Barre d'outils résultats + tri */
.shop_toolbar_wrapper {
    padding: 12px 15px;
    background: var(--technotel-gray);
    border-radius: 8px;
    border: 1px solid var(--technotel-border);
}

.woocommerce-result-count {
    font-size: 13px;
    color: var(--technotel-text);
    margin: 0;
}

.woocommerce-ordering {
    margin: 0;
}
.woocommerce-ordering select {
    border: 1px solid var(--technotel-border) !important;
    border-radius: 20px !important;
    padding: 6px 30px 6px 14px !important;
    font-size: 13px !important;
    color: var(--technotel-secondary) !important;
    background: #fff !important;
    outline: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
}
.woocommerce-ordering select:focus {
    border-color: var(--technotel-primary) !important;
}

/* Pagination WooCommerce */
.woocommerce-pagination {
    margin-top: 20px;
}
.woocommerce-pagination ul.page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--technotel-border);
    border-radius: 50%;
    font-size: 14px;
    color: var(--technotel-secondary);
    transition: var(--transition);
    text-decoration: none;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li span.current {
    background: var(--technotel-primary);
    color: #fff !important;
    border-color: var(--technotel-primary);
}

/* Pagination WordPress (blog, archives) */
.pagination_style1 .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination_style1 .page-numbers a,
.pagination_style1 .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--technotel-border);
    border-radius: 50%;
    font-size: 14px;
    color: var(--technotel-secondary);
    transition: var(--transition);
    text-decoration: none;
}
.pagination_style1 .page-numbers a:hover,
.pagination_style1 .page-numbers span.current {
    background: var(--technotel-primary);
    color: #fff;
    border-color: var(--technotel-primary);
}

/* ============================================================
   SIDEBAR BOUTIQUE
============================================================ */
.shop_sidebar_wrap .widget {
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}
.shop_sidebar_wrap .widget_title {
    font-size: 15px;
    font-weight: 700;
    color: var(--technotel-secondary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--technotel-primary);
    display: block;
}
.shop_sidebar_wrap .widget_links li {
    margin-bottom: 8px;
}
.shop_sidebar_wrap .widget_links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--technotel-text);
    padding: 4px 0;
    transition: var(--transition);
}
.shop_sidebar_wrap .widget_links li a:hover,
.shop_sidebar_wrap .widget_links li.active a {
    color: var(--technotel-primary);
    padding-left: 5px;
}
.shop_sidebar_wrap .widget_links li a .badge {
    background: var(--technotel-gray);
    color: var(--technotel-text);
    font-size: 11px;
    border-radius: 10px;
    padding: 2px 7px;
}

/* ============================================================
   HEADER — surcharges template
============================================================ */

/* Le template applique des styles spécifiques à .dark_skin
   qui peuvent conflicater avec notre header blanc */
.dark_skin.middle-header {
    background-color: #fff !important;
}
.dark_skin .navbar-nav .nav-link {
    color: var(--technotel-secondary) !important;
}
.dark_skin .navbar-nav .nav-link:hover {
    color: var(--technotel-primary) !important;
}

/* top-bar : le template peut avoir des styles conflictuels */
.top-header {
    padding: 8px 0;
    font-size: 13px;
}

/* ============================================================
   BLOG — surcharges template
============================================================ */
.blog_post .blog_img img {
    width: 100%;
    height: 200px !important;
    object-fit: cover;
}
.blog_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}
.blog_meta li {
    font-size: 12px;
    color: var(--technotel-text);
    display: flex;
    align-items: center;
    gap: 4px;
}
.blog_meta li a {
    color: var(--technotel-text);
}
.blog_meta li a:hover {
    color: var(--technotel-primary);
}

/* ============================================================
   FORMULAIRES WooCommerce — surcharges
============================================================ */
.woocommerce form .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--technotel-secondary);
    margin-bottom: 5px;
}
.woocommerce form .form-row .input-text {
    border: 1px solid var(--technotel-border) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    width: 100%;
    box-shadow: none !important;
    transition: border-color 0.3s ease;
}
.woocommerce form .form-row .input-text:focus {
    border-color: var(--technotel-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255,50,77,.1) !important;
}

/* WooCommerce messages */
.woocommerce-message {
    background: #fff;
    border-top: 3px solid var(--technotel-primary) !important;
    color: var(--technotel-secondary);
    font-size: 14px;
    border-radius: 0 0 6px 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.woocommerce-error {
    background: #fff;
    border-top: 3px solid #dc3545 !important;
    font-size: 14px;
    padding: 12px 16px;
}
.woocommerce-info {
    background: #fff;
    border-top: 3px solid #0077b6 !important;
    font-size: 14px;
    padding: 12px 16px;
}

/* ============================================================
   SINGLE PRODUCT — surcharges
============================================================ */
.woocommerce div.product .product_title {
    font-size: 22px;
    font-weight: 700;
    color: var(--technotel-secondary);
    line-height: 1.3;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--technotel-primary) !important;
    font-size: 24px;
    font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active > a {
    color: var(--technotel-primary);
}

/* ============================================================
   MOBILE — surcharges supplémentaires
============================================================ */
@media (max-width: 767px) {
    .shop_toolbar_wrapper {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
    .product_wrap .product_action_box {
        transform: translateY(0) !important;
        position: static !important;
        border-top: 1px solid var(--technotel-border);
    }
    .product_wrap .pr_desc {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .col-6 .product_wrap .product_info {
        padding: 10px;
    }
    .col-6 .product_price .price {
        font-size: 13px !important;
    }
    .col-6 .product_title {
        font-size: 12px !important;
    }
    .col-6 .product_action_box {
        padding: 6px 8px;
    }
    .col-6 .product_wrap .product_action_box .pr_action_btn li.add-to-cart > a {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
}

/* ============================================================
   TECH BACKGROUND PATTERNS — side blocks & carousel slides
   Pattern circuit board en SVG data-URI (lignes + noeuds)
============================================================ */

/* Pattern partagé : circuit board blanc semi-transparent */
.techno-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 H30 M50 40 H80 M40 0 V30 M40 50 V80 M10 10 H30 V30 M50 10 H70 V30 M10 70 H30 V50 M50 70 H70 V50' stroke='rgba(255,255,255,0.07)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='40' cy='40' r='4' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='30' cy='40' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='50' cy='40' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='40' cy='30' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='40' cy='50' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='30' cy='30' r='2' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='50' cy='30' r='2' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='30' cy='50' r='2' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='50' cy='50' r='2' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Blocs latéraux hero (bannières catégories) */
.shop_banner2 > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 H30 M50 40 H80 M40 0 V30 M40 50 V80 M10 10 H30 V30 M50 10 H70 V30 M10 70 H30 V50 M50 70 H70 V50' stroke='rgba(255,255,255,0.07)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='40' cy='40' r='4' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='30' cy='40' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='50' cy='40' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='40' cy='30' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='40' cy='50' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='30' cy='30' r='2' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='50' cy='30' r='2' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='30' cy='50' r='2' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='50' cy='50' r='2' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-repeat: repeat;
}

/* Slides hero carousel — pattern circuit en overlay (::before)
   pour ne pas écraser le gradient inline style= */
.banner_section .carousel-item {
    position: relative;
    overflow: hidden;
}
.banner_section .carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 H40 M60 50 H100 M50 0 V40 M50 60 V100 M15 15 H35 V35 M65 15 H85 V35 M15 85 H35 V65 M65 85 H85 V65 M20 50 H30 M70 50 H80 M50 20 V30 M50 70 V80' stroke='rgba(255,255,255,0.06)' stroke-width='1' fill='none'/%3E%3Ccircle cx='50' cy='50' r='5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='40' cy='50' r='3' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='60' cy='50' r='3' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='50' cy='40' r='3' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='50' cy='60' r='3' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
    background-size: 100px 100px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 1;
}
.banner_section .carousel-item .banner_slide_content {
    position: relative;
    z-index: 2;
}

/* Sections catégories avec en-têtes colorés */
.el_title {
    position: relative;
    z-index: 2;
}

/* Bannières de section (blocs catégories dans le body) */
.shop_el_slider .banner_img,
.shop_banner2 {
    position: relative;
    overflow: hidden;
}

/* Hover : légère lueur sur les blocs latéraux */
.shop_banner2:hover > a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* ============================================================
   PRODUCT IMAGE HOVER — animation secondaire image
   :has() CSS moderne : ne cache l'image principale que si
   une .product_hover_img existe réellement dans le DOM.
   Fallback gracieux pour navigateurs anciens : rien ne se passe.
============================================================ */
.product_wrap .product_img {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.product_wrap .product_img > a {
    display: block;
    position: relative;
}

/* Image principale — transition douce */
.product_wrap .product_img img:first-child {
    display: block;
    width: 100%;
    transition: opacity 0.4s ease;
}

/* Image de survol (galerie) — cachée par défaut */
.product_wrap .product_img .product_hover_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Hover : swap d'image UNIQUEMENT si une 2ème image existe (:has support) */
.product_wrap:has(.product_hover_img):hover .product_img img:first-child {
    opacity: 0;
}
.product_wrap:has(.product_hover_img):hover .product_img .product_hover_img {
    opacity: 1;
}

/* Produit sans galerie : garder image principale visible au hover */
.product_wrap:not(:has(.product_hover_img)):hover .product_img img:first-child {
    opacity: 1;
}

/* Placeholder no-image — affichage plein */
.product_wrap .product_img img[src*="no-product"],
.product_wrap .product_img img[src*="woocommerce-placeholder"] {
    opacity: 1;
    filter: none;
    object-fit: contain;
    padding: 10px;
}

/* ============================================================
   CHECKOUT PAGE — Modern Layout
   ============================================================ */

/* ── Page wrapper ── */
.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── 2-column grid layout ── */
form.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    grid-template-rows: auto 1fr !important;
    gap: 32px !important;
    align-items: start !important;
    float: none !important;
    width: 100% !important;
}

form.woocommerce-checkout #customer_details {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 100% !important;
    float: none !important;
}

form.woocommerce-checkout #order_review_heading {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

form.woocommerce-checkout #order_review {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    float: none !important;
    position: sticky !important;
    top: 20px !important;
}

/* ── col2-set children ── */
#customer_details.col2-set {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    float: none !important;
}

#customer_details .col-1,
#customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 12px;
    padding: 28px 28px 20px;
}

/* ── Section headings ── */
#customer_details h3,
#order_review_heading,
#payment h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--technotel-secondary);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--technotel-primary);
    display: inline-block;
}

#order_review_heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--technotel-secondary);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--technotel-primary);
    display: block !important;
    margin-bottom: 0 !important;
}

/* ── Form rows ── */
.woocommerce-checkout .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    clear: none !important;
}

.woocommerce-checkout .form-row label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--technotel-secondary) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.woocommerce-checkout .form-row label .required {
    color: var(--technotel-primary) !important;
    margin-left: 2px;
}

/* ── Inputs & selects ── */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
    width: 100% !important;
    height: 44px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e0e4ec !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: var(--technotel-secondary) !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--technotel-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,50,77,0.08) !important;
}

.woocommerce-checkout .form-row textarea {
    height: 90px !important;
    resize: vertical !important;
}

/* ── Select2 fix ── */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    line-height: 44px !important;
    display: flex !important;
    align-items: center !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1 !important;
    color: var(--technotel-secondary) !important;
    padding-left: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    top: 0 !important;
}

/* ── Woocommerce input wrapper ── */
.woocommerce-checkout .woocommerce-input-wrapper {
    width: 100% !important;
}

/* ── Coupon section ── */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    background: #fff8f9;
    border: 1px solid #ffd6db;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 13px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--technotel-secondary);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important;
}

/* ── Order review card ── */
#order_review {
    background: #fff;
    border: 1px solid var(--technotel-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Order table ── */
.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.woocommerce-checkout-review-order-table thead th {
    padding: 14px 20px !important;
    background: #f8f9fa !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #999 !important;
    border-bottom: 1px solid var(--technotel-border) !important;
}

.woocommerce-checkout-review-order-table tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

.woocommerce-checkout-review-order-table tbody td {
    padding: 14px 20px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.woocommerce-checkout-review-order-table tbody td.product-name {
    font-weight: 500 !important;
    color: var(--technotel-secondary) !important;
}

.woocommerce-checkout-review-order-table tbody td.product-total {
    font-weight: 600 !important;
    color: var(--technotel-secondary) !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.woocommerce-checkout-review-order-table tfoot tr td,
.woocommerce-checkout-review-order-table tfoot tr th {
    padding: 10px 20px !important;
    font-size: 13px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total th {
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background: #fff8f9 !important;
    border-top: 2px solid var(--technotel-border) !important;
}

.woocommerce-checkout-review-order-table tfoot .order-total .amount {
    color: var(--technotel-primary) !important;
    font-size: 16px !important;
}

/* ── Payment section ── */
#payment {
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
}

#payment .payment_methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--technotel-border) !important;
}

#payment .payment_methods li {
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#payment .payment_methods li label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--technotel-secondary) !important;
    margin: 0 !important;
    transition: background 0.15s !important;
}

#payment .payment_methods li label:hover {
    background: #fafafa !important;
}

#payment .payment_methods li input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--technotel-primary) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

#payment .payment_box {
    padding: 10px 20px 14px !important;
    background: #f8f9fa !important;
    font-size: 13px !important;
    color: #666 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* ── Privacy notice ── */
#payment .woocommerce-privacy-policy-text {
    padding: 12px 20px !important;
    font-size: 12px !important;
    color: #999 !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* ── Place order button ── */
#payment .place-order {
    padding: 16px 20px !important;
    background: #fff !important;
    border-top: 1px solid var(--technotel-border) !important;
}

#place_order {
    width: 100% !important;
    padding: 14px 20px !important;
    background: var(--technotel-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
    display: block !important;
    text-align: center !important;
}

#place_order:hover {
    background: #e0001f !important;
}
#place_order:active {
    transform: scale(0.99) !important;
}

/* ── Field validation errors ── */
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: #e74c3c !important;
}

.woocommerce-checkout .form-row.woocommerce-validated input {
    border-color: #27ae60 !important;
}

/* ── Additional info (notes) ── */
#ship-to-different-address label,
#ship-to-different-address h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* ── Remove WooCommerce speech-bubble triangle on payment box ── */
#payment .payment_box::before,
#payment .payment_box::after {
    display: none !important;
}

/* ── Hide duplicate page title inside WC form ── */
.woocommerce-checkout > h3:first-of-type {
    display: none;
}

/* ── Payment method label when radio is hidden (single method) ── */
#payment .wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    cursor: default !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--technotel-secondary) !important;
    background: #fff !important;
    border-bottom: none !important;
}

#payment .wc_payment_method > label::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--technotel-primary);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ── Payment heading ── */
#payment > h3 {
    padding: 16px 20px 0 !important;
    border-bottom: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #999 !important;
}

/* ── Coupon toggle bar ── */
.woocommerce-form-coupon-toggle,
.woocommerce-info {
    background: #fff8f9 !important;
    border-left: 3px solid var(--technotel-primary) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 12px 16px !important;
    margin-bottom: 28px !important;
    font-size: 13px !important;
    color: var(--technotel-secondary) !important;
    box-shadow: none !important;
}
.woocommerce-info::before {
    display: none !important;
}

/* ── Checkout page title (WC adds extra h2) ── */
.woocommerce-checkout h2.woocommerce-checkout {
    display: none !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    form.woocommerce-checkout {
        grid-template-columns: 1fr !important;
    }
    form.woocommerce-checkout #customer_details {
        grid-row: 1 !important;
    }
    form.woocommerce-checkout #order_review_heading {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    form.woocommerce-checkout #order_review {
        grid-column: 1 !important;
        grid-row: 3 !important;
        position: static !important;
    }
}

/* ============================================================
   NOS MARQUES — SECTION HOMEPAGE
============================================================ */
.brands_section {
    background: #fff;
    border-top: 1px solid var(--technotel-border, #e5e5e5);
    border-bottom: 1px solid var(--technotel-border, #e5e5e5);
}

.brands_subtitle {
    font-size: 14px;
    color: #687188;
    margin-top: 4px;
}

.brands_carousel .brand_item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 80px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--technotel-border, #e5e5e5);
    border-radius: 10px;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}

.brands_carousel .brand_item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.brands_carousel .brand_item img {
    max-height: 50px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}

.brands_carousel .brand_item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================================
   PAGE CONTACT TECHNOTEL GABÈS
============================================================ */
.contact_page_grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 48px;
}

/* ── Info cards ── */
.contact_info_col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact_card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--technotel-border, #e5e5e5);
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow 0.2s;
}

.contact_card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.contact_card_icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: rgba(255,50,77,.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--technotel-primary, #FF324D);
    font-size: 20px;
}

.contact_card_body h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--technotel-secondary, #292b2c);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.contact_card_body p {
    font-size: 14px;
    color: #687188;
    margin: 0 0 2px;
    line-height: 1.5;
}

.contact_card_body a {
    color: #687188;
    text-decoration: none;
    transition: color 0.2s;
}

.contact_card_body a:hover {
    color: var(--technotel-primary, #FF324D);
}

.contact_social {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0 0;
}

.contact_social span {
    font-size: 13px;
    font-weight: 600;
    color: #687188;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.contact_social_links {
    display: flex;
    gap: 10px;
}

.contact_social_links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--technotel-primary, #FF324D);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.contact_social_links a:hover {
    background: #d42039;
    transform: translateY(-2px);
}

/* ── Form card ── */
.contact_form_card {
    background: #fff;
    border: 1px solid var(--technotel-border, #e5e5e5);
    border-radius: 12px;
    padding: 36px 32px;
}

.contact_form_card h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--technotel-secondary, #292b2c);
    margin: 0 0 6px;
}

.contact_form_intro {
    font-size: 14px;
    color: #687188;
    margin: 0 0 28px;
}

/* ── Notices ── */
.contact_notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}

.contact_notice--success {
    background: #e8f7ee;
    color: #1a7a45;
    border: 1px solid #b7e4c7;
}

.contact_notice--error {
    background: #fef0f0;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

/* ── Form layout ── */
.contact_form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact_form_group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.contact_form_group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--technotel-secondary, #292b2c);
}

.contact_form_group label span {
    color: var(--technotel-primary, #FF324D);
}

.contact_form_group input,
.contact_form_group select,
.contact_form_group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e4ec;
    border-radius: 8px;
    font-size: 14px;
    color: var(--technotel-secondary, #292b2c);
    background: #fafbfd;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    outline: none;
}

.contact_form_group input:focus,
.contact_form_group select:focus,
.contact_form_group textarea:focus {
    border-color: var(--technotel-primary, #FF324D);
    box-shadow: 0 0 0 3px rgba(255,50,77,.1);
    background: #fff;
}

.contact_form_group textarea {
    resize: vertical;
    min-height: 130px;
}

.contact_submit_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--technotel-primary, #FF324D);
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: inherit;
}

.contact_submit_btn:hover {
    background: #d42039;
    transform: translateY(-1px);
}

/* ── Map ── */
.contact_map {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--technotel-border, #e5e5e5);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.contact_map iframe {
    display: block;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .contact_page_grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .contact_form_row {
        grid-template-columns: 1fr;
    }
    .contact_form_card {
        padding: 24px 18px;
    }
}