/* ===================================================================== * E-POTION Mega Menu — Stylesheet * ===================================================================== * .ep-desktop-shell → visible ≥ 1024 px * .ep-mobile-shell → visible ≤ 1023.98 px * ===================================================================== */ /* ==================== RESET ==================== */ .ep-site, .ep-site * { box-sizing: border-box; } .ep-site a { text-decoration: none; } .ep-site button { font: inherit; cursor: pointer; } .ep-site ul { list-style: none; margin: 0; padding: 0; } /* ==================== RESPONSIVE TOGGLE ==================== */ @media (max-width: 1023.98px) { .ep-desktop-shell { display: none !important; } .ep-mobile-shell { display: block; padding-top: 64px; } /* compensate for fixed mobile header */ } @media (min-width: 1024px) { .ep-desktop-shell { display: block; } .ep-mobile-shell { display: none !important; } /* CRITICAL: these get reparented to by JS, so the .ep-mobile-shell hide rule above doesn't reach them anymore. Hide them explicitly by class. */ .ep-m-header, .ep-m-drawer, .ep-m-overlay { display: none !important; } } .ep-desktop-shell { overflow: visible; } /* ==================== GOLD GRADIENT TEXT ==================== */ .ep-gold-text { background: linear-gradient(90deg, #fbbc04 0%, #ff8a3d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ===================================================================== * D E S K T O P * ===================================================================== */ /* ----- Utility bar (3-column grid) — taller, all icons gold ----- */ .ep-utility { height: 40px; background: #0e1116; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px; gap: 24px; } .ep-utility-left { display: flex; gap: 22px; justify-self: start; align-items: center; } .ep-utility-center { justify-self: center; } .ep-utility-socials { display: flex; align-items: center; gap: 6px; justify-self: end; } .ep-contact-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; transition: opacity .15s; } .ep-contact-link:hover { opacity: .82; } .ep-contact-icon { width: 16px; height: 16px; flex-shrink: 0; } .ep-rewards-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(211,214,219,.78); font-weight: 300; font-size: 13px; letter-spacing: .015em; transition: color .2s; white-space: nowrap; } .ep-rewards-icon { width: 15px; height: 15px; flex-shrink: 0; transition: transform .25s; } .ep-rewards-em { font-weight: 500; } .ep-rewards-arrow { color: #ff8a3d; transition: transform .2s; } .ep-rewards-link:hover { color: #fff; } .ep-rewards-link:hover .ep-rewards-icon { transform: scale(1.15) rotate(12deg); } .ep-rewards-link:hover .ep-rewards-arrow { transform: translateX(3px); } .ep-utility-socials a { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .15s, transform .15s; } .ep-utility-socials a:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); } .ep-utility-socials svg { width: 16px; height: 16px; } /* ----- Main header — symmetric grid ----- */ .ep-header { background: #fff; height: 96px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 0 40px; gap: 24px; border-bottom: 1px solid #e9ebee; } .ep-logo-link { justify-self: start; display: inline-flex; align-items: center; } .ep-logo-svg { height: 56px; width: auto; display: block; } .ep-search-wrap { justify-self: stretch; max-width: 720px; width: 100%; margin: 0 auto; } .ep-search { display: flex; align-items: center; background: #f6f7f9; border: 1.5px solid transparent; border-radius: 999px; height: 50px; padding: 0 6px 0 20px; transition: border-color .15s, background .15s; gap: 10px; } .ep-search:focus-within { border-color: #0e1116; background: #fff; } .ep-search > svg { color: #6b7280; flex-shrink: 0; } .ep-search-input.ep-search-input { flex: 1; height: 50px; padding: 0 14px; border: 0; outline: 0; background: transparent; font-size: 14px; color: #0e1116; min-width: 0; } .ep-search-input::placeholder { color: #6b7280; opacity: 1; } .ep-search-btn.ep-search-btn { height: 38px; padding: 0 18px; background: #0e1116; color: #fff; border: 0; border-radius: 999px; font-size: 13px; font-weight: 500; flex-shrink: 0; transition: background .15s; } .ep-search-btn:hover { background: #1f2229; } .ep-actions { justify-self: end; display: flex; align-items: center; gap: 10px; } .ep-icon-btn { width: 50px; height: 50px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: background .15s, color .15s, border-color .15s; } .ep-icon-btn svg { width: 22px; height: 22px; } .ep-account, .ep-fav { background: #fff; color: #0e1116; border: 1.5px solid #e0e3e7; } .ep-account:hover, .ep-fav:hover { background: #0e1116; color: #fff; border-color: #0e1116; } .ep-fav:hover svg { fill: #ee2832; stroke: #ee2832; } .ep-cart { background: #0e1116; color: #fff; border: 1.5px solid #0e1116; } .ep-cart:hover { background: #1f2229; } .ep-bubble { position: absolute; top: -6px; right: -6px; background: #ee2832; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; } /* ----- Trust strip — bigger, 5 items ----- */ .ep-trust { background: #fff; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 32px; border-bottom: 1px solid #e9ebee; } .ep-trust-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 22px; font-size: 14px; color: #4b5563; font-weight: 500; position: relative; } .ep-trust-item + .ep-trust-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: #e0e3e7; } .ep-trust-strong { color: #0e1116; font-weight: 600; } .ep-trust-stars-gold { color: #fbbc04; letter-spacing: -2px; font-size: 15px; } .ep-flag-ro { width: 22px; height: 16px; flex-shrink: 0; border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(0,0,0,.08); } .ep-google-g { width: 18px; height: 18px; flex-shrink: 0; } .ep-trust-icon { width: 20px; height: 18px; flex-shrink: 0; } .ep-trust-icon--package { color: #0e1116; } .ep-trust-icon--truck { color: #0e1116; } .ep-trust-icon--shield { color: #2d6e3e; } /* ----- Main nav — centered to viewport (no max-width), JS-toggled fixed ----- */ .ep-nav { background: #fff; border-bottom: 1px solid #e9ebee; position: relative; /* ← positioning context for the mega panels */ transition: box-shadow .25s ease; } .ep-nav.is-fixed { position: fixed !important; top: 0; left: 0; right: 0; z-index: 50; box-shadow: 0 4px 14px rgba(15,23,42,.08); } .ep-nav-list { display: flex; justify-content: center; align-items: stretch; padding: 0 40px; gap: 4px; width: 100%; } .ep-nav-item { position: static; } .ep-nav-link { display: inline-flex; align-items: center; gap: 6px; height: 60px; padding: 0 16px; color: #0e1116; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; transition: color .15s; position: relative; } .ep-nav-link:hover, .ep-nav-item:hover .ep-nav-link, .ep-nav-item.is-open .ep-nav-link { color: #ee2832; } .ep-nav-link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 14px; height: 2px; background: #ee2832; transform: scaleX(0); transform-origin: center; transition: transform .2s; } .ep-nav-item:hover .ep-nav-link::after, .ep-nav-item.is-open .ep-nav-link::after { transform: scaleX(1); } .ep-nav-link.is-new { color: #1a73e8; } .ep-nav-link.is-sale { color: #cc1f2b; } /* #cc1f2b on #fff = 5.5:1 contrast — passes WCAG AA (was #ee2832 = 4.2:1, failed) */ /* ----- Mega panels — centered under the whole nav ----- */ .ep-panel { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; background: #fff; border: 1px solid #e9ebee; border-top: 0; box-shadow: 0 18px 36px rgba(0,0,0,.06); border-radius: 0 0 12px 12px; opacity: 0; visibility: hidden; z-index: 40; transition: opacity .15s, visibility .15s; } .ep-nav-item.is-open .ep-panel { opacity: 1; visibility: visible; } .ep-panel-inner { display: flex; padding: 28px 32px; gap: 28px; } .ep-panel-cols { display: flex; gap: 28px; flex: 1; } .ep-col { min-width: 165px; flex: 1 1 0; } /* Per-layout panel widths */ .ep-panel--iqos { width: 880px; } .ep-panel--puffbar { width: 1160px; } .ep-panel--lichide { width: 1200px; } .ep-panel--arome { width: 960px; } .ep-panel--tigari { width: 1100px; } .ep-panel--atomizoare { width: 880px; } .ep-panel--pouch { width: 920px; } .ep-panel--accessorii { width: 720px; } /* Column sections */ .ep-col-section + .ep-col-section { margin-top: 19px; padding-top: 15px; border-top: 1px solid #f0f2f5; } .ep-col-header { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #6b7280; margin-bottom: 11px; display: block; } a.ep-col-header--link { color: #6b7280; transition: color .15s; } a.ep-col-header--link:hover { color: #ee2832; } .ep-col-items { display: flex; flex-direction: column; gap: 7px; } .ep-col-items--subcols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 7px; } .ep-col-items li { line-height: 1.35; } .ep-item { font-size: 13.5px; color: #374151; transition: color .12s; } .ep-item:hover { color: #ee2832; } .ep-item.is-bold { font-weight: 600; color: #0e1116; } .ep-item.is-promo { color: #ee2832; font-weight: 500; } /* Banner */ .ep-banner { width: 240px; flex-shrink: 0; padding: 22px 20px; border-radius: 14px; color: #fff; display: flex; flex-direction: column; align-items: flex-start; } .ep-banner-tag { display: inline-block; background: rgba(255,255,255,.2); padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; } .ep-banner-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; line-height: 1.15; letter-spacing: -.01em; } .ep-banner-subtitle { font-size: 12px; line-height: 1.5; margin: 0 0 16px; opacity: .9; } .ep-banner-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; background: #fff; color: #0e1116; font-size: 12px; font-weight: 600; border-radius: 999px; transition: transform .15s; } .ep-banner-cta:hover { transform: translateX(2px); } .ep-banner--iqos { background: linear-gradient(135deg, #5a4a3a 0%, #1f1f1f 100%); } .ep-banner--arome { background: linear-gradient(135deg, #ff8a3d 0%, #e64a19 100%); } .ep-banner--atomizoare { background: linear-gradient(135deg, #b8860b 0%, #5d4621 100%); } .ep-banner--pouch { background: linear-gradient(135deg, #2d6e3e 0%, #1f4d2c 100%); } .ep-banner--accessorii { background: linear-gradient(135deg, #6b6b73 0%, #3d3d44 100%); } /* ===================================================================== * M O B I L E * ===================================================================== */ .ep-mobile-shell { position: relative; } /* Fixed header — !important to override Shoptimizer */ .ep-m-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; height: 64px; background: #fff; border-bottom: 1px solid #e9ebee; transition: box-shadow .25s ease, border-color .25s ease; } .ep-m-header.is-scrolled { box-shadow: 0 4px 14px rgba(15,23,42,.08); border-bottom-color: transparent; } .ep-m-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; } .ep-m-logo-svg { height: 38px; width: auto; display: block; } .ep-m-actions { display: flex; align-items: center; gap: 8px; } .ep-m-cart { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #0e1116; } .ep-m-cart svg { width: 22px; height: 22px; } .ep-m-bubble { position: absolute; top: 2px; right: 2px; background: #ee2832; color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 1.5px solid #fff; } .ep-m-burger { width: 44px; height: 44px; border-radius: 50%; background: #0e1116; border: 0; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0; } .ep-m-burger-line { display: block; width: 22px; height: 2.5px; background: #fff; border-radius: 2px; } /* Trust strip — mobile, slightly bigger */ /* Mobile trust strip — auto-scrolling CSS marquee. The outer .ep-m-trust clips overflow; the inner .ep-m-trust__track holds TWO copies of the items and animates translateX(0) → translateX(-50%) so the second copy slides exactly into the first's place. Zero JS, pure GPU transform → negligible CPU/battery cost, throttled when off-screen. Speed: 22s per cycle = ~30-40 px/s, slow enough to read every item. Pauses on hover / active touch / prefers-reduced-motion. */ .ep-m-trust { background: #fff; border-bottom: 1px solid #e9ebee; overflow: hidden; position: relative; } .ep-m-trust__track { display: inline-flex; align-items: center; padding: 12px 0; white-space: nowrap; animation: ep-m-trust-scroll 22s linear infinite; will-change: transform; } /* Pause on user interaction (works for mouse hover AND mobile tap-and-hold) */ .ep-m-trust:hover .ep-m-trust__track, .ep-m-trust:active .ep-m-trust__track { animation-play-state: paused; } @keyframes ep-m-trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Accessibility: honor reduced-motion preference → kill animation, fall back to manual horizontal scroll so content is still reachable. */ @media (prefers-reduced-motion: reduce) { .ep-m-trust { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ep-m-trust::-webkit-scrollbar { display: none; } .ep-m-trust__track { animation: none; } } .ep-m-trust-item { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 0 14px; font-size: 12.5px; color: #4b5563; font-weight: 500; border-right: 1px solid #e9ebee; white-space: nowrap; } .ep-m-strong { color: #0e1116; font-weight: 600; } .ep-m-stars-gold { color: #fbbc04; letter-spacing: -2px; } /* Drawer overlay & panel — z-index hardened to 99999 + JS reparents to body */ .ep-m-overlay { position: fixed !important; inset: 0; background: rgba(15,23,42,.5); z-index: 99998 !important; opacity: 0; transition: opacity .25s; } .ep-m-overlay.is-open { opacity: 1; } .ep-m-drawer { position: fixed !important; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; z-index: 99999 !important; transform: translateX(100%); transition: transform .28s ease-out; display: flex; flex-direction: column; box-shadow: -8px 0 28px rgba(0,0,0,.12); } .ep-m-drawer.is-open { transform: translateX(0); } .ep-m-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; height: 60px; flex-shrink: 0; border-bottom: 1px solid #e9ebee; } .ep-m-drawer-title { font-size: 16px; font-weight: 600; color: #0e1116; margin: 0; } .ep-m-close { width: 42px; height: 42px; border-radius: 50%; background: #0e1116; border: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; padding: 0; } .ep-m-close svg { stroke: #fff; } .ep-m-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; } .ep-m-search-row { padding: 14px 16px 12px; } .ep-m-search-pill { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: #f6f7f9; border-radius: 999px; } .ep-m-search-pill svg { color: #6b7280; flex-shrink: 0; } .ep-m-search-pill input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color: #0e1116; min-width: 0; } .ep-m-search-pill input::placeholder { color: #6b7280; opacity: 1; } .ep-m-account-section { display: flex; gap: 8px; padding: 0 16px; align-items: stretch; } .ep-m-account-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f6f7f9; border-radius: 12px; color: #0e1116; } .ep-m-account-avatar { width: 38px; height: 38px; border-radius: 50%; background: #0e1116; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; } .ep-m-account-avatar svg { width: 22px; height: 22px; } .ep-m-account-text { flex: 1; min-width: 0; } .ep-m-account-greet { font-size: 13px; font-weight: 600; color: #0e1116; display: block; margin: 0 0 2px; } .ep-m-account-link { font-size: 11.5px; color: #6b7280; } .ep-m-fav { flex-shrink: 0; width: 60px; display: inline-flex; align-items: center; justify-content: center; background: #f6f7f9; border-radius: 12px; color: #0e1116; transition: background .15s; position: relative; } .ep-m-fav:active { background: #e8eaee; } .ep-m-fav svg { width: 24px; height: 24px; } .ep-m-fav-bubble { position: absolute; top: 6px; right: 8px; background: #ee2832; color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 1.5px solid #f6f7f9; } .ep-m-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px 6px; } .ep-m-quick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; background: #f6f7f9; border-radius: 12px; color: #0e1116; } .ep-m-quick-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #0e1116; position: relative; } .ep-m-quick-icon svg { width: 22px; height: 22px; } .ep-m-quick-bubble { position: absolute; top: -6px; right: -8px; background: #ee2832; color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } .ep-m-quick-label { font-size: 11px; font-weight: 500; color: #0e1116; } .ep-m-cat-list { margin: 14px 0 0; padding: 0; border-top: 1px solid #f0f2f5; } .ep-m-cat-list li { list-style: none; } .ep-m-cat-row { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f0f2f5; color: #0e1116; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; } .ep-m-cat-name { font-size: 15px; font-weight: 500; color: #0e1116; } .ep-m-cat-name--new { color: #1a73e8; font-weight: 600; } .ep-m-cat-name--sale { color: #ee2832; font-weight: 600; } .ep-m-cat-row svg { color: #9ca3af; } .ep-m-drawer-footer { padding: 24px 16px 28px; background: #f6f7f9; border-top: 1px solid #e9ebee; margin-top: 14px; } .ep-m-foot-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #4b5563; margin-bottom: 6px; } .ep-m-foot-row svg { color: #6b7280; flex-shrink: 0; } .ep-m-foot-row a { color: #0e1116; font-weight: 500; } .ep-m-foot-social { display: flex; gap: 10px; margin-top: 16px; justify-content: center; } .ep-m-foot-social a { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid #e9ebee; display: inline-flex; align-items: center; justify-content: center; color: #0e1116; transition: background .15s; } .ep-m-foot-social a:hover { background: #0e1116; color: #fff; } /* Ensure inline SVGs without explicit width/height render at a sane size on iOS Safari */ .ep-m-foot-social a svg, .ep-m-foot-row svg { width: 20px; height: 20px; flex-shrink: 0; } .ep-m-foot-row svg { width: 14px; height: 14px; } /* Sub-panels */ .ep-m-subpanel { position: absolute; inset: 0; background: #fff; z-index: 20; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s ease-out; } .ep-m-subpanel.is-open { transform: translateX(0); } .ep-m-sub-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; height: 60px; flex-shrink: 0; border-bottom: 1px solid #e9ebee; } .ep-m-sub-back { width: 40px; height: 40px; border-radius: 50%; background: #0e1116; border: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; padding: 0; } .ep-m-sub-back svg { stroke: #fff; } .ep-m-sub-title { flex: 1; font-size: 16px; font-weight: 600; color: #0e1116; margin: 0; } .ep-m-sub-close { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; color: #0e1116; padding: 0; } .ep-m-sub-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; } .ep-m-sub-allcat { display: block; margin: 14px 16px 6px; padding: 12px 14px; background: #fff5f5; border: 1px solid #ffd1d1; border-radius: 10px; color: #ee2832; font-size: 13px; font-weight: 600; } .ep-m-sub-section { padding: 12px 0; } .ep-m-sub-section-h { padding: 8px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; } .ep-m-sub-items { padding: 0; margin: 0; } .ep-m-sub-items li { list-style: none; } .ep-m-sub-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #0e1116; font-size: 14px; border-bottom: 1px solid #f5f6f8; } .ep-m-sub-row.is-bold { font-weight: 600; } .ep-m-sub-row.is-promo { color: #ee2832; } .ep-m-sub-row svg { color: #9ca3af; flex-shrink: 0; } /* Body lock when drawer open */ body.ep-drawer-open { overflow: hidden; } /* Skip link */ .skip-link.screen-reader-text { position: absolute; left: -9999px; top: 0; } .skip-link.screen-reader-text:focus { left: 16px; top: 16px; padding: 8px 14px; background: #0e1116; color: #fff; z-index: 99999; border-radius: 6px; } /* ===================================================================== * BLOG MEGA PANEL — 3×3 grid + scrollable post lists (desktop) * ===================================================================== */ .ep-panel--blog { width: 720px; max-width: calc(100vw - 40px); } .ep-panel--blog .ep-panel-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 22px; } .ep-panel--blog .ep-col { min-width: 0; flex: none; } /* Subcategory header — clickable, with bottom border */ .ep-panel--blog .ep-col-header { color: #0e1116; font-size: 12px; letter-spacing: .04em; padding-bottom: 7px; margin-bottom: 10px; border-bottom: 2px solid #f0f2f5; } .ep-panel--blog a.ep-col-header--link { color: #0e1116; } .ep-panel--blog a.ep-col-header--link:hover { color: #ee2832; border-bottom-color: #ee2832; } /* Scrollable post list — gold scrollbar */ .ep-col-items--scroll { max-height: 130px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #d4af37 #f6f7f9; } .ep-col-items--scroll::-webkit-scrollbar { width: 6px; } .ep-col-items--scroll::-webkit-scrollbar-track { background: #f6f7f9; border-radius: 3px; } .ep-col-items--scroll::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 3px; } .ep-col-items--scroll::-webkit-scrollbar-thumb:hover { background: #f4d03f; } .ep-panel--blog .ep-col-items .ep-item { font-size: 13px; line-height: 1.35; } .ep-panel--blog .ep-col-items li { padding: 2px 0; } /* "Vezi toate" gold link inside the blog panel only */ .ep-panel--blog .ep-item.is-bold { color: #d4af37; font-weight: 500; } .ep-panel--blog .ep-item.is-bold:hover { color: #ee2832; } /* ===================================================================== * BLOG MOBILE — Level 2 panels inherit .ep-m-subpanel; minor tweaks * ===================================================================== */ /* Level-1 blog category list — slightly bigger touch target */ .ep-m-blog-cats .ep-m-sub-row { padding: 14px 16px; width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; } /* Level-2 post list — wrap long titles, smaller font for density */ .ep-m-subpanel--posts .ep-m-sub-row { font-size: 13px; line-height: 1.35; padding: 12px 16px; gap: 10px; } .ep-m-subpanel--posts .ep-m-sub-row span { white-space: normal; }