/* Ebara Romania - Public CSS */

:root {
    --ebara-primary: #0056b3;
    --ebara-secondary: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   Everything below the :root block used to override the Bootstrap 4
   "Porto eCommerce" theme (webroot/theme/). That theme was replaced by the
   Bootstrap 5 "Porto Multipurpose" theme (webroot/theme2/), so the old
   header/hero/mega-menu/mobile-nav overrides were deleted rather than
   ported — the new theme handles all of it natively. See CHANGELOG.
   ───────────────────────────────────────────────────────────────────── */

/* Homepage hero.
   The photo and a brand gradient are stacked as two background layers on the
   same element, photo first. A missing/404 photo simply drops its layer and
   the gradient below shows through, so the hero never renders as a bare grey
   band while /img/hero-ebara.webp is still to be supplied.

   The gradient can't go on the <section> itself: theme-elements.css has
   `section.section{background: var(--grey-100)}` (0,1,1), which both outranks
   a plain `.hero-ebara` (0,1,0) and, being the `background` shorthand, resets
   background-image to none. Putting it on the wrapper — which is
   position:absolute inset 0 and therefore covers the section anyway — side-
   steps that entirely, and matches how the demo layers its own hero. */
.hero-ebara .background-image-wrapper {
    background-image: url('/img/ebara-pumps.jpg'),
                      linear-gradient(115deg, #00376f 0%, #0056b3 55%, #1479d6 100%);
    background-size: cover;
    background-repeat: no-repeat;
}

/* "Serii", "Domenii aplicare" and "Produse" mega-menus: 61 series is far
   more than the demo's mega-menu ever holds, so cap the height and scroll
   rather than letting the panel run off the bottom of the viewport. At the
   theme's default 4 columns x 16 rows, the series panel's own content
   already measured 630px tall — exactly at the 70vh cap on a typical
   900px-tall viewport — reading as oversized/uncompact even before any
   scrolling kicked in. Series widened to 6 columns (~11 rows, MenuHelper::
   NUM_MEGA_COLUMNS); domains and categories stay 1 column per root
   (only 4 domains / 6 categories exist) but get the same tightened
   row/heading spacing from the start, since e.g. the "Industrial" domain
   alone has 13 children. theme.css's own rules carry #header's ID
   specificity, so !important is needed to beat them regardless of source
   order. */
.series-megamenu .dropdown-mega-content,
.domains-megamenu .dropdown-mega-content,
.categories-megamenu .dropdown-mega-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem 1.6rem !important;
}
.series-megamenu .dropdown-mega-sub-nav .dropdown-item,
.domains-megamenu .dropdown-mega-sub-nav .dropdown-item,
.categories-megamenu .dropdown-mega-sub-nav .dropdown-item {
    max-width: 100%;
}
.series-megamenu .dropdown-mega-sub-title,
.domains-megamenu .dropdown-mega-sub-title,
.categories-megamenu .dropdown-mega-sub-title {
    margin-top: 0 !important;
    padding-bottom: 6px !important;
}
.series-megamenu .dropdown-mega-sub-nav > li > a,
.domains-megamenu .dropdown-mega-sub-nav > li > a,
.categories-megamenu .dropdown-mega-sub-nav > li > a {
    padding: 2px 8px !important;
    margin-bottom: 1px !important;
    line-height: 20px !important;
}
/* Domains/categories only: the heading itself is a link (icon + root title,
   clickable through to that root), not plain text like the series
   mega-menu's. It picks up some generic anchor/dropdown-item styling the
   series mega-menu's plain <span> heading never had to fight — padding-left
   (18px vs the child rows' 8px, visibly offset from them) and a color that,
   despite `a{color:var(--primary)}` matching it in the stylesheet, renders
   as the nav item's own inherited grey in practice. All three forced
   explicitly with !important rather than relying on normal cascade, since
   that cascade is evidently not resolving the way its own specificity says
   it should here. */
.domains-megamenu .dropdown-mega-sub-title a,
.categories-megamenu .dropdown-mega-sub-title a {
    font-weight: 600 !important;
    padding-left: 0 !important;
    color: var(--ebara-primary) !important;
}

/* Mobile (the theme's own collapsed-nav breakpoint): let long entries wrap
   onto a second line instead of being cut off. MenuHelper puts Bootstrap's
   `text-truncate` on every mega-menu entry — right on desktop, where each
   column is only ~180px and a clipped name with a `title` tooltip is the
   sane fallback, but wrong in the mobile accordion: `white-space:nowrap`
   there made long names (e.g. "Circulatoare electronice pentru apa calda
   menajera") run past the panel's width, pushing the submenu's expand arrow
   out of view. `text-truncate`'s three declarations are all `!important`,
   so undoing them needs the same. */
@media (max-width: 991px) {
    .series-megamenu .dropdown-mega-sub-nav > li > a,
    .domains-megamenu .dropdown-mega-sub-nav > li > a,
    .categories-megamenu .dropdown-mega-sub-nav > li > a {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Mega-menu panel position/shadow, desktop only (theme.css's own dropdown
   rules are all inside the same `@media (min-width: 992px)` block — mobile
   uses a completely different collapsed-nav layout untouched by any of
   this). Scoped to only the *open* states (`:hover`, `.open`,
   `.accessibility-open` — same three theme.js toggles as the theme's own
   `top: auto` rule at theme.css ~line 1625): the closed state's
   `top: -10000px` (theme.css ~line 1520) is what keeps a hidden dropdown
   from ever overlapping — and silently intercepting clicks on — nearby
   header content, and must stay untouched. */
@media (min-width: 992px) {
    .series-megamenu.open > .dropdown-menu,
    .series-megamenu.accessibility-open > .dropdown-menu,
    .series-megamenu:hover > .dropdown-menu,
    .domains-megamenu.open > .dropdown-menu,
    .domains-megamenu.accessibility-open > .dropdown-menu,
    .domains-megamenu:hover > .dropdown-menu,
    .categories-megamenu.open > .dropdown-menu,
    .categories-megamenu.accessibility-open > .dropdown-menu,
    .categories-megamenu:hover > .dropdown-menu {
        top: 90px !important;
        box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.07) !important;
    }
}

/* ── Homepage ──────────────────────────────────────────────────────── */

/* Domain icons ("Domenii de aplicare"): originally reused .custom-icon-style-1
   from the theme, whose ::before is a 95px square rotated 45deg into a
   diamond-shaped border — the user found that border odd-looking. Replaced
   with a plain filled circle (light blue background, no border), which also
   sidesteps the diamond's own geometry problem: a rotated square's visual
   footprint is its diagonal (95*sqrt(2) ≈ 134px for a 95px box), ~20px taller
   than its layout box, which needed extra margin below it to avoid
   overlapping the heading — a circle doesn't have that mismatch, its visual
   and layout bounds are the same. */
.domain-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    transition: ease background 300ms;
}
.domain-icon-circle i {
    font-size: 28px;
    color: var(--ebara-primary);
    transition: ease color 300ms;
}
.custom-icon-box-style-1:hover .domain-icon-circle {
    background: var(--ebara-primary);
}
.custom-icon-box-style-1:hover .domain-icon-circle i {
    color: #fff;
}

/* Trust-badges row: icon-left/text-right, one row of 3 with thin vertical
   dividers between them, matching the reference. `.feature-box-style-3`
   gives a bordered, transparent-background circle (theme.css) — dropped per
   the user's request ("loose the circle"), leaving a plain icon, and the
   icon colour still needs overriding since it defaults to `var(--light)`
   (white), meant for use on a dark background. `!important` is needed on
   both: `.feature-box.feature-box-style-3 .feature-box-icon` sets the same
   properties with higher specificity. */
.home-advantage-icon {
    color: var(--ebara-primary) !important;
    border: 0 !important;
    background: transparent !important;
}
.home-advantage-icon i {
    font-size: 2em;
}
@media (min-width: 768px) {
    .home-advantage-bordered {
        border-left: 1px solid rgba(0, 0, 0, .1);
    }
}

/* Category cards ("Categoriile noastre"): matched to the product cards'
   hover treatment (shadow + small lift) instead of the demo's own
   .custom-thumb-info-style-1 hover (a 5px border that turns brand-blue) and
   .thumb-info-lighten (a dark overlay fading in over the thumbnail) — the
   `thumb-info-lighten` class was dropped from the markup entirely rather
   than overridden, since it's the actual switch for that overlay. The
   border and title-colour hover rules are still present in the theme's own
   CSS (higher specificity, both !important), so they're neutralized here to
   match; the border colour literally can't be unset with `border:none`
   once a color is forced on `:hover`, so it's held at its base transparent
   instead — but its 5px *width* is still reserved either way (border-box
   sizing), which was quietly shrinking the cover-fit image inside by 10px
   on each axis, so the width is zeroed out separately below. */
/* `.thumb-info.thumb-info-no-borders{padding:0}` (theme-elements.css, two
   classes) otherwise beats this single-class selector regardless of source
   order — the padding needs !important to actually apply. */
.home-category-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px 15px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    transition: ease box-shadow 300ms, ease transform 300ms;
}
.home-category-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}
.home-category-card.custom-thumb-info-style-1 .thumb-info-wrapper,
.home-category-card.custom-thumb-info-style-1:hover .thumb-info-wrapper {
    border-color: transparent !important;
    border-width: 0 !important;
}
.home-category-card.custom-thumb-info-style-1:hover h3 {
    color: inherit !important;
}
/* Reserve space for 2 lines of title (24px line-height, measured) regardless
   of whether a given category name actually wraps. Cards share a Bootstrap
   row, which stretches every card to the tallest one's height (h-100) — one
   long name among otherwise-short ones was making every card that height,
   with the short-titled ones getting all the slack as dead space below their
   "N produse" line while the wrapped one had barely any. Fixing the title's
   own height to 2 lines makes every card the same height for the same
   reason regardless of title length, so the bottom padding reads the same
   on every card. */
