/* ==========================================
   URBUN ROOTS PREMIUM HEADER
   COMPLETE STYLE.CSS
========================================== */


/* ==========================================
   ROOT COLORS
========================================== */

:root {
    --urbun-dark: #064927;
    --urbun-deep: #0b5830;
    --urbun-green: #4f991b;
    --urbun-light-green: #78b82a;
    --urbun-soft-green: #edf7e7;
    --urbun-white: #ffffff;
    --urbun-light: #f7faf5;
    --urbun-text: #1b2b22;
    --urbun-muted: #68766d;
    --urbun-border: #e3ebe5;

    --urbun-shadow:
        0 15px 45px rgba(8, 73, 39, 0.12);
}


/* ==========================================
   RESET
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Manrope", sans-serif;
    color: var(--urbun-text);
    background: var(--urbun-white);
}

body.mobile-menu-open,
body.search-popup-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}


/* ==========================================
   COMMON CONTAINER
========================================== */

.urbun-container {
    width: min(1360px, calc(100% - 40px));
    margin: 0 auto;
}


/* ==========================================
   HEADER WRAPPER
========================================== */

.urbun-header {
    position: relative;
    /* FIX: raised from 1000 to 1200 so the header (and everything nested
       inside it, including the mobile menu wrapper at z-index 1100)
       paints above the mobile overlay (z-index 1090) in the real,
       document-level stacking order. Without this, .urbun-header created
       its own stacking context capped at "1000", so the overlay ended up
       visually on top of the slide-out menu and silently absorbed all
       taps on the mobile nav links. */
    z-index: 1200;
    width: 100%;
    background: var(--urbun-white);
}


/* ==========================================
   TOP BAR
========================================== */

.urbun-topbar {
    min-height: 42px;
    display: flex;
    align-items: center;
    color: var(--urbun-white);

    background:
        linear-gradient(
            135deg,
            var(--urbun-dark),
            var(--urbun-deep)
        );
}

.urbun-topbar .urbun-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-left span,
.topbar-right a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--urbun-white);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    transition: 0.3s ease;
}

.topbar-left i,
.topbar-right i {
    color: #b9e986;
}

.topbar-right a:hover {
    color: #d9f5b7;
}

.topbar-divider {
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, 0.25);
}


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

.urbun-navbar {
    position: relative;
    z-index: 1000;

    width: 100%;

    background: rgba(255, 255, 255, 0.98);

    border-bottom: 1px solid var(--urbun-border);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.navbar-inner {
    min-height: 120px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 26px;
}


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

.urbun-navbar.is-sticky {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.97);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 10px 35px rgba(6, 73, 39, 0.1);

    animation: urbunHeaderSlide 0.35s ease;
}

.urbun-navbar.is-sticky .navbar-inner {
    min-height: 92px;
}

@keyframes urbunHeaderSlide {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   LARGE LOGO
========================================== */

.urbun-logo {
    width: 255px;
    height: 108px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    overflow: hidden;
}

.urbun-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: left center;
}

.urbun-navbar.is-sticky .urbun-logo {
    width: 215px;
    height: 82px;
}


/* ==========================================
   DESKTOP MENU WRAPPER
========================================== */

.urbun-menu-wrapper {
    margin-left: auto;
}

.urbun-menu {
    display: flex;
    align-items: center;
    gap: 5px;
}

.urbun-menu > li {
    position: relative;
}


/* ==========================================
   DESKTOP MENU LINKS
========================================== */

.urbun-menu > li > a {
    position: relative;

    min-height: 80px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 28px 13px;

    color: var(--urbun-text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    transition: 0.3s ease;
}

.urbun-menu > li > a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 18px;

    width: 0;
    height: 3px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            var(--urbun-dark),
            var(--urbun-light-green)
        );

    transform: translateX(-50%);

    transition: 0.3s ease;
}

.urbun-menu > li > a:hover,
.urbun-menu > li > a.active {
    color: var(--urbun-green);
}

.urbun-menu > li > a:hover::after,
.urbun-menu > li > a.active::after {
    width: 26px;
}

.urbun-menu > li > a i {
    font-size: 10px;
    transition: 0.3s ease;
}

.urbun-menu > li:hover > a i {
    transform: rotate(180deg);
}


/* ==========================================
   DESKTOP DROPDOWN
========================================== */

.urbun-dropdown {
    position: absolute;

    top: calc(100% + 12px);
    left: 0;

    z-index: 100;

    width: 320px;

    padding: 12px;

    background: var(--urbun-white);

    border: 1px solid var(--urbun-border);
    border-radius: 18px;

    box-shadow: var(--urbun-shadow);

    opacity: 0;
    visibility: hidden;

    transform: translateY(16px);

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

.urbun-dropdown::before {
    content: "";

    position: absolute;

    top: -8px;
    left: 38px;

    width: 16px;
    height: 16px;

    background: var(--urbun-white);

    border-top: 1px solid var(--urbun-border);
    border-left: 1px solid var(--urbun-border);

    transform: rotate(45deg);
}

.has-dropdown:hover > .urbun-dropdown {
    top: 100%;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.urbun-dropdown li + li {
    margin-top: 5px;
}

.urbun-dropdown a {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px;

    border-radius: 13px;

    color: var(--urbun-text);

    transition: 0.3s ease;
}

.urbun-dropdown a:hover {
    background: var(--urbun-soft-green);
    transform: translateX(4px);
}

.dropdown-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: var(--urbun-green);

    background: var(--urbun-white);

    border: 1px solid #dcebd4;

    box-shadow:
        0 7px 18px rgba(79, 153, 27, 0.08);
}

.dropdown-icon i {
    font-size: 17px;
}

.urbun-dropdown strong {
    display: block;

    margin-bottom: 4px;

    color: var(--urbun-dark);

    font-size: 14px;
    font-weight: 800;
}

.urbun-dropdown small {
    display: block;

    color: var(--urbun-muted);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}


/* ==========================================
   HEADER ACTIONS
========================================== */

.urbun-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    flex-shrink: 0;
}

.header-action-btn {
    position: relative;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    padding: 0;

    color: var(--urbun-dark);

    background: var(--urbun-soft-green);

    border: 1px solid #dcebd4;
    border-radius: 50%;

    font-size: 15px;

    cursor: pointer;

    transition: 0.3s ease;
}

.header-action-btn:hover {
    color: var(--urbun-white);

    background: var(--urbun-green);
    border-color: var(--urbun-green);

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(79, 153, 27, 0.2);
}


/* ==========================================
   ACTION COUNT
========================================== */

.action-count {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 19px;
    height: 19px;

    padding: 0 4px;

    display: grid;
    place-items: center;

    color: var(--urbun-white);

    background: var(--urbun-dark);

    border: 2px solid var(--urbun-white);
    border-radius: 50px;

    font-size: 9px;
    font-weight: 800;
}


/* ==========================================
   CART BUTTON
========================================== */

.cart-action {
    min-height: 49px;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-left: 4px;

    padding: 6px 14px 6px 7px;

    color: var(--urbun-white);

    background:
        linear-gradient(
            135deg,
            var(--urbun-dark),
            var(--urbun-green)
        );

    border-radius: 30px;

    box-shadow:
        0 10px 24px rgba(17, 100, 49, 0.18);

    transition: 0.3s ease;
}

.cart-action:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(17, 100, 49, 0.25);
}

.cart-icon {
    position: relative;

    width: 37px;
    height: 37px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: var(--urbun-dark);

    background: var(--urbun-white);

    border-radius: 50%;
}

.cart-icon i {
    font-size: 15px;
}

.cart-icon .action-count {
    top: -9px;
    right: -9px;

    background: var(--urbun-light-green);
}

.cart-text {
    display: flex;
    flex-direction: column;

    line-height: 1.2;
}

.cart-text small {
    margin-bottom: 2px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cart-text strong {
    color: var(--urbun-white);

    font-size: 13px;
    font-weight: 800;
}


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

.mobile-menu-toggle {
    width: 45px;
    height: 45px;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    padding: 0;

    background: var(--urbun-dark);

    border: none;
    border-radius: 12px;

    cursor: pointer;

    transition: 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: var(--urbun-green);
}

.mobile-menu-toggle span {
    width: 21px;
    height: 2px;

    display: block;

    background: var(--urbun-white);

    border-radius: 10px;

    transition: 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================
   MOBILE CLOSE BUTTON
========================================== */

.mobile-menu-close {
    display: none;
}


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

.mobile-menu-actions {
    display: none;
}


/* ==========================================
   MOBILE OVERLAY
========================================== */

.mobile-menu-overlay {
    position: fixed;

    inset: 0;

    z-index: 1090;

    background: rgba(3, 35, 18, 0.68);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;

    transition: 0.3s ease;
}

.mobile-menu-overlay.active {
    /* FIX: this was commented out, leaving the overlay at opacity: 0
       while still visibility: visible — it stayed invisible but kept
       intercepting clicks/taps on whatever sat behind/near it. */
    opacity: 1;
    visibility: visible;
}


/* ==========================================
   SEARCH POPUP
========================================== */

.urbun-search-popup {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(2, 39, 19, 0.88);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    opacity: 0;
    visibility: hidden;

    transition: 0.3s ease;
}

.urbun-search-popup.active {
    opacity: 1;
    visibility: visible;
}

.search-popup-box {
    position: relative;

    width: min(680px, 100%);

    padding: 46px;

    background: var(--urbun-white);

    border-radius: 25px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.25);

    transform: translateY(25px) scale(0.97);

    transition: 0.35s ease;
}

.urbun-search-popup.active .search-popup-box {
    transform: translateY(0) scale(1);
}

.search-popup-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

    color: var(--urbun-white);

    background: var(--urbun-dark);

    border: none;
    border-radius: 50%;

    cursor: pointer;

    transition: 0.3s ease;
}

.search-popup-close:hover {
    background: var(--urbun-green);
    transform: rotate(90deg);
}

