/* ============================================================
   NAWET — Mobile Responsive Enhancement
   Targets: all screens ≤ 991px, with deeper rules for ≤ 767px
   Strategy: override the enhanced theme's desktop-first hardcodes
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. GLOBAL MOBILE RESETS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* Prevent horizontal overflow — the #1 mobile killer */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Reset any desktop flex rows that break on tablet */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   2. HEADER — TOP BAR
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .header_top {
        padding: 8px 0 !important;
    }

    /* Stack contact info items & center them */
    .contactinfo {
        text-align: center !important;
    }

    .contactinfo ul.nav-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .contactinfo ul.nav-pills > li {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .contactinfo ul li a {
        font-size: 11px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
    }

    /* Hide the right-side column if empty on mobile */
    .header_top .col-sm-6:last-child:empty {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   3. HEADER — MIDDLE (Logo + Shop Menu)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .header-middle .container .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        min-height: 60px;
    }

    .header-middle .col-sm-4 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
    }

    .header-middle .col-sm-8 {
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Logo — responsive sizing */
    .logo img {
        width: 130px !important;
        max-height: 38px !important;
        height: auto !important;
    }

    /* Shop menu — horizontal scroll if needed, compact */
    .shop-menu {
        float: none !important;
    }

    #shop-menu-mobile {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
    }

    .shop-menu ul.nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .shop-menu ul li {
        float: none !important;
        display: inline-flex !important;
    }

    .shop-menu ul li a {
        font-size: 11px !important;
        padding: 5px 10px !important;
        white-space: nowrap !important;
        border-radius: 16px !important;
    }

    /* Hide text labels, keep icons on very small screens */
    .shop-menu ul li a i,
    .shop-menu ul li a svg {
        margin-right: 4px !important;
    }
}

@media (max-width: 480px) {
    .logo img {
        width: 110px !important;
    }

    /* Ultra-compact shop menu: icons only with tiny text */
    .shop-menu ul li a {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Hide text on smallest screens, keep icon */
    .shop-menu ul li a span.link-text {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   4. HEADER — BOTTOM NAV (Hamburger + Main Menu + Search)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .header-bottom {
        padding: 0 !important;
    }

    .header-bottom .container > .row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-height: 48px;
        padding: 0 !important;
    }

    /* Nav column */
    .header-bottom .col-sm-9 {
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Search column */
    .header-bottom .col-sm-3 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 8px 0 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hamburger button */
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        height: 48px !important;
        padding-left: 0 !important;
    }

    .navbar-toggle {
        margin: 0 !important;
        padding: 8px !important;
        border-color: var(--teal) !important;
        border-radius: var(--radius-sm) !important;
        background: transparent !important;
    }

    .navbar-toggle .icon-bar {
        background-color: var(--teal) !important;
        width: 22px !important;
        height: 2px !important;
        border-radius: 2px !important;
    }

    /* Collapsed nav menu — full width overlay style */
    .mainmenu .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--white) !important;
        box-shadow: var(--shadow-md) !important;
        border-top: 2px solid var(--teal) !important;
        z-index: 1000 !important;
        padding: 8px 0 16px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    .mainmenu ul.navbar-nav {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .mainmenu ul li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .mainmenu ul li:last-child {
        border-bottom: none !important;
    }

    .mainmenu ul li a {
        color: var(--text) !important;
        display: block !important;
        padding: 13px 20px !important;
        font-size: 14px !important;
        border-bottom: none !important;
        width: 100% !important;
    }

    .mainmenu ul li a:hover,
    .mainmenu ul li a.active {
        color: var(--teal) !important;
        background: var(--teal-light) !important;
        border-left: 3px solid var(--teal) !important;
        padding-left: 17px !important;
    }

    /* Cart icon in nav — inline */
    #panier-web {
        border-bottom: none !important;
    }

    #panier-web a {
        padding: 13px 20px !important;
        display: inline-flex !important;
        width: auto !important;
    }

    /* Relative positioning anchor for absolute dropdown */
    .mainmenu {
        position: relative !important;
    }

    /* Search in header-bottom */
    #search-web .search_box input,
    .header-bottom .search_box input {
        width: 150px !important;
        font-size: 12px !important;
        padding: 6px 14px !important;
        height: 34px !important;
    }
}