.home-category-card h3 {
    min-height: 48px;
}
/* .thumb-info-wrapper:after (theme-elements.css) is a dark pseudo-element
   (background: var(--dark-rgba-80)) that sits over the thumbnail at all
   times, just at opacity:0 — dropping the .thumb-info-lighten class earlier
   only removed a *different-colored* variant of this same overlay, it didn't
   touch the base one, so .thumb-info:hover .thumb-info-wrapper:after{opacity:1}
   was still darkening the image on hover. content:none removes the
   pseudo-element's box outright, so there's nothing left for that opacity
   rule to reveal. */
.home-category-card .thumb-info-wrapper:after {
    content: none !important;
}

/* Category carousel: `.owl-stage-outer` has overflow:hidden (owl needs it so
   the sliding track doesn't spill sideways), and the cards' hover shadow/lift
   is drawn outside the card box — so it gets clipped wherever a card edge
   touches that boundary.
   The clip boundary is `.owl-stage-outer`'s own border box, so clearance has
   to exist THERE. Padding on a wrapper around the whole carousel (the
   previous attempt) doesn't create any: it just moves carousel + clip box
   inward together, leaving the first/last card still flush against the clip
   edge — measured 0px clearance on BOTH sides, despite the wrapper reporting
   15px. (An earlier check measured card-vs-wrapper instead of card-vs-clip-box
   and so read as "fixed" when nothing had changed.)
   Negative margin + padding is what actually works: the margin widens the
   clip box past the carousel on each side, the padding pushes the stage
   back in, moving the clip boundary clear of the cards. owl sizes items off
   `this.$element.width()` (the carousel element itself), which the margin
   doesn't touch — no interference with its layout math.
   Horizontal padding (20px) and margin (15px) are deliberately mismatched
   by 5px here: margin only has a left/right component (`0 -15px`), so that
   5px is a horizontal-only inset each card gets from where it'd otherwise
   sit, since the stage no longer lands back exactly at its starting
   position. Vertical padding is 20px too now (was 12px) — that side has no
   margin to land back against, so it's just extra clearance, no inset.
   If the horizontal inset ever looks wrong against the rest of the section,
   matching the two side values back up (as they were: both 15px) removes
   it. */
