/* =================================================================== iMoteur Espace Pro - Stylesheet =================================================================== */ :root { /* Brand colors */ --imo-green: #3DA968; --imo-green-light: #5fc086; --imo-green-dark: #2d8552; --imo-green-gradient: linear-gradient(160deg, #7ed09a 0%, #3DA968 50%, #2d8552 100%); --imo-green-gradient-flat: linear-gradient(135deg, #5fc086 0%, #3DA968 100%); /* Surfaces */ --imo-bg: #ffffff; --imo-cream: #f5f5f0; --imo-cream-border: #e8e8e0; --imo-dark: #2d2d33; /* Karty zamówień — sterowane konfiguratorem /vehixo-config (option vx_card_bg / vx_card_border). Domyślne wartości; live override wstrzykiwany inline w z !important. */ --vx-card-bg: #F7F7F7; --vx-card-border: none; /* Text */ --imo-text: #0A0A0B; --imo-text-muted: #71717A; /* Status pills */ --imo-success-bg: #DCFCE7; --imo-success-text: #166534; --imo-warning-bg: #FEF3C7; --imo-warning-text: #854F0B; --imo-error-bg: #FEE2E2; --imo-error-text: #991B1B; /* Layout */ --imo-radius-card: var(--vx-radius,5px); --imo-radius-item: var(--vx-radius,5px); --imo-max-width: 1100px; --imo-sidebar-width: 340px; --imo-gap: 20px; /* Typography */ --imo-font-body: var(--vx-font); --imo-font-display: var(--vx-font); } /* ============ Layout container ============ */ .imo-page { max-width: var(--imo-max-width); margin: 0 auto; padding: 24px 16px; font-family: var(--imo-font-body); color: var(--imo-text); background: var(--imo-bg); } /* FIX: kontener siatki = .woocommerce (boutique NIE ma wrappera .woocommerce-MyAccount). Scope body.logged-in → strona logowania (wylogowany) NIE jest gridowana. */ body.logged-in.woocommerce-account .woocommerce { display: grid; grid-template-columns: var(--imo-sidebar-width) 1fr; gap: var(--imo-gap); max-width: var(--imo-max-width); margin: 0 auto; padding: 24px 16px; align-items: start; } body.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-account .entry-title { display: none; } /* C: bez nagłówka strony „My account" */ .woocommerce-account .woocommerce-MyAccount-content { flex: 1; min-width: 0; float: none; width: auto; } /* ============ Sidebar ============ */ .imo-sidebar { display: flex; flex-direction: column; gap: 14px; } .imo-customer-card { background: var(--vx-card-bg); border: var(--vx-card-border); box-shadow: none; border-radius: var(--imo-radius-card); padding: 18px 14px; display: flex; align-items: center; gap: 12px; } .imo-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--imo-green-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; font-family: var(--imo-font-display); flex-shrink: 0; } .imo-customer-card__info { min-width: 0; } .imo-customer-card__name { margin: 0; font-size: 18px; font-weight: 700; font-family: var(--imo-font-display); color: var(--imo-text); } .imo-customer-card__company { margin: 2px 0 0; font-size: 13px; color: var(--imo-text-muted); font-weight: 500; } .imo-menu { list-style: none; margin: 0; padding: 8px; background: var(--imo-cream); border-radius: var(--imo-radius-card); display: flex; flex-direction: column; gap: 3px; } .imo-menu__item { margin: 0; } .imo-menu__item a { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border-radius: var(--imo-radius-item); font-size: 17px; font-weight: 500; font-family: var(--imo-font-display); color: var(--imo-text); text-decoration: none; transition: background 0.15s; } .imo-menu__item a:hover { background: rgba(61, 169, 104, 0.08); } .imo-menu__icon { width: 40px; height: 40px; border-radius:var(--vx-radius,5px); background: var(--imo-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .imo-menu__item.is-active a { background: var(--imo-green-gradient); color: #fff; font-weight: 500; } .imo-menu__item.is-active .imo-menu__icon { background: rgba(255, 255, 255, 0.22); } .imo-menu__item.is-logout { margin-top: 8px; border-top: 1px solid var(--imo-cream-border); padding-top: 8px; } .imo-menu__item.is-logout a { color: var(--imo-text-muted); } .imo-menu__item.is-logout .imo-menu__icon { background: #a1a1aa; } /* ============ Page header ============ */ .imo-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .imo-page-icon { width: 50px; height: 50px; border-radius:var(--vx-radius,5px); background: var(--imo-green-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .imo-eyebrow { margin: 0; font-family: var(--imo-font-display); font-size: 12px; font-weight: 700; color: var(--imo-green); letter-spacing: 0.12em; text-transform: uppercase; } .imo-h2 { margin: 3px 0 0; font-family: var(--imo-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--imo-text); } .imo-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--imo-font-display); font-size: 21px; font-weight: 700; color: var(--imo-text); } /* ============ Order list cards ============ */ .imo-orders-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; } .imo-order-card { background: var(--vx-card-bg); border: var(--vx-card-border); border-radius: var(--imo-radius-card); overflow: hidden; display: grid; grid-template-columns: 100px 1fr auto; align-items: stretch; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; } .imo-order-card:hover { transform: translateY(-1px); box-shadow: none; } .imo-order-card__image { background: var(--imo-green-gradient-flat); display: flex; align-items: center; justify-content: center; color: #fff; } .imo-order-card__image img { width: 100%; height: 100%; object-fit: cover; } .imo-order-card__body { padding: 14px 0 14px 16px; min-width: 0; } .imo-order-card__heading { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; flex-wrap: wrap; } .imo-order-card__num { font-family: var(--imo-font-display); font-size: 19px; font-weight: 700; color: var(--imo-green); } .imo-order-card__summary { margin: 0; font-size: 15px; font-weight: 500; color: var(--imo-text); } .imo-order-card__date { margin: 3px 0 0; font-size: 13px; color: var(--imo-text-muted); } .imo-order-card__totals { padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; } .imo-order-card__price { font-family: var(--imo-font-display); font-size: 24px; font-weight: 700; color: var(--imo-dark); letter-spacing: -0.02em; } /* ============ Pills ============ */ .imo-pill { padding: 4px 11px; border-radius:var(--vx-radius,5px); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; display: inline-block; } .imo-pill--success { background: var(--imo-success-bg); color: var(--imo-success-text); } .imo-pill--warning { background: var(--imo-warning-bg); color: var(--imo-warning-text); } .imo-pill--error { background: var(--imo-error-bg); color: var(--imo-error-text); } /* ============ Buttons ============ */ .imo-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius:var(--vx-radius,5px); font-size: 14px; font-weight: 500; font-family: var(--imo-font-display); text-decoration: none; cursor: pointer; border: none; white-space: nowrap; transition: opacity 0.15s; } .imo-btn--primary { background: var(--imo-green-gradient); color: #fff; } .imo-btn--ghost { background: var(--imo-bg); color: var(--imo-green); border: 1px solid #c8e6c9; } .imo-btn:hover { opacity: 0.92; } /* ============ Detail page header ============ */ .imo-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .imo-detail-header__main { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; } .imo-back-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--imo-cream); display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; } .imo-detail-header__back { margin: 0; font-size: 14px; color: var(--imo-text-muted); font-weight: 500; } .imo-detail-header__actions { display: flex; gap: 8px; } /* ============ Order summary card (detail) ============ */ .imo-order-summary { background: var(--vx-card-bg); border: var(--vx-card-border); box-shadow: none; border-radius: var(--imo-radius-card); overflow: hidden; display: grid; grid-template-columns: 90px 1fr; align-items: stretch; margin-bottom: 11px; } .imo-order-summary__image { background: var(--imo-green-gradient-flat); display: flex; align-items: center; justify-content: center; color: #fff; } .imo-order-summary__image img { width: 100%; height: 100%; object-fit: cover; } .imo-order-summary__body { padding: 14px 16px; } .imo-order-summary__heading { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; flex-wrap: wrap; } .imo-order-summary__num { font-family: var(--imo-font-display); font-size: 21px; font-weight: 700; color: var(--imo-green); } .imo-order-summary__meta { margin: 0; font-size: 14px; color: var(--imo-text-muted); } /* ============ Product cards (detail) ============ */ .imo-products-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 11px; } .imo-product-card { background: var(--vx-card-bg); border: var(--vx-card-border); box-shadow: none; border-radius:var(--vx-radius,5px); overflow: hidden; display: grid; grid-template-columns: 100px 1fr auto; align-items: stretch; } .imo-product-card__image { background: linear-gradient(135deg, #fff 0%, #f0f7f0 100%); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--imo-cream-border); color: var(--imo-green); } .imo-product-card__image img { width: 100%; height: 100%; object-fit: cover; } .imo-product-card__body { padding: 14px 0 14px 16px; min-width: 0; } .imo-product-card__name { margin: 0; font-family: var(--imo-font-display); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--imo-text); } .imo-product-card__ref { margin: 5px 0 0; font-size: 13px; color: var(--imo-text-muted); } .imo-product-card__ref span { color: var(--imo-green); font-weight: 500; } .imo-product-card__qty { margin: 5px 0 0; font-size: 13px; font-weight: 500; color: var(--imo-text); } .imo-text-green { color: var(--imo-green); } .imo-product-card__total { padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .imo-product-card__total-label { font-size: 11px; color: var(--imo-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .imo-product-card__total-value { margin-top: 4px; font-family: var(--imo-font-display); font-size: 22px; font-weight: 700; color: var(--imo-dark); letter-spacing: -0.02em; } /* ============ Detail bottom (Adresses + Récapitulatif) ============ */ .imo-detail-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .imo-card { background: var(--vx-card-bg); border: var(--vx-card-border); box-shadow: none; border-radius:var(--vx-radius,5px); padding: 16px; } .imo-card__title { margin: 0 0 11px; font-family: var(--imo-font-display); font-size: 13px; color: var(--imo-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .imo-address { margin-bottom: 13px; } .imo-address__label { margin: 0 0 4px; font-size: 13px; color: var(--imo-text-muted); font-weight: 500; } .imo-address address { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 500; font-style: normal; color: var(--imo-text); } .imo-address--bordered { border-top: 1px solid var(--imo-cream-border); padding-top: 11px; } .imo-summary-row { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 14px; } .imo-summary-row span:first-child { color: var(--imo-text-muted); } .imo-summary-row span:last-child { font-family: var(--imo-font-display); font-weight: 500; color: var(--imo-text); } .imo-summary-row.is-free span:last-child { color: var(--imo-green); font-weight: 700; } .imo-summary-total { border-top: 2px solid #c8e6c9; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; } .imo-summary-total span:first-child { font-family: var(--imo-font-display); font-size: 16px; font-weight: 700; color: var(--imo-text); } .imo-summary-total span:last-child { font-family: var(--imo-font-display); font-size: 26px; font-weight: 700; color: var(--imo-dark); letter-spacing: -0.02em; } /* 2026-07-23 (Adrian): ujednolicenie czcionek recapu — WC wstrzykuje .woocommerce-Price-amount/small o wlasnych rozmiarach (Expedition/Moyen de paiement/Total mialy mieszane fonty). */ .imo-summary-row span:last-child .woocommerce-Price-amount, .imo-summary-row span:last-child .woocommerce-Price-currencySymbol, .imo-summary-row span:last-child bdi, .imo-summary-row span:last-child small { font-size: 14px !important; font-weight: 500 !important; font-family: var(--imo-font-display) !important; color: var(--imo-text) !important; } .imo-summary-total span:last-child { font-size: 24px; } .imo-summary-total span:last-child .woocommerce-Price-amount, .imo-summary-total span:last-child .woocommerce-Price-currencySymbol, .imo-summary-total span:last-child bdi { font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; color: inherit !important; letter-spacing: inherit !important; } .imo-summary-total span:last-child small, .imo-summary-total span:last-child small * { font-size: 14px !important; font-weight: 500 !important; color: var(--imo-text-muted) !important; letter-spacing: normal !important; } .imo-link { font-size: 15px; color: var(--imo-green); font-weight: 500; font-family: var(--imo-font-display); text-decoration: none; } .imo-text-right { text-align: right; } /* ============ Hamburger button (mobile only) ============ */ .imo-hamburger { display: none; background: transparent; border: none; color: #fff; padding: 6px; cursor: pointer; align-items: center; justify-content: center; } .imo-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; display: none; } .imo-overlay.is-visible { display: block; } /* ============ MOBILE - Drawer sidebar (< 900px) ============ */ @media (max-width: 900px) { .imo-hamburger { display: inline-flex; } body.logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; } .imo-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 85%; max-width: 360px; background: #fafaf7; z-index: 9999; transform: translateX(-100%); transition: transform 0.3s ease; padding: 50px 16px 16px; overflow-y: auto; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1); } .imo-sidebar.is-open { transform: translateX(0); } } /* ============ MOBILE - Cards stack (< 700px) ============ */ @media (max-width: 700px) { .imo-page { padding: 16px 12px; } .imo-page-header { gap: 10px; } .imo-h2 { font-size: 22px; } .imo-section-title { font-size: 18px; } /* Order list cards: image becomes a 120px banner on top */ .imo-order-card { grid-template-columns: 1fr; } .imo-order-card__image { height: 120px; } .imo-order-card__body { padding: 16px; } .imo-order-card__totals { padding: 0 16px 16px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .imo-order-card__totals .imo-btn { flex: 1; justify-content: center; padding: 14px; } /* Order summary header (detail) */ .imo-order-summary { grid-template-columns: 1fr; } .imo-order-summary__image { height: 90px; } /* Product cards: image banner on top */ .imo-product-card { grid-template-columns: 1fr; } .imo-product-card__image { height: 140px; border-right: none; border-bottom: 1px solid var(--imo-cream-border); } .imo-product-card__body { padding: 14px 16px; } .imo-product-card__total { padding: 12px 16px 14px; flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid var(--imo-cream-border); } /* Detail bottom stacks */ .imo-detail-summary { grid-template-columns: 1fr; } .imo-detail-header__actions { width: 100%; } .imo-detail-header__actions .imo-btn { flex: 1; justify-content: center; } } /* ============ PART 1 — szlif layoutu (panel wyżej, gap 100px, -10% desktop, bez białego tła, bez podkreśleń) ============ */ body.woocommerce-account .entry-header { display: none; } /* A: pusty nagłówek strony = źródło ~108px gapu */ body.logged-in.woocommerce-account .woocommerce { column-gap: 100px; row-gap: var(--imo-gap); } /* B */ @media (min-width: 901px) { body.logged-in.woocommerce-account .woocommerce { zoom: 0.9; } } /* C: -10% (zoom, NIE transform:scale; mobile bez zmian) */ body.logged-in.woocommerce-account .imo-page { background: transparent; padding: 0; max-width: none; } /* D: treść na szarym tle (karty zachowują .imo-cream) */ body.logged-in.woocommerce-account .woocommerce-MyAccount-content a, body.logged-in.woocommerce-account .imo-sidebar a { text-decoration: none; } /* E */ /* ============ PART 2/4 — akcje zamówień (Facture / Suivi / Retour) ============ */ .imo-order-row { display: flex; align-items: stretch; gap: 10px; } .imo-order-row .imo-order-card { flex: 1; min-width: 0; } .imo-order-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Stany ikon akcji — border ZAWSZE none. default/disabled: transparent + ikona #535354 | hover (każdy stan): #34B27A + #F7F7F7 enabled (data): #34B27A + #F7F7F7 (= gotowość) | enabled hover: #2E9D6A (micro-feedback) */ .imo-act { position: relative; width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius:var(--vx-radius,5px); display: flex; align-items: center; justify-content: center; background: transparent; color: #535354; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; outline: none; } .imo-act .imo-act-ic { display: flex; } .imo-act .imo-act-ic svg { width: 19px; height: 19px; } .imo-act .imo-act-label { display: none; } .imo-act:not(.is-disabled) { background: #34B27A; color: #F7F7F7; } .imo-act:hover, .imo-act:focus-visible { background: #34B27A; color: #F7F7F7; } .imo-act:not(.is-disabled):hover, .imo-act:not(.is-disabled):focus-visible { background: #2E9D6A; color: #F7F7F7; } .imo-act.is-disabled { cursor: default; } .imo-act-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #1A2620; color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; padding: 5px 9px; border-radius:var(--vx-radius,5px); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 20; } .imo-act-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1A2620; } .imo-act:hover .imo-act-tip, .imo-act:focus-visible .imo-act-tip { opacity: 1; } /* wariant przyciskowy (strona détail) — ikona + label */ .imo-order-actions--btn { flex-wrap: wrap; } .imo-order-actions--btn .imo-act { width: auto; height: 42px; padding: 0 16px; gap: 8px; font-family: var(--imo-font-display); font-size: 14px; font-weight: 500; } .imo-order-actions--btn .imo-act .imo-act-label { display: inline; } .imo-order-actions--btn .imo-act-tip { display: none; } /* mobile (<900px): pasek 3 podpisanych akcji pod kartą, bez tooltipów */ @media (max-width: 900px) { .imo-order-row { flex-direction: column; } .imo-order-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .imo-act { width: auto; height: auto; flex-direction: column; gap: 5px; padding: 10px 4px; border-radius:var(--vx-radius,5px); } .imo-act .imo-act-label { display: block; font-size: 11px; font-weight: 500; } .imo-act-tip { display: none; } } /* ============ FIX: ikonki akcji WEWNĄTRZ karty (cover-link + prawa kolumna) ============ */ .imo-order-card { position: relative; } .imo-order-card__cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .imo-order-card__totals { position: relative; z-index: 2; } .imo-order-card__actionrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; position: relative; z-index: 2; } .imo-order-card__detail { flex-shrink: 0; } /* desktop ≥701: w karcie ikony icon-only z tooltipem (nadpisuje mobilny grid z bloku PART 2) */ @media (min-width: 701px) { .imo-order-card .imo-order-actions { display: flex; } .imo-order-card .imo-act { width: 38px; height: 38px; flex-direction: row; border: none; border-radius:var(--vx-radius,5px); padding: 0; } .imo-order-card .imo-act .imo-act-label { display: none; } } /* mobile ≤700 (karta stackuje): pasek 3 podpisanych akcji pod treścią, détail ukryty (cover = tap) */ @media (max-width: 700px) { .imo-order-card__totals { flex-direction: column !important; align-items: stretch !important; } .imo-order-card__actionrow { flex-direction: column; align-items: stretch; gap: 0; margin-top: 10px; } .imo-order-card__detail { display: none; } .imo-order-card .imo-order-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .imo-order-card .imo-act { width: auto; height: auto; flex-direction: column; gap: 5px; padding: 10px 4px; border-radius:var(--vx-radius,5px); } .imo-order-card .imo-act .imo-act-label { display: block; font-size: 11px; font-weight: 500; } .imo-order-card .imo-act-tip { display: none; } } /* ============ FIX: wyrównanie wymiarów kart zamówień ============ */ /* A: ikony = wysokość przycisku „Voir le détail" (44px), kwadratowe; ikona ~48% */ .imo-order-card__actionrow { align-items: center; } @media (min-width: 701px) { .imo-order-card .imo-act { width: 44px; height: 44px; } .imo-order-card .imo-act .imo-act-ic svg { width: 21px; height: 21px; } .imo-order-card__detail { height: 44px; box-sizing: border-box; } } /* B: STAŁA wysokość karty = wzór N° 31 (devtools ~140px); tytuł max 2 linie + ellipsis (title="" pełna nazwa) */ .imo-order-card { min-height: 140px; } .imo-order-card__actionrow { border: none; border-top: none; } .imo-order-card__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* C: karty szersze ~50px w PRAWO (lewa krawędź bez zmian; -55px ≈ -50px po zoom 0.9) */ .woocommerce-MyAccount-content { margin-right: -110px; } @media (max-width: 700px) { .woocommerce-MyAccount-content { margin-right: 0; } } /* FIX: karty „Vos dernières commandes" (dashboard) — niższe o 20px, na stałe (140→120) */ .imo-orders-list--recent .imo-order-card { min-height: 110px; } .imo-orders-list--recent .imo-order-card__summary { -webkit-line-clamp: 1; } /* 1 linia → karta mieści się w 120px (pełna nazwa w title=) */ .imo-orders-list--recent .imo-order-card__body { padding-top: 10px; padding-bottom: 10px; } /* treść < 120 → karta = 120px (floor kontroluje, na stałe) */ .imo-orders-list--recent .imo-order-card__totals { padding-top: 5px; padding-bottom: 5px; } /* totals < 110 → floor 110 kontroluje wysokość */ /* ============ Panel klienta: ukrycie paska kategorii (.vx-menubar) ============ */ /* Pasek zostaje w DOM (display:none) → wraca natychmiast na innych stronach. Treść wjeżdża wyżej; gap pod headerem trzyma .vx-content padding-top. */ body.vx-hide-nav .vx-menubar { display: none; } /* ============ Pasek filtrów zamówień (/orders) ============ */ .imo-orders-filter { display: flex; align-items: center; gap: 8px; background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 10px 0; margin-bottom: 16px; } .imo-of-search { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--imo-cream-border); border-radius:var(--vx-radius,5px); padding: 0 12px; height: 42px; min-width: 0; box-sizing: border-box; } .imo-of-search svg { width: 18px; height: 18px; flex-shrink: 0; color: #9ca3af; } .imo-of-search input[type="search"], .imo-of-search input { flex: 1; min-width: 0; border: 0 none; background: none; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none; font-size: 14px; color: #2d2828; height: 100%; margin: 0; padding: 0; } .imo-of-search input[type="search"]:focus, .imo-of-search input:focus { border: 0 none; box-shadow: none; outline: none; } .imo-of-search input[type="search"]::-webkit-search-decoration, .imo-of-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .imo-of-select { height: 42px; box-sizing: border-box; border: 1px solid var(--imo-cream-border); border-radius:var(--vx-radius,5px); padding: 0 32px 0 12px; font-size: 14px; font-family: var(--imo-font-body); color: #2d2828; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2334B27A' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; flex-shrink: 0; } .imo-of-select::-ms-expand { display: none; } .imo-of-clear { font-size: 13px; font-weight: 500; color: var(--imo-green); text-decoration: none; cursor: pointer; padding: 0 6px; white-space: nowrap; flex-shrink: 0; } .imo-of-clear.is-hidden { display: none; } .imo-orders-list.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; } .imo-orders-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; } .imo-of-pageinfo { font-size: 13px; color: var(--imo-text-muted); } .imo-of-pagebtns { display: flex; gap: 14px; } .imo-of-pagebtn { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--imo-green); font-weight: 500; font-family: var(--imo-font-display); padding: 0; } .imo-of-pagebtn[disabled] { opacity: .4; cursor: default; } @media (max-width: 700px) { .imo-orders-filter { flex-wrap: wrap; } .imo-of-search { flex: 1 1 100%; } .imo-of-select { flex: 1 1 calc(50% - 4px); min-width: 0; } .imo-of-clear { flex: 1 1 100%; text-align: center; padding: 8px; } } /* ============ Miniaturka zamówienia: stack 3 kafelków + badge (1 poz = single) ============ */ .imo-order-card__image, .imo-order-summary__image { position: relative; } .imo-thumb-ph { width: 46px; height: 46px; color: #fff; opacity: .95; } .imo-thumb-stack { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .imo-thumb-inner { position: relative; width: 62px; height: 50px; } .imo-thumb-tile { position: absolute; width: 34px; height: 34px; border: 1.5px solid #fff; border-radius:var(--vx-radius,5px); background: #eaf5ee; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .imo-thumb-tile img { width: 100%; height: 100%; object-fit: cover; } .imo-thumb-tile svg { width: 16px; height: 16px; color: #3DA968; } .imo-thumb-tile--1 { top: 0; left: 0; z-index: 1; } .imo-thumb-tile--2 { top: 8px; left: 14px; z-index: 2; } .imo-thumb-tile--3 { top: 16px; left: 28px; z-index: 3; } .imo-thumb-badge { position: absolute; right: 6px; bottom: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius:var(--vx-radius,5px); background: #fff; color: #2d8552; font-size: 11px; font-weight: 700; font-family: var(--imo-font-display); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.18); z-index: 5; } /* A: wcięcie listy pozycji + label „ARTICLES · n" (strona détail) */ .imo-articles-label { margin: 0 0 10px 36px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--imo-text-muted); font-weight: 500; } .imo-products-list--indent { margin-left: 36px; } @media (max-width: 700px) { .imo-articles-label { margin-left: 16px; } .imo-products-list--indent { margin-left: 16px; } } /* ============ Popover zakresu dat (Personnalisé…) ============ */ .imo-of-periodwrap { position: relative; flex-shrink: 0; } .imo-of-daterange { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; background: #fff; border: 1px solid var(--imo-cream-border); border-radius:var(--vx-radius,5px); box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 14px; width: 280px; } .imo-of-daterange[hidden] { display: none; } .imo-of-dr-fields { display: flex; gap: 10px; } .imo-of-dr-label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--imo-text-muted); } .imo-of-dr-label input[type=date] { height: 38px; border: 1px solid var(--imo-cream-border); border-radius:var(--vx-radius,5px); padding: 0 10px; font-size: 13px; font-family: var(--imo-font-body); color: #2d2828; background: #fff; } .imo-of-dr-err { margin: 10px 0 0; font-size: 12px; color: #ef4444; } .imo-of-dr-err[hidden] { display: none; } .imo-of-dr-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; } .imo-of-dr-cancel { background: none; border: none; font-size: 13px; font-weight: 500; color: var(--imo-text-muted); cursor: pointer; padding: 0 10px; } .imo-of-dr-apply { height: 38px; padding: 0 16px; font-size: 13px; } @media (max-width: 700px) { .imo-of-periodwrap { flex: 1 1 calc(50% - 4px); min-width: 0; } .imo-of-periodwrap .imo-of-select { flex: 1 1 100%; width: 100%; } .imo-of-daterange { right: 0; left: auto; width: calc(100vw - 56px); max-width: 320px; } }