/**
 * Exakt Theme Commerce - Theme Styles
 * Additional styles beyond style.css
 * All colors and typography use CSS variables from Customizer
 *
 * @package ExaktThemeCommerce
 * @version 1.0.6
 */

/* ==========================================================================
   Full Width Template / Elementor Support
   ========================================================================== */

.exakt-fullwidth-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Elementor full-width sections */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100%;
}

/* Remove container restrictions for Elementor pages */
.elementor-page .exakt-main {
    padding: 0;
}

.elementor-page .exakt-container {
    max-width: 100%;
    padding: 0;
}

.elementor-page .exakt-content-area {
    padding: 0;
}

/* ==========================================================================
   Top Bar
   ========================================================================== */

.exakt-topbar {
    background: var(--exakt-primary);
    color: var(--exakt-white);
    padding: 10px 0;
    /* v1.0.5 - Topbar uses body font size minus 2px */
    font-size: calc(var(--exakt-font-size-body, 16px) - 2px);
}

.exakt-topbar .exakt-container {
    max-width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.exakt-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.exakt-topbar-left {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.exakt-topbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Topbar Slogan */
.exakt-topbar-slogan {
    /* v1.0.5 - Uses heading font styling */
    font-size: 18px;
    font-weight: var(--exakt-font-weight-heading, 600);
    color: var(--exakt-white);
    letter-spacing: 0.5px;
}

/* v1.0.193 - Scrolling slogan (single-message marquee).
   ONE copy of the message crosses the bar at a time - never several repeats on
   screen at once (v1.0.192 used two groups of three copies, which showed 3 at a
   time on a 1200px bar).

   How the geometry works: the track gets padding-left:100%, and a percentage
   padding resolves against the CONTAINER width (C). So the track's own width is
   W = C + T (T = text width) and the text sits in the last T pixels of it.
     translateX(0)     -> text at [C, C+T]      : just off the right edge
     translateX(-100%) -> text at [-T, 0]       : just off the left edge
     translateX(-50%)  -> text exactly centred  (used as the resting position)
   One message enters as the previous one leaves, so the bar is never empty and
   there is no seam to line up.

   Duration comes from the Customizer as --exakt-topbar-marquee-duration. */
.exakt-topbar-right--marquee {
    flex: 1 1 auto;
    min-width: 0;
}

.exakt-topbar-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.exakt-topbar-marquee-track {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    padding-left: 100%;
    /* translate3d + will-change keep this on the compositor, so the text moves
       sub-pixel smoothly instead of being repainted on the main thread each frame. */
    will-change: transform;
    backface-visibility: hidden;
    animation-duration: var(--exakt-topbar-marquee-duration, 24s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: exakt-topbar-marquee-rtl;
}

.exakt-topbar-marquee--ltr .exakt-topbar-marquee-track {
    animation-name: exakt-topbar-marquee-ltr;
}

/* Show it once, then leave it resting in the middle of the bar. Half the travel,
   so half the time - the message crosses at the same speed either way. */
.exakt-topbar-marquee--once .exakt-topbar-marquee-track {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--exakt-topbar-marquee-duration, 24s) / 2);
    animation-name: exakt-topbar-marquee-rtl-once;
}

.exakt-topbar-marquee--once.exakt-topbar-marquee--ltr .exakt-topbar-marquee-track {
    animation-name: exakt-topbar-marquee-ltr-once;
}

/* Let people read a message they care about. */
.exakt-topbar-marquee:hover .exakt-topbar-marquee-track,
.exakt-topbar-marquee:focus-within .exakt-topbar-marquee-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    /* No motion at all: drop the leading offset so the message simply sits in the
       bar. Without clearing the padding it would be parked off-screen right. */
    .exakt-topbar-marquee-track {
        animation: none;
        transform: none;
        padding-left: 0;
    }
}

@keyframes exakt-topbar-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
}

