/** * Étapes Print — Fiche produit (téléphone, tablette et ordinateur) * * Trois largeurs : * - téléphone ≤ 768 px : une colonne, photo en haut, options qui * défilent au doigt, barre fixe en bas ; * - tablette 769-1024 px : une colonne, options sur plusieurs lignes, * barre fixe en bas ; * - ordinateur ≥ 1025 px : photo + récapitulatif à gauche (restent * visibles), configuration à droite. * * .ep-mprod est posé sur par ep-produit.js une fois le configurateur * prêt. Tout ce qui masque un élément d'origine en dépend : si le script ne * tourne pas, la page d'origine reste intacte. */ :root { --ep-p-accent: #6a7350; --ep-p-accent-bg: #f2f3ec; --ep-p-accent-dark: #3f4630; --ep-p-line: #e2e2e2; --ep-p-text: #1c1f16; --ep-p-muted: #6b6b6b; --ep-p-buy: #2aaf52; } /* ================================================================== 1. LES OPTIONS EN VIGNETTES COMPACTES (toutes largeurs) ================================================================== */ .single-product table.etapes_print_variations, .single-product table.etapes_print_variations > tbody, .single-product table.etapes_print_variations tr, .single-product table.etapes_print_variations th, .single-product table.etapes_print_variations td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: none !important; } .single-product table.etapes_print_variations tr.interior { margin: 0 0 14px !important; } /* Ligne masquée par ep-produit.js (ex. « Nombre de pages » quand il n'y a qu'un seul choix possible). */ .single-product table.etapes_print_variations tr.ep-row-hidden { display: none !important; } .single-product table.etapes_print_variations th.label label { display: block; margin: 0 0 6px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--ep-p-text) !important; } .single-product .etapes_print_custom_field { display: flex !important; flex-wrap: wrap !important; gap: 10px; margin: 0 !important; padding: 0 !important; } .single-product .etapes_print_custom_field_option:not([hidden]) { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; flex: 0 0 104px !important; width: 104px !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 10px 6px 8px !important; border: 1px solid var(--ep-p-line) !important; border-radius: 12px !important; background: #fff !important; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .single-product .etapes_print_custom_field_option:not([hidden]):hover { border-color: var(--ep-p-accent) !important; } .single-product .etapes_print_custom_field_option img { width: auto !important; max-width: 60px !important; height: 44px !important; object-fit: contain; margin: 0 0 6px !important; } .single-product .etapes_print_custom_field_option p { margin: 0 !important; font-size: 12px !important; line-height: 1.25 !important; color: var(--ep-p-text) !important; } .single-product .etapes_print_custom_field_option.active { border: 2px solid var(--ep-p-accent) !important; background: var(--ep-p-accent-bg) !important; } /* ================================================================== 2. QUANTITÉ ET LIVRAISON (toutes largeurs) Panneau construit par ep-produit.js. Le tableau d'origine, le récapitulatif d'origine et le bouton WooCommerce restent dans la page (ils portent les champs envoyés au panier), mais invisibles. ================================================================== */ .ep-mprod .etape_print_price_grid, .ep-mprod .etapes_print_vat_switch, .ep-mprod .etapes_print_quantity_input_label, .ep-mprod #etapes_print_product_variation_recap { display: none !important; } .ep-mprod form.cart .single_add_to_cart_button, .ep-mprod .sticky-container { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; } .ep-mprod #etapes_print_product_customization { display: block !important; } .ep-mqd { margin: 8px 0 24px; } .ep-mqd__t { margin: 14px 0 6px !important; font-size: 15px; font-weight: 700; color: var(--ep-p-text); } .ep-mqd__chips { display: flex; flex-wrap: wrap; gap: 8px; } .ep-mqd__chip { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 92px; padding: 10px 12px; border: 1px solid var(--ep-p-line); border-radius: 12px; background: #fff; font: inherit; color: var(--ep-p-text); text-align: left; cursor: pointer; transition: border-color .15s ease; } .ep-mqd__chip:hover { border-color: var(--ep-p-accent); } .ep-mqd__chip.is-on { border: 2px solid var(--ep-p-accent); background: var(--ep-p-accent-bg); } .ep-mqd__chip-q { font-size: 14px; font-weight: 700; } .ep-mqd__chip-p { font-size: 13px; color: var(--ep-p-muted); } .ep-mqd__chip--other { justify-content: center; font-size: 14px; font-weight: 600; color: var(--ep-p-accent-dark); } .ep-mqd__custom { display: flex; gap: 8px; max-width: 420px; margin-top: 8px; } .ep-mqd__input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #cfcfcf; border-radius: 10px; font-size: 16px; } .ep-mqd__ok { flex: 0 0 auto; height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ep-p-accent-dark); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .ep-mqd__note { margin: 6px 0 0 !important; font-size: 13px; color: var(--ep-p-muted); } .ep-mqd__note.is-error { color: #b3261e; } .ep-mqd__cards { display: flex; flex-direction: column; gap: 8px; } .ep-mqd__card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 1px solid var(--ep-p-line); border-radius: 12px; background: #fff; font: inherit; color: var(--ep-p-text); text-align: left; cursor: pointer; transition: border-color .15s ease; } .ep-mqd__card:hover { border-color: var(--ep-p-accent); } .ep-mqd__card.is-on { border: 2px solid var(--ep-p-accent); background: var(--ep-p-accent-bg); } .ep-mqd__card.is-off { opacity: .45; cursor: not-allowed; } .ep-mqd__card-l, .ep-mqd__card-r { display: flex; flex-direction: column; gap: 2px; } .ep-mqd__card-r { flex: 0 0 auto; align-items: flex-end; text-align: right; white-space: nowrap; } .ep-mqd__card-date { font-size: 15px; font-weight: 700; } .ep-mqd__card-sub { font-size: 13px; color: var(--ep-p-muted); } .ep-mqd__card-p { font-size: 16px; font-weight: 700; } .ep-mqd__card-tag { padding: 1px 8px; border-radius: 20px; background: #e6e8dc; color: var(--ep-p-accent-dark); font-size: 11px; font-weight: 700; } .ep-mqd__ht { margin: 8px 0 0 !important; font-size: 12px; color: var(--ep-p-muted); } /* ================================================================== 3. TÉLÉPHONE (≤ 768 px) ================================================================== */ @media (max-width: 768px) { /* La photo en premier : elle était sous tout le configurateur. */ .single-product .section_product_img { order: -1 !important; margin-bottom: 8px !important; } .single-product .section_product_img .woocommerce-product-gallery img { max-height: 320px; width: 100%; object-fit: contain; border-radius: 12px; } /* Options et quantités : une ligne qui défile au doigt. */ .single-product .etapes_print_custom_field, .ep-mqd__chips { flex-wrap: nowrap !important; gap: 8px; margin: 0 -16px !important; padding: 2px 16px 8px !important; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .single-product .etapes_print_custom_field::-webkit-scrollbar, .ep-mqd__chips::-webkit-scrollbar { display: none; } .single-product .etapes_print_custom_field_option:not([hidden]) { flex: 0 0 96px !important; width: 96px !important; scroll-snap-align: start; } .single-product .etapes_print_custom_field_option p { font-size: 11.5px !important; } .ep-mqd__chip { min-width: 88px; } } /* ================================================================== 4. TÉLÉPHONE ET TABLETTE (≤ 1024 px) : BARRE FIXE EN BAS ================================================================== */ .ep-mbar { display: none; } /* Bouton « remonter en haut » d'Avada : inutile ici (la barre et le récapitulatif restent à l'écran) et il se posait par-dessus. */ .ep-mprod .fusion-top-top-link, .ep-mprod #toTop { display: none !important; } @media (max-width: 1024px) { .ep-mbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 99990; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--ep-p-line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); } .ep-mbar__info { display: flex; flex-direction: column; min-width: 0; } .ep-mbar__price { font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--ep-p-text); } .ep-mbar__sub { font-size: 12px; line-height: 1.3; color: var(--ep-p-muted); } .ep-mbar__btn { flex: 0 0 auto; min-height: 50px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ep-p-buy); color: #fff; font: inherit; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; } .ep-mbar__btn:disabled { opacity: .5; } body.ep-mprod { padding-bottom: var(--ep-mbar-h, 76px) !important; } /* Onglet « Gérer le consentement » (Complianz) : au-dessus de la barre. */ .ep-mprod .cmplz-manage-consent { bottom: calc(var(--ep-mbar-h, 76px) - 35px) !important; } .ep-dsum { display: none !important; } } /* ================================================================== 5. ORDINATEUR (≥ 1025 px) : DEUX COLONNES À gauche : titre, description, puis toute la configuration. À droite : photo + récapitulatif + bouton, qui restent visibles pendant qu'on configure, sans rien recouvrir. La section Avada est remise en grille, sans rien déplacer dans la page. ================================================================== */ @media (min-width: 1025px) { .ep-mprod .fusion-builder-row:has(> .section_product_img) { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; } .ep-mprod .fusion-builder-row:has(> .section_product_img) > .fusion-layout-column { grid-column: 1; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Colonne vide d'Avada en tête de section : sur toute la largeur. */ .ep-mprod .fusion-builder-row:has(> .section_product_img) > .fusion-layout-column:first-child:not(.section_product_img) { grid-column: 1 / -1; grid-row: 1; } .ep-mprod .fusion-builder-row:has(> .section_product_img) > .section_product_img { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: var(--ep-sticky-top, 24px); align-self: start; } .ep-mprod .fusion-builder-row:has(> .section_product_img) > .section_product_img + .fusion-layout-column { grid-row: 2; } .ep-mprod .fusion-builder-row:has(> .section_product_img) > .fusion-layout-column:has(#etapes_print_product_customization) { grid-row: 3; } /* La photo occupe toute la largeur de la colonne. */ .ep-mprod .section_product_img .fusion-column-wrapper, .ep-mprod .section_product_img .woocommerce-product-gallery, .ep-mprod .section_product_img .woocommerce-product-gallery .flex-viewport { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Photo à la même largeur que le récapitulatif, en format 16:10 : plus basse, pour laisser la place aux gabarits et au récapitulatif. */ .ep-mprod .section_product_img .woocommerce-product-gallery__image img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; } /* La configuration occupe toute la colonne de gauche. */ .ep-mprod #etapes_print_product_variation_panel { width: 100% !important; max-width: none !important; } /* Délai : trois cartes côte à côte. */ .ep-mqd__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ep-mqd__card { flex-direction: column; align-items: flex-start; min-height: 0; } .ep-mqd__card-r { align-items: flex-start; text-align: left; } /* ---------- Récapitulatif, sous la photo ---------- */ .ep-dsum { margin-top: 16px; padding: 18px 20px 16px; border: 1px solid var(--ep-p-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); } .ep-dsum__t { margin: 0 0 4px !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-p-muted); } .ep-dsum__price { margin: 0 !important; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--ep-p-text); } .ep-dsum__ttc { margin: 2px 0 12px !important; font-size: 14px; color: var(--ep-p-muted); } .ep-dsum__lines { margin: 0 0 8px !important; padding: 10px 0 0 !important; border-top: 1px solid var(--ep-p-line); list-style: none; } .ep-dsum__lines li { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: 14px; } .ep-dsum__k { color: var(--ep-p-muted); } .ep-dsum__v { font-weight: 600; text-align: right; color: var(--ep-p-text); } .ep-dsum__btn { width: 100%; min-height: 54px; margin-top: 12px; border: 0; border-radius: 12px; background: var(--ep-p-buy); color: #fff; font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: filter .15s ease; } .ep-dsum__btn:hover { filter: brightness(.95); } .ep-dsum__btn:disabled { opacity: .5; cursor: not-allowed; } .ep-dsum__note { margin: 10px 0 0 !important; font-size: 12.5px; text-align: center; color: var(--ep-p-muted); } } /* ================================================================== 6. « VOIR LE DÉTAIL » : RÉCAPITULATIF COMPLET DE LA COMMANDE Options choisies, quantité, délai, prix HT / TVA / TTC. Téléphone et tablette : volet au-dessus de la barre du bas. Ordinateur : le récapitulatif de droite s'agrandit. ================================================================== */ .ep-recap { display: none; } .is-open > .ep-recap { display: block; } .ep-recap__t { margin: 0 0 8px !important; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-p-muted); } .ep-recap__list { margin: 0 !important; padding: 0 !important; list-style: none; } .ep-recap__row { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 7px 0; border-bottom: 1px dashed var(--ep-p-line); font-size: 14px; line-height: 1.35; } .ep-recap__k { flex: 0 0 auto; color: var(--ep-p-muted); } .ep-recap__v { font-weight: 600; text-align: right; color: var(--ep-p-text); } .ep-recap__row--money:last-child { border-bottom: 0; font-size: 16px; } .ep-recap__row--money:last-child .ep-recap__v { font-weight: 800; } .ep-mbar__more, .ep-dsum__more { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; color: var(--ep-p-accent-dark); cursor: pointer; } .ep-recap__chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(1px) rotate(-135deg); transition: transform .15s ease; } .is-open .ep-recap__chev { transform: translateY(-2px) rotate(45deg); } @media (max-width: 1024px) { .ep-mbar__more { margin-top: 2px; align-self: flex-start; } .ep-recap--sheet { position: absolute; right: 0; bottom: 100%; left: 0; max-height: 62vh; overflow-y: auto; padding: 18px 18px 8px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -12px 28px rgba(0, 0, 0, .14); } .ep-dsum__more { display: none; } } @media (min-width: 1025px) { /* Le détail se déplie dans le récapitulatif, au-dessus du bouton. */ .ep-dsum > .ep-recap { order: 5; max-height: 34vh; overflow-y: auto; margin: 10px 0 0; padding: 10px 6px 4px 0; border-top: 1px solid var(--ep-p-line); } .ep-dsum { display: flex; flex-direction: column; } .ep-dsum__t { order: 1; } .ep-dsum__price { order: 2; } .ep-dsum__ttc { order: 3; } .ep-dsum__lines { order: 4; } .ep-dsum__more { order: 6; align-self: flex-start; margin-top: 6px; } .ep-dsum__btn { order: 7; } .ep-dsum__note { order: 8; } /* Ici le détail s'ouvre vers le bas : flèche vers le bas, puis vers le haut. */ .ep-dsum__more .ep-recap__chev { transform: translateY(-2px) rotate(45deg); } .ep-dsum.is-open .ep-dsum__more .ep-recap__chev { transform: translateY(1px) rotate(-135deg); } } /* ================================================================== 7. « NOS SUPPORTS » : PHOTOS DE PAPIERS REDRESSÉES Les 10 photos de papier sur fond vert sont inclinées de 15° dans le fichier même : répétées côte à côte, elles donnaient l'impression que toute la page penche. On les redresse à l'affichage (rotation +15°), le cadre reprend exactement le vert du fond (#b1b499) pour que les coins restent invisibles. Les fichiers de la médiathèque ne changent pas. Identifiants : wp-image- des pièces jointes (voir « Médias »). ================================================================== */ .single-product .fusion-lightbox:has(> .wp-image-4977), .single-product .fusion-lightbox:has(> .wp-image-4978), .single-product .fusion-lightbox:has(> .wp-image-15354), .single-product .fusion-lightbox:has(> .wp-image-4979), .single-product .fusion-lightbox:has(> .wp-image-4980), .single-product .fusion-lightbox:has(> .wp-image-4981), .single-product .fusion-lightbox:has(> .wp-image-4982), .single-product .fusion-lightbox:has(> .wp-image-4983), .single-product .fusion-lightbox:has(> .wp-image-4984), .single-product .fusion-lightbox:has(> .wp-image-4985) { display: block; overflow: hidden; background: #b1b499; } .single-product img.wp-image-4977, .single-product img.wp-image-4978, .single-product img.wp-image-15354, .single-product img.wp-image-4979, .single-product img.wp-image-4980, .single-product img.wp-image-4981, .single-product img.wp-image-4982, .single-product img.wp-image-4983, .single-product img.wp-image-4984, .single-product img.wp-image-4985 { transform: rotate(15deg); } /* ================================================================== 8. ORDINATEUR : GABARITS SOUS LA PHOTO, ET MOINS DE BLANC ================================================================== */ .ep-gab { display: none; } @media (min-width: 1025px) { .ep-gab:not([hidden]) { display: block; margin-top: 14px; padding: 14px 18px 12px; border: 1px solid var(--ep-p-line); border-radius: 14px; background: #faf7f2; } .ep-gab__t { margin: 0 0 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-p-muted); } .ep-gab__list { margin: 0 !important; padding: 0 !important; list-style: none; } .ep-gab__list li { margin: 0 0 6px; } .ep-gab__dl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--ep-p-line); border-radius: 10px; background: #fff; font-size: 14px; color: var(--ep-p-text) !important; text-decoration: none !important; } .ep-gab__dl:hover { border-color: var(--ep-p-accent); } .ep-gab__list li.is-match .ep-gab__dl { border: 2px solid var(--ep-p-accent); background: var(--ep-p-accent-bg); } .ep-gab__tag { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--ep-p-accent-dark); } .ep-gab__links { margin: 8px 0 0 !important; font-size: 13px; } .ep-gab__links a { color: var(--ep-p-accent-dark) !important; text-decoration: underline; } /* Le bloc d'origine « Voir les gabarits » fait doublon. */ .ep-has-gab .etapes_print_flux_select_container { display: none !important; } .ep-dsum { margin-top: 14px; } /* ---------- Moins de blanc dans la colonne de gauche ---------- */ .ep-mprod .section_product_img + .fusion-layout-column .fusion-breadcrumbs { margin: 0 0 6px !important; } .ep-mprod .section_product_img + .fusion-layout-column .fusion-title { margin-top: 0 !important; margin-bottom: 6px !important; } .ep-mprod .section_product_img + .fusion-layout-column .fusion-woo-short-description-tb { margin-bottom: 0 !important; } .ep-mprod .section_product_img + .fusion-layout-column .fusion-woo-short-description-tb p { margin: 0 0 6px !important; } .ep-mprod .section_product_img + .fusion-layout-column .fusion-builder-row-inner { margin: 10px 0 0 !important; padding: 0 !important; min-height: 0 !important; } .ep-mprod .section_product_img + .fusion-layout-column .fusion-builder-row-inner .fusion-layout-column, .ep-mprod .section_product_img + .fusion-layout-column .fusion-builder-row-inner .fusion-column-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } .ep-mprod .fusion-layout-column:has(#etapes_print_product_customization) { margin-top: 0 !important; } .ep-mprod .fusion-layout-column:has(#etapes_print_product_customization) > .fusion-column-wrapper { margin-top: 0 !important; padding-top: 0 !important; } .ep-mprod .fusion-layout-column:has(#etapes_print_product_customization) .fusion-separator { margin-top: 10px !important; margin-bottom: 14px !important; } } /* Écrans d'ordinateur peu hauts (ex. 1280 × 720) : photo plus basse et mention sous le bouton retirée, pour que le bouton reste à l'écran. */ @media (min-width: 1025px) and (max-height: 820px) { .ep-mprod .section_product_img .woocommerce-product-gallery__image img { aspect-ratio: 2 / 1; } .ep-dsum__note { display: none; } } /* ================================================================== 9. « À PARTIR DE » EN HAUT DE PAGE (toutes largeurs) Le prix d'origine (#price_product) faisait doublon avec le récapitulatif : il est remplacé par le prix unitaire le plus bas. ================================================================== */ .ep-mprod #price_product { display: none !important; } .ep-from { margin: 10px 0 4px; } .ep-from__line { margin: 0 !important; font-size: 15px; color: var(--ep-p-muted); } .ep-from__price { font-size: 22px; font-weight: 800; color: var(--ep-p-text); } .ep-from__sub { margin: 2px 0 0 !important; font-size: 13px; color: var(--ep-p-muted); } /* ================================================================== 10. ORDINATEUR : DÉTAIL OUVERT = LE BOUTON RESTE À L'ÉCRAN Quand on déplie « Voir le détail », la photo et les gabarits se replient : le récapitulatif remonte en haut de la colonne, sa liste défile à l'intérieur, et le bouton « Ajouter au panier » reste visible. ================================================================== */ @media (min-width: 1025px) { .ep-mprod .section_product_img:has(.ep-dsum.is-open) .woocommerce-product-gallery, .ep-mprod .section_product_img:has(.ep-dsum.is-open) .ep-gab { display: none !important; } .ep-mprod .section_product_img:has(.ep-dsum.is-open) .ep-dsum { margin-top: 0; } /* Hauteur de la liste : écran moins en-tête du site et reste de la carte. */ .ep-dsum.is-open > .ep-recap { max-height: max(150px, calc(100vh - 520px)); } } /* ================================================================== 11. GALERIE À PLUSIEURS PHOTOS Le carrousel WooCommerce calcule lui-même la largeur de ses photos : on ne force que la zone visible. Miniatures en ligne sous la photo. ================================================================== */ .ep-mprod .section_product_img .woocommerce-product-gallery { display: flex !important; flex-direction: column !important; gap: 8px; } .ep-mprod .section_product_img .flex-viewport { width: 100% !important; border-radius: 14px; } .ep-mprod .section_product_img .flex-control-thumbs { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; list-style: none; } .ep-mprod .section_product_img .flex-control-thumbs li { flex: 0 0 64px !important; width: 64px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; } .ep-mprod .section_product_img .flex-control-thumbs img { width: 64px !important; height: 64px !important; object-fit: cover; border: 2px solid transparent; border-radius: 8px; opacity: .7; cursor: pointer; } .ep-mprod .section_product_img .flex-control-thumbs img.flex-active, .ep-mprod .section_product_img .flex-control-thumbs img:hover { border-color: var(--ep-p-accent); opacity: 1; } .ep-mprod .section_product_img .flex-viewport { order: 1; } .ep-mprod .section_product_img .flex-control-thumbs { order: 2; } .ep-mprod .section_product_img .flex-direction-nav { order: 3; }