.home-category-carousel .owl-stage-outer {
    padding: 20px 20px;
    margin: 0 -15px;
}
/* nav-style-1's arrows default to a light grey pill that reads fine on a
   photo but is nearly invisible on this section's flat background; sized up
   slightly and given a white pill + shadow so they read as clickable
   controls sitting on top of the cards.
   theme-elements.css has two competing rules here, both 4-class selectors
   and one of them !important on background — `.owl-carousel.nav-style-1
   .owl-nav .owl-next/.owl-prev{width:20px; background:transparent!important}`.
   CSS specificity compares the class-count column as a whole before it ever
   looks at extra selectors, so a longer-but-fewer-classes selector (or one
   with an extra type selector) loses regardless of !important on my side
   too — both !important means specificity is still the tiebreaker. Matching
   the theme's own selector shape (4 classes, swapping `.owl-carousel` for
   `.home-category-carousel`, dropping the `button` type selector) ties the
   specificity instead; public.css loading after theme-elements.css then
   wins that tie. */
.home-category-carousel.nav-style-1 .owl-nav .owl-prev,
.home-category-carousel.nav-style-1 .owl-nav .owl-next {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    background: #fff !important;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    color: var(--ebara-primary) !important;
}
.home-category-carousel.nav-style-1 .owl-nav .owl-prev {
    left: -20px;
}
.home-category-carousel.nav-style-1 .owl-nav .owl-next {
    right: -20px;
}
.home-category-carousel .owl-nav .disabled {
    opacity: .35;
}
/* Optical centring of the arrow glyph inside the circle. The theme nudges
   these by a px or two (`.owl-nav button.owl-prev:before{left:-1px;top:-1px}`,
   next `{left:1px;top:-1px}`) — offsets tuned for its own 30px button, which
   don't land right on the 40px one used here.
   `top` is the same on both (the vertical offset isn't direction-dependent);
   `left` is mirrored, since the theme's own pair is mirrored too — nudging
   prev by +2px would push it toward the same side as next and leave the two
   arrows visibly out of step with each other. */
