/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* ============================================================ * HARDWAREXCHANGE — FEUILLE DE STYLES UNIQUE DU THÈME * * Sommaire (chercher « § » suivi du numéro) : * §1 Variables : couleurs, ombres, polices, hauteurs d'en-tête * §2 Base : remise à zéro (reset Hello Elementor 3.5.1) * §3 En-tête : barre du haut, navigation, méga-menu, menu mobile * §4 WooCommerce : panier, validation de commande, mon compte * §5 Pages et composants : styles généraux, catalogue (#hxArchive), * fiche produit, mini-panier, fil d'Ariane, recherche, accueil, * pied de page * §6 Compléments : pastilles de couleur, prix HT / TTC, délai d'expédition * §7 Petits écrans : en-tête et menu mobile, catalogue, fiche produit, * panier, validation de commande, mon compte (tablette et téléphone) * * L'ordre des sections compte (à poids égal, la règle placée plus bas * l'emporte) : ne pas les déplacer sans vérifier le rendu. * ============================================================ */ /* ============================================================ * §1 VARIABLES * ============================================================ */ :root { /* Couleurs */ --hx-orange: #E84A1C; --hx-orange-dark: #c93d14; --hx-orange-soft: #FFF0EA; --hx-green: #5BB94A; --hx-green-soft: #E8F5E5; --hx-bg: #F5F2EC; --hx-white: #ffffff; --hx-text: #1a1a1a; --hx-text-soft: #333; --hx-text-muted: #6b6b6b; --hx-border: #e5e2dc; /* Ombres */ --hx-shadow-card: 0 4px 16px rgba(0,0,0,0.06); --hx-shadow-card-strong: 0 12px 32px rgba(0,0,0,0.10); --hx-shadow-strong: 0 20px 60px rgba(0,0,0,0.18); /* Polices */ --font-display: 'Bricolage Grotesque', -apple-system, sans-serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; /* Hauteurs de l'en-tête */ --header-height-top: 72px; --header-height-nav: 52px; } /* ============================================================ * §2 BASE — remise à zéro (reset Hello Elementor 3.5.1) * ============================================================ */ html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-end:.9rem;margin-block-start:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;color:#c36;text-decoration:none}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;width:auto}[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}@media(max-width:767px){table table{font-size:.8em}table table td,table table th{line-height:1.3;padding:7px}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}[tabindex]:not([tabindex="-1"]):focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 4px #fff;outline:2px solid #000;outline-offset:2px}[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){box-shadow:none;outline:none} /* ============================================================ * §3 EN-TÊTE ET NAVIGATION * ============================================================ */ /* ============================================================ * HARDWAREXCHANGE HEADER STYLES * Single-layer rewrite. No emergency override section. * * Strategy: * - All header-critical selectors are prefixed with #hxHeader (or * the relevant root ID) so they win the cascade against Hello * Elementor's global rules without needing !important everywhere. * - !important is used only for color-critical text inside light * dropdowns, where Hello Elementor's body anchor color and * --e-global-color-accent would otherwise leak through. * - Explicit hex values (no var()) on those high-stakes properties. * ============================================================ */ /* ============================================================ * HEADER ROOT * ============================================================ */ #hxHeader { position: sticky; top: 0; z-index: 1000; background: #1a1a1a; color: var(--hx-white); font-family: var(--font-body); } #hxHeader * { box-sizing: border-box; } /* ============================================================ * TOP BAR (logo, search, utility) * ============================================================ */ #hxHeader .hx-top { background: #1a1a1a; border-bottom: 1px solid #3a3a3a; } #hxHeader .hx-top__inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; height: var(--header-height-top); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } /* Logo */ #hxHeader .hx-logo, #hxHeader .hx-logo:hover, #hxHeader .hx-logo:focus, #hxHeader .hx-logo:visited { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--hx-white) !important; text-decoration: none !important; display: flex; align-items: center; gap: 2px; white-space: nowrap; } #hxHeader .hx-logo span { color: #E84A1C !important; } #hxHeader .hx-logo sup { font-size: 10px; opacity: 0.7; margin-left: 2px; color: #ffffff !important; } /* Utility row */ #hxHeader .hx-utility { display: flex; align-items: center; gap: 8px; } #hxHeader .hx-util-link, #hxHeader .hx-util-link:hover, #hxHeader .hx-util-link:focus, #hxHeader .hx-util-link:visited { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 14px; text-decoration: none !important; color: #ffffff !important; font-size: 11px; line-height: 1.2; gap: 4px; border-radius: 8px; transition: background 0.15s; position: relative; min-width: 64px; cursor: pointer; background: transparent; border: none; } #hxHeader .hx-util-link:hover { background: #2a2a2a; } #hxHeader .hx-util-link svg { padding-top:12px; width: 22px; height: 38px; } #hxHeader .hx-util-link span { font-weight: 500; color: #ffffff !important; } /* ============================================================ * BURGER (mobile) * ============================================================ */ #hxHeader .hx-burger { display: none; background: transparent; border: none; color: #ffffff; padding: 10px; cursor: pointer; } /* ============================================================ * NAV BAR (categories) * ============================================================ */ #hxHeader .hx-nav { background: #1a1a1a; border-bottom: 1px solid #3a3a3a; position: relative; } #hxHeader .hx-nav__inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; height: var(--header-height-nav); display: flex; align-items: center; gap: 4px; } #hxHeader .hx-nav__item { position: relative; } #hxHeader .hx-nav__link, #hxHeader .hx-nav__link:hover, #hxHeader .hx-nav__link:focus, #hxHeader .hx-nav__link:visited { display: flex; align-items: center; gap: 6px; height: var(--header-height-nav); padding: 0 14px; color: #ffffff !important; text-decoration: none !important; font-size: 13.5px; font-weight: 500; font-family: var(--font-display); letter-spacing: 0.01em; cursor: pointer; background: transparent; border: none; transition: color 0.15s; position: relative; white-space: nowrap; } #hxHeader .hx-nav__link::after { content: ''; position: absolute; bottom: -1px; left: 14px; right: 14px; height: 2px; background: #E84A1C; transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } #hxHeader .hx-nav__item.is-open .hx-nav__link::after { transform: scaleX(1); } #hxHeader .hx-nav__chev { transition: transform 0.2s; opacity: 0.7; } #hxHeader .hx-nav__item.is-open .hx-nav__chev { transform: rotate(180deg); } /* Offres pro feature button */ #hxHeader .hx-nav__link--feature, #hxHeader .hx-nav__link--feature:hover, #hxHeader .hx-nav__link--feature:focus, #hxHeader .hx-nav__link--feature:visited { background: #E84A1C; color: #ffffff !important; margin: 8px 0 8px auto; border-radius: 6px; height: 36px; font-weight: 600; padding: 0 16px; } #hxHeader .hx-nav__link--feature::after { display: none; } #hxHeader .hx-nav__link--feature:hover { background: #c93d14; } #hxHeader .hx-nav__spacer { flex: 1; } /* ============================================================ * MEGA MENU (3-column dropdown) * ============================================================ */ #hxHeader .hx-mega { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #ffffff; color: #1a1a1a; box-shadow: var(--hx-shadow-strong); border-top: 1px solid #e5e2dc; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 999; } #hxHeader .hx-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); } #hxHeader .hx-mega__inner { max-width: 1440px; margin: 0 auto; padding: 32px; min-height: 480px; max-height: 75vh; } #hxHeader .hx-mega__panel { display: none; grid-template-columns: 300px 1fr 320px; gap: 32px; height: 100%; } #hxHeader .hx-mega__panel.is-active { display: grid; } /* Mega LEFT: L2 list */ #hxHeader .hx-mega__l2-col { border-right: 1px solid #e5e2dc; padding-right: 20px; overflow-y: auto; min-width: 0; } #hxHeader .hx-mega__l2-header { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6b6b6b; margin-bottom: 14px; padding: 0 14px; } #hxHeader .hx-mega__l2, #hxHeader .hx-mega__l2:visited { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; text-decoration: none !important; color: #1a1a1a !important; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; width: 100%; text-align: left; background: transparent; border: none; font-family: var(--font-body); line-height: 1.3; } #hxHeader .hx-mega__l2:hover, #hxHeader .hx-mega__l2.is-active { background: #FFF0EA; color: #E84A1C !important; } #hxHeader .hx-mega__l2-icon { width: 40px; height: 40px; border-radius: 8px; background: #F5F2EC; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } #hxHeader .hx-mega__l2-icon img { width: 100%; height: 100%; object-fit: cover; } #hxHeader .hx-mega__l2-icon.broken img { object-fit: contain; padding: 8px; opacity: 0.5; } #hxHeader .hx-mega__l2-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #hxHeader .hx-mega__l2-arrow { margin-left: auto; opacity: 0; transition: opacity 0.15s, transform 0.15s; flex-shrink: 0; } #hxHeader .hx-mega__l2:hover .hx-mega__l2-arrow, #hxHeader .hx-mega__l2.is-active .hx-mega__l2-arrow { opacity: 1; transform: translateX(2px); } /* Mega MIDDLE: dynamic content */ #hxHeader .hx-mega__content { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; min-width: 0; padding-right: 8px; } #hxHeader .hx-mega__content-header { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #e5e2dc; gap: 16px; } #hxHeader .hx-mega__content-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #1a1a1a !important; letter-spacing: -0.01em; line-height: 1.2; } #hxHeader .hx-mega__content-link, #hxHeader .hx-mega__content-link:hover, #hxHeader .hx-mega__content-link:visited { color: #E84A1C !important; text-decoration: none !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: gap 0.15s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; } #hxHeader .hx-mega__content-link:hover { gap: 10px; } /* L3 cards */ #hxHeader .hx-mega__l3-section { display: flex; flex-direction: column; gap: 8px; } #hxHeader .hx-mega__section-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6b6b; margin-bottom: 4px; } #hxHeader .hx-mega__l3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } #hxHeader .hx-mega__l3, #hxHeader .hx-mega__l3:visited { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none !important; color: #1a1a1a !important; border: 1px solid #e5e2dc; background: #ffffff; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } #hxHeader .hx-mega__l3:hover { border-color: #E84A1C; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); color: #1a1a1a !important; } #hxHeader .hx-mega__l3-img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: #F5F2EC; flex-shrink: 0; } #hxHeader .hx-mega__l3-img.broken { object-fit: contain; padding: 6px; opacity: 0.5; } #hxHeader .hx-mega__l3-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #hxHeader .hx-mega__l3-name { font-size: 13px; font-weight: 500; line-height: 1.3; } #hxHeader .hx-mega__l3-count { font-size: 11px; color: #6b6b6b; } /* Featured products in middle column */ #hxHeader .hx-mega__products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } #hxHeader .hx-mega__product, #hxHeader .hx-mega__product:hover, #hxHeader .hx-mega__product:visited { display: flex; flex-direction: column; gap: 8px; text-decoration: none !important; color: #1a1a1a !important; transition: transform 0.2s; } #hxHeader .hx-mega__product:hover { transform: translateY(-3px); } #hxHeader .hx-mega__product-img-wrap { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #F5F2EC; border: 1px solid #e5e2dc; } #hxHeader .hx-mega__product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } #hxHeader .hx-mega__product:hover .hx-mega__product-img { transform: scale(1.05); } #hxHeader .hx-mega__product-img.broken { object-fit: contain; padding: 16px; opacity: 0.5; } #hxHeader .hx-mega__product-name { font-size: 12px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 4px; } /* Mega RIGHT: feature image */ #hxHeader .hx-mega__feature { display: flex; flex-direction: column; gap: 16px; min-width: 0; } #hxHeader .hx-mega__feature-img, #hxHeader .hx-mega__feature-img:hover, #hxHeader .hx-mega__feature-img:visited { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: #F5F2EC; display: block; text-decoration: none !important; color: #ffffff !important; } #hxHeader .hx-mega__feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } #hxHeader .hx-mega__feature-img img.broken { object-fit: contain; padding: 60px; opacity: 0.4; } #hxHeader .hx-mega__feature-img:hover img { transform: scale(1.05); } #hxHeader .hx-mega__feature-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #ffffff; pointer-events: none; } #hxHeader .hx-mega__feature-tag { display: inline-block; width: fit-content; padding: 4px 10px; background: #E84A1C; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 4px; margin-bottom: 8px; color: #ffffff; } #hxHeader .hx-mega__feature-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; color: #ffffff; } /* ============================================================ * INFO BAR (orange strip below nav) * ============================================================ */ #hxHeader .hx-info-bar { background: #E84A1C; color: #ffffff; padding: 10px 32px; text-align: center; font-size: 13px; line-height: 1.5; } #hxHeader .hx-info-bar, #hxHeader .hx-info-bar * { color: #ffffff !important; } #hxHeader .hx-info-bar a, #hxHeader .hx-info-bar a:hover, #hxHeader .hx-info-bar a:visited { color: #ffffff !important; text-decoration: underline !important; font-weight: 500; } /* ============================================================ * MOBILE OFF-CANVAS NAV (lives outside #hxHeader) * ============================================================ */ #hxMobileNav { position: fixed; inset: 0; background: #ffffff; color: #1a1a1a; z-index: 1100; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; font-family: var(--font-body); } #hxMobileNav.is-open { transform: translateX(0); } #hxMobileNav .hx-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e2dc; flex-shrink: 0; color: #1a1a1a; } #hxMobileNav .hx-mobile-nav__close { background: transparent; border: none; padding: 8px; cursor: pointer; color: #1a1a1a; } #hxMobileNav .hx-mobile-nav__body { flex: 1; overflow-y: auto; padding: 8px 0; } #hxMobileNav .hx-mobile-nav__item { border-bottom: 1px solid #e5e2dc; } #hxMobileNav .hx-mobile-nav__trigger, #hxMobileNav .hx-mobile-nav__trigger:hover, #hxMobileNav .hx-mobile-nav__trigger:visited { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: transparent; border: none; cursor: pointer; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; text-align: left; gap: 12px; } #hxMobileNav .hx-mobile-nav__trigger svg { transition: transform 0.2s; flex-shrink: 0; } #hxMobileNav .hx-mobile-nav__item.is-open .hx-mobile-nav__trigger svg.chev { transform: rotate(180deg); } #hxMobileNav .hx-mobile-nav__trigger-img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background: #F5F2EC; flex-shrink: 0; } #hxMobileNav .hx-mobile-nav__trigger-img.broken { object-fit: contain; padding: 6px; opacity: 0.5; } #hxMobileNav .hx-mobile-nav__panel { display: none; padding: 0 20px 16px 20px; background: #F5F2EC; } #hxMobileNav .hx-mobile-nav__item.is-open .hx-mobile-nav__panel { display: block; } #hxMobileNav .hx-mobile-nav__panel a, #hxMobileNav .hx-mobile-nav__panel a:visited { display: block; padding: 10px 0; color: #6b6b6b !important; text-decoration: none !important; font-size: 14px; } #hxMobileNav .hx-mobile-nav__panel a:hover { color: #E84A1C !important; } #hxMobileNav .hx-mobile-nav__sub-title { font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; color: #1a1a1a; margin-top: 16px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid #e5e2dc; } #hxMobileNav .hx-mobile-nav__sub-title:first-child { margin-top: 0; } #hxMobileNav .hx-mobile-nav__footer { padding: 20px; border-top: 1px solid #e5e2dc; display: flex; flex-direction: column; gap: 10px; background: #F5F2EC; } #hxMobileNav .hx-mobile-nav__footer a, #hxMobileNav .hx-mobile-nav__footer a:visited { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #ffffff; border-radius: 8px; color: #1a1a1a !important; text-decoration: none !important; font-weight: 500; font-size: 14px; } #hxMobileNav .hx-mobile-langs { display: flex; gap: 8px; flex-wrap: wrap; } #hxMobileNav .hx-mobile-langs a, #hxMobileNav .hx-mobile-langs a:visited { padding: 8px 14px; background: #ffffff; border-radius: 8px; text-decoration: none !important; color: #1a1a1a !important; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #e5e2dc; } #hxMobileNav .hx-mobile-langs a.is-active { border-color: #E84A1C; color: #E84A1C !important; } #hxBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } #hxBackdrop.is-open { opacity: 1; visibility: visible; } /* ============================================================ * UTILITIES * ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #hxHeader ::-webkit-scrollbar { width: 6px; } #hxHeader ::-webkit-scrollbar-track { background: transparent; } #hxHeader ::-webkit-scrollbar-thumb { background: #e5e2dc; border-radius: 3px; } /* ============================================================ * RESPONSIVE * ============================================================ */ @media (max-width: 1200px) { #hxHeader .hx-mega__panel.is-active { grid-template-columns: 280px 1fr; } #hxHeader .hx-mega__feature { display: none; } } @media (max-width: 1024px) { #hxHeader .hx-top__inner { padding: 0 20px; gap: 16px; } #hxHeader .hx-nav { display: none; } #hxHeader .hx-burger { display: flex; align-items: center; justify-content: center; } #hxHeader .hx-util-link span { display: none; } #hxHeader .hx-util-link svg { width: 24px; height: 24px; } #hxHeader .hx-util-link { min-width: auto; padding: 10px; } } @media (max-width: 640px) { :root { --header-height-top: 60px; } #hxHeader .hx-top__inner { padding: 0 14px; gap: 10px; } #hxHeader .hx-logo { font-size: 18px; } #hxHeader .hx-info-bar { padding: 8px 14px; font-size: 11px; } #hxHeader .hx-utility { gap: 0; } } /* ============================================================ * §4 WOOCOMMERCE — panier, validation de commande, mon compte * ============================================================ */ /* ============================================================ * HARDWAREXCHANGE WOOCOMMERCE STYLES * * Covers cart, checkout, my-account pages, and generic * WooCommerce elements that ship without theme styling under * Hello Elementor. * * Scope strategy: * - All selectors are prefixed with a .woocommerce-* page class * so this CSS only applies on actual WC pages. * - Color/typography is pulled from header.css so the brand * stays consistent. * ============================================================ */ /* ============================================================ * SHARED — page wrapper * ============================================================ */ .woocommerce-cart, .woocommerce-checkout, .woocommerce-account { background: var(--hx-bg); } .woocommerce-cart .entry-content, .woocommerce-checkout .entry-content, .woocommerce-account .entry-content, .woocommerce-cart .page-content, .woocommerce-checkout .page-content, .woocommerce-account .page-content { max-width: 1200px; margin: 0 auto; padding: 40px 32px 80px; font-family: var(--font-body); color: var(--hx-text); } .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-account .entry-title, .woocommerce-cart .page-title, .woocommerce-checkout .page-title, .woocommerce-account .page-title { font-family: var(--font-display); font-weight: 600; font-size: 36px; letter-spacing: -0.02em; color: var(--hx-text); margin-bottom: 32px; } /* ============================================================ * SHARED — WooCommerce notices (success / info / error) * ============================================================ */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { background: var(--hx-white) !important; border-left: 4px solid var(--hx-orange) !important; color: var(--hx-text) !important; padding: 16px 20px !important; margin-bottom: 24px !important; border-radius: 8px !important; font-family: var(--font-body) !important; font-size: 14px !important; list-style: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--hx-orange) !important; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--hx-orange) !important; font-weight: 600; text-decoration: underline; } /* ============================================================ * SHARED — buttons * Brute-force override of Hello Elementor's default button look * for all WC buttons. * ============================================================ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-cart a.button, .woocommerce-cart button.button, .woocommerce-checkout a.button, .woocommerce-checkout button.button, .woocommerce-account a.button, .woocommerce-account button.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--hx-orange) !important; color: var(--hx-white) !important; border: 1px solid var(--hx-orange) !important; border-radius: 10px !important; padding: 12px 22px !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s !important; line-height: 1.3 !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--hx-orange-dark) !important; border-color: var(--hx-orange-dark) !important; color: var(--hx-white) !important; } .woocommerce a.button.wc-backward, .woocommerce-cart .return-to-shop a.button { background: var(--hx-white) !important; color: var(--hx-text) !important; border: 1px solid var(--hx-text) !important; } .woocommerce a.button.wc-backward:hover, .woocommerce-cart .return-to-shop a.button:hover { background: var(--hx-text) !important; color: var(--hx-white) !important; } /* Disabled state */ .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button[disabled] { background: var(--hx-border) !important; border-color: var(--hx-border) !important; color: var(--hx-text-muted) !important; cursor: not-allowed !important; } /* ============================================================ * SHARED — form inputs * ============================================================ */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea, .woocommerce-page form .form-row select, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce select, .woocommerce textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--hx-border); border-radius: 8px; background: var(--hx-white); font-size: 14px; color: var(--hx-text); line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: none; } .woocommerce input:focus, .woocommerce select:focus, .woocommerce textarea:focus { border-color: var(--hx-orange); outline: none; box-shadow: 0 0 0 3px rgba(232,74,28,0.15); } .woocommerce form .form-row label, .woocommerce-page form .form-row label { display: block; font-size: 13px; font-weight: 500; color: var(--hx-text); margin-bottom: 6px; } .woocommerce form .form-row .required { color: var(--hx-orange) !important; text-decoration: none; } .show-password-input { background-color: transparent; border-radius: 0; border: 0; color: var(--wc-form-color-text, #000); cursor: pointer; font-size: inherit; line-height: inherit; margin: 0; padding: 0; position: absolute; right: 0.7em; text-decoration: none; top: 50%; transform: translateY( -50% ); -moz-osx-font-smoothing: inherit; -webkit-appearance: none; -webkit-font-smoothing: inherit; position:relative; } .show-password-input::before { background-repeat: no-repeat; background-size: cover; background-image: url('data:image/svg+xml,'); content: ''; display: block; height: 22px; width: 22px; position:absolute; bottom:0; right:0; } /* ============================================================ * CART PAGE * ============================================================ */ .woocommerce-cart table.cart, .woocommerce-cart .shop_table { background: var(--hx-white) !important; border: 1px solid var(--hx-border) !important; border-radius: 14px !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden; width: 100%; margin-bottom: 24px; font-family: var(--font-body); } .woocommerce-cart table.cart th, .woocommerce-cart .shop_table th { background: #000; color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 16px; border-bottom: 1px solid var(--hx-border); text-align: center; vertical-align: middle; } .woocommerce-cart table.cart td, .woocommerce-cart .shop_table td { padding: 16px; border:0; border-top: 1px solid var(--hx-border); vertical-align: middle; background: var(--hx-white); } .woocommerce-cart table.cart tr:first-child td { border-top: none !important; } .woocommerce-cart table.cart .product-thumbnail img { width: 120px; height: 120px; border-radius: 8px; border: 1px solid var(--hx-border); object-fit: contain; } .woocommerce-cart table.cart .product-name a, .woocommerce-cart table.cart .product-name a:hover { color: var(--hx-text) !important; font-weight: 500; text-decoration: none !important; } .woocommerce-cart table.cart .product-name a:hover { color: var(--hx-orange) !important; } .woocommerce-cart table.cart .product-price, .woocommerce-cart table.cart .product-subtotal { font-weight: 600; font-family: var(--font-display); } /* Remove (x) button */ .woocommerce-cart table.cart .product-remove a.remove, .woocommerce-cart table.cart a.remove { color: var(--hx-text-muted) !important; background: transparent !important; font-size: 20px !important; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none !important; transition: color 0.15s, background 0.15s; } .woocommerce-cart table.cart a.remove:hover { color: var(--hx-white) !important; background: var(--hx-orange) !important; } /* Quantity input */ .woocommerce-cart .quantity .qty { width: 70px !important; text-align: center; border:1px solid var(--hx-orange); border-radius:0; } /* Coupon section */ .woocommerce-cart .coupon { display: flex; gap: 8px; align-items: center; } .woocommerce-cart .coupon label { display: none; } .woocommerce-cart .coupon input.input-text { width: 220px !important; } /* Cart totals (right column) */ .woocommerce-cart .cart-collaterals, .woocommerce-cart .cart_totals { font-family: var(--font-body); } .woocommerce-cart .cart_totals h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; color: var(--hx-text); } .woocommerce-cart .cart_totals .shop_table { background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; overflow: hidden; } .woocommerce-cart .cart_totals .shop_table th { background: transparent !important; font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--hx-text-muted) !important; } .woocommerce-cart .cart_totals .order-total .amount { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--hx-text); } .woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; font-size: 15px !important; padding: 16px 24px !important; } /* ============================================================ * CHECKOUT PAGE * ============================================================ */ .woocommerce-checkout #customer_details { background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; padding: 28px; margin-bottom: 24px; } .woocommerce-checkout #customer_details h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--hx-text); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hx-border); } .woocommerce-checkout #order_review_heading { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--hx-text); margin-top: 24px; margin-bottom: 16px; } .woocommerce-checkout #order_review { background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; padding: 28px; } .woocommerce-checkout #order_review table.shop_table { background: transparent !important; border: none !important; margin-bottom: 16px; } .woocommerce-checkout #order_review .order-total .amount { font-weight: 700; } .shop_table thead tr:first-child th{ background-color: var(--hx-orange); color: var(--hx-white); } .shop_table .order-total td{ font-size:22px; } /* Payment methods */ .woocommerce-checkout #payment { background: var(--hx-bg) !important; border: 1px solid var(--hx-border) !important; border-radius: 10px !important; margin-top: 16px !important; } .woocommerce-checkout #payment ul.payment_methods { padding: 16px !important; border-bottom: 1px solid var(--hx-border) !important; } .woocommerce-checkout #payment ul.payment_methods li { list-style: none; padding: 8px 0; } .woocommerce-checkout #payment .payment_box { background: var(--hx-white) !important; border-radius: 8px !important; padding: 14px 18px !important; font-size: 13px; color: var(--hx-text-muted); } .woocommerce-checkout #payment .payment_box::before { border-bottom-color: var(--hx-white) !important; } .woocommerce-checkout #payment div.form-row { padding: 16px !important; } .woocommerce-checkout #payment #place_order { width: 100%; font-size: 15px !important; padding: 16px 24px !important; } /* ============================================================ * MY ACCOUNT PAGE * ============================================================ */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 32px; } /* Account navigation (left sidebar) */ .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; padding: 12px; height: fit-content; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0 !important; padding: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none !important; color: var(--hx-text) !important; font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--hx-bg) !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a { background: var(--hx-orange-soft) !important; color: var(--hx-orange) !important; font-weight: 600; } /* Account content area (right) */ .woocommerce-account .woocommerce-MyAccount-content { background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; padding: 28px; } .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--hx-text); margin-bottom: 16px; } .woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 22px; } .woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 18px; } .woocommerce-account .woocommerce-MyAccount-content p { color: var(--hx-text); line-height: 1.6; margin-bottom: 12px; } .woocommerce-account .woocommerce-MyAccount-content a { color: var(--hx-orange); } /* Orders table inside my account */ .woocommerce-account table.my_account_orders, .woocommerce-account table.woocommerce-orders-table { background: transparent !important; border: 1px solid var(--hx-border) !important; border-radius: 10px !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden; font-family: var(--font-body); } .woocommerce-account table.my_account_orders th, .woocommerce-account table.woocommerce-orders-table th { background: var(--hx-bg) !important; font-family: var(--font-display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hx-text); padding: 12px 14px !important; text-align: left; } .woocommerce-account table.my_account_orders td, .woocommerce-account table.woocommerce-orders-table td { padding: 14px !important; border-top: 1px solid var(--hx-border) !important; background: var(--hx-white); } /* Login form on /mon-compte/ */ .woocommerce-account .u-columns, .woocommerce-account .u-column1.col-1, .woocommerce-account .u-column2.col-2 { background: transparent !important; } .woocommerce-account form.login, .woocommerce-account form.register { background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; padding: 28px; } .woocommerce-account form.login h2, .woocommerce-account form.register h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 18px; } /* "Lost your password" link */ .woocommerce-account .lost_password a { color: var(--hx-orange); font-size: 13px; text-decoration: underline; } /* When logged out, the login + register columns sit side by side */ .woocommerce-account.logged-out .woocommerce { display: block; } .woocommerce-account.logged-out .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* ============================================================ * EMPTY CART STATE * ============================================================ */ .woocommerce-cart .cart-empty { text-align: center; font-size: 16px; color: var(--hx-text-muted); padding: 60px 20px; background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; } .woocommerce-cart .return-to-shop { text-align: center; margin-top: 16px; } /* ============================================================ * RESPONSIVE * ============================================================ */ @media (max-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; } .woocommerce-account.logged-out .u-columns { grid-template-columns: 1fr; } } @media (max-width: 640px) { .woocommerce-cart .entry-content, .woocommerce-checkout .entry-content, .woocommerce-account .entry-content { padding: 24px 16px 60px; } .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-account .entry-title { font-size: 28px; } /* On mobile, WC cart tables become stacked cards via its own classes, but we still need to make the labels visible. */ .woocommerce-cart table.cart td::before { color: var(--hx-text-muted); font-weight: 500; } .woocommerce-cart .coupon { flex-direction: column; align-items: stretch; } .woocommerce-cart .coupon input.input-text { width: 100% !important; } } /* ============================================================ * GLOBAL ANCHOR COLOR OVERRIDE FOR WC + FOOTER LINKS * * Hello Elementor's --e-global-color-accent (pink/magenta) leaks * into anchors that aren't covered by the page-scoped selectors * above: WC checkout coupon toggle, Elementor-rendered address * edit links, and the site footer. * ============================================================ */ /* Checkout: "Avez-vous un code promo ? Cliquez ici..." toggle */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a, .woocommerce-checkout .showcoupon, .woocommerce-checkout .showcoupon:hover { color: var(--hx-orange) !important; } /* WC "lost password" + similar inline links anywhere on WC pages */ .woocommerce-cart a, .woocommerce-checkout a, .woocommerce-account a { color: var(--hx-orange); } .woocommerce-cart a:hover, .woocommerce-checkout a:hover, .woocommerce-account a:hover { color: var(--hx-orange-dark); } /* But product links inside the cart table should be dark, not orange */ .woocommerce-cart table.cart .product-name a { color: var(--hx-text) !important; } .woocommerce-cart table.cart .product-name a:hover { color: var(--hx-orange) !important; } /* And buttons must stay white-on-orange (override the above) */ .woocommerce-cart a.button, .woocommerce-checkout a.button, .woocommerce-account a.button, .woocommerce-cart .button, .woocommerce-checkout .button, .woocommerce-account .button { color: var(--hx-white) !important; } .woocommerce-cart a.button.wc-backward, .woocommerce-cart .return-to-shop a.button { color: var(--hx-text) !important; } .woocommerce-cart a.button.wc-backward:hover, .woocommerce-cart .return-to-shop a.button:hover { color: var(--hx-white) !important; } /* Cart "Modifier l'adresse" link (Elementor or WC shipping calculator) */ .woocommerce-cart .shipping-calculator-button, .woocommerce-cart .shipping-calculator-button:hover, .woocommerce-shipping-calculator a, .woocommerce-cart .wc-block-components-totals-shipping__change-address-button { color: var(--hx-orange) !important; text-decoration: underline !important; } /* Footer links across the whole site (was pink) */ footer a, footer a:hover, footer a:visited { color: var(--hx-orange) !important; text-decoration: none !important; } footer a:hover { text-decoration: underline !important; } /* ============================================================ * §5 PAGES ET COMPOSANTS * ============================================================ */ /* Add your custom styles here */ /**************************************************************************************/ /***************** STYLES GÉNÉRAUX ****************************************************/ /**************************************************************************************/ * { font-family: var(--font-body),sans-serif; color: var(--hx-text-soft); transition: 0.2s all; } body{ background: var(--hx-bg); } .reduit{ max-width: 1400px; margin: 0 auto; } .reduit_800{ max-width: 800px; background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .reduit.padding{ padding: 24px 0; } .reduit.margin{ margin:24px auto; } .woocommerce ul.products li.product a img { width: 100%; height: 100%; display: block; margin: 0 0 1em; box-shadow: none; object-fit: contain; aspect-ratio: 1; } #hxArchive .hxa-grid.is-list .hxa-card__img-wrap{ background-color: #fff; } #hxArchive .hxa-card__img { object-fit: contain; } .woocommerce-account .woocommerce{ display:flex; gap:60px; } .woocommerce-account .woocommerce::after, .woocommerce-account .woocommerce::before { content: inherit; display: initial; } .woocommerce-account .woocommerce-MyAccount-navigation{ width:300px; } .woocommerce-account .woocommerce-MyAccount-content{ width:100%; } .js-wpml-ls-legacy-dropdown-click { display: flex; align-items: center; gap: 6px; padding: 0; background: transparent; color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; width:auto; } .js-wpml-ls-legacy-dropdown-click ul, .js-wpml-ls-legacy-dropdown-click .wpml-ls-current-language > a{ border: 1px solid #3a3a3a; border-radius: 8px; } .js-wpml-ls-legacy-dropdown-click a{ color:#fff; background-color: transparent; border:0; width:120px; } .js-wpml-ls-legacy-dropdown-click a:hover{ color:#333; background-color: #fff; } .js-wpml-ls-legacy-dropdown-click a:hover .wpml-ls-flag + span, .js-wpml-ls-legacy-dropdown-click .wpml-ls-flag + span{ color:inherit; } .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a{ padding:8px; } .wpml-ls-sub-menu{ margin-top: 12px!important; overflow: hidden; } .wpml-ls-sub-menu a{ color:#666; } .wpml-ls-sub-menu a:hover{ background-color:rgba(0,0,0,0.2); } .wpml-ls-current-language > a span{ font-size: 0; } .wpml-ls-current-language > a span::after{ font-size:14px; vertical-align: middle; margin-left: 8px; } .wpml-ls-item-fr.wpml-ls-current-language > a span::after{ content:"FR"; } .wpml-ls-item-it.wpml-ls-current-language > a span::after{ content:"IT"; } .wpml-ls-item-pt-pt.wpml-ls-current-language > a span::after{ content:"PT"; } .wpml-ls-item-es.wpml-ls-current-language > a span::after{ content:"ES"; } .flex{ display:flex; } .cols{ flex-wrap: wrap; gap:30px; } .col3 .col{ width:calc((100% - 60px) / 3); } .col4 .col{ width:calc((100% - 90px) / 4); } /* ============================================================ * HARDWAREXCHANGE PRODUCT ARCHIVE STYLES * * All selectors prefixed with #hxArchive (or mobile counterparts) * to win cascade against Hello Elementor's globals. * Same design system as header.css and footer. * ============================================================ */ #hxArchive { color: var(--hx-text); background: var(--hx-bg); } #hxArchive * { box-sizing: border-box; } /* ============================================================ * HERO (category title + count) * ============================================================ */ #hxArchive .hxa-hero { background: var(--hx-white); border-bottom: 1px solid var(--hx-border); } #hxArchive .hxa-hero__inner { max-width: 1440px; margin: 0 auto; padding: 32px 32px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } #hxArchive .hxa-hero__text { flex: 1; min-width: 280px; } #hxArchive .hxa-hero__eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hx-orange); margin-bottom: 8px; } #hxArchive .hxa-hero__title { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; color: var(--hx-text); } #hxArchive .hxa-hero__desc { color: var(--hx-text-muted); font-size: 15px; max-width: 640px; line-height: 1.5; margin: 0; } #hxArchive .hxa-hero__count { font-size: 16px; color: var(--hx-text); font-weight: 500; white-space: nowrap; padding-bottom: 6px; } #hxArchive .hxa-hero__count strong { font-size: 22px; color: var(--hx-orange); font-weight: 700; } /* ============================================================ * MAIN LAYOUT * ============================================================ */ #hxArchive .hxa-main { max-width: 1440px; margin: 0 auto; padding: 28px 32px 60px; display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } /* ============================================================ * SIDEBAR * ============================================================ */ #hxArchive .hxa-sidebar { background: var(--hx-white); border-radius: 14px; overflow: hidden; box-shadow: var(--hx-shadow-card); position: sticky; top: 200px; max-height: calc(100vh - 220px); overflow-y: auto; } #hxArchive .hxa-sidebar__head { padding: 16px 20px; border-bottom: 1px solid var(--hx-border); display: flex; align-items: center; justify-content: space-between; } #hxArchive .hxa-sidebar__title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hx-text); } #hxArchive .hxa-sidebar__reset { background: transparent; border: none; color: var(--hx-orange); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; } #hxArchive .hxa-sidebar__reset:hover { background: var(--hx-orange-soft); } #hxArchive .hxa-sidebar__reset:disabled { color: var(--hx-text-muted); cursor: not-allowed; opacity: 0.5; } #hxArchive .hxa-filter { border-bottom: 1px solid var(--hx-border); } #hxArchive .hxa-filter:last-of-type { border-bottom: none; } #hxArchive .hxa-filter__head { width: 100%; padding: 14px 20px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--hx-text); text-align: left; } #hxArchive .hxa-filter__head svg { transition: transform 0.2s; flex-shrink: 0; } #hxArchive .hxa-filter.is-open .hxa-filter__head svg { transform: rotate(180deg); } #hxArchive .hxa-filter__body { display: none; padding: 0 20px 14px; } #hxArchive .hxa-filter.is-open .hxa-filter__body { display: block; } /* Checkbox option */ #hxArchive .hxa-opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--hx-text); transition: color 0.15s; } #hxArchive .hxa-opt:hover { color: var(--hx-orange); } #hxArchive .hxa-opt input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--hx-orange); cursor: pointer; margin: 0; flex-shrink: 0; } #hxArchive .hxa-opt__label { flex: 1; min-width: 0; line-height: 1.3; } #hxArchive .hxa-opt__count { color: var(--hx-text-muted); font-size: 12px; flex-shrink: 0; } #hxArchive .hxa-opt__swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--hx-border); flex-shrink: 0; display: inline-block; } #hxArchive .hxa-opt--hidden { display: none; } #hxArchive .hxa-filter.show-all .hxa-opt--hidden { display: flex; } /* Show more */ #hxArchive .hxa-filter__more { background: transparent; border: none; color: var(--hx-orange); font-size: 12px; font-weight: 600; cursor: pointer; padding: 8px 0 0; } #hxArchive .hxa-filter__more:hover { text-decoration: underline; } /* Price range */ #hxArchive .hxa-range { padding-top: 6px; } #hxArchive .hxa-range__inputs { display: flex; gap: 8px; margin-bottom: 8px; } #hxArchive .hxa-range__input { flex: 1; width: 100%; padding: 8px 10px; border: 1px solid var(--hx-border); border-radius: 6px; font-size: 13px; color: var(--hx-text); background: var(--hx-bg); } #hxArchive .hxa-range__input:focus { outline: none; border-color: var(--hx-orange); background: var(--hx-white); } /* Hide spinner buttons on number inputs */ #hxArchive .hxa-range__input::-webkit-outer-spin-button, #hxArchive .hxa-range__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #hxArchive .hxa-range__input[type=number] { -moz-appearance: textfield; } #hxArchive .hxa-range__bounds { display: flex; justify-content: space-between; font-size: 11px; color: var(--hx-text-muted); } /* Toggle filter */ #hxArchive .hxa-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; cursor: pointer; color: var(--hx-text); } #hxArchive .hxa-toggle input { display: none; } #hxArchive .hxa-toggle__switch { width: 32px; height: 18px; background: var(--hx-border); border-radius: 9px; position: relative; transition: background 0.2s; flex-shrink: 0; } #hxArchive .hxa-toggle__switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--hx-white); border-radius: 50%; transition: transform 0.2s; } #hxArchive .hxa-toggle input:checked ~ .hxa-toggle__switch { background: var(--hx-orange); } #hxArchive .hxa-toggle input:checked ~ .hxa-toggle__switch::after { transform: translateX(14px); } /* Apply button (sticky footer of sidebar) */ #hxArchive .hxa-sidebar__apply-wrap { padding: 16px 20px; border-top: 1px solid var(--hx-border); background: var(--hx-white); position: sticky; bottom: 0; } #hxArchive .hxa-sidebar__apply { width: 100%; padding: 12px 18px; background: var(--hx-orange); color: var(--hx-white); border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; } #hxArchive .hxa-sidebar__apply:hover { background: var(--hx-orange-dark); } /* ============================================================ * CONTENT * ============================================================ */ #hxArchive .hxa-content { min-width: 0; } /* Active filter pills */ #hxArchive .hxa-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; } #hxArchive .hxa-pill, #hxArchive .hxa-pill:visited { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; background: var(--hx-white); border: 1px solid var(--hx-orange); color: var(--hx-orange) !important; border-radius: 100px; font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none !important; transition: background 0.15s, color 0.15s; } #hxArchive .hxa-pill:hover { background: var(--hx-orange); color: var(--hx-white) !important; } #hxArchive .hxa-pill__remove { display: inline-flex; align-items: center; justify-content: center; } /* Toolbar */ #hxArchive .hxa-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--hx-white); border-radius: 12px; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } #hxArchive .hxa-toolbar__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #hxArchive .hxa-toolbar__mobile-filter { display: none; background: var(--hx-text); color: var(--hx-white); border: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; align-items: center; gap: 8px; } #hxArchive .hxa-toolbar__sort { padding: 8px 14px; border: 1px solid var(--hx-border); border-radius: 8px; background: var(--hx-white); font-size: 13px; font-weight: 500; color: var(--hx-text); cursor: pointer; } #hxArchive .hxa-toolbar__sort:focus { outline: none; border-color: var(--hx-orange); } #hxArchive .hxa-view-toggle { display: inline-flex; background: var(--hx-bg); border-radius: 8px; padding: 3px; } #hxArchive .hxa-view-btn { background: transparent; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--hx-text-muted); display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; transition: all 0.15s; } #hxArchive .hxa-view-btn.is-active { background: var(--hx-white); color: var(--hx-text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* ============================================================ * PRODUCT GRID * ============================================================ */ #hxArchive .hxa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } #hxArchive .hxa-grid.is-list { grid-template-columns: 1fr; gap: 12px; } /* Card */ #hxArchive .hxa-card, #hxArchive .hxa-card:hover, #hxArchive .hxa-card:focus, #hxArchive .hxa-card:visited { background: var(--hx-white); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none !important; color: var(--hx-text) !important; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; border: 1px solid transparent; } #hxArchive .hxa-card:hover { transform: translateY(-4px); box-shadow: var(--hx-shadow-card-strong); border-color: var(--hx-border); } #hxArchive .hxa-card__img-wrap { aspect-ratio: 1 / 1; background: var(--hx-bg); position: relative; overflow: hidden; background-color: #fff; } #hxArchive .hxa-card__img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; display: block; } #hxArchive .hxa-card:hover .hxa-card__img { transform: scale(1.05); } #hxArchive .hxa-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 2; } #hxArchive .hxa-card__badge { display: inline-block; padding: 3px 8px; background: var(--hx-text); color: var(--hx-white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; } #hxArchive .hxa-card__badge--sale { background: var(--hx-orange); } #hxArchive .hxa-card__badge--france { background: #1a3a7a; } #hxArchive .hxa-card__badge--out { background: var(--hx-text-muted); } #hxArchive .hxa-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } #hxArchive .hxa-card__name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--hx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } #hxArchive .hxa-card__price-row { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: 8px; } #hxArchive .hxa-card__price { font-size: 18px; font-weight: 700; color: var(--hx-text); } /* WC price HTML output uses span.woocommerce-Price-amount and del/ins for sale */ #hxArchive .hxa-card__price .woocommerce-Price-amount, #hxArchive .hxa-card__price bdi { color: var(--hx-text); } #hxArchive .hxa-card__price del { color: var(--hx-text-muted); font-size: 13px; font-weight: 500; margin-right: 6px; } #hxArchive .hxa-card__price ins { text-decoration: none; background: transparent; color: var(--hx-orange); } #hxArchive .hxa-card__sku { font-size: 10px; color: var(--hx-text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .ship_from{ margin:12px 0 24px; font-size:14px; color:#555; text-align: right; } /* Mini thumbnail (variation has its own image) */ #hxArchive .hxa-card__vthumb { width: 28px; height: 28px; padding: 1px; border: 1px solid var(--hx-border); border-radius: 6px; background: var(--hx-white, #ffffff); cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, transform 0.15s; position: relative; } #hxArchive .hxa-card__vthumb:hover { border-color: var(--hx-orange, #E84A1C); transform: scale(1.08); } #hxArchive .hxa-card__vthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; } #hxArchive .hxa-card__vthumb.is-out { opacity: 0.45; } #hxArchive .hxa-card__vthumb.is-out::after { content: ''; position: absolute; top: 50%; left: 12%; right: 12%; height: 1.5px; background: var(--hx-text-muted); transform: rotate(-45deg); pointer-events: none; } /* Color swatch dot */ #hxArchive .hxa-card__vswatch { width: 22px; height: 22px; padding: 2px; border: 1.5px solid var(--hx-border); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color 0.15s, transform 0.15s; position: relative; } #hxArchive .hxa-card__vswatch:hover { border-color: var(--hx-orange, #E84A1C); transform: scale(1.1); } #hxArchive .hxa-card__vswatch-dot { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); } #hxArchive .hxa-card__vswatch.is-out { opacity: 0.45; } #hxArchive .hxa-card__vswatch.is-out::after { content: ''; position: absolute; top: 50%; left: 8%; right: 8%; height: 1.5px; background: var(--hx-text-muted); transform: rotate(-45deg); pointer-events: none; } /* LIST mode */ #hxArchive .hxa-grid.is-list .hxa-card { flex-direction: row; align-items: stretch; } #hxArchive .hxa-grid.is-list .hxa-card__img-wrap { width: 180px; aspect-ratio: 1; flex-shrink: 0; } #hxArchive .hxa-grid.is-list .hxa-card__body { padding: 18px 24px; } #hxArchive .hxa-grid.is-list .hxa-card__name { font-size: 16px; -webkit-line-clamp: 2; } /* ============================================================ * PAGINATION * ============================================================ */ .wp-pagenavi { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; } .wp-pagenavi a, .wp-pagenavi span { min-width: 38px; height: 38px; padding: 0 8px; background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--hx-text); text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } .wp-pagenavi a:hover{ } /* ============================================================ * EMPTY STATE * ============================================================ */ #hxArchive .hxa-empty { text-align: center; padding: 80px 20px; background: var(--hx-white); border-radius: 14px; } #hxArchive .hxa-empty__icon { margin-bottom: 16px; } #hxArchive .hxa-empty__title { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: var(--hx-text); } #hxArchive .hxa-empty__text { color: var(--hx-text-muted); margin-bottom: 20px; font-size: 14px; } #hxArchive .hxa-empty__btn, #hxArchive .hxa-empty__btn:visited { display: inline-block; background: var(--hx-orange); color: var(--hx-white) !important; border: none; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none !important; transition: background 0.15s; } #hxArchive .hxa-empty__btn:hover { background: var(--hx-orange-dark); } /* ============================================================ * MOBILE BACKDROP * ============================================================ */ #hxArchive .hxa-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } #hxArchive .hxa-backdrop.is-open { opacity: 1; visibility: visible; } /* ============================================================ * RESPONSIVE * ============================================================ */ @media (max-width: 1024px) { #hxArchive .hxa-main { grid-template-columns: 1fr; padding: 20px 20px 60px; } #hxArchive .hxa-hero__inner { padding: 24px 20px 20px; } #hxArchive .hxa-toolbar__mobile-filter { display: inline-flex; } #hxArchive .hxa-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 85vw; max-height: 100vh; z-index: 1100; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0; box-shadow: var(--hx-shadow-card-strong); } #hxArchive .hxa-sidebar.is-open { transform: translateX(0); } } @media (max-width: 640px) { #hxArchive .hxa-hero__title { font-size: 28px; } #hxArchive .hxa-hero__count { font-size: 14px; } #hxArchive .hxa-hero__count strong { font-size: 18px; } #hxArchive .hxa-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } #hxArchive .hxa-grid.is-list .hxa-card__img-wrap { width: 100px; } #hxArchive .hxa-grid.is-list .hxa-card__body { padding: 12px 14px; } #hxArchive .hxa-card__name { font-size: 13px; min-height: 2.4em; } #hxArchive .hxa-card__price { font-size: 16px; } #hxArchive .hxa-main { padding: 16px 14px 40px; } #hxArchive .hxa-toolbar { padding: 10px 12px; } } /**************************************************************************************/ /****************************** SINGLE PRODUCT ****************************************/ /**************************************************************************************/ #main{ background-color: var(--hx-bg); } #main > .product { /*background-color: #F5F2EC;*/ display:flex; gap:40px; flex-wrap: wrap; } .product .woocommerce-product-gallery { width:calc(30% - 40px)!important; position:sticky; top:200px; height: fit-content; } .product .woocommerce-product-gallery ol{ list-style: none; padding: 0; display: flex; gap: 8px; } .product .woocommerce-product-gallery ol img{ border-radius: 14px; aspect-ratio: 1 / 1; display: block; object-fit: contain; } .product .summary{ width:calc(70% - 300px - 80px); } .product.outofstock .summary{ width:calc(70% - 40px); } .product form.cart { height: fit-content; width:300px; background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 14px; padding: 20px; box-shadow: var(--hx-shadow-card); box-sizing: border-box; position:sticky; top:200px; } .product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{ display:flex; flex-wrap: wrap; gap:8px; aspect-ratio: inherit; } .product .woocommerce-product-gallery .woocommerce-product-gallery__image{ position: relative; background: var(--hx-white); border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--hx-border); box-shadow: var(--hx-shadow-card); } .product .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child{ width:100%; margin-bottom: 12px; } .product .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child img{ position: relative; background: var(--hx-white); border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--hx-border); width:100%; object-fit: contain; } .product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) img{ width:60px; aspect-ratio: 1 / 1; } h1.product_title{ font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--hx-text-soft); margin: 0 0 12px; } .hxsp-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 32px; } .hxsp-info-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 12px; } .hxsp-info-card__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--hx-orange); } .hxsp-info-card__text { font-size: 12px; line-height: 1.4; } .hxsp-info-card__title { font-weight: 600; font-size: 13px; margin-bottom: 2px; } #main .product .woocommerce-variation-price, #main .product .price{ font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin:8px auto; } button.single_add_to_cart_button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--hx-orange); background: var(--hx-orange); color: var(--hx-white); padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; width:100%; margin:8px 0; } button.single_add_to_cart_button:hover{ background: transparent; color: var(--hx-orange); } .stock{ display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; color: var(--hx-text-soft); } :not(p).in-stock{ background: var(--hx-green-soft); } .notin-stock{ background: var(--hx-orange-soft); } .stock-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .in-stock .stock-dot{ background: var(--hx-green); } .notin-stock .stock-dot{ background: var(--hx-orange); } .variations .label{ font-size:14px; font-weight: 600; margin-bottom:4px; } .variations select{ font-size: 14px; padding: 6px 12px; border-radius: 14px; background-color:var(--hx-orange-soft); } .variations .value{ margin-bottom:12px; } .wc-tab{ display:none; } .wc-tab:first-of-type{ display:block; } .wc-tabs{ display:flex; list-style: none; padding:0; } .wc-tabs li{ } .wc-tabs a{ padding: 12px 18px; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: 24px; display:block; } .wc-tabs .active a{ border-bottom: 2px solid var(--hx-orange); } .quantity{ display:flex; justify-content: center; margin: 12px 0; } .quantity .tpsc-quantity-button { border-radius: 3px; display: inline-block; padding: .5rem 1rem; text-align: center; border: 1px solid var(--hx-orange); font-size: 18px; font-weight: 600; color: var(--hx-orange); cursor: pointer; transition: background 0.15s; } .quantity .tpsc-quantity-minus{ border-radius: 30px 0 0 30px; border-right:0; } .quantity .tpsc-quantity-plus { border-radius: 0 30px 30px 0; border-left:0; } .quantity .tpsc-quantity-button:hover, .quantity .tpsc-quantity-button:focus{ background: var(--hx-orange); color:#fff; } .quantity input[name='quantity']{ width:80px; border: 1px solid var(--hx-orange); border-radius:0; text-align: center; } .product .summary .price{ display:none; } .product_meta{ font-size: 12px; margin: 12px 0 24px; } .product_meta .posted_in{ display:none; } .woocommerce-Tabs-panel{ font-size: 14px; } .woocommerce-Tabs-panel h2{ font-size: 14px; font-weight: 600; } .related.products{ width:100%; background-color:var(--hx-white); z-index: 100; } .related.products ul.products{ list-style: none; padding:0; display:flex; gap:24px; } .related.products ul.products li{ display:block; border-radius:12px; border: 1px solid #dedede; padding:12px; width:calc((100% - 96px) / 5); position:relative; } .related.products ul.products li:hover{ border: 1px solid var(--hx-orange); box-shadow: 0 6px 16px rgba(0,0,0,0.06); } .related.products ul.products h2{ font-size: 14px; color:var(--hx-text-soft); line-height: 1.4em; } .related.products ul.products img{ max-height: 120px; } .related.products .price{ font-weight: 600; } .buttons{ display:flex; justify-content: center; gap:12px; } .button{ text-align: center; display:flex; margin-top:12px; justify-content: center; align-content: center; } .button.fullwidth{ width:100%; } .button a{ border-radius: 10px; border:1px solid var(--hx-orange); display:block; font-size: 14px; padding:12px 22px; box-sizing: border-box; width: 100%; color:var(--hx-orange); } .button a:hover{ border:1px solid var(--hx-orange); background-color: transparent; color: var(--hx-orange); } .related.products .button_wrap{ position:absolute; bottom:12px; left:0; width:100%; text-align: center; } .related.products a.button{ border-radius: 10px; border:1px solid var(--hx-orange); background-color: var(--hx-orange); color:#fff; font-size: 14px; padding:8px 16px; box-sizing: border-box; display:inline-block; } .related.products a.button:hover{ border:1px solid var(--hx-orange); background-color: transparent; color: var(--hx-orange); } .button a svg{ vertical-align: middle; font-size: 18px; margin-right:8px; } .mini-cart-wrapper{ position:relative; } .mini-cart-wrapper .mini-cart-picto{ width:36px; position:relative; } .mini-cart-wrapper .cart-img{ padding:12px 12px 0 0; display:block; } .mini-cart-wrapper .cart-img svg{ width:24px; } .mini-cart-wrapper .cart-count-badge{ position:absolute; top:0; right:0; background-color: var(--hx-orange); color:#fff; font-size:11px; border-radius: 8px; display:block; padding: 1px 5px; font-weight: 500; } .mini-cart-wrapper .cart-label{ display:block; text-align: center; font-size:11px; font-weight: 500; color:#fff; } .mini-cart-wrapper .widget_shopping_cart_content{ display:none; } .mini-cart-wrapper:hover .widget_shopping_cart_content{ display:block; position:absolute; width:400px; top: 100%; left:50%; transform:translateX(-50%); } .auchoix{ font-weight:300; margin-top:4px; } .you-pro{ margin-top: 24px; font-size: 14px; font-weight: 600; } /* --- Conteneur principal du menu déroulant --- */ .widget_shopping_cart_content { background: #ffffff; z-index: 9999; border-radius: 8px; padding: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; } /* --- Liste des produits --- */ .widget_shopping_cart_content ul.cart_list { list-style: none; padding: 0; margin: 0; max-height: 260px; /* Limite la hauteur si beaucoup de produits */ overflow-y: auto; /* Active la barre de défilement */ } /* Personnalisation de la barre de défilement (Scrollbar) */ .widget_shopping_cart_content ul.cart_list::-webkit-scrollbar { width: 5px; } .widget_shopping_cart_content ul.cart_list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; } /* --- Élément produit individuel --- */ .widget_shopping_cart_content ul.cart_list li { padding: 12px 0; border-bottom: 1px solid #f5f5f5; position: relative; display: flex; flex-wrap: wrap; align-items: center; } .widget_shopping_cart_content ul.cart_list li:first-child { padding-top: 0; } .widget_shopping_cart_content ul.cart_list li img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; margin-right: 12px; float: none; /* Annule le comportement natif de WC */ } .widget_shopping_cart_content ul.cart_list li a { font-weight: 400; color: #333333; text-decoration: none; line-height: 1.4; margin-bottom: 4px; width: calc(100% - 95px); /* Évite le chevauchement avec le bouton supprimer */ font-size:13px; } .widget_shopping_cart_content ul.cart_list li a:hover { color: #0073aa; /* Couleur au survol */ } /* Quantité et Prix (ex: 1 × 15,00 €) */ .widget_shopping_cart_content ul.cart_list li .quantity { font-size: 13px; color: #777777; display: block; } /* Bouton Supprimer (la croix) */ .widget_shopping_cart_content ul.cart_list li a.remove { position: absolute; right: 0; top: 12px; color: #ff4d4d !important; background: #fff5f5; width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; font-size: 16px; font-weight: normal; } .widget_shopping_cart_content ul.cart_list li a.remove:hover { background: #ff4d4d; color: #ffffff !important; } /* --- Section Sous-total --- */ .widget_shopping_cart_content .woocommerce-mini-cart__total { padding: 15px 0; margin: 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; font-size: 15px; color: #333; } .widget_shopping_cart_content .woocommerce-mini-cart__total strong { font-weight: 600; } .widget_shopping_cart_content .woocommerce-mini-cart__total .amount { font-weight: 700; color: #111111; } /* --- Section Boutons (Voir le panier / Commander) --- */ .widget_shopping_cart_content .woocommerce-mini-cart__buttons { padding-top: 15px; margin: 0; display: flex; gap: 10px; } .widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 10px 5px; border-radius: 4px; text-transform: uppercase; transition: all 0.2s ease; } /* Bouton "Voir le panier" */ .widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout) { background: #f5f5f5; color: #333; } .widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout):hover { background: #e8e8e8; } /* Bouton "Commander" */ .widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button.checkout { background: #111111; /* À adapter à votre charte graphique */ color: #ffffff; } .widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button.checkout:hover { background: #333333; } /* --- Message Panier Vide --- */ .widget_shopping_cart_content .woocommerce-mini-cart__empty-message { text-align: center; color: #888888; font-size: 14px; margin: 10px 0 0 0; } .woocommerce-mini-cart-item a{ font-size: 12px; } .woocommerce-mini-cart-item a:nth-child(2){ display:flex; } dl.variation{ font-size: 12px; width:100%; } dl.variation dt{ margin-right:12px; font-weight: 600; float:left; } dl.variation dd{ margin:0; } .woocommerce-mini-cart-item .quantity{ display: block; font-size: 14px; text-align: right; width: calc(100% - 25px); } /***********************************************************************/ /******************** Breadcrumbs **************************************/ /***********************************************************************/ .breadcrumb-conteneur{ background-color: #fff; padding:12px 0; border-bottom: 1px solid var(--hx-border); } .breadcrumb-conteneur nav{ font-size:13px; } .breadcrumb-conteneur nav *{ display: inline; margin: 4px; line-height: 1.8em; } .breadcrumb-conteneur a{ color:var(--hx-text-soft); } .breadcrumb-conteneur a:hover{ color:var(--hx-orange-dark); } .breadcrumb-conteneur nav .crumb-current, .breadcrumb_last{ font-weight: 500; } /***********************************************************************/ /******************** Fibosearch ***************************************/ /***********************************************************************/ .dgwt-wcas-open-pirx .dgwt-wcas-open .dgwt-wcas-suggestions-wrapp{ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; border-radius:0 0 14px 14px; } /* ============================================================ HARDWAREXCHANGE HOMEPAGE — scoped styles All selectors prefixed with .hpx-homepage to avoid conflicts ============================================================ */ .hpx-homepage { color: var(--hx-text); -webkit-font-smoothing: antialiased; } .hpx-homepage *, .hpx-homepage *::before, .hpx-homepage *::after { box-sizing: border-box; } .hpx-homepage img { max-width: 100%; display: block; } .hpx-homepage a { color: inherit; } /* ============== HERO ============== */ .hpx-homepage .hpx-hero { background: var(--hx-bg); padding: 60px 0 80px; position: relative; overflow: hidden; } .hpx-homepage .hpx-hero__inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; } .hpx-homepage .hpx-hero__text { display: flex; flex-direction: column; gap: 24px; } .hpx-homepage .hpx-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--hx-white); border: 1px solid var(--hx-border); border-radius: 100px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hx-orange); width: fit-content; } .hpx-homepage .hpx-hero__eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--hx-orange); border-radius: 50%; } .hpx-homepage .hpx-hero__title { font-size: clamp(36px, 5.5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--hx-text-soft); margin: 0; } .hpx-homepage .hpx-hero__title em { font-style: normal; color: var(--hx-orange); font-weight: 800; } .hpx-homepage .hpx-hero__desc { font-size: 17px; line-height: 1.6; color: var(--hx-text-muted); max-width: 480px; margin: 0; } .hpx-homepage .hpx-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .hpx-homepage .hpx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.15s; border: none; cursor: pointer; } .hpx-homepage .hpx-btn--primary { background: var(--hx-orange); color: var(--hx-white); } .hpx-homepage .hpx-btn--primary:hover { background: var(--hx-orange-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232,74,28,0.3); color: var(--hx-white); } .hpx-homepage .hpx-btn--ghost { background: var(--hx-white); color: var(--hx-text-soft); border: 1px solid var(--hx-border); } .hpx-homepage .hpx-btn--ghost:hover { border-color: var(--hx-text-soft); color: var(--hx-text-soft); } .hpx-homepage .hpx-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 28px; margin-top: 8px; border-top: 1px solid var(--hx-border); } .hpx-homepage .hpx-hero__stat { display: flex; flex-direction: column; gap: 2px; } .hpx-homepage .hpx-hero__stat-num { font-size: 28px; font-weight: 700; color: var(--hx-text-soft); letter-spacing: -0.02em; line-height: 1; } .hpx-homepage .hpx-hero__stat-label { font-size: 12px; color: var(--hx-text-muted); font-weight: 500; } .hpx-homepage .hpx-hero__visual { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--hx-text-soft); } .hpx-homepage .hpx-hero__visual img { width: 100%; height: 100%; object-fit: cover; } .hpx-homepage .hpx-hero__visual-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%); pointer-events: none; } .hpx-homepage .hpx-hero__badge { position: absolute; bottom: 24px; left: 24px; right: 24px; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 16px 18px; border-radius: 14px; display: flex; align-items: center; gap: 14px; } .hpx-homepage .hpx-hero__badge-icon { width: 44px; height: 44px; background: var(--hx-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .hpx-homepage .hpx-hero__badge-text { font-size: 13px; line-height: 1.4; } .hpx-homepage .hpx-hero__badge-text strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--hx-text-soft); } .hpx-homepage .hpx-hero__badge-text span { color: var(--hx-text-muted); } /* ============== SECTION SHELL ============== */ .hpx-homepage .hpx-section { padding: 80px 0; } .hpx-homepage .hpx-section__inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; } .hpx-homepage .hpx-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .hpx-homepage .hpx-section__title-block { max-width: 640px; } .hpx-homepage .hpx-section__eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hx-orange); margin-bottom: 10px; } .hpx-homepage .hpx-section__title { font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; color: var(--hx-text-soft); } .hpx-homepage .hpx-section__desc { color: var(--hx-text-muted); font-size: 15px; line-height: 1.5; margin: 0; } .hpx-homepage .hpx-section__link { color: var(--hx-orange); text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.15s; } .hpx-homepage .hpx-section__link:hover { gap: 10px; color: var(--hx-orange); } /* ============== CATEGORIES ============== */ .hpx-homepage .hpx-cats { background: var(--hx-white); } .hpx-homepage .hpx-cats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .hpx-homepage .hpx-cat { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--hx-white); background: var(--hx-bg); display: block; transition: transform 0.3s; } .hpx-homepage .hpx-cat:hover { transform: translateY(-4px); color: var(--hx-white); } .hpx-homepage .hpx-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .hpx-homepage .hpx-cat:hover .hpx-cat__img { transform: scale(1.06); } .hpx-homepage .hpx-cat__img.broken { object-fit: contain; padding: 30%; opacity: 0.4; } .hpx-homepage .hpx-cat__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 70%); } .hpx-homepage .hpx-cat__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px; display: flex; flex-direction: column; gap: 4px; z-index: 1; } .hpx-homepage .hpx-cat__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color:#fff;} .hpx-homepage .hpx-cat__count { font-size: 12px; opacity: 0.85; color:#fff; } .hpx-homepage .hpx-cat__arrow { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--hx-text-soft); opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s; z-index: 1; } .hpx-homepage .hpx-cat:hover .hpx-cat__arrow { opacity: 1; transform: translateY(0); } .hpx-homepage .hpx-cats__grid .hpx-cat:first-child { grid-column: span 2; grid-row: span 2; } /* ============== FEATURED ============== */ .hpx-homepage .hpx-featured { background: var(--hx-bg); } .hpx-homepage .hpx-featured__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .hpx-homepage .hpx-product { background: var(--hx-white); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--hx-text-soft); transition: transform 0.2s, box-shadow 0.2s; border: 1px solid transparent; } .hpx-homepage .hpx-product:hover { transform: translateY(-4px); box-shadow: var(--hx-shadow-card-strong); border-color: var(--hx-border); color: var(--hx-text-soft); } .hpx-homepage .hpx-product__img-wrap { aspect-ratio: 1; background: var(--hx-bg); position: relative; overflow: hidden; } .hpx-homepage .hpx-product__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .hpx-homepage .hpx-product:hover .hpx-product__img { transform: scale(1.05); } .hpx-homepage .hpx-product__img.broken { object-fit: contain; padding: 30%; opacity: 0.4; } .hpx-homepage .hpx-product__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .hpx-homepage .hpx-product__brand { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hx-text-muted); } .hpx-homepage .hpx-product__name { font-size: 14px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .hpx-homepage .hpx-product__price { margin-top: auto; padding-top: 8px; font-size: 18px; font-weight: 700; color: var(--hx-text-soft); } /* ============== TESTIMONIALS ============== */ .hpx-homepage .hpx-testi { background: var(--hx-white); } .hpx-homepage .hpx-testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hpx-homepage .hpx-testi__card { background: var(--hx-bg); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; position: relative; } .hpx-homepage .hpx-testi__quote-mark { font-size: 56px; line-height: 0.7; color: var(--hx-orange); opacity: 0.4; font-weight: 700; } .hpx-homepage .hpx-testi__quote { font-size: 15px; line-height: 1.6; color: var(--hx-text-soft); flex: 1; margin: 0; } .hpx-homepage .hpx-testi__stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; } .hpx-homepage .hpx-testi__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hx-border); } .hpx-homepage .hpx-testi__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--hx-orange); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; flex-shrink: 0; } .hpx-homepage .hpx-testi__author-info { display: flex; flex-direction: column; gap: 2px; } .hpx-homepage .hpx-testi__author-name { font-weight: 600; font-size: 13px; } .hpx-homepage .hpx-testi__author-role { font-size: 12px; color: var(--hx-text-muted); } /* ============== USP STRIP ============== */ .hpx-homepage .hpx-usps { background: var(--hx-bg); padding: 40px 0; border-top: 1px solid var(--hx-border); border-bottom: 1px solid var(--hx-border); } .hpx-homepage .hpx-usps__inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .hpx-homepage .hpx-usp { display: flex; align-items: center; gap: 14px; } .hpx-homepage .hpx-usp__icon { width: 44px; height: 44px; background: var(--hx-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--hx-orange); flex-shrink: 0; } .hpx-homepage .hpx-usp__text { display: flex; flex-direction: column; gap: 2px; } .hpx-homepage .hpx-usp__title { font-weight: 600; font-size: 14px; } .hpx-homepage .hpx-usp__desc { font-size: 12px; color: var(--hx-text-muted); line-height: 1.4; } /* ============== RESPONSIVE ============== */ @media (max-width: 1100px) { .hpx-homepage .hpx-hero__inner { grid-template-columns: 1fr; gap: 40px; } .hpx-homepage .hpx-hero__visual { aspect-ratio: 16/10; max-width: 100%; } .hpx-homepage .hpx-cats__grid { grid-template-columns: repeat(3, 1fr); } .hpx-homepage .hpx-cats__grid .hpx-cat:first-child { grid-column: span 3; grid-row: auto; aspect-ratio: 16/9; } /* Pas de case vide en fin de grille : la dernière vignette s'élargit si besoin */ .hpx-homepage .hpx-cats__grid .hpx-cat:last-child:nth-child(3n) { grid-column: span 2; } .hpx-homepage .hpx-cats__grid .hpx-cat:last-child:nth-child(3n+2) { grid-column: span 3; } .hpx-homepage .hpx-testi__grid { grid-template-columns: 1fr; } .hpx-homepage .hpx-usps__inner { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .hpx-homepage .hpx-hero { padding: 32px 0 48px; } .hpx-homepage .hpx-hero__inner, .hpx-homepage .hpx-section__inner, .hpx-homepage .hpx-usps__inner { padding-left: 16px; padding-right: 16px; } .hpx-homepage .hpx-hero__stats { gap: 12px; } .hpx-homepage .hpx-hero__stat-num { font-size: 22px; } .hpx-homepage .hpx-section { padding: 48px 0; } .hpx-homepage .hpx-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hpx-homepage .hpx-cats__grid .hpx-cat:first-child { grid-column: span 2; aspect-ratio: 1; } .hpx-homepage .hpx-cats__grid .hpx-cat:last-child:nth-child(3n), .hpx-homepage .hpx-cats__grid .hpx-cat:last-child:nth-child(3n+2) { grid-column: auto; } .hpx-homepage .hpx-cats__grid .hpx-cat:last-child:nth-child(even):not(:first-child) { grid-column: span 2; } .hpx-homepage .hpx-featured__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hpx-homepage .hpx-usps__inner { grid-template-columns: 1fr; } } /***********************************************************************/ /******************** FOOTER *******************************************/ /***********************************************************************/ .hx-footer { background: #1a1a1a; color: #ffffff; font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.6; position: relative; overflow: hidden; } /* Decorative top border using a thin orange line */ .hx-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #E84A1C 0%, #E84A1C 30%, transparent 30%, transparent 100%); } /* ============ Top brand row ============ */ .hx-footer__brand-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid #2a2a2a; margin-bottom: 48px; } .hx-footer__logo { font-family: 'Bricolage Grotesque', -apple-system, sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: #ffffff !important; text-decoration: none !important; line-height: 1; display: inline-flex; align-items: center; gap: 3px; } .hx-footer__logo span { color: #E84A1C !important; } .hx-footer__logo sup { font-size: 12px; opacity: 0.7; margin-left: 3px; } .hx-footer__tagline { font-family: 'Bricolage Grotesque', -apple-system, sans-serif; font-size: 14px; font-weight: 500; color: #a8a8a8; letter-spacing: 0.01em; font-style: italic; margin-top: 8px; max-width: 360px; } .hx-footer__b2b-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(232, 74, 28, 0.1); border: 1px solid #E84A1C; border-radius: 100px; color: #E84A1C; font-family: 'Bricolage Grotesque', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } .hx-footer__b2b-badge svg { width: 16px; height: 16px; stroke: #E84A1C; } /* ============ Columns grid ============ */ .hx-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } .hx-footer__col-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #ffffff; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .hx-footer__col-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: #E84A1C; } .hx-footer__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 10px; } .hx-footer__list li { list-style: none !important; padding: 0 !important; margin: 0 !important; } .hx-footer__list a, .hx-footer__list a:visited { color: #a8a8a8 !important; text-decoration: none !important; font-size: 14px; transition: color 0.15s, transform 0.15s, padding-left 0.15s; display: inline-flex; align-items: center; gap: 6px; } .hx-footer__list a:hover { color: #E84A1C !important; padding-left: 4px; } /* Contact column items */ .hx-footer__contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; color: #a8a8a8; line-height: 1.5; } .hx-footer__contact-item:last-child { margin-bottom: 0; } .hx-footer__contact-icon { width: 36px; height: 36px; flex-shrink: 0; background: #2a2a2a; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #E84A1C; transition: background 0.15s; } .hx-footer__contact-icon svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hx-footer__contact-text { flex: 1; min-width: 0; } .hx-footer__contact-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6b6b; margin-bottom: 2px; font-weight: 600; } .hx-footer__contact-value, .hx-footer__contact-value:visited { color: #ffffff !important; text-decoration: none !important; font-size: 14px; font-weight: 500; display: block; word-break: break-word; transition: color 0.15s; } .hx-footer__contact-value:hover { color: #E84A1C !important; } .hx-footer__contact-item:hover .hx-footer__contact-icon { background: rgba(232, 74, 28, 0.15); } /* ============ Payment row ============ */ .hx-footer__payment-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 28px 0; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; margin-bottom: 28px; } .hx-footer__payment-label { font-family: 'Bricolage Grotesque', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #6b6b6b; } .hx-footer__payment-badges { display: flex; align-items: center; gap: 12px; justify-self: start; } .hx-footer__payment-badge { height: 32px; padding: 0 14px; background: #ffffff; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s; } .hx-footer__payment-badge:hover { transform: translateY(-2px); } .hx-footer__payment-badge svg { height: 18px; width: auto; } .hx-footer__secure { display: inline-flex; align-items: center; gap: 8px; color: #a8a8a8; font-size: 12px; font-weight: 500; } .hx-footer__secure svg { width: 14px; height: 14px; stroke: #5BB94A; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ============ Bottom bar ============ */ .hx-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 20px; } .hx-footer__copyright { color: #6b6b6b; font-size: 12px; letter-spacing: 0.01em; } .hx-footer__copyright strong { color: #ffffff; font-weight: 600; } .hx-footer__legal-links { display: flex; gap: 24px; flex-wrap: wrap; } .hx-footer__legal-links a, .hx-footer__legal-links a:visited { color: #6b6b6b !important; text-decoration: none !important; font-size: 12px; transition: color 0.15s; } .hx-footer__legal-links a:hover { color: #ffffff !important; } /* ============ Responsive ============ */ @media (max-width: 1400px) { .reduit, .reduit.padding, .reduit.margin{ padding:24px; } } @media (max-width: 1024px) { .hx-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 32px; } .hx-footer__payment-row { grid-template-columns: 1fr; gap: 16px; } .hx-footer__payment-row .hx-footer__secure { justify-self: start; } #hxArchive .hxa-sidebar { position: relative; top: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; max-height: none; transform: none; } .product .summary { width: calc(70% - 40px); } .product form.cart{ width:100%; } } @media (max-width: 640px) { .hx-footer__inner { padding: 48px 20px 24px; } .hx-footer__brand-row { grid-template-columns: 1fr; gap: 20px; align-items: start; padding-bottom: 32px; margin-bottom: 36px; } .hx-footer__logo { font-size: 26px; } .hx-footer__cols { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; } .hx-footer__bottom { flex-direction: column; align-items: flex-start; } .hx-footer__payment-badges { flex-wrap: wrap; } } /* Filtre « Pays d'expédition » : drapeau devant le nom du pays */ .hxa-opt__flag{display:inline-flex;width:18px;flex:0 0 18px;margin-right:6px} .hxa-opt__flag svg{width:18px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)} /* ============================================================ * §6 COMPLÉMENTS — pastilles de couleur, prix HT / TTC, délai d'expédition * ============================================================ */ /* Pastilles de couleur : bordure des teintes claires, produits simples */ .hxc-swatch.has-border, .hxa-opt__swatch.has-border, .hxa-card__vswatch-dot.has-border, .hxsp-swatch__circle.has-border { box-shadow: inset 0 0 0 1px #bdbdbd; } .hxc-simple-swatches { margin: 10px 0; } .hxc-simple-swatches__label { display: block; font-size: 14px; margin-bottom: 6px; } .hxc-simple-swatches .hxc-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .hxc-simple-swatches .hxc-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ddd; box-sizing: border-box; } .hxc-simple-swatches .hxc-swatch.is-active { border-color: #222; } .hxc-simple-swatches .hxc-swatch { cursor: default; pointer-events: none; } .hxc-simple-swatches--card { margin: 6px 0 0; } .hxc-simple-swatches--card .hxc-swatch { width: 16px; height: 16px; border-width: 1px; } /* Prix HT / TTC */ .hx-vat--ht { display: none; } html.hx-vat-ht .hx-vat--ht { display: inline; } html.hx-vat-ht .hx-vat--ttc { display: none; } .hx-vat__tag { font-size: .6em; font-weight: 600; letter-spacing: .04em; opacity: .7; margin-left: .2em; } .hx-vat-switch { display: inline-flex; gap: 0; margin: 6px 0 14px; border: 1px solid #d9d9d9; border-radius: 999px; overflow: hidden; } .hx-vat-switch__btn { background: #fff; border: 0; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: #555; line-height: 1.4; } .hx-vat-switch__btn.is-active { background: #1a1a1a; color: #fff; } /* Pastilles de couleur : choix de la variation (produits variables) */ .hxc-native-select select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hxc-native-select { position: relative; display: inline-block; } .hxc-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .hxc-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ddd; cursor: pointer; padding: 0; } .hxc-swatch.is-active { border-color: #222; box-shadow: 0 0 0 2px #fff inset; } .hxc-swatch.is-unavailable { opacity: .35; position: relative; } .hxc-swatch.is-unavailable::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #888; transform: translateX(-50%) rotate(45deg); } /* Délai d'expédition sous le prix */ .hx-delai { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #2e7d32; margin: 6px 0 10px; } .hx-delai:before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); } /* ============================================================ * §7 PETITS ÉCRANS — tablette (≤ 1024 px) et téléphone (≤ 640 px) * * Complète les règles « responsive » des sections précédentes. * Dans chaque palier, les règles sont rangées par composant : * en-tête, catalogue, fiche produit, panier, validation de * commande, mon compte, pied de page. * ============================================================ */ /* ---------- Menu mobile (panneau ouvert par le bouton ☰) ---------- */ #hxHeader .hx-burger svg { display: block; width: 24px; height: 24px; } #hxMobileNav { max-width: 420px; visibility: hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; } #hxMobileNav.is-open { visibility: visible; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #hxMobileNav .hx-mobile-nav__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--hx-text); } #hxMobileNav .hx-mobile-nav__close { border-radius: 8px; } #hxMobileNav .hx-mobile-nav__close:hover, #hxMobileNav .hx-mobile-nav__close:focus { background: var(--hx-bg); } #hxMobileNav .hx-mobile-nav__trigger:focus { background: transparent; } #hxMobileNav .hx-mobile-nav__footer { flex-shrink: 0; } #hxMobileNav .hx-mobile-langs a { text-transform: uppercase; } .admin-bar #hxMobileNav { top: 32px; } @media (max-width: 782px) { .admin-bar #hxMobileNav { top: 46px; } } /* ============ Tablette et téléphone ============ */ @media (max-width: 1024px) { /* ---------- En-tête : ☰ | logo | recherche | compte, panier, langue ---------- */ /* Seule la barre du haut reste collée en haut de l'écran ; le bandeau d'information défile. */ #hxHeader { display: contents; } #hxHeader .hx-top { position: sticky; top: 0; z-index: 1000; } #hxHeader .hx-top__inner { grid-template-columns: auto auto minmax(0, 1fr) auto; } #hxHeader .hx-burger { margin-left: -10px; } #hxHeader .hx-util-link svg { padding-top: 0; } #hxHeader .mini-cart-wrapper .mini-cart-picto { width: 44px; } #hxHeader .mini-cart-wrapper .cart-img { padding: 10px; } #hxHeader .mini-cart-wrapper .cart-img svg { display: block; } #hxHeader .mini-cart-wrapper .cart-count-badge { top: 2px; right: 2px; } #hxHeader .mini-cart-wrapper .cart-label { display: none; } /* Pas d'aperçu du panier au survol sur écran tactile : le pictogramme mène au panier */ #hxHeader .mini-cart-wrapper:hover .widget_shopping_cart_content { display: none; } /* ---------- Catalogue : filtres repliés, ouverts par leur bandeau ---------- */ #hxArchive .hxa-toolbar__mobile-filter { display: none; } #hxArchive .hxa-sidebar { z-index: auto; } #hxArchive .hxa-sidebar__head { cursor: pointer; } #hxArchive .hxa-sidebar__title::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid var(--hx-text); border-bottom: 2px solid var(--hx-text); transform: translateY(-3px) rotate(45deg); } #hxArchive .hxa-sidebar.is-expanded .hxa-sidebar__title::after { transform: translateY(1px) rotate(-135deg); } #hxArchive .hxa-sidebar:not(.is-expanded) .hxa-sidebar__head { border-bottom: 0; } #hxArchive .hxa-sidebar:not(.is-expanded) #hxaFilterForm { display: none; } /* ---------- Fiche produit : deux colonnes (visuels | titre et achat), détails dessous ---------- */ #main > .product { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto auto 1fr; gap: 0 32px; align-items: start; } .product .summary { display: contents; } #main > .product > *, .product .summary > * { grid-column: 1 / -1; min-width: 0; } #main > .product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1 / span 4; width: auto !important; position: static; margin-bottom: 24px; } .product .summary > h1.product_title { grid-column: 2; grid-row: 1; } .product .summary > .hxc-simple-swatches { grid-column: 2; grid-row: 2; } .product .summary > .ship_from { grid-column: 2; grid-row: 3; margin: 0 0 12px; } #main > .product > form.cart { grid-column: 2; grid-row: 4; width: auto; position: static; margin-bottom: 24px; } .wc-tabs { flex-wrap: wrap; } .wc-tabs a { margin-bottom: 8px; } .related.products ul.products { flex-wrap: wrap; gap: 16px; } .related.products ul.products li { width: calc((100% - 32px) / 3); } /* ---------- Panier : vignette à taille fixe ---------- */ .woocommerce-cart table.cart td { padding: 12px; } .woocommerce-cart table.cart td.product-thumbnail { width: 100px; } .woocommerce-cart table.cart td.product-thumbnail img { width: 76px; height: 76px; max-width: none; } } /* ============ Petite tablette et téléphone ============ */ @media (max-width: 900px) { /* ---------- En-tête : recherche sur une seconde ligne ---------- */ #hxHeader .hx-top__inner { height: auto; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "burger logo utility" "search search search"; row-gap: 6px; padding-top: 6px; padding-bottom: 10px; } #hxHeader .hx-burger { grid-area: burger; } #hxHeader .hx-logo { grid-area: logo; } #hxHeader .hx-utility { grid-area: utility; } #hxHeader .dgwt-wcas-search-wrapp { grid-area: search; width: 100%; max-width: none; margin: 0; } /* ---------- Mon compte : menu au-dessus du contenu ---------- */ .woocommerce-account .woocommerce { flex-direction: column; gap: 24px; } .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; } .woocommerce-account .woocommerce-MyAccount-content { min-width: 0; } } /* ============ Téléphone ============ */ @media (max-width: 640px) { /* ---------- En-tête : le choix de la langue passe dans le menu ---------- */ #hxHeader .hx-utility .wpml-ls { display: none; } /* ---------- Catalogue : pagination sur plusieurs lignes ---------- */ .wp-pagenavi { flex-wrap: wrap; } .wp-pagenavi a, .wp-pagenavi span { flex: 0 0 auto; white-space: nowrap; } /* ---------- Fiche produit : une colonne (titre, visuels, achat, détails) ---------- */ #main > .product { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .product .summary > h1.product_title { grid-column: 1; grid-row: auto; order: -5; font-size: 24px; } #main > .product > .woocommerce-product-gallery { grid-column: 1; grid-row: auto; order: -4; margin-bottom: 16px; } .product .summary > .hxc-simple-swatches { grid-column: 1; grid-row: auto; order: -3; } .product .summary > .ship_from { grid-column: 1; grid-row: auto; order: -2; } #main > .product > form.cart { grid-column: 1; grid-row: auto; order: -1; } .related.products ul.products li { width: calc((100% - 16px) / 2); } /* ---------- Panier : une fiche par article ---------- */ .woocommerce-cart table.cart thead { display: none; } .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody, .woocommerce-cart table.cart tr, .woocommerce-cart table.cart td { display: block; width: auto; } .woocommerce-cart table.cart tr.cart_item { position: relative; min-height: 112px; padding: 14px 14px 14px 104px; border-bottom: 1px solid var(--hx-border); } .woocommerce-cart table.cart tr.cart_item td { padding: 0; border: 0; background: transparent; } .woocommerce-cart table.cart td.product-thumbnail { position: absolute; left: 14px; top: 14px; width: 76px; } .woocommerce-cart table.cart td.product-thumbnail img { display: block; width: 76px; height: 76px; } .woocommerce-cart table.cart td.product-remove { position: absolute; right: 8px; top: 8px; } .woocommerce-cart table.cart td.product-name { padding-right: 30px; margin-bottom: 8px; } .woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart td.product-quantity, .woocommerce-cart table.cart td.product-subtotal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; text-align: right; } .woocommerce-cart table.cart td.product-price::before, .woocommerce-cart table.cart td.product-quantity::before, .woocommerce-cart table.cart td.product-subtotal::before { content: attr(data-title); font-size: 13px; } .woocommerce-cart table.cart td.product-quantity .quantity { margin: 0; } .woocommerce-cart table.cart td.product-quantity input.qty { width: 56px; } .woocommerce-cart table.cart td.actions { padding: 14px; } /* ---------- Validation de commande : cadres moins épais ---------- */ .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { padding: 16px; } .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { padding: 10px 6px !important; } /* ---------- Mon compte : tableau des commandes en fiches ---------- */ .woocommerce-account table.shop_table_responsive thead { display: none; } .woocommerce-account table.shop_table_responsive, .woocommerce-account table.shop_table_responsive tbody, .woocommerce-account table.shop_table_responsive tr { display: block; width: auto; } .woocommerce-account table.shop_table_responsive tr { padding: 8px 0; border-bottom: 1px solid var(--hx-border); } .woocommerce-account table.shop_table_responsive th[data-title], .woocommerce-account table.shop_table_responsive td[data-title] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; border: 0; background: transparent; text-align: right; } .woocommerce-account table.shop_table_responsive th[data-title]::before, .woocommerce-account table.shop_table_responsive td[data-title]::before { content: attr(data-title); font-size: 13px; font-weight: 500; color: var(--hx-text-muted); } /* ---------- Pied de page ---------- */ .hx-footer__b2b-badge { max-width: 100%; white-space: normal; } } /* ============ Très petit téléphone ============ */ @media (max-width: 360px) { /* Logo réduit ; le lien « Mon compte » reste accessible dans le menu */ #hxHeader .hx-logo { font-size: 16px; } #hxHeader .hx-utility .hx-util-link { display: none; } }