/* General styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Navbar */
.navbar {
    background-color: white;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.burger {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #002641;
    padding: 5px;
}

.logo-link img {
    height: 40px;
    transition: opacity 0.3s;
}

.logo-link img:hover {
    opacity: 0.8;
}

/* Buttons */
.nav-button, .cart-link, .button-blue {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #002641;
    color: white;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
}

.nav-button:hover, .cart-link:hover, .button-blue:hover {
    background-color: #040444;
}

.button-blue.full-width {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 20px auto 0;
    text-align: center;
}


/* Plus/Minus Buttons */
.button-yellow, .button-green {
    background-color: #002641;
    color: white;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.button-yellow:hover, .button-green:hover {
    background-color: #040444;
}

/* Ukloni Button */
.button-red {
    background-color: #e53027;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.button-red:hover {
    background-color: #e53027;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e53027;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
}

/* Sidebar */
.categories-list {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 220px;
    display: none;
    position: absolute;
    top: 70px;
    left: 30px;
    z-index: 1001;
}

.categories-list.show-categories {
    display: block;
}

.categories-list h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #002641;
}

.categories-list ul {
    list-style: none;
    padding: 0;
}

.categories-list li {
    margin-bottom: 12px;
}

.categories-list a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.categories-list a:hover {
    color: #002641;
}

/* Carousel */
.carousel {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.carousel img {
    max-width: 100%;
    height: 300px;
    object-fit: contain;
    border-radius: 8px;
}

.slide {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    display: block;
    opacity: 1;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: #002641;
    font-size: 18px;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.prev:hover, .next:hover {
    background-color: white;
}

.prev { left: 10px; }
.next { right: 10px; }

/* Item Card */
.items-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    padding: 30px;
    flex: 1;
}

.item-card img {
    width: auto;
    max-width: 100%;
    height: 200px;
    object-fit: contain;
    display: block;
    margin: 0 auto 15px;
}

.item-card:hover {
    transform: translateY(-5px);
}

.item-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 15px;
}

.item-card h3 {
    margin: 10px 0;
    color: #002641;
    font-size: 20px;
}

.item-card p {
    color: #555;
    margin-bottom: 10px;
    font-size: 14px;
}

.item-actions, .form-center {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.form-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.input-quantity {
    width: 20px;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Cart & Checkout */
.cart-container, .checkout-container {
    background: white;
    width: 90%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.cart-item, .checkout-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.cart-item img {
    width: auto;
    max-width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.cart-item-details {
    flex: 1;
    text-align: left;
    margin-left: 20px;
}

.cart-item-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.cart-item-price {
    color: #002641;
    font-weight: bold;
}

.cart-item-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.cart-item-actions form button {
    min-width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
}

/* Checkout Form */
.checkout-form {
    max-width: 600px;
    margin: 0 auto;
}

.checkout-form input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 10px;
}

.cart-total, .checkout-total {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    color: #002641;
}

/* Item detail page */
.item-detail-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
}

.item-detail-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.item-detail-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.item-detail-title {
    margin-top: 20px;
    font-size: 28px;
    color: #002641;
}

.item-detail-description {
    margin-top: 15px;
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}

.item-detail-quantity {
    margin-top: 20px;
    font-size: 24px;
    color: #555;
    font-weight: bold;
}

.item-detail-price {
    margin-top: 20px;
    font-size: 24px;
    color: #002641;
    font-weight: bold;
}

/* Footer */
footer {
    background-color: #002641;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 14px;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .main-content, .cart-main, .checkout-main {
        padding: 10px;
        margin: 0;
    }

    .categories-list {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        max-width: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .carousel img {
        height: 200px;
    }

    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .button-blue, .button-red, .button-green, .button-yellow,
    input[type="number"], input[type="text"], input[type="email"], input[type="tel"] {
        width: 100%;
    }
}
.cart-item-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.cart-item-actions form {
    margin: 0;
}

.cart-item-actions button {
    padding: 8px 12px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.cart-item-actions .button-yellow,
.cart-item-actions .button-green {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
}

.cart-item-actions .button-red {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
}
/* Improved mobile cart layout */
@media (max-width: 768px) {
    .cart-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cart-item img {
        margin-bottom: 10px;
    }

    .cart-item-details {
        margin-left: 0;
        text-align: center;
    }

    .cart-item-actions {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 10px;
        gap: 10px;
    }

    .cart-item-actions form button {
        min-width: 36px;
        height: 36px;
        font-size: 18px;
        line-height: 1;
        border-radius: 50%;
        padding: 0;
        margin: 0;
    }

    .button-red {
        padding: 8px 18px;
        border-radius: 20px;
        font-size: 14px;
    }
}
.categories-list {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 220px;
    display: none;
    position: absolute;
    top: 70px;
    left: 30px;
    z-index: 1001;
}

.categories-list.show-categories {
    display: block;
}

.categories-list h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #002641;
}

.categories-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.categories-list li {
    margin-bottom: 12px;
}

.categories-list a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.categories-list a:hover {
    color: #002641;
}

@media (max-width: 768px) {
    .categories-list {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        max-width: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

/* Section wrapper */
.subcategory-cards {
    margin: 30px 0;
}

/* Section heading */
.subcategory-cards h3 {
    font-size: 22px;
    color: #002641;
    margin-bottom: 20px;
}

/* Always 2 columns with responsive wrapping */
.subcategory-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Card style */
.subcategory-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    font-weight: bold;
    color: #002641;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    word-wrap: break-word;
}

/* Hover effect */
.subcategory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background-color: #f7faff;
}

.carousel {
    position: relative;
    background: white;
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.carousel-inner {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 500px; /* fixed height for stable layout */
    margin: 0 auto;
}

/* Slide behavior */
.slide {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    box-sizing: border-box;
}

.slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slide content */
.slide-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slide-content img {
    width: auto;
    max-width: 100%;
    height: 200px;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto 15px;
}

.slide-content h3 {
    font-size: 20px;
    color: #002641;
    margin: 10px 0;
}

.slide-content p {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}

.slide-content .button-blue {
    margin-top: 10px;
    padding: 10px 18px;
}

/* Arrows */
.carousel .prev,
.carousel .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: #002641;
    font-size: 18px; /* #ff6f00uced from 24px */
    padding: 6px;     /* #ff6f00uced from 10px */
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.carousel .prev:hover,
.carousel .next:hover {
    background-color: white; /* or remove this if you want it transparent */
    color: #040444;
    box-shadow: none; /* Remove any glow */
}

.carousel .prev {
    left: 3px;
}

.carousel .next {
    right: 3px;
}

.carousel-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0; /* adds top and bottom spacing */
}


/* Responsive */
@media (max-width: 768px) {
    .carousel-inner {
        max-width: 100%;
        height: auto;
        min-height: 400px;
    }

    .slide-content img {
        height: 180px;
    }

    .slide-content {
        max-width: 90%;
    }
}

.checkout-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* ✅ centers content horizontally */
    background: white;
    width: 90%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    text-align: center; /* ✅ center-align text and headings */
}

.checkout-form {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.checkout-form input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    max-width: 400px;
}

.checkout-total {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #002641;
    text-align: center;
}

.cart-header h1 {
    text-align: center;
    font-size: 28px;
    color: #002641;
    margin: 0;
}

.carousel-header h1 {
    text-align: center;
    font-size: 28px;
    color: #002641;
    margin: 0;
}

.input-quantity {
    width: 38px;       /* #ff6f00uced width */
    padding: 6px;      /* Compact padding */
    font-size: 14px;   /* Slightly smaller font size */
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    background-color: #fafafa;
    margin-right: 8px;  /* Space between input and button */
    transition: border-color 0.3s, background-color 0.3s;
}

.input-quantity:focus {
    border-color: #002641;
    background-color: #f0f8ff;
}

.input-quantity:hover {
    border-color: #040444;
}

.form-inline, .add-to-cart-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;  /* Consistent gap */
    margin-top: 15px;  /* Add space above form */
}

.add-to-cart-form .button-blue {
    padding: 8px 12px;  /* Adjusted for compact layout */
    font-size: 14px;
}

.item-detail-container .add-to-cart-form {
    justify-content: center;
}

.item-actions .add-to-cart-form {
    justify-content: center;
}

@media (max-width: 768px) {
    .input-quantity {
        width: 30px;  /* Further #ff6f00uced for mobile */
        padding: 5px;
        margin-right: 6px;
    }

    .add-to-cart-form .button-blue {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* Search Icon */
.search-icon {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #002641;
    padding: 5px;
    margin-left: 10px;
}

.search-icon:hover {
    color: #040444;
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.search-overlay.active {
    display: flex;
}

.search-form-overlay {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
}

.search-input-overlay {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
}

.search-input-overlay:focus {
    border-color: #002641;
}

.search-button-overlay {
    background-color: #002641;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.search-button-overlay:hover {
    background-color: #040444;
}

.close-search {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
}

.close-search:hover {
    color: #ff4d4d;
}

@media (max-width: 768px) {
    .search-form-overlay {
        width: 95%;
        max-width: 400px;
        flex-direction: column;
        gap: 10px;
    }

    .search-input-overlay {
        width: 100%;
    }

    .search-button-overlay {
        width: 100%;
    }

    .close-search {
        font-size: 28px;
    }
}

/* Search Heading */
.search-heading {
    font-size: 24px;
    color: #002641;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: 15px;
}

/* Items Container */
.items-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    padding: 30px;
}

.item-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    text-align: center;
}

.item-card:hover {
    transform: translateY(-5px);
}

.item-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 15px;
}

.item-card h3 {
    font-size: 18px;
    color: #002641;
    margin-bottom: 10px;
}

.item-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.item-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.input-quantity {
    width: 60px;
    padding: 8px;
    text-align: center;
}

.no-results {
    font-size: 16px;
    color: #555;
    text-align: center;
    margin-top: 30px;
}

/* Mobile - Single Column */
@media (max-width: 768px) {
    .items-container, .items-grid {
        grid-template-columns: 1fr;  /* Single column */
        gap: 20px;
        padding: 15px;
    }

    .item-card {
        width: 100%;
    }

    .item-card img {
        height: 150px;  /* Adjust for smaller screens */
    }

    .item-card h3 {
        font-size: 16px;
    }

    .item-card p {
        font-size: 14px;
    }

    .input-quantity {
        width: 50px;
        padding: 5px;
    }
}

/* Desktop Grid Layout */
.items-container, .items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    padding: 30px;
    justify-content: center;   /* Centers the grid items */
    align-content: center;
}

/* Centering the Item Cards */
.item-card {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 250px;  /* Consistent width */
    box-sizing: border-box;
    transition: transform 0.2s;
}

.item-card:hover {
    transform: translateY(-5px);
}

.item-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 15px;
}

.item-card h3 {
    font-size: 18px;
    color: #002641;
    margin-bottom: 10px;
}

.item-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* Mobile - Single Column Centering */
@media (max-width: 768px) {
    .items-container, .items-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 15px;
        justify-content: center;
    }

    .item-card {
        width: 100%;
        max-width: 300px;  /* Center the item card */
        margin: 0 auto;
    }
}

/* Navbar */
.navbar {
    background-color: white;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.burger {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #002641;
    padding: 5px;
    margin-right: 10px;
}

.logo-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;  /* Center the logo */
}

.logo-link img {
    height: 40px;
    transition: opacity 0.3s;
}

.logo-link img:hover {
    opacity: 0.8;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;  /* Space between search and cart */
}

.search-icon {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #002641;
    padding: 5px;
}

.search-icon:hover {
    color: #040444;
}

.nav-button {
    background-color: #002641;
    color: white;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-button:hover {
    background-color: #040444;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e53027;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
}

@media (max-width: 768px) {
    .navbar {
        padding: 10px 15px;
        flex-wrap: nowrap;  /* Keep in one row */
        justify-content: space-between;  /* Distribute space */
    }

    .burger {
        order: 1;
        margin-right: 15px;
    }

    .logo-container {
        order: 2;
        flex-grow: 1;
        justify-content: start;  /* Align to the left */
        margin-bottom: 0;
    }

    .logo-link {
        display: flex;
        align-items: center;
    }

    .navbar-actions {
        order: 3;
        gap: 10px;
        flex-grow: 0;
    }
    .search-icon {
        margin-left: 0;
    }

    .nav-button {
        padding: 8px 12px;
        font-size: 14px;
    }
}

@media (min-width: 769px) {
    .navbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* Left | Center | Right */
        align-items: center;
    }

    .burger {
        grid-column: 1;
        justify-self: start;
    }

    .logo-container {
        grid-column: 2;
        justify-self: center;
    }

    .navbar-actions {
        grid-column: 3;
        justify-self: end;
    }
}


/* OUT OF STOCK STYLING - GRAY THEME */
.item-card.out-of-stock {
    background-color: #f6f6f6;
    border: 2px solid #ddd;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
}

.item-card.out-of-stock:hover {
    transform: scale(1.02);
    background-color: #e9e9e9;
}

.item-card.out-of-stock img {
    opacity: 0.5;
    filter: grayscale(60%);
}

/* STOCK STATUS */
.stock-status-row {
    margin-bottom: 8px;
}