.search-small-title {
    display: block;

    margin-bottom: 8px;

    color: var(--urbun-green);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.search-popup-box h3 {
    margin: 0 0 23px;

    color: var(--urbun-dark);

    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
}

.header-search-form {
    display: flex;
    gap: 10px;
}

.header-search-form input {
    width: 100%;
    height: 56px;

    padding: 0 20px;

    color: var(--urbun-text);

    background: #f6faf4;

    border: 1px solid #dfe9db;
    border-radius: 13px;

    outline: none;

    font-size: 14px;

    transition: 0.3s ease;
}

.header-search-form input::placeholder {
    color: #8a968e;
}

.header-search-form input:focus {
    border-color: var(--urbun-green);

    box-shadow:
        0 0 0 4px rgba(79, 153, 27, 0.1);
}

.header-search-form button {
    height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 25px;

    color: var(--urbun-white);

    background:
        linear-gradient(
            135deg,
            var(--urbun-dark),
            var(--urbun-green)
        );

    border: none;
    border-radius: 13px;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.3s ease;
}

.header-search-form button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(17, 100, 49, 0.2);
}

.popular-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 18px;
}

.popular-searches span {
    color: var(--urbun-muted);

    font-size: 12px;
    font-weight: 700;
}

.popular-searches a {
    padding: 6px 11px;

    color: var(--urbun-dark);

    background: var(--urbun-soft-green);

    border-radius: 30px;

    font-size: 11px;
    font-weight: 700;

    transition: 0.3s ease;
}

.popular-searches a:hover {
    color: var(--urbun-white);
    background: var(--urbun-green);
}


/* ==========================================
   TABLET RESPONSIVE
========================================== */

@media (max-width: 1180px) {

    .urbun-container {
        width: min(100% - 30px, 1360px);
    }

    .navbar-inner {
        min-height: 108px;
        gap: 18px;
    }

    .urbun-logo {
        width: 220px;
        height: 94px;
    }

    .urbun-navbar.is-sticky .urbun-logo {
        width: 195px;
        height: 76px;
    }

    .urbun-menu {
        gap: 2px;
    }

    .urbun-menu > li > a {
        padding-left: 9px;
        padding-right: 9px;

        font-size: 13px;
    }

    .urbun-actions {
        gap: 6px;
    }

    .header-action-btn {
        width: 40px;
        height: 40px;
    }

    .cart-action {
        padding-right: 10px;
    }

}


/* ==========================================
   MOBILE NAVIGATION
========================================== */

@media (max-width: 991px) {

    .urbun-topbar {
        display: none;
    }

    .urbun-navbar {
        background: var(--urbun-white);
    }

    .navbar-inner {
        min-height: 96px;
        gap: 14px;
    }

    .urbun-logo {
        width: 190px;
        height: 80px;
    }

    .urbun-navbar.is-sticky .navbar-inner {
        min-height: 82px;
    }

    .urbun-navbar.is-sticky .urbun-logo {
        width: 170px;
        height: 68px;
    }


    /* Mobile slide menu */

    .urbun-menu-wrapper {
        position: fixed;

        top: 0;
        right: -100%;

        z-index: 1100;

        width: min(390px, 88%);
        height: 100vh;

        margin: 0;

        padding: 85px 22px 30px;

        overflow-y: auto;

        background:
            radial-gradient(
                circle at top right,
                rgba(120, 184, 42, 0.18),
                transparent 34%
            ),
            var(--urbun-white);

        box-shadow:
            -15px 0 45px rgba(0, 0, 0, 0.16);

        transition:
            right 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    }

    .urbun-menu-wrapper.active {
        right: 0;
    }


    /* Mobile close */

    .mobile-menu-close {
        position: absolute;

        top: 22px;
        right: 22px;

        width: 43px;
        height: 43px;

        display: grid;
        place-items: center;

        color: var(--urbun-white);

        background: var(--urbun-dark);

        border: none;
        border-radius: 12px;

        font-size: 17px;

        cursor: pointer;

        transition: 0.3s ease;
    }

    .mobile-menu-close:hover {
        background: var(--urbun-green);
        transform: rotate(90deg);
    }


    /* Mobile menu */

    .urbun-menu {
        width: 100%;
        display: block;
    }

    .urbun-menu > li {
        width: 100%;

        border-bottom: 1px solid var(--urbun-border);
    }

    .urbun-menu > li > a {
        width: 100%;
        min-height: 56px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 14px 3px;

        color: var(--urbun-dark);

        font-size: 15px;
        font-weight: 700;
    }

    .urbun-menu > li > a::after {
        display: none;
    }

    .urbun-menu > li > a.active {
        color: var(--urbun-green);
    }

    .urbun-menu > li:hover > a i {
        transform: none;
    }


    /* Mobile dropdown icon */

    .has-dropdown > a i {
        width: 29px;
        height: 29px;

        display: grid;
        place-items: center;

        background: var(--urbun-soft-green);

        border-radius: 50%;

        font-size: 10px;

        transition: 0.3s ease;
    }

    .has-dropdown.dropdown-open > a i {
        transform: rotate(180deg);
    }


    /* Mobile dropdown */

    .urbun-dropdown {
        position: static;

        width: 100%;
        max-height: 0;

        padding: 0;

        overflow: hidden;

        background: transparent;

        border: none;
        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        transition:
            max-height 0.35s ease,
            padding 0.35s ease;
    }

    .urbun-dropdown::before {
        display: none;
    }

    .has-dropdown:hover > .urbun-dropdown {
        transform: none;
    }

    .has-dropdown.dropdown-open > .urbun-dropdown {
        max-height: 500px;
        padding: 6px 0 15px;
    }

    .urbun-dropdown li + li {
        margin-top: 6px;
    }

    .urbun-dropdown a {
        padding: 10px;

        background: var(--urbun-light);

        border: 1px solid #e8efe5;
    }

    .urbun-dropdown a:hover {
        transform: none;
    }


    /* Mobile menu buttons */

    .mobile-menu-actions {
        display: grid;
        gap: 10px;

        margin-top: 25px;
    }

    .mobile-account-btn,
    .mobile-shop-btn {
        min-height: 49px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 9px;

        padding: 10px 20px;

        border-radius: 12px;

        font-size: 13px;
        font-weight: 800;

        transition: 0.3s ease;
    }

    .mobile-account-btn {
        color: var(--urbun-dark);

        background: var(--urbun-soft-green);

        border: 1px solid #d9e9d1;
    }

    .mobile-shop-btn {
        color: var(--urbun-white);

        background:
            linear-gradient(
                135deg,
                var(--urbun-dark),
                var(--urbun-green)
            );
    }

    .mobile-account-btn:hover,
    .mobile-shop-btn:hover {
        transform: translateY(-2px);
    }


    /* Show hamburger */

    .mobile-menu-toggle {
        display: flex;
    }


    /* Hide account and wishlist */

    .account-action,
    .wishlist-action {
        display: none;
    }


    /* Mobile cart */

    .cart-text {
        display: none;
    }

    .cart-action {
        min-height: 43px;

        margin-left: 0;
        padding: 0;

        background: transparent;

        border-radius: 50%;

        box-shadow: none;
    }

    .cart-action:hover {
        transform: none;
        box-shadow: none;
    }

    .cart-icon {
        width: 43px;
        height: 43px;

        color: var(--urbun-dark);

        background: var(--urbun-soft-green);

        border: 1px solid #dcebd4;
    }

    .cart-icon .action-count {
        border-color: var(--urbun-white);
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 575px) {

    .urbun-container {
        width: calc(100% - 20px);
    }

    .navbar-inner {
        min-height: 88px;
        gap: 7px;
    }

    .urbun-logo {
        width: 165px;
        height: 72px;
    }

    .urbun-navbar.is-sticky .navbar-inner {
        min-height: 76px;
    }

    .urbun-navbar.is-sticky .urbun-logo {
        width: 150px;
        height: 62px;
    }

    .urbun-actions {
        gap: 4px;
    }

    .header-action-btn,
    .cart-icon,
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .search-popup-box {
        padding: 42px 20px 25px;

        border-radius: 20px;
    }

    .search-popup-close {
        top: 14px;
        right: 14px;

        width: 36px;
        height: 36px;
    }

    .search-popup-box h3 {
        margin-bottom: 18px;
    }

    .header-search-form {
        flex-direction: column;
    }

    .header-search-form button {
        width: 100%;
    }

}


/* ==========================================
   EXTRA SMALL MOBILE
========================================== */

@media (max-width: 430px) {

    .urbun-container {
        width: calc(100% - 16px);
    }

    .navbar-inner {
        min-height: 82px;
    }

    .urbun-logo {
        width: 148px;
        height: 66px;
    }

    .urbun-navbar.is-sticky .urbun-logo {
        width: 135px;
        height: 58px;
    }

    .search-open-btn {
        display: none;
    }

    .urbun-menu-wrapper {
        width: 90%;
        padding-left: 18px;
        padding-right: 18px;
    }

}


/* ==========================================
   VERY SMALL MOBILE
========================================== */

@media (max-width: 360px) {

    .urbun-logo {
        width: 132px;
        height: 60px;
    }

    .urbun-navbar.is-sticky .urbun-logo {
        width: 120px;
        height: 54px;
    }

    .header-action-btn,
    .cart-icon,
    .mobile-menu-toggle {
        width: 38px;
        height: 38px;
    }

    .urbun-actions {
        gap: 3px;
    }

}

/* ==========================================
   URBUN ROOTS PREMIUM HERO BANNER
========================================== */

.urbun-hero {
    position: relative;
    width: 100%;
    min-height: 660px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(120, 184, 42, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(79, 153, 27, 0.11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f9fcf6 0%,
            #f2f9eb 52%,
            #eaf6df 100%
        );
}


/* ==========================================
   BACKGROUND PATTERN
========================================== */

.urbun-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(6, 73, 39, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6, 73, 39, 0.025) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    pointer-events: none;
}


/* ==========================================
   DECORATIVE SHAPES
========================================== */

.hero-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.hero-shape-one {
    top: -130px;
    right: -120px;

    width: 360px;
    height: 360px;

    border: 58px solid rgba(79, 153, 27, 0.07);
}

.hero-shape-two {
    bottom: -110px;
    left: -110px;

    width: 280px;
    height: 280px;

    background: rgba(120, 184, 42, 0.07);
}

.hero-shape-three {
    top: 80px;
    left: 48%;

    width: 80px;
    height: 80px;

    border: 18px solid rgba(6, 73, 39, 0.04);
}


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

.hero-wrapper {
    position: relative;
    z-index: 2;

    min-height: 660px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;

    gap: 55px;

    padding: 60px 0;
}


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

.hero-content {
    max-width: 700px;
}

.hero-badge {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;
    padding: 8px 15px 8px 8px;

    color: #064927;
    background: #ffffff;

    border: 1px solid rgba(79, 153, 27, 0.18);
    border-radius: 50px;

    box-shadow:
        0 10px 28px rgba(6, 73, 39, 0.08);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.hero-badge-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #064927,
            #78b82a
        );

    border-radius: 50%;
}

