/* =========================================
SELLORA - RESPONSIVE STYLES
========================================= */

/* =========================================
TABLET + MOBILE
========================================= */

@media (max-width: 768px) {

/* =====================================
   NAVBAR
   ===================================== */

.navbar {
    width: 92%;

    flex-wrap: nowrap;

    padding: 15px 0;
}


/* HIDE DESKTOP NAVIGATION */

.nav-links {
    display: none;
}


/* NAV ACTIONS */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* =====================================
   THREE-LINE MENU BUTTON
   ===================================== */

.menu-toggle {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: 42px;
    height: 42px;

    padding: 8px;

    border: none;

    background: transparent;

    cursor: pointer;

    gap: 5px;
}


.menu-toggle span {
    display: block;

    width: 24px;
    height: 2px;

    background: currentColor;

    border-radius: 3px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* =====================================
   MOBILE MENU
   ===================================== */

.mobile-menu {
    display: none;

    width: 92%;

    margin: 0 auto 12px;

    padding: 10px 0;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.10);

    overflow: hidden;
}


.mobile-menu.active {
    display: block;
}


/* MOBILE MENU LINKS */

.mobile-menu-link {
    display: block;

    padding: 14px 20px;

    text-decoration: none;

    color: inherit;

    font-size: 15px;

    transition:
        background 0.2s ease;
}


.mobile-menu-link:hover {
    background: rgba(0, 0, 0, 0.05);
}


/* MENU DIVIDER */

.mobile-menu-divider {
    height: 1px;

    margin: 5px 20px;

    background: rgba(0, 0, 0, 0.10);
}


/* =====================================
   HERO
   ===================================== */

.hero {
    padding: 60px 20px;
}


.hero h1 {
    font-size: 34px;
}


/* =====================================
   PRODUCTS
   ===================================== */

.product-grid {
    grid-template-columns: 1fr;
}


/* =====================================
   BENEFITS
   ===================================== */

.benefits {
    grid-template-columns: 1fr;
}


/* =====================================
   CATEGORIES
   ===================================== */

.category-list {
    gap: 8px;
}


.category-list a {
    padding: 8px 14px;
}


/* =====================================
   PRODUCT DETAILS
   ===================================== */

.product-detail-card {
    grid-template-columns: 1fr;

    gap: 30px;
}


.product-detail-image {
    height: 350px;
}


.product-detail-info h1 {
    font-size: 34px;
}

}

/* =========================================
SMALL PHONES
========================================= */

@media (max-width: 480px) {

/* =====================================
   NAVBAR
   ===================================== */

.navbar {
    width: 92%;

    padding: 12px 0;
}


/* LOGO */

.logo {
    font-size: 20px;
}


/* MENU BUTTON */

.menu-toggle {
    width: 40px;

    height: 40px;
}


.menu-toggle span {
    width: 23px;
}


/* =====================================
   MOBILE MENU
   ===================================== */

.mobile-menu {
    width: 92%;

    border-radius: 10px;
}


.mobile-menu-link {
    padding: 13px 18px;

    font-size: 14px;
}


/* =====================================
   HERO
   ===================================== */

.hero h1 {
    font-size: 29px;
}


.hero {
    padding: 45px 15px;
}


/* =====================================
   SECTIONS
   ===================================== */

.search-section,
.categories,
.featured-products,
.why-sellora {
    width: 92%;
}


/* =====================================
   FOOTER
   ===================================== */

.footer-links {
    flex-direction: column;

    gap: 8px;
}


/* =====================================
   PRODUCT PAGE
   ===================================== */

.products-page {
    padding: 45px 0 60px;
}


.products-header {
    margin-bottom: 35px;
}


.products-header h1 {
    font-size: 30px;
}


.product-image {
    height: 200px;
}


/* =====================================
   PRODUCT DETAILS
   ===================================== */

.product-details-page {
    padding: 45px 0 60px;
}


.product-detail-image {
    height: 280px;
}


.product-detail-info h1 {
    font-size: 29px;
}


.product-detail-info .product-price {
    font-size: 22px;
}


.product-btn {
    padding: 10px 16px;
}

}

/* =========================================
DESKTOP DEFAULT
========================================= */

/*
The hamburger menu is hidden on larger
screens. Desktop navigation remains normal.
*/

@media (min-width: 769px) {

.menu-toggle {
    display: none;
}


.mobile-menu {
    display: none !important;
}

}