@media screen and (max-width: 768px) {

    header {
        height: auto !important;
    }


    .container-xl {
        max-width: 100% !important;
        /* Set width to 100% for devices with a screen width of 768px or smaller */
    }

    /* Product image - base mobile styles (height set by specific view rules below) */
    .product-image {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .product-teaser {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .product-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .views-field-name {
        font-size: 10px;
        padding: 1px 2px;
    }

    .block-views-blocknew-arrivals-products-block-1 h2 {
        font-size: 14px;
    }

    #block-belgrade-subtheme-views-block-highlighted-products-block-1 {
        margin-top: 2rem !important;
    }


    .swiper-button-next,
    .swiper-button-prev {
        width: 20px;
        /* Set the width */
        height: 20px;
        /* Set the height */
        top: var(--swiper-navigation-top-offset, 30%);
        font-size: 10px !important;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 10px !important;
    }

    .discount-label {
        top: 2px;
        left: 2px;
        font-size: 10px;
        border-radius: 2px;
        background-color: rgba(255, 0, 0, 0.5) !important;
        padding: 1px 2px;
    }

    .region-sidebar-second {
        display: none !important;
    }



    .product--rendered-attribute:nth-child(2) {
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }

    .region-top-bar {
        --beo-region-top-bar-font-size: 0.7rem;
    }

    /* Mobile header - not fixed, normal flow */
    .region-top-bar,
    section.region.region-top-bar {
        position: relative !important;
        top: auto !important;
    }

    header[role="banner"] {
        position: relative !important;
        top: auto !important;
    }

    .region-header,
    section.region.region-header {
        position: relative !important;
    }

    .nav-item {
        margin-right: 0.5rem;
    }

    .commerce-order-item-add-to-cart-form .attribute-widgets {
        --beo-gutter-x: 0rem;
        margin-bottom: 0rem !important;
        flex-direction: column;
    }




    .variations legend {
        margin-bottom: 1rem !important;
    }

    .mb-3,
    .attribute-widgets>.form-item .fieldset-legend,
    .attribute-widgets>.form-item>label {
        margin-bottom: 0rem !important;

    }


    .block--type-about-us-block .swiper-slide img {
        height: 300px;
        /* Reduce height for smaller screens */
    }

    .site-logo img {
        display: block;
        width: auto !important;
        height: 30px !important;
        max-height: 30px !important;
        max-height: 40px !important;
        min-height: 40px !important;
    }

    .social-media-links--platforms svg {
        font-size: 25px !important;
    }

    .fa-instagram {
        width: 25px;
        height: 25px;
    }

    .responsive-menus.responsified span.toggler {
        background: unset !important;
        color: unset !important;
        box-shadow: unset !important;
        font-size: 1rem !important;
        margin-right: 1rem !important;
    }

    .responsive-menus.responsified {
        width: 50% !important;
    }

    .nav-link {
        /* color: white !important; */
    }

    .nav-item {
        font-size: 0.5rem !important;
    }

    .responsive-menus.responsified .responsive-menus-simple li a {
        padding-right: 1rem !important;
        text-align: right !important;
        font-size: 12px !important;
    }


    .swiper-slide-views .flag-wishlist {
        display: none !important;
    }


    .swiper-pagination,
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
        /* Hide pagination dots */

    }

    .recently-vewied-title {
        font-size: 1.1rem !important;
    }

    .new-arrivals-text {
        font-size: 10px !important;
    }

    .view-highlighted-products .view-content {
        margin-top: 1rem !important;
        width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Swiper alignment - let content determine height */
    #swiper-highlighted-products-block-1 .swiper-wrapper,
    .view-highlighted-products .swiper-wrapper,
    .recent-views-products-swiper .swiper-wrapper,
    #swiper-recent-viewed-products-block-1 .swiper-wrapper {
        align-items: flex-start !important;
    }

    /* Product title - single line with ellipsis (consistent for all) */
    #swiper-highlighted-products-block-1 .product-title,
    .view-highlighted-products .product-title,
    .recent-views-products-swiper .product-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        max-width: 100% !important;
    }


    .view-header {
        font-size: 10px !important;
    }

    .main-categories .view-header,
    .block-quicktabs-blocknew-arrivals-tab .view-header,
    .view-highlighted-products .view-header {
        margin-bottom: 0rem;
    }

    .brands-block .view-header {
        margin-bottom: 0.5rem;
    }

    .block-quicktabs-blocknew-arrivals-tab .quicktabs-tabs {
        margin-top: 0rem !important;
    }




    .main-categories .view-content {
        width: 90% !important;
        margin-top: 1rem;
    }


    .main-categories .views-row .term-action {
        font-size: 10px;
    }

    .quicktabs-tabs {
        font-size: 12px;
        gap: 20px;
    }

    .block-quicktabs-blocknew-arrivals-tab .views-element-container {
        gap: 10px;
        margin-top: 1rem;
    }


    /* 1 column layout - 80% width, centered */
    .view-content.mobile-grid-1 .views-view-responsive-grid,
    .views-view-responsive-grid.mobile-grid-1,
    .views-view-responsive-grid--horizontal.mobile-grid-1 {
        width: 80% !important;
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    .view-content.mobile-grid-1 .views-view-responsive-grid__item,
    .views-view-responsive-grid.mobile-grid-1 .views-view-responsive-grid__item,
    .views-view-responsive-grid--horizontal.mobile-grid-1 .views-view-responsive-grid__item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 1 column layout - fixed height for consistent grid */
    .mobile-grid-1 .product-image,
    .views-view-responsive-grid.mobile-grid-1 .product-image,
    .views-view-responsive-grid--horizontal.mobile-grid-1 .product-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 300px !important;
    }

    /* 2 column layout - limit item width to ~50% */
    .view-content.mobile-grid-2 .views-view-responsive-grid,
    .views-view-responsive-grid.mobile-grid-2,
    .views-view-responsive-grid--horizontal.mobile-grid-2 {
        justify-content: flex-start !important;
    }

    .view-content.mobile-grid-2 .views-view-responsive-grid__item,
    .views-view-responsive-grid.mobile-grid-2 .views-view-responsive-grid__item,
    .views-view-responsive-grid--horizontal.mobile-grid-2 .views-view-responsive-grid__item {
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        flex: 0 0 calc(50% - 5px) !important;
    }

    /* 2 column layout - fixed height for consistent grid */
    .mobile-grid-2 .product-image,
    .views-view-responsive-grid.mobile-grid-2 .product-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
    }

    /* 3 column layout - limit item width to ~33% */
    .view-content.mobile-grid-3 .views-view-responsive-grid,
    .views-view-responsive-grid.mobile-grid-3,
    .views-view-responsive-grid--horizontal.mobile-grid-3 {
        justify-content: flex-start !important;
    }

    .view-content.mobile-grid-3 .views-view-responsive-grid__item,
    .views-view-responsive-grid.mobile-grid-3 .views-view-responsive-grid__item,
    .views-view-responsive-grid--horizontal.mobile-grid-3 .views-view-responsive-grid__item {
        width: calc(33.333% - 7px) !important;
        max-width: calc(33.333% - 7px) !important;
        flex: 0 0 calc(33.333% - 7px) !important;
    }

    /* 3 column layout - fixed height for consistent grid */
    .mobile-grid-3 .product-image,
    .views-view-responsive-grid.mobile-grid-3 .product-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 140px !important;
    }

    /* Enhanced product info styling for mobile */
    .product-info {
        padding: 6px 4px !important;
        gap: 0 !important;
        position: relative !important;
        /* For expanded title overlay */
    }

    .product-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        /* Single line with ellipsis - tap to expand */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        cursor: pointer !important;
        /* Ensure clicks are captured above stretched-link */
        z-index: 2 !important;
        pointer-events: auto !important;
        position: relative !important;
        transition: all 0.2s ease !important;
    }

    .product-title a {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--nm-text-primary) !important;
        text-decoration: none !important;
        /* Single line with ellipsis */
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        /* Ensure link is clickable */
        pointer-events: auto !important;
        z-index: 2 !important;
    }

    /* Parent must allow overflow for popup */
    .product-info {
        overflow: visible !important;
    }

    /* Expanded state - tooltip popup above */
    .product-title.expanded {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        background: #fff !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        border: 1px solid #e0e0e0 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        position: absolute !important;
        z-index: 9999 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: calc(100% + 8px) !important;
        top: auto !important;
        right: auto !important;
        width: max-content !important;
        max-width: 250px !important;
        min-width: 120px !important;
        cursor: default !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Arrow pointing down */
    .product-title.expanded::before {
        content: '' !important;
        position: absolute !important;
        bottom: -8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-left: 8px solid transparent !important;
        border-right: 8px solid transparent !important;
        border-top: 8px solid #fff !important;
    }

    .product-title.expanded a {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        pointer-events: auto !important;
        color: #333 !important;
    }

    /* Visual indicator that title is expandable (small arrow/chevron) */
    .product-title.truncated::after {
        content: ' ▾' !important;
        font-size: 8px !important;
        color: #888 !important;
        vertical-align: middle !important;
    }

    /* Remove indicator when expanded - full title is shown */
    .product-title.expanded::after {
        content: none !important;
        display: none !important;
    }

    /* 1 column layout - larger font */
    .mobile-grid-1 .product-title,
    .mobile-grid-1 .product-title a {
        font-size: 14px !important;
    }

    .mobile-grid-1 .product-info .price,
    .mobile-grid-1 .product-info .commerce-price-formatted-amount,
    .mobile-grid-1 .product-info .promotion-discount-price {
        font-size: 15px !important;
    }

    /* 2 column layout - medium font */
    .mobile-grid-2 .product-title,
    .mobile-grid-2 .product-title a {
        font-size: 12px !important;
    }

    .mobile-grid-2 .product-info .price,
    .mobile-grid-2 .product-info .commerce-price-formatted-amount,
    .mobile-grid-2 .product-info .promotion-discount-price {
        font-size: 13px !important;
    }

    /* 3 column layout - smaller font */
    .mobile-grid-3 .product-title,
    .mobile-grid-3 .product-title a {
        font-size: 10px !important;
    }

    .mobile-grid-3 .product-info .price,
    .mobile-grid-3 .product-info .commerce-price-formatted-amount,
    .mobile-grid-3 .product-info .promotion-discount-price {
        font-size: 11px !important;
    }

    .product-info .field--name-variation-price,
    .product-info .price,
    .product-info .commerce-price-formatted-amount {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #2e7d32 !important;
        margin-top: 2px !important;
    }

    .product-info .promotion-discount-price {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #2e7d32 !important;
    }

    .product-info .original-price,
    .product-info .price--original {
        font-size: 10px !important;
        color: var(--nm-text-muted) !important;
        text-decoration: line-through !important;
        font-weight: 400 !important;
    }

    .region-highlighted {
        display: none !important;
    }


    .region-help .brands-block {
        margin-bottom: 1rem;
    }


    .region-help .view-content {
        height: 12vh !important;
    }

    .brands-block .swiper-wrapper {
        padding: 0px;
        gap: 5px;
    }

    .region-help {
        width: 100% !important;
        padding-left: 0rem !important;
        padding-right: 0rem !important;
        padding-bottom: 0rem !important;
    }

    .main-container {
        width: 100% !important;
    }



    .view-filters {
        padding: 0px !important;
    }

    summary.card-header {
        font-size: 0.7rem !important;
        font-weight: bold !important;
    }


    .form-check {
        margin-top: 5px !important;
    }

    .form-check-input {
        width: 8px !important;
        height: 8px !important;
        margin-right: 0 !important;
    }

    [class*="-catalog"] {
        margin-top: 1rem;
        grid-template-columns: 30% 1fr !important;
        gap: 3px !important;
        width: 95% !important;
    }

    .layout__region--second .form-actions .button--add-to-cart,
    .layout__region--second .wishlist-quantity-row {
        width: 100% !important;
    }


    .views-exposed-form .form-check-label {
        margin-right: 2rem !important;
    }

    .form-check-label {
        font-size: 0.7rem !important;
        white-space: wrap;
        margin-left: 5px !important;
    }

    .count-label {
        font-size: 0.6rem;
    }

    .form-item {
        margin-bottom: 0rem !important;
    }

    .view-filters ul {
        padding-left: 0rem !important;
    }

    .card-body {
        padding: 0 !important;
    }

    .card-header {
        padding: 0 !important;
    }

    .view-filters ul {
        padding-right: 0.2rem !important;
    }




    .color-swatch .swatch,
    .color_field__swatch {
        width: 25px !important;
        height: 25px !important;
        margin-top: 5px !important;
    }

    .color-swatch {
        margin: 0px !important;
        margin-bottom: 1rem;
    }

    .bef-exposed-form .fieldset-legend {
        font-size: 15px !important;
        font-weight: bold !important;
    }

    legend+* {
        margin-left: auto;
    }

    #edit-price-wrapper--4 {
        margin-right: 0rem !important;
    }

    .fieldset-wrapper {
        margin-right: 30px !important;
        margin-top: 5px;
    }

    html[dir="rtl"] #backtotop {
        left: 20px !important;
    }

    .bef-slider .noUi-handle {
        width: 20px !important;
        height: 20px !important;
    }

    .noUi-connect,
    .noUi-origin {
        top: 4px;
    }

    .noUi-horizontal .noUi-handle {
        border-radius: 3px;
    }



    .noUi-target {
        margin-left: 20px !important;
    }

    .form-item-price-min,
    .form-item-price-max {
        font-size: 10px;
    }

    legend {
        margin-bottom: 0rem;
    }

    #edit-price-wrapper--3 {
        margin-top: 1rem;
    }

    .form-select {
        font-size: 10px !important;
        padding-left: 0px !important;
        background-size: 0.8rem 0.8rem !important;
        ;
    }

    .align-items-right {
        margin-right: 3px;
    }

    .js-form-item {
        justify-content: center;
        direction: ltr !important;
    }

    .commerce-order-item-add-to-cart-form .form-item {
        margin-bottom: 2rem !important;
        margin-top: 1rem !important;
    }

    .js-form-item-sort-bef-combine select {
        text-align: right;
    }

    .form-item-sort-bef-combine .form-label {
        display: none !important;
    }

    #products-sort {
        padding-left: 0rem !important;
        top: 0.3rem;
        left: 1rem !important;
    }

    #category-id-text {
        display: none !important;
    }

    .layout--twocol-section {
        margin-top: 1rem !important;
        flex-wrap: wrap !important;
        width: 95% !important;

    }



    .layout__region--second {
        padding-right: 0px !important;
    }

    /* Mobile: Move title above image */
    .layout--twocol-section--50-50 {
        display: flex !important;
        flex-direction: column !important;
    }

    .layout--twocol-section--50-50>.layout__region--first {
        order: 2 !important;
    }

    .layout--twocol-section--50-50>.layout__region--second {
        order: 1 !important;
        display: contents !important;
    }

    .layout--twocol-section--50-50 .block-field-blockcommerce-productmyproducttitle {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    .layout--twocol-section--50-50 #tags {
        order: 2 !important;
        width: 100% !important;
    }

    /* Reset order for other elements in second region */
    .layout--twocol-section--50-50 .product-price,
    .layout--twocol-section--50-50 .block-field-blockcommerce-product-variationclothesstock-quantity,
    .layout--twocol-section--50-50 .block-field-blockcommerce-productmyproductvariations,
    .layout--twocol-section--50-50 .block-field-blockcommerce-productmyproductbody,
    .layout--twocol-section--50-50 .block--type-basic {
        order: 10 !important;
        width: 100% !important;
    }

    /* Mobile: Product body text justified */
    .block-field-blockcommerce-productmyproductbody .body,
    .block-field-blockcommerce-productmyproductbody .body p {
        text-align: justify !important;
        text-align-last: right !important;
    }

    .bootstrap-basic-image-gallery .main-image {
        margin-right: 0px !important;
        height: calc(100vh - 400px) !important;
        min-height: 200px !important;
        max-height: 350px !important;
    }

    .bootstrap-basic-image-gallery .thumbnails {
        gap: 6px !important;
        padding: 8px 0 !important;
        margin-top: 10px !important;
    }

    .bootstrap-basic-image-gallery .thumbnails .thumb,
    .bootstrap-basic-image-gallery .thumbnails .thumb.bscol-5,
    .bootstrap-basic-image-gallery .thumbnails>div {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
        border-radius: 6px !important;
    }

    .layout__region--second .title {
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center !important;
    }

    .layout__region--second .price {
        text-align: center !important;
    }

    .product-price,
    .price {
        margin-top: 0.5rem !important;
    }

    #tags,
    .cart-modal-tags {
        display: flex;
        flex-direction: row-reverse !important;
        flex-wrap: wrap;
        gap: 0px !important;
        margin-bottom: 0rem !important;
    }

    #tags a,
    .cart-modal-tags a {
        padding: 2px 6px !important;
        font-size: 9px !important;
    }

    .share-icons {
        margin-bottom: 2rem;
    }

    .layout__region--second .stock-quantity {
        margin-bottom: 0rem !important;
        text-align: center;
    }

    .commerce-order-item-add-to-cart-form .form-check-label {
        font-size: 1rem !important;
    }

    .attribute-widgets {
        display: block;
        margin-right: 0.5rem !important;
    }

    .commerce-order-item-add-to-cart-form .color-swatch .swatch,
    .commerce-order-item-add-to-cart-form .color_field__swatch {
        width: 40px !important;
        height: 40px !important;
    }

    /* ========================================
       PRODUCT PAGE - Fix attributes overflow on mobile
       ======================================== */

    /* Container must not overflow */
    .commerce-order-item-add-to-cart-form {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    .commerce-order-item-add-to-cart-form .attribute-widgets {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 5px !important;
    }

    .commerce-order-item-add-to-cart-form fieldset {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .commerce-order-item-add-to-cart-form .fieldset-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* COLOR ATTRIBUTE - fit within screen */
    fieldset[data-drupal-selector*="attribute-color"] .form-radios {
        max-width: calc(100% - 10px) !important;
        width: calc(100% - 10px) !important;
        gap: 2px !important;
        margin: 0 5px !important;
    }

    fieldset[data-drupal-selector*="attribute-color"] .color_field__swatch {
        width: 36px !important;
        height: 36px !important;
    }

    fieldset[data-drupal-selector*="attribute-color"] {
        padding: 0 5px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    fieldset[data-drupal-selector*="attribute-color"] .fieldset-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* SIZE ATTRIBUTE - responsive grid */
    fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-radios {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        width: calc(100% - 10px) !important;
        max-width: calc(100% - 10px) !important;
        margin: 0 5px !important;
        padding: 0 !important;
    }

    fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-check-label {
        height: 34px !important;
        font-size: 11px !important;
        padding: 4px 2px !important;
    }

    /* Ensure fieldset doesn't overflow */
    fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] {
        padding: 0 5px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .fieldset-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .commerce-order-item-add-to-cart-form .js-form-type-number input {
        width: 100px !important;
    }

    .commerce-order-item-add-to-cart-form .button--add-to-cart {
        margin-right: 0rem !important;
        top: 0px !important;
        width: 100% !important;
    }

    .custom-number-input {
        margin-left: 5px !important;
    }

    .block-quicktabs-blockproduct-return-tab {
        margin-top: 0rem;
    }

    .block-quicktabs-blockproduct-return-tab .quicktabs-tabs {
        margin-top: 2rem !important;
    }

    .quicktabs-main {
        margin-top: 0.5rem;
    }

    .view-recent-viewed-products {
        width: 90% !important;
        margin-bottom: 2rem !important;
    }

    .view-recent-viewed-products .swiper-slide {
        width: 100px !important;
    }

    [class*="-catalog"] .view-header,
    [class*="-catalog"] .view-empty {
        margin-right: 0% !important;
    }

    .bef-checkboxes {
        max-height: 150px !important;
        /* Limit the height of the container */
    }


    .bef-checkboxes::-webkit-scrollbar {
        width: 1px !important;
    }


    .view-wishlist {
        width: 90% !important;
        margin-top: 2rem !important;
    }

    .view-wishlist .views-view-grid {
        margin-left: auto;
        margin-right: auto;
    }


    .mb-3 {
        margin-bottom: 0rem !important;
    }

    .p-4 {
        padding: 0rem !important;
    }

    .view-commerce-cart-form .views-field-title {
        font-size: 12px !important;
        color: black !important;
    }

    .view-commerce-cart-form .custom-number-input {
        margin-right: 0rem !important;
    }

    .view-commerce-cart-form .js-form-type-number input {
        width: 50px !important;
        height: 30px !important;
        border-radius: 10px !important;
        padding: 0px;
        border-radius: 4px;
        font-size: 12px !important;

    }

    .view-commerce-cart-form .minus,
    .view-commerce-cart-form .plus {
        font-size: 12px !important;
    }

    .table.cols-6 {
        display: block;
        max-height: 350px;
        /* or whatever height you want */
        overflow-y: auto;
        width: 100%;
    }

    /* Optional: Make table headers sticky */
    .table.cols-6 thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }

    .view-commerce-cart-form #edit-coupon-redemption input[type="text"] {
        width: 148px;
        height: 33px;
    }

    #edit-coupon-redemption input[type="text"] {
        margin-bottom: 1rem;
    }

    #edit-coupon-redemption input[type="text"] {
        width: 100%;
    }


    .cart-form .form-actions {
        margin-top: 8rem !important;
        text-align: right;

    }

    .cart-form {
        margin-bottom: 0rem !important;
    }

    #edit-coupon-redemption .form-text {
        font-size: 8px !important;
    }



    .view-all-products-search .search-products-count {
        font-size: 14px !important;
        white-space: nowrap;
    }

    .views-view-grid .views-row {
        width: 80%;
    }

    #block-belgrade-exposedformall-products-searchpage-1 .views-element-container {
        margin-top: 0rem !important;
    }

    .view-all-products-search .view-content {
        height: auto !important;
    }

    .view-all-products-search .view-header {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0rem;
    }


    .cart-empty-page {
        margin-top: 7rem;
    }

    .form-check-inline,
    .product--rendered-attribute .form-check {
        /* display: flex !important; */
    }

    .commerce-order-item-add-to-cart-form .color_field__swatch {
        margin-top: 0.4rem !important;
    }

    [class*="-catalog"] .view-content {
        margin-right: 0.5rem !important;
    }

    /* Promotions view - full width on mobile (note: typo in view machine name) */
    .view-products-with-promition {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        padding: 0 10px !important;
    }

    .block-social-media-links {
        margin-top: 0.5rem !important;
    }

    .block-social-media-links ul {
        flex-direction: row;
        gap: 0.5rem;
    }

    .block-social-media-links::before {
        display: none !important;
    }

    .mr-15 {
        width: 30px;
    }

    .block-views-blockrecent-viewed-products-block-1 {
        margin-top: 0rem;
    }

    .bls__delivery-return {
        margin-top: 2rem !important;
    }

    /* Product page - reorder blocks on mobile */
    .layout--twocol-section--50-50 .layout__region--second {
        display: flex;
        flex-direction: column;
    }

    /* Move delivery/return block after price on mobile */
    .layout--twocol-section--50-50 .layout__region--second .block--block-contentb87aed5d-14d8-4790-98d0-ab9fce2b33d8 {
        order: 5; /* After price */
    }

    .layout--twocol-section--50-50 .layout__region--second .product-price {
        order: 4;
    }

    .layout--twocol-section--50-50 .layout__region--second #tags {
        order: 1;
    }

    .layout--twocol-section--50-50 .layout__region--second .block-field-blockcommerce-productmyproducttitle {
        order: 2;
    }

    .layout--twocol-section--50-50 .layout__region--second .block-low-stock-alert-block {
        order: 3;
    }

    .layout--twocol-section--50-50 .layout__region--second .block-field-blockcommerce-productmyproductvariations {
        order: 6; /* After delivery/return block */
    }



    /* Wishlist icon - positioned next to quantity input on mobile */
    .block-extra-field-blockcommerce-productmyproductflag-wishlist.mobile-positioned {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        margin-left: 10px !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Make quantity wrapper a flex container to align wishlist next to it */
    .field--widget-commerce-quantity .js-form-item {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        flex-direction: row !important;
    }

    .block-extra-field-blockcommerce-productmyproductflag-wishlist.mobile-positioned .flag-wishlist {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    .block-extra-field-blockcommerce-productmyproductflag-wishlist.mobile-positioned .flag-wishlist a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .block-extra-field-blockcommerce-productmyproductflag-wishlist.mobile-positioned .flag-wishlist a>svg {
        max-width: 20px !important;
        max-height: 20px !important;
    }

    div[data-drupal-selector="edit-price-wrapper"] {
        margin-top: 0.7rem !important;
    }

    div[data-drupal-selector="edit-price-wrapper"] .fieldset-legend {
        margin-bottom: 1rem !important;
        margin-top: 0.5rem !important;
    }

    .bef-slider .noUi-handle::after {
        top: 10px;
    }


    .product-image .flag-icon {
        display: none !important;
    }

    /* Mobile icons row - positioned inside the image at the bottom horizontally */
    .product .mobile-icons-row {
        display: flex !important;
        flex-direction: row !important;
        position: absolute !important;
        bottom: 4px !important;
        left: 4px !important;
        right: auto !important;
        top: auto !important;
        padding: 0 !important;
        gap: 3px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 2 !important;
        /* Low - only above product image */
    }

    .product .mobile-icons-row .flag-icon {
        position: static !important;
        display: inline-flex !important;
        opacity: 1 !important;
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border: none !important;
        transition: all 0.2s ease !important;
        padding: 2px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    /* Cart icon - golden yellow */
    .product .mobile-icons-row .cart-icon {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    }

    .product .mobile-icons-row .cart-icon svg,
    .product .mobile-icons-row .cart-icon .custom-svg {
        fill: white !important;
        stroke: white !important;
        color: white !important;
    }

    /* Buy now icon - green */
    .product .mobile-icons-row .buy-now-icon {
        background: linear-gradient(135deg, #10b981, #059669) !important;
    }

    .product .mobile-icons-row .buy-now-icon svg,
    .product .mobile-icons-row .buy-now-icon .custom-svg {
        stroke: white !important;
        color: white !important;
    }

    /* Wishlist icon - white with heart */
    .product .mobile-icons-row .wishlist-icon {
        background: rgba(255, 255, 255, 0.95) !important;
    }

    .product .mobile-icons-row .wishlist-icon i,
    .product .mobile-icons-row .wishlist-icon .fa-heart {
        color: #ef4444 !important;
    }

    /* Promo info icon - red */
    .product .mobile-icons-row .promo-info-icon {
        background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    }

    .product .mobile-icons-row .promo-info-icon svg,
    .product .mobile-icons-row .promo-info-icon .custom-svg {
        stroke: white !important;
        color: white !important;
    }

    /* Wishlist icon container - fixed size to prevent collapse during AJAX */
    .product .mobile-icons-row .wishlist-icon {
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        overflow: hidden !important;
    }

    /* Reset font-size that's set to 1.5em in numart_main.css */
    .product .mobile-icons-row .flag-icon {
        font-size: 10px !important;
    }

    /* Constrain the flag-wishlist wrapper and its children */
    .product .mobile-icons-row .wishlist-icon .flag-wishlist,
    .product .mobile-icons-row .wishlist-icon .flag,
    .product .mobile-icons-row .wishlist-icon>* {
        max-width: 16px !important;
        max-height: 16px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    /* Ensure SVG inside wishlist is constrained */
    .product .mobile-icons-row .wishlist-icon svg {
        width: 10px !important;
        height: 10px !important;
        max-width: 10px !important;
        max-height: 10px !important;
    }

    .product .mobile-icons-row .flag-icon:hover {
        background: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .product .mobile-icons-row .flag-icon a:hover,
    .product .mobile-icons-row .flag-icon .flag a:hover {
        opacity: 1 !important;
        transform: none !important;
        color: inherit !important;
    }

    /* Hide tooltips on mobile icons */
    .product .mobile-icons-row .flag-icon[data-tooltip]::before,
    .product .mobile-icons-row .flag-icon[data-tooltip]::after {
        display: none !important;
    }

    .product .mobile-icons-row .flag-icon svg,
    .product .mobile-icons-row .flag-icon .custom-svg {
        width: 11px !important;
        height: 11px !important;
    }

    /* Font Awesome heart icons in wishlist */
    .product .mobile-icons-row .flag-icon i,
    .product .mobile-icons-row .flag-icon .fa-heart,
    .product .mobile-icons-row .flag-icon .far,
    .product .mobile-icons-row .flag-icon .fas,
    .product .mobile-icons-row .flag-icon .fav-icon,
    .product .mobile-icons-row .wishlist-icon i,
    .product .mobile-icons-row .wishlist-icon .fa-heart,
    .product .mobile-icons-row .wishlist-icon .far,
    .product .mobile-icons-row .wishlist-icon .fas,
    .product .mobile-icons-row .wishlist-icon .fav-icon {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 11px !important;
        width: 11px !important;
        height: 11px !important;
        max-width: 11px !important;
        max-height: 11px !important;
    }

    /* Constrain all links and wrappers in wishlist icon */
    .product .mobile-icons-row .wishlist-icon a,
    .product .mobile-icons-row .wishlist-icon .flag-link-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .product .mobile-icons-row .flag-icon a,
    .product .mobile-icons-row .flag-icon .flag {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
    }

    .product .mobile-icons-row .flag-icon .flag a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Keep wishlist icon visible during AJAX operations */
    .product .mobile-icons-row .flag-icon .flag,
    .product .mobile-icons-row .flag-icon .flag-wishlist,
    .product .mobile-icons-row .wishlist-icon .flag,
    .product .mobile-icons-row .wishlist-icon .flag-wishlist {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 14px !important;
        min-height: 14px !important;
    }

    /* Ensure AJAX throbber doesn't hide the icon */
    .product .mobile-icons-row .flag-icon .ajax-progress,
    .product .mobile-icons-row .wishlist-icon .ajax-progress {
        display: none !important;
    }

    /* Prevent focus/active state from hiding element */
    .product .mobile-icons-row .flag-icon .flag a:focus,
    .product .mobile-icons-row .flag-icon .flag a:active,
    .product .mobile-icons-row .wishlist-icon .flag a:focus,
    .product .mobile-icons-row .wishlist-icon .flag a:active {
        visibility: visible !important;
        opacity: 1 !important;
        outline: none !important;
    }

    /* Handle Drupal Flag AJAX states */
    .product .mobile-icons-row .wishlist-icon .flag.action-flag,
    .product .mobile-icons-row .wishlist-icon .flag.action-unflag,
    .product .mobile-icons-row .wishlist-icon .flag-wrapper,
    .product .mobile-icons-row .wishlist-icon [class*="flag-"] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Prevent any element inside wishlist from disappearing */
    .product .mobile-icons-row .wishlist-icon * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide only the throbber/spinner, not the icon */
    .product .mobile-icons-row .wishlist-icon .ajax-progress-throbber,
    .product .mobile-icons-row .wishlist-icon .throbber {
        display: none !important;
    }

    /* Icon sizes per grid layout - all icons same size */
    /* 1 column - larger icons */
    .mobile-grid-1 .mobile-icons-row .flag-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-grid-1 .mobile-icons-row .flag-icon svg,
    .mobile-grid-1 .mobile-icons-row .flag-icon .custom-svg,
    .mobile-grid-1 .mobile-icons-row .flag-icon i {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
    }

    /* 2 column - medium icons */
    .mobile-grid-2 .mobile-icons-row .flag-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-grid-2 .mobile-icons-row .flag-icon svg,
    .mobile-grid-2 .mobile-icons-row .flag-icon .custom-svg,
    .mobile-grid-2 .mobile-icons-row .flag-icon i {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
    }

    /* 3 column - smaller icons */
    .mobile-grid-3 .mobile-icons-row .flag-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-grid-3 .mobile-icons-row .flag-icon svg,
    .mobile-grid-3 .mobile-icons-row .flag-icon .custom-svg,
    .mobile-grid-3 .mobile-icons-row .flag-icon i {
        width: 12px !important;
        height: 12px !important;
        font-size: 12px !important;
    }

    .mobile-grid-3 .mobile-icons-row {
        gap: 4px !important;
        bottom: 4px !important;
        left: 4px !important;
    }

    .view-highlighted-products .swiper-slide .title {
        top: 75%;
        font-size: 16px;
        white-space: nowrap;
    }


    .layout-checkout-form .layout-checkout-form .mb-3 {
        text-align: center !important;
    }

    .layout-region-checkout-secondary .mb-3 {
        text-align: center !important;
    }

    .checkout-pane-coupon-redemption {
        margin-top: 1rem !important;
    }

    .checkout-pane-coupon-redemption .js-form-item {
        display: inline-block !important;
    }

    .checkout-pane-contact-information .form-control {
        display: block;
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.75em;
    }

    .layout-region-checkout-footer {
        margin-top: 2rem !important;
    }


    .layout-checkout-form {
        margin-right: 10px !important;
        margin-top: 10px !important;
    }

    .layout-checkout-form .fieldset-wrapper {
        margin-left: auto;
        margin-right: auto !important;
        font-size: 14px;
        text-align: center;
        margin-bottom: 1rem;
    }

    .layout-checkout-form div {
        width: 100% !important;
        margin-top: 1rem;
    }

    .checkout-complete p {
        text-align: center !important;
        font-weight: bold !important;
    }

    #block-belgrade-checkout-progress {
        display: none !important;
    }


    .checkout-pane .form-wrapper__login-option input.button {
        margin: 0;
        margin-top: 1rem;
        height: 50px;
    }

    .layout-checkout-form .js-form-item {
        margin-top: 0.5rem !important;
    }

    .layout-checkout-form div[data-drupal-selector="edit-actions"] {
        display: flex;
        flex-direction: column;
    }

    .layout-checkout-form div[data-drupal-selector="edit-actions"] a {
        margin-top: 1rem;
        text-align: center;
    }


    .product-image .cart-icon {
        top: 40px !important;
    }

    .ui-dialog .commerce-order-item-add-to-cart-form .attribute-widgets {
        display: flex !important;
        flex-direction: row !important;
        margin-bottom: 1rem !important;
    }

    .ui-dialog .form-check-label {
        padding-left: 0rem !important;
    }


    .cart-modal-content {
        flex-direction: column;
    }

    .cart-modal-info {
        order: 2;
    }

    .cart-modal-image {
        order: 1;
    }



    .product-image .flag-icon {
        position: absolute;
        opacity: 1;
    }

    .out-of-stock .stock-status {
        top: 25px;
        left: 5px;
        padding: 2px 6px;
        font-size: 0.6rem;
        background-color: rgba(255, 0, 0, 0.5) !important;
    }


    #block-belgrade-subtheme-views-block-brands-block h2,
    #block-belgrade-subtheme-views-block-main-categories-view-block-1 h2,
    .block-quicktabs-blocknew-arrivals-tab h2,
    #dcm-highlighted_products-title,
    #dcm-brands-title {
        font-size: 1.1rem !important;
        text-align: center !important;
    }



    .block-views-blockmain-categories-view-block-1 h2 {
        font-size: 1.1rem !important;
    }


    .cart-modal #edit-quantity-wrapper,
    .cart-modal [data-drupal-selector="edit-quantity-wrapper"],
    .cart-modal .field--name-quantity {
        justify-content: center !important;
    }



    /* ========================================
       MAIN CATEGORIES VIEW - Mobile Layout
       Name above term-action with vertical spacing
       ======================================== */
    .view-main-categories-view .views-view-responsive-grid__item-inner {
        position: relative;
    }

    .view-main-categories-view .views-view-responsive-grid__item-inner .views-field-name,
    .view-main-categories-view .views-view-responsive-grid__item-inner .views-field-term-action {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 2;
    }

    /* Name above action */
    .view-main-categories-view .views-view-responsive-grid__item-inner .views-field-name {
        bottom: 30px;
    }

    /* Action at bottom */
    .view-main-categories-view .views-view-responsive-grid__item-inner .views-field-term-action {
        bottom: 8px;
    }

    .view-main-categories-view .views-view-responsive-grid__item-inner .views-field-name a {
        font-size: 11px !important;
        padding: 2px 3px !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        color: var(--nm-white) !important;
        border-radius: 4px;
        display: inline-block;
    }

    .view-main-categories-view .views-view-responsive-grid__item-inner .views-field-term-action a {
        font-size: 8px !important;
        font-weight: bold;
        padding: 2px 6px !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        color: var(--nm-white) !important;
        border-radius: 4px;
        display: inline-block;
    }

    /* ======================================== */

    .view-empty {
        margin-top: 5rem !important;


    }

    .view-commerce-cart-form {
        padding: 0px !important;
    }


    .views-view-responsive-grid--horizontal {
        gap: 10px !important;
        grid-template-columns: repeat(2, auto) !important;
        width: fit-content !important;
    }

    .brands-block .view-header,
    .main-categories .view-header,
    .block-quicktabs-blocknew-arrivals-tab .view-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .product-info .promotion-discount-price {
        font-size: 11px !important;
    }




    summary.card-header::after {
        font-size: 12px !important;
        color: var(--nm-black) !important;
    }

    .my-3 {
        margin-top: 0px !important;
    }

    #edit-attribute-color-att-collapsible {
        margin-top: 10px;
    }


    .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
        left: 15px !important;
    }


    /* Product grid & swiper - minimal gap between products */
    /* For highlighted products: show 3 products on mobile */
    .view-highlighted-products .swiper-slide,
    .view-all-products-new-arrivals .swiper-slide,
    .recent-views-products-swiper .swiper-slide {
        margin-right: 2px !important;
        margin-left: 2px !important;
        flex-shrink: 0 !important;
    }

    .swiper-container .swiper-slide,
    .swiper-all-visible .swiper-slide {
        margin-right: 2px !important;
        margin-left: 2px !important;
        flex-shrink: 0 !important;
    }

    .view-highlighted-products .swiper-wrapper,
    .view-all-products-new-arrivals .swiper-wrapper,
    .recent-views-products-swiper .swiper-wrapper {
        gap: 0 !important;
        /* Let margin handle gaps */
        padding: 0 4px !important;
        /* Small padding on sides */
    }

    .views-view-responsive-grid {
        gap: 10px !important;
    }

    /* Recent viewed products swiper - uniform dimensions */
    .recent-views-products-swiper .product-image,
    .recent-views-products-swiper .product-teaser,
    .recent-views-products-swiper .images {
        width: 100% !important;
        height: 140px !important;
        overflow: hidden !important;
    }

    .recent-views-products-swiper .product-image img,
    .recent-views-products-swiper .product-teaser img,
    .recent-views-products-swiper .images img,
    .recent-views-products-swiper .image-style-product-teaser {
        width: 100% !important;
        height: 140px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .recent-views-products-swiper .swatch-overlay-container {
        width: 100% !important;
        height: 140px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .recent-views-products-swiper .swatch-overlay-container img {
        width: 100% !important;
        height: 140px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Product grid & swiper - enforce uniform image dimensions with fixed height */
    .views-view-responsive-grid .product-image,
    .swiper-container .product-image,
    .view-highlighted-products .product-image,
    .view-all-products-new-arrivals .product-image {
        width: 100% !important;
        height: 140px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Ensure mobile grid image link fills the full image area on all views. */
    .views-view-responsive-grid .product-teaser {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .views-view-responsive-grid .product-teaser .images,
    .views-view-responsive-grid .product-teaser .field--name-field-images {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .views-view-responsive-grid .product-teaser .images a,
    .views-view-responsive-grid .product-teaser > a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: auto !important;
    }

    /* Fixed 140px for swipers and non-catalog views */
    .swiper-container .product-teaser,
    .swiper-container .images,
    .view-highlighted-products .product-teaser,
    .view-highlighted-products .images,
    .view-all-products-new-arrivals .product-teaser,
    .view-all-products-new-arrivals .images {
        width: 100% !important;
        height: 140px !important;
        overflow: hidden !important;
    }



    /* Grid views in catalog & promotions pages - height controlled by grid toggle */
    .view-products-by-catalog .views-view-responsive-grid .product-teaser,
    .view-products-by-catalog .views-view-responsive-grid .images,
    .view-brands-catalog .views-view-responsive-grid .product-teaser,
    .view-brands-catalog .views-view-responsive-grid .images,
    .view-products-with-promition .views-view-responsive-grid .product-teaser,
    .view-products-with-promition .views-view-responsive-grid .images {
        width: 100% !important;
        height: 100% !important;
        /* Fill parent container */
        overflow: hidden !important;
    }

    /* Catalog & Promotions views - dynamic height based on grid columns */
    .view-products-by-catalog .product-image,
    .view-brands-catalog .product-image,
    .view-products-with-promition .product-image {
        aspect-ratio: unset !important;
        /* Remove aspect ratio for dynamic height */
    }

    /* Default 2 column height for catalog & promotions */
    .view-products-by-catalog .views-view-responsive-grid .product-image,
    .view-brands-catalog .views-view-responsive-grid .product-image,
    .view-products-with-promition .views-view-responsive-grid .product-image {
        height: 180px !important;
    }

    /* 1 column - taller */
    .view-products-by-catalog .view-content.mobile-grid-1 .product-image,
    .view-brands-catalog .view-content.mobile-grid-1 .product-image,
    .view-products-with-promition .view-content.mobile-grid-1 .product-image,
    .view-products-by-catalog .mobile-grid-1.views-view-responsive-grid--horizontal .product-image,
    .view-brands-catalog .mobile-grid-1.views-view-responsive-grid--horizontal .product-image,
    .view-products-with-promition .mobile-grid-1.views-view-responsive-grid--horizontal .product-image {
        height: 300px !important;
    }

    /* 2 columns */
    .view-products-by-catalog .view-content.mobile-grid-2 .product-image,
    .view-brands-catalog .view-content.mobile-grid-2 .product-image,
    .view-products-with-promition .view-content.mobile-grid-2 .product-image,
    .view-products-by-catalog .mobile-grid-2.views-view-responsive-grid--horizontal .product-image,
    .view-brands-catalog .mobile-grid-2.views-view-responsive-grid--horizontal .product-image,
    .view-products-with-promition .mobile-grid-2.views-view-responsive-grid--horizontal .product-image {
        height: 180px !important;
    }

    /* 3 columns - shorter */
    .view-products-by-catalog .view-content.mobile-grid-3 .product-image,
    .view-brands-catalog .view-content.mobile-grid-3 .product-image,
    .view-products-with-promition .view-content.mobile-grid-3 .product-image,
    .view-products-by-catalog .mobile-grid-3.views-view-responsive-grid--horizontal .product-image,
    .view-brands-catalog .mobile-grid-3.views-view-responsive-grid--horizontal .product-image,
    .view-products-with-promition .mobile-grid-3.views-view-responsive-grid--horizontal .product-image {
        height: 140px !important;
    }

    /* Grid & swiper image defaults - 140px height */
    .views-view-responsive-grid .product-image img,
    .views-view-responsive-grid .product-teaser img,
    .views-view-responsive-grid .images img,
    .views-view-responsive-grid .image-style-product-teaser,
    .swiper-container .product-image img,
    .swiper-container .product-teaser img,
    .swiper-container .images img,
    .swiper-container .image-style-product-teaser,
    .view-highlighted-products .product-image img,
    .view-highlighted-products .product-teaser img,
    .view-highlighted-products .images img,
    .view-highlighted-products .image-style-product-teaser,
    .view-all-products-new-arrivals .product-image img,
    .view-all-products-new-arrivals .product-teaser img,
    .view-all-products-new-arrivals .images img,
    .view-all-products-new-arrivals .image-style-product-teaser {
        width: 100% !important;
        height: 140px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Catalog & Promotions views - image fills container (height set by parent) */
    .view-products-by-catalog .views-view-responsive-grid .product-image img,
    .view-products-by-catalog .views-view-responsive-grid .product-teaser img,
    .view-products-by-catalog .views-view-responsive-grid .images img,
    .view-products-by-catalog .views-view-responsive-grid .image-style-product-teaser,
    .view-brands-catalog .views-view-responsive-grid .product-image img,
    .view-brands-catalog .views-view-responsive-grid .product-teaser img,
    .view-brands-catalog .views-view-responsive-grid .images img,
    .view-brands-catalog .views-view-responsive-grid .image-style-product-teaser,
    .view-products-with-promition .views-view-responsive-grid .product-image img,
    .view-products-with-promition .views-view-responsive-grid .product-teaser img,
    .view-products-with-promition .views-view-responsive-grid .images img,
    .view-products-with-promition .views-view-responsive-grid .image-style-product-teaser {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .views-view-responsive-grid .swatch-overlay-container,
    .swiper-container .swatch-overlay-container,
    .view-highlighted-products .swatch-overlay-container,
    .view-all-products-new-arrivals .swatch-overlay-container {
        width: 100% !important;
        height: 140px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        pointer-events: none !important;
    }

    .views-view-responsive-grid .swatch-overlay-container img,
    .swiper-container .swatch-overlay-container img,
    .view-highlighted-products .swatch-overlay-container img,
    .view-all-products-new-arrivals .swatch-overlay-container img {
        width: 100% !important;
        height: 140px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* ===========================================
       MOBILE HEADER LAYOUT
       Menu (right) | Icons (center/equal) | Logo (left)
       =========================================== */

    /* Main flex container */
    .region-header .d-flex,
    .region-header>.d-flex,
    .region-header>.d-flex.align-items-center,
    .region-header .d-flex.align-items-center.justify-content-center {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 8px 10px !important;
        gap: 0 !important;
        margin: 0 !important;
        min-height: 48px !important;
    }

    /* All children - reset and vertically center */
    .region-header .d-flex>* {
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* ---- ICON STYLING: Original SVG icons ---- */

    /* Show all SVG icons in header */
    .region-header .d-flex .block svg,
    .region-header .d-flex .block .custom-svg {
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Search icon */
    .region-header #search-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .region-header #search-icon path {
        fill: var(--nm-text-primary, #333) !important;
    }


    /* Wishlist icon */
    .region-header .wishlist-header-link svg {
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
    }

    #search-icon {
  margin-left: 0rem !important;
}


    /* Cart icon */
    .region-header .cart-block--link__expand svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Icon containers: fixed height + center so icons align (same as components.css) */
    .region-header .cart-block--link__expand,
    .region-header .cart-block--summary,
    .region-header .wishlist-header-link,
    .region-header .orders-icon-wrapper,
    .region-header .unprocessed-orders-count-block .orders-count-link,
    .region-header .search-modal-trigger,
    .region-header .menu--account .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .region-header .cart-block--link__expand svg,
    .region-header .wishlist-header-link svg,
    .region-header .orders-bill-icon,
    .region-header .orders-icon-wrapper svg,
    .region-header .search-modal-trigger svg,
    .region-header #search-icon,
    .region-header .menu--account .menu-toggle svg {
        flex-shrink: 0 !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
    }

    .region-header .sf-accordion-toggle a span {
        display: none !important;
    }

    /* ---- MENU: Far RIGHT with margin-left ---- */
    .region-header #block-numart-light-mainnavigation,
    .region-header .block-superfish {
        order: 1 !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: 15px !important;
    }

    /* Hide the desktop menu, show only toggle */
    .region-header #superfish-main {
        display: none !important;
    }

    .region-header .sf-accordion-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .region-header .sf-accordion-toggle a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
    }

    div.sf-accordion-toggle.sf-style-white>a::after {
        right: 5px !important;
    }

    /* ---- LOGO: Far LEFT with margin-right ---- */
    .region-header #block-numart-light-branding,
    .region-header .block-system-branding-block {
        order: 99 !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-right: 15px !important;
    }

    .region-header .site-logo img {
        height: 32px !important;
        width: auto !important;
    }

    .region-header .logo-edit-trigger {
        display: none !important;
    }

    /* ---- ICONS: Distributed equally in center, vertically centered ---- */

    /* Search block: left of order notifications */
    .region-header .block-views-exposed-filter-blockall-products-search-page-1,
    .region-header [id*="exposedformall-products-search"] {
        order: 10 !important;
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }


    /* Notifications (when logged in) */
    .region-header #block-numart-light-unprocessedorderscount,
    .region-header .block-unprocessed-orders-count {
        order: 20 !important;
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }

    /* RTL: put search to the left of order notifications (swap order) */
    [dir="rtl"] .region-header .block-views-exposed-filter-blockall-products-search-page-1,
    [dir="rtl"] .region-header [id*="exposedformall-products-search"] {
        order: 25 !important;
    }
    [dir="rtl"] .region-header #block-numart-light-unprocessedorderscount,
    [dir="rtl"] .region-header .block-unprocessed-orders-count {
        order: 15 !important;
    }

    .region-header #block-numart-light-useraccountmenu,
    .region-header .menu--account {
        margin-bottom: 0rem !important;
    }

    /* User account */
    .region-header #block-numart-light-useraccountmenu,
    .region-header .menu--account {
        order: 30 !important;
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .region-header .menu--account .popup-menu-container,
    .region-header .menu--account .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        height: 100% !important;
    }

    /* Wishlist */
    .region-header #block-numart-light-wishlistheaderblock,
    .region-header .block-wishlist-header-block {
        order: 40 !important;
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        margin-top: 0.4rem !important;
    }

    .region-header .wishlist-header-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Cart */
    .region-header #block-numart-light-shopping-cart,
    .region-header .block-commerce-cart {
        order: 50 !important;
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        margin-top: 0.4rem !important;
    }

    .region-header .cart-block--summary,
    .region-header .cart-block--link__expand {
        align-items: center !important;
        justify-content: center !important;
    }

    /* Badge positioning - cart and wishlist overlay */
    .region-header .cart-block--summary__count,
    .region-header .wishlist-count-badge,
    .region-header .orders-count-badge {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        transform: none !important;
        font-size: 9px !important;
        line-height: 14px !important;
        padding: 0 3px !important;
        border-radius: 50% !important;
        background-color: var(--nm-primary-color) !important;
        color: #fff !important;
        text-align: center !important;
        z-index: 10 !important;
    }


    /* Make cart, wishlist and orders links/wrappers relative for badge positioning */
    .region-header .cart-block--link__expand,
    .region-header .wishlist-header-link,
    .region-header .orders-icon-wrapper {
        position: relative !important;
    }

    /* Cart and wishlist badges stay top-right in RTL (no flip) */

    /* ---- HIDDEN ---- */
    .region-header #block-numart-light-socialmedialinks,
    .region-header .block-social-media-links {
        display: none !important;
    }


    fieldset[data-drupal-selector*="attribute-size"] .form-radios .form-check-label {
        min-height: 20px !important;
    }

    .detail-description {
        font-size: 12px !important;
    }

    .popup-menu {
        top: 3rem !important;
        left: 9rem !important;
    }

    .block-extra-field-blockuserusermember-for {
        width: 80% !important;
    }

    .block-extra-field-blockuserusermember-for * {
        font-size: 12px !important;
    }

    .block-extra-field-blockuserusermember-for .js-form-item {
        direction: rtl !important;
        font-size: 12px !important;
    }

    .block-extra-field-blockuserusermember-for h4 {
        margin-bottom: 0 !important;
    }

    .delete-order-item {
        width: 10px !important;
    }

    .view-commerce-cart-form .promotion-discount-price {
        font-size: 10px !important;
    }


    #edit-coupon-redemption .js-form-item {
        direction: ltr !important;
    }

    .table> :not(caption)>*>* {
        padding: 0rem 0rem !important;

    }

    .view table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        /* horizontal scroll on small screens */
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        /* stop vertical wrapping */
        border-collapse: separate;
        /* enable spacing */
        border-spacing: 12px 0;
        /* horizontal gap between columns */
    }

    .view table.table th {
        text-align: center;
        /* center headers */
        white-space: nowrap;
        /* keep header text in one line */
        padding: 8px;
    }

    .view table.table td {
        padding: 8px;
        /* padding inside cells */
        vertical-align: middle;
        /* center content vertically */
    }

    .layout-region-checkout-main {
        border-left: none !important;
    }

    .views-view-responsive-grid__item img {
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }



    .block-commerce-cart {
        padding-left: 2rem !important;
    }


    /* Highlighted products swiper - ensure slides don't get too narrow */
    /* Override inline styles set by Swiper.js for swiper-all-visible */
    /* Calculate for 3 products: (100vw - 12px padding) / 3 = ~32vw per product */
    .view-highlighted-products .swiper-slide,
    .view-highlighted-products .swiper-container .swiper-slide,
    #swiper-highlighted-products-block-1 .swiper-slide,
    .recent-views-products-swiper .swiper-slide,
    .view-highlighted-products.swiper-all-visible .swiper-slide,
    .swiper-all-visible .swiper-slide.swiper-slide-views,
    #swiper-highlighted-products-block-1.swiper-all-visible .swiper-slide,
    .recent-views-products-swiper.swiper-all-visible .swiper-slide {
        width: calc((100vw - 16px) / 3) !important;
        min-width: calc((100vw - 16px) / 3) !important;
        max-width: calc((100vw - 16px) / 3) !important;
        flex: 0 0 calc((100vw - 16px) / 3) !important;
        flex-shrink: 0 !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
    }

    /* Make article.product take full width of its parent swiper-slide */
    .view-highlighted-products .swiper-slide article.product,
    #swiper-highlighted-products-block-1 .swiper-slide article.product,
    .recent-views-products-swiper .swiper-slide article.product,
    .swiper-all-visible .swiper-slide article.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Align swiper items at the top and prevent vertical stretching */
    .view-highlighted-products .swiper-wrapper,
    #swiper-highlighted-products-block-1 .swiper-wrapper,
    .recent-views-products-swiper .swiper-wrapper,
    #swiper-recent-viewed-products-block-1 .swiper-wrapper {
        align-items: flex-start !important;
        height: auto !important;
        /* Override Swiper's inline height */
    }

    /* Swiper slides should fit their content */
    .view-highlighted-products .swiper-slide,
    #swiper-highlighted-products-block-1 .swiper-slide,
    .recent-views-products-swiper .swiper-slide {
        height: auto !important;
        align-self: flex-start !important;
    }

    /* Hide swiper navigation on mobile - use swipe/drag instead */
    #swiper-highlighted-products-block-1 .swiper-button-prev,
    #swiper-highlighted-products-block-1 .swiper-button-next,
    #swiper-recent-viewed-products-block-1 .swiper-button-prev,
    #swiper-recent-viewed-products-block-1 .swiper-button-next,
    .recent-views-products-swiper .swiper-button-prev,
    .recent-views-products-swiper .swiper-button-next,
    .swiper-recent-viewed-products-block-1-prev,
    .swiper-recent-viewed-products-block-1-next {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Product color swatches - RIGHT aligned for Arabic (RTL) products */
    .product-color-swatches {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        /* flex-start = RIGHT in RTL context */
        flex-wrap: nowrap !important;
        /* Single line, no wrap */
        overflow: hidden !important;
        /* Hide excess swatches */
        gap: 3px !important;
        min-height: 14px !important;
        /* Consistent height even when empty */
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Smaller color swatches on mobile */
    .product-color-swatches .color-swatch {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }

    /* Fade effect for RTL - fade on LEFT side (swatches start from right) */
    html[dir="rtl"] .product-color-swatches:not(.empty-swatches)::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 20px !important;
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
        pointer-events: none !important;
    }

    /* Fade effect for LTR pages */
    html:not([dir="rtl"]) .product-color-swatches:not(.empty-swatches)::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 20px !important;
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
        pointer-events: none !important;
    }

    /* Empty swatches container - maintain consistent height */
    .product-color-swatches.empty-swatches {
        min-height: 20px !important;
        height: 20px !important;
    }

    /* Hide fade effect for empty swatches */
    .product-color-swatches.empty-swatches::after {
        display: none !important;
    }

    /* LTR (English) products - LEFT alignment on mobile */
    article.product.product-ltr .product-color-swatches {
        direction: ltr !important;
        /* Switch to LTR so flex-start = LEFT */
        justify-content: flex-start !important;
    }

    /* Fade effect for LTR products (fade on RIGHT side, swatches start from left) */
    article.product.product-ltr .product-color-swatches:not(.empty-swatches)::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 20px !important;
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
        pointer-events: none !important;
    }

    article.product.product-ltr .product-info {
        direction: ltr !important;
        text-align: left !important;
        margin-right: 0rem !important;
        margin-left: 0rem !important;
    }

    article.product.product-ltr .product-title,
    article.product.product-ltr .product-title a,
    article.product.product-ltr .price {
        text-align: left !important;
        direction: ltr !important;
        unicode-bidi: embed !important;
    }

    /* New arrivals grid - fixed 140px width for all products */
    .view-all-products-new-arrivals .views-view-responsive-grid {
        flex-wrap: nowrap !important;
        gap: 10px !important;
        overflow-x: auto !important;
    }

    .view-all-products-new-arrivals .views-view-responsive-grid__item {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        flex: 0 0 140px !important;
        flex-shrink: 0 !important;
    }

    .view-all-products-new-arrivals .views-view-responsive-grid__item-inner,
    .view-all-products-new-arrivals .views-view-responsive-grid__item article.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }


    /* Swiper handles scrolling via JS - hide overflow to prevent native scrollbar */
    #swiper-highlighted-products-block-1,
    .recent-views-products-swiper,
    .view-highlighted-products .swiper-container {
        overflow: hidden !important;
    }

    /* Disable autoheight behavior on mobile to prevent jumping and extra height */
    .swiper-autoheight .swiper-wrapper,
    #swiper-highlighted-products-block-1.swiper-autoheight .swiper-wrapper {
        gap: 0 !important;
        transition: none !important;
        /* Disable height transition */
        height: auto !important;
        /* Override inline height set by Swiper.js */
    }

    /* Fix highlighted products swiper height - prevent cart modals from affecting height */
    #swiper-highlighted-products-block-1,
    .view-highlighted-products .swiper-container,
    .highlightes-products {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Ensure cart modals don't take up space when hidden */
    .view-highlighted-products .cart-modal,
    .view-highlighted-products .cart-modal-overlay,
    #swiper-highlighted-products-block-1 .cart-modal,
    #swiper-highlighted-products-block-1 .cart-modal-overlay {
        position: fixed !important;
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Show cart modal only when active */
    .view-highlighted-products .cart-modal[aria-hidden="false"],
    #swiper-highlighted-products-block-1 .cart-modal[aria-hidden="false"] {
        display: block !important;
        height: auto !important;
    }

    .view-highlighted-products .cart-modal-overlay:not([hidden]),
    #swiper-highlighted-products-block-1 .cart-modal-overlay:not([hidden]) {
        display: block !important;
        height: 100vh !important;
    }

    /* Product article should have defined height based on content, not stretched */
    .view-highlighted-products .swiper-slide article.product,
    #swiper-highlighted-products-block-1 .swiper-slide article.product {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
    }

    /* Mobile filter overlay styles moved to mobile-filter.css */

    /* ========================================
       WISHLIST VIEW HEADER STYLES (Mobile Only)
       ======================================== */

    .wishlist-mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        background: #fff;
        margin-bottom: 10px;
    }

    .wishlist-mobile-title {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        margin: 0;
    }

    .wishlist-grid-toggle {
        display: flex !important;
        gap: 8px;
    }

    .wishlist-grid-toggle .grid-toggle-btn {
        width: 28px;
        height: 28px;
        padding: 5px;
        border: none;
        border-radius: 4px;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .wishlist-grid-toggle .grid-toggle-btn svg {
        width: 18px;
        height: 18px;
        fill: #ccc;
    }

    .wishlist-grid-toggle .grid-toggle-btn:hover svg {
        fill: #999;
    }

    .wishlist-grid-toggle .grid-toggle-btn.active {
        background: #e8e8e8;
        border-radius: 6px;
    }

    .wishlist-grid-toggle .grid-toggle-btn.active svg {
        fill: #555;
    }

    /* ===========================================
       MOBILE PERFORMANCE OPTIMIZATIONS
       =========================================== */

    /* Use content-visibility for off-screen sections */
    .region-content section:nth-child(n+3),
    .views-row:nth-child(n+7),
    .product-teaser:nth-child(n+5) {
        content-visibility: auto;
        contain-intrinsic-size: auto 300px;
    }

    /* Reduce paint complexity for images */
    img {
        will-change: auto;
        backface-visibility: hidden;
    }

    /* Optimize scrolling performance */
    .swiper-wrapper,
    .views-view-grid,
    .product-grid {
        will-change: transform;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce repaints on hover - disable complex hover effects on mobile */
    .product-teaser:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .product-image:hover img {
        transform: none !important;
    }

    /* Hide non-essential elements on slow connections */
    @media (prefers-reduced-data: reduce) {

        .swiper-pagination,
        .swiper-scrollbar,
        .decorative-bg,
        .background-pattern {
            display: none !important;
        }
    }

    /* Optimize font rendering */
    body {
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
    }

    /* Reduce transition complexity on mobile (not animations - those may be infinite) */
    /* Only apply to hover/interaction transitions, not keyframe animations */
    .product-teaser,
    .product-image,
    .btn,
    .button,
    a {
        transition-duration: 0.15s !important;
    }

    /* Promotions page grid toggle header */
    .view-products-with-promition .view-header.promotions-grid-header-active,
    .view-products-with-promition .promotions-grid-header {
        display: flex;
        align-items: center;
        justify-content: space-between !important;
        padding: 8px 10px;
        margin-bottom: 8px;
    }

    /* Products count stays on the right in RTL */
    .view-products-with-promition .view-header #products-count {
        order: 0;
    }

    /* Grid toggle goes to the left in RTL */
    .view-products-with-promition .promotions-grid-toggle {
        order: 1;
    }

    .view-products-with-promition .promotions-grid-toggle {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .view-products-with-promition .promotions-grid-toggle .grid-toggle-btn {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        transition: all 0.15s ease;
    }

    .view-products-with-promition .promotions-grid-toggle .grid-toggle-btn svg {
        width: 20px;
        height: 20px;
        fill: #bbb;
    }

    .view-products-with-promition .promotions-grid-toggle .grid-toggle-btn:hover svg {
        fill: #888;
    }

    .view-products-with-promition .promotions-grid-toggle .grid-toggle-btn.active {
        background: #f0f0f0;
        border-radius: 8px;
    }

    .view-products-with-promition .promotions-grid-toggle .grid-toggle-btn.active svg {
        fill: #555;
    }

    /* Promotions grid item widths - target all possible class locations */
    /* 1 column */
    .view-products-with-promition.mobile-grid-1 .views-view-responsive-grid__item,
    .view-products-with-promition .view-content.mobile-grid-1 .views-view-responsive-grid__item,
    .view-products-with-promition .mobile-grid-1.views-view-responsive-grid--horizontal .views-view-responsive-grid__item,
    .view-products-with-promition .views-view-responsive-grid.mobile-grid-1 .views-view-responsive-grid__item,
    .view-products-with-promition .views-view-responsive-grid--horizontal.mobile-grid-1 .views-view-responsive-grid__item,
    .mobile-grid-1.views-view-responsive-grid .views-view-responsive-grid__item,
    .mobile-grid-1.views-view-responsive-grid--horizontal .views-view-responsive-grid__item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
    }

    /* 2 columns */
    .view-products-with-promition.mobile-grid-2 .views-view-responsive-grid__item,
    .view-products-with-promition .view-content.mobile-grid-2 .views-view-responsive-grid__item,
    .view-products-with-promition .mobile-grid-2.views-view-responsive-grid--horizontal .views-view-responsive-grid__item,
    .view-products-with-promition .views-view-responsive-grid.mobile-grid-2 .views-view-responsive-grid__item,
    .view-products-with-promition .views-view-responsive-grid--horizontal.mobile-grid-2 .views-view-responsive-grid__item,
    .mobile-grid-2.views-view-responsive-grid .views-view-responsive-grid__item,
    .mobile-grid-2.views-view-responsive-grid--horizontal .views-view-responsive-grid__item {
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        flex: 0 0 calc(50% - 5px) !important;
        min-width: 0 !important;
    }

    /* 3 columns */
    .view-products-with-promition.mobile-grid-3 .views-view-responsive-grid__item,
    .view-products-with-promition .view-content.mobile-grid-3 .views-view-responsive-grid__item,
    .view-products-with-promition .mobile-grid-3.views-view-responsive-grid--horizontal .views-view-responsive-grid__item,
    .view-products-with-promition .views-view-responsive-grid.mobile-grid-3 .views-view-responsive-grid__item,
    .view-products-with-promition .views-view-responsive-grid--horizontal.mobile-grid-3 .views-view-responsive-grid__item,
    .mobile-grid-3.views-view-responsive-grid .views-view-responsive-grid__item,
    .mobile-grid-3.views-view-responsive-grid--horizontal .views-view-responsive-grid__item {
        width: calc(33.333% - 7px) !important;
        max-width: calc(33.333% - 7px) !important;
        flex: 0 0 calc(33.333% - 7px) !important;
        min-width: 0 !important;
    }

    /* Promotions - inner containers must fill their parent */
    .view-products-with-promition .views-view-responsive-grid__item-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    .view-products-with-promition .views-view-responsive-grid__item article,
    .view-products-with-promition .views-view-responsive-grid__item article.product {
        width: 100% !important;
        max-width: 100% !important;
    }

    .view-products-with-promition .views-view-responsive-grid__item .product-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Promotions dynamic height based on columns */
    .view-products-with-promition.mobile-grid-1 .product-image,
    .view-products-with-promition .view-content.mobile-grid-1 .product-image {
        height: 300px !important;
    }

    .view-products-with-promition.mobile-grid-2 .product-image,
    .view-products-with-promition .view-content.mobile-grid-2 .product-image {
        height: 180px !important;
    }

    .view-products-with-promition.mobile-grid-3 .product-image,
    .view-products-with-promition .view-content.mobile-grid-3 .product-image {
        height: 140px !important;
    }

    /* Product teaser and images container - fill parent */
    .view-products-with-promition .product-teaser {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .view-products-with-promition .product-teaser .images {
        width: 100% !important;
        height: 100% !important;
    }

    .view-products-with-promition .product-teaser .images a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .view-products-with-promition .product-teaser .images img,
    .view-products-with-promition .product-image .image-style-product-teaser {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Swatch overlay container */
    .view-products-with-promition .swatch-overlay-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
    }

    .view-products-with-promition .swatch-overlay-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Promotions responsive grid layout - MUST override fit-content */
    .view-products-with-promition,
    .view-products-with-promition .view-content,
    .view-products-with-promition .view-content>*,
    .view-products-with-promition .views-view-responsive-grid,
    .view-products-with-promition .views-view-responsive-grid--horizontal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .view-products-with-promition .views-view-responsive-grid,
    .view-products-with-promition .views-view-responsive-grid--horizontal {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: flex-start !important;
        grid-template-columns: unset !important;
    }

    /* Force flex layout on responsive grid with mobile-grid classes */
    .mobile-grid-1.views-view-responsive-grid,
    .mobile-grid-1.views-view-responsive-grid--horizontal,
    .mobile-grid-2.views-view-responsive-grid,
    .mobile-grid-2.views-view-responsive-grid--horizontal,
    .mobile-grid-3.views-view-responsive-grid,
    .mobile-grid-3.views-view-responsive-grid--horizontal {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile grid column widths */
    .view-content.mobile-grid-1 .views-view-responsive-grid__item {
        width: 100% !important;
    }

    .view-content.mobile-grid-2 .views-view-responsive-grid__item {
        width: calc(50% - 5px) !important;
    }

    .view-content.mobile-grid-3 .views-view-responsive-grid__item {
        width: calc(33.333% - 7px) !important;
    }

    /* Hide new infinite scroll grid until merged */
    .infinite-scroll-new-grid {
        display: none !important;
    }

    /* Hidden state for new infinite scroll items */
    .infinite-scroll-new-item {
        opacity: 0 !important;
    }

    /* Slow fade-in animation for new items */
    .infinite-scroll-animate {
        animation: infiniteScrollFadeIn 0.8s ease-in-out forwards !important;
    }

    @keyframes infiniteScrollFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Back to top and Social hub alignment on mobile */
    #backtotop {
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    #backtotop .btn-inner {
        width: 38px !important;
        height: 38px !important;
    }

    .social-hub-container {
        bottom: 78px !important;
        /* 20px + 48px + 10px gap */
        left: 25px !important;
        /* Aligned with back-to-top inner circle */
        right: auto !important;
    }

    .social-hub-trigger {
        width: 38px !important;
        height: 38px !important;
        margin-left: 0 !important;
    }

    .block-field-blockcommerce-product-variationclothesprice .product-price,
    .block-field-blockcommerce-product-variationclothesprice .price {
        text-align: center;
    }
}