.hero-content h1 {
    max-width: 760px;

    margin: 0 0 20px;

    color: #10281a;

    font-size: clamp(43px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.hero-content h1 span {
    display: block;

    color: #4f991b;

    background:
        linear-gradient(
            90deg,
            #064927,
            #4f991b,
            #78b82a
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.hero-content > p {
    max-width: 650px;

    margin: 0 0 29px;

    color: #647169;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
}


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

.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 33px;
}

.hero-primary-btn,
.hero-secondary-btn {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 23px;

    border-radius: 13px;

    font-size: 13px;
    font-weight: 800;

    transition: 0.3s ease;
}

.hero-primary-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #064927,
            #4f991b
        );

    box-shadow:
        0 15px 30px rgba(6, 73, 39, 0.19);
}

.hero-primary-btn:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 19px 36px rgba(6, 73, 39, 0.25);
}

.hero-primary-btn i {
    transition: 0.3s ease;
}

.hero-primary-btn:hover i {
    transform: translateX(5px);
}

.hero-secondary-btn {
    color: #064927;
    background: #ffffff;

    border: 1px solid #dcebd4;

    box-shadow:
        0 10px 25px rgba(6, 73, 39, 0.07);
}

.hero-secondary-btn:hover {
    color: #ffffff;
    background: #4f991b;
    border-color: #4f991b;

    transform: translateY(-3px);
}


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

.hero-benefits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 24px;
}

.hero-benefit-item {
    display: flex;
    align-items: center;

    gap: 10px;
}

.hero-benefit-item > span {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #4f991b;
    background: #ffffff;

    border: 1px solid #dcebd4;
    border-radius: 12px;

    box-shadow:
        0 8px 22px rgba(6, 73, 39, 0.07);
}

.hero-benefit-item strong,
.hero-benefit-item small {
    display: block;
}

.hero-benefit-item strong {
    margin-bottom: 2px;

    color: #133522;

    font-size: 12px;
    font-weight: 800;
}

.hero-benefit-item small {
    color: #78837c;

    font-size: 10px;
    font-weight: 600;
}


/* ==========================================
   HERO IMAGE AREA
========================================== */

.hero-image-area {
    position: relative;

    min-height: 530px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-circle {
    position: relative;

    width: min(510px, 100%);
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 38% 30%,
            #f8fff2,
            #deefce 72%
        );

    border: 15px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;

    box-shadow:
        0 30px 75px rgba(6, 73, 39, 0.15);
}

.hero-image-circle::before {
    content: "";

    position: absolute;
    inset: 18px;

    border: 2px dashed rgba(79, 153, 27, 0.22);
    border-radius: 50%;

    animation: heroRotate 30s linear infinite;
}

.hero-image-circle::after {
    content: "";

    position: absolute;
    inset: -25px;

    border: 1px solid rgba(79, 153, 27, 0.12);
    border-radius: 50%;
}

.hero-image-circle img {
    position: relative;
    z-index: 2;

    width: 92%;
    height: 92%;

    object-fit: contain;

    filter:
        drop-shadow(0 22px 20px rgba(6, 73, 39, 0.18));

    animation: heroImageFloat 5s ease-in-out infinite;
}

@keyframes heroRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes heroImageFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


/* ==========================================
   DECORATIVE LEAVES
========================================== */

.hero-leaf {
    position: absolute;
    z-index: 3;

    display: grid;
    place-items: center;

    color: rgba(79, 153, 27, 0.62);

    font-size: 25px;
}

.hero-leaf-one {
    top: 58px;
    left: 28px;

    transform: rotate(-25deg);
}

.hero-leaf-two {
    right: 35px;
    bottom: 55px;

    transform: rotate(35deg);
}


/* ==========================================
   FLOATING CARDS
========================================== */

.hero-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 185px;

    padding: 11px 14px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(79, 153, 27, 0.15);
    border-radius: 15px;

    box-shadow:
        0 18px 38px rgba(6, 73, 39, 0.13);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-fresh-card {
    top: 65px;
    left: -30px;

    animation: floatingCardOne 5s ease-in-out infinite;
}

.hero-delivery-card {
    right: -25px;
    bottom: 85px;

    animation: floatingCardTwo 5.5s ease-in-out infinite;
}

.floating-card-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #064927,
            #78b82a
        );

    border-radius: 12px;
}

.hero-floating-card strong,
.hero-floating-card small {
    display: block;
}

.hero-floating-card strong {
    margin-bottom: 3px;

    color: #064927;

    font-size: 12px;
    font-weight: 800;
}

.hero-floating-card small {
    color: #758178;

    font-size: 9px;
    font-weight: 600;
}

@keyframes floatingCardOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}

@keyframes floatingCardTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(9px);
    }

}


/* ==========================================
   OFFER CARD
========================================== */

.hero-offer-card {
    position: absolute;
    right: 20px;
    top: 55px;
    z-index: 6;

    width: 92px;
    height: 92px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #78b82a,
            #4f991b
        );

    border: 6px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 15px 32px rgba(79, 153, 27, 0.28);

    transform: rotate(7deg);
}

.hero-offer-card span {
    font-size: 9px;
    font-weight: 700;
}

.hero-offer-card strong {
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
}

.hero-offer-card small {
    margin-top: 2px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* ==========================================
   LARGE TABLET
========================================== */

@media (max-width: 1100px) {

    .urbun-hero {
        min-height: 600px;
    }

    .hero-wrapper {
        min-height: 600px;
        gap: 30px;
    }

    .hero-content h1 {
        font-size: clamp(40px, 5vw, 60px);
    }

    .hero-image-area {
        min-height: 470px;
    }

    .hero-image-circle {
        width: 430px;
    }

    .hero-fresh-card {
        left: -10px;
    }

    .hero-delivery-card {
        right: -5px;
    }

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .urbun-hero {
        min-height: auto;
    }

    .hero-wrapper {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 65px 0 70px;

        text-align: center;
    }

    .hero-content {
        max-width: 760px;
        margin: 0 auto;
    }

    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-benefits {
        justify-content: center;
    }

    .hero-image-area {
        min-height: 500px;
    }

    .hero-image-circle {
        width: min(480px, 85%);
    }

    .hero-fresh-card {
        left: 7%;
    }

    .hero-delivery-card {
        right: 7%;
    }

}


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

@media (max-width: 575px) {

    .hero-wrapper {
        gap: 25px;

        padding: 45px 0 55px;
    }

    .hero-badge {
        margin-bottom: 15px;

        font-size: 10px;
    }

    .hero-badge-icon {
        width: 29px;
        height: 29px;
    }

    .hero-content h1 {
        margin-bottom: 16px;

        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.12;
        letter-spacing: -1.5px;
    }

    .hero-content > p {
        margin-bottom: 23px;

        font-size: 14px;
        line-height: 1.75;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;

        margin-bottom: 28px;
    }

    .hero-primary-btn,
    .hero-secondary-btn {
        width: 100%;
        min-height: 51px;
    }

    .hero-benefits {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        gap: 8px;
    }

    .hero-benefit-item {
        flex-direction: column;

        gap: 7px;

        text-align: center;
    }

    .hero-benefit-item > span {
        width: 39px;
        height: 39px;
    }

    .hero-benefit-item strong {
        font-size: 10px;
    }

    .hero-benefit-item small {
        font-size: 8px;
    }

    .hero-image-area {
        min-height: 390px;
    }

    .hero-image-circle {
        width: min(340px, 90%);

        border-width: 10px;
    }

    .hero-image-circle::after {
        inset: -15px;
    }

    .hero-floating-card {
        min-width: 150px;

        padding: 9px 10px;
    }

    .hero-fresh-card {
        top: 35px;
        left: 0;
    }

    .hero-delivery-card {
        right: 0;
        bottom: 42px;
    }

    .floating-card-icon {
        width: 35px;
        height: 35px;
    }

    .hero-floating-card strong {
        font-size: 10px;
    }

    .hero-floating-card small {
        font-size: 8px;
    }

    .hero-offer-card {
        top: 15px;
        right: 10px;

        width: 75px;
        height: 75px;

        border-width: 4px;
    }

    .hero-offer-card strong {
        font-size: 21px;
    }

}


/* ==========================================
   VERY SMALL MOBILE
========================================== */

@media (max-width: 390px) {

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-benefit-item {
        flex-direction: row;
        justify-content: center;

        text-align: left;
    }

    .hero-image-area {
        min-height: 340px;
    }

    .hero-image-circle {
        width: 285px;
    }

    .hero-floating-card {
        min-width: 135px;
    }

    .hero-fresh-card {
        left: -3px;
    }

    .hero-delivery-card {
        right: -3px;
    }

    .hero-offer-card {
        width: 68px;
        height: 68px;
    }

}

/* =========================================
   SHOP BY CATEGORY SECTION
========================================= */

.category-section {
    position: relative;
    width: 100%;
    padding: 50px 20px;
    background:
        radial-gradient(
            circle at top left,
            rgba(107, 179, 72, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 181, 71, 0.14),
            transparent 30%
        ),
        #f8fbf5;
    overflow: hidden;
}


/* Decorative Background Circle */

.category-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(86, 158, 52, 0.07);
}

