/* ============================================================ MODUL X1 — restilizare pagini WooCommerce (categorie + produs) Țintește clasele Flatsome/WooCommerce, scopat sub body.modx1-shop (listă) și body.modx1-single (produs). Folosește variabilele de culoare ale modulului. ============================================================ */ /* ---------- banner per categorie (sub breadcrumb + nr. rezultate, deasupra produselor) ---------- */ .modx1-catbanner { margin: 4px 0 22px; } .modx1-catbanner a { display: block; } .modx1-catbanner img { display: block; width: 100%; height: auto; border-radius: var(--x1-radius, 10px); } /* ---------- butoane (comun) ---------- */ /* NOTĂ: `.add-to-cart-button` e WRAPPER-ul Flatsome (un div), NU butonul — NU îl colorăm, altfel apare „buton în buton". Stilăm doar link-ul/butonul real. */ /* IMPORTANT: NU `.modx1-shop .button`. `.button` e clasa generică Flatsome, iar `modx1-shop` stă pe — regula prindea ORICE buton din pagină (widget-uri, „Filtrează" din filtrul de preț, newsletter în footer, back-to-top, butoane din UX Builder), și, cum clasa se pune și pe homepage, colora forțat tot site-ul. Restrângem la butoanele din buclele de produse. */ .modx1-shop .products .button, .modx1-shop .product-small .button, .modx1-shop li.product .button, .modx1-shop .add_to_cart_button, .modx1-single .single_add_to_cart_button { background-color: var(--x1-orange-500) !important; border-color: var(--x1-orange-500) !important; color: #fff !important; border-radius: var(--x1-radius-sm) !important; font-weight: 700 !important; } .modx1-shop .products .button:hover, .modx1-shop .product-small .button:hover, .modx1-shop li.product .button:hover, .modx1-shop .add_to_cart_button:hover, .modx1-single .single_add_to_cart_button:hover { background-color: var(--x1-orange-600) !important; border-color: var(--x1-orange-600) !important; } /* Wrapper-ul Flatsome: complet transparent, fără padding/bordură (nu e buton). */ .modx1-shop .add-to-cart-button { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } /* ---- Buton „Add to cart" în catalog: fără flash la hover + stări AJAX uniforme ---- */ .modx1-shop .product-small .add_to_cart_button { transition: background-color .15s ease, color .15s ease !important; box-shadow: none !important; /* Dimensiune IDENTICĂ cu butonul de pe cardul X1 (.modx1-add): padding/font la fel. */ padding: 9px 18px !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.2 !important; width: auto !important; min-width: 0 !important; } /* Flatsome animează uneori un fundal pe pseudo-element / inner — îl neutralizăm */ .modx1-shop .product-small .add_to_cart_button::before, .modx1-shop .product-small .add_to_cart_button::after { background: none !important; box-shadow: none !important; } /* Stările de AJAX (loading / added) păstrează același portocaliu, fără salt */ .modx1-shop .product-small .add_to_cart_button.loading, .modx1-shop .product-small .add_to_cart_button.added, .modx1-shop .product-small .add_to_cart_button.loading:hover, .modx1-shop .product-small .add_to_cart_button.added:hover { background-color: var(--x1-orange-500) !important; border-color: var(--x1-orange-500) !important; color: #fff !important; } .modx1-shop .product-small .add_to_cart_button.loading::after { color: #fff !important; border-color: #fff transparent #fff transparent !important; } /* „Added / View cart" care apare după adăugare — stil consecvent, nu link gol */ .modx1-shop .product-small .added_to_cart { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--x1-navy-800) !important; text-decoration: underline; } /* ============================================================ PAGINA DE CATEGORIE / LISTĂ PRODUSE ============================================================ */ .modx1-shop .shop-page-title, .modx1-shop .page-title-inner h1 { color: var(--x1-cat-title, var(--x1-ink-900)); font-weight: 800; } /* cardul de produs */ .modx1-shop .products .product-small.box { background: var(--x1-card, #fff); border: 1px solid var(--x1-line); border-radius: var(--x1-radius); overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s; } .modx1-shop .products .product-small.box:hover { box-shadow: var(--x1-shadow-md, 0 6px 20px rgba(15,27,45,.08)); transform: translateY(-3px); border-color: #d9dee6; } .modx1-shop .product-small .box-image { border-radius: var(--x1-radius) var(--x1-radius) 0 0; background: transparent; } /* Hover pe imaginea din loop. Flatsome NU face swap între poze: a doua imagine (`img.back-image`, adăugată în inc/woocommerce/structure-wc-product-box.php) e `position:absolute` peste prima și doar trece din opacity 0 în 1. Cu un PNG cu fundal transparent, prima poză se vede prin a doua și pare că se suprapun. Aici stingem prima poză la hover, ca swap-ul să funcționeze corect indiferent dacă a doua imagine e transparentă sau nu. `:has()` limitează regula la cardurile care chiar au a doua imagine; media query-ul respectă `hide-for-small`, unde back-image nu se afișează deloc. */ @media (min-width: 550px) { .modx1-shop .product-small.has-hover:hover .box-image a:has(img.back-image) img:not(.back-image) { opacity: 0; } } .modx1-shop .product-small .box-text { padding: 12px 14px 16px; } .modx1-shop .product-small .product-title, .modx1-shop .product-small .name a { color: var(--x1-ink-700, #33414f); font-weight: 600; } .modx1-shop .product-small .product-title:hover { color: var(--x1-navy-800); } .modx1-shop .product-small .category { color: var(--x1-ink-500); font-size: 11px; } /* ---- Zonă de preț în carduri ---- Un bloc distinct, separat de titlu printr-o linie subțire și puțin aer, ca prețul să nu mai stea lipit de titlu. Arată la fel de bine la preț întreg și la promoție: prețul curent e mereu dominant, cel vechi tăiat, mic, deasupra. */ .modx1-shop .product-small .price-wrapper { margin: 10px 0 2px; padding-top: 11px; border-top: 1px solid var(--x1-line, #e6e9ee); } .modx1-shop .product-small .price { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.08; } .text-left.product-small .price, .product-small.text-left .price { align-items: flex-start; } /* Prețul CURENT — dominant, indiferent de starea de promoție. */ .modx1-shop .price > .amount, .modx1-shop .price > bdi, .modx1-shop .price ins, .modx1-shop .price ins .amount { color: var(--x1-ink-900, #0f1b2d); font-weight: 800; font-size: 19px; text-decoration: none; } .modx1-shop .price ins { background: transparent; } /* La promoție prețul curent capătă și culoarea de accent, ca să „sară". */ .modx1-shop .price ins .amount { color: var(--x1-red-500, #e23b3b); } .modx1-shop .price .woocommerce-Price-currencySymbol { font-size: .72em; font-weight: 700; } /* Prețul VECHI — tăiat, mic, gri, așezat înaintea celui curent. */ .modx1-shop .price del { order: -1; margin: 0; } .modx1-shop .price del .amount { color: var(--x1-ink-500, #6b7785); font-weight: 500; font-size: 13px; } /* rating */ .modx1-shop .star-rating::before, .modx1-shop .star-rating span::before { color: var(--x1-star, #f5a623); } /* Wishlist pe cardurile din loop (woocommerce_after_shop_loop_item): sus-dreapta peste imagine, ca pe cardurile X1. `.modx1-card-wish` (frontend.css) dă deja position/top/right. */ .modul-x1-active .product-small.box { position: relative; } .modx1-loop-wish { position: absolute; top: 10px; right: 10px; z-index: 4; margin: 0; } /* badge reducere — culoarea e pe FUNDALUL badge-ului (.badge-inner), iar span-ul intern .onsale rămâne transparent (doar text), ca să NU apară 2 fundaluri suprapuse (era roșu peste navy). Implicit roșu; tier-ul (sale_badge_tiers) îl poate schimba. */ /* Poziție badge IDENTICĂ cu cardul X1 (.modx1-discount): sus-stânga, decalat 10px (nu lipit de colț). Flatsome îl pune flush în .badge-container — îl decalăm. */ .modul-x1-active .product-small .badge-container, .modul-x1-active .product-small .badge-container.absolute { top: 10px !important; left: 10px !important; right: auto !important; margin: 0 !important; } .modul-x1-active .product-small .badge-container .badge { margin: 0 0 4px !important; } /* Badge IDENTIC cu cardul X1: dreptunghi rotunjit compact, pe O SINGURĂ linie. */ .modul-x1-active .product-small .badge, .modul-x1-active .product-small .badge.badge-circle { width: auto !important; max-width: none !important; min-width: 0 !important; } /* SCOPAT LA CARDURI DE PRODUS. `.badge`/`.badge-inner` sunt clase GENERICE Flatsome: le folosesc și badge-ul de dată de la articole (`entry-post-date.php`, `[blog_posts]`) și widgetul „Articole recente" (cu miniatură ca background pe `.badge-inner.bg-fill`). Nescopate, regulile de mai jos transformau data articolului într-un dreptunghi ROȘU cu textul turtit pe un rând („05Jul"), pe fiecare pagină unde se încarcă acest fișier — adică tot magazinul, căutarea, coșul, checkout-ul, contul și homepage-ul. Ele colorau și badge-ul „New" al temei în roșul de reducere. */ .modul-x1-active .product-small .badge .badge-inner, .modul-x1-active li.product .badge .badge-inner, .modul-x1-active .badge-container .badge .badge-inner { background-color: var(--x1-red-500); color: #fff; border: 0; border-radius: 6px; /* Override forma circulară Flatsome (.badge-circle) → dreptunghi compact, conținut, O LINIE. */ display: inline-block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 4px 8px !important; line-height: 1.12 !important; font-size: 11px; font-weight: 700; white-space: nowrap !important; } /* Conținutul intern (label „REDUCERE" + procent) pe aceeași linie, nu stivuit. Tot scopat la carduri: `br`-ul pe care îl ascundem e exact cel care separă ziua de lună în badge-ul de dată al articolelor. */ .modul-x1-active .product-small .badge .badge-inner *, .modul-x1-active li.product .badge .badge-inner *, .modul-x1-active .badge-container .badge .badge-inner * { display: inline !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; line-height: 1.12 !important; } .modul-x1-active .product-small .badge .badge-inner br, .modul-x1-active li.product .badge .badge-inner br, .modul-x1-active .badge-container .badge .badge-inner br { display: none !important; } .modul-x1-active .badge .onsale { background: transparent !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-weight: 700; } /* sortare / rezultate / paginare */ .modx1-shop .woocommerce-ordering select, .modx1-shop select { border: 1px solid var(--x1-line); border-radius: var(--x1-radius-sm); } .modx1-shop .woocommerce-result-count { color: var(--x1-ink-500); } .modx1-shop ul.page-numbers a, .modx1-shop ul.page-numbers span { border-radius: var(--x1-radius-sm); } .modx1-shop ul.page-numbers .current { background: var(--x1-navy-800); color: #fff; border-color: var(--x1-navy-800); } /* ============================================================ PAGINA DE PRODUS (detalii) ============================================================ */ .modx1-single .product-title, .modx1-single .product_title { color: var(--x1-ink-900); font-weight: 800; } .modx1-single .product .price, .modx1-single .product .price .amount { color: var(--x1-ink-900); font-weight: 800; } .modx1-single .product .price del .amount { color: var(--x1-ink-500); font-weight: 500; } .modx1-single .product .price ins .amount { color: var(--x1-red-500); } /* Preț: cel tăiat sus, prețul normal (curent) dedesubt — nu pe același rând */ .modx1-single .product-main .price { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .modx1-single .product-main .price del { order: 1; font-size: 15px; } .modx1-single .product-main .price ins { order: 2; text-decoration: none; } /* stoc — stilul e acum GLOBAL în modx1-frontend.css (.modul-x1-active .stock), se aplică la toate produsele din temă, nu doar pe paginile X1. */ /* buton mare adaugă în coș */ .modx1-single .single_add_to_cart_button { padding: 14px 28px !important; font-size: 15px !important; } /* taburi (descriere / recenzii) */ .modx1-single .woocommerce-tabs .tabs li a { color: var(--x1-ink-700); font-weight: 600; } .modx1-single .woocommerce-tabs .tabs li.active a, .modx1-single .woocommerce-tabs .tabs li a:hover { color: var(--x1-navy-800); } .modx1-single .woocommerce-tabs .tabs li.active a { box-shadow: inset 0 -2px 0 var(--x1-orange-500); } /* secțiuni titluri (related / upsells) */ .modx1-single .related > h2, .modx1-single .up-sells > h2, .modx1-single .related-products h3, .modx1-single h2.product-section-title { color: var(--x1-cat-title, var(--x1-ink-900)); font-weight: 800; } /* cardurile din „produse similare” preiau stilul de listă */ .modx1-single .related .product-small.box, .modx1-single .up-sells .product-small.box { background: var(--x1-card, #fff); border: 1px solid var(--x1-line); border-radius: var(--x1-radius); overflow: hidden; } /* breadcrumb */ .modx1-shop .breadcrumbs, .modx1-single .breadcrumbs { color: var(--x1-ink-500); } .modx1-shop .breadcrumbs a, .modx1-single .breadcrumbs a { color: var(--x1-navy-800); } /* ---- Cantitate +/- aliniate (opțiune: product_qty_align) ---- */ .modx1-pqty .quantity, .modx1-pqty .quantity .minus, .modx1-pqty .quantity .plus, .modx1-pqty .quantity input.qty { box-sizing: border-box; } .modx1-pqty .quantity { display: inline-flex; align-items: center; } .modx1-pqty .quantity .minus, .modx1-pqty .quantity .plus, .modx1-pqty .quantity input.qty { height: 40px; line-height: 40px; } .modx1-pqty .quantity input.qty { padding: 0; text-align: center; min-width: 44px; } /* ---- Galerie de produs mai mare pe desktop ---- Flatsome dă galeriei `large-6` = 50% din rând. O lărgim la 58%, iar sumarul (`col-fit`, flex:1) preia automat restul. Doar pe ecrane largi — pe mobil galeria e oricum full-width. */ @media (min-width: 850px) { .modx1-single .product-gallery.large-6 { flex-basis: 58%; max-width: 58%; } } /* ---- Logo brand pe pagina de produs (opțiune: product_brand_logo) ---- Randat la finalul .product_meta (după SKU/categorii/etichete), ca pe Pentagon. */ .modx1-single .modx1-brandlogos { display: flex; align-items: center; gap: 16px; margin: 12px 0 4px; flex-wrap: wrap; } .modx1-single .modx1-brandlogo { display: inline-flex; } .modx1-single .modx1-brandlogo img { max-height: 64px; width: auto; max-width: 180px; object-fit: contain; } .modx1-single .modx1-brandlogo--text { font-weight: 700; font-size: 16px; color: var(--x1-ink-900); text-decoration: none; } /* ---- Cod (SKU) sub titlu în cardurile din loop (opțiune: loop_sku), ca pe Pentagon ---- Chip cu bordură subțire discretă + colțuri rotunjite, ca să nu se confunde cu prețul. */ .modx1-loop-sku { display: inline-block; font-size: 11.5px; line-height: 1; letter-spacing: .01em; white-space: nowrap; color: var(--x1-muted, #7a8699); padding: 5px 10px; margin: 4px 0 6px; border: 1px solid var(--x1-line, #eef1f5); border-radius: 999px; /* `--x1-surface` nu e definită nicăieri (nici în CSS, nici în css_vars()) — era mereu fallback-ul. Folosim variabila reală de fundal de card, care urmează setarea. */ background: var(--x1-card, #fff); } /* Aliniere icon↔text: `vertical-align: middle` pe ambele, pe metricile inline reale */ .modx1-loop-sku__i { vertical-align: middle; opacity: .55; margin-right: 5px; margin-top: -1px; } .modx1-loop-sku__l, .modx1-loop-sku__v { vertical-align: middle; } .modx1-loop-sku__l { opacity: .8; } .modx1-loop-sku__v { color: var(--x1-ink-700, #46586f); font-weight: 700; } /* ---- Logo brand + stoc în cardurile din loop (opțiuni: loop_brand_logo / loop_stock) ---- */ .modx1-loop-meta { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 9px 0 2px; } .modx1-loop-brand img { max-height: 46px; width: auto; max-width: 130px; object-fit: contain; display: block; } /* Cardurile Flatsome centrează textul; păstrăm alinierea la stânga dacă tema o cere */ .text-left .modx1-loop-meta { align-items: flex-start; } /* ---- Indicator de stoc stilizat (produs + loop) — punct pulsatoriu, 3 culori ---- Verde = în stoc · Portocaliu = stoc limitat · Roșu = epuizat. */ .modx1-stock { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .01em; } .modx1-stock .modx1-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } /* Halo-ul pulsatoriu din spatele punctului */ .modx1-stock .modx1-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: modx1-stock-pulse 1.8s ease-out infinite; } .modx1-stock.is-in { color: var(--x1-stock-in, #1f9d55); } .modx1-stock.is-in .modx1-dot { background: var(--x1-stock-in, #1f9d55); } .modx1-stock.is-low { color: var(--x1-stock-low, #e08a1e); } .modx1-stock.is-low .modx1-dot { background: var(--x1-stock-low, #e08a1e); } .modx1-stock.is-backorder { color: var(--x1-stock-bo, #2f74d0); } .modx1-stock.is-backorder .modx1-dot { background: var(--x1-stock-bo, #2f74d0); } .modx1-stock.is-out { color: var(--x1-stock-out, #e23b3b); } .modx1-stock.is-out .modx1-dot { background: var(--x1-stock-out, #e23b3b); } .modx1-stock.is-out .modx1-dot::after { animation: none; } /* epuizat = static, fără puls */ @keyframes modx1-stock-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .modx1-stock .modx1-dot::after { animation: none; } } /* Pe pagina de produs indicatorul e mai mare și cu puțin aer, ca pe Pentagon. */ .modx1-single p.stock.modx1-stock-p { margin: 6px 0 14px; padding: 0; font-weight: 700; } .modx1-single .modx1-stock { font-size: 15px; } .modx1-single .modx1-stock .modx1-dot { width: 10px; height: 10px; } /* În card indicatorul e ceva mai compact. */ .modx1-loop-meta .modx1-stock { font-size: 12.5px; } /* ---- Badge countdown promoție (opțiune: product_sale_countdown) ---- */ .modx1-promo-badge { display: inline-flex; align-items: center; gap: 10px; margin: 10px 0; padding: 7px 12px; border-radius: 8px; background: #eef6fb; border: 1px solid color-mix(in srgb, var(--x1-navy-800) 30%, transparent); } .modx1-promo-badge .modx1-cd-label { font-size: 12.5px; font-weight: 600; color: var(--x1-ink-700); } .modx1-promo-badge .modx1-cd { display: inline-flex; gap: 6px; } .modx1-promo-badge .modx1-cd-u { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; padding: 3px 6px; background: #fff; border: 1px solid var(--x1-line); border-radius: 6px; line-height: 1; } .modx1-promo-badge .modx1-cd-u b { font-size: 15px; font-weight: 800; color: var(--x1-navy-800); font-variant-numeric: tabular-nums; } .modx1-promo-badge .modx1-cd-u i { margin-top: 3px; font-size: 9px; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--x1-ink-500); } .modx1-promo-badge.is-urgent { background: #fff1f1; border-color: #ffb3b3; } .modx1-promo-badge.is-urgent .modx1-cd-label { color: var(--x1-red-500); } .modx1-promo-badge.is-urgent .modx1-cd-u b { color: var(--x1-red-500); } .modx1-promo-badge.is-urgent .modx1-cd-u { border-color: #ffc9c9; } /* ---- Buton consultanță WhatsApp (opțiune: product_whatsapp + nr. din setări) ---- */ .modx1-single .modx1-wa { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 14px; padding: 7px 13px; border-radius: 999px; background: #f7f9fb; border: 1px solid var(--x1-line); font-size: 13.5px; font-weight: 600; color: var(--x1-ink-700); text-decoration: none; transition: .2s; } .modx1-single .modx1-wa:hover { background: #e7f7ee; border-color: #25d366; color: #1f7a4d; } .modx1-single .modx1-wa__icon { display: inline-flex; color: #25d366; flex: 0 0 auto; } .modx1-single .modx1-wa__t--m { display: none; } @media (max-width: 549px) { .modx1-single .modx1-wa__t--d { display: none; } .modx1-single .modx1-wa__t--m { display: inline; } } /* ---- Pachete (bundle) pe pagina produs (opțiune: bundles_enabled) ---- */ .modx1-single .modx1-bundle-box { margin: 10px 0 14px; padding: 12px 14px; background: #f5fbff; border-left: 4px solid var(--x1-navy-800); border-radius: 6px; font-size: 13px; } .modx1-single .modx1-bundle-box > strong { display: block; margin-bottom: 8px; color: var(--x1-navy-800); } .modx1-single .modx1-bundle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .modx1-single .modx1-bundle-row span { flex: 1; color: var(--x1-ink-700); } .modx1-bundle-add { display: inline-block; background: var(--x1-orange-500); color: #fff !important; border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; line-height: 1.3; } .modx1-bundle-add:hover { background: var(--x1-orange-600); } /* ---- Mesaje pachete în coș / checkout ---- */ .modx1-bundle-note { width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 8px; margin: 12px 0; font-size: 13.5px; } .modx1-bundle-note strong { display: block; margin-bottom: 6px; color: var(--x1-navy-800); } .modx1-bundle-note ul { margin: 0; padding-left: 2px; list-style: none; } .modx1-bundle-note li { margin: 4px 0; line-height: 1.4; } .modx1-bundle-note--active { background: #eaf6ff; } .modx1-bundle-note--avail { background: #fff7ea; } /* ---- Badge-uri produs (opțiune: badges_enabled) ---- */ .modx1-single .modx1-badges { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-width: 460px; } .modx1-single .modx1-badge { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--x1-line); border-radius: 10px; background: #fff; } .modx1-single .modx1-badge__ic { width: 24px; height: 24px; border-radius: 50%; background: var(--x1-navy-800); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; } .modx1-single .modx1-badge__logo { width: 34px; flex: 0 0 auto; } .modx1-single .modx1-badge__logo img { display: block; width: 100%; height: auto; object-fit: contain; } .modx1-single .modx1-badge__c { display: flex; flex-direction: column; } .modx1-single .modx1-badge__t { font-weight: 700; font-size: 13.5px; color: var(--x1-ink-900); line-height: 1.2; } .modx1-single .modx1-badge__x { font-size: 12.5px; color: var(--x1-ink-500); line-height: 1.35; } /* ============================================================ PRODUS — POLISH MOBIL (preluat & curățat din Pentagon) ============================================================ */ @media (max-width: 849px) { /* galeria: imaginea mare limitată, thumbnails complet vizibile */ .modx1-pmob .woocommerce-product-gallery, .modx1-pmob .product-gallery { max-height: none !important; overflow: visible !important; margin-bottom: 10px !important; } .modx1-pmob .woocommerce-product-gallery__wrapper, /* Limităm IMAGINEA, nu viewport-ul. Galeria Flatsome e Flickity cu `adaptiveHeight`, care scrie `height` inline pe `.flickity-viewport`; un `max-height !important` peste înălțimea calculată tăia pur și simplu pozele în format portret. Constrângând imaginea, Flickity recalculează corect și nimic nu se mai taie. */ .modx1-pmob .product-gallery .woocommerce-product-gallery__image img, .modx1-pmob .woocommerce-product-gallery .woocommerce-product-gallery__image img { max-height: 55vh; width: auto; margin-left: auto; margin-right: auto; object-fit: contain; } /* (Regulile pentru `.flex-control-thumbs` au fost scoase: sunt din FlexSlider, pe care Flatsome nu îl folosește — erau cod mort.) */ /* breadcrumb + titlu compacte */ .modx1-pmob .woocommerce-breadcrumb { font-size: 12px !important; line-height: 1.25 !important; margin: 6px 0 !important; } .modx1-pmob .product-title, .modx1-pmob h1.product-title { font-size: 20px !important; line-height: 1.2 !important; margin: 8px 0 !important; } .modx1-pmob .product-main { padding-top: 10px !important; } /* titluri compacte în „produse similare" */ .modx1-pmob .title-wrapper .woocommerce-loop-product__title a { font-size: 14px !important; line-height: 1.15 !important; } .modx1-pmob .title-wrapper .woocommerce-loop-product__title { margin: 6px 0 0 !important; } } @media (max-width: 549px) { .modx1-pmob h1.product-title { font-size: 16.5px !important; line-height: 1.15 !important; margin: 6px 0 8px !important; font-weight: 600; letter-spacing: -.2px; } /* breadcrumb pe o linie, fără ultima categorie */ .modx1-pmob nav.woocommerce-breadcrumb.breadcrumbs { font-size: 12px; line-height: 1.2; opacity: .75; margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modx1-pmob nav.woocommerce-breadcrumb.breadcrumbs a:last-of-type, .modx1-pmob nav.woocommerce-breadcrumb.breadcrumbs .divider:last-of-type { display: none; } .modx1-pmob .product-summary .is-divider.small { display: none !important; } /* preț del/ins pe un rând, centrat */ .modx1-pmob .price-wrapper { margin: 10px 0 14px; } .modx1-pmob .price-wrapper .price { display: flex; justify-content: center; align-items: baseline; gap: 12px; flex-wrap: wrap; text-align: center; } .modx1-pmob .price-wrapper del { opacity: .65; font-size: 16px; margin: 0; white-space: nowrap; } .modx1-pmob .price-wrapper ins { font-size: 20px; font-weight: 700; margin: 0; white-space: nowrap; text-decoration: none; } } /* ============================================================ Widget filtrare după brand (class-modx1-brand-filter.php) ============================================================ */ .modx1-brandfilter { list-style: none; margin: 0; padding: 0; } .modx1-brandfilter .modx1-bf-item { margin: 0; } /* ---- stil listă cu bife ---- */ .modx1-brandfilter.is-list .modx1-bf-item a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--x1-ink-700, #33414f); font-size: 13.5px; line-height: 1.2; transition: background .14s ease, color .14s ease; } .modx1-brandfilter.is-list .modx1-bf-item a:hover { background: #f4f6f9; color: var(--x1-ink-900, #0f1b2d); } .modx1-bf-check { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--x1-line, #cfd6e0); background: #fff; position: relative; transition: border-color .14s, background .14s; } .modx1-bf-item.is-on .modx1-bf-check { background: var(--x1-navy-800, #0c2340); border-color: var(--x1-navy-800, #0c2340); } .modx1-bf-item.is-on .modx1-bf-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .modx1-bf-logo { flex: 0 0 auto; display: inline-flex; align-items: center; } .modx1-bf-logo img { max-height: 20px; max-width: 42px; width: auto; object-fit: contain; display: block; } .modx1-bf-name { flex: 1; } .modx1-bf-item.is-on .modx1-bf-name { font-weight: 700; color: var(--x1-navy-800, #0c2340); } .modx1-bf-count { flex: 0 0 auto; font-size: 12px; color: var(--x1-ink-500, #6b7785); } /* ---- stil grilă de sigle ---- */ .modx1-brandfilter.is-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .modx1-brandfilter.is-logos .modx1-bf-item a { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; padding: 8px; border: 1px solid var(--x1-line, #e6e9ee); border-radius: 8px; background: #fff; transition: border-color .14s, box-shadow .14s; overflow: hidden; /* nicio siglă nu iese din box */ } .modx1-brandfilter.is-logos .modx1-bf-item a:hover { border-color: #cbd3dd; } .modx1-brandfilter.is-logos .modx1-bf-item.is-on a { border-color: var(--x1-navy-800, #0c2340); box-shadow: inset 0 0 0 1px var(--x1-navy-800, #0c2340); } /* Wrapper-ul trebuie să aibă lățime definită (100% din box) ca `max-width:100%` al imaginii să se raporteze la BOX, nu la sigla însăși (altfel constrângere circulară). */ .modx1-brandfilter.is-logos .modx1-bf-logo { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-width: 0; height: 100%; } .modx1-brandfilter.is-logos .modx1-bf-logo img { max-height: 34px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } /* Stil listă: sigla lângă nume, tot constrânsă. */ .modx1-brandfilter.is-list .modx1-bf-logo img { max-height: 22px; max-width: 64px; width: auto; height: auto; object-fit: contain; } /* ---- Plasă de siguranță: nicio siglă de brand nu depășește niciodată containerul ---- (Caruselul e exclus intenționat — are înălțime fixă proprie; `height:auto` i-ar strica-o.) */ .modx1-brandfilter img, .modx1-loop-brand img, .modx1-single .modx1-brandlogo img, .modx1-brand-logo img { max-width: 100%; height: auto; } /* Numărul de produse ca badge mic în colț (stil grilă de sigle). */ .modx1-brandfilter.is-logos .modx1-bf-count { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--x1-ink-500, #6b7785); background: #f1f4f8; border-radius: 8px; } .modx1-brandfilter.is-logos .modx1-bf-item.is-on .modx1-bf-count { color: #fff; background: var(--x1-navy-800, #0c2340); } .modx1-bf-clear { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--x1-red-500, #e23b3b); text-decoration: none; } .modx1-bf-clear:hover { text-decoration: underline; } /* ============================================================ Pagina de CATEGORIE — plăci de subcategorii + titlu (modx1-catgrid) Gated de toggle-ul restyle_cat_tiles. Scopat pe arhive categorie/etichetă. ============================================================ */ /* Titlul categoriei: descrierea (adesea doar numele) devine un titlu curat, mai mare. */ .modx1-catgrid .term-description { margin: 4px 0 20px; } .modx1-catgrid .term-description > p:first-child { font-size: 26px; font-weight: 800; color: var(--x1-cat-title, var(--x1-ink-900, #0f1b2d)); line-height: 1.15; margin: 0 0 4px; } .modx1-catgrid .term-description > p:first-child::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 10px; background: var(--x1-orange-500, #f7841a); border-radius: 3px; } /* mai puțin spațiu gol sus */ .modx1-catgrid .shop-container > .woocommerce-notices-wrapper { margin: 0; } /* Plăcile de subcategorii ca CARDURI curate, imagine încadrată (nu 293px uriaș). */ .modx1-catgrid .product-category .col-inner { height: 100%; } .modx1-catgrid .product-category .box.box-bounce, .modx1-catgrid .product-category .box { height: 100%; border: 1px solid var(--x1-line, #e6e9ee); border-radius: 12px; overflow: hidden; background: var(--x1-cat-text-bg, #fff); /* fundal zonă text (corpul cardului), reglabil din X1 */ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .modx1-catgrid .product-category:hover .box { box-shadow: 0 8px 22px rgba(15,27,45,.10); transform: translateY(-3px); border-color: #d3d9e2; } .modx1-catgrid .product-category .box { position: relative; } .modx1-catgrid .product-category .box-image { position: relative; height: var(--x1-cat-tiles-h, 150px); margin: 0 !important; display: flex; align-items: center; justify-content: center; background: var(--x1-cat-img-bg, #fff); /* fundal zonă imagine, reglabil din X1 */ border-bottom: 1px solid var(--x1-line, #eef1f5); } .modx1-catgrid .product-category .box-image img, .modx1-catgrid .product-category .box-image > div { max-height: calc(var(--x1-cat-tiles-h, 150px) - 26px) !important; width: auto !important; height: auto !important; object-fit: contain; transition: transform .22s ease; } .modx1-catgrid .product-category:hover .box-image img { transform: scale(1.06); } /* Badge circular cu săgeată pe colțul imaginii — „intră în categorie". Persistent navy, devine portocaliu + se ridică ușor la hover (aer premium). */ .modx1-catgrid .product-category .box-image::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--x1-navy-800, #0c2340); /* săgeată → desenată ca SVG inline, alb, centrată */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-blend-mode: normal; box-shadow: 0 4px 12px rgba(12,35,64,.22); transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } /* păstrăm culoarea de fundal separat de SVG (background shorthand ar suprascrie imaginea) */ .modx1-catgrid .product-category .box-image::after { background-color: var(--x1-navy-800, #0c2340); } .modx1-catgrid .product-category:hover .box-image::after { background-color: var(--x1-orange-500, #f7841a); transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 16px rgba(247,132,26,.35); } /* text placă: nume + număr ca pastilă, centrat, compact */ .modx1-catgrid .product-category .box-text { padding: 13px 12px 15px; text-align: center; } /* Markup-ul REAL al plăcii de subcategorie (woocommerce/content-product-cat.php) e `.box-text > .box-text-inner > h5.uppercase.header-title`. Nu există `.name` acolo — aceea e clasa titlului de PRODUS — iar ``-ul e STRĂMOȘ al lui `.box-text`, deci `.box-text a` nu se potrivea cu nimic. Rezultat: controlul „Culoare nume subcategorie" nu făcea nimic, iar numele rămâneau UPPERCASE cu stilul temei. */ .modx1-catgrid .product-category .box-text .header-title, .modx1-catgrid .product-category .box-text .header-title a, .modx1-catgrid .product-category .box-text .name { font-size: 14px; font-weight: 700; color: var(--x1-cat-name, var(--x1-ink-900, #0f1b2d)); text-transform: none; letter-spacing: 0; line-height: 1.25; transition: color .16s ease; } .modx1-catgrid .product-category:hover .box-text .name, .modx1-catgrid .product-category:hover .box-text a { color: var(--x1-navy-800, #0c2340); } .modx1-catgrid .product-category .box-text .count { display: inline-block; margin-top: 9px; padding: 3px 11px; border-radius: 999px; background: var(--x1-cream-100, #f1f4f8); color: var(--x1-ink-500, #6b7785); font-size: 11px; font-weight: 700; letter-spacing: .02em; transition: background-color .16s ease, color .16s ease; } .modx1-catgrid .product-category:hover .box-text .count { background: rgba(247,132,26,.12); color: var(--x1-orange-600, #d9700f); } /* ---- Colapsare liste de filtre — „arată N, apoi «Mai multe»" (opțiune filters_collapse) ---- */ .modx1-filter-hidden { display: none !important; } .modx1-filter-more { display: inline-flex; align-items: center; gap: 7px; margin: 9px 0 2px; padding: 3px 0; background: none; border: 0; box-shadow: none; cursor: pointer; color: var(--x1-navy-800, #0c2340); font-size: 13px; font-weight: 600; line-height: 1.2; } .modx1-filter-more:hover { color: var(--x1-orange-500, #f7841a); } .modx1-filter-more:focus-visible { outline: 2px solid var(--x1-orange-500, #f7841a); outline-offset: 2px; } .modx1-fm-caret { width: 7px; height: 7px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } .modx1-filter-more.is-open .modx1-fm-caret { transform: translateY(1px) rotate(-135deg); } /* ========================================================================== FILTRE X1 — coloana construită din Modul X1 → Filtre ========================================================================== */ .modx1-filters { margin: 0 0 22px; } .modx1-filters-head { margin: 0 0 14px; } .modx1-filters-title { display: block; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--x1-navy-800, #0c2340); } /* ---- Filtre active ---- */ .modx1-filters-active { margin: 0 0 18px; padding: 12px 13px; background: var(--x1-cream-100, #f5efe2); border-radius: var(--x1-radius-sm, 8px); } .modx1-fa-label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--x1-ink-500, #6b7785); } .modx1-fa-chips { display: flex; flex-wrap: wrap; gap: 6px; } .modx1-fa-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; background: #fff; border: 1px solid var(--x1-line, #e6e9ee); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--x1-ink-900, #0f1b2d); text-decoration: none; } .modx1-fa-chip:hover { border-color: var(--x1-orange-500, #f7841a); color: var(--x1-orange-600, #d9700f); } .modx1-fa-chip:focus-visible { outline: 2px solid var(--x1-orange-500, #f7841a); outline-offset: 2px; } .modx1-fa-chip-x { position: relative; width: 9px; height: 9px; flex: 0 0 auto; opacity: .55; } .modx1-fa-chip-x::before, .modx1-fa-chip-x::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; } .modx1-fa-chip-x::before { transform: translateY(-50%) rotate(45deg); } .modx1-fa-chip-x::after { transform: translateY(-50%) rotate(-45deg); } .modx1-fa-chip:hover .modx1-fa-chip-x { opacity: 1; } .modx1-fa-clear { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--x1-red-500, #e23b3b); text-decoration: none; } .modx1-fa-clear:hover { text-decoration: underline; } /* ---- Un element de filtrare ---- */ .modx1-fl { margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--x1-line, #e6e9ee); } .modx1-fl:last-child { border-bottom: 0; padding-bottom: 0; } .modx1-fl-title { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--x1-navy-800, #0c2340); } .modx1-fl-list { margin: 0; padding: 0; list-style: none; } .modx1-fl-item { margin: 0; padding: 0; } .modx1-fl-item > a { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; line-height: 1.35; color: var(--x1-ink-700, #33414f); text-decoration: none; } .modx1-fl-item > a:hover { color: var(--x1-orange-600, #d9700f); } .modx1-fl-item > a:focus-visible { outline: 2px solid var(--x1-orange-500, #f7841a); outline-offset: 1px; } .modx1-fl-item.is-on > a { color: var(--x1-navy-800, #0c2340); font-weight: 700; } /* Indentarea taxonomiilor ierarhice (data-depth vine din PHP). */ .modx1-fl-item[data-depth="1"] > a { padding-left: 16px; } .modx1-fl-item[data-depth="2"] > a { padding-left: 32px; } .modx1-fl-item[data-depth="3"] > a { padding-left: 48px; } /* Bifa / butonul radio desenate în CSS — controlul real e linkul. */ .modx1-fl-mark { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--x1-line, #e6e9ee); border-radius: 3px; background: #fff; transition: border-color .14s ease, background-color .14s ease; } .modx1-fl--radio .modx1-fl-mark { border-radius: 50%; } .modx1-fl-item > a:hover .modx1-fl-mark { border-color: var(--x1-orange-500, #f7841a); } .modx1-fl-item.is-on .modx1-fl-mark { background: var(--x1-orange-500, #f7841a); border-color: var(--x1-orange-500, #f7841a); } .modx1-fl--checkbox .modx1-fl-item.is-on .modx1-fl-mark::after, .modx1-fl--dropdown .modx1-fl-item.is-on .modx1-fl-mark::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } .modx1-fl--radio .modx1-fl-item.is-on .modx1-fl-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; border-radius: 50%; } .modx1-fl-name { flex: 1 1 auto; min-width: 0; } .modx1-fl-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--x1-muted, #6b7785); } /* ---- Varianta „pastile" ---- */ .modx1-fl-list--boxlist { display: flex; flex-wrap: wrap; gap: 6px; } .modx1-fl-list--boxlist .modx1-fl-item > a { padding: 5px 11px; border: 1px solid var(--x1-line, #e6e9ee); border-radius: var(--x1-radius-sm, 8px); background: #fff; font-size: 12.5px; } .modx1-fl-list--boxlist .modx1-fl-item.is-on > a { border-color: var(--x1-orange-500, #f7841a); background: var(--x1-orange-500, #f7841a); color: #fff; } .modx1-fl-list--boxlist .modx1-fl-item.is-on .modx1-fl-count { color: rgba(255,255,255,.85); } .modx1-fl-list--boxlist .modx1-fl-item[data-depth] > a { padding-left: 11px; } /* ---- Butonul „Mai multe" ---- Fără JS, butonul nu ar face nimic — deci lista rămâne întreagă și butonul e ascuns. Ambele se activează abia sub `.js-ready`, pusă din JS. */ .modx1-fl-more { display: none; margin: 9px 0 0; padding: 3px 0; background: none; border: 0; box-shadow: none; cursor: pointer; color: var(--x1-navy-800, #0c2340); font-size: 13px; font-weight: 700; line-height: 1.2; } .modx1-filters.js-ready .modx1-fl-more { display: inline-block; } .modx1-fl-more:hover { color: var(--x1-orange-500, #f7841a); } .modx1-fl-more:focus-visible { outline: 2px solid var(--x1-orange-500, #f7841a); outline-offset: 2px; } .modx1-filters.js-ready .modx1-fl.is-collapsible:not(.is-open) .modx1-fl-item.is-hidden { display: none; } /* ---- Formularele (listă derulantă + preț) ---- */ .modx1-fl-form { margin: 0; } .modx1-fl-select { width: 100%; max-width: 100%; padding: 8px 10px; border: 1px solid var(--x1-line, #e6e9ee); border-radius: var(--x1-radius-sm, 8px); background: #fff; font-size: 13.5px; color: var(--x1-ink-900, #0f1b2d); } .modx1-fl-select:focus-visible { outline: 2px solid var(--x1-orange-500, #f7841a); outline-offset: 1px; } .modx1-fl-go { margin-top: 9px; padding: 7px 14px; background: var(--x1-navy-800, #0c2340); border: 0; border-radius: var(--x1-radius-sm, 8px); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; } .modx1-fl-go:hover { background: var(--x1-orange-500, #f7841a); } .modx1-fl-go:focus-visible { outline: 2px solid var(--x1-orange-500, #f7841a); outline-offset: 2px; } /* Când JS trimite singur lista derulantă, butonul devine redundant. */ .modx1-fl.js-auto .modx1-fl-go { display: none; } .modx1-price-row { display: flex; gap: 8px; } .modx1-price-f { flex: 1 1 0; min-width: 0; margin: 0; } .modx1-price-f > span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--x1-muted, #6b7785); } .modx1-price-f input { width: 100%; padding: 7px 9px; border: 1px solid var(--x1-line, #e6e9ee); border-radius: var(--x1-radius-sm, 8px); background: #fff; font-size: 13px; } .modx1-price-f input:focus-visible { outline: 2px solid var(--x1-orange-500, #f7841a); outline-offset: 1px; }