@keyframes exakt-topbar-marquee-ltr {
    from { transform: translate3d(-100%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes exakt-topbar-marquee-rtl-once {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes exakt-topbar-marquee-ltr-once {
    from { transform: translate3d(-100%, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.exakt-topbar a {
    color: var(--exakt-white);
    text-decoration: none;
}

.exakt-topbar a:hover {
    opacity: 0.8;
}

.exakt-topbar .exakt-icon {
    vertical-align: middle;
    margin-right: 8px;
}

.exakt-topbar-phones,
.exakt-topbar-email {
    display: flex;
    align-items: center;
}

.exakt-topbar-separator {
    margin: 0 8px;
    opacity: 0.7;
}

/* Top Bar Search */
.exakt-topbar-search {
    position: relative;
}

.exakt-topbar-search form {
    display: flex;
    align-items: center;
}

.exakt-topbar-search input[type="search"] {
    width: 220px;
    padding: 8px 15px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--exakt-white);
}

.exakt-topbar-search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.exakt-topbar-search input[type="search"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.25);
}

.exakt-topbar-search button {
    background: var(--exakt-primary-light);
    border: none;
    padding: 8px 12px;
    border-radius: 50%;
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--exakt-white);
    transition: background 0.3s ease;
}

.exakt-topbar-search button:hover {
    background: var(--exakt-white);
    color: var(--exakt-primary);
}

/* Top Bar Social Icons */
.exakt-topbar-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exakt-topbar-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--exakt-primary-light);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.exakt-topbar-social a:hover {
    background: var(--exakt-white);
    opacity: 1;
}

.exakt-topbar-social a:hover svg {
    fill: var(--exakt-primary);
}

.exakt-topbar-social svg {
    fill: var(--exakt-white);
}

/* v1.0.68 - Top Bar Navigation Menu */
.exakt-topbar-nav {
    display: flex;
    align-items: center;
}

.exakt-topbar-nav .exakt-topbar-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    align-items: center;
}

.exakt-topbar-nav .exakt-topbar-menu li {
    position: relative;
}

.exakt-topbar-nav .exakt-topbar-menu li a {
    display: block;
    padding: 6px 14px;
    color: var(--exakt-white);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.exakt-topbar-nav .exakt-topbar-menu li a:hover {
    opacity: 0.75;
}

/* Hide any sub-menus — topbar is top-level only */
.exakt-topbar-nav .exakt-topbar-menu ul {
    display: none !important;
}

/* ==========================================================================
   Header Enhancements
   ========================================================================== */

.exakt-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--exakt-header-bg, var(--exakt-white));
}

.exakt-header .exakt-container {
    max-width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.exakt-header-inner {
    min-height: 70px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
}

/* ==========================================================================
   v1.0.37 - Shop Category Header (Home icon + Site icon + Categories)
   Only shown on shop/category pages when enabled in Customizer.
   ========================================================================== */

/* Home icon + Site icon container */
.exakt-shop-header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.exakt-shop-home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    color: var(--exakt-text, #333);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.exakt-shop-home-link:hover {
    color: var(--exakt-primary, #6b4c9a);
    background-color: rgba(0, 0, 0, 0.04);
}

.exakt-shop-home-link svg {
    display: block;
}

.exakt-shop-site-icon-link {
    display: flex;
    align-items: center;
}

.exakt-site-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: block;
    object-fit: contain;
}

.exakt-site-icon-fallback {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--exakt-primary, #6b4c9a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

/* Category Menu */
.exakt-category-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.exakt-category-menu::-webkit-scrollbar {
    display: none;
}

.exakt-category-menu li {
    flex-shrink: 0;
}

.exakt-category-menu li a {
    display: block;
    padding: 8px 14px;
    color: var(--exakt-text, #333);
    font-weight: var(--exakt-font-weight-nav, 500);
    font-size: var(--exakt-font-size-nav, 14px);
    font-family: var(--exakt-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 4px;
    text-decoration: none;
}

.exakt-category-menu li a:hover {
    color: var(--exakt-primary, #6b4c9a);
    background-color: rgba(0, 0, 0, 0.04);
}

.exakt-category-menu li.current-cat a {
    color: var(--exakt-primary, #6b4c9a);
    font-weight: 600;
}

/* v1.0.37 END */

/* Navigation takes available space and pushes cart to right */
.exakt-nav {
    flex: 1 1 auto !important;
}

/* v1.0.5 CHANGE - Nav font now controlled via Customizer > Typography */
/* CRITICAL: Must override Elementor nav menu widget styles */
.exakt-header .exakt-nav a,
.exakt-header .exakt-nav ul li a,
.exakt-header .exakt-menu a,
.exakt-header .exakt-menu li a,
body .exakt-header .exakt-nav a,
body.woocommerce .exakt-header .exakt-nav a,
body.woocommerce-page .exakt-header .exakt-nav a,
body.elementor-page .exakt-header .exakt-nav a,
body.archive .exakt-header .exakt-nav a,
body.single-product .exakt-header .exakt-nav a,
/* Elementor nav menu overrides */
.elementor-nav-menu a,
.elementor-nav-menu--main a,
.elementor-widget-nav-menu a,
.elementor-nav-menu li a,
.elementor-nav-menu--main li a,
body.elementor-page .elementor-nav-menu a,
body.elementor-page .elementor-nav-menu--main a,
body.elementor-page .elementor-widget-nav-menu a,
body .elementor-nav-menu a,
body .elementor-nav-menu--main a,
.e-n-menu a,
.e-n-menu-item a,
body .e-n-menu a,
body.elementor-page .e-n-menu a {
    font-family: var(--exakt-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important;
    font-weight: var(--exakt-font-weight-nav, 500) !important;
    font-size: var(--exakt-font-size-nav, 15px) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
/* v1.0.5 CHANGE END */

/* v1.0.70 ADD START - Link and nav link colors */
a {
    color: var(--exakt-link);
}
a:hover {
    color: var(--exakt-link-hover);
}

.exakt-header .exakt-nav a,
.exakt-header .exakt-nav ul li a,
.exakt-header .exakt-menu a,
.exakt-header .exakt-menu li a,
body .exakt-header .exakt-nav a,
.elementor-nav-menu a,
.elementor-nav-menu--main a,
.elementor-widget-nav-menu a,
.elementor-nav-menu li a,
body .elementor-nav-menu a,
body .e-n-menu a,
body.elementor-page .e-n-menu a {
    color: var(--exakt-nav-link) !important;
}

.exakt-header .exakt-nav a:hover,
.exakt-header .exakt-nav ul li a:hover,
.exakt-header .exakt-menu a:hover,
.exakt-header .exakt-menu li a:hover,
body .exakt-header .exakt-nav a:hover,
.elementor-nav-menu a:hover,
.elementor-nav-menu--main a:hover,
.elementor-widget-nav-menu a:hover,
.elementor-nav-menu li a:hover,
body .elementor-nav-menu a:hover,
body .e-n-menu a:hover,
body.elementor-page .e-n-menu a:hover {
    color: var(--exakt-nav-link-hover) !important;
}
/* v1.0.70 ADD END */

/* Cart stays on the right */
.exakt-header-cart {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* v1.0.121 ADD START - Account icon */
.exakt-header-account {
    flex-shrink: 0;
    margin-left: 12px;
}

/* v1.0.133 - Account icon on LEFT (desktop): appears before the logo */
.exakt-account-left .exakt-header-account {
    order: -1;
    margin-left: 0;
    margin-right: 12px;
}

.exakt-account-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--exakt-text, #333);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 4px;
}

.exakt-account-link:hover {
    color: var(--exakt-primary, #0a1929);
}

.exakt-account-link svg {
    display: block;
}
/* v1.0.121 ADD END */

/* Mobile Menu Toggle - Hidden on desktop */
/* v1.0.56 - background/border need !important: global `button` rule in style.css bleeds through */
.exakt-menu-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px;
    cursor: pointer;
    color: var(--exakt-text, #333);
}

.exakt-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--exakt-menu-toggle-color, var(--exakt-text, #333333));
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Header Search (in menu area) */
.exakt-header-search {
    position: relative;
    margin-left: 15px;
}

.exakt-header-search form {
    display: flex;
    align-items: center;
}

.exakt-header-search input[type="search"] {
    width: 200px;
    padding: 10px 45px 10px 15px;
    border: 1px solid var(--exakt-border);
    border-radius: 25px;
    font-size: 14px;
    background: var(--exakt-white);
    color: var(--exakt-text);
    transition: border-color 0.3s ease, width 0.3s ease;
}

.exakt-header-search input[type="search"]::placeholder {
    color: var(--exakt-text-light);
}

.exakt-header-search input[type="search"]:focus {
    outline: none;
    border-color: var(--exakt-primary);
    width: 250px;
}

/* Header Search Button - Primary Color Filled Style (Desktop) */ /* v1.0.7 FIX */
@media (min-width: 769px) {
    .exakt-header-search button,
    .exakt-header-search button[type="submit"],
    .exakt-header .exakt-header-search button,
    .exakt-header .exakt-header-search button[type="submit"],
    header.exakt-header .exakt-header-search button,
    body .exakt-header .exakt-header-search button,
    body .exakt-header-search form button {
        background: var(--exakt-primary) !important;
        background-color: var(--exakt-primary) !important;
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        padding: 10px !important;
        border-radius: 50% !important;
        margin-left: -38px;
        cursor: pointer;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #ffffff !important;
        transition: background 0.3s ease;
        position: relative;
        z-index: 1;
        min-width: 40px;
        min-height: 40px;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-size: inherit !important;
    }

    .exakt-header-search button:hover,
    .exakt-header-search button[type="submit"]:hover,
    .exakt-header .exakt-header-search button:hover,
    .exakt-header .exakt-header-search button[type="submit"]:hover,
    header.exakt-header .exakt-header-search button:hover,
    body .exakt-header .exakt-header-search button:hover,
    body .exakt-header-search form button:hover {
        background: var(--exakt-primary-light) !important;
        background-color: var(--exakt-primary-light) !important;
        color: #ffffff !important;
    }

    .exakt-header-search button svg,
    .exakt-header-search button[type="submit"] svg,
    .exakt-header .exakt-header-search button svg,
    body .exakt-header-search form button svg {
        stroke: #ffffff !important;
        color: #ffffff !important;
        fill: none !important;
    }
}

/* ==========================================================================
   v1.0.32 - Header Filter Bar
   Swaps nav for a compact search/filter bar on scroll.
   All visibility controlled via .exakt-filterbar-scrolled class on header.
   ========================================================================== */

/* Default state: hidden, ready for flex layout */
.exakt-header-filter-bar {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    min-height: 0;
    padding: 6px 12px;
    border-radius: 6px;
    overflow: hidden;
    transition: opacity 0.25s ease;
    opacity: 0;
}

/* Scrolled state: show filter bar, hide nav */
.exakt-header.exakt-filterbar-scrolled .exakt-nav {
    display: none !important;
}

.exakt-header.exakt-filterbar-scrolled .exakt-header-filter-bar {
    display: flex;
    opacity: 1;
}

/* Generic shortcode form styling inside filter bar */
.exakt-header-filter-bar form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Strip all borders/outlines from everything inside filter bar */
.exakt-header-filter-bar *,
.exakt-header-filter-bar *:focus,
.exakt-header-filter-bar *:active {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.exakt-header-filter-bar input[type="text"],
.exakt-header-filter-bar input[type="search"],
.exakt-header-filter-bar input[type="number"],
.exakt-header-filter-bar select {
    height: 38px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 38px;
    flex: 1 1 auto;
    min-width: 0;
}

.exakt-header-filter-bar button,
.exakt-header-filter-bar input[type="submit"],
.exakt-header-filter-bar .button {
    height: 38px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 38px;
}

/* Hide labels inside filter bar to save space */
.exakt-header-filter-bar label {
    display: none;
}

/* Real estate plugin horizontal search compatibility */
.exakt-header-filter-bar .exakt-re-search-horizontal {
    flex-wrap: nowrap !important;
    padding: 0 !important;
    background: transparent !important;
}

.exakt-header-filter-bar .exakt-re-search-horizontal label {
    display: none !important;
}

/* Mobile (≤1024px): replace entire header on scroll */
@media (max-width: 1024px) {
    .exakt-header.exakt-filterbar-scrolled .exakt-logo,
    .exakt-header.exakt-filterbar-scrolled .exakt-shop-header-icons,
    .exakt-header.exakt-filterbar-scrolled .exakt-menu-toggle,
    .exakt-header.exakt-filterbar-scrolled .exakt-header-search,
    .exakt-header.exakt-filterbar-scrolled .exakt-header-cart,
    .exakt-header.exakt-filterbar-scrolled .exakt-nav {
        display: none !important;
    }

    .exakt-header.exakt-filterbar-scrolled .exakt-header-filter-bar {
        display: flex !important;
        width: 100%;
        opacity: 1;
    }

    .exakt-header.exakt-filterbar-scrolled .exakt-header-inner {
        min-height: auto !important;
    }

    /* v1.0.34 - Compact mobile filter bar layout (CSS Grid) */
    .exakt-header-filter-bar {
        padding: 6px 8px !important;
    }

    /* Strip plugin wrapper padding/margin inside filter bar */
    .exakt-header-filter-bar .exakt-re-search {
        padding: 6px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
    }

    .exakt-header-filter-bar .exakt-re-search-form {
        width: 100% !important;
    }

    /* Grid layout: 3 columns, forces fields side by side */
    .exakt-header-filter-bar .exakt-re-search-fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Keyword: full width */
    .exakt-header-filter-bar .exakt-re-search-field:first-child {
        grid-column: 1 / -1 !important;
    }

    /* Price range: full width, side by side */
    .exakt-header-filter-bar .exakt-re-search-price-range {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .exakt-header-filter-bar .exakt-re-search-price-range input {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .exakt-header-filter-bar .exakt-re-search-sep {
        flex-shrink: 0 !important;
        color: #fff !important;
    }

    /* Search button: full width */
    .exakt-header-filter-bar .exakt-re-search-btn-wrap {
        grid-column: 1 / -1 !important;
    }

    /* All fields: reset min-width so grid can size them */
    .exakt-header-filter-bar .exakt-re-search-field {
        min-width: 0 !important;
        width: auto !important;
    }

    /* All inputs/selects fill their cell */
    .exakt-header-filter-bar .exakt-re-search-field input,
    .exakt-header-filter-bar .exakt-re-search-field select {
        width: 100% !important;
        height: 36px !important;
        font-size: 12px !important;
        padding: 4px 6px !important;
        min-width: 0 !important;
    }

    .exakt-header-filter-bar .exakt-re-search-btn {
        width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* v1.0.34 - Property card images: responsive height on mobile */
    .exakt-re-card-image {
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }

    .exakt-re-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* v1.0.35 - Mobile grid layout for ALL horizontal search forms (page-level) */
@media (max-width: 768px) {
    .exakt-re-search-horizontal .exakt-re-search-fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
    }

    .exakt-re-search-horizontal .exakt-re-search-field {
        min-width: 0 !important;
    }

    .exakt-re-search-horizontal .exakt-re-search-field:first-child {
        grid-column: 1 / -1 !important;
    }

    .exakt-re-search-horizontal .exakt-re-search-price-range {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .exakt-re-search-horizontal .exakt-re-search-price-range input {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .exakt-re-search-horizontal .exakt-re-search-btn-wrap {
        grid-column: 1 / -1 !important;
    }

    .exakt-re-search-horizontal .exakt-re-search-field input,
    .exakt-re-search-horizontal .exakt-re-search-field select {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   Archive/Blog Posts Grid
   ========================================================================== */

.exakt-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.exakt-archive-post {
    background: var(--exakt-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.exakt-archive-post:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.exakt-archive-post .exakt-post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.exakt-archive-post .exakt-post-content {
    padding: 20px;
}

.exakt-archive-post .exakt-post-title {
    /* v1.0.5 - Uses heading font */
    font-size: 18px;
    font-family: var(--exakt-font-heading);
    font-weight: var(--exakt-font-weight-heading, 600);
    margin: 0 0 10px;
}

.exakt-archive-post .exakt-post-meta {
    font-size: 13px;
    color: var(--exakt-text-light);
    margin-bottom: 10px;
}

.exakt-archive-post .exakt-post-excerpt {
    font-size: 14px;
    color: var(--exakt-text-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

.exakt-read-more {
    display: inline-block;
    color: var(--exakt-primary);
    font-weight: 500;
    font-size: 14px;
}

.exakt-read-more:hover {
    color: var(--exakt-primary-light);
}

/* ==========================================================================
   Single Post Styles
   ========================================================================== */

.exakt-single .exakt-post-thumbnail {
    margin-bottom: 30px;
}

.exakt-single .exakt-post-thumbnail img {
    width: 100%;
    border-radius: 8px;
}

.exakt-single .exakt-post-header {
    margin-bottom: 30px;
}

.exakt-single .exakt-post-title {
    /* v1.0.5 - Uses H1 font size from Customizer */
    font-size: var(--exakt-font-size-h1, 36px);
    font-family: var(--exakt-font-heading);
    font-weight: var(--exakt-font-weight-heading, 600);
    line-height: 1.3;
}

.exakt-single .exakt-post-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.exakt-single .exakt-post-content {
    /* v1.0.5 - Slightly larger than body for readability */
    font-size: calc(var(--exakt-font-size-body, 16px) + 1px);
    line-height: 1.8;
}

.exakt-single .exakt-post-content p {
    margin-bottom: 20px;
}

.exakt-single .exakt-post-content h2,
.exakt-single .exakt-post-content h3,
.exakt-single .exakt-post-content h4 {
    margin-top: 40px;
    margin-bottom: 20px;
}

.exakt-single .exakt-post-content img {
    border-radius: 8px;
    margin: 20px 0;
}

.exakt-single .exakt-post-content blockquote {
    border-left: 4px solid var(--exakt-primary);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: var(--exakt-text-light);
}

.exakt-single .exakt-post-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--exakt-border);
}

.exakt-post-tags {
    font-size: 14px;
}

.exakt-post-tags a {
    display: inline-block;
    background: var(--exakt-bg-light);
    padding: 5px 12px;
    border-radius: 20px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 13px;
}

.exakt-post-tags a:hover {
    background: var(--exakt-primary);
    color: var(--exakt-white);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--exakt-border);
}

.comments-title {
    font-size: 24px;
    margin-bottom: 30px;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment {
    padding: 20px 0;
    border-bottom: 1px solid var(--exakt-bg-light);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.comment-author img {
    border-radius: 50%;
}

.comment-author .fn {
    font-weight: 600;
}

.comment-metadata {
    font-size: 13px;
    color: var(--exakt-text-light);
}

.comment-content {
    margin-left: 70px;
}

.comment-reply-link {
    color: var(--exakt-primary);
    font-size: 13px;
    font-weight: 500;
}

.comment-respond {
    margin-top: 40px;
}

.comment-reply-title {
    font-size: 20px;
    margin-bottom: 20px;
}

.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.comment-form input,
.comment-form textarea {
    margin-bottom: 20px;
}

/* ==========================================================================
   Search Form
   ========================================================================== */

.exakt-search-form {
    display: flex;
    max-width: 500px;
}

.exakt-search-form input[type="search"] {
    flex: 1;
    border-radius: 25px 0 0 25px;
    border-right: none;
}

.exakt-search-form button {
    border-radius: 0 25px 25px 0;
    padding: 12px 25px;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.exakt-404-title {
    /* v1.0.5 - 404 title uses heading font */
    font-size: 120px;
    font-family: var(--exakt-font-heading);
    font-weight: var(--exakt-font-weight-heading, 700);
    color: var(--exakt-primary);
    margin: 0;
    line-height: 1;
}

/* ==========================================================================
   Footer Enhancements
   ========================================================================== */

.exakt-footer {
    background: var(--exakt-primary);
    color: var(--exakt-white);
    padding: 50px 0 0;
    margin-top: 0;
}

.exakt-footer .exakt-container {
    max-width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Footer Three-Column Layout */
.exakt-footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 40px;
}

.exakt-footer-column {
    min-width: 0;
}

/* Footer Titles */
.exakt-footer-title {
    /* v1.0.5 - Uses heading font */
    font-size: 18px;
    font-family: var(--exakt-font-heading);
    font-weight: var(--exakt-font-weight-heading, 600);
    margin: 0 0 20px 0;
    color: var(--exakt-white);
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* Footer About Section */
.exakt-footer-about-text {
    /* v1.0.93 - Uses dedicated footer text color variable */
    color: var(--exakt-footer-text, rgba(255, 255, 255, 0.85));
    line-height: 1.7;
    margin: 0;
}

/* Footer Menu (Quick Links) */
.exakt-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exakt-footer-menu li {
    padding: 6px 0;
}

.exakt-footer-menu li:first-child {
    padding-top: 0;
}

.exakt-footer-menu a {
    color: var(--exakt-footer-text, rgba(255, 255, 255, 0.85));
    text-decoration: none;
    transition: color 0.3s ease;
}

.exakt-footer-menu a:hover {
    color: var(--exakt-white);
}

.exakt-footer-menu .current-menu-item a,
.exakt-footer-menu .current_page_item a {
    color: var(--exakt-white);
}

/* Footer Contact List */
.exakt-footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exakt-footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    color: var(--exakt-footer-text, rgba(255, 255, 255, 0.85));
}

.exakt-footer-contact-list li:first-child {
    padding-top: 0;
}

.exakt-footer-contact-list .exakt-icon {
    flex-shrink: 0;
    margin-top: 3px;
}

.exakt-footer-contact-list a {
    color: var(--exakt-footer-text, rgba(255, 255, 255, 0.85));
    text-decoration: none;
    transition: color 0.3s ease;
}

.exakt-footer-contact-list a:hover {
    color: var(--exakt-white);
}

/* Footer Bottom (Copyright) */
.exakt-footer-bottom {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.exakt-footer-bottom p {
    margin: 0;
}

/* Legacy Footer Widgets (for backward compatibility) */
.exakt-footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.exakt-footer-widgets .exakt-widget-title {
    color: var(--exakt-white);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.exakt-footer-widgets ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exakt-footer-widgets ul li {
    padding: 5px 0;
}

.exakt-footer-widgets ul li a {
    color: rgba(255, 255, 255, 0.8);
}

.exakt-footer-widgets ul li a:hover {
    color: var(--exakt-white);
}

/* Footer Responsive */
@media (max-width: 992px) {
    .exakt-footer-columns {
        grid-template-columns: 1fr 1fr;
    }

    .exakt-footer-contact {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .exakt-footer-columns {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .exakt-footer-contact {
        grid-column: span 1;
    }
}

/* Top Bar Responsive */
@media (max-width: 768px) {
    .exakt-topbar .exakt-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .exakt-topbar-inner {
        justify-content: center;
        text-align: center;
    }

    .exakt-topbar-left {
        flex-direction: column;
        gap: 10px;
    }

    .exakt-topbar-search input[type="search"] {
        width: 160px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--exakt-bg-light);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--exakt-primary);
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link:focus {
    background-color: var(--exakt-bg-light);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--exakt-primary);
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100001;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
    .exakt-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* v1.0.2 CHANGE - Increased breakpoint from 768px to 1024px to show hamburger earlier */
@media (max-width: 1024px) {
    .exakt-menu-toggle {
        display: block !important;
        order: 2;
    }

    .exakt-header .exakt-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .exakt-header-inner {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .exakt-logo,
    .exakt-shop-header-icons {
        order: 1;
    }

    .exakt-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--exakt-mobile-nav-bg, var(--exakt-white, #ffffff));
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        padding: 20px;
        order: 5;
        width: 100%;
        flex: 0 0 100%;
    }

    .exakt-nav.active {
        display: block;
    }

    .exakt-nav ul {
        flex-direction: column;
        gap: 0;
    }

    /* v1.0.109 - Mobile nav text color */
    .exakt-nav a,
    .exakt-nav .exakt-category-menu li a {
        color: var(--exakt-mobile-nav-text, var(--exakt-nav-link, #333333)) !important;
        padding: 12px 0;
        border-bottom: 1px solid var(--exakt-bg-light);
    }

    .exakt-nav .exakt-category-menu li a {
        border-radius: 0;
    }

    .exakt-header-search {
        order: 4;
        display: none;
    }

    .exakt-header-cart {
        order: 3;
        margin-left: auto !important;
    }

    /* v1.0.133 - Account icon: fixed order so it always sits to the right of the cart.
       Without this it defaults to order:0 and renders before the logo on mobile. */
    .exakt-header-account {
        order: 3;
        margin-left: 0 !important;
    }

    /* v1.0.133 - Account icon on LEFT: overrides the default right-side position.
       Applied by customizer.php when exakt_account_icon_position = 'left'. */
    .exakt-account-left .exakt-header-account {
        order: 0;
        margin-left: 0 !important;
        margin-right: 4px;
    }
    .exakt-account-left .exakt-logo,
    .exakt-account-left .exakt-shop-header-icons {
        order: 1;
    }

    .exakt-posts-grid {
        grid-template-columns: 1fr;
    }

    /* v1.0.5 - Mobile font sizes scale down */
    .exakt-single .exakt-post-title {
        font-size: calc(var(--exakt-font-size-h1, 36px) - 8px);
    }

    .exakt-404-title {
        font-size: 80px;
    }
}

/* ==========================================================================
   Elementor Button Overrides
   Use class "exakt-button-outline" on Elementor buttons
   ========================================================================== */

/* Outline style for Elementor buttons */
.elementor-button.exakt-button-outline,
.elementor-widget-button .exakt-button-outline,
a.elementor-button.exakt-button-outline,
.elementor-button-wrapper .exakt-button-outline {
    background: transparent !important;
    color: var(--exakt-primary) !important;
    border: 2px solid var(--exakt-primary) !important;
    border-radius: 30px !important;
    /* v1.0.5 - Button font controlled via Customizer */
    font-size: var(--exakt-font-size-button, 12px) !important;
    font-weight: var(--exakt-font-weight-button, 600) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 24px !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
    fill: var(--exakt-primary) !important;
}

.elementor-button.exakt-button-outline:hover,
.elementor-widget-button .exakt-button-outline:hover,
a.elementor-button.exakt-button-outline:hover,
.elementor-button-wrapper .exakt-button-outline:hover {
    background: var(--exakt-primary) !important;
    color: var(--exakt-white) !important;
    border-color: var(--exakt-primary) !important;
    fill: var(--exakt-white) !important;
}

/* Override Elementor button text span */
.elementor-button.exakt-button-outline .elementor-button-text,
.exakt-button-outline .elementor-button-content-wrapper {
    /* v1.0.5 - Button font controlled via Customizer */
    font-size: var(--exakt-font-size-button, 12px) !important;
    font-weight: var(--exakt-font-weight-button, 600) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: inherit !important;
}

/* Filled style for Elementor buttons */
.elementor-button.exakt-button,
.elementor-widget-button .exakt-button,
a.elementor-button.exakt-button,
.elementor-button-wrapper .exakt-button {
    background: var(--exakt-primary) !important;
    color: var(--exakt-white) !important;
    border: 2px solid var(--exakt-primary) !important;
    border-radius: 30px !important;
    /* v1.0.5 - Button font controlled via Customizer */
    font-size: var(--exakt-font-size-button, 12px) !important;
    font-weight: var(--exakt-font-weight-button, 600) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 24px !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
}

.elementor-button.exakt-button:hover,
.elementor-widget-button .exakt-button:hover,
a.elementor-button.exakt-button:hover,
.elementor-button-wrapper .exakt-button:hover {
    background: var(--exakt-primary-light) !important;
    border-color: var(--exakt-primary-light) !important;
    color: var(--exakt-white) !important;
}

.elementor-button.exakt-button .elementor-button-text,
.exakt-button .elementor-button-content-wrapper {
    /* v1.0.5 - Button font controlled via Customizer */
    font-size: var(--exakt-font-size-button, 12px) !important;
    font-weight: var(--exakt-font-weight-button, 600) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: inherit !important;
}

/* ==========================================================================
   Elementor Search Widget - Match Theme Style
   ========================================================================== */

.elementor-search-form__submit,
.elementor-widget-search-form .elementor-search-form__submit,
.elementor-search-form button[type="submit"],
button.elementor-search-form__submit {
    background: var(--exakt-primary) !important;
    background-color: var(--exakt-primary) !important;
    border: none !important;
    padding: 10px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: var(--exakt-white) !important;
    transition: background 0.3s ease !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.elementor-search-form__submit:hover,
.elementor-widget-search-form .elementor-search-form__submit:hover {
    background: var(--exakt-primary-light) !important;
    background-color: var(--exakt-primary-light) !important;
}

.elementor-search-form__submit svg,
.elementor-search-form__submit i,
.elementor-search-form__icon {
    fill: var(--exakt-white) !important;
    color: var(--exakt-white) !important;
}

/* ==========================================================================
   Elementor Nav Menu - Hide Hamburger on Desktop
   ========================================================================== */

/* Hide all hamburger/toggle menu elements on desktop */
.elementor-menu-toggle,
.elementor-nav-menu__toggle,
.elementor-widget-nav-menu .elementor-menu-toggle,
.elementor-nav-menu--toggle,
div.elementor-menu-toggle,
.e-n-menu-toggle,
.eicon-menu-bar,
[class*="elementor"] .elementor-menu-toggle,
.elementor-widget-nav-menu [class*="toggle"],
.elementor-nav-menu--main .elementor-menu-toggle,
body .elementor-menu-toggle,
body .elementor-nav-menu__toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Only show hamburger on tablet/mobile */
@media (max-width: 1024px) {
    .elementor-menu-toggle,
    .elementor-nav-menu__toggle,
    .elementor-widget-nav-menu .elementor-menu-toggle,
    .elementor-nav-menu--toggle,
    div.elementor-menu-toggle,
    .e-n-menu-toggle,
    body .elementor-menu-toggle,
    body .elementor-nav-menu__toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: auto !important;
    }

    /* v1.0.1 ADD START - Fix Elementor menu toggle active state not resetting */
    /* Default state - transparent background, hamburger lines visible */
    .e-n-menu-toggle,
    .elementor-menu-toggle,
    .elementor-nav-menu__toggle {
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 50% !important;
        padding: 8px !important;
        transition: background-color 0.3s ease !important;
    }

    /* Hamburger icon lines - default dark color */
    .e-n-menu-toggle svg,
    .e-n-menu-toggle i,
    .e-n-menu-toggle .eicon-menu-bar,
    .elementor-menu-toggle svg,
    .elementor-menu-toggle i,
    .elementor-nav-menu__toggle svg {
        color: var(--exakt-text, #333) !important;
        fill: var(--exakt-text, #333) !important;
    }

    /* Active/Open state - purple background */
    .e-n-menu-toggle--open,
    .e-n-menu-toggle[aria-expanded="true"],
    .elementor-menu-toggle.elementor-active,
    .elementor-menu-toggle[aria-expanded="true"],
    .elementor-nav-menu__toggle.elementor-active {
        background: var(--exakt-primary, #6b4c9a) !important;
        background-color: var(--exakt-primary, #6b4c9a) !important;
    }

    /* Active state - white icon */
    .e-n-menu-toggle--open svg,
    .e-n-menu-toggle--open i,
    .e-n-menu-toggle[aria-expanded="true"] svg,
    .e-n-menu-toggle[aria-expanded="true"] i,
    .elementor-menu-toggle.elementor-active svg,
    .elementor-menu-toggle[aria-expanded="true"] svg,
    .elementor-nav-menu__toggle.elementor-active svg {
        color: var(--exakt-white, #fff) !important;
        fill: var(--exakt-white, #fff) !important;
    }

    /* Ensure closed state has NO purple background */
    .e-n-menu-toggle:not(.e-n-menu-toggle--open):not([aria-expanded="true"]),
    .elementor-menu-toggle:not(.elementor-active):not([aria-expanded="true"]),
    .elementor-nav-menu__toggle:not(.elementor-active) {
        background: transparent !important;
        background-color: transparent !important;
    }
    /* v1.0.1 ADD END */
}

/* ==========================================================================
   v1.0.56 - Mobile Sticky Bottom Navigation Bar
   My Account | Search | Cart — visible on mobile only (≤768px)
   ========================================================================== */

/* Hidden on desktop — flex shown via media query */
.exakt-mobile-bottombar {
    display: none;
}

.exakt-mobile-search-bar {
    display: none;
}

@media (max-width: 768px) {

    /* Push page content up so nothing hides behind the sticky bar.
       Only applies when the bar is actually shown (body class set in functions.php) */
    body.exakt-has-bottombar {
        padding-bottom: 64px !important;
    }

    /* Hide header cart on mobile only when bottom bar is active — it lives in the bottom bar */
    body.exakt-has-bottombar .exakt-header .exakt-header-cart {
        display: none !important;
    }

    /* ---- Bottom bar ---- */
    .exakt-mobile-bottombar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: var(--exakt-white, #ffffff);
        border-top: 1px solid var(--exakt-border, #e5e5e5);
        z-index: 9999;
        align-items: stretch;
        justify-content: space-around;
    }

    /* Each item — equal-width, icon centered */
    .exakt-bottombar-item {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        text-decoration: none;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        color: var(--exakt-text, #333);
        cursor: pointer;
        position: relative;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .exakt-bottombar-item:hover,
    .exakt-bottombar-item:focus {
        color: var(--exakt-primary);
        background: rgba(0, 0, 0, 0.04) !important;
        outline: none;
    }

    /* Active search button */
    .exakt-bottombar-search-btn.active {
        color: var(--exakt-primary);
    }

    /* ---- Cart in bottom bar ----
       WC fragments replace a.exakt-cart-link stripping extra classes.
       position:relative MUST be on this selector (not on exakt-bottombar-item)
       so the badge stays correctly anchored after every fragment update. */
    .exakt-mobile-bottombar a.exakt-cart-link {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        color: var(--exakt-text, #333) !important;
        flex: 1;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    .exakt-mobile-bottombar a.exakt-cart-link:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        color: var(--exakt-primary) !important;
    }

    /* Hide total text — icon + badge only in bottom bar */
    .exakt-mobile-bottombar .exakt-cart-total {
        display: none !important;
    }

    /* Badge — positioned top-right of icon */
    .exakt-mobile-bottombar .exakt-cart-count {
        position: absolute;
        top: 8px;
        right: calc(50% - 22px);
        min-width: 18px;
        padding: 1px 5px;
        text-align: center;
        background: var(--exakt-primary);
        color: var(--exakt-white, #fff);
        border-radius: 10px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
    }

    /* ---- Mobile search bar — slides up above the sticky bar ---- */
    .exakt-mobile-search-bar {
        display: none;
        position: fixed;
        bottom: 64px;
        left: 0;
        right: 0;
        background: var(--exakt-white, #fff);
        border-top: 1px solid var(--exakt-border, #e5e5e5);
        padding: 12px 16px;
        z-index: 9998;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }

    .exakt-mobile-search-bar.active {
        display: block;
    }

    .exakt-mobile-search-bar form {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .exakt-mobile-search-bar input[type="search"] {
        flex: 1;
        padding: 10px 16px;
        border: 1px solid var(--exakt-border, #e5e5e5);
        border-radius: 25px;
        font-size: 15px;
        outline: none;
        width: auto;
    }

    .exakt-mobile-search-bar input[type="search"]:focus {
        border-color: var(--exakt-primary);
    }

    .exakt-mobile-search-bar button[type="submit"] {
        background: var(--exakt-primary) !important;
        border: none !important;
        border-radius: 50% !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        flex-shrink: 0;
    }

    .exakt-mobile-search-bar button[type="submit"] svg {
        stroke: var(--exakt-white, #fff);
    }
}

/* ==========================================================================
   v1.0.124 - WhatsApp Chat Button (qlwapp / WP Chat App) — consistent font
   Forces the button label text to match the theme's Button Font Size setting
   on ALL page types (regular pages, WooCommerce shop, My Account, etc.)
   ========================================================================== */

.qlwapp__text,
.qlwapp .qlwapp__text,
.qlwapp-box .qlwapp__text,
body .qlwapp__text,
body.woocommerce .qlwapp__text,
body.woocommerce-page .qlwapp__text,
body.elementor-page .qlwapp__text {
    font-size: var(--exakt-font-size-button, 14px) !important;
    font-family: var(--exakt-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important;
    font-weight: var(--exakt-font-weight-button, 600) !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   v1.0.181 — Search results page (Appearance → Search Settings)
   Card layout with featured/product image, type badge, price, CTA.
   All colors via theme variables.
   ========================================================================== */
.exakt-search-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}
.exakt-search-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--exakt-border, #e5e5e5);
}
.exakt-search-title {
    font-family: var(--exakt-font-heading, inherit);
    font-weight: var(--exakt-font-weight-heading, 600);
    color: var(--exakt-heading, var(--exakt-text, #333));
    font-size: clamp(22px, 2.4vw, 30px);
    margin: 0 0 6px;
    line-height: 1.25;
}
.exakt-search-query {
    color: var(--exakt-primary, #0073aa);
    font-weight: 700;
}
.exakt-search-count {
    margin: 0;
    color: var(--exakt-text-light, #666);
    font-size: 14px;
}

.exakt-search-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 32px;
}

.exakt-search-result {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 16px;
    background: var(--exakt-white, #fff);
    border: 1px solid var(--exakt-border, #e5e5e5);
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.exakt-search-result:hover {
    border-color: var(--exakt-primary, #0073aa);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.exakt-search-result__media {
    display: block;
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--exakt-bg-light, #f8f8f8);
    border: 1px solid var(--exakt-border, #e5e5e5);
}
.exakt-search-result__image,
.exakt-search-result__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.exakt-search-result__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, transparent 48%, var(--exakt-border, #e5e5e5) 49%, var(--exakt-border, #e5e5e5) 51%, transparent 52%),
        var(--exakt-bg-light, #f8f8f8);
}

.exakt-search-result__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.exakt-search-result__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
}
.exakt-search-result__type {
    display: inline-block;
    padding: 3px 10px;
    background: var(--exakt-bg-light, #f8f8f8);
    color: var(--exakt-text-light, #666);
    border: 1px solid var(--exakt-border, #e5e5e5);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.exakt-search-result__price {
    color: var(--exakt-primary, #0073aa);
    font-weight: 700;
    font-size: 14px;
}
.exakt-search-result__price del { opacity: .55; margin-right: 6px; font-weight: 500; }

.exakt-search-result__title {
    font-family: var(--exakt-font-heading, inherit);
    font-weight: var(--exakt-font-weight-heading, 600);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.3;
    margin: 0;
}
.exakt-search-result__title a {
    color: var(--exakt-heading, var(--exakt-text, #333));
    text-decoration: none;
}
.exakt-search-result__title a:hover {
    color: var(--exakt-primary, #0073aa);
}

.exakt-search-result__excerpt {
    color: var(--exakt-text, #333);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exakt-search-result__cta {
    align-self: flex-start;
    margin-top: 4px;
    color: var(--exakt-primary, #0073aa);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.exakt-search-result__cta span { transition: transform .2s ease; display: inline-block; }
.exakt-search-result__cta:hover { color: var(--exakt-primary-light, #005a87); }
.exakt-search-result__cta:hover span { transform: translateX(3px); }

.exakt-search-empty {
    padding: 40px 20px;
    background: var(--exakt-bg-light, #f8f8f8);
    border: 1px solid var(--exakt-border, #e5e5e5);
    border-radius: 10px;
    text-align: center;
    color: var(--exakt-text-light, #666);
}

@media (max-width: 600px) {
    .exakt-search-result {
        grid-template-columns: 96px 1fr;
        gap: 14px;
        padding: 12px;
    }
    .exakt-search-result__media {
        width: 96px;
        height: 96px;
    }
}