.category-section::after {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 166, 43, 0.08);
}


/* Main Container */

.category-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.category-heading {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.category-subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    margin-bottom: 16px;
    border: 1px solid rgba(71, 143, 39, 0.25);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.85);
    color: #4a8f2b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: 0 8px 25px rgba(70, 117, 48, 0.08);
}

.category-heading h2 {
    margin: 0;
    color: #173b1d;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.category-heading p {
    max-width: 680px;
    margin: 17px auto 0;
    color: #69766a;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   CATEGORY GRID
========================================= */

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}


/* =========================================
   CATEGORY CARD
========================================= */

.category-card {
    position: relative;
    display: block;
    padding: 24px 18px 22px;
    border: 1px solid rgba(53, 107, 36, 0.1);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 14px 45px rgba(41, 76, 28, 0.09);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    overflow: hidden;
}

.category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        145deg,
        rgba(104, 180, 65, 0.08),
        rgba(255, 187, 62, 0.05)
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.category-card:hover {
    transform: translateY(-10px);
    border-color: rgba(79, 145, 45, 0.26);
    box-shadow: 0 24px 55px rgba(41, 76, 28, 0.16);
}

.category-card:hover::before {
    opacity: 1;
}


/* =========================================
   CIRCULAR IMAGE
========================================= */

.category-image-wrapper {
    position: relative;
    z-index: 2;
    width: 185px;
    height: 185px;
    margin: 0 auto 22px;
    padding: 8px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(101, 179, 62, 0.18),
        rgba(255, 181, 55, 0.18)
    );
}

.category-image {
    display: block;
    width: 100%;
    height: 100%;
    border: 5px solid #ffffff;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 12px 30px rgba(34, 73, 23, 0.16);
    transition: transform 0.5s ease;
}

.category-card:hover .category-image {
    transform: scale(1.08) rotate(2deg);
}


/* Product Count */

.category-count {
    position: absolute;
    right: -4px;
    bottom: 14px;
    padding: 7px 12px;
    border: 3px solid #ffffff;
    border-radius: 50px;
    background: linear-gradient(135deg, #4f9a30, #72b948);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(65, 135, 40, 0.25);
}


/* =========================================
   CARD CONTENT
========================================= */

.category-content {
    position: relative;
    z-index: 2;
}

.category-content h3 {
    margin: 0 0 9px;
    color: #193d20;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.category-content span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #659d3e;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.category-content span::after {
    content: "→";
    font-size: 17px;
    transition: transform 0.3s ease;
}

.category-card:hover .category-content h3 {
    color: #569331;
}

.category-card:hover .category-content span::after {
    transform: translateX(5px);
}


/* =========================================
   VIEW ALL BUTTON
========================================= */

.category-button-wrapper {
    margin-top: 42px;
    text-align: center;
}

.category-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 13px 27px;
    border: 2px solid #559a34;
    border-radius: 50px;
    background: linear-gradient(135deg, #559a34, #76b94b);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(70, 143, 41, 0.25);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.category-view-button span {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.category-view-button:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #417d27, #65a940);
    box-shadow: 0 18px 38px rgba(70, 143, 41, 0.32);
}

.category-view-button:hover span {
    transform: translateX(5px);
}


/* =========================================
   RESPONSIVE TABLET
========================================= */

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

    .category-section {
        padding: 70px 20px;
    }

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .category-image-wrapper {
        width: 170px;
        height: 170px;
    }
}


/* =========================================
   RESPONSIVE SMALL TABLET
========================================= */

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

    .category-heading {
        margin-bottom: 38px;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .category-card {
        padding: 22px 16px 20px;
    }

    .category-image-wrapper {
        width: 175px;
        height: 175px;
    }
}


/* =========================================
   RESPONSIVE MOBILE
========================================= */

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

    .category-section {
        padding: 55px 14px;
    }

    .category-heading {
        margin-bottom: 30px;
    }

    .category-subtitle {
        padding: 7px 14px;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .category-heading h2 {
        font-size: 32px;
        letter-spacing: -0.7px;
    }

    .category-heading p {
        margin-top: 13px;
        font-size: 14px;
        line-height: 1.7;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .category-card {
        padding: 15px 10px 17px;
        border-radius: 20px;
    }

    .category-image-wrapper {
        width: 128px;
        height: 128px;
        margin-bottom: 15px;
        padding: 5px;
    }

    .category-image {
        border-width: 3px;
    }

    .category-count {
        right: -4px;
        bottom: 7px;
        padding: 5px 8px;
        border-width: 2px;
        font-size: 8px;
    }

    .category-content h3 {
        margin-bottom: 7px;
        font-size: 15px;
    }

    .category-content span {
        font-size: 10px;
        letter-spacing: 0.4px;
    }

    .category-content span::after {
        font-size: 14px;
    }

    .category-button-wrapper {
        margin-top: 30px;
    }

    .category-view-button {
        min-height: 50px;
        padding: 11px 22px;
        font-size: 14px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

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

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

    .category-card {
        max-width: 300px;
        width: 100%;
        margin: 0 auto;
    }

    .category-image-wrapper {
        width: 160px;
        height: 160px;
    }

    .category-content h3 {
        font-size: 18px;
    }

    .category-content span {
        font-size: 11px;
    }
}

/* =========================================
   WHY CHOOSE URBUN ROOTS
========================================= */

.urbun-why-section {
    position: relative;
    width: 100%;
    padding: 50px 20px;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(117, 181, 67, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(255, 176, 50, 0.11),
            transparent 28%
        ),
        #ffffff;
    overflow: hidden;
}

.urbun-why-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* =========================================
   BACKGROUND SHAPES
========================================= */

.urbun-why-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.urbun-shape-one {
    top: -130px;
    right: -100px;
    width: 330px;
    height: 330px;
    background: rgba(92, 157, 48, 0.06);
}

.urbun-shape-two {
    bottom: -120px;
    left: -100px;
    width: 290px;
    height: 290px;
    background: rgba(255, 169, 47, 0.07);
}


/* =========================================
   MAIN GRID
========================================= */

.urbun-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 75px;
}


/* =========================================
   LEFT IMAGE AREA
========================================= */

.urbun-why-visual {
    position: relative;
    min-height: 590px;
}

.urbun-main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 82%;
    height: 520px;
    padding: 10px;
    border-radius: 35px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(38, 76, 24, 0.17);
}

.urbun-main-image::before {
    content: "";
    position: absolute;
    top: 32px;
    left: -24px;
    width: 75px;
    height: 75px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6bac42, #95ca68);
    z-index: -1;
}

.urbun-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 27px;
    object-fit: cover;
    object-position: center;
}


/* Image Badge */

.urbun-image-badge {
    position: absolute;
    left: 38px;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 210px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 14px 35px rgba(27, 59, 17, 0.18);
    backdrop-filter: blur(12px);
}

.urbun-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eaf6e3;
    font-size: 24px;
}

.urbun-image-badge strong,
.urbun-image-badge small {
    display: block;
}

.urbun-image-badge strong {
    color: #1c4722;
    font-size: 16px;
    font-weight: 800;
}

.urbun-image-badge small {
    margin-top: 3px;
    color: #758276;
    font-size: 12px;
}


/* Small Image */

.urbun-small-image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    height: 245px;
    padding: 8px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(36, 70, 24, 0.18);
}

.urbun-small-image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 21px;
    object-fit: cover;
}


/* Experience Box */

.urbun-experience-box {
    position: absolute;
    top: 55px;
    right: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 135px;
    height: 135px;
    border: 8px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7a928, #ffc457);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 16px 38px rgba(204, 128, 11, 0.28);
}

.urbun-experience-box strong {
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}

.urbun-experience-box span {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.urbun-why-content {
    position: relative;
}

.urbun-section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 17px;
    margin-bottom: 17px;
    border: 1px solid rgba(83, 148, 48, 0.22);
    border-radius: 50px;
    background: #f1f9ec;
    color: #599236;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.urbun-why-content h2 {
    max-width: 600px;
    margin: 0;
    color: #173b1d;
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.urbun-why-content h2 span {
    position: relative;
    color: #67a63f;
}

.urbun-why-content h2 span::after {
    content: "";
    position: absolute;
    left: 3px;
    bottom: -4px;
    width: 80%;
    height: 7px;
    border-radius: 10px;
    background: rgba(247, 169, 40, 0.35);
    z-index: -1;
}

.urbun-section-description {
    max-width: 650px;
    margin: 22px 0 30px;
    color: #677568;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   FEATURES GRID
========================================= */

.urbun-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.urbun-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 145px;
    padding: 20px 17px;
    border: 1px solid rgba(57, 110, 37, 0.1);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 34px rgba(42, 78, 29, 0.07);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.urbun-feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 157, 52, 0.24);
    box-shadow: 0 18px 40px rgba(42, 78, 29, 0.13);
}

.urbun-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #edf8e7, #fff7e9);
    font-size: 25px;
    transition: transform 0.35s ease;
}

.urbun-feature-card:hover .urbun-feature-icon {
    transform: rotate(-7deg) scale(1.07);
}

.urbun-feature-content h3 {
    margin: 1px 0 7px;
    color: #1b4221;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

.urbun-feature-content p {
    margin: 0;
    color: #788279;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================
   BOTTOM CTA
========================================= */

.urbun-why-bottom {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 31px;
}

.urbun-shop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex-shrink: 0;
    min-height: 54px;
    padding: 13px 26px;
    border-radius: 50px;
    background: linear-gradient(135deg, #579936, #76b94b);
    color: #ffffff;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(76, 145, 42, 0.27);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.urbun-shop-button span {
    font-size: 21px;
    transition: transform 0.3s ease;
}

.urbun-shop-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(76, 145, 42, 0.35);
}

.urbun-shop-button:hover span {
    transform: translateX(5px);
}


/* Customer Info */

.urbun-customer-info {
    display: flex;
    align-items: center;
    gap: 13px;
}

.urbun-customer-avatars {
    display: flex;
    align-items: center;
}

.urbun-customer-avatars img {
    width: 41px;
    height: 41px;
    margin-left: -10px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(38, 67, 29, 0.14);
}

.urbun-customer-avatars img:first-child {
    margin-left: 0;
}

.urbun-customer-text strong,
.urbun-customer-text span {
    display: block;
}

.urbun-customer-text strong {
    color: #244729;
    font-size: 13px;
    font-weight: 800;
}

.urbun-customer-text span {
    margin-top: 3px;
    color: #7b867d;
    font-size: 11px;
}


/* =========================================
   LAPTOP RESPONSIVE
========================================= */

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

    .urbun-why-grid {
        gap: 45px;
    }

    .urbun-why-visual {
        min-height: 550px;
    }

    .urbun-main-image {
        height: 485px;
    }

    .urbun-experience-box {
        width: 120px;
        height: 120px;
    }

    .urbun-feature-card {
        min-height: 155px;
    }
}