.stock-status {
    font-weight: bold;
    font-size: 18px;
    margin: 0;
}

.stock-status.in-stock {
    color: #6c757d; /* Green */
}

.stock-status.out-of-stock {
    color: #6c757d; /* Gray for cross and label */
}

.item-stock-status {
    margin: 15px 0 10px;
}

.stock-status {
    font-weight: bold;
    font-size: 18px;
    margin: 0;
}

.stock-status.in-stock {
    color: #6c757d; /* Green */
}

.stock-status.out-of-stock {
    color: #6c757d; /* Gray */
}

.subcategory-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 0 30px;
}

.subcategory-cards h1 {
    font-size: 28px;
    color: #002641;
    margin-bottom: 30px;
    text-align: center;
}


@media (min-width: 1024px) {
    .subcategory-card-grid {
        grid-template-columns: repeat(3, 1fr); /* Use more horizontal space on large screens */
    }
}

.search-icon {
    background-color: #002641;
    border: none;
    width: 40px;           /* Button size */
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s ease;
}

.search-icon:hover {
    background-color: #040444;
}

.search-icon-img {
    width: 13px;           /* Icon size */
    height: 13px;
    display: block;
}

@media (max-width: 768px) {
    .nav-button {
        height: 40px;
        padding: 0 14px; /* balance the text without changing height */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-icon {
        width: 40px;
        height: 40px;
    }
}

.no-linkify {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
}

.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 16px;
    color: #6c757d;
    margin: 0;
}

.stock-icon {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    vertical-align: middle;
    position: relative;
    top: 6px; /* Adjust this value up/down until it aligns perfectly */
}

.item-stock-status {
    display: flex;
    justify-content: center; /* horizontally center */
    margin: 15px 0;
}

.stock-status-detail {
    display: inline-flex;
    align-items: center; /* aligns icon & text vertically */
    gap: 8px;
    font-weight: bold;
    font-size: 18px;
    color: #6c757d;
    margin: 0;
}

.stock-icon-detail {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
    display: inline-block;
}

.in-stock {
    color: #6c757d;
}

.out-of-stock {
    color: #6c757d;
}

.quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.quantity-control .button-yellow,
.quantity-control .button-green {
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    text-align: center;
}

.quantity-control .input-quantity {
    width: 40px; /* smaller */
    padding: 6px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fafafa;
    transition: border-color 0.3s, background-color 0.3s;
}

.quantity-control input.input-quantity {
    margin: 0 4px; /* even spacing between buttons */
}


.add-to-cart-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.add-to-cart-button-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

/* Hide number input arrows for Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.footer-wrapper {
    background-color: #002641;
    color: white;
    font-size: 14px;
    text-align: center;
    padding-top: 20px;
}

.footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.footer-links li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.footer-links li a:hover {
    color: #ffcc00;
}

.footer-bottom {
    padding: 10px 0 20px;
}

/* Ensure the main layout stacks vertically on small screens */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .privacy-policy-container {
        padding: 1em;
        font-size: 1rem;
    }

    .privacy-policy-content {
        line-height: 1.6;
        font-size: 0.95rem;
    }

    h1, h2 {
        font-size: 1.3rem;
        margin-top: 1em;
    }
}

.original-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 8px;
}

.discounted-price {
    color: #e53027;
    font-weight: bold;
}

.sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e53027;
    color: white;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.discount-percentage {
    color: #e53027;
    font-weight: bold;
    margin-left: 6px;
    font-size: 14px;
}

.image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.carousel-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 300px; /* same height as .carousel img */
  overflow: hidden;
}

.carousel-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e53027;
    color: white;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.price-section {
  margin: 10px 0;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.original-price {
  text-decoration: line-through;
  color: #999;
}

.discounted-price {
  color: #e53027;
  font-weight: bold;
}

.discount-percentage {
  color: #e53027;
  font-weight: bold;
  font-size: 16px;
}

.carousel-inner {
  position: relative;
}

.carousel-sale-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #e53027;
  color: white;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: bold;
  border-bottom-left-radius: 8px;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .carousel-sale-badge {
    font-size: 13px;
    padding: 5px 10px;
  }
}