.owl-carousel .owl-nav button.owl-next:before {
    left: 2px;
    top: 2px;
}
.owl-carousel .owl-nav button.owl-prev:before {
    left: -2px;
    top: 2px;
}

/* Category thumbnails: same full-bleed cover-fit treatment as
   .home-product-thumb below, and the same 220px height so both homepage
   carousels line up visually. Without a fixed box they'd set their own
   heights (wildly differing source aspect ratios) and the titles below
   would sit on a ragged line.

   theme-elements.css's `.thumb-info.thumb-info-no-borders .thumb-info-wrapper
   {padding:0}` (specificity 0,2,0) already beats a plain `.category-thumb`
   (0,1,0) regardless of what's declared here, so padding isn't set at all —
   letting the theme's 0 win is what actually makes the image fill the box.

   8px radius matches .home-product-card/.home-category-card elsewhere on
   the homepage — `.custom-thumb-info-style-1 .thumb-info-wrapper{border-
   radius:25px!important}` (demo CSS) needs both `!important` and the
   `.home-category-card` ancestor qualifier to actually beat it (same
   specificity, but public.css loads after the demo CSS so the tie goes to
   this rule). */
.category-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    overflow: hidden;
}
.home-category-card .category-thumb {
    border-radius: 8px !important;
}
.category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product cards: same reasoning as the category tiles, plus a two-line clamp
   on the description so cards in a row stay the same height regardless of how
   long the copy is. */
.home-product-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    transition: ease box-shadow 300ms, ease transform 300ms;
}
.home-product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}
.home-product-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    overflow: hidden;
    background: #f8f9fa;
}
.home-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-product-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Slider dots — hidden everywhere on the public site; the sliders that need
   navigation already have prev/next arrows (.show-nav-hover). */
.owl-theme .owl-dots {
    display: none !important;
}