/* =========================================
   TABLET RESPONSIVE
========================================= */

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

    .urbun-why-section {
        padding: 70px 20px;
    }

    .urbun-why-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .urbun-why-visual {
        width: 100%;
        max-width: 650px;
        min-height: 580px;
        margin: 0 auto;
    }

    .urbun-main-image {
        width: 80%;
        height: 515px;
    }

    .urbun-small-image {
        width: 38%;
        height: 235px;
    }

    .urbun-why-content {
        max-width: 750px;
        margin: 0 auto;
        text-align: center;
    }

    .urbun-why-content h2,
    .urbun-section-description {
        margin-right: auto;
        margin-left: auto;
    }

    .urbun-feature-card {
        text-align: left;
    }

    .urbun-why-bottom {
        justify-content: center;
    }
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

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

    .urbun-why-section {
        padding: 55px 14px;
    }

    .urbun-why-grid {
        gap: 42px;
    }

    .urbun-why-visual {
        min-height: 470px;
    }

    .urbun-main-image {
        width: 88%;
        height: 410px;
        padding: 7px;
        border-radius: 27px;
    }

    .urbun-main-image img {
        border-radius: 21px;
    }

    .urbun-small-image {
        width: 43%;
        height: 175px;
        padding: 6px;
        border-radius: 22px;
    }

    .urbun-small-image img {
        border-radius: 17px;
    }

    .urbun-experience-box {
        top: 27px;
        right: 0;
        width: 103px;
        height: 103px;
        border-width: 6px;
    }

    .urbun-experience-box strong {
        font-size: 18px;
    }

    .urbun-experience-box span {
        font-size: 9px;
    }

    .urbun-image-badge {
        left: 18px;
        bottom: 20px;
        min-width: 175px;
        padding: 10px 12px;
    }

    .urbun-badge-icon {
        width: 39px;
        height: 39px;
        font-size: 20px;
    }

    .urbun-image-badge strong {
        font-size: 13px;
    }

    .urbun-image-badge small {
        font-size: 10px;
    }

    .urbun-section-tag {
        margin-bottom: 13px;
        padding: 7px 14px;
        font-size: 10px;
    }

    .urbun-why-content h2 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .urbun-section-description {
        margin-top: 17px;
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 1.75;
    }

    .urbun-feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .urbun-feature-card {
        min-height: auto;
        padding: 17px 15px;
    }

    .urbun-feature-content h3 {
        font-size: 16px;
    }

    .urbun-feature-content p {
        font-size: 12px;
    }

    .urbun-why-bottom {
        flex-direction: column;
        gap: 20px;
    }

    .urbun-shop-button {
        width: 100%;
        max-width: 270px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

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

    .urbun-why-visual {
        min-height: 410px;
    }

    .urbun-main-image {
        width: 94%;
        height: 355px;
    }

    .urbun-small-image {
        width: 45%;
        height: 145px;
    }

    .urbun-experience-box {
        width: 88px;
        height: 88px;
    }

    .urbun-experience-box strong {
        font-size: 15px;
    }

    .urbun-experience-box span {
        margin-top: 4px;
        font-size: 8px;
    }

    .urbun-image-badge {
        left: 12px;
        bottom: 12px;
        min-width: 155px;
    }

    .urbun-badge-icon {
        display: none;
    }

    .urbun-why-content h2 {
        font-size: 31px;
    }

    .urbun-customer-info {
        flex-direction: column;
    }

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

/* =========================================
   FEATURED PRODUCTS SECTION
========================================= */

.featured-products-section {
    width: 100%;
    padding: 45px 20px;
    background:
        radial-gradient(
            circle at top left,
            rgba(104, 171, 64, 0.12),
            transparent 30%
        ),
        #f8fbf5;
    overflow: hidden;
}

.featured-products-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* Section Heading */

.featured-products-heading {
    max-width: 720px;
    margin: 0 auto 26px;
    text-align: center;
}

.featured-products-tag {
    display: inline-block;
    padding: 8px 17px;
    margin-bottom: 14px;
    border: 1px solid rgba(84, 145, 48, 0.2);
    border-radius: 50px;
    background: #ffffff;
    color: #60983e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.featured-products-heading h2 {
    margin: 0;
    color: #173c1d;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.15;
}

.featured-products-heading h2 span {
    color: #69a845;
}

.featured-products-heading p {
    max-width: 640px;
    margin: 15px auto 0;
    color: #6e7b6f;
    font-size: 15px;
    line-height: 1.8;
}


/* Slider Wrapper */

.featured-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.featured-products-slider {
    width: 100%;
    overflow: hidden;
    padding: 12px 4px 24px;
}

.featured-products-track {
    display: flex;
    margin: 0 -10px;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.featured-product-slide {
    flex: 0 0 25%;
    min-width: 0;
    padding: 0 10px;
}


/* Product Card */

.featured-product-card {
    height: 100%;
    border: 1px solid rgba(60, 112, 40, 0.1);
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 13px 38px rgba(43, 78, 31, 0.09);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.featured-product-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 22px 48px rgba(43, 78, 31, 0.16);
}


/* Product Image */

.featured-product-image {
    position: relative;
    height: 235px;
    padding: 14px;
    background: linear-gradient(145deg, #f5f9f1, #edf5e7);
    overflow: hidden;
}

.featured-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-product-card:hover .featured-product-image img {
    transform: scale(1.08);
}


/* Product Badge */

.featured-product-badge {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 30px;
    background: #f4a52e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(204, 124, 12, 0.23);
}

.featured-product-badge.organic {
    background: #65a43e;
}

.featured-product-badge.fresh {
    background: #2f8c5a;
}


/* Wishlist */

.featured-wishlist-button {
    position: absolute;
    top: 23px;
    right: 23px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #315836;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(31, 67, 26, 0.14);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.featured-wishlist-button:hover,
.featured-wishlist-button.active {
    background: #f05757;
    color: #ffffff;
    transform: scale(1.08);
}


/* Product Content */

.featured-product-content {
    padding: 21px 20px 22px;
}

.featured-product-category {
    display: block;
    margin-bottom: 7px;
    color: #68a144;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.featured-product-content h3 {
    min-height: 48px;
    margin: 0 0 9px;
    color: #1c4122;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
}

.featured-product-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
}

.featured-product-rating span {
    color: #f7ad28;
    font-size: 13px;
    letter-spacing: 1px;
}

.featured-product-rating small {
    color: #869087;
    font-size: 11px;
}


/* Product Footer */

.featured-product-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #edf0eb;
}

.featured-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.featured-product-price strong {
    color: #4f9132;
    font-size: 21px;
    font-weight: 900;
}

.featured-product-price del {
    color: #a1aaa1;
    font-size: 13px;
}

.featured-product-price small {
    width: 100%;
    color: #838d84;
    font-size: 11px;
}


/* Cart Button */

.featured-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #579b37, #7abc4e);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(76, 145, 43, 0.25);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.featured-cart-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 27px rgba(76, 145, 43, 0.34);
}


/* Slider Navigation */

.featured-slider-button {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(71, 131, 43, 0.16);
    border-radius: 50%;
    background: #ffffff;
    color: #4e8d31;
    font-size: 21px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(40, 77, 28, 0.14);
    transform: translateY(-50%);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.featured-slider-button:hover {
    background: #5d9f3b;
    color: #ffffff;
}

.featured-prev-button {
    left: -25px;
}

.featured-next-button {
    right: -25px;
}


/* Slider Dots */

.featured-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.featured-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cad6c3;
    cursor: pointer;
    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background 0.3s ease;
}

.featured-slider-dot.active {
    width: 28px;
    border-radius: 20px;
    background: #65a440;
}


/* =========================================
   RESPONSIVE
========================================= */

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

    .featured-product-slide {
        flex-basis: 33.333%;
    }

    .featured-prev-button {
        left: -10px;
    }

    .featured-next-button {
        right: -10px;
    }
}


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

    .featured-products-section {
        padding: 65px 18px;
    }

    .featured-product-slide {
        flex-basis: 50%;
    }

    .featured-slider-button {
        width: 43px;
        height: 43px;
        font-size: 18px;
    }

    .featured-prev-button {
        left: -4px;
    }

    .featured-next-button {
        right: -4px;
    }
}


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

    .featured-products-section {
        padding: 52px 14px;
    }

    .featured-products-heading {
        margin-bottom: 28px;
    }

    .featured-products-heading h2 {
        font-size: 32px;
    }

    .featured-products-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .featured-products-track {
        margin: 0;
    }

    .featured-product-slide {
        flex-basis: 100%;
        padding: 0;
    }

    .featured-product-card {
        max-width: 360px;
        margin: 0 auto;
    }

    .featured-product-image {
        height: 245px;
    }

    .featured-slider-button {
        top: 47%;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.95);
    }

    .featured-prev-button {
        left: 4px;
    }

    .featured-next-button {
        right: 4px;
    }
}

/* ==================================================
   TODAY'S SPECIAL OFFERS SECTION
================================================== */

.special-offers-section {
    position: relative;
    width: 100%;
    padding: 45px 20px;
    background:
        radial-gradient(
            circle at top left,
            rgba(105, 169, 68, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 174, 54, 0.12),
            transparent 28%
        ),
        #f8fbf5;
    overflow: hidden;
}

