/* PrestaHU custom front-end CSS — industrialmachineryhub.com */

/* === Header language selector: ISO codes uppercase (EN / DE / HU / RO) === */
.elementor-langs__code {
    text-transform: uppercase;
    font-weight: 600;
}

/* === Header (desktop): single band — logo | wrapping nav | 2-row utility box.
   Long menu labels wrap to 2 lines so the nav stays compact; the 5 utility
   widgets (nested as .pshu-hdr-cluster) sit at the right, icons over selectors. === */
@media (min-width: 1025px) {
    /* one band: logo, nav, cluster, vertically centred */
    .elementor-widget-wrap:has(> .pshu-hdr-cluster) {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    .elementor-widget-wrap:has(> .pshu-hdr-cluster)
      > .elementor-widget-nav-menu:not(.elementor-widget-sign-in):not(.elementor-widget-language-selector):not(.elementor-widget-currency-selector) {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    /* small gap after the (now edge-to-edge trimmed) logo so it doesn't touch
       the first menu item */
    [data-elementor-type="header"] .elementor-widget-theme-site-logo { margin-right: 28px !important; }

    /* the nav widget fills the space between logo and cluster, and the menu list
       spreads across its full width so the items reach the right cluster with no
       big dead gap in the middle (client request) */
    [data-elementor-type="header"] .elementor-widget-nav-menu.elementor-nav--main { flex: 1 1 auto !important; margin-right: 24px !important; }
    .elementor-nav--main .elementor-nav {
        width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    /* Menu label + dropdown caret sit inline (caret vertically centred); the label
       (wrapped in .pshu-navlabel by our JS) wraps NORMALLY within its max-width so
       long names break into ~2 lines instead of one word per line. */
    .elementor-nav--main .elementor-nav > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }
    /* menu font: 15px on wide screens, gently shrinking on narrower desktops so
       the 8 two-line items + logo + right cluster never collide (clamp beats the
       theme's own scaling; balanceNav re-measures with the active size) */
    .elementor-nav--main .elementor-nav > li > a.elementor-item,
    .elementor-nav--main .elementor-nav > li > a.elementor-item.has-submenu {
        font-size: clamp(12.5px, 1.05vw, 15px) !important;
        /* trim the wide theme side-padding so the 8 items stay clear of the
           right cluster on narrower desktops (space-between re-distributes the
           saved width into gaps on wide screens) */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    /* width is set per-item by our JS (balanceNav) so every multi-word label
       wraps to exactly two lines; max-width is only a pre-JS safety cap. */
    .elementor-nav--main .elementor-nav > li > a .pshu-navlabel {
        display: inline-block;
        max-width: 160px;
        white-space: normal;
        text-align: center;
    }
    .elementor-nav--main .elementor-nav > li > a .sub-arrow {
        display: inline-block !important;
        width: auto !important; min-width: 0 !important; height: auto !important;
        margin: 0 !important; padding: 0 !important;
        font-size: 11px !important; line-height: 1 !important;
        flex: 0 0 auto;
    }
    .elementor-nav--main .elementor-nav > li > a .sub-arrow::before { font-size: 11px !important; }
    /* utility box hugs the right, vertically centred */
    .elementor-widget-wrap > .pshu-hdr-cluster {
        margin-left: auto !important;
        flex: 0 0 auto;
        align-self: center !important;
    }
    .pshu-hdr-cluster,
    .pshu-hdr-cluster > .elementor-container,
    .pshu-hdr-cluster > .elementor-container > .elementor-row,
    .pshu-hdr-cluster .elementor-column,
    .pshu-hdr-cluster .elementor-column-wrap { width: auto !important; }
    /* PRIMARY row = a single in-flow flex row (blog pill + search/account/cart),
       vertically centred so it sits on the SAME line as the main menu. The
       language/currency selectors are lifted out of flow (absolute) into a tidy
       SECONDARY line just below — so the icon row, not a 2-row block, defines the
       cluster height and aligns with the menu centre. */
    .elementor-widget-wrap > .pshu-hdr-cluster { position: relative; }
    .pshu-hdr-cluster .elementor-widget-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        /* icons sit at the TOP of the block (their top edge = the menu's top) */
        align-items: flex-start !important;
        gap: 0 14px !important;
    }
    /* Elementor puts align-self:center on each widget — override it so the icons
       really start at the block's top edge (level with the menu's top). */
    .pshu-hdr-cluster .elementor-widget-wrap > * { align-self: flex-start !important; }
    .pshu-hdr-cluster .elementor-widget-wrap::after { content: none !important; display: none !important; }
    /* secondary line: EN | EUR absolutely positioned below the icon row (JS sets
       their exact right offsets so they group tidily at the right edge) */
    /* EN | EUR belong to the SAME block as the icons: pinned to the block's
       BOTTOM edge, so [icons on top ... EN|EUR at bottom] together span exactly
       the menu's height. */
    .pshu-hdr-cluster .elementor-widget-language-selector,
    .pshu-hdr-cluster .elementor-widget-currency-selector {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        margin-top: 0 !important;
    }
    /* thin divider between language and currency (EN | EUR) */
    .pshu-hdr-cluster .elementor-widget-currency-selector {
        border-left: 1px solid #d8d8e0;
        padding-left: 10px !important;
    }
    /* the account / language / currency are nav-menu widgets whose links carry
       big vertical padding (13px) — kill it so both cluster rows are the same
       compact height, vertically centred and tightly stacked (no loose gaps).
       High specificity to beat the theme's .elementor-nav--main padding. */
    .pshu-hdr-cluster .elementor-widget-wrap .elementor-nav > li > a.elementor-item,
    .pshu-hdr-cluster .elementor-widget-wrap .elementor-nav > li > a {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        line-height: 1 !important;
    }
    .pshu-hdr-cluster .elementor-nav > li,
    .pshu-hdr-cluster .elementor-nav { align-items: center !important; }
    /* spacing between the icon-row items */
    .pshu-hdr-cluster .elementor-widget-wrap { gap: 0 14px !important; }
    /* smaller icons so the whole two-row cluster matches the menu height */
    .pshu-hdr-cluster i { font-size: 19px !important; line-height: 1 !important; } 
    .pshu-hdr-cluster svg,
    .pshu-hdr-cluster img { width: 19px !important; height: 19px !important; }
    /* the blog pill keeps its own small icon size */
    .pshu-hdr-cluster .pshu-blog-btn svg { width: 16px !important; height: 16px !important; }
    /* trim the header band top/bottom padding (client request).
       Extra .elementor-container qualifier outranks Elementor's per-column
       padding rule (which otherwise ties and keeps 20px on some columns). */
    [data-elementor-type="header"] .elementor-container .elementor-column-wrap.elementor-element-populated {
        padding-top: 5px !important;
        padding-bottom: 6px !important;
    }
    .pshu-hdr-cluster .elementor-langs__code { font-size: 13px !important; font-weight: 600; }
    .pshu-hdr-cluster .elementor-widget-currency-selector .expand-more._gray-darker,
    .pshu-hdr-cluster .elementor-widget-currency-selector span { font-size: 13px !important; }
    .pshu-hdr-cluster .expand-more,
    .pshu-hdr-cluster .material-icons { font-size: 15px !important; }
}

/* === Header: "Technical Blog" pill relocated into the icon cluster === */
.pshu-nav-blog-hidden { display: none !important; }
.pshu-blog-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #6c4cff;
    color: #fff !important;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease;
}
.pshu-blog-btn:hover { background: #5639d6; color: #fff !important; }
.pshu-blog-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* two-line variant: "Technical" on line 1, [icon] "Blog" on line 2.
   Sized so the whole pill is the same height as the search/account/cart icons. */
.pshu-blog-btn--stack {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 18px;
    line-height: 1.1;
    text-align: center;
}
.pshu-blog-btn--stack .pshu-blog-l1 { font-size: 13px; font-weight: 600; letter-spacing: .2px; }
.pshu-blog-btn--stack .pshu-blog-l2 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 700;
}
.pshu-hdr-cluster .pshu-blog-btn--stack svg { width: 17px !important; height: 17px !important; }

/* === Get a quote button (quote-only products, price 0) === */
a.pshu-quote-btn,
.elementor-button.pshu-quote-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #6c4cff !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 600;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
    cursor: pointer;
    width: auto;
}
a.pshu-quote-btn:hover,
.elementor-button.pshu-quote-btn:hover { background: #5639d6 !important; transform: translateY(-1px); }
.pshu-quote-btn .elementor-button-text { color: #fff !important; }

/* === Quote popup === */
#pshu-quote-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(17, 17, 26, .55);
    align-items: center; justify-content: center;
    padding: 16px;
}
#pshu-quote-overlay.is-open { display: flex; }
#pshu-quote-overlay .pshu-quote-modal {
    background: #fff; border-radius: 12px;
    max-width: 460px; width: 100%;
    padding: 28px 26px; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
#pshu-quote-overlay h3 { margin: 0 0 10px; font-size: 22px; }
#pshu-quote-overlay .pshu-quote-product { font-weight: 600; margin: 0 0 8px; }
#pshu-quote-overlay .pshu-quote-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: 0; font-size: 26px; line-height: 1;
    cursor: pointer; color: #888;
}
@media (max-width: 480px) {
    #pshu-quote-overlay .pshu-quote-modal { max-width: 100%; height: 100%; border-radius: 0; }
}
.pshu-quote-wrap { text-align: center; margin: 8px 0 4px; }
.pshu-quote-btn--lg { font-size: 17px; padding: 13px 28px !important; }