/* Homepage "Produse recomandate" thumbnails. The image area is WHITE, not
   the section's grey — these product shots are themselves on white, so a
   grey tile would frame them with a visible white rectangle inside.
   The figure needs an explicit height and these selectors need to outrank
   Porto's `.product-default figure>a:first-child{height:100%}` (0,2,2) and
   `.product-default figure img{width:100%;height:auto}` (0,1,2) — a plain
   `.product-slider-wrap` (0,1,0) loses to both, which collapsed the whole
   box to 0px. Sizes in px: Porto sets `html{font-size:10px}`. */
/* The whole card is a white tile sitting on the grey section band. */
.products-slider .product-default {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 8px;
    padding: 0 0 18px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.products-slider .product-default figure {
    height: 220px;
    margin-bottom: 14px;
}
.products-slider .product-default figure > a.product-slider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}
.products-slider .product-default .product-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
    padding: 0 14px;
}
.products-slider .product-default .product-title {
    font-size: 15px;
    line-height: 1.3;
    margin: 0 0 4px;
}
.products-slider .product-default .product-ref {
    margin: 0 0 6px;
    font-size: 12px;
    color: #999;
}
/* Clamped to 2 lines so every card in the row stays the same height
   regardless of how long the individual description is. */
.products-slider .product-default .product-short-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px;
    min-height: 36px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #777;
}
.products-slider .product-default .product-action {
    margin-top: auto;
}
.products-slider .product-default figure img.product-slider-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 12px;
    object-fit: contain;
}

/* Homepage "Categoriile noastre" — Porto's "Browse Our Categories"
   component (.product-category / figure / .category-content).
   demo4.min.css is several demo variants merged into one file, so
   `.category-content` is declared ~15 times and only the LAST declaration of
   each property actually wins. Measured, the effective result is: a white
   band pinned to the bottom of the figure with DARK text (not, as the earlier
   rules suggest, a white caption centred over the image) — so no darkening is
   needed, and the text must stay dark. Two things still needed fixing:
   the band's height followed the title's line count (79px vs 99px measured),
   so each tile revealed a different amount of image; and the text was
   left-aligned. Everything below pins those down explicitly.
   NOTE: sizes here are px on purpose — Porto sets `html{font-size:10px}`, so
   rem values in this theme are half what they'd be on a normal 16px root. */
.categories-slider .product-category {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0;
}
.categories-slider .product-category figure {
    height: 260px;
    margin: 0;
    background: #f8f9fa;
}
/* contain, not cover: these are product illustrations — cropping cuts the
   pump. Bottom padding keeps the artwork clear of the caption band. */
.categories-slider .product-category figure img.category-slider-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px 20px 92px;
}
.categories-slider .product-category .category-content {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    height: 78px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
}
.categories-slider .product-category .category-content h3 {
    margin: 0 0 3px;
    font-size: 15px;
    line-height: 1.25;
    color: #1d2127;
}
/* Porto animates this in on hover (max-height/opacity); always show it. */
.categories-slider .product-category .category-content span {
    max-height: none;
    transform: none;
    margin: 0;
    opacity: 1;
    font-size: 12px;
    color: #777;
}

/* theme-elements.css's `.card-body{padding:32px}` (0,1,0) is sized for
   feature/pricing cards — far too roomy for this narrow sidebar filter list,
   so bring it down to the same 1rem the rest of the site's cards use. */
.filter-sidebar .card-body {
    padding: 1rem;
}
.filter-sidebar .filter-group {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: .75rem;
}
.filter-sidebar .filter-group:last-child {
    border-bottom: none;
}
.filter-input {
    cursor: pointer;
}
.filter-sidebar .form-check-label {
    cursor: pointer;
}

/* Bootstrap's .list-group-item.active defaults to $primary (--bs-primary,
   #0d6efd — Bootstrap's own blue), which the theme never overrides. Every
   button on the site uses the theme's actual primary (--ebara-primary,
   #0056b3) instead, so the "active" sidebar category was a visibly different,
   brighter blue than everything else. Match it here. */
.category-nav .list-group-item.active {
    background-color: var(--ebara-primary);
    border-color: var(--ebara-primary);
}