/* search-web always visible in header-bottom — overridden by Fix E below */

/* ══════════════════════════════════════════════════════════
   5. MOBILE CART ICON (floating, outside nav)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    #panier-mobile {
        display: inline-flex !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-right: 8px !important;
    }

    .fa-shopping-cart.fa-size {
        font-size: 18px !important;
    }

    .cart-basket {
        top: -6px !important;
        right: -8px !important;
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   6. PRODUCT GRID — Fix flex overrides on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* Reset the aggressive desktop flex rules on the grid */
    .features_items .row,
    .features_items > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .features_items .col-sm-4,
    .features_items .col-md-4,
    .features_items .col-lg-3 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 767px) {
    /* 2 columns on small mobile */
    .features_items .col-sm-4 {
        width: 50% !important;
        float: left !important;
    }

    .productinfo img,
    .product-image-container {
        height: 150px !important;
    }

    .productinfo p {
        font-size: 12px !important;
    }

    .productinfo h2 {
        font-size: 14px !important;
    }

    .add-to-cart {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 400px) {
    /* 1 column on very small screens */
    .features_items .col-sm-4 {
        width: 100% !important;
        float: none !important;
    }

    .productinfo img,
    .product-image-container {
        height: 180px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   7. SIDEBAR — Stack below products on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Bootstrap's col-sm-3 sidebar: make it full width below content */
    .left-sidebar {
        width: 100% !important;
        float: none !important;
        margin-bottom: 24px !important;
    }

    /* Collapse sidebar sections with a toggle feel */
    .category-products,
    .brands-name,
    .well {
        margin-bottom: 12px !important;
    }

    .left-sidebar h2 {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   8. PRODUCT DETAIL PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .product-information {
        padding: 16px !important;
        margin-top: 16px !important;
    }

    .product-information h2 {
        font-size: 18px !important;
    }

    .cart {
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
    }

    .view-product {
        text-align: center !important;
    }

    /* Product image thumbnails scroll horizontally */
    .view-product ul {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .view-product ul li {
        flex: 0 0 auto !important;
    }
}

/* ══════════════════════════════════════════════════════════
   9. CART PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Cart table: force block layout, card-style rows */
    #cart_items .cart_info table,
    #cart_items .cart_info thead,
    #cart_items .cart_info tbody,
    #cart_items .cart_info th,
    #cart_items .cart_info td,
    #cart_items .cart_info tr {
        display: block !important;
    }

    /* Hide desktop table headers */
    #cart_items .cart_info thead {
        display: none !important;
    }

    #cart_items .cart_info tbody tr {
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        background: var(--white) !important;
        box-shadow: var(--shadow-sm) !important;
        position: relative !important;
    }

    #cart_items .cart_info td {
        padding: 4px 0 !important;
        border: none !important;
        text-align: left !important;
    }

    /* Label each cell via data-label attribute (progressive enhancement) */
    #cart_items .cart_info td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        font-size: 11px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .total_area {
        margin-top: 16px !important;
    }

    .check_out, .update {
        width: 100% !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   10. CHECKOUT / FORMS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .shopper-info,
    .ship-form,
    .form-two {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }

    .shopper-info > form > input,
    .form-two > form > input,
    .form-one > form > input {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   11. LOGIN / REGISTER FORMS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .login-form,
    .signup-form {
        padding: 20px 16px !important;
    }

    .login-form form input,
    .signup-form form input {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .login-form .btn,
    .signup-form .btn {
        width: 100% !important;
    }

    /* Side-by-side login/register columns → stacked */
    .col-sm-6.login-form,
    .col-sm-6.signup-form {
        width: 100% !important;
        float: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   12. FOOTER
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    #footer {
        text-align: center !important;
    }

    /* Stack all footer columns */
    #footer .col-sm-5,
    #footer .col-sm-2,
    #footer .col-sm-3 {
        width: 100% !important;
        float: none !important;
        padding: 0 16px !important;
        margin-bottom: 28px !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        padding-bottom: 24px !important;
    }

    #footer .col-sm-3:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    .companyinfo h2 {
        font-size: 20px !important;
        margin-top: 0 !important;
    }

    .companyinfo p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .single-widget h2 {
        margin-bottom: 12px !important;
    }

    .single-widget ul.nav-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .single-widget ul li a {
        padding: 4px 8px !important;
    }

    .single-widget address {
        text-align: center !important;
    }

    .footer-bottom p {
        text-align: center !important;
        padding: 0 16px !important;
    }

    .footer-widget .container {
        padding-top: 24px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   13. CAROUSEL / HERO BANNER
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .carousel-caption,
    .item .carousel-caption {
        bottom: 10px !important;
        padding: 10px !important;
    }

    .item h1 {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .item h2 {
        font-size: 16px !important;
    }

    .item p {
        font-size: 13px !important;
        display: none !important; /* hide on tiny screens */
    }

    .get, .item button {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }

    /* Make carousel images a sensible height */
    .carousel .item img {
        max-height: 250px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════
   14. CATEGORY PAGE FILTERS / BREADCRUMBS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Breadcrumb */
    .breadcrumbs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }

    /* Category tabs — horizontal scroll */
    .category-tab ul.nav-tabs {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 2px !important;
        border-radius: 0 !important;
    }

    .category-tab ul.nav-tabs li {
        flex: 0 0 auto !important;
    }

    .category-tab ul.nav-tabs li a {
        font-size: 12px !important;
        padding: 10px 14px !important;
        white-space: nowrap !important;
    }

    /* Sort/filter bar */
    .product-search-filter-tab .col-sm-6 {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   15. REWARD PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .reward-balance-panel {
        margin-bottom: 20px !important;
    }

    .reward-balance-body {
        padding: 16px !important;
    }

    .reward-balance-amount {
        font-size: 28px !important;
    }

    /* Reward product cards — 2 per row */
    .reward-products-grid .col-sm-4,
    .reward-products-grid .col-md-3 {
        width: 50% !important;
        float: left !important;
        padding: 6px !important;
    }

    .reward-card-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    /* Modal — full screen on mobile */
    .reward-modal .modal-dialog {
        margin: 10px !important;
        width: calc(100% - 20px) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   16. DASHBOARD
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Small boxes — 2 per row on mobile */
    .small-box {
        margin-bottom: 12px !important;
    }

    /* Tables in dashboard */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ══════════════════════════════════════════════════════════
   17. CONTACT PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    #contact-page .col-sm-9,
    #contact-page .col-sm-3 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
    }

    #contact-page .form-control {
        width: 100% !important;
    }

    .btn.btn-primary {
        width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════
   18. SEARCH BOX — MOBILE (in header middle)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Mobile search bar (below logo row) */
    .search_box_container {
        width: 100% !important;
        padding: 6px 0 0 !important;
    }

    #searchInputMobile,
    .search_box_container .search_box input {
        width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   19. PAGINATION
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .pagination li a,
    .pagination li span {
        padding: 6px 10px !important;
        font-size: 13px !important;
        min-width: 34px !important;
        text-align: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   20. COOKIE BAR
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    #cookie-bar {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        gap: 8px !important;
    }

    #cookie-bar a {
        display: inline-block !important;
        margin: 0 4px !important;
        padding: 6px 16px !important;
        border-radius: 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   21. SCROLL-TO-TOP BUTTON
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    a#scrollUp {
        width: 36px !important;
        height: 36px !important;
        bottom: 16px !important;
        right: 16px !important;
        font-size: 14px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   22. SWEETALERT / MODAL — Full-screen on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .swal2-popup {
        width: 90% !important;
        padding: 20px !important;
        font-size: 14px !important;
    }

    .modal-dialog {
        margin: 10px auto !important;
        width: calc(100% - 20px) !important;
    }

    .modal-body {
        padding: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   23. TABLET (768–991px) SPECIFIC TWEAKS
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 991px) {
    .logo img {
        width: 150px !important;
    }

    .shop-menu ul li a {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    /* 2-column product grid on tablet */
    .features_items .col-sm-4 {
        width: 50% !important;
    }

    /* Search box — medium size */
    .search_box input {
        width: 180px !important;
    }

    #footer .col-sm-2 {
        width: 33.333% !important;
        float: left !important;
    }

    #footer .col-sm-5 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   24. TOUCH TARGETS — Minimum 44×44px for accessibility
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .mainmenu ul li a,
    .shop-menu ul li a,
    .single-widget ul li a,
    .panel-body ul li a,
    .pagination li a,
    .add-to-cart,
    .cart,
    .btn {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Exception: nav links (block display) */
    .mainmenu ul li a,
    .single-widget ul li a,
    .panel-body ul li a {
        justify-content: flex-start !important;
    }
}

/* ══════════════════════════════════════════════════════════
   25. PRINT / MISC
   ══════════════════════════════════════════════════════════ */

/* Smooth scroll on iOS */
* {
    -webkit-overflow-scrolling: touch;
}

/* Prevent text scaling after orientation change */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Images never overflow their containers */
img {
    max-width: 100% !important;
    height: auto;
}

.header_top .container > .row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.header_top .col-sm-6 {
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 8px !important;
}

.contactinfo ul.nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;       /* force single line */
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important;
}

.contactinfo ul.nav-pills > li {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 1 !important;
}

/* Shrink text + padding on small screens so everything fits */
.contactinfo ul li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* On very small screens: hide the text labels, keep icons only */
@media (max-width: 480px) {
    /* Hide phone number text, keep icon */
    .contactinfo ul li a[href^="tel"] .link-label,
    .contactinfo ul li a[href^="mailto"] .link-label {
        display: none !important;
    }

    /* Tighten spacing further */
    .contactinfo ul li a {
        font-size: 13px !important;
        padding: 4px 6px !important;
    }
}

/* Since the Twig doesn't use .link-label spans, use a different
   approach: hide text nodes on very small screens by shrinking font
   and relying on the icon being the dominant visual */
@media (max-width: 420px) {
    .contactinfo ul li a {
        font-size: 0 !important;        /* hides text */
        padding: 4px 8px !important;
    }

    .contactinfo ul li a i,
    .contactinfo ul li a .fa,
    .contactinfo ul li a .fab {
        font-size: 14px !important;     /* but keeps icons */
    }
}


/* ── Fix B: Header-middle — align all nav items with logo ── */

/* The whole middle row is one flex line */
.header-middle .container > .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 12px !important;
}

/* Logo column: shrink to content, vertically centered */
.header-middle .col-sm-4 {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    float: none !important;
    line-height: 1 !important;
}

.logo img {
    display: block !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Right column: grow, vertically centered, right-aligned */
.header-middle .col-sm-8 {
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* The shop-menu div itself */
#shop-menu-mobile {
    display: flex !important;
    flex-direction: column !important;  /* nav row on top, search below */
    align-items: flex-end !important;
    gap: 6px !important;
    width: 100% !important;
    float: none !important;
}

/* The <ul> of nav links (panier, dashboard, profil, logout) */
#shop-menu-mobile > ul.nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;     /* ← this is the key alignment fix */
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
}

/* Every <li> in the nav row */
#shop-menu-mobile > ul.nav > li {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Every <a> link — uniform height and vertical centering */
#shop-menu-mobile > ul.nav > li > a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 36px !important;            /* fixed height so all items are same */
    padding: 0 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
    border: 1.5px solid var(--border, #E8EAF0) !important;
    font-size: 13px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    color: var(--text, #2D2D3A) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
}

#shop-menu-mobile > ul.nav > li > a:hover {
    color: #fff !important;
    background: var(--teal, #00B4A6) !important;
    border-color: var(--teal, #00B4A6) !important;
}

/* Icons inside links */
#shop-menu-mobile > ul.nav > li > a > i,
#shop-menu-mobile > ul.nav > li > a > .fa {
    line-height: 1 !important;
    font-size: 13px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* SVG logout icon — critical vertical alignment fix */
#shop-menu-mobile > ul.nav > li > a#logout {
    padding: 0 12px !important;
}

#shop-menu-mobile > ul.nav > li > a#logout svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Last item (logout) — teal background */
#shop-menu-mobile > ul.nav > li:last-child > a {
    background: var(--teal, #00B4A6) !important;
    color: #fff !important;
    border-color: var(--teal, #00B4A6) !important;
}

#shop-menu-mobile > ul.nav > li:last-child > a:hover {
    background: var(--teal-dark, #008F83) !important;
    border-color: var(--teal-dark, #008F83) !important;
}

/* Mobile: wrap links to 2 rows if needed */
@media (max-width: 600px) {
    #shop-menu-mobile > ul.nav > li > a {
        font-size: 11px !important;
        padding: 0 9px !important;
        height: 32px !important;
        gap: 3px !important;
    }

    #shop-menu-mobile > ul.nav > li > a > i {
        font-size: 12px !important;
    }

    .logo img {
        width: 110px !important;
    }
}

@media (max-width: 400px) {
    /* Hide text labels on tiny screens, keep icons */
    #shop-menu-mobile > ul.nav > li > a {
        padding: 0 8px !important;
        gap: 0 !important;
    }

    #shop-menu-mobile > ul.nav > li > a > i,
    #shop-menu-mobile > ul.nav > li > a > .fab {
        font-size: 14px !important;
    }
}



@media (max-width: 767px) {

    /* ── C: Round logo ─────────────────────────────────── */
    .logo a img {
        content: url('/assets/images/nawet_round.webp') !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-height: 52px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* ── D: header-middle row — logo LEFT, buttons RIGHT ─ */
    .header-middle .container > .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        min-height: 68px !important;
        padding-top: 8px !important;       /* breathing room below top bar */
        padding-bottom: 8px !important;
        gap: 8px !important;
    }

    .header-middle .col-sm-4 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 0 0 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-middle .col-sm-8 {
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 8px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* shop-menu: single row, no column stacking */
    #shop-menu-mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    /* Hide the search box that lives inside shop-menu-mobile
       (we want search only in header-bottom row) */
    .search_box_container {
        display: none !important;
    }

    /* Nav ul — one tight nowrap row */
    #shop-menu-mobile > ul.nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
    }

    #shop-menu-mobile > ul.nav > li {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Perfect circle buttons — icon only, all equal size */
    #shop-menu-mobile > ul.nav > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border: 1.5px solid var(--border, #E8EAF0) !important;
        font-size: 0 !important;           /* hide text */
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        background: var(--white, #fff) !important;
        color: var(--text, #2D2D3A) !important;
        transition: all 0.2s !important;
        line-height: 1 !important;
    }

    #shop-menu-mobile > ul.nav > li > a:hover {
        background: var(--teal, #00B4A6) !important;
        border-color: var(--teal, #00B4A6) !important;
        color: #fff !important;
    }

    /* Icons — always visible at 15px regardless of font-size:0 */
    #shop-menu-mobile > ul.nav > li > a > i,
    #shop-menu-mobile > ul.nav > li > a > .fa,
    #shop-menu-mobile > ul.nav > li > a > .fab {
        font-size: 15px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
    }

    /* SVG logout icon */
    #shop-menu-mobile > ul.nav > li > a#logout svg {
        width: 16px !important;
        height: 16px !important;
        display: block !important;
        flex-shrink: 0 !important;
        fill: currentColor !important;
    }

    /* Logout button — teal filled */
    #shop-menu-mobile > ul.nav > li:last-child > a {
        background: var(--teal, #00B4A6) !important;
        border-color: var(--teal, #00B4A6) !important;
        color: #fff !important;
    }
    #shop-menu-mobile > ul.nav > li:last-child > a:hover {
        background: var(--teal-dark, #008F83) !important;
    }


    /* ── E: header-bottom — hamburger LEFT, search RIGHT ─ */

    .header-bottom .container > .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-height: 52px !important;
        padding: 6px 8px !important;
        gap: 10px !important;
    }

    /* Hamburger column — shrink to button */
    .header-bottom .col-sm-9 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Search column — fill remaining width */
    .header-bottom .col-sm-3 {
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .navbar-header {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }

    /* Hamburger button — 38px to match icon buttons above */
    .navbar-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border: 1.5px solid var(--teal, #00B4A6) !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .navbar-toggle .icon-bar {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background-color: var(--teal, #00B4A6) !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Search — force visible, fill column */
    #search-web {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #search-web .search_box {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Input — same height as hamburger */
    #search-web .search_box input,
    #searchInput {
        margin: 0 !important;
        padding: 0 14px !important;
        height: 38px !important;
        line-height: 38px !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13px !important;
        border-radius: 19px !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}