/* Truncate name to 2 lines */
.item-card h3 {
    font-size: 18px;
    color: #002641;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* ✅ 2 lines */
    line-clamp: 2; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Truncate description to 3 lines */
.item-card p:nth-of-type(1) {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* ✅ 3 lines */
    line-clamp: 3; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Auth (Register/Login) Page Container */
.auth-container {
    background: white;
    padding: 30px;
    max-width: 500px;
    margin: 60px auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* Heading style */
.auth-container h2 {
    color: #002641;
    font-size: 28px;
    margin-bottom: 20px;
}

/* Auth form structure */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* Individual field wrapper */
.auth-field {
    width: 100%;
    max-width: 400px;
    text-align: left;
}

/* Label styling */
.auth-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

/* Input styling */
.auth-field input,
.auth-field textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fafafa;
}

/* Error message styling */
.errorlist {
    color: #ff3d00;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

/* Submit button reuse */
.auth-submit {
    margin-top: 10px;
}

/* ---------- AUTH FORMS (REGISTER & LOGIN) ---------- */

.auth-container {
    background-color: #fff;
    max-width: 500px;
    margin: 80px auto;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
}

.auth-container h2 {
    font-size: 28px;
    margin-bottom: 25px;
    color: #002641;
}

.auth-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.auth-field {
    width: 100%;
    max-width: 400px;
    text-align: left;
}

.auth-field label {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
    color: #333;
}

.auth-field input,
.auth-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    background-color: #f9f9f9;
}

.errorlist {
    color: #e53935;
    font-size: 13px;
    list-style: none;
    margin: 4px 0 0;
    padding-left: 0;
}

.auth-submit {
    margin-top: 10px;
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.auth-modal {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

.close-search {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

.auth-form-overlay {
    display: flex;
    flex-direction: column;
}

.auth-field {
    margin-bottom: 1.2rem;
}

.auth-field input {
    width: 100%;
    padding: 0.6rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.auth-title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: #222;
}

.auth-subtext {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.auth-subtext a {
    color: #0078d4;
    font-weight: bold;
    text-decoration: none;
}

.errorlist {
    color: red;
    font-size: 0.9rem;
    margin-top: 0.3rem;
    list-style: none;
    padding-left: 0;
}

.center-text {
    text-align: center;
}

.auth-error {
    background-color: #ffe5e5;
    border: 1px solid #e53935;
    color: #e53935;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95rem;
}

/* Centered modal container */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none; /* or block if shown */
    justify-content: center;
    align-items: center;
}

.auth-modal {
    position: relative;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Close button (X) positioning */
.login-overlay .close-search {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.4rem;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    z-index: 10;
}

/* Clean red error message styling */
.auth-error {
    background-color: #ffeaea;
    border: 1px solid #e53935;
    color: #e53935;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    text-align: center;
}

/* Optional: apply same styling to field-specific errors */
.auth-field .errorlist {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    color: #e53935;
    font-size: 0.9rem;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 999;
    border-radius: 4px;
    padding: 0.5rem 0;
}

.nav-dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a,
.dropdown-content .logout-button {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: #333;
    cursor: pointer;
    font-size: 0.95rem;
}

.dropdown-content a:hover,
.dropdown-content .logout-button:hover {
    background-color: #f2f2f2;
}

.profile-box {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.order-history {
    margin-top: 2rem;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.order-history h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.order-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-item {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 10px;
    background-color: #f9f9f9;
    transition: box-shadow 0.2s ease-in-out;
}

.order-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.order-item div {
    line-height: 1.6;
}

.btn-details {
    display: inline-block;
    margin-top: 10px;
    background-color: #333;
    color: #fff;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.btn-details:hover {
    background-color: #555;
}

.order-item-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #f9f9f9;
    margin-bottom: 1rem;
}

.order-item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.order-item-details p {
    margin: 0.25rem 0;
}

.btn-wrapper {
    margin-top: 2rem;
    text-align: center;
}

.btn-back {
    background-color: #002641;
    color: white;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

.btn-back:hover {
    background-color: #002641;
}

.checkout-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.checkout-buttons button {
    flex: 1 1 200px;
    max-width: 250px;
}

.button-blue:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.nav-dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-section {
    padding: 4px 0;
    border-top: 1px solid #ddd;
}

.dropdown-section-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    padding: 8px 16px;
    background-color: #f9f9f9;
    display: block;
    border-bottom: 1px solid #eee;
}

.dropdown-customer-list {
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-customer-link {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s ease;
}

.dropdown-customer-link:hover {
    background-color: #f0f0f0;
}

.dropdown-empty {
    display: block;
    padding: 8px 16px;
    font-style: italic;
    color: #777;
}

.dropdown-toggle {
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    background: none;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.customer-search {
    width: 90%;
    margin: 10px auto;
    display: block;
    padding: 6px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.dropdown-customer-container {
    padding: 0 8px;
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-customer-link {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #333;
}

.dropdown-customer-link:hover {
    background-color: #f0f0f0;
}

.return-to-salesman {
    font-weight: bold;
    display: block;
    padding: 8px;
    color: #004080;
    text-decoration: none;
}

.return-to-salesman:hover {
    background-color: #f0f0f0;
}

.contract-price-badge {
    background-color: red;
    color: white;
    padding: 6px 12px;
    display: inline-block;
    margin-top: 10px;
    font-size: 20px;
    border-radius: 4px;
    font-weight: bold;
    border: 2px solid black;
}

.image-wrapper {
    position: relative;
}

.sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e53027;
    color: white;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.contract-price-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #e53027;
    color: white;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    z-index: 10;
}

.cart-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.icon-button {
    background-color: white;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 10px;
    position: relative;
}

.icon-img {
    width: 24px;
    height: 24px;
}

.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
}

.cart-wrapper {
    position: relative;
    display: inline-block;
}

:root { --drawer-w: 280px; }

/* Drawer */
.drawer {
  position: fixed;
  top: 0; left: 0;
  height: 100dvh;
  width: var(--drawer-w);
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.15);
  padding: 20px;
  overflow-y: auto;
  z-index: 1002;
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.drawer h2 { margin: 0 0 12px; color: #002641; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { margin-bottom: 12px; }
.drawer a { text-decoration: none; color: #333; font-weight: 600; }
.drawer a:hover { color: #002641; }

/* Backdrop */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1001;
}

/* Page content wrapper (push on desktop) */
.layout {
  transition: transform .3s ease;
  will-change: transform;
}

/* Open state */
.sidebar-open .drawer { transform: translateX(0); }
.sidebar-open .backdrop { opacity: 1; visibility: visible; }
.sidebar-open { overflow: hidden; } /* lock scroll */

/* Desktop: push content right */
@media (min-width: 769px) {
  .sidebar-open .layout {
    transform: translateX(var(--drawer-w));
  }
}

/* Mobile: overlay full width, no push */
@media (max-width: 768px) {
  .drawer { width: 100%; }
  .sidebar-open .layout { transform: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .drawer, .backdrop, .layout { transition: none; }
}

.drawer {
  position: fixed;
  top: 60px; /* height of your navbar */
  left: 0;
  height: calc(100dvh - 60px);
  width: var(--drawer-w, 280px);
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.15);
  padding: 20px;
  overflow-y: auto;
  z-index: 1002;
  transform: translateX(-100%);
  transition: transform .3s ease;
}

.sidebar-open .drawer {
  transform: translateX(0);
}

/* Burger → X transition */
.burger {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.burger.open::before {
  content: "✖";
}

.burger::before {
  content: "☰";
}

/* Backdrop still covers page except navbar */
.backdrop {
  position: fixed;
  top: 60px; /* start below navbar */
  left: 0;
  width: 100%;
  height: calc(100dvh - 60px);
  background: rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1001;
}

.sidebar-open .backdrop {
  opacity: 1;
  visibility: visible;
}

/* Layout toggles */
@media (min-width: 992px) {
  .burger { display: none; }
  .primary-nav { display: flex; align-items: center; gap: 24px; flex: 1; }
}
@media (max-width: 991px) {
  .primary-nav { display: none; } /* hide desktop nav on mobile */
}

/* Desktop nav */
.nav-list { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.nav-link { background: none; border: 0; cursor: pointer; font: inherit; color: #002641; }
.nav-link, .nav-item > a.nav-link { text-decoration: none; font-weight: 600; }

/* Header search (wide, Foerch-like) */
.header-search { display: flex; gap: 8px; flex: 1; max-width: 560px; }
.header-search input { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; }
.header-search button { padding: 10px 14px; border: 0; border-radius: 6px; background: #002641; color: #fff; }

/* Mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #eee;
        box-shadow: 0 8px 24px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translateY(6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 1000; }
.mega.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mega-col h3 { margin: 0 0 8px; color: #002641; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 8px 0; }
.mega-col a { text-decoration: none; color: #333; }
.mega-col a:hover { color: #002641; }

/* Keep navbar on top of mega/drawer */
.site-header .navbar { position: sticky; top: 0; z-index: 1100; background: #fff; }

/* --- shared sizes --- */
:root{
  --nav-h: 64px;          /* real navbar height */
  --container-w: 1200px;  /* match your main content width */
}

/* Header background spans full width, content is centered inside */
.site-header{
  background:#fff;
  border-bottom:1px solid #eee;
}

/* Center the navbar content like your main container */
.site-header .navbar{
  max-width: var(--container-w);
  margin: 0 auto;                   /* centers it */
  padding: 10px 16px;               /* horizontal breathing room */
  display:flex;
  align-items:center;
  gap:16px;
  min-height: var(--nav-h);
}

/* Keep left/center/right zones behaving nicely */
.logo-container{ flex:0 0 auto; }
.primary-nav{ flex:1 1 auto; display:flex; align-items:center; gap:24px; }
.navbar-actions{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }

/* Make the search not dominate width */
.header-search{ flex:1; max-width:560px; margin-left:16px; }

/* Mega menu: keep full-width background, but center inner content to same width */
.mega { left: 0; right: 0; }                 /* full width bar */
.mega-inner{
  max-width: var(--container-w);
  margin: 0 auto;                            /* aligns with navbar */
  padding: 20px 24px;
}

/* Drawer/backdrop start below the navbar height you set */
.drawer{
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
}
.backdrop{
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
}

/* If your page content container is narrower, keep it consistent */
.layout{
  max-width: var(--container-w);
  margin: 0 auto;
  width: 100%;
}

:root{
  --nav-h: 64px;          /* top row height */
  --container-w: 1200px;  /* match your content width */
}

/* Header wrapper */
.site-header{ background:#fff; }

/* Top row */
.site-header .navbar{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 10px 16px;
  display:flex; align-items:center; gap:16px;
  min-height: var(--nav-h);
  border-bottom: 1px solid #e9ecef;   /* thin line under top row */
}

.logo-container{ flex:0 0 auto; }
.primary-nav{ display:none; } /* moved nav to subnav row */
.navbar-actions{ display:flex; align-items:center; gap:12px; }

/* Desktop wide search */
.header-search{ flex:1; max-width: 640px; display:flex; gap:8px; }
.header-search input{
  flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:6px;
}
.header-search button{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:0; border-radius:6px;
  background:#0b2b43; color:#fff; font-weight:600;
}
.icon-img-inline{ width:16px; height:16px; }

/* Subnav row with hairline (like the screenshot) */
.subnav{
  border-bottom: 1px solid #e9ecef;
}
.subnav-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 8px 16px;
}
.nav-list{ list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.nav-link{ background:none; border:0; cursor:pointer; font:inherit; color:#0b2b43; font-weight:600; }
.nav-item > a.nav-link{ text-decoration:none; }

/* Mega menu aligns to container */
.mega{ position:absolute; left:0; right:0; top: calc(var(--nav-h) + 41px); /* below subnav */
       background:#fff; border-top:1px solid #eee;
       box-shadow:0 8px 24px rgba(0,0,0,.08);
       opacity:0; visibility:hidden; transform:translateY(6px);
       transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:1000; }
.mega.open{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width: var(--container-w); margin:0 auto; padding:20px 24px;
             display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.mega-col h3{ margin:0 0 8px; color:#0b2b43; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.mega-col ul{ list-style:none; margin:0; padding:0; }
.mega-col li{ margin:8px 0; }
.mega-col a{ color:#333; text-decoration:none; }
.mega-col a:hover{ color:#0b2b43; }

/* Mobile search icon visible, desktop hidden (because we show the big search) */
.mobile-search{ display:none; }
@media (max-width: 991px){
  .header-search{ display:none; }    /* hide big search on mobile */
  .mobile-search{ display:inline-flex; }
  .subnav{ display:none; }           /* hide the desktop subnav on mobile */
}

/* Keep drawer/backdrop starting below top row (since subnav is hidden on mobile) */
.drawer{
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
}
.backdrop{
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
}

/* (Keep your existing drawer/burger styles from earlier) */

.nav-list .has-mega { position: relative; }

.cat-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1200;
}

.cat-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cat-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-dropdown-list li { margin: 6px 0; }
.cat-dropdown-list a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: #0b2b43;
  font-weight: 600;
}
.cat-dropdown-list a:hover {
  background: #f3f6f9;
}

/* Make overlay cover everything, including navbar */
.search-overlay,
.login-overlay {
    position: fixed;
    top: 0; /* start from top of viewport */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* dim background */
    z-index: 2000; /* above navbar */
    display: none;
    justify-content: center;
    align-items: center;
}

/* When active */
.search-overlay.active {
    display: flex;
}
.login-overlay[style*="flex"] {
    display: flex;
}

/* Mobile first: burger visible */
.burger {
  display: inline-block;
}

/* Desktop: hide burger */
@media (min-width: 992px) {
  .burger {
    display: none;
  }
}

.desktop-only {
  display: inline-block;
  margin-left: 6px;
}

@media (max-width: 991px) {
  .desktop-only {
    display: none;
  }
}

/* Profile & cart icons in header */
.header-actions .action__icon {
    height: 22px; /* or match foerch.de's size */
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.header-actions .action__label {
    font-size: 14px;
    margin-left: 6px;
    vertical-align: middle;
}
.header-actions .action {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Header actions: layout & alignment --- */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;              /* space between profile and cart */
}

/* Buttons/links inside the actions bar */
.navbar-actions .icon-button,
.navbar-actions .cart-wrapper,
.navbar-actions .nav-dropdown > .icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;               /* space between icon and label */
  padding: 6px 8px;
  background: transparent;
  border: 0;              /* ensure no button border */
  line-height: 1;
  cursor: pointer;
}

/* Icon size (prevents huge PNGs) */
.navbar-actions .icon-img {
  height: 22px;           /* tweak to taste: 20–24px works well */
  width: auto;
  display: block;
}

/* Label style (desktop only) */
.navbar-actions .nav-text {
  font-size: 14px;
  font-weight: 600;
  color: #0b2b43;         /* same as your header text color */
}

/* Make cart link NOT look like a link */
.navbar-actions a.cart-wrapper,
.navbar-actions a.cart-wrapper:link,
.navbar-actions a.cart-wrapper:visited,
.navbar-actions a.cart-wrapper:hover,
.navbar-actions a.cart-wrapper:active {
  color: #0b2b43;         /* kill purple visited */
  text-decoration: none;  /* kill underline */
}

/* Also ensure ANY link in actions bar doesn’t look like a link unless you want it to */
.navbar-actions a,
.navbar-actions a:link,
.navbar-actions a:visited {
  color: #0b2b43;
  text-decoration: none;
}
.navbar-actions a:hover { text-decoration: none; }

/* Optional: badge positioning if you use a badge */
.cart-wrapper {
  position: relative;
}
.cart-wrapper .cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

/* Hide labels on mobile, keep only icons */
@media (max-width: 991px) {
  .desktop-only,
  .navbar-actions .nav-text { display: none; }
  .navbar-actions { gap: 12px; }
}

/* Hide mobile search icon on desktop */
@media (min-width: 992px) {
  .navbar-actions .mobile-search {
    display: none !important;
  }
}

@media (max-width: 768px){
  .profile-card{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
  }
}

/* ========== Vars (tweak if you like) ========== */
:root{
  --nav-text: #0b2b43;
  --muted: #6a7a86;
  --border: #e6eaee;
  --hover: #f6f8fa;
  --card-bg: #fff;
  --shadow: 0 8px 24px rgba(16,24,40,.12);
  --radius-sm: 10px;
  --radius-lg: 14px;
}

/* ========== Header actions (profile + cart) ========== */
.navbar-actions{
  display:flex; align-items:center; gap:22px;
}
.navbar-actions .icon-button,
.navbar-actions .cart-wrapper{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 8px; background:transparent; border:0; cursor:pointer;
  text-decoration:none; color:var(--nav-text);
}
.navbar-actions .icon-img{ height:22px; width:auto; display:block; }
.navbar-actions .nav-text{ font-size:14px; font-weight:600; color:var(--nav-text); }

/* cart badge */
.cart-wrapper{ position:relative; }
.cart-wrapper .cart-badge{
  position:absolute; top:-6px; right:-8px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  font-size:11px; line-height:18px; text-align:center;
  background:#e53027; color:#fff;
}

/* kill linky look in actions */
.navbar-actions a,
.navbar-actions a:link,
.navbar-actions a:visited{ color:var(--nav-text); text-decoration:none; }
.navbar-actions a:hover{ text-decoration:none; }

/* hide mobile search on desktop */
@media (min-width: 992px){
  .navbar-actions .mobile-search{ display:none !important; }
}

/* hide labels on small screens */
@media (max-width: 991px){
  .navbar-actions{ gap:12px; }
  .navbar-actions .nav-text{ display:none; }
}

/* ========== Profile dropdown: base ========== */
.nav-dropdown{ position:relative; }

/* the panel */
.profile-card{
  position:absolute; right:0; top:calc(100% + 8px);
  width:340px; max-width:calc(100vw - 24px);
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:12px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:1100;
}

/* show when your JS adds .open on parent or removes aria-hidden */
#profileMenu[aria-hidden="false"],
.nav-dropdown.open .profile-card{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* header inside card */
.profile-card__header{
  display:flex; align-items:center; gap:12px;
  padding:8px 8px 12px; border-bottom:1px solid var(--border);
}
.profile-card__avatar{
  width:40px; height:40px; border-radius:50%;
  background:#eef3f7; display:grid; place-items:center; overflow:hidden;
}
.profile-card__avatar img{ width:22px; height:22px; opacity:.9; }
.profile-card__meta{ min-width:0; }
.profile-card__name{
  font-weight:700; color:var(--nav-text);
  font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-card__role{ font-size:12px; color:var(--muted); }

/* link grid */
.profile-card__links{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  padding:10px 4px;
}
.profile-card__link{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:var(--radius-sm);
  color:var(--nav-text); text-decoration:none;
}
.profile-card__link:hover{ background:var(--hover); }
.profile-card__icon img{ width:18px; height:18px; display:block; opacity:.9; }

/* actions (logout) */
.profile-card__actions{ padding:8px 4px 4px; }
.button-ghost{
  width:100%; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:#fff; color:var(--nav-text);
  font-weight:600; cursor:pointer;
}
.button-ghost:hover{ background:var(--hover); }

/* ========== Mobile treatment (sheet) ========== */
@media (max-width: 768px){
  .profile-card{
    position:fixed; inset:auto 0 0 0;
    width:100%; max-width:none; border-radius:16px 16px 0 0;
    border:0; border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(16,24,40,.14);
    padding:14px 12px 12px;
  }
  .profile-card__links{ grid-template-columns:1fr; }
}

/* optional little caret above the card on desktop */
@media (min-width: 769px){
  .profile-card::before{
    content:""; position:absolute; top:-8px; right:20px;
    width:14px; height:14px; background:var(--card-bg);
    border-left:1px solid var(--border); border-top:1px solid var(--border);
    transform:rotate(45deg);
  }
}

/* ========== Buttons (if you need fallbacks) ========== */
.button-blue{
  background:#0b2b43; color:#fff; border:0;
  padding:10px 14px; border-radius:8px; cursor:pointer;
}
.button-blue:hover{ filter:brightness(.95); }

/* ========== Dropdown positioning guard ========== */
/* prevent dropdown being cut off by overflow:hidden on ancestors */
.site-header, .navbar, .nav-dropdown{ overflow:visible; }

/* ===== Cart looks like a normal label, never purple link ===== */
.navbar-actions .cart-wrapper,
.navbar-actions .cart-wrapper:link,
.navbar-actions .cart-wrapper:visited,
.navbar-actions .cart-wrapper:hover,
.navbar-actions .cart-wrapper:active{
  color:#0b2b43 !important;
  text-decoration:none !important;
}

/* Align icon + text nicely */
.navbar-actions .cart-wrapper,
.navbar-actions .icon-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Icon sizing safety */
.navbar-actions .icon-img{
  height:22px; width:auto; display:block;
}

/* ===== Profile dropdown: keep as a floating card also on mobile ===== */
.profile-card{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:340px;
  max-width:min(92vw, 360px);
  background:#fff;
  border:1px solid #e6eaee;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(16,24,40,.12);
  padding:12px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:1100;
}

/* show state (your JS toggles aria-hidden) */
#profileMenu[aria-hidden="false"],
.nav-dropdown.open .profile-card{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Small arrow caret (desktop & mobile now) */
.profile-card::before{
  content:""; position:absolute; top:-8px; right:20px;
  width:14px; height:14px; background:#fff;
  border-left:1px solid #e6eaee; border-top:1px solid #e6eaee;
  transform:rotate(45deg);
}

/* Header */
.profile-card__header{
  display:flex; align-items:center; gap:12px;
  padding:8px 8px 12px; border-bottom:1px solid #e6eaee;
}
.profile-card__avatar{
  width:40px; height:40px; border-radius:50%;
  background:#eef3f7; display:grid; place-items:center; overflow:hidden;
}
.profile-card__avatar img{ width:22px; height:22px; opacity:.9; }
.profile-card__name{ font-weight:700; color:#0b2b43; font-size:14px; }
.profile-card__role{ font-size:12px; color:#6a7a86; }

.profile-card__section-title{
  display:block; margin:10px 4px 6px; font-size:13px; color:#6a7a86;
}

/* Kupci search + list */
.profile-card .customer-search{
  width:100%; padding:8px 10px; margin-bottom:8px;
  border:1px solid #e6eaee; border-radius:10px; outline:0;
}
.customer-list{ max-height:170px; overflow:auto; }
.dropdown-customer-link{
  display:block; padding:8px 10px; border-radius:10px;
  color:#0b2b43; text-decoration:none;
}
.dropdown-customer-link:hover{ background:#f6f8fa; }

.dropdown-empty{ color:#6a7a86; font-size:13px; display:block; padding:8px 10px; }

/* pill link for “Nazad na komercijalistu” */
.profile-card__pill{
  display:inline-block; padding:8px 10px; border-radius:999px;
  background:#f6f8fa; color:#0b2b43; text-decoration:none;
}

/* Actions */
.profile-card__actions{ display:grid; gap:8px; padding-top:8px; }
.full-width{ width:100%; }

/* Buttons */
.button-blue{
  background:#0b2b43; color:#fff; border:0;
  padding:10px 14px; border-radius:10px; cursor:pointer;
}
.button-blue:hover{ filter:brightness(.95); }
.button-ghost{
  background:#fff; color:#0b2b43; border:1px solid #e6eaee;
  padding:10px 14px; border-radius:10px; cursor:pointer;
}
.button-ghost:hover{ background:#f6f8fa; }

/* Keep labels hidden on small screens (icons only) */
@media (max-width: 991px){
  .navbar-actions .nav-text{ display:none; }
}

/* --- PROFILE DROPDOWN: tidy desktop --- */
.profile-card{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 360px;
  max-width: min(92vw, 380px);
  background: #fff;
  border: 1px solid #e6eaee;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16,24,40,.12);
  padding: 12px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 1100;
}
#profileMenu[aria-hidden="false"],
.nav-dropdown.open .profile-card{ opacity:1; visibility:visible; transform:translateY(0); }

/* caret on desktop */
@media (min-width: 769px){
  .profile-card::before{
    content:""; position:absolute; top:-8px; right:20px;
    width:14px; height:14px; background:#fff;
    border-left:1px solid #e6eaee; border-top:1px solid #e6eaee;
    transform:rotate(45deg);
  }
}

/* keep the search input INSIDE the card */
.profile-card .customer-search{
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 8px 10px;
  margin: 8px 0;
  border: 1px solid #e6eaee;
  border-radius: 10px;
  outline: 0;
}
.customer-list{
  max-height: 190px;        /* desktop: list scrolls inside card */
  overflow: auto;
}

/* “Idi na profil” must be white, always (even as <a>) */
.profile-card__actions .button-blue,
.profile-card__actions .button-blue:link,
.profile-card__actions .button-blue:visited,
.profile-card__actions .button-blue:hover,
.profile-card__actions .button-blue:active{
  color: #fff !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
  text-align: center;
}

/* --- MOBILE: turn into a bottom sheet that fits the screen --- */
:root{ --navbar-h: 64px; } /* adjust if your top bar is taller on mobile */

@media (max-width: 768px){
  .profile-card{
    position: fixed;
    left: 8px; right: 8px;
    top: calc(var(--navbar-h) + 8px);
    bottom: 12px;
    width: auto; max-width: none;
    border-radius: 16px;
    border: 1px solid #e6eaee;
    box-shadow: 0 12px 28px rgba(16,24,40,.18);
    padding: 12px;
    overflow: auto;          /* whole sheet scrolls */
    z-index: 2000;           /* above header */
  }
  .profile-card::before{ display: none; }  /* hide caret on mobile */

  /* let the list grow; sheet itself scrolls */
  .customer-list{ max-height: none; }

  /* icons-only header already handled; nothing else to change */
}

/* Customers: one per line with comfortable spacing */
.profile-card .customer-list{
  display: flex;
  flex-direction: column;
  gap: 10px;             /* space between customers */
  max-height: 60vh;      /* desktop: keep card shorter */
  overflow: auto;
}
.profile-card .dropdown-customer-link{
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
}
.profile-card .dropdown-customer-link:hover{
  background: #f6f8fa;
}

/* Make the whole card a bit shorter overall */
.profile-card{
  max-height: 70vh;      /* desktop cap */
  overflow: auto;
}

/* Mobile: slightly shorter sheet */
@media (max-width: 768px){
  .profile-card{
    max-height: 72vh;    /* shorter than full screen */
    top: calc(var(--navbar-h, 64px) + 8px);
    bottom: auto;        /* let max-height control the size */
  }
  .profile-card .customer-list{
    max-height: none;    /* sheet scrolls, not the list */
  }
}

/* === Profile dropdown placement === */

/* Desktop: place panel right under the Moj profil button */
@media (min-width: 992px) {
  #profileHost {                 /* wrapper around the button + menu */
    position: relative;
  }

  #profileMenu {
    position: absolute;
    top: calc(100% + 8px);       /* small gap under the button */
    right: 0;                    /* align panel's right edge with button's right edge */
    left: auto;                  /* cancel any left from earlier */
    transform: none;             /* no centering shift */
    width: 340px;                /* your desktop width */
    max-width: calc(100vw - 24px);
  }

  /* little caret sits under the button on the right */
  #profileMenu::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 20px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid #e6eaee;
    border-top: 1px solid #e6eaee;
    transform: rotate(45deg);
  }
}

/* Mobile: keep the full-width bottom sheet */
@media (max-width: 991px) {
  #profileMenu {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(var(--navbar-h, 60px) + 8px);
    bottom: 12px;
    max-width: none;
    border-radius: 12px;
    overflow: auto;
    transform: none;             /* make sure no translate is applied */
    box-shadow: 0 12px 28px rgba(16,24,40,.18);
    z-index: 2000;
  }
  #profileMenu::before { display: none; }
}

/* ==== Order Stats Table ==== */
.table-wrapper {
  overflow-x: auto;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.stats-table th,
.stats-table td {
  border: 1px solid #ddd;
  padding: 8px;
  vertical-align: middle;
}

.stats-table th {
  background: #f7f7f7;
  text-align: left;
}

.thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.img-cell {
  width: 80px;
}

.row-missing {
  background: #fff7f7;
}

.muted {
  color: #888;
}

/* ==== Responsive (Mobile) ==== */
@media (max-width: 768px) {
  .stats-table,
  .stats-table thead,
  .stats-table tbody,
  .stats-table th,
  .stats-table td,
  .stats-table tr {
    display: block;
    width: 100%;
  }

  .stats-table thead {
    display: none; /* hide header on mobile */
  }

  .stats-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    padding: 8px;
    background: #fff;
  }

  .stats-table td {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
  }

  .stats-table td::before {
    content: attr(data-label);
    font-weight: bold;
    flex: 0 0 50%;
    text-align: left;
  }

  .img-cell {
    text-align: center;
  }

  .thumb {
    width: 48px;
    height: 48px;
  }
}

/* Override for contract badge inside order stats table */
.stats-table .contract-price-badge {
  position: static;   /* remove absolute positioning */
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85em;
  vertical-align: middle;
}

.stats-button-container {
    margin: 16px 0;
    text-align: center;
}

@media (max-width: 768px) {
    .stats-button-container .button-blue {
        display: inline-block;
        width: 90%;            /* take up most of the screen */
        max-width: 300px;      /* but not too huge */
        text-align: center;
        padding: 12px 0;       /* bigger tap target */
        font-size: 1.1em;
    }
}

@media (max-width: 768px) {
  .stats-table td {
    border: none;
    display: block;         /* stack label and content vertically */
    padding: 6px 0;
    word-break: break-word; /* allow breaking long codes/names */
  }

  .stats-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;         /* label on its own line */
    margin-bottom: 2px;
    text-align: left;
  }

  .stats-table .add-to-cart-form {
    flex-direction: column; /* stack quantity control and button vertically */
    align-items: flex-start;
    gap: 6px;
  }

  .stats-table .quantity-control {
    width: 100%;
    max-width: 200px;       /* prevent it from getting too wide */
  }
}

@media (max-width: 768px) {
  /* Center the actions section */
  .stats-table td[data-label="Akcije"] {
    text-align: center;
  }

  /* Center the add-to-cart form content */
  .stats-table .add-to-cart-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* center horizontally */
    gap: 8px;
  }

  /* Center quantity control */
  .stats-table .quantity-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  /* Make the button match desktop styling */
  .stats-table .button-blue {
    width: auto;             /* no full width */
    min-width: 140px;
    padding: 8px 16px;
    font-size: 1em;
  }
}

.infinite-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff; /* loader color */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== HERO ===== */
.hero-banner { position: relative; border-radius: 12px; overflow: hidden; margin: 18px auto 8px; }
.hero-banner .hero-slide{
  min-height: 320px;
  display: none;
  align-items: center;
  background:
    linear-gradient( to right, rgba(0,38,65,.75), rgba(0,38,65,.25) ),
    var(--bg, radial-gradient(1200px 600px at 30% 50%, #0b2b43 0%, #0b2b43 20%, #082034 70%));
  background-size: cover;
  background-position: center;
  padding: 40px 28px;
  color: #fff;
}
.hero-banner .hero-slide.active{ display:flex; }
.hero-content { max-width: 560px; }
.hero-content h1 { margin:0 0 8px; font-size: 30px; line-height:1.15; }
.hero-content p { margin:0 0 16px; font-size: 16px; opacity:.95; }
.hero-banner .hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; border:0; border-radius:50%; width:40px; height:40px; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.hero-banner .prev{ left:12px; }
.hero-banner .next{ right:12px; }

/* ===== CATEGORY RIBBON ===== */
.cat-ribbon{ position:relative; margin: 18px auto 0; }
.section-title{ font-size:22px; color:#002641; margin: 0 0 10px; }
.ribbon-scroller{ overflow:hidden; }
.ribbon-list{ display:flex; gap:10px; padding: 4px 48px; margin:0; list-style:none; }
.ribbon-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.15); z-index:1;
}
.ribbon-prev{ left:4px; } .ribbon-next{ right:4px; }
.chip{
  display:inline-block; padding:10px 14px; border-radius:999px; background:#f3f6f9;
  color:#0b2b43; text-decoration:none; font-weight:600; white-space:nowrap; border:1px solid #e6eaee;
}
.chip:hover{ background:#eef3f7; }

/* ===== MULTI-ITEM SLIDER ===== */
.featured-section{ margin: 18px auto 30px; }
.featured-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.slider-controls button{
  background:#fff; border:1px solid #e6eaee; width:36px; height:36px; border-radius:50%; cursor:pointer;
}
.product-slider{ position:relative; overflow:hidden; }
.slider-track{
  display:flex; gap:16px; will-change: transform;
  transition: transform .35s ease;
}
.product-card{ flex: 0 0 calc((100% - 3*16px) / 4); }       /* 4 per view desktop */
@media (max-width: 1100px){ .product-card{ flex-basis: calc((100% - 16px) / 2); } } /* 2 per view tablet */
@media (max-width: 640px){ .product-card{ flex-basis: 100%; } }                      /* 1 per view mobile */

/* Trust bar */
.trust-bar{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px;
  background:#fff; border:1px solid #e6eaee; border-radius:12px; padding:14px; margin: 8px 0 24px;
}
.trust-item{ text-align:center; color:#0b2b43; }
.trust-item strong{ display:block; }

/* Quantity buttons inside product card */
.product-card .quantity-control .button-yellow,
.product-card .quantity-control .button-green{
  width:32px; height:32px; font-size:18px;
}
.product-card .input-quantity{ width:40px; padding:6px; }

/* Make long names/descriptions neat in the slider cards */
.product-card h3{
  display:-webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow:hidden; text-overflow:ellipsis; min-height: 46px;
}
.product-card p{
  display:-webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow:hidden; text-overflow:ellipsis; min-height: 54px;
}

/* ---------- HERO arrows: centered, subtle ---------- */
.hero-banner { position: relative; }
.hero-banner .hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0b2b43;
  border: 1px solid #e6eaee;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display: grid; place-items: center;
}
.hero-banner .hero-nav:hover{ background:#fff; }
.hero-banner .prev{ left: 14px; }
.hero-banner .next{ right: 14px; }

@media (max-width: 768px){
  .hero-banner .hero-nav{ width: 30px; height: 30px; }
  .hero-banner .prev{ left: 10px; }
  .hero-banner .next{ right: 10px; }
}

/* ---------- CATEGORY RIBBON — inline arrows, centered, no overlap ---------- */
.cat-ribbon{ margin: 18px auto 0; }
.section-title{ font-size:22px; color:#002641; margin:0 0 10px; }

/* Row = [prev] [chips scroller] [next] */
.cat-ribbon .ribbon-row{
  display: grid;
  grid-template-columns: auto 1fr auto;   /* ◀ chips ▶ */
  align-items: center;
  column-gap: 8px;
}

/* Buttons live OUTSIDE the scroller (no overlay) */
.cat-ribbon .ribbon-btn{
  position: static;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff;
  color: #0b2b43;
  border: 1px solid #e6eaee;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  display: grid; place-items: center;
  line-height: 1; font-size: 18px;
  cursor: pointer;
}

/* Chips scroll inside this container */
.cat-ribbon .ribbon-scroller{
  overflow: hidden;
}

/* Chip list */
.cat-ribbon .ribbon-list{
  display: flex;
  gap: 10px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}

/* Chips */
.cat-ribbon .chip{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f3f6f9;
  color: #0b2b43;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #e6eaee;
}
.cat-ribbon .chip:hover{ background:#eef3f7; }

@media (max-width:768px){
  .cat-ribbon .ribbon-btn{
    width: 28px; height: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
  }
}

.hero-slide {
  display: block;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: inherit;
}

/* HERO: arrows to the sides */
.hero-banner { position: relative; border-radius: 12px; overflow: hidden; }
.hero-slide {
  display: block;                       /* works for <a> or <div> */
  min-height: 320px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  color: inherit;
  text-decoration: none;
}
.hero-slide:not(.active){ display: none; } /* simple switcher */

/* side arrows */
.hero-banner .hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0b2b43;
  border: 1px solid #e6eaee;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 2;
}
.hero-banner .hero-nav:hover{ background:#fff; }
.hero-banner .prev{ left: 12px; }
.hero-banner .next{ right: 12px; }

@media (max-width: 768px){
  .hero-banner .hero-nav{ width: 30px; height: 30px; }
  .hero-banner .prev{ left: 8px; }
  .hero-banner .next{ right: 8px; }
}

/* pagination dots */
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.1);
  cursor: pointer;
}
.hero-dot.active{
  background: #fff;
  transform: scale(1.15);
}

/* keep hero text readable on photos (optional soft overlay via gradient) */
.hero-slide::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,38,65,.60), rgba(0,38,65,.20));
  pointer-events: none;
}
.hero-content{
  position: relative; /* above overlay */
  max-width: 560px;
  padding: 40px 28px;
  color: #fff;
}

/* Shell can show overflow so arrows may sit outside */
.hero-banner{
  position: relative;
  overflow: visible;              /* important */
  margin: 18px auto 8px;
}

/* Clip the slide content so rounded corners are preserved */
.hero-inner{
  position: relative;
  border-radius: 12px;
  overflow: hidden;               /* the image stays clipped */
}

/* Slides (works for <a> or <div>) */
.hero-slide{
  display: block;
  min-height: 320px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.hero-slide:not(.active){ display: none; }

/* soft readability overlay */
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,38,65,.60), rgba(0,38,65,.20));
  pointer-events:none;
}
.hero-content{
  position: relative;
  max-width: 560px;
  padding: 40px 28px;
  color: #fff;
}

/* Arrows OUTSIDE the clipped area */
.hero-banner .hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0b2b43;
  border: 1px solid #e6eaee;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
}
.hero-banner .hero-nav:hover{ background:#fff; }

/* push a bit OUTSIDE the rounded box */
.hero-banner .prev{ left: -22px; }
.hero-banner .next{ right: -22px; }

/* On smaller screens keep arrows inside so they don't get cut off */
@media (max-width: 768px){
  .hero-banner .hero-nav{ width: 30px; height: 30px; }
  .hero-banner .prev{ left: 10px; }
  .hero-banner .next{ right: 10px; }
}

/* Dots stay centered under the image */
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 2;
}
.hero-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.1);
  cursor: pointer;
}
.hero-dot.active{ background:#fff; transform: scale(1.15); }

/* Remove white background and circle */
.hero-banner .hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;              /* remove white */
  border: none;                  /* remove border */
  box-shadow: none;               /* no shadow */
  color: white;                   /* white arrows */
  font-size: 32px;                 /* make them bigger */
  cursor: pointer;
  z-index: 3;
  padding: 0;                      /* no padding */
  line-height: 1;
}

/* Place arrows at the extreme edges */
.hero-banner .prev {
  left: -40px; /* move fully outside carousel */
}

.hero-banner .next {
  right: -40px; /* move fully outside carousel */
}

/* On mobile, keep them inside */
@media (max-width: 768px) {
  .hero-banner .prev {
    left: 10px;
  }
  .hero-banner .next {
    right: 10px;
  }
}

.hero-banner .hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  box-shadow: none;
  color: white;
  font-size: 42px;              /* bigger arrows */
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* dark shadow for contrast */
  cursor: pointer;
  z-index: 3;
  padding: 0;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.hero-banner .hero-nav:hover {
  transform: translateY(-50%) scale(1.2); /* enlarge on hover */
  color: #ffcc00; /* optional highlight on hover */
}

/* Positioning */
.hero-banner .prev {
  left: -40px;
}

.hero-banner .next {
  right: -40px;
}

/* On mobile, keep them inside */
@media (max-width: 768px) {
  .hero-banner .prev {
    left: 10px;
  }
  .hero-banner .next {
    right: 10px;
  }
}

/* =========================
   MOBILE-FIRST HOMEPAGE FIX
   ========================= */

/* ---------- HERO ---------- */
.hero-banner { position: relative; margin: 12px 0 8px; }
.hero-inner { position: relative; border-radius: 12px; overflow: hidden; }

/* slide = link OR div, same styling */
.hero-slide{
  display:flex; align-items:center;
  min-height: clamp(220px, 38vw, 420px);
  /* gradient overlay + bg image from inline --bg */
  background:
    linear-gradient(to right, rgba(0,38,65,.75), rgba(0,38,65,.25)),
    var(--bg, radial-gradient(1200px 600px at 30% 50%, #0b2b43 0%, #082034 70%));
  background-size: cover; background-position: center;
  text-decoration: none; color: #fff;
}

/* readable, fluid text sizes */
.hero-content{ padding: clamp(14px, 3.8vw, 28px); max-width: 560px; }
.hero-content h1{ margin: 0 0 6px; font-size: clamp(20px, 5.4vw, 32px); line-height: 1.15; }
.hero-content p { margin: 0 0 12px; font-size: clamp(13px, 3.8vw, 16px); opacity:.95; }

/* arrows: outside on desktop, inside on mobile, no circles */
.hero-banner .hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:0; box-shadow:none; padding:0; line-height:1;
  color:#fff; font-weight:700; font-size: clamp(28px, 6vw, 44px);
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  cursor:pointer; z-index:3; transition: transform .2s ease, color .2s ease;
}
.hero-banner .hero-nav:hover{ transform:translateY(-50%) scale(1.15); color:#ffcc00; }
.hero-banner .prev{ left:-22px; }
.hero-banner .next{ right:-22px; }

/* dots: bigger hit-area */
.hero-dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.hero-dots button{
  width:8px; height:8px; border-radius:999px; border:0; background:rgba(255,255,255,.55);
}
.hero-dots button[aria-current="true"]{ background:#fff; width:22px; border-radius:10px; }

/* phones: keep arrows inside the clip so they never overflow */
@media (max-width: 768px){
  .hero-banner .prev{ left:10px; }
  .hero-banner .next{ right:10px; }
}

/* ---------- CATEGORY RIBBON ---------- */
.cat-ribbon{ margin: 16px 0 6px; }
.cat-ribbon .section-title{ font-size: clamp(18px, 5vw, 22px); margin:0 0 8px; }

/* ◀ chips ▶ in one row */
.cat-ribbon .ribbon-row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; column-gap:6px;
}
.cat-ribbon .ribbon-btn{
  position:static; width:32px; height:32px; border-radius:50%;
  background:#fff; border:1px solid #e6eaee; box-shadow:0 6px 18px rgba(0,0,0,.10);
  display:grid; place-items:center; line-height:1; font-size:18px; color:#0b2b43; cursor:pointer;
}

/* swipeable chips with snap */
.cat-ribbon .ribbon-scroller{
  overflow:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* Firefox */
}
.cat-ribbon .ribbon-scroller::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

.cat-ribbon .ribbon-list{
  display:flex; gap:8px; padding:4px 0; margin:0; list-style:none;
  scroll-snap-type:x mandatory;
}
.cat-ribbon .chip{
  scroll-snap-align:start;
  padding:10px 12px; border-radius:999px;
  background:#f3f6f9; color:#0b2b43; text-decoration:none; font-weight:600;
  border:1px solid #e6eaee; white-space:nowrap;
  font-size: clamp(13px, 3.2vw, 15px);
}

/* on small phones we hide arrows and rely on swipe */
@media (max-width: 640px){
  .cat-ribbon .ribbon-btn{ display:none; }
}

/* ---------- FEATURED SLIDER ---------- */
.featured-section{ margin: 12px 0 22px; }
.featured-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.featured-header .section-title{ font-size: clamp(18px, 5vw, 22px); }
.slider-controls button{
  background:#fff; border:1px solid #e6eaee; width:32px; height:32px; border-radius:50%; cursor:pointer;
}

/* track & cards */
.product-slider{ position:relative; overflow:hidden; padding: 0 4px; }
.product-slider .slider-track{ display:flex; gap:12px; will-change: transform; transition: transform .35s ease; }

/* 1 card “peek” view on phones; 2 on tablet; 4 on desktop */
.product-card{ flex:0 0 86%; max-width: 520px; margin-inline:auto; }
@media (min-width: 641px){ .product-card{ flex-basis: calc((100% - 12px)/2); } }
@media (min-width: 1100px){ .product-card{ flex-basis: calc((100% - 3*16px)/4); } }

/* mobile: allow native swipe + snap, hide arrow buttons */
@media (max-width: 768px){
  .product-slider{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
  .product-card{ scroll-snap-align:center; }
  .featured-section .slider-controls{ display:none; }
}

/* tighten card internals on phones */
@media (max-width: 480px){
  .item-card{ padding: 14px; }
  .item-card h3{ font-size: 16px; min-height:auto; }
  .item-card p { -webkit-line-clamp: 2; line-clamp: 2; }
  .price-section{ font-size: 16px; }
  .quantity-control .button-yellow, .quantity-control .button-green{ width:30px; height:30px; font-size:18px; }
  .input-quantity{ width:36px; padding:6px; font-size:14px; }
}

/* ---------- TRUST BAR ---------- */
.trust-bar{
  display:grid; grid-template-columns: 1fr; gap:8px;
  background:#fff; border:1px solid #e6eaee; border-radius:12px; padding:12px; margin: 6px 0 20px;
}
@media (min-width: 640px){ .trust-bar{ grid-template-columns: repeat(3,1fr); } }
.trust-item{ text-align:center; color:#0b2b43; }
.trust-item strong{ display:block; }

/* small accessibility improvements */
button:focus-visible, a:focus-visible{
  outline: 2px solid #0b2b43;
  outline-offset: 2px;
}

/* ====== GENERIC CIRCLE ARROW (no white fill) ====== */
.btn-circle,
.hero-banner .hero-nav,
.cat-ribbon .ribbon-btn,
.featured-section .slider-controls button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;               /* no white disc */
  border: 1px solid rgba(0,0,0,.15);
  color: #0b2b43;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.btn-circle:hover,
.btn-circle:active,
.hero-banner .hero-nav:hover,
.hero-banner .hero-nav:active,
.cat-ribbon .ribbon-btn:hover,
.cat-ribbon .ribbon-btn:active,
.featured-section .slider-controls button:hover,
.featured-section .slider-controls button:active {
  background: transparent;               /* keep transparent */
  box-shadow: none;
  border-color: rgba(0,0,0,.25);
}

/* ====== HERO ====== */
.hero-banner { position: relative; }
.hero-banner .hero-inner { border-radius: 12px; overflow: hidden; }
.hero-banner .hero-slide {
  min-height: 320px;
  display: none;
  align-items: center;
  background:
    linear-gradient(to right, rgba(0,38,65,.72), rgba(0,38,65,.20)),
    var(--bg) center/cover no-repeat;
  padding: 40px 28px;
  color: #fff;
}
.hero-banner .hero-slide.active { display: flex; }

/* Arrows: inside on mobile, OUTSIDE on desktop */
.hero-banner .hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  border-color: rgba(255,255,255,.7);
}
.hero-banner .hero-nav.prev { left: 10px; }
.hero-banner .hero-nav.next { right: 10px; }

@media (min-width: 992px) {
  .hero-banner .hero-nav.prev { left: -22px; }  /* outside the rounded box */
  .hero-banner .hero-nav.next { right: -22px; }
}

/* Dots remain as you had them */
.hero-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.hero-dot.active { background: #fff; }

/* ====== CATEGORY RIBBON ====== */
.cat-ribbon { margin: 18px auto 0; }
.cat-ribbon .ribbon-row {
  display: grid;
  grid-template-columns: auto 1fr auto;    /* ◀ chips ▶ */
  align-items: center;
  column-gap: 8px;
}
/* .cat-ribbon .ribbon-btn inherits circle styles from generic */
.cat-ribbon .ribbon-scroller {
  overflow: auto;                           /* touch scroll */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-ribbon .ribbon-scroller::-webkit-scrollbar { display: none; } /* hide scrollbar */
.cat-ribbon .ribbon-list {
  display: inline-flex;
  gap: 10px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  scroll-behavior: smooth;
}

/* ====== FEATURED SLIDER ====== */
.featured-section .slider-controls {
  display: inline-flex;
  gap: 8px;
}
/* inherits generic circle style */

.product-slider { position: relative; overflow: hidden; }
.product-slider .slider-track {
  display: flex;
  gap: 16px;
  will-change: transform;
  transition: transform .35s ease;
  touch-action: pan-y;                      /* allow horizontal swipe */
}

/* Show 1 per view on small screens for better mobile layout */
@media (max-width: 640px) {
  .product-card { flex: 0 0 92%; }          /* one card per “page” */
}
@media (min-width: 641px) and (max-width: 1100px) {
  .product-card { flex: 0 0 calc((100% - 16px) / 2); } /* 2 per view */
}
@media (min-width: 1101px) {
  .product-card { flex: 0 0 calc((100% - 3*16px) / 4); } /* 4 per view */
}

/* Make arrows a tad larger on desktop for visibility */
@media (min-width: 992px) {
  .hero-banner .hero-nav,
  .cat-ribbon .ribbon-btn,
  .featured-section .slider-controls button {
    width: 40px; height: 40px;
  }
}

/* =========================
   HERO (arrows outside on desktop, inside on mobile)
   ========================= */
.hero-banner{ position:relative; margin:18px auto; }
.hero-inner{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  min-height:320px; /* keep height stable while images load */
}
.hero-slide{
  display:none;
  min-height:320px;
  background:
    linear-gradient(to right, rgba(0,38,65,.75), rgba(0,38,65,.25)),
    var(--bg);
  background-size:cover; background-position:center;
  color:#fff; padding:40px 28px;
  align-items:center;
}
.hero-slide.active{ display:flex; }

.hero-content{ max-width:560px; }
.hero-content h1{ margin:0 0 8px; font-size:30px; line-height:1.15; }
.hero-content p{ margin:0 0 16px; font-size:16px; opacity:.95; }

.hero-dots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px;
}
.hero-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.45);
  border:none; padding:0; cursor:pointer;
}
.hero-dot[aria-current="true"]{ background:#fff; }

/* Flat chevrons — no white circle on hover/press */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:none; padding:0;
  width:46px; height:46px; cursor:pointer;
  color:#0b2b43; font-size:36px; line-height:1;
  text-shadow: 0 1px 8px rgba(0,0,0,.25); /* subtle contrast */
}
.hero-nav:focus{ outline:none; }
.hero-nav:hover,
.hero-nav:active{ background:transparent; }

/* Put arrows OUTSIDE on desktop */
@media (min-width: 992px){
  .hero-banner .prev{ left:-34px; }
  .hero-banner .next{ right:-34px; }
}

/* Keep arrows INSIDE on mobile for easier reach */
@media (max-width: 991px){
  .hero-banner .prev{ left:10px; }
  .hero-banner .next{ right:10px; }
  .hero-nav{ color:#ffffff; font-size:30px; }
}

/* =========================
   CATEGORY RIBBON (inline arrows + touch scroll)
   ========================= */
.cat-ribbon{ margin: 18px auto 0; }
.section-title{ font-size:22px; color:#002641; margin:0 0 10px; }

.cat-ribbon .ribbon-row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; column-gap:6px;
}

/* Make the scroller naturally swipeable */
.cat-ribbon .ribbon-scroller{
  overflow:auto hidden;           /* allow touch drag */
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.cat-ribbon .ribbon-list{
  display:flex; gap:10px; padding:4px 0; margin:0; list-style:none;
}

/* Flat arrow buttons (no circle) */
.cat-ribbon .ribbon-btn{
  background:transparent; border:none; width:32px; height:32px;
  font-size:20px; color:#0b2b43; cursor:pointer; line-height:1;
}
.cat-ribbon .ribbon-btn:hover,
.cat-ribbon .ribbon-btn:active{ background:transparent; }

@media (max-width:768px){
  .cat-ribbon .ribbon-btn{ width:28px; height:28px; }
}

/* =========================
   FEATURED / MULTI-ITEM SLIDER
   ========================= */
.featured-section{ margin:18px auto 30px; }
.featured-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }

/* Flat slider arrows */
.slider-controls button{
  background:transparent; border:none; width:32px; height:32px;
  font-size:20px; color:#0b2b43; cursor:pointer; line-height:1;
}
.slider-controls button:hover,
.slider-controls button:active{ background:transparent; }

/* Touch scroll + snap */
.product-slider{
  position:relative;
  overflow:auto hidden;             /* enable swipe */
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.slider-track{
  display:flex; gap:16px; will-change:transform;
  transition: transform .35s ease; /* still used by buttons */
  padding-bottom:6px;              /* breathing room above dots/arrows */
}

/* Cards snap to the start */
.product-card{ scroll-snap-align:start; flex:0 0 auto; }

/* MOBILE: single big card (prevents blank area) */
.product-card{ min-width: 85vw; }

/* TABLET: 2 per view */
@media (min-width:640px){
  .product-card{ min-width: calc((100% - 16px) / 2); }
}

/* DESKTOP: 4 per view */
@media (min-width:1100px){
  .product-card{ min-width: calc((100% - 3*16px) / 4); }
}

/* Make buttons in cards compact on mobile */
@media (max-width:768px){
  .product-card .quantity-control .button-yellow,
  .product-card .quantity-control .button-green{
    width:32px; height:32px; font-size:18px;
  }
  .product-card .input-quantity{ width:40px; padding:6px; }
}

/* Remove any accidental default hover background globally for icon buttons */
.button-blue, .ribbon-btn, .slider-controls button, .hero-nav{
  -webkit-tap-highlight-color: transparent;
}

/* --- Safety: never allow horizontal scroll from off-canvas arrows --- */
html, body { overflow-x: hidden; }

/* Reusable ghost arrow (no circle, no bg) */
.nav-ghost {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  width: auto; height: auto;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.95);          /* default white for dark hero */
  -webkit-tap-highlight-color: transparent;
}
.nav-ghost:hover,
.nav-ghost:active,
.nav-ghost:focus,
.nav-ghost:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------------- HERO ---------------- */
.hero-banner { position: relative; }
.hero-banner .hero-inner{
  position: relative;
  overflow: hidden;             /* rounded box clips the slide image */
  border-radius: 12px;
}

/* Make hero arrows belong to the section (so they don't increase layout width)
   and shift them VISUALLY outside using transform (doesn't affect layout). */
.hero-banner .hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  /* base */
  z-index: 5;
  font-size: 36px;               /* caret size */
}
.hero-banner .hero-nav.prev { left: 0;  transform: translate(-140%, -50%); }
.hero-banner .hero-nav.next { right: 0; transform: translate(140%, -50%); }

/* Bigger hit area without a visible circle */
.hero-banner .hero-nav::before{
  content:"";
  position:absolute;
  inset:-18px;                   /* invisible padding for easier click */
}

/* Dots stay as you had them */

/* On mobile keep arrows INSIDE (so they don’t collide with page gutter) */
@media (max-width: 768px){
  .hero-banner .hero-nav{
    font-size: 28px;
    color: rgba(255,255,255,.92);
  }
  .hero-banner .hero-nav.prev { transform: translate(12px, -50%); left: 0; }
  .hero-banner .hero-nav.next { transform: translate(-12px, -50%); right: 0; }
}

/* ---------------- CATEGORY RIBBON ---------------- */
/* Put arrows inline with chips, no overlap, touch-friendly scrolling */
.cat-ribbon .ribbon-row{
  display: grid;
  grid-template-columns: auto 1fr auto;  /* ◀ chips ▶ */
  align-items: center;
  column-gap: 8px;
}
.cat-ribbon .ribbon-btn{
  color: #0b2b43;                         /* dark on light background */
  font-size: 20px;
}
.cat-ribbon .ribbon-scroller{
  overflow: hidden;                        /* no native scrollbar track */
  touch-action: pan-y pinch-zoom;          /* allow horizontal swipe */
}
.cat-ribbon .ribbon-list{
  display: flex;
  gap: 10px;
  padding: 4px 0;
  margin: 0; list-style: none;
}

/* ---------------- FEATURED (multi-item) ---------------- */
.product-slider{
  position: relative;
  overflow: hidden;                        /* hide track edges */
  touch-action: pan-y pinch-zoom;          /* JS handles horizontal swipe */
}
.product-slider .slider-track{
  display: flex;
  gap: 16px;
  will-change: transform;
}

/* Prev/next for the product carousel (ghost arrows, dark color) */
.featured-section .slider-controls button{
  color: #0b2b43;
  font-size: 22px;
}

/* ---------------- General polish ---------------- */
/* Prevent any button in these components from adding a white focus ring */
.hero-banner .hero-nav,
.cat-ribbon .ribbon-btn,
.featured-section .slider-controls button{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* When you want darker arrows on hero because background is bright,
   just add .dark on the section: <section class="hero-banner dark"> */
.hero-banner.dark .hero-nav { color:#0b2b43; }

/* Make swipe/drag smooth on iOS */
.ribbon-scroller,
.product-slider { -webkit-overflow-scrolling: touch; }

/* Avoid the tiny horizontal scrollbar that sometimes appears
   when transforms push elements visually outside */
* { overscroll-behavior-inline: contain; }

/* Tablet range: pull the hero arrows closer so they stay visible */
@media (min-width: 768px) and (max-width: 1199px){
  .hero-banner .hero-nav.prev { left: 0; transform: translate(-32px, -50%); }
  .hero-banner .hero-nav.next { right: 0; transform: translate(32px, -50%); }
}

/* Make sure arrows are rendered as plain chevrons (no circle) */
.hero-banner .hero-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* lets your JS do horizontal dragging, browser keeps vertical scrolling smooth */
.ribbon-scroller,
.product-slider {
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

/* Make “Saznaj više” full-width and tidy inside product cards */
.product-card .card-cta .button-ghost,
.product-card .button-ghost.full-width {
  display: block;
  width: 100%;
  text-align: center;
  margin: 8px 0 4px;
}

/* --- Home: Saznaj više CTA on product cards --- */
.more-info-button-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 8px;         /* a bit of air above quantity */
}

.more-info-button-wrapper .button-blue{
  /* same visual language as item list button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  min-height: 40px;           /* steady height across devices */
}

/* Tighten up the section below the CTA */
.product-card .add-to-cart-form{
  gap: 10px;
}

.product-card .quantity-control{
  justify-content: center;
}

/* Mobile polish */
@media (max-width: 768px){
  .more-info-button-wrapper{
    margin: 12px 0 8px;
  }
  .more-info-button-wrapper .button-blue{
    width: 100%;
    max-width: 240px;         /* nice width on small screens */
    padding: 12px 16px;       /* bigger tap target */
  }
  .product-card .add-to-cart-button-wrapper{
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .product-card .add-to-cart-button-wrapper .button-blue{
    min-height: 44px;         /* iOS-like recommended size */
  }
}

/* Keep Saznaj više button height consistent on all screens */
.product-card .button-ghost,
.product-card .button-blue {
    padding: 6px 12px;       /* smaller vertical padding */
    height: auto;            /* let content define height */
    line-height: 1.4;        /* consistent text spacing */
    font-size: 14px;         /* adjust for mobile readability */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .product-card .button-ghost,
    .product-card .button-blue {
        width: auto;         /* don't stretch full width unless intended */
        display: inline-block;
    }

    .add-to-cart-button-wrapper button {
        width: auto;
        display: inline-block;
    }
}

/* Compact button utility: for "Saznaj više" on product cards */
.btn-compact{
  display:inline-flex;              /* match .button-blue button layout */
  align-items:center;
  justify-content:center;
  width:auto !important;            /* override mobile rule that makes .button-blue 100% */
  padding:10px 14px;                /* desktop size */
  font-size:16px;
  line-height:1.2;
  min-height:0;                     /* avoid tall anchors */
  border-radius:10px;               /* same shape as .button-blue */
}

/* Make it a bit shorter on mobile */
@media (max-width: 768px){
  .btn-compact{
    padding:8px 12px !important;    /* shorter */
    font-size:15px;                 /* slightly smaller text */
    width:auto !important;          /* keep compact, don’t stretch full width */
  }
}

/* Ensure wrapper centers it just like the cart button */
.product-card .add-to-cart-button-wrapper{
  display:flex;
  justify-content:center;
}

/* Compact "Saznaj više" button fix */
.btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 6px 12px !important;  /* smaller padding */
  font-size: 14px !important;    /* smaller text */
  min-height: unset !important;  /* remove forced height */
  height: auto !important;       /* allow auto height */
  line-height: 1.2;
}

/* Even smaller on very small devices */
@media (max-width: 480px) {
  .btn-compact {
    padding: 5px 10px !important;
    font-size: 13px !important;
  }
}

/* === Product/Item card sizing (desktop+mobile) === */
.product-card,
.item-card {
  width: 100%;
  max-width: 360px;       /* clamp the card so it doesn’t look huge */
  margin: 0 auto;         /* center the single column on mobile */
  padding: 16px;
  border-radius: 12px;
}

/* Images: keep reasonable height and consistent aspect */
.product-card .image-wrapper img,
.item-card img {
  height: 160px;          /* was much taller; this keeps it compact */
  object-fit: contain;
}

/* On larger tablets/desktop you can let them breathe a bit more */
@media (min-width: 768px) {
  .product-card,
  .item-card {
    max-width: 420px;
  }
  .product-card .image-wrapper img,
  .item-card img {
    height: 200px;
  }
}

/* Stock line with tick */
.stock-status-detail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  justify-content:center;
  color:#16a34a;          /* green for in-stock */
  margin: 8px 0 0;
}
.stock-status-detail.out{
  color:#9ca3af;          /* muted gray for out-of-stock */
}
.stock-icon-detail{
  width:20px;
  height:20px;
  object-fit:contain;
  display:inline-block;
}

/* Match item_list card sizing on mobile */
@media (max-width: 768px) {
  #featured .product-card.item-card {
    max-width: 180px; /* or same as item_list card width */
    margin: 0 auto;
  }
}

/* Carousel layout */
.product-slider {
  overflow: hidden;
}

.product-slider .slider-track {
  display: flex;
  transition: transform 0.3s ease;
}

.product-slider .item-card {
  flex: 0 0 calc(100% / 5); /* Desktop: 5 cards */
  max-width: calc(100% / 5);
}

/* Tablet: 3 cards */
@media (max-width: 1024px) {
  .product-slider .item-card {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
  }
}

/* Mobile: 2 cards */
@media (max-width: 768px) {
  .product-slider .item-card {
    flex: 0 0 calc(100% / 2);
    max-width: calc(100% / 2);
  }
}

/* ===== Featured carousel – whole cards only ===== */
#featured .product-slider{
  /* how many cards per view; changed at breakpoints */
  --per-view: 4;
  --gap: 18px;
  overflow-x: auto;             /* enables swipe on touch */
  scroll-snap-type: x mandatory;/* snap to pages */
  -webkit-overflow-scrolling: touch;
}

#featured .slider-track{
  display: flex;
  gap: var(--gap);
  padding: 0;                   /* no extra padding that causes partials */
}

/* Each card takes exactly 1/N of the visible width, minus the total gaps */
#featured .item-card{
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  max-width: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
}

/* Tablet: 3 per view */
@media (max-width: 1024px){
  #featured .product-slider{ --per-view: 3; }
}

/* Phone: 2 per view */
@media (max-width: 768px){
  #featured .product-slider{ --per-view: 2; }
}

/* Tiny phones: 1 per view (optional) */
@media (max-width: 420px){
  #featured .product-slider{ --per-view: 1; }
}

/* 1) Hide the featured carousel's horizontal scrollbar (keeps touch scroll) */
#featured .product-slider{
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
}
#featured .product-slider::-webkit-scrollbar{ /* Chrome/Safari/Edge */
  display: none;
}

/* 2) Guard against page-wide horizontal scroll (e.g., off-edge arrows/shadows) */
html, body{
  overflow-x: hidden;
}

/* 3) Rounding safety so the last card never forces a 1px overflow */
#featured .item-card{
  box-sizing: border-box;
  /* subtract a hair to avoid calc rounding pushing track wider than container */
  flex-basis: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view) - 0.5px);
  max-width: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view) - 0.5px);
}

/* (optional) tiny pad so focus outlines don't create scrollbars */
#featured .slider-track{ padding-bottom: 1px; }

.hero-banner{ position:relative; }
.hero-banner .hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  /* Keep them visually outside but not increasing layout width */
  inset-inline-start:-24px;       /* left arrow */
}
.hero-banner .hero-nav.next{ inset-inline-start:auto; inset-inline-end:-24px; } /* right arrow */

@media (max-width: 768px) {
  .hero-nav-prev {
    left: 10px; /* moves it closer to left edge */
    right: auto;
  }

  .hero-nav-next {
    left: 50px; /* moves next arrow to the right of prev arrow */
    right: auto;
  }
}

@media (max-width: 768px) {
  .hero-nav-prev {
    left: 0px; /* flush against left edge */
    right: auto;
  }

  .hero-nav-next {
    left: 35px; /* just enough space from prev arrow */
    right: auto;
  }
}

/* =========================
   HERO — mobile-friendly polish
   (works with your existing HTML/JS)
   ========================= */
.hero-banner{
  position: relative;
  margin: 0 auto;
}

/* a single, responsive height for all breakpoints */
.hero-inner{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  height: clamp(220px, 42vw, 480px); /* min / fluid / max */
}

/* slides use the CSS var you already set: --bg:url(...) */
.hero-slide{
  position:absolute; inset:0;
  background: #0b2b43 var(--bg) center/cover no-repeat;
  opacity:0; visibility:hidden;
  transition: opacity .35s ease;
  display:grid; align-items:center;
}

/* readable text on top of photography */
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,43,67,.55) 0%, rgba(11,43,67,.20) 40%, rgba(11,43,67,0) 70%);
  pointer-events:none;
}
.hero-slide.active{ opacity:1; visibility:visible; }

/* content block */
.hero-content{
  position:relative;
  z-index:1;
  margin-left:clamp(12px, 6vw, 48px);
  margin-right:clamp(12px, 6vw, 48px);
  max-width:min(680px, 86vw);
  color:#fff;
}
.hero-content h1{
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(22px, 4.5vw, 40px);
  line-height:1.12;
  margin:0 0 .35em;
}
.hero-content p{
  font-size:clamp(14px, 2.6vw, 18px);
  line-height:1.45;
  margin:0 0 1em;
}

/* arrows: clean chevrons, large tap-targets, no circles */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:0; box-shadow:none;
  color:#ffffff; text-shadow:0 2px 10px rgba(0,0,0,.45);
  font-size:clamp(22px, 5.6vw, 36px);
  line-height:1; padding:12px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hero-nav:hover{ color:#ffffff; opacity:.95; }
.hero-nav:active{ transform:translateY(-50%) scale(.98); }
.hero-nav:focus{ outline:none; }
.hero-nav:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

.hero-nav.prev{ left:16px; }
.hero-nav.next{ right:16px; }

/* dots: centered and thumb-friendly */
.hero-dots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.hero-dot{
  width:8px; height:8px; border-radius:999px; border:none;
  background:rgba(255,255,255,.55);
}
.hero-dot[aria-current="true"]{ background:#fff; }

/* ====== small phones ====== */
@media (max-width:480px){
  .hero-inner{ height: clamp(210px, 52vw, 360px); }
  .hero-nav{ padding:8px; }
  .hero-nav.prev{ left:8px; }
  .hero-nav.next{ right:8px; }
  .hero-dots{ bottom:8px; gap:7px; }
}

/* ====== tablets & up: give content more room but keep arrows out of the way ====== */
@media (min-width:768px){
  .hero-inner{ height: clamp(320px, 40vw, 520px); }
  .hero-nav.prev{ left:22px; }
  .hero-nav.next{ right:22px; }
  .hero-dots{ bottom:14px; }
}

@media (max-width: 480px) {
  .hero-nav.prev {
    left: 2px;  /* push almost to the edge */
  }
  .hero-nav.next {
    right: 2px; /* push almost to the edge */
  }
}


/* Make sure the hero is the positioning context */
.hero-banner { position: relative; }

/* Reset arrow transform so X is not affected by translate */
.hero-banner .hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important; /* no translateX */
  z-index: 4; /* above content/overlay */
}

/* Desktop: keep them slightly outside if you like */
@media (min-width: 769px){
  .hero-banner .hero-nav.prev  { left: -12px !important; }
  .hero-banner .hero-nav.next  { right: -12px !important; }
}

/* Mobile: push tight to the edges */
@media (max-width: 768px){
  .hero-banner .hero-nav       { width: 34px; height: 34px; }
  .hero-banner .hero-nav.prev  { 
    left: max(0px, calc(env(safe-area-inset-left, 0px) + 2px)) !important; 
  }
  .hero-banner .hero-nav.next  { 
    right: max(0px, calc(env(safe-area-inset-right, 0px) + 2px)) !important; 
  }
}

/* ===== PAGE PADDING NORMALIZATION ===== */
:root{
  /* one place to tweak mobile page padding */
  --page-pad: 16px;
}

/* make sure the page itself has no stray margins */
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

/* your main page container */
.main-content.layout,
.main-content {
  margin: 0 auto;                 /* center on larger screens */
  padding-inline: var(--page-pad);/* equal left/right padding */
}

/* ===== HERO: BLEED TO EDGES ON MOBILE (keeps nice rounded corners) ===== */
@media (max-width: 768px){
  /* Make sections use the same left/right padding globally */
  .section-title { padding-inline: 0; }

  /* Pull full-bleed sections back to screen edges (equal left/right) */
  .hero-banner,
  .cat-ribbon,
  .featured-section {
    /* expand to compensate the page padding so there’s no uneven gap */
    margin-inline: calc(var(--page-pad) * -1);
    /* keep visual rounding if you use it */
    border-radius: 14px;
  }

  /* Make hero background fill nicely */
  .hero-banner .hero-slide{
    background-size: cover;
    background-position: center;
  }

  /* Put the arrows the same distance from both edges */
  .hero-banner .hero-nav.prev { left: 10px !important; }
  .hero-banner .hero-nav.next { right: 10px !important; }

  /* Optional: slightly smaller dots & tighter space */
  .hero-banner .hero-dots { margin-bottom: 10px; }
}

/* ===== DESKTOP/TABLET: keep things centered and even ===== */
@media (min-width: 769px){
  .main-content.layout,
  .main-content {
    /* if you already set a max-width elsewhere, keep it; otherwise: */
    max-width: 1200px;
    padding-inline: 24px; /* equal on both sides */
  }
}

/* ===== PAGE PADDING NORMALIZATION ===== */
:root{
  --page-pad: 8px; /* smaller, equal padding on both sides */
}

html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

.main-content.layout,
.main-content {
  margin: 0 auto;
  padding-inline: var(--page-pad);
}

/* HERO: equal small gap left/right on mobile */
@media (max-width: 768px){
  .section-title { padding-inline: 0; }

  .hero-banner,
  .cat-ribbon,
  .featured-section {
    margin-inline: 0; /* no negative margin, keep small padding */
    border-radius: 14px;
  }

  .hero-banner .hero-slide{
    background-size: cover;
    background-position: center;
  }

  .hero-banner .hero-nav.prev { left: 10px !important; }
  .hero-banner .hero-nav.next { right: 10px !important; }

  .hero-banner .hero-dots { margin-bottom: 10px; }
}

/* DESKTOP/TABLET: keep more breathing room */
@media (min-width: 769px){
  .main-content.layout,
  .main-content {
    max-width: 1200px;
    padding-inline: 16px;
  }
}

/* Full-width hero on mobile, other sections still padded */
@media (max-width: 768px) {
  .hero-banner {
    margin-left: -8px;   /* cancel page padding */
    margin-right: -8px;  /* cancel page padding */
    width: calc(100% + 16px); /* expand to both edges */
    border-radius: 0; /* optional: remove rounding on mobile */
  }

  .hero-inner {
    border-radius: 0; /* keep image edge-to-edge */
  }
}

@media (max-width: 768px) {
  .page-home main.main-content.layout {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }

  .hero-banner {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* Mobile (default) — 1 per row */
.items-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px; /* space between cards */
}

/* Tablet — 2 per row */
@media (min-width: 768px) {
    .items-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop — 4 per row */
@media (min-width: 1024px) {
    .items-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Optional: make item-card take full height */
.item-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ===== HERO: consistent frame and fill ===== */
.hero-banner { position: relative; }
.hero-inner  { position: relative; overflow: hidden; border-radius: 14px; }

/* Each slide is a fixed-ratio frame; image fills it */
.hero-slide{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 5;           /* desktop frame ratio ~3.2:1 */
  background: #0b2b43;            /* shown if image has transparency */
}

/* Mobile: taller frame to match common mobile creatives (4:5) */
@media (max-width: 640px){
  .hero-slide{ aspect-ratio: 4 / 5; } /* 0.8:1 (close to 1080×1350) */
}

/* Image fills the frame */
.hero-slide .hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;               /* FILL (may crop) */
  object-position: center;
  display: block;
}

@media (max-width: 640px){
  .hero--contain-mobile .hero-slide .hero-img{
    object-fit: contain;           /* Almost fill, minimal crop */
    background: #0b2b43;           /* letterbox color behind image */
  }
}

/* Content overlay */
.hero-slide .hero-content{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-inline: clamp(16px, 4vw, 48px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  z-index: 2;
}

/* Optional dark gradient only when slide requests it */
.hero-slide.has-dark-overlay::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.20) 35%, rgba(0,0,0,0) 65%);
  pointer-events:none;
  z-index:1;
}

/* Arrows */
.hero-banner .hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:rgba(255,255,255,.95);
  font-size:28px; line-height:1; padding:0 6px; cursor:pointer; z-index:3;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.hero-banner .hero-nav.prev{ left:12px; }
.hero-banner .hero-nav.next{ right:12px; }
@media (max-width:640px){
  .hero-banner .hero-nav.prev{ left:8px; }
  .hero-banner .hero-nav.next{ right:8px; }
}

/* Dots */
.hero-dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.hero-dot{
  width:8px; height:8px; border-radius:50%; background:#fff; opacity:.5; border:0;
}
.hero-dot[aria-current="true"]{ opacity:1; }

/* === HERO: layout polish & spacing === */
.hero-banner{
  /* balances space between navbar above and categories below */
  margin: clamp(16px, 2.2vw, 28px) auto clamp(18px, 2.6vw, 32px);
}

.hero-shell{
  /* optional: constrain width to match your content container */
  max-width: 1180px;                /* adjust to match site grid */
  margin-inline: auto;
  position: relative;
}

.hero-inner{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
}

/* Each slide is a fixed-ratio frame; image fills it */
.hero-slide{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 5;             /* desktop frame ~3.2:1 */
  background: #0b2b43;              /* safe letterbox color */
}

/* Mobile frame: taller so mobile creatives look good and stay visible */
@media (max-width: 640px){
  .hero-slide{ aspect-ratio: 4 / 5; }  /* ~1080×1350 friendly */
}

/* Image fills the frame */
.hero-slide .hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                 /* desktop: fill nicely */
  object-position: center;
  display: block;
  -webkit-user-drag: none;
}

@media (max-width: 640px){
  .hero--contain-mobile .hero-slide .hero-img{
    object-fit: contain;             /* show full mobile asset */
    background: #0b2b43;             /* letterbox behind image */
  }
}

/* Optional dark gradient if slide requests it */
.hero-slide.has-dark-overlay::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.20) 35%, rgba(0,0,0,0) 65%);
  pointer-events:none;
  z-index:1;
}

/* Content overlay */
.hero-slide .hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline: clamp(16px, 4vw, 48px);
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
  z-index:2;
}
.hero-slide .hero-content h1{ margin:0 0 .15em; font-size: clamp(22px, 3.2vw, 40px); }
.hero-slide .hero-content p { margin:0 0 .6em;  font-size: clamp(14px, 1.6vw, 18px); }

/* Arrows: perfectly centered, larger hit area, subtle hover */
.hero-nav{
  position:absolute;
  top:50%;                           /* true vertical center */
  transform:translateY(-50%);
  background: rgba(0,0,0,.0);
  border:none;
  color:rgba(255,255,255,.98);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:3;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  padding: 12px;                      /* bigger clickable area */
  transition: transform .15s ease, background .15s ease;
}
.hero-nav.prev{ left: 8px; }
.hero-nav.next{ right:8px; }

.hero-nav:hover{
  background: rgba(0,0,0,.10);
  transform: translateY(-50%) scale(1.05);
}

/* Keep arrows from feeling cramped on very small screens */
@media (max-width: 640px){
  .hero-nav.prev{ left: 6px; }
  .hero-nav.next{ right:6px; }
}

/* Dots */
.hero-dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.hero-dot{
  width:8px; height:8px; border-radius:50%;
  background:#fff; opacity:.5; border:0;
}
.hero-dot[aria-current="true"]{ opacity:1; }

/* spacing so hero sits between navbar and categories */
.hero-banner{
  margin: clamp(14px, 2vw, 26px) auto clamp(18px, 2.2vw, 30px);
}
.hero-shell{
  max-width: 1180px;      /* align with your site grid */
  margin-inline: auto;
  position: relative;
}
.hero-inner{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
}

/* --- slide is a fixed-ratio frame; image fills it --- */
.hero-slide{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0b2b43;
  aspect-ratio: 16 / 5;         /* desktop: wide and elegant */
}
/* tablet: a bit taller to avoid extreme crop */
@media (max-width: 1024px){
  .hero-slide{ aspect-ratio: 16 / 9; }
}
/* phone: still fill, but not too tall */
@media (max-width: 640px){
  .hero-slide{ aspect-ratio: 4 / 3; }
}

/* image fills the frame on ALL screens (no letterbox) */
.hero-slide .hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;           /* always fill */
  object-position: center;     /* adjust per-slide later if needed */
  display: block;
  -webkit-user-drag: none;
}