.footer-link:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

.page-content h2, .page-content h3 { margin-top: 1.5rem; }
.page-content img { max-width: 100%; height: auto; }

/* Pagination */
.pagination .page-item.active .page-link { background-color: var(--ebara-primary); border-color: var(--ebara-primary); color: #fff; }
.pagination .page-link { color: var(--ebara-primary); }

/* Infinite-scroll "load more" trigger (templates/element/public/load_more.php,
   webroot/js/public.js). `.disabled` is set on the trigger link while a
   fetch is in flight — Bootstrap's own `.btn.disabled` already sets
   pointer-events:none, this just adds the visual dimming to match. */
#load-more-link.disabled {
    opacity: .65;
}
#load-more .load-more-spinner {
    margin-left: .5rem;
}

/* ── Footer: light instead of the theme's default dark ───────────────
   demo-auto-services.css sets #footer{background:#333333} and
   #footer a/li/span/p{color:#888888} (theme-elements.css's own
   #footer{background:var(--dark)} loses to that skin-specific rule
   already, same specificity, later in the cascade) — neither is
   !important, so overriding just needs to be. Every text-color-light
   (an explicit !important white, meant for that dark background) was
   also dropped from footer.php's markup for the same reason; text there
   now just inherits this rule's dark colour instead of fighting it. */
#footer {
    background: #f8f9fa !important;
}
#footer a:not(.btn):not(.no-footer-css),
#footer li,
#footer span,
#footer p,
#footer h5 {
    color: #495057 !important;
}
#footer a:not(.btn):not(.no-footer-css):hover {
    color: var(--ebara-primary) !important;
}

/* ── Public content text sizing ───────────────────────────────────────
   Two theme rules compound into unreadably small text on the catalogue
   pages: theme.css sets `body{font-size:14px}`, then theme-elements.css
   redefines `small, .small` as `font-size:70%`. Anything using Bootstrap's
   `.small` therefore rendered at 9.8px, and a `<code>` inside one (product
   reference codes) at 8.6px — measured on /produse and a domain listing.
   These templates predate the theme migration and were written against a
   16px base, where `.small` resolved to a normal ~14px.
   Sizes here are in rem so they resolve against the 16px root rather than
   the theme's 14px body — that keeps them stable no matter what body size
   the theme sets, instead of re-inheriting the same compounding problem.
   Scoped to `.main` so the theme's own header/footer components keep the
   proportions they were designed with. */
.main small,
.main .small {
    font-size: .8125rem;
}
.main code {
    font-size: .8125rem;
}
/* theme-elements.css sizes the ITEMS, not the list: `.breadcrumb > li
   {font-size:0.8em}`. Sizing only the container therefore made things
   worse — the 0.8em re-applied on top of it (13px container → 10.4px
   items). Targeting the items directly in rem stops the compounding. */
.main .breadcrumb,
.main .breadcrumb > li,
.main .breadcrumb a {
    font-size: .8125rem;
}
.main .badge {
    font-size: .75rem;
}

/* Header search dropdown, mobile (<440px). theme.css has two rules that
   collide once combined:
     .header-nav-features-dropdown-mobile-fixed { position: fixed; ... }
       (@media max-width:440px)
     .header-nav-features-dropdown.show { top: -50px; ... }
       (@media max-width:991px)
   The -50px was written for the dropdown's other (non-fixed) mobile layout,
   where it's a small upward nudge relative to its own positioned ancestor.
   Once `position:fixed` applies, `top` is relative to the *viewport*
   instead — so opening search pushed the whole box to y:-20..52 (confirmed
   live at 375px), ~70% of it above the visible screen, search input
   included.

   A first attempt pinned it just below the header (top:174px, matching the
   measured ~164px mobile header height) — correct in a desktop browser, but
   still reported as rendering "much lower" on a real phone. The remaining
   cause: the toggle immediately calls .focus() on the search input
   (theme.js, data-focus="headerSearch"), which opens the on-screen keyboard.
   Mobile browsers shrink/scroll the *visual* viewport for the keyboard
   while `position:fixed` offsets stay anchored to the taller layout
   viewport, so a mid-page top offset like 174px can end up sitting deep
   inside the area the keyboard now covers. Pinning near the very top of
   the screen instead keeps it inside the safe visible area regardless of
   how much the keyboard eats from the bottom. */