.special-offers-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* ==================================================
   SECTION HEADING
================================================== */

.special-offers-heading {
    max-width: 740px;
    margin: 0 auto 26px;
    text-align: center;
}

.special-offers-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(90, 153, 51, 0.2);
    border-radius: 50px;
    background: #ffffff;
    color: #5f993b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(54, 96, 35, 0.08);
}

.special-offers-heading h2 {
    margin: 0;
    color: #173b1d;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.special-offers-heading h2 span {
    color: #69a943;
}

.special-offers-heading p {
    max-width: 650px;
    margin: 16px auto 0;
    color: #6c796d;
    font-size: 15px;
    line-height: 1.8;
}


/* ==================================================
   OFFERS GRID
================================================== */

.special-offers-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.special-offer-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(43, 78, 31, 0.12);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.special-offer-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 58px rgba(43, 78, 31, 0.18);
}


/* ==================================================
   MAIN LARGE OFFER
================================================== */

.special-offer-main {
    grid-row: 1 / 4;
    min-height: 570px;
}

.special-offer-main > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.special-offer-main:hover > img {
    transform: scale(1.06);
}

.special-offer-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(18, 55, 24, 0.9) 0%,
            rgba(26, 68, 31, 0.72) 45%,
            rgba(21, 57, 26, 0.12) 100%
        );
}

.special-offer-content {
    position: absolute;
    top: 50%;
    left: 55px;
    z-index: 3;
    width: 55%;
    transform: translateY(-50%);
}

.special-offer-label {
    display: inline-flex;
    padding: 8px 15px;
    margin-bottom: 17px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.special-offer-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(36px, 4vw, 59px);
    font-weight: 800;
    line-height: 1.08;
}

.special-offer-content h3 strong {
    display: block;
    color: #ffc95b;
    font-weight: 900;
}

.special-offer-content p {
    max-width: 500px;
    margin: 18px 0 27px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.75;
}

.special-offer-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.special-offer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f3a72e, #ffc758);
    color: #173b1d;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(240, 158, 30, 0.3);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.special-offer-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.special-offer-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 35px rgba(240, 158, 30, 0.4);
}

.special-offer-button:hover span {
    transform: translateX(5px);
}

.special-offer-code {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
}

.special-offer-code strong {
    display: block;
    margin-top: 3px;
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 1px;
}

.special-discount-circle {
    position: absolute;
    top: 35px;
    right: 35px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 115px;
    border: 7px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: linear-gradient(135deg, #f39f26, #ffc756);
    color: #173b1d;
    box-shadow: 0 14px 35px rgba(148, 92, 9, 0.28);
}

.special-discount-circle strong {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.special-discount-circle span {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* ==================================================
   SMALL OFFER CARDS
================================================== */

.small-offer-card {
    display: flex;
    align-items: center;
    min-height: 176px;
    padding: 25px;
}

.vegetable-offer {
    background: linear-gradient(135deg, #e7f5de, #f4faef);
}

.delivery-offer {
    background: linear-gradient(135deg, #fff3dc, #fff9ee);
}

.combo-offer {
    background: linear-gradient(135deg, #e9f3ff, #f4f9ff);
}

.small-offer-content {
    position: relative;
    z-index: 2;
    width: 62%;
}

.small-offer-badge {
    display: inline-flex;
    padding: 6px 11px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.8);
    color: #5a9138;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.small-offer-content h3 {
    margin: 0;
    color: #1a4020;
    font-size: 25px;
    font-weight: 850;
    line-height: 1.18;
}

.small-offer-content h3 span {
    display: block;
    color: #6aa642;
}

.delivery-offer .small-offer-content h3 span {
    color: #db8b1d;
}

.combo-offer .small-offer-content h3 span {
    color: #3e7ea8;
}

.small-offer-content p {
    margin: 9px 0 12px;
    color: #6e796e;
    font-size: 12px;
    line-height: 1.55;
}

.small-offer-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4f8b32;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.small-offer-link span {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.small-offer-link:hover span {
    transform: translateX(4px);
}

.small-offer-image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    height: 100%;
}

.small-offer-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(231, 245, 222, 1),
        rgba(231, 245, 222, 0)
    );
}

.combo-offer .small-offer-image::before {
    background: linear-gradient(
        90deg,
        rgba(233, 243, 255, 1),
        rgba(233, 243, 255, 0)
    );
}

.small-offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.small-offer-card:hover .small-offer-image img {
    transform: scale(1.08);
}

.delivery-icon-box {
    position: absolute;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 105px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 52px;
    box-shadow: 0 13px 32px rgba(170, 109, 20, 0.12);
    transform: rotate(-5deg);
    transition: transform 0.35s ease;
}

.delivery-offer:hover .delivery-icon-box {
    transform: rotate(0) scale(1.06);
}


/* ==================================================
   BOTTOM OFFER STRIP
================================================== */

.special-offer-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 21px 25px;
    border-radius: 24px;
    background: linear-gradient(135deg, #183e20, #346d35);
    box-shadow: 0 17px 42px rgba(25, 66, 31, 0.2);
}

.special-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 29px;
}

.special-strip-content {
    flex: 1;
}

.special-strip-content span {
    display: block;
    margin-bottom: 4px;
    color: #ffc65a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.special-strip-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
}

.special-strip-code {
    padding: 9px 14px;
    border: 1px dashed rgba(255, 255, 255, 0.34);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    text-align: center;
}

.special-strip-code strong {
    display: block;
    margin-top: 3px;
    color: #ffc75b;
    font-size: 14px;
    letter-spacing: 1px;
}

.special-strip-button {
    flex-shrink: 0;
    padding: 12px 21px;
    border-radius: 50px;
    background: #ffffff;
    color: #24532b;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.special-strip-button:hover {
    transform: translateY(-3px);
    background: #ffc75b;
}


/* ==================================================
   RESPONSIVE TABLET
================================================== */

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

    .special-offers-section {
        padding: 65px 18px;
    }

    .special-offers-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .special-offer-main {
        grid-column: 1 / 3;
        grid-row: auto;
        min-height: 500px;
    }

    .small-offer-card {
        min-height: 210px;
    }

    .combo-offer {
        grid-column: 1 / 3;
    }

    .special-offer-strip {
        flex-wrap: wrap;
    }
}


/* ==================================================
   RESPONSIVE MOBILE
================================================== */

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

    .special-offers-section {
        padding: 52px 14px;
    }

    .special-offers-heading {
        margin-bottom: 30px;
    }

    .special-offers-heading h2 {
        font-size: 33px;
    }

    .special-offers-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .special-offers-grid {
        grid-template-columns: 1fr;
    }

    .special-offer-main,
    .combo-offer {
        grid-column: auto;
    }

    .special-offer-main {
        min-height: 470px;
    }

    .special-offer-overlay {
        background: linear-gradient(
            0deg,
            rgba(18, 55, 24, 0.95),
            rgba(18, 55, 24, 0.2)
        );
    }

    .special-offer-content {
        top: auto;
        right: 25px;
        bottom: 30px;
        left: 25px;
        width: auto;
        transform: none;
    }

    .special-offer-content h3 {
        font-size: 39px;
    }

    .special-offer-content p {
        margin: 14px 0 20px;
        font-size: 13px;
    }

    .special-discount-circle {
        top: 22px;
        right: 22px;
        width: 90px;
        height: 90px;
        border-width: 5px;
    }

    .special-discount-circle strong {
        font-size: 23px;
    }

    .small-offer-card {
        min-height: 190px;
    }

    .special-offer-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .special-strip-button {
        width: 100%;
        text-align: center;
    }
}