/* optional dark gradient */
.hero-slide.has-dark-overlay::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.20) 35%, rgba(0,0,0,0) 65%);
  pointer-events:none;
  z-index:1;
}

/* content */
.hero-slide .hero-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline: clamp(16px, 4vw, 48px);
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero-slide .hero-content h1{ margin:0 0 .15em; font-size: clamp(22px, 3.2vw, 40px); }
.hero-slide .hero-content p { margin:0 0 .6em;  font-size: clamp(14px, 1.6vw, 18px); }

/* arrows: true center, larger hit area */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.98);
  font-size:28px; line-height:1; padding:12px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  z-index:3;
  transition: transform .15s ease, background .15s ease;
}
.hero-nav.prev{ left: 10px; }
.hero-nav.next{ right:10px; }
.hero-nav:hover{
  background: rgba(0,0,0,.10);
  transform: translateY(-50%) scale(1.05);
}
@media (max-width: 640px){
  .hero-nav.prev{ left:6px; }
  .hero-nav.next{ right:6px; }
}

/* dots */
.hero-dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.hero-dot{
  width:8px; height:8px; border-radius:50%; background:#fff; opacity:.5; border:0;
}
.hero-dot[aria-current="true"]{ opacity:1; }

@media (min-width: 641px){
  /* Let the hero container match image height */
  .hero-inner,
  .hero-shell,
  .hero-banner {
    height: auto !important;
    min-height: auto !important;
  }

  /* Kill any fixed height from the carousel library */
  .hero-slide {
    height: auto !important;
  }

  /* Ensure the image is block-level and sets the height */
  .hero-slide .hero-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Position the dots absolutely so they don't add height */
  .hero-dots {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

.footer-wrapper {
  background: #0b2b43;
  color: #fff;
  font-size: 14px;
}
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 30px;
  padding: 40px 20px;
}
.footer-col h4 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #fff;
  border-bottom: 2px solid #f5c400;
  display: inline-block;
  padding-bottom: 5px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col ul li {
  margin-bottom: 8px;
}
.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
}
.footer-col ul li a:hover {
  color: #fff;
}
.footer-social a img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  filter: brightness(0) invert(1);
  transition: filter 0.3s;
}
.footer-social a:hover img {
  filter: brightness(0) invert(0.7);
}
.footer-bottom {
  text-align: center;
  padding: 15px;
  background: #092233;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 640px) {
  .footer-top { text-align: center; }
}