/* === RFQ form in popup === */
#pshu-quote-overlay .pshu-quote-modal { max-width: 480px; max-height: 92vh; overflow-y: auto; }
#pshu-quote-overlay .pshu-quote-intro { color: #555; font-size: 14px; margin: 0 0 14px; }
.pshu-quote-form .pshu-field { margin-bottom: 12px; }
.pshu-quote-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #333; }
.pshu-quote-form input[type="text"],
.pshu-quote-form input[type="email"],
.pshu-quote-form input[type="tel"],
.pshu-quote-form textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid #d6d6e0; border-radius: 8px; font-size: 15px; font-family: inherit;
    background: #fff; color: #222;
}
.pshu-quote-form input:focus, .pshu-quote-form textarea:focus { outline: none; border-color: #6c4cff; box-shadow: 0 0 0 3px rgba(108,76,255,.15); }
.pshu-quote-form .pshu-field.has-error input,
.pshu-quote-form .pshu-field.has-error textarea { border-color: #e03e3e; background: #fff6f6; }
.pshu-quote-form .pshu-req { color: #e03e3e; }
.pshu-quote-form .pshu-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.pshu-consent { display: flex; align-items: flex-start; gap: 8px; font-weight: 400 !important; font-size: 13px; margin: 6px 0 14px; line-height: 1.4; }
.pshu-consent input { margin-top: 2px; }
.pshu-consent.has-error span { color: #e03e3e; }
.pshu-consent a { color: #6c4cff; text-decoration: underline; }
.pshu-quote-submit {
    width: 100%; background: #6c4cff; color: #fff; border: 0; border-radius: 8px;
    padding: 12px 18px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.pshu-quote-submit:hover { background: #5639d6; }
.pshu-quote-submit:disabled { opacity: .6; cursor: default; }
.pshu-quote-status { margin: 10px 0 0; font-size: 14px; }
.pshu-quote-status.is-ok { color: #1c8a4a; }
.pshu-quote-status.is-err { color: #e03e3e; }
.pshu-sent .pshu-quote-form > *:not(.pshu-quote-status) { display: none; }
#pshu-quote-overlay .pshu-quote-modal, .pshu-quote-form { text-align: left; }
.pshu-quote-form label { text-align: left; }
#pshu-quote-overlay h3, #pshu-quote-overlay .pshu-quote-intro, #pshu-quote-overlay .pshu-quote-product { text-align: left; }

/* === Product-page breadcrumb: inline, chevron separators, no numbers === */
.elementor-widget-breadcrumb .breadcrumb { padding: 0; margin: 0; background: none; }
.elementor-widget-breadcrumb .breadcrumb ol {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 8px; padding: 0; margin: 0;
}
.elementor-widget-breadcrumb .breadcrumb li { display: flex; align-items: center; font-size: 14px; }
.elementor-widget-breadcrumb .breadcrumb li:not(:last-child)::after { content: "\203A"; margin-left: 8px; color: #aaa; }
.elementor-widget-breadcrumb .breadcrumb a { color: #6c4cff; text-decoration: none; }
.elementor-widget-breadcrumb .breadcrumb a:hover { text-decoration: underline; }
.elementor-widget-breadcrumb .breadcrumb li:last-child span { color: #666; }

/* === Orphaned product-rating widgets (Product Comments module removed) ===
   The productcomments module is uninstalled, but CE still holds product-rating
   (product page → "…must be installed!" alert) and product-miniature-rating
   (listing → empty stars) widgets. The data-widget_type classes are the same in
   every language doc, so this hides them on ALL pages, ALL languages at once. */
.elementor-widget-product-rating,
.elementor-widget-product-miniature-rating {
    display: none !important;
}

/* keep the cart quantity badge small */
.pshu-hdr-cluster .cart-products-count,
.pshu-hdr-cluster [class*="cart"] .count { font-size: 10px !important; }

/* === Services products: two action buttons (Contact + Book) === */
.pshu-quote-wrap--services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
}
.pshu-contact-btn { background: #6c4cff !important; color: #fff !important; }
.pshu-contact-btn:hover { background: #5639d6 !important; }
/* Book = outline, fills on hover */
a.pshu-book-btn,
.elementor-button.pshu-book-btn {
    background: #fff !important;
    background-image: none !important;
    color: #6c4cff !important;
    border: 1.5px solid #6c4cff !important;
    border-radius: 6px !important;
    padding: 9px 18px !important;
    font-weight: 600;
}
a.pshu-book-btn:hover,
.elementor-button.pshu-book-btn:hover { background: #6c4cff !important; color: #fff !important; }
.pshu-book-btn .elementor-button-text { color: inherit !important; }
@media (max-width: 480px) {
    .pshu-quote-wrap--services { flex-direction: column; }
    .pshu-quote-wrap--services .pshu-quote-btn { width: 100%; }
}