/* ==================================================
   SMALL MOBILE
================================================== */

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

    .special-offer-main {
        min-height: 445px;
        border-radius: 23px;
    }

    .special-offer-content {
        right: 18px;
        bottom: 23px;
        left: 18px;
    }

    .special-offer-content h3 {
        font-size: 34px;
    }

    .special-offer-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .small-offer-card {
        min-height: 235px;
        padding: 21px;
    }

    .small-offer-content {
        width: 70%;
    }

    .small-offer-content h3 {
        font-size: 22px;
    }

    .small-offer-image {
        width: 48%;
    }

    .delivery-icon-box {
        right: 17px;
        width: 80px;
        height: 80px;
        font-size: 40px;
    }

    .special-strip-content h3 {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* =========================================
   DELIVERY PROCESS SECTION
========================================= */

.delivery-process-section {
    position: relative;
    width: 100%;
    padding: 45px 20px;
    background:
        radial-gradient(
            circle at top left,
            rgba(109, 174, 67, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(246, 170, 48, 0.11),
            transparent 28%
        ),
        #ffffff;
    overflow: hidden;
}

.delivery-process-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(99, 159, 59, 0.06);
}

.delivery-process-section::after {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -100px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: rgba(247, 169, 45, 0.07);
}

.delivery-process-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.delivery-process-heading {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.delivery-process-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    margin-bottom: 15px;
    border: 1px solid rgba(83, 145, 48, 0.2);
    border-radius: 50px;
    background: #f4faef;
    color: #609b3b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.delivery-process-heading h2 {
    margin: 0;
    color: #173b1d;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.delivery-process-heading h2 span {
    color: #69a744;
}

.delivery-process-heading p {
    max-width: 650px;
    margin: 16px auto 0;
    color: #6d796e;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   PROCESS GRID
========================================= */

.delivery-process-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        70px
        minmax(0, 1fr)
        70px
        minmax(0, 1fr)
        70px
        minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}


/* =========================================
   PROCESS CARD
========================================= */

.delivery-process-card {
    position: relative;
    min-height: 315px;
    padding: 31px 24px 25px;
    border: 1px solid rgba(62, 111, 42, 0.1);
    border-radius: 25px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 14px 40px rgba(43, 78, 31, 0.09);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.delivery-process-card::before {
    content: "";
    position: absolute;
    top: -65px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(108, 174, 66, 0.07);
}

.delivery-process-card:hover {
    transform: translateY(-9px);
    border-color: rgba(91, 154, 54, 0.24);
    box-shadow: 0 23px 52px rgba(43, 78, 31, 0.15);
}


/* Step Number */

.delivery-step-number {
    position: absolute;
    top: 18px;
    right: 19px;
    color: rgba(91, 153, 53, 0.16);
    font-size: 37px;
    font-weight: 900;
    line-height: 1;
}


/* Process Icon */

.delivery-process-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 83px;
    height: 83px;
    margin: 0 auto 22px;
    border: 8px solid #ffffff;
    border-radius: 24px;
    background: linear-gradient(135deg, #e9f6e1, #fff6e7);
    font-size: 37px;
    box-shadow: 0 13px 30px rgba(59, 100, 39, 0.13);
    transform: rotate(-4deg);
    transition: transform 0.35s ease;
}

.delivery-process-card:hover .delivery-process-icon {
    transform: rotate(0deg) scale(1.07);
}

.delivery-process-card h3 {
    margin: 0 0 12px;
    color: #1a4020;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.35;
}

.delivery-process-card p {
    margin: 0;
    color: #737f74;
    font-size: 13px;
    line-height: 1.7;
}

.delivery-step-label {
    display: inline-flex;
    margin-top: 18px;
    padding: 7px 12px;
    border-radius: 50px;
    background: #f0f8eb;
    color: #649840;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}


/* =========================================
   CONNECTORS
========================================= */

.delivery-process-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.delivery-process-connector span {
    width: 17px;
    height: 2px;
    border-radius: 20px;
    background: #b7cba9;
}

.delivery-process-connector strong {
    color: #65a33f;
    font-size: 25px;
    line-height: 1;
}


/* =========================================
   BOTTOM STRIP
========================================= */

.delivery-process-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 33px;
    padding: 22px 25px;
    border-radius: 24px;
    background: linear-gradient(135deg, #173d1e, #356e37);
    box-shadow: 0 18px 43px rgba(26, 68, 31, 0.2);
}

.delivery-process-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 29px;
}

.delivery-process-bottom-content {
    flex: 1;
}

.delivery-process-bottom-content span {
    display: block;
    margin-bottom: 4px;
    color: #ffc45c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.delivery-process-bottom-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.45;
}

.delivery-process-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    min-height: 48px;
    padding: 11px 21px;
    border-radius: 50px;
    background: #ffffff;
    color: #25522a;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.delivery-process-button span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.delivery-process-button:hover {
    transform: translateY(-3px);
    background: #ffc45c;
}

.delivery-process-button:hover span {
    transform: translateX(4px);
}


/* =========================================
   LAPTOP RESPONSIVE
========================================= */

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

    .delivery-process-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .delivery-process-connector {
        display: none;
    }

    .delivery-process-card {
        min-height: 330px;
    }
}


/* =========================================
   TABLET RESPONSIVE
========================================= */

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

    .delivery-process-section {
        padding: 65px 18px;
    }

    .delivery-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .delivery-process-card {
        min-height: 300px;
    }
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

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

    .delivery-process-section {
        padding: 52px 14px;
    }

    .delivery-process-heading {
        margin-bottom: 30px;
    }

    .delivery-process-heading h2 {
        font-size: 33px;
    }

    .delivery-process-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .delivery-process-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .delivery-process-card {
        min-height: auto;
        padding: 27px 20px 23px;
    }

    .delivery-process-icon {
        width: 75px;
        height: 75px;
        margin-bottom: 18px;
        font-size: 32px;
    }

    .delivery-process-card h3 {
        font-size: 18px;
    }

    .delivery-process-card p {
        font-size: 13px;
    }

    .delivery-process-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .delivery-process-button {
        width: 100%;
    }
}

/* =========================================
   HEALTHY LIVING TIPS SECTION
========================================= */

.healthy-tips-section {
    position: relative;
    width: 100%;
    padding: 45px 20px;
    background:
        radial-gradient(
            circle at top left,
            rgba(104, 169, 65, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(247, 171, 51, 0.11),
            transparent 28%
        ),
        #f8fbf5;
    overflow: hidden;
}

.healthy-tips-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(97, 157, 58, 0.06);
}

.healthy-tips-section::after {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -90px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: rgba(247, 170, 48, 0.07);
}

.healthy-tips-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.healthy-tips-heading {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.healthy-tips-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    margin-bottom: 15px;
    border: 1px solid rgba(87, 149, 51, 0.2);
    border-radius: 50px;
    background: #ffffff;
    color: #5f993b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(51, 92, 34, 0.07);
}

.healthy-tips-heading h2 {
    margin: 0;
    color: #173b1d;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.healthy-tips-heading h2 span {
    color: #68a843;
}

.healthy-tips-heading p {
    max-width: 650px;
    margin: 16px auto 0;
    color: #6d796e;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   MAIN GRID
========================================= */

.healthy-tips-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 24px;
    align-items: stretch;
}


/* =========================================
   FEATURED TIP CARD
========================================= */

.healthy-featured-card {
    border: 1px solid rgba(57, 109, 38, 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(43, 78, 31, 0.11);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.healthy-featured-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 58px rgba(43, 78, 31, 0.17);
}

.healthy-featured-image {
    position: relative;
    height: 365px;
    overflow: hidden;
}

.healthy-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s ease;
}

.healthy-featured-card:hover .healthy-featured-image img {
    transform: scale(1.06);
}

.healthy-featured-badge {
    position: absolute;
    top: 22px;
    left: 22px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.93);
    color: #5d9838;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 9px 24px rgba(40, 75, 28, 0.16);
    backdrop-filter: blur(10px);
}

.healthy-featured-content {
    padding: 28px 28px 29px;
}

.healthy-tip-category {
    display: block;
    margin-bottom: 9px;
    color: #68a443;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.healthy-featured-content h3 {
    margin: 0;
    color: #193f20;
    font-size: 28px;
    font-weight: 850;
    line-height: 1.35;
}

.healthy-featured-content p {
    margin: 14px 0 22px;
    color: #707c71;
    font-size: 14px;
    line-height: 1.75;
}

.healthy-tip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 18px;
    border-top: 1px solid #edf1ea;
}

.healthy-read-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 50px;
    background: linear-gradient(135deg, #579b37, #79b94d);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(76, 143, 43, 0.24);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.healthy-read-button span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.healthy-read-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(76, 143, 43, 0.33);
}

.healthy-read-button:hover span {
    transform: translateX(4px);
}

.healthy-read-time {
    color: #7b867c;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================
   SMALL TIPS GRID
========================================= */

.healthy-small-tips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.healthy-tip-card {
    display: flex;
    flex-direction: column;
    min-height: 270px;
    padding: 23px 21px;
    border: 1px solid rgba(59, 111, 40, 0.1);
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 13px 38px rgba(43, 78, 31, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.healthy-tip-card:hover {
    transform: translateY(-7px);
    border-color: rgba(89, 151, 52, 0.22);
    box-shadow: 0 21px 45px rgba(43, 78, 31, 0.14);
}

.healthy-tip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 61px;
    height: 61px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eaf6e3, #fff5e6);
    font-size: 29px;
    box-shadow: 0 10px 24px rgba(55, 96, 37, 0.1);
    transition: transform 0.35s ease;
}

.healthy-tip-card:hover .healthy-tip-icon {
    transform: rotate(-6deg) scale(1.06);
}

.healthy-tip-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.healthy-tip-content > span {
    display: block;
    margin-bottom: 7px;
    color: #69a343;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.healthy-tip-content h3 {
    margin: 0;
    color: #1b4121;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.4;
}

.healthy-tip-content p {
    margin: 11px 0 16px;
    color: #737e74;
    font-size: 12px;
    line-height: 1.7;
}

.healthy-tip-content a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: #578f36;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.healthy-tip-content a span {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.healthy-tip-content a:hover span {
    transform: translateX(4px);
}


/* =========================================
   BOTTOM STRIP
========================================= */

.healthy-tips-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 25px;
    padding: 22px 25px;
    border-radius: 24px;
    background: linear-gradient(135deg, #173d1e, #356e37);
    box-shadow: 0 18px 43px rgba(26, 68, 31, 0.2);
}

.healthy-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 29px;
}

.healthy-bottom-content {
    flex: 1;
}

.healthy-bottom-content span {
    display: block;
    margin-bottom: 4px;
    color: #ffc45a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.healthy-bottom-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.45;
}

.healthy-bottom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    min-height: 48px;
    padding: 11px 21px;
    border-radius: 50px;
    background: #ffffff;
    color: #25522a;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.healthy-bottom-button span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.healthy-bottom-button:hover {
    transform: translateY(-3px);
    background: #ffc45a;
}

.healthy-bottom-button:hover span {
    transform: translateX(4px);
}


/* =========================================
   TABLET RESPONSIVE
========================================= */

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

    .healthy-tips-section {
        padding: 65px 18px;
    }

    .healthy-tips-grid {
        grid-template-columns: 1fr;
    }

    .healthy-small-tips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .healthy-tip-card {
        min-height: 250px;
    }
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

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

    .healthy-tips-section {
        padding: 52px 14px;
    }

    .healthy-tips-heading {
        margin-bottom: 30px;
    }

    .healthy-tips-heading h2 {
        font-size: 33px;
    }

    .healthy-tips-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .healthy-featured-image {
        height: 280px;
    }

    .healthy-featured-content {
        padding: 23px 20px 24px;
    }

    .healthy-featured-content h3 {
        font-size: 23px;
    }

    .healthy-tip-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .healthy-small-tips {
        grid-template-columns: 1fr;
    }

    .healthy-tip-card {
        min-height: auto;
    }

    .healthy-tips-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .healthy-bottom-button {
        width: 100%;
    }
}


/* ==========================================
   URBUN ROOTS PREMIUM FOOTER
========================================== */

.urbun-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #ffffff;

    background:
        radial-gradient(
            circle at top left,
            rgba(120, 184, 42, 0.14),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #043c20 0%,
            #07512b 52%,
            #0b6132 100%
        );
}


/* ==========================================
   DECORATIVE SHAPES
========================================== */