/* ---------- Footer ---------- */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-wrapper{
  background: #0b2b43; /* matches navbar palette */
  color: #fff;
}

.footer-top{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 40px 0 20px;
}

@media (max-width: 1024px){
  .footer-top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .footer-top{ grid-template-columns: 1fr; }
}

.footer-title{
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid #f5c400; /* subtle brand accent (yellow) */
  display: inline-block;
  padding-bottom: 4px;
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}
.footer-links li{ margin: 8px 0; }
.footer-links a{
  color: #d6dce2;
  text-decoration: none;
}
.footer-links a:hover{ color: #fff; text-decoration: underline; }

.footer-contact{
  font-style: normal;
  color: #e8eef4;
}
.footer-contact .no-linkify{ color: #fff; font-weight: 600; }

.footer-badges{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.footer-badges img{
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.newsletter-form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 8px;
}
.newsletter-form input[type="email"]{
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1);
  color: #fff;
  outline: none;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,0.75); }
.newsletter-form .button-blue{
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.newsletter-hint{
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: #b9c7d4;
}

.footer-social{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.footer-social a{
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.footer-social a:hover{ background: rgba(255,255,255,0.2); }
.footer-social img{
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Popular categories ribbon inside footer */
.footer-cats{
  padding: 6px 0 18px;
}
.footer-chips{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.chip--ghost{
  border: 1px solid rgba(255,255,255,0.25);
  color: #e8eef4;
  background: transparent;
}
.chip--ghost:hover{
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Bottom bar */
.footer-bottom{
  background: #092233;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 16px;
}
.footer-bottom-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  color: #cfd8e3;
  font-size: 13px;
}
.footer-bottom a{ color: #fff; text-decoration: underline; }
.footer-small{ opacity: 0.9; }

@media (max-width: 640px){
  .footer-bottom-inner{
    flex-direction: column;
    text-align: center;
  }
}

/* Accessibility helper for visually-hidden labels */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* === Footer mobile-proof & social centering fixes === */

/* 1) Make columns stack nicely on phones and center their content */
@media (max-width: 640px){
  .footer-top{
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .footer-col{ margin-inline: auto; }
  .footer-links li{ margin: 10px 0; }
  .footer-contact{ margin: 0 auto; }
  .newsletter-form{
    grid-template-columns: 1fr !important;  /* stack input + button */
  }
  .newsletter-form .button-blue{
    width: 100%;
  }
  .footer-social{
    justify-content: center !important;     /* center circles on mobile */
  }
  .footer-cats{
    text-align: center;
  }
  .footer-chips{
    justify-content: center;
  }
}

/* 2) Ensure social icons are pixel-perfect centered in their circles */
.footer-social{
  display: flex;
  align-items: center;       /* vertical alignment of circles relative to neighbors */
  gap: 10px;
}

.footer-social a{
  display: inline-flex;      /* use flex on the circle itself */
  align-items: center;
  justify-content: center;   /* centers the SVG exactly */
  width: 40px;               /* slightly larger tap target */
  height: 40px;
  aspect-ratio: 1 / 1;       /* keeps it perfectly round if width changes */
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  line-height: 0;            /* prevents inline baseline wobble */
  vertical-align: middle;    /* aligns circles with text/button baselines */
  transition: background 0.2s ease, transform 0.06s ease;
}

.footer-social a:active{
  transform: translateY(1px);
}

.footer-social img{
  display: block;            /* kill extra baseline whitespace */
  width: 18px;               /* consistent icon size */
  height: 18px;
  filter: brightness(0) invert(1);
}

/* 3) Align the whole “Newsletter + Social” column content neatly */
.footer-col .newsletter-form,
.footer-col .footer-social{
  margin-top: 12px;
}

/* 4) Tighten vertical rhythm so elements line up across columns */
.footer-title{ margin-bottom: 12px; }
.footer-links{ margin-top: 10px; }
.footer-badges{ margin-top: 12px; }

/* 5) Optional: keep desktop circles aligned with form controls visually */
@media (min-width: 641px){
  .newsletter-form input[type="email"]{
    height: 42px;
  }
  .newsletter-form .button-blue{
    height: 42px;
  }
  .footer-social a{
    width: 38px; height: 38px;  /* match input/button visual weight */
  }
}

/* 6) Ensure categories row wraps nicely and keeps even spacing on all widths */
.footer-chips{
  align-items: center;
}

/* Footer socials: remove circles and center under section title */
.footer-social {
  display: flex;
  justify-content: center;  /* centers them under 'Novosti i ponude' */
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;       /* remove circle background */
  border-radius: 0;       /* remove circle shape */
  width: auto;            /* no fixed square */
  height: auto;
  padding: 0;
}

.footer-social img {
  display: block;
  width: 24px;            /* bigger for visibility */
  height: 24px;
  filter: brightness(0) invert(1);
}

/* Center socials under Kontakt */
.footer-social {
  display: flex;
  justify-content: center;  /* centers under section */
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

.footer-social img {
  display: block;
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* Center text inside newsletter email field */
.newsletter-form input[type="email"] {
  text-align: center;
}

/* Center placeholder everywhere */
.newsletter-form input[type="email"]::placeholder {
  text-align: center;
}

/* Ensure placeholder centering works on all browsers */
.newsletter-form input[type="email"]::-webkit-input-placeholder {
  text-align: center;
}
.newsletter-form input[type="email"]:-ms-input-placeholder {
  text-align: center;
}

/* Center all text inside email input */
.newsletter-form input[type="email"] {
  text-align: center;
}

/* Center all content in Novosti i ponude column */
.footer-col.newsletter-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* also centers text */
}

/* Make form stack vertically and center */
.footer-col.newsletter-col .newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.footer-col.newsletter-col .newsletter-form input[type="email"] {
  width: 100%;
  max-width: 280px; /* keeps it from stretching too wide */
  text-align: center;
}

.footer-col.newsletter-col .newsletter-form .button-blue {
  margin-top: 10px;
  width: auto; /* fit to content */
}

/* Ensure centering only applies to the newsletter column in footer-top */
.footer-top .newsletter-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Restore normal footer-bottom layout on desktop */
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* restores left/right positioning */
  gap: 16px;
  text-align: left; /* override any inherited center text */
}

@media (max-width: 640px) {
  /* On mobile, still stack and center */
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* Make slide link fill entire frame */
.hero-slide {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Hide text initially */
.hero-content {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* so hover still triggers on link area */
}

/* Show text when hovered on desktop */
@media (hover: hover) {
  .hero-slide:hover .hero-content {
    opacity: 1;
  }
}

/* Always show text on mobile (no hover) */
@media (max-width: 640px) {
  .hero-content {
    opacity: 1;
  }
}
.hero-slide {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.hero-slide .hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: clamp(16px, 4vw, 48px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  z-index: 2;
}

/* Force hero title & subtitle to always be visible */
.hero-slide .hero-content {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.no-linkify {
  pointer-events: none; /* disable click if browser auto-links it */
  cursor: default;
}

@media (max-width: 768px) {
  .no-linkify {
    -webkit-touch-callout: none; /* iOS Safari */
  }
}