@media (max-width: 440px) {
    #header .header-nav-features .header-nav-features-dropdown.header-nav-features-dropdown-mobile-fixed.show {
        top: 10px;
    }
}

/* Product/series page tabs (#productTabs, #seriesTabs): theme-elements.css's
   `.nav-tabs li .nav-link{color:var(--grey-500)}` reads a skin variable that
   skin-auto-services.css redefines to #dbdbdb — a near-white grey clearly
   meant for borders elsewhere, not text. On the tabs' own #f4f4f4 background
   that's essentially invisible (contrast ratio ~1.2:1) — fixed to a normal
   readable grey. Active tab is branded blue (--ebara-primary), with a
   matching blue top border replacing the theme's plain grey one, as the
   selection indicator.
   theme-elements.css also has a plain `.nav-link{color:var(--primary)}`
   (lower specificity, 0,1,0, so it shouldn't matter — kept !important anyway
   since --primary and --ebara-primary happen to be the same value here,
   which made a real cascade bug easy to mistake for "already correct" during
   testing). */
.nav-tabs li .nav-link,
.nav-tabs li .nav-link:hover {
    color: #6c757d !important;
}
.nav-tabs li .nav-link:active,
.nav-tabs li .nav-link:hover,
.nav-tabs li .nav-link:focus {
    color: #495057 !important;
}
.nav-tabs li .nav-link.active,
.nav-tabs li .nav-link.active:hover,
.nav-tabs li .nav-link.active:focus,
.nav-tabs li .nav-link.active:active {
    color: var(--ebara-primary) !important;
    border-top-color: var(--ebara-primary);
}

/* Product page "Categorii:" list (Products/view.php) — theme-elements.css has
   TWO separate bare `a` pseudo-class rules that both fire here: `a:hover`
   (color: var(--primary--100), #0462c9) and, independently, `a:active`
   (color: var(--primary-100) — single dash, a different theme variable,
   #004b9b) for the mouse-down/pressed state. Overriding only :hover left
   :active still landing on that unrelated theme navy. Both now use the
   site's actual brand blue, consistent with every other link/heading accent
   on the site. */
.product-categories-list a:hover,
.product-categories-list a:active,
.product-categories-list a:focus {
    color: var(--ebara-primary) !important;
}

/* Any <a class="badge ...">: same theme-elements.css bare `a:hover`/`a:focus`/
   `a:active` rules apply here too — they only touch the text color, never
   the badge's own background, so a solid badge (Seria JES-JE, bg-primary,
   normally white text) turns blue-text-on-blue-background on hover, and a
   light badge (domain badges, bg-light + text-dark) turns an inconsistent
   blue too. Restate each badge variant's own real text color for these
   states so hovering a badge just doesn't change how it reads. */
a.badge.bg-primary:hover, a.badge.bg-primary:focus, a.badge.bg-primary:active,
a.badge.bg-secondary:hover, a.badge.bg-secondary:focus, a.badge.bg-secondary:active {
    color: #fff !important;
}
a.badge.text-dark:hover, a.badge.text-dark:focus, a.badge.text-dark:active {
    color: rgba(var(--bs-dark-rgb), 1) !important;
}

/* "Vezi toată seria" (Products/view.php, ProductSeries/view.php) — Bootstrap's
   .btn-outline-primary is built from --bs-primary (#0d6efd, Bootstrap's own
   default), which this skin never redefines; every other primary-colored
   element on the site uses the theme's actual brand blue instead. Same
   mismatch as the sidebar active-category fix earlier — public.css loads
   after bootstrap.min.css, so equal-specificity wins on source order. */
.btn-outline-primary {
    color: var(--ebara-primary);
    border-color: var(--ebara-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff;
    background-color: var(--ebara-primary);
    border-color: var(--ebara-primary);
}