.footer-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.footer-shape-one {
    top: 180px;
    right: -140px;

    width: 330px;
    height: 330px;

    border: 55px solid rgba(120, 184, 42, 0.07);
}

.footer-shape-two {
    bottom: 40px;
    left: -100px;

    width: 240px;
    height: 240px;

    background: rgba(120, 184, 42, 0.05);
}


/* ==========================================
   NEWSLETTER SECTION
========================================== */

.footer-newsletter {
    position: relative;
    z-index: 2;
    padding: 0 0 22px;
}

.newsletter-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    padding: 30px 35px;

    background:
        linear-gradient(
            135deg,
            #78b82a,
            #4f991b
        );

    border-radius: 0 0 24px 24px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.15);
}

.newsletter-content {
    max-width: 590px;

    display: flex;
    align-items: center;
    gap: 18px;
}

.newsletter-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #4f991b;
    background: #ffffff;

    border-radius: 17px;

    font-size: 24px;

    box-shadow:
        0 10px 24px rgba(3, 63, 31, 0.18);
}

.newsletter-small-title {
    display: block;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.newsletter-content h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: clamp(21px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.25;
}

.newsletter-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================
   NEWSLETTER FORM
========================================== */

.newsletter-form {
    width: min(500px, 100%);

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 7px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 12px 30px rgba(3, 63, 31, 0.15);
}

.newsletter-input {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 11px;

    padding-left: 14px;
}

.newsletter-input i {
    color: #4f991b;
    font-size: 15px;
}

.newsletter-input input {
    width: 100%;
    height: 45px;

    padding: 0;

    color: #1b2b22;
    background: transparent;

    border: none;
    outline: none;

    font-size: 13px;
}

.newsletter-input input::placeholder {
    color: #86948b;
}

.newsletter-form button {
    min-width: 135px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 19px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #064927,
            #0a5d31
        );

    border: none;
    border-radius: 11px;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.3s ease;
}

.newsletter-form button:hover {
    background: #043c20;
    transform: translateY(-2px);
}


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

.footer-main {
    position: relative;
    z-index: 2;

    padding: 58px 0 48px;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.35fr
        0.8fr
        0.9fr
        1.1fr;

    gap: 48px;
}


/* ==========================================
   TEXT BRAND
========================================== */

.footer-brand {
    margin-bottom: 20px;
}

.footer-brand-name {
    display: inline-block;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: clamp(31px, 3vw, 43px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -1.5px;

    transition: 0.3s ease;
}

.footer-brand-name span {
    color: #9fd659;
}

.footer-brand-name:hover {
    color: #b6e47e;
}

.footer-brand-tagline {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;

    letter-spacing: 0.3px;
}

.footer-description {
    max-width: 390px;

    margin: 0 0 23px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;
    line-height: 1.85;
}


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

.footer-features {
    display: grid;
    gap: 12px;

    margin-bottom: 23px;
}

.footer-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-feature-item > span {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #b7eb79;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    font-size: 15px;
}

.footer-feature-item strong,
.footer-feature-item small {
    display: block;
}

.footer-feature-item strong {
    margin-bottom: 3px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
}

.footer-feature-item small {
    color: rgba(255, 255, 255, 0.58);

    font-size: 11px;
}


/* ==========================================
   SOCIAL ICONS
========================================== */

.footer-social {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-social a {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 11px;

    font-size: 14px;

    transition: 0.3s ease;
}

.footer-social a:hover {
    color: #064927;
    background: #9fd659;
    border-color: #9fd659;

    transform: translateY(-4px);
}


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

.footer-title {
    position: relative;

    margin: 12px 0 25px;
    padding-bottom: 14px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 800;
}

.footer-title::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 43px;
    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #9fd659,
            #6aad27
        );
}

.footer-title::after {
    content: "";

    position: absolute;

    left: 49px;
    bottom: 0;

    width: 7px;
    height: 3px;

    border-radius: 20px;

    background: #9fd659;
}


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

.footer-links {
    display: grid;
    gap: 13px;
}

.footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;
    font-weight: 500;

    transition: 0.3s ease;
}

.footer-links li a i {
    color: #91cc4d;

    font-size: 10px;

    transition: 0.3s ease;
}

.footer-links li a:hover {
    color: #ffffff;
    transform: translateX(5px);
}

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


/* ==========================================
   CONTACT LIST
========================================== */

.footer-contact-list {
    display: grid;
    gap: 17px;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #aee26d;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;

    font-size: 14px;
}

.footer-contact-list small {
    display: block;

    margin-bottom: 4px;

    color: #9fd659;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.footer-contact-list p,
.footer-contact-list a {
    margin: 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 12px;
    line-height: 1.65;

    transition: 0.3s ease;
}

.footer-contact-list a:hover {
    color: #ffffff;
}


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

.footer-bottom {
    position: relative;
    z-index: 2;

    background: rgba(2, 45, 23, 0.78);

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-wrapper {
    min-height: 72px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 25px;
}

.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 11px;
}

.footer-bottom p strong {
    color: #aee26d;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.66);

    font-size: 10px;

    transition: 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #aee26d;
}

.footer-bottom-links span {
    width: 3px;
    height: 3px;

    background: #78b82a;

    border-radius: 50%;
}

.footer-payment {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.footer-payment span {
    margin-right: 3px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 10px;
}

.footer-payment i {
    color: rgba(255, 255, 255, 0.8);

    font-size: 23px;
}


/* ==========================================
   TABLET RESPONSIVE
========================================== */

@media (max-width: 1100px) {

    .newsletter-wrapper {
        gap: 24px;
        padding: 27px;
    }

    .newsletter-content {
        max-width: 500px;
    }

    .footer-grid {
        grid-template-columns:
            1.3fr
            0.8fr
            0.9fr;

        gap: 38px;
    }

    .footer-column:last-child {
        grid-column: span 3;
    }

    .footer-contact-list {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 820px) {

    .newsletter-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-content {
        max-width: 100%;
    }

    .newsletter-form {
        width: 100%;
    }

    .footer-main {
        padding: 48px 0 38px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    .footer-column:last-child {
        grid-column: span 2;
    }

    .footer-bottom-wrapper {
        grid-template-columns: 1fr;

        justify-items: center;

        gap: 12px;

        padding: 20px 0;

        text-align: center;
    }

    .footer-payment {
        justify-content: center;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 575px) {

    .footer-newsletter {
        padding-bottom: 7px;
    }

    .newsletter-wrapper {
        gap: 21px;

        padding: 24px 18px;

        border-radius: 0 0 19px 19px;
    }

    .newsletter-content {
        align-items: flex-start;
        gap: 13px;
    }

    .newsletter-icon {
        width: 49px;
        height: 49px;

        border-radius: 13px;

        font-size: 19px;
    }

    .newsletter-content h3 {
        font-size: 20px;
    }

    .newsletter-content p {
        font-size: 12px;
    }

    .newsletter-form {
        flex-direction: column;
        padding: 8px;
    }

    .newsletter-input {
        padding: 0 11px;
    }

    .newsletter-form button {
        width: 100%;
    }

    .footer-main {
        padding: 43px 0 32px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-column:last-child {
        grid-column: auto;
    }

    .footer-brand-name {
        font-size: 32px;
    }

    .footer-brand-tagline {
        font-size: 11px;
    }

    .footer-description {
        font-size: 12px;
    }

    .footer-title {
        margin-top: 0;
        margin-bottom: 19px;
    }

    .footer-contact-list {
        grid-template-columns: 1fr;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
    }

    .footer-payment span {
        display: none;
    }

}


/* ==========================================
   VERY SMALL MOBILE
========================================== */

@media (max-width: 380px) {

    .newsletter-content {
        display: block;
    }

    .newsletter-icon {
        margin-bottom: 13px;
    }

    .footer-brand-name {
        font-size: 29px;
    }

    .footer-bottom-links {
        gap: 8px;
    }

}
/* ==================================================
   URBUN ROOTS EVEN / ODD SECTION BACKGROUNDS
   ADD THIS CODE AT THE END OF STYLE.CSS
================================================== */

:root {
    --section-white: #ffffff;
    --section-green:
        radial-gradient(
            circle at top left,
            rgba(79, 153, 27, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(120, 184, 42, 0.09),
            transparent 28%
        ),
        #f3f9ef;
}


/* 1. SHOP BY CATEGORY — LIGHT GREEN */

.category-section {
    background: var(--section-green);
}


/* 2. WHY CHOOSE URBUN ROOTS — WHITE */

.urbun-why-section {
    background: var(--section-white);
}


/* 3. FEATURED PRODUCTS — LIGHT GREEN */

.featured-products-section {
    background: var(--section-green);
}


/* 4. TODAY'S SPECIAL OFFERS — WHITE */

.special-offers-section {
    background: var(--section-white);
}


/* 5. DELIVERY PROCESS — LIGHT GREEN */

.delivery-process-section {
    background: var(--section-green);
}


/* 6. HEALTHY LIVING TIPS — WHITE */

.healthy-tips-section {
    background: var(--section-white);
}
/* ==========================================================
   HERO SECTION — GRADIENT (matches index-3, client-approved)
========================================== */

.urbun-hero {
    background: linear-gradient(120deg, #043c20 0%, #0b5830 30%, #4f991b 65%, #78b82a 100%) !important;
}

.hero-badge{
    color: #ffffff !important;
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.28) !important;
    backdrop-filter: blur(6px);
}
.hero-content h1{ color: #ffffff !important; }
.hero-content h1 span{
    background: linear-gradient(90deg, #ffe9a8, #d9f5b7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.hero-content > p{ color: rgba(255,255,255,0.88) !important; }

.hero-secondary-btn{
    color: #ffffff !important;
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.35) !important;
}
.hero-secondary-btn:hover{ background: #ffffff !important; color: #064927 !important; }

.hero-benefit-item strong{ color: #ffffff !important; }
.hero-benefit-item small{ color: rgba(255,255,255,0.72) !important; }
.hero-benefit-item > span{
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #d9f5b7 !important;
}

.hero-image-circle{
    background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.85) 72%) !important;
    border-color: rgba(255,255,255,0.9) !important;
}