/*
Theme Name: Astra Child
Theme URI: https://tehnoport.md/
Description: Custom B2B Child Theme for Tehnoport - Specialized Machinery & Commercial Fleets in Moldova.
Author: Antigravity AI
Author URI: https://tehnoport.md/
Template: astra
Version: 3.8.0
*/

:root {
    --tp-navy: #07152b;
    --tp-blue: #185ee0;
    --tp-blue-hover: #0f46b3;
    --tp-red: #e11d48;
    --tp-red-hover: #be123c;
    --tp-bg-light: #f8fafc;
    --tp-border: #e2e8f0;
    --tp-text-dark: #0f172a;
    --tp-text-muted: #64748b;
    --tp-radius: 12px;
    --tp-max-w: 1240px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--tp-text-dark);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* ========================================================
   GLOBAL OVERRIDES: ELIMINATE ALL ASTRA BLUE BORDERS & OUTLINES
   ======================================================== */
.ast-desktop .ast-header-search .slide-search .search-form,
.ast-header-search .slide-search .search-form,
.ast-header-search .search-form,
.ast-search-menu-icon .search-form,
form.search-form,
.site-header-focus-item,
.site-header-focus-item:hover,
.site-header-focus-item:focus,
.site-header-focus-item:active,
.site-footer-focus-item,
.site-footer-focus-item:hover,
.ast-header-search,
.ast-header-search:hover,
.ast-header-search:focus,
.ast-builder-layout-element,
.ast-builder-layout-element:hover,
.ast-search-menu-icon,
.ast-search-menu-icon:hover,
.ast-search-menu-icon.slide-search,
.site-header-section,
.site-header-section:hover,
.customize-partial-edit-shortcut {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ========================================================
   1. TOP BAR (CONTACT & MULTILINGUAL SWITCHER)
   ======================================================== */
.tp-top-bar {
    background-color: var(--tp-navy);
    color: #cbd5e1;
    font-size: 13px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tp-top-inner {
    max-width: var(--tp-max-w);
    width: 92%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tp-top-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tp-top-item {
    color: #e2e8f0;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
}

.tp-top-item a {
    color: #e2e8f0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tp-top-item a:hover {
    color: #38bdf8;
}

.tp-top-divider {
    color: #334155;
}

.tp-top-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-lang-switcher {
    display: inline-flex;
    gap: 6px;
    font-weight: 700;
}

/* RO/RU/EN language pills. Desktop size matches what was previously
   inline-styled (measured live at 33x23px - fine for a mouse pointer).
   Below 640px, real touch-target size (WCAG/platform 44x44px minimum,
   not just an invisible hit-area overlay - three pills sit close enough
   together that overlapping invisible zones would risk mis-taps between
   RO/RU/EN, so this grows the actual box instead) applies since that's
   where the recommendation is actually motivated - a mouse pointer on
   desktop doesn't have the same imprecision problem a fingertip does. */
.tp-lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    transition: all 0.2s ease;
}

.tp-lang-pill:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.tp-lang-pill.active {
    color: #ffffff;
    background: var(--tp-blue);
}

@media (max-width: 640px) {
    .tp-lang-switcher {
        gap: 8px;
    }
    .tp-lang-pill {
        min-width: 44px;
        min-height: 44px;
        padding: 0 10px;
        font-size: 13px;
    }
}

/* ========================================================
   2. PRIMARY HEADER (1240px / 92% CONTAINER BOUNDS)
   ======================================================== */
.ast-main-header-wrap,
.main-header-bar,
.ast-primary-header-bar {
    height: 76px !important;
    min-height: 76px !important;
    border-bottom: 1px solid var(--tp-border) !important;
    background: #ffffff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.site-primary-header-wrap,
.site-primary-header-wrap.ast-container,
.site-primary-header-wrap.ast-builder-grid-row-container {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ast-builder-grid-row.ast-builder-grid-row-has-sides,
.ast-builder-grid-row {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    gap: 36px !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Left Group: Logo + Search Bar. `display:contents` unwraps this group so
   the logo, search box and nav all become direct siblings in the row above
   - that way a single `gap` value spaces all three evenly (logo-to-search
   and search-to-nav), instead of a fixed gap here plus a second, wildly
   different "whatever space is left over" gap coming from the row's old
   justify-content:space-between. */
.site-header-primary-section-left {
    display: contents !important;
}

.ast-builder-layout-element[data-section="title_tagline"],
.site-branding,
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-logo-link img {
    max-height: 44px !important;
    height: 44px !important;
    width: auto !important;
    display: block !important;
}

/* Search bar grows to fill the space between the logo and the nav menu
   (capped so it can't balloon past a sensible width) instead of sitting at
   a fixed 400px with a huge, uneven leftover gap before the nav. */
.ast-header-search {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: 480px !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ast-header-search .ast-search-menu-icon.slide-search .search-form {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ast-header-search .search-field {
    width: 100% !important;
    min-width: 180px !important;
    height: 42px !important;
    padding: 0 46px 0 18px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 40px !important;
    background: #f8fafc !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.ast-header-search .search-field:focus {
    border-color: var(--tp-blue) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(24, 94, 224, 0.12) !important;
}

.ast-header-search .search-submit {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 34px !important;
    width: 34px !important;
    border-radius: 50% !important;
    background: var(--tp-blue) !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.2s ease !important;
}

.ast-header-search .search-submit:hover {
    background: var(--tp-blue-hover) !important;
}

.ast-header-search .search-submit svg {
    fill: #ffffff !important;
    width: 14px !important;
    height: 14px !important;
}

.ast-header-search .ast-search-icon {
    display: none !important;
}

/* Right Group: Navigation Menu */
.site-header-primary-section-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

/* Scoped to body:not(.ast-header-break-point) - i.e. desktop only. Astra
   toggles a .ast-header-break-point class onto <body> below its configured
   header breakpoint and switches the mobile hamburger drawer's menu to a
   vertical list via its own (non-!important) CSS - but our old unscoped
   rule below used !important, which always wins over Astra's core rule
   regardless of specificity, forcing the menu to stay a horizontal nowrap
   row even inside the open mobile drawer ("horizontal grid" instead of a
   normal stacked mobile menu). */
body:not(.ast-header-break-point) .main-header-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-header-menu .menu-item > a {
    font-weight: 600 !important;
    font-size: 14.5px !important;
    color: #1e293b !important;
    padding: 10px 14px !important;
    transition: color 0.2s ease !important;
}

.main-header-menu .menu-item:last-child > a {
    padding-right: 0 !important;
}

.main-header-menu .menu-item:hover > a {
    color: var(--tp-blue) !important;
}

/* ========================================================
   3. CLEAN 100% FULL-WIDTH HOMEPAGE & CORNER-TO-CORNER VIDEO
   ======================================================== */
body.home,
body.home #page,
body.home #content,
body.home #content.site-content,
body.home .site-content,
body.home .site-content > .ast-container,
body.home .ast-container:not(.site-primary-header-wrap),
body.home #primary,
body.home #primary.content-area,
body.home #main,
body.home .site-main,
body.home .ast-article-single,
body.home .entry-content,
body.home .entry-content.clear,
body.home .ast-plain-container.ast-no-sidebar #primary,
body.home .ast-plain-container.ast-no-sidebar #main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

body.home #secondary,
body.home .sidebar-main {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.tp-hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 520px;
    background-color: #07152b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 95px 24px 105px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Video Background Layer - 100% Cover */
.tp-hero-video-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.tp-hero-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Cinematic Contrast Overlay */
.tp-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(7, 21, 43, 0.55) 0%, rgba(11, 30, 61, 0.35) 50%, rgba(4, 10, 20, 0.60) 100%) !important;
    z-index: 2 !important;
}

.tp-hero-content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 960px !important;
    width: 92% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.tp-hero-title {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 auto 18px !important;
    letter-spacing: -0.5px;
    max-width: 900px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
    .tp-hero-title {
        font-size: 28px !important;
    }
}

.tp-hero-desc {
    color: #e2e8f0 !important;
    font-size: 17.5px !important;
    line-height: 1.6 !important;
    max-width: 820px;
    margin: 0 auto 32px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .tp-hero-desc {
        font-size: 15px !important;
    }
}

.tp-hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tp-blue) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(24, 94, 224, 0.4);
    transition: all 0.25s ease;
}

.tp-btn-primary:hover {
    background: var(--tp-blue-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(24, 94, 224, 0.55);
}

.tp-btn-red {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tp-red) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.4);
    transition: all 0.25s ease;
}

.tp-btn-red:hover {
    background: var(--tp-red-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.55);
}

/* ========================================================
   4. METRIC STATS BAR (1240px / 92% WIDTH)
   ======================================================== */
.tp-stats-bar {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: -40px auto 44px !important;
    position: relative !important;
    z-index: 10 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 1024px) {
    .tp-stats-bar {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .tp-stats-bar {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.tp-stat-card {
    background: #ffffff;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    /* Grid items default to min-width:auto (sized to their content), so a
       label that can't find a wrap point forces its whole column wider than
       the 1fr track - blowing the grid past the viewport on mobile since
       site-wide overflow-x:hidden hides the scrollbar but still clips the
       content. min-width:0 + wrapping lets the card shrink to its column
       instead of forcing the column to grow. */
    min-width: 0;
}

.tp-stat-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.tp-stat-icon-wrap svg {
    width: 26px;
    height: 26px;
    stroke: var(--tp-blue);
}

.tp-stat-number {
    font-size: 22px;
    font-weight: 800;
    color: var(--tp-navy);
    line-height: 1.1;
    margin-bottom: 4px;
}

.tp-stat-label {
    font-size: 12.5px;
    color: var(--tp-text-muted);
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: break-word;
}

/* ========================================================
   5. VISUAL CATEGORY SECTOR ZONES (1240px / 92% WIDTH)
   ======================================================== */
.tp-catalog-zones-wrap {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: 40px auto 80px !important;
}

.tp-sector-zone {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 36px 36px 40px;
    margin-bottom: 48px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.tp-sector-zone-blue {
    border-top: 4px solid var(--tp-blue);
}

.tp-sector-zone-red {
    border-top: 4px solid var(--tp-red);
}

.tp-sector-zone-dark {
    border-top: 4px solid var(--tp-navy);
}

/* Distinct accent for All-Terrain & Amphibious Vehicles (2026-08-24, user
   request) - was sharing the same blue as most other sections; earthy
   green fits the off-road/amphibious theme and gives it its own identity
   the way Pompieri already has red. */
.tp-sector-zone-green {
    border-top: 4px solid #15803d;
}
.tp-sector-zone-green .tp-sector-badge-icon {
    background: #f0fdf4;
    color: #15803d;
}
.tp-sector-zone-green .tp-sector-btn {
    background: #f0fdf4;
    color: #15803d;
}
.tp-sector-zone-green .tp-sector-btn:hover {
    background: #15803d;
    color: #ffffff !important;
}

.tp-sector-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1.5px solid #f1f5f9;
}

/* Grid instead of flex: icon spans both text rows (col 1), title sits in
   row 1 / col 2 and description in row 2 / col 2 - same left edge, same
   available width, exactly like the old icon+column layout, but expressed
   so the mobile override below can re-place description into its own
   full-width row without needing a wrapping <div> around title+description
   (removed from the markup - see functions.php restructure note). */
.tp-sector-title-wrap {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 2px;
    align-items: start;
    flex: 1 1 0%;
    min-width: 0;
}

.tp-sector-badge-icon {
    grid-column: 1;
    /* Aligned to just the title row (not spanning title+description) so the
       icon sits inline with the caption text instead of centered against
       the whole two-line block, which visually read as "too low". */
    grid-row: 1;
    align-self: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--tp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tp-sector-badge-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    display: block;
}

.tp-sector-zone-red .tp-sector-badge-icon {
    background: #fef2f2;
    color: var(--tp-red);
}

.tp-sector-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 26px;
    font-weight: 800;
    color: var(--tp-navy);
    margin: 0 0 4px;
    min-width: 0;
}

.tp-sector-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 14.5px;
    color: #64748b;
    margin: 0;
    min-width: 0;
}

.tp-sector-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tp-blue);
    text-decoration: none;
    padding: 10px 18px;
    background: #eff6ff;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.tp-sector-zone-red .tp-sector-btn {
    background: #fef2f2;
    color: var(--tp-red);
}

.tp-sector-btn:hover {
    background: var(--tp-blue);
    color: #ffffff !important;
}

.tp-sector-zone-red .tp-sector-btn:hover {
    background: var(--tp-red);
    color: #ffffff !important;
}

/* .tp-desktop-only-btn (header CTA) / .tp-sector-btn-mobile (footer CTA,
   inside .tp-sector-footer-mobile) - two separate buttons in the markup
   for exactly one CTA slot, named for mutually-exclusive visibility that
   was never actually implemented anywhere in this file: both rendered on
   every viewport with no display:none in either direction (reported live
   - duplicate "Vezi toate..." buttons stacked in the same sector on
   desktop). Header CTA for desktop, footer repeat-CTA after the 3 stacked
   cards for mobile (so a mobile visitor doesn't have to scroll back up).*/
.tp-sector-footer-mobile {
    display: none;
}

@media (max-width: 640px) {
    .tp-desktop-only-btn {
        display: none;
    }
    .tp-sector-footer-mobile {
        display: block;
    }
}

/* Subcategory Cards inside Sector Grid */
.tp-sector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1080px) {
    .tp-sector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .tp-sector-grid {
        grid-template-columns: 1fr;
    }

    /* .tp-sector-title-wrap previously had flex-basis:0 + min-width:0 so it
       could shrink to fill whatever space was left after its siblings - on
       narrow screens .tp-sector-btn (fixed-width, non-shrinking,
       margin-left:auto) ate almost the whole row, squeezing the title down
       to a few px wide and making the heading text wrap one letter per
       line. Stacking the row instead of trying to fit icon+title+button
       side by side removes the squeeze entirely. */
    .tp-sector-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .tp-sector-title-wrap {
        width: 100%;
    }

    .tp-sector-btn {
        margin-left: 0;
        align-self: flex-start;
    }

    .tp-sector-title {
        font-size: 21px;
    }

    /* Icon + title share a compact first row; description drops to its own
       row spanning the full card width instead of being squeezed into the
       icon-offset column (which is all that's left of the old desktop
       layout on a narrow screen - icon-width-worth of dead space wasted on
       every wrapped line of a multi-line description). */
    .tp-sector-title-wrap {
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        row-gap: 10px;
    }

    .tp-sector-badge-icon {
        grid-row: 1;
        align-self: center;
        width: 44px;
        height: 44px;
    }

    .tp-sector-badge-icon svg {
        width: 22px;
        height: 22px;
    }

    .tp-sector-title {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        align-self: center;
    }

    .tp-sector-desc {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.tp-sector-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.tp-sector-card:hover {
    border-color: var(--tp-blue);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -4px rgba(24, 94, 224, 0.14);
}

.tp-sector-card-img-wrap {
    height: 240px;
    width: 100%;
    background: #f8fafc;
    display: block;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
}

.tp-sector-card-img-wrap img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.tp-sector-card:hover .tp-sector-card-img-wrap img {
    transform: scale(1.05);
}

.tp-sector-card-content {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.tp-sector-card-title {
    font-size: 17.5px;
    font-weight: 800;
    color: #07152b;
    margin: 0 0 8px;
    line-height: 1.3;
}

.tp-sector-card-spec {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 16px;
}

.tp-sector-card-cta {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tp-blue);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tp-sector-card:hover .tp-sector-card-cta {
    color: var(--tp-blue-hover);
}

/* ========================================================
   6. ENTERPRISE B2B ARTICLE LAYOUT (1240px CENTERED)
   ======================================================== */
body.single-post:not(.home) .site-content {
    padding-top: 0 !important;
    padding-bottom: 60px !important;
}

body.single-post:not(.home) .ast-container {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.single-post:not(.home) #primary {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single-post:not(.home) .entry-header {
    display: none !important;
}

body.single-post:not(.home) .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

.tp-article-hero-wrap {
    background: linear-gradient(135deg, #07152b 0%, #0b1e3d 60%, #040a14 100%);
    border-radius: 16px;
    padding: 44px 48px;
    margin: 36px 0 40px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 36px -4px rgba(7, 21, 43, 0.2);
}

.tp-article-breadcrumbs {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.tp-article-breadcrumbs a {
    color: #38bdf8;
    text-decoration: none;
}

.tp-article-hero-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 18px;
}

.tp-article-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #94a3b8;
}

.tp-article-meta-badge {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38bdf8;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
}

.tp-article-meta-divider {
    color: #334155;
}

.tp-article-layout {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    align-items: flex-start;
    margin: 0 0 60px;
}

@media (max-width: 1024px) {
    .tp-article-layout {
        flex-direction: column;
        gap: 36px;
    }
}

.tp-article-body {
    flex: 1 1 0%;
    min-width: 0;
    font-size: 16.5px;
    line-height: 1.8;
    color: #334155;
}

.tp-article-body p {
    margin-bottom: 22px;
}

.tp-article-body p.lead {
    font-size: 18px;
    line-height: 1.7;
    color: #0f172a;
    font-weight: 500;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.tp-article-body h2 {
    font-size: 23px;
    font-weight: 800;
    color: #07152b;
    margin: 36px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f5f9;
}

.tp-article-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: #07152b;
    margin: 26px 0 12px;
}

.tp-article-sidebar {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 1024px) {
    .tp-article-sidebar {
        width: 100%;
        position: static;
    }
}

.tp-sidebar-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 26px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.tp-sidebar-card-blue {
    background: #f8fafc;
    border-top: 3px solid var(--tp-blue);
}

.tp-sidebar-heading {
    font-size: 16.5px;
    font-weight: 800;
    color: #07152b;
    margin: 0 0 10px;
}

.tp-sidebar-phone {
    font-size: 20px;
    font-weight: 800;
    color: var(--tp-blue);
    text-decoration: none;
    display: block;
    margin: 8px 0 16px;
}

/* ========================================================
   7. CORPORATE B2B EXECUTIVE FOOTER
   ======================================================== */
.tp-exec-footer {
    background-color: var(--tp-navy) !important;
    color: #94a3b8 !important;
    padding: 60px 0 0 !important;
    font-size: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tp-exec-footer-main {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 2fr 1fr 1.2fr 1.2fr !important;
    gap: 40px !important;
    padding-bottom: 48px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .tp-exec-footer-main {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .tp-exec-footer-main {
        grid-template-columns: 1fr !important;
    }
}

.tp-footer-col-brand p {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
}

.tp-footer-heading {
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    margin: 0 0 18px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.tp-footer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tp-footer-list li {
    margin-bottom: 10px !important;
}

.tp-footer-list a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    transition: color 0.2s ease !important;
}

.tp-footer-list a:hover {
    color: #38bdf8 !important;
}

.tp-exec-footer-bottom {
    padding: 24px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.25) !important;
}

.tp-exec-bottom-inner {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #64748b !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#colophon.site-footer,
.site-below-footer-wrap,
.ast-small-footer-wrap {
    display: none !important;
}

/* ========================================================
   8. FLOATING MULTI-CHANNEL CONTACT WIDGET
   ======================================================== */
.tp-float-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

.tp-float-btn {
    background: var(--tp-blue);
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(24, 94, 224, 0.4);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.tp-float-btn:hover {
    background: var(--tp-blue-hover);
    transform: translateY(-2px);
}


/* ========================================================
   9. B2B CONTACT & RFQ FORM STYLING
   ======================================================== */
.tp-contact-page-wrap {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: 48px auto 80px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.3fr !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

@media (max-width: 900px) {
    .tp-contact-page-wrap {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

.tp-contact-info-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.tp-contact-card {
    background: #ffffff !important;
    border: 1px solid var(--tp-border) !important;
    border-radius: 12px !important;
    padding: 22px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.tp-contact-card h4 {
    margin: 0 0 6px !important;
    color: var(--tp-navy) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.tp-contact-card p {
    margin: 0 0 10px !important;
    font-size: 13.5px !important;
    color: var(--tp-text-muted) !important;
    line-height: 1.5 !important;
}

.tp-contact-phone {
    color: var(--tp-blue) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    transition: color 0.2s ease !important;
}

.tp-contact-phone:hover {
    color: var(--tp-blue-hover) !important;
}

.tp-contact-form-col {
    background: #ffffff !important;
    border: 1px solid var(--tp-border) !important;
    border-radius: 16px !important;
    padding: 36px 32px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
}

.tp-form-group {
    margin-bottom: 18px !important;
}

.tp-form-label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
}

.tp-req {
    color: var(--tp-red) !important;
}

.tp-form-input,
.tp-form-select,
.tp-form-textarea {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
    padding: 10px 16px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    font-size: 14.5px !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.tp-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px 18px !important;
    padding-right: 42px !important;
    cursor: pointer !important;
}

.tp-form-textarea {
    height: auto !important;
    min-height: 120px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

.tp-form-input:focus,
.tp-form-select:focus,
.tp-form-textarea:focus {
    border-color: var(--tp-blue) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(24, 94, 224, 0.12) !important;
}

/* ========================================================
   16. SHOP / CATEGORY ARCHIVE PAGES
   ======================================================== */

/* Contain the archive content to the same width as everything else */
.ast-woocommerce-container {
    max-width: var(--tp-max-w) !important;
    width: 92% !important;
    margin: 0 auto !important;
    padding: 40px 0 60px !important;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
    color: var(--tp-text-muted) !important;
    font-size: 14px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}
.woocommerce-breadcrumb a {
    color: var(--tp-text-muted) !important;
    text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover {
    color: var(--tp-blue) !important;
}

/* Page title */
.woocommerce-products-header__title.page-title {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: var(--tp-text-dark) !important;
    margin: 0 0 24px !important;
    line-height: 1.2 !important;
}

/* Result count + sort row */
.woocommerce-products-header {
    border-bottom: 1px solid var(--tp-border) !important;
    padding-bottom: 20px !important;
    margin-bottom: 28px !important;
}
.woocommerce-result-count {
    color: var(--tp-text-muted) !important;
    font-size: 14px !important;
    margin: 0 !important;
}
.woocommerce-ordering select.orderby {
    border: 1px solid var(--tp-border) !important;
    border-radius: 8px !important;
    padding: 8px 32px 8px 14px !important;
    font-size: 14px !important;
    color: var(--tp-text-dark) !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Product grid */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
@media (max-width: 1080px) {
    ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 780px) {
    ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    ul.products { grid-template-columns: 1fr !important; }
}

/* Product card */
ul.products li.product {
    background: #fff !important;
    border: 1px solid var(--tp-border) !important;
    border-radius: var(--tp-radius) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

.astra-shop-thumbnail-wrap {
    display: block !important;
    height: 220px !important;
    overflow: hidden !important;
    background: var(--tp-bg-light) !important;
}
.astra-shop-thumbnail-wrap img,
ul.products li.product img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

.astra-shop-summary-wrap {
    padding: 18px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.ast-woo-product-category {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--tp-blue) !important;
    margin: 0 0 6px !important;
}

.woocommerce-loop-product__title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--tp-text-dark) !important;
    margin: 0 0 12px !important;
    line-height: 1.35 !important;
}

ul.products li.product .ast-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    text-decoration: none !important;
}

/* "Vezi detalii & ofertă" CTA link */
ul.products li.product a.button {
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    color: var(--tp-blue) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: fit-content !important;
}
ul.products li.product a.button:hover {
    color: var(--tp-blue-hover) !important;
    text-decoration: underline !important;
}
/* Astra's own bag-icon "Read more" overlay - was previously styled to look
   like a second text link here (duplicating this theme's own quote-link
   text below the image), now removed outright (2026-08-24 user request):
   no cart on this B2B site, and the image/title already link to the same
   product page. See the unconditional hide rule further down. */
ul.products li.product .ast-on-card-button {
    display: none !important;
}

/* Pagination */
.woocommerce-pagination {
    margin-top: 40px !important;
}
.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    justify-content: center !important;
}
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1px solid var(--tp-border) !important;
    color: var(--tp-text-dark) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.woocommerce-pagination .page-numbers li span.current {
    background: var(--tp-blue) !important;
    border-color: var(--tp-blue) !important;
    color: #fff !important;
}

/* Shop / category archive filter bar (Category + Brand)
   Desktop: two dropdown widgets (Category has subcategory drill-down
   nested inside its panel). Mobile (<=900px): both collapse into a single
   "Filters" trigger opening a bottom-sheet modal with the same content -
   see tp_render_shop_filters() in functions.php, which renders the
   category-tree/brand-list markup once per language and reuses it in both
   the desktop panel and the mobile sheet (no JS DOM re-parenting). */
.tp-shop-filters-v2 {
    margin: 0 0 28px !important;
}
.tp-filter-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.tp-filter-mobile-trigger {
    display: none !important;
}
.tp-filter-sheet {
    display: none !important;
}

/* Dropdown trigger + panel (desktop) */
.tp-filter-dd {
    position: relative !important;
}
.tp-filter-dd-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1.5px solid var(--tp-border) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tp-text-dark) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.tp-filter-dd-trigger:hover,
.tp-filter-dd.tp-open .tp-filter-dd-trigger,
.tp-filter-dd-trigger.tp-filter-dd-active {
    border-color: var(--tp-blue) !important;
    color: var(--tp-blue) !important;
}
.tp-filter-dd-label {
    color: var(--tp-text-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
}
.tp-filter-dd-trigger:hover .tp-filter-dd-label,
.tp-filter-dd.tp-open .tp-filter-dd-trigger .tp-filter-dd-label,
.tp-filter-dd-trigger.tp-filter-dd-active .tp-filter-dd-label {
    color: var(--tp-blue) !important;
}
.tp-filter-dd-value {
    color: var(--tp-blue) !important;
    font-weight: 700 !important;
}
.tp-filter-caret {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 auto !important;
    transition: transform 0.15s ease !important;
}
.tp-filter-dd.tp-open .tp-filter-dd-trigger .tp-filter-caret {
    transform: rotate(180deg) !important;
}
.tp-filter-dd-panel {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 40 !important;
    min-width: 260px !important;
    max-width: 320px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid var(--tp-border) !important;
    border-radius: var(--tp-radius) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
    padding: 10px !important;
}
.tp-filter-dd.tp-open .tp-filter-dd-panel {
    display: block !important;
}

/* Shared taxonomy list rows (used in both desktop panel and mobile sheet) */
.tp-filter-row {
    display: block !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tp-text-dark) !important;
    text-decoration: none !important;
}
.tp-filter-row:hover {
    background: var(--tp-bg-light) !important;
}
.tp-filter-row.active {
    background: var(--tp-blue) !important;
    color: #fff !important;
}
.tp-filter-row-sub {
    font-weight: 500 !important;
    font-size: 13px !important;
    padding-left: 26px !important;
}
.tp-filter-count {
    opacity: 0.65 !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
}
.tp-filter-row.active .tp-filter-count {
    opacity: 0.85 !important;
}

/* Category drill-down (expand caret + nested subcategory list) */
.tp-filter-cat-row {
    display: flex !important;
    align-items: center !important;
}
.tp-filter-cat-row .tp-filter-row {
    flex: 1 1 auto !important;
}
.tp-filter-expand {
    flex: 0 0 auto !important;
    background: none !important;
    border: none !important;
    padding: 8px !important;
    cursor: pointer !important;
    color: var(--tp-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tp-filter-expand .tp-filter-caret {
    transition: transform 0.15s ease !important;
}
.tp-filter-cat-node.tp-open > .tp-filter-cat-row .tp-filter-expand .tp-filter-caret {
    transform: rotate(180deg) !important;
}
.tp-filter-subcat-list {
    display: none !important;
    padding: 2px 0 6px !important;
}
.tp-filter-cat-node.tp-open > .tp-filter-subcat-list {
    display: block !important;
}

.tp-filter-clear-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: 1.5px dashed var(--tp-red) !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--tp-red) !important;
    text-decoration: none !important;
}
.tp-filter-clear-all:hover {
    background: #fff1f2 !important;
    border-color: var(--tp-red-hover) !important;
    color: var(--tp-red-hover) !important;
}

@media (max-width: 900px) {
    .tp-filter-bar {
        display: none !important;
    }
    .tp-filter-mobile-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        background: #fff !important;
        border: 1.5px solid var(--tp-border) !important;
        border-radius: 10px !important;
        padding: 12px 18px !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: var(--tp-text-dark) !important;
        cursor: pointer !important;
    }
    .tp-filter-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 5px !important;
        background: var(--tp-blue) !important;
        color: #fff !important;
        border-radius: 20px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }

    .tp-filter-sheet {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        /* Must beat #tpFloatingWrapper's z-index:9999999 (see §18b above) so
           the sheet isn't hidden behind the always-on-top contact widget. */
        z-index: 10000000 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .tp-filter-sheet.tp-open {
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .tp-filter-sheet-overlay {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.5) !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
    }
    .tp-filter-sheet.tp-open .tp-filter-sheet-overlay {
        opacity: 1 !important;
    }
    .tp-filter-sheet-body {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: 82vh !important;
        background: #fff !important;
        border-radius: 16px 16px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateY(100%) !important;
        transition: transform 0.25s ease !important;
    }
    .tp-filter-sheet.tp-open .tp-filter-sheet-body {
        transform: translateY(0) !important;
    }
    .tp-filter-sheet-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        border-bottom: 1px solid var(--tp-border) !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        flex: 0 0 auto !important;
    }
    .tp-filter-sheet-close {
        background: none !important;
        border: none !important;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        color: var(--tp-text-muted) !important;
        padding: 4px 8px !important;
    }
    .tp-filter-sheet-scroll {
        overflow-y: auto !important;
        padding: 8px 18px 18px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .tp-filter-section {
        padding: 14px 0 !important;
        border-bottom: 1px solid var(--tp-border) !important;
    }
    .tp-filter-section:last-child {
        border-bottom: none !important;
    }
    .tp-filter-section-title {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        color: var(--tp-text-muted) !important;
        margin-bottom: 8px !important;
    }
    /* Inside the sheet the drill-down list is always in normal flow, not
       an absolutely-positioned panel - the .tp-filter-dd-panel rules above
       only apply to the desktop dropdown, so no override needed here. */
    .tp-filter-sheet-footer {
        display: flex !important;
        gap: 10px !important;
        padding: 14px 18px !important;
        border-top: 1px solid var(--tp-border) !important;
        flex: 0 0 auto !important;
    }
    .tp-filter-sheet-clear {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 12px !important;
        border-radius: 10px !important;
        border: 1.5px dashed var(--tp-red) !important;
        color: var(--tp-red) !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }
    .tp-filter-sheet-apply {
        flex: 1 1 auto !important;
        padding: 12px !important;
        border-radius: 10px !important;
        border: none !important;
        background: var(--tp-blue) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }
}

/* 17. SEARCH RESULTS & BLOG-CARD THUMBNAILS
   Astra core forces a 16:9 box on .post-thumb-img-content img (used by
   search results and the Articles listing) but never sets object-fit, so
   the browser default (object-fit: fill) stretches our square 800x800
   product photos to fit. Cover fixes it without touching Astra's sizing. */
.post-thumb-img-content img {
    object-fit: cover;
}

/* 18. MOBILE LAYOUT FIXES
   Three real mobile bugs found via manual review (min-width:0 grid/flex
   squeeze pattern, hardcoded non-responsive inline grids, and a fixed
   widget with no mobile-aware sizing). */

/* 18a. Partner/client logos grid. Base rules added 2026-08-24 restoring
   tp_render_partners_section() in functions.php (the section had gone
   fully missing, not just unresponsive - see that function's own
   comment) - the responsive overrides just below already existed from an
   earlier fix against the pre-migration inline-styled version of this
   same section and are reused as-is against the same class names. */
.tp-partners-section {
    width: 100%;
    max-width: var(--tp-max-w);
    margin: 45px auto 65px;
    padding: 0 20px;
    box-sizing: border-box;
}

.tp-partners-heading {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--tp-navy);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 24px;
}

.tp-partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.tp-partner-card {
    background: #ffffff;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.tp-partner-card:hover {
    border-color: var(--tp-border);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.tp-partner-card img {
    max-height: 78px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 640px) {
    .tp-partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .tp-partner-card {
        height: 100px !important;
        padding: 12px !important;
    }
}
@media (min-width: 641px) and (max-width: 900px) {
    .tp-partners-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 18b. Floating multi-channel contact widget (#tpFloatingWrapper /
   #tpFloatToggleBtn) - was fixed at bottom:24px/right:24px with no mobile
   adjustment, and the hero's two stacked CTA buttons had no reduced mobile
   padding either, so on short viewports the hero's red "Solicită ofertă"
   button could land in the same screen area as the always-on-top
   (z-index:9999999) fixed widget. Shrinking the widget to an icon-only
   circle on small screens and pulling it slightly off the edge reduces its
   footprint and the chance of it sitting on top of on-page content. The
   wrapper's inline styles had their !important flags removed in
   functions.php specifically so this override can take effect - inline
   !important always beats external !important regardless of specificity. */
@media (max-width: 640px) {
    #tpFloatingWrapper {
        bottom: 16px !important;
        right: 16px !important;
    }
    #tpFloatToggleBtn {
        padding: 14px !important;
        border-radius: 50% !important;
        width: 52px !important;
        height: 52px !important;
        justify-content: center !important;
    }
    #tpFloatToggleBtn span {
        display: none !important;
    }
    #tpFloatMenu {
        right: 0 !important;
        bottom: 60px !important;
    }
}

/* 18c. Hero section had no mobile padding reduction at all (95px/105px
   top/bottom on every viewport), pushing its content - including the red
   CTA button the floating widget was overlapping - unnecessarily far down
   on short mobile screens. Shorter hero on mobile is also just better
   mobile UX on its own (get to real content faster). */
@media (max-width: 640px) {
    .tp-hero-section {
        padding: 48px 20px 56px !important;
        min-height: 0 !important;
    }
}

/* 19. Hero CTA buttons ([tp_hero_actions] shortcode output) - restored from
   the old live functions.php's "Priority 99999 Critical Layout CSS Hook"
   inline block, which no longer exists after the tehnoport-core plugin
   split (2026-08-23) replaced that file. Without this, .tp-hero-btn* had
   zero styling anywhere and rendered as bare unstyled text links - a real
   regression caught right after the live deploy. That old block actually
   had two different, conflicting copies of this same rule (itself another
   instance of the duplicate-critical-CSS pattern in GEMINI.md §4.3); using
   the later one, since brand blue #185ee0 for the secondary action matches
   the documented design tokens (GEMINI.md §5) while the earlier copy's
   translucent-glass secondary button did not. */
.tp-hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 26px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    letter-spacing: -0.01em !important;
}
.tp-hero-btn-primary {
    background: #e11d48 !important;
    color: #ffffff !important;
    border: 1px solid #e11d48 !important;
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.45) !important;
}
.tp-hero-btn-primary:hover {
    background: #be123c !important;
    border-color: #be123c !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(225, 29, 72, 0.6) !important;
}
.tp-hero-btn-secondary {
    background: #185ee0 !important;
    color: #ffffff !important;
    border: 1px solid #185ee0 !important;
    box-shadow: 0 4px 18px rgba(24, 94, 224, 0.4) !important;
}
.tp-hero-btn-secondary:hover {
    background: #0f46b3 !important;
    border-color: #0f46b3 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(24, 94, 224, 0.55) !important;
}
@media (max-width: 768px) {
    .tp-hero-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .tp-hero-btn {
        width: 100% !important;
        padding: 12px 18px !important;
        font-size: 14.5px !important;
    }
}

/* 20. Product-card "N Models" count badge - restored from the same lost
   old-functions.php critical-CSS block as the hero buttons (§19 above).
   Without this it was rendering as tiny unstyled inline text overlapping
   the image edge instead of a proper badge pill. */
.tp-card-count-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 5 !important;
    background: #07152b !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    box-shadow: 0 3px 8px rgba(7, 21, 43, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}
@media (max-width: 640px) {
    .tp-card-count-badge {
        top: 6px !important;
        right: 6px !important;
        font-size: 10px !important;
        padding: 3px 7px !important;
    }
}

/* 21. WhatsApp button on single product pages - same "class used but never
   styled" gap as the hero buttons; rendered as a bare text link. Label no
   longer includes the raw phone number (2026-08-24 user request - a clean
   "Chat on WhatsApp" reads as an action button, not a phone listing). */
.tp-btn-whatsapp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 14px 26px !important;
    background: #25D366 !important;
    color: #ffffff !important;
    border: 1px solid #25D366 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}
.tp-btn-whatsapp:hover {
    background: #1ebe5a !important;
    border-color: #1ebe5a !important;
    color: #ffffff !important;
}

/* 22. Astra's "Read more" bag-icon overlay is hidden via the more specific
   `ul.products li.product .ast-on-card-button` rule above (needed to beat
   an existing rule of equal specificity that was styling it instead) - see
   that rule's comment for the reasoning. */

/* 23. Product page structured specs table (tp_render_pdp_specs_table(),
   functions.php). Label column uses a fixed max-width instead of a
   percentage so a long translated label can't squeeze the value column -
   see GEMINI.md §4.5 lesson on flex/grid min-width:auto overflow; a table
   cell doesn't have that specific failure mode, but width:42% on the label
   `<th>` alone was tested and still let very long RU labels crowd the
   value on narrow screens, so max-width + white-space normal wrapping on
   both columns is the safer version, verified at 375px. */
.tp-specs-table-wrap {
    margin: 20px 0;
}
.tp-specs-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #07152b;
    margin: 0 0 10px;
}
.tp-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tp-specs-table tr {
    border-bottom: 1px solid #e2e8f0;
}
.tp-specs-table th {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px 10px 0;
    color: #64748b;
    font-weight: 600;
    max-width: 160px;
    white-space: normal;
}
.tp-specs-table td {
    padding: 10px 0;
    color: #07152b;
    font-weight: 600;
    white-space: normal;
}
@media (max-width: 768px) {
    .tp-specs-table {
        font-size: 13px;
    }
    .tp-specs-table th {
        max-width: 120px;
        padding-right: 8px;
    }
}

/* Fluent Forms Tehnoport styling - shared by the contact page's native
   form AND the quote-request popup modal, both of which embed one of the
   TP_RFQ_FORM_IDS forms (moved here 2026-08-27 from the contact-page
   shortcode's own inline <style> so it isn't duplicated per embed site). */
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="tel"],
.fluentform input[type="email"],
.fluentform select,
.fluentform textarea {
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #07152b !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
    border-color: #185ee0 !important;
    box-shadow: 0 0 0 3px rgba(24, 94, 224, 0.15) !important;
}
.fluentform .ff-el-input--label label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.fluentform .ff-btn-submit {
    width: 100% !important;
    background: #185ee0 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(24, 94, 224, 0.35) !important;
    transition: transform 0.15s ease, background 0.2s ease !important;
}
.fluentform .ff-btn-submit:hover {
    background: #0f4ec2 !important;
    transform: translateY(-1px) !important;
}
.fluentform .ff-message-success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    font-size: 14px !important;
    text-align: center !important;
}